25-panel.css RawHistoryFolder

1@layer components {
2  /* dialogs: the "go to" palette, the ref switcher and the keys, centred over a backdrop */
3  .modal {
4    position: fixed; inset: 0; margin: 12vh auto auto; z-index: 40;
5    width: min(640px, calc(100vw - 2 * var(--s4))); max-height: min(70dvh, 560px);
6    display: none; flex-direction: column;
7    background: var(--bg-overlay); color: var(--ink);
8    border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--shadow);
9    overflow: hidden; overscroll-behavior: contain;
10    &[open] { display: flex; }
11    &::backdrop { background: var(--backdrop); }
12    &#panel-help { width: min(820px, calc(100vw - 2 * var(--s4))); }
13  }
14  @media (prefers-reduced-motion: no-preference) {
15    .modal[open] { animation: modal-in 120ms ease-out; }
16    @keyframes modal-in { from { opacity: 0; transform: translateY(-6px) scale(.99); } }
17  }
18  .panel-head {
19    display: flex; align-items: center; gap: var(--s3); flex: none;
20    padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border);
21    & h2 { font-size: var(--fs); flex: 1; }
22    & input { flex: 1; min-width: 0; height: 32px; font-size: 16px; }
23    & input::placeholder { color: var(--ink-mute); opacity: 1; }
24    & input:focus-visible { outline: none; }
25  }
26  .panel-x { color: var(--ink-mute); font-size: var(--fs-s); display: flex; gap: var(--s2); align-items: center; }
27  .panel-x:hover { color: var(--ink-hi); }
28  .panel-foot {
29    display: flex; gap: var(--s4); flex: none; padding: var(--s2) var(--s4);
30    border-top: 1px solid var(--border); background: var(--bg-surface);
31    font-size: var(--fs-xs); color: var(--ink-mute);
32    & span { display: flex; gap: var(--s1); align-items: center; }
33  }
34  .modal > ul, .modal > .panel-cols, .modal > .keys { overflow-y: auto; padding: var(--s2); }
35
36  .panel-cols {
37    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s2);
38    & h2 { font: 600 var(--fs-xs) / 1 var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); padding: var(--s3) var(--s3) var(--s2); }
39    & li a {
40      display: flex; align-items: center; gap: var(--s2); padding: 6px var(--s3); border-radius: var(--r-s);
41      font-family: var(--mono); font-size: var(--fs-s); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
42    }
43    & li a:hover, & li a:focus-visible { background: var(--bg-raised); color: var(--ink-hi); }
44    & li a[aria-current] { font-weight: 700; color: var(--ink-hi); }
45    & .mark { display: inline-block; width: 1ch; color: var(--teal); }
46  }
47
48  .cmd-list {
49    & li a {
50      display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-s);
51      text-decoration: none; color: var(--ink);
52    }
53    & li a:hover { background: var(--bg-raised); }
54    & li[data-cursor] a { background: var(--bg-strong); color: var(--ink-hi); }
55    & .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-s); }
56    & .k { flex: none; font-size: var(--fs-xs); color: var(--ink-mute); }
57    & .dir { color: var(--ink-dim); }
58    & strong { color: var(--ink-hi); font-weight: 700; }
59    & mark { background: none; color: var(--teal); font-weight: 700; text-decoration: underline; }
60  }
61
62  .keys {
63    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: var(--s5); row-gap: var(--s1);
64    padding: var(--s3) var(--s4) var(--s4) !important;
65    & > div { display: grid; grid-template-columns: 130px 1fr; gap: var(--s3); align-items: baseline; padding: var(--s1) 0; border-bottom: 1px solid var(--border); }
66    & dt { white-space: nowrap; display: flex; gap: var(--s1); }
67    & dd { color: var(--ink-dim); font-size: var(--fs-s); }
68  }
69}