199529a67d
- updated switch assets - new high contrast assets - use non-hardcoded bg color for dash - updated palette colors - add missing color definitions to hc - increase radii of many elements - update search entry style - align icon better in search entry - restyle panel popovers without arrow and add drop shadow - used theme colors in panel - fix some things with popover labels - new slider style - some light variant fixes - fixes to the calendar popover - day with event styles - better calendar-today.svg and dark variant - shorten calendary weekday header - saner padding - overhaul popover menu style - minor fixes to app grid and alt-tab switch - updated looking glass styles - nm-dialog adjustments - search results adjustments - expand out panel button hover styles - button drawing adjustments - adjust notifications area - update on-screen keyboard style - better keyboard symbolic icon assets - change keyboard symbolic icons to 24px - improved keyboard style - gave the keyboard word suggestions some styles - less obnoxious saner media control buttons - cleaned up the css for the dash - reworked the alt-tab switcher style - sync style on workspace switcher - adjusted dialog button style drawing - popover submenu redrawing adjustement Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2104>
289 lines
6.0 KiB
SCSS
289 lines
6.0 KiB
SCSS
/* Date/Time Menu */
|
|
|
|
// overall menu
|
|
#calendarArea {
|
|
padding:0;
|
|
}
|
|
|
|
// Calendar menu side column
|
|
.datemenu-calendar-column {
|
|
spacing: $base_spacing;
|
|
border: none;
|
|
border-style: solid;
|
|
border-color: $borders_color;
|
|
padding: 0;
|
|
|
|
&:ltr {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
|
|
&:rtl {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
|
|
|
|
.datemenu-displays-section {
|
|
}
|
|
|
|
.datemenu-displays-box {
|
|
spacing: $base_spacing;
|
|
}
|
|
}
|
|
|
|
.events-section-title {
|
|
@include notification_bubble($flat: true);
|
|
color: $insensitive_fg_color;
|
|
font-weight: bold;
|
|
padding: .4em;
|
|
}
|
|
|
|
/* today button (the date) */
|
|
.datemenu-today-button {
|
|
@include notification_bubble($flat: true);
|
|
padding: $base_padding * 1.5;
|
|
|
|
// weekday label
|
|
.day-label {
|
|
@include fontsize($base_font_size+1);
|
|
color: $insensitive_fg_color;
|
|
font-weight: bold;
|
|
}
|
|
|
|
// date label
|
|
.date-label {
|
|
@include fontsize($base_font_size+7);
|
|
font-weight: 1000;
|
|
}
|
|
}
|
|
|
|
/* Calendar */
|
|
.calendar {
|
|
@include notification_bubble;
|
|
padding: $base_padding;
|
|
|
|
// month
|
|
.calendar-month-label {
|
|
color: lighten($fg_color,5%);
|
|
font-weight: bold;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
// 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 - 2px;
|
|
&:hover, &:focus { background-color: $hover_bg_color; }
|
|
&:active { background-color: $active_bg_color; }
|
|
}
|
|
|
|
$calendar_day_size: 32px;
|
|
|
|
.calendar-day-base {
|
|
@include fontsize($base_font_size - 3);
|
|
text-align: center;
|
|
padding: 0;
|
|
margin: 2px;
|
|
height: $calendar_day_size;
|
|
width: $calendar_day_size;
|
|
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: $insensitive_fg_color;
|
|
font-weight: 1000;
|
|
padding-top: $base_padding;
|
|
height: 16px !important; // force heading to be smaller height
|
|
@include fontsize($base_font_size - 2);
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
background-color: $selected_bg_color;
|
|
border: 1px solid transparent;
|
|
font-weight: bold;
|
|
color: $selected_fg_color !important;
|
|
|
|
&:hover,&:focus {
|
|
background-color:lighten($selected_bg_color, 3%);
|
|
color: inherit;
|
|
}
|
|
|
|
&:active,&:selected {
|
|
background-color: $selected_bg_color;
|
|
color: inherit;
|
|
|
|
&:hover,&:focus {
|
|
background-color:lighten($selected_bg_color, 3%);
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
.calendar-day-with-events {
|
|
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today.svg"), url("resource:///org/gnome/shell/theme/calendar-today-dark.svg"));
|
|
background-size: contain;
|
|
&.calendar-work-day {
|
|
color: lighten($fg_color,10%);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.calendar-other-month-day {
|
|
color: transparentize($fg_color ,0.5) !important;
|
|
}
|
|
|
|
.calendar-week-number {
|
|
@include fontsize($base_font_size - 4);
|
|
font-weight: bold;
|
|
height: 1.8em;
|
|
width: 2.3em;
|
|
border-radius: 2px;
|
|
margin: 6px;
|
|
background-color: darken($bg_color, 2%);
|
|
color: lighten($fg_color, 5%);
|
|
}
|
|
}
|
|
|
|
/* Events */
|
|
.events-button {
|
|
@include notification_bubble;
|
|
padding: $base_padding * 2;
|
|
|
|
.events-box {
|
|
spacing: $base_spacing;
|
|
}
|
|
|
|
.events-list {
|
|
spacing: 2 * $base_spacing;
|
|
}
|
|
|
|
.events-title {
|
|
color: $insensitive_fg_color;
|
|
font-weight: bold;
|
|
margin-bottom: $base_margin;
|
|
}
|
|
|
|
.event-time {
|
|
color: $insensitive_fg_color;
|
|
font-feature-settings: "tnum";
|
|
@include fontsize($base_font_size - 1);
|
|
}
|
|
}
|
|
|
|
/* World clocks */
|
|
.world-clocks-button {
|
|
@include notification_bubble;
|
|
padding: $base_padding * 2;
|
|
|
|
.world-clocks-grid {
|
|
spacing-rows: $base_spacing;
|
|
spacing-columns: $base_spacing * 2;
|
|
}
|
|
|
|
// title
|
|
.world-clocks-header {
|
|
color: $insensitive_fg_color;
|
|
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: "tnum";
|
|
@include fontsize($base_font_size);
|
|
|
|
&:ltr { text-align: right; }
|
|
&:rtl { text-align: left; }
|
|
}
|
|
|
|
// timezone offset label
|
|
.world-clocks-timezone {
|
|
color: $insensitive_fg_color;
|
|
font-feature-settings: "tnum";
|
|
@include fontsize($base_font_size - 1);
|
|
}
|
|
}
|
|
|
|
/* Weather */
|
|
.weather-button {
|
|
@include notification_bubble;
|
|
padding: $base_padding * 2;
|
|
|
|
.weather-box {
|
|
spacing: $base_spacing + $base_margin;
|
|
}
|
|
|
|
.weather-header-box {
|
|
spacing: $base_spacing;
|
|
}
|
|
|
|
.weather-header {
|
|
color: $insensitive_fg_color;
|
|
font-weight: bold;
|
|
|
|
&.location {
|
|
font-weight: normal;
|
|
@include fontsize($base_font_size - 1);
|
|
}
|
|
}
|
|
|
|
.weather-grid {
|
|
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;
|
|
}
|
|
}
|