/* Uncent - Theme Variables */ /* Customize these variables to change the entire look and feel */ :root { /* === PRIMARY COLORS === */ /* Main brand color - used for buttons, links, highlights */ --primary-color: #005da3; --primary-hover: #005a87; --primary-light: #e3f2fd; /* Secondary colors for less prominent elements */ --secondary-color: #6c757d; --secondary-hover: #5a6268; /* Status colors */ --success-color: #28a745; --danger-color: #dc3545; --warning-color: #ffc107; --info-color: #17a2b8; /* === BACKGROUND COLORS === */ /* Header background color */ --header-bg-color: inherit; /* Main background color */ --bg-color: #aec0dc; /* Secondary background (cards, sidebars) */ --bg-secondary: #e9f4ff; /* Tertiary background (hover states, dividers) */ --bg-tertiary: #fafafa; --bg-image: none; /* sidebar background color */ --sidebar-bg: rgba(209, 228, 255, 0.9); --sidebar-bg-header: inherit; /* === TEXT COLORS === */ /* Primary text color */ --text-color: #212529; /* Muted text for less important content */ --text-muted: #6c757d; /* Light text for dark backgrounds */ --text-light: #ffffff; /* === BORDER AND SPACING === */ /* Border color for cards, inputs, dividers */ --border-color: #005da3; /* Standard border radius for rounded corners */ --border-radius: 8px; /* Standard box shadow for cards and modals */ --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* === NAVIGATION STYLES === */ /* Rounded corners on the right side */ --nav-border-radius: 0 8px 8px 0; /* === TYPOGRAPHY === */ /* Font family - customize to use your preferred fonts */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Font sizes */ --font-size-base: 16px; --font-size-sm: 14px; --font-size-lg: 18px; --font-size-xl: 24px; /* === SPACING SYSTEM === */ /* Consistent spacing scale */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; /* === AVATAR AND IMAGE SIZES === */ --avatar-sm: 32px; --avatar-md: 40px; --avatar-lg: 60px; --avatar-xl: 120px; /* === LAYOUT DIMENSIONS === */ --sidebar-width: 250px; --content-max-width: 1200px; --modal-max-width: 500px; --modal-large-max-width: 700px; /* === TRANSITIONS === */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; /* === Z-INDEX SCALE === */ --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000; --z-tooltip: 4000; } /* === DARK THEME VARIABLES === */ /* Automatically applied when user prefers dark mode */ /* Adjust primary colors for better contrast in dark mode */ /* @media (prefers-color-scheme: dark) { :root { --bg-color: #1a1a1a; --bg-secondary: #2d2d2d; --bg-tertiary: #404040; --text-color: #ffffff; --text-muted: #b0b0b0; --border-color: #404040; --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); --primary-light: rgba(0, 124, 186, 0.2); } } */ /* === CUSTOM THEME CLASSES === */ /* Users can override these by adding classes to */ /* High contrast theme for accessibility */ .theme-high-contrast { --primary-color: #0066cc; --primary-hover: #004499; --bg-color: #ffffff; --bg-secondary: #f0f0f0; --text-color: #000000; --text-muted: #333333; --border-color: #000000; --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* Colorful theme */ .theme-colorful { --primary-color: #ff6b35; --primary-hover: #e55a2b; --primary-light: #fff0eb; --secondary-color: #4ecdc4; --success-color: #26de81; --warning-color: #fed330; --info-color: #74b9ff; --bg-secondary: #f8f4ff; --bg-tertiary: #ede7f6; } /* Minimal theme */ .theme-minimal { --primary-color: #333333; --primary-hover: #000000; --secondary-color: #999999; --bg-color: #ffffff; --bg-secondary: #fafafa; --bg-tertiary: #f0f0f0; --border-color: #e0e0e0; --border-radius: 4px; --box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } /* Nature theme */ .theme-nature { --primary-color: #2d5016; --primary-hover: #1a2f0a; --primary-light: #f1f8e9; --secondary-color: #8bc34a; --success-color: #4caf50; --bg-color: #fafafa; --bg-secondary: #f1f8e9; --bg-tertiary: #dcedc8; } /* Ocean theme */ .theme-ocean { --primary-color: #006064; --primary-hover: #004d40; --primary-light: #e0f2f1; --secondary-color: #26a69a; --info-color: #00acc1; --bg-color: #fafafa; --bg-secondary: #e0f2f1; --bg-tertiary: #b2dfdb; } /* === FONT THEME VARIABLES === */ /* Different font combinations users can choose from */ .font-system { --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .font-serif { --font-family: Georgia, 'Times New Roman', Times, serif; } .font-mono { --font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; } .font-rounded { --font-family: 'Nunito', 'Quicksand', -apple-system, sans-serif; } /* === SIZE VARIANTS === */ /* For users who want different sizing */ .size-compact { --spacing-xs: 2px; --spacing-sm: 4px; --spacing-md: 8px; --spacing-lg: 12px; --spacing-xl: 16px; --font-size-base: 14px; --font-size-sm: 12px; --font-size-lg: 16px; --font-size-xl: 20px; } .size-comfortable { --spacing-xs: 6px; --spacing-sm: 12px; --spacing-md: 20px; --spacing-lg: 28px; --spacing-xl: 36px; --font-size-base: 18px; --font-size-sm: 16px; --font-size-lg: 20px; --font-size-xl: 28px; } /* === ANIMATION PREFERENCES === */ /* Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: none; --transition-normal: none; --transition-slow: none; } } /* === CUSTOM PROPERTY HELPERS === */ /* Utility classes for quick theme adjustments */ .bg-primary { background-color: var(--primary-color) !important; } .bg-secondary { background-color: var(--bg-secondary) !important; } .text-primary { color: var(--primary-color) !important; } .text-muted { color: var(--text-muted) !important; } .border-primary { border-color: var(--primary-color) !important; } /* === CUSTOM GRADIENTS === */ /* Define gradients that can be customized per theme */ :root { --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%); --gradient-header: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary) 100%); --gradient-card: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-color) 100%); } /* === COMPONENT-SPECIFIC VARIABLES === */ /* Fine-tune specific components */ :root { /* Header */ --header-bg: var(--header-bg-color); --header-text: var(--text-color); --header-border: var(--border-color); /* Posts */ --post-bg: var(--bg-color); --post-border: var(--border-color); --post-shadow: var(--box-shadow); /* Comments */ --comment-bg: var(--bg-secondary); --comment-border: var(--border-color); /* Modals */ --modal-bg: var(--bg-color); --modal-overlay: rgba(0, 0, 0, 0.5); --modal-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Forms */ --input-bg: rgba(255, 255, 255, 0.8); --input-border: var(--border-color); --input-focus: var(--primary-color); /* Buttons */ --btn-primary-bg: var(--primary-color); --btn-primary-text: var(--text-light); --btn-secondary-bg: var(--secondary-color); --btn-secondary-text: var(--text-light); }