style: format the UI shell and component styles

This commit is contained in:
Sameh Khamis committed 2026-09-13 04:26:11 -07:00
1 parent f5ef9091f0
commit 03ad8142e6
32 files changed
+4126 -1546

No files matched your search

+25 -12
View File
@@ -69,7 +69,8 @@
outline-offset: 2px;
}
html, body {
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
@@ -185,7 +186,9 @@ body.cockpit-mode #cockpit-cloud-effects.active {
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 300ms ease, visibility 300ms ease;
transition:
opacity 300ms ease,
visibility 300ms ease;
}
.celestial-ring-overlay.visible {
@@ -222,19 +225,27 @@ body.cockpit-mode #cockpit-cloud-effects.active {
font-weight: 400;
font-style: normal;
line-height: 1;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 20;
transition: opacity 120ms linear;
user-select: none;
}
.celestial-sun {
color: rgba(231, 194, 72, 0.92);
text-shadow: 0 0 7px rgba(231, 194, 72, 0.72), 0 0 18px rgba(231, 194, 72, 0.3);
text-shadow:
0 0 7px rgba(231, 194, 72, 0.72),
0 0 18px rgba(231, 194, 72, 0.3);
}
.celestial-moon {
color: rgba(55, 211, 239, 0.84);
text-shadow: 0 0 7px rgba(55, 211, 239, 0.65), 0 0 17px rgba(55, 211, 239, 0.25);
text-shadow:
0 0 7px rgba(55, 211, 239, 0.65),
0 0 17px rgba(55, 211, 239, 0.25);
}
#celestial-toggle:disabled {
@@ -499,7 +510,7 @@ body.cockpit-mode #cockpit-cloud-effects.active {
#title-bar .title-logo::before,
#title-bar .title-logo::after {
--radio-broadcast-opacity: .28;
--radio-broadcast-opacity: 0.28;
content: '';
position: absolute;
z-index: 1;
@@ -517,7 +528,7 @@ body.cockpit-mode #cockpit-cloud-effects.active {
}
#title-bar .title-logo::after {
--radio-broadcast-opacity: .17;
--radio-broadcast-opacity: 0.17;
top: -15px;
width: 27px;
height: 13px;
@@ -529,12 +540,15 @@ body.cockpit-mode #cockpit-cloud-effects.active {
animation: title-radio-broadcast 1.8s ease-in-out infinite;
}
#title-bar.radio-broadcasting .title-logo::after { animation-delay: .28s; }
#title-bar.radio-broadcasting .title-logo::after {
animation-delay: 0.28s;
}
@keyframes title-radio-broadcast {
0%, 100% {
opacity: calc(var(--radio-broadcast-opacity) * .55);
transform: translateX(-50%) scale(.94);
0%,
100% {
opacity: calc(var(--radio-broadcast-opacity) * 0.55);
transform: translateX(-50%) scale(0.94);
}
50% {
opacity: var(--radio-broadcast-opacity);
@@ -608,4 +622,3 @@ body.cockpit-mode #cockpit-cloud-effects.active {
text-shadow: 0 0 20px var(--accent-glow);
transition: var(--transition-smooth);
}