├── README.md ├── config.json └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # iyiolacak's swaync config 2 | ![image](https://github.com/user-attachments/assets/f3735cf7-50aa-4efe-b174-f2025fc14f91) 3 | 4 | ![image](https://github.com/user-attachments/assets/2c3dc609-4293-471f-b3f8-9aa25fcc91b5) 5 | 6 | ![image](https://github.com/user-attachments/assets/f0ec0241-a9e9-43f0-90f6-1ca87dbd6136) 7 | 8 | SwayNC config with glassmorphism 9 | ## You should add these lines to your `hyprland.conf` 10 | ``` 11 | layerrule = blur, swaync-control-center 12 | layerrule = ignorezero, swaync-notification-window 13 | layerrule = animation slide right, swaync-control-center 14 | layerrule = ignorezero, swaync-control-center 15 | 16 | ``` 17 | ### You might need 'Inter' font unless you adjust the `.css` file. 18 | 19 | I took their config as a base: @elifouts dotfiles/swaync 20 | -------------------------------------------------------------------------------- /config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "/etc/xdg/swaync/configSchema.json", 3 | "positionX": "right", 4 | "positionY": "top", 5 | "layer": "overlay", 6 | "control-center-layer": "top", 7 | "layer-shell": true, 8 | "cssPriority": "application", 9 | "control-center-width": 520, 10 | "control-center-margin-top": 0, 11 | "control-center-margin-bottom": 0, 12 | "control-center-margin-right": 0, 13 | "control-center-margin-left": 0, 14 | "notification-2fa-action": true, 15 | "notification-inline-replies": false, 16 | "notification-window-width": 380, 17 | "notification-icon-size": 48, 18 | "notification-body-image-height": 240, 19 | "notification-body-image-width": 240, 20 | "timeout": 8, 21 | "timeout-low": 4, 22 | "timeout-critical": 0, 23 | "fit-to-screen": true, 24 | "keyboard-shortcuts": true, 25 | "image-visibility": "when-available", 26 | "transition-time": 150, 27 | "hide-on-clear": true, 28 | "hide-on-action": true, 29 | "script-fail-notify": true, 30 | "widgets": [ 31 | "mpris", 32 | "title", 33 | "volume", 34 | "notifications", 35 | "backlight", 36 | "buttons-grid" 37 | ], 38 | "widget-config": { 39 | "title": { 40 | "text": "Notifications", 41 | "clear-all-button": true, 42 | "button-text": "Clear" 43 | }, 44 | "mpris": { 45 | "image-size": 80, 46 | "image-radius": 10 47 | }, 48 | "volume": { 49 | "label": "", 50 | "step": 5 51 | }, 52 | "backlight": { 53 | "label": "󰃞", 54 | "step": 5 55 | }, 56 | "buttons-grid": { 57 | "actions": [ 58 | { 59 | "label": "", 60 | "command": "kitty nmtui", 61 | "tooltip": "Network" 62 | }, 63 | { 64 | "label": "", 65 | "command": "blueman-manager", 66 | "tooltip": "Bluetooth" 67 | }, 68 | { 69 | "label": "󰂛", 70 | "command": "swaync-client -d", 71 | "type": "toggle", 72 | "tooltip": "DND" 73 | }, 74 | { 75 | "label": "󰍜", 76 | "command": "gnome-network-displays", 77 | "tooltip": "Screens" 78 | }, 79 | { 80 | "label": "󰈙", 81 | "command": "kitty bash -i -c 'Docs'", 82 | "tooltip": "Files" 83 | }, 84 | { 85 | "label": "", 86 | "command": "kitty bash -i -c 'Settings'", 87 | "tooltip": "Settings" 88 | }, 89 | { 90 | "label": "", 91 | "command": "hyprlock", 92 | "tooltip": "Lock" 93 | }, 94 | { 95 | "label": "󰜉", 96 | "command": "reboot", 97 | "tooltip": "Reboot" 98 | }, 99 | { 100 | "label": "⏻", 101 | "command": "shutdown now", 102 | "tooltip": "Power Off" 103 | } 104 | ] 105 | } 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* ================================================================== 2 | SwayNC Refined CSS for Cohesive Visuals - github: @iyiolacak 3 | ================================================================== */ 4 | 5 | /* ── 1. Palette & Globals (Using @define-color) ──────────────────── */ 6 | 7 | @define-color theme_fg rgba(248, 248, 252, 0.98); /* Primary Text */ 8 | @define-color theme_fg_secondary rgba(215, 220, 225, 0.78); /* Secondary Text */ 9 | @define-color theme_bg rgba(22, 22, 28, 0.22); /* Panel/Background */ 10 | @define-color popup_bg rgba(20, 25, 25, 0.5); /* Floating Notification Background */ 11 | @define-color module_bg rgba(20, 20, 20, 0.46); /* Default Module Background */ 12 | @define-color module_hover_bg rgba(210, 215, 225, 0.35); /* Module Hover */ 13 | @define-color button_bg rgba(130, 135, 145, 0.28); /* Button Default */ 14 | @define-color button_hover_bg rgba(150, 155, 165, 0.40); /* Button Hover */ 15 | @define-color accent_color rgba(10, 132, 255, 0.8); /* Accent Active */ 16 | @define-color accent_color_hover #198de5; /* Accent Hover */ 17 | @define-color border_light rgba(255, 255, 255, 0.18); 18 | @define-color border_dark rgba(0, 0, 0, 0.06); 19 | @define-color border_medium alpha(@border_light, 0.5); /* Approx rgba(255, 255, 255, 0.09) */ 20 | @define-color icon_primary @theme_fg; 21 | @define-color icon_secondary rgba(215, 220, 225, 0.88); 22 | @define-color slider_trough_bg rgba(50, 55, 65, 0.35); 23 | @define-color slider_thumb_bg white; 24 | @define-color close_button_bg rgba(110, 110, 115, 0.15); 25 | @define-color close_button_hover_bg rgba(130, 130, 135, 0.30); 26 | @define-color mpris_player_bg rgba(0, 0, 0, 0.5); 27 | 28 | /* ── Base Reset ───────────────────────────────────────────────────── */ 29 | * { 30 | font-family: "Inter", "SF Pro Text", sans-serif; 31 | font-size: 17px; 32 | color: @theme_fg; 33 | border: none; 34 | border-radius: 0; 35 | background: none; 36 | padding: 0; 37 | margin: 0; 38 | box-shadow: none; 39 | text-shadow: none; 40 | outline: none; 41 | } 42 | 43 | /* ── 2. Control Center Container ─────────────────────────────────── */ 44 | .control-center { 45 | background-color: @theme_bg; 46 | border: 1px solid @border_medium; 47 | border-top-color: @border_light; 48 | border-bottom-color: @border_dark; 49 | border-radius: 0px; 50 | padding: 28px; 51 | min-width: 380px; 52 | } 53 | 54 | /* ── 3. Widget Modules ───────────────────────────────────────────── */ 55 | .widget-mpris, 56 | .widget-volume, 57 | .widget-backlight, 58 | .widget-buttons-grid, 59 | .control-center-list > box > *:not(.widget-title) { 60 | background-color: @module_bg; 61 | border-radius: 18px; 62 | padding: 18px; 63 | margin-bottom: 14px; 64 | border: 1px solid @border_medium; 65 | } 66 | .widget-volume, .widget-backlight { padding: 14px 18px; } 67 | .widget-buttons-grid { padding: 12px; } 68 | .control-center > box > *:last-child { margin-bottom: 0; } 69 | 70 | /* Widget Titles */ 71 | .widget-title { 72 | background: transparent; 73 | border: none; 74 | padding: 4px 6px 12px 6px; 75 | margin-bottom: 8px; 76 | } 77 | .widget-title label { 78 | font-family: 'Inter'; 79 | font-size: 17px; 80 | font-weight: 500; 81 | color: @theme_fg_secondary; 82 | margin-left: 4px; 83 | background: none; 84 | } 85 | .widget-title button { 86 | font-family: inherit; 87 | font-size: 16px; 88 | color: @theme_fg; 89 | background-color: @button_bg; 90 | border: none; 91 | border-radius: 10px; 92 | padding: 7px 16px; 93 | transition: background-color 0.15s ease; 94 | } 95 | .widget-title button:hover, 96 | .widget-title button:active { 97 | background-color: @button_hover_bg; 98 | } 99 | 100 | /* ── 4. MPRIS Widget ────────────────────────────────────────────── */ 101 | .widget-mpris { 102 | padding: 0; 103 | border: none; 104 | 105 | border-radius: 18px; 106 | background: transparent; 107 | } 108 | .widget-mpris .widget-mpris-player { 109 | background-color: @mpris_player_bg; 110 | border-radius: 12px; 111 | border: 1px solid @border_medium; 112 | padding: 16px; 113 | } 114 | .widget-mpris .widget-mpris-album-art { 115 | background: none; 116 | min-width: 60px; 117 | min-height: 60px; 118 | border-radius: 16px; 119 | margin-right: 12px; 120 | } 121 | .widget-mpris .widget-mpris-title { 122 | font-size: 20px; 123 | font-weight: 600; 124 | color: @theme_fg; 125 | margin-bottom: 4px; 126 | background: none; 127 | } 128 | .widget-mpris .widget-mpris-subtitle { 129 | font-size: 16px; 130 | color: @theme_fg_secondary; 131 | background: none; 132 | } 133 | .widget-mpris .widget-mpris-player button { 134 | all: unset; 135 | background: transparent; 136 | border-radius: 50%; 137 | padding: 7px; 138 | color: @icon_secondary; 139 | font-size: 16px; 140 | min-width: 34px; 141 | min-height: 34px; 142 | transition: background-color 0.15s ease, color 0.15s ease; 143 | } 144 | .widget-mpris .widget-mpris-player button:hover { 145 | background-color: @button_hover_bg; 146 | color: @icon_primary; 147 | } 148 | .widget-mpris .widget-mpris-player button:disabled { 149 | color: alpha(@icon_secondary, 0.3); 150 | } 151 | 152 | /* ── 5. Sliders (Volume, Backlight) ─────────────────────────────── */ 153 | .widget-volume label, .widget-backlight label { 154 | font-size: 24px; 155 | color: @icon_primary; 156 | min-width: 24px; 157 | margin-right: 14px; 158 | } 159 | scale trough { 160 | min-height: 12px; 161 | border-radius: 6px; 162 | background-color: @slider_trough_bg; 163 | } 164 | scale trough progress { 165 | min-height: 12px; 166 | border-radius: 6px; 167 | background-color: @accent_color; 168 | transition: background-color 0.15s ease; 169 | } 170 | scale:hover trough progress { 171 | background-color: @accent_color; 172 | } 173 | trough highlight { 174 | padding: 5px; 175 | background: @accent_color; 176 | border-radius: 20px; 177 | box-shadow: 0 0 5px rgba(0, 0, 0, .5); 178 | transition: all 0.7s ease; 179 | } 180 | scale slider { 181 | min-width: 14px; 182 | min-height: 14px; 183 | border-radius: 7px; 184 | background-color: @slider_thumb_bg; 185 | } 186 | 187 | /* ── 6. Button Grid ─────────────────────────────────────────────── */ 188 | .widget-buttons-grid > flowbox { 189 | padding: 0; 190 | background: none; 191 | } 192 | .widget-buttons-grid > flowbox > flowboxchild { 193 | padding: 3px; 194 | background: none; 195 | } 196 | .widget-buttons-grid > flowbox > flowboxchild > button { 197 | background-color: rgba(0,0,0, 0.7); 198 | border-radius: 66px; 199 | padding: 14px; 200 | min-width: 24px; 201 | min-height: 24px; 202 | color: @icon_secondary; 203 | transition: background-color 0.15s ease, color 0.15s ease; 204 | } 205 | .widget-buttons-grid > flowbox > flowboxchild > button:hover { 206 | background-color: rgba(20,20,20, 0.45); 207 | color: @icon_primary; 208 | } 209 | .widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked { 210 | background-color: @accent_color; 211 | color: white; 212 | } 213 | .widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked:hover { 214 | background-color: @accent_color_hover; 215 | } 216 | 217 | /* ── 7. Notification Center ─────────────────────────────────────── */ 218 | .control-center-list { 219 | padding-bottom: 1px; 220 | background-color: transparent; 221 | } 222 | .control-center .notification-row { 223 | margin-bottom: 12px; 224 | } 225 | .control-center .notification-background { 226 | background-color: @module_bg; 227 | border: 1px solid @border_medium; 228 | padding: 16px; 229 | border-radius: 18px; 230 | transition: background-color 0.15s ease; 231 | } 232 | .control-center .notification-row:hover .notification-background { 233 | 234 | border-radius: 18px; 235 | background-color: @module_hover_bg; 236 | } 237 | .control-center .notification .summary { 238 | font-weight: 600; 239 | color: @theme_fg; 240 | margin-bottom: 5px; 241 | } 242 | .control-center .notification .body { 243 | 244 | color: @theme_fg_secondary; 245 | } 246 | .control-center .notification .time { 247 | font-size: 15px; 248 | font-weight: 500; 249 | color: @theme_fg_secondary; 250 | margin-left: 12px; 251 | } 252 | .control-center .close-button { 253 | background-color: @close_button_bg; 254 | border-radius: 50%; 255 | min-width: 24px; 256 | min-height: 24px; 257 | transition: background-color 0.15s ease; 258 | } 259 | .control-center .close-button:hover { 260 | background-color: @close_button_hover_bg; 261 | } 262 | .control-center .close-button image { 263 | margin-right: 12px; /* Adjust this value for desired spacing */ 264 | color: @icon_secondary; 265 | } 266 | 267 | .control-center .notification image { 268 | margin-right: 12px; /* Space between image and text */ 269 | min-width: 36px; /* Define a minimum width */ 270 | min-height: 36px; /* Define a minimum height */ 271 | /* Add or adjust the border-radius property here */ 272 | border-radius: 8px; /* <<< THIS LINE controls the rounding */ 273 | } 274 | /* ── 8. Floating Notifications ─────────────────────────────────── */ 275 | .floating-notifications .notification-row { 276 | margin-bottom: 12px; 277 | } 278 | .floating-notifications .notification-background { 279 | background-color: @popup_bg; 280 | border: 1px solid @border_light; 281 | border-radius: 18px; 282 | padding: 18px; 283 | margin: 8px 14px; 284 | transition: background-color 0.15s ease; 285 | } 286 | .floating-notifications .notification-row:hover .notification-background { 287 | background-color: alpha(@popup_bg, 1.1); 288 | } 289 | .floating-notifications .notification .summary { 290 | font-weight: 700; 291 | color: @theme_fg; 292 | } 293 | .floating-notifications .notification .body { 294 | color: @theme_fg; 295 | } 296 | .floating-notifications .notification .time { 297 | font-size: 15px; 298 | color: @icon_secondary; 299 | margin-left: 10px; 300 | } 301 | .floating-notifications .notification image { 302 | min-width: 48px; 303 | min-height: 48px; 304 | margin-right: 14px; 305 | border-radius: 10px; 306 | } 307 | .floating-notifications .close-button { 308 | background-color: @close_button_bg; 309 | border-radius: 50%; 310 | min-width: 28px; 311 | min-height: 28px; 312 | transition: background-color 0.15s ease; 313 | } 314 | .floating-notifications .close-button:hover { 315 | background-color: @close_button_hover_bg; 316 | } 317 | .floating-notifications .close-button image { 318 | margin-right: 12px; /* Adjust this value for desired spacing */ 319 | color: @icon_secondary; 320 | } 321 | .floating-notifications .notification-alt-actions { 322 | margin-top: 16px; 323 | padding-top: 16px; 324 | border-top: 1px solid @border_medium; 325 | } 326 | .floating-notifications .notification-action button, 327 | .floating-notifications .notification-alt-actions button { 328 | font-size: 16px; 329 | color: @theme_fg; 330 | background-color: @button_bg; 331 | border-radius: 12px; 332 | padding: 8px 18px; 333 | transition: background-color 0.15s ease; 334 | } 335 | .floating-notifications .notification-action button:hover, 336 | .floating-notifications .notification-alt-actions button:hover { 337 | background-color: @button_hover_bg; 338 | } 339 | --------------------------------------------------------------------------------