360 lines
9.2 KiB
CSS
360 lines
9.2 KiB
CSS
@import url("theme.css");
|
|
@import url("end-widget-colors.css");
|
|
@import url("end-widget-solid.css");
|
|
|
|
/* Widget/layout styling for taffybar.
|
|
*
|
|
* This file is the single CSS entrypoint for the shared bar theme. Supporting
|
|
* stylesheets are pulled in via `@import` so GTK sees one user stylesheet per
|
|
* host rather than several separately loaded files with fragile precedence.
|
|
*/
|
|
|
|
/* Base typography + foreground color for the bar itself.
|
|
*
|
|
* IMPORTANT: SNI menus are popup windows but inherit style context from the
|
|
* attach-widget chain. Avoid broad descendant selectors (especially `*`) here
|
|
* so we don't accidentally override menu theming.
|
|
*/
|
|
.taffy-box {
|
|
/* Most text should come from Iosevka Aile; icon glyphs (Font Awesome / Nerd
|
|
Font PUA) should come from a Nerd Font family to avoid tiny fallback glyphs. */
|
|
font-family: "Iosevka Aile", "Iosevka Nerd Font", "Iosevka NF", "Noto Sans", sans-serif;
|
|
font-size: 10.5pt;
|
|
font-weight: 600;
|
|
color: @font-color;
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* Icon-label combined widgets (PulseAudio, NetworkManager): the `.icon` label
|
|
uses a nerd font character, so force the nerd font family on it. */
|
|
.icon-label > .icon {
|
|
font-family: "Iosevka Nerd Font";
|
|
padding-right: 11px;
|
|
}
|
|
|
|
/* Keep icon+label "combined" widgets left-aligned, including multiline labels. */
|
|
.icon-label > .label {
|
|
-GtkLabel-xalign: 0;
|
|
-GtkLabel-justify: left;
|
|
}
|
|
|
|
/* Compact two-line RAM/SWAP widget: reduce icon padding a bit. */
|
|
.ram-swap .icon-label > .icon {
|
|
/* Different glyphs have different visual widths; fix the icon column width
|
|
so the value text aligns between the RAM and SWAP rows. */
|
|
min-width: 22px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
/* Stacked sun/lock pill: give each row a touch of horizontal breathing room. */
|
|
.sun-lock .wlsunset,
|
|
.sun-lock .screen-lock {
|
|
padding: 0px 4px;
|
|
}
|
|
|
|
/* The main bar container. Keep the bar and widget pills aligned so the whole
|
|
surface reads as one rounded system rather than a mix of sharp and round
|
|
shapes. */
|
|
.taffy-box {
|
|
border-width: 0px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border-radius: 10px;
|
|
box-shadow: none;
|
|
background-color: @bar-background;
|
|
background-image: none;
|
|
}
|
|
|
|
/* Each widget is wrapped in outer-pad > inner-pad > contents by
|
|
buildContentsBox (Haskell). The outer-pad draws the squircle
|
|
background pill. Use a clearly rounded radius so the pill silhouette stays
|
|
visible even on the denser desktop monitor. */
|
|
.outer-pad {
|
|
background-color: @pill-background;
|
|
border: 0px;
|
|
border-radius: 10px;
|
|
margin: 4px 4px;
|
|
/* No white outline; define shape with subtle inner highlight + dark stroke. */
|
|
box-shadow:
|
|
inset 0 1px 0 @pill-highlight,
|
|
inset 0 0 0 1px @pill-border,
|
|
0 10px 24px @pill-shadow;
|
|
}
|
|
|
|
.inner-pad {
|
|
padding: 2px 10px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.contents {
|
|
padding: 0px;
|
|
transition: background-color .2s;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Per-widget color overrides now live in end-widget-colors.css,
|
|
which rotates through a 5-color palette via semantic end-slot classes. */
|
|
|
|
.outer-pad.mpris .icon {
|
|
font-family: "Iosevka Nerd Font";
|
|
}
|
|
|
|
/* MPRIS2 widget toggles `no-visible-children`/`visible-children` on the outer
|
|
widget. When nothing is visible, collapse the whole pill so it doesn't leave
|
|
an empty squircle gap in the end widget row. */
|
|
.outer-pad.mpris.no-visible-children {
|
|
margin: 0px;
|
|
background-color: @transparent;
|
|
box-shadow: none;
|
|
border-width: 0px;
|
|
}
|
|
|
|
.outer-pad.mpris.no-visible-children .inner-pad {
|
|
padding: 0px;
|
|
}
|
|
|
|
.outer-pad.mpris.no-visible-children .contents {
|
|
padding: 0px;
|
|
}
|
|
|
|
/* Workspaces styling */
|
|
|
|
/* Reset workspace .outer-pad pills to default styling so the nth-child color
|
|
rotation from end-widget-colors.css doesn't bleed into workspace pills.
|
|
This has specificity 0,2,0 (same as the nth-child rules) but comes later
|
|
in the cascade, so it wins. */
|
|
.workspaces .outer-pad {
|
|
background-color: @pill-background;
|
|
/* Keep workspace pills slightly tighter than default widget spacing. */
|
|
margin: 4px 3px;
|
|
box-shadow:
|
|
inset 0 1px 0 @pill-highlight,
|
|
inset 0 0 0 1px @pill-border,
|
|
0 10px 24px @pill-shadow;
|
|
}
|
|
.workspaces .outer-pad {
|
|
color: @font-color;
|
|
}
|
|
|
|
|
|
/* Asymmetric padding: 10px left leaves room for the overlaid workspace number
|
|
label; 3px right keeps the pill tight against the trailing icon edge. */
|
|
.workspaces .inner-pad {
|
|
box-shadow: none;
|
|
border-width: 0;
|
|
padding: 2px 3px 2px 10px;
|
|
}
|
|
|
|
.workspaces .contents {
|
|
box-shadow: none;
|
|
border-radius: 8px;
|
|
border-width: 0px;
|
|
border-style: solid;
|
|
border-color: @transparent;
|
|
padding: 0px 4px;
|
|
}
|
|
|
|
.workspace-label {
|
|
/* Overlay label (workspace number) that sits inside the icon "squircle". */
|
|
padding: 1px 3px;
|
|
margin: 0px;
|
|
font-size: 9.5pt;
|
|
opacity: 0.92;
|
|
font-weight: 700;
|
|
transition: color .2s;
|
|
background-color: @transparent;
|
|
}
|
|
|
|
/* The workspace label is overlaid bottom-left over the workspace icon strip.
|
|
Positioning: halign=start (left), valign=end (bottom) set in Haskell code.
|
|
Margins offset from that anchor point. */
|
|
.workspaces .overlay-box {
|
|
transition: background-color .2s, border-color .2s;
|
|
|
|
background-color: transparent;
|
|
border: none;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
/* Position the workspace number inside the squircle pill. GTK overlays ignore
|
|
CSS margin for child positioning, so we use padding on the label itself:
|
|
padding-bottom pushes the text up from the bottom edge, padding-left pushes
|
|
it inward from the left corner to clear the border-radius. */
|
|
.workspaces .overlay-box .workspace-label {
|
|
background-color: transparent;
|
|
border: none;
|
|
padding: 2px 5px 5px 12px;
|
|
color: rgba(255, 255, 255, 0.92);
|
|
}
|
|
|
|
/* Accent-tinted background on the active workspace's squircle pill.
|
|
.active is set on the GtkOverlay (by setWorkspaceWidgetStatusClass in
|
|
Haskell), and .outer-pad is a child of that overlay, so
|
|
`.workspaces .active .outer-pad` correctly targets the pill. */
|
|
.workspaces .active .outer-pad {
|
|
background-color: rgba(241, 178, 178, 0.25);
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(241, 178, 178, 0.5),
|
|
inset 0 1px 0 @pill-highlight,
|
|
0 10px 24px @pill-shadow;
|
|
}
|
|
|
|
.workspaces .active .overlay-box {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.contents .window-icon {
|
|
border-width: 3px;
|
|
}
|
|
|
|
.active .contents .window-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.active .contents {
|
|
background-color: rgba(255, 255, 255, 0.10);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* (Handled above for workspaces.) */
|
|
|
|
.visible .contents {
|
|
background-color: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.workspaces .window-icon-container {
|
|
/* Don't give each window icon its own background/border; the workspace
|
|
squircle is the background. */
|
|
background-color: transparent;
|
|
border: 0px;
|
|
box-shadow: none;
|
|
padding: 0px 2px;
|
|
}
|
|
|
|
.workspaces .window-icon-container.active {
|
|
background-color: rgba(255, 255, 255, 0.10);
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
border-radius: 7px;
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
.workspaces .active .contents,
|
|
.workspaces .visible .contents {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.workspaces .window-icon {
|
|
border-width: 0px;
|
|
}
|
|
|
|
.window-icon-container {
|
|
transition: opacity .2s, box-shadow .2s;
|
|
opacity: 1;
|
|
border-radius: 8px;
|
|
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;
|
|
}
|
|
|
|
.sni-tray-expand-toggle,
|
|
.sni-tray-edit-toggle,
|
|
.sni-tray-settings-toggle {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
border-radius: 8px;
|
|
padding: 0px 4px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.sni-tray-expand-toggle:hover,
|
|
.sni-tray-edit-toggle:hover,
|
|
.sni-tray-settings-toggle:hover {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
border-color: rgba(255, 255, 255, 0.30);
|
|
}
|
|
|
|
.sni-tray-overflow-count-label {
|
|
min-width: 12px;
|
|
}
|
|
|
|
.sni-tray-edit-toggle-active {
|
|
background-color: rgba(120, 190, 130, 0.40);
|
|
border-color: rgba(120, 190, 130, 0.90);
|
|
}
|
|
|
|
/* If the SNI tray is wrapped in our standard widget box, avoid double-padding. */
|
|
.sni-tray .sni-tray {
|
|
padding: 0px;
|
|
}
|
|
|
|
.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 */
|
|
|
|
.taffy-window button {
|
|
all: initial;
|
|
background-color: @transparent;
|
|
border-width: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
|
|
.taffy-window button:checked, .taffy-window button:hover .Contents:hover {
|
|
box-shadow: inset 0 -2px @accent;
|
|
background-color: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.clock label,
|
|
.mpris label,
|
|
.battery label,
|
|
.ram-swap label {
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
/* Clock stays centered even though combined widgets are left-aligned. */
|
|
.clock label {
|
|
-GtkLabel-xalign: 0.5;
|
|
-GtkLabel-justify: center;
|
|
}
|
|
|
|
.wakeup-debug label {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.wakeup-debug-hit {
|
|
background-color: rgba(255, 255, 255, 0.22);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
|
|
/* ASUS platform profile widget */
|
|
.asus-profile { }
|
|
.asus-profile.quiet { color: @end-color-4-fg; }
|
|
.asus-profile.balanced { color: @end-color-1-fg; }
|
|
.asus-profile.performance { color: @end-color-5-fg; }
|