path: root/styles/modules.css

/* 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. *
 * ------------------------------------------------------------------ */

/* Launcher: two marks, one per state.
 *
 * The mark is a CSS background rather than an image module's content, which
 * is what makes this possible at all: CSS can swap a background-image on
 * :hover, but it cannot reach inside an image module to recolour what that
 * module drew.
 *
 * Two files, same path, different fill: dark on the accent pill at rest,
 * light on the dark pill when hovered. install.sh generates both from one
 * source, so they cannot drift apart in shape.
 *
 * The hover background is set explicitly rather than left out. The GTK theme
 * paints its own hover shade on the button node underneath, so declining to
 * set one does not leave the pill alone, it leaves the shade in charge, and
 * the pill went dark with the dark mark on it. That was the second version of
 * this bug; the first filled the mark with @accent and drew it on the @accent
 * pill.
 *
 * min-height is load-bearing: the label is a single space, so without it the
 * background paints into a box with almost no height. */
#custom-launcher {
	background-color: @accent;
	background-image: url("@CONFIG@/slackware.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	padding: 2px 14px;
	min-width: 20px;
	min-height: 18px;
}

#custom-launcher:hover {
	background-color: @main-bg;
	background-image: url("@CONFIG@/slackware-light.svg");
}

/* ---------------------------------------------- *
 * 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;
}

/* ------------------------------------------------------ *
 * Mail: envelope icon, unread count as text.              *
 *                                                         *
 * The count is content rather than decoration, so it stays *
 * text like the clock. The state comes from the watcher's  *
 * class: nothing unread is dim, a dead watcher is loud.    *
 * ------------------------------------------------------ */

#custom-mail {
	background-image: url("@ICONS@/actions/22/mail-unread.svg");
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 16px 16px;
	padding-left: 32px;
	min-height: 16px;
}

#custom-mail.empty {
	color: @main-fg;
	opacity: 0.45;
}

#custom-mail.unread {
	color: @main-fg;
}

#custom-mail.error {
	color: @critical;
}

/* ------------------------------------------- *
 * 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;
}

/* Presentation mode. statusctl emits the state as a class and an empty text,
 * so the icon is chosen here rather than by a format string.
 *
 * `down` is not `off`: the state file is missing, so the mode cannot be read
 * at all. It draws a warning rather than the off icon, because a watcher that
 * has died should not look like a mode that is simply not on. */
#custom-presentation {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	padding: 2px 10px;
	min-width: 22px;
	min-height: 18px;
}

#custom-presentation.deactivated {
	background-image: url("@ICONS@/categories/22/preferences-desktop-screensaver.svg");
}

#custom-presentation.activated {
	background-image: url("@ICONS@/mimetypes/22/x-office-presentation.svg");
}

#custom-presentation.down {
	background-image: url("@ICONS@/status/22/dialog-warning.svg");
}