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:
@@ -152,16 +152,16 @@
|
||||
|
||||
/* Links: classic blue, underlined, purple when visited. Sidebar links and tabs
|
||||
are styled as their own Win98 controls below, so they're excluded here. */
|
||||
:root[data-theme="retro"] a:not(.button):not(.brand):not(.sidebar-link):not(.tab):not(.sort-link) {
|
||||
:root[data-theme="retro"] a:not(.button):not(.brand):not(.sidebar-link):not(.tab):not(.sort-link):not(.api-nav-link):not(.shortcut-card):not(.link-pill) {
|
||||
color: #0000ee;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] a:not(.button):not(.brand):not(.sidebar-link):not(.tab):not(.sort-link):visited {
|
||||
:root[data-theme="retro"] a:not(.button):not(.brand):not(.sidebar-link):not(.tab):not(.sort-link):not(.api-nav-link):not(.shortcut-card):not(.link-pill):visited {
|
||||
color: #551a8b;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] a:not(.button):not(.brand):not(.sidebar-link):not(.tab):not(.sort-link):hover {
|
||||
:root[data-theme="retro"] a:not(.button):not(.brand):not(.sidebar-link):not(.tab):not(.sort-link):not(.api-nav-link):not(.shortcut-card):not(.link-pill):hover {
|
||||
color: #ee0000;
|
||||
}
|
||||
|
||||
@@ -741,3 +741,219 @@
|
||||
:root[data-theme="retro"] .file-main small {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------------- */
|
||||
/* API documentation: sidebar + panels as Win98 windows */
|
||||
/* The new .api-docs layout uses dark revamp tokens by default, which are */
|
||||
/* unreadable on the black retro desktop. Re-skin it as Win98 chrome: a */
|
||||
/* raised silver sidebar window, plain light section intros on the desktop, */
|
||||
/* and each card a silver window with a navy title bar from its heading. */
|
||||
/* ------------------------------------------------------------------------- */
|
||||
|
||||
/* Sidebar = raised silver window with a real title bar from its <h1>. */
|
||||
:root[data-theme="retro"] .api-sidebar {
|
||||
background: linear-gradient(to bottom, #ffffff, 4%, #c0c0c0 8%);
|
||||
background-color: #c0c0c0;
|
||||
border: 1px solid #000000;
|
||||
box-shadow: var(--shadow);
|
||||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .api-sidebar > .kicker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .api-sidebar-title {
|
||||
margin: -0.5rem -0.5rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .api-nav {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
/* Nav entries are flat silver list items; the active one is a navy bar. */
|
||||
:root[data-theme="retro"] .api-nav-link {
|
||||
color: #000000;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .api-nav-link:hover {
|
||||
background: #d4d0c8;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .api-nav-link.is-active {
|
||||
background: linear-gradient(to right, #000078, 80%, #0f80cd);
|
||||
color: #ffffff;
|
||||
border-color: #000000;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .api-sidebar-meta {
|
||||
border-top: 1px solid #808080;
|
||||
box-shadow: 0 -1px 0 #ffffff;
|
||||
padding-top: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Section intros sit on the black desktop: gold kicker, white title, light
|
||||
subtitle, and readable inline code (not the default black-on-black). */
|
||||
:root[data-theme="retro"] .panel-head .kicker {
|
||||
color: #ffd966;
|
||||
display: block;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .panel-head h2,
|
||||
:root[data-theme="retro"] .section-label {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .panel-head .lead {
|
||||
color: #cfd8ff;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .panel-head .lead code {
|
||||
color: #ffffff;
|
||||
background: #000078;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
|
||||
/* Each card heading becomes a Win98 title bar with a fake close button.
|
||||
Headings bleed to the window edges; only the first hugs the top edge so a
|
||||
multi-step card (e.g. ShareX) reads as stacked group bars, not overlaps. */
|
||||
:root[data-theme="retro"] .api-content .card > .card-content > h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
margin: 1.5rem -1.5rem 1rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
background: linear-gradient(to right, #000078, 80%, #0f80cd);
|
||||
color: #ffffff;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .api-content .card > .card-content > h3:first-child {
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
|
||||
/* The upload endpoint card leads with a method + path row; make that the bar. */
|
||||
:root[data-theme="retro"] .api-content .endpoint-head {
|
||||
margin: -1.5rem -1.5rem 1rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
background: linear-gradient(to right, #000078, 80%, #0f80cd);
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .endpoint-head .endpoint-path {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .api-content .card > .card-content > h3::after,
|
||||
:root[data-theme="retro"] .api-content .endpoint-head::after {
|
||||
content: "\2715";
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 1.15rem;
|
||||
height: 1rem;
|
||||
margin-left: auto;
|
||||
background: #c0c0c0;
|
||||
color: #000000;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
|
||||
}
|
||||
|
||||
/* Body text inside windows reads black, not muted purple. */
|
||||
:root[data-theme="retro"] .api-content .card p,
|
||||
:root[data-theme="retro"] .api-content .card h4,
|
||||
:root[data-theme="retro"] .api-content .field-grid span,
|
||||
:root[data-theme="retro"] .endpoint-list div em,
|
||||
:root[data-theme="retro"] .faq-item summary,
|
||||
:root[data-theme="retro"] .faq-item p {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* Sub-labels (Request fields, Example, ...) become small black headers. */
|
||||
:root[data-theme="retro"] .api-content .card h4 {
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Endpoint rows are sunken white fields. */
|
||||
:root[data-theme="retro"] .endpoint-list div {
|
||||
background: #ffffff;
|
||||
border: 1px solid #000000;
|
||||
box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
|
||||
}
|
||||
|
||||
/* Home shortcut tiles and quick links: silver windows / sunken white fields. */
|
||||
:root[data-theme="retro"] .shortcut-card {
|
||||
background: linear-gradient(to bottom, #ffffff, 6%, #c0c0c0 10%);
|
||||
background-color: #c0c0c0;
|
||||
border: 1px solid #000000;
|
||||
box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .shortcut-card:hover {
|
||||
transform: none;
|
||||
background-color: #d4d0c8;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .shortcut-eyebrow {
|
||||
color: #000078;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .shortcut-title,
|
||||
:root[data-theme="retro"] .shortcut-sub {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .link-pill {
|
||||
background: #ffffff;
|
||||
border: 1px solid #000000;
|
||||
box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .link-pill span {
|
||||
background: #000078;
|
||||
color: #ffffff;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
/* CLI download cards = silver windows. */
|
||||
:root[data-theme="retro"] .download-card {
|
||||
background: linear-gradient(to bottom, #ffffff, 4%, #c0c0c0 8%);
|
||||
background-color: #c0c0c0;
|
||||
border: 1px solid #000000;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .download-card .download-os,
|
||||
:root[data-theme="retro"] .download-card p {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* FAQ entries are silver windows; the +/- marker stays. */
|
||||
:root[data-theme="retro"] .faq-item {
|
||||
background: linear-gradient(to bottom, #ffffff, 4%, #c0c0c0 8%);
|
||||
background-color: #c0c0c0;
|
||||
border: 1px solid #000000;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .faq-item summary::after {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* Copy buttons: stay visible (retro already paints them as silver buttons). */
|
||||
:root[data-theme="retro"] .code-block .copy-btn {
|
||||
background: #c0c0c0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user