638 lines
14 KiB
CSS
638 lines
14 KiB
CSS
/* 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);
|
|
}
|
|
|
|
/* }}} */
|
|
|