ui: share view in the shell, icon rail, phone polish

- shared view uses the bar, porthole and status band; outline gets its own window on wide screens; j/k, gg/G, Ctrl-d/u scroll with a vim-style ruler - rail doors are line icons in groups with hover tooltips and keycaps - phone: number-only space pills, no nested rims, icon dock, toast messages, back button and one-line meta in the document header - keycaps (.kbd) wherever keys are shown, styled scrollbars in Chrome, outline tracks position on jumps, breakpoints unified at 767px
2026-11-07 09:42:10 +01:00 · 2026-10-17 17:27:59 +02:00
1 parent 9391b10af1
commit ecfbab0eaa
@@ -133,8 +133,14 @@ input::placeholder { color: var(--muted); }

 ::selection { background: var(--light); color: var(--ink); }

-/* thin, unobtrusive scrollbars everywhere */
-* { scrollbar-width: thin; scrollbar-color: var(--overlay) transparent; }
+/*
+ * Thin, unobtrusive scrollbars everywhere. Chrome drops its ::-webkit-scrollbar
+ * styling (and falls back to arrows) as soon as the standard properties are
+ * set, so those are only for the browsers that have nothing else.
+ */
+@supports not selector(::-webkit-scrollbar) {
+  * { scrollbar-width: thin; scrollbar-color: var(--overlay) transparent; }
+}
 *::-webkit-scrollbar { width: 8px; height: 8px; }
 *::-webkit-scrollbar-thumb { background: var(--overlay); border-radius: 4px; }
 *::-webkit-scrollbar-track { background: transparent; }
@@ -186,9 +192,228 @@ input::placeholder { color: var(--muted); }
  color: var(--light);
 }

+/*
+ * A key, as a keycap: inside a `.label` everything is upper case, and `o` and
+ * `O` are different keys, so a key is never set in a label's case.
+ */
+.kbd {
+  display: inline-grid;
+  place-items: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border: 1px solid var(--rim);
+  border-radius: 4px;
+  background: var(--surface-alt);
+  color: var(--light);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+  text-transform: none;
+  white-space: nowrap;
+}
+
 /* The blinking block after "standing by". */
 .cursor { margin-left: 2px; animation: blink 1.1s steps(1) infinite; }

