From bcbfa3f74ac265268a455ce78f8a0a37e7fa0c97 Mon Sep 17 00:00:00 2001 From: Pascal Jufer Date: Wed, 13 Dec 2023 15:53:15 +0100 Subject: [PATCH] Fix various styling issues in block editor interface (#20733) * Fix various styling issues for block editor * Use border instead of box-shadow --- .changeset/lazy-impalas-attack.md | 5 + .../input-block-editor/editorjs-overrides.css | 356 +++++++++--------- .../input-block-editor/input-block-editor.vue | 3 +- 3 files changed, 174 insertions(+), 190 deletions(-) create mode 100644 .changeset/lazy-impalas-attack.md diff --git a/.changeset/lazy-impalas-attack.md b/.changeset/lazy-impalas-attack.md new file mode 100644 index 0000000000..2f1ccff383 --- /dev/null +++ b/.changeset/lazy-impalas-attack.md @@ -0,0 +1,5 @@ +--- +'@directus/app': patch +--- + +Fixed various styling issues with block editor interface diff --git a/app/src/interfaces/input-block-editor/editorjs-overrides.css b/app/src/interfaces/input-block-editor/editorjs-overrides.css index 5e0e8d91f2..1d9d05f502 100644 --- a/app/src/interfaces/input-block-editor/editorjs-overrides.css +++ b/app/src/interfaces/input-block-editor/editorjs-overrides.css @@ -4,6 +4,10 @@ --border-color: var(--theme--form--field--input--border-color) !important; } +.codex-editor ::selection { + background-color: var(--theme--background-accent); +} + .codex-editor .ce-toolbar__plus, .codex-editor .ce-toolbar__settings-btn { color: var(--theme--form--field--input--foreground); @@ -21,12 +25,7 @@ fill: var(--theme--form--field--input--foreground) !important; } -.codex-editor .ce-inline-toolbar .ce-inline-tool--active svg, -.codex-editor .ce-settings .cdx-settings-button--active svg { - fill: var(--theme--primary) !important; -} - -.codex-editor .cdx-settings-button--active { +.codex-editor .ce-inline-toolbar .ce-inline-tool--active svg { color: var(--theme--primary); } @@ -41,30 +40,43 @@ } .codex-editor .cdx-search-field { + border-width: var(--theme--border-width); + border-color: var(--theme--form--field--input--border-color); border-radius: var(--theme--border-radius) !important; - border: none; - background: var(--theme--form--field--input--background-subdued); + background: var(--theme--form--field--input--background); +} + +.codex-editor .cdx-search-field:hover { + border-color: var(--theme--form--field--input--border-color-hover); } .codex-editor .ce-popover { - background: var(--theme--background); + background: var(--theme--form--field--input--background-subdued); border-color: var(--theme--form--field--input--border-color); border-width: var(--theme--border-width); border-radius: var(--theme--border-radius); } -.codex-editor .ce-popover-item__title { +.codex-editor .ce-popover-item, +.codex-editor .ce-popover-item--confirmation .ce-popover-item__title { color: var(--theme--form--field--input--foreground); } .codex-editor .ce-popover-item:not(.ce-popover-item--confirmation):hover { - background: var(--v-list-background-color-hover); + background: var(--theme--background-normal); } -.codex-editor .ce-popover-item--focused { - --webkit-box-shadow: none; - box-shadow: none; - background: var(--v-list-background-color-active) !important; +.codex-editor .ce-popover-item.ce-popover-item--confirmation, +.codex-editor .ce-popover-item.ce-popover-item--confirmation:hover { + background: var(--theme--danger-background); +} + +.codex-editor .ce-popover-item.ce-popover-item--confirmation .ce-popover-item__icon { + color: var(--theme--danger); +} + +.codex-editor .ce-popover-item.ce-popover-item--focused { + background: var(--theme--background-normal); } .codex-editor .ce-popover-item--confirmation .ce-popover-item-label { @@ -72,45 +84,21 @@ } .codex-editor .ce-popover-item--active { + background: var(--theme--background-accent); +} + +.codex-editor .ce-popover-item.ce-popover-item--active:hover { + background: var(--theme--background-accent); +} + +.codex-editor .ce-popover-item__icon { + background: transparent; + box-shadow: unset; + border: 1px solid var(--theme--foreground-subdued); +} + +.codex-editor .ce-popover-item--active .ce-popover-item__icon { color: var(--theme--primary); - background: var(--v-list-background-color-active); -} - -.codex-editor .ce-popover-item:hover { - background: var(--v-list-background-color-hover) !important; -} - -.codex-editor .ce-popover-item--confirmation, -.codex-editor .ce-popover-item--confirmation:hover { - background: var(--danger-alt) !important; -} - -.codex-editor .ce-popover-item-icon { - background: var(--theme--background); - border: var(--theme--border-width) solid var(--theme--form--field--input--border-color); - box-shadow: none; -} - -.codex-editor .ce-popover-item-icon svg { - fill: var(--theme--form--field--input--foreground); -} - -.codex-editor .ce-popover-item-secondary-label { - color: var(--theme--form--field--input--foreground-subdued); -} - -.codex-editor .ce-popover__items:not(:first-child) { - border-top: var(--theme--border-width) solid var(--theme--form--field--input--border-color); - padding-top: 8px; -} - -.codex-editor .image-tool--loading .image-tool__image, -.codex-editor .ce-block--selected .ce-block__content { - background: var(--theme--background-normal); -} - -.codex-editor .image-tool--loading .image-tool__image { - border-color: var(--theme--form--field--input--border-color); } .codex-editor .ce-inline-toolbar__toggler-and-button-wrapper { @@ -119,7 +107,7 @@ .codex-editor .ce-inline-toolbar__dropdown { margin: 0; - border-color: var(--theme--form--field--input--border-color); + border-color: var(--theme--background-subdued); } .codex-editor .ce-inline-tool { @@ -136,7 +124,6 @@ /* Tooltips */ .ct { - -webkit-box-shadow: none; box-shadow: none; } @@ -148,7 +135,7 @@ .ct__content { background-color: var(--background-inverted); color: var(--foreground-inverted); - border-radius: 4px; + border-radius: var(--theme--border-radius); padding: 8px; font-size: inherit; } @@ -177,28 +164,16 @@ .codex-editor .ce-inline-toolbar__dropdown:hover, .codex-editor .ce-inline-toolbar .ce-inline-tool:hover, .codex-editor .ce-settings .ce-settings__button:hover { - background: var(--theme--background-accent); + background: var(--theme--background-normal); } -.codex-editor .ce-conversion-toolbar .ce-conversion-tool--focused:not(:hover) { - --webkit-box-shadow: unset; - - color: var(--theme--primary); - background-color: var( - --v-list-item-background-color-hover, - var(--v-list-background-color-hover, var(--theme--background-normal)) - ) !important; +.codex-editor .ce-conversion-toolbar .ce-conversion-tool--focused { box-shadow: unset; + background-color: transparent !important; } .codex-editor .ce-conversion-tool:hover { - --webkit-box-shadow: unset; - - color: var(--v-list-item-color-hover, var(--v-list-color-hover, var(--theme--foreground))); - background-color: var( - --v-list-item-background-color-hover, - var(--v-list-background-color-hover, var(--theme--background-normal)) - ) !important; + background-color: var(--theme--background-normal) !important; box-shadow: unset; } @@ -207,15 +182,13 @@ } .codex-editor .ce-conversion-tool__icon { + border: 1px solid var(--theme--foreground-subdued); + box-shadow: unset; background: transparent; } /* Textarea and inputs */ -.codex-editor [contentEditable='true'][data-placeholder]::before { - font-weight: unset; -} - .codex-editor .ce-code__textarea { font-family: var(--theme--fonts--monospace--font-family); } @@ -224,7 +197,7 @@ .codex-editor .ce-code__textarea { color: var(--theme--form--field--input--foreground); font-size: inherit; - background-color: var(--theme--background); + background-color: transparent; border: var(--theme--border-width) solid var(--theme--form--field--input--border-color); border-radius: var(--theme--border-radius); box-shadow: unset; @@ -241,7 +214,6 @@ } .codex-editor .ce-inline-tool-input { - color: var(--theme--primary); background: var(--theme--background-normal); border-top-color: var(--theme--form--field--input--border-color); } @@ -249,30 +221,20 @@ /* Buttons */ .codex-editor .cdx-button { - color: var(--v-button-color); - font-weight: var(--v-button-font-weight); - font-size: var(--v-button-font-size); + color: var(--foreground-inverted); + font-weight: 600; + font-size: 16px; text-decoration: none; - background-color: var(--v-button-background-color); - border: var(--theme--border-width) solid var(--v-button-background-color); + background-color: var(--theme--primary); + border: var(--theme--border-width) solid var(--theme--primary); border-radius: var(--theme--border-radius); cursor: pointer; } .codex-editor .cdx-button:hover { - color: var(--v-button-color-hover); - background-color: var(--v-button-background-color-hover); - border-color: var(--v-button-background-color-hover); -} - -/* General components re-style */ - -.codex-editor .cdx-attaches, -.codex-editor .cdx-personality { - color: var(--theme--form--field--input--foreground); - background: var(--theme--background-normal); - border-color: var(--theme--form--field--input--border-color); - box-shadow: unset; + color: var(--foreground-inverted); + background-color: var(--theme--primary-accent); + border-color: var(--theme--primary-accent); } /* Paragraph */ @@ -292,6 +254,10 @@ padding-left: 22px; } +.codex-editor .ce-block blockquote { + border-left: 2px dashed var(--theme--form--field--input--border-color); +} + /* Image Tool */ .codex-editor .image-tool { @@ -300,34 +266,29 @@ --border-color: var(--theme--form--field--input--border-color); } -/* Personality */ - -.codex-editor .cdx-personality__description { - font-weight: unset; - font-size: 0.9em; - font-style: oblique; +.codex-editor .image-tool--loading .image-tool__image { + background: var(--theme--background-normal); } -.codex-editor .cdx-personality .cdx-personality__photo { - background-color: transparent; -} - -.codex-editor .cdx-personality__link { - color: var(--theme--primary); - font-size: 0.72em; +.codex-editor .image-tool--loading .image-tool__image { + border-color: var(--theme--form--field--input--border-color); } /* Checklist */ -.codex-editor .cdx-checklist__item-checkbox { +.codex-editor .cdx-checklist__item-checkbox-check { background: transparent; - border-color: var(--theme--form--field--input--border-color); + border-color: var(--theme--foreground-subdued); border-width: var(--theme--border-width); border-radius: 4px; } -.codex-editor .cdx-checklist__item-text { - padding: 3px 0; +.codex-editor .cdx-checklist__item-checkbox-check:hover { + border-color: var(--theme--primary); +} + +.codex-editor .cdx-checklist__item:not(.cdx-checklist__item--checked) .cdx-checklist__item-checkbox-check svg { + display: none; } /* Ripple effect when enabling a checkbox */ @@ -360,40 +321,49 @@ /* Attaches */ +.codex-editor .cdx-attaches { + color: var(--theme--form--field--input--foreground); + background: var(--theme--background-subdued); +} + .codex-editor .cdx-attaches--with-file { border: var(--theme--border-width) solid var(--theme--form--field--input--border-color); } .codex-editor .cdx-attaches--with-file .cdx-attaches__file-icon { - padding: 5px; - background: var(--theme--background-accent); - border-radius: var(--theme--border-radius); + display: inline-flex; + align-items: center; + justify-content: center; + height: 36px; + width: 36px; margin-right: 12px; } -.codex-editor .cdx-attaches--with-file .cdx-attaches__file-icon::before { - background: transparent; -} - .codex-editor .cdx-attaches--with-file .cdx-attaches__file-icon-background { + height: 100%; + width: 100%; margin-right: 0; + background-color: var(--overlay-color); + border: var(--theme--border-width) solid var(--theme--form--field--input--border-color); + border-radius: var(--theme--border-radius); } -.codex-editor .cdx-attaches--with-file .cdx-attaches__title { - color: var(--theme--form--field--input--foreground); +.codex-editor .cdx-attaches--with-file .cdx-attaches__file-icon-label { + top: unset; + left: unset; } .codex-editor .cdx-attaches--with-file .cdx-attaches__download-button { - background: var(--theme--form--field--input--background-subdued); + background: transparent; border: var(--theme--border-width) solid var(--theme--form--field--input--border-color); } .codex-editor .cdx-attaches--with-file .cdx-attaches__download-button:hover { - background: var(--background-highlight); + background: var(--theme--background-normal); } .codex-editor .cdx-attaches--with-file .cdx-attaches__download-button svg { - fill: var(--v-button-background-color); + color: var(--theme--primary); } .codex-editor .cdx-attaches__size { @@ -404,69 +374,74 @@ .codex-editor .ce-block .inline-code { padding: 4px; - color: var(--v-chip-background-color, var(--theme--background-normal)); + color: var(--theme--background-normal); font-family: monospace; - background-color: var(--v-chip-color, var(--theme--foreground)); + font-weight: 400; + background-color: var(--theme--foreground); border-radius: 4px; } -/* tc module */ +.codex-editor .ce-block .inline-code::selection { + background-color: var(--theme--warning); +} + +/* Table */ .codex-editor .tc-wrap { - --color-background: var( - --v-list-item-background-color-active, - var(--v-list-background-color-active, var(--theme--background-normal)) - ); + --color-background: var(--theme--background-normal); --color-border: var(--theme--form--field--input--border-color); - --color-background-hover: var( - --v-list-item-background-color-hover, - var(--v-list-background-color-hover, var(--theme--background-normal)) - ); + --color-background-hover: var(--theme--background-normal); } .codex-editor .tc-popover { - --color-background: var(--theme--background-normal); - --color-border: var(--theme--background-normal); - --color-background-hover: var(--theme--background-accent); + --color-background: var(--theme--form--field--input--background-subdued); + --color-border: var(--theme--form--field--input--border-color); + --color-background-hover: var(--theme--form--field--input--border-color); } -.tc-cell--selected, -.tc-cell--selected::after, -.tc-row--selected, -.tc-row--selected::after { - background: var(--background-highlight); +.codex-editor .tc-popover__item .tc-popover__item-icon { + background: transparent; + border: 1px solid var(--theme--foreground-subdued); } -.tc-toolbox { - --toggler-dots-color: var(--theme--form--field--input--foreground); - --toggler-dots-color-hovered: var(--theme--form--field--input--foreground-accent); +.codex-editor .tc-popover__item:hover .tc-popover__item-icon { + border: 1px solid var(--theme--foreground-subdued); } -.tc-toolbox__toggler:hover { - fill: var(--theme--background-accent) !important; +.codex-editor .tc-popover__item--confirm, +.codex-editor .tc-popover__item--confirm:hover { + color: var(--theme--form--field--input--foreground); + background: var(--theme--danger-background); } -.codex-editor .tc-toolbox__toggler svg rect:first-child { - /* This is very ugly, but there no other way to set background of the element */ - fill: var(--theme--background-normal) !important; - border-radius: var(--theme--border-radius); +.codex-editor .tc-popover__item--confirm .tc-popover__item-icon { + color: var(--theme--danger); } -.codex-editor .tc-toolbox__toggler:hover svg rect:first-child { - /* This is very ugly, but there no other way to set background of the element */ - fill: var(--theme--background-accent) !important; +.codex-editor .tc-cell--selected, +.codex-editor .tc-row--selected, +.codex-editor .tc-row--selected::after { + background: var(--theme--primary-background); } -.tc-add-column:hover, -.tc-add-row:hover { - background-color: var(--theme--primary-background); +.codex-editor .tc-toolbox { + --toggler-dots-color: var(--theme--foreground-subdued); + --toggler-dots-color-hovered: var(--theme--foreground); } -.tc-add-row:hover::before { - background-color: var( - --v-list-item-background-color-hover, - var(--v-list-background-color-hover, var(--theme--background-normal)) - ); +.codex-editor .tc-add-column:hover, +.codex-editor .tc-add-row:hover { + background-color: var(--theme--background-normal); +} + +.codex-editor .tc-add-column svg, +.codex-editor .tc-add-row svg { + color: var(--theme--foreground-subdued); +} + +.codex-editor .tc-add-column:hover svg, +.codex-editor .tc-add-row:hover svg { + color: var(--theme--foreground); } .interface.subdued .codex-editor { @@ -492,6 +467,18 @@ text-align: right; } +.codex-editor .ce-align-buttons .cdx-settings-button svg { + fill: var(--theme--foreground); +} + +.codex-editor .ce-align-buttons .cdx-settings-button--active { + background: var(--theme--background-accent); +} + +.codex-editor .ce-align-buttons .cdx-settings-button--active svg { + fill: var(--theme--primary); +} + .codex-editor .ce-align-buttons svg path { stroke: none; } @@ -503,60 +490,53 @@ .codex-editor .ce-block { margin-top: 1.5em; margin-bottom: 1.5em; - font-weight: inherit; + /* Editor.js expect this to default to light */ + font-weight: 400; font-family: inherit; } .codex-editor .ce-block h1 { - font-weight: 300; font-size: 44px; line-height: 52px; } .codex-editor .ce-block h2 { - font-weight: 600; font-size: 34px; line-height: 38px; } .codex-editor .ce-block h3 { - font-weight: 600; font-size: 26px; line-height: 31px; } .codex-editor .ce-block h4 { - font-weight: 600; font-size: 22px; line-height: 28px; } .codex-editor .ce-block h5 { - font-weight: 600; font-size: 18px; line-height: 26px; } .codex-editor .ce-block h6 { - font-weight: 600; font-size: 16px; line-height: 24px; } -.codex-editor .ce-block p { - margin-top: 20px; - margin-bottom: 20px; - font-size: 16px; - font-family: inherit; - line-height: 32px; -} - .codex-editor .ce-block a { color: var(--theme--primary); } -.codex-editor .ce-block a.btn { - color: #fff !important; +.codex-editor .ce-block--selected .ce-block__content { + border-radius: var(--theme--border-radius); + background: var(--theme--primary-background); +} + +/* Fix link pseudo selection background when editing link */ +.codex-editor .ce-block.ce-block--focused .ce-block__content span[style='background-color: rgb(168, 214, 255);'] { + background-color: var(--theme--background-accent) !important; } .codex-editor .ce-block ul, @@ -588,13 +568,6 @@ border-radius: 4px; } -.codex-editor .ce-block blockquote { - font-size: 18px; - font-style: italic; - line-height: 34px; - border-left: 2px dashed var(--theme--form--field--input--border-color); -} - .codex-editor .ce-block video, .codex-editor .ce-block iframe, .codex-editor .ce-block img { @@ -645,4 +618,11 @@ .codex-editor .ce-inline-tool--active { color: var(--theme--primary); + background-color: var(--theme--background-normal); +} + +/* Toggle Block */ + +.codex-editor .ce-block span.toggle-block__icon[style='color: black;'] { + color: var(--theme--foreground) !important; } diff --git a/app/src/interfaces/input-block-editor/input-block-editor.vue b/app/src/interfaces/input-block-editor/input-block-editor.vue index 07d424345b..d8d69565c5 100644 --- a/app/src/interfaces/input-block-editor/input-block-editor.vue +++ b/app/src/interfaces/input-block-editor/input-block-editor.vue @@ -198,8 +198,7 @@ function sanitizeValue(value: any): EditorJS.OutputData | null { } .bordered { - padding: var(--theme--form--field--input--padding) 4px var(--theme--form--field--input--padding) - calc(var(--theme--form--field--input--padding) + 8px) !important; + padding: var(--theme--form--field--input--padding) max(32px, calc(var(--theme--form--field--input--padding) + 16px)); background-color: var(--theme--background); border: var(--theme--border-width) solid var(--theme--form--field--input--border-color); border-radius: var(--theme--border-radius);