6d9912af56
Fourth compiled-in shell theme (bread-theme/src/shell/builtin.rs). Stresses four axes no existing theme touched: - light surfaces (new tokens.light flag, swaps which of the fixed @bg/ @on-bg pair plays paper-surface vs ink — see Tokens::light's doc comment) - bottom anchoring (bar.window.anchors = ["bottom", ...]) - segmented bar chrome (new bar_border = "segmented" value: the bar window itself draws no fill/border, three slot-group pills draw their own) - blur disabled per-theme ([compositor.*] blur = false everywhere) Also: a new bottom_right surface anchor (manifest.rs + types.rs), since the three existing anchor shapes all assume a top-anchored bar's satellites belong in the top-right corner. tokens.accent2() gives the equaliser its own accent independent of accent_from/accent_to.
117 lines
4.1 KiB
CSS
117 lines
4.1 KiB
CSS
/* CSS template for the daylight builtin (bread-theme/src/shell/builtin.rs).
|
|
* Same scope and substitution rules as its three siblings: only the
|
|
* window/workspace/clock chrome the manifest's own concepts model, `{name}`
|
|
* tokens substituted, `@name` palette references passed through untouched.
|
|
* Declared-but-not-yet-consumed in production, same as every sibling
|
|
* template — see `ShellTheme::css`'s doc comment for why (breadbar hand-
|
|
* rolls its own CSS in `breadbar::theme::load_css` instead of calling this
|
|
* method). Exercised by this crate's own tests.
|
|
*
|
|
* Source: bos-ui-demos/proposed/daylight.html's <style> block.
|
|
*
|
|
* Unlike its three siblings, this template hardcodes which of `@bg`/`@on-bg`
|
|
* plays "paper surface" versus "ink" directly (`@on-bg` as the fill, `@bg`
|
|
* as the text) rather than branching on `{light}` at substitution time —
|
|
* `Tokens::substitute` only does `{name}` replacement, not conditionals, and
|
|
* this template is Daylight's alone, so there is nothing to branch FOR here.
|
|
* `breadbar::theme::load_css` is the one place that genuinely needs to pick
|
|
* between the two directions at runtime (it renders all four themes from
|
|
* one function) — see its own `panel`/`ink` locals and Tokens::light's doc
|
|
* comment for the general mechanism this template only needs one side of.
|
|
*/
|
|
|
|
window.breadbar {
|
|
background-color: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
color: @bg;
|
|
}
|
|
window.breadbar > box > centerbox { padding: 0 14px; }
|
|
window.breadbar button { min-height: 0; min-width: 0; }
|
|
|
|
/* The three detached pills (axis 3, segmented) — see
|
|
* breadbar::theme::load_css's `.bar-segment` rule for the identical
|
|
* production version of this block.
|
|
*/
|
|
.bar-segment {
|
|
background-color: alpha(@on-bg, {bg_alpha});
|
|
border: 1px solid alpha(@bg, 0.10);
|
|
border-radius: {radius_bar}px;
|
|
box-shadow: 0 2px 10px alpha(@bg, 0.13);
|
|
}
|
|
|
|
.workspace-trail {
|
|
background-image: linear-gradient(90deg, @{accent_from}, @{accent_to});
|
|
background-color: @{accent_from};
|
|
border-radius: {radius_sm}px;
|
|
}
|
|
.workspace-btn {
|
|
background: transparent;
|
|
opacity: 0.36;
|
|
color: @bg;
|
|
border-radius: {radius_sm}px;
|
|
border: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
min-width: 28px;
|
|
min-height: {chip_height}px;
|
|
margin: 0;
|
|
padding: 0 7px;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
transition: opacity 0.22s {spring_settle}, background-color 0.22s {spring_settle};
|
|
}
|
|
.workspace-btn:hover { opacity: 0.85; background: alpha(@bg, 0.08); }
|
|
.workspace-btn.occupied { opacity: 0.78; }
|
|
.workspace-btn.active { background: transparent; color: @on-accent; opacity: 1; }
|
|
.workspace-btn.active:hover { background: transparent; }
|
|
|
|
.clock-plain { padding: 0 4px; }
|
|
.clock-plain-time {
|
|
font-size: {font_size_base}px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.date-label {
|
|
font-size: 12px;
|
|
opacity: 0.48;
|
|
font-weight: 400;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* Warm amber equaliser — the second accent (axis 1's colour-mapping note):
|
|
* distinct from the teal workspace-trail accent above.
|
|
*/
|
|
.media-eq-bar {
|
|
background-color: @{accent2};
|
|
}
|
|
|
|
/* Light-theme overrides of the notification/OSD surfaces — the demo's own
|
|
* `.notifs`/`.note`/`.osd` block, which explicitly replaces shared.css's
|
|
* dark defaults. `@on-bg` (paper) / `@bg` (ink), not `@bg` (glass) / `@on-bg`
|
|
* (light ink) the way every sibling theme's identical rule reads — this is
|
|
* the one deliberate inversion this template makes relative to its
|
|
* siblings, and it is exactly what `{light}` conditions in the shared Rust
|
|
* implementation (breadbar::theme::load_css). See axis 1 in the task
|
|
* report for the full inventory this one inversion stands in for.
|
|
*/
|
|
window.breadbar-osd {
|
|
background-color: alpha(@on-bg, {bg_alpha});
|
|
color: @bg;
|
|
border-radius: {radius_pill}px;
|
|
border: 1px solid alpha(@bg, 0.10);
|
|
box-shadow: 0 8px 22px alpha(@bg, 0.16);
|
|
}
|
|
|
|
window.breadbar-panel {
|
|
background-color: alpha(@on-bg, {bg_alpha});
|
|
color: @bg;
|
|
border-radius: {radius_card}px;
|
|
border: 1px solid alpha(@bg, 0.10);
|
|
}
|
|
|
|
window.breadbar-dismiss {
|
|
background-color: alpha(#000000, 0.02);
|
|
}
|
|
|
|
.bread-widget-slot { margin-right: {pad}px; }
|