Add sway stuff
This commit is contained in:
303
config/waybar/gruvbox.css
Normal file
303
config/waybar/gruvbox.css
Normal file
@@ -0,0 +1,303 @@
|
||||
/* GRUVBOX DARK PALETTE
|
||||
--------------------
|
||||
*/
|
||||
|
||||
@define-color bg #282828;
|
||||
@define-color gray1 #928374;
|
||||
@define-color red1 #cc241d;
|
||||
@define-color red2 #fb4934;
|
||||
@define-color green1 #98971a;
|
||||
@define-color green2 #b8bb26;
|
||||
@define-color yellow1 #d79921;
|
||||
@define-color yellow2 #fabd2f;
|
||||
@define-color blue1 #458588;
|
||||
@define-color blue2 #83a598;
|
||||
@define-color purple1 #b16286;
|
||||
@define-color purple2 #d3869b;
|
||||
@define-color aqua1 #689d6a;
|
||||
@define-color aqua2 #8ec07c;
|
||||
@define-color gray2 #a89984;
|
||||
@define-color fg #ebdbb2;
|
||||
@define-color bg0_h #1d2021;
|
||||
@define-color bg0 @bg;
|
||||
@define-color bg1 #3c3836;
|
||||
@define-color bg2 #504945;
|
||||
@define-color bg3 #665c54;
|
||||
@define-color bg4 #7c6f64;
|
||||
@define-color bg-gray @gray1;
|
||||
@define-color bg0_s #32302f;
|
||||
@define-color fg4 #a89984;
|
||||
@define-color fg3 #bdae93;
|
||||
@define-color fg2 #d5c4a1;
|
||||
@define-color fg1 @fg;
|
||||
@define-color fg0 #fbf1c7;
|
||||
@define-color orange1 #d65d0e;
|
||||
@define-color orange2 #af3a03;
|
||||
|
||||
/* GRUVBOX LIGHT PALETTE
|
||||
--------------------- */
|
||||
/* @define-color bg #fbf1c7; */
|
||||
/* @define-color gray1 #928374; */
|
||||
/* @define-color red1 #cc241d; */
|
||||
/* @define-color red2 #9d0006; */
|
||||
/* @define-color green1 #98971a; */
|
||||
/* @define-color green2 #79740e; */
|
||||
/* @define-color yellow1 #d79921; */
|
||||
/* @define-color yellow2 #b57614; */
|
||||
/* @define-color blue1 #458588; */
|
||||
/* @define-color blue2 #076678; */
|
||||
/* @define-color purple1 #b16286; */
|
||||
/* @define-color purple2 #8f3f71; */
|
||||
/* @define-color aqua1 #689d6a; */
|
||||
/* @define-color aqua2 #427b58; */
|
||||
/* @define-color gray2 #7c6f64; */
|
||||
/* @define-color fg #3c3836; */
|
||||
/* @define-color bg0_h #f9f5d7; */
|
||||
/* @define-color bg0 @bg; */
|
||||
/* @define-color bg1 #ebdbb2; */
|
||||
/* @define-color bg2 #d5c4a1; */
|
||||
/* @define-color bg3 #bdae93; */
|
||||
/* @define-color bg4 #a89984; */
|
||||
/* @define-color bg-gray @gray1; */
|
||||
/* @define-color bg0_s #f2e5bc; */
|
||||
/* @define-color fg4 #7c6f64; */
|
||||
/* @define-color fg3 #665c54; */
|
||||
/* @define-color fg2 #504945; */
|
||||
/* @define-color fg1 @fg; */
|
||||
/* @define-color fg0 #282828; */
|
||||
/* @define-color orange1 #d65d0e; */
|
||||
/* @define-color orange2 #af3a03; */
|
||||
|
||||
|
||||
/* COLOR BINDS
|
||||
----------- */
|
||||
@define-color waybar @bg;
|
||||
@define-color text-main @fg;
|
||||
@define-color text-opposite @bg;
|
||||
@define-color text-alert @red2;
|
||||
@define-color alert @red1;
|
||||
@define-color warning @orange1;
|
||||
@define-color ok @aqua2;
|
||||
@define-color workspaces @yellow1;
|
||||
@define-color workspaces-hover @yellow2;
|
||||
@define-color day @orange1;
|
||||
@define-color time @orange2;
|
||||
@define-color date @orange1;
|
||||
@define-color backlight @bg-gray;
|
||||
@define-color network @bg4;
|
||||
@define-color audio @bg3;
|
||||
@define-color battery @bg2;
|
||||
|
||||
|
||||
/* ELEMENT SETTINGS
|
||||
---------------- */
|
||||
.modules-left > widget:first-child > #workspaces {margin: 0}
|
||||
.modules-right > widget:last-child > #workspaces {margin: 0}
|
||||
|
||||
* {
|
||||
font-family: Symbols Nerd Font Mono, VictorMono Nerd Font;
|
||||
font-size: 12;
|
||||
color: @text-main;
|
||||
background-color: @waybar;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
}
|
||||
|
||||
workspaces button label,
|
||||
#window,
|
||||
widget label,
|
||||
#tray {
|
||||
padding: 0 .5em;
|
||||
}
|
||||
|
||||
|
||||
/* ANIMATION
|
||||
--------- */
|
||||
@keyframes text-blink {
|
||||
to {
|
||||
color: @text-alert;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient-blink {
|
||||
from {
|
||||
color: @text-alert;
|
||||
background: linear-gradient(to right, @battery 100%, @alert);
|
||||
}
|
||||
to {
|
||||
color: @text-opposite;
|
||||
background: linear-gradient(to right, @battery 15%, @alert);
|
||||
}
|
||||
}
|
||||
|
||||
/* Attention */
|
||||
#mode,
|
||||
#battery.below20.discharging {
|
||||
animation-name: text-blink;
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
#battery.below20.discharging {
|
||||
color: transparent
|
||||
}
|
||||
|
||||
/* Warning */
|
||||
#pulseaudio.muted,
|
||||
#network.disconnected/*,
|
||||
#battery.below20.discharging*/ {
|
||||
color: @text-alert;
|
||||
}
|
||||
|
||||
/* Critical */
|
||||
#battery.below10.discharging {
|
||||
animation-name: gradient-blink;
|
||||
animation-duration: .75s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
|
||||
/* LEFT MODULES
|
||||
------------ */
|
||||
#workspaces button label {
|
||||
background: @workspaces;
|
||||
}
|
||||
#workspaces button:hover label {
|
||||
transition: background-color .5s;
|
||||
background: radial-gradient( @workspaces-hover, @workspaces 60%);
|
||||
}
|
||||
#workspaces button.urgent {
|
||||
transition: background-color .5s;
|
||||
background: radial-gradient( @alert, @workspaces 80%);
|
||||
transition: color .5s;
|
||||
color: @text-alert;
|
||||
}
|
||||
|
||||
#mode {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
margin: 0 .5em;
|
||||
color: transparent;
|
||||
background-color: @waybar;
|
||||
box-shadow:
|
||||
0 .2em @alert inset,
|
||||
0 -.2em @alert inset;
|
||||
}
|
||||
|
||||
|
||||
/* CENTER MODULES
|
||||
-------------- */
|
||||
#scratchpad.empty {
|
||||
color: @waybar;
|
||||
}
|
||||
|
||||
#clock {
|
||||
color: @text-opposite;
|
||||
}
|
||||
#clock.day {
|
||||
background-color: @day;
|
||||
}
|
||||
#clock.time {
|
||||
background-color: @time;
|
||||
}
|
||||
#clock.date {
|
||||
background-color: @day;
|
||||
}
|
||||
|
||||
#scratchpad.invisible {
|
||||
color: @waybar;
|
||||
}
|
||||
|
||||
|
||||
/* RIGHT MODULES
|
||||
------------- */
|
||||
|
||||
#tray {
|
||||
background-color: @bg;
|
||||
}
|
||||
#tray > .passive {
|
||||
-gtk-icon-effect: dim;
|
||||
}
|
||||
#tray > .needs-attention {
|
||||
-gtk-icon-effect: highlight;
|
||||
}
|
||||
|
||||
#backlight {
|
||||
background-color: @backlight;
|
||||
}
|
||||
|
||||
#network {
|
||||
background-color: @network;
|
||||
}
|
||||
|
||||
#pulseaudio {
|
||||
background-color: @audio;
|
||||
}
|
||||
|
||||
#battery {
|
||||
background-color: @battery;
|
||||
}
|
||||
#battery.charging {
|
||||
background: linear-gradient(to right, @battery 30%, @ok);
|
||||
}
|
||||
#battery.discharging {
|
||||
background: linear-gradient(to right, @battery 30%, @alert);
|
||||
}
|
||||
|
||||
|
||||
/* ARROWS
|
||||
------ */
|
||||
#custom-arrow-right,
|
||||
#custom-arrow-left {
|
||||
padding: 0;
|
||||
font-family: Hack Nerd Font Mono;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
#custom-arrow-right.workspaces {
|
||||
color: @workspaces;
|
||||
background-color: transparent;
|
||||
}
|
||||
#custom-arrow-right.time {
|
||||
color: @time;
|
||||
background-color: @date;
|
||||
}
|
||||
#custom-arrow-right.date {
|
||||
color: @date;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#custom-arrow-left.battery {
|
||||
color: @battery;
|
||||
background-color: @audio;
|
||||
}
|
||||
#custom-arrow-left.audio {
|
||||
color: @audio;
|
||||
background-color: @network;
|
||||
}
|
||||
#custom-arrow-left.network {
|
||||
color: @network;
|
||||
background-color: @backlight;
|
||||
}
|
||||
#custom-arrow-left.backlight {
|
||||
color: @backlight;
|
||||
background-color: transparent;
|
||||
}
|
||||
#custom-arrow-left.time {
|
||||
color: @time;
|
||||
background-color: @day;
|
||||
}
|
||||
#custom-arrow-left.day {
|
||||
color: @day;
|
||||
background-color: transparent;
|
||||
}
|
||||
Reference in New Issue
Block a user