Compare commits
39 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
e36cc233c8 | ||
|
|
f7710c4f98 | ||
|
|
b1d7c328b6 | ||
|
|
18ae941c91 | ||
|
|
08d69ede58 | ||
|
|
7413e52908 | ||
|
|
f4ebec0c75 | ||
|
|
09feb624ba | ||
|
|
b2de65b76a | ||
|
|
70358a64e1 | ||
|
|
c163b59a68 | ||
|
|
5020002242 | ||
|
|
6c39ad1ea4 | ||
|
|
ec93cd7f25 | ||
|
|
e6759ccbd3 | ||
|
|
4e2587496f | ||
|
|
19774d0eb6 | ||
|
|
251a929e22 | ||
|
|
c51a3af898 | ||
|
|
0b8ad6f2ef | ||
|
|
dc43fee8d3 | ||
|
|
1631dd3768 | ||
|
|
6865d1022f | ||
|
|
494f31c473 | ||
|
|
13454eac30 | ||
|
|
1fad554e19 | ||
|
|
69c2c298f4 | ||
|
|
18e60c6471 | ||
|
|
861e6d5479 | ||
|
|
041ef5d3b8 | ||
|
|
a3f9c82cde | ||
|
|
2df121d4a6 | ||
|
|
3db920d2b2 | ||
|
|
961f84bdf0 | ||
|
|
886f440c47 | ||
|
|
8eb7da97f6 | ||
|
|
03dbe80e76 | ||
|
|
e31af65995 | ||
|
|
182f0d4126 |
10 changed files with 810 additions and 69 deletions
BIN
.src/waybar-left.gif
Normal file
BIN
.src/waybar-left.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
.src/waybar-middle_bar-colors.gif
Normal file
BIN
.src/waybar-middle_bar-colors.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 518 KiB |
BIN
.src/waybar-right.gif
Normal file
BIN
.src/waybar-right.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 499 KiB |
61
README.md
61
README.md
|
|
@ -1,2 +1,63 @@
|
|||
# waybar
|
||||
# showcase
|
||||
|
||||
|
||||
|
||||
<details>
|
||||
<summary>left-side</summary>
|
||||
|
||||
|
||||
|
||||
> dynamic icons on workspaces & workspace-button "change" on hover + waybar gets red if in fullscreen (will be shown in middle&&barcolor-changes)
|
||||
</details>
|
||||
<details>
|
||||
<summary>right-side</summary>
|
||||
|
||||
|
||||
|
||||
> dynamic groups for memory/cpu/disk & powerslide-menu
|
||||
</details>
|
||||
<details>
|
||||
<summary>middle && barcolor-changes</summary>
|
||||
|
||||
|
||||
|
||||
> bar changes red if fullscreen is on (not the whole screen of course, but the 'light'-fullscreen mode instead) <br>
|
||||
> also changes color if NO window is present, and if something is on the screen
|
||||
</details>
|
||||
|
||||
> i know the visuals are slight, but i like and love the clean look. Also it's my first complete own design :D
|
||||
|
||||
## installation
|
||||
To install this waybar theme, you could, if you do not have a waybar folder under your ~/.config/ folder currently installed, just clone the repo directly inside your ~/.config/ folder and update the repo, to get the newest commit
|
||||
```bash
|
||||
git clone https://git.k4li.de/dotfiles/waybar ~/.config/waybar
|
||||
```
|
||||
|
||||
> - You can also checkout the dev branch
|
||||
|
||||
## dependencies
|
||||
```
|
||||
grim grimshot
|
||||
```
|
||||
> for screenshots
|
||||
```
|
||||
wttrbar
|
||||
```
|
||||
> to display the weather icon + info
|
||||
```
|
||||
wlogout swaylock-effects
|
||||
```
|
||||
> to logout and shutdown menu
|
||||
```
|
||||
pamixer pavucontrol
|
||||
```
|
||||
> for sound related settings
|
||||
```
|
||||
iwd
|
||||
```
|
||||
or
|
||||
```
|
||||
nmcli
|
||||
```
|
||||
> for wifi
|
||||
|
|
|
|||
162
ai_config.jsonc
Normal file
162
ai_config.jsonc
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
{
|
||||
"layer": "top",
|
||||
"position": "top",
|
||||
"margin": 0,
|
||||
"spacing": 0,
|
||||
|
||||
"modules-left": [
|
||||
"hyprland/workspaces",
|
||||
"custom/separator",
|
||||
"hyprland/window"
|
||||
],
|
||||
|
||||
"modules-center": [
|
||||
"group/system_metrics"
|
||||
],
|
||||
|
||||
"modules-right": [
|
||||
"group/status",
|
||||
"custom/separator",
|
||||
"group/power"
|
||||
],
|
||||
|
||||
"group/system_metrics": {
|
||||
"orientation": "horizontal",
|
||||
"modules": [
|
||||
"cpu",
|
||||
"memory",
|
||||
"disk",
|
||||
"network"
|
||||
]
|
||||
},
|
||||
|
||||
"group/status": {
|
||||
"orientation": "horizontal",
|
||||
"modules": [
|
||||
"pulseaudio",
|
||||
"battery",
|
||||
"clock",
|
||||
"custom/weather"
|
||||
]
|
||||
},
|
||||
|
||||
"hyprland/workspaces": {
|
||||
"format": "{icon}",
|
||||
"on-click": "activate",
|
||||
"format-icons": {
|
||||
"active": "",
|
||||
"default": "",
|
||||
"urgent": ""
|
||||
}
|
||||
},
|
||||
|
||||
"custom/separator": {
|
||||
"format": "│",
|
||||
"interval": "once",
|
||||
"tooltip": false
|
||||
},
|
||||
|
||||
"hyprland/window": {
|
||||
"format": "{}",
|
||||
"separate-outputs": true
|
||||
},
|
||||
|
||||
"cpu": {
|
||||
"interval": 1,
|
||||
"format": " {usage}%",
|
||||
"max-length": 10,
|
||||
"on-click": "foot htop"
|
||||
},
|
||||
|
||||
"memory": {
|
||||
"interval": 5,
|
||||
"format": " {percentage}%",
|
||||
"max-length": 10
|
||||
},
|
||||
|
||||
"disk": {
|
||||
"interval": 30,
|
||||
"format": " {percentage_used}%",
|
||||
"path": "/"
|
||||
},
|
||||
|
||||
"network": {
|
||||
"format-wifi": " {essid}",
|
||||
"format-ethernet": " {ipaddr}",
|
||||
"format-disconnected": "",
|
||||
"tooltip-format": "{ifname} via {gwaddr}",
|
||||
"on-click": "kitty --title 'Network Manager' nmtui",
|
||||
"on-click-right": "nm-connection-editor"
|
||||
},
|
||||
|
||||
"pulseaudio": {
|
||||
"format": "{icon} {volume}%",
|
||||
"format-muted": "",
|
||||
"format-icons": {
|
||||
"default": ["", "", ""]
|
||||
},
|
||||
"on-click": "pavucontrol"
|
||||
},
|
||||
|
||||
"battery": {
|
||||
"states": {
|
||||
"warning": 30,
|
||||
"critical": 15
|
||||
},
|
||||
"format": "{icon} {capacity}%",
|
||||
"format-icons": ["", "", "", "", "", "", "", "", "", ""]
|
||||
},
|
||||
|
||||
"clock": {
|
||||
"format": " {:%H:%M}",
|
||||
"format-alt": " {:%Y-%m-%d}",
|
||||
"tooltip-format": "<tt>{calendar}</tt>"
|
||||
},
|
||||
|
||||
"custom/weather": {
|
||||
"format": "{}°",
|
||||
"tooltip": true,
|
||||
"interval": 3600,
|
||||
"exec": "wttrbar",
|
||||
"return-type": "json"
|
||||
},
|
||||
|
||||
"group/power": {
|
||||
"orientation": "horizontal",
|
||||
"drawer": {
|
||||
"transition-duration": 300,
|
||||
"children-class": "power-item",
|
||||
"transition-left-to-right": false
|
||||
},
|
||||
"modules": [
|
||||
"custom/power",
|
||||
"custom/lock",
|
||||
"custom/reboot",
|
||||
"custom/quit"
|
||||
]
|
||||
},
|
||||
|
||||
"custom/power": {
|
||||
"format": "",
|
||||
"on-click": "wlogout",
|
||||
"tooltip": false
|
||||
},
|
||||
|
||||
"custom/lock": {
|
||||
"format": "",
|
||||
"on-click": "swaylock --screenshots --clock --indicator --effect-pixelate 18 --effect-blur 8x8",
|
||||
"tooltip": false
|
||||
},
|
||||
|
||||
"custom/reboot": {
|
||||
"format": "",
|
||||
"on-click": "reboot",
|
||||
"tooltip": false
|
||||
},
|
||||
|
||||
"custom/quit": {
|
||||
"format": "",
|
||||
"on-click": "hyprctl dispatch exit",
|
||||
"tooltip": false
|
||||
}
|
||||
}
|
||||
170
ai_style.css
Normal file
170
ai_style.css
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
* {
|
||||
font-family: "JetBrainsMono Nerd Font", "Symbols Nerd Font", monospace;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* AI-inspired color palette in RGBA:
|
||||
* Deep Space: rgba(42, 44, 65, 1) [#2a2c41]
|
||||
* Steel Blue: rgba(142, 154, 175, 1) [#8e9aaf]
|
||||
* Crystal: rgba(236, 241, 243, 1) [#ecf1f3]
|
||||
* Neural Red: rgba(239, 37, 60, 1) [#ef253c]
|
||||
* Core Red: rgba(215, 4, 39, 1) [#d70427]
|
||||
* Quantum: rgba(2, 108, 90, 1) [#026c5a]
|
||||
* Deep Core: rgba(1, 54, 45, 1) [#01362d]
|
||||
*/
|
||||
|
||||
@keyframes quantum_pulse {
|
||||
0% { border-color: rgba(2, 108, 90, 0.3); }
|
||||
50% { border-color: rgba(2, 108, 90, 0.8); }
|
||||
100% { border-color: rgba(2, 108, 90, 0.3); }
|
||||
}
|
||||
|
||||
@keyframes neural_alert {
|
||||
0% { border-width: 1px; background: rgba(239, 37, 60, 0.1); }
|
||||
50% { border-width: 2px; background: rgba(215, 4, 39, 0.2); }
|
||||
100% { border-width: 1px; background: rgba(239, 37, 60, 0.1); }
|
||||
}
|
||||
|
||||
window#waybar {
|
||||
background: rgba(42, 44, 65, 0.85);
|
||||
border: none;
|
||||
box-shadow: 0 0 15px rgba(1, 54, 45, 0.2);
|
||||
margin: 8px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
window#waybar.empty {
|
||||
background: rgba(42, 44, 65, 0.75);
|
||||
}
|
||||
|
||||
window#waybar.fullscreen {
|
||||
margin: 0;
|
||||
background: rgba(42, 44, 65, 0.95);
|
||||
border-bottom: 2px solid rgba(239, 37, 60, 0.8);
|
||||
}
|
||||
|
||||
#workspaces {
|
||||
margin: 0 8px;
|
||||
background: rgba(1, 54, 45, 0.1);
|
||||
border-radius: 0;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#workspaces button {
|
||||
color: rgba(142, 154, 175, 0.8);
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
margin: 2px;
|
||||
padding: 1px 8px;
|
||||
min-width: 24px;
|
||||
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
#workspaces button:hover {
|
||||
color: rgba(236, 241, 243, 0.95);
|
||||
border-bottom: 1px solid rgba(2, 108, 90, 0.5);
|
||||
}
|
||||
|
||||
#workspaces button.active {
|
||||
color: rgba(236, 241, 243, 1);
|
||||
background: rgba(2, 108, 90, 0.2);
|
||||
border: 1px solid rgba(2, 108, 90, 0.3);
|
||||
animation: quantum_pulse 4s infinite;
|
||||
}
|
||||
|
||||
#workspaces button.urgent {
|
||||
color: rgba(236, 241, 243, 1);
|
||||
border: 1px solid rgba(239, 37, 60, 0.8);
|
||||
animation: neural_alert 1s infinite;
|
||||
}
|
||||
|
||||
#window {
|
||||
margin: 4px 8px;
|
||||
padding: 0 12px;
|
||||
background: transparent;
|
||||
border-left: 2px solid rgba(2, 108, 90, 0.3);
|
||||
color: rgba(236, 241, 243, 0.95);
|
||||
}
|
||||
|
||||
/* Modules Grid Layout */
|
||||
#pulseaudio,
|
||||
#memory,
|
||||
#cpu,
|
||||
#battery,
|
||||
#disk,
|
||||
#clock,
|
||||
#network,
|
||||
#tray {
|
||||
margin: 4px;
|
||||
padding: 0 12px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(2, 108, 90, 0.2);
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
#memory:hover,
|
||||
#cpu:hover,
|
||||
#battery:hover,
|
||||
#disk:hover,
|
||||
#network:hover {
|
||||
background: rgba(2, 108, 90, 0.1);
|
||||
border-color: rgba(2, 108, 90, 0.4);
|
||||
}
|
||||
|
||||
#clock {
|
||||
color: rgba(239, 37, 60, 0.95);
|
||||
border-color: rgba(239, 37, 60, 0.3);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#battery.warning {
|
||||
animation: neural_alert 2s infinite;
|
||||
}
|
||||
|
||||
#battery.critical {
|
||||
color: rgba(215, 4, 39, 1);
|
||||
animation: neural_alert 750ms infinite;
|
||||
}
|
||||
|
||||
/* Power Menu Styling */
|
||||
#custom-power,
|
||||
#custom-reboot,
|
||||
#custom-lock,
|
||||
#custom-quit,
|
||||
#custom-powerm {
|
||||
min-width: 24px;
|
||||
margin: 4px 2px;
|
||||
padding: 0 8px;
|
||||
background: transparent;
|
||||
color: rgba(142, 154, 175, 0.9);
|
||||
border: 1px solid rgba(2, 108, 90, 0.2);
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
#custom-power {
|
||||
margin-right: 8px;
|
||||
border-right: 2px solid rgba(2, 108, 90, 0.3);
|
||||
}
|
||||
|
||||
#custom-power:hover,
|
||||
#custom-reboot:hover,
|
||||
#custom-lock:hover,
|
||||
#custom-quit:hover,
|
||||
#custom-powerm:hover {
|
||||
color: rgba(236, 241, 243, 1);
|
||||
background: rgba(215, 4, 39, 0.15);
|
||||
border-color: rgba(239, 37, 60, 0.4);
|
||||
}
|
||||
|
||||
tooltip {
|
||||
background: rgba(42, 44, 65, 0.98);
|
||||
border: 1px solid rgba(2, 108, 90, 0.3);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
tooltip label {
|
||||
color: rgba(236, 241, 243, 0.95);
|
||||
}
|
||||
|
|
@ -81,38 +81,67 @@
|
|||
"special": "",
|
||||
"default": ""
|
||||
},
|
||||
"window-rewrite-default": "",
|
||||
"window-rewrite-default": "",
|
||||
"window-rewrite": {
|
||||
"foot class<nvim>": " ",
|
||||
"foot": "",
|
||||
"class<nvim>": " ",
|
||||
"class<neovide>": " ",
|
||||
"class<shell>": "",
|
||||
"class<kitty>": "",
|
||||
"class<alacritty>": "",
|
||||
"class<foot>": "",
|
||||
"class<wezterm>": "",
|
||||
"class<feh>": "",
|
||||
"class<thunar>": "",
|
||||
"class<nautilus>": "",
|
||||
"class<nemo>": "",
|
||||
"class<pcmanfm>": "",
|
||||
"class<dolphin>": "",
|
||||
"class<yazi>": "",
|
||||
"class<qflipper>": "",
|
||||
"class<cursor>": "",
|
||||
"class<python>": "",
|
||||
"class<python3>": "",
|
||||
"title<*.py>": "",
|
||||
"title<*.sh>": "",
|
||||
"title<yazi>": "",
|
||||
"thorium": "",
|
||||
"class<thunar>": "",
|
||||
"class<nautilus>": "",
|
||||
"class<virt-manager>": "",
|
||||
"mercury":"",
|
||||
"VSCodium": "",
|
||||
"title<Gear lever>": "",
|
||||
"balenaEtcher": "",
|
||||
"class<tidal-hifi>": "",
|
||||
"title<Minecraft*>": "",
|
||||
"class<GDLauncher*>": "",
|
||||
"title<.*youtube.*>": "",
|
||||
"title<*netflix.*>": "",
|
||||
"title<nwg-look>": "",
|
||||
"title<Steam>": "",
|
||||
"title<Special Offers>": "",
|
||||
"Invidious": " ",
|
||||
"class<Invidious>": " ",
|
||||
// "Invidious": " ",
|
||||
"class<mercury*> title<.*github.*>": "", // Windows whose class is "firefox" and title contains "github". Note that "class" always comes first.
|
||||
},
|
||||
},
|
||||
"hyprland/window": {
|
||||
"format": " {title}",
|
||||
"on-click-right": "$HOME/.config/hypr/scripts/screenshot_area",
|
||||
"on-click-right": "$HOME/.config/hypr/.scripts/screenshot_area",
|
||||
"rewrite": {
|
||||
"(.*) - NVIM": " NeoVim",
|
||||
"(.*) — Mozilla Firefox": " Firefox",
|
||||
"(.*) — Mercury": " Mercury",
|
||||
"": " Desktop",
|
||||
"(.*) — Mercury": " Mercury",
|
||||
"(.*) Spotify Free": " Spotify",
|
||||
"(.*) Spotify": " Spotify",
|
||||
"(.*) Tidal": " Tidal",
|
||||
"(.*) - Tidal": " Tidal",
|
||||
" ~": " pika@home",
|
||||
"(.*) - Obsidian(.*)": " Obsidian",
|
||||
"(.*) - Cursor": " Cursor AI",
|
||||
"(.*) - QFlipper": " QFlipper",
|
||||
"(.*) - yazi": " yazi",
|
||||
"(.*)python(.*)": " Python",
|
||||
},
|
||||
"separate-outputs": false
|
||||
},
|
||||
|
|
@ -131,6 +160,7 @@
|
|||
},
|
||||
"clock": {
|
||||
"format": "{:%H:%M}",
|
||||
"on-click-right": "$HOME/.config/hypr/.scripts/screenshot_area",
|
||||
"tooltip": true
|
||||
},
|
||||
"custom/weather": {
|
||||
|
|
@ -144,7 +174,7 @@
|
|||
"network": {
|
||||
"interval": 30,
|
||||
"on-click": "wl-copy $(ip address show up scope global | grep inet | head -n1 | cut -d/ -f 1 | tr -d [:space:] | cut -c5-)",
|
||||
"on-click-right": "foot $HOME/.config/hypr/scripts/wlan.sh",
|
||||
"on-click-right": "foot $HOME/.config/hypr/.scripts/wlan.sh",
|
||||
"format-wifi": " {essid}",
|
||||
"format-ethernet": " Wired",
|
||||
"fomat-disconnected": " Disconnected",
|
||||
37
mocha.css
Normal file
37
mocha.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
/*
|
||||
*
|
||||
* 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;
|
||||
186
muted_style.css
Normal file
186
muted_style.css
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
* {
|
||||
font-size: 0.95rem;
|
||||
font-family: Rubik, iMWritingMono Nerd Font;
|
||||
}
|
||||
|
||||
/* Main color palette - slightly more vibrant versions:
|
||||
* Base Gray: #9B9B9B (brightened for better readability)
|
||||
* Workspace Active: #E4C493 (brighter warm gold)
|
||||
* CPU: #C48988 (brightened rose)
|
||||
* Memory: #8AA8C0 (brightened steel blue)
|
||||
* Network: #92AB8D (brightened sage)
|
||||
* Battery: #A6998B (brightened taupe)
|
||||
* Disk: #B3A89A (warm neutral)
|
||||
*/
|
||||
|
||||
@keyframes urgent-workspace {
|
||||
from { color: #8B8B8B; }
|
||||
75% { color: #B47978; }
|
||||
to { color: #8B8B8B; }
|
||||
}
|
||||
|
||||
tooltip {
|
||||
border: solid 2px #9B9B9B;
|
||||
background: rgba(35, 35, 35, 0.95);
|
||||
color: #E4C493;
|
||||
}
|
||||
|
||||
window#waybar {
|
||||
border: solid 2px rgba(139, 139, 139, 0.2);
|
||||
border-radius: 6px;
|
||||
background: rgba(35, 35, 35, 0.9);
|
||||
transition: 600ms;
|
||||
}
|
||||
|
||||
window#waybar.empty {
|
||||
margin-top: 4px;
|
||||
border: solid 2px rgba(139, 139, 139, 0.2);
|
||||
background: rgba(40, 40, 40, 0.75);
|
||||
}
|
||||
|
||||
window#waybar.fullscreen {
|
||||
background: rgba(40, 40, 40, 0.9);
|
||||
margin: 0;
|
||||
border: solid 3px rgba(180, 121, 120, 0.8);
|
||||
border-radius: 8px 8px 4px 4px;
|
||||
transition: 300ms;
|
||||
}
|
||||
|
||||
#workspaces button {
|
||||
border-top: solid 1px #8B8B8B;
|
||||
border-right: solid 1px #8B8B8B;
|
||||
border-bottom: solid 1px transparent;
|
||||
margin-top: 4px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
padding: 0 6px;
|
||||
transition: all 200ms ease;
|
||||
border-radius: 4px 4px 2px 0;
|
||||
background: rgba(155, 155, 155, 0.08);
|
||||
color: #9B9B9B;
|
||||
}
|
||||
|
||||
#workspaces button:hover {
|
||||
margin-top: 2px;
|
||||
background: rgba(212, 180, 131, 0.1);
|
||||
border-top: solid 2px #D4B483;
|
||||
border-right: solid 2px #D4B483;
|
||||
color: #D4B483;
|
||||
}
|
||||
|
||||
#workspaces button.active {
|
||||
color: #E4C493;
|
||||
background: rgba(228, 196, 147, 0.18);
|
||||
padding: 0 8px;
|
||||
margin-top: 0;
|
||||
border-top: solid 2px currentcolor;
|
||||
border-right: solid 2px currentcolor;
|
||||
border-radius: 8px 4px 2px 0;
|
||||
}
|
||||
|
||||
#workspaces button.urgent {
|
||||
color: #B47978;
|
||||
border-color: #B47978;
|
||||
background: rgba(180, 121, 120, 0.1);
|
||||
animation: urgent-workspace ease-out 4s infinite;
|
||||
}
|
||||
|
||||
#pulseaudio,
|
||||
#memory,
|
||||
#cpu,
|
||||
#battery,
|
||||
#disk,
|
||||
#clock,
|
||||
#network,
|
||||
#tray {
|
||||
padding: 4px 8px;
|
||||
margin: 0px 4px 0;
|
||||
font-weight: 600;
|
||||
border-top: solid 2px transparent;
|
||||
border-radius: 6px;
|
||||
background: rgba(35, 35, 35, 0.6);
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
#memory {
|
||||
color: #8AA8C0;
|
||||
}
|
||||
|
||||
#cpu {
|
||||
color: #C48988;
|
||||
}
|
||||
|
||||
#battery {
|
||||
color: #A6998B;
|
||||
}
|
||||
|
||||
#network {
|
||||
color: #92AB8D;
|
||||
}
|
||||
|
||||
#clock {
|
||||
color: #E4C493;
|
||||
}
|
||||
|
||||
#pulseaudio {
|
||||
color: #9B9B9B;
|
||||
}
|
||||
|
||||
#disk {
|
||||
color: #B3A89A;
|
||||
}
|
||||
|
||||
#pulseaudio:hover,
|
||||
#memory:hover,
|
||||
#cpu:hover,
|
||||
#battery:hover,
|
||||
#disk:hover,
|
||||
#clock:hover,
|
||||
#network:hover {
|
||||
border-top: solid 2px currentcolor;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
#custom-weather,
|
||||
#custom-reboot,
|
||||
#custom-quit,
|
||||
#custom-lock,
|
||||
#custom-powerm,
|
||||
#custom-power {
|
||||
padding: 0 1rem;
|
||||
margin: 0 2px;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
background: rgba(139, 139, 139, 0.05);
|
||||
color: #96897B;
|
||||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
|
||||
#custom-reboot:hover,
|
||||
#custom-quit:hover,
|
||||
#custom-powerm:hover,
|
||||
#custom-lock:hover,
|
||||
#custom-power:hover {
|
||||
border-top: solid 2px currentcolor;
|
||||
background: rgba(139, 139, 139, 0.1);
|
||||
color: #B47978;
|
||||
transition: 130ms;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#window {
|
||||
padding: 0 8px;
|
||||
margin: 4px;
|
||||
color: #B3A89A;
|
||||
font-weight: 500;
|
||||
background: rgba(179, 168, 154, 0.08);
|
||||
border-radius: 4px;
|
||||
border-bottom: solid 2px transparent;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
#window:hover {
|
||||
/* border-bottom: solid 2px #B3A89A; */
|
||||
background: rgba(179, 168, 154, 0.12);
|
||||
}
|
||||
213
style.css
213
style.css
|
|
@ -1,86 +1,120 @@
|
|||
* {
|
||||
font-size: 1rem;
|
||||
font-size: 0.95rem;
|
||||
font-family: Rubik, iMWritingMono Nerd Font;
|
||||
}
|
||||
|
||||
@keyframes urgent-workspace {
|
||||
from {
|
||||
color: white;
|
||||
}
|
||||
75% {
|
||||
color: red;
|
||||
}
|
||||
to {
|
||||
color: white;
|
||||
}
|
||||
from {
|
||||
color: white;
|
||||
}
|
||||
|
||||
75% {
|
||||
color: red;
|
||||
}
|
||||
|
||||
to {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes border-expand {
|
||||
0% {
|
||||
border-top: transparent;
|
||||
border-left: transparent;
|
||||
border-right: transparent;
|
||||
border-bottom: solid 2px currentcolor;
|
||||
border-radius: 100px;
|
||||
}
|
||||
33% {
|
||||
border-top: transparent;
|
||||
border-left: solid 2px currentcolor;
|
||||
border-right: solid 2px currentcolor;
|
||||
border-bottom: solid 2px currentcolor;
|
||||
border-radius: 66px;
|
||||
}
|
||||
66% {
|
||||
border-top: solid 2px currentcolor;
|
||||
border-left: solid 2px currentcolor;
|
||||
border-right: solid 2px currentcolor;
|
||||
border-bottom: transparent;
|
||||
border-radius: 33px;
|
||||
}
|
||||
to {
|
||||
border-top: solid 2px currentcolor;
|
||||
border-radius: 0;
|
||||
/* border-radius: 0rem 0rem 1rem 1rem; */
|
||||
}
|
||||
0% {
|
||||
border-top: transparent;
|
||||
border-left: transparent;
|
||||
border-right: transparent;
|
||||
border-bottom: solid 2px currentcolor;
|
||||
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
33% {
|
||||
border-top: transparent;
|
||||
border-left: solid 2px currentcolor;
|
||||
border-right: solid 2px currentcolor;
|
||||
border-bottom: solid 2px currentcolor;
|
||||
|
||||
border-radius: 66px;
|
||||
}
|
||||
|
||||
66% {
|
||||
border-top: solid 2px currentcolor;
|
||||
border-left: solid 2px currentcolor;
|
||||
border-right: solid 2px currentcolor;
|
||||
border-bottom: transparent;
|
||||
|
||||
border-radius: 33px;
|
||||
}
|
||||
|
||||
to {
|
||||
border-top: solid 2px currentcolor;
|
||||
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tooltip {
|
||||
border: solid 2px currentcolor;
|
||||
|
||||
background: black;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
#p-info,
|
||||
#weather,
|
||||
#info {
|
||||
border-top: solid 1px currentcolor;
|
||||
|
||||
transition: 650ms;
|
||||
}
|
||||
|
||||
#p-info:hover,
|
||||
#weather:hover,
|
||||
#info:hover {
|
||||
border-bottom: solid 2px currentcolor;
|
||||
border-top: solid 0px transparent;
|
||||
|
||||
transition: 350ms;
|
||||
}
|
||||
|
||||
#window {
|
||||
padding: 2px;
|
||||
|
||||
color: #fdf6e3;
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
transition: 300ms;
|
||||
}
|
||||
|
||||
window#waybar {
|
||||
border: solid 2px rgba(160, 160, 160, 0.329);
|
||||
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
transition: 700ms;
|
||||
|
||||
/* background: transparent; */
|
||||
background: rgba(51, 50, 59, 0.736);
|
||||
|
||||
|
||||
transition: 600ms;
|
||||
}
|
||||
|
||||
window#waybar.empty {
|
||||
margin-top: 4px;
|
||||
|
||||
border: solid 2px rgba(136, 136, 136, 0.8);
|
||||
background: rgba(89, 87, 102, 0.336);
|
||||
}
|
||||
|
||||
|
||||
window#waybar.fullscreen {
|
||||
background: rgba(55, 55, 55, 0.6);
|
||||
|
||||
margin: 0;
|
||||
border: solid 3px rgba(145, 11, 53, 0.8);
|
||||
|
||||
border: solid 3px rgba(189, 12, 68, 0.85);
|
||||
border-radius: 8px 8px 4px 4px;
|
||||
|
||||
transition: 300ms;
|
||||
}
|
||||
|
||||
|
|
@ -88,76 +122,132 @@ window#waybar.fullscreen {
|
|||
border-top: solid 1px currentcolor;
|
||||
border-right: solid 1px currentcolor;
|
||||
border-bottom: solid 1px transparent;
|
||||
margin-top: 5px;
|
||||
margin-left: 0px;
|
||||
padding: 0;
|
||||
padding-right: 4px;
|
||||
transition: 200ms;
|
||||
border-radius: 2px 2px 2 0;
|
||||
|
||||
margin-top: 4px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
|
||||
padding: 0 6px;
|
||||
|
||||
transition: all 200ms ease;
|
||||
border-radius: 4px 4px 2px 0;
|
||||
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#workspaces button:hover {
|
||||
margin-top: 2px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-top: solid 2px currentcolor;
|
||||
border-right: solid 2px currentcolor;
|
||||
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
#workspaces button.empty {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#workspaces button.active {
|
||||
color: rgba(255, 238, 0, 0.9);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
|
||||
padding: 0 8px;
|
||||
|
||||
margin-top: 0;
|
||||
margin-right: 2px;
|
||||
margin-left: 1px;
|
||||
|
||||
border-top: solid 2px currentcolor;
|
||||
border-right: solid 2px currentcolor;
|
||||
|
||||
border-radius: 8px 4px 2px 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
#workspaces button.urgent {
|
||||
color: red;
|
||||
border-color: red;
|
||||
background: rgba(255, 0, 0, 0.1);
|
||||
animation: urgent-workspace ease-out 4s infinite;
|
||||
}
|
||||
|
||||
#pulseaudio {
|
||||
color: #cbb643;
|
||||
}
|
||||
|
||||
#p-info,
|
||||
#info,
|
||||
#memory,
|
||||
#cpu,
|
||||
#battery,
|
||||
#disk,
|
||||
#clock,
|
||||
#network,
|
||||
#not-power,
|
||||
#pulseaudio,
|
||||
#tray {
|
||||
box-shadow: 0 2px 3px rgba(0,0,0,0.2);
|
||||
background-color: rgba(47, 44, 63, 0.425);
|
||||
}
|
||||
|
||||
#p-info,
|
||||
#info,
|
||||
#memory {
|
||||
color: #9649cd;
|
||||
}
|
||||
|
||||
#cpu {
|
||||
color: #a70a3c;
|
||||
}
|
||||
|
||||
#battery {
|
||||
color: #859900;
|
||||
color: #1ea54c;
|
||||
}
|
||||
|
||||
#network {
|
||||
color: #1E90FF;
|
||||
}
|
||||
|
||||
#disk {
|
||||
color: #b58900;
|
||||
color: #c6673e;
|
||||
}
|
||||
|
||||
#custom-power {
|
||||
border-radius: 0 8px 0 0;
|
||||
}
|
||||
|
||||
#custom-weather,
|
||||
#custom-reboot,
|
||||
#custom-quit,
|
||||
#custom-lock,
|
||||
#custom-powerm,
|
||||
#custom-power {
|
||||
padding: 0.2rem 1rem;
|
||||
margin: 0 1px;
|
||||
font-weight: 600;
|
||||
border-top: solid 1px currentcolor;
|
||||
transition: 350ms;
|
||||
padding: 0 1rem;
|
||||
margin: 0 2px;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
|
||||
#custom-reboot:hover,
|
||||
#custom-quit:hover,
|
||||
#custom-powerm:hover,
|
||||
#custom-lock:hover,
|
||||
#custom-power:hover {
|
||||
border-top: solid 2px red;
|
||||
transition: 250ms;
|
||||
border-top: solid 2px currentcolor;
|
||||
|
||||
transition: 130ms;
|
||||
|
||||
margin: 0;
|
||||
/* border-radius: 2rem; */
|
||||
font-size: 1.5rem;
|
||||
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
#pulseaudio,
|
||||
#memory,
|
||||
#cpu,
|
||||
|
|
@ -167,11 +257,14 @@ window#waybar.fullscreen {
|
|||
#network,
|
||||
#not-power,
|
||||
#tray {
|
||||
padding: 6px;
|
||||
padding: 4px 8px;
|
||||
margin: 0px 4px 0;
|
||||
font-weight: 600;
|
||||
border-top: solid 2px transparent;
|
||||
transition: 550ms;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
#pulseaudio:hover,
|
||||
|
|
@ -182,6 +275,8 @@ window#waybar.fullscreen {
|
|||
#clock:hover,
|
||||
#network:hover {
|
||||
border-top: solid 2px currentcolor;
|
||||
transition: 250ms;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
/* transform: translateY(-1px); */
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue