1984 lines
29 KiB
CSS
1984 lines
29 KiB
CSS
.rail {
|
|
position: sticky;
|
|
top: 0px;
|
|
height: 100dvh;
|
|
}
|
|
|
|
.rail-collapsed .rail {
|
|
display: none;
|
|
}
|
|
|
|
.page-top {
|
|
height: auto;
|
|
padding: 0px 0px 20px;
|
|
border: 0px;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
}
|
|
|
|
#rail-toggle {
|
|
font-size: 25px;
|
|
min-width: 52px;
|
|
min-height: 52px;
|
|
background: transparent;
|
|
}
|
|
|
|
.page-heading > div:first-child:not(.map-actions) {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
}
|
|
|
|
.page-heading > .subtle {
|
|
display: none;
|
|
}
|
|
|
|
.page-heading {
|
|
justify-content: flex-end;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.page-heading:has(> div:only-child), #home > .page-heading, #drive > .page-heading {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
#home > .page-heading {
|
|
display: none;
|
|
}
|
|
|
|
main {
|
|
padding: 22px 26px;
|
|
}
|
|
|
|
.page-top .header-right {
|
|
gap: 16px;
|
|
}
|
|
|
|
.view-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.view-toolbar a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 48px;
|
|
color: var(--accent);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.cluster {
|
|
padding: 18px 12px 0px;
|
|
}
|
|
|
|
.gauges {
|
|
max-width: none;
|
|
gap: 0px;
|
|
}
|
|
|
|
.cluster-top {
|
|
padding: 0px 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.cluster-bottom {
|
|
padding: 16px 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.drive-links {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 15px;
|
|
align-items: center;
|
|
}
|
|
|
|
.drive-links a {
|
|
min-height: 52px;
|
|
}
|
|
|
|
.detail-grid {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.detail-grid .card {
|
|
padding: 26px;
|
|
}
|
|
|
|
.detail-grid h2 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.detail-grid strong {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.detail-grid p {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.details-notice {
|
|
color: var(--muted);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.player-view-link {
|
|
display: inline-flex;
|
|
min-height: 48px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 15px;
|
|
color: var(--accent);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.embed-frame {
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
width: 100%;
|
|
min-height: 500px;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.embed-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.embed-controls input {
|
|
flex: 1 1 0%;
|
|
min-width: 180px;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.embed-controls button, .embed-controls a {
|
|
min-height: 48px;
|
|
}
|
|
|
|
.embed-notice {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.embedded-card {
|
|
padding: 24px;
|
|
}
|
|
|
|
.embedded-card iframe {
|
|
display: block;
|
|
}
|
|
|
|
.embedded-card iframe[data-provider="spotify"] {
|
|
min-height: 352px;
|
|
}
|
|
|
|
.embedded-card iframe[data-provider="youtube-music"], .embedded-card iframe[data-provider="youtube"] {
|
|
aspect-ratio: 16 / 9;
|
|
min-height: 220px;
|
|
}
|
|
|
|
@media (min-width: 900px) and (min-height: 950px) {
|
|
.home-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.clock-card {
|
|
min-height: 355px;
|
|
}
|
|
|
|
.weather-card {
|
|
min-height: 355px;
|
|
}
|
|
|
|
.home-grid .vehicle-card, .home-grid .music-card {
|
|
min-height: 265px;
|
|
}
|
|
|
|
.clock-card > time {
|
|
font-size: 100px;
|
|
}
|
|
|
|
.application-open {
|
|
min-height: 230px;
|
|
}
|
|
|
|
.cluster {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.player-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.album-art.large {
|
|
width: 230px;
|
|
}
|
|
|
|
.library {
|
|
min-height: 620px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 759px) {
|
|
main {
|
|
padding: 15px;
|
|
}
|
|
|
|
.page-top {
|
|
gap: 8px;
|
|
min-height: 54px;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.page-top .header-left {
|
|
gap: 7px;
|
|
}
|
|
|
|
.page-top .header-right {
|
|
gap: 5px;
|
|
}
|
|
|
|
.page-top .badge {
|
|
font-size: 7px;
|
|
max-width: 100px;
|
|
white-space: normal;
|
|
}
|
|
|
|
.page-top .header-right time {
|
|
font-size: 12px;
|
|
}
|
|
|
|
#rail-toggle {
|
|
min-width: 44px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gauges {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.gear {
|
|
grid-area: 2 / 1 / auto / -1;
|
|
display: flex;
|
|
gap: 14px;
|
|
}
|
|
|
|
.gear strong {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.detail-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.drive-links {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.cluster-bottom {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.view-toolbar {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 650px) and (min-width: 760px) {
|
|
.page-top {
|
|
margin-bottom: 8px;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.gauge svg {
|
|
max-height: 260px;
|
|
}
|
|
|
|
.cluster-top {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.cluster-bottom {
|
|
padding: 10px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.rail nav a {
|
|
min-height: 55px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1000px) and (min-height: 651px) {
|
|
.gauge svg {
|
|
max-height: 440px;
|
|
}
|
|
}
|
|
|
|
.drive-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.drive-actions .profile-label {
|
|
margin: 0px;
|
|
}
|
|
|
|
.drive-actions select {
|
|
min-height: 48px;
|
|
}
|
|
|
|
.immersive-player {
|
|
max-width: 920px;
|
|
margin: auto;
|
|
padding: 20px 28px 28px;
|
|
text-align: center;
|
|
background: radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%);
|
|
}
|
|
|
|
.immersive-stage {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 780px;
|
|
aspect-ratio: 600 / 430;
|
|
margin: auto;
|
|
}
|
|
|
|
.music-orbit {
|
|
position: absolute;
|
|
inset: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.orbit-track, #track-arc {
|
|
fill: none;
|
|
stroke: var(--border);
|
|
stroke-width: 7;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
#track-arc {
|
|
stroke: var(--accent);
|
|
stroke-dasharray: 100;
|
|
stroke-dashoffset: 100;
|
|
transition: stroke-dashoffset 0.2s linear;
|
|
}
|
|
|
|
.immersive-caption {
|
|
position: absolute;
|
|
top: 43%;
|
|
left: 12%;
|
|
right: 12%;
|
|
}
|
|
|
|
.immersive-caption h2 {
|
|
font-size: clamp(18px, 2.4vw, 30px);
|
|
line-height: 1.25;
|
|
margin: 0px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.immersive-caption p {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
margin: 12px 0px 0px;
|
|
}
|
|
|
|
.immersive-controls {
|
|
position: absolute;
|
|
top: 68%;
|
|
left: 0px;
|
|
right: 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 18px;
|
|
}
|
|
|
|
.immersive-player button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 54px;
|
|
min-height: 54px;
|
|
padding: 12px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.immersive-player button svg {
|
|
width: 25px;
|
|
height: 25px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.immersive-controls #immersive-play {
|
|
width: 82px;
|
|
height: 82px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
color: var(--ink);
|
|
box-shadow: 0 4px 26px color-mix(in srgb,var(--accent) 18%,transparent);
|
|
}
|
|
|
|
#immersive-play svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.immersive-times {
|
|
position: absolute;
|
|
left: 4%;
|
|
right: 4%;
|
|
bottom: 5%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 16px;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.immersive-player input[type="range"] {
|
|
height: 44px;
|
|
min-width: 0px;
|
|
width: 100%;
|
|
margin: 0px;
|
|
accent-color: var(--accent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.immersive-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
max-width: 680px;
|
|
margin: auto;
|
|
}
|
|
|
|
.immersive-secondary {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.immersive-player button[aria-pressed="true"] {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
background: color-mix(in srgb,var(--accent) 12%,var(--surface));
|
|
}
|
|
|
|
.immersive-volume {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 340px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.immersive-volume input {
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
.immersive-volume output {
|
|
min-width: 48px;
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.immersive-player {
|
|
padding: 12px;
|
|
}
|
|
|
|
.immersive-stage {
|
|
min-height: 300px;
|
|
}
|
|
|
|
.immersive-caption {
|
|
top: 39%;
|
|
left: 8%;
|
|
right: 8%;
|
|
}
|
|
|
|
.immersive-caption p {
|
|
font-size: 11px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.immersive-controls {
|
|
top: 65%;
|
|
gap: 12px;
|
|
}
|
|
|
|
.immersive-controls #immersive-play {
|
|
width: 66px;
|
|
height: 66px;
|
|
}
|
|
|
|
.immersive-times {
|
|
bottom: 1%;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.immersive-bottom {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.immersive-volume {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 700px) and (min-width: 760px) {
|
|
.immersive-player {
|
|
max-width: 820px;
|
|
padding: 8px 24px 12px;
|
|
}
|
|
|
|
.immersive-stage {
|
|
max-width: 440px;
|
|
}
|
|
|
|
.immersive-caption h2 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.immersive-caption p {
|
|
font-size: 11px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.immersive-controls {
|
|
top: 67%;
|
|
gap: 14px;
|
|
}
|
|
|
|
.immersive-controls #immersive-play {
|
|
width: 58px;
|
|
height: 58px;
|
|
}
|
|
|
|
.immersive-times {
|
|
bottom: 0px;
|
|
}
|
|
|
|
.immersive-bottom {
|
|
gap: 16px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#track-arc {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.shell {
|
|
height: 100dvh;
|
|
min-height: 0px;
|
|
}
|
|
|
|
.workspace {
|
|
height: 100%;
|
|
min-height: 0px;
|
|
}
|
|
|
|
main {
|
|
height: 100%;
|
|
min-height: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 12px 22px;
|
|
margin: 0px auto;
|
|
}
|
|
|
|
.page-top {
|
|
flex-shrink: 0;
|
|
min-height: 52px;
|
|
padding: 0px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.view:not([hidden]) {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.view > .page-heading {
|
|
flex-shrink: 0;
|
|
margin: 0px;
|
|
}
|
|
|
|
.view > .page-heading:has(> div:only-child) {
|
|
display: none;
|
|
}
|
|
|
|
.view-toolbar {
|
|
margin: 0px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rail {
|
|
min-height: 0px;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.rail nav {
|
|
gap: 6px;
|
|
}
|
|
|
|
.rail nav a {
|
|
min-height: 52px;
|
|
}
|
|
|
|
.rail-collapsed .page-top {
|
|
min-height: 44px;
|
|
height: 44px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.rail-collapsed .header-right .badge, .rail-collapsed .header-temp {
|
|
display: none;
|
|
}
|
|
|
|
.rail-collapsed #rail-toggle {
|
|
min-height: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
.rail-collapsed main {
|
|
padding-top: 6px;
|
|
}
|
|
|
|
#settings footer {
|
|
padding: 12px 0px;
|
|
flex-wrap: wrap;
|
|
margin: 14px 0px;
|
|
}
|
|
|
|
#settings footer > span:last-child {
|
|
display: none;
|
|
}
|
|
|
|
.home-grid {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
grid-template-rows: 1.1fr 1fr;
|
|
}
|
|
|
|
.home-grid > .card {
|
|
min-height: 0px !important;
|
|
}
|
|
|
|
.clock-card > time {
|
|
font-size: clamp(52px, 9vh, 100px);
|
|
}
|
|
|
|
.weather-main {
|
|
margin: 8px 0px;
|
|
}
|
|
|
|
.home-grid .card {
|
|
padding: 18px;
|
|
}
|
|
|
|
.home-grid .album-art {
|
|
width: 90px;
|
|
}
|
|
|
|
.home-grid .music-card {
|
|
gap: 14px;
|
|
}
|
|
|
|
#drive .cluster {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0px;
|
|
}
|
|
|
|
.gauges {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
.gauge {
|
|
height: 100%;
|
|
min-height: 0px;
|
|
}
|
|
|
|
.gauge svg {
|
|
height: 100%;
|
|
width: 100%;
|
|
aspect-ratio: auto;
|
|
max-height: none !important;
|
|
}
|
|
|
|
.cluster-top, .cluster-bottom {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.cluster-bottom {
|
|
margin-top: 4px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.drive-links {
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.drive-links a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.drive-actions {
|
|
gap: 12px;
|
|
}
|
|
|
|
#now-playing .immersive-player {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10px 24px 18px;
|
|
gap: 8px;
|
|
}
|
|
|
|
#now-playing .immersive-stage {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
width: 100%;
|
|
max-width: min(780px, 139.5dvh - 320.85px);
|
|
margin: 0px;
|
|
aspect-ratio: 600 / 430;
|
|
max-height: 559px;
|
|
}
|
|
|
|
#now-playing .immersive-bottom {
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
margin: 0px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.immersive-stage::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 20% 15% 10%;
|
|
border-radius: 50%;
|
|
background: radial-gradient(ellipse,color-mix(in srgb,var(--accent) 17%,transparent),transparent 70%);
|
|
pointer-events: none;
|
|
animation: 7s ease-in-out 0s infinite normal none paused music-halo;
|
|
}
|
|
|
|
.playing .immersive-stage::before {
|
|
animation-play-state: running;
|
|
}
|
|
|
|
@keyframes music-halo {
|
|
50% { opacity: 1; transform: scale(1.06); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.immersive-stage::before {
|
|
animation: auto ease 0s 1 normal none running none;
|
|
}
|
|
}
|
|
|
|
.player-grid {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
}
|
|
|
|
.player-grid > .card {
|
|
min-height: 0px !important;
|
|
}
|
|
|
|
.player {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.player > * {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.player .album-art.large {
|
|
width: min(170px, 20vh);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.player h2 {
|
|
font-size: 22px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.player p {
|
|
margin: 8px 0px;
|
|
}
|
|
|
|
.player audio {
|
|
height: 44px;
|
|
}
|
|
|
|
.library {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#playlist {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
max-height: none;
|
|
overflow: hidden;
|
|
margin: 10px 0px;
|
|
}
|
|
|
|
.collection-pages {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-shrink: 0;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.collection-pages span {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.collection-pages button {
|
|
min-width: 48px;
|
|
}
|
|
|
|
.detail-grid {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
grid-template-columns: repeat(4, minmax(0px, 1fr));
|
|
grid-template-rows: repeat(2, minmax(0px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.detail-grid .card {
|
|
padding: 16px;
|
|
}
|
|
|
|
.detail-grid strong {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.detail-grid p {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.details-notice {
|
|
margin: 0px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
#applications-grid {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
grid-template-columns: repeat(3, minmax(0px, 1fr));
|
|
}
|
|
|
|
.catalog-heading {
|
|
margin: 0px;
|
|
}
|
|
|
|
.application-open {
|
|
height: 100%;
|
|
padding: 16px;
|
|
}
|
|
|
|
.application-open > .icon {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.application-open p {
|
|
min-height: 0px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
#apps > .subtle {
|
|
margin: 0px;
|
|
}
|
|
|
|
.journey-grid {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
}
|
|
|
|
.map-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0px;
|
|
}
|
|
|
|
#map-canvas {
|
|
flex: 1 1 0%;
|
|
min-height: 100px;
|
|
height: auto !important;
|
|
}
|
|
|
|
.journey-panel {
|
|
min-height: 0px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.embedded-card {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.embed-controls {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
#embed-container {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
}
|
|
|
|
#embed-container iframe {
|
|
height: 100%;
|
|
min-height: 0px;
|
|
}
|
|
|
|
.stream-card {
|
|
margin: auto 0px;
|
|
}
|
|
|
|
@media (max-height: 750px) {
|
|
.home-grid .clock-card, .home-grid .weather-card {
|
|
padding: 14px;
|
|
}
|
|
|
|
.home-grid .weather-card > p {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.home-grid .music-card h2 {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.home-grid .vehicle-card h2 {
|
|
display: none;
|
|
}
|
|
|
|
.home-grid .clock-bottom {
|
|
bottom: 14px;
|
|
}
|
|
|
|
.home-grid .weather-bottom {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.home-grid .weather-main strong {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.home-grid .weather-sun {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.cluster-top {
|
|
margin: 0px;
|
|
}
|
|
|
|
.view:not([hidden]) {
|
|
gap: 8px;
|
|
}
|
|
|
|
.player .album-art.large {
|
|
width: 80px;
|
|
}
|
|
|
|
.player p {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.detail-grid {
|
|
grid-template-columns: repeat(4, minmax(0px, 1fr));
|
|
}
|
|
|
|
.detail-grid h2 {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.detail-grid strong {
|
|
font-size: 25px;
|
|
}
|
|
|
|
.detail-grid p {
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.detail-grid .card {
|
|
padding: 12px;
|
|
}
|
|
|
|
.application-open p {
|
|
display: none;
|
|
}
|
|
|
|
.application-open > .icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: 23px;
|
|
}
|
|
|
|
.application-open h2 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.application-open {
|
|
padding: 12px;
|
|
}
|
|
|
|
.application-kind {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.catalog-heading {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 759px) {
|
|
main {
|
|
padding: 8px;
|
|
}
|
|
|
|
.home-grid {
|
|
grid-template-rows: 1fr 1fr;
|
|
}
|
|
|
|
.home-grid .card {
|
|
padding: 14px;
|
|
}
|
|
|
|
.player-grid {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto minmax(0px, 1fr);
|
|
}
|
|
|
|
.player .album-art.large, .player .eyebrow, .player #audio-message {
|
|
display: none;
|
|
}
|
|
|
|
.player {
|
|
padding: 12px;
|
|
}
|
|
|
|
.player h2 {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.player-view-link {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.player p {
|
|
margin: 4px 0px;
|
|
}
|
|
|
|
.gear {
|
|
padding: 0px;
|
|
}
|
|
|
|
.detail-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.details-notice {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.drive-links > a:last-child {
|
|
font-size: 11px;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.drive-actions {
|
|
gap: 6px;
|
|
}
|
|
|
|
.drive-actions .pill {
|
|
padding: 10px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.profile-label {
|
|
gap: 4px;
|
|
}
|
|
|
|
#applications-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.application-open h2 {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.application-open p {
|
|
display: none;
|
|
}
|
|
|
|
.application-open {
|
|
padding: 12px;
|
|
}
|
|
|
|
#now-playing .immersive-stage {
|
|
max-width: 100%;
|
|
flex: 0 1 auto;
|
|
min-height: 280px;
|
|
}
|
|
|
|
#now-playing .immersive-bottom {
|
|
gap: 8px;
|
|
}
|
|
|
|
.immersive-caption h2 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.journey-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.journey-panel {
|
|
max-height: 40vh;
|
|
}
|
|
}
|
|
|
|
main {
|
|
width: 100%;
|
|
}
|
|
|
|
dialog[open] {
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
max-height: calc(100dvh - 24px);
|
|
}
|
|
|
|
.journey-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
max-height: none;
|
|
}
|
|
|
|
.panel-content {
|
|
flex: 1 1 0%;
|
|
min-height: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel-pages {
|
|
flex-shrink: 0;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.panel-content > form {
|
|
margin: 0px;
|
|
}
|
|
|
|
.rail nav a span:last-child {
|
|
font-size: 11px;
|
|
}
|
|
|
|
@media (max-width: 759px) {
|
|
.journey-grid {
|
|
grid-template-rows: minmax(120px, 1fr) minmax(220px, 1fr);
|
|
}
|
|
|
|
.journey-panel {
|
|
max-height: none;
|
|
}
|
|
|
|
.rail nav a span:last-child {
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
|
|
dialog[open] {
|
|
display: block;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
#apps {
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
#applications-grid {
|
|
flex: 0 0 auto;
|
|
grid-auto-rows: auto;
|
|
}
|
|
|
|
.application-open {
|
|
min-height: 180px !important;
|
|
}
|
|
|
|
#apps > .page-heading {
|
|
position: sticky;
|
|
top: 0px;
|
|
z-index: 2;
|
|
background: var(--bg);
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.page-top .header-left {
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#rail-toggle, .rail-collapsed #rail-toggle {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 44px;
|
|
min-width: 44px;
|
|
height: 44px;
|
|
min-height: 44px;
|
|
padding: 0px;
|
|
line-height: 1;
|
|
font-size: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rail-collapsed .page-top {
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.rail-collapsed .header-right {
|
|
height: 44px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.rail-collapsed #fullscreen {
|
|
height: 44px;
|
|
min-height: 44px;
|
|
padding: 0px 8px;
|
|
}
|
|
|
|
.immersive-stage::before {
|
|
inset: 5% -8% -5%;
|
|
background: radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 32%,transparent) 0%,color-mix(in srgb,var(--accent) 13%,transparent) 38%,transparent 70%);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.immersive-player {
|
|
isolation: isolate;
|
|
}
|
|
|
|
@keyframes music-halo {
|
|
50% { opacity: 1; transform: scale(1.09); }
|
|
}
|
|
|
|
.gauge text {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.gauge .dial-value {
|
|
font-size: 49px;
|
|
font-weight: 600;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.gauge .dial-label {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.6px;
|
|
}
|
|
|
|
.gauge .major {
|
|
stroke-width: 2.3;
|
|
}
|
|
|
|
.dial-light {
|
|
fill: none;
|
|
stroke: transparent;
|
|
stroke-width: 2.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.luminous-dials .dial-light {
|
|
stroke: var(--accent);
|
|
filter: drop-shadow(0 0 4px var(--accent));
|
|
}
|
|
|
|
.luminous-dials .gauge .major, .luminous-dials .gauge .tick {
|
|
stroke: var(--accent);
|
|
}
|
|
|
|
.luminous-dials .gauge text {
|
|
fill: var(--accent);
|
|
}
|
|
|
|
.luminous-dials .gauge .dial-value {
|
|
fill: var(--text);
|
|
}
|
|
|
|
.luminous-dials .dial-rim {
|
|
stroke: color-mix(in srgb,var(--accent) 30%,var(--border));
|
|
}
|
|
|
|
.luminous-dials .gauge svg {
|
|
background: radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 6%,transparent),transparent 65%);
|
|
}
|
|
|
|
.gauges {
|
|
grid-template-columns: minmax(0px, 1fr) 100px minmax(0px, 1fr);
|
|
}
|
|
|
|
.gear strong {
|
|
font-size: 82px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.gear .eyebrow {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.gear > span {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.gauge .dial-number {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.digital-track, .digital-progress {
|
|
display: none;
|
|
fill: none;
|
|
stroke-width: 9;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.digital-dials .digital-track {
|
|
display: block;
|
|
stroke: color-mix(in srgb,var(--accent) 13%,var(--surface));
|
|
}
|
|
|
|
.digital-dials .digital-progress {
|
|
display: block;
|
|
stroke: var(--accent);
|
|
stroke-dasharray: 100;
|
|
stroke-dashoffset: 100;
|
|
filter: drop-shadow(0 0 5px var(--accent));
|
|
transition: stroke-dashoffset 0.45s linear;
|
|
}
|
|
|
|
.digital-dials .needle, .digital-dials .needle-hub, .digital-dials .tick, .digital-dials .dial-number, .digital-dials .dial-rim, .digital-dials .dial-light {
|
|
display: none;
|
|
}
|
|
|
|
.digital-dials .gauge .dial-value {
|
|
transform: translateY(-40px);
|
|
fill: var(--text);
|
|
font-weight: 500;
|
|
letter-spacing: -2px;
|
|
}
|
|
|
|
.digital-dials .gauge .dial-label {
|
|
font-size: 12px;
|
|
fill: var(--accent);
|
|
}
|
|
|
|
.digital-dials .gauge svg {
|
|
background: radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 14%,transparent),transparent 64%);
|
|
}
|
|
|
|
.digital-dials .gear strong {
|
|
color: var(--accent);
|
|
text-shadow: 0 0 22px color-mix(in srgb,var(--accent) 45%,transparent);
|
|
}
|
|
|
|
@media (max-height: 750px) {
|
|
.gear strong {
|
|
font-size: 62px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 759px) {
|
|
.gauges {
|
|
grid-template-columns: minmax(0px, 1fr) 44px minmax(0px, 1fr);
|
|
}
|
|
|
|
.gear {
|
|
grid-area: 1 / 2;
|
|
display: block;
|
|
}
|
|
|
|
.gauge:last-child {
|
|
grid-area: 1 / 3;
|
|
}
|
|
|
|
.gear strong {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.gear .eyebrow {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.gear > span {
|
|
font-size: 7px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.digital-progress, .aux-needle {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
.digital-unit {
|
|
display: none;
|
|
}
|
|
|
|
.digital-dials .digital-unit {
|
|
display: block;
|
|
}
|
|
|
|
.digital-dials .analog-unit {
|
|
display: none;
|
|
}
|
|
|
|
.luminous-dials .tick:not(.major) {
|
|
display: none;
|
|
}
|
|
|
|
.page-top .header-temp, .rail-collapsed .page-top .header-temp {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 759px) {
|
|
.page-top .header-temp {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.page-top .header-temp small {
|
|
display: none;
|
|
}
|
|
|
|
.page-top .header-right .badge {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.digital-dials .gauge .dial-number {
|
|
display: block;
|
|
fill: var(--accent);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.digital-dials .gauge .tick.major, .digital-dials .gauge .tick.intermediate, .luminous-dials .gauge .tick.intermediate {
|
|
display: block;
|
|
stroke: var(--accent);
|
|
}
|
|
|
|
.gauge .tick.intermediate {
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
.digital-dials .gauge .dial-value {
|
|
font-size: 46px;
|
|
}
|
|
|
|
.rpm-red-zone {
|
|
fill: none;
|
|
stroke: url("#rpm-red-zone");
|
|
stroke-width: 7;
|
|
stroke-linecap: round;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.digital-dials .rpm-red-zone, .luminous-dials .rpm-red-zone {
|
|
filter: drop-shadow(rgba(239, 83, 89, 0.467) 0px 0px 3px);
|
|
}
|
|
|
|
.gauge .tick.quarter {
|
|
display: none;
|
|
}
|
|
|
|
.gear strong {
|
|
border: 1px solid color-mix(in srgb,var(--accent) 45%,var(--border));
|
|
border-radius: 14px;
|
|
background: var(--surface2);
|
|
line-height: 1.1;
|
|
padding: 10px 4px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
.gear .eyebrow {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
@media (max-width: 759px) {
|
|
.gear strong {
|
|
border-radius: 9px;
|
|
padding: 7px 2px;
|
|
}
|
|
}
|
|
|
|
#settings .theme-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.35fr);
|
|
gap: 14px;
|
|
}
|
|
|
|
.color-setting {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
.color-setting label {
|
|
flex: 1 1 0%;
|
|
min-width: 0px;
|
|
}
|
|
|
|
.color-setting select {
|
|
width: 100%;
|
|
}
|
|
|
|
#settings #custom-color {
|
|
flex: 0 0 44px;
|
|
width: 44px;
|
|
height: 44px;
|
|
min-height: 44px;
|
|
padding: 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 50%;
|
|
background: var(--surface2);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#custom-color::-webkit-color-swatch-wrapper {
|
|
padding: 0px;
|
|
}
|
|
|
|
#custom-color::-webkit-color-swatch {
|
|
border: 0px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.digital-dials #speed-gauge svg, .luminous-dials #speed-gauge svg {
|
|
background: radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 5%,transparent),transparent 64%);
|
|
}
|
|
|
|
.digital-dials #drive .cluster {
|
|
justify-content: center;
|
|
}
|
|
|
|
.digital-dials .gauges {
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.digital-dials .cluster-bottom {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.digital-levels {
|
|
display: none;
|
|
}
|
|
|
|
.digital-dials .digital-levels {
|
|
display: block;
|
|
}
|
|
|
|
.digital-dials .gauges {
|
|
flex: 1 1 0%;
|
|
height: auto;
|
|
min-height: 0px;
|
|
}
|
|
|
|
.digital-levels .level-icon {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.digital-levels.red-zone .level-icon {
|
|
color: rgb(237, 107, 96);
|
|
}
|
|
|
|
.gauge .digital-levels .level-end {
|
|
fill: var(--muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.gauge .digital-levels .level-value {
|
|
font-size: 23px;
|
|
fill: var(--text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.digital-dials .gear {
|
|
align-self: center;
|
|
}
|
|
|
|
.analog-levels {
|
|
display: block;
|
|
}
|
|
|
|
.digital-dials .analog-levels {
|
|
display: none;
|
|
}
|
|
|
|
.analog-levels .mini-track {
|
|
fill: none;
|
|
stroke: var(--muted);
|
|
stroke-width: 2.5;
|
|
}
|
|
|
|
.analog-levels .mini-red {
|
|
fill: none;
|
|
stroke: rgb(237, 107, 96);
|
|
stroke-width: 4;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.analog-levels .mini-ticks {
|
|
fill: none;
|
|
stroke: var(--text);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.analog-levels .mini-needle {
|
|
stroke: var(--accent);
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
transition: transform 0.45s linear;
|
|
}
|
|
|
|
.gauge .analog-levels .mini-end {
|
|
font-size: 11px;
|
|
fill: var(--text);
|
|
}
|
|
|
|
.analog-levels .level-icon {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.analog-levels.red-zone .level-icon {
|
|
color: rgb(237, 107, 96);
|
|
}
|
|
|
|
.gauge .analog-levels .level-value {
|
|
font-size: 23px;
|
|
fill: var(--text);
|
|
}
|
|
|
|
body:not(.digital-dials) .gauge .dial-value {
|
|
transform: translateY(-23px);
|
|
font-size: 43px;
|
|
}
|
|
|
|
body:not(.digital-dials) .gauge .dial-label:last-of-type {
|
|
transform: translateY(-22px);
|
|
}
|
|
|
|
body:not(.digital-dials) .dial-rim {
|
|
display: none;
|
|
}
|
|
|
|
.luminous-dials .analog-levels .mini-track, .luminous-dials .analog-levels .mini-ticks {
|
|
stroke: var(--accent);
|
|
}
|
|
|
|
.luminous-dials .mini-track, .luminous-dials .mini-needle {
|
|
filter: drop-shadow(0 0 3px var(--accent));
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.mini-needle {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
body:not(.digital-dials):not(.luminous-dials) .dial-light {
|
|
stroke: var(--border);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.analog-levels .mini-needle {
|
|
transform-origin: 150px 308px;
|
|
}
|
|
|
|
.mini-hub {
|
|
fill: var(--accent);
|
|
}
|
|
|
|
#drive .gauges {
|
|
position: relative;
|
|
grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
|
|
}
|
|
|
|
#drive #speed-gauge {
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
#drive #rpm-gauge {
|
|
grid-area: 1 / 2;
|
|
}
|
|
|
|
#drive .gear {
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 86px;
|
|
display: block;
|
|
padding: 0px;
|
|
grid-area: auto;
|
|
}
|
|
|
|
#drive .gear strong {
|
|
font-size: 58px;
|
|
padding: 5px 4px;
|
|
}
|
|
|
|
#drive .gear .eyebrow {
|
|
font-size: 10px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
@media (max-height: 750px) {
|
|
#drive .gear {
|
|
top: 0px;
|
|
width: 66px;
|
|
}
|
|
|
|
#drive .gear strong {
|
|
font-size: 42px;
|
|
}
|
|
|
|
#drive .gear .eyebrow {
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 759px) {
|
|
#drive .gauges {
|
|
column-gap: 6px;
|
|
}
|
|
|
|
#drive .gear {
|
|
top: 0px;
|
|
width: 52px;
|
|
}
|
|
|
|
#drive .gear strong {
|
|
font-size: 34px;
|
|
}
|
|
|
|
#drive .gear .eyebrow {
|
|
font-size: 8px;
|
|
}
|
|
}
|
|
|
|
body:not(.digital-dials) .analog-levels {
|
|
transform: translateY(-24px);
|
|
}
|
|
|
|
.digital-dials .analog-separator {
|
|
display: none;
|
|
}
|
|
|
|
.analog-levels .level-icon {
|
|
paint-order: stroke;
|
|
stroke: currentcolor;
|
|
}
|
|
|
|
#drive .cluster {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
#drive .gauges {
|
|
column-gap: 0px;
|
|
overflow: visible;
|
|
}
|
|
|
|
#drive .gauge {
|
|
overflow: visible;
|
|
}
|
|
|
|
#drive .gauge > svg {
|
|
overflow: visible;
|
|
}
|
|
|
|
#drive .gear {
|
|
top: 0px;
|
|
}
|
|
|
|
.analog-separator {
|
|
stroke: color-mix(in srgb,var(--accent) 65%,var(--muted));
|
|
stroke-width: 2;
|
|
}
|
|
|
|
body:not(.digital-dials):not(.luminous-dials) .analog-separator {
|
|
stroke: var(--border);
|
|
filter: none;
|
|
}
|
|
|
|
.luminous-dials .analog-separator {
|
|
stroke: var(--accent);
|
|
filter: drop-shadow(0 0 4px var(--accent));
|
|
}
|
|
|
|
.analog-separator {
|
|
fill: none;
|
|
stroke-linecap: butt;
|
|
stroke-linejoin: miter;
|
|
}
|
|
|
|
.digital-dials .digital-levels .danger-segment.filled {
|
|
filter: drop-shadow(rgba(237, 107, 96, 0.376) 0px 0px 3px);
|
|
}
|
|
|
|
.gauge .digital-levels .level-end {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.digital-dials .digital-levels .danger-segment {
|
|
fill: color-mix(in srgb,#ed6b60 40%,var(--surface));
|
|
stroke: none;
|
|
}
|
|
|
|
.digital-dials .digital-levels .danger-segment.filled {
|
|
fill: rgb(237, 107, 96);
|
|
stroke: none;
|
|
}
|
|
|
|
.level-arc-track, .level-arc-progress, .level-arc-red {
|
|
fill: none;
|
|
stroke-width: 6;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.level-arc-track {
|
|
stroke: var(--border);
|
|
}
|
|
|
|
.level-arc-progress {
|
|
stroke: var(--accent);
|
|
stroke-dasharray: 100;
|
|
stroke-dashoffset: 100;
|
|
filter: drop-shadow(0 0 3px var(--accent));
|
|
transition: stroke-dashoffset 0.4s linear;
|
|
}
|
|
|
|
.level-arc-red {
|
|
stroke: rgb(237, 107, 96);
|
|
stroke-width: 3;
|
|
}
|
|
|
|
.digital-levels.red-zone .level-arc-red {
|
|
filter: drop-shadow(rgb(237, 107, 96) 0px 0px 3px);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.level-arc-progress {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.digital-levels .level-tick {
|
|
fill: none;
|
|
stroke: var(--text);
|
|
stroke-width: 1.2;
|
|
stroke-linecap: butt;
|
|
}
|
|
|
|
.digital-dials .digital-levels {
|
|
transform: translateY(-14px);
|
|
}
|
|
|
|
.digital-levels .level-arc-track {
|
|
display: none;
|
|
}
|
|
|
|
.digital-levels .level-arc-progress {
|
|
transition: none;
|
|
}
|
|
|
|
body:not(.digital-dials):not(.luminous-dials) .analog-separator {
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.luminous-dials .analog-separator {
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
.digital-levels[data-digital-level="coolantCelsius"] .level-arc-red {
|
|
display: none;
|
|
}
|
|
|
|
.digital-levels[data-digital-level="coolantCelsius"].last-level .level-arc-progress {
|
|
stroke: rgb(237, 107, 96);
|
|
filter: drop-shadow(rgb(237, 107, 96) 0px 0px 3px);
|
|
}
|
|
|
|
.digital-levels[data-digital-level="fuelPercent"].reserve-level .level-arc-progress {
|
|
stroke: rgb(237, 107, 96);
|
|
filter: drop-shadow(rgb(237, 107, 96) 0px 0px 3px);
|
|
}
|
|
|
|
.digital-levels[data-digital-level="fuelPercent"] .level-arc-red {
|
|
display: none;
|
|
}
|