diff options
Diffstat (limited to 'styles')
| -rw-r--r-- | styles/fonts.css | 19 | ||||
| -rw-r--r-- | styles/global.css | 31 | ||||
| -rw-r--r-- | styles/modules.css | 180 | ||||
| -rw-r--r-- | styles/pills.css | 102 | ||||
| -rw-r--r-- | styles/style.css | 19 |
5 files changed, 351 insertions, 0 deletions
diff --git a/styles/fonts.css b/styles/fonts.css new file mode 100644 index 0000000..8cd59ce --- /dev/null +++ b/styles/fonts.css @@ -0,0 +1,19 @@ +/* Fonts. + * + * Only three modules show text at all on this bar: the clock pair and the + * tooltips. Everything else is an icon, which is the point of the theme. + * + * Inconsolata is the desktop's monospace face, and monospace is deliberate + * for a clock: proportional digits jitter as the minute changes. + */ + +* { + font-family: "Inconsolata Nerd Font Mono", monospace; + font-weight: bold; + font-size: 16px; +} + +tooltip label { + font-weight: normal; + font-size: 14px; +} diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 0000000..9886761 --- /dev/null +++ b/styles/global.css @@ -0,0 +1,31 @@ +/* The bar itself, and the chrome that is not a pill. + * + * The bar is transparent: the pills are the only thing that draws, which is + * what makes them read as separate capsules over the wallpaper. + */ + +window#waybar { + background: transparent; + color: @main-fg; +} + +/* GTK draws a button background by default, and it shows through the pill's + * own rounded corners as square shoulders. */ +button { + background: transparent; + border: none; + box-shadow: none; + text-shadow: none; + min-height: 0; +} + +tooltip { + background: @main-bg; + border: 1px solid @outline; + border-radius: 8px; +} + +tooltip label { + color: @main-fg; + padding: 2px; +} diff --git a/styles/modules.css b/styles/modules.css new file mode 100644 index 0000000..647465f --- /dev/null +++ b/styles/modules.css @@ -0,0 +1,180 @@ +/* What is different about each module. + * + * The icons for the workspaces, the clock pair, the launcher and the language + * live here rather than in the config, because waybar's format-icons takes + * text and not paths. @ICONS@ is substituted by install.sh with the icon + * theme's absolute path, so the theme can move without editing this file. + */ + +/* ------------------------------------------------------------------ * + * Launcher: the one always-coloured pill, and the desktop's identity. * + * ------------------------------------------------------------------ */ + +#custom-launcher { + background: @accent; + background-image: url("@CONFIG@/slackware.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: 18px 18px; + min-width: 22px; + padding: 2px 10px; +} + +/* The accent pill inverts on hover rather than lightening: it is already the + * brightest thing on the bar. */ +#custom-launcher:hover { + background-color: @main-bg; +} + +/* ---------------------------------------------- * + * Clock: the only text, each with a leading icon. * + * ---------------------------------------------- */ + +#clock.date, +#clock.time { + background-repeat: no-repeat; + background-position: 10px center; + background-size: 16px 16px; + padding-left: 32px; +} + +#clock.date { + background-image: url("@ICONS@/mimetypes/22/x-office-calendar.svg"); +} + +#clock.time { + background-image: url("@ICONS@/categories/22/clock.svg"); +} + +/* ------------------------------------------------------------- * + * Workspaces: eight themed icons, one per button, set by CSS. * + * * + * The module's labels are empty (see the module config), so each * + * button is an icon-sized box and nothing else. * + * ------------------------------------------------------------- */ + +#workspaces button { + background-repeat: no-repeat; + background-position: center; + background-size: 18px 18px; + min-width: 26px; + min-height: 26px; + margin: 0 1px; + border-radius: 10px; + /* Dim by default; the active workspace is the one at full strength. */ + opacity: 0.45; + transition: opacity 0.3s ease, background-color 0.3s ease; +} + +#workspaces button:hover { + background-color: @hover-bg; + opacity: 0.8; +} + +#workspaces button.active, +#workspaces button.focused { + background-color: @hover-bg; + opacity: 1; +} + +#workspaces button.urgent { + background-color: @critical; + opacity: 1; +} + +/* The eight. Generic names, so the bar does not lie when the application on a + * workspace changes. */ +#workspaces button:nth-child(1) { background-image: url("@ICONS@/categories/22/web-browser.svg"); } +#workspaces button:nth-child(2) { background-image: url("@ICONS@/categories/22/utilities-terminal.svg"); } +#workspaces button:nth-child(3) { background-image: url("@ICONS@/categories/22/text-editor.svg"); } +#workspaces button:nth-child(4) { background-image: url("@ICONS@/devices/22/network-server.svg"); } +#workspaces button:nth-child(5) { background-image: url("@ICONS@/actions/22/document-edit.svg"); } +#workspaces button:nth-child(6) { background-image: url("@ICONS@/categories/22/applications-graphics.svg"); } +#workspaces button:nth-child(7) { background-image: url("@ICONS@/categories/22/internet-chat.svg"); } +#workspaces button:nth-child(8) { background-image: url("@ICONS@/devices/22/input-gaming.svg"); } + +/* ------------------------------------------------ * + * Language: a flag, shipped by this repo. * + * * + * An image module, not hyprland/language: that one * + * has no per-language CSS class, so the flag could * + * not be selected. wb-lang picks the file instead. * + * ------------------------------------------------ */ + +#image.lang { + padding: 2px 10px; + min-width: 22px; +} + +/* ------------------------------------------- * + * Dots: coloured by their scripts, not by CSS. * + * ------------------------------------------- */ + +/* The privacy pill only exists while something is capturing: an empty label + * would otherwise leave a bare capsule sitting on the bar. */ +#custom-privacy_dots { + padding: 2px 10px; +} + +#custom-privacy_dots.mic-off.cam-off.loc-off.scr-off { + padding: 0; + margin: 0; + opacity: 0; +} + +#custom-vmdot { + padding: 2px 10px; +} + +/* ---------------------------------------- * + * Volume: a drawer, the microphone hidden. * + * ---------------------------------------- */ + +#volume { + padding: 2px 8px; +} + +#volume image { + padding: 0 4px; +} + +/* --------------------------------------------------------- * + * Taskbar: application icons, with the idea2 underline. * + * --------------------------------------------------------- */ + +#taskbar button { + background: transparent; + padding: 0 8px; + margin: 0 1px; + border-bottom: 3px solid transparent; + transition: border-bottom-color 0.3s ease-out, background-color 0.3s ease; +} + +#taskbar button:hover { + background: @hover-bg; + border-bottom-color: @accent; +} + +#taskbar button.active { + border-bottom-color: @accent; +} + +/* --------------------------- * + * Tray and presentation mode. * + * --------------------------- */ + +#tray { + padding: 2px 10px; +} + +#tray menu { + background: @main-bg; + color: @main-fg; + border: 1px solid @outline; + border-radius: 8px; +} + +#image.idle { + padding: 2px 10px; + min-width: 22px; +} diff --git a/styles/pills.css b/styles/pills.css new file mode 100644 index 0000000..83e5d36 --- /dev/null +++ b/styles/pills.css @@ -0,0 +1,102 @@ +/* The pills, and the way they move. + * + * Geometry from idea1: modules are rounded capsules grouped into clusters, + * with gaps between clusters and none inside one, so the bar reads as a few + * objects rather than a continuous strip. + * + * Motion from idea2: background and colour cross-fade on hover over 0.3s. + * That is the whole effect. No keyframes anywhere, because GTK's CSS engine + * supports transitions on these properties directly and an animation would + * run forever whether or not anyone is looking at it. + */ + +/* Every pill. Shared geometry lives here exactly once; modules.css only says + * what is different about each one. */ +#custom-launcher, +#clock.date, +#clock.time, +#workspaces, +#custom-vmdot, +#taskbar, +#custom-privacy_dots, +#volume, +#tray, +#image.idle, +#image.lang { + background: @main-bg; + color: @main-fg; + border-radius: 14px; + padding: 2px 12px; + margin: 4px 0; + transition: background-color 0.3s ease, color 0.3s ease; +} + +/* Hover. The one rule that makes the bar feel alive, and the reason every + * pill declares a transition above. */ +#custom-launcher:hover, +#clock.date:hover, +#clock.time:hover, +#custom-vmdot:hover, +#custom-privacy_dots:hover, +#volume:hover, +#tray:hover, +#image.idle:hover, +#image.lang:hover { + background: @hover-bg; + color: @hover-fg; +} + +/* Clusters. + * + * Neighbours inside a cluster sit flush and share one outline; only the ends + * of a cluster round off. The gap between clusters is a margin on the last + * pill of each, so adding a module to a cluster means editing one rule. + */ + +/* Left: launcher | date time | workspaces | vm dots */ +#custom-launcher { + margin-left: 6px; + margin-right: 6px; +} + +#clock.date { + border-radius: 14px 0 0 14px; + padding-right: 8px; +} + +#clock.time { + border-radius: 0 14px 14px 0; + padding-left: 8px; + margin-right: 6px; +} + +#workspaces { + padding: 2px 6px; + margin-right: 6px; +} + +/* Right: privacy | volume | tray | presentation | language */ +#custom-privacy_dots { + margin-right: 6px; +} + +#volume { + margin-right: 6px; +} + +#tray { + margin-right: 6px; +} + +#image.idle { + margin-right: 6px; +} + +#image.lang { + margin-right: 6px; +} + +/* Center: the taskbar is one pill holding a row of buttons. */ +#taskbar { + padding: 2px 6px; +} diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..d25e5fc --- /dev/null +++ b/styles/style.css @@ -0,0 +1,19 @@ +/* waybar-theme-udt: stylesheet entry point. + * Copyright (C) 2026 Danilo M. <danix@danix.xyz> + * Licensed under the GNU General Public License v2 only. + * + * Load order matters: theme.css defines the colours every later file names, + * and modules.css overrides the shared pill geometry per module. + */ + +/* Ignore the GTK theme: waybar inherits it otherwise, and it fights the + * pills for padding and background. */ +* { + all: initial; +} + +@import "theme.css"; /* generated by udt-palette, gitignored */ +@import "fonts.css"; +@import "global.css"; +@import "pills.css"; +@import "modules.css"; |