/* * Travian Dashboard — Shared Theme Variables * * Apply a theme by setting data-theme on : * * * Available themes: * midnight-pro (default) — Dark, sky-blue + orange accents * dark-command — Darker navy, indigo accent * clean-saas — Light/white, indigo accent * travian — Dark parchment, gold accent */ /* =================================================================== MIDNIGHT PRO (default — applied when no theme attribute is set) =================================================================== */ :root, html[data-theme="midnight-pro"] { --bg-page: #0d1117; --bg-surface: #161b22; --bg-surface-alt: #21262d; --bg-header: #161b22; --bg-inset: #0d1117; --border-color: #30363d; --border-focus: #38bdf8; --text-primary: #e6edf3; --text-muted: #7d8590; --text-heading: #e6edf3; --text-link: #38bdf8; --text-link-hover: #7dd3fc; --accent: #38bdf8; --accent-hover: #0ea5e9; --accent-text: #0d1117; --accent-secondary:#f97316; --btn-secondary-bg: #21262d; --btn-secondary-text: #e6edf3; --input-bg: #0d1117; --input-border: #30363d; --success: #3fb950; --success-bg: rgba(63, 185, 80, 0.12); --success-text: #3fb950; --danger: #f85149; --danger-bg: rgba(248, 81, 73, 0.12); --danger-text: #f85149; --warning: #d29922; --warning-bg: rgba(210, 153, 34, 0.12); --warning-text: #d29922; --gradient-bg: linear-gradient(135deg, #0d1117 0%, #161b22 100%); --shadow: 0 4px 6px rgba(0, 0, 0, 0.4); } /* =================================================================== DARK COMMAND — Deep navy, indigo accent, amber highlights =================================================================== */ html[data-theme="dark-command"] { --bg-page: #0a0f1e; --bg-surface: #111827; --bg-surface-alt: #1f2937; --bg-header: #111827; --bg-inset: #060a12; --border-color: #374151; --border-focus: #6366f1; --text-primary: #f9fafb; --text-muted: #9ca3af; --text-heading: #f9fafb; --text-link: #818cf8; --text-link-hover: #a5b4fc; --accent: #6366f1; --accent-hover: #4f46e5; --accent-text: #ffffff; --accent-secondary:#f59e0b; --btn-secondary-bg: #374151; --btn-secondary-text: #f9fafb; --input-bg: #060a12; --input-border: #374151; --success: #10b981; --success-bg: rgba(16, 185, 129, 0.12); --success-text: #10b981; --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.12); --danger-text: #ef4444; --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.12); --warning-text: #f59e0b; --gradient-bg: linear-gradient(135deg, #0a0f1e 0%, #111827 100%); --shadow: 0 4px 6px rgba(0, 0, 0, 0.5); } /* =================================================================== CLEAN SAAS — Light, professional, indigo accent =================================================================== */ html[data-theme="clean-saas"] { --bg-page: #f8fafc; --bg-surface: #ffffff; --bg-surface-alt: #f1f5f9; --bg-header: #ffffff; --bg-inset: #1e293b; /* code/key blocks stay dark */ --border-color: #e2e8f0; --border-focus: #4f46e5; --text-primary: #0f172a; --text-muted: #64748b; --text-heading: #0f172a; --text-link: #4f46e5; --text-link-hover: #4338ca; --accent: #4f46e5; --accent-hover: #4338ca; --accent-text: #ffffff; --accent-secondary:#7c3aed; --btn-secondary-bg: #f1f5f9; --btn-secondary-text: #0f172a; --input-bg: #ffffff; --input-border: #e2e8f0; --success: #16a34a; --success-bg: #f0fdf4; --success-text: #15803d; --danger: #dc2626; --danger-bg: #fef2f2; --danger-text: #b91c1c; --warning: #d97706; --warning-bg: #fffbeb; --warning-text: #b45309; --gradient-bg: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); --shadow: 0 4px 6px rgba(0, 0, 0, 0.07); } /* =================================================================== TRAVIAN — Dark parchment, gold accent =================================================================== */ html[data-theme="travian"] { --bg-page: #12100e; --bg-surface: #1c1914; --bg-surface-alt: #262219; --bg-header: #1c1914; --bg-inset: #0e0c0a; --border-color: #3d3626; --border-focus: #c9a84c; --text-primary: #e8dcc8; --text-muted: #8a7d6a; --text-heading: #e8dcc8; --text-link: #c9a84c; --text-link-hover: #d4b86a; --accent: #c9a84c; --accent-hover: #b8962e; --accent-text: #12100e; --accent-secondary:#8b4513; --btn-secondary-bg: #262219; --btn-secondary-text: #e8dcc8; --input-bg: #0e0c0a; --input-border: #3d3626; --success: #5a8a3c; --success-bg: rgba(90, 138, 60, 0.15); --success-text: #7ab85c; --danger: #a03030; --danger-bg: rgba(160, 48, 48, 0.15); --danger-text: #c85050; --warning: #c9861a; --warning-bg: rgba(201, 134, 26, 0.15); --warning-text: #c9861a; --gradient-bg: linear-gradient(135deg, #12100e 0%, #1c1914 100%); --shadow: 0 4px 6px rgba(0, 0, 0, 0.6); } /* =================================================================== GLOBAL RESETS that use theme variables Applied once here so each page doesn't need to repeat them. =================================================================== */ body { background: var(--bg-page); color: var(--text-primary); } a { color: var(--text-link); } a:hover { color: var(--text-link-hover); } /* Theme Picker — used in the settings/account section */ .theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; } .theme-card { border: 2px solid var(--border-color); border-radius: 10px; padding: 16px; cursor: pointer; transition: border-color 0.2s, transform 0.1s; background: var(--bg-surface); position: relative; } .theme-card:hover { border-color: var(--accent); transform: translateY(-1px); } .theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2); } html[data-theme="dark-command"] .theme-card.active { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); } html[data-theme="clean-saas"] .theme-card.active { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); } html[data-theme="travian"] .theme-card.active { box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2); } .theme-card-preview { height: 48px; border-radius: 6px; margin-bottom: 10px; overflow: hidden; display: flex; gap: 3px; padding: 6px; } .theme-card-preview .preview-bar { flex: 1; border-radius: 3px; } .theme-card-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .theme-card-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; } .theme-card .active-badge { position: absolute; top: 8px; right: 8px; background: var(--accent); color: var(--accent-text); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; display: none; } .theme-card.active .active-badge { display: block; }