gnome-shell-dark-theme/gnome-shell-sass/widgets/_calendar.scss

287 lines
5.7 KiB
SCSS
Raw Normal View History

/* Date/Time Menu */
// overall menu
#calendarArea {
2024-03-25 13:34:36 -04:00
padding: $base_margin;
}
2024-03-25 13:34:36 -04:00
.datemenu-popover {
border-radius: $base_border_radius * 1.5 + $base_padding * 3;
}
// calendar menu side column
.datemenu-calendar-column {
spacing: $base_padding;
2024-03-25 13:34:36 -04:00
&:ltr { margin-left: $base_padding;}
&:rtl { margin-right: $base_padding;}
.datemenu-displays-box {
spacing: $base_padding;
}
}
2024-03-25 13:34:36 -04:00
// today button (the date)
.datemenu-today-button {
2024-03-25 13:34:36 -04:00
@extend %card_flat;
padding: $base_padding * 1.5;
// weekday label
.day-label {
2024-03-25 13:34:36 -04:00
font-weight: bold;
}
// date label
.date-label {
@extend %title_2;
}
}
2024-03-25 13:34:36 -04:00
// the mini calendar
.calendar {
2024-03-25 13:34:36 -04:00
@extend %card_flat;
margin-top: 0;
2024-03-25 13:34:36 -04:00
padding: 0;
// month header
.calendar-month-header {
// prev/next month icons
.calendar-change-month-back StIcon,
.calendar-change-month-forward StIcon {
2024-03-25 13:34:36 -04:00
icon-size: $scalable_icon_size;
}
// month label
.calendar-month-label {
@extend %heading;
2024-03-25 13:34:36 -04:00
@extend %flat_button;
color: $fg_color !important;
padding: 8px 0;
2024-03-25 13:34:36 -04:00
width: 10em;
border-radius: $forced_circular_radius;
text-align: center;
}
2023-10-09 22:24:14 -04:00
.pager-button {
2024-03-25 13:34:36 -04:00
@extend .icon-button, .flat;
height: 2.6em;
width: 2.6em;
padding: 0;
}
}
2023-10-09 22:24:14 -04:00
// day style
.calendar-day {
@extend %numeric;
@extend %smaller;
2024-03-25 13:34:36 -04:00
@extend %flat_button;
border-radius: $forced_circular_radius;
height: 3em;
width: 3em;
margin: 2px;
2024-03-25 13:34:36 -04:00
padding: 0;
font-weight: bold;
2023-10-09 22:24:14 -04:00
text-align: center;
2023-10-09 22:24:14 -04:00
&.calendar-weekday {}
2023-10-09 22:24:14 -04:00
&.calendar-weekend {
color: $insensitive_fg_color;
2024-03-25 13:34:36 -04:00
@if $contrast == 'high' {
font-style: italic;
}
}
2023-10-09 22:24:14 -04:00
&.calendar-other-month {
2024-03-25 13:34:36 -04:00
color: transparentize($fg_color, 0.5);
2023-10-09 22:24:14 -04:00
font-weight: normal;
2024-03-25 13:34:36 -04:00
&.calendar-weekend {
color: transparentize($fg_color, 0.5);
@if $contrast == 'high' {
color: $fg_color;
}
}
@if $contrast == 'high' {
color: $fg_color;
font-style: italic; // differentiate with a font-style instead of text color
}
2023-10-09 22:24:14 -04:00
}
2023-10-09 22:24:14 -04:00
&.calendar-today {
2024-03-25 13:34:36 -04:00
@extend %default_button;
// override colors above for when today is a weekend
2024-09-19 20:40:52 -04:00
color: -st-accent-fg-color !important;
2024-03-25 13:34:36 -04:00
&.calendar-day-with-events {
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
}
}
2023-10-09 22:24:14 -04:00
&.calendar-day-with-events {
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg"));
background-size: contain;
}
}
2024-03-25 13:34:36 -04:00
// day of week heading
.calendar-day-heading {
@extend %numeric;
@extend %smaller;
@extend %flat_button;
font-weight: bold;
text-align: center;
margin: $base_margin;
padding: $base_padding * 0.5 $base_padding;
border-radius: $base_border_radius;
}
2023-10-09 22:24:14 -04:00
// week number style
.calendar-week-number {
2024-03-25 13:34:36 -04:00
@extend %smaller;
font-weight: bold;
font-feature-settings: "tnum";
2023-10-09 22:24:14 -04:00
text-align: center;
2024-03-25 13:34:36 -04:00
margin: $base_padding;
padding: 0 $base_padding;
2024-03-25 13:34:36 -04:00
border-radius: $base_border_radius * 0.5;
background-color: transparentize($insensitive_fg_color, .8);
2023-10-09 22:24:14 -04:00
color: $insensitive_fg_color;
}
}
2024-03-25 13:34:36 -04:00
// common style for the date menu widgets
.events-button,
.world-clocks-button,
.weather-button {
@extend %card;
}
// events
.events-button {
.events-box {
2024-03-25 13:34:36 -04:00
// event title
.events-title {
@extend %heading;
color: $insensitive_fg_color;
padding-bottom: $base_padding;
}
2024-03-25 13:34:36 -04:00
// 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;
}
}
}
}
2024-03-25 13:34:36 -04:00
// world clocks
.world-clocks-button {
// title
.world-clocks-header {
@extend %heading;
color: $insensitive_fg_color;
2024-03-25 13:34:36 -04:00
// change style when no world clocks are configured
&.no-world-clocks {
color: $fg_color;
}
}
2024-03-25 13:34:36 -04:00
// clocks
.world-clocks-grid {
spacing-rows: $base_padding;
spacing-columns: $base_padding * 2;
2024-03-25 13:34:36 -04:00
// city label
.world-clocks-city {
}
2024-03-25 13:34:36 -04:00
// timezone time
.world-clocks-time {
@extend %numeric;
font-weight: bold;
&:ltr {text-align: right;}
&:rtl {text-align: left;}
}
// timezone offset label
.world-clocks-timezone {
@extend %numeric;
@extend %caption;
color: $insensitive_fg_color;
}
}
}
2024-03-25 13:34:36 -04:00
// weather
.weather-button {
.weather-box {
spacing: $base_padding;
2024-03-25 13:34:36 -04:00
// header
.weather-header-box {
spacing: $base_padding;
2024-03-25 13:34:36 -04:00
.weather-header {
@extend %heading;
color: $insensitive_fg_color;
2024-03-25 13:34:36 -04:00
// change style when no location is configured
&.no-location {
color: $fg_color;
}
2024-03-25 13:34:36 -04:00
&.location {
font-weight: normal;
}
}
}
2024-03-25 13:34:36 -04:00
// weather items
.weather-grid {
spacing-rows: $base_padding;
spacing-columns: $base_padding * 2;
.weather-forecast-time {
2024-09-19 20:40:52 -04:00
@extend %smaller;
padding-top: $base_padding;
padding-bottom: $base_padding;
2024-03-25 13:34:36 -04:00
}
.weather-forecast-icon {
icon-size: $large_scalable_icon_size;
margin-bottom: $base_margin;
}
.weather-forecast-temp {
@extend %numeric;
font-weight: bold;
}
}
}
}