From e28215f38fef2320dd801f1d64eb408be664f462 Mon Sep 17 00:00:00 2001
From: Jakub Steiner <jimmac@gmail.com>
Date: Tue, 16 Jul 2024 09:40:53 +0200
Subject: [PATCH] window-list: Update styling

- Contemporary look. Fewer borders, thinner outlines for workspace indicators
- Lacks the designed unfocused window separators.
- Relies on https://gitlab.gnome.org/GNOME/gnome-shell-extensions/-/merge_requests/328

Fixes https://gitlab.gnome.org/GNOME/gnome-shell-extensions/-/issues/421

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell-extensions/-/merge_requests/330>
---
 extensions/window-list/stylesheet-dark.css    | 22 ++++----
 extensions/window-list/stylesheet-light.css   | 55 ++++++++++++-------
 .../workspace-indicator/stylesheet-dark.css   |  4 +-
 3 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/extensions/window-list/stylesheet-dark.css b/extensions/window-list/stylesheet-dark.css
index 9e024f2c..b9087971 100644
--- a/extensions/window-list/stylesheet-dark.css
+++ b/extensions/window-list/stylesheet-dark.css
@@ -34,8 +34,8 @@
 }
 
 .window-button > StWidget {
-  color: #bbb;
-  background-color: #1d1d1d;
+  color: #fff;
+  background-color: transparent;
   border-radius: 4px;
   padding: 3px 6px 1px;
   transition: 100ms ease;
@@ -47,25 +47,25 @@
 }
 
 .window-button:hover > StWidget {
-  color: #fff;
   background-color: #303030;
 }
 
 .window-button:active > StWidget,
 .window-button:focus > StWidget {
-  color: #fff;
-  background-color: #3f3f3f;
+  background-color: st-lighten(#303030, 5%);
 }
 
 .window-button.focused > StWidget {
-  color: #fff;
-  background-color: #3f3f3f;
+  background-color: #5b5b5b;
 }
 
-.window-button.focused:active > StWidget {
-  color: #fff;
-  background-color: #3f3f3f;
-}
+  .window-button.focused:hover > StWidget {
+    background-color: st-lighten(#5b5b5b, 5%);
+  }
+
+  .window-button.focused:active > StWidget {
+    background-color: st-lighten(#5b5b5b, 10%);
+  }
 
 .window-button.minimized > StWidget {
   color: #666;
diff --git a/extensions/window-list/stylesheet-light.css b/extensions/window-list/stylesheet-light.css
index 93a96581..375fd1bf 100644
--- a/extensions/window-list/stylesheet-light.css
+++ b/extensions/window-list/stylesheet-light.css
@@ -15,13 +15,10 @@
   }
 
   .bottom-panel .window-button > StWidget {
-    color: #2e3436;
-    background-color: #eee;
     border-radius: 3px;
     padding: 3px 6px 1px;
     box-shadow: none;
     text-shadow: none;
-    border: 1px solid rgba(0,0,0,0.2);
   }
 
   .bottom-panel .window-button > StWidget {
@@ -29,25 +26,43 @@
     max-width: 18.75em;
   }
 
-  .bottom-panel .window-button:hover > StWidget {
-    background-color: #f9f9f9;
+ .window-button > StWidget {
+  color: #000;
+  background-color: transparent;
+}
+
+.window-button > StWidget {
+  -st-natural-width: 18.75em;
+  max-width: 18.75em;
+}
+
+.window-button:hover > StWidget {
+  background-color: st-darken(#eee,5%);
+}
+
+.window-button:active > StWidget,
+.window-button:focus > StWidget {
+  background-color: st-darken(#eee, 10%);
+}
+
+.window-button.focused > StWidget {
+  background-color: st-darken(#eee,15%);
+}
+
+  .window-button.focused:hover > StWidget {
+    background-color: st-darken(#eee, 20%);
   }
 
-  .bottom-panel .window-button:active > StWidget,
-  .bottom-panel .window-button:focus > StWidget {
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+  .window-button.focused:active > StWidget {
+    background-color: st-darken(#eee, 25%);
   }
 
-  .bottom-panel .window-button.focused > StWidget {
-    background-color: #ccc;
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
-  }
+.window-button.minimized > StWidget {
+  color: #aaa;
+  background-color: #f9f9f9;
+}
 
-  .bottom-panel .window-button.focused:hover > StWidget {
-    background-color: #e9e9e9;
-  }
-
-  .bottom-panel .window-button.minimized > StWidget {
-    color: #888;
-    box-shadow: none;
-  }
+.window-button.minimized:active > StWidget {
+  color: #aaa;
+  background-color: #f9f9f9;
+}
diff --git a/extensions/workspace-indicator/stylesheet-dark.css b/extensions/workspace-indicator/stylesheet-dark.css
index b4a716b8..f87770da 100644
--- a/extensions/workspace-indicator/stylesheet-dark.css
+++ b/extensions/workspace-indicator/stylesheet-dark.css
@@ -33,7 +33,7 @@
 
 .workspace-indicator-menu .workspace,
 .workspace-indicator .workspace {
-  border: 2px solid transparent;
+  border: 1px solid transparent;
   border-radius: 4px;
   background-color: #3f3f3f;
 }
@@ -49,7 +49,7 @@
 
 .workspace-indicator-menu .workspace.active,
 .workspace-indicator .workspace.active {
-  border-color: #9f9f9f;
+  border-color: #fff;
 }
 
 .workspace-indicator-window-preview {