This might be the final design

This commit is contained in:
2026-02-27 16:50:23 +01:00
parent 1c67c7d0a8
commit f35ce44d7b
3 changed files with 2 additions and 17 deletions
@@ -8,11 +8,9 @@
@define-color text rgba(255, 255, 255, 1.0); @define-color text rgba(255, 255, 255, 1.0);
@define-color surface1 rgba(255, 255, 255, 0.08); @define-color surface1 rgba(255, 255, 255, 0.08);
@define-color subtext1 rgba(255, 255, 255, 0.35); @define-color subtext1 rgba(255, 255, 255, 0.35);
@define-color blue rgba(51, 204, 255, 0.933); @define-color blue rgba(51, 204, 255, 0.933);
@define-color green rgba(0, 255, 153, 0.933); @define-color green rgba(0, 255, 153, 0.933);
@define-color red rgba(255, 0, 0, 0.90); @define-color red rgba(255, 0, 0, 0.90);
* { * {
color: @text; color: @text;
font-family: font-family:
@@ -21,7 +19,6 @@
Sans; Sans;
font-size: 13px; font-size: 13px;
} }
/* Remove list selection glow */ /* Remove list selection glow */
list, list,
listview, listview,
@@ -36,12 +33,10 @@ listview row:active {
box-shadow: none; box-shadow: none;
outline: none; outline: none;
} }
/* Popups: keep window transparent, but make the *notification surfaces* opaque base */ /* Popups: keep window transparent, but make the *notification surfaces* opaque base */
window#notification-window { window#notification-window {
background: transparent; background: transparent;
} }
/* Control center — EXACT same as Waybar base */ /* Control center — EXACT same as Waybar base */
.control-center { .control-center {
background-color: @base; background-color: @base;
@@ -52,7 +47,6 @@ window#notification-window {
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: none; box-shadow: none;
} }
/* Widget headers — use Waybar surface1 */ /* Widget headers — use Waybar surface1 */
.widget-title { .widget-title {
margin-bottom: 10px; margin-bottom: 10px;
@@ -61,19 +55,16 @@ window#notification-window {
background-color: @surface1; background-color: @surface1;
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08);
} }
.widget-title > label { .widget-title > label {
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
} }
/* Cards — EXACT same as Waybar base */ /* Cards — EXACT same as Waybar base */
.notification-background { .notification-background {
margin: 10px 0; margin: 10px 0;
padding: 0; padding: 0;
background: transparent; background: transparent;
} }
.notification-background .notification { .notification-background .notification {
background-color: @base; background-color: @base;
border-radius: 10px; border-radius: 10px;
@@ -81,7 +72,6 @@ window#notification-window {
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: none; box-shadow: none;
} }
/* Accent by urgency */ /* Accent by urgency */
.notification.critical { .notification.critical {
border-left: 4px solid @red; border-left: 4px solid @red;
@@ -92,7 +82,6 @@ window#notification-window {
.notification.normal { .notification.normal {
border-left: 4px solid @green; border-left: 4px solid @green;
} }
/* Meta */ /* Meta */
.notification .app-name { .notification .app-name {
color: @subtext1; color: @subtext1;
@@ -102,20 +91,17 @@ window#notification-window {
color: @subtext1; color: @subtext1;
font-size: 12px; font-size: 12px;
} }
/* Text */ /* Text */
.notification .summary { .notification .summary {
color: @text; color: @text;
font-weight: 800; font-weight: 800;
font-size: 14px; font-size: 14px;
} }
.notification .body { .notification .body {
color: @subtext1; color: @subtext1;
margin-top: 6px; margin-top: 6px;
line-height: 1.25; line-height: 1.25;
} }
/* Buttons */ /* Buttons */
.notification button { .notification button {
border-radius: 10px; border-radius: 10px;
@@ -124,7 +110,6 @@ window#notification-window {
box-shadow: none; box-shadow: none;
padding: 6px 10px; padding: 6px 10px;
} }
.notification button:hover { .notification button:hover {
background-color: rgba(255, 255, 255, 0.14); background-color: rgba(255, 255, 255, 0.14);
} }
@@ -1,6 +1,6 @@
{ {
"layer": "top", "layer": "top",
"height": 42, "height": 34,
//"modules-left": ["hyprland/window"], //"modules-left": ["hyprland/window"],
@@ -22,7 +22,7 @@
} }
window#waybar { window#waybar {
background-color: @base; background-color: transparent;
color: @text; color: @text;
transition-property: background-color; transition-property: background-color;
border-bottom: 0px solid rgba(0, 0, 0, 0); border-bottom: 0px solid rgba(0, 0, 0, 0);