suneditor
Version:
Vanilla JavaScript based WYSIWYG web editor
165 lines (141 loc) • 5.03 kB
CSS
/** Theme color tokens used by suneditor.css and suneditor-contents.css. */
/** [ assets/design/color.css ] */
.sun-editor.se-theme-midnight,
.sun-editor-editable.se-theme-midnight {
/** --------------------------- content - [colors] ----------- */
/* caret and placeholder */
--se-caret-color: #e4e4e4;
--se-drag-caret-color: #86f0ff;
--se-placeholder-color: #9aa0a6;
/* editable text tones */
--se-edit-font-color: #e4e4e4;
--se-edit-font-pre: #d0d0d0;
--se-edit-font-quote: #b5b5b5;
/* editable surfaces */
--se-edit-background-color: #212121;
--se-edit-background-pre: #1a2a30;
/* content border scale */
--se-edit-border-light: #3d5c6e;
--se-edit-border-dark: #2e4a5a;
--se-edit-border-dark-n1: #355363;
--se-edit-border-dark-n2: #456d7f;
--se-edit-border-table: #5e5e5e;
/* links and horizontal rules */
--se-edit-anchor: #a7b8d6;
--se-edit-anchor-on-back: #2f3b4a;
--se-edit-anchor-on-font: #ffffff;
--se-edit-hr-color: #777;
--se-edit-hr-on-back: #566070;
/* content interaction states */
--se-edit-active: #64c7da;
--se-edit-hover: #58c0d2;
--se-edit-outline: #424242;
/** --------------------------- layout - [colors] ----------- */
--se-main-out-color: #2c2c2c;
--se-main-color: #e4e4e4;
--se-main-color-lighter: #cfcfcf;
--se-main-background-color: #212121;
--se-code-view-color: #e4e4e4;
--se-main-font-color: #e4e4e4;
--se-code-view-background-color: #1a1a1a;
--se-code-view-line-color: #999;
--se-code-view-line-background-color: #252525;
--se-markdown-view-color: #e4e4e4;
--se-markdown-view-background-color: #1a1a1a;
--se-markdown-view-line-color: #999;
--se-markdown-view-line-background-color: #252525;
--se-main-divider-color: #3d4350;
--se-main-border-color: #444;
--se-main-outline-color: #383838;
--se-main-shadow-color: #000;
--se-statusbar-font-color: #a1a1a1;
--se-overlay-background-color: rgba(0, 0, 0, 0.6);
/* finder */
--se-find-match-color: rgba(255, 213, 0, 0.3);
--se-find-current-color: rgba(255, 150, 50, 0.55);
--se-find-no-match-color: rgba(255, 80, 80, 0.2);
/* hover states */
--se-hover-color: #2f3f44;
--se-hover-dark-color: #4b6b72;
--se-hover-dark2-color: #5a7c84;
--se-hover-dark3-color: #689099;
--se-hover-light-color: #7fb0bb;
--se-hover-light2-color: #8fc2cc;
--se-hover-light3-color: #a2d6df;
/* active foreground states */
--se-active-color: #64c7da;
--se-active-hover-color: #7ad9e8;
--se-active-dark-color: #46b4c8;
--se-active-dark2-color: #379daf;
--se-active-dark3-color: #64c7da;
--se-active-dark4-color: #46b4c8;
--se-active-dark5-color: #2a7f8f;
/* active background states */
--se-active-light-color: #26383d;
--se-active-light2-color: #2c4349;
--se-active-light3-color: #334f56;
--se-active-light4-color: #3b5c64;
--se-active-light5-color: #446b75;
--se-active-light6-color: #4f7d88;
/* floating layer shadow */
--se-shadow-layer-color: rgba(0, 0, 0, 0.38);
/* drag feedback */
--se-drag-over-color: #f0c34a;
/* modal, browser, dropdown surfaces */
--se-modal-background-color: #2b2b2b;
--se-modal-color: #f1f1f1;
--se-modal-border-color: #4a4a4a;
--se-modal-anchor-color: #95a5bc;
--se-modal-preview-color: #c2c2c2;
--se-modal-file-input-background-color: #1a1a1a;
--se-modal-input-disabled-color: #888;
--se-modal-input-disabled-background-color: #333;
/* dropdown text */
--se-dropdown-font-color: #e4e4e4;
/* media/controller chrome */
--se-controller-border-color: #4a4a4a;
--se-controller-background-color: #212121;
--se-controller-color: #e4e4e4;
--se-shadow-controller-color: rgba(0, 0, 0, 0.45);
/* input-side button states */
--se-input-btn-border-color: #4a4a4a;
--se-input-btn-disabled-color: #777;
/* table picker */
--se-table-picker-color: #3a3a3a;
--se-table-picker-border-color: #555;
--se-table-picker-highlight-color: #304a5c;
--se-table-picker-highlight-border-color: #6589a0;
/* success status palette */
--se-success-color: #22c55e;
--se-success-dark-color: #16a34a;
--se-success-dark2-color: #15803d;
--se-success-dark3-color: #166534;
--se-success-light-color: #4ade80;
--se-success-light2-color: #86efac;
--se-success-light3-color: #c7f7e3;
--se-success-light4-color: #e9fdf5;
--se-success-light5-color: #f5fffb;
/* error status palette */
--se-error-color: #ef4444;
--se-error-dark-color: #dc2626;
--se-error-dark2-color: #b91c1c;
--se-error-dark3-color: #991b1b;
--se-error-light-color: #f87171;
--se-error-light2-color: #fca5a5;
--se-error-light3-color: #fee2e2;
--se-error-light4-color: #fef2f2;
--se-error-light5-color: #fff5f5;
/* document mode palette */
--se-doc-background: #2c2c2c;
--se-doc-info-page-font-color: #212121;
--se-doc-info-page-background-color: #d0d0d0;
--se-doc-info-font-color: #d0d0d0;
--se-doc-info-active-color: #7f90a8;
/* loading indicator */
--se-loading-color: #7f90a8;
/* show-blocks debug colors */
--se-show-blocks-color: #7f90a8;
--se-show-blocks-li-color: #c084fc;
--se-show-blocks-pre-color: #34d399;
--se-show-blocks-component-color: #f0c34a;
}