Daniel Legt
a0027fbd18
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.
500 lines
8.8 KiB
CSS
500 lines
8.8 KiB
CSS
.admin-view {
|
|
width: min(72rem, calc(100% - 2rem));
|
|
margin: 0 auto;
|
|
padding: 2rem 0 3rem;
|
|
}
|
|
|
|
.docs-view {
|
|
width: min(72rem, calc(100% - 2rem));
|
|
margin: 0 auto;
|
|
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;
|
|
}
|
|
|
|
.docs-header p {
|
|
margin: 0.55rem 0 0;
|
|
color: var(--muted-foreground);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.docs-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.docs-card {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.docs-card h2 {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.docs-card h3 {
|
|
margin: 1.35rem 0 0;
|
|
font-size: 0.9rem;
|
|
font-weight: 650;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
/* Highlights where the API token goes in the ShareX config snippet. */
|
|
.sxcu-highlight {
|
|
background: #fde047;
|
|
color: #1a1a1a;
|
|
font-weight: 700;
|
|
padding: 0 0.2rem;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.docs-card p {
|
|
margin: 0.65rem 0 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 0.88rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.docs-card-wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.field-grid {
|
|
display: grid;
|
|
gap: 0.65rem;
|
|
margin: 1rem 0 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.field-grid span {
|
|
color: var(--muted-foreground);
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.docs-steps {
|
|
margin: 0.85rem 0 0;
|
|
padding-left: 1.1rem;
|
|
color: var(--muted-foreground);
|
|
font-size: 0.88rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.docs-steps li + li {
|
|
margin-top: 0.35rem;
|
|
}
|
|
|
|
.field-grid {
|
|
grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
|
|
}
|
|
|
|
.field-grid p {
|
|
margin: 0;
|
|
}
|