From fd22fa286cb00fcb8454f20dfb35527c5377f2e3 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Thu, 23 Jul 2020 23:33:09 +1000 Subject: [PATCH] more dark theme stuff, inc. bugfixes + code higlight --- mods/core/theme.css | 280 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 227 insertions(+), 53 deletions(-) diff --git a/mods/core/theme.css b/mods/core/theme.css index 2aa8999..04dcf82 100644 --- a/mods/core/theme.css +++ b/mods/core/theme.css @@ -8,6 +8,18 @@ :root { /** light **/ + --theme_light-main-height: 100%; + + --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; @@ -21,25 +33,42 @@ /** dark **/ --theme_dark-main: rgb(47, 52, 55); + --theme_dark-main-height: 100%; --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-preview-width: 977px; + --theme_dark-preview_banner-height: 20vh; + --theme_dark-page_banner-height: 30vh; - --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-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-block-selected: rgba(139, 220, 46, 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-text: rgba(255, 255, 255, 0.9); --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); @@ -67,9 +96,24 @@ --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-text_code: 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%); } -/** backgrounds **/ +/** general ui **/ .notion-dark-theme [style*='background: rgb(55, 60, 63)'], .notion-dark-theme [style*='background: rgba(69, 75, 78, 0.3)'] { @@ -80,12 +124,108 @@ background: var(--theme_dark-main) !important; } +.notion-dark-theme .notion-frame { + height: var(--theme_dark-main-height) !important; +} +.notion-light-theme .notion-frame { + height: var(--theme_light-main-height) !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; +} + /** databases **/ -.notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { - box-shadow: none !important; +.notion-dark-theme [style*='background: rgb(63, 68, 71)'] { + background: var(--theme_dark-card) !important; } -.notion-dark-theme .notion-table-view > :first-child > :first-child, +.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, 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, 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; +} + .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)'] { @@ -93,51 +233,39 @@ 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; +/* fix inline-tables in pages */ +.notion-page-content .notion-collection_view-block { + width: 100% !important; } -.notion-dark-theme .notion-frame [style*='background: rgb(63, 68, 71)'] { - border: 0.5px solid var(--theme_dark-card_border); +.notion-page-content .notion-collection_view-block > div:first-child { + padding-left: 0px !important; + padding-right: 0px !important; } - -.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-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-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; +.notion-page-content .notion-collection_view-block .notion-table-view { + padding-left: 0px !important; + padding-right: 0px !important; } /** colours **/ +[style*='background: rgba(46, 170, 220, 0.2)'], +[style*='background-color: rgba(46, 170, 220, 0.2)'] { + background: var(--theme_dark-block-selected) !important; +} + +.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*='background: rgb(46, 170, 220)'] { background: var(--theme_dark-primary) !important; } @@ -241,3 +369,49 @@ .notion-dark-theme [style*='background: rgb(89, 65, 65)'] { background: var(--theme_dark-line_red) !important; } + +/* code */ + +.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-text_code) !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; +}