From 41d633a57d0627257068f85ce849cc8e77231a4944791a81a13afda43fa80d88 Mon Sep 17 00:00:00 2001 From: Mikkel Harboe Arp Henriksen Date: Wed, 18 Jun 2025 17:43:52 +0200 Subject: [PATCH] waybar styling --- templates/waybar-style.css.j2 | 110 ++++++++++++++++++++++++++++------ 1 file changed, 91 insertions(+), 19 deletions(-) diff --git a/templates/waybar-style.css.j2 b/templates/waybar-style.css.j2 index 3e137dc..a70cc6a 100644 --- a/templates/waybar-style.css.j2 +++ b/templates/waybar-style.css.j2 @@ -1,31 +1,103 @@ +/* ===== Stargate: Atlantis Waybar Style ===== */ + * { - font-family: 'JetBrains Mono Nerd Font', FontAwesome; - font-size: 16px; + /* Fonts - Vi bruger en lidt større og federe skrifttype */ + font-family: "JetBrains Mono Nerd Font", FontAwesome; + font-size: 15px; + font-weight: bold; + /* Reset */ border: none; border-radius: 0; } window#waybar { - /* Semi-transparent hvid/lys baggrund */ - background: rgba(220, 230, 240, 0.7); - /* Klar blå tekst */ - color: #0088cc; + background: rgba(16, 21, 26, 0.8); /* Mørkeblå, semi-transparent glas-effekt */ + color: #cdd6f4; /* Generel lys tekstfarve */ + border-bottom: 2px solid rgba(0, 170, 255, 0.6); /* Subtil Atlantis-blå linje i bunden */ } -/* Aktiv workspace får en stærkere blå farve */ +/* --- Generel Modul Styling --- */ +/* Giver alle moduler en ensartet baggrund, margin og padding */ +#workspaces, +#clock, +#pulseaudio, +#network, +#battery, +#tray { + background-color: rgba(30, 30, 46, 0.5); /* Lidt lysere semi-transparent baggrund */ + padding: 2px 12px; + margin: 5px 0px; /* Top/bottom margin for at skabe luft */ + border-radius: 10px; + margin-right: 5px; +} + +/* --- Specifik Modul Styling --- */ + +#workspaces { + margin-left: 5px; + padding-right: 0px; + padding-left: 5px; +} + +#workspaces button { + color: #89b4fa; /* Blå farve for inaktive workspaces */ + padding: 0 5px; + background-color: transparent; + transition: all 0.3s ease-in-out; +} + +#workspaces button:hover { + background-color: rgba(205, 214, 244, 0.1); /* Lys hover-effekt */ + color: #f5c2e7; + border-radius: 8px; +} + +/* Aktiv eller fokuseret workspace */ +#workspaces button.focused, #workspaces button.active { - color: #00aaff; - background: rgba(0, 136, 204, 0.3); + color: #1e1e2e; /* Mørk tekst for kontrast */ + background-color: #89b4fa; /* Klar blå for aktiv workspace */ + border-radius: 8px; } -#pulseaudio, #network, #clock, #battery { - padding: 0 10px; -} - -/* Her kan du bruge Lantean-fonten til et specielt ikon! */ -#custom-atlantis-logo { - font-family: "sg_anq.ttf"; /* Erstat med navnet på fonten */ - font-size: 22px; +#clock { + padding-left: 15px; padding-right: 15px; - color: #00aaff; -} \ No newline at end of file +} + +/* --- Styling for specielle tilstande (gør baren funktionel) --- */ + +#network.disconnected { + background-color: #f38ba8; /* Rødlig farve for disconnected */ + color: #1e1e2e; +} + +#pulseaudio.muted { + color: #f38ba8; /* Rød tekst når lyden er slået fra */ +} + +#battery.charging { + color: #a6e3a1; /* Grøn for opladning */ +} + +#battery.warning { + color: #fab387; /* Orange for advarsel */ +} + +#battery.critical { + background-color: #f38ba8; /* Rødlig baggrund for kritisk */ + color: #1e1e2e; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +/* Blinke-animation for kritisk batteri */ +@keyframes blink { + to { + background-color: #fab387; + color: #1e1e2e; + } +}