sway theme updated
This commit is contained in:
CGH0S7
@@ -1,9 +1,12 @@
|
||||
// -*- mode: jsonc -*-
|
||||
{
|
||||
// "layer": "top", // Waybar at top layer
|
||||
// "position": "bottom", // Waybar position (top|bottom|left|right)
|
||||
"height": 30, // Waybar height (to be removed for auto height)
|
||||
"position": "top", // Waybar position (top|bottom|left|right)
|
||||
// "height": 30, // Waybar height (to be removed for auto height)
|
||||
// "width": 1280, // Waybar width
|
||||
"margin-top": 6,
|
||||
"margin-left": 10,
|
||||
"margin-right": 10,
|
||||
"spacing": 4, // Gaps between modules (4px)
|
||||
// Choose the order of the modules
|
||||
"modules-left": [
|
||||
|
||||
206
waybar/style.css
206
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user