From 5a2747098b850ddfb6e70012ae1aa5a154e6524d Mon Sep 17 00:00:00 2001 From: Hari Rana Date: Sat, 27 Jan 2024 14:05:44 -0500 Subject: [PATCH] style: Define all month cells This fixes an issue on the dark style preference where selecting cells would cause the month separators to lose their color. The dark style would override the month cells, which would higher its specificity, and thus would prioritize it over the selectors. This commit places everything in order, so we can freely define colors without playing with specificity. --- src/theme/style-dark.css | 34 ++++++++-------------------------- src/theme/style.css | 29 ++++++++++++++++++----------- 2 files changed, 26 insertions(+), 37 deletions(-) diff --git a/src/theme/style-dark.css b/src/theme/style-dark.css index 135c0955..28a1e39f 100644 --- a/src/theme/style-dark.css +++ b/src/theme/style-dark.css @@ -1,4 +1,11 @@ -@define-color month_border_color mix(@borders, @light_5, 0.14); +@define-color month_separator_color mix(@borders, @light_5, 0.14); +@define-color month_today_color alpha(@accent_bg_color, 0.18); +@define-color month_today_hover_color alpha(@accent_bg_color, 0.28); +@define-color month_selected_today_color alpha(@accent_bg_color, 0.37); +@define-color month_selected_today_hover_color alpha(@accent_bg_color, 0.44); +@define-color month_selected_border_color alpha(@accent_bg_color, 0.25); +@define-color month_selected_background_color alpha(@accent_bg_color, 0.17); +@define-color month_selected_background_hover_color alpha(@accent_bg_color, 0.2); /* * Event widget @@ -17,28 +24,3 @@ searchbutton > popover listview > row:selected { background-color: alpha(@accent_bg_color, 0.2); } -/* - * Month cell - */ - -/* Today */ -monthcell.today { background-color: alpha(@accent_bg_color, 0.18); } -monthcell.today:hover { background-color: alpha(@accent_bg_color, 0.28); } - -monthcell:selected.today { background-color: alpha(@accent_bg_color, 0.37); } -monthcell:selected.today:hover { background-color: alpha(@accent_bg_color, 0.44); } - -/* Selected */ -monthcell:selected, -monthcell.out-of-month:selected, -monthcell:not(.workday):selected { - border-color: alpha(@accent_bg_color, 0.25); - background-color: alpha(@accent_bg_color, 0.17); -} - -monthcell:selected:hover, -monthcell.out-of-month:selected:hover, -monthcell:not(.workday):selected:hover { - background-color: alpha(@accent_bg_color, 0.2); - transition: background-color 200ms; -} diff --git a/src/theme/style.css b/src/theme/style.css index 666bf984..6e1e77df 100644 --- a/src/theme/style.css +++ b/src/theme/style.css @@ -1,4 +1,11 @@ -@define-color month_border_color mix(@borders, @dark_5, 0.09); +@define-color month_separator_color mix(@borders, @dark_5, 0.09); +@define-color month_today_color alpha(@accent_bg_color, 0.15); +@define-color month_today_hover_color alpha(@accent_bg_color, 0.25); +@define-color month_selected_today_color alpha(@accent_bg_color, 0.33); +@define-color month_selected_today_hover_color alpha(@accent_bg_color, 0.4); +@define-color month_selected_border_color alpha(@accent_bg_color, 0.2); +@define-color month_selected_background_color alpha(@accent_bg_color, 0.1); +@define-color month_selected_background_hover_color alpha(@accent_bg_color, 0.17); /* Header labels */ label.primary-label { @@ -325,11 +332,11 @@ monthcell:hover { } /* Today */ -monthcell.today { background-color: alpha(@accent_bg_color, 0.15); } -monthcell.today:hover { background-color: alpha(@accent_bg_color, 0.25); } +monthcell.today { background-color: @month_today_color; } +monthcell.today:hover { background-color: @month_today_hover_color; } -monthcell:selected.today { background-color: alpha(@accent_bg_color, 0.33); } -monthcell:selected.today:hover { background-color: alpha(@accent_bg_color, 0.4); } +monthcell:selected.today { background-color: @month_selected_today_color; } +monthcell:selected.today:hover { background-color: @month_selected_today_hover_color; } monthcell.today label.day-label { font-weight: bold; @@ -370,14 +377,14 @@ monthcell.today:not(.workday) { monthcell:selected, monthcell.out-of-month:selected, monthcell:not(.workday):selected { - border-color: alpha(@accent_bg_color, 0.2); - background-color: alpha(@accent_bg_color, 0.1); + border-color: @month_selected_border_color; + background-color: @month_selected_background_color; } monthcell:selected:hover, monthcell.out-of-month:selected:hover, monthcell:not(.workday):selected:hover { - background-color: alpha(@accent_bg_color, 0.17); + background-color: @month_selected_background_hover_color; transition: background-color 200ms; } @@ -399,12 +406,12 @@ monthcell button { /* Separators */ monthcell.separator-top, monthcell.separator-top:selected { - border-top: 1px solid @month_border_color; + border-top: 1px solid @month_separator_color; } monthcell.separator-side:dir(ltr), monthcell.separator-side:selected:dir(ltr) { - border-left: 1px solid @month_border_color; + border-left: 1px solid @month_separator_color; } monthcell:nth-child(7n + 1):dir(ltr), @@ -414,7 +421,7 @@ monthcell:nth-child(7n + 1):selected:dir(ltr) { monthcell.separator-side:dir(rtl), monthcell.separator-side:selected:dir(rtl) { - border-right: 1px solid @month_border_color; + border-right: 1px solid @month_separator_color; } monthcell:nth-child(7n + 1):dir(rtl),