My personal dotfiles
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: made swaync more in line with hypr

+66 -50
+66 -50
swaync/.config/swaync/style.css
··· 1 + @define-color background-color rgba(46, 52, 64, 0.7); 2 + @define-color surface-color rgb(59, 66, 82); 3 + @define-color highlight-color rgb(67, 76, 94); 4 + 5 + @define-color primary-color rgb(136, 192, 208); 6 + 7 + @define-color primary-text rgb(236, 239, 244); 8 + @define-color secondary-text rgb(229, 233, 240); 9 + 1 10 @define-color cc-bg rgba(46, 46, 46, 0.7); 2 11 @define-color noti-border-color rgba(255, 255, 255, 0.15); 3 12 @define-color noti-bg rgba(48, 48, 48, 0.8); ··· 17 26 } 18 27 19 28 .notification-row:focus, .notification-row:hover { 20 - background: @noti-bg-focus; 29 + background: @highlight-color; 21 30 } 22 31 23 32 .notification-row .notification-background { ··· 26 35 27 36 .notification-row .notification-background .close-button { 28 37 /* The notification Close Button */ 29 - background: @noti-close-bg; 30 - color: @text-color; 38 + background: @highlight-color; 39 + color: @secondary-text; 31 40 text-shadow: none; 32 41 padding: 0; 33 42 border-radius: 100%; ··· 48 57 49 58 .notification-row .notification-background .notification { 50 59 /* The actual notification */ 51 - border-radius: 12px; 52 - border: 1px solid @noti-border-color; 60 + border-radius: 1rem; 61 + border: 2px solid @primary-color; 53 62 padding: 0; 54 63 transition: background 0.15s ease-in-out; 55 - background: @noti-bg; 64 + background: @surface-color; 56 65 } 57 66 58 67 .notification-row .notification-background .notification.low { ··· 73 82 box-shadow: none; 74 83 background: transparent; 75 84 border: none; 76 - color: @text-color; 85 + color: @text-primary; 77 86 transition: background 0.15s ease-in-out; 78 87 } 79 88 80 89 .notification-row .notification-background .notification .notification-action:hover, .notification-row .notification-background .notification .notification-default-action:hover { 81 90 -gtk-icon-effect: none; 82 - background: @noti-bg-hover; 91 + background: @highlight-color; 83 92 } 84 93 85 94 .notification-row .notification-background .notification .notification-default-action { ··· 119 128 font-size: 16px; 120 129 font-weight: bold; 121 130 background: transparent; 122 - color: @text-color; 131 + color: @text-primary; 123 132 text-shadow: none; 124 133 } 125 134 ··· 128 137 font-size: 16px; 129 138 font-weight: bold; 130 139 background: transparent; 131 - color: @text-color; 140 + color: @text-primary; 132 141 text-shadow: none; 133 142 margin-right: 30px; 134 143 } ··· 138 147 font-size: 15px; 139 148 font-weight: normal; 140 149 background: transparent; 141 - color: @text-color; 150 + color: @text-primary; 142 151 text-shadow: none; 143 152 } 144 153 ··· 162 171 163 172 .notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-entry { 164 173 background: @noti-bg-darker; 165 - color: @text-color; 166 - caret-color: @text-color; 167 - border: 1px solid @noti-border-color; 174 + color: @text-primary; 175 + caret-color: @text-secondary; 176 + border: 2px solid @primary-color; 168 177 border-radius: 12px; 169 178 } 170 179 171 180 .notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button { 172 181 margin-left: 4px; 173 - background: @noti-bg; 174 - border: 1px solid @noti-border-color; 182 + background: @background-color; 183 + border: 2px solid @primary-color; 175 184 border-radius: 12px; 176 - color: @text-color; 185 + color: @text-primary; 177 186 } 178 187 179 188 .notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled { 180 189 background: initial; 181 190 color: @text-color-disabled; 182 - border: 1px solid @noti-border-color; 191 + border: 2px solid @primary-color; 183 192 border-color: transparent; 184 193 } 185 194 186 195 .notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:hover { 187 - background: @noti-bg-hover; 196 + background: @background-color; 188 197 } 189 198 190 199 .notification-row .notification-background .notification .notification-action { 191 200 /* The alternative actions below the default action */ 192 - border-top: 1px solid @noti-border-color; 201 + border-top: 2px solid @primary-color; 193 202 border-radius: 0px; 194 - border-right: 1px solid @noti-border-color; 203 + border-right: 2px solid @primary-color; 195 204 } 196 205 197 206 .notification-row .notification-background .notification .notification-action:first-child { ··· 222 231 223 232 .notification-group .notification-group-buttons, .notification-group .notification-group-headers { 224 233 margin: 0 16px; 225 - color: @text-color; 234 + color: @text-primary; 226 235 } 227 236 228 237 .notification-group .notification-group-headers { ··· 230 239 } 231 240 232 241 .notification-group .notification-group-headers .notification-group-icon { 233 - color: @text-color; 242 + color: @text-primary; 234 243 } 235 244 236 245 .notification-group .notification-group-headers .notification-group-header { 237 - color: @text-color; 246 + color: @text-primary; 238 247 } 239 248 240 249 .notification-group .notification-group-buttons { ··· 242 251 } 243 252 244 253 .notification-group.collapsed .notification-row .notification { 245 - background-color: @noti-bg-opaque; 254 + background-color: @surface-color; 246 255 } 247 256 248 257 .notification-group.collapsed .notification-row:not(:last-child) { ··· 256 265 } 257 266 258 267 .notification-group.collapsed:hover .notification-row:not(:only-child) .notification { 259 - background-color: @noti-bg-hover-opaque; 268 + background-color: @highlight-color; 260 269 } 261 270 262 271 .control-center { 263 272 /* The Control Center which contains the old notifications + widgets */ 264 - background: @cc-bg; 265 - color: @text-color; 273 + background: @background-color; 274 + color: @text-primary; 266 275 border-radius: 12px; 267 276 } 268 277 ··· 287 296 288 297 .control-center .control-center-list .notification .notification-default-action:hover, 289 298 .control-center .control-center-list .notification .notification-action:hover { 290 - background-color: @noti-bg-hover; 299 + background-color: @highlight-color; 291 300 } 292 301 293 302 .blank-window { ··· 306 315 /*** Widgets ***/ 307 316 /* Title widget */ 308 317 .widget-title { 309 - color: @text-color; 310 - margin: 8px; 318 + color: @text-primary; 319 + margin: 1.5rem; 311 320 font-size: 1.5rem; 312 321 } 313 322 314 323 .widget-title > button { 315 324 font-size: initial; 316 - color: @text-color; 325 + color: @text-primary; 317 326 text-shadow: none; 318 - background: @noti-bg; 319 - border: 1px solid @noti-border-color; 327 + background: @surface-color; 328 + border: none; 320 329 box-shadow: none; 321 - border-radius: 12px; 330 + border-radius: 0.5rem; 322 331 } 323 332 324 333 .widget-title > button:hover { 325 - background: @noti-bg-hover; 334 + background: @highlight-color; 326 335 } 327 336 328 337 /* DND widget */ 329 338 .widget-dnd { 330 - color: @text-color; 339 + color: @text-primary; 331 340 margin: 8px; 332 341 font-size: 1.1rem; 333 342 } ··· 335 344 .widget-dnd > switch { 336 345 font-size: initial; 337 346 border-radius: 12px; 338 - background: @noti-bg; 339 - border: 1px solid @noti-border-color; 347 + background: @surface-color; 348 + border: 2px solid @primary-color; 340 349 box-shadow: none; 341 350 } 342 351 343 352 .widget-dnd > switch:checked { 344 - background: @bg-selected; 353 + background: @primary-color; 345 354 } 346 355 347 356 .widget-dnd > switch slider { 348 - background: @noti-bg-hover; 357 + background: @highlight-color; 349 358 border-radius: 12px; 350 359 } 351 360 ··· 363 372 padding: 8px; 364 373 margin: 8px; 365 374 border-radius: 12px; 366 - background-color: @noti-bg; 375 + background-color: transparent; 376 + 367 377 } 368 378 369 379 .widget-buttons-grid > flowbox > flowboxchild > button { 370 - background: @noti-bg; 371 - border-radius: 12px; 380 + background: @surface-color; 381 + border: none; 382 + padding: 1rem 4.5rem; 383 + border-radius: 1rem; 384 + } 385 + 386 + .widget-buttons-grid > flowbox > flowboxchild > button:hover { 387 + background: @primary-color; 372 388 } 373 389 374 390 .widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked { ··· 389 405 390 406 /* Volume widget */ 391 407 .widget-volume { 392 - background-color: @noti-bg; 408 + background-color: @surface-color; 393 409 padding: 8px; 394 410 margin: 8px; 395 411 border-radius: 12px; ··· 409 425 410 426 /* Backlight widget */ 411 427 .widget-backlight { 412 - background-color: @noti-bg; 428 + background-color: @surface-color; 413 429 padding: 8px; 414 430 margin: 8px; 415 431 border-radius: 12px; ··· 423 439 424 440 .widget-inhibitors > button { 425 441 font-size: initial; 426 - color: @text-color; 442 + color: @text-primary; 427 443 text-shadow: none; 428 - background: @noti-bg; 429 - border: 1px solid @noti-border-color; 444 + background: @surface-color; 445 + border: 2px solid @primary-color; 430 446 box-shadow: none; 431 447 border-radius: 12px; 432 448 } 433 449 434 450 .widget-inhibitors > button:hover { 435 - background: @noti-bg-hover; 451 + background: @highlight-color; 436 452 }