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 @@
-
-
-
-
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 @@
-
-
-
-
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