sway theme updated

waybar/style.css

@@ -1,40 +1,105 @@
+@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;
+
 * {
     border: none;
     border-radius: 0;
-    /* 设置全局字体，确保图标显示正常 */
-    font-family: "Clear Sans", "Maple Mono NF CN", "Font Awesome 7 Free", "Font Awesome 7 Brands", "FontAwesome", Roboto, Helvetica, Arial, sans-serif;
+    font-family: "Maple Mono NF CN", "Font Awesome 7 Free", Roboto, Helvetica, Arial, sans-serif;
     font-size: 14px;
     min-height: 0;
 }
 
-/* --- 核心：设置 Bar 的背景透明度 --- */
 window#waybar {
-    /* rgba(红, 绿, 蓝, 透明度) */
-    /* 0.5 表示半透明，0 表示全透明，1 表示不透明 */
-    background-color: rgba(29, 31, 33, 0.7); 
-    color: #ffffff;
+    background-color: transparent;
+    color: @text;
     transition-property: background-color;
     transition-duration: .5s;
 }
 
-/* 当 Bar 变得隐形时的样式（如果配置了自动隐藏模式） */
 window#waybar.hidden {
     opacity: 0.2;
 }
 
-/* --- 模块样式 --- */
+/* Workspaces */
+#workspaces {
+    background-color: @surface1;
+    border-radius: 16px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    padding: 0px 6px;
+}
+
 #workspaces button {
-    padding: 0 5px;
+    padding: 0 10px;
     background-color: transparent;
-    color: #ffffff;
+    color: @text;
+    border-radius: 16px;
+    margin: 4px 0;
+}
+
+#workspaces button:hover {
+    background-color: @surface2;
+    color: @text;
 }
 
 #workspaces button.focused {
-    background-color: #64727D;
-    box-shadow: inset 0 -3px #ffffff;
+    color: @base;
+    background-color: @mauve;
 }
 
-/* 给各个模块加一点边距和背景色，让它们看起来像“胶囊” */
+#workspaces button.urgent {
+    color: @base;
+    background-color: @red;
+}
+
+/* Window Title */
+#window {
+    background-color: transparent;
+    color: @text;
+    border-radius: 16px;
+    padding: 0 12px;
+    margin: 0 4px;
+    max-width: fit-content; /* Ensure it only takes needed width */
+}
+
+/* Modules Right - Grouped look */
+.modules-right {
+    margin-top: 4px;
+    margin-bottom: 4px;
+    /* background-color: @base; */
+    border-radius: 16px;
+    padding: 0 2px;
+}
+
+/* Individual Module Styling */
 #clock,
 #battery,
 #cpu,
@@ -45,22 +110,113 @@ window#waybar.hidden {
 #network,
 #pulseaudio,
 #tray,
-#mode,
+#mpd,
 #idle_inhibitor {
-    padding: 0 10px;
-    margin: 4px 2px;
-    color: #ffffff;
-    background-color: rgba(255, 255, 255, 0.1); /* 模块自己的半透明背景 */
-    border-radius: 10px; /* 圆角 */
+    padding: 0 12px;
+    margin: 0 4px;
+    color: @text; /* Changed to @text for better contrast with @surface1 and consistency */
+    background-color: @surface1; /* Changed to @surface1 */
+    border-radius: 16px;
+}
+
+/* Specific Module Colors */
+#clock {
+    background-color: @mauve;
+    color: @base;
+    font-weight: bold;
+}
+
+#battery {
+    background-color: @green;
+    color: @base;
 }
 
-/* 针对电量低的情况变色 */
 #battery.charging, #battery.plugged {
-    color: #26A65B;
-    background-color: rgba(38, 166, 91, 0.2);
+    background-color: @teal;
+    color: @base;
 }
 
 #battery.warning:not(.charging) {
-    background-color: #ff5d43;
-    color: black;
+    background-color: @peach;
+    color: @base;
+}
+
+#battery.critical:not(.charging) {
+    background-color: @red;
+    color: @base;
+    animation-name: blink;
+    animation-duration: 0.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+#cpu {
+    background-color: @sapphire;
+    color: @base;
+}
+
+#memory {
+    background-color: @sky;
+    color: @base;
+}
+
+#temperature {
+    background-color: @lavender;
+    color: @base;
+}
+
+#temperature.critical {
+    background-color: @red;
+}
+
+#backlight {
+    background-color: @yellow;
+    color: @base;
+}
+
+#network {
+    background-color: @blue;
+    color: @base;
+}
+
+#network.disconnected {
+    background-color: @overlay0;
+}
+
+#pulseaudio {
+    background-color: @pink;
+    color: @base;
+}
+
+#pulseaudio.muted {
+    background-color: @overlay0;
+    color: @subtext0;
+}
+
+#tray {
+    background-color: @peach;
+    color: @surface0;
+}
+
+#window.empty {
+    background-color: transparent;
+}
+
+#mpd {
+    background-color: @surface1;
+    color: @text;
+}
+
+#custom-power {
+    background-color: @red;
+    color: @base;
+    padding-right: 16px;
+}
+
+@keyframes blink {
+    to {
+        background-color: @text;
+        color: @base;
+    }
 }