feat: new waybar
This commit is contained in:
12
waybar/style/colors.css
Normal file
12
waybar/style/colors.css
Normal file
@@ -0,0 +1,12 @@
|
||||
@define-color bg-panel rgba(28, 28, 28, 0.81);
|
||||
@define-color text-secondary rgba(86, 86, 86, 0.81);
|
||||
@define-color bg-opaque rgba(23, 28, 39, 0.8);
|
||||
@define-color border-color-section rgba(0,0,0,0);
|
||||
@define-color border-color rgba(90, 104, 115, 0.8); /* Matches --noti-border-color */
|
||||
@define-color text-primary #ffffff;
|
||||
@define-color text-secondary alpha(@text-primary,.2);
|
||||
@define-color accent #E83C82;
|
||||
@define-color attention #FFFF00;
|
||||
@define-color warning #FFAA00;
|
||||
@define-color danger #FF0000;
|
||||
@define-color success #00FF00;
|
||||
366
waybar/style/style_bottom.css
Normal file
366
waybar/style/style_bottom.css
Normal file
@@ -0,0 +1,366 @@
|
||||
/* --------------------------------------------------------------------------
|
||||
IMPORTS & GLOBAL STYLES
|
||||
-------------------------------------------------------------------------- */
|
||||
@import "colors.css";
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
BASE CONTAINER
|
||||
-------------------------------------------------------------------------- */
|
||||
window#waybar {
|
||||
/* Layout & Box Model */
|
||||
/* border: 1px solid @border-color; */
|
||||
/* border-bottom: none; */
|
||||
/* border-radius: 10px 10px 0 0; */
|
||||
|
||||
/* Typography */
|
||||
font-family: "Iosevka Nerd Font Propo";
|
||||
font-size: 15px;
|
||||
|
||||
/* Colors */
|
||||
background-color: transparent;
|
||||
/* color: @text-primary; */
|
||||
|
||||
/* Effects & Transitions */
|
||||
/* transition-property: background-color; */
|
||||
/* transition-duration: 0.5s; */
|
||||
}
|
||||
|
||||
/* Window States */
|
||||
window#waybar.hidden {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
window#waybar.termite {
|
||||
background-color: #3F3F3F;
|
||||
}
|
||||
|
||||
window#waybar.chromium {
|
||||
background-color: #000000;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
MODULE COMMON STYLES
|
||||
-------------------------------------------------------------------------- */
|
||||
/* Common styling applied to all modules */
|
||||
#mpd,
|
||||
#custom-pomodoro,
|
||||
#clock,
|
||||
#battery,
|
||||
#network,
|
||||
#pulseaudio,
|
||||
#pulseaudio-slider,
|
||||
#custom-separator,
|
||||
#custom-launcher,
|
||||
#tray,
|
||||
#taskbar,
|
||||
#cpu,
|
||||
#memory,
|
||||
#temperature,
|
||||
#scratchpad {
|
||||
padding: 0 10px;
|
||||
color: @text-primary;
|
||||
transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
WORKSPACES
|
||||
-------------------------------------------------------------------------- */
|
||||
#workspaces {
|
||||
font-size: 18px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#workspaces button {
|
||||
padding: 0 6px;
|
||||
min-width: 20px;
|
||||
background-color: transparent;
|
||||
color: alpha(@accent, 0.5);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Workspace States */
|
||||
#workspaces button.empty {
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
#workspaces button.active.hosting-monitor {
|
||||
color: @accent;
|
||||
text-shadow: 0px 0px 8px @accent;
|
||||
animation: hover 0.8s 1;
|
||||
}
|
||||
|
||||
#workspaces button.urgent {
|
||||
color: @attention;
|
||||
font-weight: 700;
|
||||
text-shadow: 0px 0px 8px @attention;
|
||||
transition: color 0.5s, box-shadow 0.5s, background 0.5s;
|
||||
}
|
||||
|
||||
#workspaces button:hover {
|
||||
color: @foreground;
|
||||
background-color: transparent;
|
||||
text-shadow: 0px 0px 2px rgba(233, 99, 117, 1);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
TASKBAR
|
||||
-------------------------------------------------------------------------- */
|
||||
#taskbar {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#taskbar button {
|
||||
padding: 0;
|
||||
min-height: 30px;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
#taskbar image {
|
||||
min-width: 40px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
#taskbar.empty {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
CPU
|
||||
-------------------------------------------------------------------------- */
|
||||
#cpu {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
MEMORY
|
||||
-------------------------------------------------------------------------- */
|
||||
#memory {
|
||||
font-size: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
TEMPERATURE
|
||||
-------------------------------------------------------------------------- */
|
||||
#temperature {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
SIDE PANEL GROUPS
|
||||
-------------------------------------------------------------------------- */
|
||||
.modules-left, .modules-center, .modules-right {
|
||||
/* Layout & Box Model */
|
||||
border: 1px solid @border-color;
|
||||
border-radius: 12px;
|
||||
|
||||
/* Colors */
|
||||
background-color: @bg-panel;
|
||||
/* color: @text-primary; */
|
||||
|
||||
/* Effects & Transitions */
|
||||
/* transition-property: background-color; */
|
||||
/* transition-duration: 0.5s; */
|
||||
}
|
||||
|
||||
.modules-left {
|
||||
}
|
||||
|
||||
.modules-right {
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
AUDIO CONTROL MODULES
|
||||
-------------------------------------------------------------------------- */
|
||||
#pulseaudio {
|
||||
padding-right: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
#pulseaudio-slider slider {
|
||||
min-height: 0px;
|
||||
min-width: 0px;
|
||||
opacity: 0;
|
||||
background-image: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#pulseaudio-slider trough {
|
||||
min-height: 10px;
|
||||
min-width: 25px;
|
||||
border-radius: 5px;
|
||||
background: alpha(@text-primary, 0.2);
|
||||
}
|
||||
|
||||
#pulseaudio-slider highlight {
|
||||
min-width: 10px;
|
||||
border-radius: 5px;
|
||||
background: @text-primary;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
CUSTOM MODULES
|
||||
-------------------------------------------------------------------------- */
|
||||
#custom-pomodoro {
|
||||
color: @text-secondary;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
#custom-launcher {
|
||||
font-size: 23px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
STATE-BASED STYLES
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
/* TASKBAR STATES */
|
||||
#taskbar button {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#taskbar button.active {
|
||||
background: radial-gradient(circle, alpha(@accent, 1) 0%, alpha(@accent, 1) 50%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 25, 0) 100%);
|
||||
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
/* POMODORO STATES */
|
||||
#custom-pomodoro.work {
|
||||
color: @accent;
|
||||
}
|
||||
|
||||
#custom-pomodoro.break {
|
||||
color: @success;
|
||||
text-shadow: 0px 0px 4px rgba(0, 255, 0, 1);
|
||||
}
|
||||
|
||||
#custom-pomodoro.pause {
|
||||
color: @attention;
|
||||
text-shadow: 0px 0px 4px @attention;
|
||||
}
|
||||
|
||||
/* MPD STATES */
|
||||
#mpd {
|
||||
font-weight: 700;
|
||||
transition: color 2s, background 2s;
|
||||
}
|
||||
|
||||
#mpd.playing {
|
||||
color: @accent;
|
||||
}
|
||||
|
||||
#mpd.stopped {
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#mpd.paused {
|
||||
font-weight: normal;
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
/* BATTERY STATES */
|
||||
#battery.charging,
|
||||
#battery.plugged {
|
||||
color: @success;
|
||||
text-shadow: 0px 0px 8px @success;
|
||||
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
#battery.warning:not(.charging) {
|
||||
color: @warning;
|
||||
text-shadow: 0px 0px 8px @warning;
|
||||
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
#battery.critical:not(.charging) {
|
||||
color: @danger;
|
||||
text-shadow: 0px 0px 8px @danger;
|
||||
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
/* CPU && MEMORY STATES */
|
||||
#cpu.s1, #memory.s1, #temperature.s1 {
|
||||
color: @text-primary;
|
||||
transition: color 0.3s, text-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
#cpu.s2, #memory.s2 {
|
||||
color: @text-primary;
|
||||
text-shadow: 0px 0px 2px @text-primary;
|
||||
transition: color 0.3s, text-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
#cpu.s3, #memory.s3 {
|
||||
color: @attention;
|
||||
text-shadow: 0px 0px 2px @attention;
|
||||
transition: color 0.3s, text-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
#cpu.s4, #memory.s4, #temperature.warning {
|
||||
color: @warning;
|
||||
text-shadow: 0px 0px 2px @warning;
|
||||
transition: color 0.3s, text-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
#cpu.s5, #memory.s5, #temperature.critical {
|
||||
color: @danger;
|
||||
text-shadow: 0px 0px 2px @danger;
|
||||
transition: color 0.3s, text-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
HOVER EFFECTS
|
||||
-------------------------------------------------------------------------- */
|
||||
#mpd.playing:hover,
|
||||
#mpd.paused:hover,
|
||||
#clock:hover,
|
||||
#battery:hover,
|
||||
#network:hover,
|
||||
#pulseaudio:hover,
|
||||
#custom-pomodoro:hover,
|
||||
#custom-launcher:hover,
|
||||
#scratchpad:hover,
|
||||
#tray:hover,
|
||||
#taskbar:hover,
|
||||
#cpu:hover,
|
||||
#memory:hover
|
||||
#temperature:hover {
|
||||
color: @accent;
|
||||
text-shadow: 0px 0px 8px @accent;
|
||||
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
#pulseaudio-slider:hover highlight {
|
||||
background: @accent;
|
||||
box-shadow: 0px 0px 8px @accent;
|
||||
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
LAYOUT UTILITIES
|
||||
-------------------------------------------------------------------------- */
|
||||
#window,
|
||||
#workspaces {
|
||||
margin: 0 0px;
|
||||
}
|
||||
|
||||
.modules-left > widget:first-child > #workspaces {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.modules-right > widget:last-child > #workspaces {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
ANIMATIONS
|
||||
-------------------------------------------------------------------------- */
|
||||
@keyframes hover {
|
||||
0% { color: @text-primary; }
|
||||
100% { color: @accent; }
|
||||
}
|
||||
267
waybar/style/style_top.css
Normal file
267
waybar/style/style_top.css
Normal file
@@ -0,0 +1,267 @@
|
||||
/* --------------------------------------------------------------------------
|
||||
IMPORTS & GLOBAL STYLES
|
||||
-------------------------------------------------------------------------- */
|
||||
@import "colors.css";
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
BASE CONTAINER
|
||||
-------------------------------------------------------------------------- */
|
||||
window#waybar {
|
||||
/* Layout & Box Model */
|
||||
/* border: 1px solid @border-color; */
|
||||
/* border-bottom: none; */
|
||||
/* border-radius: 10px 10px 0 0; */
|
||||
|
||||
/* Typography */
|
||||
font-family: "Iosevka Nerd Font Propo";
|
||||
font-size: 15px;
|
||||
|
||||
/* Colors */
|
||||
background-color: transparent;
|
||||
/* color: @text-primary; */
|
||||
|
||||
/* Effects & Transitions */
|
||||
/* transition-property: background-color; */
|
||||
/* transition-duration: 0.5s; */
|
||||
}
|
||||
|
||||
/* Window States */
|
||||
window#waybar.hidden {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
window#waybar.termite {
|
||||
background-color: #3F3F3F;
|
||||
}
|
||||
|
||||
window#waybar.chromium {
|
||||
background-color: #000000;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
MODULE COMMON STYLES
|
||||
-------------------------------------------------------------------------- */
|
||||
/* Common styling applied to all modules */
|
||||
#mpd,
|
||||
#custom-pomodoro,
|
||||
#clock,
|
||||
#battery,
|
||||
#network,
|
||||
#pulseaudio,
|
||||
#pulseaudio-slider,
|
||||
#custom-separator,
|
||||
#scratchpad,
|
||||
#tray {
|
||||
padding: 0 10px;
|
||||
color: @text-primary;
|
||||
transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
WORKSPACES
|
||||
-------------------------------------------------------------------------- */
|
||||
#workspaces {
|
||||
font-size: 18px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#workspaces button {
|
||||
padding: 0 6px;
|
||||
min-width: 20px;
|
||||
background-color: transparent;
|
||||
color: alpha(@accent, 0.5);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Workspace States */
|
||||
#workspaces button.empty {
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
#workspaces button.active.hosting-monitor {
|
||||
color: @accent;
|
||||
text-shadow: 0px 0px 8px @accent;
|
||||
animation: hover 0.8s 1;
|
||||
}
|
||||
|
||||
#workspaces button.urgent {
|
||||
color: @attention;
|
||||
font-weight: 700;
|
||||
text-shadow: 0px 0px 8px @attention;
|
||||
transition: color 0.5s, box-shadow 0.5s, background 0.5s;
|
||||
}
|
||||
|
||||
#workspaces button:hover {
|
||||
color: @foreground;
|
||||
background-color: transparent;
|
||||
text-shadow: 0px 0px 2px rgba(233, 99, 117, 1);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
SIDE PANEL GROUPS
|
||||
-------------------------------------------------------------------------- */
|
||||
.modules-left, .modules-center, .modules-right {
|
||||
/* Layout & Box Model */
|
||||
border: 1px solid @border-color;
|
||||
border-radius: 12px;
|
||||
|
||||
/* Colors */
|
||||
background-color: @bg-panel;
|
||||
/* color: @text-primary; */
|
||||
|
||||
/* Effects & Transitions */
|
||||
/* transition-property: background-color; */
|
||||
/* transition-duration: 0.5s; */
|
||||
}
|
||||
|
||||
.modules-left {
|
||||
}
|
||||
|
||||
.modules-right {
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
AUDIO CONTROL MODULES
|
||||
-------------------------------------------------------------------------- */
|
||||
#pulseaudio {
|
||||
padding-right: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
#pulseaudio-slider slider {
|
||||
min-height: 0px;
|
||||
min-width: 0px;
|
||||
opacity: 0;
|
||||
background-image: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#pulseaudio-slider trough {
|
||||
min-height: 10px;
|
||||
min-width: 25px;
|
||||
border-radius: 5px;
|
||||
background: alpha(@text-primary, 0.2);
|
||||
}
|
||||
|
||||
#pulseaudio-slider highlight {
|
||||
min-width: 10px;
|
||||
border-radius: 5px;
|
||||
background: @text-primary;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
CUSTOM MODULES
|
||||
-------------------------------------------------------------------------- */
|
||||
#custom-pomodoro {
|
||||
color: @text-secondary;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
STATE-BASED STYLES
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
/* POMODORO STATES */
|
||||
#custom-pomodoro.work {
|
||||
color: @accent;
|
||||
}
|
||||
|
||||
#custom-pomodoro.break {
|
||||
color: @success;
|
||||
text-shadow: 0px 0px 4px rgba(0, 255, 0, 1);
|
||||
}
|
||||
|
||||
#custom-pomodoro.pause {
|
||||
color: @attention;
|
||||
text-shadow: 0px 0px 4px @attention;
|
||||
}
|
||||
|
||||
/* MPD STATES */
|
||||
#mpd {
|
||||
font-weight: 700;
|
||||
transition: color 2s, background 2s;
|
||||
}
|
||||
|
||||
#mpd.playing {
|
||||
color: @accent;
|
||||
}
|
||||
|
||||
#mpd.stopped {
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#mpd.paused {
|
||||
font-weight: normal;
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
/* BATTERY STATES */
|
||||
#battery.charging,
|
||||
#battery.plugged {
|
||||
color: @success;
|
||||
text-shadow: 0px 0px 8px @success;
|
||||
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
#battery.warning:not(.charging) {
|
||||
color: @warning;
|
||||
text-shadow: 0px 0px 8px @warning;
|
||||
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
#battery.critical:not(.charging) {
|
||||
color: @danger;
|
||||
text-shadow: 0px 0px 8px @danger;
|
||||
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
HOVER EFFECTS
|
||||
-------------------------------------------------------------------------- */
|
||||
#mpd.playing:hover,
|
||||
#mpd.paused:hover,
|
||||
#clock:hover,
|
||||
#battery:hover,
|
||||
#network:hover,
|
||||
#pulseaudio:hover,
|
||||
#custom-pomodoro:hover,
|
||||
#scratchpad:hover,
|
||||
#tray:hover {
|
||||
color: @accent;
|
||||
text-shadow: 0px 0px 8px @accent;
|
||||
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
#pulseaudio-slider:hover highlight {
|
||||
background: @accent;
|
||||
box-shadow: 0px 0px 8px @accent;
|
||||
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
LAYOUT UTILITIES
|
||||
-------------------------------------------------------------------------- */
|
||||
#window,
|
||||
#workspaces {
|
||||
margin: 0 0px;
|
||||
}
|
||||
|
||||
.modules-left > widget:first-child > #workspaces {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.modules-right > widget:last-child > #workspaces {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
ANIMATIONS
|
||||
-------------------------------------------------------------------------- */
|
||||
@keyframes hover {
|
||||
0% { color: @text-primary; }
|
||||
100% { color: @accent; }
|
||||
}
|
||||
Reference in New Issue
Block a user