brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

calendar: Stylesheet follow-ups and fixes

Browse Source 
- drop extraneous calendar-day style_class on week headings
- fix wrong variable in insensitive button mixin
- add some missing focus styles to calendar month header
- fix the asset for today with-events in light theme
- adjust HighContrast visuals for other month days
- make pager buttons circular

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3102>
This commit is contained in:
Sam Hewitt 2024-01-09 15:06:59 -03:30 committed by Robert Mader
parent e57bf0791e
commit 075df42d01
3 changed files with 38 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/theme/gnome-shell-sass/_drawing.scss
View File

@ -259,7 +259,7 @@
// insensitive button
@else if $t==insensitive {
color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
background-color: if($variant == 'light', transparentize($tc, .9), transparentize($tc, .95));
background-color: if($variant == 'light', transparentize($button_bg_color, .9), transparentize($button_bg_color, .95));
@if $contrast == 'high' {
// no border since it isn't sensitive

61
data/theme/gnome-shell-sass/widgets/_calendar.scss
View File

@ -47,15 +47,19 @@
// month label
.calendar-month-label {
@extend %heading;
@extend .button, .flat;
color: $fg_color !important;
padding: 8px 0;
width: 10em;
border-radius: $forced_circular_radius;
text-align: center;
}
.pager-button {
@extend .icon-button, .flat;
margin: $base_margin * 0.5;
padding: $base_padding !important;
border-radius: $base_border_radius !important;
transition-duration: 100ms;
height: 2.6em;
width: 2.6em;
padding: 0;
}
}
@ -64,40 +68,35 @@
@extend %numeric;
@extend %smaller;
@extend .button, .flat;
border-radius: $forced_circular_radius;
height: 3em !important;
width: 3em !important;
height: 3em;
width: 3em;
margin: 2px;
padding: 0 !important;
font-weight: 600;
padding: 0;
font-weight: bold;
text-align: center;
transition-duration: 100ms;
// day of week heading
&.calendar-day-heading {
background-color: transparent;
color: $insensitive_fg_color;
height: 0.93em !important; // force heading to be smaller height
padding-top: $base_padding !important;
margin-bottom: 0;
border-radius: $base_border_radius * 1.5;
}
&.calendar-weekday {}
&.calendar-weekend {
color: $insensitive_fg_color;
}
&.calendar-other-month {
color: $insensitive_fg_color;
color: transparentize($insensitive_fg_color, 0.2);
font-weight: normal;
font-style: italic;
@if $contrast == 'high' {
color: $insensitive_fg_color;
font-style: italic; // differentiate with a font-style instead of text color
}
}
&.calendar-today {
@extend .button, .default;
@extend .default;
border: none;
&.calendar-day-with-events {
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
}
}
&.calendar-day-with-events {
@ -106,6 +105,18 @@
}
}
// day of week heading
.calendar-day-heading {
@extend %numeric;
@extend %smaller;
@extend .button, .flat;
font-weight: bold;
text-align: center;
margin: $base_margin;
padding: $base_padding * 0.5 $base_padding;
border-radius: $base_border_radius;
}
// week number style
.calendar-week-number {
@extend %smaller;
@ -115,7 +126,7 @@
margin: $base_padding;
padding: 0 $base_padding;
border-radius: $base_border_radius * 0.5;
background-color: transparentize($fg_color, 0.9);
background-color: transparentize($insensitive_fg_color, .8);
color: $insensitive_fg_color;
border: 1px solid transparent;

2
js/ui/calendar.js
View File

@ -535,7 +535,7 @@ export const Calendar = GObject.registerClass({
// and we want, ideally, a single character for e.g. S M T W T F S
let customDayAbbrev = _getCalendarDayAbbreviation(iter.getDay());
let label = new St.Label({
style_class: 'calendar-day calendar-day-heading',
style_class: 'calendar-day-heading',
text: customDayAbbrev,
can_focus: true,
});