From 63ed38b4c2d3e87bbdcfd42ebdc6d1d2464d6cc5 Mon Sep 17 00:00:00 2001
From: EliverLara <eliverlara@gmail.com>
Date: Sat, 13 Jan 2024 16:27:28 -0600
Subject: [PATCH] Gnome 45: Improve level bars appearance

---
 gtk-4.0/gtk-dark.css             | 77 ++++++++++++++--------------
 gtk-4.0/gtk.css                  | 77 ++++++++++++++--------------
 gtk-4.0/widgets/_level-bars.scss | 86 +++++++++++++++++++-------------
 3 files changed, 128 insertions(+), 112 deletions(-)

diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css
index 9e2cfc2..2a5414f 100755
--- a/gtk-4.0/gtk-dark.css
+++ b/gtk-4.0/gtk-dark.css
@@ -2642,48 +2642,47 @@ infobar {
   color: #b84f59;
   background-color: transparent; }
 
-/*************
- * Level Bar *
- *************/
-levelbar block {
-  min-width: 32px;
-  min-height: 6px; }
-levelbar.vertical block {
-  min-width: 6px;
+levelbar.horizontal trough > block {
+  min-height: 5px;
+  border-radius: 5px; }
+  levelbar.horizontal trough > block:dir(rtl) {
+    border-radius: 0 5px 5px 0; }
+  levelbar.horizontal trough > block:dir(ltr) {
+    border-radius: 5px 0 0 5px; }
+  levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full {
+    border-radius: 5px; }
+levelbar.horizontal.discrete trough > block {
+  min-height: 2px;
+  margin: 1px;
+  min-width: 24px;
+  border-radius: 0; }
+  levelbar.horizontal.discrete trough > block:first-child {
+    border-radius: 2px 0 0 2px; }
+  levelbar.horizontal.discrete trough > block:last-child {
+    border-radius: 0 2px 2px 0; }
+levelbar.vertical trough > block {
+  min-width: 5px;
+  border-radius: 5px; }
+levelbar.vertical.discrete > trough > block {
+  min-width: -2px;
+  margin: 1px 0;
   min-height: 32px; }
-levelbar:backdrop {
-  transition: 200ms ease-out; }
-levelbar trough {
-  padding: 3px;
-  border-radius: 3px;
-  background-color: rgba(255, 255, 255, 0.2);
-  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }
-  levelbar trough:backdrop {
-    background-color: rgba(255, 255, 255, 0.06);
-    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }
-levelbar.horizontal.discrete block {
-  margin: 0 1px; }
-levelbar.vertical.discrete block {
-  margin: 1px 0; }
-levelbar block {
-  border-radius: 2px; }
-  levelbar block:backdrop {
-    box-shadow: none; }
-  levelbar block.low {
+levelbar > trough {
+  padding: 0; }
+levelbar > trough > block {
+  border: 1px solid; }
+  levelbar > trough > block.low {
+    border-color: #c3674a;
     background-color: #c3674a; }
-    levelbar block.low:backdrop {
-      border-color: #c3674a; }
-  levelbar block.high, levelbar block:not(.empty) {
-    background-color: #5e81ac; }
-    levelbar block.high:backdrop, levelbar block:not(.empty):backdrop {
-      border-color: #5e81ac; }
-  levelbar block.full {
+  levelbar > trough > block.high, levelbar > trough > block:not(.empty) {
+    border-color: #81a1c1;
+    background-color: #81a1c1; }
+  levelbar > trough > block.full {
+    border-color: #49688e;
     background-color: #49688e; }
-    levelbar block.full:backdrop {
-      border-color: #49688e; }
-  levelbar block.empty {
-    background-color: rgba(0, 0, 0, 0.35);
-    box-shadow: none; }
+  levelbar > trough > block.empty {
+    background-color: #434c5e;
+    border-color: #434c5e; }
 
 /*********
  * Links *
diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css
index 4eaaf67..41a2040 100755
--- a/gtk-4.0/gtk.css
+++ b/gtk-4.0/gtk.css
@@ -2642,48 +2642,47 @@ infobar {
   color: #b84f59;
   background-color: transparent; }
 
-/*************
- * Level Bar *
- *************/
-levelbar block {
-  min-width: 32px;
-  min-height: 6px; }
-levelbar.vertical block {
-  min-width: 6px;
+levelbar.horizontal trough > block {
+  min-height: 5px;
+  border-radius: 5px; }
+  levelbar.horizontal trough > block:dir(rtl) {
+    border-radius: 0 5px 5px 0; }
+  levelbar.horizontal trough > block:dir(ltr) {
+    border-radius: 5px 0 0 5px; }
+  levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full {
+    border-radius: 5px; }
+levelbar.horizontal.discrete trough > block {
+  min-height: 2px;
+  margin: 1px;
+  min-width: 24px;
+  border-radius: 0; }
+  levelbar.horizontal.discrete trough > block:first-child {
+    border-radius: 2px 0 0 2px; }
+  levelbar.horizontal.discrete trough > block:last-child {
+    border-radius: 0 2px 2px 0; }
+levelbar.vertical trough > block {
+  min-width: 5px;
+  border-radius: 5px; }
+levelbar.vertical.discrete > trough > block {
+  min-width: -2px;
+  margin: 1px 0;
   min-height: 32px; }
-levelbar:backdrop {
-  transition: 200ms ease-out; }
-levelbar trough {
-  padding: 3px;
-  border-radius: 3px;
-  background-color: rgba(255, 255, 255, 0.2);
-  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }
-  levelbar trough:backdrop {
-    background-color: rgba(255, 255, 255, 0.06);
-    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }
-levelbar.horizontal.discrete block {
-  margin: 0 1px; }
-levelbar.vertical.discrete block {
-  margin: 1px 0; }
-levelbar block {
-  border-radius: 2px; }
-  levelbar block:backdrop {
-    box-shadow: none; }
-  levelbar block.low {
+levelbar > trough {
+  padding: 0; }
+levelbar > trough > block {
+  border: 1px solid; }
+  levelbar > trough > block.low {
+    border-color: #c3674a;
     background-color: #c3674a; }
-    levelbar block.low:backdrop {
-      border-color: #c3674a; }
-  levelbar block.high, levelbar block:not(.empty) {
-    background-color: #5e81ac; }
-    levelbar block.high:backdrop, levelbar block:not(.empty):backdrop {
-      border-color: #5e81ac; }
-  levelbar block.full {
+  levelbar > trough > block.high, levelbar > trough > block:not(.empty) {
+    border-color: #81a1c1;
+    background-color: #81a1c1; }
+  levelbar > trough > block.full {
+    border-color: #49688e;
     background-color: #49688e; }
-    levelbar block.full:backdrop {
-      border-color: #49688e; }
-  levelbar block.empty {
-    background-color: rgba(0, 0, 0, 0.35);
-    box-shadow: none; }
+  levelbar > trough > block.empty {
+    background-color: #434c5e;
+    border-color: #434c5e; }
 
 /*********
  * Links *
diff --git a/gtk-4.0/widgets/_level-bars.scss b/gtk-4.0/widgets/_level-bars.scss
index 9aa645c..f580b94 100644
--- a/gtk-4.0/widgets/_level-bars.scss
+++ b/gtk-4.0/widgets/_level-bars.scss
@@ -1,62 +1,80 @@
-/*************
- * Level Bar *
- *************/
+$_levelbar_size: 5px;
+$_levelbar_border_radius: 5px;
+
 levelbar {
-  block {
-    min-width: 32px;
-    min-height: 6px;
-  }
+  &.horizontal {
+    trough > block {
+      min-height: $_levelbar_size;
+      border-radius: $_levelbar_border_radius;
 
-  &.vertical block {
-    min-width: 6px;
-    min-height: 32px;
-  }
+      &:dir(rtl) {
+        border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0;
+      }
 
-  &:backdrop { transition: $backdrop_transition; }
+      &:dir(ltr) {
+        border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius;
+      }
 
-  trough {
-    padding: 3px;
-    border-radius: 3px;
-    background-color: if($variant == 'light' ,transparentize(white,0.2),transparentize(white,0.8));
-    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
+      &.empty,&.full {
+        border-radius: $_levelbar_border_radius;
+      }
+    }
 
-    &:backdrop {
-      background-color: if($variant == 'light' ,transparentize(white,0.4),transparentize(white,0.94));
-      box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
+    // segmented level bar
+    &.discrete {
+      trough > 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;
+        }
+      }
     }
   }
 
-  &.horizontal.discrete block { margin: 0 1px; }
+  &.vertical {
+    trough > block {
+      min-width: $_levelbar_size;
+      border-radius: $_levelbar_border_radius;
+    }
 
-  &.vertical.discrete block { margin: 1px 0; }
+    &.discrete > trough > block {
+      min-width: $_levelbar_size - 7px;
+      margin: 1px 0;
+      min-height: 32px;
+    }
+  }
 
-  block {
-    border-radius: 2px;
+  > trough {
+    padding: 0;
+  }
 
-    &:backdrop { box-shadow: none; }
+  // level bar colours
+  > trough > block {
+    border: 1px solid;
 
     &.low {
+      border-color: $warning_color;
       background-color: $warning_color;
-
-      &:backdrop { border-color: $warning_color; };
     }
 
     &.high,
     &:not(.empty) {
-      background-color: $cyan;
-
-      &:backdrop { border-color: $cyan; }
+      border-color: $nord9;
+      background-color: $nord9;
     }
 
     &.full {
+      border-color: $success_color;
       background-color: $success_color;
-
-      &:backdrop { border-color: $success_color; };
     }
 
     &.empty {
-      background-color:  if($variant == 'light' ,transparentize(black, 0.86),transparentize(black,0.65));
-      box-shadow: none;
+      background-color: lighten($base_color, 10%);
+      border-color: lighten($base_color, 10%);
     }
   }
 }