/* * VOID — A dual-theme system by Claude * * Dark by default. Light by choice. Auto-detects OS preference. * * Theme switching: * — force dark * — force light * — auto (follows OS prefers-color-scheme) * * Design philosophy: * Dark: near-black backgrounds, blue-shifted grays, hierarchy through brightness * Light: warm parchment surfaces, ink-on-paper text, depth through shadow * * Usage: * * — that's it. Styles apply to semantic HTML and .void-* classes. */ /* ============================================ 1. SHARED TOKENS (theme-independent) ============================================ */ :root { /* Typography */ --void-font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, 'Liberation Mono', monospace; --void-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --void-font-base: var(--void-font-sans); --void-text-xs: 11px; --void-text-sm: 12px; --void-text-md: 14px; --void-text-base: 15px; --void-text-lg: 17px; --void-text-xl: 20px; --void-text-2xl: 26px; --void-leading: 1.75; /* Spacing */ --void-space-xs: 4px; --void-space-sm: 8px; --void-space-md: 16px; --void-space-lg: 24px; --void-space-xl: 32px; --void-space-2xl: 48px; /* Radii (constant) */ --void-radius-lg: 8px; /* Transitions */ --void-transition: 0.2s ease; --void-transition-slow: 0.4s ease; } /* ============================================ 2. DARK THEME TOKENS (default) ============================================ */ :root { /* --- Colors --- */ --void-bg-deep: #06060a; --void-bg: #0a0a10; --void-bg-raised: #0e0e16; --void-bg-overlay: #12121c; --void-bg-hover: #161622; --void-border: #1a1a2a; --void-border-hover: #2a2a4a; --void-border-focus: #3a4a6a; --void-text-ghost: #383848; --void-text-muted: #606078; --void-text-dim: #7888a8; --void-text: #b0b0c8; --void-text-bright: #d0d0e0; --void-text-heading: #94a4c4; --void-accent: #5080c0; --void-accent-hover: #6090d0; --void-accent-dim: #304060; --void-danger: #c06060; --void-danger-dim: #804040; --void-warning: #c09060; --void-warning-dim: #806040; --void-success: #60c090; --void-success-dim: #408060; --void-info: #60a0c0; --void-info-dim: #406080; /* --- Structural --- */ --void-shadow-sm: none; --void-shadow: none; --void-shadow-lg: none; --void-heading-weight: normal; --void-heading-tracking: 0; --void-body-tracking: 0; --void-label-weight: normal; --void-focus-width: 1px; --void-scrollbar-width: 6px; --void-leading-tight: 1.5; --void-radius-sm: 2px; --void-radius: 4px; /* --- Component: cards --- */ --void-card-bg: var(--void-bg-raised); --void-card-accent-width: 2px; --void-card-accent-color: var(--void-accent-dim); --void-card-interactive-hover-bg: var(--void-bg-overlay); /* --- Component: buttons --- */ --void-btn-bg: var(--void-bg-overlay); --void-btn-hover-bg: var(--void-bg-hover); --void-btn-primary-bg: var(--void-accent-dim); --void-btn-primary-hover-bg: var(--void-accent); --void-btn-danger-fill: var(--void-danger-dim); --void-text-on-filled: var(--void-text-bright); /* --- Component: forms --- */ --void-input-bg: var(--void-bg-deep); --void-input-shadow: none; --void-input-focus-shadow: none; /* --- Component: code --- */ --void-bg-code: var(--void-bg-raised); --void-code-border: var(--void-border); --void-code-color: var(--void-text-bright); --void-pre-shadow: none; /* --- Component: badges --- */ --void-badge-bg: transparent; --void-badge-weight: normal; --void-badge-danger-bg: transparent; --void-badge-warning-bg: transparent; --void-badge-success-bg: transparent; --void-badge-info-bg: transparent; --void-badge-accent-bg: transparent; /* --- Component: alerts --- */ --void-alert-border-width: 2px; --void-alert-radius: 0; --void-alert-danger-bg: var(--void-bg-raised); --void-alert-danger-border: var(--void-danger-dim); --void-alert-danger-text: var(--void-text); --void-alert-warning-bg: var(--void-bg-raised); --void-alert-warning-border: var(--void-warning-dim); --void-alert-warning-text: var(--void-text); --void-alert-success-bg: var(--void-bg-raised); --void-alert-success-border: var(--void-success-dim); --void-alert-success-text: var(--void-text); --void-alert-info-bg: var(--void-bg-raised); --void-alert-info-border: var(--void-info-dim); --void-alert-info-text: var(--void-text); /* --- Component: overlay / modal --- */ --void-overlay-bg: rgba(4, 4, 8, 0.8); --void-overlay-blur: 4px; --void-modal-radius: var(--void-radius); --void-modal-bg: var(--void-bg-overlay); /* --- Component: nav --- */ --void-nav-border-width: 1px; --void-nav-active-color: var(--void-text-heading); --void-nav-active-border: var(--void-accent-dim); --void-nav-font-weight: normal; /* --- Component: table --- */ --void-table-header-weight: normal; --void-table-header-border-width: 1px; --void-table-hover-bg: var(--void-bg-raised); /* --- Component: blockquote --- */ --void-blockquote-border-width: 2px; --void-blockquote-border-color: var(--void-border); /* --- Component: sidebar --- */ --void-sidebar-bg: var(--void-bg-deep); --void-sidebar-width: 220px; --void-sidebar-item-hover-bg: var(--void-bg-raised); --void-sidebar-item-active-bg: var(--void-bg-overlay); --void-sidebar-item-active-border: var(--void-accent); --void-sidebar-group-color: var(--void-text-ghost); /* --- Component: topbar --- */ --void-topbar-bg: var(--void-bg-deep); --void-topbar-border: var(--void-border); --void-topbar-height: 48px; /* --- Component: avatar --- */ --void-avatar-bg: var(--void-accent-dim); --void-avatar-color: var(--void-accent); /* --- Component: progress --- */ --void-progress-bg: var(--void-bg-overlay); --void-progress-height: 6px; /* --- Component: toggle / switch --- */ --void-switch-bg: var(--void-bg-overlay); --void-switch-checked-bg: var(--void-accent); --void-switch-thumb: var(--void-text-dim); /* --- Component: tooltip --- */ --void-tooltip-bg: var(--void-bg-overlay); --void-tooltip-color: var(--void-text-bright); /* --- Component: dropdown --- */ --void-dropdown-bg: var(--void-bg-overlay); --void-dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); --void-dropdown-hover-bg: var(--void-bg-hover); /* --- Component: skeleton --- */ --void-skeleton-bg: var(--void-bg-raised); --void-skeleton-shine: var(--void-bg-overlay); } /* ============================================ 3. LIGHT THEME TOKENS ============================================ */ [data-theme="light"] { /* --- Colors --- */ --void-bg-deep: #faf7f2; --void-bg: #f4f0e8; --void-bg-raised: #ece7de; --void-bg-overlay: #e4ded4; --void-bg-hover: #ddd6cb; --void-border: #d8d2c6; --void-border-hover: #c6bfb2; --void-border-focus: #7eaabe; --void-text-ghost: #c8c3b8; --void-text-muted: #9a958a; --void-text-dim: #706b60; --void-text: #44403a; --void-text-bright: #1e1c18; --void-text-heading: #2a2e3a; --void-accent: #3a6b82; --void-accent-hover: #2c5a70; --void-accent-dim: #d8e6ee; --void-danger: #a0524a; --void-danger-dim: #f4ddd9; --void-warning: #9a7a3a; --void-warning-dim: #f4ead0; --void-success: #487a5e; --void-success-dim: #d8ece2; --void-info: #4a7088; --void-info-dim: #d6e6f0; /* --- Structural --- */ --void-shadow-sm: 0 1px 2px rgba(60, 50, 40, 0.04); --void-shadow: 0 2px 8px rgba(60, 50, 40, 0.06), 0 1px 2px rgba(60, 50, 40, 0.04); --void-shadow-lg: 0 8px 24px rgba(60, 50, 40, 0.08), 0 2px 8px rgba(60, 50, 40, 0.04); --void-heading-weight: 600; --void-heading-tracking: -0.01em; --void-body-tracking: 0.005em; --void-label-weight: 500; --void-focus-width: 2px; --void-scrollbar-width: 7px; --void-leading-tight: 1.45; --void-radius-sm: 3px; --void-radius: 5px; /* --- Component: cards --- */ --void-card-bg: var(--void-bg-deep); --void-card-accent-width: 3px; --void-card-accent-color: var(--void-accent); --void-card-interactive-hover-bg: var(--void-bg); /* --- Component: buttons --- */ --void-btn-bg: var(--void-bg-deep); --void-btn-hover-bg: var(--void-bg-deep); --void-btn-primary-bg: var(--void-accent); --void-btn-primary-hover-bg: var(--void-accent-hover); --void-btn-danger-fill: var(--void-danger); --void-text-on-filled: #faf8f4; /* --- Component: forms --- */ --void-input-bg: #fff; --void-input-shadow: inset 0 1px 3px rgba(60, 50, 40, 0.04); --void-input-focus-shadow: inset 0 1px 3px rgba(60, 50, 40, 0.04), 0 0 0 3px rgba(126, 170, 190, 0.15); /* --- Component: code --- */ --void-bg-code: #edf0f4; --void-code-border: #dce0e6; --void-code-color: var(--void-text-heading); --void-pre-shadow: var(--void-shadow-sm); /* --- Component: badges --- */ --void-badge-bg: var(--void-bg-raised); --void-badge-weight: 500; --void-badge-danger-bg: var(--void-danger-dim); --void-badge-warning-bg: var(--void-warning-dim); --void-badge-success-bg: var(--void-success-dim); --void-badge-info-bg: var(--void-info-dim); --void-badge-accent-bg: var(--void-accent-dim); /* --- Component: alerts --- */ --void-alert-border-width: 3px; --void-alert-radius: var(--void-radius-sm); --void-alert-danger-bg: var(--void-danger-dim); --void-alert-danger-border: var(--void-danger); --void-alert-danger-text: #7a3e38; --void-alert-warning-bg: var(--void-warning-dim); --void-alert-warning-border: var(--void-warning); --void-alert-warning-text: #74602e; --void-alert-success-bg: var(--void-success-dim); --void-alert-success-border: var(--void-success); --void-alert-success-text: #36604a; --void-alert-info-bg: var(--void-info-dim); --void-alert-info-border: var(--void-info); --void-alert-info-text: #3a5868; /* --- Component: overlay / modal --- */ --void-overlay-bg: rgba(30, 28, 24, 0.3); --void-overlay-blur: 6px; --void-modal-radius: var(--void-radius-lg); --void-modal-bg: var(--void-bg-deep); /* --- Component: nav --- */ --void-nav-border-width: 2px; --void-nav-active-color: var(--void-accent); --void-nav-active-border: var(--void-accent); --void-nav-font-weight: 500; /* --- Component: table --- */ --void-table-header-weight: 600; --void-table-header-border-width: 2px; --void-table-hover-bg: var(--void-bg-deep); /* --- Component: blockquote --- */ --void-blockquote-border-width: 3px; --void-blockquote-border-color: var(--void-accent-dim); /* --- Component: sidebar --- */ --void-sidebar-bg: var(--void-bg-deep); --void-sidebar-width: 220px; --void-sidebar-item-hover-bg: var(--void-bg-raised); --void-sidebar-item-active-bg: var(--void-accent-dim); --void-sidebar-item-active-border: var(--void-accent); --void-sidebar-group-color: var(--void-text-muted); /* --- Component: topbar --- */ --void-topbar-bg: var(--void-bg-deep); --void-topbar-border: var(--void-border); --void-topbar-height: 48px; /* --- Component: avatar --- */ --void-avatar-bg: var(--void-accent-dim); --void-avatar-color: var(--void-accent); /* --- Component: progress --- */ --void-progress-bg: var(--void-bg-raised); --void-progress-height: 6px; /* --- Component: toggle / switch --- */ --void-switch-bg: var(--void-border); --void-switch-checked-bg: var(--void-accent); --void-switch-thumb: #fff; /* --- Component: tooltip --- */ --void-tooltip-bg: var(--void-text-bright); --void-tooltip-color: var(--void-bg-deep); /* --- Component: dropdown --- */ --void-dropdown-bg: var(--void-bg-deep); --void-dropdown-shadow: var(--void-shadow-lg); --void-dropdown-hover-bg: var(--void-bg-raised); /* --- Component: skeleton --- */ --void-skeleton-bg: var(--void-bg-raised); --void-skeleton-shine: var(--void-bg-deep); } /* ============================================ 4. AUTO-DETECTION (OS preference) Mirrors section 3. Applied when no data-theme is set and the OS prefers light color scheme. ============================================ */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --void-bg-deep: #faf7f2; --void-bg: #f4f0e8; --void-bg-raised: #ece7de; --void-bg-overlay: #e4ded4; --void-bg-hover: #ddd6cb; --void-border: #d8d2c6; --void-border-hover: #c6bfb2; --void-border-focus: #7eaabe; --void-text-ghost: #c8c3b8; --void-text-muted: #9a958a; --void-text-dim: #706b60; --void-text: #44403a; --void-text-bright: #1e1c18; --void-text-heading: #2a2e3a; --void-accent: #3a6b82; --void-accent-hover: #2c5a70; --void-accent-dim: #d8e6ee; --void-danger: #a0524a; --void-danger-dim: #f4ddd9; --void-warning: #9a7a3a; --void-warning-dim: #f4ead0; --void-success: #487a5e; --void-success-dim: #d8ece2; --void-info: #4a7088; --void-info-dim: #d6e6f0; --void-shadow-sm: 0 1px 2px rgba(60, 50, 40, 0.04); --void-shadow: 0 2px 8px rgba(60, 50, 40, 0.06), 0 1px 2px rgba(60, 50, 40, 0.04); --void-shadow-lg: 0 8px 24px rgba(60, 50, 40, 0.08), 0 2px 8px rgba(60, 50, 40, 0.04); --void-heading-weight: 600; --void-heading-tracking: -0.01em; --void-body-tracking: 0.005em; --void-label-weight: 500; --void-focus-width: 2px; --void-scrollbar-width: 7px; --void-leading-tight: 1.45; --void-radius-sm: 3px; --void-radius: 5px; --void-card-bg: var(--void-bg-deep); --void-card-accent-width: 3px; --void-card-accent-color: var(--void-accent); --void-card-interactive-hover-bg: var(--void-bg); --void-btn-bg: var(--void-bg-deep); --void-btn-hover-bg: var(--void-bg-deep); --void-btn-primary-bg: var(--void-accent); --void-btn-primary-hover-bg: var(--void-accent-hover); --void-btn-danger-fill: var(--void-danger); --void-text-on-filled: #faf8f4; --void-input-bg: #fff; --void-input-shadow: inset 0 1px 3px rgba(60, 50, 40, 0.04); --void-input-focus-shadow: inset 0 1px 3px rgba(60, 50, 40, 0.04), 0 0 0 3px rgba(126, 170, 190, 0.15); --void-bg-code: #edf0f4; --void-code-border: #dce0e6; --void-code-color: var(--void-text-heading); --void-pre-shadow: var(--void-shadow-sm); --void-badge-bg: var(--void-bg-raised); --void-badge-weight: 500; --void-badge-danger-bg: var(--void-danger-dim); --void-badge-warning-bg: var(--void-warning-dim); --void-badge-success-bg: var(--void-success-dim); --void-badge-info-bg: var(--void-info-dim); --void-badge-accent-bg: var(--void-accent-dim); --void-alert-border-width: 3px; --void-alert-radius: var(--void-radius-sm); --void-alert-danger-bg: var(--void-danger-dim); --void-alert-danger-border: var(--void-danger); --void-alert-danger-text: #7a3e38; --void-alert-warning-bg: var(--void-warning-dim); --void-alert-warning-border: var(--void-warning); --void-alert-warning-text: #74602e; --void-alert-success-bg: var(--void-success-dim); --void-alert-success-border: var(--void-success); --void-alert-success-text: #36604a; --void-alert-info-bg: var(--void-info-dim); --void-alert-info-border: var(--void-info); --void-alert-info-text: #3a5868; --void-overlay-bg: rgba(30, 28, 24, 0.3); --void-overlay-blur: 6px; --void-modal-radius: var(--void-radius-lg); --void-modal-bg: var(--void-bg-deep); --void-nav-border-width: 2px; --void-nav-active-color: var(--void-accent); --void-nav-active-border: var(--void-accent); --void-nav-font-weight: 500; --void-table-header-weight: 600; --void-table-header-border-width: 2px; --void-table-hover-bg: var(--void-bg-deep); --void-blockquote-border-width: 3px; --void-blockquote-border-color: var(--void-accent-dim); /* --- Component: sidebar --- */ --void-sidebar-bg: var(--void-bg-deep); --void-sidebar-width: 220px; --void-sidebar-item-hover-bg: var(--void-bg-raised); --void-sidebar-item-active-bg: var(--void-accent-dim); --void-sidebar-item-active-border: var(--void-accent); --void-sidebar-group-color: var(--void-text-muted); /* --- Component: topbar --- */ --void-topbar-bg: var(--void-bg-deep); --void-topbar-border: var(--void-border); --void-topbar-height: 48px; /* --- Component: avatar --- */ --void-avatar-bg: var(--void-accent-dim); --void-avatar-color: var(--void-accent); /* --- Component: progress --- */ --void-progress-bg: var(--void-bg-raised); --void-progress-height: 6px; /* --- Component: toggle / switch --- */ --void-switch-bg: var(--void-border); --void-switch-checked-bg: var(--void-accent); --void-switch-thumb: #fff; /* --- Component: tooltip --- */ --void-tooltip-bg: var(--void-text-bright); --void-tooltip-color: var(--void-bg-deep); /* --- Component: dropdown --- */ --void-dropdown-bg: var(--void-bg-deep); --void-dropdown-shadow: var(--void-shadow-lg); --void-dropdown-hover-bg: var(--void-bg-raised); /* --- Component: skeleton --- */ --void-skeleton-bg: var(--void-bg-raised); --void-skeleton-shine: var(--void-bg-deep); } } /* ============================================ 5. RESET & BASE ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: var(--void-text-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--void-bg); color: var(--void-text); font-family: var(--void-font-base); line-height: var(--void-leading); letter-spacing: var(--void-body-tracking); } ::selection { background: var(--void-accent-dim); color: var(--void-text-bright); } ::-webkit-scrollbar { width: var(--void-scrollbar-width); height: var(--void-scrollbar-width); } ::-webkit-scrollbar-track { background: var(--void-bg); } ::-webkit-scrollbar-thumb { background: var(--void-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--void-border-hover); } /* ============================================ 6. TYPOGRAPHY ============================================ */ h1, h2, h3, h4, h5, h6 { color: var(--void-text-heading); font-weight: var(--void-heading-weight); line-height: var(--void-leading-tight); letter-spacing: var(--void-heading-tracking); } h1 { font-size: var(--void-text-2xl); margin-bottom: var(--void-space-md); } h2 { font-size: var(--void-text-xl); margin-bottom: var(--void-space-md); } h3 { font-size: var(--void-text-lg); margin-bottom: var(--void-space-sm); } h4 { font-size: var(--void-text-base); margin-bottom: var(--void-space-sm); } p { margin-bottom: var(--void-space-md); color: var(--void-text); } small, .void-small { font-size: var(--void-text-sm); color: var(--void-text-muted); } a { color: var(--void-accent); text-decoration: none; transition: color var(--void-transition); } a:hover { color: var(--void-accent-hover); } strong { color: var(--void-text-bright); font-weight: 600; } em { color: var(--void-text-dim); font-style: italic; } code { background: var(--void-bg-code); border: 1px solid var(--void-code-border); padding: 2px 6px; border-radius: var(--void-radius-sm); font-size: 0.9em; font-family: var(--void-font-mono); color: var(--void-code-color); } pre { background: var(--void-bg-code); border: 1px solid var(--void-code-border); border-radius: var(--void-radius); padding: var(--void-space-md); overflow-x: auto; margin-bottom: var(--void-space-md); font-family: var(--void-font-mono); font-size: var(--void-text-md); line-height: 1.65; box-shadow: var(--void-pre-shadow); } pre code { background: none; border: none; padding: 0; font-size: var(--void-text-md); color: var(--void-text); } blockquote { border-left: var(--void-blockquote-border-width) solid var(--void-blockquote-border-color); padding-left: var(--void-space-md); color: var(--void-text-dim); font-style: italic; margin-bottom: var(--void-space-md); } hr { border: none; border-top: 1px solid var(--void-border); margin: var(--void-space-xl) 0; } /* Lists */ ul, ol { padding-left: var(--void-space-lg); margin-bottom: var(--void-space-md); } li { margin-bottom: var(--void-space-xs); } li::marker { color: var(--void-text-ghost); } /* ============================================ 7. LAYOUT ============================================ */ .void-container { max-width: 800px; margin: 0 auto; padding: var(--void-space-xl) var(--void-space-lg); } .void-container-wide { max-width: 1100px; margin: 0 auto; padding: var(--void-space-xl) var(--void-space-lg); } .void-grid { display: grid; gap: var(--void-space-md); } .void-grid-2 { grid-template-columns: repeat(2, 1fr); } .void-grid-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 640px) { .void-grid-2, .void-grid-3 { grid-template-columns: 1fr; } } .void-flex { display: flex; gap: var(--void-space-md); align-items: center; } .void-stack { display: flex; flex-direction: column; gap: var(--void-space-md); } /* ============================================ 8. CARDS ============================================ */ .void-card { background: var(--void-card-bg); border: 1px solid var(--void-border); border-radius: var(--void-radius); padding: var(--void-space-md); box-shadow: var(--void-shadow); transition: border-color var(--void-transition), box-shadow var(--void-transition); } .void-card:hover { border-color: var(--void-border-hover); box-shadow: var(--void-shadow-lg); } .void-card-header { color: var(--void-text-heading); font-size: var(--void-text-base); font-weight: var(--void-heading-weight); margin-bottom: var(--void-space-sm); } .void-card-body { color: var(--void-text); font-size: var(--void-text-md); } .void-card-footer { margin-top: var(--void-space-md); padding-top: var(--void-space-sm); border-top: 1px solid var(--void-border); color: var(--void-text-muted); font-size: var(--void-text-sm); } /* Card with left accent border */ .void-card-accent { border-left: var(--void-card-accent-width) solid var(--void-card-accent-color); } /* Clickable card */ .void-card-interactive { cursor: pointer; } .void-card-interactive:hover { background: var(--void-card-interactive-hover-bg); } /* ============================================ 9. BUTTONS ============================================ */ .void-btn { display: inline-flex; align-items: center; gap: var(--void-space-sm); background: var(--void-btn-bg); color: var(--void-text-dim); border: 1px solid var(--void-border); padding: var(--void-space-sm) var(--void-space-md); font: var(--void-text-md) var(--void-font-base); border-radius: var(--void-radius-sm); cursor: pointer; box-shadow: var(--void-shadow-sm); transition: all var(--void-transition); text-decoration: none; } .void-btn:hover { color: var(--void-text-bright); border-color: var(--void-border-hover); background: var(--void-btn-hover-bg); box-shadow: var(--void-shadow); } .void-btn:active { background: var(--void-bg-raised); box-shadow: none; } .void-btn:focus-visible { outline: var(--void-focus-width) solid var(--void-border-focus); outline-offset: 1px; } /* Primary button */ .void-btn-primary { background: var(--void-btn-primary-bg); color: var(--void-text-on-filled); border-color: var(--void-accent); } .void-btn-primary:hover { background: var(--void-btn-primary-hover-bg); border-color: var(--void-btn-primary-hover-bg); color: #fff; } /* Ghost button */ .void-btn-ghost { background: transparent; border-color: transparent; box-shadow: none; } .void-btn-ghost:hover { background: var(--void-bg-raised); border-color: var(--void-border); } /* Danger button */ .void-btn-danger { color: var(--void-danger); border-color: var(--void-btn-danger-fill); } .void-btn-danger:hover { background: var(--void-btn-danger-fill); color: var(--void-text-on-filled); } /* Button sizes */ .void-btn-sm { padding: var(--void-space-xs) var(--void-space-sm); font-size: var(--void-text-sm); } .void-btn-lg { padding: var(--void-space-md) var(--void-space-lg); font-size: var(--void-text-base); } /* Button group */ .void-btn-group { display: inline-flex; } .void-btn-group .void-btn { border-radius: 0; } .void-btn-group .void-btn:first-child { border-radius: var(--void-radius-sm) 0 0 var(--void-radius-sm); } .void-btn-group .void-btn:last-child { border-radius: 0 var(--void-radius-sm) var(--void-radius-sm) 0; } .void-btn-group .void-btn + .void-btn { border-left: none; } /* ============================================ 10. FORMS ============================================ */ .void-input, .void-textarea, .void-select { background: var(--void-input-bg); color: var(--void-text); border: 1px solid var(--void-border); border-radius: var(--void-radius-sm); padding: var(--void-space-sm) var(--void-space-md); font: var(--void-text-md) var(--void-font-base); transition: border-color var(--void-transition), box-shadow var(--void-transition); width: 100%; box-shadow: var(--void-input-shadow); } .void-input:focus, .void-textarea:focus, .void-select:focus { outline: none; border-color: var(--void-border-focus); box-shadow: var(--void-input-focus-shadow); } .void-input::placeholder, .void-textarea::placeholder { color: var(--void-text-ghost); } .void-textarea { min-height: 100px; resize: vertical; line-height: var(--void-leading); } .void-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23505068' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 28px; cursor: pointer; } .void-label { display: block; color: var(--void-text-dim); font-size: var(--void-text-sm); font-weight: var(--void-label-weight); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--void-space-xs); } .void-field { margin-bottom: var(--void-space-md); } .void-hint { color: var(--void-text-muted); font-size: var(--void-text-xs); margin-top: var(--void-space-xs); } /* Checkbox & Radio */ .void-check { display: flex; align-items: center; gap: var(--void-space-sm); cursor: pointer; font-size: var(--void-text-md); color: var(--void-text); } .void-check input { accent-color: var(--void-accent); } /* ============================================ 11. BADGES & TAGS ============================================ */ .void-badge { display: inline-block; padding: 2px 8px; font-size: var(--void-text-xs); font-weight: var(--void-badge-weight); border: 1px solid var(--void-border); border-radius: var(--void-radius-sm); color: var(--void-text-dim); text-transform: uppercase; letter-spacing: 0.5px; background: var(--void-badge-bg); } .void-badge-danger { background: var(--void-badge-danger-bg); border-color: var(--void-danger-dim); color: var(--void-danger); } .void-badge-warning { background: var(--void-badge-warning-bg); border-color: var(--void-warning-dim); color: var(--void-warning); } .void-badge-success { background: var(--void-badge-success-bg); border-color: var(--void-success-dim); color: var(--void-success); } .void-badge-info { background: var(--void-badge-info-bg); border-color: var(--void-info-dim); color: var(--void-info); } .void-badge-accent { background: var(--void-badge-accent-bg); border-color: var(--void-accent-dim); color: var(--void-accent); } /* ============================================ 12. TABLE ============================================ */ .void-table { width: 100%; border-collapse: collapse; font-size: var(--void-text-md); margin-bottom: var(--void-space-md); } .void-table th { text-align: left; color: var(--void-text-dim); font-weight: var(--void-table-header-weight); font-size: var(--void-text-sm); text-transform: uppercase; letter-spacing: 0.5px; padding: var(--void-space-sm) var(--void-space-md); border-bottom: var(--void-table-header-border-width) solid var(--void-border); } .void-table td { padding: var(--void-space-sm) var(--void-space-md); border-bottom: 1px solid var(--void-border); color: var(--void-text); } .void-table tr:hover td { background: var(--void-table-hover-bg); } .void-table-compact th, .void-table-compact td { padding: var(--void-space-xs) var(--void-space-sm); } /* ============================================ 13. ALERTS / NOTICES ============================================ */ .void-alert { border-left: var(--void-alert-border-width) solid var(--void-border); border-radius: var(--void-alert-radius); padding: var(--void-space-md); margin-bottom: var(--void-space-md); background: var(--void-bg-raised); font-size: var(--void-text-md); } .void-alert-danger { border-left-color: var(--void-alert-danger-border); background: var(--void-alert-danger-bg); color: var(--void-alert-danger-text); } .void-alert-warning { border-left-color: var(--void-alert-warning-border); background: var(--void-alert-warning-bg); color: var(--void-alert-warning-text); } .void-alert-success { border-left-color: var(--void-alert-success-border); background: var(--void-alert-success-bg); color: var(--void-alert-success-text); } .void-alert-info { border-left-color: var(--void-alert-info-border); background: var(--void-alert-info-bg); color: var(--void-alert-info-text); } /* ============================================ 14. NAV ============================================ */ .void-nav { display: flex; gap: 0; border-bottom: var(--void-nav-border-width) solid var(--void-border); margin-bottom: var(--void-space-xl); } .void-nav a, .void-nav button { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: calc(-1 * var(--void-nav-border-width)); color: var(--void-text-muted); font: var(--void-text-sm) var(--void-font-base); font-weight: var(--void-nav-font-weight); padding: var(--void-space-sm) var(--void-space-md); cursor: pointer; transition: all var(--void-transition); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; } .void-nav a:hover, .void-nav button:hover { color: var(--void-text); } .void-nav .active { color: var(--void-nav-active-color); border-bottom-color: var(--void-nav-active-border); } /* ============================================ 15. MODAL / DIALOG ============================================ */ .void-overlay { position: fixed; inset: 0; background: var(--void-overlay-bg); backdrop-filter: blur(var(--void-overlay-blur)); display: flex; align-items: center; justify-content: center; z-index: 1000; } .void-modal { background: var(--void-modal-bg); border: 1px solid var(--void-border); border-radius: var(--void-modal-radius); padding: var(--void-space-lg); max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: var(--void-shadow-lg); } .void-modal-header { color: var(--void-text-heading); font-size: var(--void-text-lg); font-weight: var(--void-heading-weight); margin-bottom: var(--void-space-md); } .void-modal-footer { margin-top: var(--void-space-lg); display: flex; justify-content: flex-end; gap: var(--void-space-sm); } /* ============================================ 16. UTILITIES ============================================ */ .void-text-ghost { color: var(--void-text-ghost); } .void-text-muted { color: var(--void-text-muted); } .void-text-dim { color: var(--void-text-dim); } .void-text-bright { color: var(--void-text-bright); } .void-text-heading { color: var(--void-text-heading); } .void-text-danger { color: var(--void-danger); } .void-text-warning { color: var(--void-warning); } .void-text-success { color: var(--void-success); } .void-text-accent { color: var(--void-accent); } .void-text-xs { font-size: var(--void-text-xs); } .void-text-sm { font-size: var(--void-text-sm); } .void-text-md { font-size: var(--void-text-md); } .void-text-lg { font-size: var(--void-text-lg); } .void-text-xl { font-size: var(--void-text-xl); } .void-uppercase { text-transform: uppercase; letter-spacing: 0.5px; } .void-mono { font-family: var(--void-font-mono); } .void-sans { font-family: var(--void-font-sans); } .void-mt-0 { margin-top: 0; } .void-mb-sm { margin-bottom: var(--void-space-sm); } .void-mb-md { margin-bottom: var(--void-space-md); } .void-mb-lg { margin-bottom: var(--void-space-lg); } .void-mb-xl { margin-bottom: var(--void-space-xl); } .void-p-sm { padding: var(--void-space-sm); } .void-p-md { padding: var(--void-space-md); } .void-p-lg { padding: var(--void-space-lg); } .void-hidden { display: none; } .void-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ============================================ 17. APP LAYOUT ============================================ */ .void-app { display: flex; min-height: 100vh; overflow-x: hidden; } .void-main { flex: 1; margin-left: var(--void-sidebar-width); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } .void-main-content { flex: 1; padding: var(--void-space-lg); overflow-y: auto; overflow-x: hidden; } /* ============================================ 18. SIDEBAR ============================================ */ .void-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--void-sidebar-width); background: var(--void-sidebar-bg); border-right: 1px solid var(--void-border); display: flex; flex-direction: column; overflow-y: auto; z-index: 100; } .void-sidebar-brand { height: var(--void-topbar-height); display: flex; align-items: center; padding: 0 var(--void-space-md); color: var(--void-text-heading); font-size: var(--void-text-lg); font-weight: var(--void-heading-weight); letter-spacing: var(--void-heading-tracking); border-bottom: 1px solid var(--void-border); flex-shrink: 0; } .void-sidebar-nav { padding: var(--void-space-sm) 0; flex: 1; list-style: none; } .void-sidebar-group { padding: var(--void-space-md) var(--void-space-md) var(--void-space-xs); font-size: var(--void-text-xs); text-transform: uppercase; letter-spacing: 0.5px; color: var(--void-sidebar-group-color); } .void-sidebar-item { display: flex; align-items: center; gap: var(--void-space-sm); padding: var(--void-space-sm) var(--void-space-md); color: var(--void-text-dim); font-size: var(--void-text-md); text-decoration: none; border-left: 2px solid transparent; transition: all var(--void-transition); cursor: pointer; } .void-sidebar-item:hover { color: var(--void-text); background: var(--void-sidebar-item-hover-bg); } .void-sidebar-item.active { color: var(--void-text-bright); background: var(--void-sidebar-item-active-bg); border-left-color: var(--void-sidebar-item-active-border); } /* ============================================ 19. TOPBAR ============================================ */ .void-topbar { position: sticky; top: 0; height: var(--void-topbar-height); background: var(--void-topbar-bg); border-bottom: 1px solid var(--void-topbar-border); display: flex; align-items: center; padding: 0 var(--void-space-lg); gap: var(--void-space-md); z-index: 50; } .void-topbar-search { flex: 1; max-width: 400px; } .void-topbar-search .void-input { height: 32px; font-size: var(--void-text-sm); padding: var(--void-space-xs) var(--void-space-md); } .void-topbar-actions { display: flex; align-items: center; gap: var(--void-space-sm); margin-left: auto; } /* ============================================ 20. AVATAR ============================================ */ .void-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--void-avatar-bg); color: var(--void-avatar-color); font-size: var(--void-text-sm); font-weight: 600; line-height: 1; overflow: hidden; flex-shrink: 0; } .void-avatar img { width: 100%; height: 100%; object-fit: cover; } .void-avatar-sm { width: 24px; height: 24px; font-size: var(--void-text-xs); } .void-avatar-lg { width: 40px; height: 40px; font-size: var(--void-text-md); } /* ============================================ 21. KBD ============================================ */ kbd, .void-kbd { display: inline-block; padding: 2px 6px; font-family: var(--void-font-mono); font-size: var(--void-text-xs); color: var(--void-text-dim); background: var(--void-bg-raised); border: 1px solid var(--void-border); border-bottom-width: 2px; border-radius: var(--void-radius-sm); line-height: 1.4; } /* ============================================ 22. PROGRESS ============================================ */ .void-progress { width: 100%; height: var(--void-progress-height); background: var(--void-progress-bg); border-radius: 3px; overflow: hidden; } .void-progress-bar { height: 100%; border-radius: 3px; background: var(--void-accent); transition: width var(--void-transition-slow); } .void-progress-bar-success { background: var(--void-success); } .void-progress-bar-warning { background: var(--void-warning); } .void-progress-bar-danger { background: var(--void-danger); } .void-progress-bar-info { background: var(--void-info); } /* ============================================ 23. TOGGLE / SWITCH ============================================ */ .void-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; } .void-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .void-switch-track { position: absolute; inset: 0; background: var(--void-switch-bg); border-radius: 10px; border: 1px solid var(--void-border); cursor: pointer; transition: background var(--void-transition), border-color var(--void-transition); } .void-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--void-switch-thumb); transition: transform var(--void-transition); } .void-switch input:checked + .void-switch-track { background: var(--void-switch-checked-bg); border-color: var(--void-switch-checked-bg); } .void-switch input:checked + .void-switch-track::after { transform: translateX(16px); background: #fff; } .void-switch input:focus-visible + .void-switch-track { outline: var(--void-focus-width) solid var(--void-border-focus); outline-offset: 1px; } /* ============================================ 24. DIVIDER ============================================ */ .void-divider { border: none; border-top: 1px solid var(--void-border); margin: var(--void-space-lg) 0; } .void-divider[data-label] { position: relative; border-top: 1px solid var(--void-border); margin: var(--void-space-lg) 0; text-align: center; } .void-divider[data-label]::after { content: attr(data-label); position: relative; top: -0.65em; padding: 0 var(--void-space-sm); background: var(--void-bg); color: var(--void-text-muted); font-size: var(--void-text-xs); text-transform: uppercase; letter-spacing: 0.5px; } /* ============================================ 25. DROPDOWN ============================================ */ .void-dropdown { position: relative; display: inline-block; } .void-dropdown > summary { list-style: none; cursor: pointer; } .void-dropdown > summary::-webkit-details-marker { display: none; } .void-dropdown-menu { position: absolute; top: calc(100% + var(--void-space-xs)); left: 0; min-width: 160px; background: var(--void-dropdown-bg); border: 1px solid var(--void-border); border-radius: var(--void-radius); box-shadow: var(--void-dropdown-shadow); padding: var(--void-space-xs) 0; z-index: 200; } .void-dropdown-item { display: block; padding: var(--void-space-sm) var(--void-space-md); color: var(--void-text); font-size: var(--void-text-md); text-decoration: none; cursor: pointer; transition: background var(--void-transition); border: none; background: none; width: 100%; text-align: left; font-family: var(--void-font-base); } .void-dropdown-item:hover { background: var(--void-dropdown-hover-bg); color: var(--void-text-bright); } .void-dropdown-divider { border: none; border-top: 1px solid var(--void-border); margin: var(--void-space-xs) 0; } /* ============================================ 26. TOOLTIP ============================================ */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 4px 8px; background: var(--void-tooltip-bg); color: var(--void-tooltip-color); font-size: var(--void-text-xs); border-radius: var(--void-radius-sm); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--void-transition); z-index: 300; border: 1px solid var(--void-border); } [data-tooltip]:hover::after { opacity: 1; } /* ============================================ 27. SKELETON ============================================ */ .void-skeleton { background: var(--void-skeleton-bg); border-radius: var(--void-radius-sm); position: relative; overflow: hidden; } .void-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, var(--void-skeleton-shine) 50%, transparent 100% ); animation: void-shimmer 1.5s ease-in-out infinite; } @keyframes void-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }