From 2edfcd63fe00e8896a32bf4e1a0013b9e00e69f0 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 25 Jul 2020 15:16:15 +1000 Subject: [PATCH] light 90% + other tweaks --- mods/core/client.js | 1 - mods/core/dark.css | 330 ++++++++++++++++++++++++++ mods/core/light.css | 330 ++++++++++++++++++++++++++ mods/core/scrollbars.css | 12 +- mods/core/shared.css | 50 ++++ mods/core/styles.css | 6 +- mods/core/theme.css | 493 --------------------------------------- mods/core/titlebar.css | 20 +- mods/core/variables.css | 200 ++++++++++++++++ 9 files changed, 930 insertions(+), 512 deletions(-) create mode 100644 mods/core/dark.css create mode 100644 mods/core/light.css create mode 100644 mods/core/shared.css delete mode 100644 mods/core/theme.css create mode 100644 mods/core/variables.css diff --git a/mods/core/client.js b/mods/core/client.js index ecdfb4b..8a9676a 100644 --- a/mods/core/client.js +++ b/mods/core/client.js @@ -70,7 +70,6 @@ module.exports = (defaults) => ); } } - setInterval(() => {}, 100); } // window buttons diff --git a/mods/core/dark.css b/mods/core/dark.css new file mode 100644 index 0000000..9576d08 --- /dev/null +++ b/mods/core/dark.css @@ -0,0 +1,330 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (c) 2020 Arecsu + * (c) 2020 u/zenith_illinois + * (https://dragonwocky.me/) under the MIT license + */ + +/** general ui **/ + +.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)'], +.notion-dark-theme [style*='background-color: rgb(47, 52, 55)'] { + background: var(--theme_dark--main) !important; +} + +.notion-dark-theme .notion-peek-renderer > div:nth-child(2) { + max-width: var(--theme_dark--preview-width) !important; +} +.notion-dark-theme + .notion-peek-renderer + .notion-scroller.vertical + [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'], +.notion-dark-theme + .notion-peek-renderer + .notion-scroller.vertical + [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'] + img { + height: var(--theme_dark--preview_banner-height) !important; +} +.notion-dark-theme + [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'], +.notion-dark-theme + [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] + img { + height: var(--theme_dark--page_banner-height) !important; +} + +.notion-dark-theme [style*='Segoe UI'] { + font-family: var(--theme_dark--font_sans) !important; +} +.notion-dark-theme [style*='Georgia'] { + font-family: var(--theme_dark--font_serif) !important; +} +.notion-dark-theme [style*='iawriter-mono'] { + font-family: var(--theme_dark--font_mono) !important; +} +.notion-dark-theme [style*='SFMono-Regular'] { + font-family: var(--theme_dark--font_code) !important; +} + +/* prevent block hover options overlaying topbar */ +.notion-dark-theme .notion-topbar { + background: var(--theme_dark--main); +} + +/** databases **/ + +.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*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { + box-shadow: var(--theme_dark--main) -3px 0px 0px !important; +} +.notion-dark-theme + [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'] { + box-shadow: var(--theme_dark--main) -3px 0px 0px, + var(--theme_dark--table-border) 0px 1px 0px !important; +} + +.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255,'] { + 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,'] { + 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,'] { + 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,'] { + 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; +} + +.notion-dark-theme [style*='background: rgb(71, 76, 80)'], +.notion-dark-theme [style*='background: rgb(80, 85, 88)'] { + background: var(--theme_dark--button_hover) !important; + box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border); +} + +/** colours **/ + +.notion-dark-theme ::selection, +.notion-dark-theme + [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']), +.notion-dark-theme + [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) { + background: var(--theme_dark--selected) !important; +} + +.notion-dark-theme [style*='background: rgb(46, 170, 220)'], +.notion-dark-theme [style*='background-color: rgb(46, 170, 220)'] { + background: var(--theme_dark--primary) !important; +} +.notion-dark-theme + [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { + box-shadow: var(--theme_dark--primary) 0px 0px 0px 2px inset !important; +} +.notion-dark-theme .notion-focusable:focus-within { + box-shadow: var(--theme_dark--primary) 0px 0px 0px 1px inset, + var(--theme_dark--primary_hover) 0px 0px 0px 2px !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 + .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after, +.notion-dark-theme [style*='background: rgb(235, 87, 87)'] { + background: var(--theme_dark--primary_indicator) !important; +} + +.notion-dark-theme .notion-to_do-block .checkboxSquare path { + fill: var(--theme_dark--todo_empty-border) !important; +} +.notion-dark-theme .notion-to_do-block .check polygon { + fill: var(--theme_dark--todo_ticked-fill) !important; +} +.notion-dark-theme + .notion-to_do-block + [style*='background: rgb(46, 170, 220)'] { + background: var(--theme_dark--todo_ticked-background) !important; +} +.notion-dark-theme .notion-to_do-block [style*='background: rgb(71, 76, 80)'] { + background: var(--theme_dark--todo_hover-background) !important; +} + +.notion-dark-theme + [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] { + color: var(--theme_dark--danger_text) !important; + border: 1px solid var(--theme_dark--danger_border) !important; +} + +.notion-dark-theme, +.notion-dark-theme .notion-page-content [style*='color: inherit;'], +.notion-dark-theme .notion-frame .notion-page-block, +.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.9)'], +.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.7)'] { + color: var(--theme_dark--text) !important; +} +.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.6)'] { + color: var(--theme_dark--text_ui) !important; +} +.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.4)'] { + color: var(--theme_dark--text_ui_info) !important; +} +.notion-dark-theme [style*='fill: rgba(202, 204, 206,'], +.notion-dark-theme [style*='fill: rgb(202, 204, 206)'] { + fill: var(--theme_dark--text_ui) !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; +} + +/* code */ + +.notion-dark-theme [style*='color:#EB5757'] { + color: var(--theme_dark--code_inline-text) !important; + background: var(--theme_dark--code_inline-background) !important; +} + +.notion-dark-theme .notion-code-block { + background: var(--theme_dark--code-background) !important; +} +.notion-dark-theme .notion-code-block > div { + color: var(--theme_dark--code_text) !important; +} +.notion-dark-theme .notion-code-block .token.function { + color: var(--theme_dark--code_function) !important; +} +.notion-dark-theme .notion-code-block .token.keyword { + color: var(--theme_dark--code_keyword) !important; +} +.notion-dark-theme .notion-code-block .token.tag { + color: var(--theme_dark--code_tag) !important; +} +.notion-dark-theme .notion-code-block .token.operator { + color: var(--theme_dark--code_operator) !important; +} +.notion-dark-theme .notion-code-block .token.property { + color: var(--theme_dark--code_property) !important; +} +.notion-dark-theme .notion-code-block .token.builtin { + color: var(--theme_dark--code_builtin) !important; +} +.notion-dark-theme .notion-code-block .token.attr-name { + color: var(--theme_dark--code_attr-name) !important; +} +.notion-dark-theme .notion-code-block .token.attr-value { + color: var(--theme_dark--code_attr-value) !important; +} +.notion-dark-theme .notion-code-block .token.comment { + color: var(--theme_dark--code_comment) !important; +} +.notion-dark-theme .notion-code-block .token.punctuation { + color: var(--theme_dark--code_punctuation) !important; +} +.notion-dark-theme .notion-code-block .token.doctype { + color: var(--theme_dark--code_doctype) !important; +} +.notion-dark-theme .notion-code-block .token.number { + color: var(--theme_dark--code_number) !important; +} +.notion-dark-theme .notion-code-block .token.string { + color: var(--theme_dark--code_string) !important; +} diff --git a/mods/core/light.css b/mods/core/light.css new file mode 100644 index 0000000..40fd3d0 --- /dev/null +++ b/mods/core/light.css @@ -0,0 +1,330 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (c) 2020 Arecsu + * (c) 2020 u/zenith_illinois + * (https://dragonwocky.me/) under the MIT license + */ + +/** general ui **/ + +.notion-light-theme [style*='background: rgb(247, 246, 243)'], +.notion-light-theme [style*='background: rgba(235, 236, 237, 0.3)'] { + background: var(--theme_light--sidebar) !important; +} +.notion-body.light, +.notion-light-theme [style*='background: white'] { + background: var(--theme_light--main) !important; +} + +.notion-light-theme .notion-peek-renderer > div:nth-child(2) { + max-width: var(--theme_light--preview-width) !important; +} +.notion-light-theme + .notion-peek-renderer + .notion-scroller.vertical + [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'], +.notion-light-theme + .notion-peek-renderer + .notion-scroller.vertical + [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'] + img { + height: var(--theme_light--preview_banner-height) !important; +} +.notion-light-theme + [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'], +.notion-light-theme + [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] + img { + height: var(--theme_light--page_banner-height) !important; +} + +.notion-light-theme [style*='Segoe UI'] { + font-family: var(--theme_light--font_sans) !important; +} +.notion-light-theme [style*='Georgia'] { + font-family: var(--theme_light--font_serif) !important; +} +.notion-light-theme [style*='iawriter-mono'] { + font-family: var(--theme_light--font_mono) !important; +} +.notion-light-theme [style*='SFMono-Regular'] { + font-family: var(--theme_light--font_code) !important; +} + +/* prevent block hover options overlaying topbar */ +.notion-light-theme .notion-topbar { + background: var(--theme_light--main); +} + +/** databases **/ + +.notion-light-theme [style*='background: rgb(247, 246, 243)'] { + background: var(--theme_light--card) !important; +} +.notion-light-theme .notion-frame [style*='background: rgb(247, 246, 243)'] { + border: 0.5px solid var(--theme_light--card-border); +} + +.notion-light-theme [style*='box-shadow: white -3px 0px 0px'] { + box-shadow: var(--theme_light--main) -3px 0px 0px !important; +} +.notion-light-theme + [style*='box-shadow: white -3px 0px 0px, rgba(55, 53, 47, 0.16) 0px 1px 0px'] { + box-shadow: var(--theme_light--main) -3px 0px 0px, + var(--theme_light--table-border) 0px 1px 0px !important; +} + +.notion-light-theme [style*='border-top: 1px solid rgba(55, 53, 47,'] { + border-top: 1px solid var(--theme_light--table-border) !important; +} +.notion-light-theme [style*='box-shadow: rgba(55, 53, 47, 0.09) -1px 0px 0px'] { + box-shadow: var(--theme_light--table-border) -1px 0px 0px !important; +} +.notion-light-theme [style*='border-bottom: 1px solid rgba(55, 53, 47,'] { + border-bottom: 1px solid var(--theme_light--table-border) !important; +} +.notion-light-theme [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px'] { + box-shadow: var(--theme_light--table-border) 0px 1px 0px !important; +} +.notion-light-theme [style*='border-right: 1px solid rgba(55, 53, 47,'] { + border-right: 1px solid var(--theme_light--table-border) !important; +} +.notion-light-theme [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] { + box-shadow: var(--theme_light--table-border) 0px -1px 0px !important; +} +.notion-light-theme [style*='border-left: 1px solid rgba(55, 53, 47,'] { + border-left: 1px solid var(--theme_light--table-border) !important; +} +.notion-light-theme + [style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px inset'] { + box-shadow: var(--theme_light--table-border) 0px 1px 0px inset !important; +} + +.notion-light-theme [style*='background: rgba(55, 53, 47,'] { + background: var(--theme_light--button_hover) !important; + box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border); +} + +/** colours **/ + +.notion-light-theme ::selection, +.notion-light-theme + [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']), +.notion-light-theme + [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) { + background: var(--theme_light--selected) !important; +} + +.notion-light-theme [style*='background: rgb(46, 170, 220)'], +.notion-light-theme [style*='background-color: rgb(46, 170, 220)'] { + background: var(--theme_light--primary) !important; +} +.notion-light-theme + [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { + box-shadow: var(--theme_light--primary) 0px 0px 0px 2px inset !important; +} +.notion-light-theme .notion-focusable:focus-within { + box-shadow: var(--theme_light--primary) 0px 0px 0px 1px inset, + var(--theme_light--primary_hover) 0px 0px 0px 2px !important; +} +.notion-light-theme [style*='background: rgb(6, 156, 205)'] { + background: var(--theme_light--primary_hover) !important; +} +.notion-light-theme [style*='background: rgb(0, 141, 190)'] { + background: var(--theme_light--primary_click) !important; +} +.notion-light-theme + .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after, +.notion-light-theme [style*='background: rgb(235, 87, 87)'] { + background: var(--theme_light--primary_indicator) !important; +} + +.notion-light-theme .notion-to_do-block .checkboxSquare path { + fill: var(--theme_light--todo_empty-border) !important; +} +.notion-light-theme .notion-to_do-block .check polygon { + fill: var(--theme_light--todo_ticked-fill) !important; +} +.notion-light-theme + .notion-to_do-block + [style*='background: rgb(46, 170, 220)'] { + background: var(--theme_light--todo_ticked-background) !important; +} +.notion-light-theme + .notion-to_do-block + [style*='background: rgba(55, 53, 47, 0.08)'] { + background: var(--theme_light--todo_hover-background) !important; +} + +.notion-light-theme + [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] { + color: var(--theme_light--danger_text) !important; + border: 1px solid var(--theme_light--danger_border) !important; +} + +.notion-light-theme, +.notion-light-theme [style*='color:'] { + color: var(--theme_light--text) !important; +} +.notion-light-theme [style*='color: rgba(255, 255, 255, 0.6)'], +.notion-light-theme [style*='color: rgba(25, 23, 17,'], +.notion-light-theme [style*='color: rgba(55, 53, 47,'], +.notion-light-theme [style*='color: rgb(25, 23, 17)'], +.notion-light-theme [style*='color: rgb(55, 53, 47)'] { + color: var(--theme_light--text_ui) !important; +} +.notion-light-theme .notion-page-content { + color: var(--theme_light--text) !important; +} +.notion-light-theme [style*='fill: rgba(55, 53, 47,'] { + fill: var(--theme_light--text_ui) !important; +} +.notion-light-theme [style*='color: rgba(255, 255, 255, 0.4)'] { + color: var(--theme_light--text_ui_info) !important; +} + +.notion-light-theme [style*='color:rgb(155,154,151)'] { + color: var(--theme_light--text_gray) !important; +} +.notion-light-theme [style*='background: rgb(235, 236, 237)'], +.notion-light-theme [style*='background:rgb(235,236,237)'] { + background: var(--theme_light--bg_gray) !important; +} +.notion-light-theme div[style='background: rgb(235, 236, 237)'] { + background: var(--theme_light--line_gray) !important; +} +.notion-light-theme [style*='color:rgb(100,71,58)'] { + color: var(--theme_light--text_brown) !important; +} +.notion-light-theme [style*='background: rgb(233, 229, 227)'], +.notion-light-theme [style*='background:rgb(233,229,227)'] { + background: var(--theme_light--bg_brown) !important; +} +.notion-light-theme div[style='background: rgb(233, 229, 227)'] { + background: var(--theme_light--line_brown) !important; +} +.notion-light-theme [style*='color:rgb(217,115,13)'] { + color: var(--theme_light--text_orange) !important; +} +.notion-light-theme [style*='background: rgb(250, 235, 221)'], +.notion-light-theme [style*='background:rgb(250,235,221)'] { + background: var(--theme_light--bg_orange) !important; +} +.notion-light-theme div[style='background: rgb(250, 235, 221)'] { + background: var(--theme_light--line_orange) !important; +} +.notion-light-theme [style*='color:rgb(223,171,1)'] { + color: var(--theme_light--text_yellow) !important; +} +.notion-light-theme [style*='background: rgb(251, 243, 219)'], +.notion-light-theme [style*='background:rgb(251,243,219)'] { + background: var(--theme_light--bg_yellow) !important; +} +.notion-light-theme div[style='background: rgb(251, 243, 219)'] { + background: var(--theme_light--line_yellow) !important; +} +.notion-light-theme [style*='color:rgb(15,123,108)'] { + color: var(--theme_light--text_green) !important; +} +.notion-light-theme [style*='background: rgb(221, 237, 234)'], +.notion-light-theme [style*='background:rgb(221,237,234)'] { + background: var(--theme_light--bg_green) !important; +} +.notion-light-theme div[style='background: rgb(221, 237, 234)'] { + background: var(--theme_light--line_green) !important; +} +.notion-light-theme [style*='color:rgb(11,110,153)'] { + color: var(--theme_light--text_blue) !important; +} +.notion-light-theme [style*='background: rgb(221, 235, 241)'], +.notion-light-theme [style*='background:rgb(221,235,241)'] { + background: var(--theme_light--bg_blue) !important; +} +.notion-light-theme div[style='background: rgb(221, 235, 241)'] { + background: var(--theme_light--line_blue) !important; +} +.notion-light-theme [style*='color:rgb(105,64,165)'] { + color: var(--theme_light--text_purple) !important; +} +.notion-light-theme [style*='background: rgb(234, 228, 242)'], +.notion-light-theme [style*='background:rgb(234,228,242)'] { + background: var(--theme_light--bg_purple) !important; +} +.notion-light-theme div[style='background: rgb(234, 228, 242)'] { + background: var(--theme_light--line_purple) !important; +} +.notion-light-theme [style*='color:rgb(173,26,114)'] { + color: var(--theme_light--text_pink) !important; +} +.notion-light-theme [style*='background: rgb(244, 223, 235)'], +.notion-light-theme [style*='background:rgb(244,223,235)'] { + background: var(--theme_light--bg_pink) !important; +} +.notion-light-theme div[style='background: rgb(244, 223, 235)'] { + background: var(--theme_light--line_pink) !important; +} +.notion-light-theme [style*='color:rgb(224,62,62)'] { + color: var(--theme_light--text_red) !important; +} +.notion-light-theme [style*='background: rgb(251, 228, 228)'], +.notion-light-theme [style*='background:rgb(251,228,228)'] { + background: var(--theme_light--bg_red) !important; +} +.notion-light-theme div[style='background: rgb(251, 228, 228)'] { + background: var(--theme_light--line_red) !important; +} + +/* code */ + +.notion-light-theme [style*='color:#EB5757'] { + color: var(--theme_light--code_inline-text) !important; + background: var(--theme_light--code_inline-background) !important; +} + +.notion-light-theme .notion-code-block { + background: var(--theme_light--code-background) !important; +} +.notion-light-theme .notion-code-block > div { + color: var(--theme_light--code_text) !important; +} +.notion-light-theme .notion-code-block .token.function { + color: var(--theme_light--code_function) !important; +} +.notion-light-theme .notion-code-block .token.keyword { + color: var(--theme_light--code_keyword) !important; +} +.notion-light-theme .notion-code-block .token.tag { + color: var(--theme_light--code_tag) !important; +} +.notion-light-theme .notion-code-block .token.operator { + color: var(--theme_light--code_operator) !important; +} +.notion-light-theme .notion-code-block .token.property { + color: var(--theme_light--code_property) !important; +} +.notion-light-theme .notion-code-block .token.builtin { + color: var(--theme_light--code_builtin) !important; +} +.notion-light-theme .notion-code-block .token.attr-name { + color: var(--theme_light--code_attr-name) !important; +} +.notion-light-theme .notion-code-block .token.attr-value { + color: var(--theme_light--code_attr-value) !important; +} +.notion-light-theme .notion-code-block .token.comment { + color: var(--theme_light--code_comment) !important; +} +.notion-light-theme .notion-code-block .token.punctuation { + color: var(--theme_light--code_punctuation) !important; +} +.notion-light-theme .notion-code-block .token.doctype { + color: var(--theme_light--code_doctype) !important; +} +.notion-light-theme .notion-code-block .token.number { + color: var(--theme_light--code_number) !important; +} +.notion-light-theme .notion-code-block .token.string { + color: var(--theme_light--code_string) !important; +} diff --git a/mods/core/scrollbars.css b/mods/core/scrollbars.css index 7402d8c..20224ad 100644 --- a/mods/core/scrollbars.css +++ b/mods/core/scrollbars.css @@ -20,17 +20,17 @@ } .smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb { - background-color: var(--theme_dark-scrollbar); - border: var(--theme_dark-scrollbar-border); + background-color: var(--theme_dark--scrollbar); + border: var(--theme_dark--scrollbar-border); } .smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb:hover { - background: var(--theme_dark-scrollbar_hover); + 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); + 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); + background: var(--theme_light--scrollbar_hover); } diff --git a/mods/core/shared.css b/mods/core/shared.css new file mode 100644 index 0000000..c36f5ce --- /dev/null +++ b/mods/core/shared.css @@ -0,0 +1,50 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (c) 2020 Arecsu + * (c) 2020 u/zenith_illinois + * (https://dragonwocky.me/) under the MIT license + */ + +/* prevent block hover options overlaying topbar */ +*:not([style*='z-index']) { + z-index: 1; +} + +/* fix highlight padding: this isn't a typo */ +[style*='background:rgb('] { + padding-bottom: 3px !important; +} + +/* smooth transitions */ +.notion-calendar-view-day, +.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end), +.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected, +.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover, +.DayPicker:not(.DayPicker--interactionDisabled) + .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end) { + transition: all 200ms ease !important; +} +.notion-token-remove-button { + transition: opacity 200ms ease !important; +} +.notion-to_do-block > div > div > div[style*='background:'] { + transition: background 200ms ease !important; +} + +/* normalise inline-table size */ +.notion-page-content .notion-collection_view-block { + width: 100% !important; +} +.notion-page-content + .notion-collection_view-block + [style*='min-width: calc(100% - 192px);'], +.notion-page-content + .notion-collection_view-block + [style*='min-width: 708px;'] { + min-width: 100% !important; +} +.notion-page-content .notion-collection_view-block > div { + padding: 0 1px; +} diff --git a/mods/core/styles.css b/mods/core/styles.css index 3019d73..b2a7b88 100644 --- a/mods/core/styles.css +++ b/mods/core/styles.css @@ -1,10 +1,12 @@ /* * notion-enhancer * (c) 2020 dragonwocky - * (c) 2020 TarasokUA * (https://dragonwocky.me/) under the MIT license */ -@import './theme.css'; +@import './variables.css'; +@import './dark.css'; +@import './light.css'; +@import './shared.css'; @import './scrollbars.css'; @import './titlebar.css'; diff --git a/mods/core/theme.css b/mods/core/theme.css deleted file mode 100644 index baf2ada..0000000 --- a/mods/core/theme.css +++ /dev/null @@ -1,493 +0,0 @@ -/* - * notion-enhancer - * (c) 2020 dragonwocky - * (c) 2020 TarasokUA - * (c) 2020 Arecsu - * (c) 2020 u/zenith_illinois - * (https://dragonwocky.me/) under the MIT license - */ - -:root { - /** light **/ - - --theme_light-font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', - Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', - 'Segoe UI Symbol'; - --theme_light-font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', - 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', - SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; - --theme_light-font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace; - --theme_light-font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, - Courier, monospace; - - --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-preview-width: 977px; - --theme_dark-preview_banner-height: 20vh; - --theme_dark-page_banner-height: 30vh; - - --theme_dark-font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', - Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', - 'Segoe UI Symbol'; - --theme_dark-font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', - 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', - SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; - --theme_dark-font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace; - --theme_dark-font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, - Courier, monospace; - - --theme_dark-scrollbar: #505457; - --theme_dark-scrollbar-border: transparent; - --theme_dark-scrollbar_hover: #696d6f; - - --theme_dark-card: rgb(63, 68, 71); - --theme_dark-card-border: rgb(63, 68, 71); - --theme_dark-table-border: rgba(255, 255, 255, 0.1); - --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-selected: rgba(46, 170, 220, 0.2); - --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-todo_empty-border: currentColor; - --theme_dark-todo_ticked: currentColor; - --theme_dark-todo_ticked-background: var(--theme_dark-primary); - --theme_dark-todo_hover-background: rgb(71, 76, 80); - - --theme_dark-danger_text: rgb(235, 87, 87); - --theme_dark-danger_border: rgba(235, 87, 87, 0.5); - - --theme_dark-text: rgba(255, 255, 255, 0.9); - --theme_dark-text_ui: rgba(255, 255, 255, 0.6); - --theme_dark-text_ui_dark: rgba(255, 255, 255, 0.4); - --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); - - --theme_dark-code_inline-text: #eb5757; - --theme_dark-code_inline-background: rgba(135, 131, 120, 0.15); - --theme_dark-code_text: rgba(255, 255, 255, 0.9); - --theme_dark-code-background: rgb(63, 68, 71); - --theme_dark-code_function: rgba(255, 255, 255, 0.9); - --theme_dark-code_keyword: hsl(350, 40%, 70%); - --theme_dark-code_tag: hsl(350, 40%, 70%); - --theme_dark-code_operator: hsl(40, 90%, 60%); - --theme_dark-code_builtin: hsl(75, 70%, 60%); - --theme_dark-code_attr-name: hsl(75, 70%, 60%); - --theme_dark-code_comment: hsl(30, 20%, 50%); - --theme_dark-code_punctuation: rgba(255, 255, 255, 0.9); - --theme_dark-code_doctype: hsl(30, 20%, 50%); - --theme_dark-code_number: hsl(350, 40%, 70%); - --theme_dark-code_string: hsl(75, 70%, 60%); - --theme_dark-code_attr-value: hsl(350, 40%, 70%); -} - -/** general ui **/ - -.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)'], -.notion-dark-theme [style*='background-color: rgb(47, 52, 55)'] { - background: var(--theme_dark-main) !important; -} - -.notion-peek-renderer > div:nth-child(2) { - max-width: var(--theme_dark-preview-width) !important; -} -.notion-peek-renderer - .notion-scroller.vertical - [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'], -.notion-peek-renderer - .notion-scroller.vertical - [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'] - img { - height: var(--theme_dark-preview_banner-height) !important; -} -[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'], -[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] - img { - height: var(--theme_dark-page_banner-height) !important; -} - -.notion-dark-theme [style*='Segoe UI'] { - font-family: var(--theme_dark-font_sans) !important; -} -.notion-dark-theme [style*='Georgia'] { - font-family: var(--theme_dark-font_serif) !important; -} -.notion-dark-theme [style*='iawriter-mono'] { - font-family: var(--theme_dark-font_mono) !important; -} -.notion-dark-theme [style*='SFMono-Regular'] { - font-family: var(--theme_dark-font_code) !important; -} - -.notion-light-theme [style*='Segoe UI'] { - font-family: var(--theme_light-font_sans) !important; -} -.notion-light-theme [style*='Georgia'] { - font-family: var(--theme_light-font_serif) !important; -} -.notion-light-theme [style*='iawriter-mono'] { - font-family: var(--theme_light-font_mono) !important; -} -.notion-light-theme [style*='SFMono-Regular'] { - font-family: var(--theme_light-font_code) !important; -} - -/* prevent block hover options overlaying topbar */ -*:not([style*='z-index']) { - z-index: 1; -} -.notion-dark-theme .notion-topbar { - background: var(--theme_dark-main); -} - -/** databases **/ - -.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*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { - box-shadow: var(--theme_dark-main) -3px 0px 0px !important; -} -.notion-dark-theme - [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'] { - box-shadow: var(--theme_dark-main) -3px 0px 0px, - var(--theme_dark-table-border) 0px 1px 0px !important; -} - -.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255,'] { - 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,'] { - 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,'] { - 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,'] { - 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; -} - -.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-calendar-view-day, -.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end), -.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected, -.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover, -.DayPicker:not(.DayPicker--interactionDisabled) - .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end) { - transition: all 200ms ease !important; -} -.notion-token-remove-button { - transition: opacity 200ms ease !important; -} - -/* fix inline-tables in pages (?) */ -.notion-page-content .notion-collection_view-block { - width: 100% !important; -} -.notion-page-content .notion-collection_view-block > div:first-child { - padding-left: 0px !important; - padding-right: 0px !important; -} -.notion-page-content - .notion-collection_view-block - [style*='min-width: calc(100% - 192px);'], -.notion-page-content - .notion-collection_view-block - [style*='min-width: 708px;'] { - min-width: 100% !important; -} -.notion-page-content .notion-collection_view-block .notion-table-view { - padding-left: 0px !important; - padding-right: 0px !important; -} - -/** colours **/ - -.notion-dark-theme ::selection, -.notion-dark-theme - [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']), -.notion-dark-theme - [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) { - background: var(--theme_dark-selected) !important; -} - -.notion-dark-theme [style*='background: rgb(46, 170, 220)'], -.notion-dark-theme [style*='background-color: rgb(46, 170, 220)'] { - background: var(--theme_dark-primary) !important; -} -.notion-dark-theme - [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { - box-shadow: var(--theme_dark-primary) 0px 0px 0px 2px inset !important; -} -.notion-dark-theme .notion-focusable:focus-within { - box-shadow: var(--theme_dark-primary) 0px 0px 0px 1px inset, - var(--theme_dark-primary_hover) 0px 0px 0px 2px !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 - .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after, -.notion-dark-theme [style*='background: rgb(235, 87, 87)'] { - background: var(--theme_dark-primary_indicator) !important; -} - -.notion-dark-theme .notion-to_do-block .checkboxSquare path { - fill: var(--theme_dark-todo_empty-border) !important; -} -.notion-dark-theme .notion-to_do-block .check polygon { - fill: var(--theme_dark-todo_ticked-fill) !important; -} -.notion-dark-theme - .notion-to_do-block - [style*='background: rgb(46, 170, 220)'] { - background: var(--theme_dark-todo_ticked-background) !important; -} -.notion-to_do-block > div > div > div[style*='background:'] { - transition: background 200ms ease !important; -} -.notion-dark-theme .notion-to_do-block [style*='background: rgb(71, 76, 80)'] { - background: var(--theme_dark-todo_hover-background) !important; -} - -.notion-dark-theme - [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] { - color: var(--theme_dark-danger_text) !important; - border: 1px solid var(--theme_dark-danger_border) !important; -} - -.notion-dark-theme, -.notion-dark-theme .notion-page-content [style*='color: inherit;'], -.notion-dark-theme .notion-frame .notion-page-block { - color: var(--theme_dark-text) !important; -} -.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.6)'] { - color: var(--theme_dark-text_ui) !important; -} -.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.4)'] { - color: var(--theme_dark-text_ui_dark) !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; -} - -/* fix highlight padding: this isn't a typo */ -[style*='background:rgb('] { - padding-bottom: 3px !important; -} - -/* code */ - -.notion-dark-theme [style*='color:#EB5757'] { - color: var(--theme_dark-code_inline-text) !important; - background: var(--theme_dark-code_inline-background) !important; -} - -.notion-dark-theme - [style*='flex-grow: 1; border-radius: 3px; text-align: left; position: relative; background: rgb(63, 68, 71); min-width: 0px; width: 100%;'] { - background: var(--theme_dark-code-background) !important; -} -.notion-dark-theme .notion-code-block > div { - color: var(--theme_dark-code_text) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.function { - color: var(--theme_dark-code_function) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.keyword { - color: var(--theme_dark-code_keyword) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.tag { - color: var(--theme_dark-code_tag) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.operator { - color: var(--theme_dark-code_operator) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.builtin { - color: var(--theme_dark-code_builtin) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.attr-name { - color: var(--theme_dark-code_attr-name) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.attr-value { - color: var(--theme_dark-code_attr-value) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.comment { - color: var(--theme_dark-code_comment) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.punctuation { - color: var(--theme_dark-code_punctuation) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.doctype { - color: var(--theme_dark-code_doctype) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.number { - color: var(--theme_dark-code_number) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.string { - color: var(--theme_dark-code_string) !important; -} diff --git a/mods/core/titlebar.css b/mods/core/titlebar.css index 2296df4..c4d3335 100644 --- a/mods/core/titlebar.css +++ b/mods/core/titlebar.css @@ -14,10 +14,10 @@ width: 100%; } .frameless .notion-dark-theme .window-dragarea { - background: var(--theme_dark-dragarea); + background: var(--theme_dark--dragarea); } .frameless .notion-light-theme .window-dragarea { - background: var(--theme_light-dragarea); + background: var(--theme_light--dragarea); } @media (max-width: 760px) { @@ -74,25 +74,25 @@ } .notion-dark-theme .window-button:hover { - background: var(--theme_dark-button_hover); - box-shadow: 0 0 0 0.5px var(--theme_dark-button_hover-border); + background: var(--theme_dark--button_hover); + box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border); } .notion-dark-theme .window-button.btn-close:hover { - background: var(--theme_dark-button_close); + background: var(--theme_dark--button_close); } .notion-dark-theme .window-button.btn-close:hover svg line { - stroke: var(--theme_dark-button_close-fill); + stroke: var(--theme_dark--button_close-fill); } .notion-light-theme .window-button.btn-close:hover { - background: var(--theme_light-button_close); + background: var(--theme_light--button_close); } .notion-light-theme .window-button.btn-close:hover svg line { - stroke: var(--theme_light-button_close-fill); + 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); + background: var(--theme_light--button_hover); + box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border); } /* hide topbar when sidebar is hidden */ diff --git a/mods/core/variables.css b/mods/core/variables.css new file mode 100644 index 0000000..d13f66a --- /dev/null +++ b/mods/core/variables.css @@ -0,0 +1,200 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (c) 2020 Arecsu + * (c) 2020 u/zenith_illinois + * (https://dragonwocky.me/) under the MIT license + */ + +:root { + /** dark **/ + + --theme_dark--main: rgb(47, 52, 55); + --theme_dark--sidebar: rgb(55, 60, 63); + --theme_dark--dragarea: #272d2f; + --theme_dark--preview-width: 977px; + --theme_dark--preview_banner-height: 20vh; + --theme_dark--page_banner-height: 30vh; + + --theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', + Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', + 'Segoe UI Symbol'; + --theme_dark--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', + 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', + SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; + --theme_dark--font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace; + --theme_dark--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, + Courier, monospace; + + --theme_dark--scrollbar: #505457; + --theme_dark--scrollbar-border: transparent; + --theme_dark--scrollbar_hover: #696d6f; + + --theme_dark--card: rgb(63, 68, 71); + --theme_dark--card-border: rgb(63, 68, 71); + --theme_dark--table-border: rgba(255, 255, 255, 0.1); + --theme_dark--button_hover: rgb(71, 76, 80); + --theme_dark--button_hover-border: transparent; + --theme_dark--button_close: #e81123; + --theme_dark--button_close-fill: white; + + --theme_dark--selected: rgba(46, 170, 220, 0.2); + --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--todo_empty-border: currentColor; + --theme_dark--todo_ticked: currentColor; + --theme_dark--todo_ticked-background: var(--theme_dark--primary); + --theme_dark--todo_hover-background: rgb(71, 76, 80); + + --theme_dark--danger_text: rgb(235, 87, 87); + --theme_dark--danger_border: rgba(235, 87, 87, 0.5); + + --theme_dark--text: rgba(255, 255, 255, 0.9); + --theme_dark--text_ui: rgba(255, 255, 255, 0.6); + --theme_dark--text_ui_info: rgba(255, 255, 255, 0.4); + + --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); + + --theme_dark--code_inline-text: #eb5757; + --theme_dark--code_inline-background: rgba(135, 131, 120, 0.15); + --theme_dark--code_text: var(--theme_dark--text); + --theme_dark--code-background: rgb(63, 68, 71); + --theme_dark--code_function: rgba(255, 255, 255, 0.9); + --theme_dark--code_keyword: hsl(350, 40%, 70%); + --theme_dark--code_tag: hsl(350, 40%, 70%); + --theme_dark--code_operator: hsl(40, 90%, 60%); + --theme_dark--code_property: hsl(350, 40%, 70%); + --theme_dark--code_builtin: hsl(75, 70%, 60%); + --theme_dark--code_attr-name: hsl(75, 70%, 60%); + --theme_dark--code_comment: hsl(30, 20%, 50%); + --theme_dark--code_punctuation: rgba(255, 255, 255, 0.9); + --theme_dark--code_doctype: hsl(30, 20%, 50%); + --theme_dark--code_number: hsl(350, 40%, 70%); + --theme_dark--code_string: hsl(75, 70%, 60%); + --theme_dark--code_attr-value: hsl(350, 40%, 70%); + + /** light **/ + + --theme_light--main: white; + --theme_light--sidebar: rgb(247, 246, 243); + --theme_light--dragarea: rgba(55, 53, 47, 0.04); + --theme_light--preview-width: 977px; + --theme_light--preview_banner-height: 20vh; + --theme_light--page_banner-height: 30vh; + + --theme_light--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', + Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', + 'Segoe UI Symbol'; + --theme_light--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', + 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', + SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; + --theme_light--font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace; + --theme_light--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, + Courier, monospace; + + --theme_light--scrollbar: #d9d8d6; + --theme_light--scrollbar-border: #cacac8; + --theme_light--scrollbar_hover: #cacac8; + + --theme_light--card: rgb(247, 246, 243); + --theme_light--card-border: rgb(247, 246, 243); + --theme_light--table-border: rgba(55, 53, 47, 0.16); + --theme_light--button_hover: rgba(55, 53, 47, 0.08); + --theme_light--button_hover-border: transparent; + --theme_light--button_close: #e81123; + --theme_light--button_close-fill: white; + + --theme_light--selected: rgba(46, 170, 220, 0.2); + --theme_light--primary: rgb(46, 170, 220); + --theme_light--primary_hover: rgb(6, 156, 205); + --theme_light--primary_click: rgb(0, 141, 190); + --theme_light--primary_indicator: rgb(235, 87, 87); + + --theme_light--todo_empty-border: currentColor; + --theme_light--todo_ticked: currentColor; + --theme_light--todo_ticked-background: var(--theme_light--primary); + --theme_light--todo_hover-background: rgba(55, 53, 47, 0.08); + + --theme_light--danger_text: rgb(235, 87, 87); + --theme_light--danger_border: rgba(235, 87, 87, 0.5); + + --theme_light--text: rgb(55, 53, 47); + --theme_light--text_ui: rgba(55, 53, 47, 0.6); + --theme_light--text_ui_info: rgba(55, 53, 47, 0.4); + + --theme_light--text_gray: rgb(155, 154, 151); + --theme_light--text_brown: rgb(100, 71, 58); + --theme_light--text_orange: rgb(217, 115, 13); + --theme_light--text_yellow: rgb(223, 171, 1); + --theme_light--text_green: rgb(15, 123, 108); + --theme_light--text_blue: rgb(11, 110, 153); + --theme_light--text_purple: rgb(105, 64, 165); + --theme_light--text_pink: rgb(173, 26, 114); + --theme_light--text_red: rgb(224, 62, 62); + --theme_light--bg_gray: rgb(235, 236, 237); + --theme_light--bg_brown: rgb(233, 229, 227); + --theme_light--bg_orange: rgb(250, 235, 221); + --theme_light--bg_yellow: rgb(251, 243, 219); + --theme_light--bg_green: rgb(221, 237, 234); + --theme_light--bg_blue: rgb(221, 235, 241); + --theme_light--bg_purple: rgb(234, 228, 242); + --theme_light--bg_pink: rgb(244, 223, 235); + --theme_light--bg_red: rgb(251, 228, 228); + --theme_light--line_gray: rgb(235, 236, 237); + --theme_light--line_brown: rgb(233, 229, 227); + --theme_light--line_orange: rgb(250, 235, 221); + --theme_light--line_yellow: rgb(251, 243, 219); + --theme_light--line_green: rgb(221, 237, 234); + --theme_light--line_blue: rgb(221, 235, 241); + --theme_light--line_purple: rgb(105, 64, 165); + --theme_light--line_pink: rgb(244, 223, 235); + --theme_light--line_red: rgb(251, 228, 228); + + --theme_light--code_inline-text: #eb5757; + --theme_light--code_inline-background: rgba(135, 131, 120, 0.15); + --theme_light--code_text: var(--theme_light--text); + --theme_light--code-background: rgb(247, 246, 243); + --theme_light--code_function: #dd4a68; + --theme_light--code_keyword: #07a; + --theme_light--code_tag: #905; + --theme_light--code_operator: #9a6e3a; + --theme_light--code_property: #905; + --theme_light--code_builtin: #690; + --theme_light--code_attr-name: #690; + --theme_light--code_comment: slategray; + --theme_light--code_punctuation: #999; + --theme_light--code_doctype: slategray; + --theme_light--code_number: #905; + --theme_light--code_string: #690; + --theme_light--code_attr-value: #07a; +}