16.11.25
This commit is contained in:
parent
7f31258cae
commit
98ac3499d7
GPG key ID:
CC50156D9BDF5EFB
8 changed files with 208 additions and 985 deletions
377
waybar/style.css
377
waybar/style.css
|
|
@ -1,31 +1,9 @@
|
|||
/* =============================================================================
|
||||
WAYBAR STYLESHEET - GRUVBOX THEME
|
||||
A clean, compact design using the Gruvbox color palette
|
||||
Clean, compact design using the Gruvbox color palette
|
||||
Updated for Waybar 0.13.0+
|
||||
============================================================================= */
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
GRUVBOX COLOR PALETTE (for reference)
|
||||
----------------------------------------------------------------------------- */
|
||||
/*
|
||||
Background: #282828 (bg)
|
||||
Background 1: #3c3836 (bg1)
|
||||
Background 2: #504945 (bg2)
|
||||
Foreground: #ebdbb2 (fg)
|
||||
Gray: #928374 (gray)
|
||||
Red: #fb4934 (red)
|
||||
Green: #b8bb26 (green)
|
||||
Yellow: #fabd2f (yellow)
|
||||
Blue: #83a598 (blue)
|
||||
Purple: #d3869b (purple)
|
||||
Aqua: #8ec07c (aqua)
|
||||
Orange: #fe8019 (orange)
|
||||
|
||||
Standard padding: 2px 4px
|
||||
Extended padding: 0px 10px
|
||||
Standard margin: 4px
|
||||
Border radius: 6px
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
GLOBAL SETTINGS
|
||||
----------------------------------------------------------------------------- */
|
||||
|
|
@ -33,262 +11,195 @@
|
|||
font-family: "BlexMono Nerd Font Mono";
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #ebdbb2; /* Gruvbox foreground */
|
||||
color: #ebdbb2;
|
||||
}
|
||||
|
||||
/* Transparent Waybar background */
|
||||
#waybar {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
MODULE LAYOUTS & BACKGROUNDS
|
||||
----------------------------------------------------------------------------- */
|
||||
|
||||
/* Standard modules with full rounded corners */
|
||||
/* Standard modules with rounded corners */
|
||||
#workspaces,
|
||||
#window,
|
||||
#tray,
|
||||
#custom-keyboard {
|
||||
background-color: rgba(60, 56, 54, 0.85); /* bg1 with transparency */
|
||||
#custom-keyboard,
|
||||
#bluetooth,
|
||||
#custom-bitcoin {
|
||||
background-color: rgba(60, 56, 54, 0.85);
|
||||
padding: 2px 6px;
|
||||
margin-top: 2px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 4px;
|
||||
margin: 2px 4px 0;
|
||||
border-radius: 4px;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
#custom-keyboard,
|
||||
#bluetooth {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* Clock - right-side rounded */
|
||||
#clock {
|
||||
background-color: rgba(60, 56, 54, 0.85); /* bg1 with transparency */
|
||||
margin-top: 2px;
|
||||
margin-right: 2px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
border-width: 0px;
|
||||
/* Drawer wrapper modules */
|
||||
#backlight-wrapper,
|
||||
#pulseaudio-wrapper {
|
||||
background-color: rgba(60, 56, 54, 0.85);
|
||||
padding: 0 8px 0 10px;
|
||||
margin: 2px 4px 0 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#backlight,
|
||||
#pulseaudio{font-size: 1.4rem; padding-right: 4px;}
|
||||
|
||||
#custom-audio-settings,
|
||||
#custom-audio-mute{
|
||||
padding: 0px 12px;
|
||||
}
|
||||
|
||||
/* Left-side modules - rounded left edge */
|
||||
#network {
|
||||
background-color: rgba(60, 56, 54, 0.85); /* bg1 with transparency */
|
||||
margin-top: 2px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 2px;
|
||||
/* Clock - right edge */
|
||||
#custom-power {
|
||||
background-color: rgba(60, 56, 54, 0.85);
|
||||
margin: 2px 2px 0 0;
|
||||
padding: 2px 12px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Battery - left edge */
|
||||
#battery {
|
||||
background-color: rgba(60, 56, 54, 0.85);
|
||||
margin: 2px 0 0 2px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
/* Middle modules - no rounded edges */
|
||||
#bluetooth,
|
||||
#battery,
|
||||
#pulseaudio,
|
||||
#backlight,
|
||||
#temperature,
|
||||
#memory,
|
||||
#cpu,
|
||||
#custom-gpu-power,
|
||||
#custom-audio-settings,
|
||||
#custom-audio-mute
|
||||
{
|
||||
background-color: rgba(60, 56, 54, 0.85); /* bg1 with transparency */
|
||||
margin-top: 2px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
#clock,
|
||||
#custom-gpu-power {
|
||||
background-color: rgba(60, 56, 54, 0.85);
|
||||
margin: 2px 0 0;
|
||||
padding: 2px 6px;
|
||||
border-width: 0px;
|
||||
min-width: 18px;
|
||||
}
|
||||
|
||||
/* Audio settings icons */
|
||||
#custom-audio-settings,
|
||||
#custom-audio-mute {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
SLIDER STYLING - PROPER CSS NODES
|
||||
----------------------------------------------------------------------------- */
|
||||
|
||||
/* Slider containers */
|
||||
#pulseaudio-slider,
|
||||
#backlight-slider {
|
||||
background-color: rgba(60, 56, 54, 0.85);
|
||||
margin-top: 2px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
margin: 2px 0 0;
|
||||
padding: 2px 6px;
|
||||
border-width: 0px;
|
||||
min-width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide the actual slider handle */
|
||||
#pulseaudio-slider slider,
|
||||
#backlight-slider slider{
|
||||
min-height: 0px;
|
||||
min-width: 0px;
|
||||
#backlight-slider slider {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
opacity: 0;
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Trough - the unfilled background */
|
||||
#pulseaudio-slider trough,
|
||||
#backlight-slider trough {
|
||||
min-height: 8px;
|
||||
min-width: 80px;
|
||||
border-radius: 6px;
|
||||
background-color: #282828; /* bg - darker for contrast */
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
#pulseaudio-slider highlight,
|
||||
/* Highlight - the filled portion */
|
||||
#backlight-slider highlight {
|
||||
min-width: 4px;
|
||||
min-height: 8px;
|
||||
border-radius: 6px;
|
||||
background-color: #fabd2f; /* yellow - bright and visible */
|
||||
background-color: #fabd2f;
|
||||
}
|
||||
#pulseaudio-slider highlight{
|
||||
|
||||
#pulseaudio-slider highlight {
|
||||
min-width: 4px;
|
||||
min-height: 8px;
|
||||
border-radius: 6px;
|
||||
background-color: #8ec07c;
|
||||
}
|
||||
|
||||
#custom-audio-settings,
|
||||
#custom-audio-mute{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
POWER MANAGEMENT GROUP
|
||||
----------------------------------------------------------------------------- */
|
||||
|
||||
/* Power management drawer toggle button - standalone with full radius */
|
||||
#custom-power-button {
|
||||
background-color: rgba(60, 56, 54, 0.85); /* bg1 with transparency */
|
||||
margin-top: 2px;
|
||||
margin-right: 2px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 2px;
|
||||
padding: 2px 6px;
|
||||
border-width: 0px;
|
||||
border-radius: 4px;
|
||||
min-width: 18px;
|
||||
}
|
||||
|
||||
/* Lock button - first in power group, left rounded edge */
|
||||
#custom-lock {
|
||||
background-color: rgba(60, 56, 54, 0.85); /* bg1 with transparency */
|
||||
margin-top: 2px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 2px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
/* Reboot button - middle button, no rounded edges */
|
||||
#custom-reboot {
|
||||
background-color: rgba(60, 56, 54, 0.85); /* bg1 with transparency */
|
||||
margin-top: 2px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
padding: 2px 6px;
|
||||
border-width: 0px;
|
||||
border-radius: 0;
|
||||
min-width: 18px;
|
||||
}
|
||||
|
||||
/* Power button - last in group, right rounded edge */
|
||||
#custom-power {
|
||||
background-color: rgba(60, 56, 54, 0.85); /* bg1 with transparency */
|
||||
margin-top: 2px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
padding: 2px 6px;
|
||||
border-width: 0px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
min-width: 18px;
|
||||
}
|
||||
|
||||
.power-hidden:hover,
|
||||
#custom-power-button:hover .power-hidden,
|
||||
#custom-reboot:hover .power-hidden,
|
||||
#custom-power:hover .power-hidden,
|
||||
.backlight-hidden:hover,
|
||||
#backlight:hover .backlight-hidden,
|
||||
#backlight-slider:hover .power-hidden,
|
||||
.audio-hidden:hover,
|
||||
#pulseaudio:hover .audio-hidden,
|
||||
#pulseaudio-slider:hover .audio-hidden {
|
||||
opacity: 1;
|
||||
/* Drawer reveal on hover */
|
||||
.backlight-hidden,
|
||||
.audio-hidden {
|
||||
transition: opacity 300ms;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
WORKSPACES (NIRI)
|
||||
----------------------------------------------------------------------------- */
|
||||
|
||||
/* Default workspace buttons */
|
||||
/* Workspace buttons default state */
|
||||
#workspaces button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #928374; /* Gruvbox gray */
|
||||
color: #928374;
|
||||
padding: 1px 6px;
|
||||
margin: 0 1px;
|
||||
font-weight: 500;
|
||||
border-radius: 0;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
/* Hovered workspace */
|
||||
#workspaces button:hover {
|
||||
background-color: rgba(131, 165, 152, 0.2); /* Gruvbox aqua with transparency */
|
||||
background-color: rgba(131, 165, 152, 0.2);
|
||||
padding: 1px 6px;
|
||||
margin: 0 1px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Active workspace */
|
||||
/* Active workspace - clear distinct styling */
|
||||
#workspaces button.active {
|
||||
background-color: #83a598; /* Gruvbox blue */
|
||||
color: #282828; /* Gruvbox bg */
|
||||
background-color: #83a598;
|
||||
color: #282828;
|
||||
padding: 1px 6px;
|
||||
margin: 0 1px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Urgent workspace */
|
||||
#workspaces button.urgent {
|
||||
background-color: #fb4934; /* Gruvbox red */
|
||||
color: #282828; /* Gruvbox bg */
|
||||
background-color: #fb4934;
|
||||
color: #282828;
|
||||
padding: 1px 6px;
|
||||
margin: 0 1px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Empty workspace styling */
|
||||
#workspaces button.empty {
|
||||
color: #665c54;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
WINDOW TITLE
|
||||
----------------------------------------------------------------------------- */
|
||||
#window {
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
color: #ebdbb2; /* Gruvbox foreground */
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
CUSTOM MODULES - COLORS
|
||||
----------------------------------------------------------------------------- */
|
||||
|
||||
/* Lock button */
|
||||
#custom-lock {
|
||||
color: #8ec07c; /* Gruvbox aqua */
|
||||
}
|
||||
|
||||
/* Reboot button */
|
||||
#custom-reboot {
|
||||
color: #fabd2f; /* Gruvbox yellow */
|
||||
}
|
||||
|
||||
/* Power button */
|
||||
#custom-power {
|
||||
color: #fb4934; /* Gruvbox red */
|
||||
color: #ebdbb2;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
|
|
@ -297,121 +208,117 @@
|
|||
|
||||
/* Network */
|
||||
#network {
|
||||
color: #8ec07c; /* Gruvbox aqua */
|
||||
color: #8ec07c;
|
||||
}
|
||||
|
||||
/* Battery */
|
||||
/* Battery states */
|
||||
#battery {
|
||||
color: #b8bb26; /* Gruvbox green */
|
||||
color: #b8bb26;
|
||||
}
|
||||
|
||||
#battery.warning {
|
||||
color: #fabd2f; /* Gruvbox yellow */
|
||||
color: #fabd2f;
|
||||
}
|
||||
|
||||
#battery.critical {
|
||||
color: #fb4934; /* Gruvbox red */
|
||||
color: #fb4934;
|
||||
animation: blink 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Bluetooth */
|
||||
#bluetooth {
|
||||
color: #83a598; /* Gruvbox blue */
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Audio */
|
||||
#pulseaudio {
|
||||
color: #8ec07c; /* Gruvbox aqua */
|
||||
/* color: #8ec07c; */
|
||||
color: #ebdbb2;
|
||||
}
|
||||
|
||||
#pulseaudio.muted {
|
||||
color: #fb4934; /* Gruvbox red */
|
||||
color: #fb4934;
|
||||
}
|
||||
|
||||
/* Backlight */
|
||||
#backlight {
|
||||
color: #fabd2f; /* Gruvbox yellow */
|
||||
}
|
||||
/* #backlight {
|
||||
color: #fabd2f;
|
||||
} */
|
||||
|
||||
/* GPU Power */
|
||||
#custom-gpu-power {
|
||||
color: #83a598; /* Gruvbox blue */
|
||||
color: #83a598;
|
||||
}
|
||||
|
||||
/* Temperature */
|
||||
/* Temperature states */
|
||||
#temperature {
|
||||
color: #fe8019; /* Gruvbox orange */
|
||||
color: #fe8019;
|
||||
}
|
||||
|
||||
#temperature.warning {
|
||||
color: #fabd2f; /* Gruvbox yellow */
|
||||
color: #fabd2f;
|
||||
}
|
||||
|
||||
#temperature.critical {
|
||||
color: #fb4934; /* Gruvbox red */
|
||||
color: #fb4934;
|
||||
}
|
||||
|
||||
/* Memory */
|
||||
/* Memory states */
|
||||
#memory {
|
||||
color: #d3869b; /* Gruvbox purple */
|
||||
color: #d3869b;
|
||||
}
|
||||
|
||||
#memory.warning {
|
||||
color: #fabd2f; /* Gruvbox yellow */
|
||||
color: #fabd2f;
|
||||
}
|
||||
|
||||
#memory.critical {
|
||||
color: #fb4934; /* Gruvbox red */
|
||||
color: #fb4934;
|
||||
}
|
||||
|
||||
/* CPU */
|
||||
/* CPU states */
|
||||
#cpu {
|
||||
color: #fe8019; /* Gruvbox orange */
|
||||
color: #fe8019;
|
||||
}
|
||||
|
||||
#cpu.warning {
|
||||
color: #fabd2f; /* Gruvbox yellow */
|
||||
color: #fabd2f;
|
||||
}
|
||||
|
||||
#cpu.critical {
|
||||
color: #fb4934; /* Gruvbox red */
|
||||
color: #fb4934;
|
||||
}
|
||||
|
||||
/* Clock */
|
||||
#clock {
|
||||
color: #d3869b; /* Gruvbox purple */
|
||||
color: #8ec07c;
|
||||
}
|
||||
|
||||
/* System tray */
|
||||
/* -----------------------------------------------------------------------------
|
||||
SYSTEM TRAY
|
||||
----------------------------------------------------------------------------- */
|
||||
#tray {
|
||||
background-color: rgba(60, 56, 54, 0.85); /* bg1 with transparency */
|
||||
background-color: rgba(60, 56, 54, 0.85);
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
#tray > .passive {
|
||||
padding: 1px 3px;
|
||||
margin-top: 0;
|
||||
margin-right: 1px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
#tray > .needs-attention {
|
||||
padding: 1px 3px;
|
||||
margin-top: 0;
|
||||
margin-right: 1px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 1px;
|
||||
background-color: #fb4934; /* Gruvbox red */
|
||||
color: #282828; /* Gruvbox bg */
|
||||
border-radius: 3px;
|
||||
margin: 0 1px;
|
||||
}
|
||||
|
||||
#tray > .active {
|
||||
padding: 1px 3px;
|
||||
margin-top: 0;
|
||||
margin-right: 1px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 1px;
|
||||
margin: 0 1px;
|
||||
}
|
||||
|
||||
#tray > .needs-attention {
|
||||
padding: 1px 3px;
|
||||
margin: 0 1px;
|
||||
background-color: #fb4934;
|
||||
color: #282828;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
|
|
@ -419,21 +326,15 @@
|
|||
----------------------------------------------------------------------------- */
|
||||
#bluetooth:hover,
|
||||
#network:hover,
|
||||
#backlight:hover,
|
||||
#custom-audio-settings:hover,
|
||||
#custom-audio-mute:hover,
|
||||
#battery:hover,
|
||||
#pulseaudio:hover,
|
||||
#temperature:hover,
|
||||
#memory:hover,
|
||||
#cpu:hover,
|
||||
#clock:hover,
|
||||
#custom-lock:hover,
|
||||
#custom-reboot:hover,
|
||||
#custom-power:hover,
|
||||
#custom-power-button:hover,
|
||||
#window:hover {
|
||||
background-color: rgba(80, 73, 69, 0.9); /* Gruvbox bg2 */
|
||||
background-color: rgba(80, 73, 69, 0.9);
|
||||
transition: background-color 200ms ease;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue