gnome-shell/data/theme/gnome-shell-sass/widgets/_calendar.scss
2020-02-06 20:31:42 +00:00

268 lines
5.6 KiB
SCSS

/* Date/Time Menu */
.clock-display-box { spacing: $base_spacing; }
// 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;
border-radius: $base_border_radius + 2px;
&:hover { @include button(hover);}
&:focus { @include button(focus);}
&:active {
@include button(active);
}
// 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;
margin-bottom: $base_padding + $base_margin;
padding: $base_padding;
// 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;
}
}
}
.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);
}
.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-time {
color: darken($fg_color,30%);
font-feature-settings: "tnum";
@include fontsize($base_font_size - 2);
font-weight: normal;
padding-top: 0.2em;
padding-bottom: 0.4em;
}
.weather-forecast-icon {
icon-size: $base_icon_size * 2;
}
.weather-forecast-temp {
font-weight: bold;
}
}
/* 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);
}
}