238 lines
5.1 KiB
CSS
238 lines
5.1 KiB
CSS
* {
|
|
/* `otf-font-awesome` is required to be installed for icons */
|
|
font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 13px;
|
|
}
|
|
|
|
#pulseaudio-slider {
|
|
min-width: 250px;
|
|
}
|
|
|
|
@define-color base #1e1e2e;
|
|
@define-color mantle #181825;
|
|
@define-color crust #11111b;
|
|
|
|
@define-color text #cdd6f4;
|
|
@define-color text2 #47495c;
|
|
@define-color subtext0 #a6adc8;
|
|
@define-color subtext1 #bac2de;
|
|
|
|
@define-color surface0 #313244;
|
|
@define-color surface1 #45475a;
|
|
@define-color surface2 #585b70;
|
|
@define-color surface3 #787b90;
|
|
@define-color surface4 #989bB0;
|
|
|
|
@define-color overlay0 #6c7086;
|
|
@define-color overlay1 #7f849c;
|
|
@define-color overlay2 #9399b2;
|
|
|
|
@define-color blue #89b4fa;
|
|
@define-color lavender #b4befe;
|
|
@define-color sapphire #74c7ec;
|
|
@define-color sky #89dceb;
|
|
@define-color teal #94e2d5;
|
|
@define-color green #a6e3a1;
|
|
@define-color yellow #f9e2af;
|
|
@define-color peach #fab387;
|
|
@define-color maroon #eba0ac;
|
|
@define-color red #f38ba8;
|
|
@define-color mauve #cba6f7;
|
|
@define-color pink #f5c2e7;
|
|
@define-color flamingo #f2cdcd;
|
|
@define-color rosewater #f5e0dc;
|
|
|
|
* {
|
|
/* font-family: FantasqueSansMono Nerd Font; */
|
|
/* Annoyingly I dont think GTK CSS "cascades", so this
|
|
will get applied to everything as expected, but not if
|
|
you put it under #waybar */
|
|
font-size: 16px;
|
|
/* min-height: 0; */
|
|
}
|
|
|
|
/*Apparently this one doesn't apply padding*/
|
|
#waybar {
|
|
background: transparent;
|
|
color: @text;
|
|
/* border-bottom: 1px white solid; */
|
|
background-image: linear-gradient(
|
|
to top,
|
|
@surface0 0%,
|
|
@surface0 70%,
|
|
@surface4 100%
|
|
);
|
|
}
|
|
|
|
#workspaces {
|
|
/* border-radius: 1rem; */
|
|
/* margin: 5px; */
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
/* Non-buttons but just information */
|
|
#custom-music,
|
|
#tray,
|
|
#backlight,
|
|
#clock,
|
|
#battery,
|
|
#pulseaudio,
|
|
#custom-lock,
|
|
#custom-power,
|
|
#cpu,
|
|
#memory,
|
|
#pulseaudio-slider,
|
|
#network {
|
|
padding: 0.5rem 1rem;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
/* Button-like, have interactions (like hover, etc) */
|
|
#workspaces button,
|
|
.niri-window-buttons button {
|
|
/* border-radius: 1rem; */
|
|
padding: 0;
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
padding-top: 7px;
|
|
padding-bottom: 2px;
|
|
margin: 0;
|
|
margin-left: 3px;
|
|
margin-right: 3px;
|
|
min-width: 35px;
|
|
min-height: 30px;
|
|
border-radius: 0;
|
|
border: 0px transparent solid;
|
|
border-bottom: 2px @text solid;
|
|
background-color: rgba(100%,100%,100%,0.0); /*;transparent;*/
|
|
transition: all 200ms ease;
|
|
color: @text;
|
|
|
|
/* border-left-color: #FFF; */
|
|
/* border-right-color: #FFF; */
|
|
/* border-left-width: 1px; */
|
|
/* border-right-width: 1px; */
|
|
}
|
|
|
|
/** Annoyingly, this does not work without targeting the label!*/
|
|
#workspaces button label {
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* Button-like :hover
|
|
* Annoyingly, some things need to be respecified due to the base styles
|
|
* (I think only niri-window-buttons)
|
|
*/
|
|
#workspaces button:hover,
|
|
.niri-window-buttons button:hover {
|
|
background: linear-gradient(0deg, rgba(100%,100%,100%,0.35), rgba(100%,100%,100%,0.0));
|
|
border: 0px transparent solid;
|
|
border-bottom: 2px #FFF solid;
|
|
/* border-radius: 1rem; */
|
|
border-radius: 0;
|
|
color: #FFF;
|
|
}
|
|
|
|
/* Button-like .active */
|
|
#workspaces button.active,
|
|
.niri-window-buttons button.focused {
|
|
/* border-radius: 1rem; */
|
|
background-color: rgba(100%,100%,100%,0.35);
|
|
border-radius: 0;
|
|
padding-bottom: 0px;
|
|
border-bottom: 5px #CCF solid;
|
|
color: #FFF;
|
|
}
|
|
|
|
/* Button-like 2, has a rounded thing around it instead of border underneat */
|
|
#pulseaudio,
|
|
#custom-power {
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin: 5px;
|
|
margin-right: 10px;
|
|
border-radius: 10px;
|
|
/* border: 0px t solid; */
|
|
background-color: @surface0;
|
|
border: 1px @surface1 solid;
|
|
transition: all 200ms ease;
|
|
color: @text;
|
|
}
|
|
|
|
#pulseaudio:hover,
|
|
#custom-power:hover {
|
|
background-color: @surface2; /*;transparent;*/
|
|
border: 1px @surface3 solid;
|
|
}
|
|
|
|
/* #custom-music, */
|
|
/* #tray, */
|
|
/* #backlight, */
|
|
/* #clock, */
|
|
/* #battery, */
|
|
/* #pulseaudio, */
|
|
/* #custom-lock, */
|
|
/* #custom-power, */
|
|
/* #cpu, */
|
|
/* #memory, */
|
|
/* #pulseaudio-slider, */
|
|
/* #network { */
|
|
/* background-color: #F00; */
|
|
/* padding: 0.5rem 1rem; */
|
|
/* margin: 5px 0; */
|
|
/* } */
|
|
/* */
|
|
/* #clock { */
|
|
/* color: @blue; */
|
|
/* border-radius: 0px 1rem 1rem 0px; */
|
|
/* margin-right: 1rem; */
|
|
/* } */
|
|
/* */
|
|
/* #battery { */
|
|
/* color: @green; */
|
|
/* } */
|
|
/* */
|
|
/* #battery.charging { */
|
|
/* color: @green; */
|
|
/* } */
|
|
/* */
|
|
/* #battery.warning:not(.charging) { */
|
|
/* color: @red; */
|
|
/* } */
|
|
/* */
|
|
/* #backlight { */
|
|
/* color: @yellow; */
|
|
/* } */
|
|
/* */
|
|
/* #backlight, #battery { */
|
|
/* border-radius: 0; */
|
|
/* } */
|
|
/* */
|
|
/* #pulseaudio { */
|
|
/* color: @maroon; */
|
|
/* border-radius: 1rem 0px 0px 1rem; */
|
|
/* margin-left: 1rem; */
|
|
/* } */
|
|
/* */
|
|
/* #custom-music { */
|
|
/* color: @mauve; */
|
|
/* border-radius: 1rem; */
|
|
/* } */
|
|
/* */
|
|
/* #custom-lock { */
|
|
/* border-radius: 1rem 0px 0px 1rem; */
|
|
/* color: @lavender; */
|
|
/* } */
|
|
/* */
|
|
/* #custom-power { */
|
|
/* margin-right: 1rem; */
|
|
/* border-radius: 0px 1rem 1rem 0px; */
|
|
/* color: @red; */
|
|
/* } */
|
|
/* */
|
|
/* #tray { */
|
|
/* margin-right: 1rem; */
|
|
/* border-radius: 1rem; */
|
|
/* } */
|