[gnome-shell/wip/snwh/quicksettings-style-followups] style: CSS follow ups for quicksettings




commit 5de3491df33ce6df0fc170dc29702e209e06736d
Author: Sam Hewitt <sam snwh org>
Date:   Thu Aug 4 12:04:12 2022 -0230

    style: CSS follow ups for quicksettings
    
    - some padding adjustments
    - add proper focus style for :checked buttons
    - popover radii adjustments
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2401>

 data/theme/gnome-shell-sass/_drawing.scss                |  2 +-
 data/theme/gnome-shell-sass/widgets/_popovers.scss       |  4 ++--
 data/theme/gnome-shell-sass/widgets/_quick-settings.scss | 16 ++++++++++------
 3 files changed, 13 insertions(+), 9 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 217aac9926..bdb2fb261c 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -200,7 +200,7 @@
     background-color: $selected_bg_color;
     color: $selected_fg_color;
     &:focus {
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
+      box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%);
     }
     &:hover, &:focus { 
       background-color: lighten($selected_bg_color, 5%);
diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss 
b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index 4a86dd3fc1..3b1d5edc0c 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -19,7 +19,7 @@
 // popover content
 .popup-menu-content {
   padding: $base_padding;
-  border-radius: $modal_radius - 2px;
+  border-radius: $modal_radius*1.25;
   border: 1px solid $borders_edge;
   box-shadow: 0 2px 4px 0 $shadow_color;
   background-color: $bg_color;
@@ -28,7 +28,7 @@
 // menu items
 .popup-menu-item {
   padding: $base_padding*1.5 $base_padding*2;
-  border-radius: $base_border_radius;
+  border-radius: $base_border_radius*1.5;
   spacing: $base_padding;
   transition-duration: 100ms;
   background-color: transparent;
diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss 
b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 53325fa503..1324865904 100644
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -11,7 +11,7 @@
   border-radius: 99px;
   min-width: 11.5em;
   max-width: 11.5em;
-  min-height: 48px;
+  min-height: 44px;
 
   &:checked { @include button(default); }
 
@@ -40,7 +40,9 @@
 }
 
 .quick-slider {
-  padding: $base_padding;
+  padding: 0 $base_padding;
+
+  & > StBoxLayout { spacing: $base_padding; }
 
   .slider-bin {
     &:focus {@include button(focus);}
@@ -53,16 +55,18 @@
 }
 
 .quick-toggle-menu {
-  @include card();
-  padding: 1.5 * $base_padding;
+  background-color: $card_bg_color;
+  border-radius: $base_border_radius*2.75;
+  padding: $base_padding*2.75;
+  margin: 0 $base_padding*2.75;
 
   & .header {
     spacing-rows: 0.5 * $base_padding;
-    spacing-columns: $base_padding;
+    spacing-columns: $base_padding*2;
     padding-bottom: 2 * $base_padding;
 
     & .icon {
-      icon-size: $large_icon_size;
+      icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
       border-radius: 999px;
       padding: 1.5 * $base_padding;
       background-color: lighten($bg_color, 10%);


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]