From a0edfd1c2700a96851756f187d4a73db0cfffc49 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 22 Jul 2020 23:45:59 +1000 Subject: [PATCH] collect theme variables: dark colours --- mods/core/scrollbars.css | 20 ++-- mods/core/styles.css | 1 + mods/core/theme.css | 243 +++++++++++++++++++++++++++++++++++++++ mods/core/titlebar.css | 51 ++++---- mods/core/titlebar.js | 2 +- 5 files changed, 286 insertions(+), 31 deletions(-) create mode 100644 mods/core/theme.css diff --git a/mods/core/scrollbars.css b/mods/core/scrollbars.css index f512b59..7402d8c 100644 --- a/mods/core/scrollbars.css +++ b/mods/core/scrollbars.css @@ -19,16 +19,18 @@ border-radius: 5px; } -.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb { - background-color: #d9d8d6; - border: 1px solid #cacac8; -} -.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb:hover { - background: #cacac8; -} .smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb { - background-color: #505457; + background-color: var(--theme_dark-scrollbar); + border: var(--theme_dark-scrollbar-border); } .smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb:hover { - background: #696d6f; + background: var(--theme_dark-scrollbar_hover); +} + +.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb { + background-color: var(--theme_light-scrollbar); + border: 1px solid var(--theme_light-scrollbar-border); +} +.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb:hover { + background: var(--theme_light-scrollbar_hover); } diff --git a/mods/core/styles.css b/mods/core/styles.css index 041fcae..3019d73 100644 --- a/mods/core/styles.css +++ b/mods/core/styles.css @@ -5,5 +5,6 @@ * (https://dragonwocky.me/) under the MIT license */ +@import './theme.css'; @import './scrollbars.css'; @import './titlebar.css'; diff --git a/mods/core/theme.css b/mods/core/theme.css new file mode 100644 index 0000000..2aa8999 --- /dev/null +++ b/mods/core/theme.css @@ -0,0 +1,243 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (https://dragonwocky.me/) under the MIT license + */ + +:root { + /** light **/ + + --theme_light-dragarea: #e6e6e6; + --theme_light-button_hover: rgb(239, 239, 239); + --theme_light-button_hover-border: transparent; + --theme_light-button_close: #e81123; + --theme_light-button_close-fill: white; + + --theme_light-scrollbar: #d9d8d6; + --theme_light-scrollbar-border: #cacac8; + --theme_light-scrollbar_hover: #cacac8; + + /** dark **/ + + --theme_dark-main: rgb(47, 52, 55); + --theme_dark-sidebar: rgb(55, 60, 63); + --theme_dark-dragarea: #272d2f; + --theme_dark-primary: rgb(46, 170, 220); + --theme_dark-primary_hover: rgb(6, 156, 205); + --theme_dark-primary_click: rgb(0, 141, 190); + --theme_dark-primary_indicator: rgb(235, 87, 87); + + --theme_dark-card: rgb(63, 68, 71); + --theme_dark-card_border: rgb(63, 68, 71); + --theme_dark-button_hover: rgb(71, 76, 80); + --theme_dark-button_close: #e81123; + --theme_dark-button_close-fill: white; + --theme_dark-button_hover-border: transparent; + --theme_dark-table_border: rgba(255, 255, 255, 0.1); + + --theme_dark-scrollbar: #505457; + --theme_dark-scrollbar-border: transparent; + --theme_dark-scrollbar_hover: #696d6f; + + --theme_dark-text_gray: rgba(151, 154, 155, 0.95); + --theme_dark-text_brown: rgb(147, 114, 100); + --theme_dark-text_orange: rgb(255, 163, 68); + --theme_dark-text_yellow: rgb(255, 220, 73); + --theme_dark-text_green: rgb(77, 171, 154); + --theme_dark-text_blue: rgb(82, 156, 202); + --theme_dark-text_purple: rgb(154, 109, 215); + --theme_dark-text_pink: rgb(226, 85, 161); + --theme_dark-text_red: rgb(255, 115, 105); + --theme_dark-bg_gray: rgba(151, 154, 155, 0.5); + --theme_dark-bg_brown: rgba(147, 114, 100, 0.5); + --theme_dark-bg_orange: rgba(255, 163, 68, 0.5); + --theme_dark-bg_yellow: rgba(255, 220, 73, 0.5); + --theme_dark-bg_green: rgba(77, 171, 154, 0.5); + --theme_dark-bg_blue: rgba(82, 156, 202, 0.5); + --theme_dark-bg_purple: rgba(154, 109, 215, 0.5); + --theme_dark-bg_pink: rgba(226, 85, 161, 0.5); + --theme_dark-bg_red: rgba(255, 115, 105, 0.5); + --theme_dark-line_gray: rgb(69, 75, 78); + --theme_dark-line_brown: rgb(67, 64, 64); + --theme_dark-line_orange: rgb(89, 74, 58); + --theme_dark-line_yellow: rgb(89, 86, 59); + --theme_dark-line_green: rgb(53, 76, 75); + --theme_dark-line_blue: rgb(54, 73, 84); + --theme_dark-line_purple: rgb(68, 63, 87); + --theme_dark-line_pink: rgb(83, 59, 76); + --theme_dark-line_red: rgb(89, 65, 65); +} + +/** backgrounds **/ + +.notion-dark-theme [style*='background: rgb(55, 60, 63)'], +.notion-dark-theme [style*='background: rgba(69, 75, 78, 0.3)'] { + background: var(--theme_dark-sidebar) !important; +} +.notion-body.dark, +.notion-dark-theme [style*='background: rgb(47, 52, 55)'] { + background: var(--theme_dark-main) !important; +} + +/** databases **/ + +.notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { + box-shadow: none !important; +} +.notion-dark-theme .notion-table-view > :first-child > :first-child, +.notion-dark-theme [style*='background: rgb(71, 76, 80)'], +.notion-dark-theme [style*='background: rgb(80, 85, 88)'], +.notion-dark-theme [style*='background: rgb(98, 102, 104)'] { + background: var(--theme_dark-button_hover) !important; + box-shadow: 0 0 0 0.5px var(--theme_dark-button_hover-border); +} + +.notion-dark-theme [style*='background: rgb(63, 68, 71)'] { + background: var(--theme_dark-card) !important; +} +.notion-dark-theme .notion-frame [style*='background: rgb(63, 68, 71)'] { + border: 0.5px solid var(--theme_dark-card_border); +} + +.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.14)'], +.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.07)'] { + border-top: 1px solid var(--theme_dark-table_border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] { + box-shadow: var(--theme_dark-table_border) -1px 0px 0px !important; +} +.notion-dark-theme + [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.14)'], +.notion-dark-theme + [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.07)'] { + border-bottom: 1px solid var(--theme_dark-table_border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] { + box-shadow: var(--theme_dark-table_border) 0px 1px 0px !important; +} +.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255, 0.14)'], +.notion-dark-theme + [style*='border-right: 1px solid rgba(255, 255, 255, 0.07)'] { + border-right: 1px solid var(--theme_dark-table_border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] { + box-shadow: var(--theme_dark-table_border) 0px -1px 0px !important; +} +.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.14)'], +.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.07)'] { + border-left: 1px solid var(--theme_dark-table_border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] { + box-shadow: var(--theme_dark-table_border) 0px 1px 0px inset !important; +} + +/** colours **/ + +.notion-dark-theme [style*='background: rgb(46, 170, 220)'] { + background: var(--theme_dark-primary) !important; +} +.notion-dark-theme [style*='background: rgb(6, 156, 205)'] { + background: var(--theme_dark-primary_hover) !important; +} +.notion-dark-theme [style*='background: rgb(0, 141, 190)'] { + background: var(--theme_dark-primary_click) !important; +} +.notion-dark-theme [style*='background: rgb(235, 87, 87)'] { + background: var(--theme_dark-primary_indicator) !important; +} + +.notion-dark-theme [style*='color:rgba(151,154,155,0.95)'] { + color: var(--theme_dark-text_gray) !important; +} +.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5)'], +.notion-dark-theme [style*='background:rgb(69,75,78)'] { + background: var(--theme_dark-bg_gray) !important; +} +.notion-dark-theme [style*='background: rgb(69, 75, 78)'] { + background: var(--theme_dark-line_gray) !important; +} +.notion-dark-theme [style*='color:rgb(147,114,100)'] { + color: var(--theme_dark-text_brown) !important; +} +.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'], +.notion-dark-theme [style*='background:rgb(67,64,64)'] { + background: var(--theme_dark-bg_brown) !important; +} +.notion-dark-theme [style*='background: rgb(67, 64, 64)'] { + background: var(--theme_dark-line_brown) !important; +} +.notion-dark-theme [style*='color:rgb(255,163,68)'] { + color: var(--theme_dark-text_orange) !important; +} +.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'], +.notion-dark-theme [style*='background:rgb(89,74,58)'] { + background: var(--theme_dark-bg_orange) !important; +} +.notion-dark-theme [style*='background: rgb(89, 74, 58)'] { + background: var(--theme_dark-line_orange) !important; +} +.notion-dark-theme [style*='color:rgb(255,220,73)'] { + color: var(--theme_dark-text_yellow) !important; +} +.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'], +.notion-dark-theme [style*='background:rgb(89,86,59)'] { + background: var(--theme_dark-bg_yellow) !important; +} +.notion-dark-theme [style*='background: rgb(89, 86, 59)'] { + background: var(--theme_dark-line_yellow) !important; +} +.notion-dark-theme [style*='color:rgb(77,171,154)'] { + color: var(--theme_dark-text_green) !important; +} +.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'], +.notion-dark-theme [style*='background:rgb(53,76,75)'] { + background: var(--theme_dark-bg_green) !important; +} +.notion-dark-theme [style*='background: rgb(53, 76, 75)'] { + background: var(--theme_dark-line_green) !important; +} +.notion-dark-theme [style*='color:rgb(82,156,202)'] { + color: var(--theme_dark-text_blue) !important; +} +.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'], +.notion-dark-theme [style*='background:rgb(54,73,84)'] { + background: var(--theme_dark-bg_blue) !important; +} +.notion-dark-theme [style*='background: rgb(54, 73, 84)'] { + background: var(--theme_dark-line_blue) !important; +} +.notion-dark-theme [style*='color:rgb(154,109,215)'] { + color: var(--theme_dark-text_purple) !important; +} +.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'], +.notion-dark-theme [style*='background:rgb(68,63,87)'] { + background: var(--theme_dark-bg_purple) !important; +} +.notion-dark-theme [style*='background: rgb(68, 63, 87)'] { + background: var(--theme_dark-line_purple) !important; +} +.notion-dark-theme [style*='color:rgb(226,85,161)'] { + color: var(--theme_dark-text_pink) !important; +} +.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'], +.notion-dark-theme [style*='background:rgb(83,59,76)'] { + background: var(--theme_dark-bg_pink) !important; +} +.notion-dark-theme [style*='background: rgb(83, 59, 76)'] { + background: var(--theme_dark-line_pink) !important; +} +.notion-dark-theme [style*='color:rgb(255,115,105)'] { + color: var(--theme_dark-text_red) !important; +} +.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5);'], +.notion-dark-theme [style*='background:rgb(89,65,65)'] { + background: var(--theme_dark-bg_red) !important; +} +.notion-dark-theme [style*='background: rgb(89, 65, 65)'] { + background: var(--theme_dark-line_red) !important; +} diff --git a/mods/core/titlebar.css b/mods/core/titlebar.css index 7988bf4..83f5810 100644 --- a/mods/core/titlebar.css +++ b/mods/core/titlebar.css @@ -6,28 +6,22 @@ */ .frameless .notion-topbar { - height: calc(var(--dragarea-height, 10px) + 45px) !important; + height: calc(var(--configured-dragarea_height, 10px) + 45px) !important; } - .frameless .window-dragarea { - height: var(--dragarea-height, 10px); + height: var(--configured-dragarea_height, 10px); width: 100%; } -.frameless .notion-light-theme .window-dragarea { - background: #e6e6e6; -} .frameless .notion-dark-theme .window-dragarea { - background: #272d2f; + background: var(--theme_dark-dragarea); +} +.frameless .notion-light-theme .window-dragarea { + background: var(--theme_light-dragarea); } -.window-buttons-area { - display: flex; - align-items: center; - font-size: 14px; -} @media (max-width: 760px) { .frameless .notion-topbar { - height: calc(var(--dragarea-height, 10px) + 80px) !important; + height: calc(var(--configured-dragarea_height, 10px) + 80px) !important; } .frameless .notion-topbar > :nth-child(2) { height: 80px !important; @@ -50,6 +44,11 @@ } } +.window-buttons-area { + display: flex; + align-items: center; + font-size: 14px; +} .window-button { background: transparent; border: 0; @@ -72,15 +71,25 @@ .window-button svg line { stroke: currentColor; } -.notion-light-theme .window-button:hover { - background: rgb(239, 239, 239); -} + .notion-dark-theme .window-button:hover { - background: rgb(71, 76, 80); + background: var(--theme_dark-button_hover); + box-shadow: 0 0 0 0.5px var(--theme_dark-button_hover-border); } -.window-button.btn-close:hover { - background: #e81123; +.notion-dark-theme .window-button.btn-close:hover { + background: var(--theme_dark-button_close); } -.window-button.btn-close:hover svg line { - stroke: white; +.notion-dark-theme .window-button.btn-close:hover svg line { + stroke: var(--theme_dark-button_close-fill); +} + +.notion-light-theme .window-button.btn-close:hover { + background: var(--theme_light-button_close); +} +.notion-light-theme .window-button.btn-close:hover svg line { + stroke: var(--theme_light-button_close-fill); +} +.notion-light-theme .window-button:hover { + background: var(--theme_light-button_hover); + box-shadow: 0 0 0 0.5px var(--theme_light-button_hover-border); } diff --git a/mods/core/titlebar.js b/mods/core/titlebar.js index 4c26ca1..aa3e711 100644 --- a/mods/core/titlebar.js +++ b/mods/core/titlebar.js @@ -37,7 +37,7 @@ module.exports = (defaults) => dragarea.className = 'window-dragarea'; document.querySelector('.notion-topbar').prepend(dragarea); document.documentElement.style.setProperty( - '--dragarea-height', + '--configured-dragarea_height', `${settings.dragarea_height}px` ); let sidebar_width;