diff --git a/css/styles.css b/css/styles.css index 9aeeb7e..b4c26ea 100644 --- a/css/styles.css +++ b/css/styles.css @@ -2,11 +2,7 @@ LiXX Cell Pack Matcher - Styles ========================================================================== */ -/* -------------------------------------------------------------------------- - CSS Custom Properties (Variables) - -------------------------------------------------------------------------- */ :root { - /* Colors */ --bg-primary: #0f1419; --bg-secondary: #1a1f2e; --bg-tertiary: #242b3d; @@ -20,38 +16,27 @@ --warning: #f59e0b; --danger: #ef4444; --border-color: #2f3336; - - /* Cell visualization colors */ --cell-low: #ef4444; --cell-mid: #22c55e; --cell-high: #3b82f6; - - /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; - - /* Typography */ --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace; - - /* Borders & Shadows */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); - - /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; } -/* Light mode support */ @media (prefers-color-scheme: light) { :root { --bg-primary: #ffffff; @@ -67,9 +52,6 @@ } } -/* -------------------------------------------------------------------------- - Base Styles - -------------------------------------------------------------------------- */ *, *::before, *::after { @@ -90,27 +72,19 @@ body { color: var(--text-primary); background-color: var(--bg-primary); -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } -/* Focus styles for keyboard navigation */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } -/* -------------------------------------------------------------------------- - Layout - -------------------------------------------------------------------------- */ .container { max-width: 1000px; margin: 0 auto; padding: var(--space-lg); } -/* -------------------------------------------------------------------------- - Header - -------------------------------------------------------------------------- */ header { text-align: center; margin-bottom: var(--space-2xl); @@ -137,9 +111,6 @@ header { font-size: 1.1rem; } -/* -------------------------------------------------------------------------- - Cards - -------------------------------------------------------------------------- */ .card { background: var(--bg-secondary); border: 1px solid var(--border-color); @@ -163,9 +134,6 @@ header { color: var(--text-secondary); } -/* -------------------------------------------------------------------------- - Form Elements - -------------------------------------------------------------------------- */ .form-group { display: flex; flex-direction: column; @@ -225,9 +193,6 @@ output { color: var(--text-secondary); } -/* -------------------------------------------------------------------------- - Buttons - -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; @@ -305,9 +270,6 @@ output { gap: var(--space-sm); } -/* -------------------------------------------------------------------------- - Configuration Grid - -------------------------------------------------------------------------- */ .config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); @@ -325,9 +287,6 @@ output { border-radius: var(--radius-md); } -/* -------------------------------------------------------------------------- - Cell Input Section - -------------------------------------------------------------------------- */ .cell-input-header { display: flex; flex-wrap: wrap; @@ -412,9 +371,6 @@ output { font-family: var(--font-mono); } -/* -------------------------------------------------------------------------- - Settings Grid - -------------------------------------------------------------------------- */ .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); @@ -422,9 +378,6 @@ output { margin-bottom: var(--space-xl); } -/* -------------------------------------------------------------------------- - Progress Section - -------------------------------------------------------------------------- */ .progress-container { margin-bottom: var(--space-lg); } @@ -480,7 +433,6 @@ output { color: var(--accent); } -/* Live Preview */ .live-preview { margin-top: var(--space-lg); padding: var(--space-md); @@ -529,9 +481,6 @@ output { margin-left: var(--space-xs); } -/* -------------------------------------------------------------------------- - Warning Banner - -------------------------------------------------------------------------- */ .warning-banner { display: flex; gap: var(--space-md); @@ -571,9 +520,6 @@ output { color: var(--accent); } -/* -------------------------------------------------------------------------- - Results Summary - -------------------------------------------------------------------------- */ .results-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); @@ -582,6 +528,7 @@ output { } .result-metric { + position: relative; display: flex; flex-direction: column; align-items: center; @@ -589,6 +536,7 @@ output { background: var(--bg-tertiary); border-radius: var(--radius-md); text-align: center; + cursor: help; } .metric-value { @@ -604,335 +552,9 @@ output { margin-top: var(--space-xs); } -/* -------------------------------------------------------------------------- - Pack Visualization - -------------------------------------------------------------------------- */ -.pack-visualization { - margin-bottom: var(--space-xl); -} - -.pack-grid { - display: flex; - flex-direction: column; - gap: var(--space-sm); - padding: var(--space-lg); - background: var(--bg-tertiary); - border-radius: var(--radius-md); - overflow-x: auto; -} - -.pack-row { - display: flex; - gap: var(--space-sm); - align-items: center; -} - -.pack-row-label { - min-width: 30px; - font-size: 0.75rem; - font-weight: 600; - color: var(--text-muted); - text-align: right; -} - -.pack-cells { - display: flex; - gap: var(--space-xs); -} - -.pack-cell { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-width: 70px; - padding: var(--space-sm); - background: var(--cell-mid); - border-radius: var(--radius-sm); - font-size: 0.7rem; - color: white; - text-align: center; - transition: transform var(--transition-fast); -} - -.pack-cell:hover { - transform: scale(1.05); -} - -.pack-cell .cell-label { - font-weight: 600; - margin-bottom: 2px; -} - -.pack-cell .cell-capacity { - opacity: 0.9; -} - -.pack-cell .cell-ir { - opacity: 0.7; - font-size: 0.65rem; -} - -.pack-legend { - display: flex; - justify-content: center; - gap: var(--space-lg); - margin-top: var(--space-md); - font-size: 0.75rem; - color: var(--text-secondary); -} - -.legend-color { - display: inline-block; - width: 12px; - height: 12px; - border-radius: 2px; - margin-right: var(--space-xs); - vertical-align: middle; -} - -/* -------------------------------------------------------------------------- - Results Table - -------------------------------------------------------------------------- */ -.results-table-wrapper { - overflow-x: auto; - margin-bottom: var(--space-xl); -} - -.results-table { - width: 100%; - border-collapse: collapse; - font-size: 0.875rem; -} - -.results-table th, -.results-table td { - padding: var(--space-sm) var(--space-md); - text-align: left; - border-bottom: 1px solid var(--border-color); -} - -.results-table th { - font-weight: 600; - color: var(--text-secondary); - background: var(--bg-tertiary); -} - -.results-table td { - font-family: var(--font-mono); -} - -.results-table .deviation-good { - color: var(--success); -} - -.results-table .deviation-warning { - color: var(--warning); -} - -.results-table .deviation-bad { - color: var(--danger); -} - -/* -------------------------------------------------------------------------- - Excluded Cells - -------------------------------------------------------------------------- */ -.excluded-cells { - padding: var(--space-lg); - background: var(--bg-tertiary); - border-radius: var(--radius-md); - margin-bottom: var(--space-xl); -} - -.excluded-cells h3 { - margin-top: 0; -} - -.excluded-cells p { - margin: 0; - font-family: var(--font-mono); - font-size: 0.875rem; - color: var(--text-secondary); -} - -/* -------------------------------------------------------------------------- - Export Buttons - -------------------------------------------------------------------------- */ -.export-buttons { - display: flex; - flex-wrap: wrap; - gap: var(--space-sm); - justify-content: center; -} - -/* -------------------------------------------------------------------------- - Footer - -------------------------------------------------------------------------- */ -footer { - text-align: center; - padding: var(--space-xl) 0; - font-size: 0.875rem; - color: var(--text-muted); -} - -footer a { - color: var(--text-secondary); - text-decoration: none; -} - -footer a:hover { - color: var(--accent); -} - -.disclaimer { - margin-top: var(--space-sm); - font-size: 0.75rem; -} - -/* -------------------------------------------------------------------------- - Dialog / Modal - -------------------------------------------------------------------------- */ -dialog { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - max-width: 400px; - width: 90%; - padding: var(--space-xl); - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-lg); - color: var(--text-primary); -} - -dialog::backdrop { - background: rgba(0, 0, 0, 0.7); -} - -dialog h2 { - margin: 0 0 var(--space-lg); -} - -.shortcuts-list { - display: grid; - grid-template-columns: auto 1fr; - gap: var(--space-sm) var(--space-lg); - margin-bottom: var(--space-xl); -} - -.shortcuts-list dt { - font-weight: 500; -} - -.shortcuts-list dd { - margin: 0; - color: var(--text-secondary); -} - -kbd { - display: inline-block; - padding: 2px 6px; - font-size: 0.75rem; - font-family: var(--font-mono); - background: var(--bg-tertiary); - border: 1px solid var(--border-color); - border-radius: var(--radius-sm); -} - -/* -------------------------------------------------------------------------- - Responsive Adjustments - -------------------------------------------------------------------------- */ -@media (max-width: 640px) { - .container { - padding: var(--space-md); - } - - .card { - padding: var(--space-lg); - } - - .logo h1 { - font-size: 1.25rem; - } - - .config-grid, - .settings-grid { - grid-template-columns: 1fr; - } - - .cell-input-header { - flex-direction: column; - align-items: flex-start; - } - - .button-group { - width: 100%; - } - - .button-group .btn { - flex: 1; - } - - .results-summary { - grid-template-columns: repeat(2, 1fr); - } - - .pack-cell { - min-width: 55px; - padding: var(--space-xs); - } -} - -/* -------------------------------------------------------------------------- - Reduced Motion - -------------------------------------------------------------------------- */ -@media (prefers-reduced-motion: reduce) { - - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} - -/* -------------------------------------------------------------------------- - Print Styles - -------------------------------------------------------------------------- */ -@media print { - body { - background: white; - color: black; - } - - .card { - border: 1px solid #ccc; - box-shadow: none; - break-inside: avoid; - } - - .btn, - #progress-section, - .export-buttons { - display: none; - } - - .warning-banner { - border: 2px solid #f59e0b; - } -} - /* -------------------------------------------------------------------------- Metric Tooltips -------------------------------------------------------------------------- */ -.result-metric { - position: relative; - cursor: help; -} - .metric-tooltip { visibility: hidden; opacity: 0; @@ -1015,8 +637,319 @@ kbd { color: var(--text-muted); } -/* Mobile: tap to show tooltip */ +.pack-visualization { + margin-bottom: var(--space-xl); +} + +.pack-grid { + display: flex; + flex-direction: column; + gap: var(--space-sm); + padding: var(--space-lg); + background: var(--bg-tertiary); + border-radius: var(--radius-md); + overflow-x: auto; +} + +.pack-row { + display: flex; + gap: var(--space-sm); + align-items: center; +} + +.pack-row-label { + min-width: 30px; + font-size: 0.75rem; + font-weight: 600; + color: var(--text-muted); + text-align: right; +} + +.pack-cells { + display: flex; + gap: var(--space-xs); +} + +.pack-cell { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-width: 70px; + padding: var(--space-sm); + background: var(--cell-mid); + border-radius: var(--radius-sm); + font-size: 0.7rem; + color: white; + text-align: center; + cursor: pointer; + transition: transform var(--transition-fast); +} + +.pack-cell:hover { + transform: scale(1.05); +} + +.pack-cell .cell-label { + font-weight: 600; + margin-bottom: 2px; +} + +.pack-cell .cell-capacity { + opacity: 0.9; +} + +.pack-cell .cell-ir { + opacity: 0.7; + font-size: 0.65rem; +} + +/* Pack cell tooltips */ +.pack-cell .tooltip { + visibility: hidden; + opacity: 0; + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + margin-bottom: 8px; + padding: var(--space-sm) var(--space-md); + background: var(--bg-primary); + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + font-size: 0.75rem; + white-space: nowrap; + z-index: 100; + box-shadow: var(--shadow-md); + transition: opacity var(--transition-fast), visibility var(--transition-fast); + color: var(--text-primary); +} + +.pack-cell .tooltip::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border: 6px solid transparent; + border-top-color: var(--border-color); +} + +.pack-cell:hover .tooltip, +.pack-cell:focus .tooltip { + visibility: visible; + opacity: 1; +} + +.tooltip-row { + display: flex; + justify-content: space-between; + gap: var(--space-md); +} + +.tooltip-label { + color: var(--text-muted); +} + +.tooltip-value { + color: var(--text-primary); + font-weight: 600; +} + +.pack-legend { + display: flex; + justify-content: center; + gap: var(--space-lg); + margin-top: var(--space-md); + font-size: 0.75rem; + color: var(--text-secondary); +} + +.legend-color { + display: inline-block; + width: 12px; + height: 12px; + border-radius: 2px; + margin-right: var(--space-xs); + vertical-align: middle; +} + +.results-table-wrapper { + overflow-x: auto; + margin-bottom: var(--space-xl); +} + +.results-table { + width: 100%; + border-collapse: collapse; + font-size: 0.875rem; +} + +.results-table th, +.results-table td { + padding: var(--space-sm) var(--space-md); + text-align: left; + border-bottom: 1px solid var(--border-color); +} + +.results-table th { + font-weight: 600; + color: var(--text-secondary); + background: var(--bg-tertiary); +} + +.results-table td { + font-family: var(--font-mono); +} + +.results-table .deviation-good { + color: var(--success); +} + +.results-table .deviation-warning { + color: var(--warning); +} + +.results-table .deviation-bad { + color: var(--danger); +} + +.excluded-cells { + padding: var(--space-lg); + background: var(--bg-tertiary); + border-radius: var(--radius-md); + margin-bottom: var(--space-xl); +} + +.excluded-cells h3 { + margin-top: 0; +} + +.excluded-cells p { + margin: 0; + font-family: var(--font-mono); + font-size: 0.875rem; + color: var(--text-secondary); +} + +.export-buttons { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + justify-content: center; +} + +footer { + text-align: center; + padding: var(--space-xl) 0; + font-size: 0.875rem; + color: var(--text-muted); +} + +footer a { + color: var(--text-secondary); + text-decoration: none; +} + +footer a:hover { + color: var(--accent); +} + +.disclaimer { + margin-top: var(--space-sm); + font-size: 0.75rem; +} + +dialog { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-width: 400px; + width: 90%; + padding: var(--space-xl); + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); + color: var(--text-primary); +} + +dialog::backdrop { + background: rgba(0, 0, 0, 0.7); +} + +dialog h2 { + margin: 0 0 var(--space-lg); +} + +.shortcuts-list { + display: grid; + grid-template-columns: auto 1fr; + gap: var(--space-sm) var(--space-lg); + margin-bottom: var(--space-xl); +} + +.shortcuts-list dt { + font-weight: 500; +} + +.shortcuts-list dd { + margin: 0; + color: var(--text-secondary); +} + +kbd { + display: inline-block; + padding: 2px 6px; + font-size: 0.75rem; + font-family: var(--font-mono); + background: var(--bg-tertiary); + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); +} + @media (max-width: 640px) { + .container { + padding: var(--space-md); + } + + .card { + padding: var(--space-lg); + } + + .logo h1 { + font-size: 1.25rem; + } + + .config-grid, + .settings-grid { + grid-template-columns: 1fr; + } + + .cell-input-header { + flex-direction: column; + align-items: flex-start; + } + + .button-group { + width: 100%; + } + + .button-group .btn { + flex: 1; + } + + .results-summary { + grid-template-columns: repeat(2, 1fr); + } + + .pack-cell { + min-width: 55px; + padding: var(--space-xs); + } + .metric-tooltip { width: 240px; left: 0; @@ -1026,4 +959,38 @@ kbd { .metric-tooltip::after { left: 20%; } +} + +@media (prefers-reduced-motion: reduce) { + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +@media print { + body { + background: white; + color: black; + } + + .card { + border: 1px solid #ccc; + box-shadow: none; + break-inside: avoid; + } + + .btn, + #progress-section, + .export-buttons { + display: none; + } + + .warning-banner { + border: 2px solid #f59e0b; + } } \ No newline at end of file diff --git a/index.html b/index.html index 3947549..6d86d9e 100644 --- a/index.html +++ b/index.html @@ -178,7 +178,7 @@