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

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

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;
+}

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 {