mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-06 21:49:03 +00:00
dragonwocky
3b4030d12b
https://discord.com/channels/748161877045149706/748162220424167534/897602187067269130 more changes to come
359 lines
16 KiB
CSS
359 lines
16 KiB
CSS
/*
|
|
* notion-enhancer core: theming
|
|
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
|
* (https://notion-enhancer.github.io/) under the MIT license
|
|
*/
|
|
|
|
:root {
|
|
--theme--page-padding: calc(96px + env(safe-area-inset-left));
|
|
--theme--page-width: 900px;
|
|
--theme--page-width_full: 100%;
|
|
--theme--page_banner-height: 30vh;
|
|
--theme--page_preview-padding: 8rem;
|
|
--theme--page_preview-width: 977px;
|
|
--theme--page_preview_banner-height: 20vh;
|
|
|
|
--theme--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
|
|
'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
--theme--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--font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
|
|
--theme--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
|
|
|
--theme--accent_blue: rgb(46, 170, 220);
|
|
--theme--accent_blue-selection: rgb(46, 170, 220, 0.25);
|
|
--theme--accent_blue-hover: rgb(6, 156, 205);
|
|
--theme--accent_blue-active: rgb(0, 141, 190);
|
|
--theme--accent_blue-text: #fff;
|
|
--theme--accent_red: #eb5757;
|
|
--theme--accent_red-button: rgba(235, 87, 87, 0.1);
|
|
--theme--accent_red-text: #fff;
|
|
}
|
|
|
|
:root {
|
|
--theme--bg: #fff;
|
|
--theme--bg_secondary: rgb(247, 246, 243);
|
|
--theme--bg_card: #fff;
|
|
|
|
--theme--scrollbar_track: #edece9;
|
|
--theme--scrollbar_thumb: #d3d1cb;
|
|
--theme--scrollbar_thumb-hover: #aeaca6;
|
|
|
|
--theme--ui_shadow: rgba(15, 15, 15, 0.05);
|
|
--theme--ui_divider: rgb(237, 237, 236);
|
|
--theme--ui_interactive-hover: rgba(55, 53, 47, 0.08);
|
|
--theme--ui_interactive-active: rgba(55, 53, 47, 0.16);
|
|
--theme--ui_toggle-on: var(--theme--accent_blue);
|
|
--theme--ui_toggle-off: rgba(135, 131, 120, 0.3);
|
|
--theme--ui_toggle-feature: #fff;
|
|
--theme--ui_input: rgba(242, 241, 238, 0.6);
|
|
--theme--ui_tooltip: rgb(15, 15, 15);
|
|
--theme--ui_tooltip-title: rgba(255, 255, 255, 0.9);
|
|
--theme--ui_tooltip-description: rgba(206, 205, 202, 0.6);
|
|
|
|
--theme--icon: rgba(55, 53, 47, 0.8);
|
|
--theme--icon_secondary: rgba(55, 53, 47, 0.4);
|
|
|
|
--theme--text: rgb(55, 43, 47);
|
|
--theme--text_secondary: rgba(55, 43, 47, 0.6);
|
|
--theme--text_gray: rgba(96, 96, 98, 0.93);
|
|
--theme--text_brown: rgba(174, 102, 29, 1);
|
|
--theme--text_orange: rgba(210, 82, 22, 1);
|
|
--theme--text_yellow: rgba(203, 145, 47, 1);
|
|
--theme--text_green: rgba(62, 143, 53, 1);
|
|
--theme--text_blue: rgba(33, 131, 190, 1);
|
|
--theme--text_purple: rgba(151, 93, 190, 1);
|
|
--theme--text_pink: rgba(203, 62, 132, 1);
|
|
--theme--text_red: rgba(208, 60, 60, 1);
|
|
|
|
--theme--highlight-text: var(--theme--text);
|
|
--theme--highlight_gray: rgba(234, 234, 235, 0.93);
|
|
--theme--highlight_gray-text: var(--theme--highlight-text);
|
|
--theme--highlight_brown: rgba(213, 130, 38, 0.13);
|
|
--theme--highlight_brown-text: var(--theme--highlight-text);
|
|
--theme--highlight_orange: rgba(252, 103, 27, 0.13);
|
|
--theme--highlight_orange-text: var(--theme--highlight-text);
|
|
--theme--highlight_yellow: rgba(253, 183, 63, 0.13);
|
|
--theme--highlight_yellow-text: var(--theme--highlight-text);
|
|
--theme--highlight_green: rgba(76, 169, 66, 0.13);
|
|
--theme--highlight_green-text: var(--theme--highlight-text);
|
|
--theme--highlight_blue: rgba(45, 159, 226, 0.13);
|
|
--theme--highlight_blue-text: var(--theme--highlight-text);
|
|
--theme--highlight_purple: rgba(187, 123, 230, 0.13);
|
|
--theme--highlight_purple-text: var(--theme--highlight-text);
|
|
--theme--highlight_pink: rgba(255, 85, 163, 0.13);
|
|
--theme--highlight_pink-text: var(--theme--highlight-text);
|
|
--theme--highlight_red: rgba(255, 82, 71, 0.13);
|
|
--theme--highlight_red-text: var(--theme--highlight-text);
|
|
|
|
--theme--paragraph-text: var(--theme--text);
|
|
--theme--paragraph_gray: rgba(234, 234, 235, 0.93);
|
|
--theme--paragraph_gray-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_brown: rgba(213, 130, 38, 0.13);
|
|
--theme--paragraph_brown-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_orange: rgba(252, 103, 27, 0.13);
|
|
--theme--paragraph_orange-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_yellow: rgba(253, 183, 63, 0.13);
|
|
--theme--paragraph_yellow-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_green: rgba(76, 169, 66, 0.13);
|
|
--theme--paragraph_green-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_blue: rgba(45, 159, 226, 0.13);
|
|
--theme--paragraph_blue-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_purple: rgba(187, 123, 230, 0.13);
|
|
--theme--paragraph_purple-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_pink: rgba(255, 85, 163, 0.13);
|
|
--theme--paragraph_pink-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_red: rgba(255, 82, 71, 0.13);
|
|
--theme--paragraph_red-text: var(--theme--paragraph-text);
|
|
|
|
--theme--tag_default: rgba(206, 205, 202, 0.5);
|
|
--theme--tag_default-text: var(--theme--tag-text, var(--theme--text));
|
|
--theme--tag_gray: rgba(234, 234, 235, 0.93);
|
|
--theme--tag_gray-text: var(--theme--tag-text, rgba(29, 29, 37, 0.93));
|
|
--theme--tag_brown: rgba(213, 130, 38, 0.13);
|
|
--theme--tag_brown-text: var(--theme--tag-text, rgb(102, 49, 13));
|
|
--theme--tag_orange: rgba(252, 103, 27, 0.13);
|
|
--theme--tag_orange-text: var(--theme--tag-text, rgb(129, 44, 10));
|
|
--theme--tag_yellow: rgba(253, 183, 63, 0.13);
|
|
--theme--tag_yellow-text: var(--theme--tag-text, rgb(111, 76, 18));
|
|
--theme--tag_green: rgba(76, 169, 66, 0.13);
|
|
--theme--tag_green-text: var(--theme--tag-text, rgb(35, 93, 28));
|
|
--theme--tag_blue: rgba(45, 159, 226, 0.13);
|
|
--theme--tag_blue-text: var(--theme--tag-text, rgb(9, 78, 121));
|
|
--theme--tag_purple: rgba(187, 123, 230, 0.13);
|
|
--theme--tag_purple-text: var(--theme--tag-text, rgb(82, 35, 114));
|
|
--theme--tag_pink: rgba(255, 85, 163, 0.13);
|
|
--theme--tag_pink-text: var(--theme--tag-text, rgb(107, 18, 73));
|
|
--theme--tag_red: rgba(255, 82, 71, 0.13);
|
|
--theme--tag_red-text: var(--theme--tag-text, rgb(119, 19, 39));
|
|
|
|
--theme--block-text: var(--theme--text);
|
|
--theme--block_gray: rgba(245, 245, 245, 0.93);
|
|
--theme--block_gray-text: var(--theme--block-text);
|
|
--theme--block_brown: rgba(213, 130, 38, 0.08);
|
|
--theme--block_brown-text: var(--theme--block-text);
|
|
--theme--block_orange: rgba(252, 103, 27, 0.07);
|
|
--theme--block_orange-text: var(--theme--block-text);
|
|
--theme--block_yellow: rgba(253, 183, 63, 0.08);
|
|
--theme--block_yellow-text: var(--theme--block-text);
|
|
--theme--block_green: rgba(76, 169, 66, 0.07);
|
|
--theme--block_green-text: var(--theme--block-text);
|
|
--theme--block_blue: rgba(45, 159, 226, 0.07);
|
|
--theme--block_blue-text: var(--theme--block-text);
|
|
--theme--block_purple: rgba(187, 123, 230, 0.08);
|
|
--theme--block_purple-text: var(--theme--block-text);
|
|
--theme--block_pink: rgba(255, 85, 163, 0.08);
|
|
--theme--block_pink-text: var(--theme--block-text);
|
|
--theme--block_red: rgba(255, 82, 71, 0.07);
|
|
--theme--block_red-text: var(--theme--block-text);
|
|
|
|
--theme--code_inline: rgba(135, 131, 120, 0.15);
|
|
--theme--code_inline-text: #eb5757;
|
|
|
|
--theme--code: #f7f6f3;
|
|
--theme--code_plain: var(--theme--text);
|
|
--theme--code_property: #905;
|
|
--theme--code_tag: var(--theme--code_property);
|
|
--theme--code_boolean: var(--theme--code_property);
|
|
--theme--code_number: var(--theme--code_property);
|
|
--theme--code_constant: var(--theme--code_property);
|
|
--theme--code_symbol: var(--theme--code_property);
|
|
--theme--code_deleted: var(--theme--code_property);
|
|
--theme--code_selector: #690;
|
|
--theme--code_attr-name: var(--theme--code_selector);
|
|
--theme--code_string: var(--theme--code_selector);
|
|
--theme--code_char: var(--theme--code_selector);
|
|
--theme--code_builtin: var(--theme--code_selector);
|
|
--theme--code_inserted: var(--theme--code_selector);
|
|
--theme--code_operator: #9a6e3a;
|
|
--theme--code_entity: var(--theme--code_operator);
|
|
--theme--code_url: var(--theme--code_operator);
|
|
--theme--code_variable: var(--theme--code_regex);
|
|
--theme--code_comment: slategray;
|
|
--theme--code_cdata: var(--theme--code_comment);
|
|
--theme--code_prolog: var(--theme--code_comment);
|
|
--theme--code_doctype: var(--theme--code_comment);
|
|
--theme--code_atrule: #07a;
|
|
--theme--code_attr-value: var(--theme--code_atrule);
|
|
--theme--code_keyword: var(--theme--code_atrule);
|
|
--theme--code_regex: #e90;
|
|
--theme--code_important: var(--theme--code_regex);
|
|
--theme--code_function: #dd4a68;
|
|
--theme--code_class-name: var(--theme--code_function);
|
|
--theme--code_parameter: var(--theme--code_plain);
|
|
--theme--code_decorator: var(--theme--code_plain);
|
|
--theme--code_id: var(--theme--code_plain);
|
|
--theme--code_class: var(--theme--code_plain);
|
|
--theme--code_pseudo-element: var(--theme--code_plain);
|
|
--theme--code_pseudo-class: var(--theme--code_plain);
|
|
--theme--code_attribute: var(--theme--code_plain);
|
|
--theme--code_value: var(--theme--code_plain);
|
|
--theme--code_unit: var(--theme--code_plain);
|
|
--theme--code_punctuation: #999;
|
|
--theme--code_annotation: var(--theme--code_plain);
|
|
}
|
|
|
|
:root.dark {
|
|
--theme--bg: rgb(47, 52, 55);
|
|
--theme--bg_secondary: rgb(55, 60, 63);
|
|
--theme--bg_card: rgb(63, 68, 71);
|
|
|
|
--theme--scrollbar_track: rgba(202, 204, 206, 0.04);
|
|
--theme--scrollbar_thumb: #474c50;
|
|
--theme--scrollbar_thumb-hover: rgba(202, 204, 206, 0.3);
|
|
|
|
--theme--ui_shadow: rgba(15, 15, 15, 0.15);
|
|
--theme--ui_divider: rgb(255, 255, 255, 0.07);
|
|
--theme--ui_interactive-hover: rgb(71, 76, 80);
|
|
--theme--ui_interactive-active: rgb(63, 68, 71);
|
|
--theme--ui_toggle-on: var(--theme--accent_blue);
|
|
--theme--ui_toggle-off: rgba(202, 204, 206, 0.3);
|
|
--theme--ui_toggle-feature: #fff;
|
|
--theme--ui_input: rgba(15, 15, 15, 0.3);
|
|
--theme--ui_tooltip: rgb(202, 204, 206);
|
|
--theme--ui_tooltip-title: rgb(15, 15, 15);
|
|
--theme--ui_tooltip-description: rgba(47, 52, 55, 0.6);
|
|
|
|
--theme--icon: rgba(202, 204, 206);
|
|
--theme--icon_secondary: rgb(202, 204, 206, 0.6);
|
|
|
|
--theme--text: rgba(255, 255, 255, 0.9);
|
|
--theme--text_secondary: rgba(255, 255, 255, 0.6);
|
|
--theme--text_gray: rgba(141, 143, 145, 1);
|
|
--theme--text_brown: rgba(214, 144, 80, 1);
|
|
--theme--text_orange: rgba(244, 124, 75, 1);
|
|
--theme--text_yellow: rgba(247, 183, 91, 1);
|
|
--theme--text_green: rgba(116, 161, 106, 1);
|
|
--theme--text_blue: rgba(90, 160, 213, 1);
|
|
--theme--text_purple: rgba(165, 118, 206, 1);
|
|
--theme--text_pink: rgba(235, 104, 161, 1);
|
|
--theme--text_red: rgba(248, 102, 96, 1);
|
|
|
|
--theme--highlight-text: var(--theme--text);
|
|
--theme--highlight_gray: rgba(62, 66, 69, 1);
|
|
--theme--highlight_gray-text: var(--theme--highlight-text);
|
|
--theme--highlight_brown: rgba(91, 71, 57, 1);
|
|
--theme--highlight_brown-text: var(--theme--highlight-text);
|
|
--theme--highlight_orange: rgba(102, 64, 54, 1);
|
|
--theme--highlight_orange-text: var(--theme--highlight-text);
|
|
--theme--highlight_yellow: rgba(102, 84, 59, 1);
|
|
--theme--highlight_yellow-text: var(--theme--highlight-text);
|
|
--theme--highlight_green: rgba(52, 79, 64, 1);
|
|
--theme--highlight_green-text: var(--theme--highlight-text);
|
|
--theme--highlight_blue: rgba(43, 77, 103, 1);
|
|
--theme--highlight_blue-text: var(--theme--highlight-text);
|
|
--theme--highlight_purple: rgba(78, 61, 102, 1);
|
|
--theme--highlight_purple-text: var(--theme--highlight-text);
|
|
--theme--highlight_pink: rgba(99, 56, 86, 1);
|
|
--theme--highlight_pink-text: var(--theme--highlight-text);
|
|
--theme--highlight_red: rgba(105, 54, 63, 1);
|
|
--theme--highlight_red-text: var(--theme--highlight-text);
|
|
|
|
--theme--paragraph-text: var(--theme--text);
|
|
--theme--paragraph_gray: rgb(62, 66, 69);
|
|
--theme--paragraph_gray-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_brown: rgb(91, 71, 57);
|
|
--theme--paragraph_brown-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_orange: rgb(102, 64, 54);
|
|
--theme--paragraph_orange-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_yellow: rgb(102, 84, 59);
|
|
--theme--paragraph_yellow-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_green: rgb(52, 79, 64);
|
|
--theme--paragraph_green-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_blue: rgb(43, 77, 103);
|
|
--theme--paragraph_blue-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_purple: rgb(78, 61, 102);
|
|
--theme--paragraph_purple-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_pink: rgb(99, 56, 86);
|
|
--theme--paragraph_pink-text: var(--theme--paragraph-text);
|
|
--theme--paragraph_red: rgb(105, 54, 63);
|
|
--theme--paragraph_red-text: var(--theme--paragraph-text);
|
|
|
|
--theme--tag_default: rgb(80, 85, 88);
|
|
--theme--tag_default-text: var(--theme--tag-text, var(--theme--text));
|
|
--theme--tag_gray: rgb(62, 66, 69);
|
|
--theme--tag_gray-text: var(--theme--tag-text, rgb(234, 235, 235));
|
|
--theme--tag_brown: rgb(91, 71, 57);
|
|
--theme--tag_brown-text: var(--theme--tag-text, rgb(240, 194, 149));
|
|
--theme--tag_orange: rgb(102, 64, 54);
|
|
--theme--tag_orange-text: var(--theme--tag-text, rgb(253, 182, 149));
|
|
--theme--tag_yellow: rgb(102, 84, 59);
|
|
--theme--tag_yellow-text: var(--theme--tag-text, rgb(250, 213, 161));
|
|
--theme--tag_green: rgb(52, 79, 64);
|
|
--theme--tag_green-text: var(--theme--tag-text, rgb(181, 210, 172));
|
|
--theme--tag_blue: rgb(43, 77, 103);
|
|
--theme--tag_blue-text: var(--theme--tag-text, rgb(163, 203, 234));
|
|
--theme--tag_purple: rgb(78, 61, 102);
|
|
--theme--tag_purple-text: var(--theme--tag-text, rgb(205, 177, 228));
|
|
--theme--tag_pink: rgb(99, 56, 86);
|
|
--theme--tag_pink-text: var(--theme--tag-text, rgb(248, 170, 203));
|
|
--theme--tag_red: rgb(105, 54, 63);
|
|
--theme--tag_red-text: var(--theme--tag-text, rgb(254, 172, 165));
|
|
|
|
--theme--block-text: var(--theme--text);
|
|
--theme--block_gray: rgb(53, 58, 61);
|
|
--theme--block_gray-text: var(--theme--block-text);
|
|
--theme--block_brown: rgb(71, 63, 60);
|
|
--theme--block_brown-text: var(--theme--block-text);
|
|
--theme--block_orange: rgb(77, 58, 58);
|
|
--theme--block_orange-text: var(--theme--block-text);
|
|
--theme--block_yellow: rgb(76, 69, 61);
|
|
--theme--block_yellow-text: var(--theme--block-text);
|
|
--theme--block_green: rgb(50, 68, 64);
|
|
--theme--block_green-text: var(--theme--block-text);
|
|
--theme--block_blue: rgb(45, 66, 86);
|
|
--theme--block_blue-text: var(--theme--block-text);
|
|
--theme--block_purple: rgb(64, 58, 85);
|
|
--theme--block_purple-text: var(--theme--block-text);
|
|
--theme--block_pink: rgb(76, 55, 76);
|
|
--theme--block_pink-text: var(--theme--block-text);
|
|
--theme--block_red: rgb(78, 54, 64);
|
|
--theme--block_red-text: var(--theme--block-text);
|
|
|
|
--theme--code_inline: rgba(135, 131, 120, 0.15);
|
|
--theme--code_inline-text: #eb5757;
|
|
|
|
--theme--code: rgb(63, 68, 71);
|
|
--theme--code_plain: var(--theme--text);
|
|
--theme--code_property: hsl(350, 40%, 70%);
|
|
--theme--code_tag: var(--theme--code_property);
|
|
--theme--code_boolean: var(--theme--code_property);
|
|
--theme--code_number: var(--theme--code_property);
|
|
--theme--code_constant: var(--theme--code_property);
|
|
--theme--code_symbol: var(--theme--code_property);
|
|
--theme--code_deleted: #f00;
|
|
--theme--code_selector: hsl(75, 70%, 60%);
|
|
--theme--code_attr-name: var(--theme--code_selector);
|
|
--theme--code_string: var(--theme--code_selector);
|
|
--theme--code_char: var(--theme--code_selector);
|
|
--theme--code_builtin: var(--theme--code_selector);
|
|
--theme--code_inserted: var(--theme--code_selector);
|
|
--theme--code_operator: hsl(40, 90%, 60%);
|
|
--theme--code_entity: var(--theme--code_operator);
|
|
--theme--code_url: var(--theme--code_operator);
|
|
--theme--code_variable: var(--theme--code_operator);
|
|
--theme--code_comment: hsl(30, 20%, 50%);
|
|
--theme--code_cdata: var(--theme--code_comment);
|
|
--theme--code_prolog: var(--theme--code_comment);
|
|
--theme--code_doctype: var(--theme--code_comment);
|
|
--theme--code_atrule: hsl(350, 40%, 70%);
|
|
--theme--code_attr-value: var(--theme--code_atrule);
|
|
--theme--code_keyword: var(--theme--code_atrule);
|
|
--theme--code_regex: #e90;
|
|
--theme--code_important: var(--theme--code_regex);
|
|
--theme--code_function: var(--theme--code_plain);
|
|
--theme--code_class-name: var(--theme--code_function);
|
|
--theme--code_parameter: var(--theme--code_plain);
|
|
--theme--code_decorator: var(--theme--code_plain);
|
|
--theme--code_id: var(--theme--code_plain);
|
|
--theme--code_class: var(--theme--code_plain);
|
|
--theme--code_pseudo-element: var(--theme--code_plain);
|
|
--theme--code_pseudo-class: var(--theme--code_plain);
|
|
--theme--code_attribute: var(--theme--code_plain);
|
|
--theme--code_value: var(--theme--code_plain);
|
|
--theme--code_unit: var(--theme--code_plain);
|
|
--theme--code_punctuation: var(--theme--code_plain);
|
|
--theme--code_annotation: var(--theme--code_plain);
|
|
}
|