Daniel Legt
e2cf7115b7
All checks were successful
Build and Publish Docker Image / deploy (push) Successful in 2m44s
Introduce per-card accent colors to enhance the visual hierarchy of the documentation shortcut cards. This includes adding left borders, colored eyebrows, and matching hover glows using CSS variables. Additionally, this commit: - Adds color-coded tags (GET, POST, JSON, etc.) for API links. - Implements retro-themed styling for both the shortcut cards and tags to maintain consistency with the classic 16-color VGA palette. - Applies the new accent classes to the API page template.
517 lines
9.9 KiB
CSS
517 lines
9.9 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-left: 3px solid var(--accent-c, 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, box-shadow 0.12s ease;
|
|
}
|
|
|
|
.shortcut-card:hover {
|
|
border-color: var(--accent-c, var(--ring));
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-c, var(--ring)) 22%, transparent);
|
|
}
|
|
|
|
/* Per-card accent. Each home shortcut owns a colour, echoed by its eyebrow,
|
|
left edge, and hover glow. */
|
|
.accent-blue { --accent-c: #3b82f6; }
|
|
.accent-green { --accent-c: #22c55e; }
|
|
.accent-violet { --accent-c: #8b5cf6; }
|
|
.accent-amber { --accent-c: #f59e0b; }
|
|
|
|
.shortcut-eyebrow {
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--accent-c, 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;
|
|
}
|
|
|
|
/* Colour-coded tags on the home quick links (and reusable elsewhere). Tinted
|
|
background plus a saturated label so they read as accents, not loud chips. */
|
|
.link-pill .tag-get { background: color-mix(in srgb, #3b82f6 22%, transparent); color: #93c5fd; }
|
|
.link-pill .tag-post { background: color-mix(in srgb, #22c55e 22%, transparent); color: #86efac; }
|
|
.link-pill .tag-json { background: color-mix(in srgb, #8b5cf6 24%, transparent); color: #c4b5fd; }
|
|
.link-pill .tag-key { background: color-mix(in srgb, #eab308 24%, transparent); color: #fde047; }
|
|
.link-pill .tag-help { background: color-mix(in srgb, #06b6d4 24%, transparent); color: #67e8f9; }
|
|
|
|
/* --- 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;
|
|
}
|