adwaita: level bar refinements

 - shave a few pixels off large level bar
 - thinner discrete level bar

3 files changed, 46 insertions, 17 deletions

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index be63776080..18d16ec607 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3545,7 +3545,7 @@ progressbar {
  * Level Bar *
  *************/
 
-$levelbar_size: 12px;
+$levelbar_size: 9px;
 $levelbar_border_radius: 3px;
 
 levelbar {
@@ -3567,11 +3567,32 @@ levelbar {
       }
     }
 
-    &.discrete block {
-      min-height: $levelbar_size - 7px;
-      margin: 0 1px;
-      min-width: 32px;
-      border-radius: $levelbar_border_radius;
+    // segmented level bar
+    &.discrete {
+      // trough
+      trough {
+        // border: 1px solid $borders_color;
+        // padding: 1px;
+        // padding-right:0;
+        // background-color: $base_color;
+        // border-radius: 7px;
+        // box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.05);
+        // &:dir(rtl) {padding-left:0;}
+        // &:dir(ltr) {padding-right:0;}
+      }
+
+      // block
+      block {
+        min-height: 2px;
+        margin: 1px;
+        min-width: 24px;
+        border-radius:0;
+        &:first-child {border-radius: 2px 0 0 2px;}
+        &:last-child {
+          border-radius: 0 2px 2px 0;
+          // margin-right:0;
+        }
+      }
     }
   }
 
@@ -3599,13 +3620,13 @@ levelbar {
   // level bar colours
   block {
     border: 1px solid;
+    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.2);
 
     &.low {
       border-color: if($variant == 'light', darken($warning_color, 10%), $borders_color);
       background-color: $warning_color;
 
       &:backdrop { border-color:if($variant == 'light', $warning_color, $borders_color); };
-
     }
 
     &.high,
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 5e8fbfe8f0..f39e58760a 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1549,7 +1549,7 @@ progressbar.osd progress { border-style: none; border-radius: 0; }
 progressbar trough.empty progress { all: unset; }
 
 /************* Level Bar * */
-levelbar.horizontal block { min-height: 12px; border-radius: 3px; }
+levelbar.horizontal block { min-height: 9px; border-radius: 3px; }
 
 levelbar.horizontal block:dir(rtl) { border-radius: 0 3px 3px 0; }
 
@@ -1557,17 +1557,21 @@ levelbar.horizontal block:dir(ltr) { border-radius: 3px 0 0 3px; }
 
 levelbar.horizontal block.empty, levelbar.horizontal block.full { border-radius: 3px; }
 
-levelbar.horizontal.discrete block { min-height: 5px; margin: 0 1px; min-width: 32px; border-radius: 3px; }
+levelbar.horizontal.discrete block { min-height: 2px; margin: 1px; min-width: 24px; border-radius: 0; }
 
-levelbar.vertical block { min-width: 12px; border-radius: 3px; }
+levelbar.horizontal.discrete block:first-child { border-radius: 2px 0 0 2px; }
 
-levelbar.vertical.discrete block { min-width: 5px; margin: 1px 0; min-height: 32px; }
+levelbar.horizontal.discrete block:last-child { border-radius: 0 2px 2px 0; }
+
+levelbar.vertical block { min-width: 9px; border-radius: 3px; }
+
+levelbar.vertical.discrete block { min-width: 2px; margin: 1px 0; min-height: 32px; }
 
 levelbar:backdrop { transition: 200ms ease-out; }
 
 levelbar trough { padding: 0; }
 
-levelbar block { border: 1px solid; }
+levelbar block { border: 1px solid; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2); }
 
 levelbar block.low { border-color: #1b1b1b; background-color: #f57900; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index e8b7613ad6..947de1b248 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1565,7 +1565,7 @@ progressbar.osd progress { border-style: none; border-radius: 0; }
 progressbar trough.empty progress { all: unset; }
 
 /************* Level Bar * */
-levelbar.horizontal block { min-height: 12px; border-radius: 3px; }
+levelbar.horizontal block { min-height: 9px; border-radius: 3px; }
 
 levelbar.horizontal block:dir(rtl) { border-radius: 0 3px 3px 0; }
 
@@ -1573,17 +1573,21 @@ levelbar.horizontal block:dir(ltr) { border-radius: 3px 0 0 3px; }
 
 levelbar.horizontal block.empty, levelbar.horizontal block.full { border-radius: 3px; }
 
-levelbar.horizontal.discrete block { min-height: 5px; margin: 0 1px; min-width: 32px; border-radius: 3px; }
+levelbar.horizontal.discrete block { min-height: 2px; margin: 1px; min-width: 24px; border-radius: 0; }
 
-levelbar.vertical block { min-width: 12px; border-radius: 3px; }
+levelbar.horizontal.discrete block:first-child { border-radius: 2px 0 0 2px; }
 
-levelbar.vertical.discrete block { min-width: 5px; margin: 1px 0; min-height: 32px; }
+levelbar.horizontal.discrete block:last-child { border-radius: 0 2px 2px 0; }
+
+levelbar.vertical block { min-width: 9px; border-radius: 3px; }
+
+levelbar.vertical.discrete block { min-width: 2px; margin: 1px 0; min-height: 32px; }
 
 levelbar:backdrop { transition: 200ms ease-out; }
 
 levelbar trough { padding: 0; }
 
-levelbar block { border: 1px solid; }
+levelbar block { border: 1px solid; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2); }
 
 levelbar block.low { border-color: #c26000; background-color: #f57900; }