rewrite ui in hy, with python astal bindings

2025-02-14 01:56:09 -08:00
parent afc9ff29e7
commit ad3e377963
27 changed files with 1106 additions and 0 deletions
--- a/style/widgets/bar.scss
+++ b/style/widgets/bar.scss
@ -0,0 +1,119 @@
+$height: 50px;
+
+bar {
+  background: transparent;
+}
+
+centerbox {
+  > box.left {
+    box.workspaces {
+      min-height: $height;
+      background: $bg;
+      padding: 5px;
+      padding-top: 15px;
+
+      box > button {
+        min-width: 10px;
+        min-height: 10px;
+        margin: 5px;
+        background-color: $bg-alt-1;
+
+        &.occupied {
+          background-color: $bg-alt-2;
+        }
+
+        &.focused {
+          background-color: $hl;
+        }
+      }
+
+    }
+
+    stack > box.player {
+      min-width: 250px;
+      min-height: 60px;
+      background-position: 50% 50%;
+      background-size: cover;
+      border: 4px solid #161616;
+
+      > box {
+        > button {
+          margin: 3px 10px;
+        }
+      }
+
+      > .media-progress {
+        min-width: 242px;
+        min-height: 2px;
+        background: transparent;
+
+        trough {
+          min-height: 2px;
+          background: $bg-alt-1;
+        }
+
+        highlight {
+          min-height: 2px;
+          background: $mpd-progress-primary;
+        }
+      }
+    }
+  }
+
+  > box.right {
+    min-height: $height;
+    background: $bg;
+
+    box.sliders {
+      margin: 5px;
+      box.volume-slider {
+        > button {
+          font-size: 20px; 
+          margin: 5px;
+        }
+        
+        > .volume-slider { /* selecting this as `slider` doesn't work, for some reason.*/
+          min-width: 120px;
+          min-height: 10px;
+
+          & trough {
+            min-height: 10px;
+            min-width: 120px;
+            background: $bg-alt-1;
+          }
+
+          & highlight {
+            background: $hl-alt-1;
+          }
+        }
+      } 
+    }
+
+    .battery-container {
+      padding-left: 10px;
+      padding-right: 10px;
+      .battery-dial {
+        min-width: 40px;
+        min-height: 40px;
+        @include bar-dial($battery-dial-bg, $battery-dial-fg);
+      }    
+    }  
+
+    separator {
+      background: $bg-alt-1;
+      padding: 1px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+
+    box.clock {
+      margin: 10px;
+      background: $bg;
+      
+      .datetime {
+        margin: 1px;
+        font-size: 10pt;
+      }
+    }
+  }
+}