style(retro): style API documentation as Win98 windows
Re-skin the API documentation layout for the retro theme to ensure readability and maintain the Windows 98 aesthetic. The default dark revamp tokens were unreadable on the black retro desktop background. Changes include: - Styling the API sidebar as a raised silver window with a classic title bar. - Styling endpoint cards as silver windows with navy title bars. - Excluding API navigation links, shortcut cards, and link pills from default retro link styles to prevent styling conflicts. - Updating API documentation content, including adding a section for resumable uploads.
This commit is contained in:
@@ -10,6 +10,408 @@
|
||||
padding: 2rem 0 3rem;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
API documentation — sidebar layout
|
||||
============================================================ */
|
||||
|
||||
.api-docs {
|
||||
width: min(74rem, calc(100% - 2rem));
|
||||
margin: 0 auto;
|
||||
padding: 2rem 0 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 13.5rem minmax(0, 1fr);
|
||||
gap: 2rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.api-sidebar {
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.api-sidebar-title {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.api-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
border-left: 1px solid var(--border);
|
||||
padding-left: 0.3rem;
|
||||
}
|
||||
|
||||
.api-nav-link {
|
||||
display: block;
|
||||
padding: 0.45rem 0.7rem;
|
||||
border-radius: calc(var(--radius) - 0.3rem);
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
line-height: 1.2;
|
||||
transition: background 0.12s ease, color 0.12s ease;
|
||||
}
|
||||
|
||||
.api-nav-link:hover {
|
||||
background: var(--muted);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.api-nav-link.is-active {
|
||||
background: color-mix(in srgb, var(--primary) 16%, transparent);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.api-sidebar-meta {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.api-sidebar-meta a {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* --- Panels: only one visible at a time --- */
|
||||
.api-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.doc-panel {
|
||||
display: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.doc-panel.is-active {
|
||||
display: block;
|
||||
animation: doc-fade 0.18s ease;
|
||||
}
|
||||
|
||||
@keyframes doc-fade {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
max-width: 46rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.panel-head h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.panel-head .lead {
|
||||
margin: 0.6rem 0 0;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.api-content .card + .card,
|
||||
.api-content .quickstart {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.api-content h3 {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.api-content h4 {
|
||||
margin: 1.4rem 0 0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.api-content .card p {
|
||||
margin: 0.65rem 0 0;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.api-content code {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.api-content .field-grid p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
margin: 1.75rem 0 0.75rem !important;
|
||||
font-size: 0.8rem !important;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* --- Home shortcuts --- */
|
||||
.shortcut-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.shortcut-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: color-mix(in srgb, var(--card) 94%, transparent);
|
||||
text-decoration: none;
|
||||
transition: border-color 0.12s ease, transform 0.12s ease;
|
||||
}
|
||||
|
||||
.shortcut-card:hover {
|
||||
border-color: var(--ring);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.shortcut-eyebrow {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.shortcut-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 650;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.shortcut-sub {
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.link-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.link-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.6rem 0.85rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: calc(var(--radius) - 0.2rem);
|
||||
background: var(--card);
|
||||
color: var(--foreground);
|
||||
font-size: 0.88rem;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.12s ease;
|
||||
}
|
||||
|
||||
.link-pill:hover {
|
||||
border-color: var(--ring);
|
||||
}
|
||||
|
||||
.link-pill span {
|
||||
flex: none;
|
||||
min-width: 2.6rem;
|
||||
text-align: center;
|
||||
padding: 0.15rem 0.35rem;
|
||||
border-radius: 0.3rem;
|
||||
background: var(--muted);
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.66rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
/* --- Code blocks with copy button --- */
|
||||
.code-block {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.code-block .copy-btn {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.4rem;
|
||||
background: color-mix(in srgb, var(--card) 80%, transparent);
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
|
||||
.code-block:hover .copy-btn,
|
||||
.code-block .copy-btn:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.code-block .copy-btn:hover {
|
||||
color: var(--foreground);
|
||||
border-color: var(--ring);
|
||||
}
|
||||
|
||||
/* --- Endpoint blocks --- */
|
||||
.endpoint-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.endpoint-path {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.method {
|
||||
flex: none;
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 0.35rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.method-get { background: #2563eb; }
|
||||
.method-post { background: #16a34a; }
|
||||
.method-put { background: #d97706; }
|
||||
|
||||
.endpoint-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
|
||||
.endpoint-list div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.55rem 0.7rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: calc(var(--radius) - 0.3rem);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.endpoint-list div code {
|
||||
font-size: 0.82rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.endpoint-list div em {
|
||||
margin-left: auto;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.8rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* --- CLI download cards --- */
|
||||
.download-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.download-card {
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: color-mix(in srgb, var(--card) 94%, transparent);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.download-card .download-os {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 650;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.download-card p {
|
||||
margin: 0;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.download-card .button {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* --- FAQ --- */
|
||||
.faq-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: calc(var(--radius) - 0.2rem);
|
||||
background: color-mix(in srgb, var(--card) 94%, transparent);
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.faq-item summary {
|
||||
padding: 0.9rem 0;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
list-style: none;
|
||||
position: relative;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.faq-item summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.faq-item summary::after {
|
||||
content: "+";
|
||||
position: absolute;
|
||||
right: 0.1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--muted-foreground);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.faq-item[open] summary::after {
|
||||
content: "\2212";
|
||||
}
|
||||
|
||||
.faq-item p {
|
||||
margin: 0 0 0.95rem;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.docs-header {
|
||||
max-width: 44rem;
|
||||
}
|
||||
@@ -63,42 +465,19 @@
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.endpoint-list,
|
||||
.field-grid {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
|
||||
.endpoint-list div,
|
||||
.field-grid {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.endpoint-list div {
|
||||
display: grid;
|
||||
grid-template-columns: 7rem minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.endpoint-list dt,
|
||||
.endpoint-list dd {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.endpoint-list dt,
|
||||
.field-grid span {
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.endpoint-list dd code {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.docs-steps {
|
||||
margin: 0.85rem 0 0;
|
||||
padding-left: 1.1rem;
|
||||
|
||||
Reference in New Issue
Block a user