Design refresh: new icon assets, bluetooth popover, notification urgency styling, RAM/power draw in control panel
Adds real SVG icon assets replacing the icons-needed.txt checklist, a bluetooth popover module, per-notification urgency (CSS-styled), and app-name/summary dedup in notification cards. Rounds out the control panel's stats section with RAM and power draw alongside the existing CPU/GPU/net rows.
This commit is contained in:
Breadway
parent
e8d5fd5a52
commit
86432d718a
22 changed files with 625 additions and 185 deletions
66
src/theme.rs
66
src/theme.rs
|
|
@ -14,71 +14,89 @@ fn load_css() -> String {
|
|||
// card) and child labels inherit it, so text stays legible whatever lightness
|
||||
// pywal hands a given slot. `on_*` are luminance-picked ink (black/white) for
|
||||
// that background — the pywal hues themselves are untouched.
|
||||
//
|
||||
// Shared tokens: one radius and one padding rhythm reused across every
|
||||
// popover/card/OSD surface so they read as one design system rather than
|
||||
// four different ones. `radius_pill` is only for the tiny transient OSD.
|
||||
let radius = "10px";
|
||||
let radius_sm = "6px";
|
||||
let radius_pill = "20px";
|
||||
let pad = "10px";
|
||||
|
||||
format!(
|
||||
"window.breadbar {{ background-color: {bg_rgba}; color: {on_bg}; border-radius: 0; }}\
|
||||
.workspace-btn {{ background: transparent; opacity: 0.45;\
|
||||
border-radius: 0; border: none; outline: none; box-shadow: none;\
|
||||
min-width: 24px; padding: 4px 8px; }}\
|
||||
.workspace-btn {{ background: transparent; opacity: 0.45; color: {on_bg};\
|
||||
border-radius: {radius_sm}; border: none; outline: none; box-shadow: none;\
|
||||
min-width: 20px; margin: 5px 2px; padding: 2px 9px; }}\
|
||||
.workspace-btn:hover {{ opacity: 0.8; }}\
|
||||
.workspace-btn.active {{ background: {accent}; color: {on_accent}; opacity: 1; }}\
|
||||
.workspace-btn.active {{ background: alpha({accent}, 0.18); color: {accent}; opacity: 1; }}\
|
||||
.stats-box {{ margin-right: 8px; }}\
|
||||
.stat-pair {{ margin-right: 14px; }}\
|
||||
.stat-icon {{ margin-right: 2px; }}\
|
||||
.bt-icon {{ margin-right: 14px; }}\
|
||||
separator.bar-sep {{ min-height: 14px; margin: 0 8px 0 0; background: alpha({on_bg}, 0.14); }}\
|
||||
window.breadbar-notification {{ background-color: alpha({bg_plain}, 0.95); color: {on_bg}; }}\
|
||||
.notification-card {{ background: {surface}; color: {on_surface}; border-radius: 8px;\
|
||||
padding: 12px; margin-bottom: 8px; }}\
|
||||
.notification-card {{ background: {surface}; color: {on_surface}; border-radius: {radius};\
|
||||
padding: {pad}; margin-bottom: 8px; border-left: 3px solid transparent; }}\
|
||||
.notification-card.urgency-critical {{ border-left-color: {critical}; }}\
|
||||
.notification-card.urgency-normal {{ border-left-color: {accent}; }}\
|
||||
.notification-summary {{ font-weight: bold; }}\
|
||||
.notification-app {{ opacity: 0.6; }}\
|
||||
window.breadbar-osd {{ background-color: alpha({bg_plain}, 0.95); color: {on_bg}; border-radius: 8px; }}\
|
||||
.osd-kind {{ opacity: 0.75; font-size: 12px; }}\
|
||||
.osd-pct {{ font-weight: bold; font-size: 12px; }}\
|
||||
progressbar.osd-bar {{ min-height: 8px; }}\
|
||||
progressbar.osd-bar trough {{ background-image: none; background-color: {trough}; border-radius: 4px; min-height: 8px; }}\
|
||||
progressbar.osd-bar trough progress {{ background-image: none; background-color: {accent}; border-radius: 4px; min-height: 8px; }}\
|
||||
window.breadbar-osd {{ background-color: alpha({bg_plain}, 0.95); color: {on_bg}; border-radius: {radius_pill}; }}\
|
||||
.osd-icon {{ opacity: 0.85; margin-right: 8px; }}\
|
||||
.osd-icon-muted {{ opacity: 0.35; }}\
|
||||
progressbar.osd-bar {{ min-height: 6px; }}\
|
||||
progressbar.osd-bar trough {{ background-image: none; background-color: {trough}; border-radius: 3px; min-height: 6px; }}\
|
||||
progressbar.osd-bar trough progress {{ background-image: none; background-color: {accent}; border-radius: 3px; min-height: 6px; }}\
|
||||
.clickable {{ cursor: pointer; }}\
|
||||
.wifi-pair {{ border-radius: 4px; padding: 0 2px; }}\
|
||||
.wifi-pair {{ border-radius: {radius_sm}; padding: 0 2px; }}\
|
||||
.wifi-pair:hover {{ background: alpha({on_bg}, 0.12); }}\
|
||||
.wifi-popover-inner {{ min-width: 180px; padding: 2px; }}\
|
||||
.wifi-popover-inner {{ min-width: 200px; padding: {pad}; }}\
|
||||
.popover-tab-row {{ margin-bottom: {pad}; }}\
|
||||
.popover-tab {{ background: transparent; color: {on_bg}; border: none; box-shadow: none;\
|
||||
outline: none; border-radius: {radius_sm}; padding: 4px 10px; font-size: 11px;\
|
||||
font-weight: bold; opacity: 0.55; }}\
|
||||
.popover-tab:hover {{ opacity: 0.8; }}\
|
||||
.popover-tab:checked {{ background: alpha({accent}, 0.18); color: {accent}; opacity: 1; }}\
|
||||
.wifi-popover-ssid {{ font-weight: bold; font-size: 13px; }}\
|
||||
.wifi-popover-ip {{ opacity: 0.6; font-size: 11px; }}\
|
||||
.wifi-popover-status {{ font-size: 11px; margin-top: 2px; }}\
|
||||
.wifi-popover-section {{ font-size: 10px; font-weight: bold; opacity: 0.5; letter-spacing: 0.08em; }}\
|
||||
.wifi-popover-row {{ background: transparent; border: none; box-shadow: none;\
|
||||
border-radius: 4px; padding: 2px 6px; }}\
|
||||
border-radius: {radius_sm}; padding: 4px 6px; }}\
|
||||
.wifi-popover-row:hover {{ background: alpha({on_bg}, 0.08); }}\
|
||||
.wifi-popover-row-active {{ color: {accent}; }}\
|
||||
.wifi-popover-row-unsaved {{ opacity: 0.4; }}\
|
||||
.wifi-popover-loading {{ opacity: 0.5; padding: 8px; }}\
|
||||
window.wifi-add-dialog {{ background-color: {bg_rgba}; color: {on_bg}; min-width: 240px; }}\
|
||||
.media-widget {{ border-radius: 4px; padding: 0 6px; cursor: pointer; }}\
|
||||
.media-widget {{ border-radius: {radius_sm}; padding: 0 6px; cursor: pointer; }}\
|
||||
.media-widget:hover {{ background: alpha({on_bg}, 0.10); }}\
|
||||
.media-indicator {{ font-size: 11px; opacity: 0.7; margin-right: 2px; }}\
|
||||
.media-track-lbl {{ font-size: 12px; }}\
|
||||
.media-controls {{ padding: 2px; }}\
|
||||
.media-btn {{ font-size: 16px; min-width: 36px; padding: 2px 8px; }}\
|
||||
.control-panel-btn {{ font-size: 14px; padding: 0 6px; margin-left: 6px; border-radius: 4px; }}\
|
||||
.media-btn {{ min-width: 32px; padding: 4px 8px; }}\
|
||||
.control-panel-btn {{ padding: 0 6px; margin-left: 6px; border-radius: {radius_sm}; }}\
|
||||
.control-panel {{ }}\
|
||||
.control-panel-inner {{ min-width: 240px; padding: 8px; }}\
|
||||
.control-panel-inner {{ min-width: 220px; padding: {pad}; }}\
|
||||
.control-panel-row {{ margin: 4px 0; }}\
|
||||
.control-panel-row-icon {{ opacity: 0.75; }}\
|
||||
.control-panel-row-icon {{ opacity: 1; margin-right: 4px; }}\
|
||||
.control-panel-slider {{ margin: 0; }}\
|
||||
.control-panel-stats {{ margin: 8px 0; }}\
|
||||
.control-panel-stats {{ margin: {pad} 0; }}\
|
||||
.control-panel-stat {{ font-size: 12px; opacity: 0.85; margin: 1px 0; }}\
|
||||
.control-panel-section {{ margin: 6px 0; }}\
|
||||
.control-panel-section {{ margin: {pad} 0; }}\
|
||||
.control-panel-section-header {{ font-size: 10px; font-weight: bold; opacity: 0.5;\
|
||||
letter-spacing: 0.08em; margin-bottom: 4px; }}\
|
||||
.control-panel-sink-dropdown {{ }}\
|
||||
.power-row {{ margin-top: 2px; }}\
|
||||
.power-btn {{ font-size: 16px; min-width: 44px; padding: 4px; border-radius: 6px; }}\
|
||||
.power-btn {{ min-width: 40px; padding: 8px; border-radius: {radius_sm}; }}\
|
||||
separator {{ margin: 4px 0; }}",
|
||||
bg_plain = p.background,
|
||||
bg_rgba = hex_to_rgba(&p.background, 0.92),
|
||||
surface = p.color0,
|
||||
accent = p.color4,
|
||||
critical = p.color1,
|
||||
on_bg = ink_on(&p.background),
|
||||
on_surface = ink_on(&p.color0),
|
||||
on_accent = ink_on(&p.color4),
|
||||
trough = hex_to_rgba(&p.color4, 0.25),
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue