返回 DeepSeek-Reasonix
changelog.css
根目录 / site / src / styles / changelog.css
1 /* Palette unified with the global.css base tokens; --release-paper keeps the
2 ledger identity. Dark flips for base tokens live in global.css. */
3 :root {
4 --release-backdrop: var(--bg-soft);
5 --release-paper: #fbfaf7;
6 --release-ink: var(--ink);
7 --release-blue: var(--accent);
8 --release-blue-soft: var(--accent-soft);
9 --release-orange: #d97732;
10 --release-green: #178b67;
11 }
12
13 :root[data-theme="dark"] {
14 --release-paper: var(--card);
15 --release-orange: oklch(0.76 0.13 60);
16 --release-green: oklch(0.76 0.13 160);
17 }
18
19 body {
20 background:
21 linear-gradient(90deg, transparent 0 49.94%, color-mix(in oklch, var(--accent) 2.5%, transparent) 50%, transparent 50.06%),
22 var(--release-backdrop);
23 }
24
25 .release-stage {
26 min-height: 100vh;
27 padding: 108px 34px 80px;
28 }
29
30 .release-grid {
31 width: min(1440px, 100%);
32 margin: 0 auto;
33 display: grid;
34 grid-template-columns: 220px minmax(0, 920px) 190px;
35 gap: 30px;
36 align-items: start;
37 justify-content: center;
38 }
39
40 .release-rail,
41 .release-toc {
42 position: sticky;
43 top: 96px;
44 max-height: calc(100vh - 120px);
45 overflow-y: auto;
46 scrollbar-width: thin;
47 }
48
49 .release-rail__eyebrow {
50 display: flex;
51 align-items: center;
52 gap: 9px;
53 margin: 4px 0 18px 10px;
54 color: var(--ink-2);
55 font-size: 12px;
56 font-weight: 700;
57 letter-spacing: .08em;
58 text-transform: uppercase;
59 }
60
61 .release-rail__mark {
62 width: 10px;
63 height: 10px;
64 border: 2px solid var(--release-blue);
65 border-radius: 3px 3px 3px 0;
66 transform: rotate(-12deg);
67 }
68
69 .release-rail nav { display: grid; gap: 18px; }
70 .release-rail__group { display: grid; gap: 7px; }
71 .release-rail__minor {
72 margin: 0 0 2px 10px;
73 color: var(--ink-3);
74 font-family: var(--font-mono);
75 font-size: 10.5px;
76 font-weight: 700;
77 letter-spacing: .08em;
78 text-transform: uppercase;
79 }
80 .release-rail__more summary {
81 margin: 2px 10px 6px;
82 color: var(--ink-3);
83 font-size: 11.5px;
84 font-weight: 600;
85 cursor: pointer;
86 list-style: none;
87 }
88 .release-rail__more summary::-webkit-details-marker { display: none; }
89 .release-rail__more summary:hover { color: var(--release-blue); }
90 .release-rail__more .when-open { display: none; }
91 .release-rail__more[open] .when-open { display: inline; }
92 .release-rail__more[open] .when-closed { display: none; }
93
94 .release-version-link {
95 display: grid;
96 gap: 4px;
97 padding: 12px 13px;
98 border: 1px solid transparent;
99 border-radius: 11px;
100 color: var(--ink-2);
101 text-decoration: none;
102 transition: background .18s, border-color .18s, transform .18s;
103 }
104
105 .release-version-link:hover {
106 transform: translateX(2px);
107 border-color: var(--line);
108 background: color-mix(in oklch, var(--card) 68%, transparent);
109 }
110
111 .release-version-link.active {
112 border-color: color-mix(in srgb, var(--release-blue) 22%, transparent);
113 background: var(--card);
114 color: var(--release-blue);
115 box-shadow: 0 8px 24px rgba(35, 55, 92, .08);
116 }
117
118 .release-version-link__line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
119 .release-version-link strong { font-family: var(--font-mono); font-size: 13px; }
120 .release-version-link small { color: var(--ink-3); font-size: 11px; }
121 .release-version-link em {
122 padding: 2px 6px;
123 border-radius: 999px;
124 background: var(--release-blue-soft);
125 color: var(--release-blue);
126 font-size: 9px;
127 font-style: normal;
128 font-weight: 700;
129 letter-spacing: .04em;
130 text-transform: uppercase;
131 }
132
133 .release-rail__all {
134 display: inline-block;
135 margin: 18px 10px;
136 color: var(--ink-3);
137 font-size: 12px;
138 font-weight: 600;
139 text-decoration: none;
140 }
141 .release-rail__all:hover { color: var(--release-blue); }
142
143 .release-paper {
144 min-width: 0;
145 overflow: hidden;
146 border: 1px solid var(--line);
147 border-radius: 20px;
148 background:
149 linear-gradient(color-mix(in oklch, var(--accent) 3.5%, transparent) 1px, transparent 1px) 0 0 / 100% 34px,
150 var(--release-paper);
151 box-shadow: 0 28px 80px -42px rgba(24, 35, 60, .38);
152 }
153
154 .release-hero {
155 position: relative;
156 padding: 48px 62px 44px;
157 background:
158 radial-gradient(circle at 90% 5%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 28%),
159 linear-gradient(180deg, color-mix(in oklch, var(--card) 88%, transparent), color-mix(in oklch, var(--release-paper) 92%, transparent));
160 }
161
162 .release-hero::after {
163 content: "";
164 position: absolute;
165 left: 62px;
166 right: 62px;
167 bottom: 0;
168 height: 1px;
169 background: linear-gradient(90deg, var(--release-blue), var(--line) 36%, transparent);
170 }
171
172 .release-hero__meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
173 .release-hero__meta time { font-family: var(--font-mono); color: var(--ink-3); font-size: 12px; }
174 .release-channel {
175 display: inline-flex;
176 align-items: center;
177 gap: 7px;
178 color: var(--release-green);
179 font-size: 11px;
180 font-weight: 700;
181 letter-spacing: .08em;
182 text-transform: uppercase;
183 }
184 .release-channel__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent); }
185 .release-hero h1 {
186 max-width: 15em;
187 margin: 28px 0 0;
188 color: var(--release-ink);
189 font-size: clamp(32px, 4vw, 46px);
190 font-weight: 600;
191 letter-spacing: -.032em;
192 line-height: 1.08;
193 text-wrap: balance;
194 }
195
196 .release-surfaces { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
197 .release-surfaces > span {
198 padding: 5px 9px;
199 border: 1px solid color-mix(in srgb, var(--release-blue) 18%, var(--line));
200 border-radius: 999px;
201 background: color-mix(in oklch, var(--card) 72%, transparent);
202 color: var(--ink-2);
203 font-size: 11px;
204 font-weight: 600;
205 }
206
207 .release-target-summary {
208 display: flex;
209 flex-wrap: wrap;
210 gap: 8px;
211 margin-top: 14px;
212 }
213 .release-target-summary > span {
214 padding: 6px 10px;
215 border: 1px solid var(--line);
216 border-radius: 9px;
217 background: color-mix(in oklch, var(--card) 64%, transparent);
218 color: var(--ink-2);
219 font-family: var(--font-mono);
220 font-size: 11px;
221 }
222 .release-target-summary strong { color: var(--release-ink); }
223 .release-target-summary + .release-lede { margin-top: 20px; }
224
225 .release-lede { margin: 28px 0 0; max-width: 720px; color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
226
227 .release-section { padding: 52px 62px 0; scroll-margin-top: 100px; }
228 .release-section__head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
229 .release-section__head > span {
230 display: grid;
231 place-items: center;
232 width: 30px;
233 height: 30px;
234 border: 1px solid color-mix(in srgb, var(--release-blue) 24%, var(--line));
235 border-radius: 8px;
236 color: var(--release-blue);
237 font-family: var(--font-mono);
238 font-size: 11px;
239 font-weight: 700;
240 }
241 .release-section h2 { color: var(--release-ink); font-size: 27px; font-weight: 650; letter-spacing: -.02em; }
242 .release-section h3 { color: var(--release-ink); font-size: 17px; font-weight: 650; line-height: 1.35; }
243 .release-section p { color: var(--ink-2); font-size: 15px; line-height: 1.68; }
244
245 .release-target-section__summary { margin: -10px 0 24px; max-width: 700px; }
246 .release-target-group + .release-target-group { margin-top: 30px; }
247 .release-target-group__title {
248 margin-bottom: 13px;
249 color: var(--ink-3) !important;
250 font-size: 11px !important;
251 font-weight: 800 !important;
252 letter-spacing: .08em;
253 text-transform: uppercase;
254 }
255 .release-target-empty {
256 padding: 22px 24px;
257 border: 1px dashed color-mix(in srgb, var(--release-blue) 26%, var(--line));
258 border-radius: 13px;
259 background: color-mix(in oklch, var(--card) 56%, transparent);
260 }
261 .release-target-empty strong { color: var(--release-ink); font-size: 15px; }
262 .release-target-empty p { margin-top: 6px; font-size: 13.5px; }
263 .release-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
264 .release-item-targets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
265 .release-item-meta .release-item-targets { justify-content: flex-end; margin-bottom: 7px; }
266 .release-item-targets > span {
267 padding: 3px 7px;
268 border: 1px solid color-mix(in srgb, var(--release-blue) 18%, var(--line));
269 border-radius: 999px;
270 background: color-mix(in srgb, var(--release-blue-soft) 52%, transparent);
271 color: var(--release-blue);
272 font-family: var(--font-mono);
273 font-size: 9.5px;
274 font-weight: 700;
275 }
276
277 .release-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
278 .release-guide {
279 position: relative;
280 display: grid;
281 align-content: start;
282 min-height: 168px;
283 padding: 22px;
284 border: 1px solid var(--line);
285 border-radius: 14px;
286 background: color-mix(in oklch, var(--card) 72%, transparent);
287 color: inherit;
288 text-decoration: none;
289 transition: transform .2s, border-color .2s, box-shadow .2s;
290 }
291 .release-guide:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--release-blue) 35%, var(--line)); box-shadow: 0 18px 35px -24px rgba(35, 65, 120, .4); }
292 .release-guide__arrow { position: absolute; top: 18px; right: 18px; color: var(--release-blue); font-size: 18px; }
293 .release-guide h3 { padding-right: 24px; }
294 .release-guide p { margin-top: 12px; font-size: 13.5px; }
295
296 .release-highlight-list { display: grid; gap: 12px; }
297 .release-highlight {
298 display: grid;
299 grid-template-columns: 46px minmax(0, 1fr);
300 gap: 18px;
301 padding: 24px;
302 border: 1px solid var(--line);
303 border-radius: 14px;
304 background: color-mix(in oklch, var(--card) 68%, transparent);
305 }
306 .release-highlight__index { color: color-mix(in srgb, var(--release-blue) 48%, var(--ink-3)); font-family: var(--font-mono); font-size: 12px; padding-top: 4px; }
307 .release-highlight__kind { margin-bottom: 7px; color: var(--release-blue); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
308 .release-highlight[data-kind="security"] .release-highlight__kind { color: var(--release-orange); }
309 .release-highlight[data-kind="fixed"] .release-highlight__kind { color: var(--release-green); }
310 .release-highlight p { margin-top: 8px; }
311 .release-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
312 .release-refs a {
313 padding: 3px 7px;
314 border-radius: 6px;
315 background: var(--release-blue-soft);
316 color: var(--release-blue);
317 font-family: var(--font-mono);
318 font-size: 10px;
319 font-weight: 600;
320 text-decoration: none;
321 }
322
323 .release-change-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
324 .release-change-list article {
325 padding: 20px 22px;
326 border-top: 2px solid color-mix(in srgb, var(--release-blue) 42%, var(--line));
327 background: color-mix(in oklch, var(--card) 46%, transparent);
328 }
329 .release-change-list p { margin-top: 8px; font-size: 14px; }
330
331 .release-notice-list { display: grid; gap: 10px; }
332 .release-notice {
333 display: grid;
334 grid-template-columns: 30px minmax(0, 1fr);
335 gap: 14px;
336 padding: 18px 20px;
337 border: 1px solid color-mix(in srgb, var(--release-blue) 22%, var(--line));
338 border-radius: 12px;
339 background: color-mix(in srgb, var(--release-blue-soft) 56%, var(--card));
340 }
341 .release-notice--warning { border-color: color-mix(in srgb, var(--release-orange) 32%, var(--line)); background: color-mix(in srgb, var(--release-orange) 12%, var(--card)); }
342 .release-notice__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--release-blue); color: white; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
343 .release-notice--warning .release-notice__icon { background: var(--release-orange); }
344 .release-notice p { margin-top: 6px; font-size: 14px; }
345
346 .release-thanks > p { margin-bottom: 14px; }
347 .release-thanks > div { display: flex; flex-wrap: wrap; gap: 8px; }
348 .release-thanks a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in oklch, var(--card) 70%, transparent); color: var(--ink-2); font-family: var(--font-mono); font-size: 11px; text-decoration: none; }
349 .release-thanks a:hover { color: var(--release-blue); border-color: color-mix(in srgb, var(--release-blue) 34%, var(--line)); }
350
351 .release-download {
352 margin: 56px 62px 62px;
353 padding: 30px 32px;
354 display: flex;
355 align-items: center;
356 justify-content: space-between;
357 gap: 26px;
358 border-radius: 16px;
359 background: #20242d;
360 }
361 .release-download h2 { max-width: 480px; color: #fff; font-size: 28px; }
362 .release-download__kicker { margin-bottom: 7px; color: #91b8ff !important; font-size: 11px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
363 .release-download__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
364 .release-compare { color: #c9d4e9; font-size: 13px; font-weight: 600; text-decoration: none; }
365 .release-compare:hover { color: #fff; }
366
367 .release-toc { padding: 6px 0 20px; }
368 .release-toc > p { margin: 0 0 16px 12px; color: var(--release-ink); font-size: 13px; font-weight: 700; }
369 .release-toc nav { display: grid; border-left: 1px solid var(--line); }
370 .release-toc a {
371 position: relative;
372 padding: 7px 0 7px 13px;
373 color: var(--ink-3);
374 font-size: 12px;
375 font-weight: 550;
376 text-decoration: none;
377 transition: color .16s;
378 }
379 .release-toc a::before { content: ""; position: absolute; left: -1px; top: 5px; bottom: 5px; width: 2px; border-radius: 4px; background: transparent; }
380 .release-toc a:hover { color: var(--release-ink); }
381 .release-toc a.active { color: var(--release-blue); }
382 .release-toc a.active::before { background: var(--release-blue); }
383
384 .release-mobile-switcher { display: none; }
385 .release-footer {
386 width: min(1180px, calc(100% - 64px));
387 margin: 0 auto;
388 padding: 28px 0 38px;
389 display: flex;
390 align-items: center;
391 gap: 20px;
392 border-top: 1px solid var(--line);
393 color: var(--ink-3);
394 font-size: 12px;
395 }
396 .release-footer > span { margin-left: auto; color: var(--ink-3); }
397 .release-footer > a:last-child { color: var(--ink-2); text-decoration: none; }
398
399 @media (max-width: 1180px) {
400 .release-grid { grid-template-columns: 200px minmax(0, 850px); }
401 .release-toc { display: none; }
402 }
403
404 @media (max-width: 840px) {
405 .release-stage { padding: 92px 16px 48px; }
406 .release-grid { display: block; }
407 .release-rail { display: none; }
408 .release-mobile-switcher {
409 width: min(720px, 100%);
410 margin: 0 auto 12px;
411 display: flex;
412 align-items: center;
413 justify-content: space-between;
414 gap: 14px;
415 padding: 10px 12px;
416 border: 1px solid var(--line);
417 border-radius: 12px;
418 background: var(--card);
419 color: var(--ink-2);
420 font-size: 12px;
421 font-weight: 700;
422 }
423 .release-mobile-switcher select { min-width: 130px; padding: 7px 28px 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); color: var(--ink); font: inherit; }
424 .release-paper { width: min(720px, 100%); margin: 0 auto; border-radius: 15px; }
425 .release-hero { padding: 38px 28px 34px; }
426 .release-hero::after { left: 28px; right: 28px; }
427 .release-section { padding: 40px 28px 0; }
428 .release-guide-grid, .release-change-list { grid-template-columns: 1fr; }
429 .release-download { margin: 44px 28px 28px; padding: 26px; flex-direction: column; align-items: flex-start; }
430 }
431
432 @media (max-width: 560px) {
433 .release-hero h1 { font-size: 34px; }
434 .release-highlight { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
435 .release-highlight__index { display: none; }
436 .release-item-meta { align-items: flex-start; flex-direction: column; gap: 0; }
437 .release-item-meta .release-item-targets { justify-content: flex-start; }
438 .release-section h2 { font-size: 23px; }
439 .release-download__actions { align-items: flex-start; flex-direction: column; }
440 .release-footer { width: calc(100% - 32px); flex-wrap: wrap; }
441 .release-footer > span { order: 3; width: 100%; margin: 0; }
442 }
443
444 .release-channel-tabs {
445 display: grid;
446 grid-template-columns: 1fr 1fr;
447 gap: 6px;
448 margin: 14px 0 18px;
449 }
450
451 .release-channel-tabs a {
452 border: 1px solid var(--line);
453 border-radius: 999px;
454 color: var(--ink-2);
455 padding: 7px 10px;
456 text-align: center;
457 text-decoration: none;
458 transition: background 0.2s, border-color 0.2s, color 0.2s;
459 }
460
461 .release-channel-tabs a:hover {
462 border-color: color-mix(in oklch, var(--accent) 40%, var(--line));
463 color: var(--accent-deep);
464 }
465
466 .release-channel-tabs a.active {
467 background: var(--accent-soft);
468 border-color: color-mix(in oklch, var(--accent) 46%, var(--line));
469 color: var(--accent-deep);
470 }
471
472 .release-channel-tabs a:focus-visible {
473 outline: 2px solid var(--accent);
474 outline-offset: 2px;
475 }
476
477 .release-builds {
478 display: flex;
479 flex-wrap: wrap;
480 gap: 8px;
481 margin-top: 14px;
482 }
483
484 .release-builds span {
485 border: 1px solid var(--line);
486 border-radius: 999px;
487 color: var(--ink-2);
488 font-family: var(--mono);
489 font-size: 0.78rem;
490 padding: 6px 10px;
491 }
492
493 @media (prefers-reduced-motion: reduce) {
494 .release-version-link, .release-guide, .release-channel-tabs a { transition: none; }
495 }
496
496 lines CSS