dotfiles/dotfiles/config/taffybar/taffybar.css

/* Top level styling */

.taffy-window {
	background-color: @bar-background;
	background-image: linear-gradient(to bottom, @bar-gradient-start, @bar-gradient-end);
	border-bottom: 1px solid @bar-border;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.taffy-window * {
	font-family: "Iosevka Aile", "Noto Sans", sans-serif;
	font-size: 9pt;
	font-weight: 600;
	color: @font-color;
	background-color: @transparent;
	text-shadow: none;
}

.taffy-box {
	border-width: 0px;
	background-color: @transparent;
	padding: 0px;
	margin: 0px;
	border-radius: 0px;
	box-shadow: none;
}

.outer-pad {
	background-color: @pill-background;
	border: 1px solid @pill-border;
	border-radius: 6px;
	margin: 4px 6px;
	box-shadow: 0 1px 0 @pill-highlight, 0 6px 14px @pill-shadow;
}

.inner-pad {
	padding: 1px 8px;
	border-radius: 5px;
}

.contents {
	padding: 0px;
	transition: background-color .2s;
	opacity: 1;
}

/* Workspaces styling */

.workspaces .inner-pad {
	box-shadow: none;
	border-width: 0;
}

.workspaces .contents {
	box-shadow: none;
	border-radius: 5px;
	border-width: 0px;
	border-style: solid;
	border-color: @transparent;
	padding: 0px 4px;
}

.workspace-label {
	padding-right: 6px;
	padding-left: 2px;
	padding-top: 0px;
	font-size: 9pt;
	opacity: 0.95;
	font-weight: 600;
	transition: color .2s;
}

.contents .window-icon {
	border-width: 1px;
}

.active .contents .window-icon {
	opacity: 1;
}

.active .contents {
	background-color: rgba(255, 255, 255, 0.10);
	border-radius: 999px;
	opacity: 1;
}

.overlay-box {
	transition: background-color .5s;
}

.active .overlay-box {
	padding: 0px;
	border-color: @transparent;
	border-width: 0px;
	opacity: 1;
}

.visible .contents {
	background-color: rgba(255, 255, 255, 0.06);
}

.window-icon-container {
	transition: opacity .2s, box-shadow .2s;
	opacity: 1;
	border-radius: 5px;
	transition: background-color .2s;
	background-color: rgba(255, 255, 255, 0.04);
	padding: 1px 4px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* This gives space for the box-shadow (they look like underlines) that follow.
   This will actually affect all widgets, (not just the workspace icons), but
   that is what we want since we want the icons to look the same. */
.auto-size-image, .sni-tray  {
	padding: 1px 4px;
}

.window-icon-container.active {
	background-color: rgba(255, 255, 255, 0.13);
	border-color: rgba(255, 255, 255, 0.16);
}

.window-icon-container.urgent {
}

.window-icon-container.minimized .window-icon {
	opacity: .3;
}

.window-icon {
	opacity: 1;
	transition: opacity .5s;
}

/* Button styling */

button {
	all: initial;
	background-color: @transparent;
	border-width: 0px;
	border-radius: 0px;
}

button:checked, button:hover .Contents:hover {
	box-shadow: inset 0 -2px @accent;
	background-color: rgba(255, 255, 255, 0.06);
}

/* Menu styling */

/* The ".taffy-window" prefixed selectors are needed because if they aren't present,
   the top level .Taffybar selector takes precedence */
.taffy-window menuitem *,  menuitem * {
	color: @menu-font-color;
	text-shadow: none;
}

.taffy-window menuitem, menuitem {
	background-color: @menu-background-color;
}

.taffy-window menuitem:hover, menuitem:hover {
	background-color: @menu-highlight;
}

.taffy-window menuitem:hover > label, menuitem:hover > label {
	color: @white;
}

.clock label,
.mpris label,
.battery-text label {
	letter-spacing: 0.2px;
}

.mpris label {
	color: @font-muted;
}