@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ===== core/tokens.css ===== */ /* =================================================================== DCS Design System - Design Tokens Version: 2.0.0 Core design tokens including colors, typography, spacing, and themes. Supports light and dark themes via data-theme attribute on : - (default, student LMS) - (admin portal) =================================================================== */ /* =================================================================== 1. SHARED TOKENS (Theme-Independent) =================================================================== */ :root { /* ----- Brand Colors ----- */ --brand-primary: #00e5ff; --brand-primary-rgb: 0, 229, 255; --brand-primary-dark: #00b8cc; --brand-primary-light: #66f0ff; --brand-primary-alpha: rgba(0, 229, 255, 0.15); --brand-primary-alpha-strong: rgba(0, 229, 255, 0.30); --brand-secondary: #ff9f43; --brand-secondary-rgb: 255, 159, 67; --brand-secondary-dark: #e68a2e; --brand-secondary-light: #ffb76b; --brand-secondary-alpha: rgba(255, 159, 67, 0.15); /* ----- Status Colors (Base) ----- */ --color-success: #10b981; --color-success-dark: #059669; --color-danger: #ef4444; --color-danger-dark: #dc2626; --color-warning: #f59e0b; --color-warning-dark: #d97706; --color-info: #3b82f6; --color-info-dark: #2563eb; /* ----- Spacing Scale ----- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* ----- Typography ----- */ --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', 'Consolas', monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; --font-size-4xl: 2.5rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-base: 1.5; --line-height-relaxed: 1.75; /* ----- Border Radius ----- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ----- Transitions ----- */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --transition-slower: 400ms ease; /* ----- Z-Index Scale ----- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-toast: 800; /* ----- Activity Type Colors ----- */ --activity-assignment: #b45309; --activity-skill-check: #16a34a; --activity-quiz: #6366f1; --activity-page: #7c3aed; --activity-multi-page: #7c3aed; --activity-link: #1d4ed8; --activity-workplace: #0891b2; --activity-file: #0284c7; --activity-html: #be185d; --activity-header: #6b7280; /* ----- Overlay Backgrounds ----- */ --bg-overlay-dark: rgba(0, 0, 0, 0.8); --bg-overlay-medium: rgba(0, 0, 0, 0.5); --bg-overlay-light: rgba(255, 255, 255, 0.3); --bg-scrim: rgba(0, 0, 0, 0.6); /* ----- Focus Ring Patterns ----- */ --focus-ring: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15); --focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.15); --focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.15); /* ----- Text on Colored Backgrounds ----- */ --text-on-brand: #ffffff; --text-on-success: #ffffff; --text-on-danger: #ffffff; --text-on-warning: #000000; /* ----- Container Widths ----- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; } /* =================================================================== 2. DARK THEME (Default) =================================================================== */ :root, [data-theme="dark"] { /* Text */ --text-primary: #e6f1ff; --text-secondary: #a8b2d1; --text-muted: #8892b0; --text-light: #ccd6f6; --text-inverse: #0a192f; /* Backgrounds */ --bg-body: #0a192f; --bg-body-rgb: 10, 25, 47; --bg-surface: #112240; --bg-surface-rgb: 17, 34, 64; --bg-elevated: #1d3461; --bg-input: #233554; --bg-hover: #304066; --bg-active: #3d4f7c; --bg-overlay: rgba(2, 12, 27, 0.85); /* Background Pattern (none for dark theme) */ --bg-pattern: none; --bg-pattern-size: auto; /* Borders */ --border-light: #233554; --border-medium: #304066; --border-dark: #4d5b7c; --border-focus: var(--brand-primary); /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 20px rgba(var(--brand-primary-rgb), 0.3); /* Status Colors (Neon for dark) */ --color-success-text: #00ff9d; --color-success-bg: rgba(16, 185, 129, 0.15); --color-danger-text: #ff6b7a; --color-danger-bg: rgba(239, 68, 68, 0.15); --color-warning-text: #ffc107; --color-warning-bg: rgba(245, 158, 11, 0.15); --color-info-text: #60a5fa; --color-info-bg: rgba(59, 130, 246, 0.15); /* Purple Color (for random/randomized indicators) */ --color-purple: #a78bfa; --color-purple-bg: rgba(139, 92, 246, 0.15); --color-purple-bg-subtle: rgba(139, 92, 246, 0.08); --color-purple-border: rgba(139, 92, 246, 0.3); /* Urgency Colors */ --urgency-critical: #ff4757; --urgency-critical-bg: #2d1414; --urgency-high: #ff7f50; --urgency-high-bg: #2d1e14; --urgency-medium: #ffa502; --urgency-medium-bg: #2d2614; --urgency-low: #2ed573; --urgency-low-bg: #14281d; /* Forms */ --input-bg: var(--bg-input); --input-border: var(--border-medium); --input-text: var(--text-primary); --input-placeholder: var(--text-muted); --input-focus-border: var(--brand-primary); --input-focus-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15); /* Buttons */ --btn-primary-bg: var(--brand-primary); --btn-primary-text: #0a192f; --btn-primary-hover: var(--brand-primary-dark); --btn-secondary-bg: var(--bg-input); --btn-secondary-text: var(--text-primary); --btn-secondary-hover: var(--bg-hover); --btn-secondary-border: var(--border-medium); /* Links */ --link-color: var(--brand-primary); --link-hover: var(--brand-primary-light); /* Cards */ --card-bg: var(--bg-surface); --card-border: var(--border-light); --card-header-bg: var(--bg-input); } /* =================================================================== 3. LIGHT THEME =================================================================== */ [data-theme="light"] { /* Text - Ink Black for high contrast */ --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --text-light: #94a3b8; --text-inverse: #ffffff; /* Backgrounds - Ice White */ --bg-body: #f8fafc; --bg-body-rgb: 248, 250, 252; --bg-surface: #ffffff; --bg-surface-rgb: 255, 255, 255; --bg-elevated: #ffffff; --bg-input: #ffffff; --bg-hover: #f1f5f9; --bg-active: #e2e8f0; --bg-overlay: rgba(15, 23, 42, 0.5); /* Background Pattern - Subtle dot grid */ --bg-pattern: radial-gradient(#cbd5e1 1px, transparent 1px); --bg-pattern-size: 24px 24px; /* Borders - Sharper for light theme */ --border-light: #e2e8f0; --border-medium: #cbd5e1; --border-dark: #94a3b8; --border-focus: var(--brand-primary-dark); /* Shadows - No glow in light theme */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.15); --shadow-glow: none; /* Status Colors (Softer for light) */ --color-success-text: #059669; --color-success-bg: rgba(16, 185, 129, 0.1); --color-danger-text: #dc2626; --color-danger-bg: rgba(239, 68, 68, 0.1); --color-warning-text: #d97706; --color-warning-bg: rgba(245, 158, 11, 0.1); --color-info-text: #2563eb; --color-info-bg: rgba(59, 130, 246, 0.1); /* Purple Color (for random/randomized indicators) */ --color-purple: #8b5cf6; --color-purple-bg: rgba(139, 92, 246, 0.1); --color-purple-bg-subtle: rgba(139, 92, 246, 0.05); --color-purple-border: rgba(139, 92, 246, 0.2); /* Urgency Colors */ --urgency-critical: #dc2626; --urgency-critical-bg: #fef2f2; --urgency-high: #ea580c; --urgency-high-bg: #fff7ed; --urgency-medium: #d97706; --urgency-medium-bg: #fffbeb; --urgency-low: #16a34a; --urgency-low-bg: #f0fdf4; /* Forms */ --input-bg: var(--bg-input); --input-border: var(--border-medium); --input-text: var(--text-primary); --input-placeholder: var(--text-muted); --input-focus-border: var(--brand-primary-dark); --input-focus-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1); /* Buttons - Adjusted for light theme */ --btn-primary-bg: #00b8cc; --btn-primary-text: #ffffff; --btn-primary-hover: #009db3; --btn-secondary-bg: #ffffff; --btn-secondary-text: var(--text-primary); --btn-secondary-hover: var(--bg-hover); --btn-secondary-border: var(--border-medium); /* Links */ --link-color: var(--brand-primary-dark); --link-hover: var(--brand-primary); /* Cards */ --card-bg: var(--bg-surface); --card-border: var(--border-light); --card-header-bg: var(--bg-hover); /* Adjusted brand colors for contrast */ --brand-primary: #00b8cc; --brand-secondary: #e68a2e; } /* ===== core/base.css ===== */ /* =================================================================== DCS Design System - Base Styles Version: 2.0.0 Reset, typography, and foundational element styles. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. CSS RESET (Modern Minimal) =================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { min-height: 100vh; font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-base); color: var(--text-primary); background-color: var(--bg-body); background-image: var(--bg-pattern); background-size: var(--bg-pattern-size, auto); transition: background-color var(--transition-base), color var(--transition-base); } /* Remove default list styles */ ul, ol { list-style: none; } /* Remove default anchor styles */ a { color: inherit; text-decoration: none; } /* Prevent img from overflowing */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Remove built-in form typography */ input, button, textarea, select { font: inherit; color: inherit; } /* Remove default button styles */ button { background: none; border: none; cursor: pointer; } /* Avoid text overflow */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Remove default table spacing */ table { border-collapse: collapse; border-spacing: 0; } /* Hidden attribute support */ [hidden] { display: none !important; } /* =================================================================== 2. TYPOGRAPHY =================================================================== */ /* ----- Headings ----- */ h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--text-primary); margin-bottom: var(--space-md); } h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); } h5 { font-size: var(--font-size-lg); } h6 { font-size: var(--font-size-base); } /* ----- Paragraphs & Body Text ----- */ p { margin-bottom: var(--space-md); color: var(--text-secondary); } .lead { font-size: var(--font-size-lg); color: var(--text-secondary); line-height: var(--line-height-relaxed); } .small, small { font-size: var(--font-size-sm); } .text-xs { font-size: var(--font-size-xs); } .text-muted { color: var(--text-muted); } .text-light { color: var(--text-light); } /* ----- Links ----- */ a { color: var(--link-color); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--link-hover); } a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Underlined link variant */ .link-underline { text-decoration: underline; text-underline-offset: 2px; } .link-underline:hover { text-decoration-color: var(--brand-primary); } /* ----- Text Utilities ----- */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .font-normal { font-weight: var(--font-weight-normal); } .font-medium { font-weight: var(--font-weight-medium); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ----- Monospace / Code ----- */ code, kbd, pre, samp { font-family: var(--font-family-mono); font-size: var(--font-size-sm); } code { padding: 2px 6px; background: var(--bg-input); border-radius: var(--radius-sm); color: var(--brand-primary); } pre { padding: var(--space-md); background: var(--bg-input); border-radius: var(--radius-md); overflow-x: auto; margin-bottom: var(--space-md); } pre code { padding: 0; background: none; } kbd { padding: 2px 6px; background: var(--bg-elevated); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); } /* ----- Horizontal Rule ----- */ hr { border: none; height: 1px; background: var(--border-light); margin: var(--space-xl) 0; } /* =================================================================== 3. SELECTION =================================================================== */ ::selection { background: var(--brand-primary-alpha-strong); color: var(--text-primary); } /* =================================================================== 4. SCROLLBAR (Webkit) =================================================================== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-body); } ::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--border-dark); } /* Firefox scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--border-medium) var(--bg-body); } /* =================================================================== 5. FOCUS STATES =================================================================== */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } /* ===== core/utilities.css ===== */ /* =================================================================== DCS Design System - Utility Classes Version: 2.0.0 Layout, spacing, display, and visibility utility classes. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. LAYOUT UTILITIES =================================================================== */ .container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-md); } .container-sm { max-width: var(--container-sm); } .container-md { max-width: var(--container-md); } .container-lg { max-width: var(--container-lg); } .container-2xl { max-width: var(--container-2xl); } /* =================================================================== 2. SPACING UTILITIES =================================================================== */ /* Margin */ .m-0 { margin: 0; } .m-xs { margin: var(--space-xs); } .m-sm { margin: var(--space-sm); } .m-md { margin: var(--space-md); } .m-lg { margin: var(--space-lg); } .m-xl { margin: var(--space-xl); } .m-2xl { margin: var(--space-2xl); } .mt-0 { margin-top: 0; } .mt-xs { margin-top: var(--space-xs); } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); } .mr-0 { margin-right: 0; } .mr-xs { margin-right: var(--space-xs); } .mr-sm { margin-right: var(--space-sm); } .mr-md { margin-right: var(--space-md); } .mr-lg { margin-right: var(--space-lg); } .mr-xl { margin-right: var(--space-xl); } .mb-0 { margin-bottom: 0; } .mb-xs { margin-bottom: var(--space-xs); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .mb-2xl { margin-bottom: var(--space-2xl); } .ml-0 { margin-left: 0; } .ml-xs { margin-left: var(--space-xs); } .ml-sm { margin-left: var(--space-sm); } .ml-md { margin-left: var(--space-md); } .ml-lg { margin-left: var(--space-lg); } .ml-xl { margin-left: var(--space-xl); } .mx-0 { margin-left: 0; margin-right: 0; } .mx-auto { margin-left: auto; margin-right: auto; } .mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); } .mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); } .mx-md { margin-left: var(--space-md); margin-right: var(--space-md); } .my-0 { margin-top: 0; margin-bottom: 0; } .my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); } .my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); } .my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); } .my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); } .my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); } /* Padding */ .p-0 { padding: 0; } .p-xs { padding: var(--space-xs); } .p-sm { padding: var(--space-sm); } .p-md { padding: var(--space-md); } .p-lg { padding: var(--space-lg); } .p-xl { padding: var(--space-xl); } .p-2xl { padding: var(--space-2xl); } .pt-0 { padding-top: 0; } .pt-xs { padding-top: var(--space-xs); } .pt-sm { padding-top: var(--space-sm); } .pt-md { padding-top: var(--space-md); } .pt-lg { padding-top: var(--space-lg); } .pt-xl { padding-top: var(--space-xl); } .pr-0 { padding-right: 0; } .pr-xs { padding-right: var(--space-xs); } .pr-sm { padding-right: var(--space-sm); } .pr-md { padding-right: var(--space-md); } .pr-lg { padding-right: var(--space-lg); } .pr-xl { padding-right: var(--space-xl); } .pb-0 { padding-bottom: 0; } .pb-xs { padding-bottom: var(--space-xs); } .pb-sm { padding-bottom: var(--space-sm); } .pb-md { padding-bottom: var(--space-md); } .pb-lg { padding-bottom: var(--space-lg); } .pb-xl { padding-bottom: var(--space-xl); } .pl-0 { padding-left: 0; } .pl-xs { padding-left: var(--space-xs); } .pl-sm { padding-left: var(--space-sm); } .pl-md { padding-left: var(--space-md); } .pl-lg { padding-left: var(--space-lg); } .pl-xl { padding-left: var(--space-xl); } .px-0 { padding-left: 0; padding-right: 0; } .px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); } .px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); } .px-md { padding-left: var(--space-md); padding-right: var(--space-md); } .px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); } .px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); } .py-0 { padding-top: 0; padding-bottom: 0; } .py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); } .py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); } .py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); } .py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); } .py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } /* =================================================================== 3. DISPLAY UTILITIES =================================================================== */ .d-none { display: none; } .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-flex { display: flex; } .d-inline-flex { display: inline-flex; } .d-grid { display: grid; } /* Flexbox utilities */ .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-column { flex-direction: column; } .flex-column-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-1 { flex: 1; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-grow-0 { flex-grow: 0; } .flex-grow-1 { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } .flex-shrink-1 { flex-shrink: 1; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } .align-start { align-items: flex-start; } .align-end { align-items: flex-end; } .align-center { align-items: center; } .align-baseline { align-items: baseline; } .align-stretch { align-items: stretch; } .align-self-start { align-self: flex-start; } .align-self-end { align-self: flex-end; } .align-self-center { align-self: center; } .align-self-stretch { align-self: stretch; } .gap-0 { gap: 0; } .gap-xs { gap: var(--space-xs); } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } .gap-xl { gap: var(--space-xl); } .gap-2xl { gap: var(--space-2xl); } /* =================================================================== 4. VISIBILITY & SCREEN READER =================================================================== */ .visually-hidden, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .visible { visibility: visible; } .invisible { visibility: hidden; } /* =================================================================== 5. POSITION UTILITIES =================================================================== */ .position-static { position: static; } .position-relative { position: relative; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .position-sticky { position: sticky; } .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .inset-0 { inset: 0; } /* =================================================================== 6. WIDTH & HEIGHT UTILITIES =================================================================== */ .w-auto { width: auto; } .w-full { width: 100%; } .w-screen { width: 100vw; } .w-min { width: min-content; } .w-max { width: max-content; } .w-fit { width: fit-content; } .h-auto { height: auto; } .h-full { height: 100%; } .h-screen { height: 100vh; } .h-min { height: min-content; } .h-max { height: max-content; } .h-fit { height: fit-content; } .min-w-0 { min-width: 0; } .min-w-full { min-width: 100%; } .max-w-full { max-width: 100%; } .max-w-none { max-width: none; } .min-h-0 { min-height: 0; } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } /* =================================================================== 7. OVERFLOW UTILITIES =================================================================== */ .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-scroll { overflow: scroll; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-hidden { overflow-y: hidden; } /* =================================================================== 8. Z-INDEX UTILITIES =================================================================== */ .z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-auto { z-index: auto; } /* =================================================================== 9. CURSOR UTILITIES =================================================================== */ .cursor-auto { cursor: auto; } .cursor-default { cursor: default; } .cursor-pointer { cursor: pointer; } .cursor-wait { cursor: wait; } .cursor-text { cursor: text; } .cursor-move { cursor: move; } .cursor-not-allowed { cursor: not-allowed; } /* =================================================================== 10. USER SELECT UTILITIES =================================================================== */ .select-none { user-select: none; } .select-text { user-select: text; } .select-all { user-select: all; } .select-auto { user-select: auto; } /* =================================================================== 11. POINTER EVENTS UTILITIES =================================================================== */ .pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; } /* =================================================================== 12. BORDER RADIUS UTILITIES =================================================================== */ .rounded-none { border-radius: 0; } .rounded-sm { border-radius: var(--radius-sm); } .rounded { border-radius: var(--radius-md); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-full { border-radius: var(--radius-full); } /* =================================================================== 13. SHADOW UTILITIES =================================================================== */ .shadow-none { box-shadow: none; } .shadow-xs { box-shadow: var(--shadow-xs); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow { box-shadow: var(--shadow-md); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } .shadow-glow { box-shadow: var(--shadow-glow); } /* =================================================================== 14. OPACITY UTILITIES =================================================================== */ .opacity-0 { opacity: 0; } .opacity-25 { opacity: 0.25; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; } /* =================================================================== 15. TRANSITION UTILITIES =================================================================== */ .transition-none { transition: none; } .transition-fast { transition: all var(--transition-fast); } .transition { transition: all var(--transition-base); } .transition-slow { transition: all var(--transition-slow); } /* =================================================================== 16. TEXT UTILITIES =================================================================== */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } .text-capitalize { text-transform: capitalize; } .text-normal-case { text-transform: none; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-break { word-wrap: break-word; word-break: break-word; } .whitespace-normal { white-space: normal; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre { white-space: pre; } .whitespace-pre-wrap { white-space: pre-wrap; } /* Font weight */ .font-normal { font-weight: var(--font-weight-normal); } .font-medium { font-weight: var(--font-weight-medium); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); } /* Font size */ .text-xs { font-size: var(--font-size-xs); } .text-sm { font-size: var(--font-size-sm); } .text-base { font-size: var(--font-size-base); } .text-lg { font-size: var(--font-size-lg); } .text-xl { font-size: var(--font-size-xl); } .text-2xl { font-size: var(--font-size-2xl); } .text-3xl { font-size: var(--font-size-3xl); } .text-4xl { font-size: var(--font-size-4xl); } /* Text colors */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-light { color: var(--text-light); } .text-brand { color: var(--brand-primary); } .text-success { color: var(--color-success-text); } .text-danger { color: var(--color-danger-text); } .text-warning { color: var(--color-warning-text); } .text-info { color: var(--color-info-text); } /* =================================================================== 17. SURFACE UTILITIES (Content Containment) =================================================================== */ /* Glass surface - translucent background for headers/widgets over custom backgrounds */ .surface-glass { background-color: rgba(var(--bg-surface-rgb), 0.90); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-lg); } /* Lighter glass variant */ .surface-glass-light { background-color: rgba(var(--bg-surface-rgb), 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-md); } /* Text shadow for readability over images (use sparingly) */ .text-shadow-contrast { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6); } /* Stronger shadow for light backgrounds */ .text-shadow-contrast-strong { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.7); } /* =================================================================== 18. BACKGROUND UTILITIES =================================================================== */ .bg-body { background-color: var(--bg-body); } .bg-surface { background-color: var(--bg-surface); } .bg-elevated { background-color: var(--bg-elevated); } .bg-input { background-color: var(--bg-input); } .bg-hover { background-color: var(--bg-hover); } .bg-transparent { background-color: transparent; } /* =================================================================== 19. PRINT UTILITIES =================================================================== */ @media print { /* Hide non-essential elements */ .no-print, .sidebar, .navbar, .nav, .btn-fab, .toast-container, .focus-mode-toggle { display: none !important; } /* Force light mode colors for printing */ body { background: white !important; color: black !important; } .card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; } /* Expand accordions */ .accordion-content, .collapse { display: block !important; max-height: none !important; overflow: visible !important; } /* Show URLs after links */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } /* Page break controls */ .page-break-before { page-break-before: always; } .page-break-after { page-break-after: always; } .avoid-break { break-inside: avoid; } } /* =================================================================== 20. REDUCED MOTION =================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== components/buttons.css ===== */ /* =================================================================== DCS Design System - Button Components Version: 2.0.0 Button styles including variants, sizes, and states. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. BASE BUTTON =================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-base); text-align: center; text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; border: 2px solid transparent; border-radius: var(--radius-md); transition: all var(--transition-base); appearance: none; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } .btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; } /* =================================================================== 2. PRIMARY BUTTON =================================================================== */ .btn-primary { color: var(--btn-primary-text); background-color: var(--btn-primary-bg); border-color: var(--btn-primary-bg); } .btn-primary:hover { background-color: var(--btn-primary-hover); border-color: var(--btn-primary-hover); box-shadow: var(--shadow-md), var(--shadow-glow); } .btn-primary:active { background-color: var(--brand-primary-dark); border-color: var(--brand-primary-dark); } /* =================================================================== 3. SECONDARY BUTTON =================================================================== */ .btn-secondary { color: var(--btn-secondary-text); background-color: var(--btn-secondary-bg); border-color: var(--btn-secondary-border); } .btn-secondary:hover { background-color: var(--btn-secondary-hover); border-color: var(--brand-primary); box-shadow: var(--shadow-sm); } .btn-secondary:active { background-color: var(--bg-active); } /* =================================================================== 4. OUTLINE VARIANTS =================================================================== */ .btn-outline-primary { color: var(--brand-primary); background-color: transparent; border-color: var(--brand-primary); } .btn-outline-primary:hover { color: var(--btn-primary-text); background-color: var(--brand-primary); box-shadow: var(--shadow-glow); } .btn-outline-secondary { color: var(--text-secondary); background-color: transparent; border-color: var(--border-medium); } .btn-outline-secondary:hover { color: var(--text-primary); background-color: var(--bg-hover); border-color: var(--border-dark); } /* =================================================================== 5. STATUS BUTTONS =================================================================== */ /* Success */ .btn-success { color: #fff; background-color: var(--color-success); border-color: var(--color-success); } .btn-success:hover { background-color: var(--color-success-dark); border-color: var(--color-success-dark); box-shadow: var(--shadow-md); } .btn-outline-success { color: var(--color-success); background-color: transparent; border-color: var(--color-success); } .btn-outline-success:hover { color: #fff; background-color: var(--color-success); } /* Danger */ .btn-danger { color: #fff; background-color: var(--color-danger); border-color: var(--color-danger); } .btn-danger:hover { background-color: var(--color-danger-dark); border-color: var(--color-danger-dark); box-shadow: var(--shadow-md); } .btn-outline-danger { color: var(--color-danger); background-color: transparent; border-color: var(--color-danger); } .btn-outline-danger:hover { color: #fff; background-color: var(--color-danger); } /* Warning */ .btn-warning { color: #1e293b; background-color: var(--color-warning); border-color: var(--color-warning); } .btn-warning:hover { background-color: var(--color-warning-dark); border-color: var(--color-warning-dark); box-shadow: var(--shadow-md); } .btn-outline-warning { color: var(--color-warning); background-color: transparent; border-color: var(--color-warning); } .btn-outline-warning:hover { color: #1e293b; background-color: var(--color-warning); } /* Info */ .btn-info { color: #fff; background-color: var(--color-info); border-color: var(--color-info); } .btn-info:hover { background-color: var(--color-info-dark); border-color: var(--color-info-dark); box-shadow: var(--shadow-md); } .btn-outline-info { color: var(--color-info); background-color: transparent; border-color: var(--color-info); } .btn-outline-info:hover { color: #fff; background-color: var(--color-info); } /* =================================================================== 6. GHOST BUTTON (No background or border) =================================================================== */ .btn-ghost { color: var(--text-secondary); background-color: transparent; border-color: transparent; } .btn-ghost:hover { color: var(--text-primary); background-color: var(--bg-hover); } .btn-ghost-primary { color: var(--brand-primary); background-color: transparent; border-color: transparent; } .btn-ghost-primary:hover { background-color: var(--brand-primary-alpha); } /* =================================================================== 7. LINK BUTTON (Looks like a link) =================================================================== */ .btn-link { color: var(--link-color); background-color: transparent; border-color: transparent; padding: 0; font-weight: var(--font-weight-medium); } .btn-link:hover { color: var(--link-hover); text-decoration: underline; transform: none; } /* =================================================================== 8. SIZE VARIANTS =================================================================== */ .btn-xs { padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-xs); border-radius: var(--radius-sm); } .btn-sm { padding: var(--space-xs) var(--space-md); font-size: var(--font-size-sm); border-radius: var(--radius-sm); } .btn-lg { padding: var(--space-md) var(--space-xl); font-size: var(--font-size-lg); border-radius: var(--radius-lg); } .btn-xl { padding: var(--space-lg) var(--space-2xl); font-size: var(--font-size-xl); border-radius: var(--radius-lg); } /* =================================================================== 9. FULL WIDTH BUTTON =================================================================== */ .btn-block { display: flex; width: 100%; } /* =================================================================== 10. ICON BUTTON (Square) =================================================================== */ .btn-icon { padding: var(--space-sm); aspect-ratio: 1; } .btn-icon.btn-xs { padding: var(--space-xs); } .btn-icon.btn-sm { padding: 6px; } .btn-icon.btn-lg { padding: var(--space-md); } /* Circle variant */ .btn-icon-circle { padding: var(--space-sm); aspect-ratio: 1; border-radius: var(--radius-full); } /* =================================================================== 11. BUTTON GROUP =================================================================== */ .btn-group { display: inline-flex; vertical-align: middle; } .btn-group > .btn { position: relative; flex: 0 1 auto; border-radius: 0; } .btn-group > .btn:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .btn-group > .btn:last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .btn-group > .btn:not(:first-child) { margin-left: -2px; } .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active { z-index: 1; } /* Vertical button group */ .btn-group-vertical { display: inline-flex; flex-direction: column; vertical-align: middle; } .btn-group-vertical > .btn { border-radius: 0; } .btn-group-vertical > .btn:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } .btn-group-vertical > .btn:last-child { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .btn-group-vertical > .btn:not(:first-child) { margin-top: -2px; } /* =================================================================== 12. LOADING STATE =================================================================== */ .btn-loading { position: relative; pointer-events: none; color: transparent !important; } .btn-loading::after { content: ''; position: absolute; width: 16px; height: 16px; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-full); animation: btn-spinner 0.6s linear infinite; } .btn-loading.btn-primary::after, .btn-loading.btn-success::after, .btn-loading.btn-danger::after, .btn-loading.btn-info::after { border-color: #fff; border-right-color: transparent; } @keyframes btn-spinner { to { transform: rotate(360deg); } } /* =================================================================== 13. PILL SHAPE =================================================================== */ .btn-pill { border-radius: var(--radius-full); } /* =================================================================== 14. WITH BADGE/COUNT =================================================================== */ .btn-badge { position: relative; } .btn-badge__count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 6px; font-size: 11px; font-weight: var(--font-weight-bold); line-height: 18px; text-align: center; color: #fff; background-color: var(--color-danger); border-radius: var(--radius-full); } /* =================================================================== 15. CLOSE BUTTON =================================================================== */ .btn-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--text-muted); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .btn-close:hover { color: var(--text-primary); background-color: var(--bg-hover); } .btn-close::before { content: '\00d7'; font-size: 24px; line-height: 1; } /* =================================================================== 16. FLOATING ACTION BUTTON (FAB) =================================================================== */ .btn-fab { position: fixed; bottom: var(--space-xl); right: var(--space-xl); width: 56px; height: 56px; padding: 0; font-size: var(--font-size-xl); color: var(--btn-primary-text); background-color: var(--btn-primary-bg); border: none; border-radius: var(--radius-full); box-shadow: var(--shadow-lg); z-index: var(--z-fixed); } .btn-fab:hover { transform: scale(1.1); box-shadow: var(--shadow-xl), var(--shadow-glow); } .btn-fab.btn-sm { width: 40px; height: 40px; font-size: var(--font-size-base); } /* =================================================================== 12. CLOSE BUTTON (Bootstrap .btn-close replacement) =================================================================== */ .btn-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--text-muted); background: transparent; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); position: relative; } .btn-close::before, .btn-close::after { content: ''; position: absolute; width: 16px; height: 2px; background-color: currentColor; border-radius: 1px; } .btn-close::before { transform: rotate(45deg); } .btn-close::after { transform: rotate(-45deg); } .btn-close:hover { color: var(--text-primary); background-color: var(--bg-hover); } .btn-close:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } /* White variant for dark backgrounds */ .btn-close-white { color: rgba(255, 255, 255, 0.7); } .btn-close-white:hover { color: #fff; background-color: rgba(255, 255, 255, 0.1); } /* Small variant */ .btn-close-sm { width: 24px; height: 24px; } .btn-close-sm::before, .btn-close-sm::after { width: 12px; } /* Large variant */ .btn-close-lg { width: 40px; height: 40px; } .btn-close-lg::before, .btn-close-lg::after { width: 20px; height: 2.5px; } /* ===== components/forms.css ===== */ /* =================================================================== DCS Design System - Form Components Version: 2.0.0 Form elements: inputs, textareas, selects, checkboxes, radios, etc. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. FORM LAYOUT =================================================================== */ .form-group { margin-bottom: var(--space-lg); } .form-row { display: flex; flex-wrap: wrap; gap: var(--space-md); } .form-row > * { flex: 1; min-width: 200px; } /* =================================================================== 2. LABELS =================================================================== */ .form-label { display: block; margin-bottom: var(--space-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); } .form-label--required::after { content: ' *'; color: var(--color-danger); } /* Inline label with icon */ .form-label--inline { display: flex; align-items: center; gap: var(--space-xs); } /* =================================================================== 3. TEXT INPUTS & TEXTAREAS =================================================================== */ .form-control { display: block; width: 100%; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-base); color: var(--input-text); background-color: var(--input-bg); border: 2px solid var(--input-border); border-radius: var(--radius-md); transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base); appearance: none; } .form-control::placeholder { color: var(--input-placeholder); opacity: 1; } .form-control:hover { border-color: var(--border-dark); } .form-control:focus { outline: none; border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); background-color: var(--bg-body); } .form-control:disabled, .form-control[readonly] { background-color: var(--bg-hover); opacity: 0.7; cursor: not-allowed; } /* Size variants */ .form-control--sm { padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); border-radius: var(--radius-sm); } .form-control--lg { padding: var(--space-md) var(--space-lg); font-size: var(--font-size-lg); border-radius: var(--radius-lg); } /* Textarea specific */ textarea.form-control { min-height: 120px; resize: vertical; } textarea.form-control--auto-resize { resize: none; overflow: hidden; } /* =================================================================== 4. INPUT WITH ICON =================================================================== */ .input-wrapper { position: relative; } .input-icon { position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--brand-primary); font-size: var(--font-size-lg); pointer-events: none; z-index: 1; } .input-icon--right { left: auto; right: var(--space-md); } /* Input with left icon */ .input-wrapper .form-control--icon-left { padding-left: calc(var(--space-md) * 3); } /* Input with right icon */ .input-wrapper .form-control--icon-right { padding-right: calc(var(--space-md) * 3); } /* Input with both icons */ .input-wrapper .form-control--icon-both { padding-left: calc(var(--space-md) * 3); padding-right: calc(var(--space-md) * 3); } /* =================================================================== 5. SELECT =================================================================== */ .form-select { display: block; width: 100%; padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-base); color: var(--input-text); background-color: var(--input-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238892b0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-md) center; background-size: 16px; border: 2px solid var(--input-border); border-radius: var(--radius-md); appearance: none; cursor: pointer; transition: border-color var(--transition-base), box-shadow var(--transition-base); } /* Light theme dropdown arrow */ [data-theme="light"] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); } .form-select:hover { border-color: var(--border-dark); } .form-select:focus { outline: none; border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); } .form-select:disabled { background-color: var(--bg-hover); opacity: 0.7; cursor: not-allowed; } /* Size variants */ .form-select--sm { padding: var(--space-xs) var(--space-xl) var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); } .form-select--lg { padding: var(--space-md) var(--space-2xl) var(--space-md) var(--space-lg); font-size: var(--font-size-lg); } /* =================================================================== 6. CHECKBOX & RADIO =================================================================== */ .form-check { display: flex; align-items: flex-start; gap: var(--space-sm); min-height: 24px; cursor: pointer; } .form-check-input { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; background-color: var(--input-bg); border: 2px solid var(--input-border); appearance: none; cursor: pointer; transition: all var(--transition-fast); } .form-check-input[type="checkbox"] { border-radius: var(--radius-sm); } .form-check-input[type="radio"] { border-radius: var(--radius-full); } .form-check-input:hover { border-color: var(--brand-primary); } .form-check-input:focus { outline: none; border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); } .form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); } /* Checkbox checkmark */ .form-check-input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a192f' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; } /* Radio dot */ .form-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%230a192f'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; } .form-check-input:disabled { opacity: 0.5; cursor: not-allowed; } .form-check-label { font-size: var(--font-size-base); color: var(--text-primary); cursor: pointer; user-select: none; } .form-check-input:disabled + .form-check-label { opacity: 0.5; cursor: not-allowed; } /* Inline checkboxes/radios */ .form-check--inline { display: inline-flex; margin-right: var(--space-lg); } /* =================================================================== 7. SWITCH / TOGGLE =================================================================== */ .form-switch { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; } .form-switch-input { position: relative; width: 48px; height: 26px; background-color: var(--bg-input); border: 2px solid var(--border-medium); border-radius: var(--radius-full); appearance: none; cursor: pointer; transition: all var(--transition-base); } .form-switch-input::before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background-color: var(--text-muted); border-radius: var(--radius-full); transition: all var(--transition-base); } .form-switch-input:hover { border-color: var(--brand-primary); } .form-switch-input:focus { outline: none; box-shadow: var(--input-focus-shadow); } .form-switch-input:checked { background-color: var(--brand-primary-alpha); border-color: var(--brand-primary); } .form-switch-input:checked::before { transform: translateX(22px); background-color: var(--brand-primary); } .form-switch-input:disabled { opacity: 0.5; cursor: not-allowed; } .form-switch-label { font-size: var(--font-size-base); color: var(--text-primary); user-select: none; } /* =================================================================== 8. INPUT GROUP (Addons) =================================================================== */ .input-group { display: flex; align-items: stretch; } .input-group .form-control { flex: 1; border-radius: 0; } .input-group .form-control:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .input-group .form-control:last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .input-group-text { display: flex; align-items: center; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-base); color: var(--text-muted); background-color: var(--bg-input); border: 2px solid var(--input-border); white-space: nowrap; } .input-group-text:first-child { border-right: none; border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .input-group-text:last-child { border-left: none; border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } /* =================================================================== 9. FORM VALIDATION STATES =================================================================== */ /* Valid state */ .form-control.is-valid, .form-select.is-valid { border-color: var(--color-success); } .form-control.is-valid:focus, .form-select.is-valid:focus { border-color: var(--color-success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); } /* Invalid state */ .form-control.is-invalid, .form-select.is-invalid { border-color: var(--color-danger); } .form-control.is-invalid:focus, .form-select.is-invalid:focus { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); } /* Feedback messages */ .form-feedback { display: block; margin-top: var(--space-xs); font-size: var(--font-size-sm); } .form-feedback--valid { color: var(--color-success-text); } .form-feedback--invalid { color: var(--color-danger-text); } /* Help text */ .form-text { display: block; margin-top: var(--space-xs); font-size: var(--font-size-sm); color: var(--text-muted); } /* =================================================================== 10. FLOATING LABELS =================================================================== */ .form-floating { position: relative; } .form-floating > .form-control { padding: var(--space-lg) var(--space-md) var(--space-sm); } .form-floating > .form-control::placeholder { color: transparent; } .form-floating > .form-label { position: absolute; top: 0; left: 0; padding: var(--space-md); pointer-events: none; transform-origin: left top; transition: all var(--transition-fast); margin-bottom: 0; } .form-floating > .form-control:focus ~ .form-label, .form-floating > .form-control:not(:placeholder-shown) ~ .form-label { transform: scale(0.8) translateY(-8px); color: var(--brand-primary); } /* =================================================================== 11. FILE INPUT =================================================================== */ .form-file { display: flex; flex-direction: column; gap: var(--space-sm); } .form-file-input { display: none; } .form-file-label { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-lg); background-color: var(--bg-input); border: 2px dashed var(--border-medium); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-base); text-align: center; } .form-file-label:hover { border-color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .form-file-label i { font-size: var(--font-size-2xl); color: var(--brand-primary); } .form-file-text { color: var(--text-secondary); } .form-file-name { font-size: var(--font-size-sm); color: var(--text-muted); } /* =================================================================== 12. RANGE / SLIDER =================================================================== */ .form-range { width: 100%; height: 8px; background: var(--bg-input); border-radius: var(--radius-full); appearance: none; cursor: pointer; } .form-range::-webkit-slider-thumb { width: 20px; height: 20px; background: var(--brand-primary); border: none; border-radius: var(--radius-full); cursor: pointer; appearance: none; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast); } .form-range::-webkit-slider-thumb:hover { transform: scale(1.1); } .form-range::-moz-range-thumb { width: 20px; height: 20px; background: var(--brand-primary); border: none; border-radius: var(--radius-full); cursor: pointer; box-shadow: var(--shadow-sm); } .form-range:focus { outline: none; } .form-range:focus::-webkit-slider-thumb { box-shadow: var(--shadow-sm), var(--input-focus-shadow); } /* =================================================================== 13. DATE & TIME INPUTS =================================================================== */ /* Native date/time input styling */ input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control, input[type="week"].form-control { position: relative; } /* Webkit calendar picker styling */ input[type="date"].form-control::-webkit-calendar-picker-indicator, input[type="time"].form-control::-webkit-calendar-picker-indicator, input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator { cursor: pointer; padding: var(--space-xs); margin-right: calc(var(--space-xs) * -1); border-radius: var(--radius-sm); opacity: 0.7; transition: opacity var(--transition-fast); filter: invert(0.5); } [data-theme="dark"] input[type="date"].form-control::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="time"].form-control::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator { filter: invert(0.8); } input[type="date"].form-control::-webkit-calendar-picker-indicator:hover, input[type="time"].form-control::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* Custom datetime wrapper */ .datetime-input { position: relative; } .datetime-input .form-control { padding-right: calc(var(--space-md) * 3); } .datetime-input-icon { position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } /* Date range picker */ .date-range { display: flex; align-items: center; gap: var(--space-sm); } .date-range-separator { color: var(--text-muted); font-size: var(--font-size-sm); } /* =================================================================== 14. DRAG & DROP FILE UPLOAD =================================================================== */ .dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-2xl); background-color: var(--bg-input); border: 2px dashed var(--border-medium); border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition-base); text-align: center; } .dropzone:hover { border-color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .dropzone.is-dragover { border-color: var(--brand-primary); background-color: var(--brand-primary-alpha); box-shadow: var(--shadow-glow); } .dropzone.is-dragover .dropzone-icon { transform: scale(1.1); color: var(--brand-primary); } .dropzone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .dropzone-icon { font-size: 48px; color: var(--text-muted); margin-bottom: var(--space-md); transition: all var(--transition-base); } .dropzone-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-xs); } .dropzone-text { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--space-md); } .dropzone-hint { font-size: var(--font-size-xs); color: var(--text-muted); } .dropzone-btn { margin-top: var(--space-md); } /* Compact dropzone */ .dropzone-compact { flex-direction: row; gap: var(--space-md); padding: var(--space-lg); } .dropzone-compact .dropzone-icon { font-size: 32px; margin-bottom: 0; } .dropzone-compact .dropzone-content { text-align: left; } /* File preview list */ .dropzone-previews { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); } .dropzone-preview { position: relative; width: 100px; background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; } .dropzone-preview-image { width: 100%; height: 80px; object-fit: cover; background-color: var(--bg-input); } .dropzone-preview-info { padding: var(--space-xs); } .dropzone-preview-name { font-size: var(--font-size-xs); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropzone-preview-size { font-size: 10px; color: var(--text-muted); } .dropzone-preview-remove { position: absolute; top: var(--space-xs); right: var(--space-xs); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; background-color: rgba(0, 0, 0, 0.6); border: none; border-radius: var(--radius-full); cursor: pointer; opacity: 0; transition: opacity var(--transition-fast); } .dropzone-preview:hover .dropzone-preview-remove { opacity: 1; } .dropzone-preview-remove:hover { background-color: var(--color-danger); } .dropzone-preview-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background-color: var(--bg-input); } .dropzone-preview-progress-bar { height: 100%; background-color: var(--brand-primary); transition: width var(--transition-base); } /* Error state */ .dropzone.has-error { border-color: var(--color-danger); background-color: var(--color-danger-bg); } .dropzone-error { color: var(--color-danger-text); font-size: var(--font-size-sm); margin-top: var(--space-sm); } /* =================================================================== 15. COLOR PICKER =================================================================== */ input[type="color"].form-control-color { width: 48px; height: 42px; padding: var(--space-xs); border-radius: var(--radius-md); cursor: pointer; } input[type="color"].form-control-color::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"].form-control-color::-webkit-color-swatch { border: none; border-radius: var(--radius-sm); } /* Color picker with input */ .color-picker { display: flex; align-items: center; gap: var(--space-sm); } .color-picker-preview { width: 42px; height: 42px; border-radius: var(--radius-md); border: 2px solid var(--border-medium); cursor: pointer; } /* =================================================================== 16. SEARCH INPUT =================================================================== */ .search-input { position: relative; } .search-input .form-control { padding-left: calc(var(--space-md) * 2.5); padding-right: calc(var(--space-md) * 2.5); } .search-input-icon { position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .search-input-clear { position: absolute; right: var(--space-sm); top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; opacity: 0; transition: all var(--transition-fast); } .search-input .form-control:not(:placeholder-shown) + .search-input-icon + .search-input-clear, .search-input .form-control:focus + .search-input-icon + .search-input-clear { opacity: 1; } .search-input-clear:hover { color: var(--text-primary); background-color: var(--bg-hover); } /* =================================================================== 17. NUMBER INPUT WITH STEPPER =================================================================== */ .number-input { display: flex; align-items: stretch; } .number-input .form-control { border-radius: 0; text-align: center; -moz-appearance: textfield; } .number-input .form-control::-webkit-inner-spin-button, .number-input .form-control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .number-input-btn { display: flex; align-items: center; justify-content: center; width: 42px; background-color: var(--bg-input); border: 2px solid var(--input-border); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .number-input-btn:hover { background-color: var(--bg-hover); border-color: var(--brand-primary); color: var(--brand-primary); } .number-input-btn:first-child { border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); } .number-input-btn:last-child { border-left: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; } /* =================================================================== 18. OTP / PIN INPUT =================================================================== */ .otp-input { display: flex; gap: var(--space-sm); justify-content: center; } .otp-input-field { width: 48px; height: 56px; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); text-align: center; background-color: var(--input-bg); border: 2px solid var(--input-border); border-radius: var(--radius-md); transition: all var(--transition-base); } .otp-input-field:focus { outline: none; border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); } .otp-input-field.filled { border-color: var(--brand-primary); background-color: var(--brand-primary-alpha); } /* =================================================================== 19. RICH TEXT EDITOR WRAPPER =================================================================== */ .editor-wrapper { border: 2px solid var(--input-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-base), box-shadow var(--transition-base); } .editor-wrapper:focus-within { border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); } .editor-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-sm); background-color: var(--bg-input); border-bottom: 1px solid var(--border-light); } .editor-toolbar-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--text-secondary); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .editor-toolbar-btn:hover { color: var(--text-primary); background-color: var(--bg-hover); } .editor-toolbar-btn.active { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .editor-toolbar-divider { width: 1px; height: 24px; margin: 0 var(--space-xs); background-color: var(--border-light); } .editor-content { min-height: 200px; padding: var(--space-md); background-color: var(--bg-body); } .editor-content:focus { outline: none; } .editor-footer { display: flex; justify-content: space-between; align-items: center; padding: var(--space-xs) var(--space-sm); background-color: var(--bg-input); border-top: 1px solid var(--border-light); font-size: var(--font-size-xs); color: var(--text-muted); } /* =================================================================== 20. LIGHT THEME ICON OVERRIDES =================================================================== */ /* Light theme checkbox checkmark - white stroke for visibility on cyan bg */ [data-theme="light"] .form-check-input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); } /* Light theme radio dot - white fill for visibility on cyan bg */ [data-theme="light"] .form-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%23ffffff'/%3E%3C/svg%3E"); } /* ===== components/cards.css ===== */ /* =================================================================== DCS Design System - Card Components Version: 2.0.0 Card layouts and variations. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. BASE CARD =================================================================== */ .card { position: relative; display: flex; flex-direction: column; background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: all var(--transition-base); } /* =================================================================== 2. CARD SECTIONS =================================================================== */ .card-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); background-color: var(--card-header-bg); border-bottom: 1px solid var(--card-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .card-header:first-child { border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; } .card-title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .card-subtitle { margin: var(--space-xs) 0 0; font-size: var(--font-size-sm); color: var(--text-muted); } .card-body { flex: 1 1 auto; padding: var(--space-lg); } .card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); background-color: var(--card-header-bg); border-top: 1px solid var(--card-border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .card-footer:last-child { border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px); } /* =================================================================== 3. CARD TEXT ELEMENTS =================================================================== */ .card-text { margin-bottom: var(--space-md); color: var(--text-secondary); } .card-text:last-child { margin-bottom: 0; } .card-link { color: var(--link-color); } .card-link:hover { color: var(--link-hover); } .card-link + .card-link { margin-left: var(--space-md); } /* =================================================================== 4. CARD IMAGE =================================================================== */ .card-img { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .card-img-bottom { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .card-img-overlay { position: absolute; inset: 0; padding: var(--space-lg); border-radius: var(--radius-lg); background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; } .card-img-overlay .card-title, .card-img-overlay .card-text { color: #fff; } /* =================================================================== 5. INTERACTIVE CARD =================================================================== */ .card-interactive { cursor: pointer; } .card-interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-primary); } .card-interactive:active { transform: translateY(0); } /* Clickable entire card */ .card-link-wrapper { position: absolute; inset: 0; z-index: 1; } /* =================================================================== 6. CARD VARIANTS =================================================================== */ /* Elevated card */ .card-elevated { box-shadow: var(--shadow-lg); border: none; } .card-elevated:hover { box-shadow: var(--shadow-xl); } /* Outlined card */ .card-outlined { background-color: transparent; box-shadow: none; } /* Flat card (no shadow) */ .card-flat { box-shadow: none; } /* Glow effect (for dark theme) */ .card-glow { border-color: var(--brand-primary-alpha); } .card-glow:hover { box-shadow: var(--shadow-glow); border-color: var(--brand-primary); } /* =================================================================== 7. STATUS CARDS =================================================================== */ .card-success { border-color: var(--color-success); background-color: var(--color-success-bg); } .card-success .card-header { background-color: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success-text); } .card-danger { border-color: var(--color-danger); background-color: var(--color-danger-bg); } .card-danger .card-header { background-color: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger-text); } .card-warning { border-color: var(--color-warning); background-color: var(--color-warning-bg); } .card-warning .card-header { background-color: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning-text); } .card-info { border-color: var(--color-info); background-color: var(--color-info-bg); } .card-info .card-header { background-color: var(--color-info-bg); border-color: var(--color-info); color: var(--color-info-text); } /* =================================================================== 8. CARD SIZING =================================================================== */ .card-compact .card-header, .card-compact .card-footer { padding: var(--space-sm) var(--space-md); } .card-compact .card-body { padding: var(--space-md); } .card-spacious .card-header, .card-spacious .card-footer { padding: var(--space-lg) var(--space-xl); } .card-spacious .card-body { padding: var(--space-xl); } /* =================================================================== 9. CARD GRID =================================================================== */ .card-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .card-grid-sm { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .card-grid-lg { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } /* =================================================================== 10. CARD DECK (Equal height) =================================================================== */ .card-deck { display: flex; flex-wrap: wrap; gap: var(--space-lg); } .card-deck > .card { flex: 1 0 0%; min-width: 280px; } /* =================================================================== 11. HORIZONTAL CARD =================================================================== */ .card-horizontal { flex-direction: row; } .card-horizontal .card-img { width: 200px; min-width: 200px; object-fit: cover; border-radius: var(--radius-lg) 0 0 var(--radius-lg); } .card-horizontal .card-body { display: flex; flex-direction: column; justify-content: center; } @media (max-width: 576px) { .card-horizontal { flex-direction: column; } .card-horizontal .card-img { width: 100%; min-width: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } } /* =================================================================== 12. STAT CARD =================================================================== */ .card-stat { text-align: center; } .card-stat .card-body { padding: var(--space-xl); } .card-stat-value { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); color: var(--brand-primary); line-height: 1; margin-bottom: var(--space-sm); } .card-stat-label { font-size: var(--font-size-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; } .card-stat-icon { font-size: var(--font-size-3xl); color: var(--brand-primary); margin-bottom: var(--space-md); opacity: 0.7; } /* =================================================================== 13. PROFILE CARD =================================================================== */ .card-profile { text-align: center; } .card-profile-avatar { width: 80px; height: 80px; margin: calc(var(--space-lg) * -1) auto var(--space-md); border-radius: var(--radius-full); border: 3px solid var(--card-bg); box-shadow: var(--shadow-md); object-fit: cover; } .card-profile-name { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-xs); } .card-profile-role { font-size: var(--font-size-sm); color: var(--text-muted); } /* =================================================================== 14. CARD WITH RIBBON/BADGE =================================================================== */ .card-ribbon { position: absolute; top: var(--space-md); right: calc(var(--space-md) * -1); padding: var(--space-xs) var(--space-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: #fff; background-color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.5px; } .card-ribbon::before { content: ''; position: absolute; right: 0; bottom: -6px; border: 3px solid var(--brand-primary-dark); border-right-color: transparent; border-bottom-color: transparent; } .card-badge { position: absolute; top: var(--space-sm); left: var(--space-sm); padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: #fff; background-color: var(--brand-primary); border-radius: var(--radius-sm); } /* =================================================================== 15. COLLAPSIBLE CARD =================================================================== */ .card-collapsible .card-header { cursor: pointer; user-select: none; } .card-collapsible .card-header::after { content: '\f078'; /* FontAwesome chevron-down */ font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: var(--font-size-sm); color: var(--text-muted); transition: transform var(--transition-base); } .card-collapsible.is-collapsed .card-header::after { transform: rotate(-90deg); } .card-collapsible.is-collapsed .card-body, .card-collapsible.is-collapsed .card-footer { display: none; } /* =================================================================== 16. LOADING STATE =================================================================== */ .card-loading { position: relative; pointer-events: none; } .card-loading::after { content: ''; position: absolute; inset: 0; background-color: var(--bg-overlay); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; } .card-skeleton { background: linear-gradient(90deg, var(--bg-input) 25%, var(--bg-hover) 50%, var(--bg-input) 75% ); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: var(--radius-sm); } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* =================================================================== 17. COURSE CARD (LMS Specific) =================================================================== */ .card-course { overflow: hidden; } .card-course .card-img { height: 160px; object-fit: cover; } .card-course .card-body { padding: var(--space-md) var(--space-lg) var(--space-sm); } /* Course metadata */ .card-course-meta { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); font-size: var(--font-size-xs); color: var(--text-muted); } .card-course-meta i { color: var(--brand-primary); } .card-course-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-xs); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-course-instructor { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--space-md); } /* Progress bar flushed to bottom - no footer border */ .card-course .card-footer { padding: 0; background: none; border: none; } .card-course .progress { border-radius: 0 0 var(--radius-lg) var(--radius-lg); height: 6px; } .card-course .progress-bar { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* Progress info above bar */ .card-course-progress { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-xs); color: var(--text-muted); } .card-course-progress-percent { font-weight: var(--font-weight-semibold); color: var(--brand-primary); } /* Course status badge */ .card-course-badge { position: absolute; top: var(--space-sm); right: var(--space-sm); padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border-radius: var(--radius-sm); } .card-course-badge-new { color: #fff; background-color: var(--color-success); } .card-course-badge-updated { color: #fff; background-color: var(--color-info); } .card-course-badge-due { color: #fff; background-color: var(--color-warning); } /* Completed course overlay */ .card-course.is-completed::after { content: ''; position: absolute; inset: 0; background-color: rgba(16, 185, 129, 0.1); pointer-events: none; border-radius: var(--radius-lg); } .card-course.is-completed .card-course-badge { color: #fff; background-color: var(--color-success); } .card-course.is-completed .card-course-badge::before { content: '\f00c'; /* FontAwesome check */ font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: var(--space-xs); } /* ===== components/alerts.css ===== */ /* =================================================================== DCS Design System - Alert Components Version: 2.0.0 Alerts, notifications, toasts, and banners. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. BASE ALERT =================================================================== */ .alert { position: relative; display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-md); font-size: var(--font-size-sm); color: var(--text-primary); background-color: var(--bg-surface); border: 1px solid var(--border-medium); border-radius: var(--radius-md); border-left: 4px solid var(--border-dark); } .alert-icon { flex-shrink: 0; font-size: var(--font-size-lg); line-height: 1.4; } .alert-content { flex: 1; min-width: 0; } .alert-title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-xs); } .alert-message { color: var(--text-secondary); } .alert-message a { color: inherit; text-decoration: underline; font-weight: var(--font-weight-medium); } .alert-message a:hover { color: var(--text-primary); } /* =================================================================== 2. ALERT VARIANTS =================================================================== */ /* Success */ .alert-success { background-color: var(--color-success-bg); border-color: var(--color-success); border-left-color: var(--color-success); } .alert-success .alert-icon { color: var(--color-success-text); } .alert-success .alert-title { color: var(--color-success-text); } /* Danger / Error */ .alert-danger, .alert-error { background-color: var(--color-danger-bg); border-color: var(--color-danger); border-left-color: var(--color-danger); } .alert-danger .alert-icon, .alert-error .alert-icon { color: var(--color-danger-text); } .alert-danger .alert-title, .alert-error .alert-title { color: var(--color-danger-text); } /* Warning */ .alert-warning { background-color: var(--color-warning-bg); border-color: var(--color-warning); border-left-color: var(--color-warning); } .alert-warning .alert-icon { color: var(--color-warning-text); } .alert-warning .alert-title { color: var(--color-warning-text); } /* Info */ .alert-info { background-color: var(--color-info-bg); border-color: var(--color-info); border-left-color: var(--color-info); } .alert-info .alert-icon { color: var(--color-info-text); } .alert-info .alert-title { color: var(--color-info-text); } /* =================================================================== 3. DISMISSIBLE ALERT =================================================================== */ .alert-dismissible { padding-right: calc(var(--space-lg) + 32px); } .alert-close { position: absolute; top: var(--space-md); right: var(--space-md); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; color: var(--text-muted); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; opacity: 0.7; transition: all var(--transition-fast); } .alert-close:hover { opacity: 1; background-color: var(--bg-hover); } .alert-close::before { content: '\00d7'; font-size: 20px; line-height: 1; } /* =================================================================== 4. ALERT SIZES =================================================================== */ .alert-sm { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); } .alert-sm .alert-icon { font-size: var(--font-size-base); } .alert-lg { padding: var(--space-lg) var(--space-xl); font-size: var(--font-size-base); } .alert-lg .alert-icon { font-size: var(--font-size-xl); } /* =================================================================== 5. INLINE ALERT (No margin) =================================================================== */ .alert-inline { margin-bottom: 0; } /* =================================================================== 6. ALERT WITH ACTIONS =================================================================== */ .alert-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-md); } .alert-actions .btn { font-size: var(--font-size-sm); } /* =================================================================== 7. TOAST NOTIFICATIONS =================================================================== */ .toast-container { position: fixed; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); pointer-events: none; } /* Positioning */ .toast-container--top-right { top: 0; right: 0; } .toast-container--top-left { top: 0; left: 0; } .toast-container--top-center { top: 0; left: 50%; transform: translateX(-50%); } .toast-container--bottom-right { bottom: 0; right: 0; } .toast-container--bottom-left { bottom: 0; left: 0; } .toast-container--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); } .toast { display: flex; align-items: flex-start; gap: var(--space-sm); min-width: 300px; max-width: 420px; padding: var(--space-md) var(--space-lg); background-color: var(--bg-elevated); border: 1px solid var(--border-medium); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-slide-in 0.3s ease; } .toast.is-hiding { animation: toast-slide-out 0.3s ease forwards; } @keyframes toast-slide-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-slide-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } /* Left positioned toasts */ .toast-container--top-left .toast, .toast-container--bottom-left .toast { animation-name: toast-slide-in-left; } .toast-container--top-left .toast.is-hiding, .toast-container--bottom-left .toast.is-hiding { animation-name: toast-slide-out-left; } @keyframes toast-slide-in-left { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-slide-out-left { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-100%); } } /* Center positioned toasts */ .toast-container--top-center .toast, .toast-container--bottom-center .toast { animation-name: toast-slide-in-center; } @keyframes toast-slide-in-center { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .toast-icon { flex-shrink: 0; font-size: var(--font-size-lg); } .toast-content { flex: 1; min-width: 0; } .toast-title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-xs); } .toast-message { font-size: var(--font-size-sm); color: var(--text-secondary); } .toast-close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; color: var(--text-muted); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .toast-close:hover { color: var(--text-primary); background-color: var(--bg-hover); } .toast-close::before { content: '\00d7'; font-size: 16px; line-height: 1; } /* Toast progress bar */ .toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background-color: var(--brand-primary); border-radius: 0 0 var(--radius-md) var(--radius-md); animation: toast-progress 5s linear forwards; } @keyframes toast-progress { from { width: 100%; } to { width: 0; } } /* Toast variants */ .toast-success { border-left: 4px solid var(--color-success); } .toast-success .toast-icon { color: var(--color-success-text); } .toast-danger, .toast-error { border-left: 4px solid var(--color-danger); } .toast-danger .toast-icon, .toast-error .toast-icon { color: var(--color-danger-text); } .toast-warning { border-left: 4px solid var(--color-warning); } .toast-warning .toast-icon { color: var(--color-warning-text); } .toast-info { border-left: 4px solid var(--color-info); } .toast-info .toast-icon { color: var(--color-info-text); } /* =================================================================== 8. BANNER (Full-width notification) =================================================================== */ .banner { display: flex; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); text-align: center; font-size: var(--font-size-sm); } .banner-dismissible { padding-right: calc(var(--space-lg) + 40px); } .banner-close { position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: inherit; background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; opacity: 0.7; transition: opacity var(--transition-fast); } .banner-close:hover { opacity: 1; } .banner-close::before { content: '\00d7'; font-size: 20px; } /* Banner variants */ .banner-primary { background-color: var(--brand-primary); color: var(--text-inverse); } .banner-secondary { background-color: var(--brand-secondary); color: var(--text-inverse); } .banner-success { background-color: var(--color-success); color: #fff; } .banner-danger { background-color: var(--color-danger); color: #fff; } .banner-warning { background-color: var(--color-warning); color: #1e293b; } .banner-info { background-color: var(--color-info); color: #fff; } /* =================================================================== 9. CALLOUT (Highlighted section) =================================================================== */ .callout { padding: var(--space-lg); background-color: var(--bg-input); border-radius: var(--radius-md); border-left: 4px solid var(--brand-primary); } .callout-title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-sm); color: var(--text-primary); } .callout-content { color: var(--text-secondary); } /* Callout variants */ .callout-success { border-left-color: var(--color-success); background-color: var(--color-success-bg); } .callout-danger { border-left-color: var(--color-danger); background-color: var(--color-danger-bg); } .callout-warning { border-left-color: var(--color-warning); background-color: var(--color-warning-bg); } .callout-info { border-left-color: var(--color-info); background-color: var(--color-info-bg); } /* =================================================================== 10. EMPTY STATE =================================================================== */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-3xl) var(--space-xl); text-align: center; } .empty-state-icon { font-size: 64px; color: var(--text-muted); margin-bottom: var(--space-lg); opacity: 0.5; } .empty-state-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-sm); } .empty-state-message { font-size: var(--font-size-base); color: var(--text-muted); max-width: 400px; margin-bottom: var(--space-lg); } .empty-state-actions { display: flex; gap: var(--space-sm); } /* =================================================================== 11. URGENCY ALERTS (for LMS deadlines) =================================================================== */ .alert-urgency-critical { background-color: var(--urgency-critical-bg); border-color: var(--urgency-critical); border-left-color: var(--urgency-critical); } .alert-urgency-critical .alert-icon, .alert-urgency-critical .alert-title { color: var(--urgency-critical); } .alert-urgency-high { background-color: var(--urgency-high-bg); border-color: var(--urgency-high); border-left-color: var(--urgency-high); } .alert-urgency-high .alert-icon, .alert-urgency-high .alert-title { color: var(--urgency-high); } .alert-urgency-medium { background-color: var(--urgency-medium-bg); border-color: var(--urgency-medium); border-left-color: var(--urgency-medium); } .alert-urgency-medium .alert-icon, .alert-urgency-medium .alert-title { color: var(--urgency-medium); } .alert-urgency-low { background-color: var(--urgency-low-bg); border-color: var(--urgency-low); border-left-color: var(--urgency-low); } .alert-urgency-low .alert-icon, .alert-urgency-low .alert-title { color: var(--urgency-low); } /* ===== components/tables.css ===== */ /* =================================================================== DCS Design System - Table Components Version: 2.0.0 Data tables with sorting, responsive, and interactive features. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. BASE TABLE =================================================================== */ .table { width: 100%; margin-bottom: var(--space-lg); color: var(--text-primary); vertical-align: middle; border-collapse: collapse; } .table > :not(caption) > * > * { padding: var(--space-md) var(--space-md); background-color: transparent; border-bottom: 1px solid var(--border-light); } .table > thead { vertical-align: bottom; } .table > thead > tr > th { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); color: var(--text-secondary); text-align: left; text-transform: uppercase; letter-spacing: 0.5px; background-color: var(--bg-input); border-bottom: 2px solid var(--border-medium); } .table > tbody > tr:last-child > * { border-bottom: none; } /* =================================================================== 2. TABLE VARIANTS =================================================================== */ /* Striped rows */ .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--bg-input); } /* Hover effect */ .table-hover > tbody > tr:hover > * { background-color: var(--bg-hover); } /* Bordered */ .table-bordered > :not(caption) > * > * { border: 1px solid var(--border-light); } .table-bordered > thead > tr > th { border-bottom-width: 2px; } /* Borderless */ .table-borderless > :not(caption) > * > * { border-bottom: none; } /* =================================================================== 3. TABLE SIZING =================================================================== */ /* Compact */ .table-sm > :not(caption) > * > * { padding: var(--space-sm) var(--space-sm); font-size: var(--font-size-sm); } /* Spacious */ .table-lg > :not(caption) > * > * { padding: var(--space-lg) var(--space-md); } /* =================================================================== 4. RESPONSIVE TABLE =================================================================== */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Custom scrollbar for responsive tables */ .table-responsive::-webkit-scrollbar { height: 6px; } .table-responsive::-webkit-scrollbar-track { background: var(--bg-input); border-radius: var(--radius-full); } .table-responsive::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-full); } .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--border-dark); } /* Firefox scrollbar */ .table-responsive { scrollbar-width: thin; scrollbar-color: var(--border-medium) var(--bg-input); } /* Stacked layout on mobile */ .table-stacked { border: none; } @media (max-width: 768px) { .table-stacked, .table-stacked thead, .table-stacked tbody, .table-stacked th, .table-stacked td, .table-stacked tr { display: block; } .table-stacked thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .table-stacked tbody > tr { margin-bottom: var(--space-md); background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); } .table-stacked tbody > tr > td { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-light); } .table-stacked tbody > tr > td:last-child { border-bottom: none; } .table-stacked tbody > tr > td::before { content: attr(data-label); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } } /* =================================================================== 5. SORTABLE TABLE =================================================================== */ .table-sortable > thead > tr > th { cursor: pointer; user-select: none; position: relative; padding-right: var(--space-xl); } .table-sortable > thead > tr > th:hover { background-color: var(--bg-hover); } .table-sortable > thead > tr > th::after { content: ''; position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--text-muted); opacity: 0.3; } .table-sortable > thead > tr > th[data-sort="asc"]::after { border-top: none; border-bottom: 5px solid var(--brand-primary); opacity: 1; } .table-sortable > thead > tr > th[data-sort="desc"]::after { border-top: 5px solid var(--brand-primary); opacity: 1; } /* Non-sortable column */ .table-sortable > thead > tr > th.no-sort { cursor: default; padding-right: var(--space-md); } .table-sortable > thead > tr > th.no-sort::after { display: none; } /* =================================================================== 6. SELECTABLE ROWS =================================================================== */ .table-selectable > tbody > tr { cursor: pointer; } .table-selectable > tbody > tr.selected > * { background-color: var(--brand-primary-alpha); } .table-selectable > tbody > tr:hover.selected > * { background-color: var(--brand-primary-alpha-strong); } /* Checkbox column */ .table th.col-checkbox, .table td.col-checkbox { width: 48px; text-align: center; padding-left: var(--space-md); padding-right: var(--space-sm); } /* =================================================================== 7. STATUS ROW COLORS =================================================================== */ .table > tbody > tr.table-success > * { background-color: var(--color-success-bg); } .table > tbody > tr.table-danger > * { background-color: var(--color-danger-bg); } .table > tbody > tr.table-warning > * { background-color: var(--color-warning-bg); } .table > tbody > tr.table-info > * { background-color: var(--color-info-bg); } /* =================================================================== 8. TABLE CARD (Table inside a card) =================================================================== */ .table-card { background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; } .table-card .table { margin-bottom: 0; } .table-card .table > thead > tr > th:first-child { border-top-left-radius: var(--radius-lg); } .table-card .table > thead > tr > th:last-child { border-top-right-radius: var(--radius-lg); } /* =================================================================== 9. TABLE HEADER TOOLBAR =================================================================== */ .table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background-color: var(--card-header-bg); border-bottom: 1px solid var(--card-border); } .table-toolbar-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .table-toolbar-actions { display: flex; align-items: center; gap: var(--space-sm); } .table-search { width: 250px; } /* =================================================================== 10. TABLE FOOTER / PAGINATION Note: For standalone pagination, use .pagination from navigation.css. These classes are table-specific for the footer context. =================================================================== */ .table-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); background-color: var(--card-header-bg); border-top: 1px solid var(--card-border); font-size: var(--font-size-sm); color: var(--text-muted); } .table-info { display: flex; align-items: center; gap: var(--space-md); } .table-pagination { display: flex; align-items: center; gap: var(--space-xs); } .table-pagination-btn { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--space-sm); font-size: var(--font-size-sm); color: var(--text-secondary); background-color: transparent; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .table-pagination-btn:hover { background-color: var(--bg-hover); border-color: var(--brand-primary); color: var(--brand-primary); } .table-pagination-btn.active { background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--btn-primary-text); } .table-pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* =================================================================== 11. COLUMN TYPES =================================================================== */ /* Numeric column (right-aligned) */ .col-numeric { text-align: right; font-variant-numeric: tabular-nums; } /* Date column */ .col-date { white-space: nowrap; } /* Actions column */ .col-actions { width: 1%; white-space: nowrap; text-align: right; } /* Status column */ .col-status { width: 120px; } /* Truncate long text */ .col-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* =================================================================== 12. EXPANDABLE ROWS =================================================================== */ .table-expandable > tbody > tr.expandable-row { cursor: pointer; } .table-expandable > tbody > tr.expandable-row > td:first-child::before { content: '\f054'; /* FontAwesome chevron-right */ font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: var(--font-size-xs); margin-right: var(--space-sm); color: var(--text-muted); transition: transform var(--transition-fast); } .table-expandable > tbody > tr.expandable-row.is-expanded > td:first-child::before { transform: rotate(90deg); } .table-expandable > tbody > tr.expandable-content { display: none; } .table-expandable > tbody > tr.expandable-content.is-visible { display: table-row; } .table-expandable > tbody > tr.expandable-content > td { padding: var(--space-lg); background-color: var(--bg-input); } /* =================================================================== 13. LOADING STATE =================================================================== */ .table-loading { position: relative; pointer-events: none; } .table-loading::after { content: ''; position: absolute; inset: 0; background-color: var(--bg-overlay); display: flex; align-items: center; justify-content: center; } .table-loading > tbody { opacity: 0.5; } /* Skeleton rows */ .table-skeleton td { padding: var(--space-md); } .table-skeleton-cell { height: 20px; background: linear-gradient(90deg, var(--bg-input) 25%, var(--bg-hover) 50%, var(--bg-input) 75% ); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: var(--radius-sm); } /* =================================================================== 14. EMPTY TABLE STATE =================================================================== */ .table-empty { text-align: center; padding: var(--space-3xl) var(--space-xl); } .table-empty-icon { font-size: 48px; color: var(--text-muted); margin-bottom: var(--space-md); opacity: 0.5; } .table-empty-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-sm); } .table-empty-message { color: var(--text-muted); margin-bottom: var(--space-lg); } /* =================================================================== 15. FIXED HEADER =================================================================== */ .table-fixed-header { max-height: 500px; overflow-y: auto; } .table-fixed-header > table > thead { position: sticky; top: 0; z-index: var(--z-sticky); } .table-fixed-header > table > thead > tr > th { box-shadow: 0 1px 0 var(--border-medium); } /* =================================================================== 16. GRADEBOOK TABLE (LMS Specific) =================================================================== */ .table-gradebook { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-gradebook table { min-width: 800px; } /* Frozen first column (Student Name) */ .table-gradebook th:first-child, .table-gradebook td:first-child { position: sticky; left: 0; z-index: calc(var(--z-sticky) + 1); background-color: var(--bg-surface); min-width: 180px; max-width: 220px; } .table-gradebook thead th:first-child { z-index: calc(var(--z-sticky) + 2); background-color: var(--bg-input); } /* Shadow indicator for scrolled state */ .table-gradebook th:first-child::after, .table-gradebook td:first-child::after { content: ''; position: absolute; top: 0; right: -8px; bottom: 0; width: 8px; background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent); opacity: 0; transition: opacity var(--transition-fast); pointer-events: none; } .table-gradebook.is-scrolled th:first-child::after, .table-gradebook.is-scrolled td:first-child::after { opacity: 1; } /* Grade cells - centered and fixed width */ .table-gradebook .col-grade { width: 80px; min-width: 80px; text-align: center; font-variant-numeric: tabular-nums; } /* Assignment header - rotated for space efficiency */ .table-gradebook .col-assignment-header { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); height: 120px; padding: var(--space-sm) var(--space-xs); font-size: var(--font-size-xs); white-space: nowrap; } /* Grade input in cell */ .table-gradebook .grade-input { width: 60px; padding: var(--space-xs); text-align: center; font-size: var(--font-size-sm); background-color: var(--bg-body); border: 1px solid var(--border-light); border-radius: var(--radius-sm); } .table-gradebook .grade-input:focus { border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); outline: none; } /* Grade status colors */ .table-gradebook .grade-passing { color: var(--color-success-text); background-color: var(--color-success-bg); } .table-gradebook .grade-failing { color: var(--color-danger-text); background-color: var(--color-danger-bg); } .table-gradebook .grade-missing { color: var(--color-warning-text); background-color: var(--color-warning-bg); } .table-gradebook .grade-excused { color: var(--text-muted); font-style: italic; } /* Custom scrollbar for gradebook */ .table-gradebook::-webkit-scrollbar { height: 6px; } .table-gradebook::-webkit-scrollbar-track { background: var(--bg-input); border-radius: var(--radius-full); } .table-gradebook::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-full); } .table-gradebook::-webkit-scrollbar-thumb:hover { background: var(--border-dark); } /* ===== components/modals.css ===== */ /* =================================================================== DCS Design System - Modal Components Version: 2.0.0 Modal dialogs, overlays, and lightboxes. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. MODAL BACKDROP =================================================================== */ .modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal-backdrop); background-color: var(--bg-overlay); opacity: 0; transition: opacity var(--transition-base); } .modal-backdrop.is-visible { opacity: 1; } /* =================================================================== 2. MODAL CONTAINER =================================================================== */ /* DCS custom modal (use .dcs-modal class for custom modals) */ .dcs-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-lg); overflow-y: auto; } .dcs-modal.show { display: flex; } /* Bootstrap modal backdrop compatibility */ .modal-backdrop.show { opacity: 1; } /* Prevent body scroll when modal is open */ body.modal-open { overflow: hidden; } /* =================================================================== 3. MODAL DIALOG =================================================================== */ /* Base modal dialog styling - works with Bootstrap */ .modal-dialog { position: relative; width: 100%; max-width: 500px; margin: 1.75rem auto; background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); } .modal-content { background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); } /* DCS custom modal dialog with animations */ .dcs-modal .modal-dialog { max-height: calc(100vh - var(--space-2xl) * 2); display: flex; flex-direction: column; } /* Size variants */ .modal-sm .modal-dialog { max-width: 360px; } .modal-lg .modal-dialog { max-width: 720px; } .modal-xl .modal-dialog { max-width: 960px; } .modal-fullscreen .modal-dialog { max-width: none; width: calc(100vw - var(--space-lg) * 2); height: calc(100vh - var(--space-lg) * 2); max-height: none; border-radius: var(--radius-lg); } /* Centered content (for small dialogs) */ .modal-centered { align-items: center; } /* =================================================================== 4. MODAL SECTIONS =================================================================== */ .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--border-light); flex-shrink: 0; } .modal-title { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--text-primary); display: flex; align-items: center; gap: var(--space-sm); } .modal-title i { color: var(--brand-primary); } .modal-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin: calc(var(--space-sm) * -1); color: var(--text-muted); background: transparent; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .modal-close:hover { color: var(--text-primary); background-color: var(--bg-hover); } .modal-close::before { content: '\00d7'; font-size: 28px; line-height: 1; } .modal-body { flex: 1 1 auto; padding: var(--space-xl); overflow-y: auto; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-lg) var(--space-xl); border-top: 1px solid var(--border-light); flex-shrink: 0; } /* Footer with left-aligned secondary action */ .modal-footer-spread { justify-content: space-between; } /* =================================================================== 5. CONFIRMATION MODAL =================================================================== */ .modal-confirm .modal-dialog { max-width: 420px; text-align: center; } .modal-confirm .modal-body { padding: var(--space-2xl) var(--space-xl); } .modal-confirm-icon { font-size: 64px; margin-bottom: var(--space-lg); } .modal-confirm-icon.icon-success { color: var(--color-success); } .modal-confirm-icon.icon-danger { color: var(--color-danger); } .modal-confirm-icon.icon-warning { color: var(--color-warning); } .modal-confirm-icon.icon-info { color: var(--color-info); } .modal-confirm-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-sm); } .modal-confirm-message { color: var(--text-secondary); margin-bottom: 0; } .modal-confirm .modal-footer { justify-content: center; border-top: none; padding-top: 0; } /* =================================================================== 6. ALERT MODAL (Success/Error feedback) =================================================================== */ .modal-alert .modal-dialog { max-width: 380px; } .modal-alert .modal-header { border-bottom: none; padding-bottom: 0; } .modal-alert .modal-body { text-align: center; padding-top: var(--space-md); } .modal-alert .modal-footer { border-top: none; justify-content: center; } /* =================================================================== 7. FORM MODAL =================================================================== */ .modal-form .modal-body { padding: var(--space-lg) var(--space-xl); } .modal-form .form-group:last-child { margin-bottom: 0; } /* =================================================================== 8. IMAGE/MEDIA MODAL (Lightbox) =================================================================== */ .modal-media { padding: var(--space-md); } .modal-media .modal-dialog { max-width: 90vw; max-height: 90vh; background-color: transparent; border: none; box-shadow: none; } .modal-media .modal-body { padding: 0; display: flex; align-items: center; justify-content: center; } .modal-media-image { max-width: 100%; max-height: 80vh; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } .modal-media-close { position: absolute; top: var(--space-md); right: var(--space-md); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; background-color: rgba(0, 0, 0, 0.5); border: none; border-radius: var(--radius-full); cursor: pointer; transition: background-color var(--transition-fast); } .modal-media-close:hover { background-color: rgba(0, 0, 0, 0.7); } .modal-media-close::before { content: '\00d7'; font-size: 28px; } /* Navigation arrows for galleries */ .modal-media-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #fff; background-color: rgba(0, 0, 0, 0.5); border: none; border-radius: var(--radius-full); cursor: pointer; transition: background-color var(--transition-fast); } .modal-media-nav:hover { background-color: rgba(0, 0, 0, 0.7); } .modal-media-prev { left: var(--space-md); } .modal-media-next { right: var(--space-md); } /* =================================================================== 9. SIDE PANEL / DRAWER =================================================================== */ .modal-drawer { justify-content: flex-end; padding: 0; } .modal-drawer .modal-dialog { max-width: 480px; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; transform: translateX(100%); } .modal-drawer.is-open .modal-dialog, .modal-drawer.show .modal-dialog { transform: translateX(0); } /* Left drawer */ .modal-drawer-left { justify-content: flex-start; } .modal-drawer-left .modal-dialog { transform: translateX(-100%); } .modal-drawer-left.is-open .modal-dialog, .modal-drawer-left.show .modal-dialog { transform: translateX(0); } /* Drawer sizes */ .modal-drawer-sm .modal-dialog { max-width: 320px; } .modal-drawer-lg .modal-dialog { max-width: 640px; } .modal-drawer-xl .modal-dialog { max-width: 800px; } /* =================================================================== 10. STACKED MODALS =================================================================== */ .modal + .modal { z-index: calc(var(--z-modal) + 10); } .modal + .modal + .modal { z-index: calc(var(--z-modal) + 20); } .modal-backdrop + .modal-backdrop { z-index: calc(var(--z-modal-backdrop) + 10); } /* =================================================================== 11. LOADING STATE =================================================================== */ .modal-loading .modal-body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; } .modal-spinner { width: 48px; height: 48px; border: 4px solid var(--border-medium); border-top-color: var(--brand-primary); border-radius: var(--radius-full); animation: modal-spin 0.8s linear infinite; margin-bottom: var(--space-md); } @keyframes modal-spin { to { transform: rotate(360deg); } } .modal-loading-text { color: var(--text-muted); font-size: var(--font-size-sm); } /* =================================================================== 12. SCROLLABLE MODAL BODY =================================================================== */ .modal-scrollable .modal-dialog { display: flex; flex-direction: column; } .modal-scrollable .modal-body { overflow-y: auto; } /* =================================================================== 13. ANIMATION VARIANTS =================================================================== */ /* Fade only (no transform) */ .modal-fade .modal-dialog { transform: none; opacity: 0; } .modal-fade.is-open .modal-dialog, .modal-fade.show .modal-dialog { opacity: 1; } /* Slide up */ .modal-slide-up .modal-dialog { transform: translateY(50px); } .modal-slide-up.is-open .modal-dialog, .modal-slide-up.show .modal-dialog { transform: translateY(0); } /* Zoom */ .modal-zoom .modal-dialog { transform: scale(0.8); } .modal-zoom.is-open .modal-dialog, .modal-zoom.show .modal-dialog { transform: scale(1); } /* =================================================================== 14. MODAL WITH TABS =================================================================== */ .modal-tabs .modal-header { flex-direction: column; align-items: stretch; padding-bottom: 0; } .modal-tabs .modal-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); } .modal-tabs .tab-list { margin: 0 calc(var(--space-xl) * -1); padding: 0 var(--space-xl); border-bottom: none; } /* =================================================================== 15. KEYBOARD TRAP INDICATOR =================================================================== */ .modal-dialog:focus { outline: none; } .modal-dialog:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } /* ===== components/dropdowns.css ===== */ /* =================================================================== DCS Design System - Dropdown Components Version: 2.0.0 Dropdown menus, multi-select, and contextual menus. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. DROPDOWN CONTAINER =================================================================== */ .dropdown { position: relative; display: inline-block; } /* =================================================================== 2. DROPDOWN TOGGLE =================================================================== */ .dropdown-toggle { display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer; } .dropdown-toggle::after { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid currentColor; transition: transform var(--transition-fast); } .dropdown.is-open .dropdown-toggle::after { transform: rotate(180deg); } /* No caret variant */ .dropdown-toggle.no-caret::after { display: none; } /* =================================================================== 3. DROPDOWN MENU =================================================================== */ .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown); min-width: 200px; max-width: 320px; padding: var(--space-xs) 0; margin-top: var(--space-xs); background-color: var(--bg-elevated); border: 1px solid var(--border-medium); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast); } .dropdown.is-open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* Right-aligned menu */ .dropdown-menu-right { left: auto; right: 0; } /* Top-aligned (opens upward) */ .dropdown-menu-top { top: auto; bottom: 100%; margin-top: 0; margin-bottom: var(--space-xs); transform: translateY(10px); } .dropdown.is-open .dropdown-menu-top { transform: translateY(0); } /* =================================================================== 4. DROPDOWN ITEMS =================================================================== */ .dropdown-item { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--text-primary); background: none; border: none; text-align: left; text-decoration: none; cursor: pointer; transition: all var(--transition-fast); } .dropdown-item:hover { background-color: var(--bg-hover); color: var(--brand-primary); } .dropdown-item:focus { outline: none; background-color: var(--bg-hover); } .dropdown-item:active { background-color: var(--bg-active); } /* Disabled state */ .dropdown-item.disabled, .dropdown-item:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Active/selected item */ .dropdown-item.active { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } /* Item with icon */ .dropdown-item i, .dropdown-item .dropdown-icon { width: 20px; text-align: center; color: var(--text-muted); flex-shrink: 0; } .dropdown-item:hover i, .dropdown-item:hover .dropdown-icon { color: var(--brand-primary); } /* Item with badge */ .dropdown-item-badge { margin-left: auto; font-size: var(--font-size-xs); padding: 2px 6px; background-color: var(--bg-input); border-radius: var(--radius-full); color: var(--text-muted); } /* =================================================================== 5. DROPDOWN DIVIDER =================================================================== */ .dropdown-divider { height: 1px; margin: var(--space-xs) 0; background-color: var(--border-light); } /* =================================================================== 6. DROPDOWN HEADER =================================================================== */ .dropdown-header { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } /* =================================================================== 7. DROPDOWN WITH SEARCH =================================================================== */ .dropdown-search { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-light); } .dropdown-search-input { width: 100%; padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); color: var(--input-text); background-color: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); } .dropdown-search-input:focus { outline: none; border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); } /* Scrollable dropdown body */ .dropdown-body { max-height: 300px; overflow-y: auto; } /* =================================================================== 8. MULTI-SELECT DROPDOWN =================================================================== */ .dropdown-multi .dropdown-item { padding-left: var(--space-sm); } .dropdown-multi .dropdown-item::before { content: ''; width: 18px; height: 18px; margin-right: var(--space-sm); background-color: var(--input-bg); border: 2px solid var(--input-border); border-radius: var(--radius-sm); flex-shrink: 0; transition: all var(--transition-fast); } .dropdown-multi .dropdown-item:hover::before { border-color: var(--brand-primary); } .dropdown-multi .dropdown-item.selected::before { background-color: var(--brand-primary); border-color: var(--brand-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a192f' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; } /* Selected count in toggle */ .dropdown-selected-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--btn-primary-text); background-color: var(--brand-primary); border-radius: var(--radius-full); } /* =================================================================== 9. DROPDOWN FOOTER =================================================================== */ .dropdown-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--border-light); } /* =================================================================== 10. CONTEXT MENU =================================================================== */ .context-menu { position: fixed; z-index: var(--z-popover); min-width: 180px; padding: var(--space-xs) 0; background-color: var(--bg-elevated); border: 1px solid var(--border-medium); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: scale(0.95); transform-origin: top left; transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast); } .context-menu.is-visible { opacity: 1; visibility: visible; transform: scale(1); } .context-menu-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--text-primary); cursor: pointer; transition: all var(--transition-fast); } .context-menu-item:hover { background-color: var(--bg-hover); color: var(--brand-primary); } .context-menu-item i { width: 16px; text-align: center; color: var(--text-muted); } .context-menu-item:hover i { color: var(--brand-primary); } .context-menu-item-shortcut { margin-left: auto; font-size: var(--font-size-xs); color: var(--text-muted); } .context-menu-divider { height: 1px; margin: var(--space-xs) 0; background-color: var(--border-light); } /* Danger item */ .context-menu-item.danger { color: var(--color-danger-text); } .context-menu-item.danger:hover { background-color: var(--color-danger-bg); color: var(--color-danger-text); } .context-menu-item.danger i { color: var(--color-danger-text); } /* =================================================================== 11. NESTED DROPDOWN (Submenu) =================================================================== */ .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-item::after { content: ''; margin-left: auto; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid currentColor; } .dropdown-submenu .dropdown-menu { position: absolute; top: 0; left: 100%; margin-top: 0; margin-left: var(--space-xs); opacity: 0; visibility: hidden; } .dropdown-submenu:hover > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* Left-opening submenu */ .dropdown-submenu-left .dropdown-menu { left: auto; right: 100%; margin-left: 0; margin-right: var(--space-xs); } /* =================================================================== 12. DROPDOWN SIZES =================================================================== */ .dropdown-sm .dropdown-menu { min-width: 140px; font-size: var(--font-size-xs); } .dropdown-sm .dropdown-item { padding: var(--space-xs) var(--space-sm); } .dropdown-lg .dropdown-menu { min-width: 280px; } .dropdown-lg .dropdown-item { padding: var(--space-md) var(--space-lg); font-size: var(--font-size-base); } /* =================================================================== 13. MEGA DROPDOWN =================================================================== */ .dropdown-mega .dropdown-menu { min-width: 600px; padding: var(--space-lg); } .dropdown-mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .dropdown-mega-column { /* Column content */ } .dropdown-mega-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border-light); } .dropdown-mega .dropdown-item { padding: var(--space-xs) 0; border-radius: var(--radius-sm); } .dropdown-mega .dropdown-item:hover { padding-left: var(--space-sm); background-color: transparent; } /* =================================================================== 14. SELECT DROPDOWN (Custom select replacement) =================================================================== */ .select-dropdown { position: relative; width: 100%; } .select-dropdown-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-base); color: var(--input-text); background-color: var(--input-bg); border: 2px solid var(--input-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-base); } .select-dropdown-toggle:hover { border-color: var(--border-dark); } .select-dropdown.is-open .select-dropdown-toggle { border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); } .select-dropdown-toggle::after { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--text-muted); transition: transform var(--transition-fast); } .select-dropdown.is-open .select-dropdown-toggle::after { transform: rotate(180deg); } .select-dropdown-placeholder { color: var(--input-placeholder); } .select-dropdown .dropdown-menu { width: 100%; max-height: 250px; overflow-y: auto; } /* =================================================================== 15. TAGS/CHIPS IN MULTI-SELECT =================================================================== */ .select-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-xs); min-height: 42px; background-color: var(--input-bg); border: 2px solid var(--input-border); border-radius: var(--radius-md); cursor: text; } .select-tags:focus-within { border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); } .select-tag { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 2px var(--space-sm); font-size: var(--font-size-sm); color: var(--text-primary); background-color: var(--bg-hover); border-radius: var(--radius-sm); } .select-tag-remove { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .select-tag-remove:hover { color: var(--color-danger); background-color: var(--color-danger-bg); } .select-tag-remove::before { content: '\00d7'; font-size: 14px; } .select-tags-input { flex: 1; min-width: 100px; padding: var(--space-xs); font-size: var(--font-size-sm); color: var(--input-text); background: none; border: none; outline: none; } .select-tags-input::placeholder { color: var(--input-placeholder); } /* ===== components/tabs.css ===== */ /* =================================================================== DCS Design System - Tab Components Version: 2.0.0 Tabs, pills, and tabbed navigation. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. TAB LIST =================================================================== */ .tab-list { display: flex; gap: var(--space-xs); border-bottom: 2px solid var(--border-light); margin-bottom: var(--space-lg); } /* =================================================================== 2. TAB ITEM =================================================================== */ .tab-item { position: relative; padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-muted); background: none; border: none; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .tab-item:hover { color: var(--text-primary); } .tab-item:focus { outline: none; } .tab-item:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Active tab */ .tab-item.active { color: var(--brand-primary); } .tab-item.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background-color: var(--brand-primary); } /* Tab with icon */ .tab-item i { margin-right: var(--space-xs); } /* Tab with badge/count */ .tab-badge { margin-left: var(--space-xs); padding: 2px 8px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); background-color: var(--bg-input); border-radius: var(--radius-full); } .tab-item.active .tab-badge { background-color: var(--brand-primary-alpha); color: var(--brand-primary); } /* Disabled tab */ .tab-item.disabled, .tab-item:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* =================================================================== 3. TAB CONTENT =================================================================== */ .tab-content { /* Container for tab panels */ } .tab-panel { display: none; animation: tab-fade-in var(--transition-base); } .tab-panel.active { display: block; } @keyframes tab-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* =================================================================== 4. PILL TABS (Rounded/filled style) =================================================================== */ .tab-list-pills { gap: var(--space-sm); border-bottom: none; background-color: var(--bg-input); padding: var(--space-xs); border-radius: var(--radius-md); width: fit-content; } .tab-list-pills .tab-item { padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); } .tab-list-pills .tab-item:hover { background-color: var(--bg-hover); } .tab-list-pills .tab-item.active { color: var(--btn-primary-text); background-color: var(--brand-primary); } .tab-list-pills .tab-item.active::after { display: none; } /* =================================================================== 5. BORDERED TABS (Card-style) =================================================================== */ .tab-list-bordered { border-bottom: 1px solid var(--border-light); } .tab-list-bordered .tab-item { margin-bottom: -1px; border: 1px solid transparent; border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0; } .tab-list-bordered .tab-item.active { color: var(--text-primary); background-color: var(--bg-surface); border-color: var(--border-light); } .tab-list-bordered .tab-item.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background-color: var(--bg-surface); } /* =================================================================== 6. VERTICAL TABS =================================================================== */ .tab-vertical { display: flex; gap: var(--space-lg); } .tab-vertical .tab-list { flex-direction: column; border-bottom: none; border-right: 2px solid var(--border-light); margin-bottom: 0; padding-right: var(--space-md); min-width: 180px; } .tab-vertical .tab-item { text-align: left; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); } .tab-vertical .tab-item.active::after { top: 0; bottom: 0; left: auto; right: calc(var(--space-md) * -1 - 2px); width: 2px; height: auto; } .tab-vertical .tab-content { flex: 1; } /* =================================================================== 7. SCROLLABLE TABS =================================================================== */ .tab-list-scroll { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tab-list-scroll::-webkit-scrollbar { display: none; } /* Scroll indicators */ .tab-scroll-container { position: relative; } .tab-scroll-btn { position: absolute; top: 0; bottom: 2px; width: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, var(--bg-body) 50%, transparent); border: none; cursor: pointer; color: var(--text-muted); z-index: 1; transition: opacity var(--transition-fast); } .tab-scroll-btn:hover { color: var(--brand-primary); } .tab-scroll-btn-left { left: 0; } .tab-scroll-btn-right { right: 0; background: linear-gradient(-90deg, var(--bg-body) 50%, transparent); } .tab-scroll-btn.is-hidden { opacity: 0; pointer-events: none; } /* =================================================================== 8. FULL WIDTH TABS =================================================================== */ .tab-list-full { width: 100%; } .tab-list-full .tab-item { flex: 1; text-align: center; } /* =================================================================== 9. TAB SIZES =================================================================== */ /* Small tabs */ .tab-list-sm .tab-item { padding: var(--space-xs) var(--space-md); font-size: var(--font-size-xs); } /* Large tabs */ .tab-list-lg .tab-item { padding: var(--space-md) var(--space-xl); font-size: var(--font-size-base); } /* =================================================================== 10. SEGMENTED CONTROL =================================================================== */ .segmented-control { display: inline-flex; background-color: var(--bg-input); border: 1px solid var(--border-medium); border-radius: var(--radius-md); padding: 2px; } .segmented-item { padding: var(--space-xs) var(--space-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .segmented-item:hover { color: var(--text-primary); } .segmented-item.active { color: var(--text-primary); background-color: var(--bg-surface); box-shadow: var(--shadow-sm); } /* Segmented with icons only */ .segmented-icons .segmented-item { padding: var(--space-xs) var(--space-sm); } /* =================================================================== 11. STEP TABS (Wizard/Progress) =================================================================== */ .tab-list-steps { gap: 0; border-bottom: none; counter-reset: step; } .tab-list-steps .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-md); } .tab-list-steps .tab-item::before { counter-increment: step; content: counter(step); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); background-color: var(--bg-input); border: 2px solid var(--border-medium); border-radius: var(--radius-full); transition: all var(--transition-base); } .tab-list-steps .tab-item.active::before { background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--btn-primary-text); } .tab-list-steps .tab-item.completed::before { content: '\f00c'; /* FontAwesome check */ font-family: 'Font Awesome 6 Free'; font-weight: 900; background-color: var(--color-success); border-color: var(--color-success); color: #fff; } .tab-list-steps .tab-item.active::after { display: none; } /* Step connector line */ .tab-list-steps .tab-item:not(:last-child)::after { content: ''; position: absolute; top: calc(var(--space-md) + 16px); left: calc(50% + 24px); right: calc(-50% + 24px); height: 2px; background-color: var(--border-medium); } .tab-list-steps .tab-item.completed:not(:last-child)::after { background-color: var(--color-success); } /* Step label */ .tab-step-label { font-size: var(--font-size-sm); color: var(--text-muted); } .tab-item.active .tab-step-label, .tab-item.completed .tab-step-label { color: var(--text-primary); } /* =================================================================== 12. ICON-ONLY TABS =================================================================== */ .tab-list-icons .tab-item { padding: var(--space-sm); } .tab-list-icons .tab-item i { margin-right: 0; font-size: var(--font-size-lg); } /* =================================================================== 13. CLOSABLE TABS =================================================================== */ .tab-item-closable { padding-right: var(--space-sm); } .tab-close { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: var(--space-xs); font-size: 14px; color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; opacity: 0; transition: all var(--transition-fast); } .tab-item:hover .tab-close, .tab-item.active .tab-close { opacity: 1; } .tab-close:hover { color: var(--color-danger); background-color: var(--color-danger-bg); } .tab-close::before { content: '\00d7'; } /* =================================================================== 14. ADD TAB BUTTON =================================================================== */ .tab-add { padding: var(--space-sm); color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .tab-add:hover { color: var(--brand-primary); background-color: var(--bg-hover); } .tab-add::before { content: '+'; font-size: var(--font-size-lg); } /* =================================================================== 15. ANIMATED UNDERLINE =================================================================== */ .tab-list-animated { position: relative; } .tab-indicator { position: absolute; bottom: -2px; height: 2px; background-color: var(--brand-primary); transition: left var(--transition-base), width var(--transition-base); } .tab-list-animated .tab-item.active::after { display: none; } /* ===== components/badges.css ===== */ /* =================================================================== DCS Design System - Badge Components Version: 2.0.0 Badges, tags, labels, and status indicators. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. BASE BADGE =================================================================== */ .badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1.4; color: var(--text-primary); background-color: var(--bg-input); border-radius: var(--radius-sm); white-space: nowrap; vertical-align: middle; } /* =================================================================== 2. COLOR VARIANTS =================================================================== */ .badge-primary { color: var(--btn-primary-text); background-color: var(--brand-primary); } .badge-secondary { color: var(--text-primary); background-color: var(--bg-hover); border: 1px solid var(--border-medium); } .badge-success { color: #fff; background-color: var(--color-success); } .badge-danger { color: #fff; background-color: var(--color-danger); } .badge-warning { color: #1e293b; background-color: var(--color-warning); } .badge-info { color: #fff; background-color: var(--color-info); } /* Soft/light variants */ .badge-soft-primary { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .badge-soft-success { color: var(--color-success-text); background-color: var(--color-success-bg); } .badge-soft-danger { color: var(--color-danger-text); background-color: var(--color-danger-bg); } .badge-soft-warning { color: var(--color-warning-text); background-color: var(--color-warning-bg); } .badge-soft-info { color: var(--color-info-text); background-color: var(--color-info-bg); } /* Outline variants */ .badge-outline { background-color: transparent; border: 1px solid currentColor; } .badge-outline-primary { color: var(--brand-primary); border-color: var(--brand-primary); background-color: transparent; } .badge-outline-success { color: var(--color-success); border-color: var(--color-success); background-color: transparent; } .badge-outline-danger { color: var(--color-danger); border-color: var(--color-danger); background-color: transparent; } .badge-outline-warning { color: var(--color-warning); border-color: var(--color-warning); background-color: transparent; } .badge-outline-info { color: var(--color-info); border-color: var(--color-info); background-color: transparent; } /* =================================================================== 3. SIZE VARIANTS =================================================================== */ .badge-sm { padding: 1px 6px; font-size: 10px; } .badge-lg { padding: 4px 12px; font-size: var(--font-size-sm); } /* =================================================================== 4. PILL BADGE (Rounded) =================================================================== */ .badge-pill { border-radius: var(--radius-full); padding-left: 10px; padding-right: 10px; } /* =================================================================== 5. DOT BADGE (Notification indicator) =================================================================== */ .badge-dot { width: 8px; height: 8px; padding: 0; border-radius: var(--radius-full); } .badge-dot-lg { width: 12px; height: 12px; } /* Positioned dot (on avatars, icons, etc.) */ .badge-dot-positioned { position: absolute; top: 0; right: 0; } /* Pulsing dot */ .badge-dot-pulse { animation: badge-pulse 2s infinite; } @keyframes badge-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* =================================================================== 6. COUNTER BADGE =================================================================== */ .badge-counter { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-weight-bold); } /* Positioned counter (for notifications) */ .badge-counter-positioned { position: absolute; top: -6px; right: -6px; } /* Large number handling */ .badge-counter-max { /* For 99+ style */ } /* =================================================================== 7. WITH ICON =================================================================== */ .badge-icon { gap: var(--space-xs); } .badge-icon i { font-size: 10px; } /* Icon only badge */ .badge-icon-only { width: 24px; height: 24px; padding: 0; } .badge-icon-only i { font-size: 12px; } /* =================================================================== 8. REMOVABLE BADGE (Tag style) =================================================================== */ .badge-removable { gap: var(--space-xs); padding-right: 4px; } .badge-remove { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 2px; font-size: 12px; color: inherit; background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; opacity: 0.7; transition: all var(--transition-fast); } .badge-remove:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.1); } .badge-remove::before { content: '\00d7'; } /* =================================================================== 9. TAG INPUT BADGES =================================================================== */ .tag { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); color: var(--text-primary); background-color: var(--bg-hover); border-radius: var(--radius-sm); } .tag-remove { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .tag-remove:hover { color: var(--color-danger); background-color: var(--color-danger-bg); } .tag-remove::before { content: '\00d7'; font-size: 14px; } /* Tag colors */ .tag-primary { background-color: var(--brand-primary-alpha); color: var(--brand-primary); } .tag-success { background-color: var(--color-success-bg); color: var(--color-success-text); } .tag-danger { background-color: var(--color-danger-bg); color: var(--color-danger-text); } /* =================================================================== 10. STATUS BADGES =================================================================== */ .status { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } .status-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background-color: currentColor; } .status-online { color: var(--color-success); } .status-offline { color: var(--text-muted); } .status-busy { color: var(--color-danger); } .status-away { color: var(--color-warning); } /* =================================================================== 11. GRADE/SCORE BADGES (LMS specific) =================================================================== */ .badge-grade { min-width: 48px; padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); text-align: center; border-radius: var(--radius-sm); } .badge-grade-a { color: #fff; background-color: var(--color-success); } .badge-grade-b { color: #1e293b; background-color: #84cc16; /* lime */ } .badge-grade-c { color: #1e293b; background-color: var(--color-warning); } .badge-grade-d { color: #fff; background-color: #f97316; /* orange */ } .badge-grade-f { color: #fff; background-color: var(--color-danger); } /* Percentage-based coloring */ .badge-score { font-variant-numeric: tabular-nums; } /* =================================================================== 12. URGENCY BADGES (LMS deadlines) =================================================================== */ .badge-urgency-critical { color: #fff; background-color: var(--urgency-critical); animation: urgency-pulse 1.5s infinite; } @keyframes urgency-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .badge-urgency-high { color: #fff; background-color: var(--urgency-high); } .badge-urgency-medium { color: #1e293b; background-color: var(--urgency-medium); } .badge-urgency-low { color: #fff; background-color: var(--urgency-low); } /* =================================================================== 13. PROGRESS BADGE =================================================================== */ .badge-progress { position: relative; overflow: hidden; background-color: var(--bg-input); } .badge-progress-fill { position: absolute; top: 0; left: 0; bottom: 0; background-color: var(--brand-primary); opacity: 0.3; transition: width var(--transition-base); } .badge-progress-text { position: relative; z-index: 1; } /* =================================================================== 14. LABEL (Form/field labels) =================================================================== */ .label { display: inline-block; padding: 2px 8px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.5px; border-radius: var(--radius-sm); } .label-new { color: #fff; background-color: var(--brand-primary); } .label-beta { color: #fff; background-color: #8b5cf6; /* purple */ } .label-pro { color: #1e293b; background-color: #fbbf24; /* amber */ } .label-required { color: var(--color-danger); background-color: var(--color-danger-bg); } .label-optional { color: var(--text-muted); background-color: var(--bg-input); } /* =================================================================== 15. CHIP (Selectable badge) =================================================================== */ .chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); color: var(--text-primary); background-color: var(--bg-input); border: 1px solid var(--border-medium); border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); } .chip:hover { border-color: var(--brand-primary); background-color: var(--bg-hover); } .chip.selected { color: var(--btn-primary-text); background-color: var(--brand-primary); border-color: var(--brand-primary); } .chip-avatar { width: 24px; height: 24px; margin-left: -4px; border-radius: var(--radius-full); object-fit: cover; } .chip-remove { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: -4px; color: inherit; background: none; border: none; border-radius: var(--radius-full); cursor: pointer; opacity: 0.7; } .chip-remove:hover { opacity: 1; } .chip-remove::before { content: '\00d7'; font-size: 14px; } /* =================================================================== 16. BADGE GROUP =================================================================== */ .badge-group { display: inline-flex; flex-wrap: wrap; gap: var(--space-xs); } /* Overlapping badges */ .badge-group-overlap { gap: 0; } .badge-group-overlap .badge { margin-left: -8px; border: 2px solid var(--bg-body); } .badge-group-overlap .badge:first-child { margin-left: 0; } /* ===== components/progress.css ===== */ /* =================================================================== DCS Design System - Progress Components Version: 2.0.0 Progress bars, spinners, loading states, and skeletons. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. PROGRESS BAR =================================================================== */ .progress { display: flex; height: 8px; overflow: hidden; font-size: var(--font-size-xs); background-color: var(--bg-input); border-radius: var(--radius-full); } .progress-bar { display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: var(--btn-primary-text); text-align: center; white-space: nowrap; background-color: var(--brand-primary); border-radius: var(--radius-full); transition: width var(--transition-slow); } /* =================================================================== 2. PROGRESS BAR SIZES =================================================================== */ .progress-xs { height: 4px; } .progress-sm { height: 6px; } .progress-lg { height: 12px; } .progress-xl { height: 20px; font-size: var(--font-size-sm); } /* =================================================================== 3. PROGRESS BAR COLORS =================================================================== */ .progress-bar-success { background-color: var(--color-success); } .progress-bar-danger { background-color: var(--color-danger); } .progress-bar-warning { background-color: var(--color-warning); } .progress-bar-info { background-color: var(--color-info); } /* Gradient progress bar */ .progress-bar-gradient { background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); } /* =================================================================== 4. STRIPED PROGRESS BAR =================================================================== */ .progress-bar-striped { background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent ); background-size: 16px 16px; } /* Animated stripes */ .progress-bar-animated { animation: progress-stripes 1s linear infinite; } @keyframes progress-stripes { 0% { background-position: 16px 0; } 100% { background-position: 0 0; } } /* =================================================================== 5. PROGRESS WITH LABEL =================================================================== */ .progress-labeled { position: relative; } .progress-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-primary); } /* Label inside bar (for large progress) */ .progress-xl .progress-bar { position: relative; } .progress-xl .progress-bar-label { position: absolute; left: var(--space-sm); font-weight: var(--font-weight-semibold); } /* =================================================================== 6. MULTI-SEGMENT PROGRESS =================================================================== */ .progress-stacked { display: flex; } .progress-stacked .progress-bar { border-radius: 0; } .progress-stacked .progress-bar:first-child { border-top-left-radius: var(--radius-full); border-bottom-left-radius: var(--radius-full); } .progress-stacked .progress-bar:last-child { border-top-right-radius: var(--radius-full); border-bottom-right-radius: var(--radius-full); } /* =================================================================== 7. CIRCULAR PROGRESS =================================================================== */ .progress-circle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; } .progress-circle-svg { width: 100%; height: 100%; transform: rotate(-90deg); } .progress-circle-bg { fill: none; stroke: var(--bg-input); stroke-width: 8; } .progress-circle-fill { fill: none; stroke: var(--brand-primary); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 226; /* 2 * PI * radius (36) */ stroke-dashoffset: 226; transition: stroke-dashoffset var(--transition-slow); } .progress-circle-label { position: absolute; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--text-primary); } /* Circle sizes */ .progress-circle-sm { width: 48px; height: 48px; } .progress-circle-sm .progress-circle-bg, .progress-circle-sm .progress-circle-fill { stroke-width: 6; } .progress-circle-sm .progress-circle-label { font-size: var(--font-size-sm); } .progress-circle-lg { width: 120px; height: 120px; } .progress-circle-lg .progress-circle-label { font-size: var(--font-size-2xl); } /* Circle colors */ .progress-circle-success .progress-circle-fill { stroke: var(--color-success); } .progress-circle-danger .progress-circle-fill { stroke: var(--color-danger); } .progress-circle-warning .progress-circle-fill { stroke: var(--color-warning); } /* =================================================================== 8. SPINNER =================================================================== */ .spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--border-medium); border-top-color: var(--brand-primary); border-radius: var(--radius-full); animation: spinner-rotate 0.75s linear infinite; } @keyframes spinner-rotate { to { transform: rotate(360deg); } } /* Spinner sizes */ .spinner-xs { width: 14px; height: 14px; border-width: 2px; } .spinner-sm { width: 18px; height: 18px; border-width: 2px; } .spinner-lg { width: 36px; height: 36px; border-width: 4px; } .spinner-xl { width: 48px; height: 48px; border-width: 5px; } /* Spinner colors */ .spinner-primary { border-top-color: var(--brand-primary); } .spinner-secondary { border-top-color: var(--brand-secondary); } .spinner-success { border-top-color: var(--color-success); } .spinner-danger { border-top-color: var(--color-danger); } .spinner-light { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; } /* =================================================================== 9. DOTS LOADER =================================================================== */ .loader-dots { display: inline-flex; gap: var(--space-xs); } .loader-dot { width: 8px; height: 8px; background-color: var(--brand-primary); border-radius: var(--radius-full); animation: loader-dots-bounce 1.4s infinite ease-in-out both; } .loader-dot:nth-child(1) { animation-delay: -0.32s; } .loader-dot:nth-child(2) { animation-delay: -0.16s; } @keyframes loader-dots-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* =================================================================== 10. PULSE LOADER =================================================================== */ .loader-pulse { width: 40px; height: 40px; background-color: var(--brand-primary); border-radius: var(--radius-full); animation: loader-pulse 1.2s infinite ease-in-out; } @keyframes loader-pulse { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } /* =================================================================== 11. BAR LOADER =================================================================== */ .loader-bar { width: 100%; height: 4px; background-color: var(--bg-input); overflow: hidden; border-radius: var(--radius-full); } .loader-bar::after { content: ''; display: block; width: 40%; height: 100%; background-color: var(--brand-primary); border-radius: var(--radius-full); animation: loader-bar-slide 1.5s infinite ease-in-out; } @keyframes loader-bar-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* =================================================================== 12. SKELETON LOADER =================================================================== */ .skeleton { background: linear-gradient( 90deg, var(--bg-input) 25%, var(--bg-hover) 50%, var(--bg-input) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: var(--radius-sm); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Skeleton shapes */ .skeleton-text { height: 16px; margin-bottom: var(--space-sm); } .skeleton-text:last-child { width: 70%; } .skeleton-title { height: 24px; width: 60%; margin-bottom: var(--space-md); } .skeleton-avatar { width: 48px; height: 48px; border-radius: var(--radius-full); } .skeleton-avatar-sm { width: 32px; height: 32px; } .skeleton-avatar-lg { width: 64px; height: 64px; } .skeleton-image { width: 100%; height: 200px; border-radius: var(--radius-md); } .skeleton-button { width: 100px; height: 40px; border-radius: var(--radius-md); } .skeleton-card { padding: var(--space-lg); background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); } /* =================================================================== 13. LOADING OVERLAY =================================================================== */ .loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: var(--bg-overlay); z-index: var(--z-dropdown); border-radius: inherit; } .loading-overlay-content { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); } .loading-overlay-text { font-size: var(--font-size-sm); color: var(--text-secondary); } /* =================================================================== 14. STEP PROGRESS (Wizard) =================================================================== */ .progress-steps { display: flex; justify-content: space-between; position: relative; counter-reset: step; } .progress-steps::before { content: ''; position: absolute; top: 16px; left: 24px; right: 24px; height: 2px; background-color: var(--bg-input); } .progress-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); z-index: 1; } .progress-step-circle { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-muted); background-color: var(--bg-surface); border: 2px solid var(--border-medium); border-radius: var(--radius-full); transition: all var(--transition-base); } .progress-step-circle::before { counter-increment: step; content: counter(step); } .progress-step-label { font-size: var(--font-size-sm); color: var(--text-muted); text-align: center; } /* Active step */ .progress-step.active .progress-step-circle { color: var(--btn-primary-text); background-color: var(--brand-primary); border-color: var(--brand-primary); } .progress-step.active .progress-step-label { color: var(--text-primary); font-weight: var(--font-weight-medium); } /* Completed step */ .progress-step.completed .progress-step-circle { color: #fff; background-color: var(--color-success); border-color: var(--color-success); } .progress-step.completed .progress-step-circle::before { content: '\f00c'; /* FontAwesome check */ font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: var(--font-size-sm); } .progress-step.completed .progress-step-label { color: var(--text-primary); } /* Progress line fill */ .progress-steps-fill { position: absolute; top: 16px; left: 24px; height: 2px; background-color: var(--color-success); transition: width var(--transition-slow); } /* =================================================================== 15. COURSE PROGRESS (LMS specific) =================================================================== */ .course-progress { display: flex; flex-direction: column; gap: var(--space-sm); } .course-progress-header { display: flex; justify-content: space-between; align-items: center; } .course-progress-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); } .course-progress-percent { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--brand-primary); } .course-progress-stats { display: flex; gap: var(--space-md); font-size: var(--font-size-xs); color: var(--text-muted); } /* =================================================================== 16. UPLOAD PROGRESS =================================================================== */ .upload-progress { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); } .upload-progress-icon { font-size: var(--font-size-xl); color: var(--brand-primary); } .upload-progress-info { flex: 1; min-width: 0; } .upload-progress-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upload-progress-size { font-size: var(--font-size-xs); color: var(--text-muted); } .upload-progress-bar { margin-top: var(--space-xs); } .upload-progress-cancel { color: var(--text-muted); background: none; border: none; cursor: pointer; padding: var(--space-xs); transition: color var(--transition-fast); } .upload-progress-cancel:hover { color: var(--color-danger); } /* ===== components/navigation.css ===== */ /* =================================================================== DCS Design System - Navigation Components Version: 2.0.0 Navbar, sidebar, breadcrumbs, pagination, and menus. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. NAVBAR =================================================================== */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); background-color: var(--bg-surface); border-bottom: 1px solid var(--border-light); } .navbar-brand { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); text-decoration: none; } .navbar-brand-logo { height: 32px; width: auto; } .navbar-nav { display: flex; align-items: center; gap: var(--space-xs); } .navbar-link { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-md); transition: all var(--transition-fast); } .navbar-link:hover { color: var(--text-primary); background-color: var(--bg-hover); } .navbar-link.active { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .navbar-actions { display: flex; align-items: center; gap: var(--space-sm); } /* Fixed navbar */ .navbar-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-fixed); } /* Transparent navbar */ .navbar-transparent { background-color: transparent; border-bottom: none; } /* Dark navbar */ .navbar-dark { background-color: var(--bg-body); } /* =================================================================== 2. SIDEBAR =================================================================== */ .sidebar { display: flex; flex-direction: column; width: 260px; height: 100vh; background-color: var(--bg-surface); border-right: 1px solid var(--border-light); overflow-y: auto; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg); border-bottom: 1px solid var(--border-light); } .sidebar-brand { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); text-decoration: none; } .sidebar-brand-logo { height: 28px; width: auto; } .sidebar-content { flex: 1; padding: var(--space-md); overflow-y: auto; } .sidebar-footer { padding: var(--space-md); border-top: 1px solid var(--border-light); } /* Sidebar nav */ .sidebar-nav { display: flex; flex-direction: column; gap: var(--space-xs); } .sidebar-section { margin-bottom: var(--space-lg); } .sidebar-section-title { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .sidebar-link { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-md); transition: all var(--transition-fast); } .sidebar-link:hover { color: var(--text-primary); background-color: var(--bg-hover); } .sidebar-link.active { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .sidebar-link i { width: 20px; text-align: center; font-size: var(--font-size-base); } .sidebar-link-badge { margin-left: auto; padding: 2px 8px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--btn-primary-text); background-color: var(--brand-primary); border-radius: var(--radius-full); } /* Collapsible sidebar */ .sidebar-collapsed { width: 64px; } .sidebar-collapsed .sidebar-brand-text, .sidebar-collapsed .sidebar-link span, .sidebar-collapsed .sidebar-section-title, .sidebar-collapsed .sidebar-link-badge { display: none; } .sidebar-collapsed .sidebar-link { justify-content: center; padding: var(--space-sm); } .sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .sidebar-toggle:hover { color: var(--text-primary); background-color: var(--bg-hover); } /* =================================================================== 3. BREADCRUMBS =================================================================== */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding: 0; margin: 0; font-size: var(--font-size-sm); } .breadcrumb-item { display: flex; align-items: center; color: var(--text-muted); } .breadcrumb-item a { color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); } .breadcrumb-item a:hover { color: var(--brand-primary); } .breadcrumb-item + .breadcrumb-item::before { content: '/'; padding-right: var(--space-xs); color: var(--text-muted); } .breadcrumb-item.active { color: var(--text-primary); font-weight: var(--font-weight-medium); } /* Breadcrumb with icons */ .breadcrumb-item i { margin-right: var(--space-xs); } /* Truncated breadcrumb */ .breadcrumb-truncate .breadcrumb-item { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* =================================================================== 4. PAGINATION =================================================================== */ .pagination { display: flex; align-items: center; gap: var(--space-xs); } .pagination-item { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--space-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); background-color: transparent; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; transition: all var(--transition-fast); } .pagination-item:hover { color: var(--brand-primary); border-color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .pagination-item.active { color: var(--btn-primary-text); background-color: var(--brand-primary); border-color: var(--brand-primary); } .pagination-item:disabled, .pagination-item.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Pagination prev/next */ .pagination-prev, .pagination-next { font-size: var(--font-size-xs); } /* Pagination ellipsis */ .pagination-ellipsis { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; color: var(--text-muted); } /* Simple pagination */ .pagination-simple { gap: var(--space-md); } .pagination-simple .pagination-item { border: none; background: none; } /* =================================================================== 5. PAGE HEADER =================================================================== */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); } .page-header-content { flex: 1; } .page-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: 0 0 var(--space-xs); } .page-description { font-size: var(--font-size-base); color: var(--text-muted); margin: 0; } .page-header-actions { display: flex; align-items: center; gap: var(--space-sm); } /* =================================================================== 6. SUB-NAVIGATION (Horizontal) =================================================================== */ .subnav { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-light); margin-bottom: var(--space-lg); } .subnav-link { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-muted); text-decoration: none; border-radius: var(--radius-md); transition: all var(--transition-fast); } .subnav-link:hover { color: var(--text-primary); background-color: var(--bg-hover); } .subnav-link.active { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } /* =================================================================== 7. MENU (Vertical list) =================================================================== */ .menu { display: flex; flex-direction: column; padding: var(--space-xs) 0; background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); } .menu-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--text-primary); text-decoration: none; cursor: pointer; transition: all var(--transition-fast); } .menu-item:hover { background-color: var(--bg-hover); } .menu-item.active { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .menu-item i { width: 20px; text-align: center; color: var(--text-muted); } .menu-item:hover i { color: var(--brand-primary); } .menu-item-badge { margin-left: auto; } .menu-divider { height: 1px; margin: var(--space-xs) 0; background-color: var(--border-light); } .menu-header { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } /* Danger item */ .menu-item-danger { color: var(--color-danger-text); } .menu-item-danger:hover { background-color: var(--color-danger-bg); } .menu-item-danger i { color: var(--color-danger-text); } /* =================================================================== 8. BOTTOM NAVIGATION (Mobile) =================================================================== */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: stretch; background-color: var(--bg-surface); border-top: 1px solid var(--border-light); z-index: var(--z-fixed); } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--space-sm); font-size: var(--font-size-xs); color: var(--text-muted); text-decoration: none; transition: all var(--transition-fast); } .bottom-nav-item:hover, .bottom-nav-item.active { color: var(--brand-primary); } .bottom-nav-item i { font-size: var(--font-size-lg); } .bottom-nav-item-badge { position: absolute; top: 4px; right: calc(50% - 20px); min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: var(--font-weight-bold); color: #fff; background-color: var(--color-danger); border-radius: var(--radius-full); } /* =================================================================== 9. STEPPER NAVIGATION =================================================================== */ .stepper { display: flex; align-items: flex-start; } .stepper-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .stepper-step:not(:last-child)::after { content: ''; position: absolute; top: 16px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background-color: var(--border-medium); } .stepper-step.completed:not(:last-child)::after { background-color: var(--color-success); } .stepper-indicator { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-muted); background-color: var(--bg-surface); border: 2px solid var(--border-medium); border-radius: var(--radius-full); z-index: 1; transition: all var(--transition-base); } .stepper-step.active .stepper-indicator { color: var(--btn-primary-text); background-color: var(--brand-primary); border-color: var(--brand-primary); } .stepper-step.completed .stepper-indicator { color: #fff; background-color: var(--color-success); border-color: var(--color-success); } .stepper-step.completed .stepper-indicator::before { content: '\f00c'; /* FontAwesome check */ font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: var(--font-size-sm); } .stepper-label { margin-top: var(--space-sm); font-size: var(--font-size-sm); color: var(--text-muted); } .stepper-step.active .stepper-label { color: var(--text-primary); font-weight: var(--font-weight-medium); } /* Vertical stepper */ .stepper-vertical { flex-direction: column; } .stepper-vertical .stepper-step { flex-direction: row; align-items: flex-start; text-align: left; } .stepper-vertical .stepper-step:not(:last-child)::after { top: 32px; left: 16px; right: auto; bottom: 0; width: 2px; height: auto; } .stepper-vertical .stepper-label { margin-top: 0; margin-left: var(--space-md); } /* =================================================================== 10. ANCHOR NAVIGATION (Scrollspy) =================================================================== */ .anchor-nav { position: sticky; top: var(--space-lg); padding-left: var(--space-md); border-left: 2px solid var(--border-light); } .anchor-nav-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-sm); } .anchor-nav-link { display: block; padding: var(--space-xs) 0; font-size: var(--font-size-sm); color: var(--text-muted); text-decoration: none; transition: all var(--transition-fast); } .anchor-nav-link:hover { color: var(--text-primary); } .anchor-nav-link.active { color: var(--brand-primary); font-weight: var(--font-weight-medium); } /* Nested anchors */ .anchor-nav-nested { padding-left: var(--space-md); } .anchor-nav-nested .anchor-nav-link { font-size: var(--font-size-xs); } /* =================================================================== 11. CUSTOM SCROLLBARS =================================================================== */ /* Sidebar scrollbar - thin and subtle */ .sidebar::-webkit-scrollbar, .sidebar-content::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-track, .sidebar-content::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb, .sidebar-content::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: var(--radius-full); } .sidebar::-webkit-scrollbar-thumb:hover, .sidebar-content::-webkit-scrollbar-thumb:hover { background: var(--border-medium); } /* Firefox sidebar scrollbar */ .sidebar, .sidebar-content { scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; } /* =================================================================== 12. FOCUS MODE =================================================================== */ /* Focus mode - hide sidebar completely for distraction-free work */ body.focus-mode .sidebar { width: 0; padding: 0; overflow: hidden; border: none; } body.focus-mode .sidebar * { opacity: 0; visibility: hidden; } /* Navbar becomes minimal in focus mode */ body.focus-mode .navbar { position: sticky; top: 0; z-index: var(--z-sticky); padding: var(--space-sm) var(--space-lg); } body.focus-mode .navbar-nav { display: none; } /* Main content expands */ body.focus-mode .main-content { max-width: var(--container-xl); margin: 0 auto; padding: var(--space-xl); } /* Focus mode toggle button */ .focus-mode-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--text-muted); background: none; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .focus-mode-toggle:hover { color: var(--text-primary); background-color: var(--bg-hover); } body.focus-mode .focus-mode-toggle { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } /* Exit focus mode hint */ body.focus-mode::before { content: 'Press Esc to exit focus mode'; position: fixed; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-sm); color: var(--text-muted); background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-md); opacity: 0; transition: opacity var(--transition-base); pointer-events: none; z-index: var(--z-toast); } body.focus-mode:hover::before { opacity: 1; } /* ===== components/avatars.css ===== */ /* =================================================================== DCS Design System - Avatar Components Version: 2.0.0 User avatars, initials, groups, and status indicators. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. BASE AVATAR =================================================================== */ .avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); background-color: var(--bg-hover); border-radius: var(--radius-full); overflow: hidden; flex-shrink: 0; } .avatar-img { width: 100%; height: 100%; object-fit: cover; } /* =================================================================== 2. SIZE VARIANTS =================================================================== */ .avatar-xs { width: 24px; height: 24px; font-size: 10px; } .avatar-sm { width: 32px; height: 32px; font-size: var(--font-size-xs); } .avatar-lg { width: 56px; height: 56px; font-size: var(--font-size-lg); } .avatar-xl { width: 80px; height: 80px; font-size: var(--font-size-2xl); } .avatar-2xl { width: 120px; height: 120px; font-size: var(--font-size-3xl); } /* =================================================================== 3. SHAPE VARIANTS =================================================================== */ .avatar-rounded { border-radius: var(--radius-md); } .avatar-square { border-radius: 0; } /* =================================================================== 4. COLOR VARIANTS =================================================================== */ .avatar-primary { color: var(--btn-primary-text); background-color: var(--brand-primary); } .avatar-secondary { color: var(--text-primary); background-color: var(--bg-input); } .avatar-success { color: #fff; background-color: var(--color-success); } .avatar-danger { color: #fff; background-color: var(--color-danger); } .avatar-warning { color: #1e293b; background-color: var(--color-warning); } .avatar-info { color: #fff; background-color: var(--color-info); } /* Soft color variants */ .avatar-soft-primary { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .avatar-soft-success { color: var(--color-success-text); background-color: var(--color-success-bg); } .avatar-soft-danger { color: var(--color-danger-text); background-color: var(--color-danger-bg); } /* =================================================================== 5. INITIALS AVATAR =================================================================== */ .avatar-initials { text-transform: uppercase; letter-spacing: -1px; user-select: none; } /* Auto-color based on initials (use with JS) */ .avatar-auto-color { /* Colors assigned via inline style or data attribute */ } /* =================================================================== 6. STATUS INDICATOR =================================================================== */ .avatar-status { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border: 2px solid var(--bg-body); border-radius: var(--radius-full); } /* Status sizes based on avatar size */ .avatar-xs .avatar-status { width: 8px; height: 8px; border-width: 1px; } .avatar-sm .avatar-status { width: 10px; height: 10px; } .avatar-lg .avatar-status { width: 14px; height: 14px; border-width: 3px; } .avatar-xl .avatar-status, .avatar-2xl .avatar-status { width: 18px; height: 18px; border-width: 3px; } /* Status colors */ .avatar-status-online { background-color: var(--color-success); } .avatar-status-offline { background-color: var(--text-muted); } .avatar-status-busy { background-color: var(--color-danger); } .avatar-status-away { background-color: var(--color-warning); } /* Pulsing online status */ .avatar-status-online.pulse { animation: status-pulse 2s infinite; } @keyframes status-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* =================================================================== 7. AVATAR WITH BADGE =================================================================== */ .avatar-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; font-weight: var(--font-weight-bold); line-height: 18px; color: #fff; background-color: var(--color-danger); border: 2px solid var(--bg-body); border-radius: var(--radius-full); text-align: center; } .avatar-xs .avatar-badge { min-width: 14px; height: 14px; font-size: 8px; line-height: 14px; padding: 0 3px; top: -2px; right: -2px; } /* =================================================================== 8. AVATAR GROUP =================================================================== */ .avatar-group { display: inline-flex; flex-direction: row-reverse; } .avatar-group .avatar { margin-left: -12px; border: 2px solid var(--bg-body); transition: all var(--transition-fast); } .avatar-group .avatar:last-child { margin-left: 0; } .avatar-group .avatar:hover { z-index: 1; transform: translateY(-2px); } /* Group sizes */ .avatar-group-sm .avatar { margin-left: -8px; } .avatar-group-lg .avatar { margin-left: -16px; } /* More indicator */ .avatar-group-more { background-color: var(--bg-input); color: var(--text-muted); font-size: var(--font-size-xs); } /* Stacked vertically */ .avatar-group-vertical { flex-direction: column; } .avatar-group-vertical .avatar { margin-left: 0; margin-top: -12px; } .avatar-group-vertical .avatar:first-child { margin-top: 0; } /* =================================================================== 9. AVATAR WITH TEXT =================================================================== */ .avatar-text { display: inline-flex; align-items: center; gap: var(--space-sm); } .avatar-text-content { display: flex; flex-direction: column; } .avatar-text-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); line-height: 1.3; } .avatar-text-subtitle { font-size: var(--font-size-xs); color: var(--text-muted); line-height: 1.3; } /* Reversed (text first) */ .avatar-text-reverse { flex-direction: row-reverse; text-align: right; } /* =================================================================== 10. PLACEHOLDER/FALLBACK AVATAR =================================================================== */ .avatar-placeholder { color: var(--text-muted); background-color: var(--bg-input); } .avatar-placeholder i { font-size: 60%; } /* =================================================================== 11. CLICKABLE AVATAR =================================================================== */ .avatar-clickable { cursor: pointer; transition: all var(--transition-fast); } .avatar-clickable:hover { transform: scale(1.05); box-shadow: var(--shadow-md); } .avatar-clickable:active { transform: scale(1); } /* =================================================================== 12. BORDERED AVATAR =================================================================== */ .avatar-bordered { border: 2px solid var(--border-medium); } .avatar-bordered-primary { border-color: var(--brand-primary); } .avatar-bordered-success { border-color: var(--color-success); } .avatar-bordered-thick { border-width: 3px; } /* =================================================================== 13. AVATAR WITH OVERLAY =================================================================== */ .avatar-overlay { position: relative; } .avatar-overlay::after { content: ''; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5); border-radius: inherit; opacity: 0; transition: opacity var(--transition-fast); } .avatar-overlay:hover::after { opacity: 1; } .avatar-overlay-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: var(--font-size-lg); z-index: 1; opacity: 0; transition: opacity var(--transition-fast); } .avatar-overlay:hover .avatar-overlay-icon { opacity: 1; } /* =================================================================== 14. UPLOAD AVATAR =================================================================== */ .avatar-upload { position: relative; cursor: pointer; } .avatar-upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .avatar-upload-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.6); border-radius: inherit; opacity: 0; transition: opacity var(--transition-fast); } .avatar-upload:hover .avatar-upload-overlay { opacity: 1; } .avatar-upload-icon { color: #fff; font-size: var(--font-size-lg); } /* =================================================================== 15. AVATAR RING (Progress/Activity) =================================================================== */ .avatar-ring { position: relative; padding: 3px; } .avatar-ring::before { content: ''; position: absolute; inset: 0; border: 3px solid var(--brand-primary); border-radius: var(--radius-full); } /* Gradient ring */ .avatar-ring-gradient::before { border: 3px solid transparent; background: linear-gradient(45deg, var(--brand-primary), var(--brand-secondary)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* =================================================================== 16. SKELETON AVATAR =================================================================== */ .avatar-skeleton { background: linear-gradient( 90deg, var(--bg-input) 25%, var(--bg-hover) 50%, var(--bg-input) 75% ); background-size: 200% 100%; animation: avatar-skeleton 1.5s infinite; } @keyframes avatar-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* =================================================================== 17. PROFILE AVATAR (Large with edit option) =================================================================== */ .profile-avatar { position: relative; display: inline-block; } .profile-avatar .avatar { width: 100px; height: 100px; font-size: var(--font-size-3xl); } .profile-avatar-edit { position: absolute; bottom: 4px; right: 4px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--btn-primary-text); background-color: var(--brand-primary); border: 2px solid var(--bg-body); border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); } .profile-avatar-edit:hover { background-color: var(--brand-primary-dark); transform: scale(1.1); } /* ===== components/lists.css ===== */ /* =================================================================== DCS Design System - List Components Version: 2.0.0 List groups, activity feeds, and timeline components. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. LIST GROUP =================================================================== */ .list-group { display: flex; flex-direction: column; padding: 0; margin: 0; background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; } .list-group-item { position: relative; display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); color: var(--text-primary); text-decoration: none; background-color: transparent; border-bottom: 1px solid var(--border-light); transition: background-color var(--transition-fast); } .list-group-item:last-child { border-bottom: none; } /* Interactive list items */ a.list-group-item, button.list-group-item { cursor: pointer; } a.list-group-item:hover, button.list-group-item:hover { background-color: var(--bg-hover); } .list-group-item.active { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .list-group-item:disabled, .list-group-item.disabled { opacity: 0.5; pointer-events: none; } /* =================================================================== 2. LIST GROUP VARIANTS =================================================================== */ /* Flush (no outer borders/radius) */ .list-group-flush { border: none; border-radius: 0; } .list-group-flush .list-group-item:first-child { border-top: 1px solid var(--border-light); } /* Horizontal */ .list-group-horizontal { flex-direction: row; } .list-group-horizontal .list-group-item { border-bottom: none; border-right: 1px solid var(--border-light); } .list-group-horizontal .list-group-item:last-child { border-right: none; } /* Numbered */ .list-group-numbered { counter-reset: list-item; } .list-group-numbered .list-group-item::before { counter-increment: list-item; content: counter(list-item) "."; width: 24px; font-weight: var(--font-weight-semibold); color: var(--text-muted); } /* =================================================================== 3. LIST GROUP ITEM CONTENT =================================================================== */ .list-group-item-content { flex: 1; min-width: 0; } .list-group-item-title { font-weight: var(--font-weight-medium); color: var(--text-primary); margin-bottom: 2px; } .list-group-item-text { font-size: var(--font-size-sm); color: var(--text-muted); margin: 0; } .list-group-item-action { flex-shrink: 0; } /* =================================================================== 4. LIST GROUP STATUS COLORS =================================================================== */ .list-group-item-success { background-color: var(--color-success-bg); border-color: var(--color-success); } .list-group-item-danger { background-color: var(--color-danger-bg); border-color: var(--color-danger); } .list-group-item-warning { background-color: var(--color-warning-bg); border-color: var(--color-warning); } .list-group-item-info { background-color: var(--color-info-bg); border-color: var(--color-info); } /* =================================================================== 5. ACTIVITY FEED =================================================================== */ .activity-feed { display: flex; flex-direction: column; } .activity-item { display: flex; gap: var(--space-md); padding: var(--space-md) 0; } .activity-item:not(:last-child) { border-bottom: 1px solid var(--border-light); } .activity-icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); color: var(--brand-primary); background-color: var(--brand-primary-alpha); border-radius: var(--radius-full); } .activity-icon-success { color: var(--color-success-text); background-color: var(--color-success-bg); } .activity-icon-danger { color: var(--color-danger-text); background-color: var(--color-danger-bg); } .activity-icon-warning { color: var(--color-warning-text); background-color: var(--color-warning-bg); } .activity-content { flex: 1; min-width: 0; } .activity-title { font-size: var(--font-size-sm); color: var(--text-primary); margin-bottom: var(--space-xs); } .activity-title strong { font-weight: var(--font-weight-semibold); } .activity-time { font-size: var(--font-size-xs); color: var(--text-muted); } .activity-description { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: var(--space-xs); } /* =================================================================== 6. TIMELINE =================================================================== */ .timeline { position: relative; padding-left: var(--space-xl); } .timeline::before { content: ''; position: absolute; top: 0; left: 11px; bottom: 0; width: 2px; background-color: var(--border-light); } .timeline-item { position: relative; padding-bottom: var(--space-xl); } .timeline-item:last-child { padding-bottom: 0; } .timeline-marker { position: absolute; left: calc(var(--space-xl) * -1); top: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background-color: var(--bg-body); border: 2px solid var(--border-medium); border-radius: var(--radius-full); z-index: 1; } .timeline-marker i { font-size: 10px; color: var(--text-muted); } /* Marker colors */ .timeline-item.completed .timeline-marker { background-color: var(--color-success); border-color: var(--color-success); } .timeline-item.completed .timeline-marker i { color: #fff; } .timeline-item.active .timeline-marker { background-color: var(--brand-primary); border-color: var(--brand-primary); } .timeline-item.active .timeline-marker i { color: var(--btn-primary-text); } .timeline-item.error .timeline-marker { background-color: var(--color-danger); border-color: var(--color-danger); } .timeline-item.error .timeline-marker i { color: #fff; } .timeline-content { background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-md); } .timeline-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-xs); } .timeline-time { font-size: var(--font-size-xs); color: var(--text-muted); margin-bottom: var(--space-sm); } .timeline-body { font-size: var(--font-size-sm); color: var(--text-secondary); } /* Compact timeline */ .timeline-compact .timeline-item { padding-bottom: var(--space-md); } .timeline-compact .timeline-content { background: none; border: none; padding: 0; } /* =================================================================== 7. DESCRIPTION LIST =================================================================== */ .description-list { display: grid; gap: var(--space-md); } .description-list dt { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-muted); } .description-list dd { font-size: var(--font-size-base); color: var(--text-primary); margin: 0; } /* Horizontal layout */ .description-list-horizontal { grid-template-columns: minmax(120px, auto) 1fr; align-items: baseline; } .description-list-horizontal dt { text-align: right; padding-right: var(--space-md); } /* Striped */ .description-list-striped dt, .description-list-striped dd { padding: var(--space-sm) var(--space-md); } .description-list-striped > *:nth-child(4n+1), .description-list-striped > *:nth-child(4n+2) { background-color: var(--bg-input); } /* =================================================================== 8. CHECKLIST =================================================================== */ .checklist { display: flex; flex-direction: column; gap: var(--space-sm); } .checklist-item { display: flex; align-items: flex-start; gap: var(--space-sm); } .checklist-checkbox { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; } .checklist-content { flex: 1; } .checklist-label { font-size: var(--font-size-sm); color: var(--text-primary); cursor: pointer; } .checklist-item.completed .checklist-label { color: var(--text-muted); text-decoration: line-through; } .checklist-meta { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 2px; } /* =================================================================== 9. MEDIA LIST (Items with thumbnails) =================================================================== */ .media-list { display: flex; flex-direction: column; } .media-item { display: flex; gap: var(--space-md); padding: var(--space-md); border-bottom: 1px solid var(--border-light); } .media-item:last-child { border-bottom: none; } .media-item:hover { background-color: var(--bg-hover); } .media-thumbnail { flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden; background-color: var(--bg-input); } .media-thumbnail img { width: 100%; height: 100%; object-fit: cover; } .media-content { flex: 1; min-width: 0; } .media-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-xs); } .media-title a { color: inherit; text-decoration: none; } .media-title a:hover { color: var(--brand-primary); } .media-description { font-size: var(--font-size-sm); color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .media-meta { display: flex; gap: var(--space-md); margin-top: var(--space-xs); font-size: var(--font-size-xs); color: var(--text-muted); } /* =================================================================== 10. FILE LIST =================================================================== */ .file-list { display: flex; flex-direction: column; gap: var(--space-xs); } .file-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); transition: all var(--transition-fast); } .file-item:hover { border-color: var(--brand-primary); background-color: var(--bg-hover); } .file-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); color: var(--brand-primary); background-color: var(--brand-primary-alpha); border-radius: var(--radius-md); } .file-info { flex: 1; min-width: 0; } .file-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-meta { font-size: var(--font-size-xs); color: var(--text-muted); } .file-actions { display: flex; gap: var(--space-xs); } /* File type icons */ .file-icon-pdf { color: var(--color-danger); background-color: var(--color-danger-bg); } .file-icon-doc { color: var(--color-info); background-color: var(--color-info-bg); } .file-icon-xls { color: var(--color-success); background-color: var(--color-success-bg); } .file-icon-img { color: #8b5cf6; background-color: rgba(139, 92, 246, 0.15); } .file-icon-zip { color: var(--color-warning); background-color: var(--color-warning-bg); } /* =================================================================== 11. NOTIFICATION LIST =================================================================== */ .notification-list { display: flex; flex-direction: column; } .notification-item { display: flex; gap: var(--space-md); padding: var(--space-md); border-bottom: 1px solid var(--border-light); transition: background-color var(--transition-fast); } .notification-item:hover { background-color: var(--bg-hover); } .notification-item.unread { background-color: var(--brand-primary-alpha); } .notification-item.unread::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: var(--brand-primary); } .notification-avatar { flex-shrink: 0; } .notification-content { flex: 1; min-width: 0; } .notification-text { font-size: var(--font-size-sm); color: var(--text-primary); margin-bottom: var(--space-xs); } .notification-text strong { font-weight: var(--font-weight-semibold); } .notification-time { font-size: var(--font-size-xs); color: var(--text-muted); } /* =================================================================== 12. ASSIGNMENT LIST (LMS specific) =================================================================== */ .assignment-list { display: flex; flex-direction: column; gap: var(--space-sm); } .assignment-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); transition: all var(--transition-fast); } .assignment-item:hover { border-color: var(--brand-primary); } .assignment-status { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--radius-full); } .assignment-status-pending { background-color: var(--color-warning); } .assignment-status-submitted { background-color: var(--color-info); } .assignment-status-graded { background-color: var(--color-success); } .assignment-status-late { background-color: var(--color-danger); } .assignment-info { flex: 1; min-width: 0; } .assignment-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); } .assignment-course { font-size: var(--font-size-xs); color: var(--text-muted); } .assignment-due { flex-shrink: 0; text-align: right; } .assignment-due-date { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); } .assignment-due-label { font-size: var(--font-size-xs); color: var(--text-muted); } .assignment-due.urgent .assignment-due-date { color: var(--color-danger); } /* =================================================================== 13. STACKED LIST =================================================================== */ .stacked-list { display: flex; flex-direction: column; } .stacked-list-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md); border-bottom: 1px solid var(--border-light); } .stacked-list-item:last-child { border-bottom: none; } .stacked-list-label { font-size: var(--font-size-sm); color: var(--text-muted); } .stacked-list-value { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); } /* =================================================================== 14. SIMPLE LIST =================================================================== */ .simple-list { padding: 0; margin: 0; list-style: none; } .simple-list li { padding: var(--space-sm) 0; font-size: var(--font-size-sm); color: var(--text-primary); border-bottom: 1px solid var(--border-light); } .simple-list li:last-child { border-bottom: none; } /* Bullet list */ .bullet-list li { position: relative; padding-left: var(--space-lg); } .bullet-list li::before { content: ''; position: absolute; left: 0; top: calc(var(--space-sm) + 6px); width: 6px; height: 6px; background-color: var(--brand-primary); border-radius: var(--radius-full); } /* ===== components/hero.css ===== */ /* =================================================================== DCS Design System - Hero Components Version: 2.0.0 Hero sections, banners, and landing page layouts. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. BASE HERO =================================================================== */ .hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 400px; padding: var(--space-3xl) var(--space-lg); background-color: var(--bg-surface); overflow: hidden; } .hero-content { position: relative; z-index: 2; max-width: var(--container-lg); text-align: center; } .hero-title { font-size: clamp(2rem, 5vw, var(--font-size-4xl)); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: var(--line-height-tight); margin-bottom: var(--space-md); } .hero-subtitle { font-size: clamp(1rem, 2.5vw, var(--font-size-xl)); color: var(--text-secondary); line-height: var(--line-height-relaxed); margin-bottom: var(--space-xl); max-width: 700px; margin-left: auto; margin-right: auto; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; } /* =================================================================== 2. HERO SIZE VARIANTS =================================================================== */ .hero-sm { min-height: 300px; padding: var(--space-2xl) var(--space-lg); } .hero-lg { min-height: 500px; padding: var(--space-3xl) var(--space-lg); } .hero-xl { min-height: 600px; padding: var(--space-3xl) var(--space-lg); } .hero-fullscreen { min-height: 100vh; } /* =================================================================== 3. HERO WITH BACKGROUND IMAGE =================================================================== */ .hero-image { background-size: cover; background-position: center; background-repeat: no-repeat; } /* Dark overlay for readability */ .hero-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(10, 25, 47, 0.7) 0%, rgba(10, 25, 47, 0.85) 100% ); z-index: 1; } [data-theme="light"] .hero-image::before { background: linear-gradient( to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.95) 100% ); } /* Overlay opacity variants */ .hero-overlay-light::before { background: rgba(10, 25, 47, 0.5); } .hero-overlay-dark::before { background: rgba(10, 25, 47, 0.9); } [data-theme="light"] .hero-overlay-light::before { background: rgba(255, 255, 255, 0.7); } [data-theme="light"] .hero-overlay-dark::before { background: rgba(255, 255, 255, 0.95); } /* =================================================================== 4. HERO WITH GRADIENT =================================================================== */ .hero-gradient { background: linear-gradient( 135deg, var(--bg-body) 0%, var(--bg-surface) 50%, var(--bg-elevated) 100% ); } .hero-gradient-brand { background: linear-gradient( 135deg, rgba(var(--brand-primary-rgb), 0.1) 0%, var(--bg-body) 50%, rgba(var(--brand-secondary-rgb), 0.1) 100% ); } /* =================================================================== 5. HERO WITH PATTERN =================================================================== */ .hero-pattern { background-image: radial-gradient(var(--border-light) 1px, transparent 1px); background-size: 32px 32px; } .hero-pattern-dots { background-image: radial-gradient(var(--brand-primary-alpha) 2px, transparent 2px); background-size: 24px 24px; } .hero-pattern-grid { background-image: linear-gradient(var(--border-light) 1px, transparent 1px), linear-gradient(90deg, var(--border-light) 1px, transparent 1px); background-size: 48px 48px; } /* =================================================================== 6. HERO ALIGNMENT =================================================================== */ .hero-left { justify-content: flex-start; } .hero-left .hero-content { text-align: left; } .hero-left .hero-actions { justify-content: flex-start; } .hero-right { justify-content: flex-end; } .hero-right .hero-content { text-align: right; } .hero-right .hero-actions { justify-content: flex-end; } /* =================================================================== 7. SPLIT HERO (Image + Content) =================================================================== */ .hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); padding: var(--space-2xl); text-align: left; } .hero-split .hero-content { display: flex; flex-direction: column; justify-content: center; text-align: left; } .hero-split .hero-actions { justify-content: flex-start; } .hero-split-media { display: flex; align-items: center; justify-content: center; } .hero-split-media img { max-width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } /* Reverse order */ .hero-split-reverse { direction: rtl; } .hero-split-reverse > * { direction: ltr; } @media (max-width: 768px) { .hero-split { grid-template-columns: 1fr; text-align: center; } .hero-split .hero-content { text-align: center; order: 1; } .hero-split .hero-actions { justify-content: center; } .hero-split-media { order: 2; } .hero-split-reverse .hero-content { order: 1; } } /* =================================================================== 8. HERO DECORATIONS =================================================================== */ /* Floating shapes */ .hero-shapes::after { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient( circle, var(--brand-primary-alpha) 0%, transparent 70% ); top: -100px; right: -100px; z-index: 0; pointer-events: none; } .hero-shapes::before { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient( circle, var(--brand-secondary-alpha) 0%, transparent 70% ); bottom: -50px; left: -50px; z-index: 0; pointer-events: none; } /* Glow effect */ .hero-glow { position: relative; } .hero-glow .hero-title { text-shadow: 0 0 40px var(--brand-primary-alpha); } /* =================================================================== 9. HERO BADGE/ANNOUNCEMENT =================================================================== */ .hero-badge { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); margin-bottom: var(--space-lg); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--brand-primary); background-color: var(--brand-primary-alpha); border: 1px solid var(--brand-primary-alpha-strong); border-radius: var(--radius-full); } .hero-badge i { font-size: var(--font-size-xs); } .hero-badge-new { color: var(--color-success-text); background-color: var(--color-success-bg); border-color: var(--color-success); } /* =================================================================== 10. HERO STATS =================================================================== */ .hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-xl); justify-content: center; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--border-light); } .hero-stat { text-align: center; } .hero-stat-value { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--brand-primary); line-height: 1; } .hero-stat-label { font-size: var(--font-size-sm); color: var(--text-muted); margin-top: var(--space-xs); } /* =================================================================== 11. HERO SCROLL INDICATOR =================================================================== */ .hero-scroll { position: absolute; bottom: var(--space-xl); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); color: var(--text-muted); font-size: var(--font-size-sm); cursor: pointer; transition: color var(--transition-fast); z-index: 2; } .hero-scroll:hover { color: var(--brand-primary); } .hero-scroll-icon { width: 24px; height: 40px; border: 2px solid currentColor; border-radius: var(--radius-full); position: relative; } .hero-scroll-icon::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background-color: currentColor; border-radius: var(--radius-full); animation: hero-scroll-bounce 2s infinite; } @keyframes hero-scroll-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; } 50% { transform: translateX(-50%) translateY(10px); opacity: 0.5; } } /* =================================================================== 12. HERO VIDEO BACKGROUND =================================================================== */ .hero-video { position: relative; } .hero-video-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .hero-video-bg video { width: 100%; height: 100%; object-fit: cover; } .hero-video::before { content: ''; position: absolute; inset: 0; background: rgba(10, 25, 47, 0.7); z-index: 1; } /* =================================================================== 13. FEATURE GRID (For Landing Pages) =================================================================== */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-xl); padding: var(--space-2xl) 0; } .feature-item { text-align: center; padding: var(--space-lg); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--space-md); font-size: var(--font-size-2xl); color: var(--brand-primary); background-color: var(--brand-primary-alpha); border-radius: var(--radius-lg); } .feature-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-sm); } .feature-description { font-size: var(--font-size-base); color: var(--text-secondary); line-height: var(--line-height-relaxed); } /* Feature grid variants */ .feature-grid-3 { grid-template-columns: repeat(3, 1fr); } .feature-grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .feature-grid-3, .feature-grid-4 { grid-template-columns: 1fr; } } /* Horizontal feature */ .feature-item-horizontal { display: flex; text-align: left; gap: var(--space-md); } .feature-item-horizontal .feature-icon { flex-shrink: 0; margin-bottom: 0; } /* =================================================================== 14. TESTIMONIAL SECTION =================================================================== */ .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); } .testimonial { padding: var(--space-xl); background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); } .testimonial-quote { font-size: var(--font-size-lg); font-style: italic; color: var(--text-primary); line-height: var(--line-height-relaxed); margin-bottom: var(--space-lg); position: relative; padding-left: var(--space-lg); } .testimonial-quote::before { content: '\f10d'; /* FontAwesome quote-left */ font-family: 'Font Awesome 6 Free'; font-weight: 900; font-style: normal; position: absolute; left: 0; top: 0; font-size: var(--font-size-lg); color: var(--brand-primary); opacity: 0.5; } .testimonial-author { display: flex; align-items: center; gap: var(--space-md); } .testimonial-avatar { width: 48px; height: 48px; border-radius: var(--radius-full); object-fit: cover; } .testimonial-name { font-weight: var(--font-weight-semibold); color: var(--text-primary); } .testimonial-role { font-size: var(--font-size-sm); color: var(--text-muted); } /* Featured testimonial */ .testimonial-featured { grid-column: span 2; text-align: center; padding: var(--space-2xl); } .testimonial-featured .testimonial-quote { font-size: var(--font-size-xl); padding-left: 0; } .testimonial-featured .testimonial-quote::before { position: static; display: block; margin-bottom: var(--space-md); font-size: var(--font-size-2xl); } .testimonial-featured .testimonial-author { justify-content: center; } @media (max-width: 768px) { .testimonial-featured { grid-column: span 1; } } /* =================================================================== 15. CTA SECTION =================================================================== */ .cta-section { padding: var(--space-3xl) var(--space-lg); text-align: center; background-color: var(--bg-surface); border-radius: var(--radius-xl); } .cta-section-gradient { background: linear-gradient( 135deg, var(--brand-primary-alpha) 0%, var(--bg-surface) 50%, var(--brand-secondary-alpha) 100% ); } .cta-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: var(--space-sm); } .cta-description { font-size: var(--font-size-lg); color: var(--text-secondary); margin-bottom: var(--space-xl); max-width: 600px; margin-left: auto; margin-right: auto; } .cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; } /* Inline CTA */ .cta-inline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); padding: var(--space-xl); text-align: left; } .cta-inline .cta-content { flex: 1; } .cta-inline .cta-title { margin-bottom: var(--space-xs); } .cta-inline .cta-description { margin-bottom: 0; max-width: none; } @media (max-width: 768px) { .cta-inline { flex-direction: column; text-align: center; } .cta-inline .cta-actions { width: 100%; } } /* ===== components/accordion.css ===== */ /* =================================================================== DCS Design System - Accordion Components Version: 2.0.0 Collapsible content sections, FAQs, and expandable panels. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. BASE ACCORDION =================================================================== */ .accordion { display: flex; flex-direction: column; border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; } .accordion-item { border-bottom: 1px solid var(--border-light); } .accordion-item:last-child { border-bottom: none; } /* =================================================================== 2. ACCORDION HEADER / TRIGGER =================================================================== */ .accordion-header { margin: 0; } .accordion-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-md) var(--space-lg); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--text-primary); text-align: left; background-color: var(--bg-surface); border: none; cursor: pointer; transition: all var(--transition-fast); } .accordion-trigger:hover { background-color: var(--bg-hover); } .accordion-trigger:focus { outline: none; background-color: var(--bg-hover); } .accordion-trigger:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; } /* Accordion icon */ .accordion-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--text-muted); transition: transform var(--transition-base); flex-shrink: 0; } .accordion-icon::before { content: '\f078'; /* FontAwesome chevron-down */ font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: var(--font-size-sm); } /* Expanded state */ .accordion-item.is-open .accordion-trigger { color: var(--brand-primary); } .accordion-item.is-open .accordion-icon { transform: rotate(180deg); color: var(--brand-primary); } /* =================================================================== 3. ACCORDION CONTENT / PANEL =================================================================== */ .accordion-content { display: none; overflow: hidden; } .accordion-item.is-open .accordion-content { display: block; } .accordion-body { padding: 0 var(--space-lg) var(--space-lg); color: var(--text-secondary); line-height: var(--line-height-relaxed); } /* Animated expand (requires JS to set max-height) */ .accordion-content-animated { display: block; max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); } .accordion-item.is-open .accordion-content-animated { max-height: 1000px; /* Adjust based on content */ } /* =================================================================== 4. ACCORDION VARIANTS =================================================================== */ /* Flush - no outer border */ .accordion-flush { border: none; border-radius: 0; } .accordion-flush .accordion-item { border-radius: 0; } .accordion-flush .accordion-item:first-child .accordion-trigger { border-radius: 0; } .accordion-flush .accordion-item:last-child .accordion-trigger { border-radius: 0; } /* Separated - gap between items */ .accordion-separated { border: none; gap: var(--space-sm); } .accordion-separated .accordion-item { border: 1px solid var(--border-light); border-radius: var(--radius-md); } /* Bordered - prominent borders */ .accordion-bordered .accordion-item { border-left: 3px solid var(--border-medium); } .accordion-bordered .accordion-item.is-open { border-left-color: var(--brand-primary); } /* =================================================================== 5. ACCORDION SIZES =================================================================== */ .accordion-sm .accordion-trigger { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); } .accordion-sm .accordion-body { padding: 0 var(--space-md) var(--space-md); font-size: var(--font-size-sm); } .accordion-lg .accordion-trigger { padding: var(--space-lg) var(--space-xl); font-size: var(--font-size-lg); } .accordion-lg .accordion-body { padding: 0 var(--space-xl) var(--space-xl); } /* =================================================================== 6. ACCORDION WITH ICONS =================================================================== */ .accordion-trigger-icon { display: flex; align-items: center; gap: var(--space-md); } .accordion-trigger-icon i { width: 24px; text-align: center; color: var(--brand-primary); } /* Plus/minus icon variant */ .accordion-plus .accordion-icon::before { content: '+'; font-family: inherit; font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); } .accordion-plus .accordion-item.is-open .accordion-icon::before { content: '−'; } .accordion-plus .accordion-item.is-open .accordion-icon { transform: none; } /* =================================================================== 7. FAQ ACCORDION =================================================================== */ .faq { max-width: var(--container-md); margin: 0 auto; } .faq-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary); text-align: center; margin-bottom: var(--space-xl); } .faq-subtitle { font-size: var(--font-size-base); color: var(--text-muted); text-align: center; margin-bottom: var(--space-2xl); } .faq .accordion-trigger { font-weight: var(--font-weight-semibold); } .faq .accordion-body { color: var(--text-secondary); } /* FAQ categories */ .faq-category { margin-bottom: var(--space-2xl); } .faq-category-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--brand-primary); } /* =================================================================== 8. NESTED ACCORDION =================================================================== */ .accordion-nested { margin-top: var(--space-md); border: 1px solid var(--border-light); border-radius: var(--radius-md); } .accordion-nested .accordion-trigger { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); background-color: var(--bg-input); } .accordion-nested .accordion-body { padding: 0 var(--space-md) var(--space-md); font-size: var(--font-size-sm); } /* =================================================================== 9. ACCORDION STATES =================================================================== */ /* Disabled */ .accordion-item.is-disabled .accordion-trigger { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Loading */ .accordion-item.is-loading .accordion-trigger::after { content: ''; width: 16px; height: 16px; margin-left: var(--space-sm); border: 2px solid var(--border-medium); border-top-color: var(--brand-primary); border-radius: 50%; animation: accordion-spin 0.6s linear infinite; } @keyframes accordion-spin { to { transform: rotate(360deg); } } /* =================================================================== 10. COLLAPSIBLE SECTIONS (Single item) =================================================================== */ .collapsible { border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; } .collapsible-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-md) var(--space-lg); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--text-primary); text-align: left; background-color: var(--bg-surface); border: none; cursor: pointer; transition: all var(--transition-fast); } .collapsible-trigger:hover { background-color: var(--bg-hover); } .collapsible-icon { transition: transform var(--transition-base); } .collapsible-icon::before { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: var(--font-size-sm); color: var(--text-muted); } .collapsible.is-open .collapsible-icon { transform: rotate(180deg); } .collapsible-content { display: none; padding: 0 var(--space-lg) var(--space-lg); } .collapsible.is-open .collapsible-content { display: block; } /* =================================================================== 11. EXPANDABLE TEXT =================================================================== */ .expandable-text { position: relative; } .expandable-text-content { overflow: hidden; max-height: 100px; transition: max-height var(--transition-slow); } .expandable-text.is-expanded .expandable-text-content { max-height: 2000px; } .expandable-text-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, var(--bg-body)); pointer-events: none; transition: opacity var(--transition-base); } .expandable-text.is-expanded .expandable-text-gradient { opacity: 0; } .expandable-text-toggle { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--brand-primary); background: none; border: none; cursor: pointer; transition: color var(--transition-fast); } .expandable-text-toggle:hover { color: var(--brand-primary-dark); } /* =================================================================== 12. DETAILS/SUMMARY (Native HTML) =================================================================== */ details.accordion-native { border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; } details.accordion-native + details.accordion-native { margin-top: var(--space-sm); } details.accordion-native summary { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); font-weight: var(--font-weight-medium); color: var(--text-primary); background-color: var(--bg-surface); cursor: pointer; list-style: none; transition: background-color var(--transition-fast); } details.accordion-native summary::-webkit-details-marker { display: none; } details.accordion-native summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: var(--font-size-sm); color: var(--text-muted); transition: transform var(--transition-base); } details.accordion-native[open] summary::after { transform: rotate(180deg); } details.accordion-native summary:hover { background-color: var(--bg-hover); } details.accordion-native > div { padding: 0 var(--space-lg) var(--space-lg); color: var(--text-secondary); } /* =================================================================== 13. COURSE CONTENT ACCORDION (LMS Specific) =================================================================== */ .course-content-accordion .accordion-item { background-color: var(--bg-surface); } .course-content-accordion .accordion-trigger { padding: var(--space-md) var(--space-lg); } .course-section-header { display: flex; align-items: center; gap: var(--space-md); flex: 1; } .course-section-number { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--btn-primary-text); background-color: var(--brand-primary); border-radius: var(--radius-full); } .course-section-title { font-weight: var(--font-weight-semibold); } .course-section-meta { display: flex; align-items: center; gap: var(--space-md); font-size: var(--font-size-sm); color: var(--text-muted); } .course-section-progress { display: flex; align-items: center; gap: var(--space-xs); } .course-section-progress i { color: var(--color-success); } /* Lesson list inside accordion */ .course-lesson-list { display: flex; flex-direction: column; } .course-lesson-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-light); } .course-lesson-item:last-child { border-bottom: none; } .course-lesson-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--text-muted); background-color: var(--bg-input); border-radius: var(--radius-sm); } .course-lesson-item.is-completed .course-lesson-icon { color: #fff; background-color: var(--color-success); } .course-lesson-item.is-completed .course-lesson-icon::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; } .course-lesson-item.is-current .course-lesson-icon { color: var(--btn-primary-text); background-color: var(--brand-primary); } .course-lesson-info { flex: 1; } .course-lesson-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); } .course-lesson-item.is-completed .course-lesson-title { color: var(--text-muted); } .course-lesson-duration { font-size: var(--font-size-xs); color: var(--text-muted); } .course-lesson-badge { padding: 2px var(--space-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--brand-primary); background-color: var(--brand-primary-alpha); border-radius: var(--radius-sm); } /* ===== components/footer.css ===== */ /* =================================================================== DCS Design System - Footer Components Version: 2.0.0 Site footers, link columns, and bottom navigation. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. BASE FOOTER =================================================================== */ .footer { background-color: var(--bg-surface); border-top: 1px solid var(--border-light); padding: var(--space-2xl) var(--space-lg); } .footer-container { max-width: var(--container-xl); margin: 0 auto; } /* =================================================================== 2. FOOTER GRID LAYOUT =================================================================== */ .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-xl); } /* Brand column - wider */ .footer-brand-column { grid-column: span 2; } @media (max-width: 768px) { .footer-brand-column { grid-column: span 1; } } /* =================================================================== 3. FOOTER BRAND =================================================================== */ .footer-brand { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); } .footer-brand-logo { height: 32px; width: auto; } .footer-brand-name { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .footer-brand-description { font-size: var(--font-size-sm); color: var(--text-muted); line-height: var(--line-height-relaxed); max-width: 300px; } /* =================================================================== 4. FOOTER COLUMNS =================================================================== */ .footer-column { display: flex; flex-direction: column; } .footer-column-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-md); } .footer-links { display: flex; flex-direction: column; gap: var(--space-sm); } .footer-link { font-size: var(--font-size-sm); color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); } .footer-link:hover { color: var(--brand-primary); } .footer-link i { width: 20px; margin-right: var(--space-xs); } /* Link with badge */ .footer-link-badge { display: inline-flex; align-items: center; gap: var(--space-sm); } .footer-link-badge .badge { font-size: 10px; padding: 2px 6px; } /* =================================================================== 5. FOOTER SOCIAL LINKS =================================================================== */ .footer-social { display: flex; gap: var(--space-sm); margin-top: var(--space-md); } .footer-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: var(--font-size-base); color: var(--text-muted); background-color: var(--bg-input); border-radius: var(--radius-md); transition: all var(--transition-fast); } .footer-social-link:hover { color: var(--btn-primary-text); background-color: var(--brand-primary); } /* Colored social icons */ .footer-social-link-facebook:hover { background-color: #1877f2; } .footer-social-link-twitter:hover { background-color: #1da1f2; } .footer-social-link-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .footer-social-link-linkedin:hover { background-color: #0a66c2; } .footer-social-link-youtube:hover { background-color: #ff0000; } .footer-social-link-github:hover { background-color: #333; } /* =================================================================== 6. FOOTER NEWSLETTER =================================================================== */ .footer-newsletter { margin-top: var(--space-lg); } .footer-newsletter-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-sm); } .footer-newsletter-text { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--space-md); } .footer-newsletter-form { display: flex; gap: var(--space-sm); } .footer-newsletter-input { flex: 1; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--input-text); background-color: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast); } .footer-newsletter-input:focus { outline: none; border-color: var(--input-focus-border); } .footer-newsletter-input::placeholder { color: var(--input-placeholder); } .footer-newsletter-btn { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--btn-primary-text); background-color: var(--btn-primary-bg); border: none; border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--transition-fast); } .footer-newsletter-btn:hover { background-color: var(--btn-primary-hover); } @media (max-width: 480px) { .footer-newsletter-form { flex-direction: column; } .footer-newsletter-btn { width: 100%; } } /* =================================================================== 7. FOOTER BOTTOM / COPYRIGHT =================================================================== */ .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-xl); margin-top: var(--space-xl); border-top: 1px solid var(--border-light); } .footer-copyright { font-size: var(--font-size-sm); color: var(--text-muted); } .footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-md); } .footer-legal-link { font-size: var(--font-size-sm); color: var(--text-muted); text-decoration: none; transition: color var(--transition-fast); } .footer-legal-link:hover { color: var(--brand-primary); } .footer-legal-divider { color: var(--border-medium); } @media (max-width: 576px) { .footer-bottom { flex-direction: column; text-align: center; } } /* =================================================================== 8. FOOTER VARIANTS =================================================================== */ /* Dark footer */ .footer-dark { background-color: var(--bg-body); } /* Minimal footer */ .footer-minimal { padding: var(--space-lg); text-align: center; } .footer-minimal .footer-container { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); } .footer-minimal .footer-links { flex-direction: row; flex-wrap: wrap; justify-content: center; } .footer-minimal .footer-bottom { border-top: none; margin-top: 0; padding-top: 0; justify-content: center; } /* Centered footer */ .footer-centered { text-align: center; } .footer-centered .footer-grid { justify-items: center; } .footer-centered .footer-brand-description { margin-left: auto; margin-right: auto; } .footer-centered .footer-links { align-items: center; } .footer-centered .footer-social { justify-content: center; } /* =================================================================== 9. FOOTER WITH BACKGROUND =================================================================== */ .footer-gradient { background: linear-gradient( to bottom, var(--bg-body), var(--bg-surface) ); border-top: none; } .footer-pattern { background-image: radial-gradient(var(--border-light) 1px, transparent 1px); background-size: 24px 24px; } /* =================================================================== 10. FOOTER APP DOWNLOAD =================================================================== */ .footer-app-links { display: flex; gap: var(--space-sm); margin-top: var(--space-md); } .footer-app-link { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background-color: var(--bg-input); border: 1px solid var(--border-light); border-radius: var(--radius-md); text-decoration: none; transition: all var(--transition-fast); } .footer-app-link:hover { border-color: var(--brand-primary); background-color: var(--bg-hover); } .footer-app-link i { font-size: var(--font-size-xl); color: var(--text-primary); } .footer-app-link-text { display: flex; flex-direction: column; line-height: 1.2; } .footer-app-link-label { font-size: 10px; color: var(--text-muted); } .footer-app-link-store { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); } /* =================================================================== 11. FOOTER CONTACT INFO =================================================================== */ .footer-contact { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); } .footer-contact-item { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--font-size-sm); color: var(--text-secondary); } .footer-contact-item i { width: 16px; color: var(--brand-primary); margin-top: 2px; } .footer-contact-item a { color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); } .footer-contact-item a:hover { color: var(--brand-primary); } /* =================================================================== 12. FOOTER LANGUAGE SELECTOR =================================================================== */ .footer-language { position: relative; margin-top: var(--space-md); } .footer-language-btn { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--text-secondary); background-color: var(--bg-input); border: 1px solid var(--border-light); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .footer-language-btn:hover { border-color: var(--brand-primary); } .footer-language-btn i { color: var(--text-muted); } /* =================================================================== 13. STICKY FOOTER =================================================================== */ /* Ensure footer stays at bottom */ .page-wrapper { display: flex; flex-direction: column; min-height: 100vh; } .page-wrapper .main-content { flex: 1; } /* =================================================================== 14. BACK TO TOP BUTTON =================================================================== */ .back-to-top { position: fixed; bottom: var(--space-xl); right: var(--space-xl); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--btn-primary-text); background-color: var(--brand-primary); border: none; border-radius: var(--radius-full); box-shadow: var(--shadow-lg); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all var(--transition-base); z-index: var(--z-fixed); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background-color: var(--brand-primary-dark); transform: translateY(-2px); } .back-to-top i { font-size: var(--font-size-lg); } /* =================================================================== 15. LMS FOOTER (Specific) =================================================================== */ .footer-lms { padding: var(--space-lg); } .footer-lms .footer-bottom { padding-top: var(--space-md); margin-top: var(--space-md); } .footer-lms-links { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; } .footer-lms-link { font-size: var(--font-size-sm); color: var(--text-muted); text-decoration: none; } .footer-lms-link:hover { color: var(--brand-primary); } /* Powered by badge */ .footer-powered { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-xs); color: var(--text-muted); } .footer-powered-logo { height: 16px; width: auto; opacity: 0.7; } /* ===== components/calendar.css ===== */ /* =================================================================== DCS Design System - Calendar Components Version: 2.0.0 Calendars, date pickers, and schedule displays. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. BASE CALENDAR =================================================================== */ .calendar { background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; } /* =================================================================== 2. CALENDAR HEADER =================================================================== */ .calendar-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); background-color: var(--bg-input); border-bottom: 1px solid var(--border-light); } .calendar-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .calendar-nav { display: flex; align-items: center; gap: var(--space-sm); } .calendar-nav-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--text-secondary); background: none; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .calendar-nav-btn:hover { color: var(--brand-primary); border-color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .calendar-today-btn { padding: var(--space-xs) var(--space-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); background: none; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .calendar-today-btn:hover { color: var(--brand-primary); border-color: var(--brand-primary); } /* =================================================================== 3. CALENDAR WEEKDAYS =================================================================== */ .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background-color: var(--bg-input); border-bottom: 1px solid var(--border-light); } .calendar-weekday { padding: var(--space-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-muted); text-align: center; text-transform: uppercase; letter-spacing: 0.5px; } /* Weekend columns */ .calendar-weekday:first-child, .calendar-weekday:last-child { color: var(--text-light); } /* =================================================================== 4. CALENDAR DAYS GRID =================================================================== */ .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); } .calendar-day { position: relative; min-height: 80px; padding: var(--space-xs); border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background-color var(--transition-fast); } .calendar-day:nth-child(7n) { border-right: none; } .calendar-day:hover { background-color: var(--bg-hover); } /* Day number */ .calendar-day-number { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); border-radius: var(--radius-full); margin-bottom: var(--space-xs); } /* Different month days */ .calendar-day-other .calendar-day-number { color: var(--text-light); } .calendar-day-other { background-color: var(--bg-body); } /* Today */ .calendar-day-today .calendar-day-number { color: var(--btn-primary-text); background-color: var(--brand-primary); } /* Selected day */ .calendar-day-selected { background-color: var(--brand-primary-alpha); } .calendar-day-selected .calendar-day-number { color: var(--brand-primary); font-weight: var(--font-weight-bold); } /* Weekend days */ .calendar-day:nth-child(7n), .calendar-day:nth-child(7n-6) { background-color: var(--bg-body); } /* =================================================================== 5. CALENDAR EVENTS =================================================================== */ .calendar-events { display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .calendar-event { padding: 2px var(--space-xs); font-size: 11px; font-weight: var(--font-weight-medium); color: #fff; background-color: var(--brand-primary); border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: opacity var(--transition-fast); } .calendar-event:hover { opacity: 0.85; } /* Event colors */ .calendar-event-success { background-color: var(--color-success); } .calendar-event-danger { background-color: var(--color-danger); } .calendar-event-warning { background-color: var(--color-warning); color: #1e293b; } .calendar-event-info { background-color: var(--color-info); } /* More events indicator */ .calendar-more { font-size: 10px; color: var(--text-muted); padding: 2px var(--space-xs); } .calendar-more:hover { color: var(--brand-primary); } /* =================================================================== 6. MINI CALENDAR (Date Picker Style) =================================================================== */ .calendar-mini { width: 280px; } .calendar-mini .calendar-header { padding: var(--space-sm) var(--space-md); } .calendar-mini .calendar-title { font-size: var(--font-size-base); } .calendar-mini .calendar-day { min-height: auto; padding: var(--space-xs); border: none; text-align: center; } .calendar-mini .calendar-day-number { margin: 0 auto; } .calendar-mini .calendar-events { display: none; } /* Event indicator dots for mini calendar */ .calendar-mini .calendar-day.has-events::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background-color: var(--brand-primary); border-radius: var(--radius-full); } /* =================================================================== 7. CALENDAR VIEW MODES =================================================================== */ .calendar-view-toggle { display: flex; gap: var(--space-xs); padding: 2px; background-color: var(--bg-input); border-radius: var(--radius-md); } .calendar-view-btn { padding: var(--space-xs) var(--space-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .calendar-view-btn:hover { color: var(--text-primary); } .calendar-view-btn.active { color: var(--btn-primary-text); background-color: var(--brand-primary); } /* =================================================================== 8. WEEK VIEW =================================================================== */ .calendar-week { display: grid; grid-template-columns: 60px repeat(7, 1fr); } .calendar-week-times { border-right: 1px solid var(--border-light); } .calendar-week-time { height: 60px; padding: var(--space-xs); font-size: var(--font-size-xs); color: var(--text-muted); text-align: right; border-bottom: 1px solid var(--border-light); } .calendar-week-column { border-right: 1px solid var(--border-light); } .calendar-week-column:last-child { border-right: none; } .calendar-week-slot { height: 60px; border-bottom: 1px solid var(--border-light); position: relative; } .calendar-week-slot:hover { background-color: var(--bg-hover); } /* Week view event */ .calendar-week-event { position: absolute; left: 2px; right: 2px; padding: var(--space-xs); font-size: var(--font-size-xs); color: #fff; background-color: var(--brand-primary); border-radius: var(--radius-sm); overflow: hidden; z-index: 1; } /* =================================================================== 9. AGENDA/LIST VIEW =================================================================== */ .calendar-agenda { max-height: 400px; overflow-y: auto; } .calendar-agenda-date { position: sticky; top: 0; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); background-color: var(--bg-input); border-bottom: 1px solid var(--border-light); } .calendar-agenda-date-today { color: var(--brand-primary); } .calendar-agenda-event { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-md); border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background-color var(--transition-fast); } .calendar-agenda-event:hover { background-color: var(--bg-hover); } .calendar-agenda-time { flex-shrink: 0; width: 60px; font-size: var(--font-size-sm); color: var(--text-muted); } .calendar-agenda-indicator { flex-shrink: 0; width: 4px; height: 100%; min-height: 40px; background-color: var(--brand-primary); border-radius: var(--radius-full); } .calendar-agenda-content { flex: 1; min-width: 0; } .calendar-agenda-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); margin-bottom: var(--space-xs); } .calendar-agenda-details { font-size: var(--font-size-xs); color: var(--text-muted); } /* =================================================================== 10. DATE PICKER DROPDOWN =================================================================== */ .datepicker { position: relative; } .datepicker-input { padding-right: calc(var(--space-md) * 3); } .datepicker-icon { position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .datepicker-dropdown { position: absolute; top: 100%; left: 0; margin-top: var(--space-xs); background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--transition-fast); } .datepicker.is-open .datepicker-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } /* =================================================================== 11. DATE RANGE PICKER =================================================================== */ .daterange { display: flex; align-items: center; gap: var(--space-sm); } .daterange-separator { color: var(--text-muted); } .daterange-dropdown { display: flex; gap: var(--space-lg); padding: var(--space-md); } .daterange-presets { display: flex; flex-direction: column; gap: var(--space-xs); padding-right: var(--space-lg); border-right: 1px solid var(--border-light); } .daterange-preset { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--text-secondary); background: none; border: none; border-radius: var(--radius-sm); text-align: left; cursor: pointer; transition: all var(--transition-fast); } .daterange-preset:hover { background-color: var(--bg-hover); color: var(--text-primary); } .daterange-preset.active { background-color: var(--brand-primary-alpha); color: var(--brand-primary); } /* =================================================================== 12. LMS ASSIGNMENT CALENDAR =================================================================== */ .calendar-assignment { padding: 2px var(--space-xs); font-size: 11px; border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Assignment types */ .calendar-assignment-quiz { color: var(--color-info-text); background-color: var(--color-info-bg); } .calendar-assignment-homework { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .calendar-assignment-project { color: var(--brand-secondary); background-color: var(--brand-secondary-alpha); } .calendar-assignment-exam { color: var(--color-danger-text); background-color: var(--color-danger-bg); } /* Due indicator */ .calendar-assignment-due { display: flex; align-items: center; gap: var(--space-xs); } .calendar-assignment-due::before { content: '\f017'; /* FontAwesome clock */ font-family: 'Font Awesome 6 Free'; font-weight: 400; font-size: 10px; } /* Overdue */ .calendar-assignment-overdue { color: var(--color-danger-text); background-color: var(--color-danger-bg); } /* Completed */ .calendar-assignment-completed { color: var(--color-success-text); background-color: var(--color-success-bg); text-decoration: line-through; opacity: 0.7; } /* =================================================================== 13. COURSE SCHEDULE =================================================================== */ .schedule { background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; } .schedule-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); background-color: var(--bg-input); border-bottom: 1px solid var(--border-light); } .schedule-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .schedule-day { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-light); } .schedule-day:last-child { border-bottom: none; } .schedule-day-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); } .schedule-day-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .schedule-day-date { font-size: var(--font-size-sm); color: var(--text-muted); } .schedule-items { display: flex; flex-direction: column; gap: var(--space-sm); } .schedule-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm); background-color: var(--bg-body); border-radius: var(--radius-md); } .schedule-item-time { flex-shrink: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--brand-primary); } .schedule-item-content { flex: 1; } .schedule-item-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); } .schedule-item-location { font-size: var(--font-size-xs); color: var(--text-muted); } /* =================================================================== 14. UPCOMING DATES WIDGET =================================================================== */ .upcoming-dates { background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-lg); } .upcoming-dates-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-md); } .upcoming-date-item { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-light); } .upcoming-date-item:last-child { border-bottom: none; } .upcoming-date-calendar { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; background-color: var(--bg-input); border-radius: var(--radius-md); flex-shrink: 0; } .upcoming-date-month { font-size: 10px; font-weight: var(--font-weight-semibold); color: var(--brand-primary); text-transform: uppercase; } .upcoming-date-day { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: 1; } .upcoming-date-content { flex: 1; min-width: 0; } .upcoming-date-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); margin-bottom: var(--space-xs); } .upcoming-date-details { font-size: var(--font-size-xs); color: var(--text-muted); } .upcoming-date-badge { flex-shrink: 0; } /* ===== components/comments.css ===== */ /* =================================================================== DCS Design System - Comments & Discussion Components Version: 2.0.0 Comment threads, discussion forums, and conversation UI. Requires: tokens.css to be loaded first. =================================================================== */ /* =================================================================== 1. COMMENTS CONTAINER =================================================================== */ .comments { display: flex; flex-direction: column; gap: var(--space-lg); } .comments-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-light); } .comments-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .comments-count { font-size: var(--font-size-sm); color: var(--text-muted); font-weight: var(--font-weight-normal); margin-left: var(--space-sm); } .comments-sort { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-sm); color: var(--text-muted); } /* =================================================================== 2. SINGLE COMMENT =================================================================== */ .comment { display: flex; gap: var(--space-md); } .comment-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; } .comment-avatar-placeholder { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--brand-primary-alpha); color: var(--brand-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); border-radius: var(--radius-full); text-transform: uppercase; } .comment-content { flex: 1; min-width: 0; } .comment-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xs); } .comment-author { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .comment-author:hover { color: var(--brand-primary); } .comment-badge { padding: 2px var(--space-xs); font-size: 10px; font-weight: var(--font-weight-semibold); color: var(--brand-primary); background-color: var(--brand-primary-alpha); border-radius: var(--radius-sm); text-transform: uppercase; } .comment-badge-instructor { color: var(--brand-secondary); background-color: var(--brand-secondary-alpha); } .comment-badge-op { color: var(--color-info-text); background-color: var(--color-info-bg); } .comment-time { font-size: var(--font-size-xs); color: var(--text-muted); } .comment-edited { font-size: var(--font-size-xs); color: var(--text-light); font-style: italic; } .comment-body { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: var(--line-height-relaxed); } .comment-body p { margin-bottom: var(--space-sm); } .comment-body p:last-child { margin-bottom: 0; } /* Code in comments */ .comment-body code { padding: 2px var(--space-xs); font-family: var(--font-family-mono); font-size: var(--font-size-xs); background-color: var(--bg-input); border-radius: var(--radius-sm); } .comment-body pre { padding: var(--space-md); margin: var(--space-sm) 0; background-color: var(--bg-input); border-radius: var(--radius-md); overflow-x: auto; } .comment-body pre code { padding: 0; background: none; } /* Quoted text */ .comment-body blockquote { margin: var(--space-sm) 0; padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--brand-primary); background-color: var(--bg-input); color: var(--text-muted); font-style: italic; } /* =================================================================== 3. COMMENT ACTIONS =================================================================== */ .comment-actions { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-sm); } .comment-action { display: flex; align-items: center; gap: var(--space-xs); padding: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-muted); background: none; border: none; cursor: pointer; transition: color var(--transition-fast); } .comment-action:hover { color: var(--brand-primary); } .comment-action i { font-size: var(--font-size-sm); } /* Upvote/like with count */ .comment-action-votes { padding: var(--space-xs) var(--space-sm); background-color: var(--bg-input); border-radius: var(--radius-full); } .comment-action-votes.is-voted { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .comment-vote-count { margin-left: var(--space-xs); font-weight: var(--font-weight-semibold); } /* =================================================================== 4. NESTED REPLIES =================================================================== */ .comment-replies { margin-top: var(--space-md); margin-left: calc(40px + var(--space-md)); padding-left: var(--space-lg); border-left: 2px solid var(--border-light); display: flex; flex-direction: column; gap: var(--space-md); } .comment-replies .comment-avatar { width: 32px; height: 32px; } .comment-replies .comment-avatar-placeholder { width: 32px; height: 32px; font-size: var(--font-size-xs); } /* Collapse replies toggle */ .comment-collapse { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); padding: var(--space-xs) 0; font-size: var(--font-size-xs); color: var(--text-muted); background: none; border: none; cursor: pointer; } .comment-collapse:hover { color: var(--brand-primary); } .comment-collapse i { transition: transform var(--transition-fast); } .comment-collapse.is-collapsed i { transform: rotate(-90deg); } /* =================================================================== 5. COMMENT FORM =================================================================== */ .comment-form { display: flex; gap: var(--space-md); } .comment-form-avatar { flex-shrink: 0; } .comment-form-body { flex: 1; display: flex; flex-direction: column; gap: var(--space-sm); } .comment-form-input { width: 100%; padding: var(--space-md); font-size: var(--font-size-sm); color: var(--input-text); background-color: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-lg); resize: vertical; min-height: 80px; transition: all var(--transition-base); } .comment-form-input:focus { border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); outline: none; } .comment-form-input::placeholder { color: var(--input-placeholder); } .comment-form-toolbar { display: flex; align-items: center; justify-content: space-between; } .comment-form-tools { display: flex; gap: var(--space-xs); } .comment-form-tool { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .comment-form-tool:hover { color: var(--brand-primary); background-color: var(--bg-hover); } .comment-form-actions { display: flex; gap: var(--space-sm); } /* Inline reply form */ .comment-reply-form { margin-top: var(--space-md); margin-left: calc(40px + var(--space-md)); } .comment-reply-form .comment-form-input { min-height: 60px; } /* =================================================================== 6. DISCUSSION THREAD =================================================================== */ .discussion { background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; } .discussion-header { padding: var(--space-lg); border-bottom: 1px solid var(--border-light); } .discussion-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-sm); } .discussion-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); font-size: var(--font-size-sm); color: var(--text-muted); } .discussion-meta-item { display: flex; align-items: center; gap: var(--space-xs); } .discussion-meta-item i { color: var(--brand-primary); } .discussion-body { padding: var(--space-lg); } .discussion-content { font-size: var(--font-size-base); color: var(--text-secondary); line-height: var(--line-height-relaxed); } .discussion-tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); } .discussion-tag { padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-muted); background-color: var(--bg-input); border-radius: var(--radius-full); } .discussion-tag:hover { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .discussion-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); background-color: var(--bg-input); border-top: 1px solid var(--border-light); } .discussion-stats { display: flex; gap: var(--space-lg); } .discussion-stat { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-sm); color: var(--text-muted); } .discussion-stat i { font-size: var(--font-size-base); } /* =================================================================== 7. DISCUSSION LIST (Forum View) =================================================================== */ .discussion-list { display: flex; flex-direction: column; } .discussion-list-item { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-light); transition: background-color var(--transition-fast); } .discussion-list-item:hover { background-color: var(--bg-hover); } .discussion-list-item:last-child { border-bottom: none; } .discussion-list-votes { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); flex-shrink: 0; min-width: 48px; } .discussion-list-vote-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .discussion-list-vote-btn:hover { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .discussion-list-vote-btn.is-voted { color: var(--brand-primary); } .discussion-list-vote-count { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .discussion-list-content { flex: 1; min-width: 0; } .discussion-list-title { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--text-primary); margin-bottom: var(--space-xs); } .discussion-list-title:hover { color: var(--brand-primary); } .discussion-list-excerpt { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--space-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .discussion-list-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); font-size: var(--font-size-xs); color: var(--text-light); } .discussion-list-stats { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); flex-shrink: 0; text-align: center; min-width: 64px; } .discussion-list-stat-value { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .discussion-list-stat-label { font-size: var(--font-size-xs); color: var(--text-muted); } /* Pinned discussion */ .discussion-list-item.is-pinned { background-color: var(--brand-primary-alpha); } .discussion-list-item.is-pinned .discussion-list-title::before { content: '\f08d'; /* FontAwesome thumbtack */ font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: var(--space-xs); color: var(--brand-primary); } /* Answered/resolved */ .discussion-list-item.is-resolved { border-left: 3px solid var(--color-success); } .discussion-list-item.is-resolved .discussion-list-title::before { content: '\f00c'; /* FontAwesome check */ font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: var(--space-xs); color: var(--color-success); } /* =================================================================== 8. COMMENT STATES =================================================================== */ /* Highlighted/best answer */ .comment-highlighted { padding: var(--space-md); background-color: var(--color-success-bg); border: 1px solid var(--color-success); border-radius: var(--radius-lg); margin-left: calc(-1 * var(--space-md)); margin-right: calc(-1 * var(--space-md)); } .comment-highlighted::before { content: 'Best Answer'; display: inline-block; padding: var(--space-xs) var(--space-sm); margin-bottom: var(--space-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-success-text); background-color: var(--color-success); background-color: rgba(16, 185, 129, 0.2); border-radius: var(--radius-sm); } /* Deleted comment */ .comment-deleted { opacity: 0.5; } .comment-deleted .comment-body { font-style: italic; color: var(--text-light); } /* Pending moderation */ .comment-pending { padding: var(--space-md); background-color: var(--color-warning-bg); border: 1px dashed var(--color-warning); border-radius: var(--radius-lg); margin-left: calc(-1 * var(--space-md)); margin-right: calc(-1 * var(--space-md)); } /* New/unread */ .comment-new::before { content: ''; position: absolute; left: calc(-1 * var(--space-md)); top: 0; bottom: 0; width: 3px; background-color: var(--brand-primary); border-radius: var(--radius-full); } .comment-new { position: relative; } /* =================================================================== 9. INLINE COMMENTS (Code Review Style) =================================================================== */ .inline-comments { background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); margin: var(--space-sm) 0; } .inline-comments-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); background-color: var(--bg-input); border-bottom: 1px solid var(--border-light); font-size: var(--font-size-xs); color: var(--text-muted); } .inline-comments-list { padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-sm); } .inline-comment { display: flex; gap: var(--space-sm); padding: var(--space-sm); background-color: var(--bg-body); border-radius: var(--radius-sm); } .inline-comment-avatar { width: 24px; height: 24px; border-radius: var(--radius-full); flex-shrink: 0; } .inline-comment-content { flex: 1; min-width: 0; } .inline-comment-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); } .inline-comment-author { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .inline-comment-time { font-size: 10px; color: var(--text-light); } .inline-comment-body { font-size: var(--font-size-xs); color: var(--text-secondary); } /* =================================================================== 10. ANNOTATION COMMENTS =================================================================== */ .annotation { position: relative; } .annotation-marker { position: absolute; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: #fff; background-color: var(--brand-primary); border-radius: var(--radius-full); cursor: pointer; transition: transform var(--transition-fast); z-index: 10; } .annotation-marker:hover { transform: scale(1.1); } .annotation-popup { position: absolute; width: 280px; background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-popover); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--transition-fast); } .annotation-marker:focus + .annotation-popup, .annotation-popup:hover, .annotation.is-active .annotation-popup { opacity: 1; visibility: visible; transform: translateY(0); } .annotation-popup-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); background-color: var(--bg-input); border-bottom: 1px solid var(--border-light); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .annotation-popup-close { color: var(--text-muted); background: none; border: none; cursor: pointer; } .annotation-popup-close:hover { color: var(--text-primary); } .annotation-popup-body { padding: var(--space-md); max-height: 200px; overflow-y: auto; } /* =================================================================== 11. COMMENT REACTIONS =================================================================== */ .comment-reactions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); } .comment-reaction { display: flex; align-items: center; gap: var(--space-xs); padding: 2px var(--space-sm); font-size: var(--font-size-xs); color: var(--text-muted); background-color: var(--bg-input); border: 1px solid var(--border-light); border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); } .comment-reaction:hover { border-color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .comment-reaction.is-reacted { color: var(--brand-primary); background-color: var(--brand-primary-alpha); border-color: var(--brand-primary); } .comment-reaction-emoji { font-size: var(--font-size-sm); } .comment-reaction-count { font-weight: var(--font-weight-medium); } /* Add reaction button */ .comment-add-reaction { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); background-color: var(--bg-input); border: 1px dashed var(--border-medium); border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); } .comment-add-reaction:hover { color: var(--brand-primary); border-color: var(--brand-primary); border-style: solid; } /* =================================================================== 12. EMPTY STATE =================================================================== */ .comments-empty { text-align: center; padding: var(--space-2xl) var(--space-lg); } .comments-empty-icon { font-size: var(--font-size-4xl); color: var(--text-light); margin-bottom: var(--space-md); } .comments-empty-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-xs); } .comments-empty-text { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--space-lg); } /* =================================================================== 13. RESPONSIVE =================================================================== */ @media (max-width: 768px) { .comment-replies { margin-left: var(--space-md); padding-left: var(--space-md); } .comment-reply-form { margin-left: 0; } .discussion-list-item { flex-direction: column; gap: var(--space-sm); } .discussion-list-votes { flex-direction: row; width: auto; } .discussion-list-stats { flex-direction: row; gap: var(--space-md); width: auto; } .discussion-footer { flex-direction: column; gap: var(--space-sm); } .discussion-stats { width: 100%; justify-content: space-around; } } @media (max-width: 576px) { .comment-header { flex-direction: column; align-items: flex-start; gap: var(--space-xs); } .comment-actions { flex-wrap: wrap; } .comment-form { flex-direction: column; } .comment-form-avatar { display: none; } .discussion-meta { flex-direction: column; align-items: flex-start; } } /* ===== layouts/admin.css ===== */ /* =================================================================== DCS Design System - Admin Layout Version: 2.0.0 Admin dashboard layout with sidebar navigation. Requires: tokens.css, navigation.css, accordion.css =================================================================== */ /* =================================================================== 1. ADMIN LAYOUT STRUCTURE =================================================================== */ .admin-layout { display: flex; min-height: 100vh; } .admin-sidebar { position: fixed; top: 0; left: 0; width: 260px; height: 100vh; background-color: var(--bg-body); border-right: 1px solid var(--border-light); display: flex; flex-direction: column; z-index: var(--z-fixed); transition: width var(--transition-base), transform var(--transition-base); } .admin-sidebar.is-collapsed { width: 70px; } .admin-main { flex: 1; margin-left: 260px; min-height: 100vh; background-color: var(--bg-surface); transition: margin-left var(--transition-base); } .admin-sidebar.is-collapsed ~ .admin-main { margin-left: 70px; } /* =================================================================== 2. SIDEBAR HEADER =================================================================== */ .admin-sidebar-header { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); border-bottom: 1px solid var(--border-light); } .admin-sidebar-logo { width: 40px; height: 40px; border-radius: var(--radius-md); object-fit: contain; flex-shrink: 0; } .admin-sidebar-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; transition: opacity var(--transition-fast); } .admin-sidebar.is-collapsed .admin-sidebar-title { opacity: 0; width: 0; } /* =================================================================== 3. SIDEBAR NAVIGATION =================================================================== */ .admin-sidebar-nav { flex: 1; overflow-y: auto; padding: var(--space-md) 0; } .admin-nav-section { margin-bottom: var(--space-sm); } .admin-nav-section-title { padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; } .admin-sidebar.is-collapsed .admin-nav-section-title { text-align: center; padding: var(--space-sm); font-size: 10px; } /* Nav item - parent with collapse */ .admin-nav-item { position: relative; } .admin-nav-link { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-sm); color: var(--text-secondary); text-decoration: none; border-radius: 0; cursor: pointer; transition: all var(--transition-fast); } .admin-nav-link:hover { color: var(--text-primary); background-color: var(--bg-hover); } .admin-nav-link.active { color: var(--brand-primary); background-color: var(--brand-primary-alpha); border-right: 3px solid var(--brand-primary); } .admin-nav-link i { width: 20px; text-align: center; font-size: var(--font-size-base); flex-shrink: 0; } .admin-nav-link span { flex: 1; white-space: nowrap; overflow: hidden; transition: opacity var(--transition-fast); } .admin-sidebar.is-collapsed .admin-nav-link span { opacity: 0; width: 0; } .admin-nav-link .nav-chevron { margin-left: auto; font-size: var(--font-size-xs); transition: transform var(--transition-fast); } .admin-nav-link[aria-expanded="true"] .nav-chevron { transform: rotate(90deg); } .admin-sidebar.is-collapsed .admin-nav-link .nav-chevron { display: none; } /* Badge on nav link */ .admin-nav-badge { margin-left: auto; padding: 2px 8px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-white); background-color: var(--color-danger); border-radius: var(--radius-full); } .admin-sidebar.is-collapsed .admin-nav-badge { position: absolute; top: 4px; right: 8px; padding: 2px 5px; font-size: 10px; } /* Urgent badge with pulsing animation */ .admin-nav-badge.urgent { animation: urgentPulse 2s ease-in-out infinite; } @keyframes urgentPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); } 50% { transform: scale(1.05); box-shadow: 0 0 0 4px rgba(220, 53, 69, 0); } } /* Submenu */ .admin-nav-submenu { background-color: var(--bg-input); overflow: hidden; max-height: 0; transition: max-height var(--transition-base); } .admin-nav-submenu.show { max-height: 500px; } .admin-nav-submenu .admin-nav-link { padding-left: calc(var(--space-lg) + 32px); font-size: var(--font-size-sm); } .admin-nav-submenu .admin-nav-link.active { background-color: var(--brand-primary-alpha); } .admin-sidebar.is-collapsed .admin-nav-submenu { display: none; } /* =================================================================== 4. SIDEBAR FOOTER =================================================================== */ .admin-sidebar-footer { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border-light); } .admin-user-info { display: flex; align-items: center; gap: var(--space-sm); } .admin-user-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); background-color: var(--brand-primary); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); flex-shrink: 0; } .admin-user-details { flex: 1; overflow: hidden; transition: opacity var(--transition-fast); } .admin-sidebar.is-collapsed .admin-user-details { opacity: 0; width: 0; } .admin-user-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-user-role { font-size: var(--font-size-xs); color: var(--text-muted); text-transform: capitalize; } .admin-logout-btn { padding: var(--space-xs); color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .admin-logout-btn:hover { color: var(--color-danger); background-color: var(--color-danger-bg); } /* =================================================================== 5. TOP HEADER BAR =================================================================== */ .admin-header { position: sticky; top: 0; display: flex; align-items: center; gap: var(--space-md); height: 60px; padding: 0 var(--space-lg); background-color: var(--bg-surface); border-bottom: 1px solid var(--border-light); z-index: var(--z-sticky); } .admin-header-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--text-muted); background: none; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .admin-header-toggle:hover { color: var(--text-primary); background-color: var(--bg-hover); } .admin-header-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .admin-header-actions { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; } .admin-header-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--text-muted); background: none; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .admin-header-btn:hover { color: var(--text-primary); background-color: var(--bg-hover); } .admin-header-btn .notification-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background-color: var(--color-danger); border-radius: var(--radius-full); } /* Notification badge with count */ .admin-header-btn .notification-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: var(--font-weight-bold); color: var(--color-white); background-color: var(--color-danger); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; line-height: 1; } .admin-header-btn.has-notification { color: var(--color-danger); } .admin-header-btn.has-notification:hover { background-color: var(--color-danger-bg); } /* =================================================================== 6. MAIN CONTENT AREA =================================================================== */ .admin-content { padding: var(--space-xl); } .admin-page-header { margin-bottom: var(--space-xl); } .admin-page-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: 0 0 var(--space-xs); } .admin-page-description { font-size: var(--font-size-base); color: var(--text-muted); margin: 0; } /* =================================================================== 7. STAT CARDS =================================================================== */ .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-xl); } .admin-stat-card { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); transition: all var(--transition-fast); } .admin-stat-card:hover { border-color: var(--border-medium); box-shadow: var(--shadow-md); } .admin-stat-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); font-size: var(--font-size-xl); } .admin-stat-icon.stat-primary { color: var(--brand-primary); background-color: var(--brand-primary-alpha); } .admin-stat-icon.stat-success { color: var(--color-success); background-color: var(--color-success-bg); } .admin-stat-icon.stat-warning { color: var(--color-warning-text); background-color: var(--color-warning-bg); } .admin-stat-icon.stat-danger { color: var(--color-danger); background-color: var(--color-danger-bg); } .admin-stat-icon.stat-info { color: var(--color-info-text); background-color: var(--color-info-bg); } .admin-stat-content { flex: 1; } .admin-stat-value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: 1; margin-bottom: var(--space-xs); } .admin-stat-label { font-size: var(--font-size-sm); color: var(--text-muted); } /* =================================================================== 8. DASHBOARD GRID =================================================================== */ .admin-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg); } .admin-grid-col-6 { grid-column: span 6; } .admin-grid-col-12 { grid-column: span 12; } @media (max-width: 1024px) { .admin-grid-col-6 { grid-column: span 12; } } /* =================================================================== 9. RESPONSIVE =================================================================== */ @media (max-width: 992px) { .admin-sidebar { transform: translateX(-100%); } .admin-sidebar.is-mobile-open { transform: translateX(0); } .admin-main { margin-left: 0 !important; } .admin-overlay { display: none; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: calc(var(--z-fixed) - 1); } .admin-sidebar.is-mobile-open ~ .admin-overlay { display: block; } } /* =================================================================== 10. THEME TOGGLE BUTTON =================================================================== */ .admin-header-btn.theme-toggle { position: relative; } .admin-header-btn.theme-toggle #themeIconDark, .admin-header-btn.theme-toggle #themeIconLight { position: absolute; transition: opacity var(--transition-fast), transform var(--transition-fast); } /* Initially hide appropriate icon based on theme */ .admin-header-btn.theme-toggle #themeIconLight { display: none; } .admin-header-btn.theme-toggle #themeIconDark { display: none; } /* Active icon colors */ .admin-header-btn.theme-toggle:hover #themeIconDark { color: var(--brand-secondary); } .admin-header-btn.theme-toggle:hover #themeIconLight { color: var(--color-warning-text); } /* =================================================================== 11. DARK MODE ADJUSTMENTS =================================================================== */ [data-theme="dark"] .admin-sidebar { background-color: var(--bg-surface); } [data-theme="dark"] .admin-nav-submenu { background-color: var(--bg-body); } /* =================================================================== 12. USER DROPDOWN MENU =================================================================== */ .admin-user-menu { position: relative; } .admin-user-btn { font-size: var(--font-size-lg); } .admin-user-dropdown { position: absolute; top: calc(100% + var(--space-xs)); right: 0; min-width: 200px; background-color: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--transition-fast); z-index: var(--z-dropdown); } .admin-user-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); } .user-dropdown-header { padding: var(--space-md); border-bottom: 1px solid var(--border-light); } .user-dropdown-name { display: block; font-weight: var(--font-weight-semibold); color: var(--text-primary); font-size: var(--font-size-sm); } .user-dropdown-role { display: block; font-size: var(--font-size-xs); color: var(--text-muted); text-transform: capitalize; margin-top: 2px; } .user-dropdown-divider { height: 1px; background-color: var(--border-light); margin: 0; } .user-dropdown-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--text-secondary); text-decoration: none; transition: all var(--transition-fast); } .user-dropdown-item:hover { color: var(--text-primary); background-color: var(--bg-hover); } .user-dropdown-item i { width: 16px; text-align: center; color: var(--text-muted); } .user-dropdown-item:hover i { color: var(--text-primary); } .user-dropdown-logout { color: var(--color-danger); } .user-dropdown-logout:hover { background-color: var(--color-danger-bg); color: var(--color-danger); } .user-dropdown-logout i { color: var(--color-danger); }