150 lines
3 KiB
Plaintext
150 lines
3 KiB
Plaintext
dnl /* Macros that will be used by m4. */
|
|
dnl
|
|
dnl /* Constants. */
|
|
define(ZERO, 0px)dnl
|
|
dnl
|
|
dnl /* Border radius. */
|
|
define(BORDER_RADIUS, 8px)dnl
|
|
define(LEFT_BORDER_RADIUS, BORDER_RADIUS ZERO ZERO BORDER_RADIUS)dnl
|
|
define(RIGHT_BORDER_RADIUS, ZERO BORDER_RADIUS BORDER_RADIUS ZERO)dnl
|
|
dnl
|
|
dnl /* Margin. */
|
|
define(OUTER_MARGIN, 34px)dnl
|
|
define(INNER_MARGIN, 22px)dnl
|
|
dnl
|
|
dnl /* Padding. */
|
|
define(HEIGHT_PADDING, 6px)dnl
|
|
define(HORIZONTAL_PADDING, 15px)dnl
|
|
define(SMALL_PADDING, 10px)dnl
|
|
define(TINY_PADDING, 5px)dnl
|
|
dnl
|
|
/* This file serves to style the modules, and the bar itself. */
|
|
/* The bar should have an height of 46. */
|
|
|
|
/* We avoid hardcoding the colors in. */
|
|
@import "colors.css";
|
|
|
|
/* Default propreties for all elements. */
|
|
* {
|
|
font-family: 'Atlas Nerd Font SemiBold';
|
|
font-size: 10pt;
|
|
}
|
|
|
|
/* The bar and the tooltip. */
|
|
/* >----------------------< */
|
|
|
|
/* 1. The bar itself. */
|
|
window#waybar {
|
|
background-color: @invisible;
|
|
}
|
|
|
|
/* 2. What is shown when hovering over a module. */
|
|
tooltip {
|
|
background-color: @base;
|
|
color: @text;
|
|
|
|
border-radius: BORDER_RADIUS;
|
|
}
|
|
|
|
/* 2.1 The text inside the tooltip. */
|
|
tooltip label {
|
|
color: @text;
|
|
padding: TINY_PADDING;
|
|
}
|
|
|
|
/* Modules. */
|
|
/* >------< */
|
|
|
|
/* In order of apparition, from left to right. */
|
|
#workspaces, #network, #memory, #clock, #pulseaudio, #battery {
|
|
background-color: @base;
|
|
color: @text;
|
|
|
|
opacity: 0.96;
|
|
padding: TINY_PADDING ZERO;
|
|
}
|
|
|
|
/* The padding/margin elements are dependant on the order of the modules. */
|
|
/* Thus, they are separated from the more constant attributes by a new line. */
|
|
|
|
/* 1. Left modules. */
|
|
/* >--------------< */
|
|
|
|
#workspaces {
|
|
/* Outer spacing after the workspace instances. */
|
|
padding-right: TINY_PADDING;
|
|
padding-left: TINY_PADDING;
|
|
|
|
/* Margin between the edge of the screen and the widget. */
|
|
margin-left: OUTER_MARGIN;
|
|
|
|
/* Visually separate the modules. */
|
|
margin-right: INNER_MARGIN;
|
|
border-radius: BORDER_RADIUS;
|
|
}
|
|
|
|
#network {
|
|
border-radius: LEFT_BORDER_RADIUS;
|
|
|
|
padding-left: HORIZONTAL_PADDING;
|
|
}
|
|
|
|
#memory {
|
|
border-radius: RIGHT_BORDER_RADIUS;
|
|
|
|
padding-left: HORIZONTAL_PADDING;
|
|
padding-right: HORIZONTAL_PADDING;
|
|
}
|
|
|
|
/* 2. Center modules. */
|
|
/* >----------------< */
|
|
|
|
#clock {
|
|
border-radius: BORDER_RADIUS;
|
|
|
|
padding-left: HORIZONTAL_PADDING;
|
|
padding-right: HORIZONTAL_PADDING;
|
|
}
|
|
|
|
/* 3. Right modules. */
|
|
/* >---------------< */
|
|
|
|
#pulseaudio {
|
|
border-radius: LEFT_BORDER_RADIUS;
|
|
|
|
padding-left: HORIZONTAL_PADDING;
|
|
padding-right: HORIZONTAL_PADDING;
|
|
}
|
|
|
|
#battery {
|
|
margin-right: OUTER_MARGIN;
|
|
border-radius: RIGHT_BORDER_RADIUS;
|
|
|
|
padding-right: HORIZONTAL_PADDING;
|
|
}
|
|
|
|
/* Workspaces buttons. */
|
|
/* >-----------------< */
|
|
|
|
#workspaces button {
|
|
background: @base;
|
|
color: @text;
|
|
|
|
padding-left: SMALL_PADDING;
|
|
padding-right: SMALL_PADDING;
|
|
}
|
|
|
|
#workspaces button.active {
|
|
color: @blue;
|
|
}
|
|
|
|
#workspaces button.urgent {
|
|
color: @red;
|
|
}
|
|
|
|
#workspaces button:hover {
|
|
background: @invisible;
|
|
border-color: @invisible;
|
|
color: @blue;
|
|
}
|