calendar: Stylesheet clean up & fixes
- added style class for when there are no world clocks present - restructured the scss to match the widget structure - cleaned up padding and font color styles - improved high contrast support Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7324 Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3120>
This commit is contained in:
Sam Hewitt
parent
569293fad6
commit
e97175d2bf
@ -5,22 +5,24 @@
|
||||
padding: $base_margin;
|
||||
}
|
||||
|
||||
// Calendar menu side column
|
||||
// calendar menu side column
|
||||
.datemenu-calendar-column {
|
||||
spacing: $base_padding;
|
||||
&:ltr {padding-left: $base_padding;}
|
||||
&:rtl {padding-right: $base_padding;}
|
||||
.datemenu-displays-box {spacing: $base_padding;}
|
||||
&:ltr { margin-left: $base_padding;}
|
||||
&:rtl { margin-right: $base_padding;}
|
||||
.datemenu-displays-box {
|
||||
spacing: $base_padding;
|
||||
}
|
||||
}
|
||||
|
||||
/* today button (the date) */
|
||||
// today button (the date)
|
||||
.datemenu-today-button {
|
||||
@extend %card_flat;
|
||||
padding: $base_padding * 1.5;
|
||||
|
||||
// weekday label
|
||||
.day-label {
|
||||
@extend %heading;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// date label
|
||||
@ -29,7 +31,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Calendar */
|
||||
// the mini calendar
|
||||
.calendar {
|
||||
@extend %card_flat;
|
||||
margin-top: 0;
|
||||
@ -77,23 +79,35 @@
|
||||
text-align: center;
|
||||
|
||||
&.calendar-weekday {}
|
||||
|
||||
&.calendar-weekend {
|
||||
color: $insensitive_fg_color;
|
||||
@if $contrast == 'high' {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
&.calendar-other-month {
|
||||
color: transparentize($insensitive_fg_color, 0.2);
|
||||
color: transparentize($fg_color, 0.5);
|
||||
font-weight: normal;
|
||||
|
||||
&.calendar-weekend {
|
||||
color: transparentize($fg_color, 0.5);
|
||||
@if $contrast == 'high' {
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
@if $contrast == 'high' {
|
||||
color: $insensitive_fg_color;
|
||||
color: $fg_color;
|
||||
font-style: italic; // differentiate with a font-style instead of text color
|
||||
}
|
||||
}
|
||||
|
||||
&.calendar-today {
|
||||
@extend %default_button;
|
||||
border: none;
|
||||
// override colors above for when today is a weekend
|
||||
color: $selected_fg_color !important;
|
||||
&.calendar-day-with-events {
|
||||
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
|
||||
}
|
||||
@ -128,115 +142,137 @@
|
||||
border-radius: $base_border_radius * 0.5;
|
||||
background-color: transparentize($insensitive_fg_color, .8);
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
@if $contrast == 'high' {
|
||||
@include draw_hc_inset();
|
||||
// common style for the date menu widgets
|
||||
.events-button,
|
||||
.world-clocks-button,
|
||||
.weather-button {
|
||||
@extend %card;
|
||||
}
|
||||
|
||||
// events
|
||||
.events-button {
|
||||
|
||||
.events-box {
|
||||
|
||||
// event title
|
||||
.events-title {
|
||||
@extend %heading;
|
||||
color: $insensitive_fg_color;
|
||||
padding-bottom: $base_padding;
|
||||
}
|
||||
|
||||
// list of events
|
||||
.events-list {
|
||||
spacing: $base_padding;
|
||||
|
||||
// container for an event
|
||||
.event-box {
|
||||
spacing: $base_padding;
|
||||
border-radius: $base_border_radius;
|
||||
|
||||
.event-summary {
|
||||
@extend %heading;
|
||||
}
|
||||
|
||||
.event-time {
|
||||
@extend %numeric;
|
||||
@extend %caption;
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.event-placeholder {
|
||||
color: $insensitive_fg_color;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Events */
|
||||
.events-button {
|
||||
@extend %card;
|
||||
|
||||
.events-box {
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
.events-list {
|
||||
spacing: 2 * $base_padding;
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
.events-title {
|
||||
@extend %heading;
|
||||
margin-bottom: $base_margin;
|
||||
}
|
||||
|
||||
.event-time {
|
||||
@extend %numeric;
|
||||
@extend %caption;
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
/* World clocks */
|
||||
// world clocks
|
||||
.world-clocks-button {
|
||||
@extend %card;
|
||||
|
||||
.world-clocks-grid {
|
||||
spacing-rows: $base_padding;
|
||||
spacing-columns: $base_padding * 2;
|
||||
}
|
||||
|
||||
// title
|
||||
.world-clocks-header {
|
||||
@extend %heading;
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
|
||||
// city label
|
||||
.world-clocks-city {
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
// timezone time
|
||||
.world-clocks-time {
|
||||
@extend %heading;
|
||||
@extend %numeric;
|
||||
color: $fg_color;
|
||||
|
||||
&:ltr {text-align: right;}
|
||||
&:rtl {text-align: left;}
|
||||
}
|
||||
|
||||
// timezone offset label
|
||||
.world-clocks-timezone {
|
||||
@extend %numeric;
|
||||
@extend %caption;
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
/* Weather */
|
||||
.weather-button {
|
||||
@extend %card;
|
||||
|
||||
.weather-box {
|
||||
spacing: $base_padding + $base_margin;
|
||||
}
|
||||
|
||||
.weather-header-box {
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
.weather-header {
|
||||
color: $insensitive_fg_color;
|
||||
@extend %heading;
|
||||
|
||||
&.location {
|
||||
font-weight: normal;
|
||||
// change style when no world clocks are configured
|
||||
&.no-world-clocks {
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.weather-grid {
|
||||
// clocks
|
||||
.world-clocks-grid {
|
||||
spacing-rows: $base_padding;
|
||||
spacing-columns: $base_padding * 2;
|
||||
}
|
||||
|
||||
.weather-forecast-time {
|
||||
@extend %numeric;
|
||||
@extend %caption;
|
||||
color: darken($fg_color,30%);
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.4em;
|
||||
}
|
||||
// city label
|
||||
.world-clocks-city {
|
||||
}
|
||||
|
||||
.weather-forecast-icon {
|
||||
icon-size: $large_scalable_icon_size;
|
||||
}
|
||||
// timezone time
|
||||
.world-clocks-time {
|
||||
@extend %numeric;
|
||||
font-weight: bold;
|
||||
|
||||
.weather-forecast-temp {
|
||||
@extend %heading;
|
||||
&:ltr {text-align: right;}
|
||||
&:rtl {text-align: left;}
|
||||
}
|
||||
|
||||
// timezone offset label
|
||||
.world-clocks-timezone {
|
||||
@extend %numeric;
|
||||
@extend %caption;
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// weather
|
||||
.weather-button {
|
||||
|
||||
.weather-box {
|
||||
spacing: $base_padding;
|
||||
|
||||
// header
|
||||
.weather-header-box {
|
||||
spacing: $base_padding;
|
||||
|
||||
.weather-header {
|
||||
@extend %heading;
|
||||
color: $insensitive_fg_color;
|
||||
|
||||
&.location {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// weather items
|
||||
.weather-grid {
|
||||
spacing-rows: $base_padding;
|
||||
spacing-columns: $base_padding * 2;
|
||||
|
||||
.weather-forecast-time {
|
||||
@extend %numeric;
|
||||
@include fontsize(10pt);
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.4em;
|
||||
}
|
||||
.weather-forecast-icon {
|
||||
icon-size: $large_scalable_icon_size;
|
||||
margin-bottom: $base_margin;
|
||||
}
|
||||
|
||||
.weather-forecast-temp {
|
||||
@extend %numeric;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -417,6 +417,12 @@ class WorldClocksSection extends St.Button {
|
||||
x_align: Clutter.ActorAlign.START,
|
||||
text: title,
|
||||
});
|
||||
|
||||
if (this._locations.length === 0)
|
||||
header.add_style_class_name('no-world-clocks');
|
||||
else
|
||||
header.remove_style_class_name('no-world-clocks');
|
||||
|
||||
if (this._grid.text_direction === Clutter.TextDirection.RTL)
|
||||
layout.attach(header, 2, 0, 1, 1);
|
||||
else
|
||||
|
||||
Loading…
Reference in New Issue
Block a user