Add swaync control center, wifi/bluetooth/vpn rofi menus, waybar notification button
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5.5
@@ -0,0 +1,117 @@
|
||||
/* swaync glass theme: matches rofi/waybar, purple accent from kitty.
|
||||
Icons come from FontAwesome (the same glyphs the waybar uses). */
|
||||
@define-color text #f2f2f2;
|
||||
@define-color sub #b4b4b4;
|
||||
@define-color accent #bb9af7;
|
||||
@define-color red #f7768e;
|
||||
|
||||
* {
|
||||
font-family: "JetBrains Mono", "FontAwesome", "Font Awesome 6 Brands", monospace;
|
||||
font-size: 14px;
|
||||
color: @text;
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ---------- Panel ---------- */
|
||||
.control-center {
|
||||
background: rgba(14, 14, 18, 0.80);
|
||||
border: 1px solid rgba(232, 232, 232, 0.18);
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
}
|
||||
.control-center .widget-title { margin: 2px 2px 12px 2px; }
|
||||
.widget-title > label { font-size: 18px; font-weight: bold; }
|
||||
.widget-title > button {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
border: none; border-radius: 12px; padding: 6px 16px;
|
||||
}
|
||||
.widget-title > button label { color: @text; }
|
||||
.widget-title > button:hover { background: rgba(255, 255, 255, 0.22); }
|
||||
|
||||
/* ---------- Toggle tiles ---------- */
|
||||
.widget-buttons-grid { background: transparent; margin: 0 0 10px 0; padding: 0; }
|
||||
.widget-buttons-grid > flowbox > flowboxchild > button {
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 14px;
|
||||
min-width: 120px; min-height: 46px; margin: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.widget-buttons-grid > flowbox > flowboxchild > button label { font-weight: bold; }
|
||||
.widget-buttons-grid > flowbox > flowboxchild > button:hover { background: rgba(255, 255, 255, 0.20); }
|
||||
.widget-buttons-grid > flowbox > flowboxchild > button:checked {
|
||||
background: @accent; border-color: @accent;
|
||||
}
|
||||
.widget-buttons-grid > flowbox > flowboxchild > button:checked label { color: #11111b; }
|
||||
|
||||
/* ---------- Sliders ---------- */
|
||||
.widget-volume, .widget-backlight {
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
border-radius: 14px; padding: 10px 16px; margin: 4px 0;
|
||||
}
|
||||
.widget-volume label, .widget-backlight label { font-size: 18px; min-width: 26px; }
|
||||
scale trough {
|
||||
min-height: 8px; border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.20);
|
||||
}
|
||||
scale highlight { background: @accent; border-radius: 6px; }
|
||||
scale slider {
|
||||
min-width: 18px; min-height: 18px; margin: -6px;
|
||||
background: @text; border-radius: 50%; border: none;
|
||||
}
|
||||
.widget-volume button { background: rgba(255, 255, 255, 0.10); border: none; border-radius: 10px; }
|
||||
.per-app-volume { background: transparent; padding: 4px 0; }
|
||||
|
||||
/* ---------- Player ---------- */
|
||||
.widget-mpris {
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
border-radius: 14px; padding: 8px; margin: 4px 0;
|
||||
}
|
||||
.widget-mpris-title { font-weight: bold; font-size: 15px; }
|
||||
.widget-mpris-subtitle { color: @sub; font-size: 13px; }
|
||||
.widget-mpris button { background: transparent; border: none; border-radius: 12px; }
|
||||
.widget-mpris button:hover { background: rgba(255, 255, 255, 0.18); }
|
||||
|
||||
/* ---------- Do not disturb ---------- */
|
||||
.widget-dnd { margin: 10px 4px; font-size: 14px; }
|
||||
.widget-dnd > label { font-weight: bold; }
|
||||
.widget-dnd > switch {
|
||||
background: rgba(255, 255, 255, 0.20);
|
||||
border: none; border-radius: 14px;
|
||||
}
|
||||
.widget-dnd > switch:checked { background: @accent; }
|
||||
.widget-dnd > switch slider { background: @text; border-radius: 12px; }
|
||||
|
||||
/* ---------- Notifications (popups + list) ---------- */
|
||||
.notification-row { outline: none; }
|
||||
.notification {
|
||||
background: rgba(14, 14, 18, 0.85);
|
||||
border: 1px solid rgba(232, 232, 232, 0.22);
|
||||
border-radius: 14px; margin: 6px 8px; padding: 0;
|
||||
}
|
||||
.control-center .notification { background: rgba(255, 255, 255, 0.09); border: none; }
|
||||
.notification-content { background: transparent; padding: 10px; }
|
||||
.notification-default-action, .notification-action { background: transparent; border-radius: 14px; }
|
||||
.notification-default-action:hover { background: rgba(255, 255, 255, 0.09); }
|
||||
.summary { font-weight: bold; font-size: 15px; }
|
||||
.body { color: #d8d8d8; font-size: 14px; }
|
||||
.time { color: @sub; font-size: 12px; }
|
||||
.image { border-radius: 10px; }
|
||||
.close-button {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
border: none; border-radius: 50%; margin: 6px; padding: 2px;
|
||||
}
|
||||
.close-button:hover { background: @red; }
|
||||
.critical { border: 1px solid @red; }
|
||||
.notification-group-headers label { color: @sub; font-weight: bold; }
|
||||
.widget-notifications, .notification-group { background: transparent; }
|
||||
|
||||
/* empty state: text only, no broken icon */
|
||||
.notifications-placeholder, .control-center-list placeholder { color: @sub; font-size: 14px; }
|
||||
.notifications-placeholder image, .control-center-list placeholder image { opacity: 0; min-height: 0; min-width: 0; -gtk-icon-size: 0; }
|
||||
.notifications-placeholder > *:first-child,
|
||||
.notifications-placeholder picture,
|
||||
.notifications-placeholder > box > image,
|
||||
.control-center-list-placeholder image,
|
||||
.empty-label image { opacity: 0; min-height: 0; min-width: 0; margin: 0; }
|
||||
Reference in New Issue
Block a user