make changes on interface colors and sliders, add power menu

swaync/config.json

@@ -51,21 +51,19 @@
     "title",
     "volume",
     "backlight",
+    "buttons-grid",
     "mpris",
     "dnd",
     "inhibitors",
     "notifications"
   ],
   "widget-config": {
-    "inhibitors": {
-      "text": "Inhibitors",
-      "button-text": "Clear All",
-      "clear-all-button": true
-    },
     "title": {
-      "text": "Notifications",
+      "text": "Control Center",
-      "clear-all-button": true,
+      "clear-all-button": false
-      "button-text": "Clear All"
+    },
+    "inhibitors": {
+      "text": "Inhibitors"
     },
     "dnd": {
       "text": "Do Not Disturb"
@@ -77,7 +75,7 @@
     "mpris": {
       "image-size": 96,
       "image-radius": 12,
-      "blur": false
+      "blur": true 
     },
     "volume": {
         "label": ""
@@ -87,13 +85,11 @@
     },
     "buttons-grid": {
       "actions": [
-        {
+          {
-          "label": "直",
+              "label": "  Power Menu",
-          "type": "toggle",
+              "type": "normal",
-          "active": true,
+              "command": "wlogout"
-          "command": "sh -c '[[ $SWAYNC_TOGGLE_STATE == true ]] && nmcli radio wifi on || nmcli radio wifi off'",
+          }
-          "update_command": "sh -c '[[ $(nmcli radio wifi) == \"enabled\" ]] && echo true || echo false'"
-        }
       ]
     }
   }

swaync/configSchema.json

@@ -407,8 +407,8 @@
           "default": 12
         },
         "blur": {
-          "type": "boolean",
+          "type": "bool",
-          "description": "Appy the artwork as the MPRIS background and blur it",
+          "description": "Apply the artwork as the MPRIS background and blur it",
           "default": true
         }
       }

swaync/style.css

@@ -1,3 +1,12 @@
+
+
+@define-color background shade(#89b4fa, .2);
+@define-color text #cdd6f4;
+@define-color hover shade(#74c7ec, .1);
+@define-color background-alt #b4befe;
+@define-color slider #89b4fa;
+
+
 * {
   all: unset;
   font-size: 14px;
@@ -21,6 +30,8 @@ slider {
   border-radius: 50%;
 }
 
+/* Notifications */
+
 .floating-notifications.background .notification-row .notification-background {
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #313244;
   border-radius: 16px;
@@ -97,27 +108,21 @@ slider {
   color: #1e1e2e;
 }
 
+/* Control Center */
+
 .control-center {
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #313244;
   border-radius: 12.6px;
   margin: 18px;
   background-color: #1e1e2e;
   color: #cdd6f4;
-  padding: 16px;
+  padding: 1.5rem;
-  padding-top: 14px;
 }
 
 .control-center .widget-title > label {
   color: #cdd6f4;
-  font-size: 1.3em;
+  font-size: 1.5em;
-}
+  font-weight: 600;
-
-.control-center .widget-title button {
-  border-radius: 7px;
-  color: #cdd6f4;
-  background-color: #313244;
-  box-shadow: inset 0 0 0 1px #45475a;
-  padding: 8px;
 }
 
 .control-center .widget-title button:hover {
@@ -133,7 +138,7 @@ slider {
 }
 
 .control-center .notification-row .notification-background {
-  border-radius: 7px;
+  border-radius: 16px;
   color: #cdd6f4;
   background-color: #313244;
   box-shadow: inset 0 0 0 1px #45475a;
@@ -307,33 +312,61 @@ slider {
 }
 
 .widget-buttons-grid {
-  padding-top: 1rem;
+  padding-top: 2px;
+  margin-left: 150px;
 }
 
 .widget-buttons-grid > flowbox > flowboxchild > button label {
-  font-size: 2.5rem;
+  font-size: 1rem;
+}
+
+.widget-buttons-grid button {
+   padding-right: 2px;
+   background: #313244;
+   padding: 8px;
+   border-radius: 16px;
+}
+
+.widget-buttons-grid button:active {
+    background: blue;
+}
+
+trough {
+    border-radius: 4px;
+}
+
+trough highlight {
+    padding: 5px;
+    border-radius: 4px;
+    background: @slider;
+}
+
+trough:hover {
+    padding: 6px;
+    border-radius: 6px;
 }
 
 .widget-volume {
-  padding-top: 1rem;
+    margin-top: 1rem;
+    margin-bottom: 0.8rem;
 }
 
 .widget-volume label {
   font-size: 1.5rem;
-  color: #74c7ec;
+  color: @text;
+  margin-left: 5px;
+  margin-right: 6px;
 }
 
-.widget-volume trough highlight {
+.widget-backlight {
-  background: #74c7ec;
+    margin-bottom: 1rem;
-}
-
-.widget-backlight trough highlight {
-  background: #f9e2af;
 }
 
 .widget-backlight label {
   font-size: 1.5rem;
-  color: #f9e2af;
+  margin-left: 7px;
+  margin-right: 3px;
+  color: @text;
 }
 
 .widget-backlight .KB {