Federated_Computer/federated-calendar
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Define all month cells

Browse Source 
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.
This commit is contained in:
Hari Rana
2024-01-27 14:14:32 -05:00
parent 1114e566d9
commit 5a2747098b
2 changed files with 26 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/theme/style-dark.css
+8 -26
View File
@@ -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;
}
src/theme/style.css
+18 -11
View File
@@ -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),