basilisk but actually + cleanup

home/.basilisk/waybar/style.scss

@@ -0,0 +1,225 @@
+$iiv: #000;
+$iv: #111;
+$v: #0bb;
+$vi: #aaa;
+$vii: #fff;
+$a: #f53;
+
+* {
+    font-family: 'Noto Sans Mono', 'Material Symbols Outlined', sans-serif;
+    font-size: 12px;
+    border-radius: 0;
+}
+
+window#waybar {
+    // background: linear-gradient(to left, transparentize(#000, 0.6), transparentize(#000, 0));
+    background: #0000;
+    color: #ffffff;
+    transition-property: background-color;
+    transition-duration: .5s;
+
+    padding: 4px;
+    // padding-right: 0;
+    // padding: 2px;
+
+/*     padding: 6px; */
+}
+
+window#waybar.hidden {
+    opacity: 0.2;
+}
+
+// #waybar > * {
+// }
+
+button {
+    padding: 0;
+}
+
+.box {
+}
+
+#waybar > box {
+    // margin: 4px;
+    // margin-right: 0;
+
+    // background: linear-gradient(to right, transparentize(#000, 0), transparentize(#000, 1));
+
+    padding: 4px;
+    // border-right: 1px solid $iv;
+    background-color: transparentize($iiv, 0.1);
+}
+
+.modules-right, .modules-left {
+
+
+    // background: linear-gradient(to bottom, lighten($iv, 10%), darken($iv, 10%));
+
+    // background:
+
+    // border-top-color: transparentize(lighten($iiv, 15%), 0.6);
+    // border-bottom-color: transparentize(darken($iiv, 15%), 0.5);
+
+    .module {
+        margin: 3px 0;
+        padding: 3px;
+        // padding: 0;
+        border: 1px solid transparentize(#fff, 0.9);
+        border-top: 1px solid transparentize(#fff, 0.8);
+        border-bottom: 1px solid transparentize(#666, 0.9);
+        // background-color: transparentize($iiv, 0.2);
+        background: $iv;
+        color: $vii;
+    }
+
+    & > :last-child .module {
+        margin-bottom: 0;
+        // padding-bottom: 6px;
+    }
+
+    & > :first-child .module {
+        margin-top: 0;
+
+        // padding-top: 6px;
+    }
+}
+
+#window {
+    // padding: 0;
+
+}
+
+#pulseaudio.main, #bluetooth, #custom-power, #custom-rofication {
+    font-size: 20px;
+    font-weight: 300;
+}
+
+#custom-power, #custom-rofication {
+    padding-top: 4px;
+    padding-bottom: 2px; // Cheat squareness
+}
+
+#audio {
+    #pulseaudio.preview {
+        border: 0;
+        padding: 0;
+        margin: 0;
+        background: $iiv;
+        color: #0000;
+        transition: .2s color;
+    }
+
+    &:hover {
+        #pulseaudio.main {
+            border-top: 0;
+            margin-top: 0;
+        }
+
+        #pulseaudio.preview {
+            background: transparent;
+            color: $vi;
+        }
+    }
+}
+
+#pulseaudio-slider {
+    padding: 0;
+    margin: 0;
+    border: 0;
+}
+#pulseaudio-slider slider {
+min-height: 0px;
+min-width: 0px;
+opacity: 0;
+background-image: none;
+border: none;
+box-shadow: none;
+}
+#pulseaudio-slider trough {
+min-height: 100px;
+min-width: 28px;
+background: $iiv;
+border: 1px solid transparentize(#fff, 0.9);
+border-top: 1px solid transparentize(#fff, 0.8);
+border-bottom: 0;
+}
+#pulseaudio-slider highlight {
+min-width: 10px;
+background: $iv;
+border: 1px solid transparentize(#fff, 0.9);
+border-top: 1px solid transparentize(#fff, 0.8);
+border-bottom: 0
+}
+
+.module button:hover {
+    background: #ffffff;
+    transition-property: background-color;
+    transition-duration: .5s;
+}
+
+.module#workspaces {
+
+    padding: 0;
+    // border: 0;
+    background: $iiv;
+    font-size: 4px;
+
+    button {
+        // border-top: 2px solid transparentize(#fff, 0.9);
+        padding: 0;
+        margin: 0;
+        transition: .15s padding;
+        color: $vii;
+
+        &:hover {
+            background: inherit;
+            border: 0;
+            padding: 18px 0;
+        }
+    }
+
+    button.empty {
+        color: $vi;
+    }
+
+    button.focused {
+        padding: 18px 0;
+        background: $iv;
+        color: $v;
+
+        &:not(:first-child) {
+            border-top: 1px solid transparentize(#fff, 0.9);
+        }
+
+        &:not(:last-child) {
+            border-bottom: 1px solid transparentize(#666, 0.9);
+        }
+    }
+}
+
+// #tray {
+//     border-bottom: 0;
+//     margin-bottom: 0;
+// }
+// #bluetooth {
+//     margin-top: 0;
+//     border-top: 0;
+// }
+
+#clock {
+    font-size: 18px;
+}
+.module#clock.hour {
+    color: $v;
+    padding-bottom: 0;
+    margin-bottom: 0;
+    border-bottom: 0;
+    font-weight: 600;
+}
+.module#clock.minutes {
+    background: $iiv;
+    padding-top: 0;
+    margin-top: 0;
+    border-top: 0;
+    font-weight: 300;
+}