style(tazjin/dotfiles): more authentic win95 waybar styling
Brings this a LOT closer to the Windows95 style theming that I'm trying to achieve with the whole thing. Change-Id: Ifb457a682cb83a78e4a8e2ba2bb4a5b96f3eaf1f Reviewed-on: https://cl.tvl.fyi/c/depot/+/12525 Tested-by: BuildkiteCI Autosubmit: tazjin <tazjin@tvl.su> Reviewed-by: tazjin <tazjin@tvl.su>
This commit is contained in:
Vincent Ambo
tazjin
parent
d0344a0e27
commit
ed2bd88850
3 changed files with 154 additions and 74 deletions
|
|
@ -1,8 +1,22 @@
|
|||
args: {
|
||||
{ depot, pkgs, ... }@args:
|
||||
|
||||
rec {
|
||||
dunstrc = ./dunstrc;
|
||||
niri = ./niri.config.kdl;
|
||||
waybar = {
|
||||
config = import ./waybar/config.nix args;
|
||||
style = ./waybar/style.css;
|
||||
style = pkgs.runCommandNoCC "waybar-style.css"
|
||||
{
|
||||
CHICAGO95 = depot.third_party.chicago95;
|
||||
} ''
|
||||
cat ${./waybar/style.css} | ${pkgs.envsubst}/bin/envsubst > $out
|
||||
'';
|
||||
};
|
||||
|
||||
# Helper derivation for iterating on waybar config.
|
||||
waybarTest = pkgs.runCommandNoCC "waybar-conf" { } ''
|
||||
mkdir -p $out
|
||||
cat ${pkgs.writeText "waybar-conf.json" (builtins.toJSON(builtins.attrValues waybar.config))} > $out/config
|
||||
cp ${waybar.style} $out/style.css
|
||||
'';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,36 +7,40 @@ in
|
|||
mainBar = {
|
||||
layer = "top";
|
||||
position = "bottom";
|
||||
modules-left = [ "image#start" "custom/start" ];
|
||||
|
||||
"image#start" = {
|
||||
path = "${depot.third_party.chicago95}/share/icons/Chicago95/panel/24/start-here.png";
|
||||
size = 24;
|
||||
on-click = "xfce4-appfinder --disable-server";
|
||||
};
|
||||
modules-left = [ "custom/start" ];
|
||||
|
||||
"custom/start" = {
|
||||
format = " Start";
|
||||
on-click = "xfce4-appfinder --disable-server";
|
||||
};
|
||||
|
||||
modules-right = [ "pulseaudio" "backlight" "battery" "tray" "clock" ];
|
||||
modules-right = [ "tray" "backlight" "battery" "pulseaudio" "clock" ];
|
||||
|
||||
pulseaudio = {
|
||||
on-click = "pavucontrol";
|
||||
# Font "Awesome" speaker icons can't be made to render, I don't care why, emoji time.
|
||||
format = "{volume}% 🎧";
|
||||
format-muted = "{volume}% ";
|
||||
format = " "; #styling only
|
||||
states = {
|
||||
low = 1;
|
||||
medium = 40;
|
||||
high = 75;
|
||||
};
|
||||
};
|
||||
|
||||
battery = {
|
||||
format = "{capacity}% {icon}";
|
||||
format-icons = [ "" "" "" "" "" ];
|
||||
format = " "; # styling only
|
||||
interval = 10;
|
||||
states = {
|
||||
full = 100;
|
||||
good = 85;
|
||||
medium = 60;
|
||||
low = 40;
|
||||
warning = 20;
|
||||
critical = 10;
|
||||
};
|
||||
};
|
||||
|
||||
backlight = {
|
||||
format = "{percent}% {icon}";
|
||||
format-icons = [ "" ];
|
||||
format = "{percent}%"; # styling only
|
||||
on-scroll-up = "light -A 1";
|
||||
on-scroll-down = "light -U 1";
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
* {
|
||||
/* `otf-font-awesome` is required to be installed for icons */
|
||||
font-family: FontAwesome, Unifont;
|
||||
font-size: 16px;
|
||||
font-family: FontAwesome, MS Sans Serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
window#waybar {
|
||||
background-color: #c0c0c0;
|
||||
border-top: 3px solid #dfdfdf;
|
||||
border-top: 0.1875em solid #dfdfdf;
|
||||
color: #000000;
|
||||
transition-property: background-color;
|
||||
transition-duration: .5s;
|
||||
|
|
@ -27,7 +27,7 @@ window#waybar.chromium {
|
|||
|
||||
button {
|
||||
/* Use box-shadow instead of border so the text isn't offset */
|
||||
box-shadow: inset 0 -3px transparent;
|
||||
box-shadow: inset 0 -0.1875em transparent;
|
||||
/* Avoid rounded borders under each button name */
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
|
@ -36,17 +36,12 @@ button {
|
|||
/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
|
||||
button:hover {
|
||||
background: inherit;
|
||||
box-shadow: inset 0 -3px #ffffff;
|
||||
}
|
||||
|
||||
/* you can set a style on hover for any module like this */
|
||||
#pulseaudio:hover {
|
||||
background-color: #a37800;
|
||||
box-shadow: inset 0 -0.1875em #ffffff;
|
||||
}
|
||||
|
||||
#mode {
|
||||
background-color: #64727D;
|
||||
box-shadow: inset 0 -3px #ffffff;
|
||||
box-shadow: inset 0 -0.1875em #ffffff;
|
||||
}
|
||||
|
||||
#clock,
|
||||
|
|
@ -66,54 +61,137 @@ button:hover {
|
|||
#scratchpad,
|
||||
#power-profiles-daemon,
|
||||
#mpd {
|
||||
padding: 0 5px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
padding: 0 0.3125em;
|
||||
padding-top: 0em;
|
||||
padding-bottom: 0em;
|
||||
/* color: #ffffff; */
|
||||
}
|
||||
|
||||
#window,
|
||||
#workspaces {
|
||||
margin: 0 4px;
|
||||
margin: 0 0.25em;
|
||||
}
|
||||
|
||||
/* faithful-ish recreation of the old Windows start button ... */
|
||||
#custom-start {
|
||||
padding-bottom: 1px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
/* pop out left "modules" (start button) */
|
||||
.modules-left {
|
||||
margin: 3px;
|
||||
border-right: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-left: 1px solid white;
|
||||
border-top: 1px solid white;
|
||||
/* general positioning to keep the spacing approximately correct */
|
||||
color: @button_text_color;
|
||||
font-weight: bold;
|
||||
margin: 0.2em;
|
||||
margin-top: 0.35em;
|
||||
padding: 0.2em;
|
||||
padding-left: 1.25em;
|
||||
|
||||
/* raised button look, as per the Chicago95 GTK button style */
|
||||
border: 0.1em solid;
|
||||
border-radius: 0em;
|
||||
color: @button_text_color;
|
||||
outline-color: @outline_color;
|
||||
border-top-color: @border_bright;
|
||||
border-right-color: @border_dark;
|
||||
border-left-color: @border_bright;
|
||||
border-bottom-color: @border_dark;
|
||||
background-color: @button_bg_color;
|
||||
box-shadow: inset -0.1em -0.1em @border_shade, inset 0.1em 0.1em @border_light;
|
||||
|
||||
/* the actual image! */
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/categories/scalable/xfdesktop-menu.svg");
|
||||
background-position: 0.15em center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.4em;
|
||||
}
|
||||
|
||||
/* indent right modules like in the original */
|
||||
.modules-right {
|
||||
margin: 3px;
|
||||
border-top: 1px solid gray;
|
||||
border-left: 1px solid gray;
|
||||
border-right: 1px solid white;
|
||||
border-bottom: 1px solid white;
|
||||
margin: 0.2em;
|
||||
margin-top: 0.35em;
|
||||
}
|
||||
|
||||
/* If workspaces is the leftmost module, omit left margin */
|
||||
.modules-left > widget:first-child > #workspaces {
|
||||
margin-left: 0;
|
||||
#clock {
|
||||
border-top: 0.1em solid gray;
|
||||
border-left: 0.1em solid gray;
|
||||
border-right: 0.1em solid white;
|
||||
border-bottom: 0.1em solid white;
|
||||
}
|
||||
|
||||
/* If workspaces is the rightmost module, omit right margin */
|
||||
.modules-right > widget:last-child > #workspaces {
|
||||
margin-right: 0;
|
||||
/* base setup for classes that have a Chicago95 icon as the display */
|
||||
#battery, #pulseaudio, #backlight {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 24px;
|
||||
min-width: 24px;
|
||||
color: transparent; /* because the tooltips are still desirable */
|
||||
}
|
||||
|
||||
#battery.charging, #battery.plugged {
|
||||
color: #ffffff;
|
||||
background-color: #208C71;
|
||||
#backlight {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/xfpm-brightness-lcd.png");
|
||||
}
|
||||
|
||||
/* battery levels matching Chicago95 icons */
|
||||
|
||||
#battery.charging.critical {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-000-charging.png");
|
||||
}
|
||||
|
||||
#battery.charging.warning {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-020-charging.png");
|
||||
}
|
||||
|
||||
#battery.charging.low {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-040-charging.png");
|
||||
}
|
||||
|
||||
#battery.charging.medium {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-060-charging.png");
|
||||
}
|
||||
|
||||
#battery.charging.good {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-080-charging.png");
|
||||
}
|
||||
|
||||
#battery.charging.full {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-100-charging.png");
|
||||
}
|
||||
|
||||
#battery.critical {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-000.png");
|
||||
}
|
||||
|
||||
#battery.warning {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-020.png");
|
||||
}
|
||||
|
||||
#battery.low {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-040.png");
|
||||
}
|
||||
|
||||
#battery.medium {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-060.png");
|
||||
}
|
||||
|
||||
#battery.good {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-080.png");
|
||||
}
|
||||
|
||||
#battery.full {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-100.png");
|
||||
}
|
||||
|
||||
/* volume levels matching Chicago95 icons */
|
||||
|
||||
#pulseaudio.muted {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/audio-volume-muted.png");
|
||||
}
|
||||
|
||||
#pulseaudio.low {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/audio-volume-low.png");
|
||||
}
|
||||
|
||||
#pulseaudio.medium {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/audio-volume-medium.png");
|
||||
}
|
||||
|
||||
#pulseaudio.high {
|
||||
background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/audio-volume-high.png");
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
|
|
@ -123,26 +201,10 @@ button:hover {
|
|||
}
|
||||
}
|
||||
|
||||
/* Using steps() instead of linear as a timing function to limit cpu usage */
|
||||
#battery.critical:not(.charging) {
|
||||
background-color: #e35f5f;
|
||||
color: #ffffff;
|
||||
animation-name: blink;
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: steps(12);
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
label:focus {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
#pulseaudio.muted {
|
||||
background-color: #808080;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#tray > .passive {
|
||||
-gtk-icon-effect: dim;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue