diff --git a/checkbox-focused.svg b/checkbox-focused.svg deleted file mode 100644 index 01eb733..0000000 --- a/checkbox-focused.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/checkbox-off-focused-light.svg b/checkbox-off-focused-light.svg deleted file mode 100644 index 4767377..0000000 --- a/checkbox-off-focused-light.svg +++ /dev/null @@ -1,220 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - diff --git a/checkbox-off-focused.svg b/checkbox-off-focused.svg deleted file mode 100644 index d5a042e..0000000 --- a/checkbox-off-focused.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/checkbox-off-light.svg b/checkbox-off-light.svg deleted file mode 100644 index 5d37c85..0000000 --- a/checkbox-off-light.svg +++ /dev/null @@ -1,211 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - diff --git a/checkbox-off.svg b/checkbox-off.svg deleted file mode 100644 index 50eece1..0000000 --- a/checkbox-off.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/checkbox.svg b/checkbox.svg deleted file mode 100644 index da385b6..0000000 --- a/checkbox.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/gnome-shell-dark.scss b/gnome-shell-dark.scss index 294ac64..c1a330b 100644 --- a/gnome-shell-dark.scss +++ b/gnome-shell-dark.scss @@ -1,7 +1,6 @@ $variant: 'dark'; $contrast: 'normal'; -$laptop: false; @import "gnome-shell-sass/_colors"; //use gtk colors @import "gnome-shell-sass/_drawing"; @import "gnome-shell-sass/_common"; diff --git a/gnome-shell-high-contrast.scss b/gnome-shell-high-contrast.scss new file mode 100644 index 0000000..a4394dd --- /dev/null +++ b/gnome-shell-high-contrast.scss @@ -0,0 +1,7 @@ +$variant: 'dark'; +$contrast: "high"; + +@import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors +@import "gnome-shell-sass/_drawing"; +@import "gnome-shell-sass/_common"; +@import "gnome-shell-sass/_widgets"; diff --git a/gnome-shell-dark-laptop.scss b/gnome-shell-light.scss similarity index 84% rename from gnome-shell-dark-laptop.scss rename to gnome-shell-light.scss index 61925f9..22b8347 100644 --- a/gnome-shell-dark-laptop.scss +++ b/gnome-shell-light.scss @@ -1,7 +1,6 @@ -$variant: 'dark'; +$variant: 'light'; $contrast: 'normal'; -$laptop: true; @import "gnome-shell-sass/_colors"; //use gtk colors @import "gnome-shell-sass/_drawing"; @import "gnome-shell-sass/_common"; diff --git a/gnome-shell-sass/_colors.scss b/gnome-shell-sass/_colors.scss index 9a5450a..cbb3b71 100644 --- a/gnome-shell-sass/_colors.scss +++ b/gnome-shell-sass/_colors.scss @@ -21,7 +21,7 @@ $system_base_color: $_base_color_dark; $system_fg_color: $_base_color_light; // panel colors -$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_4); +$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_5); $panel_fg_color: if($variant == 'light', $_base_color_dark, $light_1); // card elements @@ -65,5 +65,5 @@ $hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color, $active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%)); $active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%)); -// selection colors -$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%)); +// accent colors +$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 15%), st-lighten(-st-accent-color, 15%)); diff --git a/gnome-shell-sass/_common.scss b/gnome-shell-sass/_common.scss index adb8b70..846427e 100644 --- a/gnome-shell-sass/_common.scss +++ b/gnome-shell-sass/_common.scss @@ -39,6 +39,9 @@ $forced_circular_radius: 999px; // radii of things that display over other things, e.g. popovers $modal_radius: $base_border_radius * 2; +// radii of dialogs +$alert_radius: 18px; + // Chroma key to flag when a background-color is always occluded, not visible. // This allows any box-shadow behind it to be rendered more efficiently by // omitting the middle rectangle. @@ -117,11 +120,11 @@ stage { } %default_button { - @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default); - &:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);} - &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);} - &:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);} - &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);} + @include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default); + &:focus { @include button(focus, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);} + &:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);} + &:insensitive { @include button(insensitive, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);} + &:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);} } // items in popover menus @@ -172,8 +175,9 @@ stage { %entry_common { border-radius: $base_border_radius; padding: $base_padding * 1.5 $base_padding * 1.5; - selection-background-color: $selected_bg_color; - selected-color: $selected_fg_color; + + selection-background-color: st-transparentize(-st-accent-color, 0.7); + selected-color: $fg_color; } %entry { @@ -188,48 +192,33 @@ stage { } } -// buttons in dialogs/notifications -// lighter in color and have a greater radius -%bubble_button { +// buttons in notifications +// use a rounded style and have a lighter background +%notification_button { + font-weight: bold; + padding: $base_padding $base_padding * 2; + border-radius: $base_border_radius; + + @include button(normal, $style: notification); + &:focus { @include button(focus, $style: notification);} + &:hover { @include button(hover, $style: notification);} + &:active { @include button(active, $style: notification);} + &:checked { @include button(checked, $style: notification);} + &:insensitive { @include button(insensitive, $style: notification);} +} + +// buttons in dialogs +%dialog_button { + font-weight: bold; padding: $base_padding * 2; - font-weight: bold !important; + border-radius: $base_border_radius * 1.5; - &:ltr {margin-right: 1px;} - &:rtl {margin-left: 1px;} - - // needs a 1px adjustment to fit exactly into the outer radius - $bubble_button_radius: $modal_radius - 1px; - - @include button(normal, $style: bubble); - &:focus { @include button(focus, $style: bubble);} - &:hover { @include button(hover, $style: bubble);} - &:active { @include button(active, $style: bubble);} - &:checked { @include button(checked, $style: bubble);} - &:insensitive { @include button(insensitive, $style: bubble);} - - &:first-child:ltr { - border-radius: 0 0 0 $bubble_button_radius; - } - - &:last-child:ltr { - border-radius: 0 0 $bubble_button_radius; - margin-right: 0 !important; - } - - &:first-child:rtl { - border-radius: 0 0 $bubble_button_radius; - } - - &:last-child:rtl { - border-radius: 0 0 0 $bubble_button_radius; - margin-left: 0 !important; - } - - &:first-child:last-child { - border-radius: 0 0 $bubble_button_radius $bubble_button_radius; - margin-left: 0 !important; - margin-right: 0 !important; - } + @include button(normal, $style: dialog); + &:focus { @include button(focus, $style: dialog);} + &:hover { @include button(hover, $style: dialog);} + &:active { @include button(active, $style: dialog);} + &:checked { @include button(checked, $style: dialog);} + &:insensitive { @include button(insensitive, $style: dialog);} } // tooltip @@ -291,7 +280,7 @@ stage { %smaller { font-weight: 400; - @include fontsize(8pt); + @include fontsize(9pt); } %monospace {font-family: monospace;} diff --git a/gnome-shell-sass/_default-colors.scss b/gnome-shell-sass/_default-colors.scss index 6c70087..bf18541 100644 --- a/gnome-shell-sass/_default-colors.scss +++ b/gnome-shell-sass/_default-colors.scss @@ -22,13 +22,9 @@ $error_bg_color: if($variant == 'light', $red_3, $red_4); $error_fg_color: $light_1; $error_color: $error_bg_color; -// colors for selected or default elements -$selected_bg_color: if($variant == 'light', $blue_4, $blue_3); -$selected_fg_color: $light_1; - // link colors -$link_color: if($variant == 'light', $blue_4, $blue_2); -$link_visited_color: transparentize($link_color, .6); +$link_color: if($variant == 'light', st-darken(-st-accent-color, 10%), st-lighten(-st-accent-color, 20%)); +$link_visited_color: st-transparentize($link_color, .6); // special cased widget definitions $background_mix_factor: if($variant == 'light', 12%, 9%); // used to boost the color of backgrounds in different variants @@ -39,8 +35,8 @@ $shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2)); $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2)); // focus colors -$focus_color: $selected_bg_color; -$focus_border_color: transparentize($focus_color, 0.5); +$focus_color: -st-accent-color; +$focus_border_color: st-transparentize($focus_color, 0.5); // High Contrast overrides @if $contrast == 'high' { @@ -50,5 +46,5 @@ $focus_border_color: transparentize($focus_color, 0.5); $shadow_color: transparent; $text_shadow_color: transparent; // less transparent focus color - $focus_border_color: transparentize($focus_color, 0.2); + $focus_border_color: st-transparentize($focus_color, 0.2); } diff --git a/gnome-shell-sass/_drawing.scss b/gnome-shell-sass/_drawing.scss index dd6f8a8..a2fa5f2 100644 --- a/gnome-shell-sass/_drawing.scss +++ b/gnome-shell-sass/_drawing.scss @@ -16,12 +16,12 @@ // $mc: mix color, defined in High Contrast specific stylesheet // $mf: mix factor (%), defined in High Contrast specific stylesheet // - @return mix($c, $mc, $mf); + @return st-mix($c, $mc, $mf); } // Function to mix the color and make the focus background @function focus_bg_color($bg, $fc:$focus_color) { - @return mix($fc, $bg, 5%); + @return st-mix($fc, $bg, 5%); } // @@ -160,12 +160,12 @@ // - normal, focus, hover, active, checked, insensitive, default, undecorated // $c: button bg color, derived from bg_color // $tc: button text color, derived from fg_color - // $style: button style, possible values: card, bubble, flat, default + // $style: button style, possible values: card, notification, dialog, flat, default // $always_dark: override the light theme check to use dark colors, true or false // // mix input colors to get button background color - $button_bg_color: mix($tc, $c, $background_mix_factor); + $button_bg_color: st-mix($tc, $c, $background_mix_factor); // background color override for card elements @if $style == 'card' { $button_bg_color: $card_bg_color;} @@ -187,37 +187,46 @@ } // button base state background colors - $hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor)); - $active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor)); - $checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor)); - $insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor)); + $hover_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $hover_factor), st-lighten($button_bg_color, $hover_factor)); + $active_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $active_factor), st-lighten($button_bg_color, $active_factor)); + $checked_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $checked_factor), st-lighten($button_bg_color, $checked_factor)); + $insensitive_button_bg_color: if($variant == 'light', st-lighten($button_bg_color, $insensitive_factor), st-darken($button_bg_color, $insensitive_factor)); // button extended state background colors - $active_hover_button_bg_color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor)); - $checked_hover_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor)); - $checked_active_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor)); + $active_hover_button_bg_color: if($variant == 'light', st-darken($active_button_bg_color, $hover_factor), st-lighten($active_button_bg_color, $hover_factor)); + $checked_hover_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $hover_factor), st-lighten($checked_button_bg_color, $hover_factor)); + $checked_active_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $active_factor), st-lighten($checked_button_bg_color, $active_factor)); // override button background colours if element is always dark @if $always_dark { - $hover_button_bg_color: lighten($button_bg_color, $hover_factor); - $active_button_bg_color: lighten($button_bg_color, $active_factor); - $checked_button_bg_color: lighten($button_bg_color, $checked_factor); - $insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor); + $hover_button_bg_color: st-lighten($button_bg_color, $hover_factor); + $active_button_bg_color: st-lighten($button_bg_color, $active_factor); + $checked_button_bg_color: st-lighten($button_bg_color, $checked_factor); + $insensitive_button_bg_color: st-darken($button_bg_color, $insensitive_factor); // extended - $active_hover_button_bg_color: lighten($active_button_bg_color, $hover_factor); - $checked_hover_button_bg_color: lighten($checked_button_bg_color, $hover_factor); - $checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor); + $active_hover_button_bg_color: st-lighten($active_button_bg_color, $hover_factor); + $checked_hover_button_bg_color: st-lighten($checked_button_bg_color, $hover_factor); + $checked_active_button_bg_color: st-lighten($checked_button_bg_color, $active_factor); } // background color override for buttons that use transparency - // styles: notification bubbles, lockscreen - @if $style == 'bubble' or $style == 'lockscreen' { + // styles: dialogs bubbles, lockscreen + @if $style == 'dialog' or $style == 'lockscreen' { $button_bg_color: transparentize($tc, .9); $hover_button_bg_color: transparentize($tc, .87); $active_button_bg_color: transparentize($tc, .84); $active_hover_button_bg_color: transparentize($tc, .81); } + // background color overrides for notification style + @if $style == 'notification' { + $button_bg_color: transparentize($tc, .85); + $hover_button_bg_color: transparentize($tc, .7); + $insensitive_button_bg_color: transparentize($tc, .9); + $active_button_bg_color: transparentize($tc, .8); + $active_hover_button_bg_color: transparentize($tc, .8); + } + // flat style overrides @if $style == 'flat' { $insensitive_button_bg_color: $button_bg_color; @@ -283,7 +292,7 @@ // insensitive button @else if $type == 'insensitive' { - $insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5)); + $insensitive_button_fg_color: if($variant == 'light', st-transparentize($tc, .6), st-transparentize($tc, .5)); color: $insensitive_button_fg_color; background-color: $insensitive_button_bg_color; @@ -300,7 +309,7 @@ // use a different focus ring color for default style @if $style == 'default' { - @include focus_ring($fc:$selected_borders_color); + @include focus_ring($fc:$accent_borders_color); } // change background color if style is flat @if $style == 'flat' { @@ -357,8 +366,8 @@ } &:drop { - background-color: transparentize($selected_bg_color, .8); - box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2); + background-color: st-transparentize(-st-accent-color, .8); + box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .2); } } @@ -368,25 +377,22 @@ // extend common styles @extend %menuitem; - // lighten the background color always - $bg: lighten($bg,5%); - @if $style == 'flat' { @include button(undecorated); } @else { @include button(normal, $c:$bg); } - &:focus, &:hover { @include button(hover, $c:$bg); } &:active {@include button(active, $c:$bg);} + &:selected, &:checked {@include button(checked, $c:$bg);} &:insensitive {@include button(insensitive, $c:$bg);} } // Panel menu/button drawing function -@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"", $border_radius: 3px) { +@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"") { // // $bg: background color, derived from $panel_fg_color // $fg: foreground color, also derived from $panel_fg_color @@ -400,7 +406,7 @@ transition-duration: 150ms; border: 3px solid transparent; background-color: transparent; - border-radius: $border_radius; + border-radius: $forced_circular_radius; font-weight: bold; color: $fg; @@ -444,7 +450,7 @@ #{$child_class} { transition-duration: 150ms; border: 3px solid transparent; - border-radius: $border_radius; + border-radius: $forced_circular_radius; } &:focus, &:hover { diff --git a/gnome-shell-sass/_high-contrast-colors.scss b/gnome-shell-sass/_high-contrast-colors.scss index 3cc447c..3b05e0b 100644 --- a/gnome-shell-sass/_high-contrast-colors.scss +++ b/gnome-shell-sass/_high-contrast-colors.scss @@ -64,8 +64,8 @@ $hover_fg_color: lighten($fg_color, 20%); $active_bg_color: lighten($bg_color, 22%); $active_fg_color: lighten($fg_color, 22%); -// selection colors -$selected_borders_color: lighten($selected_bg_color, 30%); +// accent colors +$accent_borders_color: st-lighten(-st-accent-color, 30%); // // High Contrast specific definitions diff --git a/gnome-shell-sass/_palette.scss b/gnome-shell-sass/_palette.scss index 8627513..78847d9 100644 --- a/gnome-shell-sass/_palette.scss +++ b/gnome-shell-sass/_palette.scss @@ -39,8 +39,8 @@ $light_2: #f6f5f4; $light_3: #deddda; $light_4: #c0bfbc; $light_5: #9a9996; -$dark_1: #777777; -$dark_2: #5e5e5e; -$dark_3: #3d3d3d; -$dark_4: #242424; -$dark_5: #000000; +$dark_1: #77767b; +$dark_2: #5e5c64; +$dark_3: #3d3846; +$dark_4: #241f31; +$dark_5: #000000; \ No newline at end of file diff --git a/gnome-shell-sass/widgets/_a11y.scss b/gnome-shell-sass/widgets/_a11y.scss index 31b5c4b..0bbf185 100644 --- a/gnome-shell-sass/widgets/_a11y.scss +++ b/gnome-shell-sass/widgets/_a11y.scss @@ -3,8 +3,8 @@ width: $ripple_size; height: $ripple_size; border-radius: $ripple_size * 0.5; // radius equals the size of the box to give us the curve - background-color: lighten(transparentize($selected_bg_color, 0.7), 30%); - box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%); + background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 30%); + box-shadow: 0 0 2px 2px st-lighten(-st-accent-color, 20%); } // Pointer accessibility notifications @@ -12,13 +12,13 @@ width: 60px; height: 60px; -pie-border-width: 3px; - -pie-border-color: $selected_bg_color; - -pie-background-color: lighten(transparentize($selected_bg_color, 0.7), 40%); + -pie-border-color: -st-accent-color; + -pie-background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 40%); } // Screen zoom/Magnifier .magnifier-zoom-region { - border: 2px solid $selected_bg_color; + border: 2px solid -st-accent-color; &.full-screen { border-width: 0; } } diff --git a/gnome-shell-sass/widgets/_app-grid.scss b/gnome-shell-sass/widgets/_app-grid.scss index fcada18..2fe110f 100644 --- a/gnome-shell-sass/widgets/_app-grid.scss +++ b/gnome-shell-sass/widgets/_app-grid.scss @@ -47,12 +47,7 @@ $app_folder_size: 720px; width: 5px; border-radius:5px; background-color: $system_fg_color; - - @if $contrast == 'high' { - margin-bottom: 4px; - } @else { - margin-bottom: 2px; - } + offset-y: 6px; } .app-folder-dialog-container { diff --git a/gnome-shell-sass/widgets/_base.scss b/gnome-shell-sass/widgets/_base.scss index 7d6f280..0a9618d 100644 --- a/gnome-shell-sass/widgets/_base.scss +++ b/gnome-shell-sass/widgets/_base.scss @@ -3,7 +3,7 @@ color: $link_color; &:hover { - color: lighten($link_color, 10%); + color: st-lighten($link_color, 10%); } } @@ -18,10 +18,5 @@ @if $contrast == 'high' { icon-shadow: none; - background-color: $osd_bg_color; - padding: $base_padding * 2; - border-radius: $modal_radius; - border: 2px solid $hc_inset_color; - margin: $base_padding * 3; } } diff --git a/gnome-shell-sass/widgets/_calendar.scss b/gnome-shell-sass/widgets/_calendar.scss index f34e591..a4c6a88 100644 --- a/gnome-shell-sass/widgets/_calendar.scss +++ b/gnome-shell-sass/widgets/_calendar.scss @@ -111,7 +111,7 @@ &.calendar-today { @extend %default_button; // override colors above for when today is a weekend - color: $selected_fg_color !important; + color: -st-accent-fg-color !important; &.calendar-day-with-events { background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style } @@ -268,10 +268,9 @@ spacing-columns: $base_padding * 2; .weather-forecast-time { - @extend %numeric; - @include fontsize(10pt); - padding-top: 0.2em; - padding-bottom: 0.4em; + @extend %smaller; + padding-top: $base_padding; + padding-bottom: $base_padding; } .weather-forecast-icon { icon-size: $large_scalable_icon_size; diff --git a/gnome-shell-sass/widgets/_check-box.scss b/gnome-shell-sass/widgets/_check-box.scss index 1480ade..956a59e 100644 --- a/gnome-shell-sass/widgets/_check-box.scss +++ b/gnome-shell-sass/widgets/_check-box.scss @@ -1,18 +1,49 @@ /* Check Boxes */ -// these are equal to the size of the SVG assets -$check_height: 24px; -$check_width: 24px; - - .check-box { StBoxLayout { spacing: .8em; } + StBin { - width: $check_width; - height: $check_height; - background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off.svg")); + border-radius: 7px; + padding: 2px; + } + + &:focus StBin { + // Trick due to St limitations. It needs a background to draw a box-shadow + background-color: rgba(0, 0, 0, 0.01); + box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .65); + } + + StIcon { + icon-size: 14px; + padding: 1px; + + color: transparent; + border-radius: 6px; + border: 2px solid transparentize(if($variant == 'light', black, white), .85); + } + + &:hover StIcon { + border-color: transparentize(if($variant == 'light', black, white), .8); + } + + &:active StIcon { + border-color: transparentize(if($variant == 'light', black, white), .7); + } + + &:checked StIcon { + background-color: -st-accent-color; + color: -st-accent-fg-color; + border-color: transparent; + } + + &:checked:hover StIcon { + background-color: st-lighten(-st-accent-color, 5%); + color: st-lighten(-st-accent-fg-color, 5%); + } + + &:checked:active StIcon { + background-color: st-darken(-st-accent-color, 7%); + color: st-darken(-st-accent-fg-color, 7%); } - &:focus StBin { background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-focused-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"));; } - &:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); } - &:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); } } diff --git a/gnome-shell-sass/widgets/_corner-ripple.scss b/gnome-shell-sass/widgets/_corner-ripple.scss index 1760eda..9aff431 100644 --- a/gnome-shell-sass/widgets/_corner-ripple.scss +++ b/gnome-shell-sass/widgets/_corner-ripple.scss @@ -3,7 +3,7 @@ $ripple_size: 50px; .ripple-box { - background-color: rgba(0,0,0,0); + background-color: rgba(255,255,255,0.2); box-shadow: 0 0 2px 2px rgba(255,255,255,0.2); // plus + 2px for the border (box-shadow) width: $ripple_size + 2px; diff --git a/gnome-shell-sass/widgets/_dash.scss b/gnome-shell-sass/widgets/_dash.scss index db378ca..ef9e121 100644 --- a/gnome-shell-sass/widgets/_dash.scss +++ b/gnome-shell-sass/widgets/_dash.scss @@ -11,7 +11,9 @@ $dash_spacing: $base_margin * 0.5; // container for the dash #dash { - margin-top: $dash_edge_offset; + // a bit of spacing so that dash doesn't touch the screen edges + padding-left: $base_padding; + padding-right: $base_padding; // background behind item container .dash-background { @@ -69,7 +71,11 @@ $dash_spacing: $base_margin * 0.5; // running app dot .app-grid-running-dot { // manually position the dot within the dash item - margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js + @if $contrast == 'high' { + offset-y: -$dash_padding - 1px; // don't draw dot directly on inset + } @else { + offset-y: -$dash_padding; + } } } diff --git a/gnome-shell-sass/widgets/_dialogs.scss b/gnome-shell-sass/widgets/_dialogs.scss index 48bb9c0..c08eb91 100644 --- a/gnome-shell-sass/widgets/_dialogs.scss +++ b/gnome-shell-sass/widgets/_dialogs.scss @@ -6,23 +6,25 @@ .modal-dialog { background-color: $bg_color; - border-radius: $modal_radius; + border-radius: $alert_radius; box-shadow: inset 0 0 0 1px $outer_borders_color; + padding: $base_padding * 4; .modal-dialog-content-box { - margin: $base_margin * 8 $base_margin * 10; spacing: $base_margin * 8; + margin-top: $base_margin * 2; + margin-bottom: $base_margin * 4; max-width: 28em; } .modal-dialog-linked-button { - @extend %bubble_button; + @extend %dialog_button; } } /* End Session Dialog */ .end-session-dialog { - width: 30em; + width: 24em; .end-session-dialog-battery-warning, .dialog-list-title { @@ -145,8 +147,8 @@ border-radius: $base_border_radius * 2; &:hover,&:focus { background-color: $hover_bg_color; } &:active { - background-color: $selected_bg_color; - color: $selected_fg_color; + background-color: -st-accent-color; + color: -st-accent-fg-color; } } diff --git a/gnome-shell-sass/widgets/_ibus-popup.scss b/gnome-shell-sass/widgets/_ibus-popup.scss index c1c0cfa..648c375 100644 --- a/gnome-shell-sass/widgets/_ibus-popup.scss +++ b/gnome-shell-sass/widgets/_ibus-popup.scss @@ -19,7 +19,7 @@ .candidate-box { padding: $base_padding $base_padding * 2 $base_padding $base_padding * 2; border-radius: $base_border_radius; - &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } + &:selected { background-color: -st-accent-color; color: -st-accent-fg-color; } &:hover { background-color: $hover_bg_color; color: $hover_fg_color; } } diff --git a/gnome-shell-sass/widgets/_keyboard.scss b/gnome-shell-sass/widgets/_keyboard.scss index 39e6394..489da57 100644 --- a/gnome-shell-sass/widgets/_keyboard.scss +++ b/gnome-shell-sass/widgets/_keyboard.scss @@ -63,17 +63,17 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken( // keys that may be latched: ctrl/alt/shift &:latched { - border-color: lighten($selected_bg_color, 5%); - background-color: $selected_bg_color; + border-color: st-lighten(-st-accent-color, 5%); + background-color: -st-accent-color; } } // enter key is suggested-action &.enter-key { - @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color); - &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);} - &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);} - &:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);} + @include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color); + &:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color);} + &:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color);} + &:checked { @include button(checked, $c:-st-accent-color, $tc:-st-accent-fg-color);} border-radius: $key_border_radius; color: $osd_fg_color; } @@ -128,8 +128,8 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken( .emoji-panel { .keyboard-key:latched { - border-color: lighten($selected_bg_color, 5%); - background-color: $selected_bg_color; + border-color: st-lighten(-st-accent-color, 5%); + background-color: -st-accent-color; } } diff --git a/gnome-shell-sass/widgets/_login-lock.scss b/gnome-shell-sass/widgets/_login-lock.scss index 4dc9aec..a89af5b 100644 --- a/gnome-shell-sass/widgets/_login-lock.scss +++ b/gnome-shell-sass/widgets/_login-lock.scss @@ -80,6 +80,11 @@ $_gdm_dialog_width: 25em; text-align: center; } +.login-dialog-message-hint, .login-dialog-message { + color: darken($_gdm_fg, 10%); + min-height: 2.75em; +} + .login-dialog-user-selection-box { // padding to ensure the box doesn't overlap the panel padding-top: 4em; @@ -123,8 +128,8 @@ $_gdm_dialog_width: 25em; color: darken($_gdm_fg,30%); &:focus, &:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; + background-color: -st-accent-color; + color: -st-accent-fg-color; } } @@ -170,9 +175,9 @@ $_gdm_dialog_width: 25em; &:logged-in { // color border for logged-in user .user-icon { - border-color: $selected_bg_color; + border-color: -st-accent-color; StIcon { - background-color: transparentize($selected_bg_color, .7); + background-color: st-transparentize(-st-accent-color, .7); } } } @@ -212,7 +217,7 @@ $_gdm_dialog_width: 25em; .unlock-dialog-clock-time { @extend %numeric; @include fontsize(72pt); - font-weight: 200; + font-weight: 800; } .unlock-dialog-clock-date { @@ -233,7 +238,7 @@ $_gdm_dialog_width: 25em; StButton#vhandle, StButton#hhandle { background-color: transparentize($bg_color,0.7); &:hover, &:focus { background-color: transparentize($bg_color,0.5); } - &:active { background-color: transparentize($selected_bg_color,0.5); } + &:active { background-color: st-transparentize(-st-accent-color,0.5); } } } @@ -313,7 +318,8 @@ $_gdm_dialog_width: 25em; spacing: $base_padding * 4; .user-widget-label { - @extend %title_1; + font-weight: 400; + @include fontsize(20pt); text-align: center; margin-bottom: .75em; } @@ -322,7 +328,7 @@ $_gdm_dialog_width: 25em; icon-size: $base_icon_size * 10; & StIcon { - padding: $base_padding * 4; + padding: $base_padding * 5; } } } diff --git a/gnome-shell-sass/widgets/_looking-glass.scss b/gnome-shell-sass/widgets/_looking-glass.scss index 7b8d904..fa0a5f9 100644 --- a/gnome-shell-sass/widgets/_looking-glass.scss +++ b/gnome-shell-sass/widgets/_looking-glass.scss @@ -1,5 +1,35 @@ /* Looking Glass */ +// common +.lg-dialog { + + StEntry { + @extend %osd_entry; + min-height: to_em(22px); + } + + // override link color since OSD style + $lg_link_color: st-lighten(-st-accent-color, 20%); + .shell-link { + color: $lg_link_color; + &:hover { color: st-lighten($lg_link_color, 10%); } + &:active { color: st-darken($lg_link_color, 10%); } + } + + .actor-link { + @extend %monospace; + color: st-darken($osd_fg_color, 20%); + &:hover { color:$osd_fg_color; } + &:active { color: st-lighten($osd_fg_color, 20%); } + & StIcon { icon-size: 12px; } + } +} + +.lg-completions-text { + @extend %caption; + font-style: italic; +} + // Dialog #LookingGlassDialog { @@ -40,92 +70,166 @@ } .notebook-tab { - @extend %osd_button; + @extend %osd_button_flat; + background-color: transparent; -natural-hpadding: $base_padding * 2; -minimum-hpadding: $base_padding * 2; padding: $base_padding $base_padding * 2; + &:selected { + @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true); + } } - - StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; } - StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; } -} - -.lg-dialog { - - StEntry { - @extend %osd_entry; - min-height: to_em(22px); - } - - .shell-link { - color: $link_color; - &:hover { color: lighten($link_color, 10%); } - &:active { color: darken($link_color, 10%); } - } - - .actor-link { - color: $insensitive_fg_color; - &:hover { color: lighten($insensitive_fg_color, 20%); } - &:active { color: darken($insensitive_fg_color, 20%); } - - & StIcon { icon-size: 12px; } - } -} - -.lg-completions-text { - @extend %caption; - font-style: italic; -} - -.lg-obj-inspector-title { - spacing: $base_padding; -} - -.lg-obj-inspector-button { - border: 1px solid $borders_color; - padding: 4px; - border-radius: $base_border_radius; - &:hover { border: 1px solid $fg_color; } -} - -// Extensions -#lookingGlassExtensions { padding: $base_padding; } - -.lg-extensions-list { - padding: $base_padding; - spacing: $base_padding; -} - -.lg-extension { - @extend %card; -} - -.lg-extension-name { - @extend %heading; -} - -.lg-extension-meta { - spacing: $base_padding; } // Inspector #LookingGlassPropertyInspector { - background: $bg_color; - border: 1px solid $borders_color; - border-radius: $base_border_radius; - padding: $base_padding; -} - -.lg-debug-flag-button { - StLabel { padding: $base_padding, 2 * $base_padding; } + background-color: $osd_bg_color; color: $osd_fg_color; - &:hover { color: lighten($osd_fg_color, 20%); } - &:active { color: darken($osd_fg_color, 20%); } + border-radius: $modal_radius; + border: 1px solid $osd_borders_color; + padding: $base_padding * 2; + + @if $contrast == 'high' { + border-color: $hc_inset_color; + } + + .lg-obj-inspector-title { + @extend %heading; + spacing: $base_margin; + } + + .lg-obj-inspector-close-button, + .lg-obj-inspector-button { + @extend %osd_button; + padding: $base_padding $base_padding * 2; + } + + .lg-obj-inspector-close-button { + margin: $base_margin; + padding: $base_padding; + border-radius: $forced_circular_radius; + > StIcon { + icon-size: $base_icon_size; + } + } } -.lg-debug-flags-header { - padding-top: 2 * $base_padding; + +// Evaluator +#LookingGlassEvaluator { padding: $base_padding; - @extend %title_2; + + .evaluator-results { + @extend %monospace; + spacing: $base_padding; + } +} + +// Window List +#LookingGlassWindows { + + padding: $base_padding; + spacing: $base_padding; + + .lg-window { + @extend %card_common; + @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true); + margin: 0; + padding: $base_padding * 2; + + .lg-window-name { + @extend %heading; + } + + .lg-window-props-box { + .lg-window-props { + } + } + } +} + +// Extensions +#LookingGlassExtensions { + + .lg-extensions-list { + padding: $base_padding; + spacing: $base_padding; + } + + .lg-extension { + @extend %card_common; + @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true); + margin: 0; + spacing: $base_margin; + padding: $base_padding * 2; + + .lg-extension-name { + @extend %heading; + color: $osd_fg_color !important; + } + + .lg-extension-description { + } + + .lg-extension-meta { + spacing: $base_padding * 2; + } + } + + .lg-extensions-none { + @extend %title_4; + color: transparentize($osd_fg_color, 0.5); + } +} + +// Actors +#LookingGlassActors { + padding: $base_padding; + spacing: $base_margin; +} + +// Debug +#LookingGlassDebugFlags { + + .lg-debug-flags-header { + padding: $base_padding; + padding-top: 2 * $base_padding; + @extend %title_4; + } + + .lg-debug-flag-button { + @extend %osd_button; + padding: $base_padding * 1.5 $base_padding * 2; + margin-bottom: $base_padding; + + StLabel { + @extend %monospace; + font-weight: normal !important; + } + + // switch style overrides since lg is OSD style + .toggle-switch { + @if $contrast == 'high' { + background: transparentize(white, .7); + &:hover { + background: transparentize(white, .6); + } + } @else { + background: transparentize(white, .85); + &:hover { + background: transparentize(white, .8); + } + } + &:checked { + background: -st-accent-color; + color: -st-accent-fg-color; + + &:hover { + background-color: st-lighten(-st-accent-color, 5%); + color: st-lighten(-st-accent-fg-color, 5%); + } + } + } + } } diff --git a/gnome-shell-sass/widgets/_message-list.scss b/gnome-shell-sass/widgets/_message-list.scss index 2b3fd61..60cb5bd 100644 --- a/gnome-shell-sass/widgets/_message-list.scss +++ b/gnome-shell-sass/widgets/_message-list.scss @@ -56,7 +56,7 @@ border-style: solid; &:focus { - border-color: transparentize($selected_bg_color, 0.4); + border-color: st-transparentize(-st-accent-color, 0.4); } } } @@ -64,21 +64,19 @@ // message bubbles .message { @extend %card; - padding: 0; + padding: $base_padding; margin: 0; border-radius: $modal_radius; - // subtract side padding to accommodate the close button's border - &:ltr { padding-right:-2px; }; - &:rtl { padding-left:-2px; }; - // message header .message-header { - padding: 0 $scaled_padding; - margin: $base_padding; - margin-bottom: 0; spacing: $base_padding; color: $insensitive_fg_color; + padding:0 $base_padding; + + // side padding to accommodate the close button + &:ltr { padding-right:$base_padding - 2px; }; + &:rtl { padding-left:$base_padding - 2px; }; // header source icon .message-source-icon { @@ -113,17 +111,14 @@ .message-expand-button, .message-close-button { @extend .icon-button; + @extend %notification_button; + border-radius: $forced_circular_radius; // make circular color: $fg_color; - background-color: transparentize($fg_color, .9); padding: 4px; - &:hover { background-color: transparentize($fg_color, .81);} - &:active, - &:active:hover { background-color: transparentize($fg_color, .76);} - &:insensitive { background-color: transparentize($fg_color, .93);} } .message-expand-button { - padding: 6px; + padding: $base_padding; &:ltr { margin-right: $base_padding; } &:rtl { margin-left: $base_padding; } } @@ -132,7 +127,6 @@ // container for message contents .message-box { padding: $base_padding; - margin: $base_padding; margin-top: 0; spacing: $base_padding; @@ -143,12 +137,12 @@ // icon size and color icon-size: $base_icon_size * 3; // 48px - -st-icon-style: symbolic; + // a small symbolic icon on a circle background &.message-themed-icon { - border-radius: $forced_circular_radius; // is circular - background-color: transparentize($fg_color, 0.8); - icon-size: $base_icon_size; + border-radius: $forced_circular_radius; + background-color: transparentize($fg_color, .93); + icon-size: $scalable_icon_size; min-width: $base_icon_size * 3; min-height: $base_icon_size * 3; } @@ -169,6 +163,26 @@ } } } + + // container for message buttons + .message-action-bin { + padding: $base_margin; + spacing: $base_padding; + + // set margin on children + * { + margin: 0 $base_margin; + // remove margins + &:first-child { + &:ltr { margin-left:0;} + &:rtl { margin-right:0;} + } + &:last-child { + &:ltr { margin-right:0;} + &:rtl { margin-left:0;} + } + } + } } // URLs in messages diff --git a/gnome-shell-sass/widgets/_misc.scss b/gnome-shell-sass/widgets/_misc.scss index 35f9dc9..2f1bfc3 100644 --- a/gnome-shell-sass/widgets/_misc.scss +++ b/gnome-shell-sass/widgets/_misc.scss @@ -1,7 +1,7 @@ // Rubberband for select-area screenshots .select-area-rubberband { - background-color: transparentize($selected_bg_color,0.7); - border: 1px solid $selected_bg_color; + background-color: st-transparentize(-st-accent-color,0.7); + border: 1px solid -st-accent-color; } // User icon @@ -48,6 +48,6 @@ /* Tiled window previews */ .tile-preview { - background-color: transparentize($selected_bg_color,0.5); - border: 1px solid $selected_bg_color; + background-color: st-transparentize(-st-accent-color,0.5); + border: 1px solid -st-accent-color; } diff --git a/gnome-shell-sass/widgets/_notifications.scss b/gnome-shell-sass/widgets/_notifications.scss index 0601425..d80cb62 100644 --- a/gnome-shell-sass/widgets/_notifications.scss +++ b/gnome-shell-sass/widgets/_notifications.scss @@ -21,5 +21,5 @@ $notification_banner_width: 34em; } .notification-button { - @extend %bubble_button; + @extend %notification_button; } diff --git a/gnome-shell-sass/widgets/_osd.scss b/gnome-shell-sass/widgets/_osd.scss index 55cf44a..13a77bc 100644 --- a/gnome-shell-sass/widgets/_osd.scss +++ b/gnome-shell-sass/widgets/_osd.scss @@ -36,8 +36,8 @@ $osd_levelbar_height:6px; // Monitor number label .osd-monitor-label { - background-color: $selected_bg_color; - color: $selected_fg_color; + background-color: -st-accent-color; + color: -st-accent-fg-color; border-radius: $modal_radius; font-size: 3em; font-weight: bold; diff --git a/gnome-shell-sass/widgets/_overview.scss b/gnome-shell-sass/widgets/_overview.scss index 117213e..1172c07 100644 --- a/gnome-shell-sass/widgets/_overview.scss +++ b/gnome-shell-sass/widgets/_overview.scss @@ -1,13 +1,9 @@ /* OVERVIEW */ -.controls-manager, .secondary-monitor-workspaces { +.secondary-monitor-workspaces { spacing: $base_padding * 2; } #overviewGroup { background-color: $system_base_color; } - -.overview-controls { - padding-bottom: $base_margin * 8; -} diff --git a/gnome-shell-sass/widgets/_panel.scss b/gnome-shell-sass/widgets/_panel.scss index 80e93f9..2a29eee 100644 --- a/gnome-shell-sass/widgets/_panel.scss +++ b/gnome-shell-sass/widgets/_panel.scss @@ -1,8 +1,8 @@ /* Top Bar */ // a.k.a. the panel -$privacy_indicator_color: if($variant == 'light', $orange_4, $red_3); -$recording_indicator_color: $red_3; +$privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3); +$recording_indicator_color: $red_4; $transparent_panel_fg_color: $light_1; // always white for transparent lock screens $system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview @@ -20,13 +20,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // panel menus .panel-button { @include panel_button(); - -natural-hpadding: 6px; - -minimum-hpadding: 4px; + -natural-hpadding: $base_padding * 2; + -minimum-hpadding: $base_padding; // status area icons .system-status-icon { icon-size: $scalable_icon_size; - padding: 0; + padding: 0 $base_padding; margin: 0 $base_margin; } @@ -39,7 +39,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // reduce margin between icons in combined menu .panel-status-menu-box, .panel-status-indicators-box { - spacing: 0px; + spacing: $base_margin; > .system-status-icon { padding: 0; @@ -47,9 +47,6 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } &#panelActivities { - -natural-hpadding: 10px; - -minimum-hpadding: 8px; - & StBoxLayout { padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion spacing: 5px; @@ -72,10 +69,6 @@ $panel_transition_duration: 250ms; // same as the overview transition duration StIcon { icon-size: $scalable_icon_size; - - &:first-child { - margin-left: 3px; - } } } @@ -93,10 +86,6 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // we want to exclude the do-not-disturb indicator from the background // see _drawing.scss for override details @include panel_button($highlighted_child: true, $child_class: '.clock'); - -natural-hpadding: 0px; - -minimum-hpadding: 0px; - padding-left: 0px; - padding-right: 0px; .clock { // the highlighted child @@ -162,14 +151,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // spacing between power icon and (optional) percentage label .power-status.panel-status-indicators-box { - padding-left: 0px; spacing: 0; - - @if $laptop { - margin-bottom: 2px; - } @else { - margin-left: 0px; - } } // important privacy related indicators @@ -192,11 +174,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration .clock-display-box { spacing: 2px; .clock { - padding-left: 8px; - padding-right: 8px; - } - - StIcon:last-child { - margin-right: 3px; + padding-left: $scaled_padding * 2; + padding-right: $scaled_padding * 2; } } diff --git a/gnome-shell-sass/widgets/_popovers.scss b/gnome-shell-sass/widgets/_popovers.scss index 7f3df1a..fdc4f17 100644 --- a/gnome-shell-sass/widgets/_popovers.scss +++ b/gnome-shell-sass/widgets/_popovers.scss @@ -1,10 +1,11 @@ /* Popovers/Menus */ $menu_bg_color: $bg_color; -$menuitem_bg_color: lighten($menu_bg_color, 4%); + +$menuitem_bg_color: if($variant == 'light', darken($menu_bg_color, 5%), lighten($menu_bg_color, 5%)); $menuitem_border_radius: $base_border_radius * 1.5; -$submenu_bg_color: lighten($menu_bg_color, 7%); +$submenu_bg_color: if($variant == 'light', darken($menu_bg_color, 17%), lighten($menu_bg_color, 13%)); // the popover itself .popup-menu-boxpointer { @@ -33,7 +34,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); // menu items .popup-menu-item { - @include menuitem($bg:$menu_bg_color); + @include menuitem($bg:$menuitem_bg_color); border-radius: $menuitem_border_radius; @@ -75,6 +76,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px; margin-bottom: $base_padding; border: 1px solid transparent; + background-color: $submenu_bg_color; @if $contrast == 'high' { border-color: $hc_inset_color; @@ -83,8 +85,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); // submenu specific styles .popup-menu-item { border-radius: 0; - @include menuitem($bg:$submenu_bg_color); border-top-width:0; + @include menuitem($bg:$submenu_bg_color); &:last-child { border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius; diff --git a/gnome-shell-sass/widgets/_quick-settings.scss b/gnome-shell-sass/widgets/_quick-settings.scss index c43081b..71b1a14 100644 --- a/gnome-shell-sass/widgets/_quick-settings.scss +++ b/gnome-shell-sass/widgets/_quick-settings.scss @@ -64,7 +64,7 @@ &:checked { @extend %default_button; - border-color: $selected_borders_color; + border-color: $accent_borders_color; } &:ltr { @@ -119,8 +119,8 @@ background-color: transparentize($fg_color, 0.8); &.active { - background-color: $selected_bg_color; - color: $selected_fg_color; + background-color: -st-accent-color; + color: -st-accent-fg-color; } // draw hc outline diff --git a/gnome-shell-sass/widgets/_screenshot.scss b/gnome-shell-sass/widgets/_screenshot.scss index 05ecd95..5d10b78 100644 --- a/gnome-shell-sass/widgets/_screenshot.scss +++ b/gnome-shell-sass/widgets/_screenshot.scss @@ -168,18 +168,18 @@ $screenshot_ui_button_red: $red_4; .screenshot-ui-window-selector-window { &:hover { .screenshot-ui-window-selector-window-border { - border-color: darken($selected_bg_color, 15%); + border-color: st-darken(-st-accent-color, 15%); } } &:checked { .screenshot-ui-window-selector-window-border { - border-color: $selected_bg_color; - background-color: transparentize($selected_bg_color, 0.8); + border-color: -st-accent-color; + background-color: st-transparentize(-st-accent-color, 0.8); } .screenshot-ui-window-selector-check { - color: $selected_fg_color; - background-color: $selected_bg_color; + color: -st-accent-fg-color; + background-color: -st-accent-color; } } } diff --git a/gnome-shell-sass/widgets/_search-results.scss b/gnome-shell-sass/widgets/_search-results.scss index 568dbbd..b892055 100644 --- a/gnome-shell-sass/widgets/_search-results.scss +++ b/gnome-shell-sass/widgets/_search-results.scss @@ -48,7 +48,6 @@ .grid-search-results { spacing: $base_padding * 5; - margin:0 $base_margin * 3; } // Search results with icons diff --git a/gnome-shell-sass/widgets/_slider.scss b/gnome-shell-sass/widgets/_slider.scss index f708582..b75c6fb 100644 --- a/gnome-shell-sass/widgets/_slider.scss +++ b/gnome-shell-sass/widgets/_slider.scss @@ -3,25 +3,25 @@ $slider_size: $scalable_icon_size; .slider { + color: if($variant == 'light', $fg_color, darken($fg_color, 9%)); + // slider trough -barlevel-height: 4px; - -barlevel-background-color: transparentize($fg_color, 0.8); //background of the trough - -barlevel-border-width: 2px; - -barlevel-border-color: transparent; // trough border color + -barlevel-background-color: transparentize($fg_color, 0.9); // fill style - -barlevel-active-background-color: $selected_bg_color; - -barlevel-active-border-color: transparent; + -barlevel-active-background-color: -st-accent-color; // overfill style (red in this case) -barlevel-overdrive-color: $destructive_color; - -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: 0; - -slider-handle-border-color: transparent; // because 0 width - // hc style - @if $contrast == 'high' { - -barlevel-background-color: transparentize($fg_color, 0.6); - } + // hc style + @if $contrast == 'high' { + -barlevel-background-color: transparentize($fg_color, 0.6); + } + + &:hover { + color: if($variant == 'light', lighten($fg_color, 7%), $fg_color); + } } diff --git a/gnome-shell-sass/widgets/_switcher-popup.scss b/gnome-shell-sass/widgets/_switcher-popup.scss index bf534b0..9ac607d 100644 --- a/gnome-shell-sass/widgets/_switcher-popup.scss +++ b/gnome-shell-sass/widgets/_switcher-popup.scss @@ -78,5 +78,5 @@ $switcher_radius: $modal_radius + $switcher_padding; // Window cycler highlight .cycler-highlight { - border: 5px solid $selected_bg_color; + border: 5px solid -st-accent-color; } diff --git a/gnome-shell-sass/widgets/_switches.scss b/gnome-shell-sass/widgets/_switches.scss index ef8a7b6..ec79e1f 100644 --- a/gnome-shell-sass/widgets/_switches.scss +++ b/gnome-shell-sass/widgets/_switches.scss @@ -1,18 +1,53 @@ /* Switches */ -// these are equal to the size of the SVG assets -$switch_height: 26px; $switch_width: 46px; +$switch_handle_size: 20px; .toggle-switch { - color: $fg_color; - height: $switch_height; width: $switch_width; - background-size: contain; - background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off-light.svg"),url("resource:///org/gnome/shell/theme/toggle-off.svg")); - &:checked { - background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg")); + border-radius: $forced_circular_radius; + transition-duration: 100ms; + color: $fg_color; + + @if $contrast == 'high' { + background: transparentize(if($variant == 'light', black, white), .7); + + &:hover { + background: transparentize(if($variant == 'light', black, white), .6); + } + } @else { + background: transparentize(if($variant == 'light', black, white), .85); + + &:hover { + background: transparentize(if($variant == 'light', black, white), .8); + } } - & StIcon {icon-size: $base_icon_size;} + StIcon { + icon-size: $base_icon_size; + } + + .handle { + margin: 3px; + width: $switch_handle_size; + height: $switch_handle_size; + border-radius: $forced_circular_radius; + background: if($variant == 'light', white, mix(white, $bg_color, 80%)); + box-shadow: 0 2px 4px transparentize(black, .8); + transition-duration: 100ms; + } + + &:checked { + background: -st-accent-color; + color: -st-accent-fg-color; + + &:hover { + background-color: st-lighten(-st-accent-color, 5%); + color: st-lighten(-st-accent-fg-color, 5%); + } + + .handle { + background: white; + } + } } diff --git a/gnome-shell-sass/widgets/_window-picker.scss b/gnome-shell-sass/widgets/_window-picker.scss index c500a0a..7562663 100644 --- a/gnome-shell-sass/widgets/_window-picker.scss +++ b/gnome-shell-sass/widgets/_window-picker.scss @@ -7,6 +7,19 @@ $window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02); spacing: $base_padding; } +// Window icons +.window-icon { + // styled only with .icon-dropshadow + // but has a different style in high-contrast + @if $contrast == 'high' { + background-color: $osd_bg_color; + padding: $base_padding * 2; + border-radius: $modal_radius; + border: 2px solid $hc_inset_color; + margin: $base_padding * 3; + } +} + // Window titles .window-caption { @extend %tooltip; diff --git a/gnome-shell-sass/widgets/_workspace-switcher.scss b/gnome-shell-sass/widgets/_workspace-switcher.scss index f3e069f..da8d77f 100644 --- a/gnome-shell-sass/widgets/_workspace-switcher.scss +++ b/gnome-shell-sass/widgets/_workspace-switcher.scss @@ -1,6 +1,6 @@ /* Workspace Switcher */ -$ws_indicator_height: 48px; +$ws_indicator_height: 32px; $ws_dot_active: $ws_indicator_height / 3; $ws_dot_inactive: $ws_indicator_height / 6; diff --git a/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/gnome-shell-sass/widgets/_workspace-thumbnails.scss index e9b9cea..f7e7e4b 100644 --- a/gnome-shell-sass/widgets/_workspace-thumbnails.scss +++ b/gnome-shell-sass/widgets/_workspace-thumbnails.scss @@ -27,6 +27,6 @@ // selected indicator .workspace-thumbnail-indicator { - border: 3px solid $selected_bg_color; + border: 3px solid -st-accent-color; border-radius: $base_border_radius; } diff --git a/toggle-off-light.svg b/toggle-off-light.svg deleted file mode 100644 index aa2385b..0000000 --- a/toggle-off-light.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/toggle-off.svg b/toggle-off.svg deleted file mode 100644 index 43cb59f..0000000 --- a/toggle-off.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/toggle-on-light.svg b/toggle-on-light.svg deleted file mode 100644 index 778f922..0000000 --- a/toggle-on-light.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/toggle-on.svg b/toggle-on.svg deleted file mode 100644 index 43c221e..0000000 --- a/toggle-on.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file