catalog.css (7827B)
1 /* DÆMONBins catalog — the faceted-filter island. Uses the shared design 2 tokens; square corners, hairline rules, accent-fill active states, commands 3 on a dark plate in both themes. */ 4 5 .cat { 6 display: grid; 7 grid-template-columns: var(--rail, 250px) 1fr; 8 gap: 0; 9 border-top: 1px solid var(--rule); 10 margin-top: 2.5rem; 11 } 12 @media (max-width: 900px) { 13 .cat { grid-template-columns: 1fr; } 14 } 15 16 /* ---- rail ---------------------------------------------------------------- */ 17 .cat__rail { 18 border-right: 1px solid var(--rule); 19 padding: 1.5rem 1.4rem 3rem; 20 position: sticky; 21 top: 4.5rem; 22 align-self: start; 23 max-height: calc(100vh - 4.5rem); 24 overflow-y: auto; 25 } 26 @media (max-width: 900px) { 27 .cat__rail { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--rule); } 28 } 29 .cat__searchrow { position: relative; margin-bottom: 1rem; } 30 .cat__search { 31 width: 100%; 32 font-family: var(--font-mono); 33 font-size: 13px; 34 padding: 0.6rem 0.7rem; 35 background: var(--surface); 36 color: var(--fg); 37 border: 1px solid var(--rule-hi, var(--rule)); 38 border-radius: 0; 39 } 40 .cat__search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } 41 .cat__toolbar { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; } 42 .cat__btn { 43 font-family: var(--font-mono); 44 font-size: 10.5px; 45 letter-spacing: 0.14em; 46 text-transform: uppercase; 47 padding: 0.45rem 0.7rem; 48 background: transparent; 49 color: var(--fg-dim); 50 border: 1px solid var(--rule); 51 cursor: pointer; 52 } 53 .cat__btn:hover { color: var(--fg); border-color: var(--fg-dim); } 54 .cat__btn[aria-pressed='true'] { background: var(--love); color: var(--base); border-color: var(--love); } 55 56 .cat-facet { margin-bottom: 1.5rem; } 57 .cat-facet__head { margin: 0 0 0.6rem; } 58 .cat-facet__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; } 59 .cat-chip { 60 display: inline-flex; 61 align-items: center; 62 gap: 0.4rem; 63 font-family: var(--font-mono); 64 font-size: 11px; 65 letter-spacing: 0.02em; 66 padding: 0.28rem 0.5rem; 67 background: transparent; 68 color: var(--fg-dim); 69 border: 1px solid var(--rule); 70 cursor: pointer; 71 transition: color 120ms, border-color 120ms, background 120ms; 72 } 73 .cat-chip:hover { color: var(--fg); border-color: var(--acc); } 74 .cat-chip__n { font-size: 9.5px; color: var(--fg-faint); } 75 .cat-chip[aria-checked='true'] { background: var(--acc); color: var(--base); border-color: var(--acc); } 76 .cat-chip[aria-checked='true'] .cat-chip__n { color: var(--base); opacity: 0.8; } 77 78 /* ---- main --------------------------------------------------------------- */ 79 .cat__main { padding: 1.5rem 1.6rem 4rem; min-width: 0; } 80 .cat__meta { 81 font-family: var(--font-mono); 82 font-size: 12px; 83 letter-spacing: 0.04em; 84 color: var(--fg-dim); 85 padding-bottom: 1rem; 86 margin-bottom: 1rem; 87 border-bottom: 1px solid var(--rule); 88 } 89 .cat__meta strong { color: var(--fg); font-weight: 600; } 90 .cat__results { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } 91 92 /* ---- row ---------------------------------------------------------------- */ 93 .trow { background: var(--bg); } 94 .trow__head { 95 display: grid; 96 grid-template-columns: 18px minmax(0, 1fr) auto; 97 align-items: center; 98 gap: 0.7rem; 99 width: 100%; 100 text-align: left; 101 padding: 0.7rem 0.9rem; 102 background: transparent; 103 border: 0; 104 cursor: pointer; 105 color: var(--fg); 106 } 107 .trow__head:hover { background: var(--wash); } 108 .trow__chev { color: var(--fg-faint); transition: transform 160ms var(--ease); font-size: 15px; } 109 .trow--open .trow__chev { transform: rotate(90deg); } 110 .trow__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; min-width: 0; } 111 .trow__tool { font-family: var(--font-archivo); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--fg); text-decoration: none; } 112 .trow__tool:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } 113 .trow__sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); } 114 .trow__badges { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; } 115 116 .tbadge { 117 font-family: var(--font-mono); 118 font-size: 9.5px; 119 letter-spacing: 0.08em; 120 text-transform: uppercase; 121 padding: 0.12rem 0.4rem; 122 color: var(--acc); 123 border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); 124 white-space: nowrap; 125 } 126 .tbadge--soft { color: var(--fg-faint); border-color: var(--rule); } 127 .tbadge--src { background: var(--acc); color: var(--base); border-color: var(--acc); } 128 .tbadge--new { background: var(--love); color: var(--base); border-color: var(--love); font-weight: 600; } 129 130 /* command bar — dark plate in both themes */ 131 .trow__cmdbar { position: relative; display: flex; align-items: stretch; gap: 0; margin: 0 0.9rem 0.7rem; } 132 .trow__cmd { 133 flex: 1; 134 min-width: 0; 135 margin: 0; 136 padding: 0.6rem 0.8rem; 137 background: var(--color-night-base, #191724); 138 border: 1px solid color-mix(in srgb, #000 20%, var(--color-night-base, #191724)); 139 overflow-x: auto; 140 font-family: var(--font-mono); 141 font-size: 12.5px; 142 line-height: 1.6; 143 } 144 .trow__cmd code { white-space: pre; color: var(--color-night-text, #e0def4); } 145 .trow__copy { 146 flex-shrink: 0; 147 font-family: var(--font-mono); 148 font-size: 10px; 149 letter-spacing: 0.12em; 150 text-transform: uppercase; 151 padding: 0 0.8rem; 152 background: var(--color-night-surface, #1f1d2e); 153 color: var(--color-night-subtle, #908caa); 154 border: 1px solid color-mix(in srgb, #000 20%, var(--color-night-base, #191724)); 155 border-left: 0; 156 cursor: pointer; 157 } 158 .trow__copy:hover { color: var(--color-night-foam, #9ccfd8); } 159 .trow__copy.is-copied { color: var(--color-night-foam, #9ccfd8); } 160 161 /* detail */ 162 .trow__detail { padding: 0 0.9rem 1rem 1.9rem; } 163 .tdetail__desc { margin: 0 0 0.8rem; font-size: 14px; line-height: 1.6; color: var(--fg-dim); max-width: 72ch; white-space: pre-wrap; } 164 .tdetail__note { margin: 0 0 0.8rem; font-family: var(--font-mono); font-size: 11.5px; color: var(--foam); } 165 .tdetail__grid { display: grid; gap: 0.4rem 1.5rem; } 166 .tdetail__row { display: grid; grid-template-columns: 84px 1fr; gap: 0.8rem; font-size: 12.5px; line-height: 1.55; } 167 .tdetail__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); padding-top: 0.1rem; } 168 .tdetail__v { color: var(--fg-dim); word-break: break-word; } 169 .tdetail__v--mono { font-family: var(--font-mono); font-size: 11.5px; } 170 .tdetail__v a { color: var(--accent); text-decoration: none; } 171 .tdetail__v a:hover { text-decoration: underline; text-underline-offset: 2px; } 172 .tchip-link { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--rule); padding: 0.05rem 0.35rem; margin-right: 0.2rem; } 173 174 .cat__morerow { margin-top: 1.25rem; display: flex; justify-content: center; } 175 .cat__more { 176 font-family: var(--font-mono); 177 font-size: 11px; 178 letter-spacing: 0.12em; 179 text-transform: uppercase; 180 padding: 0.6rem 1.4rem; 181 background: transparent; 182 color: var(--fg-dim); 183 border: 1px solid var(--rule); 184 cursor: pointer; 185 } 186 .cat__more:hover { color: var(--fg); border-color: var(--accent); } 187 .cat-empty { padding: 3rem 1rem; text-align: center; color: var(--fg-dim); } 188 .cat-empty p { margin: 0.4rem 0; } 189 190 /* command syntax tokens (dark plate palette) */ 191 .tk-base { color: var(--color-night-text, #e0def4); } 192 .tk-muted { color: var(--color-night-muted, #8b87a3); font-style: italic; } 193 .tk-op { color: var(--color-night-subtle, #908caa); } 194 .tk-cmd { color: var(--color-night-foam, #9ccfd8); } 195 .tk-flag { color: var(--color-night-gold, #f6c177); } 196 .tk-str { color: var(--color-night-rose, #ebbcba); } 197 .tk-num { color: var(--color-night-iris, #c4a7e7); } 198 .tk-warn { color: var(--color-night-love, #eb6f92); } 199 .tk-kw { color: var(--color-night-pine, #3e8fb0); }