diff --git a/dot_config/waybar/config b/dot_config/waybar/config index 7c6e044..96df4de 100644 --- a/dot_config/waybar/config +++ b/dot_config/waybar/config @@ -1,9 +1,15 @@ { // "layer": "top", // Waybar at top layer // "position": "bottom", // Waybar position (top|bottom|left|right) - "height": 30, // Waybar height (to be removed for auto height) + "height": 36, // Waybar height (to be removed for auto height) // "width": 1280, // Waybar width - "spacing": 4, // Gaps between modules (4px) + //"spacing": 4, // Gaps between modules (4px) + "layer": "top", + "gtk-layer-shell": "true", + "margin-top": 4, + "margin-left": 16, + "margin-right": 16, + "margin-bottom": -6, // Choose the order of the modules "modules-left": [ "sway/workspaces", @@ -16,12 +22,12 @@ "modules-right": [ "idle_inhibitor", "pulseaudio", - "network", - "cpu", - "memory", - "temperature", + //"network", + //"cpu", + //"memory", + //"temperature", "backlight", - "custom/wl-gammarelay-temperature", + //"custom/wl-gammarelay-temperature", //"custom/wl-gammarelay-brightness", //"custom/wl-gammarelay-gamma", //"keyboard-state", @@ -154,7 +160,7 @@ "warning": 30, "critical": 15 }, - "format": "{capacity}% {icon} ", + "format": "{capacity}% {icon}", "format-charging": "{capacity}% ", "format-plugged": "{capacity}% ", "format-alt": "{time} {icon}", diff --git a/dot_config/waybar/style.css b/dot_config/waybar/style.css index 8320ebd..2b3236f 100644 --- a/dot_config/waybar/style.css +++ b/dot_config/waybar/style.css @@ -1,298 +1,270 @@ * { - /* `otf-font-awesome` is required to be installed for icons */ - font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; - font-size: 13px; -} - -window#waybar { - background-color: rgba(43, 48, 59, 0.5); - border-bottom: 3px solid rgba(100, 114, 125, 0.5); - color: #ffffff; + border: none; + font-family: JetBrains Mono,Ubuntu Nerd Font,Weather Icons,sans-serif; + font-size: 14px; + font-weight: bold; + min-height: 0; + } + + window#waybar { + background-color: transparent; + + } + + window > box { + background: #181818; + border-radius: 12px; + min-width: 35px; + margin: 3px; + background-clip: border-box; transition-property: background-color; transition-duration: .5s; -} - -window#waybar.hidden { - opacity: 0.2; -} - -window#waybar.empty { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 2px 1px rgba(0, 0, 0, 0.18), 0 2px 4px 2px rgba(0, 0, 0, 0.18); + } + + #disk, + #custom-memory, + #cpu, + #custom-gputmp + #custom-uptime, + #temperature, + #custom-weather, + #cpu, #custom-gputmp { + background-color: #1f1f1f; + padding: 0 7px; + margin: 5px 0px; + } + #disk, #custom-memory { + background-color: #1f1f1f; + padding: 0 7px; + margin: 5px 0px; + } + + #disk { + color: #5dbbc1; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + } + + #custom-memory { + color: #9841bb; + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; + } + + #cpu { + color: #f5c211; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + } + + #custom-gputmp { + color: #8FBF7F; + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; + } + + #custom-uptime, #temperature, #custom-weather { + background-color: #1f1f1f; + padding: 0px 7px; + margin: 5px 0px; + } + + #custom-uptime { + color: #2ec27e; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + } + + #temperature { + color: #9841bb; + + } + + #pulseaudio { + color: #f5c211; + background-color: #1f1f1f; + padding: 0px 8px; + margin: 5px 5px 5px 4px; + border-radius: 8px; + } + + #pulseaudio.muted { + background-color: #e06c75; + } + + #custom-kernel { + color: #51a1ff; + background-color: #1f1f1f; + padding: 0px 7px; + margin: 5px 5px 5px 5px; + border-radius: 8px; + } + + #custom-weather { + color: #5dbbc1; + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; + } + + #temperature { + color: #9841bb; + } + + #temperature.critical { + background-color: #e06c75; + color: #1f1f1f; + } + + @keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } + } + + #workspaces{ + background-color: #1f1f1f; + border-radius: 8px; + } + + #workspaces, + #custom-media, + #custom-fans, + #clock, + #network, + #custom-power, + #mpd, + #custom-gentoo, + #custom-network, + #window, + #memory, + #battery, + #backlight, + #temperature, + #custom-wl-gammarelay-temperature, + #custom-wl-gammarelay-brightness, + #custom-wl-gammarelay-gamma, + #custom-events, + #custom-wvkbd, + #custom-notification, + #tray { + background-color: #1f1f1f; + padding: 0 7px; + margin: 5px 5px 5px 5px; + border-radius: 8px; + background-clip: padding-box; + } + + #idle_inhibitor, + #idle_inhibitor.activated, + #workspaces button { + padding: 0 6px; + min-width: 10px; + color: #51a1ff; + } + + #custom-network { + color: #e06c75; + background-color: #1f1f1f; + + } + + #custom-dunst { + color: #9841bb; + } + + #custom-dot{ + color: #38384d; + font-size: 15px; background-color: transparent; -} - -/* -window#waybar.solo { - background-color: #FFFFFF; -} -*/ - -/* -window#waybar.termite { - background-color: #3F3F3F; -} -*/ - -window#waybar.chromium { - background-color: #000000; - border: none; -} - -button { - /* Use box-shadow instead of border so the text isn't offset */ - box-shadow: inset 0 -3px transparent; - /* Avoid rounded borders under each button name */ - border: none; - border-radius: 0; -} - -/* 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; -} - -#workspaces button { - padding: 0 5px; + } + + #custom-dot2{ + color: #38384d; + font-size: 15px; background-color: transparent; - color: #ffffff; -} - -#workspaces button:hover { - background: rgba(0, 0, 0, 0.2); -} - -#workspaces button.focused { - background-color: #64727D; - box-shadow: inset 0 -3px #ffffff; -} - -#workspaces button.urgent { - background-color: #eb4d4b; -} - -#mode { - background-color: #64727D; - border-bottom: 3px solid #ffffff; -} - -#clock, -#battery, -#cpu, -#memory, -#disk, -#temperature, -#backlight, -#network, -#pulseaudio, -#wireplumber, -#custom-media, -#tray, -#mode, -#idle_inhibitor, -#scratchpad, -#custom-wl-gammarelay-temperature, -#custom-wl-gammarelay-brightness, -#custom-wl-gammarelay-gamma, -#custom-events, -#custom-wvkbd, -#custom-notification, -#mpd { - padding: 0 10px; - color: #ffffff; -} - -#window, -#workspaces { - margin: 0 4px; -} - -/* If workspaces is the leftmost module, omit left margin */ -.modules-left > widget:first-child > #workspaces { - margin-left: 0; -} - -/* If workspaces is the rightmost module, omit right margin */ -.modules-right > widget:last-child > #workspaces { - margin-right: 0; -} - -#clock { - background-color: #64727D; -} - -#battery { - background-color: #ffffff; - color: #000000; -} - -#battery.charging, #battery.plugged { - color: #ffffff; - background-color: #26A65B; -} - -@keyframes blink { - to { - background-color: #ffffff; - color: #000000; - } -} - -#battery.critical:not(.charging) { - background-color: #f53c3c; - color: #ffffff; - animation-name: blink; - animation-duration: 0.5s; - animation-timing-function: linear; - animation-iteration-count: infinite; - animation-direction: alternate; -} - -label:focus { - background-color: #000000; -} - -#cpu { - background-color: #2ecc71; - color: #000000; -} - -#memory { - background-color: #9b59b6; -} - -#disk { - background-color: #964B00; -} - -#custom-wl-gammarelay-temperature, -#custom-wl-gammarelay-brightness, -#custom-wl-gammarelay-gamma, -#backlight { - background-color: #90b1b1; -} - -#custom-wvkbd, -#custom-notification { - background-color: #2980b9; -} - -#network { - background-color: #2980b9; -} - -#network.disconnected { - background-color: #f53c3c; -} - -#custom-events, -#pulseaudio { - background-color: #f1c40f; - color: #000000; -} - -#pulseaudio.muted { - background-color: #90b1b1; - color: #2a5c45; -} - -#wireplumber { - background-color: #fff0f5; - color: #000000; -} - -#wireplumber.muted { - background-color: #f53c3c; -} - -#custom-media { - background-color: #66cc99; - color: #2a5c45; - min-width: 100px; -} - -#custom-media.custom-spotify { - background-color: #66cc99; -} - -#custom-media.custom-vlc { - background-color: #ffa000; -} - -#temperature { - background-color: #f0932b; -} - -#temperature.critical { - background-color: #eb4d4b; -} - -#tray { - background-color: #2980b9; -} - -#tray > .passive { - -gtk-icon-effect: dim; -} - -#tray > .needs-attention { - -gtk-icon-effect: highlight; - background-color: #eb4d4b; -} - -#idle_inhibitor { - background-color: #2d3436; -} - -#idle_inhibitor.activated { - background-color: #ecf0f1; - color: #2d3436; -} - -#mpd { - background-color: #66cc99; - color: #2a5c45; -} - -#mpd.disconnected { - background-color: #f53c3c; -} - -#mpd.stopped { - background-color: #90b1b1; -} - -#mpd.paused { - background-color: #51a37a; -} - -#language { - background: #00b093; - color: #740864; - padding: 0 5px; - margin: 0 0px; - min-width: 16px; -} - -#keyboard-state { - background: #97e1ad; - color: #000000; - padding: 0 0px; - margin: 0 0px; - min-width: 16px; -} - -#keyboard-state > label { - padding: 0 5px; -} - -#keyboard-state > label.locked { - background: rgba(0, 0, 0, 0.2); -} - -#scratchpad { - background: rgba(0, 0, 0, 0.2); -} - -#scratchpad.empty { - background-color: transparent; -} + } + + #custom-dot3{ + color: #38384d; + font-size: 15px; + background-color: transparent; + } + + #workspaces button:hover { + background-color: rgba(0, 0, 0, 0.2); + } + + #workspaces button.active { + color: #9841bb; + + } + + #workspaces button.focused { + color: #9841bb; + } + + #workspaces button.urgent { + color: #e06c75; + } + + #memory { + color: #9841bb; + } + + #custom-media { + background-color: #9841bb; + color: #1f1f1f; + } + + #custom-fans { + color: #e06c75; + } + + #clock { + color: #51a1ff; + } + + #mode { + color: #0fa4bf; + } + + #window { + color: #c0bfbc; + background-color: transparent; + } + + #custom-power { + color: #f65866; + background-color: #1f1f1f; + } + + #custom-gentoo { + font-size: 15px; + color: #9841bb; + background-color: transparent; + } + + @keyframes blink { + to { + background-color: #1f1f1f; + color: #e06c75; + } + } + + #network { + color: #9841bb + } + + #network.disconnected { + background-color: #e06c75; + color: #1f1f1f; + } + + \ No newline at end of file diff --git a/dot_config/waybar/style.css-old3 b/dot_config/waybar/style.css-old3 new file mode 100644 index 0000000..8320ebd --- /dev/null +++ b/dot_config/waybar/style.css-old3 @@ -0,0 +1,298 @@ +* { + /* `otf-font-awesome` is required to be installed for icons */ + font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; + font-size: 13px; +} + +window#waybar { + background-color: rgba(43, 48, 59, 0.5); + border-bottom: 3px solid rgba(100, 114, 125, 0.5); + color: #ffffff; + transition-property: background-color; + transition-duration: .5s; +} + +window#waybar.hidden { + opacity: 0.2; +} + +window#waybar.empty { + background-color: transparent; +} + +/* +window#waybar.solo { + background-color: #FFFFFF; +} +*/ + +/* +window#waybar.termite { + background-color: #3F3F3F; +} +*/ + +window#waybar.chromium { + background-color: #000000; + border: none; +} + +button { + /* Use box-shadow instead of border so the text isn't offset */ + box-shadow: inset 0 -3px transparent; + /* Avoid rounded borders under each button name */ + border: none; + border-radius: 0; +} + +/* 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; +} + +#workspaces button { + padding: 0 5px; + background-color: transparent; + color: #ffffff; +} + +#workspaces button:hover { + background: rgba(0, 0, 0, 0.2); +} + +#workspaces button.focused { + background-color: #64727D; + box-shadow: inset 0 -3px #ffffff; +} + +#workspaces button.urgent { + background-color: #eb4d4b; +} + +#mode { + background-color: #64727D; + border-bottom: 3px solid #ffffff; +} + +#clock, +#battery, +#cpu, +#memory, +#disk, +#temperature, +#backlight, +#network, +#pulseaudio, +#wireplumber, +#custom-media, +#tray, +#mode, +#idle_inhibitor, +#scratchpad, +#custom-wl-gammarelay-temperature, +#custom-wl-gammarelay-brightness, +#custom-wl-gammarelay-gamma, +#custom-events, +#custom-wvkbd, +#custom-notification, +#mpd { + padding: 0 10px; + color: #ffffff; +} + +#window, +#workspaces { + margin: 0 4px; +} + +/* If workspaces is the leftmost module, omit left margin */ +.modules-left > widget:first-child > #workspaces { + margin-left: 0; +} + +/* If workspaces is the rightmost module, omit right margin */ +.modules-right > widget:last-child > #workspaces { + margin-right: 0; +} + +#clock { + background-color: #64727D; +} + +#battery { + background-color: #ffffff; + color: #000000; +} + +#battery.charging, #battery.plugged { + color: #ffffff; + background-color: #26A65B; +} + +@keyframes blink { + to { + background-color: #ffffff; + color: #000000; + } +} + +#battery.critical:not(.charging) { + background-color: #f53c3c; + color: #ffffff; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +label:focus { + background-color: #000000; +} + +#cpu { + background-color: #2ecc71; + color: #000000; +} + +#memory { + background-color: #9b59b6; +} + +#disk { + background-color: #964B00; +} + +#custom-wl-gammarelay-temperature, +#custom-wl-gammarelay-brightness, +#custom-wl-gammarelay-gamma, +#backlight { + background-color: #90b1b1; +} + +#custom-wvkbd, +#custom-notification { + background-color: #2980b9; +} + +#network { + background-color: #2980b9; +} + +#network.disconnected { + background-color: #f53c3c; +} + +#custom-events, +#pulseaudio { + background-color: #f1c40f; + color: #000000; +} + +#pulseaudio.muted { + background-color: #90b1b1; + color: #2a5c45; +} + +#wireplumber { + background-color: #fff0f5; + color: #000000; +} + +#wireplumber.muted { + background-color: #f53c3c; +} + +#custom-media { + background-color: #66cc99; + color: #2a5c45; + min-width: 100px; +} + +#custom-media.custom-spotify { + background-color: #66cc99; +} + +#custom-media.custom-vlc { + background-color: #ffa000; +} + +#temperature { + background-color: #f0932b; +} + +#temperature.critical { + background-color: #eb4d4b; +} + +#tray { + background-color: #2980b9; +} + +#tray > .passive { + -gtk-icon-effect: dim; +} + +#tray > .needs-attention { + -gtk-icon-effect: highlight; + background-color: #eb4d4b; +} + +#idle_inhibitor { + background-color: #2d3436; +} + +#idle_inhibitor.activated { + background-color: #ecf0f1; + color: #2d3436; +} + +#mpd { + background-color: #66cc99; + color: #2a5c45; +} + +#mpd.disconnected { + background-color: #f53c3c; +} + +#mpd.stopped { + background-color: #90b1b1; +} + +#mpd.paused { + background-color: #51a37a; +} + +#language { + background: #00b093; + color: #740864; + padding: 0 5px; + margin: 0 0px; + min-width: 16px; +} + +#keyboard-state { + background: #97e1ad; + color: #000000; + padding: 0 0px; + margin: 0 0px; + min-width: 16px; +} + +#keyboard-state > label { + padding: 0 5px; +} + +#keyboard-state > label.locked { + background: rgba(0, 0, 0, 0.2); +} + +#scratchpad { + background: rgba(0, 0, 0, 0.2); +} + +#scratchpad.empty { + background-color: transparent; +}