Spaces:
Sleeping
Sleeping
| @import "../shared.css"; | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| min-height: 100dvh; | |
| background: var(--page-bg); | |
| color: var(--text); | |
| } | |
| .docs-toolbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 24px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| margin: 16px 24px 0; | |
| box-shadow: var(--shadow-sm); | |
| position: sticky; | |
| top: 16px; | |
| z-index: 100; | |
| } | |
| .docs-toolbar-title { | |
| font-weight: 700; | |
| font-size: 1rem; | |
| color: var(--pesu-blue); | |
| } | |
| .docs-toolbar-sep { | |
| width: 1px; | |
| height: 20px; | |
| background: var(--border); | |
| } | |
| .docs-toolbar-subtitle { | |
| color: var(--muted-foreground); | |
| font-size: 0.85rem; | |
| } | |
| .docs-layout { | |
| display: flex; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 24px; | |
| gap: 24px; | |
| } | |
| .docs-sidebar { | |
| width: 220px; | |
| flex-shrink: 0; | |
| position: sticky; | |
| top: 72px; | |
| align-self: flex-start; | |
| max-height: calc(100dvh - 88px); | |
| overflow-y: auto; | |
| } | |
| .docs-sidebar-nav { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 12px 0; | |
| } | |
| .docs-sidebar-heading { | |
| padding: 8px 16px 4px; | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--muted-foreground); | |
| } | |
| .docs-sidebar-link { | |
| display: block; | |
| padding: 6px 16px; | |
| font-size: 0.85rem; | |
| color: var(--text); | |
| text-decoration: none; | |
| border-left: 2px solid transparent; | |
| transition: border-color 0.15s, color 0.15s; | |
| } | |
| .docs-sidebar-link:hover { | |
| color: var(--pesu-orange); | |
| } | |
| .docs-sidebar-link.active { | |
| border-left-color: var(--pesu-orange); | |
| color: var(--pesu-orange); | |
| font-weight: 600; | |
| } | |
| .docs-sidebar-link.sub { | |
| padding-left: 28px; | |
| font-size: 0.8rem; | |
| color: var(--muted-foreground); | |
| } | |
| .docs-content { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .docs-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 32px 36px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .docs-card h1 { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| color: var(--pesu-blue); | |
| margin-bottom: 8px; | |
| } | |
| .docs-card h2 { | |
| font-size: 1.35rem; | |
| font-weight: 700; | |
| color: var(--pesu-blue); | |
| margin-top: 40px; | |
| margin-bottom: 12px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .docs-card h3 { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| margin-top: 28px; | |
| margin-bottom: 8px; | |
| } | |
| .docs-card h4 { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| color: var(--muted-foreground); | |
| margin-top: 20px; | |
| margin-bottom: 6px; | |
| } | |
| .docs-card p { | |
| margin-bottom: 12px; | |
| line-height: 1.65; | |
| } | |
| .docs-card ul, .docs-card ol { | |
| margin-bottom: 12px; | |
| padding-left: 20px; | |
| } | |
| .docs-card li { | |
| margin-bottom: 4px; | |
| line-height: 1.6; | |
| } | |
| .docs-card a { | |
| color: var(--pesu-blue); | |
| text-decoration: none; | |
| } | |
| .docs-card a:hover { | |
| text-decoration: underline; | |
| } | |
| .docs-card strong { | |
| font-weight: 600; | |
| } | |
| .docs-card hr { | |
| border: none; | |
| border-top: 1px solid var(--border); | |
| margin: 32px 0; | |
| } | |
| .docs-card code { | |
| background: var(--muted); | |
| padding: 1px 5px; | |
| border-radius: 4px; | |
| font-size: 0.85em; | |
| font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; | |
| color: var(--pesu-blue); | |
| } | |
| .docs-card pre { | |
| background: #1e1e2e; | |
| color: #cdd6f4; | |
| padding: 16px 20px; | |
| border-radius: 8px; | |
| overflow-x: auto; | |
| margin-bottom: 16px; | |
| font-size: 0.85rem; | |
| line-height: 1.6; | |
| } | |
| .docs-card pre code { | |
| background: none; | |
| padding: 0; | |
| color: inherit; | |
| font-size: inherit; | |
| } | |
| .docs-card table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-bottom: 16px; | |
| font-size: 0.85rem; | |
| } | |
| .docs-card th { | |
| text-align: left; | |
| padding: 8px 12px; | |
| border: 1px solid var(--border); | |
| background: var(--muted); | |
| font-weight: 600; | |
| } | |
| .docs-card td { | |
| padding: 8px 12px; | |
| border: 1px solid var(--border); | |
| } | |
| .docs-card blockquote { | |
| border-left: 3px solid var(--pesu-orange); | |
| padding: 8px 16px; | |
| margin-bottom: 12px; | |
| background: var(--muted); | |
| border-radius: 0 6px 6px 0; | |
| color: var(--muted-foreground); | |
| } | |
| .docs-card img { | |
| max-width: 100%; | |
| border-radius: 8px; | |
| border: 1px solid var(--border); | |
| margin: 12px 0; | |
| } | |
| .docs-card .method-badge { | |
| display: inline-block; | |
| padding: 1px 6px; | |
| border-radius: 4px; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| font-family: monospace; | |
| } | |
| .docs-card .method-get { background: #dbeafe; color: #1e40af; } | |
| .docs-card .method-post { background: #dcfce7; color: #166534; } | |
| .docs-card .method-patch { background: #fef3c7; color: #92400e; } | |
| .docs-card .method-delete { background: #fee2e2; color: #991b1b; } | |
| .docs-section { | |
| display: none; | |
| } | |
| .docs-section.active { | |
| display: block; | |
| } | |
| @media (max-width: 768px) { | |
| .docs-layout { | |
| flex-direction: column; | |
| padding: 16px; | |
| } | |
| .docs-sidebar { | |
| width: 100%; | |
| position: static; | |
| max-height: none; | |
| } | |
| .docs-card { | |
| padding: 20px; | |
| } | |
| } | |