mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 13:19:03 +00:00
more dark theme stuff, inc. bugfixes + code higlight
This commit is contained in:
parent
2d37b807ea
commit
830492e181
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user