2019-05-01 14:57:44 +08:00
|
|
|
:root {
|
|
|
|
--main-font-family: inherit;
|
|
|
|
--main-font-size: normal;
|
|
|
|
--tree-font-family: inherit;
|
|
|
|
--tree-font-size: normal;
|
|
|
|
--detail-font-family: inherit;
|
|
|
|
--detail-font-size: normal;
|
|
|
|
--detail-text-font-family: inherit;
|
|
|
|
--main-background-color: white;
|
|
|
|
--main-text-color: black;
|
|
|
|
--main-border-color: #ccc;
|
2019-10-05 04:21:14 +08:00
|
|
|
--accented-background-color: #f5f5f5;
|
2019-05-01 14:57:44 +08:00
|
|
|
--more-accented-background-color: #ccc;
|
|
|
|
--header-background-color: #f8f8f8;
|
|
|
|
--button-background-color: #eee;
|
|
|
|
--button-disabled-background-color: #ccc;
|
|
|
|
--button-border-color: #ddd;
|
|
|
|
--button-text-color: black;
|
|
|
|
--button-border-radius: 5px;
|
|
|
|
--muted-text-color: #444;
|
|
|
|
--input-text-color: black;
|
|
|
|
--input-background-color: white;
|
|
|
|
--hover-item-text-color: black;
|
|
|
|
--hover-item-background-color: #eee;
|
|
|
|
--active-item-text-color: black;
|
|
|
|
--active-item-background-color: #ccc;
|
|
|
|
--menu-text-color: black;
|
|
|
|
--menu-background-color: white;
|
|
|
|
--tooltip-background-color: #f8f8f8;
|
|
|
|
--link-color: blue;
|
2019-08-31 02:34:32 +08:00
|
|
|
--modal-background-color: white;
|
|
|
|
--modal-backdrop-color: black;
|
2019-05-01 14:57:44 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
body.theme-black {
|
|
|
|
--main-background-color: black;
|
|
|
|
--main-text-color: white;
|
|
|
|
--main-border-color: #ddd;
|
|
|
|
--accented-background-color: #222;
|
|
|
|
--more-accented-background-color: #444;
|
|
|
|
--header-background-color: black;
|
|
|
|
--button-background-color: #333;
|
|
|
|
--button-border-color: #444;
|
|
|
|
--button-text-color: white;
|
|
|
|
--button-border-radius: 5px;
|
|
|
|
--muted-text-color: #ccc;
|
|
|
|
--input-text-color: white;
|
|
|
|
--input-background-color: black;
|
|
|
|
--hover-item-text-color: black;
|
|
|
|
--hover-item-background-color: #aaa;
|
|
|
|
--active-item-text-color: black;
|
|
|
|
--active-item-background-color: #ccc;
|
|
|
|
--menu-text-color: white;
|
|
|
|
--menu-background-color: #222;
|
|
|
|
--tooltip-background-color: black;
|
|
|
|
--link-color: lightskyblue;
|
2019-08-31 02:34:32 +08:00
|
|
|
--modal-background-color: black;
|
|
|
|
--modal-backdrop-color: #444;
|
2019-05-01 14:57:44 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
body.theme-black .CodeMirror {
|
|
|
|
filter: invert(100%) hue-rotate(180deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
body.theme-dark {
|
|
|
|
--main-background-color: #333;
|
|
|
|
--main-text-color: white;
|
|
|
|
--main-border-color: #ddd;
|
|
|
|
--accented-background-color: #555;
|
|
|
|
--more-accented-background-color: #777;
|
|
|
|
--header-background-color: #333;
|
|
|
|
--button-background-color: #555;
|
|
|
|
--button-border-color: #444;
|
|
|
|
--button-text-color: white;
|
|
|
|
--button-border-radius: 5px;
|
|
|
|
--muted-text-color: #ccc;
|
|
|
|
--input-text-color: white;
|
|
|
|
--input-background-color: #333;
|
|
|
|
--hover-item-text-color: black;
|
|
|
|
--hover-item-background-color: #aaa;
|
|
|
|
--active-item-text-color: black;
|
|
|
|
--active-item-background-color: #ccc;
|
|
|
|
--menu-text-color: white;
|
|
|
|
--menu-background-color: #222;
|
|
|
|
--tooltip-background-color: #333;
|
|
|
|
--link-color: lightskyblue;
|
2019-08-31 02:34:32 +08:00
|
|
|
--modal-background-color: #333;
|
|
|
|
--modal-backdrop-color: #444;
|
2019-05-01 14:57:44 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
body.theme-dark .CodeMirror {
|
|
|
|
filter: invert(90%) hue-rotate(180deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
|
|
/* -- Overrides generic colors. ------------------------------------------------------------- */
|
|
|
|
|
2019-08-28 01:50:57 +08:00
|
|
|
--ck-color-base-text: var(--main-text-color);
|
2019-05-01 14:57:44 +08:00
|
|
|
--ck-color-base-foreground: var(--accented-background-color);
|
|
|
|
--ck-color-focus-border: var(--main-border-color);
|
|
|
|
--ck-color-text: var(--main-text-color);
|
|
|
|
--ck-color-shadow-drop: var(--main-background-color);
|
|
|
|
--ck-color-shadow-inner: var(--main-background-color);
|
|
|
|
|
|
|
|
/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
|
|
|
|
|
|
|
|
--ck-color-button-default-background: var(--accented-background-color);
|
|
|
|
--ck-color-button-default-hover-background: var(--more-accented-background-color);
|
|
|
|
--ck-color-button-default-active-background: var(--more-accented-background-color);
|
|
|
|
--ck-color-button-default-active-shadow: var(--more-accented-background-color);
|
|
|
|
--ck-color-button-default-disabled-background: var(--accented-background-color);
|
|
|
|
|
|
|
|
--ck-color-button-on-background: var(--accented-background-color);
|
|
|
|
--ck-color-button-on-hover-background: var(--more-accented-background-color);
|
|
|
|
--ck-color-button-on-active-background: var(--more-accented-background-color);
|
|
|
|
--ck-color-button-on-active-shadow: var(--more-accented-background-color);
|
|
|
|
--ck-color-button-on-disabled-background: var(--main-background-color);
|
|
|
|
|
|
|
|
--ck-color-button-action-background: var(--accented-background-color);
|
|
|
|
--ck-color-button-action-hover-background: var(--more-accented-background-color);
|
|
|
|
--ck-color-button-action-active-background: var(--more-accented-background-color);
|
|
|
|
--ck-color-button-action-active-shadow: var(--more-accented-background-color);
|
|
|
|
--ck-color-button-action-disabled-background: var(--main-background-color);
|
|
|
|
--ck-color-button-action-text: var(--main-text-color);
|
|
|
|
|
|
|
|
--ck-color-button-save: hsl(120, 100%, 46%);
|
|
|
|
--ck-color-button-cancel: hsl(15, 100%, 56%);
|
|
|
|
|
|
|
|
/* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
|
|
|
|
|
|
|
|
--ck-color-dropdown-panel-background: var(--accented-background-color);
|
|
|
|
--ck-color-dropdown-panel-border: var(--main-border-color);
|
|
|
|
|
|
|
|
/* -- Overrides the default .ck-input class colors. ----------------------------------------- */
|
|
|
|
|
|
|
|
--ck-color-input-background: var(--accented-background-color);
|
|
|
|
--ck-color-input-border: var(--main-border-color);
|
|
|
|
--ck-color-input-text: var(--main-text-color);
|
|
|
|
--ck-color-input-disabled-background: var(--main-background-color);
|
|
|
|
--ck-color-input-disabled-border: var(--main-border-color);
|
|
|
|
--ck-color-input-disabled-text: var(--muted-text-color);
|
|
|
|
|
|
|
|
/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
|
|
|
|
|
|
|
|
--ck-color-list-background: var(--accented-background-color);
|
|
|
|
--ck-color-list-button-hover-background: var(--ck-color-base-foreground);
|
|
|
|
--ck-color-list-button-on-background: var(--ck-color-base-active);
|
|
|
|
--ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
|
|
|
|
--ck-color-list-button-on-text: var(--ck-color-base-background);
|
|
|
|
|
|
|
|
/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
|
|
|
|
|
|
|
|
--ck-color-panel-background: var(--accented-background-color);
|
|
|
|
--ck-color-panel-border: var(--main-border-color);
|
|
|
|
|
|
|
|
/* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
|
|
|
|
|
|
|
|
--ck-color-toolbar-background: var(--accented-background-color);
|
|
|
|
--ck-color-toolbar-border: var(--main-border-color);
|
|
|
|
|
|
|
|
/* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
|
|
|
|
|
|
|
|
--ck-color-tooltip-background: var(--accented-background-color);
|
|
|
|
--ck-color-tooltip-text: var(--main-text-color);
|
|
|
|
|
|
|
|
/* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
|
|
|
|
|
|
|
|
--ck-color-image-caption-background: var(--main-background-color);
|
|
|
|
--ck-color-image-caption-text: var(--main-text-color);
|
|
|
|
|
|
|
|
/* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
|
|
|
|
|
|
|
|
--ck-color-widget-blurred-border: var(--main-border-color);
|
|
|
|
--ck-color-widget-hover-border: var(--main-border-color);
|
|
|
|
--ck-color-widget-editable-focus-background: var(--main-background-color);
|
|
|
|
|
|
|
|
/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
|
|
|
|
|
|
|
|
--ck-color-link-default: var(--link-color);
|
|
|
|
|
|
|
|
--ck-color-table-focused-cell-background: var(--more-accented-background-color);
|
2019-08-28 01:50:57 +08:00
|
|
|
|
|
|
|
/* todo lists */
|
|
|
|
|
|
|
|
--ck-color-todo-list-checkmark-border: var(--main-border-color);
|
2019-10-08 04:17:22 +08:00
|
|
|
|
|
|
|
--ck-color-engine-placeholder-text: var(--main-text-color);
|
2019-08-11 16:28:49 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
|
|
background-color: var(--main-background-color);
|
|
|
|
color: var(--main-text-color);
|
|
|
|
font-family: var(--main-font-family);
|
|
|
|
}
|
|
|
|
|
|
|
|
a, a:visited, a:hover {
|
|
|
|
color: var(--link-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
input, select, textarea {
|
|
|
|
color: var(--input-text-color) !important;
|
|
|
|
background: var(--input-background-color) !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
table td, table th {
|
|
|
|
color: var(--main-text-color);
|
2019-08-28 01:50:57 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.ck .todo-list__checkmark {
|
|
|
|
top: 10px !important;
|
2019-08-31 02:34:32 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.modal-backdrop {
|
|
|
|
background-color: var(--modal-backdrop-color) !important;
|
2019-05-01 14:57:44 +08:00
|
|
|
}
|