CSS cleanup

This commit is contained in:
soraefir
2026-06-13 10:56:25 +02:00
parent ce804942a9
commit da76e6c12a
9 changed files with 202 additions and 241 deletions

View File

@@ -2,21 +2,21 @@ calendar {
padding: 5pt; padding: 5pt;
:selected { :selected {
color: $base0C; @include color-accent;
} }
.header { .header {
color: $base05; @include color-body;
} }
.highlight { .highlight {
color: $base0C; @include color-accent;
font-weight: bold; font-weight: bold;
} }
label { label {
font-size: 20pt; font-size: 20pt;
color: $base0C; @include color-accent;
} }
:indeterminate { :indeterminate {
@@ -35,9 +35,9 @@ calendar {
.date { .date {
color: $base0C; @include color-accent;
background-color: $base01; @include background-base;
border-radius: $border-radius; @include border-radius;
} }
.datetime { .datetime {

View File

@@ -1,8 +1,8 @@
// Bar icons // Bar icons
.net-icon { font-size: 14px; padding: 3pt 0; } .net-icon { font-size: 14px; padding: 3pt 0; }
.net-active, .blt-on { color: $base07; } .net-active, .blt-on { @include color-base; }
.net-dim { color: $base02; } .net-dim { @include color-inactive; }
.blt-connected { color: $base0D; } .blt-connected { @include color-accent; }
// Popup window section accents // Popup window section accents
.wifi-accent { background-color: $base0C; } .wifi-accent { background-color: $base0C; }
@@ -11,27 +11,26 @@
.usb-accent { background-color: $base09; } .usb-accent { background-color: $base09; }
// Netinfo rows // Netinfo rows
.netinfo-row { margin-bottom: 3pt; } .netinfo-row { margin-bottom: 3pt; }
.netinfo-label { font-size: 0.72em; color: $base04; min-width: 60px; } .netinfo-label, .netinfo-value, .netinfo-dim { font-size: 0.72em; }
.netinfo-value { font-size: 0.72em; color: $base05; } .netinfo-label { @include color-active; min-width: 60px; }
.netinfo-dim { font-size: 0.72em; color: $base03; margin-bottom: 4pt; } .netinfo-value { @include color-body; }
.netinfo-dim { color: $base03; margin-bottom: 4pt; }
// Section toggle button // Section toggle button
.net-toggle-btn { .net-toggle-btn {
padding: 2pt 4pt; padding: 2pt 4pt;
border-radius: $border-radius; @include border-radius;
font-size: 1.1em; font-size: 1.1em;
} }
.net-toggle-btn:hover { background-color: $base02; }
.net-toggle-on { color: $base07; }
.net-toggle-on:hover { color: $base06; }
.net-toggle-off { color: $base03; }
.net-toggle-off:hover { color: $base05; }
// Bluetooth device list // Bluetooth device list
.bt-device-row { margin-bottom: 4pt; } .bt-device-row { margin-bottom: 4pt; }
.bt-device-name { font-size: 0.78em; color: $base05; } .bt-device-name { font-size: 0.78em; @include color-body; }
.bt-device-btn { padding: 2pt 6pt; border-radius: $border-radius; font-size: 1em; } .bt-device-btn { padding: 2pt 6pt; @include border-radius; font-size: 1em; }
.bt-device-btn:hover { background-color: $base02; }
.bt-btn-on { color: $base0D; } // Shared button states
.bt-btn-off { color: $base03; } .net-toggle-btn:hover,
.bt-device-btn:hover { @include background-active; }
.net-toggle-on, .bt-btn-on { @include color-base; }
.net-toggle-off, .bt-btn-off { @include color-inactive; }

View File

@@ -1,26 +1,21 @@
.powermenu-box { .powermenu-box {
padding-left: 2.5rem; padding: 3rem 2.5rem;
padding-right: 2.5rem; margin: 0;
padding-top: 3rem;
padding-bottom: 3rem;
margin:0 0 0 0;
}
.powermenu-entry { .powermenu-entry {
margin: 0 0.5rem; margin: 0 0.5rem;
}
.powermenu-button { .powermenu-button {
background-color: $base02; @include background-active;
border-radius: 1rem; border-radius: 1rem;
transition: 0.3s; transition: 0.3s;
padding: 3.25rem 4rem; padding: 3.25rem 4rem;
}
.powermenu-button:hover { &:hover { background-color: $base03; }
background-color:$base03; }
} }
.powermenu-icon { .powermenu-icon {
font-size: 4rem; font-size: 4rem;
} }
}

View File

@@ -1,74 +1,66 @@
.radio-win { .radio-win {
//margin: $gaps-screen; //margin: $gaps-screen;
//padding: .5em; //padding: .5em;
}
.album_art, .station_art {
background-repeat: no-repeat;
@include border-radius;
} }
.album_art { .album_art {
background-repeat: no-repeat; background-size: 240px;
background-size: 240px; min-height: 240px;
min-height: 240px; min-width: 240px;
min-width: 240px; margin: $gaps-screen;
margin: $gaps-screen;
border-radius: $border-radius;
} }
.song { .song {
color: $base0C; @include color-accent;
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
margin: 20px 0px 0px 0px; margin: 20px 0 0;
} }
.artist { .artist {
color: $base0E; color: $base0E;
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
margin: 0px 0px $gaps-screen 0px; margin: 0 0 $gaps-screen;
} }
.btn_bar { .btn_bar {
color: $base05; @include color-body;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
margin: $gaps-screen 0px; margin: $gaps-screen 0;
} }
.btn_play { .btn_play {
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
margin: 0 12px; margin: 0 12px;
}
.btn_play:hover { &:hover { @include color-base; }
color: $base07;
} }
.station_list { .station_list {
border-right-color: $base03; border-right: $border-width solid $base03;
border-right-style: solid; margin-right: $gaps-screen;
border-right-width: $border-width;
margin-right: $gaps-screen;
} }
.station_art { .station_art {
background-repeat: no-repeat; background-size: 50px;
background-size: 50px; min-height: 50px;
min-height: 50px; min-width: 50px;
min-width: 50px; margin: $gaps-window;
margin: $gaps-window; margin-right: $gaps-screen;
margin-right: $gaps-screen; @include background-base;
background-color: $base00; border: $border-width solid $base00;
border-radius: $border-radius;
border-color: $base00;
border-style: solid;
border-width: $border-width;
}
.station_art:hover { &:hover { border-color: $base04; }
border-color: $base04;
} }
.station_sel { .station_sel {
border-color: $base03; border-color: $base03;
} }

View File

@@ -4,26 +4,18 @@
.gpubar { color: $base0E; } .gpubar { color: $base0E; }
.membar { color: $base08; } .membar { color: $base08; }
.batbar { color: $base0B; } .batbar { color: $base0B; }
.cpubar, .gpubar, .membar, .batbar { background-color: $bg0; margin: $gaps-window 0; } .cpubar, .gpubar, .membar, .batbar { @include background-base2; margin: $gaps-window 0; }
// Window // Window chrome
.sys-win { .sys-win { padding: 10pt; }
padding: 10pt; .sys-section { margin-bottom: 0; }
} .sys-section-header { margin-bottom: 10pt; }
.sys-section {
margin-bottom: 0;
}
.sys-section-header {
margin-bottom: 10pt;
}
.sys-label { .sys-label {
font-size: 0.72em; font-size: 0.72em;
font-weight: bold; font-weight: bold;
letter-spacing: 0.14em; letter-spacing: 0.14em;
color: $base05; @include color-body;
} }
.section-accent { .section-accent {
@@ -38,116 +30,64 @@
.bat-accent { background-color: $base0B; } .bat-accent { background-color: $base0B; }
.section-sep { .section-sep {
background-color: $base02; @include background-active;
min-height: 2px; min-height: 2px;
margin: 6pt 0 10pt 0; margin: 6pt 0 10pt;
} }
// All rings share the same track background // All rings and progress tracks share the same background
.cpu-usage-ring, .cpu-freq-ring, .cpu-usage-ring, .cpu-freq-ring,
.gpu-ring, .gpu-freq-ring, .gpu-ring, .gpu-freq-ring,
.ram-ring, .swap-ring, .bat-ring { background-color: $bg0; } .ram-ring, .swap-ring, .bat-ring,
.vram-bar { @include background-base2; }
// CPU grid // Ring colors
.cpu-usage-ring { color: $base0C; margin: 3pt; } .cpu-usage-ring { color: $base0C; }
.cpu-freq-ring, .gpu-freq-ring { color: $base0D; }
.gpu-ring { color: $base0E; }
.ram-ring { color: $base08; }
.swap-ring { color: $base09; }
// Inner freq ring margin shrinks it inside overlay for concentric effect // Ring margins — freq rings use larger margins for concentric overlay effect
// 0% = cpu min freq, 100% = cpu max freq .cpu-usage-ring, .gpu-ring { margin: 3pt; }
.cpu-freq-ring { color: $base0D; margin: 12px; } .ram-ring, .bat-ring { margin: 4pt; }
.swap-ring { margin: 3.5pt; }
.cpu-freq-ring { margin: 12px; }
.gpu-freq-ring { margin: 13px; }
.cpu-core-label { // Shared label patterns
font-size: 0.7em; .gpu-ring-value, .gpu-stat-value, .ram-used-label { font-weight: bold; @include color-body; }
color: $base05; .gpu-ring-value { font-size: 0.82em; }
} .gpu-stat-value { font-size: 0.85em; }
.ram-used-label { font-size: 0.95em; }
// GPU rings .gpu-ring-label, .gpu-stat-label,
.gpu-ring { color: $base0E; margin: 3pt; } .vram-usage-label, .swap-section-label { font-size: 0.62em; @include color-active; }
.gpu-freq-ring { color: $base0D; margin: 13px; } .gpu-ring-label, .vram-usage-label, .swap-section-label { margin-top: 2pt; }
.gpu-ring-value { .cpu-core-label { font-size: 0.7em; @include color-active; }
font-size: 0.82em; .bat-ring-label { font-size: 0.7em; @include color-body; }
font-weight: bold; .ram-total-label { font-size: 0.72em; @include color-active; }
color: $base05;
}
.gpu-ring-label {
font-size: 0.62em;
color: $base04;
margin-top: 2pt;
}
// GPU stats row // GPU stats row
.gpu-stats-row { .gpu-stats-row { margin-top: 6pt; margin-bottom: 2pt; }
margin-top: 6pt;
margin-bottom: 2pt;
}
.gpu-stat-value { // VRAM
font-size: 0.85em; .vram-row { margin-top: 6pt; }
font-weight: bold;
color: $base05;
}
.gpu-stat-label {
font-size: 0.62em;
color: $base04;
}
// VRAM bar
.vram-row {
margin-top: 6pt;
}
.vram-bar { .vram-bar {
background-color: $bg0; @include border-radius;
border-radius: $border-radius; padding: 2pt;
padding: 4pt;
} }
.vram-bar trough * { .vram-bar trough * {
background-color: $base0E; background-color: $base0E;
border-radius: $border-radius; @include border-radius;
} }
.vram-usage-label { // RAM cached ring overrides group background
font-size: 0.62em;
color: $base04;
margin-top: 2pt;
}
// RAM ring
.ram-ring { color: $base08; margin: 4pt; }
.ram-cached-ring { .ram-cached-ring {
color: $base02; @include color-active;
background-color: transparent; background-color: transparent;
margin: 4pt; margin: 4pt;
} }
.ram-used-label {
font-size: 0.95em;
font-weight: bold;
color: $base05;
}
.ram-total-label {
font-size: 0.72em;
color: $base04;
}
// Swap ring
.swap-ring { color: $base09; margin: 3pt; }
.swap-section-label {
font-size: 0.62em;
color: $base04;
margin-top: 2pt;
}
// Battery ring
.bat-ring { margin: 4pt; }
.bat-ring-label {
font-size: 0.7em;
color: $base05;
}

View File

@@ -1,35 +1,28 @@
.tray * { .tray * {
padding: $border-width 0px; padding: $border-width 0;
} }
.tray menu { .tray menu {
background-color: $base01; @include border-radius;
color: $base07; @include border-active;
@include border-radius; @include background-base;
@include border-active; @include color-base;
padding: 10px 0;
padding: 10px 0px; > menuitem {
margin: 2px $border-width;
padding: 0 10px;
>menuitem { &:disabled label { @include color-active; }
margin: 2px $border-width; &:hover { @include background-accent; }
padding: 0px 10px; }
&:disabled label { separator {
color: $base04; @include background-active;
} padding-top: 1px;
margin: 10px 0;
&:hover { &:last-child { padding: unset; }
background-color: $base0C; }
} }
}
separator {
background-color: $base03;
padding-top: 1px;
margin:10px 0px;
&:last-child {
padding: unset;
}
}
}

View File

@@ -18,6 +18,47 @@
border-color: $base04; border-color: $base04;
} }
@mixin background-base {
background-color: $base01;
}
@mixin background-base2 {
background-color: $base02;
}
@mixin background-active {
background-color: $base04;
}
@mixin background-accent {
background-color: $base0C;
}
@mixin color-base {
color: $base07;
}
@mixin color-inactive {
color: $base02;
}
@mixin color-active {
color: $base04;
}
@mixin color-accent {
color: $base0C;
}
@mixin color-body {
color: $base05;
}
@mixin panel-base {
@include border-radius;
@include border-inactive;
@include background-base;
@include color-base;
}
@mixin mod-edge {
border-right-style: none;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
/* GENERAL */ /* GENERAL */
* { * {
@@ -27,9 +68,9 @@
} }
tooltip { tooltip {
background: $base01; @include border-active;
border: $border-width solid $base04; @include border-radius;
border-radius: $border-radius; @include background-base;
label { label {
font-size: 1rem; font-size: 1rem;
@@ -55,10 +96,7 @@ tooltip {
/* WINDOW WRAPPER CSS */ /* WINDOW WRAPPER CSS */
.winevent { .winevent {
background-color: $base01; @include panel-base;
color: $base07;
@include border-radius;
@include border-inactive;
} }
.winevent:hover { .winevent:hover {
@include border-active; @include border-active;
@@ -74,19 +112,12 @@ tooltip {
/* MODULE WRAPPER CSS */ /* MODULE WRAPPER CSS */
.modevent { .modevent {
background-color: $base01; @include panel-base;
color: $base07; @include mod-edge;
@include border-radius;
@include border-inactive;
border-right-style: none;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
} }
.modevent:hover { .modevent:hover {
@include border-active; @include border-active;
border-right-style: none; @include mod-edge;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
} }
.modinner { .modinner {

View File

@@ -16,8 +16,18 @@ emit() {
} }
emit emit
bluetoothctl monitor 2>/dev/null | while IFS= read -r line; do
case "$line" in tmp=$(mktemp -d)
*"Powered"*|*"Connected"*|*"Device"*) emit ;; pipe="$tmp/bt-dev-events"
esac mkfifo "$pipe"
trap 'rm -rf "$tmp"; kill 0 2>/dev/null' EXIT INT TERM
# Poll every 3s as fallback for missed events
(while true; do sleep 3; echo poll; done) > "$pipe" &
# Reactive updates from D-Bus
(bluetoothctl monitor 2>/dev/null | grep --line-buffered -E "Connected|Device|Powered") > "$pipe" &
while IFS= read -r _ < "$pipe"; do
emit
done done

View File

@@ -24,6 +24,7 @@
startupScript = pkgs.writeShellScriptBin "hyprland-start" '' startupScript = pkgs.writeShellScriptBin "hyprland-start" ''
eww open bar &
awww-daemon & awww-daemon &
sleep 2 sleep 2