57751a2bef
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
271 lines
5.7 KiB
SCSS
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);
|
|
}
|
|
} |