Spaces:
Sleeping
Sleeping
| /* ================================================================ | |
| NewsForge Admin Dashboard — Design System & Styles | |
| Light-mode, desktop-first, data-rich professional layout | |
| ================================================================ */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap'); | |
| /* ── Design Tokens ── */ | |
| :root { | |
| /* Light mode backgrounds */ | |
| --bg-body: #F0F2F5; | |
| --bg-sidebar: #0F0F12; | |
| --bg-card: #FFFFFF; | |
| --bg-card-hover: #FAFAFA; | |
| --bg-input: #F5F5F7; | |
| --bg-input-focus: #FFFFFF; | |
| /* Text */ | |
| --text-primary: #1D1D1F; | |
| --text-secondary: #6B7280; | |
| --text-tertiary: #9CA3AF; | |
| --text-sidebar: #A0A0B0; | |
| --text-sidebar-active: #FFFFFF; | |
| /* Accent */ | |
| --accent: #3B82F6; | |
| --accent-hover: #2563EB; | |
| --accent-light: rgba(59, 130, 246, 0.1); | |
| --accent-glow: rgba(59, 130, 246, 0.15); | |
| /* Semantic */ | |
| --success: #10B981; | |
| --success-bg: rgba(16, 185, 129, 0.1); | |
| --warning: #F59E0B; | |
| --warning-bg: rgba(245, 158, 11, 0.1); | |
| --error: #EF4444; | |
| --error-bg: rgba(239, 68, 68, 0.1); | |
| --info: #6366F1; | |
| --info-bg: rgba(99, 102, 241, 0.1); | |
| /* Layout */ | |
| --sidebar-width: 260px; | |
| --sidebar-collapsed: 72px; | |
| --header-height: 64px; | |
| --radius: 12px; | |
| --radius-sm: 8px; | |
| --radius-lg: 16px; | |
| --radius-full: 9999px; | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); | |
| --shadow: 0 2px 8px rgba(0,0,0,0.08); | |
| --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); | |
| /* Fonts */ | |
| --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --font-mono: 'JetBrains Mono', 'Fira Code', monospace; | |
| /* Transitions */ | |
| --transition-fast: 150ms ease; | |
| --transition-normal: 200ms ease; | |
| --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* ── Reset ── */ | |
| *, *::before, *::after { | |
| margin: 0; padding: 0; box-sizing: border-box; | |
| } | |
| html { font-size: 16px; scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--font-body); | |
| background: var(--bg-body); | |
| color: var(--text-primary); | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| min-height: 100vh; | |
| } | |
| input, textarea, select, button { | |
| font-family: inherit; font-size: inherit; color: inherit; | |
| outline: none; border: none; background: none; | |
| } | |
| button { cursor: pointer; } | |
| a { color: inherit; text-decoration: none; } | |
| img { max-width: 100%; display: block; } | |
| ul, ol { list-style: none; } | |
| /* ================================================================ | |
| LOGIN SCREEN | |
| ================================================================ */ | |
| .login-page { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| background: linear-gradient(135deg, #0F0F12 0%, #1A1A2E 50%, #0F0F12 100%); | |
| padding: 24px; | |
| } | |
| .login-card { | |
| width: 100%; | |
| max-width: 420px; | |
| background: #1A1A1F; | |
| border-radius: var(--radius-lg); | |
| padding: 40px; | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.5); | |
| border: 1px solid rgba(255,255,255,0.06); | |
| } | |
| .login-logo { | |
| text-align: center; | |
| margin-bottom: 32px; | |
| } | |
| .login-logo-icon { | |
| width: 52px; | |
| height: 52px; | |
| background: var(--accent); | |
| border-radius: var(--radius); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| font-weight: 800; | |
| color: #fff; | |
| margin-bottom: 16px; | |
| } | |
| .login-logo h1 { | |
| font-size: 24px; | |
| font-weight: 800; | |
| color: #fff; | |
| letter-spacing: -0.3px; | |
| } | |
| .login-logo h1 span { color: var(--accent); } | |
| .login-logo p { | |
| color: #A0A0B0; | |
| font-size: 14px; | |
| margin-top: 4px; | |
| } | |
| .login-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .login-input-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .login-input-group label { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: #A0A0B0; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| font-family: var(--font-mono); | |
| } | |
| .login-input-group input { | |
| padding: 12px 16px; | |
| background: rgba(255,255,255,0.06); | |
| border: 1.5px solid rgba(255,255,255,0.1); | |
| border-radius: var(--radius-sm); | |
| color: #fff; | |
| font-size: 15px; | |
| transition: border-color var(--transition-normal), box-shadow var(--transition-normal); | |
| } | |
| .login-input-group input::placeholder { color: #6B6B7B; } | |
| .login-input-group input:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); | |
| } | |
| .login-btn { | |
| padding: 14px; | |
| background: var(--accent); | |
| color: #fff; | |
| border-radius: var(--radius-sm); | |
| font-size: 15px; | |
| font-weight: 700; | |
| transition: background var(--transition-normal); | |
| margin-top: 8px; | |
| } | |
| .login-btn:hover { background: var(--accent-hover); } | |
| .login-error { | |
| padding: 10px 14px; | |
| background: var(--error-bg); | |
| color: var(--error); | |
| border-radius: var(--radius-sm); | |
| font-size: 13px; | |
| font-weight: 500; | |
| display: none; | |
| } | |
| .login-error.show { display: block; } | |
| /* ================================================================ | |
| APP LAYOUT | |
| ================================================================ */ | |
| .app-layout { | |
| display: none; | |
| min-height: 100vh; | |
| } | |
| .app-layout.active { display: flex; } | |
| /* ── Sidebar ── */ | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| background: var(--bg-sidebar); | |
| color: #fff; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| z-index: 40; | |
| transition: width var(--transition-smooth); | |
| border-right: 1px solid rgba(255,255,255,0.06); | |
| } | |
| .sidebar-header { | |
| padding: 20px 24px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| border-bottom: 1px solid rgba(255,255,255,0.06); | |
| min-height: var(--header-height); | |
| } | |
| .sidebar-logo { | |
| width: 36px; | |
| height: 36px; | |
| background: var(--accent); | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 18px; | |
| font-weight: 800; | |
| flex-shrink: 0; | |
| } | |
| .sidebar-brand { | |
| font-size: 18px; | |
| font-weight: 800; | |
| letter-spacing: -0.3px; | |
| } | |
| .sidebar-brand span { color: var(--accent); } | |
| .sidebar-badge { | |
| padding: 2px 8px; | |
| background: rgba(59, 130, 246, 0.2); | |
| color: var(--accent); | |
| border-radius: var(--radius-full); | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| font-family: var(--font-mono); | |
| letter-spacing: 0.5px; | |
| } | |
| .sidebar-nav { | |
| flex: 1; | |
| padding: 16px 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| overflow-y: auto; | |
| } | |
| .sidebar-section-label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: rgba(255,255,255,0.3); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-family: var(--font-mono); | |
| padding: 16px 12px 8px; | |
| } | |
| .sidebar-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 10px 12px; | |
| border-radius: var(--radius-sm); | |
| color: var(--text-sidebar); | |
| font-size: 14px; | |
| font-weight: 500; | |
| transition: all var(--transition-normal); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| } | |
| .sidebar-item:hover { | |
| background: rgba(255,255,255,0.06); | |
| color: #fff; | |
| } | |
| .sidebar-item.active { | |
| background: var(--accent-light); | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .sidebar-item-icon { | |
| font-size: 18px; | |
| width: 24px; | |
| text-align: center; | |
| flex-shrink: 0; | |
| } | |
| .sidebar-item-badge { | |
| margin-left: auto; | |
| padding: 2px 8px; | |
| border-radius: var(--radius-full); | |
| font-size: 11px; | |
| font-weight: 700; | |
| font-family: var(--font-mono); | |
| } | |
| .sidebar-footer { | |
| padding: 16px 12px; | |
| border-top: 1px solid rgba(255,255,255,0.06); | |
| } | |
| .sidebar-user { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 10px 12px; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: background var(--transition-normal); | |
| } | |
| .sidebar-user:hover { | |
| background: rgba(255,255,255,0.06); | |
| } | |
| .sidebar-avatar { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: var(--radius-full); | |
| background: var(--accent); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| } | |
| .sidebar-user-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .sidebar-user-name { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: #fff; | |
| } | |
| .sidebar-user-role { | |
| font-size: 12px; | |
| color: var(--text-sidebar); | |
| } | |
| /* ── Main Content ── */ | |
| .main-content { | |
| flex: 1; | |
| margin-left: var(--sidebar-width); | |
| min-height: 100vh; | |
| } | |
| .main-header { | |
| height: var(--header-height); | |
| background: var(--bg-card); | |
| border-bottom: 1px solid rgba(0,0,0,0.06); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 32px; | |
| position: sticky; | |
| top: 0; | |
| z-index: 30; | |
| } | |
| .main-header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .main-header-left h2 { | |
| font-size: 18px; | |
| font-weight: 700; | |
| letter-spacing: -0.3px; | |
| } | |
| .breadcrumb { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 13px; | |
| color: var(--text-tertiary); | |
| } | |
| .breadcrumb a:hover { color: var(--accent); } | |
| .breadcrumb .sep { color: var(--text-tertiary); } | |
| .main-header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .page-content { | |
| padding: 32px; | |
| } | |
| .page-content.no-padding { | |
| padding: 0; | |
| } | |
| /* ================================================================ | |
| DASHBOARD CARDS (Metric Cards) | |
| ================================================================ */ | |
| .metrics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 32px; | |
| } | |
| .metric-card { | |
| background: var(--bg-card); | |
| border-radius: var(--radius); | |
| padding: 24px; | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid rgba(0,0,0,0.04); | |
| transition: all var(--transition-smooth); | |
| } | |
| .metric-card:hover { | |
| box-shadow: var(--shadow); | |
| transform: translateY(-2px); | |
| } | |
| .metric-card-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 16px; | |
| } | |
| .metric-card-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| } | |
| .metric-card-icon.blue { background: var(--accent-light); } | |
| .metric-card-icon.green { background: var(--success-bg); } | |
| .metric-card-icon.amber { background: var(--warning-bg); } | |
| .metric-card-icon.red { background: var(--error-bg); } | |
| .metric-card-icon.purple { background: var(--info-bg); } | |
| .metric-card-change { | |
| font-size: 12px; | |
| font-weight: 600; | |
| font-family: var(--font-mono); | |
| padding: 2px 8px; | |
| border-radius: var(--radius-full); | |
| } | |
| .metric-card-change.positive { background: var(--success-bg); color: var(--success); } | |
| .metric-card-change.negative { background: var(--error-bg); color: var(--error); } | |
| .metric-card-value { | |
| font-size: 32px; | |
| font-weight: 800; | |
| letter-spacing: -0.5px; | |
| margin-bottom: 4px; | |
| font-family: var(--font-mono); | |
| } | |
| .metric-card-label { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| /* ── Quick Actions ── */ | |
| .quick-actions { | |
| display: flex; | |
| gap: 12px; | |
| margin-bottom: 32px; | |
| } | |
| /* ================================================================ | |
| BUTTONS | |
| ================================================================ */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 10px 20px; | |
| border-radius: var(--radius-sm); | |
| font-size: 14px; | |
| font-weight: 600; | |
| transition: all var(--transition-normal); | |
| white-space: nowrap; | |
| } | |
| .btn-primary { | |
| background: var(--accent); | |
| color: #fff; | |
| } | |
| .btn-primary:hover { | |
| background: var(--accent-hover); | |
| box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-card); | |
| color: var(--text-primary); | |
| border: 1px solid rgba(0,0,0,0.1); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--bg-card-hover); | |
| border-color: rgba(0,0,0,0.15); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--text-secondary); | |
| } | |
| .btn-ghost:hover { | |
| background: var(--bg-input); | |
| color: var(--text-primary); | |
| } | |
| .btn-danger { | |
| background: var(--error); | |
| color: #fff; | |
| } | |
| .btn-danger:hover { | |
| background: #DC2626; | |
| } | |
| .btn-sm { | |
| padding: 6px 14px; | |
| font-size: 13px; | |
| } | |
| .btn-lg { | |
| padding: 14px 28px; | |
| font-size: 16px; | |
| border-radius: var(--radius); | |
| } | |
| .btn-icon { | |
| width: 36px; | |
| height: 36px; | |
| padding: 0; | |
| border-radius: var(--radius-sm); | |
| } | |
| /* ================================================================ | |
| DATA TABLE | |
| ================================================================ */ | |
| .table-card { | |
| background: var(--bg-card); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid rgba(0,0,0,0.04); | |
| overflow: hidden; | |
| } | |
| .table-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 20px 24px; | |
| border-bottom: 1px solid rgba(0,0,0,0.06); | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .table-header h3 { | |
| font-size: 16px; | |
| font-weight: 700; | |
| } | |
| .table-filters { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .filter-select { | |
| padding: 6px 12px; | |
| background: var(--bg-input); | |
| border: 1px solid rgba(0,0,0,0.08); | |
| border-radius: var(--radius-sm); | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| appearance: none; | |
| cursor: pointer; | |
| padding-right: 28px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 10px center; | |
| } | |
| .table-search { | |
| padding: 6px 12px 6px 32px; | |
| background: var(--bg-input); | |
| border: 1px solid rgba(0,0,0,0.08); | |
| border-radius: var(--radius-sm); | |
| font-size: 13px; | |
| color: var(--text-primary); | |
| width: 220px; | |
| transition: border-color var(--transition-normal); | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: 10px center; | |
| } | |
| .table-search:focus { | |
| border-color: var(--accent); | |
| outline: none; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| thead th { | |
| padding: 12px 24px; | |
| text-align: left; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-tertiary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| font-family: var(--font-mono); | |
| background: var(--bg-input); | |
| border-bottom: 1px solid rgba(0,0,0,0.06); | |
| white-space: nowrap; | |
| } | |
| tbody tr { | |
| border-bottom: 1px solid rgba(0,0,0,0.04); | |
| transition: background var(--transition-fast); | |
| } | |
| tbody tr:hover { | |
| background: var(--bg-card-hover); | |
| } | |
| tbody tr:last-child { | |
| border-bottom: none; | |
| } | |
| td { | |
| padding: 14px 24px; | |
| font-size: 14px; | |
| vertical-align: middle; | |
| } | |
| .table-thumb { | |
| width: 44px; | |
| height: 56px; | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| flex-shrink: 0; | |
| } | |
| .table-name { | |
| font-weight: 600; | |
| } | |
| .table-footer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px 24px; | |
| border-top: 1px solid rgba(0,0,0,0.06); | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| .pagination { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .pagination button { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| transition: all var(--transition-fast); | |
| } | |
| .pagination button:hover { background: var(--bg-input); } | |
| .pagination button.active { | |
| background: var(--accent); | |
| color: #fff; | |
| } | |
| /* ── Status Badge ── */ | |
| .status-badge { | |
| display: inline-flex; | |
| padding: 3px 10px; | |
| border-radius: var(--radius-full); | |
| font-size: 12px; | |
| font-weight: 600; | |
| font-family: var(--font-mono); | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| } | |
| .status-badge.published { background: var(--success-bg); color: var(--success); } | |
| .status-badge.draft { background: var(--warning-bg); color: var(--warning); } | |
| .status-badge.archived { background: rgba(107, 114, 128, 0.1); color: var(--text-secondary); } | |
| .format-badge { | |
| display: inline-flex; | |
| padding: 3px 10px; | |
| border-radius: var(--radius-full); | |
| font-size: 11px; | |
| font-weight: 700; | |
| font-family: var(--font-mono); | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| } | |
| .format-badge.image { background: var(--accent-light); color: var(--accent); } | |
| .format-badge.video { background: var(--info-bg); color: var(--info); } | |
| /* ── Actions Dropdown ── */ | |
| .actions-cell { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .actions-cell .btn-icon { | |
| width: 32px; | |
| height: 32px; | |
| font-size: 14px; | |
| } | |
| /* ================================================================ | |
| TEMPLATE EDITOR (3-Panel Layout) | |
| ================================================================ */ | |
| .editor-layout { | |
| display: grid; | |
| grid-template-columns: 220px 1fr 280px; | |
| grid-template-rows: auto 1fr auto; | |
| height: calc(100vh - var(--header-height)); | |
| background: var(--bg-body); | |
| } | |
| .editor-toolbar { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 8px 16px; | |
| background: var(--bg-card); | |
| border-bottom: 1px solid rgba(0,0,0,0.06); | |
| gap: 8px; | |
| } | |
| .toolbar-group { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .toolbar-btn { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 2px; | |
| padding: 6px 12px; | |
| border-radius: var(--radius-sm); | |
| font-size: 11px; | |
| color: var(--text-secondary); | |
| transition: all var(--transition-fast); | |
| cursor: pointer; | |
| } | |
| .toolbar-btn:hover { | |
| background: var(--bg-input); | |
| color: var(--text-primary); | |
| } | |
| .toolbar-btn.active { | |
| background: var(--accent-light); | |
| color: var(--accent); | |
| } | |
| .toolbar-btn-icon { | |
| font-size: 18px; | |
| } | |
| .toolbar-divider { | |
| width: 1px; | |
| height: 32px; | |
| background: rgba(0,0,0,0.08); | |
| margin: 0 8px; | |
| } | |
| /* ── Layers Panel ── */ | |
| .layers-panel { | |
| background: var(--bg-card); | |
| border-right: 1px solid rgba(0,0,0,0.06); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .panel-title { | |
| padding: 14px 16px; | |
| font-size: 13px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| font-family: var(--font-mono); | |
| color: var(--text-secondary); | |
| border-bottom: 1px solid rgba(0,0,0,0.06); | |
| } | |
| .layers-list { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 8px; | |
| } | |
| .layer-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 10px; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| font-size: 13px; | |
| } | |
| .layer-item:hover { | |
| background: var(--bg-input); | |
| } | |
| .layer-item.active { | |
| background: var(--accent-light); | |
| color: var(--accent); | |
| } | |
| .layer-item.input-slot { | |
| border-left: 3px solid var(--accent); | |
| } | |
| .layer-checkbox { | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid rgba(0,0,0,0.15); | |
| border-radius: 4px; | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| } | |
| .layer-checkbox.checked { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: #fff; | |
| } | |
| .layer-icon { | |
| font-size: 14px; | |
| flex-shrink: 0; | |
| width: 18px; | |
| text-align: center; | |
| } | |
| .layer-name { | |
| flex: 1; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| font-weight: 500; | |
| } | |
| .layer-actions { | |
| display: flex; | |
| gap: 4px; | |
| opacity: 0; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .layer-item:hover .layer-actions { | |
| opacity: 1; | |
| } | |
| .layer-action-btn { | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 11px; | |
| color: var(--text-tertiary); | |
| transition: all var(--transition-fast); | |
| } | |
| .layer-action-btn:hover { | |
| background: rgba(0,0,0,0.06); | |
| color: var(--text-primary); | |
| } | |
| /* ── Canvas Area ── */ | |
| .canvas-area { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 24px; | |
| position: relative; | |
| overflow: auto; | |
| background: | |
| radial-gradient(circle at 1px 1px, rgba(0,0,0,0.05) 1px, transparent 0); | |
| background-size: 20px 20px; | |
| } | |
| .canvas-wrapper { | |
| box-shadow: var(--shadow-lg); | |
| border-radius: 4px; | |
| position: relative; | |
| overflow: visible; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .canvas-wrapper canvas { | |
| border-radius: 4px; | |
| } | |
| /* ── Toolbar Meta Inputs ── */ | |
| .toolbar-meta { | |
| gap: 8px ; | |
| } | |
| .toolbar-name-input { | |
| padding: 5px 12px; | |
| background: var(--bg-input); | |
| border: 1px solid rgba(0,0,0,0.08); | |
| border-radius: 6px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| width: 180px; | |
| transition: border-color var(--transition-fast); | |
| } | |
| .toolbar-name-input:focus { | |
| border-color: var(--accent); | |
| outline: none; | |
| } | |
| .toolbar-meta-select { | |
| padding: 5px 10px; | |
| background: var(--bg-input); | |
| border: 1px solid rgba(0,0,0,0.08); | |
| border-radius: 6px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| appearance: none; | |
| padding-right: 24px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 8px center; | |
| } | |
| .canvas-size-label { | |
| position: absolute; | |
| bottom: 12px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 4px 12px; | |
| background: var(--bg-card); | |
| border-radius: var(--radius-full); | |
| font-size: 11px; | |
| font-weight: 600; | |
| font-family: var(--font-mono); | |
| color: var(--text-secondary); | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid rgba(0,0,0,0.06); | |
| } | |
| .canvas-zoom-controls { | |
| position: absolute; | |
| bottom: 12px; | |
| right: 12px; | |
| display: flex; | |
| gap: 4px; | |
| background: var(--bg-card); | |
| border-radius: var(--radius-sm); | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid rgba(0,0,0,0.06); | |
| padding: 4px; | |
| } | |
| .zoom-btn { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| transition: all var(--transition-fast); | |
| } | |
| .zoom-btn:hover { | |
| background: var(--bg-input); | |
| color: var(--text-primary); | |
| } | |
| /* ── Properties Panel ── */ | |
| .properties-panel { | |
| background: var(--bg-card); | |
| border-left: 1px solid rgba(0,0,0,0.06); | |
| display: flex; | |
| flex-direction: column; | |
| overflow-y: auto; | |
| } | |
| .prop-section { | |
| padding: 16px; | |
| border-bottom: 1px solid rgba(0,0,0,0.06); | |
| } | |
| .prop-section-title { | |
| font-size: 12px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| font-family: var(--font-mono); | |
| color: var(--text-tertiary); | |
| margin-bottom: 12px; | |
| } | |
| .prop-row { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 8px; | |
| } | |
| .prop-field { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .prop-label { | |
| font-size: 11px; | |
| color: var(--text-tertiary); | |
| font-family: var(--font-mono); | |
| } | |
| .prop-input { | |
| padding: 6px 10px; | |
| background: var(--bg-input); | |
| border: 1px solid rgba(0,0,0,0.06); | |
| border-radius: 6px; | |
| font-size: 13px; | |
| font-family: var(--font-mono); | |
| color: var(--text-primary); | |
| transition: border-color var(--transition-fast); | |
| } | |
| .prop-input:focus { | |
| border-color: var(--accent); | |
| } | |
| .prop-select { | |
| padding: 6px 10px; | |
| background: var(--bg-input); | |
| border: 1px solid rgba(0,0,0,0.06); | |
| border-radius: 6px; | |
| font-size: 13px; | |
| color: var(--text-primary); | |
| appearance: none; | |
| cursor: pointer; | |
| } | |
| .prop-color { | |
| width: 100%; | |
| height: 32px; | |
| border-radius: 6px; | |
| border: 2px solid rgba(0,0,0,0.08); | |
| cursor: pointer; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| } | |
| .prop-color::-webkit-color-swatch-wrapper { padding: 0; } | |
| .prop-color::-webkit-color-swatch { border: none; border-radius: 4px; } | |
| /* Input Slot Toggle */ | |
| .input-slot-section { | |
| background: var(--accent-light); | |
| border: 1.5px dashed var(--accent); | |
| border-radius: var(--radius-sm); | |
| padding: 14px; | |
| } | |
| .input-slot-toggle { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 12px; | |
| } | |
| .input-slot-label { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| } | |
| .toggle-switch { | |
| width: 40px; | |
| height: 22px; | |
| background: rgba(0,0,0,0.1); | |
| border-radius: var(--radius-full); | |
| position: relative; | |
| cursor: pointer; | |
| transition: background var(--transition-normal); | |
| } | |
| .toggle-switch.active { | |
| background: var(--accent); | |
| } | |
| .toggle-switch::after { | |
| content: ''; | |
| position: absolute; | |
| top: 2px; | |
| left: 2px; | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| background: #fff; | |
| transition: transform var(--transition-smooth); | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.2); | |
| } | |
| .toggle-switch.active::after { | |
| transform: translateX(18px); | |
| } | |
| .input-slot-fields { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin-top: 12px; | |
| } | |
| /* ── Scene Timeline ── */ | |
| .scene-timeline { | |
| grid-column: 1 / -1; | |
| background: var(--bg-card); | |
| border-top: 1px solid rgba(0,0,0,0.06); | |
| padding: 12px 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .scene-track { | |
| display: flex; | |
| gap: 8px; | |
| flex: 1; | |
| overflow-x: auto; | |
| } | |
| .scene-block { | |
| padding: 8px 16px; | |
| background: var(--bg-input); | |
| border: 1.5px solid rgba(0,0,0,0.08); | |
| border-radius: var(--radius-sm); | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| white-space: nowrap; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .scene-block:hover { | |
| border-color: var(--accent); | |
| } | |
| .scene-block.active { | |
| border-color: var(--accent); | |
| background: var(--accent-light); | |
| color: var(--accent); | |
| } | |
| .scene-duration { | |
| font-size: 11px; | |
| font-family: var(--font-mono); | |
| color: var(--text-tertiary); | |
| } | |
| .scene-arrow { | |
| color: var(--text-tertiary); | |
| font-size: 14px; | |
| } | |
| /* ================================================================ | |
| ANALYTICS | |
| ================================================================ */ | |
| .analytics-tabs { | |
| display: flex; | |
| gap: 4px; | |
| background: var(--bg-input); | |
| border-radius: var(--radius); | |
| padding: 4px; | |
| margin-bottom: 24px; | |
| } | |
| .analytics-tab { | |
| flex: 1; | |
| padding: 10px 16px; | |
| text-align: center; | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| border-radius: var(--radius-sm); | |
| transition: all var(--transition-normal); | |
| cursor: pointer; | |
| } | |
| .analytics-tab.active { | |
| background: var(--bg-card); | |
| color: var(--text-primary); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .analytics-tab:hover:not(.active) { | |
| color: var(--text-primary); | |
| } | |
| /* ── Chart Card ── */ | |
| .chart-card { | |
| background: var(--bg-card); | |
| border-radius: var(--radius); | |
| padding: 24px; | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid rgba(0,0,0,0.04); | |
| margin-bottom: 20px; | |
| } | |
| .chart-card-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 20px; | |
| } | |
| .chart-card-title { | |
| font-size: 16px; | |
| font-weight: 700; | |
| } | |
| .chart-card-subtitle { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| /* ── CSS Bar Chart ── */ | |
| .bar-chart { | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 8px; | |
| height: 200px; | |
| padding-top: 20px; | |
| } | |
| .bar-chart-col { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| height: 100%; | |
| justify-content: flex-end; | |
| } | |
| .bar-chart-bar { | |
| width: 100%; | |
| max-width: 40px; | |
| background: var(--accent); | |
| border-radius: 4px 4px 0 0; | |
| transition: height 0.6s ease; | |
| min-height: 4px; | |
| position: relative; | |
| } | |
| .bar-chart-bar.secondary { | |
| background: rgba(59, 130, 246, 0.3); | |
| } | |
| .bar-chart-label { | |
| font-size: 11px; | |
| color: var(--text-tertiary); | |
| font-family: var(--font-mono); | |
| white-space: nowrap; | |
| } | |
| .bar-chart-value { | |
| position: absolute; | |
| top: -20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 11px; | |
| font-weight: 600; | |
| font-family: var(--font-mono); | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| } | |
| /* ── Analytics Grid ── */ | |
| .analytics-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| } | |
| .analytics-grid-full { | |
| grid-column: 1 / -1; | |
| } | |
| /* ================================================================ | |
| USER MANAGEMENT TABLE | |
| ================================================================ */ | |
| .user-avatar-cell { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .user-table-avatar { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: var(--radius-full); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| font-weight: 700; | |
| color: #fff; | |
| flex-shrink: 0; | |
| } | |
| .user-table-info { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .user-table-name { | |
| font-weight: 600; | |
| font-size: 14px; | |
| } | |
| .user-table-email { | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| } | |
| .plan-badge { | |
| display: inline-flex; | |
| padding: 3px 10px; | |
| border-radius: var(--radius-full); | |
| font-size: 11px; | |
| font-weight: 700; | |
| font-family: var(--font-mono); | |
| text-transform: uppercase; | |
| } | |
| .plan-badge.free { background: var(--accent-light); color: var(--accent); } | |
| .plan-badge.pro { background: var(--success-bg); color: var(--success); } | |
| .plan-badge.newsroom { background: var(--warning-bg); color: var(--warning); } | |
| /* ================================================================ | |
| FORM ELEMENTS (Admin) | |
| ================================================================ */ | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| margin-bottom: 16px; | |
| } | |
| .form-label { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .form-input { | |
| padding: 10px 14px; | |
| background: var(--bg-input); | |
| border: 1px solid rgba(0,0,0,0.08); | |
| border-radius: var(--radius-sm); | |
| font-size: 14px; | |
| color: var(--text-primary); | |
| transition: border-color var(--transition-normal); | |
| } | |
| .form-input:focus { | |
| border-color: var(--accent); | |
| background: var(--bg-input-focus); | |
| } | |
| /* ================================================================ | |
| TOAST (Admin) | |
| ================================================================ */ | |
| .admin-toast { | |
| position: fixed; | |
| bottom: 24px; | |
| right: 24px; | |
| padding: 12px 20px; | |
| background: var(--bg-sidebar); | |
| color: #fff; | |
| border-radius: var(--radius-sm); | |
| font-size: 14px; | |
| font-weight: 500; | |
| box-shadow: var(--shadow-lg); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| z-index: 100; | |
| transform: translateY(80px); | |
| opacity: 0; | |
| transition: all var(--transition-smooth); | |
| } | |
| .admin-toast.show { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| /* ================================================================ | |
| FORMAT MODAL | |
| ================================================================ */ | |
| .format-modal-overlay { | |
| position: fixed; | |
| top: 0; left: 0; width: 100vw; height: 100vh; | |
| background: rgba(0,0,0,0.5); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| backdrop-filter: blur(4px); | |
| } | |
| .format-modal-card { | |
| background: var(--bg-card); | |
| border-radius: var(--radius-lg); | |
| width: 100%; | |
| max-width: 500px; | |
| padding: 32px; | |
| box-shadow: var(--shadow-lg); | |
| border: 1px solid rgba(0,0,0,0.06); | |
| } | |
| .format-modal-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| } | |
| .format-modal-header h3 { | |
| font-size: 20px; | |
| font-weight: 800; | |
| } | |
| .format-modal-close { | |
| background: transparent; | |
| border: none; | |
| font-size: 24px; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| } | |
| .format-modal-options { | |
| display: flex; | |
| gap: 16px; | |
| margin-top: 24px; | |
| } | |
| .format-option-card { | |
| flex: 1; | |
| background: var(--bg-input); | |
| border: 2px solid transparent; | |
| border-radius: var(--radius); | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| gap: 12px; | |
| transition: all var(--transition-normal); | |
| cursor: pointer; | |
| } | |
| .format-option-card:hover { | |
| background: #fff; | |
| border-color: var(--accent); | |
| box-shadow: var(--shadow); | |
| transform: translateY(-2px); | |
| } | |
| .format-option-icon { | |
| font-size: 32px; | |
| } | |
| .format-option-card strong { | |
| font-size: 16px; | |
| font-weight: 700; | |
| } | |
| .format-option-card small { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| /* ================================================================ | |
| SCENE TIMELINE (Dynamic) | |
| ================================================================ */ | |
| .scene-timeline { | |
| margin-top: auto; | |
| padding: 16px; | |
| background: var(--bg-card); | |
| border-top: 1px solid rgba(0,0,0,0.06); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| overflow-x: auto; | |
| } | |
| .scene-track { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex: 1; | |
| min-width: min-content; | |
| } | |
| .scene-block { | |
| background: var(--bg-input); | |
| border: 1px solid rgba(0,0,0,0.08); | |
| border-radius: var(--radius-sm); | |
| padding: 8px 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| min-width: 140px; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .scene-block:hover { | |
| background: var(--bg-card-hover); | |
| border-color: rgba(0,0,0,0.15); | |
| } | |
| .scene-block.active { | |
| background: var(--info-bg); | |
| border-color: var(--info); | |
| } | |
| .scene-name-input { | |
| font-size: 13px; | |
| font-weight: 600; | |
| width: 100%; | |
| background: transparent; | |
| border: none; | |
| outline: none; | |
| padding: 2px 4px; | |
| border-radius: 4px; | |
| } | |
| .scene-name-input:focus { | |
| background: rgba(255,255,255,0.8); | |
| box-shadow: 0 0 0 1px var(--accent); | |
| } | |
| .scene-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .scene-duration-input { | |
| width: 40px; | |
| background: rgba(255,255,255,0.5); | |
| border: 1px solid rgba(0,0,0,0.1); | |
| border-radius: 4px; | |
| padding: 2px 4px; | |
| font-size: 11px; | |
| } | |
| .scene-transition-select { | |
| flex: 1; | |
| background: rgba(255,255,255,0.5); | |
| border: 1px solid rgba(0,0,0,0.1); | |
| border-radius: 4px; | |
| padding: 2px 4px; | |
| font-size: 11px; | |
| } | |
| .scene-delete-btn { | |
| background: transparent; | |
| color: var(--error); | |
| border: none; | |
| font-size: 14px; | |
| cursor: pointer; | |
| padding: 0 4px; | |
| border-radius: 4px; | |
| } | |
| .scene-delete-btn:hover { | |
| background: var(--error-bg); | |
| } | |
| .scene-arrow { | |
| color: var(--text-tertiary); | |
| font-size: 16px; | |
| } | |
| /* ================================================================ | |
| ALIGNMENT BUTTONS | |
| ================================================================ */ | |
| .align-btn { | |
| width: 32px; | |
| height: 32px; | |
| padding: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| } | |
| /* ================================================================ | |
| RESPONSIVE | |
| ================================================================ */ | |
| @media (max-width: 1200px) { | |
| .editor-layout { | |
| grid-template-columns: 180px 1fr 240px; | |
| } | |
| } | |
| @media (max-width: 1024px) { | |
| .sidebar { | |
| width: var(--sidebar-collapsed); | |
| } | |
| .sidebar-brand, .sidebar-badge, .sidebar-item span:not(.sidebar-item-icon), | |
| .sidebar-section-label, .sidebar-user-info, .sidebar-item-badge { | |
| display: none; | |
| } | |
| .sidebar-item { | |
| justify-content: center; | |
| padding: 12px; | |
| } | |
| .sidebar-user { | |
| justify-content: center; | |
| } | |
| .main-content { | |
| margin-left: var(--sidebar-collapsed); | |
| } | |
| .metrics-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .analytics-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { display: none; } | |
| .main-content { margin-left: 0; } | |
| .metrics-grid { grid-template-columns: 1fr; } | |
| .page-content { padding: 16px; } | |
| .editor-layout { grid-template-columns: 1fr; } | |
| .layers-panel, .properties-panel { display: none; } | |
| } | |
| /* ── Scrollbar ── */ | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); } | |