Files
lnx-arch/obsolete/dots/waybar.2/style.css

638 lines
14 KiB
CSS
Raw Normal View History

2026-02-26 15:15:57 -05:00
/* vim:fileencoding=utf-8:foldmethod=marker:ft=css
*/
/* Define colors */
/* {{{ */
@define-color background1 rgba(32, 32, 48, 1);
@define-color background2 rgba(21, 21, 32, 1);
@define-color sepepator #313244;
@define-color warning #f38ba8;
@define-color caution #45475a;
@define-color performance #f5c2e7;
@define-color audio #cba6f7;
@define-color misc #94e2d5;
@define-color date #a6e3a1;
@define-color work #b4befe;
@define-color window #b4befe;
@define-color resize #eba0ac;
@define-color process #89b4fa;
@define-color text #000000;
/* }}} */
/* Reset all styles */
/* {{{ */
* {
border: none;
border-radius: 0;
min-height: 0;
margin: 0;
padding: 0;
box-shadow: none;
text-shadow: none;
}
/* }}} */
/* Main bar keyframes */
/* {{{ */
/* Keyframes for main bar criticals */
@keyframes blink-urgent-workspace {
to {
color: @warning;
/* background-image: linear-gradient( */
/* -63.435deg, */
/* transparent 25%, */
/* @warning 25%, */
/* @warning 75%, */
/* transparent 75% */
/* ); */
}
}
@keyframes blink-critical-text {
to {
color: @sepepator;
}
}
/* Keyframes for main bar modifiers */
@keyframes blink-modifier-text {
to {
color: @sepepator;
}
}
@keyframes blink-special-workspace {
to {
color: @window;
}
}
/* }}} */
/* Main bar defaults */
/* {{{ */
#waybar.main {
background: @background2;
font-family: "JetBrainsMono Nerd Font propo";
/* font-family: "VictorMono nerd font propo"; */
font-size: 12pt;
font-weight: 600;
color: @text;
border-radius: 6pt;
/* box-shadow: */
/* inset 0px 5px 4px -5px rgba(170, 190, 255, 0.5), */
/* inset 0px -5px 4px -5px rgba(170, 190, 255, 1); */
}
#waybar.main button {
font-family: "JetBrains Mono Nerd Font propo";
font-size: 12pt;
font-weight: 600;
color: @text;
}
/* }}} */
/* Main bar modules */
/* {{{ */
#cava,
#waybar.main #custom-headsetbattery,
#waybar.main #custom-nvidia,
#waybar.main #custom-weather,
#waybar.main #custom-weather,
#waybar.main #custom-battery,
#waybar.main #keyboard-state,
#waybar.main #network,
#waybar.main #battery,
#waybar.main #backlight,
#waybar.main #clock,
#waybar.main #cpu,
#waybar.main #language,
#waybar.main #memory.swap,
#waybar.main #memory.ram,
#waybar.main #submap,
#waybar.main #pulseaudio,
#waybar.main #temperature,
#waybar.main #traym,
#waybar.main #window,
#waybar.main #disk,
#custom-timer {
padding-left: 8pt;
padding-right: 8pt;
}
#waybar.main #custom-weather {
padding-right: 8pt;
}
#waybar.main #custom-nvidia {
margin-top: -4px;
margin-bottom: -4px;
}
/* }}} */
/* Module colors */
/* {{{ */
#waybar.main #custom-nvidia,
#waybar.main #cpu,
#waybar.main #temperature,
#waybar.main #memory.ram,
#waybar.main #memory.swap,
#waybar.main #disk,
#waybar.main #network {
color: @performance;
background: @background1;
}
#cava {
font-size: 12px;
}
#cava,
#waybar.main #custom-headsetbattery,
#waybar.main #pulseaudio {
color: @audio;
background: @background2;
}
#waybar.main #custom-battery,
#waybar.main #language,
#waybar.main #backlight,
#waybar.main #battery {
color: @misc;
background: @background1;
}
#waybar.main #custom-weather,
#waybar.main #clock,
#custom-timer {
color: @date;
background: @background2;
}
#waybar.main #clock {
border-radius: 0pt 6pt 6pt 0pt;
}
#waybar.main #window {
color: @window;
box-shadow: none;
font-style: italic;
}
#waybar.main #network.info {
padding-right: 10px;
padding-left: 10px;
color: @caution;
}
#waybar.main #network.info.wifi.normal,
#waybar.main #network.info.ethernet {
color: @performance;
padding-right: 15px;
}
#waybar.main #network.info.wifi {
color: @warning;
padding-right: 15px;
}
/* }}} */
/* Submap */
/* {{{ */
#waybar.main #submap.󰲏 {
color: @resize;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-name: blink-modifier-text;
animation-duration: 1s;
animation-timing-function: steps(15);
box-shadow: none;
}
#waybar.main #submap. {
color: @date;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-name: blink-modifier-text;
animation-duration: 1s;
animation-timing-function: steps(15);
box-shadow: none;
}
/* }}} */
/* Main bar criticals */
/* {{{ */
#waybar.main #custom-nvidia.critical,
/* #waybar.main #custom-battery.critical, */
#waybar.main #custom-headsetbattery.critical,
#waybar.main #memory.swap.critical,
#waybar.main #memory.ram.critical,
#waybar.main #cpu.critical,
#waybar.main #temperature.critical {
color: @warning;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-name: blink-critical-text;
animation-duration: 1s;
animation-timing-function: steps(15);
}
#waybar.main #workspaces button.urgent,
#waybar.main #workspaces button.special.urgent {
transition: all 0s ease;
background-image: linear-gradient(
-63.435deg,
transparent 25%,
@background2 25%,
@background2 75%,
transparent 75%
);
animation-iteration-count: infinite;
animation-direction: alternate;
animation-name: blink-urgent-workspace;
animation-duration: 1s;
animation-timing-function: steps(15);
}
/* }}} */
/* Main bar warnings */
/* {{{ */
#waybar.main #custom-headsetbattery.off,
#waybar.main #pulseaudio.output.muted,
#waybar.main #pulseaudio.input.source-muted {
color: @sepepator;
}
#waybar.main #custom-headsetbattery.low,
#waybar.main #custom-battery.warning,
#waybar.main #custom-battery.critical {
color: @warning;
}
/* }}} */
/* Battery chargin */
/* {{{ */
#waybar.main #custom-battery.charging {
color: @misc;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-name: blink-modifier-text;
animation-duration: 1s;
animation-timing-function: steps(15);
}
/* }}} */
/* Workspaces */
/* {{{ */
/* Default workspace settings */
#waybar.main #workspaces {
/* background: @warning; */
padding-left: 20px;
padding-right: 4px;
margin-top: -6px;
margin-bottom: -6px;
background-image: linear-gradient(
-243.435deg,
@background2 17px,
@sepepator 17px,
@sepepator 21px,
transparent 21px,
transparent calc(100% -22px),
@sepepator calc(100% -22px),
@sepepator calc(100% - 18px),
transparent calc(100% - 18px)
);
}
#waybar.main #workspaces button {
color: #45475a;
background: transparent;
border: 1.5px solid transparent;
padding-left: 4pt;
padding-right: 4pt;
transition: all 0.25s ease;
padding-right: 16px;
padding-left: 16px;
font-style: italic;
margin-left: -17px;
padding-top: 6px;
padding-bottom: 6px;
background-image: linear-gradient(
-63.435deg,
transparent 25%,
@background2 25%,
@background2 75%,
transparent 75%
);
}
/* Focused workspace */
#waybar.main #workspaces button.visible {
color: @text;
background-image: linear-gradient(
-63.435deg,
transparent 25%,
@caution 25%,
@caution 75%,
transparent 75%
);
}
/* Focused workspace & monitor */
#waybar.main #workspaces button.active {
color: @window;
background-image: linear-gradient(
-63.435deg,
transparent 24%,
@sepepator 24%,
@sepepator 28%,
@background1 28%,
@background1 73%,
@sepepator 73%,
@sepepator 76%,
transparent 76%
);
}
/* Style when cursor is on the button */
#waybar.main #workspaces button:hover {
color: @window;
}
/* #waybar.main #workspaces button.active:hover { */
/* color: @background2; */
/* background-image: linear-gradient( */
/* -63.435deg, */
/* transparent 24%, */
/* @sepepator 24%, */
/* @sepepator 28%, */
/* @window 28%, */
/* @window 73%, */
/* @sepepator 73%, */
/* @sepepator 76%, */
/* transparent 76% */
/* ); */
/* } */
/* Special workplace animation */
#waybar.main #workspaces button.special.active {
transition: all 0s ease;
border: 1.5px solid transparent;
color: @sepepator;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-name: blink-special-workspace;
animation-duration: 1s;
animation-timing-function: steps(15);
}
/* }}} */
/* Custom icons as spacers */
/* {{{ */
#waybar.main #custom-spacer1,
#waybar.main #custom-spacer2,
#waybar.main #custom-spacer3,
#waybar.main #custom-spacer4,
#waybar.main #custom-spacer5,
#waybar.main #custom-spacer6 {
font-size: 16pt;
font-weight: bold;
color: transparent;
padding-left: 4px;
padding-right: 4px;
margin-bottom: -4px;
margin-top: -4px;
}
#waybar.main #custom-spacer1 {
background-image: linear-gradient(
63.435deg,
@transparent 47.5%,
@sepepator 47.6%,
@sepepator 52.4%,
@background1 52.5%
);
}
#waybar.main #custom-spacer2 {
background-image: linear-gradient(
63.435deg,
@background1 47.5%,
@sepepator 47.6%,
@sepepator 52.4%,
@background2 52.5%
);
}
#waybar.main #custom-spacer3 {
background-image: linear-gradient(
63.435deg,
@background2 47.5%,
@sepepator 47.6%,
@sepepator 52.4%,
@background1 52.5%
);
}
#waybar.main #custom-spacer4 {
background-image: linear-gradient(
63.435deg,
@background1 47.5%,
@sepepator 47.6%,
@sepepator 52.4%,
@background2 52.5%
);
}
#waybar.main #custom-spacer5 {
background-image: linear-gradient(
-63.435deg,
@transparent 47.5%,
@sepepator 47.6%,
@sepepator 52.4%,
transparent 52.5%
);
}
#waybar.main #custom-spacer6 {
background-image: linear-gradient(
-63.435deg,
@transparent 47.5%,
@sepepator 47.6%,
@sepepator 52.4%,
transparent 52.5%
);
}
/* }}} */
/* Custom tray icon */
/* {{{ */
#waybar.main #custom-trayicon {
font-size: 11pt;
color: transparent;
/* font-weight: bold; */
font-style: italic;
background: transparent;
padding-right: 0pt;
padding-left: 2pt;
background-size: 16px;
background-position: 2px, 0px;
background-repeat: no-repeat;
background-image: url("/home/jan-aarela/.config/hypr/themes/Mocha-Power/pacman.png");
}
/* }}} */
/* Tooltip */
/* {{{ */
tooltip {
background: @background;
border: 3px solid @caution;
border-radius: 8px;
font-weight: 500;
font-family: "JetBrains Mono Nerd Font";
}
#waybar.main #tray menu {
background: @background;
border: 3px solid @caution;
border-radius: 8px;
}
/* }}} */
/* Indicator bar keyframes */
/* {{{ */
@keyframes blink-critical-battery {
to {
border-color: @warning;
box-shadow:
inset 0px 3px 4px -5px @warning,
inset 0px -3px 4px -5px @warning;
}
}
@keyframes blink-warning-battery {
to {
border-color: @warning;
box-shadow:
inset 0px 3px 4px -5px @warning,
inset 0px -3px 4px -5px @warning;
}
}
@keyframes blink-discharging-battery {
to {
border-color: @warning;
box-shadow:
inset 0px 3px 4px -5px @warning,
inset 0px -3px 4px -5px @warning;
}
}
@keyframes blink-charging-battery {
to {
border-color: @misc;
box-shadow:
inset 0px 3px 4px -5px @misc,
inset 0px -3px 4px -5px @misc;
}
}
@keyframes blink-full-battery {
to {
border-color: @misc;
box-shadow:
inset 0px 3px 4px -5px @misc,
inset 0px -3px 4px -5px @misc;
}
}
/* }}} */
/* indicator bar battery module */
/* {{{ */
/* Set defaults for indicator bar */
#waybar.indicator {
font-size: 10px;
/* This makes indicator thicker */
color: rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0);
}
/* Set "battery bar" style */
#waybar.indicator #custom-batteryindicator {
border: 2.5px solid @sepepator;
background: transparent;
box-shadow:
inset 0px 4px 4px -5px rgba(0, 0, 0, 0.5),
inset 0px -4px 4px -5px rgba(0, 0, 0, 0.5);
border-radius: 7px;
padding-left: 2502px;
/* Use this for padding: */
/* (H_rez / scaling) - L_margin -R_margin - 2 * border - (font-size / 2)*/
/* For example: (2880px / 1.25) - 24 - 24 - 2 * 2.5 - (27 / 2) = 2237.5px */
}
/* Blink red when battery is very low */
#waybar.indicator #custom-batteryindicator.critical {
animation-iteration-count: infinite;
animation-direction: alternate;
animation-name: blink-critical-battery;
animation-duration: 1s;
animation-timing-function: steps(15);
}
/* Blink red twice when battry is low battery */
#waybar.indicator #custom-batteryindicator.warning {
animation-iteration-count: 4;
animation-direction: alternate;
animation-name: blink-warning-battery;
animation-duration: 0.2s;
animation-timing-function: steps(15);
}
/* Blink once red when disconnected from AC */
#waybar.indicator #custom-batteryindicator.discharging {
animation-iteration-count: 2;
animation-direction: alternate;
animation-name: blink-discharging-battery;
animation-duration: 0.3s;
animation-timing-function: steps(15);
}
/* Blink once cyan when plugged to AC */
#waybar.indicator #custom-batteryindicator.charging {
animation-iteration-count: 2;
animation-direction: alternate;
animation-name: blink-charging-battery;
animation-duration: 0.3s;
animation-timing-function: steps(15);
}
/* Blink cyan twice when battery is full */
#waybar.indicator #custom-batteryindicator.full {
animation-iteration-count: 4;
animation-direction: alternate;
animation-name: blink-full-battery;
animation-duration: 0.2s;
animation-timing-function: steps(15);
}
/* }}} */