mirror of
https://github.com/zhenyan121/dotfiles.git
synced 2026-04-10 06:24:08 +08:00
495 lines
11 KiB
CSS
Executable File
495 lines
11 KiB
CSS
Executable File
@import "colors.css";
|
||
/* @import "/home/shorin/.cache/wal/colors-waybar.css"; */
|
||
|
||
/* 核心逻辑：全相对单位 (em) 改造
|
||
基准字体大小：18px
|
||
如果需要整体放大缩小，只需修改下方的 18px 即可
|
||
*/
|
||
* {
|
||
border: none;
|
||
border-radius: 0;
|
||
font-family: "JetBrainsMono Nerd Font Propo","LXGW WenKai Screen","JetBrains Maple Mono";
|
||
/* font-family:"0xProto Nerd Font Propo"; */
|
||
font-size: 16.6px; /* 基准大小 */
|
||
opacity: 1;
|
||
}
|
||
|
||
window#waybar {
|
||
background: transparent;
|
||
color: @on_surface;
|
||
}
|
||
|
||
/* 鼠标悬浮信息提示 */
|
||
tooltip {
|
||
background: @secondary_container;
|
||
border: 0.17em solid @outline; /* 3px */
|
||
opacity: 1;
|
||
}
|
||
|
||
tooltip label {
|
||
color: @on_surface;
|
||
font-size: 0.89em; /* 16px */
|
||
}
|
||
|
||
|
||
/* 工作区 */
|
||
#workspaces button {
|
||
padding: 0px 0.56em; /* 10px */
|
||
background: @surface;
|
||
color: @tertiary_container;
|
||
}
|
||
|
||
/* #workspaces label {
|
||
font-size: 1.22em;
|
||
} */
|
||
|
||
#workspaces button:hover {
|
||
background: @on_tertiary;
|
||
}
|
||
|
||
#workspaces button.active{
|
||
color:@tertiary;
|
||
}
|
||
|
||
#custom-right_div.5 {
|
||
background: @surface_container_high;
|
||
color: @surface;
|
||
font-size: 1.39em; /* 25px */
|
||
padding: 0px;
|
||
}
|
||
|
||
/* waybar niri taskbar */
|
||
.niri-taskbar {
|
||
background: @surface_container_high;
|
||
padding: 0 0 0 0.28em; /* 5px */
|
||
}
|
||
|
||
.niri-taskbar button:hover {
|
||
background: @surface_container;
|
||
}
|
||
|
||
.niri-taskbar button.focused {
|
||
background: @surface;
|
||
}
|
||
|
||
.niri-taskbar button.urgent {
|
||
background-color: @tertiary;
|
||
animation-name: blink;
|
||
animation-duration: 0.5s;
|
||
animation-timing-function: steps(12);
|
||
animation-iteration-count: infinite;
|
||
animation-direction: alternate;
|
||
}
|
||
@keyframes blink {
|
||
to {
|
||
background-color: @primary;
|
||
color: @error;
|
||
}
|
||
}
|
||
|
||
/* 窗口名 */
|
||
#window {
|
||
padding: 0px 0.56em; /* 10px */
|
||
background-color: @surface_container_high;
|
||
color: @on_surface;
|
||
}
|
||
|
||
#window label {
|
||
font-size: 0.89em; /* 16px */
|
||
}
|
||
|
||
window#waybar.empty #window {
|
||
background-color: @surface_container_high;
|
||
}
|
||
|
||
#custom-right_div.6 {
|
||
color: @surface_container_high;
|
||
font-size: 1.39em; /* 25px */
|
||
padding: 0px;
|
||
}
|
||
/* —————————————————————————————————————————————————————————————————————————— */
|
||
/* —————————————————————————————————————————————————————————————————————————— */
|
||
/* —————————————————————————————————————————————————————————————————————————— */
|
||
/* —————————————————————————————————————————————————————————————————————————— */
|
||
/* —————————————————————————————————————————————————————————————————————————— */
|
||
|
||
/* 中间 */
|
||
|
||
#custom-left_div.3 {
|
||
color: @surface_container_high;
|
||
padding: 0px;
|
||
font-size: 1.39em; /* 25px */
|
||
}
|
||
|
||
|
||
#bluetooth {
|
||
padding: 0px 0.3em 0px 0.5em; /* 7px */
|
||
font-size: 1.25em; /* 20px */
|
||
}
|
||
#bluetooth.disabled{
|
||
padding: 0px 0.22em 0px 0.46em ;
|
||
}
|
||
|
||
#network {
|
||
padding: 0px 0.34em; /* 7px */
|
||
font-size: 1.2em; /* 22px */
|
||
}
|
||
|
||
#custom-settings {
|
||
padding: 0px 0.39em; /* 7px */
|
||
font-size: 1.06em; /* 19px */
|
||
}
|
||
|
||
#custom-screenshot {
|
||
padding: 0 0.4em; /* 7px */
|
||
font-size: 1.28em; /* 22px */
|
||
}
|
||
|
||
/* wf-recoder脚本 */
|
||
#custom-wfrec {
|
||
padding: 0 0.3em; /* 7px */
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
#custom-wfrec.recording,
|
||
#custom-wfrec,
|
||
#bluetooth,
|
||
#network,
|
||
#custom-settings,
|
||
#custom-screenshot {
|
||
background-color: @surface_container_high;
|
||
color: @secondary;
|
||
}
|
||
|
||
/* 录制中 */
|
||
#custom-wfrec.recording {
|
||
color: @error;
|
||
}
|
||
/* #custom-wfrec,
|
||
#custom-screenshot{
|
||
color: @secondary;
|
||
} */
|
||
|
||
#custom-left_div.2 {
|
||
background-color: @surface_container_high;
|
||
color: @tertiary;
|
||
padding: 0px 0px;
|
||
font-size: 1.39em; /* 25px */
|
||
}
|
||
#custom-dae,
|
||
#power-profiles-daemon,
|
||
#custom-colorpicker,
|
||
#idle_inhibitor {
|
||
background-color: @tertiary;
|
||
color: @on_tertiary;
|
||
padding: 0px 0.36em; /* 6px */
|
||
}
|
||
#idle_inhibitor.activated{
|
||
padding: 0px 0.4em 0px 0.4em;
|
||
}
|
||
#power-profiles-daemon{
|
||
padding: 0px 0.4em 0em 0.36em;
|
||
}
|
||
#power-profiles-daemon.performance {
|
||
color: @on_error;
|
||
font-size: 1.28em; /* 23px */
|
||
padding: 0px 0.32em 0px 0.45em; /* 9px 8px */
|
||
}
|
||
|
||
#power-profiles-daemon.balanced {
|
||
color: @on_tertiary;
|
||
}
|
||
|
||
#power-profiles-daemon.power-saver {
|
||
color: #1aa052;
|
||
|
||
}
|
||
|
||
/* 菜单 */
|
||
#custom-left_div.11 {
|
||
background-color: @tertiary;
|
||
color: @surface_container
|
||
}
|
||
#custom-applauncher {
|
||
font-size: 1.39em; /* 25px */
|
||
padding: 0px 0.39em; /* 7px */
|
||
margin: 0px;
|
||
background-color: @primary;
|
||
color: @on_primary;
|
||
|
||
}
|
||
#custom-right_div.1,
|
||
#custom-left_div.1 {
|
||
background-color: @surface_container;
|
||
color: @primary;
|
||
}
|
||
#custom-left_div.1,
|
||
#custom-right_div.1 {
|
||
padding: 0px;
|
||
margin: 0px;
|
||
font-size: 1.39em; /* 25px */
|
||
}
|
||
#custom-left_div.11,
|
||
#custom-right_div.11 {
|
||
margin: 0px;
|
||
padding: 0px;
|
||
font-size: 1.39em; /* 25px */
|
||
}
|
||
#custom-right_div.11 {
|
||
|
||
background-color: @secondary;
|
||
color: @surface_container;
|
||
}
|
||
|
||
/*中间右边第二级*/
|
||
|
||
#clock {
|
||
padding: 0px 0.45em 0em 0.45em; /* 8px */
|
||
}
|
||
|
||
#clock {
|
||
background-color: @secondary;
|
||
color: @on_secondary;
|
||
}
|
||
|
||
#custom-right_div.2 {
|
||
background-color: @surface_container_high;
|
||
color: @secondary;
|
||
padding: 0px;
|
||
font-size: 1.39em; /* 25px */
|
||
}
|
||
|
||
#custom-cava {
|
||
background-color: @surface_container_high;
|
||
color: @primary;
|
||
padding: 0px 0.35em; /* 7px */
|
||
}
|
||
|
||
#mpris {
|
||
background-color: @surface_container_high;
|
||
color: @primary;
|
||
padding: 0px 0.39em 0px 0px; /* 7px 0 0 */
|
||
}
|
||
|
||
#custom-right_div.3 {
|
||
|
||
color: @surface_container_high;
|
||
padding: 0px 0.1em 0px 0px ;
|
||
font-size: 1.39em; /* 25px */
|
||
}
|
||
#custom-right_div.4 {
|
||
/* background-color: @surface_container_high; */
|
||
color: @on_secondary;
|
||
padding: 0px;
|
||
font-size: 1.39em; /* 25px */
|
||
}
|
||
/* —————————————————————————————————————————————————————————————————————————— */
|
||
/* —————————————————————————————————————————————————————————————————————————— */
|
||
/* —————————————————————————————————————————————————————————————————————————— */
|
||
/* —————————————————————————————————————————————————————————————————————————— */
|
||
/* —————————————————————————————————————————————————————————————————————————— */
|
||
|
||
/* 右侧 */
|
||
|
||
|
||
#custom-left_div.7 {
|
||
/* background-color: @surface_container_high; */
|
||
color: @surface_bright;
|
||
font-size: 1.39em; /* 25px */
|
||
padding: 0px;
|
||
}
|
||
|
||
|
||
#custom-updates {
|
||
border-radius: 0px;
|
||
padding: 0px 0.17em 0px 0.39em; /* 3px 7px */
|
||
background-color: @surface_bright;
|
||
color: @error;
|
||
|
||
}
|
||
|
||
#tray {
|
||
padding: 0px 0.39em 0px 0.39em; /* 7px */
|
||
font-size: 1.11em; /* 20px */
|
||
background-color: @surface_bright;
|
||
}
|
||
|
||
|
||
#custom-left_div.4 {
|
||
background-color: @surface_bright;
|
||
color: @surface_container_high;
|
||
padding: 0px;
|
||
font-size: 1.39em; /* 25px */
|
||
}
|
||
/* 亮度 */
|
||
#custom-ddcutil-day,
|
||
#custom-ddcutil-night,
|
||
#custom-ddcutil-sleep,
|
||
#custom-separator.1 {
|
||
background-color: @surface_container_high;
|
||
color: @tertiary;
|
||
padding: 0px 0.33em; /* 5px */
|
||
}
|
||
|
||
#backlight {
|
||
background-color: @surface_container_high;
|
||
color: @tertiary;
|
||
padding: 0px 0.28em 0px 0px; /* 5px */
|
||
}
|
||
|
||
#backlight-slider {
|
||
background-color: @surface_container_high;
|
||
padding: 0px 0.28em 0px 0px; /* 5px */
|
||
}
|
||
|
||
#backlight-slider slider {
|
||
min-height: 0px;
|
||
min-width: 0px;
|
||
opacity: 0;
|
||
background-image: none;
|
||
border: none;
|
||
box-shadow: none;
|
||
background: none;
|
||
}
|
||
|
||
#backlight-slider trough {
|
||
min-height: 0.56em; /* 10px */
|
||
min-width: 4.44em; /* 80px */
|
||
border-radius: 0.28em; /* 5px */
|
||
opacity: 0;
|
||
background-color: @background;
|
||
}
|
||
|
||
#backlight-slider highlight {
|
||
min-width: 0.56em; /* 10px */
|
||
border-radius: 0.28em; /* 5px */
|
||
background-color: @tertiary;
|
||
}
|
||
|
||
/* 音视频 */
|
||
#privacy {
|
||
padding: 0px 0.39em; /* 7px */
|
||
}
|
||
|
||
#privacy {
|
||
background-color: @surface_container_high;
|
||
color: @error;
|
||
}
|
||
|
||
#pulseaudio {
|
||
padding: 0px 0px 0px 0.28em; /* 5px */
|
||
}
|
||
|
||
#pulseaudio-slider {
|
||
padding: 0px 0px 0px 0.56em; /* 10px */
|
||
margin: 0px;
|
||
}
|
||
|
||
#pulseaudio-slider,
|
||
#pulseaudio {
|
||
background-color: @surface_container_high;
|
||
color: @tertiary;
|
||
}
|
||
|
||
#pulseaudio-slider slider {
|
||
min-height: 0px;
|
||
min-width: 0px;
|
||
opacity: 0;
|
||
background-image: none;
|
||
box-shadow: none;
|
||
background: none;
|
||
}
|
||
|
||
#pulseaudio-slider trough {
|
||
min-height: 0.56em; /* 10px */
|
||
min-width: 4.44em; /* 80px */
|
||
border-radius: 0.28em; /* 5px */
|
||
background-color: @surface;
|
||
}
|
||
|
||
#pulseaudio-slider highlight {
|
||
min-width: 0px;
|
||
border-radius: 0.28em; /* 5px */
|
||
background-color: @tertiary;
|
||
}
|
||
|
||
#custom-left_div.8 {
|
||
background-color: @surface_container_high;
|
||
color: @surface_container;
|
||
font-size: 1.39em; /* 25px */
|
||
padding: 0px;
|
||
}
|
||
|
||
|
||
/* 电池 */
|
||
|
||
#battery {
|
||
background-color: @surface_container;
|
||
color: @secondary;
|
||
padding: 0px 0.39em; /* 7px */
|
||
}
|
||
|
||
#battery.critical:not(.charging) {
|
||
background-color: @surface_container;
|
||
color: @error;
|
||
animation-name: blink;
|
||
animation-duration: 0.5s;
|
||
animation-timing-function: steps(12);
|
||
animation-iteration-count: infinite;
|
||
animation-direction: alternate;
|
||
padding: 0px 0.39em; /* 7px */
|
||
}
|
||
|
||
/* powermenu电源菜单 */
|
||
#custom-left_div.5 {
|
||
background-color: @surface_container;
|
||
color: @surface;
|
||
padding: 0px;
|
||
font-size: 1.39em; /* 25px */
|
||
}
|
||
#custom-wlogout {
|
||
padding: 0px 0.83em 0px 0.56em; /* 15px 10px */
|
||
font-size: 1.39em; /* 25px */
|
||
}
|
||
|
||
#custom-wlogout,
|
||
#custom-reboot,
|
||
#custom-lockscreen,
|
||
#custom-logout {
|
||
background-color: @surface;
|
||
color: @error;
|
||
padding: 0px 0.56em; /* 10px */
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
#clock.date {
|
||
padding: 0px 0.39em; /* 7px */
|
||
}
|
||
#custom-datelogo,
|
||
#clock.date {
|
||
background-color: @secondary_container;
|
||
color: @on_secondary_container;
|
||
}
|
||
|
||
#custom-swaync {
|
||
background-color: @surface_container_high;
|
||
color: @on_surface_container;
|
||
padding: 0px 0.83em; /* 15px */
|
||
}
|
||
|
||
#custom-mako {
|
||
background-color: @surface_container_high;
|
||
color: @on_surface_container;
|
||
padding: 0px 0.83em; /* 15px */
|
||
}
|
||
|
||
#custom-left_div.6 {
|
||
background-color: @surface;
|
||
color: @surface_container_high;
|
||
padding: 0px;
|
||
font-size: 1.39em; /* 25px */
|
||
}
|