gnome-shell: Update calendar style to match Material Design guideline
The original work is by @TomBursch on https://github.com/nana-4/materia-theme/pull/495
roundabout,
created on Wednesday, 16 September 2020, 11:50:26 (1600257026),
received on Sunday, 11 May 2025, 13:22:55 (1746969775)
Author identity: nana-4 <hnmaigo@gmail.com>
8e27932df39a8ee4df502627017da07a9bdc0fcd
src/gnome-shell/assets-dark/calendar-event.svg
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="#8ab4f8">
<circle cx="16" cy="26" r="2"/>
</svg>
src/gnome-shell/assets/calendar-event.svg
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="#1a73e8">
<circle cx="16" cy="26" r="2"/>
</svg>
src/gnome-shell/gnome-shell-theme.gresource.xml
@@ -35,6 +35,7 @@
<file>assets/dash/top-running4-focused.svg</file>
<file>assets/calendar-arrow-left.svg</file>
<file>assets/calendar-arrow-right.svg</file>
<file>assets/calendar-event.svg</file>
<file>assets/checkbox.svg</file>
<file>assets/checkbox-off.svg</file>
<file>assets/close.svg</file>
src/gnome-shell/sass/components/menu/_calendar.scss
@@ -201,8 +201,9 @@ $calendar-column-margin: 0 8px;
&:selected {
border-color: transparent;
background-color: $overlay-selected;
color: inherit;
background-color: $primary !important;
color: $on-primary !important;
font-weight: 500 !important;
}
// day of week heading
@@ -247,9 +248,10 @@ $calendar-column-margin: 0 8px;
// Today
.calendar-today {
border: 0;
background-color: transparent;
box-shadow: inset 0 0 0 1px hint($on-surface);
background-color: rgba($surface, .01); // to draw box-shadow
color: inherit;
font-weight: bold !important;
font-weight: normal;
&:focus {
background-color: overlay("focus", $on-surface);
@@ -271,23 +273,23 @@ $calendar-column-margin: 0 8px;
}
&:selected {
box-shadow: inset 0 0 0 1px transparent;
&,
&:hover,
&:focus {
background-color: $overlay-selected;
color: inherit;
background-color: $primary;
color: $on-primary;
}
}
}
.calendar-day-with-events {
background-image: none;
color: $primary !important;
font-weight: normal;
text-decoration: underline;
background-image: url("assets/calendar-event.svg");
&.calendar-work-day {
color: $primary !important;
color: inherit;
font-weight: normal;
}
}