Spaces:
Sleeping
Sleeping
Commercial overhaul: clean glass+taillight boundaries (conforming split), model-locked AI render (ControlNet img2img + paint tint), gesture control, workshop disassembly, part info cards, pro UI + new How-it-works
9032518 verified | /* pro_ui.css — professional engineering-suite polish (COMSOL/ANSYS-style) | |
| Additive layer: refines the Car Studio panel + toolbar without touching the | |
| app's layout logic. Loaded after the inline styles so it wins on ties. */ | |
| /* ---- Car Studio panel: crisp, neutral, consistent ---- */ | |
| #carStudio .cs-row { display: flex; flex-wrap: wrap; align-items: center; | |
| gap: 4px; margin: 3px 0; } | |
| #carStudio .cs-row > label { flex: 0 0 100%; font-size: 10px; font-weight: 700; | |
| letter-spacing: 1.1px; text-transform: uppercase; color: #6a7382; | |
| margin: 7px 0 1px; } | |
| #carStudio .cs-btn { display: inline-flex; align-items: center; gap: 5px; | |
| height: 24px; padding: 0 9px; font-size: 11.5px; font-weight: 500; | |
| color: #2a3342; background: linear-gradient(#ffffff, #f2f4f7); | |
| border: 1px solid #c6cdd6; border-radius: 4px; cursor: pointer; | |
| transition: border-color .12s, background .12s, box-shadow .12s; } | |
| #carStudio .cs-btn:hover { border-color: #2461c2; background: #eef4fd; | |
| box-shadow: 0 0 0 1px rgba(36,97,194,.18); } | |
| #carStudio .cs-btn:active { background: #dfeafc; } | |
| #carStudio .cs-btn svg.pro-ic { width: 12px; height: 12px; flex: 0 0 12px; | |
| stroke: #4b5769; fill: none; stroke-width: 1.7; stroke-linecap: round; | |
| stroke-linejoin: round; } | |
| #carStudio .cs-btn:hover svg.pro-ic { stroke: #2461c2; } | |
| #carStudio .cs-cfd { background: linear-gradient(#ffffff, #eef7f0); | |
| border-color: #a9cdb4; } | |
| #carStudio select, #carStudio input[type="text"], #carStudio textarea { | |
| border: 1px solid #c6cdd6; border-radius: 4px; font-size: 11.5px; | |
| padding: 3px 6px; background: #fff; color: #2a3342; } | |
| #carStudio select:focus, #carStudio textarea:focus { outline: none; | |
| border-color: #2461c2; box-shadow: 0 0 0 2px rgba(36,97,194,.15); } | |
| /* dark theme: keep the panel readable, not washed out */ | |
| :root:not(.light) #carStudio .cs-btn { background: linear-gradient(#242a33, #1d222a); | |
| border-color: #39414d; color: #cfd6e0; } | |
| :root:not(.light) #carStudio .cs-btn:hover { background: #26313f; | |
| border-color: #3470c8; box-shadow: 0 0 0 1px rgba(52,112,200,.25); } | |
| :root:not(.light) #carStudio .cs-btn svg.pro-ic { stroke: #97a3b4; } | |
| :root:not(.light) #carStudio .cs-btn:hover svg.pro-ic { stroke: #6fa3e8; } | |
| :root:not(.light) #carStudio .cs-cfd { background: linear-gradient(#20301f, #1a271a); | |
| border-color: #3b5e3b; } | |
| :root:not(.light) #carStudio .cs-row > label { color: #8892a2; } | |
| :root:not(.light) #carStudio select, :root:not(.light) #carStudio input[type="text"], | |
| :root:not(.light) #carStudio textarea { background: #171c23; color: #cfd6e0; | |
| border-color: #39414d; } | |
| /* ---- toolbar: uniform icon buttons ---- */ | |
| #toolbar button svg.pro-ic { width: 14px; height: 14px; flex: 0 0 14px; | |
| stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; | |
| stroke-linejoin: round; opacity: .85; } | |
| #toolbar button { letter-spacing: .1px; } | |
| /* keep the two special-action buttons readable but consistent */ | |
| #gestureBtn, #disasmBtn { border-radius: 5px; } | |