nix-config/users/tacocat/wayland/waybar/style.css
2023-11-01 00:06:04 -04:00

287 lines
4.5 KiB
CSS

/* Keyframes */
@keyframes blink-critical {
to {
/*color: @white;*/
background-color: @critical;
}
}
/* Styles */
/* Colors (gruvbox) */
/* @define-color black #282828; */
@define-color black #393552;
/* @define-color red #cc241d; */
@define-color red #EB6F92;
@define-color green #98971a;
@define-color yellow #d79921;
/* @define-color blue #458588; */
@define-color blue #9CCFD8;
/* @define-color purple #b16286; */
@define-color purple #C4A7E7;
@define-color aqua #689d6a;
@define-color gray #a89984;
@define-color brgray #928374;
@define-color bfred #fb4934;
@define-color brred #EA9A97;
@define-color brgreen #b8bb26;
/* @define-color bryellow #fabd2f; */
@define-color bryellow #F6C177;
/* @define-color brblue #83a598; */
@define-color brblue #85ACB0;
@define-color brpurple #d3869b;
@define-color braqua #8ec07c;
@define-color white #ebdbb2;
/* @define-color bg2 #504945; */
@define-color bg2 #6E6A86;
@define-color warning @bfred;
@define-color critical @bfred;
@define-color mode @black;
@define-color unfocused @bg2;
@define-color focused @red;
@define-color inactive @blue;
@define-color sound @purple;
@define-color network @blue;
@define-color memory @brred;
@define-color cpu @brblue;
@define-color temp @bryellow;
@define-color layout @bryellow;
@define-color battery @braqua;
@define-color date @black;
@define-color time @white;
/* Reset all styles */
* {
border: none;
border-radius: 0;
min-height: 0;
margin: 0;
padding: 0;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
/* The whole bar */
#waybar {
background: rgba(40, 40, 40, 0.8784313725); /* #282828e0 */
color: @white;
font-family: JetBrains Mono;
font-size: 10pt;
/*font-weight: bold;*/
}
/* Each module */
#mode,
#battery,
#clock,
#cpu,
#language,
#memory,
#mode,
#network,
#pulseaudio,
#temperature,
#tray,
#backlight,
#idle_inhibitor,
#disk,
#user,
#mpris {
padding-left: 8pt;
padding-right: 8pt;
}
/* Each critical module */
#memory.critical,
#cpu.critical,
#temperature.critical,
#battery.critical.discharging {
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-name: blink-critical;
animation-duration: 1s;
}
/* Each warning */
#network.disconnected,
#memory.warning,
#cpu.warning,
#temperature.warning,
#battery.warning.discharging {
color: @warning;
}
/* And now modules themselves in their respective order */
/* Current sway mode (resize etc) */
#mode {
color: @white;
background: @mode;
}
/* Inactive (on unfocused output) */
#workspaces button.visible {
color: @white;
background: @inactive;
}
/* Active (on focused output) */
#workspaces button.focused {
color: @black;
background: @focused;
}
/* Contains an urgent window */
#workspaces button.urgent {
color: @black;
background: @warning;
}
/* Style when cursor is on the button */
#workspaces button:hover {
background: @black;
color: @white;
}
#tags button {
/*font-weight: bold;*/
padding-left: 4pt;
padding-right: 4pt;
color: @white;
background: @unfocused;
}
#tags button.occupied {
color: @black;
background: @inactive;
}
#tags button.focused {
color: @black;
background: @focused;
}
#tags button.urgent {
color: @black;
background: @warning;
}
#window {
margin-right: 35pt;
margin-left: 35pt;
}
#pulseaudio {
background: @sound;
color: @black;
}
#network {
background: @network;
color: @black;
}
#memory {
background: @memory;
color: @black;
}
#cpu {
background: @cpu;
color: @black;
}
#temperature {
background: @temp;
color: @black;
}
#language {
background: @layout;
color: @black;
}
#battery {
background: @battery;
color: @black;
}
#tray {
background: @date;
}
#clock.date {
background: @date;
color: @white;
}
#clock.time {
background: @time;
color: @black;
}
#custom-arrow1 {
font-size: 11pt;
color: @time;
background: @date;
}
#custom-arrow2 {
font-size: 11pt;
color: @date;
background: @battery;
}
#custom-arrow3 {
font-size: 11pt;
color: @layout;
background: @battery;
}
#custom-arrow4 {
font-size: 11pt;
color: @battery;
background: @temp;
}
#custom-arrow5 {
font-size: 11pt;
color: @temp;
background: @cpu;
}
#custom-arrow6 {
font-size: 11pt;
color: @cpu;
background: @memory;
}
#custom-arrow7 {
font-size: 11pt;
color: @memory;
background: @network;
}
#custom-arrow8 {
font-size: 11pt;
color: @network;
background: @sound;
}
#custom-arrow9 {
font-size: 11pt;
color: @sound;
background: transparent;
}
#custom-arrow10 {
font-size: 11pt;
color: @unfocused;
background: transparent;
}