mirror of
https://github.com/directus/directus.git
synced 2026-04-25 03:00:53 -04:00
Fix various styling issues in block editor interface (#20733)
* Fix various styling issues for block editor * Use border instead of box-shadow
This commit is contained in:
Pascal Jufer
5
.changeset/lazy-impalas-attack.md
Normal file
5
.changeset/lazy-impalas-attack.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@directus/app': patch
|
||||
---
|
||||
|
||||
Fixed various styling issues with block editor interface
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user