/** * notion-enhancer: theming * (c) 2021 dragonwocky (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.light { --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--ui_corner_action: white; --theme--ui_corner_action-hover: rgb(239, 239, 238); --theme--ui_corner_action-active: rgb(223, 223, 222); --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(120, 119, 116, 1); --theme--text_brown: rgba(159, 107, 83, 1); --theme--text_orange: rgba(217, 115, 13, 1); --theme--text_yellow: rgba(203, 145, 47, 1); --theme--text_green: rgba(68, 131, 97, 1); --theme--text_blue: rgba(51, 126, 169, 1); --theme--text_purple: rgba(144, 101, 176, 1); --theme--text_pink: rgba(193, 76, 138, 1); --theme--text_red: rgba(212, 76, 71, 1); --theme--highlight_gray: rgba(241, 241, 239, 1); --theme--highlight_gray-text: currentColor; --theme--highlight_brown: rgba(244, 238, 238, 1); --theme--highlight_brown-text: currentColor; --theme--highlight_orange: rgba(251, 236, 221, 1); --theme--highlight_orange-text: currentColor; --theme--highlight_yellow: rgba(251, 243, 219, 1); --theme--highlight_yellow-text: currentColor; --theme--highlight_green: rgba(237, 243, 236, 1); --theme--highlight_green-text: currentColor; --theme--highlight_blue: rgba(231, 243, 248, 1); --theme--highlight_blue-text: currentColor; --theme--highlight_purple: rgba(244, 240, 247, 0.8); --theme--highlight_purple-text: currentColor; --theme--highlight_pink: rgba(249, 238, 243, 0.8); --theme--highlight_pink-text: currentColor; --theme--highlight_red: rgba(253, 235, 236, 1); --theme--highlight_red-text: currentColor; --theme--callout_gray: rgb(241, 241, 239); --theme--callout_gray-text: currentColor; --theme--callout_brown: rgb(244, 238, 238); --theme--callout_brown-text: currentColor; --theme--callout_orange: rgb(251, 236, 221); --theme--callout_orange-text: currentColor; --theme--callout_yellow: rgb(251, 243, 219); --theme--callout_yellow-text: currentColor; --theme--callout_green: rgb(237, 243, 236); --theme--callout_green-text: currentColor; --theme--callout_blue: rgb(231, 243, 248); --theme--callout_blue-text: currentColor; --theme--callout_purple: rgba(244, 240, 247, 0.8); --theme--callout_purple-text: currentColor; --theme--callout_pink: rgba(249, 238, 243, 0.8); --theme--callout_pink-text: currentColor; --theme--callout_red: rgb(253, 235, 236); --theme--callout_red-text: currentColor; --theme--tag_default: rgba(206, 205, 202, 0.5); --theme--tag_default-text: var(--theme--text); --theme--tag_light_gray: rgba(227, 226, 224, 0.5); --theme--tag_light_gray-text: rgb(50, 48, 44); --theme--tag_gray: rgb(227, 226, 224); --theme--tag_gray-text: rgb(50, 48, 44); --theme--tag_brown: rgb(238, 224, 218); --theme--tag_brown-text: rgb(68, 42, 30); --theme--tag_orange: rgb(250, 222, 201); --theme--tag_orange-text: rgb(73, 41, 14); --theme--tag_yellow: rgb(253, 236, 200); --theme--tag_yellow-text: rgb(64, 44, 27); --theme--tag_green: rgb(219, 237, 219); --theme--tag_green-text: rgb(28, 56, 41); --theme--tag_blue: rgb(211, 229, 239); --theme--tag_blue-text: rgb(24, 51, 71); --theme--tag_purple: rgb(232, 222, 238); --theme--tag_purple-text: rgb(65, 36, 84); --theme--tag_pink: rgb(245, 224, 233); --theme--tag_pink-text: rgb(76, 35, 55); --theme--tag_red: rgb(255, 226, 221); --theme--tag_red-text: rgb(93, 23, 21); --theme--board_light_gray: rgba(249, 249, 245, 0.5); --theme--board_light_gray-card: white; --theme--board_light_gray-card_text: inherit; --theme--board_light_gray-text: rgba(145, 145, 142, 0.5); --theme--board_gray: rgba(247, 247, 245, 0.7); --theme--board_gray-card: white; --theme--board_gray-card_text: inherit; --theme--board_gray-text: rgb(145, 145, 142); --theme--board_brown: rgba(250, 246, 245, 0.7); --theme--board_brown-card: white; --theme--board_brown-card_text: inherit; --theme--board_brown-text: rgb(187, 132, 108); --theme--board_orange: rgba(252, 245, 242, 0.7); --theme--board_orange-card: white; --theme--board_orange-card_text: inherit; --theme--board_orange-text: rgb(215, 129, 58); --theme--board_yellow: rgba(250, 247, 237, 0.7); --theme--board_yellow-card: white; --theme--board_yellow-card_text: inherit; --theme--board_yellow-text: rgb(203, 148, 51); --theme--board_green: rgba(244, 248, 243, 0.7); --theme--board_green-card: white; --theme--board_green-card_text: inherit; --theme--board_green-text: rgb(108, 155, 125); --theme--board_blue: rgba(241, 248, 251, 0.7); --theme--board_blue-card: white; --theme--board_blue-card_text: inherit; --theme--board_blue-text: rgb(91, 151, 189); --theme--board_purple: rgba(249, 246, 252, 0.7); --theme--board_purple-card: white; --theme--board_purple-card_text: inherit; --theme--board_purple-text: rgb(167, 130, 195); --theme--board_pink: rgba(251, 245, 251, 0.7); --theme--board_pink-card: white; --theme--board_pink-card_text: inherit; --theme--board_pink-text: rgb(205, 116, 159); --theme--board_red: rgba(253, 245, 243, 0.7); --theme--board_red-card: white; --theme--board_red-card_text: inherit; --theme--board_red-text: rgb(225, 111, 100); --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: rgba(255, 255, 255, 0.1); --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--ui_corner_action: rgb(80, 85, 88); --theme--ui_corner_action-hover: rgb(98, 102, 104); --theme--ui_corner_action-active: rgb(120, 123, 123); --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(159, 164, 169, 1); --theme--text_brown: rgba(212, 150, 117, 1); --theme--text_orange: rgba(217, 133, 56, 1); --theme--text_yellow: rgba(201, 145, 38, 1); --theme--text_green: rgba(113, 178, 131, 1); --theme--text_blue: rgba(102, 170, 218, 1); --theme--text_purple: rgba(176, 152, 217, 1); --theme--text_pink: rgba(223, 132, 209, 1); --theme--text_red: rgba(234, 135, 140, 1); --theme--highlight_gray: rgba(60, 65, 68, 1); --theme--highlight_gray-text: currentColor; --theme--highlight_brown: rgba(76, 61, 53, 1); --theme--highlight_brown-text: currentColor; --theme--highlight_orange: rgba(85, 59, 41, 1); --theme--highlight_orange-text: currentColor; --theme--highlight_yellow: rgba(79, 64, 41, 1); --theme--highlight_yellow-text: currentColor; --theme--highlight_green: rgba(46, 68, 58, 1); --theme--highlight_green-text: currentColor; --theme--highlight_blue: rgba(45, 66, 86, 1); --theme--highlight_blue-text: currentColor; --theme--highlight_purple: rgba(69, 58, 91, 1); --theme--highlight_purple-text: currentColor; --theme--highlight_pink: rgba(81, 56, 77, 1); --theme--highlight_pink-text: currentColor; --theme--highlight_red: rgba(94, 52, 54, 1); --theme--highlight_red-text: currentColor; --theme--callout_gray: rgb(60, 65, 68); --theme--callout_gray-text: currentColor; --theme--callout_brown: rgb(76, 61, 53); --theme--callout_brown-text: currentColor; --theme--callout_orange: rgb(85, 59, 41); --theme--callout_orange-text: currentColor; --theme--callout_yellow: rgb(79, 64, 41); --theme--callout_yellow-text: currentColor; --theme--callout_green: rgb(46, 68, 58); --theme--callout_green-text: currentColor; --theme--callout_blue: rgb(45, 66, 86); --theme--callout_blue-text: currentColor; --theme--callout_purple: rgb(69, 58, 91); --theme--callout_purple-text: currentColor; --theme--callout_pink: rgb(81, 56, 77); --theme--callout_pink-text: currentColor; --theme--callout_red: rgb(94, 52, 54); --theme--callout_red-text: currentColor; --theme--tag_default: rgba(206, 205, 202, 0.5); --theme--tag_default-text: var(--theme--text); --theme--tag_light_gray: rgba(71, 76, 80, 0.7); --theme--tag_light_gray-text: rgba(255, 255, 255, 0.88); --theme--tag_gray: rgb(71, 76, 80); --theme--tag_gray-text: rgba(255, 255, 255, 0.88); --theme--tag_brown: rgb(92, 71, 61); --theme--tag_brown-text: rgba(255, 255, 255, 0.88); --theme--tag_orange: rgb(136, 84, 44); --theme--tag_orange-text: rgba(255, 255, 255, 0.88); --theme--tag_yellow: rgb(146, 118, 63); --theme--tag_yellow-text: rgba(255, 255, 255, 0.88); --theme--tag_green: rgb(50, 82, 65); --theme--tag_green-text: rgba(255, 255, 255, 0.88); --theme--tag_blue: rgb(42, 78, 107); --theme--tag_blue-text: rgba(255, 255, 255, 0.88); --theme--tag_purple: rgb(83, 68, 116); --theme--tag_purple-text: rgba(255, 255, 255, 0.88); --theme--tag_pink: rgb(106, 59, 99); --theme--tag_pink-text: rgba(255, 255, 255, 0.88); --theme--tag_red: rgb(122, 54, 59); --theme--tag_red-text: rgba(255, 255, 255, 0.88); --theme--board_light_gray: rgba(51, 55, 59, 0.7); --theme--board_light_gray-card: rgba(60, 65, 68, 0.7); --theme--board_light_gray-card_text: inherit; --theme--board_light_gray-text: rgba(107, 112, 116, 0.7); --theme--board_gray: rgb(51, 55, 59); --theme--board_gray-card: rgb(60, 65, 68); --theme--board_gray-card_text: inherit; --theme--board_gray-text: rgb(107, 112, 116); --theme--board_brown: rgb(59, 54, 51); --theme--board_brown-card: rgb(76, 61, 53); --theme--board_brown-card_text: inherit; --theme--board_brown-text: rgb(155, 98, 69); --theme--board_orange: rgb(61, 54, 49); --theme--board_orange-card: rgb(85, 59, 41); --theme--board_orange-text: rgb(168, 92, 30); --theme--board_yellow: rgb(56, 55, 49); --theme--board_yellow-card: rgb(79, 64, 41); --theme--board_yellow-card_text: inherit; --theme--board_yellow-text: rgb(137, 107, 42); --theme--board_green: rgb(49, 57, 53); --theme--board_green-card: rgb(46, 68, 58); --theme--board_green-card_text: inherit; --theme--board_green-text: rgb(61, 124, 86); --theme--board_blue: rgb(49, 56, 64); --theme--board_blue-card: rgb(45, 66, 86); --theme--board_blue-card_text: inherit; --theme--board_blue-text: rgb(46, 117, 164); --theme--board_purple: rgb(57, 53, 65); --theme--board_purple-card: rgb(69, 58, 91); --theme--board_purple-card_text: inherit; --theme--board_purple-text: rgb(123, 96, 180); --theme--board_pink: rgb(60, 53, 58); --theme--board_pink-card: rgb(81, 56, 77); --theme--board_pink-card_text: inherit; --theme--board_pink-text: rgb(169, 76, 157); --theme--board_red: rgb(66, 51, 51); --theme--board_red-card: rgb(94, 52, 54); --theme--board_red-card_text: inherit; --theme--board_red-text: rgb(194, 65, 82); --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); }