diff options
Diffstat (limited to 'users/tazjin/dotfiles/waybar/style.css')
| -rw-r--r-- | users/tazjin/dotfiles/waybar/style.css | 176 |
1 files changed, 119 insertions, 57 deletions
diff --git a/users/tazjin/dotfiles/waybar/style.css b/users/tazjin/dotfiles/waybar/style.css index 319ef695e23e..ce6b60d9cfa3 100644 --- a/users/tazjin/dotfiles/waybar/style.css +++ b/users/tazjin/dotfiles/waybar/style.css @@ -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; +} + +#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; +} + +/* 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 */ +} + +#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"); } -/* If workspaces is the leftmost module, omit left margin */ -.modules-left > widget:first-child > #workspaces { - margin-left: 0; +#battery.critical { + background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-000.png"); } -/* If workspaces is the rightmost module, omit right margin */ -.modules-right > widget:last-child > #workspaces { - margin-right: 0; +#battery.warning { + background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-020.png"); } -#battery.charging, #battery.plugged { - color: #ffffff; - background-color: #208C71; +#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; } |