/* ============================================================ ndigital CMS — Vercel-inspired design system Light & Dark mode via [data-theme="dark"] on ============================================================ */ /* === Reset & Variables === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #fafafa; --surface: #fff; --surface-hover: #f5f5f5; --text: #171717; --text-secondary: #666; --text-tertiary: #999; --border: #eaeaea; --border-hover: #ccc; --accent: #0070f3; --accent-hover: #005cc5; --accent-light: rgba(0,112,243,0.08); --danger: #e00; --danger-hover: #c00; --danger-light: rgba(238,0,0,0.06); --success: #0070f3; --success-bg: rgba(0,112,243,0.06); --radius: 8px; --radius-sm: 6px; --radius-lg: 12px; --shadow: 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 8px 30px rgba(0,0,0,0.12); --transition: 150ms ease; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-mono: 'SFMono-Regular', Menlo, Consolas, monospace; --nav-height: 48px; } [data-theme="dark"] { --bg: #000; --surface: #111; --surface-hover: #1a1a1a; --text: #ededed; --text-secondary: #888; --text-tertiary: #555; --border: #333; --border-hover: #555; --accent: #0070f3; --accent-hover: #3291ff; --accent-light: rgba(0,112,243,0.12); --danger: #ff4444; --danger-hover: #ff6666; --danger-light: rgba(255,68,68,0.1); --success: #0070f3; --success-bg: rgba(0,112,243,0.1); --shadow: none; --shadow-lg: 0 8px 30px rgba(0,0,0,0.6); } /* === Base === */ body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* === Navigation === */ .nav { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; height: var(--nav-height); } .nav-inner { max-width: 1024px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 1.5rem; } .nav-brand { font-weight: 600; font-size: 14px; color: var(--text); text-decoration: none; letter-spacing: -0.02em; } .nav-brand:hover { text-decoration: none; } .nav-links { display: flex; gap: 0.25rem; align-items: center; } .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 13px; padding: 6px 10px; border-radius: var(--radius-sm); transition: color var(--transition), background var(--transition); } .nav-link:hover { color: var(--text); background: var(--surface-hover); text-decoration: none; } .nav-link--logout { color: var(--danger); } .nav-link--logout:hover { background: var(--danger-light); color: var(--danger); } /* Theme toggle */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; transition: all var(--transition); } .theme-toggle:hover { border-color: var(--border-hover); color: var(--text); background: var(--surface-hover); } .theme-toggle svg { width: 16px; height: 16px; } /* Show/hide sun/moon based on theme */ .icon-sun { display: none; } .icon-moon { display: block; } [data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; } /* === Main Content === */ .main { max-width: 1024px; margin: 0 auto; padding: 1.5rem; } h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.04em; margin-bottom: 1.5rem; color: var(--text); } /* === Flash Messages === */ .flash { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 13px; border: 1px solid; display: flex; align-items: center; gap: 8px; animation: flashIn 0.2s ease; } @keyframes flashIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .flash--success { background: var(--success-bg); color: var(--accent); border-color: var(--accent); } .flash--error { background: var(--danger-light); color: var(--danger); border-color: var(--danger); } /* === Toast Notifications === */ .toast-container { position: fixed; top: calc(var(--nav-height) + 12px); right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; font-size: 13px; box-shadow: var(--shadow-lg); pointer-events: auto; animation: toastIn 0.25s ease; min-width: 200px; } .toast--success { border-left: 3px solid var(--accent); } .toast--error { border-left: 3px solid var(--danger); } @keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .toast.toast--out { animation: toastOut 0.2s ease forwards; } @keyframes toastOut { to { opacity: 0; transform: translateX(20px); } } /* === API Banner === */ .api-banner { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 13px; } .api-banner-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: var(--accent-light); padding: 2px 8px; border-radius: 4px; flex-shrink: 0; } .api-banner-url { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .api-banner-url a { color: inherit; text-decoration: none; } .api-banner-url a:hover { color: var(--accent); text-decoration: underline; } .api-copy-btn svg { flex-shrink: 0; } /* === Toolbar === */ .toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 0.75rem; flex-wrap: wrap; } .toolbar-left { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; } .toolbar-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .toolbar-info { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; } /* === Search === */ .search-wrapper { position: relative; max-width: 280px; flex: 1; } .search-wrapper svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); width: 14px; height: 14px; pointer-events: none; } .search-input { width: 100%; height: 32px; padding: 0 10px 0 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13px; font-family: var(--font); transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .search-input::placeholder { color: var(--text-tertiary); } .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } /* === Buttons === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; font-family: var(--font); cursor: pointer; text-decoration: none; transition: all var(--transition); white-space: nowrap; line-height: 1; } .btn:hover { border-color: var(--border-hover); background: var(--surface-hover); text-decoration: none; } .btn--primary { background: var(--text); border-color: var(--text); color: var(--bg); } .btn--primary:hover { opacity: 0.85; background: var(--text); border-color: var(--text); } .btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn--danger { color: var(--danger); border-color: currentColor; background: transparent; } .btn--danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; } .btn--ghost { border-color: transparent; background: transparent; } .btn--ghost:hover { background: var(--surface-hover); border-color: transparent; } .btn--full { width: 100%; } .btn--sm { height: 28px; padding: 0 8px; font-size: 12px; } .btn--toggle { border: none; background: none; width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition); } .btn--toggle:hover { background: var(--surface-hover); } .btn--toggle.is-active { color: #0070f3; } .btn--toggle:not(.is-active) { color: var(--text-tertiary); } .btn:disabled, .btn.btn--loading { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* === Card List === */ .card-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); transition: background var(--transition); } .card:last-child { border-bottom: none; } .card:hover { background: var(--surface-hover); } .card.dragging { opacity: 0.4; background: var(--accent-light); } .card.card--hidden { display: none; } .card-drag-handle { cursor: grab; color: var(--text-tertiary); font-size: 14px; padding: 2px; user-select: none; flex-shrink: 0; display: flex; align-items: center; } .card-drag-handle:active { cursor: grabbing; } .card-thumb { width: 64px; height: 40px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: var(--surface-hover); border: 1px solid var(--border); } .card-thumb img { width: 100%; height: 100%; object-fit: cover; } .card-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 14px; } .card-body { flex: 1; min-width: 0; } .card-title { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .card-meta { display: flex; gap: 6px; margin-top: 2px; align-items: center; } .badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--surface-hover); color: var(--text-secondary); font-weight: 500; border: 1px solid var(--border); line-height: 1.5; } .badge--inactive { background: var(--danger-light); color: var(--danger); border-color: transparent; } .card-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; } .inline-form { display: inline; } /* === Modal === */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px 32px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; overflow-y: auto; } [data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.75); } .modal-overlay.open { opacity: 1; visibility: visible; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 520px; box-shadow: var(--shadow-lg); transform: scale(0.97) translateY(-8px); transition: transform 0.2s ease; } .modal-overlay.open .modal { transform: scale(1) translateY(0); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .modal-title { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; } .modal-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-sm); font-size: 18px; transition: all var(--transition); } .modal-close:hover { background: var(--surface-hover); color: var(--text); } .modal-body { padding: 20px; } .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--border); } .modal-error { margin: 0 20px 0; padding: 8px 12px; background: var(--danger-light); color: var(--danger); border-radius: var(--radius-sm); font-size: 13px; border: 1px solid var(--danger); } .modal-loading { position: absolute; inset: 0; background: var(--surface); opacity: 0.8; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); z-index: 10; } /* === Form Elements === */ .form { max-width: 560px; } .form-group { margin-bottom: 16px; } .form-group label { display: block; font-weight: 500; font-size: 13px; margin-bottom: 6px; color: var(--text); } .form-group input[type="text"], .form-group input[type="url"], .form-group input[type="password"], .form-group select, .form-group textarea { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font); background: var(--bg); color: var(--text); transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } .form-group input::placeholder { color: var(--text-tertiary); } .form-hint { display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 4px; } .form-check label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 400; font-size: 13px; } .form-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .thumb-preview { max-width: 200px; border-radius: var(--radius-sm); border: 1px solid var(--border); } .form-actions { display: flex; gap: 8px; margin-top: 20px; } /* === Combobox === */ .combobox { position: relative; } .combobox input { padding-right: 32px; } .combobox-toggle { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-tertiary); cursor: pointer; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: color var(--transition); } .combobox-toggle:hover { color: var(--text); } .combobox-toggle svg { width: 14px; height: 14px; } .combobox-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 200px; overflow-y: auto; z-index: 50; display: none; } .combobox-menu.open { display: block; } .combobox-option { padding: 7px 12px; cursor: pointer; font-size: 13px; color: var(--text); transition: background var(--transition); } .combobox-option:hover, .combobox-option.highlighted { background: var(--accent-light); color: var(--accent); } .combobox-option--add { color: var(--accent); font-weight: 500; border-top: 1px solid var(--border); } .combobox-empty { padding: 7px 12px; font-size: 13px; color: var(--text-tertiary); font-style: italic; } /* === Empty State === */ .empty-state { text-align: center; padding: 48px 16px; color: var(--text-secondary); font-size: 14px; } .empty-state .btn { margin-top: 16px; } /* === Login Page === */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); } .login-box { width: 100%; max-width: 360px; padding: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); text-align: center; } .login-box h1 { font-size: 20px; letter-spacing: -0.04em; margin-bottom: 4px; } .login-subtitle { color: var(--text-secondary); font-size: 13px; margin-bottom: 24px; } .login-box .form-group { text-align: left; } .login-box .flash { text-align: left; } /* === Spinner === */ .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* === Scrollbar === */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } /* === Responsive === */ @media (max-width: 640px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left { flex-direction: column; } .toolbar-right { justify-content: space-between; } .search-wrapper { max-width: 100%; } .card { flex-wrap: wrap; gap: 8px; } .card-body { width: 100%; } .card-actions { width: 100%; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--border); } .modal-overlay { padding: 0; align-items: flex-end; } .modal { max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 90vh; overflow-y: auto; } }