From 199529a67daeee634cb32db6e177764a09a097ab Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Tue, 28 Dec 2021 10:16:54 -0330 Subject: [PATCH] style: Stylesheet updates for GNOME 42 - 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: --- data/gnome-shell-theme.gresource.xml | 1 + data/theme/calendar-today-dark.svg | 1 + data/theme/calendar-today.svg | 179 +----------------- data/theme/gnome-shell-sass/_colors.scss | 35 ++-- data/theme/gnome-shell-sass/_common.scss | 83 ++++---- data/theme/gnome-shell-sass/_drawing.scss | 26 +-- .../_high-contrast-colors.scss | 2 + .../gnome-shell-sass/widgets/_app-grid.scss | 26 +-- .../gnome-shell-sass/widgets/_calendar.scss | 75 ++++---- .../theme/gnome-shell-sass/widgets/_dash.scss | 66 ++++--- .../gnome-shell-sass/widgets/_dialogs.scss | 1 - .../gnome-shell-sass/widgets/_keyboard.scss | 72 +++++-- .../widgets/_looking-glass.scss | 95 ++++++---- .../widgets/_message-list.scss | 78 +++++--- .../widgets/_network-dialog.scss | 29 ++- .../widgets/_notifications.scss | 7 + .../gnome-shell-sass/widgets/_panel.scss | 66 ++++++- .../gnome-shell-sass/widgets/_popovers.scss | 149 +++++++++++---- .../widgets/_search-entry.scss | 26 +-- .../widgets/_search-results.scss | 34 ++-- .../gnome-shell-sass/widgets/_slider.scss | 23 +-- .../widgets/_switcher-popup.scss | 63 ++++-- .../gnome-shell-sass/widgets/_switches.scss | 4 +- .../widgets/_workspace-switcher.scss | 8 +- .../keyboard-caps-lock-filled-symbolic.svg | 7 +- data/theme/keyboard-enter-symbolic.svg | 7 +- data/theme/keyboard-hide-symbolic.svg | 8 +- .../theme/keyboard-layout-filled-symbolic.svg | 8 +- data/theme/keyboard-shift-filled-symbolic.svg | 4 +- data/theme/no-notifications.svg | 176 +---------------- data/theme/toggle-off-dark.svg | 2 +- data/theme/toggle-off-hc.svg | 134 +------------ data/theme/toggle-off.svg | 2 +- data/theme/toggle-on-dark.svg | 2 +- data/theme/toggle-on-hc.svg | 114 +---------- data/theme/toggle-on.svg | 2 +- 36 files changed, 643 insertions(+), 972 deletions(-) create mode 100644 data/theme/calendar-today-dark.svg diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml index 1be29376c..df64c24d8 100644 --- a/data/gnome-shell-theme.gresource.xml +++ b/data/gnome-shell-theme.gresource.xml @@ -2,6 +2,7 @@ calendar-today.svg + calendar-today-dark.svg carousel-arrow-next-24-symbolic.svg carousel-arrow-back-24-symbolic.svg checkbox-focused.svg diff --git a/data/theme/calendar-today-dark.svg b/data/theme/calendar-today-dark.svg new file mode 100644 index 000000000..daf86ec0b --- /dev/null +++ b/data/theme/calendar-today-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data/theme/calendar-today.svg b/data/theme/calendar-today.svg index 5e77084c7..b63f6e037 100644 --- a/data/theme/calendar-today.svg +++ b/data/theme/calendar-today.svg @@ -1,178 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - + \ No newline at end of file diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss index 9d8f72f2a..32f7c815b 100644 --- a/data/theme/gnome-shell-sass/_colors.scss +++ b/data/theme/gnome-shell-sass/_colors.scss @@ -1,34 +1,37 @@ // When color definition differs for dark and light variant, -// it gets @if ed depending on $variant +// it gets @if-ed depending on $variant -$base_color: if($variant == 'light', #fff, lighten(desaturate(#241f31, 20%), 2%)); -$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%)); -$fg_color: if($variant == 'light', #2e3436, #eeeeec); +$base_color: if($variant == 'light', #fff, lighten(desaturate(#242424, 20%), 2%)); +$bg_color: if($variant == 'light', #f6f5f4, #242424); +$fg_color: if($variant == 'light', transparentize(black, .2), white); $selected_fg_color: #fff; -$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%)); +$selected_bg_color: if($variant == 'light', #3584e4, #1c71d8); $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); -$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 8%)); -$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), transparentize($fg_color, 0.93)); + +$borders_color: if($variant == 'light', darken($bg_color, 12%), darken($bg_color, 3%)); +$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 2%)); + $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%)); $top_hilight: $borders_edge; -$warning_color: #f57900; -$error_color: #ff8080; -$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%)); +$warning_color: if($variant == 'light', #e5a50a, #f5c211);; +$error_color: if($variant == 'light', #e01b24, #c01c28); +$success_color: if($variant == 'light', #2ec27e, #26a269); $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%)); -$osd_fg_color: #eeeeec; -$osd_text_color: white; -$osd_bg_color: transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04); +$osd_fg_color: white; +$osd_bg_color: transparentize(desaturate(#242424, 100%),0.04); $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); -$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%); +$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%)); $osd_borders_color: transparentize(black, 0.3); -$osd_outer_borders_color: transparentize(white, 0.84); +$osd_outer_borders_color: transparentize($osd_fg_color, 0.98); $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2)); -$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color + +// overview background color +$system_bg_color: if($variant == 'light', darken(desaturate($bg_color, 100%), 35%), darken($bg_color, 2%)); //insensitive state derived colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index 0f3f3ee05..69c450485 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -33,21 +33,21 @@ $base_spacing: 6px; // border radii $base_border_radius: 8px; -$modal_radius:$base_border_radius * 2; +// radii of things that display over other things, e.g. popovers +$modal_radius: $base_border_radius*2; // 24px // non-standard colors $bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%)); +$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 4%)); // $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3)); -// hover -$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 5%)); -$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 5%)); -$hover_borders_color: lighten($borders_color,if($variant=='light', 5%, 3%)); +// derived hover colors +$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 7%)); +$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 7%)); -// active -$active_bg_color: if($variant == 'light', darken($bg_color, 7%), darken($bg_color, 9%)); +// derived active colors +$active_bg_color: darken($bubble_buttons_color,if($variant=='light', 9%, 2%)); $active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%)); -$active_borders_color: darken($borders_color,if($variant=='light', 5%, 3%)); // fonts $base_font_size: 11; @@ -76,9 +76,9 @@ stage { %osd_panel { color: $osd_fg_color; background-color: $osd_bg_color; - //border: 1px solid $osd_outer_borders_color; - border-radius: $base_border_radius * 2 + 4px; - padding: $base_padding * 2; + border: 1px solid $osd_outer_borders_color; + border-radius: $modal_radius; + padding: $base_padding*2; } // Overview panels @@ -90,23 +90,16 @@ stage { // icon tiles %icon_tile { - border-radius: $base_border_radius + 4px; + border-radius: $base_border_radius * 2; // 16px padding: $base_padding; border: 2px solid transparent; transition-duration: 100ms; text-align: center; } -// dialogs -%bubble_panel { - color: $fg_color; - background-color: $bg_color; - border: 1px solid if($variant=='light', rgba(0,0,0, 0.6), $borders_color); -} - // button styling %button { - border-radius: $base_border_radius; + border-radius: $base_border_radius - 2px; // 6px border-style: solid; border-width: 1px; min-height: 22px; @@ -119,41 +112,45 @@ stage { &:active, &:checked { @include button(active);} } -// buttons in dialogs -%bubble_button { - @include button(normal, $shadow: none); - padding: $base_padding * 2; - border-style: solid; - border-width: 1px; - border-left-width: 0; - border-bottom-width: 0; +// dialogs +%bubble_panel { + color: $fg_color; + background-color: $bg_color; + border-radius: $base_border_radius*1.25 + 1px; + border: 1px solid $borders_edge; +} +// buttons in dialogs/notifications +// styled to have no shadow and be lighter in color +$bubble_button_radius:$base_border_radius*1.25; + +%bubble_button { + padding: $base_padding * 2; + border: 0 solid $bg_color !important; + border-radius: 0; + border-right-width: 1px !important; + + @include button(normal, $bubble_buttons_color, $shadow: none); &:insensitive { @include button(insensitive, $shadow: none); } &:focus { @include button(focus, $shadow: none); } - &:hover { @include button(hover, $shadow: none); } - &:active { @include button(active, $shadow: none); } - - // radius is 2 pixel less to fit in bubble + &:hover { @include button(hover, $bubble_buttons_color, $shadow: none); } + &:active { @include button(active, $bubble_buttons_color, $shadow: none); } + &:first-child { - border-radius: 0 0 0 $modal_radius - 2px; + border-radius: 0 0 0 $bubble_button_radius; } &:last-child { - border-right-width: 0; - border-radius: 0 0 $modal_radius - 2px 0; - } - - &:first-child:last-child { - border-radius: 0 0 $modal_radius - 2px $modal_radius - 2px; + border-radius: 0 0 $bubble_button_radius 0; + border-right-width: 0 !important; } } - -// notification styling +// styling for elements within popovers that look like notifications @mixin notification_bubble($flat: false) { - border-width: 1px; + border-width: 0px; border-style: solid; - border-radius: $base_border_radius + 2px; + border-radius: $base_border_radius; margin: $base_margin; @if $flat { diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index f09eb123f..634fd4d98 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -138,37 +138,38 @@ @if $t==normal { color: $tc; background-color: lighten($c, 3%); - border-color: draw_border_color($c); + border-color: lighten($c, 3%); @include draw_shadows($button_shadow); // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); - text-shadow: 0 1px $text_shadow_color; - icon-shadow: 0 1px $text_shadow_color; + text-shadow: none; + icon-shadow: none; } // focused button @if $t==focus { color: $tc; - text-shadow: 0 1px $text_shadow_color; - icon-shadow: 0 1px $text_shadow_color; + background-color: mix(lighten($c, 3%), $selected_bg_color, 90%); + // border-color: lighten($c, 3%); box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4); - //border-color: $selected_bg_color; + text-shadow: none; + icon-shadow: none; } // hover button @else if $t==hover { color: $tc; background-color: lighten($c, if($variant == 'light', 8%, 5%)); - border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c)); + border-color: lighten($c, if($variant == 'light', 8%, 5%)); @include draw_shadows($button_shadow); - text-shadow: 0 1px $text_shadow_color; - icon-shadow: 0 1px $text_shadow_color; + text-shadow: none; + icon-shadow: none; } // active button @else if $t==active { color: $tc; background-color: darken($c,3%); - border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%))); + border-color: darken($c,3%); text-shadow: none; icon-shadow: none; box-shadow: none; @@ -177,7 +178,7 @@ // insensitive button @else if $t==insensitive { color: $insensitive_fg_color; - border-color: $insensitive_borders_color; + border-color: $insensitive_bg_color; background-color: $insensitive_bg_color; box-shadow: none; text-shadow: none; @@ -196,7 +197,7 @@ } // overview icons -@mixin overview-icon($color) { +@mixin overview_icon($color) { .overview-icon { @extend %icon_tile; color: $color; @@ -223,6 +224,7 @@ } } + &:focus, &:active, &:checked { .overview-icon { diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss index b34e0b182..0b615f20a 100644 --- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss +++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss @@ -24,6 +24,8 @@ $osd_fg_color: #eeeeec; $osd_bg_color: #2e3436; $osd_borders_color: rgba(0,0,0, 0.7); $osd_outer_borders_color: rgba(255,255,255, 0.1); +$osd_insensitive_bg_color: mix($osd_fg_color, $osd_bg_color, 10%); +$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%)); $shadow_color: rgba(0,0,0, 0.1); $system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index 2df691161..0bc5c74c8 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -20,7 +20,7 @@ $app_grid_fg_color: #fff; // Icon tiles in the app grid .app-well-app, -%app-well-app { +%app_well_app { @include overview-icon($app_grid_fg_color); .overview-icon.overview-icon-with-label { @@ -35,12 +35,12 @@ $app_grid_fg_color: #fff; /* App Folders */ .app-well-app.app-folder { background-color: $dash_background_color; - border-radius: $base_border_radius + 4px; // same as %icon_tile + border-radius: $base_border_radius * 2; // same as %icon_tile } // expanded folder .app-folder-dialog { //style like the dash - border-radius: $modal_radius * 1.5; + border-radius: 48px; background-color: $dash_background_color; padding: 12px 0px 12px 0px; @@ -51,7 +51,7 @@ $app_grid_fg_color: #fff; & .folder-name-label, & .folder-name-entry { font-size: 18pt; - font-weight: 800; + font-weight: 1000; } & .folder-name-entry { width: 300px } @@ -60,14 +60,17 @@ $app_grid_fg_color: #fff; & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; } & .edit-folder-button { - @extend %button; - + @include button(undecorated, $shadow: none); padding: 0; width: 36px; height: 36px; border-radius: 18px; - & > StIcon { icon-size: 16px } + &:focus {@include button(focus);} + &:hover {@include button(hover);} + &:active {@include button(active);} + + & > StIcon { icon-size: $base_icon_size } } } @@ -84,8 +87,9 @@ $app_grid_fg_color: #fff; margin-bottom: 18px; } } + .app-folder-dialog-container { - padding: 12px; + padding: $base_padding*2; width: 620px; height: 620px; } @@ -96,7 +100,7 @@ $app_grid_fg_color: #fff; width: 5px; border-radius:5px; background-color: $osd_fg_color; - margin-bottom: 1px; + margin-bottom: 2px; } // Rename popup for app folders @@ -148,7 +152,7 @@ $app_grid_fg_color: #fff; background-gradient-start: rgba(255, 255, 255, 0.05); background-gradient-end: transparent; background-gradient-direction: horizontal; - border-radius: 15px 0px 0px 15px; + border-radius: $modal_radius*1.5 0px 0px $modal_radius*1.5; } &.previous:ltr, @@ -156,7 +160,7 @@ $app_grid_fg_color: #fff; background-gradient-start: transparent; background-gradient-end: rgba(255, 255, 255, 0.05); background-gradient-direction: horizontal; - border-radius: 0px 15px 15px 0px; + border-radius: 0px $modal_radius*1.5 $modal_radius*1.5 0px; } } diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss index 33aea17a6..1d05258cc 100644 --- a/data/theme/gnome-shell-sass/widgets/_calendar.scss +++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss @@ -1,14 +1,5 @@ /* Date/Time Menu */ -.clock-display-box { - spacing: 2px; - - .clock { - padding-left: $base_padding * 2; - padding-right: $base_padding * 2; - } -} - // overall menu #calendarArea { padding:0; @@ -17,11 +8,13 @@ // Calendar menu side column .datemenu-calendar-column { spacing: $base_spacing; - border: 0 solid $bubble_borders_color; - padding: 0 $base_padding * 2; + border: none; + border-style: solid; + border-color: $borders_color; + padding: 0; - &:ltr {margin-right: $base_margin * 2; border-left-width: 1px; } - &:rtl {margin-left: $base_margin * 2; border-right-width: 1px; } + &: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 { } @@ -33,7 +26,7 @@ .events-section-title { @include notification_bubble($flat: true); - color: desaturate(darken($fg_color,40%), 10%); + color: $insensitive_fg_color; font-weight: bold; padding: .4em; } @@ -46,6 +39,7 @@ // weekday label .day-label { @include fontsize($base_font_size+1); + color: $insensitive_fg_color; font-weight: bold; } @@ -66,7 +60,6 @@ color: lighten($fg_color,5%); font-weight: bold; padding: 8px 0; - &:focus {} } // prev/next month icons @@ -79,24 +72,24 @@ background-color: transparent; height: 32px; width: 32px; - border-radius: $base_border_radius; - &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); } + 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; - width: $calendar_day_size; - height: $calendar_day_size; 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%); @@ -105,9 +98,11 @@ // day of week heading &.calendar-day-heading { - color: lighten($fg_color,10%); - margin-top: 1em; - @include fontsize($base_font_size - 4); + 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); } } @@ -123,7 +118,8 @@ border-left-width: 1px; } - .calendar-work-day {} + .calendar-work-day { + } .calendar-nonwork-day { color: $insensitive_fg_color; @@ -131,37 +127,38 @@ // Today .calendar-today { - font-weight: bold; - border: 1px solid transparent; background-color: $selected_bg_color; - color: $selected_fg_color; + border: 1px solid transparent; + font-weight: bold; + color: $selected_fg_color !important; &:hover,&:focus { background-color:lighten($selected_bg_color, 3%); - color: $selected_fg_color; + color: inherit; } &:active,&:selected { background-color: $selected_bg_color; - color: $selected_fg_color; + color: inherit; &:hover,&:focus { background-color:lighten($selected_bg_color, 3%); - color: $selected_fg_color; + color: inherit; } } } .calendar-day-with-events { - background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg"); + 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; + color: lighten($fg_color,10%); + font-weight: bold; } } .calendar-other-month-day { - color: transparentize($fg_color ,0.5); + color: transparentize($fg_color ,0.5) !important; } .calendar-week-number { @@ -190,13 +187,13 @@ } .events-title { - color: desaturate(darken($fg_color,40%), 10%); + color: $insensitive_fg_color; font-weight: bold; margin-bottom: $base_margin; } .event-time { - color: darken($fg_color,20%); + color: $insensitive_fg_color; font-feature-settings: "tnum"; @include fontsize($base_font_size - 1); } @@ -214,7 +211,7 @@ // title .world-clocks-header { - color: desaturate(darken($fg_color,40%), 10%); + color: $insensitive_fg_color; font-weight: bold; } @@ -238,7 +235,7 @@ // timezone offset label .world-clocks-timezone { - color: darken($fg_color,20%); + color: $insensitive_fg_color; font-feature-settings: "tnum"; @include fontsize($base_font_size - 1); } @@ -258,7 +255,7 @@ } .weather-header { - color: desaturate(darken($fg_color,40%), 10%); + color: $insensitive_fg_color; font-weight: bold; &.location { diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss index cf21552ca..014844d71 100644 --- a/data/theme/gnome-shell-sass/widgets/_dash.scss +++ b/data/theme/gnome-shell-sass/widgets/_dash.scss @@ -1,18 +1,17 @@ /* Dash */ -$dash_background_color: #3b3b3b; +$dash_background_color: lighten($system_bg_color, 5%); $dash_placeholder_size: 32px; $dash_padding: $base_padding + 4px; // 10px $dash_spacing: $base_padding / 4; - $dash_bottom_margin: $base_margin * 4; +$dash_border_radius: $modal_radius + 8px; -$dash_border_radius: $modal_radius * 1.5; - +// container for the dash #dash { @include fontsize($base_font_size - 2); - margin-top: $base_spacing * 3; - padding: 0 $dash_padding; + margin-top: $base_margin * 3; + padding: $dash_padding; .placeholder { // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); @@ -26,27 +25,51 @@ $dash_border_radius: $modal_radius * 1.5; height: $dash_placeholder_size; } + // icon on the dash .overview-icon { - padding: $dash_padding / 2; + padding: $base_padding+2px; + } + + // Running app indicator (also shown in app grid) + .app-well-app-running-dot { + height: 5px; + width: 5px; + border-radius:5px; + background-color: $osd_fg_color; + margin-bottom: 12px; } } +// background of the dash behind app icons .dash-background { background-color: $dash_background_color; - margin-bottom: $dash_bottom_margin; - padding: $dash_padding; border-radius: $dash_border_radius; + margin-bottom: 0; // this keeps things vertically centered + padding: $dash_padding; } -// Dash Items -.dash-item-container .app-well-app, .show-apps { - padding: $dash_padding $dash_spacing $dash_padding + $dash_bottom_margin; +// items on the dash +.dash-item-container { + + // each app item on the dash + .app-well-app { + padding:0; + margin: 2px; + } + + // show apps button + .show-apps { + @include overview_icon($osd_fg_color); + margin: 2px; + padding: 0; + } } +// separator between favourites and running apps .dash-separator { width: 1px; - margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin; - background-color: transparentize($osd_fg_color,0.7); + margin: 0 $base_margin*2; + background-color: transparentize($borders_color,0.5); } // OSD Tooltip @@ -56,18 +79,5 @@ $dash_border_radius: $modal_radius * 1.5; border-radius: 99px; padding: $base_padding $base_padding * 2; text-align: center; - -y-offset: $base_margin * 3; // distance from the dash edge -} - -// Show apps button -.show-apps { - @include overview-icon($osd_fg_color); - - &:focus, - &:checked { - .overview-icon { - background-color: transparentize($osd_bg_color,0.5); - color: $fg_color; - } - } + -y-offset: $base_margin * 2; // distance from the dash edge } diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss b/data/theme/gnome-shell-sass/widgets/_dialogs.scss index 6eb1cc10a..d23bc041a 100644 --- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss +++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss @@ -5,7 +5,6 @@ } .modal-dialog { - border-radius: $modal_radius; @extend %bubble_panel; .modal-dialog-content-box { diff --git a/data/theme/gnome-shell-sass/widgets/_keyboard.scss b/data/theme/gnome-shell-sass/widgets/_keyboard.scss index f866d77ca..4a5dbc671 100644 --- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss +++ b/data/theme/gnome-shell-sass/widgets/_keyboard.scss @@ -1,15 +1,16 @@ /* On-screen Keyboard */ $key_size: 1.2em; -$key_border_radius: $base_border_radius + 3px; -$key_bg_color: $bg_color; +$key_border_radius: $base_border_radius + 4px; // 12px +$key_bg_color: darken($osd_fg_color, 70%); // $default_key_bg_color: darken($key_bg_color, 4%); -$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%)); +$default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%)); // draw keys using button function #keyboard { - background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1); + // background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1); + background-color: $osd_bg_color; box-shadow: inset 0 1px 0 0 $osd_outer_borders_color; .page-indicator { @@ -31,13 +32,14 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten // the keys .keyboard-key { - @include button(normal, $c:$key_bg_color); + @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color); &:focus { @include button(focus);} - &:hover, &:checked { @include button(hover, $c: $key_bg_color);} - &:active { @include button(active, $c: $key_bg_color); } + &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);} + &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); } @include fontsize($base_font_size + 5); + font-weight: bold; min-height: $key_size; min-width: $key_size; border-width: 1px; @@ -52,42 +54,56 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten // non-character keys &.default-key { - @include button(normal, $c:$default_key_bg_color); - &:hover, &:checked {@include button(hover, $c: $default_key_bg_color);} - &:active { @include button(active, $c: $default_key_bg_color);} + @include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color); + &:hover, &:checked {@include button(hover, $c: $default_key_bg_color, $tc:$osd_fg_color);} + &:active { @include button(active, $c: $default_key_bg_color, $tc:$osd_fg_color);} + border-radius: $key_border_radius; } // enter key is suggested-action &.enter-key { @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color); - &:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%));} - &:active {@include button(active, $c: darken($selected_bg_color, 2%));} + &:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%), $tc:$selected_fg_color);} + &:active {@include button(active, $c: darken($selected_bg_color, 2%), $tc:$selected_fg_color);} + border-radius: $key_border_radius; + color: $osd_fg_color; } - &.shift-key-uppercase { color: $selected_bg_color } + &.shift-key-lowercase {} + + // pressed shift has different style + &.shift-key-uppercase { + background-color: lighten($key_bg_color, 20%); + color: $osd_bg_color; + &:hover { + background-color: lighten($key_bg_color, 25%); + color: lighten($osd_bg_color, 5%); + } + } - StIcon { icon-size: 1.125em; } + // size of icons on keys + StIcon { icon-size: 24px; } } // long press on a key popup .keyboard-subkeys { - color: $osd_fg_color; - -arrow-border-radius: $modal_radius; + -arrow-border-radius: $base_border_radius*2; -arrow-background-color: $osd_bg_color; -arrow-border-width: 1px; -arrow-border-color: lighten($osd_bg_color, 9%); -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: $base_spacing; + padding: $base_padding; .keyboard-key { - @include button(normal, $c:$key_bg_color); + @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color); &:focus { @include button(focus);} - &:hover, &:checked { @include button(hover, $c: $key_bg_color);} - &:active { @include button(active, $c: $key_bg_color); } + &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);} + &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); } - border-radius:$base_border_radius; + border-radius:$key_border_radius; } } @@ -112,4 +128,20 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten @include fontsize($base_font_size + 3); spacing: 12px; min-height: 20pt; + padding: $base_padding*2; + color: $osd_fg_color; + + // each suggestion + StButton { + margin: 0 3px; + min-width: 32px; + border-radius: $base_border_radius - 2px; + padding: $base_padding $base_padding*3; + + @include button(undecorated, $c:$key_bg_color, $tc:$osd_fg_color); + + &:focus { @include button(focus);} + &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);} + &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); } + } } diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss index ec27aac78..2b9cb8302 100644 --- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss +++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss @@ -1,46 +1,56 @@ /* Looking Glass */ -$text_fg_color: #ccc; - // Dialog #LookingGlassDialog { background-color: $osd_bg_color; - spacing: $base_spacing; - padding: 4px; - border: 1px solid transparentize($osd_fg_color, 0.8); - border-radius: $base_border_radius; + border-radius: 0 0 $base_border_radius $base_border_radius; + border-top-width: 0; + border: 1px solid $osd_outer_borders_color; color: $osd_fg_color; + padding: $base_padding; + spacing: $base_spacing; & > #Toolbar { border: none; - border-radius: $base_border_radius; - background-color: $osd_bg_color; + padding: $base_padding; + border-radius: 0; + background-color: transparent; + } + + .labels { + spacing: $base_spacing; } - .labels { spacing: $base_spacing; } .notebook-tab { - -natural-hpadding: $base_padding * 2; - -minimum-hpadding: 6px; + -natural-hpadding: $base_padding*2; + -minimum-hpadding: $base_padding*2; + font-weight: bold; + padding: $base_padding $base_padding*2; color: darken($osd_fg_color, 15%); transition-duration: 100ms; - padding-left: .3em; - padding-right: .3em; - border-bottom-width: 2px; + box-shadow:none; + border:none; + border-radius: $base_border_radius - 2px; + background-color: transparent; + &:hover { color: $osd_fg_color; + background-color: transparentize($osd_fg_color, 0.95); } + &:selected { - border-bottom-width: 2px; - box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color, 5%); color: $osd_fg_color; + background-color: transparentize($osd_fg_color, 0.9); } } - StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; } - StBoxLayout#ResultsArea { spacing: $base_spacing; } + + StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; padding: $base_padding; } + StBoxLayout#ResultsArea { spacing: $base_spacing; padding: $base_padding; } } .lg-dialog { + StEntry { background-color: transparentize(lighten($osd_bg_color, 5%), 0.4); color: $osd_fg_color; @@ -49,55 +59,55 @@ $text_fg_color: #ccc; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; } + .shell-link { color: $link_color; &:hover { color: lighten($link_color, 10%); } &:active { color: darken($link_color, 10%); } } + .actor-link { - color: $text_fg_color; - &:hover { color: lighten($text_fg_color, 20%); } - &:active { color: darken($text_fg_color, 20%); } + color: $insensitive_fg_color; + &:hover { color: lighten($insensitive_fg_color, 20%); } + &:active { color: darken($insensitive_fg_color, 20%); } } } .lg-completions-text { - font-size: .9em; - font-style: italic; + font-size: .9em; + font-style: italic; } .lg-obj-inspector-title { - spacing: $base_spacing; + spacing: $base_spacing; } .lg-obj-inspector-button { - border: 1px solid $osd_borders_color; - padding: 4px; - border-radius: $base_border_radius; - &:hover { border: 1px solid #ffffff; } + border: 1px solid $osd_borders_color; + padding: 4px; + border-radius: $base_border_radius; + &:hover { border: 1px solid #ffffff; } } // Extensions -#lookingGlassExtensions { padding: 4px; } +#lookingGlassExtensions { padding: $base_padding; } .lg-extensions-list { - padding: 4px; - spacing: 6px; + padding: $base_padding; + spacing: $base_spacing; } .lg-extension { - border: 1px solid lighten($osd_borders_color, 5%); - background-color: lighten($osd_bg_color, 5%); - border-radius: $base_border_radius; - padding: 4px; + padding: $base_padding*2; + @include notification_bubble; } .lg-extension-name { - font-weight: bold; + font-weight: bold; } .lg-extension-meta { - spacing: 6px; + spacing: $base_spacing; } // Inspector @@ -105,19 +115,20 @@ $text_fg_color: #ccc; background: $osd_bg_color; border: 1px solid $osd_borders_color; border-radius: $base_border_radius; - padding: 6px; + padding: $base_padding; } .lg-debug-flag-button { StLabel { padding: $base_spacing, 2 * $base_spacing; } - color: $text_fg_color; - &:hover { color: lighten($text_fg_color, 20%); } - &:active { color: darken($text_fg_color, 20%); } + color: $fg_color; + &:hover { color: lighten($fg_color, 20%); } + &:active { color: darken($fg_color, 20%); } } .lg-debug-flags-header { padding-top: 2 * $base_spacing; font-size: 120%; font-weight: bold; -} + padding: $base_padding; +} \ No newline at end of file diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss index bb9239f49..a58328382 100644 --- a/data/theme/gnome-shell-sass/widgets/_message-list.scss +++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss @@ -3,15 +3,32 @@ // main list .message-list { - width: 31.5em; - padding: 0 $base_padding * 2; + width: 32em; + padding: 0; - .message-list-placeholder { spacing: 12px; } + .message-list-placeholder { + font-weight:1000; + font-size: 18pt; + color: transparentize($fg_color, 0.7); + spacing: 12px; + + // icon size and color + > StIcon { + icon-size: $base_icon_size*4; // 32px + -st-icon-style: symbolic; + } + } } + .message-list-sections { spacing: $base_spacing; - margin: 0 $base_margin * 4; // to account for scrollbar + margin: 0; + padding-bottom: $base_padding; + + // to account for scrollbar + &:ltr {margin-right: $base_margin * 4; } + &:rtl {margin-left: $base_margin * 4;} } .message-list-section, @@ -21,10 +38,10 @@ // do-not-disturb + clear button .message-list-controls { - margin: ($base_margin * 2) ($base_margin * 4) 0; // NOTE: remove the padding if notification_bubble could remove margin for drop shadow - padding: $base_margin; - spacing: $base_spacing * 2; + padding: $base_padding; + margin: 0; + spacing: $base_spacing; .dnd-button { // We need this because the focus outline isn't inset like for the buttons @@ -32,7 +49,7 @@ // its color when focusing. border-width: 2px; border-color: transparent; - border-radius: 99px; + border-radius: 32px; border-style: solid; &:focus { @@ -47,10 +64,11 @@ // icon container .message-icon-bin { - padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2); + padding: ($base_padding * 3); + padding-right:$base_padding; &:rtl { - padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0; + padding-right:$base_padding; } // icon size and color @@ -68,13 +86,16 @@ // content .message-content { - padding: $base_padding + $base_margin * 2; spacing: 4px; + padding: ($base_padding*1.5); + margin-bottom: $base_margin*2; } // title .message-title { font-weight: bold; + /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ + padding-top: 0.57em; } // secondary container in title box @@ -95,9 +116,17 @@ // close button .message-close-button { - color: lighten($fg_color, 15%); - &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); } - &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); } + color: $fg_color; + background-color: transparentize($fg_color, 0.9); + border-radius: 99px; + padding: $base_padding; + margin: 0; + &:hover { + background-color: transparentize($fg_color, 0.8); + } + &:active { + background-color: transparentize($fg_color, 0.9); + } } // body @@ -113,30 +142,32 @@ /* Media Controls */ .message-media-control { - padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px - color: darken($fg_color, 15%); + padding: 0 $base_padding*2; + margin: $base_padding*2 0; + border-radius: $base_border_radius; + color: $fg_color; - // uses $hover_bg_color since the media controls are in a notification_bubble + // colors are lightened since the media controls are in a notification_bubble &:hover { background-color: lighten($hover_bg_color, 5%); color: $fg_color; } &:active { - background-color: darken($hover_bg_color, 2%); + background-color: lighten($active_bg_color, 5%); color: $fg_color; } - &:insensitive { color: darken($fg_color,40%); } + &:insensitive { color: lighten($insensitive_fg_color, 5%); } // fix border-radius for last button - &:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; } - &:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; } + &:last-child:ltr { margin-right: $base_margin*3; } + &:last-child:rtl { margin-left: $base_margin*3; } } // album-art .media-message-cover-icon { - icon-size: $base_icon_size*2 !important; // 48px + icon-size: $base_icon_size*3 !important; // 48px border-radius: $base_border_radius; // when there is no artwork @@ -145,6 +176,7 @@ background-color: $bg_color; border: 1px solid transparent; border-radius: $base_border_radius; - icon-size: $base_icon_size * 2 !important; + icon-size: $base_icon_size * 2 !important; // 32px + padding: ($base_padding*2 + 2); // 16px } } diff --git a/data/theme/gnome-shell-sass/widgets/_network-dialog.scss b/data/theme/gnome-shell-sass/widgets/_network-dialog.scss index 7973d2253..13e5c341d 100644 --- a/data/theme/gnome-shell-sass/widgets/_network-dialog.scss +++ b/data/theme/gnome-shell-sass/widgets/_network-dialog.scss @@ -23,27 +23,50 @@ .nm-dialog-header { font-weight: bold; } +.nm-dialog-subheader { + color: $insensitive_fg_color; +} + .nm-dialog-header-icon { icon-size: $base_icon_size * 2; } .nm-dialog-header-hbox { spacing: 10px; } +// airplane mode +.nm-dialog-airplane-headline { + font-weight: bold; +} + +.nm-dialog-airplane-text { + color: $insensitive_fg_color; +} + // list of networks .nm-dialog-scroll-view { - border: 1px solid $borders_color; - padding:0; + border: none; + padding:$base_padding; + border-radius: $base_border_radius; background-color: darken($bg_color, 3%); } // list item .nm-dialog-item { @include fontsize($base_font_size); - border-bottom: 1px solid $borders_color; + border: none; padding: $base_padding * 2; spacing: 0px; + text-shadow: none; + icon-shadow: none; + &:selected { background-color: $selected_bg_color; color: $selected_fg_color; + + border-radius: $base_border_radius - 3px; + } + + &:hover { + background-color:$hover_bg_color; } } diff --git a/data/theme/gnome-shell-sass/widgets/_notifications.scss b/data/theme/gnome-shell-sass/widgets/_notifications.scss index 5ff46a058..194a5a4e5 100644 --- a/data/theme/gnome-shell-sass/widgets/_notifications.scss +++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss @@ -2,11 +2,18 @@ $notification_banner_height: 64px; $notification_banner_width: 34em; +$notification_banner_radius: $base_border_radius*1.5; + +// make radius of buttons fit in bubble corner (banner radius - width of focus ring) +$notification_button_radius: ($notification_banner_radius - 2px); // Banner notifications .notification-banner { min-height: $notification_banner_height; width: $notification_banner_width; + box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1); + border-radius: $notification_banner_radius; + margin: $base_margin; .notification-actions { spacing: 0; diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss index 1f4650773..ad63e24ba 100644 --- a/data/theme/gnome-shell-sass/widgets/_panel.scss +++ b/data/theme/gnome-shell-sass/widgets/_panel.scss @@ -3,7 +3,7 @@ $panel_corner_radius: $base_border_radius+1; $panel_bg_color: #000; -$panel_fg_color: #ddd; +$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%)); $panel_height: 2.2em; $panel_transition_duration: 250ms; // same as the overview transition duration @@ -53,8 +53,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } } - &:hover, &:active, &:overview, &:focus, &:checked { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20); + &:active, &:overview, &:focus, &:checked { + box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8); // The clock display needs to have the background on .clock because // we want to exclude the do-not-disturb indicator from the background @@ -62,7 +62,27 @@ $panel_transition_duration: 250ms; // same as the overview transition duration box-shadow: none; .clock { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20); + box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8); + } + } + } + + &:hover { + box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85); + &.clock-display { + box-shadow: none; + .clock { + box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85); + } + } + } + + &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover { + box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75); + &.clock-display { + box-shadow: none; + .clock { + box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75); } } } @@ -94,14 +114,34 @@ $panel_transition_duration: 250ms; // same as the overview transition duration &.login-screen, &:overview { .panel-button { - &:hover, &:active, &:overview, &:focus, &:checked { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); + &:active, &:overview, &:focus, &:checked { + box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15); &.clock-display { box-shadow: none; .clock { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); + box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15); + } + } + } + + &:hover { + box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10); + &.clock-display { + box-shadow: none; + .clock { + box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10); + } + } + } + + &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover { + box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2); + &.clock-display { + box-shadow: none; + .clock { + box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2); } } } @@ -133,3 +173,15 @@ $panel_transition_duration: 250ms; // same as the overview transition duration padding: 0 $base_padding; spacing: $base_spacing; } + + +// Clock + +.clock-display-box { + spacing: 2px; + + .clock { + padding-left: $base_padding * 2; + padding-right: $base_padding * 2; + } +} \ No newline at end of file diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss b/data/theme/gnome-shell-sass/widgets/_popovers.scss index db9df9aa3..7a88e305d 100644 --- a/data/theme/gnome-shell-sass/widgets/_popovers.scss +++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss @@ -1,16 +1,15 @@ /* Popovers/Menus */ -$popover_arrow_height: 12px; - -//.the popover itself +// the popover itself .popup-menu-boxpointer { - -arrow-border-radius: $base_border_radius+4; + -arrow-border-radius: $modal_radius; -arrow-background-color: $bg_color; - -arrow-border-width: 1px; -arrow-border-color: $borders_color; - -arrow-base: $popover_arrow_height * 2; - -arrow-rise: $popover_arrow_height; - -arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); // dreaming bugzilla #689995 + -arrow-border-width: 1px; + -arrow-base: 24px; + -arrow-rise: 12px; + -arrow-box-shadow: none; // dreaming bugzilla #689995 + margin: $base_margin; // used as distance from the screen edge } // container of the popover menu @@ -20,36 +19,74 @@ $popover_arrow_height: 12px; //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is &.panel-menu { - -boxpointer-gap: $base_margin; // distance from the panel - margin-bottom: 1.75em; + -boxpointer-gap: $base_margin+2px; // distance from the panel + + // override popover styles for panel menus so + // we can draw a box shadow and no arrow + -arrow-border-radius: $modal_radius; + -arrow-background-color: transparent; + -arrow-border-color: transparent; + -arrow-border-width: 0; + -arrow-base: 0; + -arrow-rise: $base_margin; // use this as top margin + -arrow-box-shadow: none; // dreaming bugzilla #689995 + + margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen + + // style the menu content instead + .popup-menu-content { + border-radius: $modal_radius; + border: 1px solid $borders_color; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); + background-color: $bg_color; + padding: $base_padding * 2; + } + + .popup-menu-item {} } } +// popover content; .popup-menu-content { - padding: $base_padding * 2 + $base_margin 0; + padding: $base_padding; } // menu items .popup-menu-item { - spacing: $base_padding; - padding: $base_padding; + spacing: $base_spacing; + padding: $base_padding*2; + margin: 2px 0; + border-radius: $base_border_radius; + transition: 0.2s all ease; &:ltr { padding-right:1.75em; padding-left: 0; } &:rtl { padding-right: 0; padding-left:1.75em; } + &:hover { + background-color: $hover_bg_color; + } + &:checked { - background-color: lighten($bg_color, 2%); - box-shadow: none; + background-color: $hover_bg_color; + font-weight: bold; + + margin-bottom: 0; + box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 5%); + border-radius: $base_border_radius $base_border_radius 0 0; + + &:hover { + background-color: darken($hover_bg_color, 4%); + } } &.selected { - background-color: transparentize(white, if($variant=='light', 0.2, 0.9)); + background-color: transparentize($fg_color, if($variant=='light', 0.7, 0.9)); color: $fg_color; } &:active { - background-color: $selected_bg_color; - color: $selected_fg_color; + background-color: $active_bg_color; + color: $active_fg_color; } &:insensitive { color: transparentize($fg_color,0.5);} @@ -59,27 +96,65 @@ $popover_arrow_height: 12px; .popup-inactive-menu-item { color: $fg_color; - &:insensitive { color: transparentize($fg_color,0.5); } + // "Open Windows" label + font-weight: bold; + font-size: smaller; + + &:insensitive { color: $insensitive_fg_color; } } // symbolic icons in popover .popup-menu-arrow, -.popup-menu-icon { icon-size: $base_icon_size; } +.popup-menu-icon { + margin: 0; + padding:0; + icon-size: 16px !important; +} + +.popup-menu-arrow { + margin-right: $base_margin; +} // popover submenus .popup-sub-menu { - background-color: darken($bg_color, 3%); - box-shadow: none; - border-top: 1px solid transparentize($borders_color, 0.2); - border-bottom: 1px solid transparentize($borders_color, 0.2); + background-color: $hover_bg_color; + border:none; + border-radius: 0 0 $base_border_radius $base_border_radius; + padding: 0; + margin-top: 0; + &:active { + background-color: transparent; + } + + + + .popup-menu-ornament { + min-width: 14px !important; + } + + .popup-menu-item { + margin: 0; + border-radius: 0; + padding: $base_padding*1.5 $base_padding*2; + + &:last-child:hover{ + border-radius: 0 0 $base_border_radius $base_border_radius; + } + } + + .popup-separator-menu-item { + margin: 0; + } } // container for radio and check boxes .popup-menu-ornament { width: 1.2em; + font-weight: bold; + font-size: 1em; - &:ltr { text-align: right }; - &:rtl { text-align: left }; + &:ltr { text-align: right; }; + &:rtl { text-align: left; }; } // separator @@ -89,13 +164,13 @@ $popover_arrow_height: 12px; .popup-separator-menu-item-separator { //-margin-horizontal: 24px; height: 1px; //not really the whole box - margin: 6px 64px; + margin: $base_margin 4em; background-color: lighten($borders_color, 2%); + .popup-sub-menu & { //submenu separators - margin: 0 64px 0 32px; - @if $variant == 'dark' { - background-color: lighten($bg_color,10%); - } + margin: 0 4em 0 3em; // balance it in the middle + padding:0 !important; + background-color: darken($hover_bg_color, 5%); } } } @@ -110,6 +185,14 @@ $popover_arrow_height: 12px; .aggregate-menu { min-width: 21em; + // this is unneeded in at the top-level this menu, hide it + .popup-menu-ornament {width:0;padding:0;spacing:0;margin:0;} + + .popup-menu-item { + &:ltr { padding-left:$base_padding;padding-right:$base_padding*2; } + &:rtl { padding-right:$base_padding;padding-left:$base_padding*2; } + } + // lock screen, shutdown, etc. buttons .popup-menu-icon { padding:0; @@ -120,11 +203,11 @@ $popover_arrow_height: 12px; .popup-sub-menu .popup-menu-item > :first-child { // account for icons in submenus with padding &:ltr { - padding-left: $base_padding + $base_margin * 2; + padding-left: 0; margin-left: $base_icon_size; } &:rtl { - padding-right: $base_padding + $base_margin * 2; ; + padding-right: 0; margin-right: $base_icon_size; } } diff --git a/data/theme/gnome-shell-sass/widgets/_search-entry.scss b/data/theme/gnome-shell-sass/widgets/_search-entry.scss index d3584fb9c..409fff0ce 100644 --- a/data/theme/gnome-shell-sass/widgets/_search-entry.scss +++ b/data/theme/gnome-shell-sass/widgets/_search-entry.scss @@ -5,30 +5,32 @@ $search_entry_height: 36px; %search_entry, .search-entry { - width: $search_entry_width; - padding: $base_padding+1 $base_padding+3; - border-radius: $search_entry_height * 0.5; // half the height - color: transparentize($fg_color,0.3); - background-color: $bg_color; - margin-top: $base_spacing * 2; - margin-bottom: $base_spacing; + background-color: lighten($bg_color, 5%); border-width: 2px; border-color: transparent; + border-radius: $search_entry_height * 0.5; // half the height + color: transparentize($fg_color,0.3); + margin-top: $base_spacing * 2; + margin-bottom: $base_spacing; + padding: $base_padding+1 $base_padding+3; + width: $search_entry_width; + &:hover { - background-color: $hover_bg_color; - color: $hover_fg_color; + background-color: lighten($hover_bg_color, 5%); + color: lighten($hover_fg_color, 5%); } &:focus { border-style: solid; border-color: $selected_bg_color; color: $fg_color; - box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.2); + box-shadow: none; } .search-entry-icon { - icon-size: $base_icon_size; - padding: 0 4px; color: inherit; + icon-size: $base_icon_size; + margin-top: 2px; // center vertically + padding: 0 4px; } } diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss index 0d81c974d..787311a2e 100644 --- a/data/theme/gnome-shell-sass/widgets/_search-results.scss +++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss @@ -11,31 +11,33 @@ // This should be equal to #searchResultsContent spacing spacing: $base_margin * 2; - // separator + // separator (unstyled) .search-section-separator { - // height: 1px; - // background-color: $osd_outer_borders_color; - height: 0; + height: $base_margin*2; // use it as a spacer background-color: transparent; } } // content .search-section-content { - background-color: transparentize(lighten($osd_bg_color, 5%), 0.2); - border-radius: $modal_radius+3; + background-color: lighten($system_bg_color, 5%); + border-radius: $modal_radius*1.5; border: 1px solid $osd_outer_borders_color; - box-shadow: 0 2px 4px 0 $shadow_color; - text-shadow: 0 1px if($variant == 'light', rgba(255,255,255,0.2), rgba(0,0,0,0.2)); + box-shadow: none; + text-shadow: none; color: $osd_fg_color; padding: $base_padding * 3; + margin: $base_margin; // This is the space between the provider icon and the results container - spacing: $base_margin * 2; } -%search-section-content-item { +%search_section_content_item { @extend %icon_tile; + border-radius: $base_border_radius; + + color: $osd_fg_color; + &:focus, &:hover, &:selected { @@ -60,12 +62,12 @@ // Search results with icons .grid-search-result { - @extend %app-well-app; + @extend %app_well_app; } // search result provider .search-provider-icon { - @extend %search-section-content-item; + @extend %search_section_content_item; // content .list-search-provider-content { @@ -74,9 +76,7 @@ // provider labels .list-search-provider-details { width: 120px; - margin-top: 0; - color: darken($osd_fg_color, 8%); - // font-weight: bold; + color: $osd_fg_color; } } } @@ -88,7 +88,7 @@ // search result listitem .list-search-result { - @extend %search-section-content-item; + @extend %search_section_content_item; // content .list-search-result-content { @@ -103,6 +103,6 @@ // list item description .list-search-result-description { - color: darken($osd_fg_color, 30%); + color: $osd_insensitive_fg_color; } } diff --git a/data/theme/gnome-shell-sass/widgets/_slider.scss b/data/theme/gnome-shell-sass/widgets/_slider.scss index f21d62e68..8f6c49e36 100644 --- a/data/theme/gnome-shell-sass/widgets/_slider.scss +++ b/data/theme/gnome-shell-sass/widgets/_slider.scss @@ -1,27 +1,28 @@ /* Slider */ -$slider_size: 15px; +$slider_size: 16px; .slider { height: $slider_size; // slider trough - -barlevel-height: 3px; // has to be an odd number - -barlevel-background-color: $borders_color; //background of the trough - -barlevel-border-width: 1px; - -barlevel-border-color: $borders_color; // trough border color + -barlevel-height: 4px; + -barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), transparentize($fg_color, 0.8)); //background of the trough + -barlevel-border-width: 2px; + -barlevel-border-color: transparent; // trough border color // fill style - -barlevel-active-background-color: $selected_bg_color; //active trough fill - -barlevel-active-border-color: if($variant == 'light', darken($selected_bg_color, 4%), lighten($selected_bg_color, 2%)); //active trough border + -barlevel-active-background-color: $selected_bg_color; + -barlevel-active-border-color: transparent; // overfill style (red in this case) -barlevel-overdrive-color: $destructive_color; - -barlevel-overdrive-border-color: if($variant == 'light', darken($destructive_color, 4%), lighten($destructive_color, 2%)); //trough border when red; + -barlevel-overdrive-border-color: transparent; //trough border when red; -barlevel-overdrive-separator-width:1px; // slider handler -slider-handle-radius: $slider_size * 0.5; // half the size of the size - -slider-handle-border-width: 1px; - -slider-handle-border-color: if($variant == 'light', $borders_color, $fg_color); + -slider-handle-border-width: 0; + -slider-handle-border-color: transparent; // because 0 width + margin: 0 $base_padding; - color: if($variant == 'light', lighten($bg_color, 10%), $fg_color); + color: $fg_color; &:hover { color: $hover_bg_color; } &:active { color: $active_bg_color; } } \ No newline at end of file diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss index 32cbbe548..8335b05f6 100644 --- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss +++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss @@ -1,37 +1,51 @@ /* App Switcher */ +// same as dash +$switcher_padding: $base_padding + 4px; // 10px +$switcher_border_radius: $modal_radius + 8px; + + +// the full screen container of the switcher .switcher-popup { - padding: 8px; + padding: 0; spacing: $base_spacing * 4; } // switcher onscreen panel .switcher-list { @extend %osd_panel; + padding: $switcher_padding; + border-radius: $switcher_border_radius; + box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1); + // container for items in list + .switcher-list-item-container { + spacing: $base_spacing * 2; + } + + // each item in the list .item-box { - padding: 8px; - border-radius: $base_border_radius + 1px; - border: 1px solid transparent; + @extend %icon_tile; &:outlined { background-color: transparentize($osd_fg_color, 0.7); } + &:hover, &:selected { - background-color: transparentize($osd_fg_color, 0.7); - color: $osd_fg_color; + background-color: transparentize($osd_fg_color, .9); } - } - // window thumbnails - .thumbnail-box { - padding: 2px; - spacing: $base_spacing; - } + &:focus { + background-color: transparentize($osd_fg_color, .7); + // border-color: $selected_bg_color; + } - .thumbnail { - width: 256px; + &:focus, + &:active, + &:checked { + background-color: transparentize(darken($osd_bg_color, 10%), .5); + } } .separator { @@ -39,16 +53,27 @@ background: $borders_color; } - .switcher-list-item-container { - spacing: $base_spacing * 2; + // container of thumbnails + .thumbnail-box { + padding: 2px; + spacing: $base_spacing; + } + + // window thumbnail itself + .thumbnail { + width: 256px; // equal to THUMBNAIL_DEFAULT_SIZE in altTab.js + border-radius:$base_border_radius; } } +// arrow if app has multiple windows .switcher-arrow { - border-color: rgba(0,0,0,0); - color: transparentize($fg_color,0.2); + border-color: transparentize($osd_fg_color, 0.2); + color: transparentize($osd_fg_color, 0.2); + &:highlighted { - color: $fg_color; + border-color: $osd_fg_color; + color: $osd_fg_color; } } diff --git a/data/theme/gnome-shell-sass/widgets/_switches.scss b/data/theme/gnome-shell-sass/widgets/_switches.scss index fd7472ed3..30a0f0d5e 100644 --- a/data/theme/gnome-shell-sass/widgets/_switches.scss +++ b/data/theme/gnome-shell-sass/widgets/_switches.scss @@ -1,8 +1,8 @@ /* Switches */ // these are equal to the size of the SVG assets -$switch_height: 22px; -$switch_width: 46px; +$switch_height: 26px; +$switch_width: 48px; .toggle-switch { color: $fg_color; diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss index 5b15a30fa..69cf4148b 100644 --- a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss +++ b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss @@ -1,17 +1,23 @@ /* Workspace Switcher */ + +$ws_padding: $base_padding*2; +$ws_border_radius: $modal_radius + 8px; + .workspace-switcher-group { padding: $base_padding * 2; } .workspace-switcher-container { @extend %osd_panel; + padding: $ws_padding; + border-radius: $ws_border_radius; + box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1); } .workspace-switcher { background: transparent; border: none; border-radius: 0; - padding: 0; spacing: $base_spacing * 2; } diff --git a/data/theme/keyboard-caps-lock-filled-symbolic.svg b/data/theme/keyboard-caps-lock-filled-symbolic.svg index 45985b77a..b2468aeb2 100644 --- a/data/theme/keyboard-caps-lock-filled-symbolic.svg +++ b/data/theme/keyboard-caps-lock-filled-symbolic.svg @@ -1,6 +1 @@ - - - - - - + \ No newline at end of file diff --git a/data/theme/keyboard-enter-symbolic.svg b/data/theme/keyboard-enter-symbolic.svg index de68b715a..51e6dae0f 100644 --- a/data/theme/keyboard-enter-symbolic.svg +++ b/data/theme/keyboard-enter-symbolic.svg @@ -1,6 +1 @@ - - - - - - + \ No newline at end of file diff --git a/data/theme/keyboard-hide-symbolic.svg b/data/theme/keyboard-hide-symbolic.svg index 421270718..fbe0edaec 100644 --- a/data/theme/keyboard-hide-symbolic.svg +++ b/data/theme/keyboard-hide-symbolic.svg @@ -1,7 +1 @@ - - - - - - - + \ No newline at end of file diff --git a/data/theme/keyboard-layout-filled-symbolic.svg b/data/theme/keyboard-layout-filled-symbolic.svg index 7c9b95560..bdc4b01f1 100644 --- a/data/theme/keyboard-layout-filled-symbolic.svg +++ b/data/theme/keyboard-layout-filled-symbolic.svg @@ -1,7 +1 @@ - - - - - - - + \ No newline at end of file diff --git a/data/theme/keyboard-shift-filled-symbolic.svg b/data/theme/keyboard-shift-filled-symbolic.svg index 04069e89b..f072d3966 100644 --- a/data/theme/keyboard-shift-filled-symbolic.svg +++ b/data/theme/keyboard-shift-filled-symbolic.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/data/theme/no-notifications.svg b/data/theme/no-notifications.svg index 9ac2f66b3..3ca5711a5 100644 --- a/data/theme/no-notifications.svg +++ b/data/theme/no-notifications.svg @@ -1,175 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/data/theme/toggle-off-dark.svg b/data/theme/toggle-off-dark.svg index 163a135dc..0aa086147 100644 --- a/data/theme/toggle-off-dark.svg +++ b/data/theme/toggle-off-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/data/theme/toggle-off-hc.svg b/data/theme/toggle-off-hc.svg index 809cd3f7b..5d60857a9 100644 --- a/data/theme/toggle-off-hc.svg +++ b/data/theme/toggle-off-hc.svg @@ -1,133 +1 @@ - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/data/theme/toggle-off.svg b/data/theme/toggle-off.svg index ee5178294..14cb4246a 100644 --- a/data/theme/toggle-off.svg +++ b/data/theme/toggle-off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/data/theme/toggle-on-dark.svg b/data/theme/toggle-on-dark.svg index b71931ac8..9646f9c23 100644 --- a/data/theme/toggle-on-dark.svg +++ b/data/theme/toggle-on-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/data/theme/toggle-on-hc.svg b/data/theme/toggle-on-hc.svg index 9952f9540..7daad9043 100644 --- a/data/theme/toggle-on-hc.svg +++ b/data/theme/toggle-on-hc.svg @@ -1,113 +1 @@ - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/data/theme/toggle-on.svg b/data/theme/toggle-on.svg index 28be67e28..f3dbf3157 100644 --- a/data/theme/toggle-on.svg +++ b/data/theme/toggle-on.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file