Diverse CSS changes

This commit is contained in:
2026-02-27 15:05:47 +01:00
parent 51a5c4cd0b
commit 70db619283
3 changed files with 93 additions and 96 deletions
@@ -58,6 +58,8 @@ general {
layout = scrolling layout = scrolling
resize_on_border = true resize_on_border = true
extend_border_grab_area = 20 # Makes it easier to "grab" the edge extend_border_grab_area = 20 # Makes it easier to "grab" the edge
layerrule = blur, swaync-control-center
layerrule = blur, swaync-notification-window
} }
decoration { decoration {
rounding = 5 rounding = 5
@@ -24,13 +24,18 @@
@define-color red #f38ba8; @define-color red #f38ba8;
/* If you want even more blur-through effect, increase transparency a bit */ /* If you want even more blur-through effect, increase transparency a bit */
@define-color panel_rgba rgba(30, 30, 46, 0.78); @define-color panel_rgba rgba(30, 30, 46, 0.15);
@define-color card_rgba rgba(49, 50, 68, 0.78); @define-color card_rgba rgba(49, 50, 68, 0.15);
/* ---- Kill GTK list row selection glow (common tweak) ---- */ /* ---- Kill GTK list row selection glow (common tweak) ---- */
list, listview, row, list,
listview row, listview row:selected, listview row:hover, listview,
listview row:focus, listview row:active { row,
listview row,
listview row:selected,
listview row:hover,
listview row:focus,
listview row:active {
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
box-shadow: none; box-shadow: none;
@@ -59,8 +64,8 @@ window#notification-window {
background-color: @panel_rgba; background-color: @panel_rgba;
border-radius: 18px; border-radius: 18px;
padding: 14px; padding: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.45); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
border: 1px solid rgba(186, 194, 222, 0.10); border: 1px solid rgba(186, 194, 222, 0.1);
} }
/* Widgets */ /* Widgets */
@@ -68,7 +73,7 @@ window#notification-window {
margin: 0 0 10px 0; margin: 0 0 10px 0;
padding: 6px 10px; padding: 6px 10px;
border-radius: 14px; border-radius: 14px;
background-color: rgba(24, 24, 37, 0.70); background-color: rgba(24, 24, 37, 0.7);
border: 1px solid rgba(186, 194, 222, 0.08); border: 1px solid rgba(186, 194, 222, 0.08);
} }
@@ -81,7 +86,7 @@ window#notification-window {
border-radius: 12px; border-radius: 12px;
padding: 6px 10px; padding: 6px 10px;
background-color: rgba(69, 71, 90, 0.55); background-color: rgba(69, 71, 90, 0.55);
border: 1px solid rgba(186, 194, 222, 0.10); border: 1px solid rgba(186, 194, 222, 0.1);
box-shadow: none; box-shadow: none;
} }
@@ -117,8 +122,8 @@ window#notification-window {
background-color: @card_rgba; background-color: @card_rgba;
border-radius: 16px; border-radius: 16px;
padding: 12px 12px; padding: 12px 12px;
border: 1px solid rgba(186, 194, 222, 0.10); border: 1px solid rgba(186, 194, 222, 0.1);
box-shadow: 0 8px 22px rgba(0,0,0,0.35); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
} }
/* Left colored accent bar using urgency */ /* Left colored accent bar using urgency */
@@ -172,7 +177,7 @@ window#notification-window {
.notification button { .notification button {
border-radius: 12px; border-radius: 12px;
background-color: rgba(69, 71, 90, 0.55); background-color: rgba(69, 71, 90, 0.55);
border: 1px solid rgba(186, 194, 222, 0.10); border: 1px solid rgba(186, 194, 222, 0.1);
box-shadow: none; box-shadow: none;
padding: 6px 10px; padding: 6px 10px;
} }
@@ -188,7 +193,7 @@ window#notification-window {
} }
.notification .close-button:hover { .notification .close-button:hover {
background-color: rgba(243, 139, 168, 0.20); background-color: rgba(243, 139, 168, 0.2);
} }
/* Empty state */ /* Empty state */
@@ -38,28 +38,18 @@ window#waybar {
border-radius: 10px; border-radius: 10px;
} }
/* Main notification window */ #custom-notifications {
.notification-row, margin: 0 4px;
.notification, padding: 0 4px;
.notification-group { min-width: 0;
background-color: rgba(30, 30, 46, 0.15);
border: 1px solid rgba(255, 255, 255, 0.08);
} }
/* Control center */ #custom-notifications.empty {
.control-center { color: @overlay1;
background-color: rgba(30, 30, 46, 0.15);
} }
/* Notification body */ #custom-notifications.unread {
.notification-content { color: @yellow;
background-color: rgba(30, 30, 46, 0.15);
}
/* Optional: blur look */
.notification,
.control-center {
backdrop-filter: blur(8px);
} }
#workspaces button:hover { #workspaces button:hover {