gnome-shell/data/theme/gnome-shell-sass/widgets/_calendar.scss
Florian Müllner 57751a2bef dateMenu: Tweak temperature labels
Together with the forecast icon, the temperature label is the most
important information in the weather section. To emphasize it more,
reduce its space requirement by removing the temperature unit, then
make the text bold.

https://gitlab.gnome.org/GNOME/gnome-shell/issues/1143
2020-01-09 17:13:19 +01:00

271 lines
5.7 KiB
SCSS

/* Date/Time Menu */
// overall menu
#calendarArea {
padding:0;
margin:0;
}
// Calendar menu side column
.datemenu-calendar-column {
spacing: 0;
border: 0 solid $bubble_borders_color;
padding: $base_padding * 2;
padding-bottom: 3em; // account for the notifications clear button
padding-top:0;
&:ltr {margin-right: $base_margin * 2; border-left-width: 1px; }
&:rtl {margin-left: $base_margin * 2; border-right-width: 1px; }
// today button (the date)
.datemenu-today-button {
padding: $base_padding * 1.5;
margin: $base_margin;
border: 1px solid transparent;
&:focus,
&:hover {
border-radius:$base_border_radius + 2px;
margin-top: $base_margin - 1px;
margin-bottom: $base_margin + 1px;
}
&:hover { @include button(hover);}
&:focus { @include button(focus);}
&:active {
@include button(active);
margin: $base_margin;
}
// weekday label
.day-label {
@include fontsize($base_font_size+1);
font-weight: bold;
}
// date label
.date-label {
@include fontsize($base_font_size+7);
font-weight: 1000;
}
}
// calendar
.calendar {
@extend %notification_bubble;
margin:$base_margin !important;
margin-bottom: $base_padding + $base_margin !important;
padding:$base_padding !important;
// more below for sub-elements
}
.datemenu-displays-section {
margin:0;
}
.datemenu-displays-box {
spacing: $base_spacing;
margin:0;
// world clocks and weather
.world-clocks-button,
.weather-button {
@extend %notification_bubble;
padding:$base_padding !important;
}
}
}
.events-section-title {
color: desaturate(darken($fg_color,40%), 10%);
font-weight: bold;
border-radius: 4px;
padding: .4em;
}
/* Calendar */
.calendar {
// month
.calendar-month-label {
color: lighten($fg_color,5%);
font-weight: bold;
padding: 8px 0;
&:focus {}
}
// prev/next month icons
.calendar-change-month-back StIcon,
.calendar-change-month-forward StIcon {
icon-size: $base_icon_size;
}
.pager-button {
background-color: transparent;
height: 32px;
width: 32px;
border-radius: $base_border_radius;
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
&:active { background-color: $active_bg_color; }
}
$calendar_day_size: 32px;
.calendar-day-base {
@include fontsize($base_font_size - 3);
text-align: center;
width: $calendar_day_size;
height: $calendar_day_size;
padding: 0;
margin: 2px;
border-radius: $calendar_day_size * 0.5 + 2px;
border: 1px solid transparent; //avoid jumparound due to today
font-feature-settings: "tnum";
&:hover, &:focus { background-color: $hover_bg_color; }
&:active,&:selected {
color: lighten($fg_color,10%);
background-color: darken($bg_color,5%);
}
// day of week heading
&.calendar-day-heading {
color: lighten($fg_color,10%);
margin-top: 1em;
@include fontsize($base_font_size - 4);
}
}
.calendar-day { //border collapse hack - see calendar.js
border-width: 0;
}
.calendar-day-top {
border-top-width: 1px;
}
.calendar-day-left { border-left-width: 1px; }
.calendar-work-day {}
.calendar-nonwork-day {
color: $insensitive_fg_color;
}
// Today
.calendar-today {
font-weight: bold;
border: 1px solid transparent;
background-color: $selected_bg_color;
color: $selected_fg_color;
&:hover,&:focus {
background-color:lighten($selected_bg_color, 3%);
color: $selected_fg_color;
}
&:active,&:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
&:hover,&:focus {
background-color:lighten($selected_bg_color, 3%);
color: $selected_fg_color;
}
}
}
.calendar-day-with-events {
color: lighten($fg_color,10%);
font-weight: bold;
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
}
.calendar-other-month-day {
color: transparentize($fg_color ,0.5);
opacity: 0.5;
}
.calendar-week-number {
@include fontsize($base_font_size - 4);
font-weight: bold;
height: 1.8em;
width: 2.3em;
border-radius: 2px;
padding: 0.5em 0 0;
margin: 6px;
background-color: darken($bg_color, 2%);
color: lighten($fg_color, 5%);
}
}
/* Weather */
.weather-box {
spacing: $base_spacing;
padding:$base_padding;
.weather-header {
color: desaturate(darken($fg_color,40%), 10%);
font-weight: bold;
&.location {
font-weight: normal;
@include fontsize($base_font_size - 1);
}
}
.weather-grid {
margin-top: $base_margin;
spacing-rows: $base_spacing;
spacing-columns: $base_spacing * 2;
}
.weather-forecast-icon {
icon-size: $base_icon_size * 2;
}
.weather-forecast-temp {
font-weight: bold;
}
.weather-forecast-time {
color: darken($fg_color,30%);
font-feature-settings: "tnum";
@include fontsize($base_font_size - 2);
font-weight: normal;
}
}
/* World clocks */
.world-clocks-grid {
padding:$base_padding;
spacing-rows: $base_spacing;
spacing-columns: $base_spacing * 2;
// title
.world-clocks-header {
color: desaturate(darken($fg_color,40%), 10%);
font-weight: bold;
}
// city label
.world-clocks-city {
color: $fg_color;
@include fontsize($base_font_size);
font-weight: normal;
}
// timezone time
.world-clocks-time {
font-weight: bold;
color: $fg_color;
font-feature-settings: "lnum";
@include fontsize($base_font_size);
text-align: right;
}
// timezone offset label
.world-clocks-timezone {
color: darken($fg_color,20%);
font-feature-settings: "tnum";
@include fontsize($base_font_size - 1);
}
}