From 8105ccb19029024c4cc309f22f262ed96c18c661 Mon Sep 17 00:00:00 2001 From: Alexander Yakovlev Date: Sat, 16 Mar 2024 11:27:37 +0600 Subject: [PATCH] restyled --- config | 44 +++++++++++-- palette.css | 39 ++++++++++++ style.css | 178 ++++++++++++++++++++++++++++++++++++++++------------ 3 files changed, 216 insertions(+), 45 deletions(-) create mode 100644 palette.css diff --git a/config b/config index 9895f65..9799223 100644 --- a/config +++ b/config @@ -1,16 +1,29 @@ { "layer": "bottom", "position": "bottom", - "modules-left": ["sway/workspaces", "sway/mode", "sway/window"], - "modules-center": [], + "modules-left": [ + "sway/workspaces", + "sway/mode", + "sway/window" + ], + "modules-center": [ + ], + "modules-center-disabled": [ + "custom/music" + ], "modules-right": [ "memory", "cpu", - "clock", + "sway/language", "tray" ], + "modules-disabled": [ + "custom/pomodoro", + "clock", + "custom/weeklog", + ], "sway/window": { - "max-length": 50 + "max-length": 100 }, "sway/mode": { "format": "{}" @@ -19,9 +32,28 @@ "tooltip-format": "{:%Y %B}\n{calendar}", "format": "{:%a %d %b %H:%M}" }, + "custom/weeklog": { + "exec": "/home/alexander/bin/weeklog", + "format": "{} U", + "interval": 120 + }, + "custom/pomodoro": { + "exec": "i3-gnome-pomodoro status --format=waybar --no-seconds", + "return-type": "json", + "interval": 5, + "format": "{} ", + "on-click": "i3-gnome-pomodoro start", + "on-middle-click": "i3-gnome-pomodoro toggle", + "on-right-click": "i3-gnome-pomodoro stop", + }, + "custom/music": { + "exec": "mpris-ctl info", + "format": "🎵 {}", + "interval": 10 + }, "tray": { - "icon-size": 30, - "spacing": 10 + "icon-size": 20, + "spacing": 4 }, "memory": { "format": "{}% RAM" diff --git a/palette.css b/palette.css new file mode 100644 index 0000000..8512b04 --- /dev/null +++ b/palette.css @@ -0,0 +1,39 @@ +/* +* +* Catppuccin Mocha palette +* Maintainer: rubyowo +* +*/ + +@define-color base #1e1e2e; +@define-color mantle #181825; +@define-color crust #11111b; + +@define-color text #cdd6f4; +@define-color subtext0 #a6adc8; +@define-color subtext1 #bac2de; + +@define-color surface0 #313244; +@define-color surface1 #45475a; +@define-color surface2 #585b70; + +@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; + +/* End palette */ diff --git a/style.css b/style.css index b5d4ee4..a7daf32 100644 --- a/style.css +++ b/style.css @@ -1,18 +1,147 @@ +@import "./palette.css"; + * { + /* `otf-font-awesome` is required to be installed for icons */ + font-family: "PT Sans", Roboto, Helvetica, Arial, sans-serif; + font-size: 17px; border: none; border-radius: 0; - /* `otf-font-awesome` is required to be installed for icons */ - font-family: Roboto, Helvetica, Arial, sans-serif; - font-size: 13px; min-height: 0; } window#waybar { + background-color: @crust; + color: @text; + transition-property: background-color; + transition-duration: 0.5s; + border-radius: 0px; + transition-duration: .5s; + margin: 16px 16px; + + /* 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; +} + +#workspaces button { + color: @text; + background: @background3; + border-radius: 8px; + padding: 0px 10px 0px 10px; + margin: 7px 5px 10px 5px; + border: 1px solid @border; +} + +#workspaces button:hover { + background: @surface0; + color: @text; +} + +#workspaces button.active { + color: @crust; + background: @overlay2; + border: none; +} + +#custom-launcher, +#clock, +#battery, +#cpu, +#temperature, +#backlight, +#network, +#pulseaudio, +#memory, +#tray, +#mode, +#language, +#idle_inhibitor, +#custom-media, +#custom-weeklog, +#custom-dunst, +#custom-powermenu, +#mpd { + padding: 0px 20px; + margin: 7px 0px 10px 0px; + color: @crust; + background-color: @lavender; + /* border-radius: 8px; */ + /* background-color: rgba(0, 26, 128, 0.5); */ +} + +#window, +#custom-launcher { + padding: 0px 25px 0px 20px; + margin: 7px 0px 10px 20px; + /*background-color: @mauve;*/ +} + +/* +#cpu { + background-color: @lavender; +} + +#temperature{ + background-color: @blue; +} + +#memory { + background-color: @sapphire; +} + +#custom-dunst { + padding: 0px 20px 0px 13px; + background-color: @sky; +} + +#pulseaudio { + padding: 0px 20px 0px 17px; + background-color: @teal; +} + +#network { + padding: 0px 15px 0px 20px; + background-color: @green; +} + +#battery { + background-color: @yellow; +} + +#clock { + background-color: @peach; +} + +#custom-powermenu { + padding: 0px 25px 0px 20px; + margin: 7px 20px 10px 0px; + background-color: @maroon; +} +*/ + +@keyframes blink { + to { + background-color: rgba(30, 34, 42, 0.5); + color: #abb2bf; + } +} + +#battery.critical:not(.charging) { + color: #f53c3c; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +label:focus { + background-color: #000000; } window#waybar.hidden { @@ -31,19 +160,6 @@ window#waybar.chromium { #workspaces { margin-right: 10px; } -#workspaces button { - padding: 0 5px; - background-color: transparent; - color: #ffffff; - border-bottom: 3px solid transparent; -} - -/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ -#workspaces button:hover { - background: rgba(0, 0, 0, 0.2); - box-shadow: inherit; - border-bottom: 3px solid #ffffff; -} #workspaces button.focused { background-color: #64727D; @@ -62,26 +178,6 @@ window#waybar.chromium { margin-left: 10px; } -#clock, -#battery, -#cpu, -#memory, -#temperature, -#backlight, -#network, -#pulseaudio, -#custom-media, -#tray, -#mode, -#idle_inhibitor, -#mpd { - padding: 0 10px; - margin: 0; - padding: 0 10px; - color: #ffffff; - background-color: rgba(0, 26, 128, 0.5); -} - #memory { border-top-left-radius: 10px; border-bottom-left-radius: 10px; @@ -97,3 +193,7 @@ window#waybar.chromium { label:focus { background-color: #000000; } + +#custom-pomodoro.paused { + border-bottom: 3px solid @yellow; +}