eww replacement of waybar
This commit is contained in:
samantha42
220
eww/eww.scss
220
eww/eww.scss
@@ -1,48 +1,186 @@
|
||||
* { all: unset; }
|
||||
// ─────────────────────────────────────────────
|
||||
// Palette — tweak these to match your theme
|
||||
// ─────────────────────────────────────────────
|
||||
$bg: rgba(0, 0, 0, 0.35);
|
||||
$bg-surface: rgba(0, 0, 0, 0.35);
|
||||
$border: rgba(255, 255, 255, 0);
|
||||
$text: #cdd6f4;
|
||||
$subtext: #6c7086;
|
||||
$accent: #89b4fa;
|
||||
$accent2: #cba6f7;
|
||||
$green: #a6e3a1;
|
||||
$yellow: #f9e2af;
|
||||
$red: #f38ba8;
|
||||
|
||||
.volume-overlay {
|
||||
background: rgba(15, 15, 20, 0.92);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
backdrop-filter: blur(20px);
|
||||
color: #e0e0e0;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
// ─────────────────────────────────────────────
|
||||
// Reset / Base
|
||||
// ─────────────────────────────────────────────
|
||||
* {
|
||||
all: unset;
|
||||
font-family: "JetBrains Mono", "Iosevka", monospace;
|
||||
font-size: 12px;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 4px;
|
||||
.header-icon { font-size: 18px; color: #33ccff; }
|
||||
.header-title { font-size: 14px; font-weight: bold; color: #fff; }
|
||||
// ─────────────────────────────────────────────
|
||||
// Window margin (replaces calc() in geometry)
|
||||
// ─────────────────────────────────────────────
|
||||
.eww-bar {
|
||||
margin: 8px 10px 0 10px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
background: rgba(255,255,255,0.07);
|
||||
min-height: 1px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.sink-row {
|
||||
padding: 4px 0;
|
||||
.app-name { font-size: 12px; color: #aaa; min-width: 120px; }
|
||||
.app-vol { font-size: 12px; color: #33ccff; margin-left: auto; }
|
||||
.app-icon { font-size: 14px; color: #666; }
|
||||
}
|
||||
|
||||
.vol-slider {
|
||||
min-height: 20px;
|
||||
trough { background: rgba(255,255,255,0.1); border-radius: 4px; min-height: 4px; }
|
||||
highlight { background: linear-gradient(90deg, #33ccff, #00ff99); border-radius: 4px; }
|
||||
slider { background: #fff; border-radius: 50%; min-width: 12px; min-height: 12px; }
|
||||
}
|
||||
|
||||
.mute-btn {
|
||||
margin-top: 8px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
// ─────────────────────────────────────────────
|
||||
// Bar root
|
||||
// ─────────────────────────────────────────────
|
||||
.bar-left{
|
||||
background: $bg;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
padding: 0 10px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.bar-right, .bar-center {
|
||||
border-radius: 8px;
|
||||
padding: 0 10px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.bar-left { border-radius: 8px 8px 8px 8px; }
|
||||
.bar-center { border-radius: 8px; }
|
||||
.bar-right { border-radius: 8px 8px 8px 8px; }
|
||||
|
||||
// ─────────────────────────────────────────────
|
||||
// Workspaces
|
||||
// ─────────────────────────────────────────────
|
||||
.workspaces {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.workspace-btn {
|
||||
background: transparent;
|
||||
border-radius: 5px;
|
||||
color: $subtext;
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
padding: 2px 7px;
|
||||
margin: 2px 0px;
|
||||
transition: all 200ms ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(137, 180, 250, 0.12);
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(23, 142, 21, 0.778);
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
&.urgent {
|
||||
background: rgba(207, 42, 89, 0.732);
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────
|
||||
// Window title
|
||||
// ─────────────────────────────────────────────
|
||||
.window-title {
|
||||
padding-left: 4px;
|
||||
color: $subtext;
|
||||
|
||||
.window-icon {
|
||||
font-size: 11px;
|
||||
color: $accent2;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.window-text {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────
|
||||
// Clock
|
||||
// ─────────────────────────────────────────────
|
||||
.clock {
|
||||
padding: 0px 16px;
|
||||
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
border-radius: 8px;
|
||||
|
||||
.clock-time {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
color: $text;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.clock-sep {
|
||||
color: $border;
|
||||
}
|
||||
|
||||
.clock-date {
|
||||
font-size: 11px;
|
||||
color: $subtext;
|
||||
}
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────
|
||||
// Center buttons (logout / settings)
|
||||
// ─────────────────────────────────────────────
|
||||
.center-btn {
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
border-radius: 8px;
|
||||
color: $subtext;
|
||||
font-size: 13px;
|
||||
color: #aaa;
|
||||
&:hover { background: rgba(255,255,255,0.12); }
|
||||
&.muted { color: #ff5555; background: rgba(255,85,85,0.1); }
|
||||
}
|
||||
padding: 0px 16px;
|
||||
transition: all 150ms ease;
|
||||
|
||||
&:hover {
|
||||
color: $accent;
|
||||
background: rgba(137, 180, 250, 0.10);
|
||||
}
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────
|
||||
// Stat pills (cpu / mem / battery / network / volume)
|
||||
// ─────────────────────────────────────────────
|
||||
.stat-pill {
|
||||
background: $bg-surface;
|
||||
border-radius: 6px;
|
||||
border: 1px solid $border;
|
||||
padding: 2px 8px;
|
||||
color: $text;
|
||||
|
||||
.stat-icon {
|
||||
font-size: 12px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&.clickable {
|
||||
transition: background 150ms ease;
|
||||
&:hover {
|
||||
background: rgba(137, 180, 250, 0.14);
|
||||
}
|
||||
}
|
||||
|
||||
&.charging .stat-icon { color: $green; }
|
||||
&.warning .stat-icon { color: $yellow; }
|
||||
&.critical .stat-icon { color: $red; }
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────
|
||||
// Theme toggle
|
||||
// ─────────────────────────────────────────────
|
||||
.theme-btn {
|
||||
.theme-icon {
|
||||
font-size: 13px;
|
||||
color: $accent2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user