addet some styles
This commit is contained in:
pika
parent
18ae941c91
commit
b1d7c328b6
3 changed files with 358 additions and 1 deletions
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);
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
|
@ -93,7 +93,7 @@ window#waybar {
|
|||
border-radius: 6px;
|
||||
|
||||
/* background: transparent; */
|
||||
background: rgba(89, 87, 102, 0.336);
|
||||
background: rgba(51, 50, 59, 0.736);
|
||||
|
||||
|
||||
transition: 600ms;
|
||||
|
|
@ -103,6 +103,7 @@ window#waybar.empty {
|
|||
margin-top: 4px;
|
||||
|
||||
border: solid 2px rgba(136, 136, 136, 0.8);
|
||||
background: rgba(89, 87, 102, 0.336);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue