/* ===================================== TRACKMODE ECU Widget – Extracted CSS (All styles scoped to .tm-* to avoid collisions) ===================================== */ :root{ --ambient-rgb: 255 106 0; --ambient-brightness: 0; } /* Launcher (badge) */ .tm-widget{position:fixed; inset:auto 24px 24px auto; z-index:10000; pointer-events:auto} .tm-launch{appearance:none; border:0; background:#121317; width:56px; height:56px; padding:0; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.45); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; position:relative; overflow:visible; z-index: 0;} .tm-launch img { display: block; width: 36px; height: 36px; object-fit: contain; border-radius: 12px; position: relative; z-index: 1; } @media (max-width:600px){ .tm-launch img{ width:34px; height:34px; border-radius:10px; } } /* Icon via pseudo-element so we don't need to change HTML */ .tm-launch::before{ content:none; } .tm-launch::after{content:""; position:absolute; inset:-6px; border-radius:inherit; pointer-events:none; background: radial-gradient(closest-side, rgb(var(--ambient-rgb) / calc(var(--ambient-brightness) * 0.95)), transparent 70%); opacity: 1; filter: blur(8px); z-index:0;} /* When Flow is active globally, add a subtle animated ring using the shared rainbow */ body.ambient-flow-enabled .tm-launch::after{ background: radial-gradient(closest-side, rgba(255,255,255,0.0), rgba(255,255,255,0.0) 60%), linear-gradient(90deg, #ff0000, #ff7d00, #ffee00, #72ff00, #00ffee, #0086ff, #db00ff, #ff0000); background-size: 100% 100%, 1000% 100%; background-position: center, 0 0; animation: tm-rgb-flow 15s linear infinite; animation-delay: var(--flow-offset, 0s); opacity: .75; /* slightly less intense */ filter: blur(6px); /* softer halo than the default 8px */ inset: -4px; /* a bit tighter than the base -6px */ } /* NOTE: toggle from tm-widget.js when Flow is ON to animate the launcher's ring */ /* Panel shell */ .tm-panel{position:fixed; bottom:96px; right:24px; width:min(360px, 92vw); max-height:70vh; border-radius:16px; border:1px solid #24252b; background:rgba(17,17,20,.92); backdrop-filter:saturate(1.2) blur(10px); box-shadow:0 18px 50px rgba(0,0,0,.55); opacity:0; transform:translateY(8px) scale(.98); pointer-events:none; transition:opacity .18s ease, transform .22s ease; z-index:10001} .tm-panel.is-open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto} .tm-panel-inner{position:relative; overflow:hidden; border-radius:inherit} /* Glitch intro */ .tm-panel.tm-glitch::before, .tm-panel.tm-glitch::after{content:""; position:absolute; inset:0; background:linear-gradient( to bottom, transparent 45%, rgba(255,255,255,.04) 46%, transparent 47%), linear-gradient( to right, #fff2 0 0); mix-blend-mode:screen; pointer-events:none} .tm-panel.tm-glitch::before{animation:tm-gl1 260ms steps(2,end) 2} .tm-panel.tm-glitch::after{animation:tm-gl2 260ms steps(2,end) 2} @keyframes tm-gl1{0%{transform:translate(0,0)}50%{transform:translate(-6px,1px)}100%{transform:translate(0,0)}} @keyframes tm-gl2{0%{transform:translate(0,0)}50%{transform:translate(6px,-1px)}100%{transform:translate(0,0)}} /* Loading/boot state */ .tm-loading{display:grid; place-items:center; padding:28px; min-height:200px} .tm-loader{width:38px; height:38px; border-radius:50%; border:3px solid #2b2d35; border-top-color:#ff6a00; animation:tm-spin 1s linear infinite; margin-bottom:12px} .tm-boot{position:relative; width:100%; max-height:120px; overflow:auto; background:#0c0d11; color:#69f57a; border:1px solid #1e2027; border-radius:10px; padding:10px; font:12px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; box-shadow:inset 0 0 0 1px #0a0b0e; text-shadow:0 0 6px #1aff6c55} .tm-loading .tm-boot::before{content:""; position:absolute; width:8px; height:1.05em; background:#69f57a; opacity:.85; left:12px; bottom:8px; animation:tm-caret 1s steps(2,end) infinite; box-shadow:0 0 8px #22ff9955} @keyframes tm-caret{50%{opacity:.2}} @keyframes tm-spin{to{transform:rotate(360deg)}} /* Menu & header */ .tm-menu{display:block} .tm-menu[hidden]{display:none} .tm-menu-header{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid #24252b; background:linear-gradient(180deg,#16171c,#121317)} .tm-menu-header strong{font-weight:800; letter-spacing:.3px} .tm-close,.tm-back{appearance:none; border:1px solid #24252b; background:#14151a; color:#e9e9ee; padding:6px 10px; border-radius:10px; cursor:pointer} .tm-back[hidden]{display:none} /* Submenu state: hide main menu, update header, show back */ .tm-submenu-active .tm-mainlist { display: none; } .tm-submenu-active .tm-menu-header strong { /* Title is updated dynamically by JS; this ensures layout is consistent */ /* No extra styles needed, but rule present for targeting if needed */ } .tm-submenu-active .tm-back { display: inline-block; } /* Panel body */ .tm-panel-body{padding:14px} /* Main list */ .tm-mainlist{display:grid; gap:10px} .tm-list-item{appearance:none; border:1px solid #24252b; background:#121317; color:#e9e9ee; width:100%; text-align:left; padding:12px 14px; border-radius:12px; font-weight:800; letter-spacing:.4px; cursor:pointer; transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease} .tm-list-item:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.45); border-color:#34363f} /* Driving modes */ .tm-modes{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:6px 0 10px} .tm-mode{appearance:none; border:1px solid #24252b; background:#0f1014; color:#e9e9ee; padding:10px 12px; border-radius:12px; font-weight:800; letter-spacing:.6px; cursor:pointer; transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease} .tm-mode:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.45); border-color:#34363f} .tm-mode.is-active,.tm-mode[aria-pressed="true"]{border-color: var(--accent, #ff6a00); box-shadow: 0 0 0 1px var(--accent, #ff6a00), 0 6px 16px rgba(0,0,0,.5); background: linear-gradient(180deg, #131419, #0f1014)} /* Mode button accent hints */ .tm-mode[data-mode="comfort"]{border-color:rgba(255,255,255,.22)} .tm-mode[data-mode="sport"]{border-color:#ff2a2a55} .tm-mode[data-mode="track"]{border-color:#ff6a0055} .tm-mode[data-mode="electric"]{border-color:#00b2ff55} /* RGB strip under header */ .tm-rgb-strip{position:sticky; top:56px; height:2px; width:100%; background:none; box-shadow:none; z-index:49} .tm-rgb-strip.is-on{background: rgb(var(--ambient-rgb) / calc(var(--ambient-brightness) + 0.02)); box-shadow: 0 0 10px rgb(var(--ambient-rgb) / calc(var(--ambient-brightness) * 0.9)), 0 0 22px rgb(var(--ambient-rgb) / calc(var(--ambient-brightness) * 0.6))} .tm-rgb-strip.is-flow{ background: linear-gradient( 90deg, #ff0000 0%, #ff1900 2%, #ff3200 4%, #ff4b00 6%, #ff6400 8%, #ff7d00 10%, #ff9600 12%, #ffaa00 14%, #ffc000 16%, #ffd600 18%, #ffee00 20%, #e6ff00 22%, #caff00 24%, #adff00 26%, #8fff00 28%, #72ff00 30%, #56ff00 32%, #39ff00 34%, #1cff00 36%, #00ff08 38%, #00ff25 40%, #00ff41 42%, #00ff5e 44%, #00ff7a 46%, #00ff97 48%, #00ffb3 50%, #00ffcf 52%, #00ffeb 54%, #00f6ff 56%, #00daff 58%, #00beff 60%, #00a2ff 62%, #0086ff 64%, #006aff 66%, #2546ff 68%, #4a22ff 70%, #6f00ff 72%, #9300ff 74%, #b700ff 76%, #db00ff 78%, #ff00f6 80%, #ff00d2 82%, #ff00ae 84%, #ff008a 86%, #ff0066 88%, #ff0042 90%, #ff0021 92%, #ff0000 94%, #ff1900 96%, #ff3200 98%, #ff4b00 100%, #ff6400 102%, #ff7d00 104%, #ff9600 106%, #ffaa00 108%, #ffc000 110%, #ffd600 112%, #ffee00 114%, #e6ff00 116%, #caff00 118%, #adff00 120%, #8fff00 122%, #72ff00 124%, #56ff00 126%, #39ff00 128%, #1cff00 130%, #00ff08 132%, #00ff25 134%, #00ff41 136%, #00ff5e 138%, #00ff7a 140%, #00ff97 142%, #00ffb3 144%, #00ffcf 146%, #00ffeb 148%, #00f6ff 150%, #00daff 152%, #00beff 154%, #00a2ff 156%, #0086ff 158%, #006aff 160%, #2546ff 162%, #4a22ff 164%, #6f00ff 166%, #9300ff 168%, #b700ff 170%, #db00ff 172%, #ff00f6 174%, #ff00d2 176%, #ff00ae 178%, #ff008a 180%, #ff0066 182%, #ff0042 184%, #ff0021 186%, #ff0000 188%, #ff1900 190%, #ff3200 192%, #ff4b00 194%, #ff6400 196%, #ff7d00 198%, #ff9600 200% ); background-size: 1000% 100%; animation: tm-rgb-flow 15s linear infinite; animation-delay: var(--flow-offset, 0s); will-change: background-position; box-shadow: 0 0 10px rgb(var(--ambient-rgb) / calc(var(--ambient-brightness) * 0.9 + 0.12)), 0 0 22px rgb(var(--ambient-rgb) / calc(var(--ambient-brightness) * 0.6 + 0.08)), 0 0 36px rgba(255,255,255,0.06); } .tm-map-rgb { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; border-radius: 8px; padding: 2px; /* Thickness of strip */ background: linear-gradient( 90deg, #ff0000 0%, #ff1900 2%, #ff3200 4%, #ff4b00 6%, #ff6400 8%, #ff7d00 10%, #ff9600 12%, #ffaa00 14%, #ffc000 16%, #ffd600 18%, #ffee00 20%, #e6ff00 22%, #caff00 24%, #adff00 26%, #8fff00 28%, #72ff00 30%, #56ff00 32%, #39ff00 34%, #1cff00 36%, #00ff08 38%, #00ff25 40%, #00ff41 42%, #00ff5e 44%, #00ff7a 46%, #00ff97 48%, #00ffb3 50%, #00ffcf 52%, #00ffeb 54%, #00f6ff 56%, #00daff 58%, #00beff 60%, #00a2ff 62%, #0086ff 64%, #006aff 66%, #2546ff 68%, #4a22ff 70%, #6f00ff 72%, #9300ff 74%, #b700ff 76%, #db00ff 78%, #ff00f6 80%, #ff00d2 82%, #ff00ae 84%, #ff008a 86%, #ff0066 88%, #ff0042 90%, #ff0021 92%, #ff0000 94%, #ff1900 96%, #ff3200 98%, #ff4b00 100%, #ff6400 102%, #ff7d00 104%, #ff9600 106%, #ffaa00 108%, #ffc000 110%, #ffd600 112%, #ffee00 114%, #e6ff00 116%, #caff00 118%, #adff00 120%, #8fff00 122%, #72ff00 124%, #56ff00 126%, #39ff00 128%, #1cff00 130%, #00ff08 132%, #00ff25 134%, #00ff41 136%, #00ff5e 138%, #00ff7a 140%, #00ff97 142%, #00ffb3 144%, #00ffcf 146%, #00ffeb 148%, #00f6ff 150%, #00daff 152%, #00beff 154%, #00a2ff 156%, #0086ff 158%, #006aff 160%, #2546ff 162%, #4a22ff 164%, #6f00ff 166%, #9300ff 168%, #b700ff 170%, #db00ff 172%, #ff00f6 174%, #ff00d2 176%, #ff00ae 178%, #ff008a 180%, #ff0066 182%, #ff0042 184%, #ff0021 186%, #ff0000 188%, #ff1900 190%, #ff3200 192%, #ff4b00 194%, #ff6400 196%, #ff7d00 198%, #ff9600 200% ); background-size: 1000% 100%; animation: tm-rgb-flow 15s linear infinite; animation-delay: var(--flow-offset, 0s); box-shadow: 0 0 15px rgb(var(--ambient-rgb) / calc(var(--ambient-brightness) * 0.9)), 0 0 30px rgb(var(--ambient-rgb) / calc(var(--ambient-brightness) * 0.6)), inset 0 0 10px rgb(var(--ambient-rgb) / calc(var(--ambient-brightness) * 0.9)); z-index: 2; } @keyframes tm-rgb-flow { 0% { background-position: 0% 0; } 100% { background-position: 1000% 0; } } /* Mouse spotlight overlay */ .tm-spotlight{position:fixed; inset:0; pointer-events:none; z-index:48; background: radial-gradient(150px 150px at var(--mx, -999px) var(--my, -999px), rgb(var(--ambient-rgb) / calc(var(--ambient-brightness) * 0.8)), transparent 60%)} /* Ambient controls */ .tm-ambient{display:grid; gap:12px} .tm-ambient-row{display:grid; gap:8px} .tm-label{font-size:12px; color:#b8b8c2; font-weight:700; text-transform:uppercase; letter-spacing:.4px} .tm-toggle{appearance:none; border:1px solid #24252b; background:#14151a; color:#e9e9ee; padding:10px 12px; border-radius:12px; font-weight:800; letter-spacing:.4px; cursor:pointer} .tm-toggle[aria-pressed="true"]{background:var(--accent, #ff6a00); color:#0b0b0c; border-color:transparent} .tm-ambient-body[hidden]{display:none} .tm-swatches{display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:8px} .tm-swatch{width:100%; aspect-ratio:1/1; border-radius:8px; border:1px solid #24252b; background:#0f1014; cursor:pointer} .tm-swatch[title="Comfort"]{background: rgb(230 232 235)} .tm-swatch[title="Sport"]{background: rgb(255 42 42)} .tm-swatch[title="Track"]{background: rgb(255 106 0)} .tm-swatch[title="Electric"]{background: rgb(0 178 255)} .tm-swatch[title="Lime"]{background: rgb(120 255 120)} .tm-swatch[title="Magenta"]{background: rgb(255 0 200)} .tm-swatch[title="Yellow"]{background: rgb(255 255 0)} .tm-swatch[title="Violet"]{background: rgb(160 100 255)} .tm-color{width:100%; height:36px; border-radius:10px; border:1px solid #24252b; background:#0f1014} .tm-range{width:100%} .tm-toggles{display:flex; gap:12px; flex-wrap:wrap} .tm-switch{display:inline-flex; align-items:center; gap:6px; font-size:13px} .tm-switch input{accent-color: var(--accent, #ff6a00)} /* Wallpaper page background hook */ body.wallpaper{min-height:100vh; background:#0b0b0c; transition: background 120ms linear} body.wallpaper.tm-ambient-on{background: rgb(var(--ambient-rgb) / calc(var(--ambient-brightness) + 0.02))} /* Mobile tweaks */ @media (max-width:600px){ .tm-panel{bottom:88px; right:10px; width:92vw; max-height:70vh} .tm-launch img{width:40px; height:40px} } /* Temporarily hide Wallpaper from the menu */ .tm-mainlist .tm-list-item[data-view="wallpaper"]{ display:none !important; }