2496 lines
No EOL
51 KiB
CSS
2496 lines
No EOL
51 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
/* Brand Colors */
|
|
--zx-primary: #10b981;
|
|
--zx-primary-dark: #059669;
|
|
--zx-primary-light: #34d399;
|
|
--zx-white: #ffffff;
|
|
--zx-black: #000000;
|
|
--zx-text-muted: #6b7280;
|
|
|
|
/* Layout & Surface (Light Mode) */
|
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
--font-display: 'Inter', sans-serif;
|
|
--bg-color: #ffffff;
|
|
--page-bg: #f9fafb;
|
|
--panel-bg: #ffffff;
|
|
--nav-bg: rgba(255, 255, 255, 0.8);
|
|
--text-color: #111827;
|
|
--subtitle-color: #4b5563;
|
|
--link-color: var(--zx-primary-dark);
|
|
--border-color: #e5e7eb;
|
|
--hover-bg: rgba(0, 0, 0, 0.04);
|
|
|
|
/* Code (Light Mode) */
|
|
--code-bg: #f3f4f6;
|
|
--code-border: #e5e7eb;
|
|
--zx-code-bg: #f3f4f6;
|
|
|
|
/* Syntax (Light Mode - Premium) */
|
|
--syn-comment: #9ca3af;
|
|
--syn-keyword: #be185d;
|
|
--syn-string: #059669;
|
|
--syn-function: #2563eb;
|
|
--syn-number: #d97706;
|
|
--syn-operator: #6b7280;
|
|
--syn-type: #7c3aed;
|
|
--syn-variable: #111827;
|
|
--syn-punctuation: #6b7280;
|
|
|
|
/* Components */
|
|
--sidebar-width: 260px;
|
|
--right-sidebar-width: 220px;
|
|
--submenu-bg: rgba(0, 0, 0, 0.02);
|
|
--link-hover-bg: rgba(16, 185, 129, 0.08);
|
|
--link-active-bg: rgba(16, 185, 129, 0.12);
|
|
--badge-bg: #f3f4f6;
|
|
--badge-border: #e5e7eb;
|
|
--scrollbar-thumb: rgba(0, 0, 0, 0.1);
|
|
--tooltip-bg: #111827;
|
|
--success-color: #059669;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* Layout & Surface (Dark Mode - Premium Ziex) */
|
|
--bg-color: #000000;
|
|
--page-bg: #000000;
|
|
--panel-bg: #0a0a0a;
|
|
--nav-bg: rgba(0, 0, 0, 0.8);
|
|
--text-color: #ffffff;
|
|
--subtitle-color: #a1a1a1;
|
|
--link-color: #4ade80;
|
|
--border-color: rgba(38, 38, 38, 0.55);
|
|
--hover-bg: rgba(255, 255, 255, 0.06);
|
|
|
|
/* Code (Dark Mode) */
|
|
--code-bg: #0b0f14;
|
|
--code-border: #2626268c;
|
|
--zx-code-bg: #0b0f14;
|
|
|
|
/* Syntax (Dark Mode - Material Ocean) */
|
|
--syn-comment: #5c6370;
|
|
--syn-keyword: #c792ea;
|
|
--syn-string: #c3e88d;
|
|
--syn-function: #82aaff;
|
|
--syn-number: #f78c6c;
|
|
--syn-operator: #89ddff;
|
|
--syn-type: #ffcb6b;
|
|
--syn-variable: #eeffff;
|
|
--syn-punctuation: #89ddff;
|
|
|
|
--link-hover-bg: rgba(74, 222, 128, 0.1);
|
|
--link-active-bg: rgba(74, 222, 128, 0.15);
|
|
--badge-bg: #141414;
|
|
--badge-border: #2626268c;
|
|
--scrollbar-thumb: rgba(255, 255, 255, 0.1);
|
|
--tooltip-bg: #0a0a0a;
|
|
--success-color: #4ade80;
|
|
}
|
|
}
|
|
|
|
/* Global scrollbar styling - always visible */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 6px;
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbar-thumb);
|
|
border-radius: 30px;
|
|
}
|
|
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
color: var(--text-color);
|
|
line-height: 1.6;
|
|
background: var(--page-bg);
|
|
/* Firefox scrollbar styling */
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) transparent;
|
|
}
|
|
|
|
/* Top Bar */
|
|
.top-bar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
background: var(--nav-bg);
|
|
border-bottom: 1px solid var(--border-color);
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.top-bar-content {
|
|
width: 100%;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 1.25rem;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.top-bar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.top-bar-logo {
|
|
font-family: var(--font-display);
|
|
font-size: 1.15rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.top-bar-logo-mark {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 34px;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
background: var(--zx-primary);
|
|
color: var(--zx-white);
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.top-bar-logo-text {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
|
|
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
|
|
'Helvetica Neue', sans-serif;
|
|
|
|
font-size: 1.15rem;
|
|
font-weight: 800;
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.top-bar-logo-subtitle {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--subtitle-color);
|
|
}
|
|
|
|
.top-bar-logo:hover {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.top-bar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.top-bar-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.top-bar-right .top-bar-nav {
|
|
padding-left: 1.25rem;
|
|
/* border-left: 1px solid var(--border-color); */
|
|
}
|
|
|
|
.top-bar-link {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--subtitle-color);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
padding: 0.4rem 0;
|
|
}
|
|
|
|
.top-bar-link:hover {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.top-bar-link-active {
|
|
color: var(--link-color);
|
|
position: relative;
|
|
}
|
|
|
|
.top-bar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.top-bar-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
color: var(--subtitle-color);
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.top-bar-icon:hover {
|
|
background: var(--hover-bg);
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.top-bar-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.top-bar-search {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: 420px;
|
|
position: relative;
|
|
}
|
|
|
|
.top-bar-search-input {
|
|
width: 100%;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
padding: 0.45rem 2.5rem 0.45rem 0.9rem;
|
|
font-size: 0.9rem;
|
|
color: var(--text-color);
|
|
background: var(--bg-color);
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.top-bar-search-input::placeholder {
|
|
color: var(--subtitle-color);
|
|
}
|
|
|
|
.top-bar-search-input:focus {
|
|
outline: none;
|
|
border-color: rgba(30, 91, 215, 0.6);
|
|
box-shadow: 0 0 0 3px rgba(30, 91, 215, 0.15);
|
|
}
|
|
|
|
.top-bar-search-hint {
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: var(--subtitle-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 0.1rem 0.35rem;
|
|
background: var(--nav-bg);
|
|
}
|
|
|
|
/* Top bar label variants - short labels hidden by default */
|
|
.top-bar-link-short {
|
|
display: none;
|
|
}
|
|
|
|
.top-bar-link-full {
|
|
display: inline;
|
|
}
|
|
|
|
/* Top bar hamburger - hidden on desktop */
|
|
.top-bar-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.top-bar-hamburger {
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.top-bar-hamburger span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: var(--text-color);
|
|
border-radius: 2px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Top bar compact - First fallback */
|
|
@media (max-width: 1024px) {
|
|
.top-bar-link-short {
|
|
display: inline;
|
|
}
|
|
|
|
.top-bar-link-full {
|
|
display: none;
|
|
}
|
|
|
|
.top-bar-right {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.top-bar-nav {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.top-bar-right .top-bar-nav {
|
|
padding-left: 1.25rem;
|
|
border-left: 1px solid var(--border-color);
|
|
}
|
|
|
|
.top-bar-link {
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.top-bar-content {
|
|
padding: 0 1.25rem;
|
|
}
|
|
|
|
.top-bar-search {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Top bar hamburger - Sidebar menu */
|
|
@media (max-width: 1024px) {
|
|
.top-bar-toggle {
|
|
display: block;
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.top-bar-hamburger {
|
|
display: flex;
|
|
order: 3;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.top-bar-content {
|
|
position: relative;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.sidebar {
|
|
display: block !important;
|
|
position: fixed;
|
|
top: 48px;
|
|
left: 0;
|
|
height: calc(100vh - 48px);
|
|
width: min(80vw, var(--sidebar-width));
|
|
max-width: 320px;
|
|
transform: translateX(-100%);
|
|
transition: transform 0.3s ease;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.sidebar-overlay {
|
|
display: block;
|
|
position: fixed;
|
|
top: 48px;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: calc(100vh - 48px);
|
|
background: rgba(0, 0, 0, 0.45);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.top-bar:has(.top-bar-toggle:checked)+.container .sidebar {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.top-bar:has(.top-bar-toggle:checked)+.container .sidebar-overlay {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Hamburger animation when open */
|
|
.top-bar-toggle:checked~.top-bar-hamburger span:nth-child(1) {
|
|
transform: rotate(45deg) translate(4px, 4px);
|
|
}
|
|
|
|
.top-bar-toggle:checked~.top-bar-hamburger span:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.top-bar-toggle:checked~.top-bar-hamburger span:nth-child(3) {
|
|
transform: rotate(-45deg) translate(4px, -4px);
|
|
}
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
background: var(--page-bg);
|
|
}
|
|
|
|
.sidebar-overlay {
|
|
display: none;
|
|
}
|
|
|
|
/* Sidebar Navigation */
|
|
.sidebar {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 48px;
|
|
width: var(--sidebar-width);
|
|
height: calc(100vh - 48px);
|
|
background: var(--panel-bg);
|
|
border-right: 1px solid var(--border-color);
|
|
overflow-y: auto;
|
|
scrollbar-gutter: stable;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.nav-menu {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.nav-menu li {
|
|
border-bottom: 1px solid var(--border-color);
|
|
position: relative;
|
|
}
|
|
|
|
/* Sidebar Tabs (Learn / Reference) */
|
|
.sidebar-tabs {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
padding: 0.4rem 0.45rem 0;
|
|
gap: 0.25rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--panel-bg);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sidebar-tab {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 0.3rem 0.5rem;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: var(--subtitle-color);
|
|
text-decoration: none;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 0.15s ease;
|
|
margin-bottom: -1px;
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
|
|
.sidebar-tab:hover {
|
|
color: var(--link-color);
|
|
background: var(--link-hover-bg);
|
|
}
|
|
|
|
.sidebar-tab-active {
|
|
color: var(--link-color);
|
|
border-bottom-color: var(--link-color);
|
|
}
|
|
|
|
/* Category-based Sidebar (React-style) */
|
|
.sidebar-categories {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.sidebar-category {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.sidebar-category-title {
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--subtitle-color);
|
|
padding: 0.5rem 1.25rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar-sections {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar-section {
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar-section-link,
|
|
.sidebar-section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.55rem 1.5rem;
|
|
margin: 0 0.75rem;
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
font-size: 0.92rem;
|
|
font-weight: 600;
|
|
transition: all 0.15s ease;
|
|
cursor: pointer;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.sidebar-section-link:hover,
|
|
.sidebar-section-title:hover {
|
|
background: var(--hover-bg);
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.sidebar-section-link.active {
|
|
background: var(--link-active-bg);
|
|
color: var(--link-color);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Collapsible details/summary */
|
|
.sidebar-details {
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar-details summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidebar-details summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.55rem 0.85rem;
|
|
margin: 0 0.75rem;
|
|
color: var(--text-color);
|
|
font-size: 0.92rem;
|
|
font-weight: 600;
|
|
transition: all 0.15s ease;
|
|
border-radius: 8px;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.sidebar-summary:hover {
|
|
background: var(--hover-bg);
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.sidebar-summary:hover .sidebar-section-link,
|
|
.sidebar-summary:hover .sidebar-section-title,
|
|
.sidebar-summary:hover .sidebar-arrow {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.sidebar-summary .sidebar-section-link,
|
|
.sidebar-summary .sidebar-section-title {
|
|
padding: 0;
|
|
flex: 1;
|
|
background: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sidebar-summary .sidebar-section-link:hover,
|
|
.sidebar-summary .sidebar-section-title:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
.sidebar-arrow {
|
|
font-size: 1rem;
|
|
color: var(--subtitle-color);
|
|
transition: transform 0.2s ease;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.sidebar-details:hover .sidebar-arrow,
|
|
.sidebar-section:hover .sidebar-arrow {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
/* Rotate arrow when open */
|
|
.sidebar-details[open] .sidebar-arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.sidebar-details .sidebar-subitems {
|
|
display: block;
|
|
}
|
|
|
|
.sidebar-subitems {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: transparent;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.sidebar-subitems li a {
|
|
display: block;
|
|
padding: 0.4rem 1.25rem 0.4rem 1.6rem;
|
|
color: var(--subtitle-color);
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
transition: all 0.15s ease;
|
|
border-radius: 8px;
|
|
margin: 0 0.65rem;
|
|
}
|
|
|
|
.sidebar-subitems li a:hover {
|
|
color: var(--link-color);
|
|
background: var(--link-hover-bg);
|
|
}
|
|
|
|
.sidebar-subitems li a.active {
|
|
color: var(--link-color);
|
|
background: var(--link-active-bg);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-menu a {
|
|
display: block;
|
|
padding: 1rem 2rem;
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
transition: background-color 0.2s;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.nav-menu a:hover {
|
|
background: var(--hover-bg);
|
|
border-left-color: var(--link-color);
|
|
}
|
|
|
|
|
|
/* Main Content */
|
|
.content {
|
|
margin-left: var(--sidebar-width);
|
|
padding: 2.75rem 3.5rem 4rem;
|
|
flex: 1;
|
|
min-width: 0;
|
|
max-width: calc(100% - var(--sidebar-width));
|
|
overflow-x: hidden;
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Content with right sidebar */
|
|
.container:has(.right-sidebar) .content {
|
|
margin-right: var(--right-sidebar-width);
|
|
padding: 2.75rem 3.5rem 4rem;
|
|
}
|
|
|
|
/* Content inner wrapper - all direct children get full width */
|
|
.content>* {
|
|
max-width: 1080px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Text content stays at readable width */
|
|
.content p,
|
|
.content h2,
|
|
.content h3,
|
|
.content h4,
|
|
.content ul,
|
|
.content ol {
|
|
max-width: 780px;
|
|
}
|
|
|
|
/* Links in content area - ensure good contrast */
|
|
.content a:not(.section-anchor):not(.next-step-card) {
|
|
color: var(--link-color);
|
|
text-decoration: underline;
|
|
text-decoration-color: currentColor;
|
|
text-underline-offset: 2px;
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
|
|
.content a:not(.section-anchor):not(.next-step-card):hover {
|
|
color: var(--link-hover-color);
|
|
}
|
|
|
|
/* Callout boxes - inherits default width */
|
|
|
|
/* Right Sidebar (ON THIS PAGE) */
|
|
.right-sidebar {
|
|
position: fixed;
|
|
right: 0;
|
|
top: 48px;
|
|
width: var(--right-sidebar-width);
|
|
height: calc(100vh - 48px);
|
|
background: var(--panel-bg);
|
|
border-left: 1px solid var(--border-color);
|
|
overflow-y: auto;
|
|
padding: 1rem 1.5rem;
|
|
scrollbar-gutter: stable;
|
|
padding-right: 0rem;
|
|
}
|
|
|
|
.right-sidebar-content {
|
|
position: sticky;
|
|
top: .5rem;
|
|
}
|
|
|
|
.right-sidebar-title {
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--subtitle-color);
|
|
margin: 0 0 1.25rem 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.right-sidebar-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.right-sidebar-link {
|
|
display: block;
|
|
padding: 0.45rem 0.6rem;
|
|
color: var(--subtitle-color);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
border-radius: 8px;
|
|
transition: all 0.15s ease;
|
|
margin-left: -0.4rem;
|
|
padding-left: 0.6rem;
|
|
}
|
|
|
|
.right-sidebar-link:hover {
|
|
background: var(--link-hover-bg);
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.right-sidebar-link:active {
|
|
background: var(--link-active-bg);
|
|
}
|
|
|
|
/* Active link styling */
|
|
.right-sidebar-link.active {
|
|
background: var(--link-active-bg);
|
|
color: var(--link-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.examples-content {
|
|
margin-left: 0;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* CLI Command Cards */
|
|
|
|
/* Improve main content spacing for CLI */
|
|
|
|
.section {
|
|
margin-bottom: 3.5rem;
|
|
scroll-margin-top: 5rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.section h2+p,
|
|
.section h3+p {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.section p+p {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
|
|
.section h2 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.9rem;
|
|
font-weight: 600;
|
|
margin: 0 0 1rem 0;
|
|
color: var(--text-color);
|
|
line-height: 1.3;
|
|
scroll-margin-top: 5rem;
|
|
}
|
|
|
|
.section h3 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
margin-top: 2.25rem;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--text-color);
|
|
line-height: 1.4;
|
|
scroll-margin-top: 5rem;
|
|
}
|
|
|
|
/* Section heading anchor links */
|
|
.section h2,
|
|
.section h3 {
|
|
position: relative;
|
|
}
|
|
|
|
.section-anchor {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.section-anchor:hover {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.section-anchor-icon {
|
|
opacity: 0;
|
|
color: var(--subtitle-color);
|
|
transition: opacity 0.15s ease, color 0.15s ease;
|
|
flex-shrink: 0;
|
|
width: 0.75em;
|
|
height: 0.75em;
|
|
}
|
|
|
|
.section h2:hover .section-anchor-icon,
|
|
.section h3:hover .section-anchor-icon,
|
|
.section-anchor:focus .section-anchor-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.section-anchor:hover .section-anchor-icon {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.section h4 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--text-color);
|
|
scroll-margin-top: 4rem;
|
|
}
|
|
|
|
.section p {
|
|
margin-bottom: 1.25rem;
|
|
color: var(--text-color);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Source Code Badge */
|
|
|
|
.section ul,
|
|
.section ol {
|
|
margin-left: 1.5rem;
|
|
margin-bottom: 1.25rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.section li {
|
|
margin-bottom: 0.5rem;
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
.section li+li {
|
|
margin-top: 0.375rem;
|
|
}
|
|
|
|
code {
|
|
background: var(--code-bg);
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 3px;
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
border: 1px solid var(--code-border);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
code,
|
|
pre code {
|
|
color: #e0e0e0;
|
|
}
|
|
}
|
|
|
|
pre {
|
|
background: var(--code-bg);
|
|
padding: 1.5rem;
|
|
border-radius: 0;
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
margin: 1.5rem 0;
|
|
border: 2px solid var(--code-border);
|
|
white-space: pre;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
/* scrollbar-gutter: stable; */
|
|
position: relative;
|
|
}
|
|
|
|
pre code {
|
|
background: none;
|
|
padding: 0;
|
|
border: none;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
white-space: pre;
|
|
display: block;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Tabs */
|
|
|
|
.tab-radio {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Code Examples */
|
|
.code-example {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
margin: 1.5rem 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Copy button styles */
|
|
.copy-button {
|
|
position: absolute;
|
|
top: 0.75rem;
|
|
right: 0.75rem;
|
|
padding: 0.375rem;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: var(--subtitle-color);
|
|
transition: all 0.15s ease;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0.5;
|
|
pointer-events: all;
|
|
}
|
|
|
|
pre:hover .copy-button {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.copy-button:hover {
|
|
opacity: 1;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.copy-button.copied {
|
|
opacity: 1;
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.copy-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
|
|
|
|
/* Tree-sitter syntax highlighting */
|
|
.hljs {
|
|
display: block;
|
|
white-space: pre;
|
|
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
|
line-height: 1.5;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* Standalone .hljs blocks (not inside code elements) */
|
|
div.hljs {
|
|
padding: 1em;
|
|
background: #f6f8fa;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
div.hljs {
|
|
background: #282c34;
|
|
}
|
|
}
|
|
|
|
/* .hljs inside code blocks shouldn't have extra padding/background */
|
|
code.hljs {
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
/* Tree-sitter syntax highlighting - Light theme (GitHub Light) */
|
|
.attribute {
|
|
color: #953800;
|
|
}
|
|
|
|
.comment {
|
|
font-style: italic;
|
|
color: #6e7781;
|
|
}
|
|
|
|
.constant {
|
|
color: #0550ae;
|
|
}
|
|
|
|
.constant.builtin {
|
|
color: #0550ae;
|
|
}
|
|
|
|
.function {
|
|
color: #8250df;
|
|
}
|
|
|
|
/* Unified Variable-based Syntax Highlighting */
|
|
.comment { color: var(--syn-comment); font-style: italic; }
|
|
.punctuation { color: var(--syn-punctuation); }
|
|
.keyword, .keyword.function, .keyword.return, .keyword.operator, .keyword.modifier, .keyword.type, .keyword.conditional, .keyword.repeat, .keyword.import, .keyword.exception, .keyword.coroutine {
|
|
color: var(--syn-keyword);
|
|
font-weight: 500;
|
|
}
|
|
.string, .string.special, .string.escape { color: var(--syn-string); }
|
|
.function, .function.builtin, .constructor, .module, .label { color: var(--syn-function); }
|
|
.number, .number.float, .boolean, .constant, .constant.builtin { color: var(--syn-number); }
|
|
.operator { color: var(--syn-operator); }
|
|
.type, .type.builtin, .attribute { color: var(--syn-type); }
|
|
.variable, .variable.builtin, .variable.parameter, .variable.member, .tag { color: var(--syn-variable); }
|
|
.property, .property.builtin { color: var(--syn-keyword); }
|
|
|
|
pre[class*="language-"] {
|
|
background: var(--sandbox-bg) !important;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* pre[class*="language-bash"], pre[class*="language-powershell"] {
|
|
width: min-content !important;
|
|
} */
|
|
|
|
|
|
code[class*="language-"] {
|
|
background: var(--sandbox-bg) !important;
|
|
/* Don't override text color - let tokens handle it */
|
|
}
|
|
|
|
/* Hide right sidebar on smaller screens */
|
|
@media (max-width: 1400px) {
|
|
:root {
|
|
--right-sidebar-width: 0px;
|
|
}
|
|
|
|
.right-sidebar {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
position: absolute !important;
|
|
}
|
|
|
|
/* Make content fill the available space */
|
|
.content {
|
|
margin-right: 0 !important;
|
|
max-width: calc(100% - var(--sidebar-width)) !important;
|
|
flex: 1 !important;
|
|
}
|
|
|
|
.container:has(.right-sidebar) .content {
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* Responsive - Medium screens */
|
|
@media (max-width: 1024px) and (min-width: 769px) {
|
|
.code-example {
|
|
grid-template-columns: 1fr;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar {
|
|
display: block !important;
|
|
position: fixed;
|
|
top: 48px;
|
|
left: 0;
|
|
height: calc(100vh - 48px);
|
|
width: min(80vw, var(--sidebar-width));
|
|
max-width: 320px;
|
|
transform: translateX(-100%);
|
|
transition: transform 0.3s ease;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.right-sidebar {
|
|
display: none !important;
|
|
}
|
|
|
|
.content {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
padding: 2rem 2rem;
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.container:has(.right-sidebar) .content {
|
|
margin-right: 0 !important;
|
|
padding: 2rem 2rem;
|
|
}
|
|
|
|
.content>* {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Smaller fonts on medium screens */
|
|
pre {
|
|
font-size: 0.8rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
pre code {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
code {
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.section-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.section h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.section h3 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.section h4 {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Responsive - Mobile screens */
|
|
@media (max-width: 768px) {
|
|
.code-example {
|
|
grid-template-columns: 1fr;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.right-sidebar {
|
|
display: none !important;
|
|
}
|
|
|
|
.content {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
padding: 1.5rem 1rem;
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.container {
|
|
display: block;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.container:has(.right-sidebar) .content {
|
|
margin-right: 0 !important;
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
|
|
.content>* {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.section {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
/* Smaller fonts on mobile */
|
|
pre {
|
|
font-size: 0.75rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
pre code {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
code {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.section-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.section h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.section h3 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.section h4 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* CLI responsive styles */
|
|
}
|
|
|
|
/* Learn Page Styles */
|
|
.learn-header h1 {
|
|
font-family: var(--font-display);
|
|
font-size: 2.6rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.section-category {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--link-color);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.lead {
|
|
font-size: 1.25rem;
|
|
line-height: 1.7;
|
|
color: var(--subtitle-color);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Inline badge */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.125rem 0.5rem;
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
background: var(--link-color);
|
|
color: var(--bg-color);
|
|
border-radius: 4px;
|
|
vertical-align: middle;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
/* Callout boxes */
|
|
.callout {
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--code-border);
|
|
border-left: 4px solid var(--link-color);
|
|
border-radius: 0 8px 8px 0;
|
|
padding: 1.25rem 1.5rem;
|
|
margin: 1.75rem 0;
|
|
}
|
|
|
|
.callout h3 {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
margin: 0 0 1rem 0;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.callout-title {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
margin: 0 0 1rem 0;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.callout ul {
|
|
margin: 0;
|
|
padding-left: 1.25rem;
|
|
}
|
|
|
|
.callout li {
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.callout li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.learn-callout {
|
|
border-left: 4px solid var(--link-color);
|
|
}
|
|
|
|
.callout.note {
|
|
border-left: 4px solid var(--link-color);
|
|
background: var(--link-hover-bg);
|
|
}
|
|
|
|
.callout.note a {
|
|
color: var(--link-color);
|
|
text-decoration: underline;
|
|
text-decoration-color: currentColor;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.callout.note a:hover {
|
|
color: var(--link-hover-color);
|
|
}
|
|
|
|
.callout.tip {
|
|
border-left: 4px solid var(--success-color);
|
|
background: rgba(40, 167, 69, 0.08);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.callout.tip {
|
|
background: rgba(45, 206, 93, 0.1);
|
|
}
|
|
}
|
|
|
|
/* Install Box (Bun-style) */
|
|
.install-box {
|
|
position: relative;
|
|
margin: 1.5rem 0;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--code-border);
|
|
}
|
|
|
|
.install-box-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 1rem;
|
|
background: var(--hover-bg);
|
|
border-bottom: 1px solid var(--code-border);
|
|
}
|
|
|
|
.install-tab-radio {
|
|
display: none;
|
|
}
|
|
|
|
.install-tab-labels {
|
|
display: flex;
|
|
gap: 0;
|
|
}
|
|
|
|
.install-tab-label {
|
|
padding: 0.75rem 1rem;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--subtitle-color);
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
transition: all 0.15s ease;
|
|
background: transparent;
|
|
}
|
|
|
|
.install-tab-label:hover {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.install-box-content {
|
|
padding: 1.25rem 1.5rem;
|
|
}
|
|
|
|
.install-tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.install-code {
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.5;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.install-prompt {
|
|
color: var(--link-color);
|
|
font-weight: 600;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.install-other {
|
|
font-size: 0.875rem;
|
|
color: var(--subtitle-color);
|
|
}
|
|
|
|
.install-other a {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.install-other a:hover {
|
|
color: var(--link-hover-color);
|
|
}
|
|
|
|
/* Copy button for install boxes */
|
|
.install-box .copy-button {
|
|
position: static;
|
|
margin-left: auto;
|
|
opacity: 0.5;
|
|
pointer-events: all;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--subtitle-color);
|
|
padding: 0.375rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.install-box .copy-button:hover {
|
|
opacity: 1;
|
|
background: transparent;
|
|
color: var(--text-color);
|
|
border: none;
|
|
}
|
|
|
|
.install-box .copy-button.copied {
|
|
opacity: 1;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--link-color);
|
|
}
|
|
|
|
/* Simple install box (no tabs) */
|
|
.install-box-simple {
|
|
position: relative;
|
|
}
|
|
|
|
.install-box-simple .install-box-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.install-box-simple .install-code {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Multiline install code */
|
|
.install-code-multiline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
/* Tab selection logic - header */
|
|
#tab-unix:checked~.install-tab-labels label[for="tab-unix"],
|
|
#tab-windows:checked~.install-tab-labels label[for="tab-windows"],
|
|
#tab-node:checked~.install-tab-labels label[for="tab-node"],
|
|
#tab-zig-mac:checked~.install-tab-labels label[for="tab-zig-mac"],
|
|
#tab-zig-win:checked~.install-tab-labels label[for="tab-zig-win"],
|
|
#tab-zig-other:checked~.install-tab-labels label[for="tab-zig-other"] {
|
|
color: var(--link-color);
|
|
border-bottom-color: var(--link-color);
|
|
}
|
|
|
|
/* Tab selection logic - content (using sibling from header to content) */
|
|
.install-box-header:has(#tab-unix:checked)+.install-box-content #content-unix,
|
|
.install-box-header:has(#tab-windows:checked)+.install-box-content #content-windows,
|
|
.install-box-header:has(#tab-node:checked)+.install-box-content #content-node,
|
|
.install-box-header:has(#tab-zig-mac:checked)+.install-box-content #content-zig-mac,
|
|
.install-box-header:has(#tab-zig-win:checked)+.install-box-content #content-zig-win,
|
|
.install-box-header:has(#tab-zig-other:checked)+.install-box-content #content-zig-other {
|
|
display: block;
|
|
}
|
|
|
|
/* Simple tabs */
|
|
.simple-tab-header {
|
|
display: flex;
|
|
gap: 0;
|
|
margin-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.simple-tab-radio {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.simple-tab-label {
|
|
padding: 0.5rem 1rem;
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
transition: all 0.2s;
|
|
color: var(--subtitle-color);
|
|
user-select: none;
|
|
margin-left: 0.5rem;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.simple-tab-label:hover {
|
|
color: var(--text-color);
|
|
background: var(--hover-bg);
|
|
}
|
|
|
|
#tab-cli:checked~.simple-tab-label[for="tab-cli"],
|
|
#tab-manual:checked~.simple-tab-label[for="tab-manual"],
|
|
#tab-control-if:checked~.simple-tab-label[for="tab-control-if"],
|
|
#tab-control-switch:checked~.simple-tab-label[for="tab-control-switch"],
|
|
#tab-control-for:checked~.simple-tab-label[for="tab-control-for"],
|
|
#tab-control-while:checked~.simple-tab-label[for="tab-control-while"],
|
|
#tab-editor-vscode:checked~.simple-tab-label[for="tab-editor-vscode"],
|
|
#tab-editor-neovim:checked~.simple-tab-label[for="tab-editor-neovim"],
|
|
#tab-editor-helix:checked~.simple-tab-label[for="tab-editor-helix"],
|
|
#tab-editor-zed:checked~.simple-tab-label[for="tab-editor-zed"] {
|
|
color: var(--link-color);
|
|
border-bottom-color: var(--link-color);
|
|
border-bottom-width: 2px;
|
|
}
|
|
|
|
.simple-tab-content {
|
|
display: none;
|
|
}
|
|
|
|
div:has(#tab-cli:checked) #content-cli,
|
|
div:has(#tab-manual:checked) #content-manual,
|
|
div:has(#tab-control-if:checked) #control-content-if,
|
|
div:has(#tab-control-switch:checked) #control-content-switch,
|
|
div:has(#tab-control-for:checked) #control-content-for,
|
|
div:has(#tab-control-while:checked) #control-content-while,
|
|
div:has(#tab-editor-vscode:checked) #content-editor-vscode,
|
|
div:has(#tab-editor-neovim:checked) #content-editor-neovim,
|
|
div:has(#tab-editor-helix:checked) #content-editor-helix,
|
|
div:has(#tab-editor-zed:checked) #content-editor-zed {
|
|
display: block;
|
|
}
|
|
|
|
/* Next steps grid */
|
|
.next-steps-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.next-step-card {
|
|
display: block;
|
|
background: var(--nav-bg);
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.next-step-card:hover {
|
|
border-color: var(--link-color);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.next-step-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
.next-step-card h3 {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
color: var(--link-color);
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
.next-step-card p {
|
|
font-size: 0.9375rem;
|
|
color: var(--subtitle-color);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Single code block (no preview) */
|
|
|
|
/* Responsive adjustments for Learn page */
|
|
@media (max-width: 768px) {
|
|
.learn-header h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.lead {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.next-steps-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.callout {
|
|
padding: 1.25rem;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--sandbox-bg: #ffffff;
|
|
--sandbox-border: #e5e7eb;
|
|
--sandbox-header-bg: #f8f9fa;
|
|
--sandbox-tab-active: #087ea4;
|
|
--sandbox-tab-text: #5e687e;
|
|
--sandbox-line-number: #a1a1aa;
|
|
--sandbox-preview-bg: #ffffff;
|
|
--sandbox-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--sandbox-bg: #16181d;
|
|
--sandbox-border: #343a46;
|
|
--sandbox-header-bg: #23272f;
|
|
--sandbox-tab-active: #58c4dc;
|
|
--sandbox-tab-text: #99a1b3;
|
|
--sandbox-line-number: #5c6370;
|
|
--sandbox-preview-bg: #23272f;
|
|
--sandbox-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
}
|
|
|
|
.sandbox {
|
|
margin: 2rem 0;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: var(--sandbox-shadow);
|
|
background: var(--sandbox-bg);
|
|
border: 1px solid var(--sandbox-border);
|
|
min-width: 0;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Code blocks should not pop out like sandbox (only sandboxes with container pop out) */
|
|
.sandbox:not(:has(.sandbox-container)) {
|
|
min-width: 0 !important;
|
|
width: 100% !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
@media (min-width: 1500px) {
|
|
.sandbox:not(:has(.sandbox-container)) {
|
|
width: 100% !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1900px) {
|
|
.sandbox:not(:has(.sandbox-container)) {
|
|
width: 100% !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
min-width: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* Only pop out on very large screens where there's room */
|
|
@media (min-width: 1900px) {
|
|
.sandbox {
|
|
width: calc(100% + 10%);
|
|
margin-left: -5%;
|
|
margin-right: -5%;
|
|
min-width: 900px;
|
|
}
|
|
}
|
|
|
|
/* Large screens: slight pop out */
|
|
@media (min-width: 1500px) and (max-width: 1699px) {
|
|
.sandbox {
|
|
width: calc(100% + 4%);
|
|
margin-left: -2%;
|
|
margin-right: -2%;
|
|
}
|
|
}
|
|
|
|
.sandbox-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
min-height: 200px;
|
|
}
|
|
|
|
/* Editor Panel */
|
|
.sandbox-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid var(--sandbox-border);
|
|
background: var(--sandbox-bg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sandbox-editor-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0;
|
|
background: var(--sandbox-header-bg);
|
|
border-bottom: 1px solid var(--sandbox-border);
|
|
min-height: 44px;
|
|
}
|
|
|
|
.sandbox-tabs {
|
|
display: flex;
|
|
align-items: stretch;
|
|
height: 44px;
|
|
}
|
|
|
|
.sandbox-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 16px;
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--sandbox-tab-text);
|
|
cursor: pointer;
|
|
position: relative;
|
|
font-family: inherit;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.sandbox-tab svg {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.sandbox-editor-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.sandbox-open-playground-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--sandbox-tab-text);
|
|
cursor: pointer;
|
|
transition: color 0.15s ease, background 0.15s ease;
|
|
}
|
|
|
|
.sandbox-open-playground-btn:hover {
|
|
color: var(--sandbox-tab-active);
|
|
background: color-mix(in srgb, var(--sandbox-border) 65%, transparent);
|
|
}
|
|
|
|
.sandbox-open-playground-btn[data-tooltip] {
|
|
position: relative;
|
|
}
|
|
|
|
.sandbox-open-playground-btn[data-tooltip]::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: calc(100% + 8px);
|
|
white-space: nowrap;
|
|
font-size: 11px;
|
|
line-height: 1;
|
|
padding: 6px 8px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--tooltip-bg);
|
|
color: var(--zx-white);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transform: translateY(2px);
|
|
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
|
|
z-index: 30;
|
|
}
|
|
|
|
.sandbox-open-playground-btn[data-tooltip]:hover::after,
|
|
.sandbox-open-playground-btn[data-tooltip]:focus-visible::after {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Code Area */
|
|
.sandbox-code {
|
|
flex: 1;
|
|
overflow: auto;
|
|
background: var(--sandbox-bg);
|
|
position: relative;
|
|
}
|
|
|
|
.sandbox-code-pre {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.sandbox-code-lines {
|
|
display: block;
|
|
padding: 14px 16px;
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 13px;
|
|
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
|
|
white-space: pre;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.sandbox-code code {
|
|
display: block;
|
|
padding: 14px 16px;
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 13px;
|
|
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
|
|
}
|
|
|
|
/* Preview Panel */
|
|
.sandbox-preview {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--sandbox-preview-bg);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.sandbox-preview-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 12px;
|
|
background: var(--sandbox-header-bg);
|
|
border-bottom: 1px solid var(--sandbox-border);
|
|
min-height: 44px;
|
|
}
|
|
|
|
.sandbox-preview-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
height: 44px;
|
|
}
|
|
|
|
.sandbox-preview-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
height: 100%;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--sandbox-tab-text);
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: color 0.15s ease;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.sandbox-preview-tab:hover {
|
|
color: var(--sandbox-tab-active);
|
|
}
|
|
|
|
/* Default active state for preview tab */
|
|
.sandbox-preview .sandbox-preview-tab[for$="-preview"] {
|
|
color: var(--sandbox-tab-active);
|
|
}
|
|
|
|
.sandbox-preview .sandbox-preview-tab[for$="-preview"]::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--sandbox-tab-active);
|
|
}
|
|
|
|
/* Tab switching states */
|
|
.sandbox-preview:has(.tab-radio[id$="-html"]:checked) .sandbox-preview-tab[for$="-preview"] {
|
|
color: var(--sandbox-tab-text);
|
|
}
|
|
|
|
.sandbox-preview:has(.tab-radio[id$="-html"]:checked) .sandbox-preview-tab[for$="-preview"]::after {
|
|
display: none;
|
|
}
|
|
|
|
.sandbox-preview:has(.tab-radio[id$="-html"]:checked) .sandbox-preview-tab[for$="-html"] {
|
|
color: var(--sandbox-tab-active);
|
|
}
|
|
|
|
.sandbox-preview:has(.tab-radio[id$="-html"]:checked) .sandbox-preview-tab[for$="-html"]::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--sandbox-tab-active);
|
|
}
|
|
|
|
.sandbox-preview:has(.tab-radio[id$="-zig"]:checked) .sandbox-preview-tab[for$="-preview"] {
|
|
color: var(--sandbox-tab-text);
|
|
}
|
|
|
|
.sandbox-preview:has(.tab-radio[id$="-zig"]:checked) .sandbox-preview-tab[for$="-preview"]::after {
|
|
display: none;
|
|
}
|
|
|
|
.sandbox-preview:has(.tab-radio[id$="-zig"]:checked) .sandbox-preview-tab[for$="-zig"] {
|
|
color: var(--sandbox-tab-active);
|
|
}
|
|
|
|
.sandbox-preview-actions {
|
|
display: none;
|
|
/* Hidden for now */
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.sandbox-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--sandbox-tab-text);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.sandbox-action-btn:hover {
|
|
background: var(--sandbox-border);
|
|
color: var(--sandbox-tab-active);
|
|
}
|
|
|
|
/* Preview Content */
|
|
.sandbox-preview-content {
|
|
background-color: var(--sandbox-bg) !important;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
min-height: 150px;
|
|
}
|
|
|
|
/* Hide non-active preview contents by default */
|
|
.sandbox-preview-content[id^="tab-html-"],
|
|
.sandbox-preview-content[id^="tab-zig-"] {
|
|
display: none;
|
|
}
|
|
|
|
/* Show content based on checked radio */
|
|
.sandbox-preview:has(.tab-radio[id$="-html"]:checked) .sandbox-preview-content[id^="tab-preview-"] {
|
|
display: none;
|
|
}
|
|
|
|
.sandbox-preview:has(.tab-radio[id$="-html"]:checked) .sandbox-preview-content[id^="tab-html-"] {
|
|
display: flex;
|
|
}
|
|
|
|
.sandbox-preview:has(.tab-radio[id$="-zig"]:checked) .sandbox-preview-content[id^="tab-preview-"] {
|
|
display: none;
|
|
}
|
|
|
|
.sandbox-preview:has(.tab-radio[id$="-zig"]:checked) .sandbox-preview-content[id^="tab-zig-"] {
|
|
display: flex;
|
|
}
|
|
|
|
.sandbox-preview-frame {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 150px;
|
|
border: none;
|
|
background: #16181d !important;
|
|
}
|
|
|
|
.sandbox-code-content {
|
|
background: var(--sandbox-bg);
|
|
overflow: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.sandbox-code-content pre {
|
|
margin: 0;
|
|
padding: 16px;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: var(--sandbox-bg);
|
|
height: 100%;
|
|
min-height: 0;
|
|
position: static;
|
|
}
|
|
|
|
.sandbox-code-content code {
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 13px;
|
|
}
|
|
|
|
|
|
/* Hide the radio inputs */
|
|
.sandbox-preview .tab-radio {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Responsive - Sandbox (Tablet) */
|
|
@media (max-width: 900px) {
|
|
.sandbox-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sandbox-editor {
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--sandbox-border);
|
|
}
|
|
}
|
|
|
|
/* Responsive - Sandbox (Mobile) */
|
|
@media (max-width: 768px) {
|
|
.sandbox {
|
|
border-radius: 8px;
|
|
margin: 1rem 0;
|
|
width: 100%;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.sandbox-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sandbox-editor {
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--sandbox-border);
|
|
max-height: 280px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.sandbox-preview {
|
|
min-height: 120px;
|
|
}
|
|
|
|
.sandbox-code {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.sandbox-code code,
|
|
.sandbox-code-lines {
|
|
font-size: 11px;
|
|
padding: 10px;
|
|
white-space: pre;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.sandbox-code-pre {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.install-code {
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.sandbox-tab {
|
|
padding: 0 8px;
|
|
font-size: 10px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.sandbox-tab svg {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.sandbox-tabs {
|
|
height: 36px;
|
|
}
|
|
|
|
.sandbox-editor-header,
|
|
.sandbox-preview-header {
|
|
min-height: 36px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.sandbox-preview-tab {
|
|
padding: 0 6px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.sandbox-preview-tabs {
|
|
height: 36px;
|
|
}
|
|
|
|
.sandbox-action-btn {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
.sandbox-action-btn svg {
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
|
|
.sandbox-preview-frame {
|
|
min-height: 120px;
|
|
}
|
|
}
|
|
|
|
/* Multi-file tabs support */
|
|
.file-radio {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sandbox-file-tabs {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sandbox-file-tabs .sandbox-tab {
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.sandbox-file-tabs .sandbox-tab:hover {
|
|
color: var(--sandbox-tab-active);
|
|
}
|
|
|
|
/* Hide all file contents by default */
|
|
.file-content {
|
|
display: none;
|
|
}
|
|
|
|
/* Show first file content by default */
|
|
.file-content:first-of-type {
|
|
display: block;
|
|
}
|
|
|
|
/* File tab active states using :has() */
|
|
.sandbox-editor:has(.file-radio:checked) .file-content {
|
|
display: none;
|
|
}
|
|
|
|
.sandbox-editor:has(.file-radio[id$="-0"]:checked) .file-content[id$="-0"] {
|
|
display: block;
|
|
}
|
|
|
|
.sandbox-editor:has(.file-radio[id$="-1"]:checked) .file-content[id$="-1"] {
|
|
display: block;
|
|
}
|
|
|
|
.sandbox-editor:has(.file-radio[id$="-2"]:checked) .file-content[id$="-2"] {
|
|
display: block;
|
|
}
|
|
|
|
.sandbox-editor:has(.file-radio[id$="-3"]:checked) .file-content[id$="-3"] {
|
|
display: block;
|
|
}
|
|
|
|
.sandbox-editor:has(.file-radio[id$="-4"]:checked) .file-content[id$="-4"] {
|
|
display: block;
|
|
}
|
|
|
|
/* File tab label styling */
|
|
.sandbox-file-tabs label.sandbox-tab {
|
|
color: var(--sandbox-tab-text);
|
|
}
|
|
|
|
/* Active file tab styling */
|
|
.file-radio:checked+label.sandbox-tab {
|
|
color: var(--sandbox-tab-active);
|
|
background: var(--sandbox-bg);
|
|
}
|
|
|
|
.file-radio:checked+label.sandbox-tab::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.file-radio:checked+label.sandbox-tab svg {
|
|
opacity: 1;
|
|
color: var(--sandbox-tab-active);
|
|
}
|
|
|
|
/* ===== Project Tree (Modern Style) ===== */
|
|
.project-tree {
|
|
background: #f8fafc;
|
|
border-radius: 10px;
|
|
padding: 0.625rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
line-height: 1.45;
|
|
overflow-x: auto;
|
|
border: 1px solid rgba(15, 23, 42, 0.12);
|
|
box-shadow: none;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.project-tree {
|
|
background: #111827;
|
|
border: 1px solid rgba(148, 163, 184, 0.2);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.project-tree-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.project-tree-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
white-space: nowrap;
|
|
padding: 0.4rem 0.5rem;
|
|
border-radius: 6px;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.project-tree-row:hover {
|
|
background: rgba(15, 23, 42, 0.06);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.project-tree-row:hover {
|
|
background: rgba(148, 163, 184, 0.12);
|
|
}
|
|
}
|
|
|
|
.project-tree-branch {
|
|
color: rgba(0, 0, 0, 0.2);
|
|
user-select: none;
|
|
font-size: 0.75rem;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.project-tree-branch {
|
|
color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
.project-tree-folder,
|
|
.project-tree-file {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.project-tree-folder {
|
|
color: #0f172a;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.project-tree-folder {
|
|
color: #e8e8e8;
|
|
}
|
|
}
|
|
|
|
.project-tree-file {
|
|
color: rgba(15, 23, 42, 0.76);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.project-tree-file {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
}
|
|
|
|
.project-tree-name {
|
|
color: inherit;
|
|
}
|
|
|
|
.project-tree-desc {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: rgba(15, 23, 42, 0.52);
|
|
font-size: 0.7rem;
|
|
margin-left: auto;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
max-width: 48%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.project-tree-desc {
|
|
color: rgba(226, 232, 240, 0.55);
|
|
}
|
|
}
|
|
|
|
.project-tree-row:hover .project-tree-desc {
|
|
color: rgba(15, 23, 42, 0.68);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.project-tree-row:hover .project-tree-desc {
|
|
color: rgba(226, 232, 240, 0.72);
|
|
}
|
|
}
|
|
|
|
.project-tree-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
opacity: 0.88;
|
|
}
|
|
|
|
.project-tree-icon-folder {
|
|
color: #64748b;
|
|
}
|
|
|
|
.project-tree-icon-zig {
|
|
color: #f7a41d;
|
|
}
|
|
|
|
.project-tree-icon-css {
|
|
color: #0ea5e9;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.project-tree-icon-css {
|
|
color: #38bdf8;
|
|
}
|
|
}
|
|
|
|
.project-tree-icon-md {
|
|
color: #64748b;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.project-tree-icon-md {
|
|
color: #94a3b8;
|
|
}
|
|
}
|
|
|
|
.project-tree-icon-image {
|
|
color: #22c55e;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.project-tree-icon-image {
|
|
color: #4ade80;
|
|
}
|
|
}
|
|
|
|
.project-tree-icon-file {
|
|
color: rgba(15, 23, 42, 0.4);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.project-tree-icon-file {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.project-tree {
|
|
font-size: 0.75rem;
|
|
padding: 0.45rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.project-tree-row {
|
|
padding: 0.35rem 0.45rem;
|
|
}
|
|
|
|
.project-tree-desc {
|
|
display: none;
|
|
}
|
|
} |