New colors
This commit is contained in:
@@ -1,15 +1,17 @@
|
||||
/* Match Waybar palette exactly */
|
||||
/* SwayNotificationCenter (swaync) — EXACT Waybar match
|
||||
* Put in: ~/.config/swaync/style.css
|
||||
*
|
||||
* swaync loads GTK CSS for theming.
|
||||
*/
|
||||
|
||||
@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);
|
||||
@define-color blue rgba(51, 204, 255, 0.933);
|
||||
@define-color green rgba(0, 255, 153, 0.933);
|
||||
@define-color red rgba(255, 0, 0, 0.90);
|
||||
|
||||
* {
|
||||
color: @text;
|
||||
@@ -20,20 +22,38 @@
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Notification popup */
|
||||
window#notification-window {
|
||||
background-color: @base;
|
||||
/* Remove list selection glow */
|
||||
list,
|
||||
listview,
|
||||
row,
|
||||
listview row,
|
||||
listview row:selected,
|
||||
listview row:hover,
|
||||
listview row:focus,
|
||||
listview row:active {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Control center */
|
||||
/* Popups: keep window transparent, but make the *notification surfaces* opaque base */
|
||||
window#notification-window {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Control center — EXACT same as Waybar base */
|
||||
.control-center {
|
||||
background-color: @panel_rgba;
|
||||
background-color: @base;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
|
||||
/* Keep border subtle, like Waybar (no heavy shadow) */
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Widget headers */
|
||||
/* Widget headers — use Waybar surface1 */
|
||||
.widget-title {
|
||||
margin-bottom: 10px;
|
||||
padding: 6px 10px;
|
||||
@@ -42,12 +62,24 @@ window#notification-window {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.widget-title > label {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Cards — EXACT same as Waybar base */
|
||||
.notification-background {
|
||||
margin: 10px 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.notification-background .notification {
|
||||
background-color: @card_rgba;
|
||||
background-color: @base;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Accent by urgency */
|
||||
@@ -81,6 +113,7 @@ window#notification-window {
|
||||
.notification .body {
|
||||
color: @subtext1;
|
||||
margin-top: 6px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
@@ -88,6 +121,8 @@ window#notification-window {
|
||||
border-radius: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: none;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.notification button:hover {
|
||||
|
||||
@@ -11,6 +11,9 @@
|
||||
@define-color yellow rgba(249, 226, 175, 1.0);
|
||||
@define-color overlay1 rgba(255, 255, 255, 0.55);
|
||||
|
||||
/* This is the exact "active" fill you requested */
|
||||
@define-color active_fill rgba(255, 255, 255, 0.05);
|
||||
|
||||
* {
|
||||
font-family:
|
||||
Aporetic Sans Mono,
|
||||
@@ -30,7 +33,7 @@ window#waybar {
|
||||
/* --- Workspaces --- */
|
||||
#workspaces button {
|
||||
padding: 0px 6px;
|
||||
min-width: 80px; /* fixed-ish width without max-width */
|
||||
min-width: 80px;
|
||||
background-color: transparent;
|
||||
color: @text;
|
||||
border: 1px solid @inactive;
|
||||
@@ -38,25 +41,38 @@ window#waybar {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Subtle hover glow (GTK-safe): slight tint + soft shadow */
|
||||
#workspaces button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 0 10px rgba(51, 204, 255, 0.18);
|
||||
}
|
||||
|
||||
/* Active workspace with GTK-safe gradient border */
|
||||
/*
|
||||
* IMPORTANT:
|
||||
* - To get *real* rounded corners, we avoid border-image (GTK often won't clip it to border-radius).
|
||||
* - To keep your "gradient feel", we emulate it with a dual-glow shadow (blue + green).
|
||||
* - Background and border color match exactly (your request).
|
||||
*/
|
||||
#workspaces button.active {
|
||||
font-weight: bold;
|
||||
|
||||
border-radius: 10px;
|
||||
border: 2px solid transparent;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
border-image: linear-gradient(45deg, @blue, @green) 1;
|
||||
box-shadow: 0 0 12px rgba(0, 255, 153, 0.18);
|
||||
|
||||
/* EXACT match: border color == background color */
|
||||
background-color: @active_fill;
|
||||
border: 2px solid @active_fill;
|
||||
|
||||
/* Gradient vibe without breaking radius */
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(51, 204, 255, 0.55),
|
||||
0 0 0 2px rgba(0, 255, 153, 0.4),
|
||||
0 0 10px rgba(51, 204, 255, 0.18),
|
||||
0 0 10px rgba(0, 255, 153, 0.14);
|
||||
}
|
||||
|
||||
/* Optional: make active+hover pop a hair more */
|
||||
#workspaces button.active:hover {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(51, 204, 255, 0.65),
|
||||
0 0 0 2px rgba(0, 255, 153, 0.48),
|
||||
0 0 12px rgba(51, 204, 255, 0.22),
|
||||
0 0 12px rgba(0, 255, 153, 0.18);
|
||||
}
|
||||
@@ -114,31 +130,29 @@ window#waybar {
|
||||
}
|
||||
|
||||
/* --- Hyprscroll overflow indicator --- */
|
||||
#custom-hyprscroll_overflow {
|
||||
border-radius: 10px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Subtle hover glow when not overflow (if it still renders as a widget) */
|
||||
#custom-hyprscroll_overflow:hover {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 153, 0.16);
|
||||
}
|
||||
|
||||
#custom-hyprscroll_overflow.overflow {
|
||||
padding: 0px 6px;
|
||||
min-width: 80px; /* match workspace button width */
|
||||
min-width: 80px;
|
||||
color: @text;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
border: 2px solid transparent;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-image: linear-gradient(45deg, @blue, @green) 1;
|
||||
box-shadow: 0 0 12px rgba(51, 204, 255, 0.18);
|
||||
|
||||
/* EXACT match: border color == background color */
|
||||
background-color: @active_fill;
|
||||
border: 2px solid @active_fill;
|
||||
|
||||
/* Same "gradient feel" as active workspace */
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(51, 204, 255, 0.55),
|
||||
0 0 0 2px rgba(0, 255, 153, 0.4),
|
||||
0 0 10px rgba(51, 204, 255, 0.18),
|
||||
0 0 10px rgba(0, 255, 153, 0.14);
|
||||
}
|
||||
|
||||
#custom-hyprscroll_overflow.overflow:hover {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(51, 204, 255, 0.65),
|
||||
0 0 0 2px rgba(0, 255, 153, 0.48),
|
||||
0 0 12px rgba(51, 204, 255, 0.22),
|
||||
0 0 12px rgba(0, 255, 153, 0.18);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user