Spaces:
Running
Running
| /* CKEditor overrides | |
| * | |
| * CKEditor ships its whole UI, including its colors, so it is themed through | |
| * its own custom properties rather than by restyling its DOM. Document | |
| * typography comes from the shared .dep-doc rules in globals.css. | |
| */ | |
| .ckeditor-editor-shell, | |
| .ckeditor-editor-shell .ck-editor__editable, | |
| [data-testid="ckeditor-editable"] { | |
| direction: ltr; | |
| unicode-bidi: plaintext; | |
| text-align: left; | |
| } | |
| /* Let the editable fill the sheet instead of CKEditor's default narrow box. */ | |
| .ckeditor-editor-shell .ck.ck-editor__editable { | |
| min-height: 24rem; | |
| border: 0; | |
| box-shadow: none; | |
| } | |
| .ckeditor-editor-shell .ck.ck-toolbar { | |
| border-left: 0; | |
| border-right: 0; | |
| border-top: 0; | |
| } | |
| .ckeditor-editor-shell .ck-content ul, | |
| .ckeditor-editor-shell .ck-content ol, | |
| [data-testid="ckeditor-editable"] ul, | |
| [data-testid="ckeditor-editable"] ol { | |
| margin: 0 0 0.9em; | |
| padding-left: 1.6em; | |
| } | |
| .ckeditor-editor-shell .ck-content ul, | |
| [data-testid="ckeditor-editable"] ul { | |
| list-style-type: disc; | |
| } | |
| .ckeditor-editor-shell .ck-content ol, | |
| [data-testid="ckeditor-editable"] ol { | |
| list-style-type: decimal; | |
| } | |
| /* Dark mode: CKEditor has no dark build, but its UI is driven entirely by these | |
| * custom properties, so remapping them onto the app's tokens is enough. Without | |
| * this the editor stayed a white slab in an otherwise dark page. */ | |
| .dark .ckeditor-editor-shell { | |
| --ck-color-base-background: var(--paper-raised); | |
| --ck-color-base-foreground: var(--paper-sunk); | |
| --ck-color-base-border: var(--ink-16); | |
| --ck-color-base-text: var(--ink); | |
| --ck-color-base-active: var(--mark); | |
| --ck-color-base-active-focus: var(--mark); | |
| --ck-color-focus-border: var(--mark-line); | |
| --ck-color-text: var(--ink); | |
| --ck-color-shadow-drop: rgba(0, 0, 0, 0.5); | |
| --ck-color-shadow-inner: rgba(0, 0, 0, 0.4); | |
| --ck-color-button-default-background: transparent; | |
| --ck-color-button-default-hover-background: var(--ink-08); | |
| --ck-color-button-default-active-background: var(--ink-08); | |
| --ck-color-button-on-background: var(--mark-soft); | |
| --ck-color-button-on-hover-background: var(--mark-soft); | |
| --ck-color-button-on-color: var(--mark); | |
| --ck-color-toolbar-background: var(--paper-sunk); | |
| --ck-color-toolbar-border: var(--ink-16); | |
| --ck-color-dropdown-panel-background: var(--paper-card); | |
| --ck-color-dropdown-panel-border: var(--ink-16); | |
| --ck-color-panel-background: var(--paper-card); | |
| --ck-color-panel-border: var(--ink-16); | |
| --ck-color-list-background: var(--paper-card); | |
| --ck-color-list-button-hover-background: var(--ink-08); | |
| --ck-color-list-button-on-background: var(--mark-soft); | |
| --ck-color-list-button-on-text: var(--mark); | |
| --ck-color-input-background: var(--paper-raised); | |
| --ck-color-input-border: var(--ink-16); | |
| --ck-color-input-text: var(--ink); | |
| --ck-color-labeled-field-label-background: var(--paper-raised); | |
| } | |
| .dark .ckeditor-editor-shell .ck.ck-icon { | |
| color: var(--ink-80); | |
| } | |