/* ============================================ 3D Printer Calibration Suite - Base Styles ============================================ PROJECT NOTE: Dark Mode Implementation - Light mode (default) uses standard colors - Dark mode activated via data-theme="dark" attribute on - Theme preference stored in localStorage - All colors use CSS variables for easy switching ============================================ */ :root { /* Primary Colors */ --primary: #0078d4; --primary-hover: #005a9e; --primary-light: #e7f3ff; /* Calculator Accent Colors */ --esteps-accent: #667eea; --nozzle-accent: #ff6b6b; --gear-accent: #4ecdc4; --flow-accent: #45b7d1; --temp-accent: #f38181; --retract-accent: #aa96da; /* Status Colors */ --success: #4caf50; --success-light: #e8f5e9; --warning: #ff9800; --warning-light: #fff4e5; --error: #f44336; --error-light: #ffebee; --info: #2196f3; --info-light: #e3f2fd; /* Light Mode Colors (Default) */ --text-primary: #333; --text-secondary: #666; --text-light: #999; --background: #f5f5f5; --card-bg: white; --border: #e0e0e0; /* Spacing */ --spacing-xs: 5px; --spacing-sm: 10px; --spacing-md: 20px; --spacing-lg: 40px; --spacing-xl: 60px; /* Global Font Scale (v2.5.3 Accessibility) */ --global-font-scale: 1; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Shadows */ --shadow-sm: 0 2px 5px rgba(0,0,0,0.1); --shadow-md: 0 4px 10px rgba(0,0,0,0.15); --shadow-lg: 0 8px 20px rgba(0,0,0,0.2); /* Transitions */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; /* Utility Colors (Calculator & Code Display) */ --white: #ffffff; --black: #000000; /* Code/Technical Display */ --code-bg: #263238; --code-text: #4fc3f7; --code-bg-hover: #2d3e47; --code-accent: #d63384; /* Transparency Helpers */ --overlay-light: rgba(255, 255, 255, 0.1); --overlay-medium: rgba(255, 255, 255, 0.15); --overlay-strong: rgba(255, 255, 255, 0.9); /* Input Focus States */ --input-focus-bg: rgba(255, 255, 255, 1); --input-focus-border: rgba(255, 255, 255, 0.8); --input-focus-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* Dark Mode Input Overrides */ --dark-input-bg: rgba(255, 255, 255, 0.95); --dark-input-text: var(--esteps-accent); --dark-calc-input-bg: rgba(0, 0, 0, 0.8); --dark-calc-input-text: rgba(255, 255, 255, 0.95); --dark-calc-input-border: rgba(255, 255, 255, 0.2); --dark-calc-input-focus-bg: rgba(0, 0, 0, 0.9); --dark-calc-input-focus-text: white; --dark-calc-input-focus-border: rgba(255, 255, 255, 0.5); --dark-calc-input-placeholder: rgba(255, 255, 255, 0.5); } /* ============================================ Dark Mode Theme ============================================ */ [data-theme="dark"] { --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-light: #888; --background: #1a1a1a; --card-bg: #2d2d2d; --border: #404040; /* Adjust shadows for dark mode */ --shadow-sm: 0 2px 5px rgba(0,0,0,0.3); --shadow-md: 0 4px 10px rgba(0,0,0,0.4); --shadow-lg: 0 8px 20px rgba(0,0,0,0.5); /* Slightly adjust accent colors for better dark mode visibility */ --primary: #4a9eff; --primary-hover: #6db3ff; --primary-light: #1a3a5a; /* Adjust status colors for dark mode */ --success-light: #1a3a1a; --warning-light: #4a3a1a; --error-light: #4a1a1a; --info-light: #1a2a4a; } /* ============================================ High Contrast Theme ============================================ */ [data-theme="high-contrast"] { --text-primary: #000000; --text-secondary: #000000; --text-light: #333333; --background: #ffffff; --card-bg: #ffffff; --border: #000000; /* High contrast shadows - more pronounced */ --shadow-sm: 0 2px 5px rgba(0,0,0,0.5); --shadow-md: 0 4px 10px rgba(0,0,0,0.6); --shadow-lg: 0 8px 20px rgba(0,0,0,0.7); /* High contrast primary colors */ --primary: #0000ff; --primary-hover: #0000cc; --primary-light: #e6e6ff; /* High contrast status colors */ --success: #008000; --success-light: #e6ffe6; --warning: #ff8800; --warning-light: #fff4e6; --error: #cc0000; --error-light: #ffe6e6; --info: #0066cc; --info-light: #e6f2ff; /* High contrast accent colors */ --esteps-accent: #6600cc; --nozzle-accent: #cc0000; --gear-accent: #009999; --flow-accent: #0066cc; --temp-accent: #cc3300; --retract-accent: #9933cc; } /* High contrast specific adjustments */ [data-theme="high-contrast"] a { text-decoration: underline; font-weight: 600; } [data-theme="high-contrast"] .card { border: 2px solid var(--border); } [data-theme="high-contrast"] button, [data-theme="high-contrast"] .btn { border: 2px solid var(--border); font-weight: 700; } [data-theme="high-contrast"] input, [data-theme="high-contrast"] select, [data-theme="high-contrast"] textarea { border: 2px solid var(--border); } [data-theme="high-contrast"] input:focus, [data-theme="high-contrast"] select:focus, [data-theme="high-contrast"] textarea:focus { outline: 3px solid var(--primary); outline-offset: 2px; } /* ============================================ High Contrast Dark Theme ============================================ */ [data-theme="high-contrast-dark"] { --text-primary: #ffffff; --text-secondary: #ffffff; --text-light: #cccccc; --background: #000000; --card-bg: #000000; --border: #ffffff; /* High contrast dark shadows */ --shadow-sm: 0 2px 5px rgba(255,255,255,0.3); --shadow-md: 0 4px 10px rgba(255,255,255,0.4); --shadow-lg: 0 8px 20px rgba(255,255,255,0.5); /* High contrast dark primary colors */ --primary: #00d4ff; --primary-hover: #00ffff; --primary-light: #003344; /* High contrast dark status colors */ --success: #00ff00; --success-light: #003300; --warning: #ffaa00; --warning-light: #332200; --error: #ff0000; --error-light: #330000; --info: #00aaff; --info-light: #002233; /* High contrast dark accent colors */ --esteps-accent: #aa88ff; --nozzle-accent: #ff4444; --gear-accent: #00ffcc; --flow-accent: #00aaff; --temp-accent: #ff6633; --retract-accent: #cc66ff; } /* ============================================ Brand Themes - Printer Manufacturer Colors ============================================ */ /* Prusa Orange Theme */ [data-theme="prusa"] { --text-primary: #2d2d2d; --text-secondary: #666666; --text-light: #999999; --background: #fafafa; --card-bg: #ffffff; --border: #e0e0e0; /* Prusa brand colors */ --primary: #ff6b00; --primary-hover: #e65c00; --primary-light: #fff4ed; /* Status colors adjusted for Prusa theme */ --success: #4caf50; --success-light: #e8f5e9; --warning: #ffa726; --warning-light: #fff3e0; --error: #f44336; --error-light: #ffebee; --info: #ff6b00; --info-light: #fff4ed; /* Accent colors with orange tint */ --esteps-accent: #ff8533; --nozzle-accent: #ff6b00; --gear-accent: #ff9147; --flow-accent: #ffa366; --temp-accent: #ff7a1f; --retract-accent: #ff9966; --shadow-sm: 0 2px 5px rgba(255,107,0,0.1); --shadow-md: 0 4px 10px rgba(255,107,0,0.15); --shadow-lg: 0 8px 20px rgba(255,107,0,0.2); } /* Bambu Lab Green Theme */ [data-theme="bambu"] { --text-primary: #1a1a1a; --text-secondary: #4a4a4a; --text-light: #888888; --background: #f8faf9; --card-bg: #ffffff; --border: #e0e0e0; /* Bambu Lab brand colors */ --primary: #00ae42; --primary-hover: #009938; --primary-light: #f0f9f7; /* Status colors adjusted for Bambu theme */ --success: #00ae42; --success-light: #a5d6a7; --warning: #ffa000; --warning-light: #fff8e1; --error: #d32f2f; --error-light: #ffebee; --info: #00ae42; --info-light: #a5d6a7; /* Accent colors with green tint */ --esteps-accent: #00c853; --nozzle-accent: #00ae42; --gear-accent: #00d45b; --flow-accent: #00bf4f; --temp-accent: #33b868; --retract-accent: #4caf50; --shadow-sm: 0 2px 5px rgba(0,174,66,0.1); --shadow-md: 0 4px 10px rgba(0,174,66,0.15); --shadow-lg: 0 8px 20px rgba(0,174,66,0.2); } /* Creality Blue Theme */ [data-theme="creality"] { --text-primary: #212121; --text-secondary: #616161; --text-light: #9e9e9e; --background: #f5f8fa; --card-bg: #ffffff; --border: #e0e0e0; /* Creality brand colors */ --primary: #1e88e5; --primary-hover: #1976d2; --primary-light: #e3f2fd; /* Status colors adjusted for Creality theme */ --success: #43a047; --success-light: #e8f5e9; --warning: #fb8c00; --warning-light: #fff3e0; --error: #e53935; --error-light: #ffebee; --info: #1e88e5; --info-light: #e3f2fd; /* Accent colors with blue tint */ --esteps-accent: #2196f3; --nozzle-accent: #1e88e5; --gear-accent: #42a5f5; --flow-accent: #64b5f6; --temp-accent: #1976d2; --retract-accent: #5c6bc0; --shadow-sm: 0 2px 5px rgba(30,136,229,0.1); --shadow-md: 0 4px 10px rgba(30,136,229,0.15); --shadow-lg: 0 8px 20px rgba(30,136,229,0.2); } /* Voron Red Theme */ [data-theme="voron"] { --text-primary: #1a1a1a; --text-secondary: #4a4a4a; --text-light: #888888; --background: #fafafa; --card-bg: #ffffff; --border: #e0e0e0; /* Voron brand colors */ --primary: #d32f2f; --primary-hover: #c62828; --primary-light: #ffebee; /* Status colors adjusted for Voron theme */ --success: #388e3c; --success-light: #e8f5e9; --warning: #f57c00; --warning-light: #fff3e0; --error: #d32f2f; --error-light: #ffebee; --info: #d32f2f; --info-light: #ffebee; /* Accent colors with red tint */ --esteps-accent: #e53935; --nozzle-accent: #d32f2f; --gear-accent: #ef5350; --flow-accent: #f44336; --temp-accent: #c62828; --retract-accent: #e91e63; --shadow-sm: 0 2px 5px rgba(211,47,47,0.1); --shadow-md: 0 4px 10px rgba(211,47,47,0.15); --shadow-lg: 0 8px 20px rgba(211,47,47,0.2); } /* ============================================ Brand Dark Themes - For Time-Based Switching ============================================ */ /* Prusa Orange Dark Theme */ [data-theme="prusa-dark"] { --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-light: #888888; --background: #1a1a1a; --card-bg: #2d2d2d; --border: #404040; /* Prusa brand colors - enhanced for dark mode */ --primary: #ff8533; --primary-hover: #ff9147; --primary-light: #3a2515; /* Status colors for dark mode */ --success: #66bb6a; --success-light: #1b3a1b; --warning: #ffb74d; --warning-light: #3a2915; --error: #ef5350; --error-light: #3a1515; --info: #ff8533; --info-light: #3a2515; /* Accent colors with orange tint - brightened */ --esteps-accent: #ff9147; --nozzle-accent: #ff8533; --gear-accent: #ffa366; --flow-accent: #ffb380; --temp-accent: #ff9147; --retract-accent: #ffaa80; --shadow-sm: 0 2px 5px rgba(0,0,0,0.3); --shadow-md: 0 4px 10px rgba(0,0,0,0.4); --shadow-lg: 0 8px 20px rgba(0,0,0,0.5); } /* Bambu Lab Green Dark Theme */ [data-theme="bambu-dark"] { --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-light: #888888; --background: #1a1a1a; --card-bg: #2d2d2d; --border: #404040; /* Bambu Lab brand colors - enhanced for dark mode */ --primary: #00c853; --primary-hover: #00d45b; --primary-light: #1b5e20; /* Status colors for dark mode */ --success: #00c853; --success-light: #2e7d32; --warning: #ffb74d; --warning-light: #3a2915; --error: #ff5252; --error-light: #3a1515; --info: #00c853; --info-light: #2e7d32; /* Accent colors with green tint - brightened */ --esteps-accent: #00d45b; --nozzle-accent: #00c853; --gear-accent: #00e066; --flow-accent: #33d976; --temp-accent: #4caf50; --retract-accent: #66bb6a; --shadow-sm: 0 2px 5px rgba(0,0,0,0.3); --shadow-md: 0 4px 10px rgba(0,0,0,0.4); --shadow-lg: 0 8px 20px rgba(0,0,0,0.5); } /* Creality Blue Dark Theme */ [data-theme="creality-dark"] { --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-light: #888888; --background: #1a1a1a; --card-bg: #2d2d2d; --border: #404040; /* Creality brand colors - enhanced for dark mode */ --primary: #42a5f5; --primary-hover: #64b5f6; --primary-light: #1a2a3a; /* Status colors for dark mode */ --success: #66bb6a; --success-light: #1b3a1b; --warning: #ffb74d; --warning-light: #3a2915; --error: #ef5350; --error-light: #3a1515; --info: #42a5f5; --info-light: #1a2a3a; /* Accent colors with blue tint - brightened */ --esteps-accent: #42a5f5; --nozzle-accent: #42a5f5; --gear-accent: #64b5f6; --flow-accent: #82c8f7; --temp-accent: #2196f3; --retract-accent: #7986cb; --shadow-sm: 0 2px 5px rgba(0,0,0,0.3); --shadow-md: 0 4px 10px rgba(0,0,0,0.4); --shadow-lg: 0 8px 20px rgba(0,0,0,0.5); } /* Voron Red Dark Theme */ [data-theme="voron-dark"] { --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-light: #888888; --background: #1a1a1a; --card-bg: #2d2d2d; --border: #404040; /* Voron brand colors - enhanced for dark mode */ --primary: #ef5350; --primary-hover: #f44336; --primary-light: #3a1515; /* Status colors for dark mode */ --success: #66bb6a; --success-light: #1b3a1b; --warning: #ffb74d; --warning-light: #3a2915; --error: #ef5350; --error-light: #3a1515; --info: #ef5350; --info-light: #3a1515; /* Accent colors with red tint - brightened */ --esteps-accent: #ef5350; --nozzle-accent: #ef5350; --gear-accent: #f44336; --flow-accent: #ff5252; --temp-accent: #e53935; --retract-accent: #ec407a; --shadow-sm: 0 2px 5px rgba(0,0,0,0.3); --shadow-md: 0 4px 10px rgba(0,0,0,0.4); --shadow-lg: 0 8px 20px rgba(0,0,0,0.5); } /* Ultimaker Steel Theme */ [data-theme="ultimaker"] { --text-primary: #212121; --text-secondary: #5d5d5d; --text-light: #9e9e9e; --background: #f5f7f8; --card-bg: #ffffff; --border: #e0e0e0; /* Ultimaker brand colors */ --primary: #546e7a; --primary-hover: #455a64; --primary-light: #eceff1; /* Status colors adjusted for Ultimaker theme */ --success: #43a047; --success-light: #e8f5e9; --warning: #fb8c00; --warning-light: #fff3e0; --error: #e53935; --error-light: #ffebee; --info: #546e7a; --info-light: #eceff1; /* Accent colors with steel tint */ --esteps-accent: #607d8b; --nozzle-accent: #546e7a; --gear-accent: #78909c; --flow-accent: #90a4ae; --temp-accent: #455a64; --retract-accent: #7986cb; --shadow-sm: 0 2px 5px rgba(84,110,122,0.1); --shadow-md: 0 4px 10px rgba(84,110,122,0.15); --shadow-lg: 0 8px 20px rgba(84,110,122,0.2); } /* Ultimaker Steel Dark Theme */ [data-theme="ultimaker-dark"] { --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-light: #888888; --background: #1a1a1a; --card-bg: #2d2d2d; --border: #404040; /* Ultimaker brand colors - enhanced for dark mode */ --primary: #90a4ae; --primary-hover: #b0bec5; --primary-light: #263238; /* Status colors for dark mode */ --success: #66bb6a; --success-light: #1b3a1b; --warning: #ffb74d; --warning-light: #3a2915; --error: #ef5350; --error-light: #3a1515; --info: #90a4ae; --info-light: #263238; /* Accent colors with steel tint - brightened */ --esteps-accent: #90a4ae; --nozzle-accent: #90a4ae; --gear-accent: #b0bec5; --flow-accent: #cfd8dc; --temp-accent: #78909c; --retract-accent: #9fa8da; --shadow-sm: 0 2px 5px rgba(0,0,0,0.3); --shadow-md: 0 4px 10px rgba(0,0,0,0.4); --shadow-lg: 0 8px 20px rgba(0,0,0,0.5); } /* Formlabs Teal Theme */ [data-theme="formlabs"] { --text-primary: #1a1a1a; --text-secondary: #4a4a4a; --text-light: #888888; --background: #f8fafb; --card-bg: #ffffff; --border: #e0e0e0; /* Formlabs brand colors */ --primary: #00b8a9; --primary-hover: #009688; --primary-light: #e0f7f5; /* Status colors adjusted for Formlabs theme */ --success: #00b8a9; --success-light: #e0f7f5; --warning: #ffa726; --warning-light: #fff3e0; --error: #e53935; --error-light: #ffebee; --info: #00b8a9; --info-light: #e0f7f5; /* Accent colors with teal tint */ --esteps-accent: #00bcd4; --nozzle-accent: #00b8a9; --gear-accent: #26c6da; --flow-accent: #4dd0e1; --temp-accent: #00acc1; --retract-accent: #4db6ac; --shadow-sm: 0 2px 5px rgba(0,184,169,0.1); --shadow-md: 0 4px 10px rgba(0,184,169,0.15); --shadow-lg: 0 8px 20px rgba(0,184,169,0.2); } /* Formlabs Teal Dark Theme */ [data-theme="formlabs-dark"] { --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-light: #888888; --background: #1a1a1a; --card-bg: #2d2d2d; --border: #404040; /* Formlabs brand colors - enhanced for dark mode */ --primary: #26c6da; --primary-hover: #4dd0e1; --primary-light: #1a3a3a; /* Status colors for dark mode */ --success: #26c6da; --success-light: #1a3a3a; --warning: #ffb74d; --warning-light: #3a2915; --error: #ef5350; --error-light: #3a1515; --info: #26c6da; --info-light: #1a3a3a; /* Accent colors with teal tint - brightened */ --esteps-accent: #26c6da; --nozzle-accent: #26c6da; --gear-accent: #4dd0e1; --flow-accent: #80deea; --temp-accent: #00bcd4; --retract-accent: #4db6ac; --shadow-sm: 0 2px 5px rgba(0,0,0,0.3); --shadow-md: 0 4px 10px rgba(0,0,0,0.4); --shadow-lg: 0 8px 20px rgba(0,0,0,0.5); } /* Anycubic Purple Theme */ [data-theme="anycubic"] { --text-primary: #2d2d2d; --text-secondary: #666666; --text-light: #999999; --background: #fafafa; --card-bg: #ffffff; --border: #e0e0e0; /* Anycubic brand colors */ --primary: #9c27b0; --primary-hover: #7b1fa2; --primary-light: #f3e5f5; /* Status colors adjusted for Anycubic theme */ --success: #4caf50; --success-light: #e8f5e9; --warning: #ff9800; --warning-light: #fff4e5; --error: #f44336; --error-light: #ffebee; --info: #9c27b0; --info-light: #f3e5f5; /* Accent colors with purple tint */ --esteps-accent: #ab47bc; --nozzle-accent: #9c27b0; --gear-accent: #ba68c8; --flow-accent: #ce93d8; --temp-accent: #8e24aa; --retract-accent: #e91e63; --shadow-sm: 0 2px 5px rgba(156,39,176,0.1); --shadow-md: 0 4px 10px rgba(156,39,176,0.15); --shadow-lg: 0 8px 20px rgba(156,39,176,0.2); } /* Anycubic Purple Dark Theme */ [data-theme="anycubic-dark"] { --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-light: #888888; --background: #1a1a1a; --card-bg: #2d2d2d; --border: #404040; /* Anycubic brand colors - enhanced for dark mode */ --primary: #ba68c8; --primary-hover: #ce93d8; --primary-light: #3a1a3a; /* Status colors for dark mode */ --success: #66bb6a; --success-light: #1b3a1b; --warning: #ffb74d; --warning-light: #3a2915; --error: #ef5350; --error-light: #3a1515; --info: #ba68c8; --info-light: #3a1a3a; /* Accent colors with purple tint - brightened */ --esteps-accent: #ba68c8; --nozzle-accent: #ba68c8; --gear-accent: #ce93d8; --flow-accent: #e1bee7; --temp-accent: #ab47bc; --retract-accent: #ec407a; --shadow-sm: 0 2px 5px rgba(0,0,0,0.3); --shadow-md: 0 4px 10px rgba(0,0,0,0.4); --shadow-lg: 0 8px 20px rgba(0,0,0,0.5); } /* ============================================ HIGH CONTRAST BRAND THEMES ============================================ */ /* Prusa Orange High Contrast */ [data-theme="prusa-high-contrast"] { --text-primary: #000000; --text-secondary: #000000; --text-light: #333333; --background: #ffffff; --card-bg: #ffffff; --border: #000000; --primary: #ff6b00; --primary-hover: #cc5500; --primary-light: #ffe6cc; --success: #008000; --success-light: #e6ffe6; --warning: #ff8800; --warning-light: #fff4e6; --error: #cc0000; --error-light: #ffe6e6; --info: #ff6b00; --info-light: #ffe6cc; --shadow-sm: 0 2px 5px rgba(0,0,0,0.5); --shadow-md: 0 4px 10px rgba(0,0,0,0.6); --shadow-lg: 0 8px 20px rgba(0,0,0,0.7); } [data-theme="prusa-high-contrast"] a { text-decoration: underline; font-weight: 600; } [data-theme="prusa-high-contrast"] button { border: 2px solid var(--border); font-weight: 700; } /* Prusa Orange High Contrast Dark */ [data-theme="prusa-high-contrast-dark"] { --text-primary: #ffffff; --text-secondary: #ffffff; --text-light: #cccccc; --background: #000000; --card-bg: #000000; --border: #ffffff; --primary: #ff9147; --primary-hover: #ffaa77; --primary-light: #3a2515; --success: #00ff00; --success-light: #003300; --warning: #ffaa00; --warning-light: #332200; --error: #ff0000; --error-light: #330000; --info: #ff9147; --info-light: #3a2515; --shadow-sm: 0 2px 5px rgba(255,255,255,0.3); --shadow-md: 0 4px 10px rgba(255,255,255,0.4); --shadow-lg: 0 8px 20px rgba(255,255,255,0.5); } [data-theme="prusa-high-contrast-dark"] a { text-decoration: underline; font-weight: 600; } [data-theme="prusa-high-contrast-dark"] button { border: 2px solid var(--border); font-weight: 700; } /* Bambu Lab Green High Contrast */ [data-theme="bambu-high-contrast"] { --text-primary: #000000; --text-secondary: #000000; --text-light: #333333; --background: #ffffff; --card-bg: #ffffff; --border: #000000; --primary: #00ae42; --primary-hover: #008833; --primary-light: #ccffcc; --success: #008000; --success-light: #e6ffe6; --warning: #ff8800; --warning-light: #fff4e6; --error: #cc0000; --error-light: #ffe6e6; --info: #00ae42; --info-light: #ccffcc; --shadow-sm: 0 2px 5px rgba(0,0,0,0.5); --shadow-md: 0 4px 10px rgba(0,0,0,0.6); --shadow-lg: 0 8px 20px rgba(0,0,0,0.7); } [data-theme="bambu-high-contrast"] a { text-decoration: underline; font-weight: 600; } [data-theme="bambu-high-contrast"] button { border: 2px solid var(--border); font-weight: 700; } /* Bambu Lab Green High Contrast Dark */ [data-theme="bambu-high-contrast-dark"] { --text-primary: #ffffff; --text-secondary: #ffffff; --text-light: #cccccc; --background: #000000; --card-bg: #000000; --border: #ffffff; --primary: #00ff00; --primary-hover: #33ff33; --primary-light: #003300; --success: #00ff00; --success-light: #003300; --warning: #ffaa00; --warning-light: #332200; --error: #ff0000; --error-light: #330000; --info: #00ff00; --info-light: #003300; --shadow-sm: 0 2px 5px rgba(255,255,255,0.3); --shadow-md: 0 4px 10px rgba(255,255,255,0.4); --shadow-lg: 0 8px 20px rgba(255,255,255,0.5); } [data-theme="bambu-high-contrast-dark"] a { text-decoration: underline; font-weight: 600; } [data-theme="bambu-high-contrast-dark"] button { border: 2px solid var(--border); font-weight: 700; } /* Creality Blue High Contrast */ [data-theme="creality-high-contrast"] { --text-primary: #000000; --text-secondary: #000000; --text-light: #333333; --background: #ffffff; --card-bg: #ffffff; --border: #000000; --primary: #0000ff; --primary-hover: #0000cc; --primary-light: #ccccff; --success: #008000; --success-light: #e6ffe6; --warning: #ff8800; --warning-light: #fff4e6; --error: #cc0000; --error-light: #ffe6e6; --info: #0000ff; --info-light: #ccccff; --shadow-sm: 0 2px 5px rgba(0,0,0,0.5); --shadow-md: 0 4px 10px rgba(0,0,0,0.6); --shadow-lg: 0 8px 20px rgba(0,0,0,0.7); } [data-theme="creality-high-contrast"] a { text-decoration: underline; font-weight: 600; } [data-theme="creality-high-contrast"] button { border: 2px solid var(--border); font-weight: 700; } /* Creality Blue High Contrast Dark */ [data-theme="creality-high-contrast-dark"] { --text-primary: #ffffff; --text-secondary: #ffffff; --text-light: #cccccc; --background: #000000; --card-bg: #000000; --border: #ffffff; --primary: #00aaff; --primary-hover: #00ddff; --primary-light: #002244; --success: #00ff00; --success-light: #003300; --warning: #ffaa00; --warning-light: #332200; --error: #ff0000; --error-light: #330000; --info: #00aaff; --info-light: #002244; --shadow-sm: 0 2px 5px rgba(255,255,255,0.3); --shadow-md: 0 4px 10px rgba(255,255,255,0.4); --shadow-lg: 0 8px 20px rgba(255,255,255,0.5); } [data-theme="creality-high-contrast-dark"] a { text-decoration: underline; font-weight: 600; } [data-theme="creality-high-contrast-dark"] button { border: 2px solid var(--border); font-weight: 700; } /* Voron Red High Contrast */ [data-theme="voron-high-contrast"] { --text-primary: #000000; --text-secondary: #000000; --text-light: #333333; --background: #ffffff; --card-bg: #ffffff; --border: #000000; --primary: #cc0000; --primary-hover: #990000; --primary-light: #ffcccc; --success: #008000; --success-light: #e6ffe6; --warning: #ff8800; --warning-light: #fff4e6; --error: #cc0000; --error-light: #ffe6e6; --info: #cc0000; --info-light: #ffcccc; --shadow-sm: 0 2px 5px rgba(0,0,0,0.5); --shadow-md: 0 4px 10px rgba(0,0,0,0.6); --shadow-lg: 0 8px 20px rgba(0,0,0,0.7); } [data-theme="voron-high-contrast"] a { text-decoration: underline; font-weight: 600; } [data-theme="voron-high-contrast"] button { border: 2px solid var(--border); font-weight: 700; } /* Voron Red High Contrast Dark */ [data-theme="voron-high-contrast-dark"] { --text-primary: #ffffff; --text-secondary: #ffffff; --text-light: #cccccc; --background: #000000; --card-bg: #000000; --border: #ffffff; --primary: #ff4444; --primary-hover: #ff6666; --primary-light: #330000; --success: #00ff00; --success-light: #003300; --warning: #ffaa00; --warning-light: #332200; --error: #ff0000; --error-light: #330000; --info: #ff4444; --info-light: #330000; --shadow-sm: 0 2px 5px rgba(255,255,255,0.3); --shadow-md: 0 4px 10px rgba(255,255,255,0.4); --shadow-lg: 0 8px 20px rgba(255,255,255,0.5); } [data-theme="voron-high-contrast-dark"] a { text-decoration: underline; font-weight: 600; } [data-theme="voron-high-contrast-dark"] button { border: 2px solid var(--border); font-weight: 700; } /* Ultimaker Steel High Contrast */ [data-theme="ultimaker-high-contrast"] { --text-primary: #000000; --text-secondary: #000000; --text-light: #333333; --background: #ffffff; --card-bg: #ffffff; --border: #000000; --primary: #333333; --primary-hover: #000000; --primary-light: #cccccc; --success: #008000; --success-light: #e6ffe6; --warning: #ff8800; --warning-light: #fff4e6; --error: #cc0000; --error-light: #ffe6e6; --info: #333333; --info-light: #cccccc; --shadow-sm: 0 2px 5px rgba(0,0,0,0.5); --shadow-md: 0 4px 10px rgba(0,0,0,0.6); --shadow-lg: 0 8px 20px rgba(0,0,0,0.7); } [data-theme="ultimaker-high-contrast"] a { text-decoration: underline; font-weight: 600; } [data-theme="ultimaker-high-contrast"] button { border: 2px solid var(--border); font-weight: 700; } /* Ultimaker Steel High Contrast Dark */ [data-theme="ultimaker-high-contrast-dark"] { --text-primary: #ffffff; --text-secondary: #ffffff; --text-light: #cccccc; --background: #000000; --card-bg: #000000; --border: #ffffff; --primary: #cccccc; --primary-hover: #ffffff; --primary-light: #333333; --success: #00ff00; --success-light: #003300; --warning: #ffaa00; --warning-light: #332200; --error: #ff0000; --error-light: #330000; --info: #cccccc; --info-light: #333333; --shadow-sm: 0 2px 5px rgba(255,255,255,0.3); --shadow-md: 0 4px 10px rgba(255,255,255,0.4); --shadow-lg: 0 8px 20px rgba(255,255,255,0.5); } [data-theme="ultimaker-high-contrast-dark"] a { text-decoration: underline; font-weight: 600; } [data-theme="ultimaker-high-contrast-dark"] button { border: 2px solid var(--border); font-weight: 700; } /* Formlabs Teal High Contrast */ [data-theme="formlabs-high-contrast"] { --text-primary: #000000; --text-secondary: #000000; --text-light: #333333; --background: #ffffff; --card-bg: #ffffff; --border: #000000; --primary: #008888; --primary-hover: #006666; --primary-light: #ccffff; --success: #008000; --success-light: #e6ffe6; --warning: #ff8800; --warning-light: #fff4e6; --error: #cc0000; --error-light: #ffe6e6; --info: #008888; --info-light: #ccffff; --shadow-sm: 0 2px 5px rgba(0,0,0,0.5); --shadow-md: 0 4px 10px rgba(0,0,0,0.6); --shadow-lg: 0 8px 20px rgba(0,0,0,0.7); } [data-theme="formlabs-high-contrast"] a { text-decoration: underline; font-weight: 600; } [data-theme="formlabs-high-contrast"] button { border: 2px solid var(--border); font-weight: 700; } /* Formlabs Teal High Contrast Dark */ [data-theme="formlabs-high-contrast-dark"] { --text-primary: #ffffff; --text-secondary: #ffffff; --text-light: #cccccc; --background: #000000; --card-bg: #000000; --border: #ffffff; --primary: #00ffff; --primary-hover: #66ffff; --primary-light: #003333; --success: #00ff00; --success-light: #003300; --warning: #ffaa00; --warning-light: #332200; --error: #ff0000; --error-light: #330000; --info: #00ffff; --info-light: #003333; --shadow-sm: 0 2px 5px rgba(255,255,255,0.3); --shadow-md: 0 4px 10px rgba(255,255,255,0.4); --shadow-lg: 0 8px 20px rgba(255,255,255,0.5); } [data-theme="formlabs-high-contrast-dark"] a { text-decoration: underline; font-weight: 600; } [data-theme="formlabs-high-contrast-dark"] button { border: 2px solid var(--border); font-weight: 700; } /* Anycubic Purple High Contrast */ [data-theme="anycubic-high-contrast"] { --text-primary: #000000; --text-secondary: #000000; --text-light: #333333; --background: #ffffff; --card-bg: #ffffff; --border: #000000; --primary: #7700cc; --primary-hover: #550099; --primary-light: #eeccff; --success: #008000; --success-light: #e6ffe6; --warning: #ff8800; --warning-light: #fff4e6; --error: #cc0000; --error-light: #ffe6e6; --info: #7700cc; --info-light: #eeccff; --shadow-sm: 0 2px 5px rgba(0,0,0,0.5); --shadow-md: 0 4px 10px rgba(0,0,0,0.6); --shadow-lg: 0 8px 20px rgba(0,0,0,0.7); } [data-theme="anycubic-high-contrast"] a { text-decoration: underline; font-weight: 600; } [data-theme="anycubic-high-contrast"] button { border: 2px solid var(--border); font-weight: 700; } /* Anycubic Purple High Contrast Dark */ [data-theme="anycubic-high-contrast-dark"] { --text-primary: #ffffff; --text-secondary: #ffffff; --text-light: #cccccc; --background: #000000; --card-bg: #000000; --border: #ffffff; --primary: #cc66ff; --primary-hover: #dd88ff; --primary-light: #330055; --success: #00ff00; --success-light: #003300; --warning: #ffaa00; --warning-light: #332200; --error: #ff0000; --error-light: #330000; --info: #cc66ff; --info-light: #330055; --shadow-sm: 0 2px 5px rgba(255,255,255,0.3); --shadow-md: 0 4px 10px rgba(255,255,255,0.4); --shadow-lg: 0 8px 20px rgba(255,255,255,0.5); } [data-theme="anycubic-high-contrast-dark"] a { text-decoration: underline; font-weight: 600; } [data-theme="anycubic-high-contrast-dark"] button { border: 2px solid var(--border); font-weight: 700; } /* High contrast dark specific adjustments */ [data-theme="high-contrast-dark"] a { text-decoration: underline; font-weight: 600; } [data-theme="high-contrast-dark"] .card { border: 2px solid var(--border); } [data-theme="high-contrast-dark"] button, [data-theme="high-contrast-dark"] .btn { border: 2px solid var(--border); font-weight: 700; } [data-theme="high-contrast-dark"] input, [data-theme="high-contrast-dark"] select, [data-theme="high-contrast-dark"] textarea { border: 2px solid var(--border); } [data-theme="high-contrast-dark"] input:focus, [data-theme="high-contrast-dark"] select:focus, [data-theme="high-contrast-dark"] textarea:focus { outline: 3px solid var(--primary); outline-offset: 2px; } /* Reset & Base */ * { margin: 0; padding: 0; box-sizing: border-box; /* Smooth animated theme transitions */ transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-primary); background-color: var(--background); } /* Typography */ h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; margin-bottom: var(--spacing-md); color: var(--text-primary); } h1 { font-size: 2.5em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; } h4 { font-size: 1.25em; } p { margin-bottom: var(--spacing-md); } a { color: var(--primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--primary-hover); } /* Container */ .container { max-width: 1200px; margin: 0 auto; padding: var(--spacing-lg); } /* Cards */ .card { background: var(--card-bg); border-radius: var(--radius-md); padding: var(--spacing-lg); box-shadow: var(--shadow-sm); transition: all var(--transition-normal); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* Buttons */ .btn { display: inline-block; padding: 12px 30px; font-size: 1em; font-weight: 600; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); text-align: center; } .btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-success { background: var(--success); color: white; } .btn-warning { background: var(--warning); color: white; } .btn-error { background: var(--error); color: white; } /* Utility Classes */ .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .mt-sm { margin-top: var(--spacing-sm); } .mt-md { margin-top: var(--spacing-md); } .mt-lg { margin-top: var(--spacing-lg); } .mb-sm { margin-bottom: var(--spacing-sm); } .mb-md { margin-bottom: var(--spacing-md); } .mb-lg { margin-bottom: var(--spacing-lg); } .p-sm { padding: var(--spacing-sm); } .p-md { padding: var(--spacing-md); } .p-lg { padding: var(--spacing-lg); } /* Responsive */ @media (max-width: 768px) { .container { padding: var(--spacing-md); } h1 { font-size: 2em; } h2 { font-size: 1.75em; } h3 { font-size: 1.35em; } }