47 خطوط
3.6 KiB
CSS
47 خطوط
3.6 KiB
CSS
:root { font-family: system-ui,sans-serif; color: #182f31; background: #f5f6f3; color-scheme: light; }
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 28px; }
|
|
main { width: min(100%,500px); }
|
|
.eyebrow { color: #51706d; letter-spacing: .16em; font-size: 11px; font-weight: 700; }
|
|
h1 { font-size: clamp(30px,6vw,42px); letter-spacing: -.04em; margin: 16px 0; }
|
|
p { font-size: 15px; line-height: 1.6; color: #526462; }
|
|
form { margin: 28px 0; display: grid; gap: 10px; }
|
|
label { font-size: 13px; margin-top: 10px; }
|
|
input { padding: 13px; border: 1px solid #ccd4ce; background: white; font: inherit; border-radius: 5px; width: 100%; }
|
|
button { display: flex; justify-content: space-between; margin-top: 12px; padding: 16px; background: #244d49; color: white; border: none; border-radius: 5px; font: inherit; cursor: pointer; }
|
|
button:disabled { opacity: .5; cursor: wait; }
|
|
output { display: block; font-size: 14px; overflow-wrap: anywhere; line-height: 1.6; }
|
|
a { color: #244d49; font-size: 13px; }
|
|
.note { margin-top: 28px; font-size: 12px; }
|
|
|
|
/* Home API playground only: existing upload and docs layouts stay independent. */
|
|
.playground { align-items: start; padding: clamp(20px,4vw,56px); }
|
|
.playground main { width: min(100%,1120px); margin: 0 auto; }
|
|
.playground h1 { max-width: 750px; }
|
|
.playground-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px,5vw,64px); margin-top: 28px; }
|
|
.playground h2 { font-size: 20px; margin: 0 0 16px; }
|
|
.playground form { margin-top: 0; }
|
|
.playground fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
|
|
.playground select { width: 100%; padding: 13px; border: 1px solid #ccd4ce; background: white; color: inherit; font: inherit; border-radius: 5px; }
|
|
.playground label { display: block; margin-bottom: 6px; }
|
|
.playground [hidden] { display: none !important; }
|
|
.playground .endpoint { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
|
|
.playground .field-hint { font-size: 12px; margin: 0; }
|
|
.playground .upload-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
.playground .api-list { min-width: 0; }
|
|
.playground .api-list > p { font-size: 13px; }
|
|
.playground article { margin: 18px 0; padding: 16px; border: 1px solid #d5ddd6; border-radius: 6px; background: #ffffff80; }
|
|
.playground article > code { display: block; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
|
|
.playground article p { font-size: 12px; margin: 8px 0; }
|
|
.playground .api-choice { display: inline-block; padding: 0; margin: 0 0 10px; background: transparent; color: #244d49; font-weight: 650; text-align: left; border-radius: 0; }
|
|
.playground .api-choice[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; }
|
|
.playground button:focus-visible, .playground select:focus-visible, .playground a:focus-visible { outline: 2px solid #51706d; outline-offset: 3px; }
|
|
.playground #viewer-link { margin-top: 12px; }
|
|
.playground #viewer-link a { display: inline-block; padding: 10px 14px; border: 1px solid #9bb4a7; border-radius: 4px; }
|
|
.playground details { margin-top: 14px; font-size: 12px; }
|
|
.playground summary { cursor: pointer; }
|
|
.playground pre { max-height: 320px; overflow: auto; padding: 14px; background: #e9eee8; border-radius: 5px; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
.playground .page-links { display: flex; flex-wrap: wrap; gap: 18px; padding: 24px 0; border-top: 1px solid #d5ddd6; }
|
|
@media (max-width: 760px) { .playground-grid { grid-template-columns: 1fr; } }
|
|
@media (max-width: 400px) { .playground .upload-options { grid-template-columns: 1fr; } }
|