CSS cleanup
This commit is contained in:
soraefir
@@ -2,21 +2,21 @@ calendar {
|
||||
padding: 5pt;
|
||||
|
||||
:selected {
|
||||
color: $base0C;
|
||||
@include color-accent;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: $base05;
|
||||
@include color-body;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: $base0C;
|
||||
@include color-accent;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 20pt;
|
||||
color: $base0C;
|
||||
@include color-accent;
|
||||
}
|
||||
|
||||
:indeterminate {
|
||||
@@ -35,9 +35,9 @@ calendar {
|
||||
|
||||
|
||||
.date {
|
||||
color: $base0C;
|
||||
background-color: $base01;
|
||||
border-radius: $border-radius;
|
||||
@include color-accent;
|
||||
@include background-base;
|
||||
@include border-radius;
|
||||
}
|
||||
|
||||
.datetime {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Bar icons
|
||||
.net-icon { font-size: 14px; padding: 3pt 0; }
|
||||
.net-active, .blt-on { color: $base07; }
|
||||
.net-dim { color: $base02; }
|
||||
.blt-connected { color: $base0D; }
|
||||
.net-active, .blt-on { @include color-base; }
|
||||
.net-dim { @include color-inactive; }
|
||||
.blt-connected { @include color-accent; }
|
||||
|
||||
// Popup window section accents
|
||||
.wifi-accent { background-color: $base0C; }
|
||||
@@ -11,27 +11,26 @@
|
||||
.usb-accent { background-color: $base09; }
|
||||
|
||||
// Netinfo rows
|
||||
.netinfo-row { margin-bottom: 3pt; }
|
||||
.netinfo-label { font-size: 0.72em; color: $base04; min-width: 60px; }
|
||||
.netinfo-value { font-size: 0.72em; color: $base05; }
|
||||
.netinfo-dim { font-size: 0.72em; color: $base03; margin-bottom: 4pt; }
|
||||
.netinfo-row { margin-bottom: 3pt; }
|
||||
.netinfo-label, .netinfo-value, .netinfo-dim { font-size: 0.72em; }
|
||||
.netinfo-label { @include color-active; min-width: 60px; }
|
||||
.netinfo-value { @include color-body; }
|
||||
.netinfo-dim { color: $base03; margin-bottom: 4pt; }
|
||||
|
||||
// Section toggle button
|
||||
.net-toggle-btn {
|
||||
padding: 2pt 4pt;
|
||||
border-radius: $border-radius;
|
||||
@include border-radius;
|
||||
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
|
||||
.bt-device-row { margin-bottom: 4pt; }
|
||||
.bt-device-name { font-size: 0.78em; color: $base05; }
|
||||
.bt-device-btn { padding: 2pt 6pt; border-radius: $border-radius; font-size: 1em; }
|
||||
.bt-device-btn:hover { background-color: $base02; }
|
||||
.bt-btn-on { color: $base0D; }
|
||||
.bt-btn-off { color: $base03; }
|
||||
.bt-device-name { font-size: 0.78em; @include color-body; }
|
||||
.bt-device-btn { padding: 2pt 6pt; @include border-radius; font-size: 1em; }
|
||||
|
||||
// Shared button states
|
||||
.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; }
|
||||
|
||||
@@ -1,26 +1,21 @@
|
||||
.powermenu-box {
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
margin:0 0 0 0;
|
||||
}
|
||||
padding: 3rem 2.5rem;
|
||||
margin: 0;
|
||||
|
||||
.powermenu-entry {
|
||||
.powermenu-entry {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.powermenu-button {
|
||||
background-color: $base02;
|
||||
border-radius: 1rem;
|
||||
transition: 0.3s;
|
||||
padding: 3.25rem 4rem;
|
||||
}
|
||||
.powermenu-button {
|
||||
@include background-active;
|
||||
border-radius: 1rem;
|
||||
transition: 0.3s;
|
||||
padding: 3.25rem 4rem;
|
||||
|
||||
.powermenu-button:hover {
|
||||
background-color:$base03;
|
||||
}
|
||||
&:hover { background-color: $base03; }
|
||||
}
|
||||
}
|
||||
|
||||
.powermenu-icon {
|
||||
.powermenu-icon {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,74 +1,66 @@
|
||||
.radio-win {
|
||||
//margin: $gaps-screen;
|
||||
//padding: .5em;
|
||||
//margin: $gaps-screen;
|
||||
//padding: .5em;
|
||||
}
|
||||
|
||||
.album_art, .station_art {
|
||||
background-repeat: no-repeat;
|
||||
@include border-radius;
|
||||
}
|
||||
|
||||
.album_art {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 240px;
|
||||
min-height: 240px;
|
||||
min-width: 240px;
|
||||
margin: $gaps-screen;
|
||||
border-radius: $border-radius;
|
||||
background-size: 240px;
|
||||
min-height: 240px;
|
||||
min-width: 240px;
|
||||
margin: $gaps-screen;
|
||||
}
|
||||
|
||||
.song {
|
||||
color: $base0C;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 20px 0px 0px 0px;
|
||||
@include color-accent;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
.artist {
|
||||
color: $base0E;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
margin: 0px 0px $gaps-screen 0px;
|
||||
color: $base0E;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
margin: 0 0 $gaps-screen;
|
||||
}
|
||||
|
||||
.btn_bar {
|
||||
color: $base05;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin: $gaps-screen 0px;
|
||||
@include color-body;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin: $gaps-screen 0;
|
||||
}
|
||||
|
||||
.btn_play {
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
margin: 0 12px;
|
||||
}
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
margin: 0 12px;
|
||||
|
||||
.btn_play:hover {
|
||||
color: $base07;
|
||||
&:hover { @include color-base; }
|
||||
}
|
||||
|
||||
|
||||
.station_list {
|
||||
border-right-color: $base03;
|
||||
border-right-style: solid;
|
||||
border-right-width: $border-width;
|
||||
margin-right: $gaps-screen;
|
||||
border-right: $border-width solid $base03;
|
||||
margin-right: $gaps-screen;
|
||||
}
|
||||
|
||||
.station_art {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50px;
|
||||
min-height: 50px;
|
||||
min-width: 50px;
|
||||
margin: $gaps-window;
|
||||
margin-right: $gaps-screen;
|
||||
background-color: $base00;
|
||||
border-radius: $border-radius;
|
||||
border-color: $base00;
|
||||
border-style: solid;
|
||||
border-width: $border-width;
|
||||
}
|
||||
background-size: 50px;
|
||||
min-height: 50px;
|
||||
min-width: 50px;
|
||||
margin: $gaps-window;
|
||||
margin-right: $gaps-screen;
|
||||
@include background-base;
|
||||
border: $border-width solid $base00;
|
||||
|
||||
.station_art:hover {
|
||||
border-color: $base04;
|
||||
&:hover { border-color: $base04; }
|
||||
}
|
||||
|
||||
.station_sel {
|
||||
border-color: $base03;
|
||||
}
|
||||
border-color: $base03;
|
||||
}
|
||||
|
||||
@@ -4,26 +4,18 @@
|
||||
.gpubar { color: $base0E; }
|
||||
.membar { color: $base08; }
|
||||
.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
|
||||
.sys-win {
|
||||
padding: 10pt;
|
||||
}
|
||||
|
||||
.sys-section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sys-section-header {
|
||||
margin-bottom: 10pt;
|
||||
}
|
||||
// Window chrome
|
||||
.sys-win { padding: 10pt; }
|
||||
.sys-section { margin-bottom: 0; }
|
||||
.sys-section-header { margin-bottom: 10pt; }
|
||||
|
||||
.sys-label {
|
||||
font-size: 0.72em;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.14em;
|
||||
color: $base05;
|
||||
@include color-body;
|
||||
}
|
||||
|
||||
.section-accent {
|
||||
@@ -38,116 +30,64 @@
|
||||
.bat-accent { background-color: $base0B; }
|
||||
|
||||
.section-sep {
|
||||
background-color: $base02;
|
||||
@include background-active;
|
||||
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,
|
||||
.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
|
||||
.cpu-usage-ring { color: $base0C; margin: 3pt; }
|
||||
// Ring colors
|
||||
.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
|
||||
// 0% = cpu min freq, 100% = cpu max freq
|
||||
.cpu-freq-ring { color: $base0D; margin: 12px; }
|
||||
// Ring margins — freq rings use larger margins for concentric overlay effect
|
||||
.cpu-usage-ring, .gpu-ring { margin: 3pt; }
|
||||
.ram-ring, .bat-ring { margin: 4pt; }
|
||||
.swap-ring { margin: 3.5pt; }
|
||||
.cpu-freq-ring { margin: 12px; }
|
||||
.gpu-freq-ring { margin: 13px; }
|
||||
|
||||
.cpu-core-label {
|
||||
font-size: 0.7em;
|
||||
color: $base05;
|
||||
}
|
||||
// Shared label patterns
|
||||
.gpu-ring-value, .gpu-stat-value, .ram-used-label { font-weight: bold; @include color-body; }
|
||||
.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 { color: $base0E; margin: 3pt; }
|
||||
.gpu-freq-ring { color: $base0D; margin: 13px; }
|
||||
.gpu-ring-label, .gpu-stat-label,
|
||||
.vram-usage-label, .swap-section-label { font-size: 0.62em; @include color-active; }
|
||||
.gpu-ring-label, .vram-usage-label, .swap-section-label { margin-top: 2pt; }
|
||||
|
||||
.gpu-ring-value {
|
||||
font-size: 0.82em;
|
||||
font-weight: bold;
|
||||
color: $base05;
|
||||
}
|
||||
|
||||
.gpu-ring-label {
|
||||
font-size: 0.62em;
|
||||
color: $base04;
|
||||
margin-top: 2pt;
|
||||
}
|
||||
.cpu-core-label { font-size: 0.7em; @include color-active; }
|
||||
.bat-ring-label { font-size: 0.7em; @include color-body; }
|
||||
.ram-total-label { font-size: 0.72em; @include color-active; }
|
||||
|
||||
// GPU stats row
|
||||
.gpu-stats-row {
|
||||
margin-top: 6pt;
|
||||
margin-bottom: 2pt;
|
||||
}
|
||||
.gpu-stats-row { margin-top: 6pt; margin-bottom: 2pt; }
|
||||
|
||||
.gpu-stat-value {
|
||||
font-size: 0.85em;
|
||||
font-weight: bold;
|
||||
color: $base05;
|
||||
}
|
||||
|
||||
.gpu-stat-label {
|
||||
font-size: 0.62em;
|
||||
color: $base04;
|
||||
}
|
||||
|
||||
// VRAM bar
|
||||
.vram-row {
|
||||
margin-top: 6pt;
|
||||
}
|
||||
// VRAM
|
||||
.vram-row { margin-top: 6pt; }
|
||||
|
||||
.vram-bar {
|
||||
background-color: $bg0;
|
||||
border-radius: $border-radius;
|
||||
padding: 4pt;
|
||||
@include border-radius;
|
||||
padding: 2pt;
|
||||
}
|
||||
|
||||
.vram-bar trough * {
|
||||
background-color: $base0E;
|
||||
border-radius: $border-radius;
|
||||
@include border-radius;
|
||||
}
|
||||
|
||||
.vram-usage-label {
|
||||
font-size: 0.62em;
|
||||
color: $base04;
|
||||
margin-top: 2pt;
|
||||
}
|
||||
|
||||
// RAM ring
|
||||
.ram-ring { color: $base08; margin: 4pt; }
|
||||
|
||||
// RAM cached ring overrides group background
|
||||
.ram-cached-ring {
|
||||
color: $base02;
|
||||
@include color-active;
|
||||
background-color: transparent;
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -1,35 +1,28 @@
|
||||
.tray * {
|
||||
padding: $border-width 0px;
|
||||
padding: $border-width 0;
|
||||
}
|
||||
|
||||
.tray menu {
|
||||
background-color: $base01;
|
||||
color: $base07;
|
||||
@include border-radius;
|
||||
@include border-active;
|
||||
@include border-radius;
|
||||
@include border-active;
|
||||
@include background-base;
|
||||
@include color-base;
|
||||
|
||||
padding: 10px 0;
|
||||
|
||||
padding: 10px 0px;
|
||||
> menuitem {
|
||||
margin: 2px $border-width;
|
||||
padding: 0 10px;
|
||||
|
||||
>menuitem {
|
||||
margin: 2px $border-width;
|
||||
padding: 0px 10px;
|
||||
&:disabled label { @include color-active; }
|
||||
&:hover { @include background-accent; }
|
||||
}
|
||||
|
||||
&:disabled label {
|
||||
color: $base04;
|
||||
}
|
||||
separator {
|
||||
@include background-active;
|
||||
padding-top: 1px;
|
||||
margin: 10px 0;
|
||||
|
||||
&:hover {
|
||||
background-color: $base0C;
|
||||
}
|
||||
}
|
||||
|
||||
separator {
|
||||
background-color: $base03;
|
||||
padding-top: 1px;
|
||||
margin:10px 0px;
|
||||
|
||||
&:last-child {
|
||||
padding: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child { padding: unset; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,6 +18,47 @@
|
||||
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 */
|
||||
|
||||
* {
|
||||
@@ -27,9 +68,9 @@
|
||||
}
|
||||
|
||||
tooltip {
|
||||
background: $base01;
|
||||
border: $border-width solid $base04;
|
||||
border-radius: $border-radius;
|
||||
@include border-active;
|
||||
@include border-radius;
|
||||
@include background-base;
|
||||
|
||||
label {
|
||||
font-size: 1rem;
|
||||
@@ -55,10 +96,7 @@ tooltip {
|
||||
/* WINDOW WRAPPER CSS */
|
||||
|
||||
.winevent {
|
||||
background-color: $base01;
|
||||
color: $base07;
|
||||
@include border-radius;
|
||||
@include border-inactive;
|
||||
@include panel-base;
|
||||
}
|
||||
.winevent:hover {
|
||||
@include border-active;
|
||||
@@ -74,19 +112,12 @@ tooltip {
|
||||
/* MODULE WRAPPER CSS */
|
||||
|
||||
.modevent {
|
||||
background-color: $base01;
|
||||
color: $base07;
|
||||
@include border-radius;
|
||||
@include border-inactive;
|
||||
border-right-style: none;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
@include panel-base;
|
||||
@include mod-edge;
|
||||
}
|
||||
.modevent:hover {
|
||||
@include border-active;
|
||||
border-right-style: none;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
@include mod-edge;
|
||||
}
|
||||
|
||||
.modinner {
|
||||
|
||||
@@ -16,8 +16,18 @@ emit() {
|
||||
}
|
||||
|
||||
emit
|
||||
bluetoothctl monitor 2>/dev/null | while IFS= read -r line; do
|
||||
case "$line" in
|
||||
*"Powered"*|*"Connected"*|*"Device"*) emit ;;
|
||||
esac
|
||||
|
||||
tmp=$(mktemp -d)
|
||||
pipe="$tmp/bt-dev-events"
|
||||
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
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
|
||||
|
||||
startupScript = pkgs.writeShellScriptBin "hyprland-start" ''
|
||||
eww open bar &
|
||||
awww-daemon &
|
||||
|
||||
sleep 2
|
||||
|
||||
Reference in New Issue
Block a user