waybar: Change theme (TODO: Credit)

This commit is contained in:
PapaTutuWawa 2021-12-12 15:33:12 +01:00
parent 1c11f29234
commit 6ef4734277
2 changed files with 132 additions and 114 deletions

View File

@ -22,7 +22,7 @@ in {
{
output = [ "${cfg.output}" ];
layer = "bottom";
position = "left";
position = "top";
gtk-layer-shell = true;
modules-left = [ "custom/applauncher" "sway/workspaces" "sway/mode" ];

View File

@ -1,133 +1,151 @@
/*
Based on https://github.com/indicozy/wmtm/blob/main/configs/Flower/config/waybar/style.css
*/
@define-color background #323732;
@define-color foreground #deddda;
@define-color selection #44475a;
@define-color unfocused #6272a4;
@define-color cyan #5d7380;
@define-color green #fff6f6;
@define-color orange #d65d0e;
@define-color pink #ff5370;
@define-color purple #b16286;
@define-color red #bf6374;
@define-color yellow #d79921;
@define-color fore #d1c29d;
* {
font-size: 14px;
font-family: "Hack";
padding: 0px;
margin: 0px;
/* text-shadow:1px 1px 2px rgba(0,0,0,.6); */
border: none;
font-family: Iosevka Nerd Font, sans-serif;
font-size: 13px;
}
window#waybar {
color: @foreground;
border-radius: 0;
/* background-color: rgba(18, 21, 29, 0.98); */
background-color: #12151d;
/* background-color: rgba(0, 0, 0, 0); */
border-bottom: 3px solid #1e222a;
color: #abb2bf;
transition-property: background-color;
transition-duration: .5s;
}
window#waybar.left {
background: rgba(43, 48, 59, .85);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top: none;
margin: 0;
window#waybar.hidden {
opacity: 0.2;
}
window#waybar.bottom {
padding-top: 0px;
background: @green;
border-bottom-left-radius: 0px;
margin: 0;
}
.modules-left,
.modules-center,
.modules-right {
margin: 0;
padding: 0;
}
/* Base styling for modules */
#workspaces,
#mode,
#window,
#cpu,
#memory,
#temperature,
#custom-media,
#custom-fans,
#clock,
#idle_inhibitor,
#language,
#pulseaudio,
#taskbar,
#tray,
#custom-menu {
padding: 1px 0px 1px 0px;
margin: 0px;
}
#pulseaudio, #idle_inhibitor {
font-size: 30px;
margin: 0px 2px;
}
#pulseaudio {
font-size: 16px;
}
#taskbar,
#tray,
#window {
padding: 0;
margin: 0 0px 0 0px;
}
#taskbar {
margin-top: 0px;
}
#taskbar button {
color: @foreground;
border-radius: 0px;
padding: 3px 0px 3px 0px;
}
#taskbar button.active {
icon-shadow: 0px 0px 3px alpha(#111131, .9);
border-style: dashed;
border-width: 0 0 0 0;
border-color: @foreground;
border-radius: 0;
}
#backlight,
#battery,
#network,
#tray {
color: black;
icon-shadow: 0px 1px 2px alpha(#020000, .9);
padding: 2px 0px 2px 0px;
background-color: #1e222a;
padding: 0 10px;
margin: 2px 4px 5px 4px;
border: 3px solid rgba(0, 0, 0, 0);
border-radius: 90px;
background-clip: padding-box;
}
#custom-menu,
#custom-applauncher,
#custom-notifications {
font-size: 30px;
}
#clock {
font-size: 16px;
margin-left: 2px;
margin-right: 2px;
}
#workspaces {
padding: 0px 0px 0px 0px;
margin-left: 0px;
}
#workspaces button {
margin: 0;
padding: 0px 0px 0px 0px;
border-radius: 0px;
color: @foreground;
padding: 0 5px;
min-width: 20px;
color: #61afef;
}
#workspaces button:hover {
background-color: rgba(0, 0, 0, 0.2)
}
#workspaces button.focused {
color: @foreground;
background-color: @purple;
border-style: solid;
border-width: 0 0 0 0;
border-color: @foreground;
border-radius: 0;
color: #c678dd;
}
#workspaces button.urgent {
color: #e06c75;
}
#cpu {
color: #61afef;
}
#memory {
color: #c678dd;
}
#temperature {
color: #d19a66;
}
#temperature.critical {
background-color: #e06c75;
color: #1e222a;
}
#custom-media {
background-color: #c678dd;
color: #1e222a;
}
#custom-fans {
color: #98c379;
}
#clock {
color: #61afef;
}
#idle_inhibitor {
color: #abb2bf;
}
#idle_inhibitor.activated {
background-color: #abb2bf;
color: #1e222a;
}
#language {
color: #56b6c2;
}
#pulseaudio {
color: #d19a66;
}
#pulseaudio.muted {
background-color: #e06c75;
color: #1e222a;
}
#backlight {
color: #61afef;
}
#battery {
color: #98c379;
}
#battery.charging, #battery.plugged {
background-color: #98c379;
color: #1e222a;
}
@keyframes blink {
to {
background-color: #1e222a;
color: #e06c75;
}
}
#battery.critical:not(.charging) {
background-color: #e06c75;
color: #1e222a;
animation-name: blink;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#network {
color: #c678dd
}
#network.disconnected {
background-color: #e06c75;
color: #1e222a;
}