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  }
25  .panel-x { color: var(--ink-mute); font-size: var(--fs-s); display: flex; gap: var(--s2); align-items: center; }
26  .panel-x:hover { color: var(--ink-hi); }
27  .panel-foot {
28    display: flex; gap: var(--s4); flex: none; padding: var(--s2) var(--s4);
29    border-top: 1px solid var(--border); background: var(--bg-surface);
30    font-size: var(--fs-xs); color: var(--ink-mute);
31    & span { display: flex; gap: var(--s1); align-items: center; }
32  }
33  .modal > ul, .modal > .panel-cols, .modal > .keys { overflow-y: auto; padding: var(--s2); }
34
35  .panel-cols {
36    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s2);
37    & 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); }
38    & li a {
39      display: flex; align-items: center; gap: var(--s2); padding: 6px var(--s3); border-radius: var(--r-s);
40      font-family: var(--mono); font-size: var(--fs-s); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
41    }
42    & li a:hover, & li a:focus-visible { background: var(--bg-raised); color: var(--ink-hi); }
43    & li a[aria-current] { font-weight: 700; color: var(--ink-hi); box-shadow: inset 2px 0 0 var(--accent); }
44    & .mark { display: inline-block; width: 1ch; color: var(--teal); }
45  }
46
47  .cmd-list {
48    & li a {
49      display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-s);
50      text-decoration: none; color: var(--ink);
51    }
52    & li a:hover { background: var(--bg-raised); }
53    & li[data-cursor] a { background: var(--bg-strong); color: var(--ink-hi); box-shadow: inset 2px 0 0 var(--accent); }
54    & .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-s); }
55    & .k { flex: none; font-size: var(--fs-xs); color: var(--ink-mute); }
56    & .dir { color: var(--ink-dim); }
57    & strong { color: var(--ink-hi); font-weight: 700; }
58    & mark { background: none; color: var(--teal); font-weight: 700; text-decoration: underline; }
59  }
60
61  .keys {
62    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: var(--s5); row-gap: var(--s1);
63    padding: var(--s3) var(--s4) var(--s4) !important;
64    & > div { display: grid; grid-template-columns: 130px 1fr; gap: var(--s3); align-items: baseline; padding: var(--s1) 0; border-bottom: 1px solid var(--border); }
65    & dt { display: flex; flex-wrap: wrap; gap: var(--s1); min-width: 0; }
66    & dd { color: var(--ink-dim); font-size: var(--fs-s); min-width: 0; overflow-wrap: anywhere; }
67    @media (max-width: 480px) { & > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } }
68  }
69  /* the preference "single-key shortcuts" of the help dialog */
70  .keys-pref {
71    flex: none; padding: var(--s3) var(--s4) 0;
72    & label { display: flex; align-items: center; gap: var(--s2); cursor: pointer; }
73    & input[type=checkbox] { width: 16px; height: 16px; flex: none; accent-color: var(--teal); }
74    & p { font-size: var(--fs-s); margin-top: var(--s1); }
75  }
76}