/* wwwroot/css/site.css — hand-written modern CSS, committed to git as-is, no build step (docs/05 §6). */
@layer reset, tokens, base, layout, components;
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
button {
font: inherit;
cursor: pointer;
background: none;
border: none;
color: inherit;
padding: 0;
}
ul { list-style: none; padding: 0; }
h1, h2, h3, p, ul, figure, pre { margin: 0; }
}
@layer tokens {
:root {
color-scheme: light dark; /* enables light-dark() automatic dark mode */
/* Material Indigo accent — dark mode matches eax.org (#9FA8DA on #121212 / #1e1e1e
surfaces, 87 % / 60 % white text); light mode uses Indigo 500 (#3F51B5) for
accessible contrast on a near-white background. */
--brand: light-dark(#3F51B5, #9FA8DA);
--brand-hover: light-dark(#303F9F, #b1b9e1);
--brand-text: light-dark(#ffffff, #121212); /* text drawn ON a brand-coloured surface */
--bg: light-dark(#fafafa, #121212); /* Material backdrop */
--fg: light-dark(rgba(0,0,0,0.87), rgba(255,255,255,0.87));
--fg-muted: light-dark(rgba(0,0,0,0.60), rgba(255,255,255,0.60));
--surface: light-dark(#ffffff, #1e1e1e); /* cards, dropdown panels, inputs */
--surface-hover: light-dark(rgba(0,0,0,0.04), rgba(255,255,255,0.04));
--border: light-dark(rgba(0,0,0,0.12), rgba(255,255,255,0.12));
--radius: 0.25rem; /* Material small radius (eax.org). rem so它随用户字体大小一起缩放——
和余下的 spacing / typography 一致；hairline border / outline / shadow
offset / 9999px pill 留 px（约定，详见 docs/05 §6）。 */
--content-max: 72rem;
--navbar-h: 2.75rem; /* compact bar, matches Material dense / eax.org feel */
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-md: 0 4px 16px rgb(0 0 0 / 0.18);
--shadow-lg: 0 10px 25px rgb(0 0 0 / 0.15);
}
}
@layer base {
body {
margin: 0;
min-block-size: 100vh;
background: var(--bg);
color: var(--fg);
/* eax.org's font stack — Roboto on systems that have it, falls back through
Helvetica Neue / Arial; no external font load, no build step (docs/05 §6). */
font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
}
h1 { font-size: 1.75rem; font-weight: 500; margin-block-end: 1rem; letter-spacing: -0.01em; }
h2 { font-size: 1.375rem; font-weight: 500; margin-block: 1.5rem 0.75rem; }
p { margin-block-end: 1rem; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
}
@layer layout {
.content {
max-inline-size: var(--content-max);
margin-inline: auto;
padding-inline: 1rem;
padding-block: 2rem;
}
}
@layer components {
/* === Site header — sticky banner, always pinned to viewport top === */
.site-header {
position: sticky;
inset-block-start: 0;
z-index: 100;
background: var(--surface);
border-block-end: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
/* === Navbar — full-width edge-to-edge (mimics macOS menu bar / Kali Linux panel) ===
No max-inline-size / margin-inline: auto — items hug both viewport edges; the
.content container below stays max-w-bounded. Items provide their own inner padding. */
.navbar {
display: flex;
align-items: center;
gap: 0.25rem;
block-size: var(--navbar-h);
padding-inline: 0;
}
.navbar__logo {
font-weight: 700;
font-size: 1.125rem;
color: var(--fg);
padding-inline: 1rem;
}
.navbar__logo:hover { text-decoration: none; }
/* === Dropdown menus (Apps / Bookmarks / Language / User) === */
.menu { position: relative; }
.menu__trigger {
padding-inline: 0.75rem;
padding-block: 0.375rem;
color: var(--fg);
border-radius: var(--radius);
font-weight: 500;
}
.menu__trigger:hover { background: var(--surface-hover); }
/* === Command-palette trigger (visible Search affordance in the navbar) === */
/* First item of the inline-end cluster: carries margin-inline-start: auto, so it
and everything after it (theme / language / user) hugs the inline-end edge. */
.navbar__search {
margin-inline-start: auto;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3125rem 0.625rem;
color: var(--fg-muted);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.875rem;
line-height: 1;
}
.navbar__search:hover { background: var(--surface-hover); color: var(--fg); }
.navbar__search-kbd {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.6875rem;
padding: 0.1rem 0.3rem;
color: var(--fg-muted);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 0.25rem;
}
@media (max-width: 40rem) {
.navbar__search-text, .navbar__search-kbd { display: none; }
}
/* === Theme toggle (compact icon button, cycles auto → light → dark) === */
/* Flows after .navbar__search (which carries the margin-inline-start: auto). */
.theme-toggle {
inline-size: 2rem;
block-size: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fg);
border-radius: var(--radius);
font-size: 1rem;
line-height: 1;
}
.theme-toggle:hover { background: var(--surface-hover); }
.theme-toggle__icon { font-family: "Apple Color Emoji", "Segoe UI Symbol", "Noto Sans Symbols2", sans-serif; }
.menu__panel {
position: absolute;
inset-block-start: calc(100% + 0.25rem);
inset-inline-start: 0;
min-inline-size: 14rem;
padding-block: 0.375rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
z-index: 200;
/* overflow stays the default visible: cascade submenus are absolute-positioned
descendants and must escape the panel's box. Per the CSS Overflow spec,
setting overflow-y: auto forces overflow-x to auto too (clipping cascades).
Long menus are rare; if a level ever needs scrolling, add a wrapper element. */
}
/* Theme toggle (above) carries margin-inline-start: auto; Language and User flow after it
toward the inline-end edge — no extra margin needed on Language. */
/* Right-edge menus open toward the leading edge so they don't overflow the viewport. */
.menu[data-nav="language"] .menu__panel,
.menu[data-nav="user"] .menu__panel {
inset-inline-start: auto;
inset-inline-end: 0;
}
.menu__item {
display: block;
inline-size: 100%;
padding-inline: 1rem;
padding-block: 0.375rem;
color: var(--fg);
text-align: start;
border-radius: 0;
}
.menu__item:hover {
background: var(--surface-hover);
color: var(--fg);
text-decoration: none;
}
.menu__panel form { margin: 0; }
/* === Inline SVG icons (sprite in _Layout) ===
— stroke 跟随 currentColor，故随文字 / 主题色走；
1em 见方、随行高对齐。所有图标都是 stroke-only（无填充）。 */
.icon {
inline-size: 1em;
block-size: 1em;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -0.125em;
}
/* 下拉里的分隔线（如书签菜单「编辑书签」入口前）。 */
.menu__sep {
block-size: 0;
margin-block: 0.375rem;
border-block-start: 1px solid var(--border);
}
/* 管理类入口（书签菜单底部「编辑书签」）——淡色 + 前置图标，和上面的书签外链拉开层级。 */
.menu__item--manage {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--fg-muted);
font-size: 0.875rem;
}
.menu__item--manage:hover { color: var(--fg); }
/* === Cascading submenus (Apps tools, Bookmarks branches) ===
Each item with children gets .menu__item-wrap on its
for positioning;
the nested
flies out to the inline-end side. */
.menu__item-wrap { position: relative; }
/* Keep the parent item highlighted while the cursor is anywhere in its submenu
(the submenu is a DOM descendant of .menu__item-wrap, so :hover propagates). */
.menu__item-wrap:hover > .menu__item { background: var(--surface-hover); }
.menu__submenu {
inset-block-start: -0.375rem; /* align with parent
top, offsetting panel padding */
inset-inline-start: 100%; /* fly to trailing edge of parent */
}
/* Right-side menus (language/user) sit at viewport's trailing edge — any submenu
they might host must fly toward the leading edge to avoid overflow. */
.menu[data-nav="language"] .menu__submenu,
.menu[data-nav="user"] .menu__submenu {
inset-inline-start: auto;
inset-inline-end: 100%;
}
/* Item that opens a submenu — chevron rendered after the label on the trailing side. */
.menu__item--has-children {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.menu__item--has-children::after {
content: "▸";
color: var(--fg-muted);
font-size: 0.75rem;
line-height: 1;
}
[dir="rtl"] .menu__item--has-children::after { transform: scaleX(-1); }
/* === Home search launcher (Pages/_Content.cshtml) ===
Google-style：顶上当前引擎名作品牌