96 lines
2.0 KiB
CSS
96 lines
2.0 KiB
CSS
/* Match Waybar palette exactly */
|
|
@define-color base rgba(30, 30, 46, 1.0);
|
|
@define-color text rgba(255, 255, 255, 1.0);
|
|
@define-color blue rgba(51, 204, 255, 0.933);
|
|
@define-color green rgba(0, 255, 153, 0.933);
|
|
@define-color surface1 rgba(255, 255, 255, 0.08);
|
|
@define-color subtext1 rgba(255, 255, 255, 0.35);
|
|
@define-color red rgba(255, 0, 0, 0.90);
|
|
|
|
/* Opaque so it visually matches Waybar */
|
|
@define-color panel_rgba rgba(30, 30, 46, 1.0);
|
|
@define-color card_rgba rgba(30, 30, 46, 1.0);
|
|
|
|
* {
|
|
color: @text;
|
|
font-family:
|
|
Aporetic Sans Mono,
|
|
Iosevka Nerd Font,
|
|
Sans;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Notification popup */
|
|
window#notification-window {
|
|
background-color: @base;
|
|
}
|
|
|
|
/* Control center */
|
|
.control-center {
|
|
background-color: @panel_rgba;
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
/* Widget headers */
|
|
.widget-title {
|
|
margin-bottom: 10px;
|
|
padding: 6px 10px;
|
|
border-radius: 10px;
|
|
background-color: @surface1;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
/* Cards */
|
|
.notification-background .notification {
|
|
background-color: @card_rgba;
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
/* Accent by urgency */
|
|
.notification.critical {
|
|
border-left: 4px solid @red;
|
|
}
|
|
.notification.low {
|
|
border-left: 4px solid @blue;
|
|
}
|
|
.notification.normal {
|
|
border-left: 4px solid @green;
|
|
}
|
|
|
|
/* Meta */
|
|
.notification .app-name {
|
|
color: @subtext1;
|
|
font-weight: 700;
|
|
}
|
|
.notification .time {
|
|
color: @subtext1;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Text */
|
|
.notification .summary {
|
|
color: @text;
|
|
font-weight: 800;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.notification .body {
|
|
color: @subtext1;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* Buttons */
|
|
.notification button {
|
|
border-radius: 10px;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.notification button:hover {
|
|
background-color: rgba(255, 255, 255, 0.14);
|
|
}
|