From 7e4febd7307a082fc22b12361961c3377586b2e0 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 28 Dec 2021 02:29:56 +1100 Subject: [PATCH] board view + code caption + calendar select colour patches --- repo/material-ocean/variables.css | 4 +- repo/theming/_mapColors.js | 10 ++- repo/theming/colors.css | 135 ++++++++++++++++++++++++++---- repo/theming/theme.css | 30 +++---- 4 files changed, 138 insertions(+), 41 deletions(-) diff --git a/repo/material-ocean/variables.css b/repo/material-ocean/variables.css index ccafcb2..ff8cb89 100644 --- a/repo/material-ocean/variables.css +++ b/repo/material-ocean/variables.css @@ -37,8 +37,8 @@ --theme--scrollbar_thumb-hover: var(--ocean--accent); --theme--ui_divider: rgba(255, 255, 255, 0.1); - --theme--ui_interactive-hover: var(--ocean--tet); - --theme--ui_interactive-active: var(--ocean--tet); + --theme--ui_interactive-hover: rgb(0, 1, 8, 0.3); + --theme--ui_interactive-active: rgb(0, 1, 8, 0.6); --theme--ui_toggle-off: #30313c; --theme--ui_corner_action: var(--theme--bg_card); --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover); diff --git a/repo/theming/_mapColors.js b/repo/theming/_mapColors.js index d408b68..04b9f4b 100644 --- a/repo/theming/_mapColors.js +++ b/repo/theming/_mapColors.js @@ -340,10 +340,11 @@ function css() { .notion-body.dark .notion-board-group[style*='background-color: ${colors[c].dark['board']}'], .notion-body:not(.dark) .notion-board-view > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: ${colors[c].light['board']}'], + [style*='background-color: ${colors[c].light['board']}'], .notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: ${colors[c].dark['board']}'] { + [style*='background-color: ${colors[c].dark['board']}'] { background: var(--theme--board_${c}) !important; + color: var(--theme--board_${c}-text) !important; } .notion-body:not(.dark) .notion-board-group[style*='background-color: ${colors[c].light['board']}'] @@ -354,6 +355,11 @@ function css() { background: var(--theme--board_${c}-card) !important; color: var(--theme--board_${c}-card_text) !important; } + .notion-body.dark + .notion-board-group[style*='background-color: ${colors[c].dark['board']}'] + > [data-block-id] > [rel='noopener noreferrer'] [placeholder="Untitled"] { + -webkit-text-fill-color: var(--theme--board_${c}-card_text, var(--theme--board_${c}-text)) !important; + } .notion-body:not(.dark) .notion-board-group[style*='background-color: ${colors[c].light['board']}'] > [data-block-id] > [rel='noopener noreferrer'] > .notion-focusable:hover { diff --git a/repo/theming/colors.css b/repo/theming/colors.css index a21e054..e795727 100644 --- a/repo/theming/colors.css +++ b/repo/theming/colors.css @@ -62,14 +62,15 @@ > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgba(247, 247, 245, 0.7)'], + [style*='background-color: rgba(247, 247, 245, 0.7)'], .notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgb(51, 55, 59)'] { + [style*='background-color: rgb(51, 55, 59)'] { background: var(--theme--board_gray) !important; + color: var(--theme--board_gray-text) !important; } .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(247, 247, 245, 0.7)'] @@ -82,6 +83,16 @@ background: var(--theme--board_gray-card) !important; color: var(--theme--board_gray-card_text) !important; } +.notion-body.dark + .notion-board-group[style*='background-color: rgb(51, 55, 59)'] + > [data-block-id] + > [rel='noopener noreferrer'] + [placeholder='Untitled'] { + -webkit-text-fill-color: var( + --theme--board_gray-card_text, + var(--theme--board_gray-text) + ) !important; +} .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(247, 247, 245, 0.7)'] > [data-block-id] @@ -162,14 +173,15 @@ > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgba(250, 246, 245, 0.7)'], + [style*='background-color: rgba(250, 246, 245, 0.7)'], .notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgb(59, 54, 51)'] { + [style*='background-color: rgb(59, 54, 51)'] { background: var(--theme--board_brown) !important; + color: var(--theme--board_brown-text) !important; } .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(250, 246, 245, 0.7)'] @@ -182,6 +194,16 @@ background: var(--theme--board_brown-card) !important; color: var(--theme--board_brown-card_text) !important; } +.notion-body.dark + .notion-board-group[style*='background-color: rgb(59, 54, 51)'] + > [data-block-id] + > [rel='noopener noreferrer'] + [placeholder='Untitled'] { + -webkit-text-fill-color: var( + --theme--board_brown-card_text, + var(--theme--board_brown-text) + ) !important; +} .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(250, 246, 245, 0.7)'] > [data-block-id] @@ -262,14 +284,15 @@ > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgba(252, 245, 242, 0.7)'], + [style*='background-color: rgba(252, 245, 242, 0.7)'], .notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgb(61, 54, 49)'] { + [style*='background-color: rgb(61, 54, 49)'] { background: var(--theme--board_orange) !important; + color: var(--theme--board_orange-text) !important; } .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(252, 245, 242, 0.7)'] @@ -282,6 +305,16 @@ background: var(--theme--board_orange-card) !important; color: var(--theme--board_orange-card_text) !important; } +.notion-body.dark + .notion-board-group[style*='background-color: rgb(61, 54, 49)'] + > [data-block-id] + > [rel='noopener noreferrer'] + [placeholder='Untitled'] { + -webkit-text-fill-color: var( + --theme--board_orange-card_text, + var(--theme--board_orange-text) + ) !important; +} .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(252, 245, 242, 0.7)'] > [data-block-id] @@ -362,14 +395,15 @@ > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgba(250, 247, 237, 0.7)'], + [style*='background-color: rgba(250, 247, 237, 0.7)'], .notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgb(56, 55, 49)'] { + [style*='background-color: rgb(56, 55, 49)'] { background: var(--theme--board_yellow) !important; + color: var(--theme--board_yellow-text) !important; } .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(250, 247, 237, 0.7)'] @@ -382,6 +416,16 @@ background: var(--theme--board_yellow-card) !important; color: var(--theme--board_yellow-card_text) !important; } +.notion-body.dark + .notion-board-group[style*='background-color: rgb(56, 55, 49)'] + > [data-block-id] + > [rel='noopener noreferrer'] + [placeholder='Untitled'] { + -webkit-text-fill-color: var( + --theme--board_yellow-card_text, + var(--theme--board_yellow-text) + ) !important; +} .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(250, 247, 237, 0.7)'] > [data-block-id] @@ -462,14 +506,15 @@ > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgba(244, 248, 243, 0.7)'], + [style*='background-color: rgba(244, 248, 243, 0.7)'], .notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgb(49, 57, 53)'] { + [style*='background-color: rgb(49, 57, 53)'] { background: var(--theme--board_green) !important; + color: var(--theme--board_green-text) !important; } .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(244, 248, 243, 0.7)'] @@ -482,6 +527,16 @@ background: var(--theme--board_green-card) !important; color: var(--theme--board_green-card_text) !important; } +.notion-body.dark + .notion-board-group[style*='background-color: rgb(49, 57, 53)'] + > [data-block-id] + > [rel='noopener noreferrer'] + [placeholder='Untitled'] { + -webkit-text-fill-color: var( + --theme--board_green-card_text, + var(--theme--board_green-text) + ) !important; +} .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(244, 248, 243, 0.7)'] > [data-block-id] @@ -562,14 +617,15 @@ > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgba(241, 248, 251, 0.7)'], + [style*='background-color: rgba(241, 248, 251, 0.7)'], .notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgb(49, 56, 64)'] { + [style*='background-color: rgb(49, 56, 64)'] { background: var(--theme--board_blue) !important; + color: var(--theme--board_blue-text) !important; } .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(241, 248, 251, 0.7)'] @@ -582,6 +638,16 @@ background: var(--theme--board_blue-card) !important; color: var(--theme--board_blue-card_text) !important; } +.notion-body.dark + .notion-board-group[style*='background-color: rgb(49, 56, 64)'] + > [data-block-id] + > [rel='noopener noreferrer'] + [placeholder='Untitled'] { + -webkit-text-fill-color: var( + --theme--board_blue-card_text, + var(--theme--board_blue-text) + ) !important; +} .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(241, 248, 251, 0.7)'] > [data-block-id] @@ -662,14 +728,15 @@ > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgba(249, 246, 252, 0.7)'], + [style*='background-color: rgba(249, 246, 252, 0.7)'], .notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgb(57, 53, 65)'] { + [style*='background-color: rgb(57, 53, 65)'] { background: var(--theme--board_purple) !important; + color: var(--theme--board_purple-text) !important; } .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(249, 246, 252, 0.7)'] @@ -682,6 +749,16 @@ background: var(--theme--board_purple-card) !important; color: var(--theme--board_purple-card_text) !important; } +.notion-body.dark + .notion-board-group[style*='background-color: rgb(57, 53, 65)'] + > [data-block-id] + > [rel='noopener noreferrer'] + [placeholder='Untitled'] { + -webkit-text-fill-color: var( + --theme--board_purple-card_text, + var(--theme--board_purple-text) + ) !important; +} .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(249, 246, 252, 0.7)'] > [data-block-id] @@ -762,14 +839,15 @@ > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgba(251, 245, 251, 0.7)'], + [style*='background-color: rgba(251, 245, 251, 0.7)'], .notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgb(60, 53, 58)'] { + [style*='background-color: rgb(60, 53, 58)'] { background: var(--theme--board_pink) !important; + color: var(--theme--board_pink-text) !important; } .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(251, 245, 251, 0.7)'] @@ -782,6 +860,16 @@ background: var(--theme--board_pink-card) !important; color: var(--theme--board_pink-card_text) !important; } +.notion-body.dark + .notion-board-group[style*='background-color: rgb(60, 53, 58)'] + > [data-block-id] + > [rel='noopener noreferrer'] + [placeholder='Untitled'] { + -webkit-text-fill-color: var( + --theme--board_pink-card_text, + var(--theme--board_pink-text) + ) !important; +} .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(251, 245, 251, 0.7)'] > [data-block-id] @@ -862,14 +950,15 @@ > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgba(253, 245, 243, 0.7)'], + [style*='background-color: rgba(253, 245, 243, 0.7)'], .notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2) - > [style*='background-color: rgb(66, 51, 51)'] { + [style*='background-color: rgb(66, 51, 51)'] { background: var(--theme--board_red) !important; + color: var(--theme--board_red-text) !important; } .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(253, 245, 243, 0.7)'] @@ -882,6 +971,16 @@ background: var(--theme--board_red-card) !important; color: var(--theme--board_red-card_text) !important; } +.notion-body.dark + .notion-board-group[style*='background-color: rgb(66, 51, 51)'] + > [data-block-id] + > [rel='noopener noreferrer'] + [placeholder='Untitled'] { + -webkit-text-fill-color: var( + --theme--board_red-card_text, + var(--theme--board_red-text) + ) !important; +} .notion-body:not(.dark) .notion-board-group[style*='background-color: rgba(253, 245, 243, 0.7)'] > [data-block-id] diff --git a/repo/theming/theme.css b/repo/theming/theme.css index 4c9dbb5..9f0d013 100644 --- a/repo/theming/theme.css +++ b/repo/theming/theme.css @@ -47,7 +47,7 @@ body, .notion-update-sidebar-tab-updates-header + .notion-scroller, .notion-update-sidebar-tab-comments-header, .notion-update-sidebar-tab-comments-header + div, -.notion-code-block ~ [style$='padding-right: 105px;'] { +.notion-code-block > div > div > [style*='background: '][style$='padding-right: 105px;'] { background: var(--theme--bg) !important; } .notion-timeline-item-row + div > div > div, @@ -276,6 +276,11 @@ body, color: var(--theme--text) !important; fill: var(--theme--text) !important; } +.notion-body:not(.dark) [style*='background: rgba(55, 53, 47, 0.16)'] svg, +.notion-body.dark .notion-focusable[role='button'][style*='background: rgb(63, 68, 71);'] svg { + color: var(--theme--text) !important; + fill: var(--theme--text) !important; +} .notion-focusable-within, .notion-share-menu @@ -356,25 +361,12 @@ body, [style*='width: 7px; height: 7px; background: rgb(211, 79, 67); border-radius: 100%;'] { background: var(--theme--accent_red) !important; } -#notion-app - .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--start:not([style*='color: white'])::after, -#notion-app - .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--end:not([style*='color: white'])::after { - content: ''; - background-color: var(--theme--accent_blue-selection) !important; - position: absolute; - width: 32px; - height: 30px; +#notion-app .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--start, +#notion-app .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--end { + background-color: var(--theme--accent_blue) !important; } -#notion-app - .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--start:not([style*='color: white'])::after { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; -} -#notion-app - .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--end:not([style*='color: white'])::after { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; +#notion-app .DayPicker-Day.DayPicker-Day--range:hover { + border-radius: 0 !important; } .notion-calendar-view-day[style*='background'] { background-color: var(--theme--accent_red) !important;