From e7c053d273f2c4a5ed988f584fd44da0dca989de Mon Sep 17 00:00:00 2001 From: zadam Date: Wed, 1 May 2019 08:57:44 +0200 Subject: [PATCH] split out themes.css --- src/public/stylesheets/style.css | 179 ------------------------------ src/public/stylesheets/themes.css | 178 +++++++++++++++++++++++++++++ src/views/desktop.ejs | 1 + src/views/mobile.ejs | 1 + 4 files changed, 180 insertions(+), 179 deletions(-) create mode 100644 src/public/stylesheets/themes.css diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 17e0fabcf..c86e092e4 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -1,182 +1,3 @@ -: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; - --accented-background-color: #eee; - --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; - --modal-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; -} - -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; - --modal-background-color: #222; - --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; -} - -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; - --modal-background-color: #555; - --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; -} - -body.theme-dark .CodeMirror { - filter: invert(90%) hue-rotate(180deg); -} - -body { - /* -- Overrides generic colors. ------------------------------------------------------------- */ - - --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); -} - html { /* this fixes FF filter vs. position fixed bug: https://github.com/zadam/trilium/issues/233 */ height: 100%; diff --git a/src/public/stylesheets/themes.css b/src/public/stylesheets/themes.css new file mode 100644 index 000000000..4a5bf443b --- /dev/null +++ b/src/public/stylesheets/themes.css @@ -0,0 +1,178 @@ +: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; + --accented-background-color: #eee; + --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; + --modal-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; +} + +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; + --modal-background-color: #222; + --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; +} + +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; + --modal-background-color: #555; + --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; +} + +body.theme-dark .CodeMirror { + filter: invert(90%) hue-rotate(180deg); +} + +body { + /* -- Overrides generic colors. ------------------------------------------------------------- */ + + --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); +} \ No newline at end of file diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index e809f3809..a111cea56 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -328,6 +328,7 @@ + diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs index b7b8855fb..d516ad3a3 100644 --- a/src/views/mobile.ejs +++ b/src/views/mobile.ejs @@ -98,6 +98,7 @@ +