+/* ── frame ───────────────────────────────────────────────────────────────── */
+/*
+ * The shell every page sits in, the app and the shared view alike: a hull with
+ * a bar on top, a band at the bottom, and a rounded porthole between them that
+ * the windows are seen through.
+ */
+.shell {
+  position: relative;
+  height: 100%;
+  outline: none;
+  background: var(--hull);
+}
+
+/* The rim is drawn on top by ::after, so the windows scroll underneath it the
+   way they sit under the frame on the desktop. */
+.porthole {
+  position: absolute;
+  top: var(--bar-h);
+  right: var(--rail-w);
+  bottom: var(--status-h);
+  left: var(--frame);
+  overflow: hidden;
+  border-radius: var(--frame-radius);
+  background:
+    radial-gradient(120% 70% at 30% 0%, #141713 0%, transparent 60%),
+    var(--base);
+}
+.porthole::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--rim);
+  pointer-events: none;
+  z-index: 5;
+}
+
+/* Windows tile the porthole like a workspace: a gap round and between them. */
+.panes {
+  --gap: 7px;
+  height: 100%;
+  display: grid;
+  grid-template-columns: minmax(32ch, 24vw) 1fr;
+  gap: var(--gap);
+  padding: var(--gap);
+}
+
+/*
+ * A window: opaque, a hairline border in overlay. The focused one gets the
+ * desktop's active border — a light gradient at 135° — and its shadow.
+ */
+.window {
+  --pane-bg: color-mix(in oklab, var(--surface) 40%, var(--base));
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: calc(var(--frame-radius) - var(--gap));
+  background:
+    linear-gradient(var(--pane-bg), var(--pane-bg)) padding-box,
+    linear-gradient(var(--overlay), var(--overlay)) border-box;
+  transition: box-shadow var(--t-base) var(--ease-glide);
+}
+.window.focused {
+  background:
+    linear-gradient(var(--pane-bg), var(--pane-bg)) padding-box,
+    linear-gradient(135deg, var(--light), var(--light-dim)) border-box;
+  box-shadow: 0 6px 24px rgb(0 0 0 / 0.45);
+}
+
+/* hypr: workspaces, slidefadevert 18%, 550ms on the drift curve. */
+.switch { animation: slidefadevert 550ms var(--ease-drift) both; }
+@keyframes slidefadevert {
+  from { opacity: 0; transform: translateY(calc(var(--dir, 1) * 18%)); }
+}
+
+/* On a phone one window fills the porthole, so its rim is the window's edge. */
+@media (max-width: 767px) {
+  .panes { --gap: 0px; }
+  .window,
+  .window.focused {
+    border: 0;
+    border-radius: 0;
+    background: var(--pane-bg);
+    box-shadow: none;
+  }
+}
+
+/* The bar along the top: mark, workspace pills, the clock. */
+.bar {
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: var(--bar-h);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 calc(var(--rail-w) + 4px) 0 calc(var(--frame) + 10px);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--subtle);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/* A ring with a dot in it: the favicon, and the desktop's launcher. */
+.bar .mark {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  flex: none;
+  border: 1.5px solid var(--light);
+  border-radius: 999px;
+}
+.bar .mark::after {
+  content: '';
+  position: absolute;
+  inset: 2px;
+  border-radius: 999px;
+  background: var(--light);
+}
+
+.bar .divider {
+  width: 1px;
+  height: 14px;
+  flex: none;
+  background: var(--overlay);
+}
+
+/* Workspace pills: muted at rest, light on hover, inverted when current. The
+   current one widens, as the desktop's does, over the slow duration. */
+.bar .pill {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 22px;
+  height: 20px;
+  padding: 0 6px;
+  justify-content: center;
+  transition:
+    padding var(--t-slow) var(--ease-snap),
+    background-color var(--t-base) var(--ease-glide),
+    color var(--t-base) var(--ease-glide);
+  border: 0;
+  border-radius: 4px;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: none;
+  color: var(--muted);
+  background: transparent;
+}
+.bar .pill:hover { background: transparent; color: var(--light); }
+.bar .pill[aria-current='true'] { background: var(--light); color: var(--ink); padding: 0 12px; }
+.bar .pill:focus-visible { background: var(--light); color: var(--ink); }
+
+.bar .spacer { flex: 1; }
+.bar .readout { display: flex; gap: 8px; font-variant-numeric: tabular-nums; }
+.bar .readout .key { color: var(--muted); }
+.bar .readout .value { color: var(--fg); text-transform: none; letter-spacing: 0.06em; }
+
+@media (max-width: 767px) {
+  .bar { padding-left: 12px; padding-right: 12px; gap: 10px; }
+}
+
+/* The band along the bottom: the mode, the file, what just happened. */
+.status {
+  position: absolute;
+  inset: auto 0 0 0;
+  height: var(--status-h);
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 0 calc(var(--rail-w) + 4px) 0 calc(var(--frame) + 4px);
+  font-size: 11px;
+  color: var(--subtle);
+  white-space: nowrap;
+  overflow: hidden;
+}
+.status .mode {
+  display: flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 8px;
+  border-radius: 4px;
+  flex: none;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  background: var(--surface-alt);
+  color: var(--fg);
+  transition: background-color var(--t-base) var(--ease-glide), color var(--t-base) var(--ease-glide);
+}
+.status .readout { color: var(--fg); font-variant-numeric: tabular-nums; }
+.status .unit { color: var(--muted); margin-left: 1px; }
+.status .hint { color: var(--muted); letter-spacing: 0.06em; }
+
 /* ── motion ──────────────────────────────────────────────────────────────── */
@keyframes resolve {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }