💄 style(setup): changed radius and some other misc stuff for all the tools

- swaync
- userChrome
- hyprland
- waybar

.config/hypr/themes/luna/luna.conf

@@ -45,6 +45,10 @@ misc {
     groupbar_gradients = false
 }
 
+xwayland {
+    force_zero_scaling = true
+}
+
 dwindle {
     pseudotile = yes # Master switch for pseudotiling. Enabling is bound to mainMod + P in the keybinds section below
     preserve_split = yes # You probably want this

.config/hypr/themes/luna/theme.conf

@@ -1,7 +1,7 @@
 general {
     border_size=2
-    col.inactive_border=rgba(c6d0f599)
+    col.inactive_border=rgba(b7bdf869)
-    col.active_border = rgba(c6d0f5ee) rgba(b7bdf880) rgba(b7bdf880) rgba(c6d0f5ee) 45deg
+    col.active_border = rgba(c6d0f5ee) rgba(b7bdf869) rgba(b7bdf869) rgba(c6d0f5ee) 45deg
     col.group_border =rgba(c6d0f599)
     col.group_border_active = rgba(b7bdf8ff) 
 
@@ -10,7 +10,7 @@ general {
 }
 
 decoration {
-    rounding=10
+    rounding=7
     multisample_edges = true
 
     active_opacity=0.95
@@ -48,5 +48,5 @@ animations {
     animation=fadeOut,1,10,default
     animation=workspaces,1,6,overshot,slide
     animation = border, 1, 1, liner
-    animation = borderangle, 1, 20, liner, loop
+    animation = borderangle, 1, 30, liner, loop
 }

.config/librewolf/chrome/userChrome.css

@@ -3,7 +3,7 @@
 * {
   /*--tab-corner-rounding: 5px;*/
   --animation-speed: 0.4s;
-  --button-corner-rounding: 30px;
+  --button-corner-rounding: 10px;
   --urlbar-container-height: 40px !important;
   --urlbar-min-height: 30px !important;
   --urlbar-height: 30px !important;
@@ -290,7 +290,7 @@ tab:not(:active) .tab-background {
 
   /*  Left and Right "dip" of the container indicator
      *  0px equals tab width
-     *  higher values make the indicator smaller
+     *  higer values make the indicator smaller
      */
   --container-tabs-indicator-margin: 10px;
 
@@ -301,13 +301,17 @@ tab:not(:active) .tab-background {
 }
 
 :root:not([customizing]) :hover > .tabbrowser-tab:not(:hover) {
-  transition: blur, ease 0.5s !important;
+  transition:
+    blur,
+    ease 0.5s !important;
   --uc-active-tab-width: clamp(100px, 30vw, 300px);
   --uc-inactive-tab-width: clamp(100px, 20vw, 200px);
 }
 
 :root:not([customizing]) :not(:hover) > .tabbrowser-tab {
-  transition: blur, ease 0.2s !important;
+  transition:
+    blur,
+    ease 0.2s !important;
   --uc-active-tab-width: clamp(100px, 30vw, 300px);
   --uc-inactive-tab-width: clamp(100px, 20vw, 200px);
 }
@@ -333,7 +337,7 @@ tab:not([selected]):hover .tab-background {
 
 .tab-close-button {
   list-style-image: url("active_close.png");
-  border-radius: 15px;
+  border-radius: 10px;
   transition: list-style-image var(--animation-speed) ease-out !important;
 }
 
@@ -449,8 +453,8 @@ tab:not([selected]):hover .tab-background {
 
 .urlbarView {
   background: var(--toolbar-field-focus-background-color) !important;
-  border-bottom-left-radius: 15px !important;
+  border-bottom-left-radius: 10px !important;
-  border-bottom-right-radius: 15px !important;
+  border-bottom-right-radius: 10px !important;
   box-shadow: 10px 45px 146px -64px rgba(0, 0, 0, 0.65);
   margin-inline: 0 !important;
   width: 100% !important;
@@ -720,8 +724,15 @@ url(about:home) {
   transition-delay: 1s;
   filter: alpha(opacity=0);
   opacity: 0;
-  transition: visibility, ease 0.5s, margin-top, ease 0.5s, opacity, ease 0.5s,
+  transition:
-    rotate, ease 0.4s !important;
+    visibility,
+    ease 0.5s,
+    margin-top,
+    ease 0.5s,
+    opacity,
+    ease 0.5s,
+    rotate,
+    ease 0.4s !important;
 }
 
 #tabs-newtab-button {
@@ -783,7 +794,7 @@ window#places[title="Library"] {
 menupopup {
   -moz-appearance: none !important;
   padding: 8px !important;
-  border-radius: 15px !important;
+  border-radius: 10px !important;
   background: red !important;
   background: var(--toolbar-field-focus-background-color) !important;
   border: none !important;
@@ -928,57 +939,52 @@ menuitem[_moz-menuactive="true"] {
   color: inherit !important;
 }
 
-/* Clean and tight extensions menu  */
+/*
+ Clean and tight extensions menu
 #unified-extensions-view .panel-header,
 #unified-extensions-view .panel-header + toolbarseparator,
 #unified-extensions-view .panel-subview-body + toolbarseparator,
 #unified-extensions-view #unified-extensions-manage-extensions {
-  display: none !important;
+    display:none !important;
 }
 
-#unified-extensions-view .unified-extensions-item-menu-button.subviewbutton {
+#unified-extensions-view .unified-extensions-item-menu-button.subviewbutton{
-  visibility: hidden !important;
+    visibility: hidden !important;
-  transition: 300ms !important;
+    transition: 300ms !important;
-  -moz-margin-end: -3.6em !important;
+    -moz-margin-end: -3.6em !important;
 }
 
 #unified-extensions-view .panel-subview-body {
-  padding-top: 8px !important;
+    padding-top: 8px !important;
-  padding-bottom: 8px !important;
+    padding-bottom: 8px !important;
 }
 
 #unified-extensions-view:hover
-  .unified-extensions-item-menu-button.subviewbutton {
+.unified-extensions-item-menu-button.subviewbutton{
-  visibility: visible !important;
+    visibility: visible !important;
-  transition: 300ms !important;
+    transition: 300ms !important;
-  -moz-margin-end: initial !important;
+    -moz-margin-end: initial !important;
 }
 
 #unified-extensions-view .unified-extensions-item-icon,
-#unified-extensions-view
+#unified-extensions-view .unified-extensions-item[unified-extensions="true"] .webextension-browser-action
-  .unified-extensions-item[unified-extensions="true"]
+> .toolbarbutton-badge-stack > .toolbarbutton-icon {
-  .webextension-browser-action
+    height: 20px !important;
-  > .toolbarbutton-badge-stack
+    width: 20px !important;
-  > .toolbarbutton-icon {
-  height: 20px !important;
-  width: 20px !important;
 }
 
 #unified-extensions-view .unified-extensions-item-icon,
-#unified-extensions-view
+#unified-extensions-view .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack {
-  .unified-extensions-item[unified-extensions="true"]
-  .webextension-browser-action
-  > .toolbarbutton-badge-stack {
   margin-inline-end: 2px !important;
 }
 
 #unified-extensions-view .unified-extensions-item-name,
 #unified-extensions-view .unified-extensions-item-message {
-  padding-inline-start: 0.5em !important;
+    padding-inline-start: 0.5em !important;
-  width: 21em !important;
+    width: 21em !important;
 }
 
 #unified-extensions-view .unified-extensions-item-action-button.subviewbutton {
-  padding-top: 2px !important;
+    padding-top: 2px !important;
-  padding-bottom: 2px !important;
+    padding-bottom: 2px !important;
-}
+}*/

.config/swaync/config.json

@@ -10,7 +10,7 @@
   "control-center-margin-left": 0,
   "notification-icon-size": 100,
   "notification-body-image-height": 100,
-  "notification-body-image-width": 150,
+  "notification-body-image-width": 200,
   "timeout": 10,
   "timeout-low": 5,
   "timeout-critical": 0,
@@ -23,23 +23,67 @@
   "transition-time": 200,
   "hide-on-clear": false,
   "hide-on-action": true,
-  "widgets": [
+  "widgets": ["title", "buttons-grid", "notifications", "mpris"],
-    "title",
-    "notifications",
-    "mpris"
-  ],
   "widget-config": {
     "title": {
       "text": "Notifications",
       "clear-all-button": true,
-      "button-text": "Clear"
+      "button-text": "Clear All"
     },
     "dnd": {
       "text": "Do Not Disturb"
     },
+    "label": {
+      "max-lines": 1,
+      "text": "Notification Center"
+    },
     "mpris": {
       "image-size": 96,
       "image-radius": 12
+    },
+    "buttons-grid": {
+      "actions": [
+        {
+          "label": "󰐥",
+          "command": "systemctl poweroff"
+        },
+        {
+          "label": "󰜉",
+          "command": "systemctl reboot"
+        },
+        {
+          "label": "󰌾",
+          "command": "swaylock"
+        },
+        {
+          "label": "󰍃",
+          "command": "swaymsg exit"
+        },
+        {
+          "label": "󰏥",
+          "command": "systemctl suspend"
+        },
+        {
+          "label": "󰕾",
+          "command": "pactl set-sink-mute @DEFAULT_SINK@ toggle"
+        },
+        {
+          "label": "󰍬",
+          "command": "pactl set-source-mute @DEFAULT_SOURCE@ toggle"
+        },
+        {
+          "label": "󰖩",
+          "command": "iwgtk"
+        },
+        {
+          "label": "󰂯",
+          "command": "blueman-manager"
+        },
+        {
+          "label": "",
+          "command": "kooha"
+        }
+      ]
     }
   }
 }

.config/swaync/style.css

@@ -1,50 +1,139 @@
+@define-color cc-bg rgba(0, 0, 0, 1);
+@define-color noti-border-color rgba(255, 255, 255, 0.15);
+@define-color noti-bg #24273a;
+@define-color noti-bg-darker #363a4f;
+@define-color noti-bg-hover rgb(27, 27, 43);
+@define-color noti-bg-focus rgba(27, 27, 27, 0.6);
+@define-color noti-close-bg rgba(255, 255, 255, 0.1);
+@define-color noti-close-bg-hover rgba(255, 255, 255, 0.15);
+@define-color text-color #cad3f5;
+
 * {
   all: unset;
   font-size: 14px;
-  font-family: 'JetBrainsMono Nerd Font';
+  font-family: "JetBrainsMono Nerd Font";
   transition: 200ms;
 }
 
+.widget-mpris {
+  background: @noti-bg-darker;
+
+  padding: 10px;
+  border-radius: 10px;
+}
+
+.widget-mpris-player {
+  padding: 8px;
+  margin: 8px;
+}
+
+.widget-mpris-title {
+  font-weight: 700;
+  font-size: 1.25rem;
+}
+
+.widget-mpris-subtitle {
+  font-size: 1.1rem;
+}
+
+.widget-buttons-grid {
+  font-size: x-large;
+  padding: 8px;
+  margin-top: 10px;
+  border-radius: 10px;
+
+  background: @noti-bg-darker;
+}
+
+.widget-buttons-grid > flowbox > flowboxchild > button {
+  margin: 3px;
+  background: #494d64;
+  border-radius: 6px;
+  color: #cad3f5;
+}
+
+.widget-buttons-grid > flowbox > flowboxchild > button:hover {
+  background: #6e738d;
+}
+
 .floating-notifications.background .notification-row .notification-background {
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #363a4f;
+  box-shadow:
-  border-radius: 12.6px;
+    0 0 8px 0 rgba(0, 0, 0, 0.8),
+    inset 0 0 0 1px #363a4f;
+  border-radius: 10px;
   margin: 18px;
   background-color: #24273a;
   color: #cad3f5;
-  border: 3px solid rgba(183, 189, 248, 0.5);
+  border: 2px solid rgba(183, 189, 248, 0.5);
   padding: 0;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification {
   padding: 7px;
-  border-radius: 12.6px;
+  border-radius: 10px;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification.critical {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification.critical {
   box-shadow: inset 0 0 7px 0 #ed8796;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification .notification-content {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content {
   margin: 7px;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification .notification-content .summary {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .summary {
   color: #cad3f5;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification .notification-content .time {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .time {
   color: #a5adcb;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification .notification-content .body {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .body {
   color: #cad3f5;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > * {
   min-height: 3.4em;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action {
   border-radius: 7px;
   color: #cad3f5;
   background-color: #363a4f;
@@ -52,19 +141,34 @@
   margin: 7px;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action:hover {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:hover {
   box-shadow: inset 0 0 0 1px #494d64;
   background-color: #363a4f;
   color: #cad3f5;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action:active {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:active {
   box-shadow: inset 0 0 0 1px #494d64;
   background-color: #7dc4e4;
   color: #cad3f5;
 }
 
-.floating-notifications.background .notification-row .notification-background .close-button {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .close-button {
   margin: 7px;
   padding: 2px;
   border-radius: 6.3px;
@@ -72,23 +176,31 @@
   background-color: #ed8796;
 }
 
-.floating-notifications.background .notification-row .notification-background .close-button:hover {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .close-button:hover {
   background-color: #ee99a0;
   color: #24273a;
 }
 
-.floating-notifications.background .notification-row .notification-background .close-button:active {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .close-button:active {
   background-color: #ed8796;
   color: #24273a;
 }
 
 .control-center {
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #363a4f;
+  box-shadow:
-  border-radius: 12.6px;
+    0 0 8px 0 rgba(0, 0, 0, 0.8),
+    inset 0 0 0 1px #363a4f;
+  border-radius: 10px;
   margin: 18px;
   background-color: #24273a;
   color: #cad3f5;
-  border: 3px solid rgba(183, 189, 248, 0.5);
+  border: 2px solid rgba(183, 189, 248, 0.5);
   padding: 14px;
 }
 
@@ -122,8 +234,7 @@
   color: #cad3f5;
   background-color: #363a4f;
   box-shadow: inset 0 0 0 1px #494d64;
-  margin-top: 14px;
+  margin-top: 10px;
-  border: 3px solid rgba(183, 189, 248, 0.5);
 }
 
 .control-center .notification-row .notification-background .notification {
@@ -131,31 +242,64 @@
   border-radius: 7px;
 }
 
-.control-center .notification-row .notification-background .notification.critical {
+.control-center
+  .notification-row
+  .notification-background
+  .notification.critical {
   box-shadow: inset 0 0 7px 0 #ed8796;
 }
 
-.control-center .notification-row .notification-background .notification .notification-content {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content {
   margin: 7px;
 }
 
-.control-center .notification-row .notification-background .notification .notification-content .summary {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .summary {
   color: #cad3f5;
 }
 
-.control-center .notification-row .notification-background .notification .notification-content .time {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .time {
   color: #a5adcb;
 }
 
-.control-center .notification-row .notification-background .notification .notification-content .body {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .body {
   color: #cad3f5;
 }
 
-.control-center .notification-row .notification-background .notification > *:last-child > * {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > * {
   min-height: 3.4em;
 }
 
-.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action {
   border-radius: 7px;
   color: #cad3f5;
   background-color: #181926;
@@ -163,13 +307,25 @@
   margin: 7px;
 }
 
-.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action:hover {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:hover {
   box-shadow: inset 0 0 0 1px #494d64;
   background-color: #363a4f;
   color: #cad3f5;
 }
 
-.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action:active {
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:active {
   box-shadow: inset 0 0 0 1px #494d64;
   background-color: #7dc4e4;
   color: #cad3f5;
@@ -188,7 +344,10 @@
   color: #24273a;
 }
 
-.control-center .notification-row .notification-background .close-button:active {
+.control-center
+  .notification-row
+  .notification-background
+  .close-button:active {
   background-color: #ed8796;
   color: #24273a;
 }
@@ -206,5 +365,5 @@
 }
 
 .control-center .widget-mpris {
-  margin-top: 20px;
+  margin-top: 10px;
 }

.config/waybar/style.css

@@ -40,9 +40,9 @@
   background-color: #24273a;
   padding: 0 10px;
   margin: 2px 4px 5px 4px;
-  border-radius: 15px;
+  border-radius: 10px;
-  border: 2px solid rgba(183, 189, 248, 0.5);
   box-shadow: 3px 3px 1px 1px #181926;
+  border: 2px solid rgba(183, 189, 248, 0.4);
   background-clip: padding-box;
 }
 
@@ -79,20 +79,21 @@ window#waybar.hidded {
 
 #workspaces {
   background-color: #24273a;
+  border: 2px solid rgba(183, 189, 248, 0.4);
   padding: 0 10px;
   margin: 2px 4px 5px 4px;
-  border-radius: 15px;
-  border: 2px solid rgba(183, 189, 248, 0.5);
   box-shadow: 3px 3px 1px 1px #181926;
+  border-radius: 10px;
   background-clip: padding-box;
 }
 
 #workspaces button {
-  box-shadow: rgba(0, 0, 0, 0.116) 2 2 5 2px;
   background-color: #24273a;
-  border-radius: 15px;
+  border-radius: 10px;
   margin-right: 3px;
   margin-left: 3px;
+  margin-top: 3px;
+  margin-bottom: 3px;
   padding: 0 5px;
   font-weight: bolder;
   min-width: 20px;