586 lines
12 KiB
CSS
586 lines
12 KiB
CSS
/* vim:fileencoding=utf-8:foldmethod=marker
|
|
*/
|
|
|
|
/* SOCIO-CYBEREENG — THE OPERATING SYSTEM
|
|
Waybar style: WHITE PANEL
|
|
LinaraOS [2026]
|
|
*/
|
|
|
|
/* Define colors */
|
|
/* {{{ */
|
|
@define-color background1 rgba(240, 240, 250, 1);
|
|
@define-color background2 rgba(21, 21, 32, 1);
|
|
@define-color backgroundw rgba(250, 250, 250, 1);
|
|
@define-color background #151520;
|
|
|
|
/* FIX: was undefined -> modules silently lost background */
|
|
@define-color module_bg rgba(250, 250, 250, 1);
|
|
|
|
@define-color sepepator #ffffff;
|
|
@define-color warning #f38ba8;
|
|
@define-color caution #45475a;
|
|
@define-color performance #000000;
|
|
@define-color audio #000000;
|
|
@define-color misc #000000;
|
|
@define-color date #000000;
|
|
@define-color work #000000;
|
|
@define-color window #000000;
|
|
@define-color resize #eba0ac;
|
|
@define-color process #000000;
|
|
@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 blink-urgent-workspace {
|
|
to {
|
|
color: @warning;
|
|
}
|
|
}
|
|
|
|
@keyframes blink-critical-text {
|
|
to {
|
|
color: @sepepator;
|
|
}
|
|
}
|
|
|
|
@keyframes blink-modifier-text {
|
|
to {
|
|
color: @sepepator;
|
|
}
|
|
}
|
|
|
|
@keyframes blink-special-workspace {
|
|
to {
|
|
color: @window;
|
|
}
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
/* Main bar defaults */
|
|
/* {{{ */
|
|
window#waybar {
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#waybar.main {
|
|
background: @backgroundw;
|
|
font-family: "Home Video";
|
|
font-size: 12px;
|
|
color: @text;
|
|
}
|
|
|
|
#waybar.main button {
|
|
font-family: HomeVideo;
|
|
font-size: 12px;
|
|
color: @text;
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
/* Main bar modules */
|
|
/* {{{ */
|
|
#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 #tray,
|
|
#waybar.main #window,
|
|
#waybar.main #disk {
|
|
padding-left: 8pt;
|
|
padding-right: 8pt;
|
|
margin: 2px 0;
|
|
background: @module_bg;
|
|
}
|
|
|
|
#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 #tray,
|
|
#waybar.main #disk {
|
|
border-bottom: 1.2px solid rgb(152, 217, 255);
|
|
}
|
|
|
|
#waybar.main #window {
|
|
font-weight: 600;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
/* Module colors */
|
|
/* {{{ */
|
|
#waybar.main #cpu,
|
|
#waybar.main #temperature,
|
|
#waybar.main #memory.ram,
|
|
#waybar.main #memory.swap,
|
|
#waybar.main #disk,
|
|
#waybar.main #network {
|
|
color: @performance;
|
|
background: @backgroundw;
|
|
}
|
|
|
|
#waybar.main #pulseaudio {
|
|
color: @audio;
|
|
background: @backgroundw;
|
|
}
|
|
|
|
#waybar.main #custom-battery,
|
|
#waybar.main #language,
|
|
#waybar.main #backlight,
|
|
#waybar.main #battery {
|
|
color: @misc;
|
|
background: @backgroundw;
|
|
}
|
|
|
|
#waybar.main #clock {
|
|
color: @date;
|
|
background: @backgroundw;
|
|
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 #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%,
|
|
@background 25%,
|
|
@background 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 #pulseaudio.output.muted,
|
|
#waybar.main #pulseaudio.input.source-muted {
|
|
color: @sepepator;
|
|
}
|
|
|
|
#waybar.main #custom-battery.warning,
|
|
#waybar.main #custom-battery.critical {
|
|
color: @warning;
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
/* Battery charging */
|
|
/* {{{ */
|
|
#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 */
|
|
/* {{{ */
|
|
|
|
#waybar.main #workspaces {
|
|
padding-left: 20px;
|
|
padding-right: 4px;
|
|
margin-top: -6px;
|
|
margin-bottom: -6px;
|
|
background-image: linear-gradient(-243.435deg,
|
|
@backgroundw 18px,
|
|
@sepepator 18px,
|
|
@sepepator 21px,
|
|
transparent 21px,
|
|
transparent calc(100% -21px),
|
|
@sepepator calc(100% -21px),
|
|
@sepepator calc(100% - 19px),
|
|
transparent calc(100% - 19px));
|
|
}
|
|
|
|
#waybar.main #workspaces button {
|
|
color: #45585a;
|
|
background: transparent;
|
|
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%,
|
|
@backgroundw 25%,
|
|
@backgroundw 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%);
|
|
}
|
|
|
|
#waybar.main #workspaces button:hover {
|
|
color: @window;
|
|
}
|
|
|
|
/* Special workspace 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: 14pt;
|
|
font-weight: bold;
|
|
color: transparent;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
margin-bottom: -4px;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
/* FIX: @transparent was undefined -> use plain keyword */
|
|
#waybar.main #custom-spacer1 {
|
|
background-image: linear-gradient(63.435deg,
|
|
transparent 47.5%,
|
|
@sepepator 52.4%);
|
|
}
|
|
|
|
#waybar.main #custom-spacer2 {
|
|
background-image: linear-gradient(63.435deg,
|
|
@sepepator 47.6%,
|
|
@sepepator 52.4%);
|
|
}
|
|
|
|
#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,
|
|
transparent 47.5%,
|
|
@sepepator 52.4%);
|
|
}
|
|
|
|
#waybar.main #custom-spacer5 {
|
|
background-image: linear-gradient(-63.435deg,
|
|
transparent 47.5%,
|
|
@sepepator 52.4%);
|
|
}
|
|
|
|
#waybar.main #custom-spacer6 {
|
|
background-image: linear-gradient(-63.435deg,
|
|
transparent 47.5%,
|
|
@sepepator 47.6%,
|
|
@sepepator 52.4%,
|
|
transparent 52.5%);
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
/* Tray (white panel, always visible) */
|
|
/* {{{ */
|
|
#waybar.main #tray {
|
|
background: @backgroundw;
|
|
color: @process;
|
|
padding-left: 6pt;
|
|
padding-right: 6pt;
|
|
}
|
|
|
|
/* Highlight tray icons that need attention */
|
|
#waybar.main #tray > .needs-attention {
|
|
background: @warning;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Passive icons slightly faded */
|
|
#waybar.main #tray > .passive {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#waybar.main #custom-trayicon {
|
|
font-size: 11pt;
|
|
color: @process;
|
|
font-style: italic;
|
|
background: @backgroundw;
|
|
padding-right: 4pt;
|
|
padding-left: 6pt;
|
|
border-radius: 6pt 0pt 0pt 6pt;
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
/* Tooltip */
|
|
/* {{{ */
|
|
tooltip {
|
|
background: @backgroundw;
|
|
border: 3px solid @caution;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
font-family: "Home Video";
|
|
}
|
|
|
|
#waybar.main #tray menu {
|
|
background: @backgroundw;
|
|
color: @text;
|
|
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 */
|
|
/* {{{ */
|
|
|
|
#waybar.indicator {
|
|
font-size: 10px;
|
|
color: rgba(0, 0, 0, 0);
|
|
background: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
#waybar.indicator #custom-batteryindicator {
|
|
border: 2.5px solid @sepepator;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
|
|
border-radius: 7px;
|
|
padding-left: 2247px;
|
|
/* Padding formula:
|
|
(H_rez / scaling) - L_margin - R_margin - 2 * border - (font-size / 2)
|
|
Example: (2880 / 1.25) - 24 - 24 - 2*2.5 - (27/2) = 2237.5px */
|
|
}
|
|
|
|
#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);
|
|
}
|
|
|
|
#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);
|
|
}
|
|
|
|
#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);
|
|
}
|
|
|
|
#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);
|
|
}
|
|
|
|
#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);
|
|
}
|
|
|
|
/* }}} */
|