@_sh/strapi-plugin-ckeditor 2.0.2 → 2.0.4

package/admin/src/components/Input/CKEditor/theme/common.js

@@ -1,277 +1,232 @@
-import { css } from "styled-components";
-
-export const common = css`
-  .ck {
-    --ck-color-image-caption-background: hsl(0, 0%, 97%);
-    --ck-color-image-caption-text: hsl(0, 0%, 20%);
-    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
-    --ck-color-mention-text: hsl(341, 100%, 30%);
-    --ck-color-table-caption-background: hsl(0, 0%, 97%);
-    --ck-color-table-caption-text: hsl(0, 0%, 20%);
-    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
-    --ck-highlight-marker-green: hsl(120, 93%, 68%);
-    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
-    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
-    --ck-highlight-pen-green: hsl(112, 100%, 27%);
-    --ck-highlight-pen-red: hsl(0, 85%, 49%);
-    --ck-image-style-spacing: 1.5em;
-    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
-    --ck-todo-list-checkmark-size: 16px;
-  }
-
-  
-  .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
-    top: 64px !important;
-  }
-  .ck.ck-reset.ck-dropdown__panel.ck-dropdown__panel_sw.ck-dropdown__panel-visible {
-    border-radius: 4px;
-  }
-
-  .ck-editor__main {
-    
-    --ck-font-face: "Source Sans Pro", system-ui, Roboto, "Helvetica Neue", "Helvetica", Arial, sans-serif;
-    
-    color: var(--ck-color-editor-base-text);
-    font-family: var(--ck-font-face);
-
-    * {
-      font: revert;
-      margin: revert;
-    }
-
-
-    h1 {
-      font-size: 2.3em;
-    }
-
-    h2 {
-      font-size: 1.84em;
-    }
-
-    h3 {
-      font-size: 1.48em;
-    }
-
-    h4 {
-      font-size: 1.22em;
-    }
-
-    h5 {
-      font-size: 1.06em;
-    }
-
-    h6 {
-      font-size: 1em;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      line-height: 1.2em;
-      padding-top: .8em;
-      margin-bottom: .4em
-    }
-
-    blockquote,
-    ol,
-    p,
-    ul {
-      font-size: 1em;
-      line-height: 1.6em;
-      padding-top: .2em;
-      margin-bottom: var(--ck-spacing-large)
-    }
-
-    figcaption {
-      background-color: var(--ck-color-image-caption-background);
-      caption-side: bottom;
-      color: var(--ck-color-image-caption-text);
-      display: table-caption;
-      font-size: 0.75em;
-      outline-offset: -1px;
-      padding: 0.6em;
-      word-break: break-word;
-    }
-
-    a {
-      text-decoration: none;
-      color: #1b3af2;
-    }
-
-    a:hover {
-      text-decoration: underline;
-    }
-
-    .table {
-      margin: 0;
-    }
-
-    ul.todo-list {
-      list-style: none;
-      margin: revert;
-      color: revert;
-      font-family: revert;
-      margin-left: 2rem;
-    }
-
-    ul,
-    ol {
-      list-style: initial;
-      margin-left: 2rem;
-    }
-
-    ol {
-      list-style: decimal;
-    }
-
-    sub {
-      vertical-align: sub;
-    }
-
-    sup {
-      vertical-align: super;
-    }
-
-    .ck.ck-content.ck-editor__editable {
-      line-height: initial;
-      min-height: 12.5rem;
-      border-bottom-left-radius: 0.25rem;
-      border-bottom-right-radius: 0.25rem;
-      transition-property: border-color, box-shadow, max-height;
-      transition-timing-function: ease-in-out;
-      transition-duration: 0.5s;
-      &.ck-focused:not(.ck-editor__nested-editable) {
-        border: 1px solid var(--ck-color-base-border);
-        /* border: var(--ck-focus-ring); */
-        box-shadow: none;
-        transition-property: border-color, box-shadow, max-height;
-        transition-timing-function: ease-in-out;
-        transition-duration: 0.5s;
-      }
-    }
-
-    .ck-focused,
-    .ck-blurred {
-      overflow-y: auto;
-      overflow-x: hidden;
-      transition: max-height 0.5s ease-in-out;
-      ::-webkit-scrollbar {
-        width: 7px;
-      }
-      ::-webkit-scrollbar-track {
-        background: var(--ck-scroll-track-background);
-        border: none;
-      }
-      ::-webkit-scrollbar-thumb {
-        transition: background 2s;
-        background: var(--ck-scroll-thumb-background);
-        border: 1px solid var(--ck-scroll-thumb-border-color);
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        transition: background 2s;
-        background: var(--ck-scroll-thumb-hover-background);
-      }
-      ::-webkit-scrollbar-thumb:active {
-        background: var(--ck-scroll-thumb-active-background);
-      }
-    }
-  }
-
-  .ck .ck-source-editing-area textarea{
-    color: var(--ck-color-text);
-    background-color: var(--ck-color-base-background);
-    border: 1px solid var(--ck-color-base-border) !important;
-    box-shadow: none !important;
-  }
-
-  .ck .ck-block-toolbar-button {
-    min-width: 0 !important;
-    min-height: 0 !important;
-    width: 20px !important;
-    height: 25px !important;
-    margin-left: -2px !important ;
-    
-    & svg {
-      color: var(--ck-color-text) !important;
-      position: absolute;
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  .ck-word-count {
-    margin-top: 0.3rem;
-    display: flex;
-    justify-content: end;
-    gap: 0.3rem;
-    font-size: 0.7rem;
-    font-weight: 500;
-    text-transform: lowercase;
-    /* color: #b3b3c4; */
-  }
-
-  .ck[dir=rtl]{
-    .ck-block-toolbar-button {
-      margin-left: 2px !important ;
-    }
-    .ck-color-input{
-      margin: 0 8px 8px 0 !important;
-      padding: 3px 5px 0 0 !important;
-    }
-    & + div{
-      justify-content: flex-start;
-      & > .ck-word-count {
-          & > div:first-child{
-            order: 2;
-          }
-          & > div:last-child{
-            order: 1;
-          }
-      }
-    }
-  }
-
-
-  .ck .ck-color-input{
-    margin: 0 0 8px 8px !important;
-    padding: 3px 0 0 5px !important;
-    border-radius:0px !important;
-    width: 115px !important;
-    z-index: 1;
-  }
-
-  .ck .ck-color-picker{
-    margin: 0 3px 8px 3px !important;
-    border-radius:0px !important;
-    width: 80px !important;
-  }
-
-  .ck .ck-color-picker-save{
-    margin: 0 0 8px 0 !important;
-    border-radius:0px !important;
-    width: 50px !important;
-  }
-
-
-  .ck.ck-color-ui-dropdown {
-	--ck-color-grid-tile-size: 20px;
-  }
-
-  .ck.ck-color-ui-dropdown .ck-color-grid {
-  	grid-gap: 1px;
-  }
-
-  .ck.ck-color-ui-dropdown .ck-color-grid .ck-button {
-  	border-radius: 0;
-  }
-
-  .ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:hover:not(.ck-disabled),
-  .ck.ck-color-ui-dropdown .ck.ck-color-grid .ck-color-grid__tile:focus:not(.ck-disabled) {
-  	z-index: 1;
-  	transform: scale(1.3);
-  }
-
-`;
+import { css } from "styled-components";
+
+export const common = css`
+  .ck {
+    --ck-color-image-caption-background: hsl(0, 0%, 97%);
+    --ck-color-image-caption-text: hsl(0, 0%, 20%);
+    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
+    --ck-color-mention-text: hsl(341, 100%, 30%);
+    --ck-color-table-caption-background: hsl(0, 0%, 97%);
+    --ck-color-table-caption-text: hsl(0, 0%, 20%);
+    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
+    --ck-highlight-marker-green: hsl(120, 93%, 68%);
+    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
+    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
+    --ck-highlight-pen-green: hsl(112, 100%, 27%);
+    --ck-highlight-pen-red: hsl(0, 85%, 49%);
+    --ck-image-style-spacing: 1.5em;
+    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
+    --ck-todo-list-checkmark-size: 16px;
+  }
+
+  
+  .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
+    top: 64px !important;
+  }
+  .ck.ck-reset.ck-dropdown__panel.ck-dropdown__panel_sw.ck-dropdown__panel-visible {
+    border-radius: 4px;
+  }
+
+  .ck-editor__main {
+    
+    --ck-font-face: "Source Sans Pro", system-ui, Roboto, "Helvetica Neue", "Helvetica", Arial, sans-serif;
+    
+    color: var(--ck-color-editor-base-text);
+    font-family: var(--ck-font-face);
+
+    * {
+      font: revert;
+      margin: revert;
+    }
+
+
+    h1 {
+      font-size: 2.3em;
+    }
+
+    h2 {
+      font-size: 1.84em;
+    }
+
+    h3 {
+      font-size: 1.48em;
+    }
+
+    h4 {
+      font-size: 1.22em;
+    }
+
+    h5 {
+      font-size: 1.06em;
+    }
+
+    h6 {
+      font-size: 1em;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      line-height: 1.2em;
+      padding-top: .8em;
+      margin-bottom: .4em
+    }
+
+    blockquote,
+    ol,
+    p,
+    ul {
+      font-size: 1em;
+      line-height: 1.6em;
+      padding-top: .2em;
+      margin-bottom: var(--ck-spacing-large)
+    }
+
+    figcaption {
+      background-color: var(--ck-color-image-caption-background);
+      caption-side: bottom;
+      color: var(--ck-color-image-caption-text);
+      display: table-caption;
+      font-size: 0.75em;
+      outline-offset: -1px;
+      padding: 0.6em;
+      word-break: break-word;
+    }
+
+    a {
+      text-decoration: none;
+      color: #1b3af2;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    .table {
+      margin: 0;
+    }
+
+    ul.todo-list {
+      list-style: none;
+      margin: revert;
+      color: revert;
+      font-family: revert;
+      margin-left: 2rem;
+    }
+
+    ul,
+    ol {
+      list-style: initial;
+      margin-left: 2rem;
+    }
+
+    ol {
+      list-style: decimal;
+    }
+
+    sub {
+      vertical-align: sub;
+    }
+
+    sup {
+      vertical-align: super;
+    }
+
+    .ck.ck-content.ck-editor__editable {
+      line-height: initial;
+      min-height: 12.5rem;
+      border-bottom-left-radius: 0.25rem;
+      border-bottom-right-radius: 0.25rem;
+      transition-property: border-color, box-shadow, max-height;
+      transition-timing-function: ease-in-out;
+      transition-duration: 0.5s;
+      &.ck-focused:not(.ck-editor__nested-editable) {
+        border: 1px solid var(--ck-color-base-border);
+        /* border: var(--ck-focus-ring); */
+        box-shadow: none;
+        transition-property: border-color, box-shadow, max-height;
+        transition-timing-function: ease-in-out;
+        transition-duration: 0.5s;
+      }
+    }
+
+    .ck-focused,
+    .ck-blurred {
+      overflow-y: auto;
+      overflow-x: hidden;
+      transition: max-height 0.5s ease-in-out;
+      ::-webkit-scrollbar {
+        width: 7px;
+      }
+      ::-webkit-scrollbar-track {
+        background: var(--ck-scroll-track-background);
+        border: none;
+      }
+      ::-webkit-scrollbar-thumb {
+        transition: background 2s;
+        background: var(--ck-scroll-thumb-background);
+        border: 1px solid var(--ck-scroll-thumb-border-color);
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        transition: background 2s;
+        background: var(--ck-scroll-thumb-hover-background);
+      }
+      ::-webkit-scrollbar-thumb:active {
+        background: var(--ck-scroll-thumb-active-background);
+      }
+    }
+  }
+
+  .ck .ck-source-editing-area textarea{
+    color: var(--ck-color-text);
+    background-color: var(--ck-color-base-background);
+    border: 1px solid var(--ck-color-base-border) !important;
+    box-shadow: none !important;
+  }
+
+  .ck .ck-block-toolbar-button {
+    min-width: 0 !important;
+    min-height: 0 !important;
+    width: 20px !important;
+    height: 25px !important;
+    margin-left: -2px !important ;
+    
+    & svg {
+      color: var(--ck-color-text) !important;
+      position: absolute;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .ck-word-count {
+    margin-top: 0.3rem;
+    display: flex;
+    justify-content: end;
+    gap: 0.3rem;
+    font-size: 0.7rem;
+    font-weight: 500;
+    text-transform: lowercase;
+    /* color: #b3b3c4; */
+  }
+
+  .ck[dir=rtl]{
+    .ck-block-toolbar-button {
+      margin-left: 2px !important ;
+    }
+    & + div{
+      justify-content: flex-start;
+      & > .ck-word-count {
+          & > div:first-child{
+            order: 2;
+          }
+          & > div:last-child{
+            order: 1;
+          }
+      }
+    }
+  }
+`;