feat(eww): finish most scss of quick settings

config/eww/quick-settings/quick-settings.scss

@@ -51,13 +51,14 @@
   font-size: 30px;
   margin-left: 15px;
   margin-right: 10px;
+  min-width: 50px;
 }
 
 .grid-chev {
-  margin-left: -10px;
+  margin-left: 0px;
 
   font-size: 40px;
-  margin-right: 0px;
+  margin-right: 5px;
 }
 
 .button-grid {
@@ -74,12 +75,13 @@
 .button-row {
   min-height: 70px;
   min-width: 450px;
+  margin-left: 20px;
 }
 
 .grid-button {
   min-height: 65px;
   min-width: 70px;
-  margin: 15px;
+  margin: 5px;
 }
 
 .left-part {
@@ -93,17 +95,71 @@
 
 .right-part {
   background: #1b1b1b;
-  border-top-right-radius: 15px;
-  border-bottom-right-radius: 15px;
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px;
   border-right: 2px solid $contrastbg;
   border-top: 2px solid $contrastbg;
   border-bottom: 2px solid $contrastbg;
 }
 
-.left-part:hover,
 .right-part:hover {
   color: $contrastbg;
   border: 2px solid $contrastbg;
-  border-radius: 7px;
+  border-top-left-radius: 7px;
+  border-bottom-left-radius: 7px;
   transition: all 0.5s ease-in-out;
 }
+
+.left-part:hover {
+  color: $contrastbg;
+  border: 2px solid $contrastbg;
+  border-top-right-radius: 7px;
+  border-bottom-right-radius: 7px;
+  transition: all 0.5s ease-in-out;
+}
+
+.slider-box {
+  min-height: 100px;
+  min-width: 470px;
+  background-color: $bgfull;
+  border-top: 2px solid $contrastbg;
+  border-bottom: 2px solid $contrastbg;
+  border-radius: 15px;
+  margin-top: 30px;
+
+  .slider {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .slider-label {
+    font-size: 30px;
+    min-width: 30px;
+  }
+
+  scale {
+    min-height: 55px;
+    min-width: 400px;
+    margin-left: 18px;
+
+    highlight {
+      margin: 0px;
+      background-color: #79659f;
+      border-radius: 2em;
+    }
+
+    trough {
+      background-color: #363847;
+      border-radius: 2em;
+    }
+
+    slider {
+      margin: -4px;
+      min-width: 20px;
+      min-height: 20px;
+      background: #3e4153;
+      border-radius: 100%;
+      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+    }
+  }
+}

config/eww/quick-settings/quick-settings.yuck

@@ -81,6 +81,8 @@
             :width 0
             :height 0
             :halign "center"
+            :style "margin-top: 15px;
+                    margin-bottom: 7px"
         ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
         (box  :class "grid-button"
               :orientation "h"
@@ -90,10 +92,32 @@
 
           (eventbox :class "left-part"
                     :cursor "pointer"
+                    :onclick "notify-send 'set this up moron'"
+
             (label  :text " 󰖩 "
                     :class "grid-label"
             )
           )
+          (eventbox :class "right-part"
+                    :cursor "pointer"
+                    :onclick "nm-connection-editor &"
+
+            (label  :text " " :class "grid-chev")
+          )
+        )
+        ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+        (box  :class "grid-button"
+              :orientation "h"
+              :space-evenly false
+              :width 0
+              :height 0
+
+          (eventbox :class "left-part"
+                    :cursor "pointer"
+            (label  :text " 󰂯 "
+                    :class "grid-label"
+            )
+          )
           (eventbox :class "right-part"
                     :cursor "pointer"
             (label  :text " " :class "grid-chev")
@@ -108,43 +132,7 @@
 
           (eventbox :class "left-part"
                     :cursor "pointer"
-            (label  :text " 󰖩 "
-                    :class "grid-label"
-            )
-          )
-          (eventbox :class "right-part"
-                    :cursor "pointer"
-            (label  :text " " :class "grid-chev")
-          )
-        )
-        ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-        (box  :class "grid-button"
-              :orientation "h"
-              :space-evenly false
-              :width 0
-              :height 0
-
-          (eventbox :class "left-part"
-                    :cursor "pointer"
-            (label  :text " 󰖩 "
-                    :class "grid-label"
-            )
-          )
-          (eventbox :class "right-part"
-                    :cursor "pointer"
-            (label  :text " " :class "grid-chev")
-          )
-        )
-        ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-        (box  :class "grid-button"
-              :orientation "h"
-              :space-evenly false
-              :width 0
-              :height 0
-
-          (eventbox :class "left-part"
-                    :cursor "pointer"
-            (label  :text " 󰖩 "
+            (label  :text " 󰌾 "
                     :class "grid-label"
             )
           )
@@ -163,6 +151,8 @@
             :width 0
             :height 0
             :halign "center"
+            :style "margin-top: 7px;
+                    margin-bottom: 15px;"
         ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
         (box  :class "grid-button"
               :orientation "h"
@@ -172,7 +162,7 @@
 
           (eventbox :class "left-part"
                     :cursor "pointer"
-            (label  :text " 󰖩 "
+            (label  :text " 󰕾 "
                     :class "grid-label"
             )
           )
@@ -190,7 +180,7 @@
 
           (eventbox :class "left-part"
                     :cursor "pointer"
-            (label  :text " 󰖩 "
+            (label  :text " 󰍬 "
                     :class "grid-label"
             )
           )
@@ -208,7 +198,7 @@
 
           (eventbox :class "left-part"
                     :cursor "pointer"
-            (label  :text " 󰖩 "
+            (label  :text " 󰍃 "
                     :class "grid-label"
             )
           )
@@ -218,24 +208,49 @@
           )
         )
         ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-        (box  :class "grid-button"
-              :orientation "h"
-              :space-evenly false
-              :width 0
-              :height 0
+      )
+    )
+    (box  :class "slider-box"
+          :orientation "v"
+          :space-evenly true
+          :spacing 0
+          :width 0
+          :height 0
+          :halign "center"
 
-          (eventbox :class "left-part"
-                    :cursor "pointer"
-            (label  :text " 󰖩 "
-                    :class "grid-label"
-            )
-          )
-          (eventbox :class "right-part"
-                    :cursor "pointer"
-            (label  :text " " :class "grid-chev")
-          )
+      (box  :class "slider"
+            :orientation "h"
+            :valign "start"
+            :halign "center"
+            :width 0
+            :height 0
+            :space-evenly false
+        
+        (label  :text "󰕾 " :class "slider-label")
+        
+        (scale  :value 0
+                :min 0
+                :max 101
+                :height 0
+                :width 0
+        )
+      )
+      (box  :class "slider"
+            :orientation "h"
+            :valign "start"
+            :halign "center"
+            :width 0
+            :height 0
+            :space-evenly false
+        
+        (label  :text "󰃟 " :class "slider-label")
+        
+        (scale  :value 0
+                :min 0
+                :max 101
+                :height 0
+                :width 0
         )
-        ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
       )
     )
   )

config/eww/scripts/qs-toggle.sh

@@ -10,13 +10,10 @@ on () {
 }
 
 off () {
-  (
   eww update showqs=false
-  sleep .55
   eww close quick-settings-reveal
   eww close quick-settings-smol-reveal
   eww close quick-settings-logo-reveal
-  )
 }
 
 [[ "$1" == "on" ]] && on

nixos/home/packages.nix

@@ -72,6 +72,7 @@
     swayosd
     blueberry
     libayatana-appindicator
+    libnotify
     dracula-theme
     dracula-icon-theme
     steam-run