mawei/StarPilot
1
0
Fork 0
mirror of https://github.com/firestar5683/StarPilot.git synced 2026-09-09 17:53:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

trying to make firefox less laggy

Browse Source
This commit is contained in:
Prabhaav Pillai
2026-09-09 02:14:29 -04:00
parent f47322cbee
commit b3a14cb48d
1 changed files with 83 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
starpilot/system/the_galaxy/assets/mobile/css/material.css
+83 -146
View File
@@ -36,7 +36,6 @@
--glass-border-light: rgba(255, 255, 255, 0.2);
--glass-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.35);
--glass-blur: blur(4px);
--card-scroll-bg: rgba(22, 18, 38, 0.95);
--glass-text: #f3f2f8;
--glass-accent: #9d72ff;
@@ -106,7 +105,6 @@
--surface-container: rgba(255, 255, 255, 0.75);
--surface-container-high: rgba(255, 255, 255, 0.95);
--surface-container-low: rgba(240, 243, 252, 0.75);
--card-scroll-bg: rgba(245, 246, 252, 0.96);
--on-surface: #171526;
--on-surface-variant: #5f5b7d;
@@ -186,44 +184,78 @@ body {
radial-gradient(ellipse at 85% 75%, rgba(85, 45, 180, 0.18) 0%, transparent 60%),
radial-gradient(circle at 75% 15%, rgba(77, 232, 232, 0.12) 0%, transparent 48%);
pointer-events: none;
transform: translateZ(0);
will-change: transform;
isolation: isolate;
contain: strict;
transform: translateZ(0);
}
#galaxy-bg::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 200%;
background-image:
radial-gradient(1px 1px at 30px 40px, #ffffff, rgba(255,255,255,0)),
radial-gradient(1px 1px at 110px 220px, rgba(220, 200, 255, 0.8), rgba(255,255,255,0)),
radial-gradient(1.5px 1.5px at 200px 90px, #ffffff, rgba(255,255,255,0)),
radial-gradient(1.5px 1.5px at 310px 340px, rgba(160, 240, 255, 0.9), rgba(255,255,255,0)),
radial-gradient(1px 1px at 410px 150px, #ffffff, rgba(255,255,255,0)),
radial-gradient(1.5px 1.5px at 640px 110px, #ffffff, rgba(255,255,255,0)),
radial-gradient(1px 1px at 890px 180px, #ffffff, rgba(255,255,255,0));
background-size: 800px 400px;
top: 0;
left: 0;
width: 1px;
height: 1px;
border-radius: 50%;
background: #ffffff;
box-shadow:
30px 40px #ffffff,
110px 220px rgba(220, 200, 255, 0.8),
200px 90px #ffffff,
310px 340px rgba(160, 240, 255, 0.9),
410px 150px #ffffff,
640px 110px #ffffff,
890px 180px #ffffff,
150px 450px #ffffff,
270px 580px rgba(220, 200, 255, 0.8),
450px 510px rgba(160, 240, 255, 0.9),
720px 470px #ffffff,
950px 530px #ffffff,
30px 640px #ffffff,
110px 820px rgba(220, 200, 255, 0.8),
200px 690px #ffffff,
310px 940px rgba(160, 240, 255, 0.9),
410px 750px #ffffff,
640px 710px #ffffff,
890px 780px #ffffff,
150px 1050px #ffffff,
270px 1180px rgba(220, 200, 255, 0.8),
450px 1110px rgba(160, 240, 255, 0.9),
720px 1070px #ffffff,
950px 1130px #ffffff;
opacity: 0.5;
animation: gx-drift-layer1 240s linear infinite;
will-change: transform;
transform: translate3d(var(--gx-para-x), 0, 0);
}
#galaxy-bg::after {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 200%;
background-image:
radial-gradient(1.5px 1.5px at 80px 140px, #ffffff, rgba(255,255,255,0)),
radial-gradient(2px 2px at 240px 390px, rgba(190, 235, 255, 0.9), rgba(255,255,255,0)),
radial-gradient(1.5px 1.5px at 380px 60px, rgba(230, 195, 255, 0.85), rgba(255,255,255,0)),
radial-gradient(2px 2px at 560px 480px, #ffffff, rgba(255,255,255,0)),
radial-gradient(1.5px 1.5px at 730px 220px, rgba(255, 255, 255, 0.9), rgba(255,255,255,0));
background-size: 900px 450px;
opacity: 0.6;
top: 0;
left: 0;
width: 2px;
height: 2px;
border-radius: 50%;
background: #ffffff;
box-shadow:
80px 140px #ffffff,
240px 390px rgba(190, 235, 255, 0.9),
380px 60px rgba(230, 195, 255, 0.85),
560px 480px #ffffff,
730px 220px rgba(255, 255, 255, 0.9),
80px 590px #ffffff,
320px 520px rgba(255, 255, 255, 0.9),
610px 380px rgba(190, 235, 255, 0.9),
80px 740px #ffffff,
240px 990px rgba(190, 235, 255, 0.9),
380px 660px rgba(230, 195, 255, 0.85),
560px 1080px #ffffff,
730px 820px rgba(255, 255, 255, 0.9),
80px 1190px #ffffff,
320px 1120px rgba(255, 255, 255, 0.9),
610px 980px rgba(190, 235, 255, 0.9);
opacity: 0.65;
animation: gx-drift-layer2 150s linear infinite;
will-change: transform;
transform: translate3d(var(--gx-para-x), 0, 0);
}
#galaxy-bg .galaxy-hero {
@@ -234,16 +266,28 @@ body {
background: #ffffff;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
animation: galaxy-twinkle 6s ease-in-out infinite alternate;
will-change: opacity, transform;
}
@keyframes gx-drift-layer1 {
0% { transform: translate3d(var(--gx-para-x, 0px), 0, 0); }
100% { transform: translate3d(var(--gx-para-x, 0px), -600px, 0); }
}
@keyframes gx-drift-layer2 {
0% { transform: translate3d(var(--gx-para-x, 0px), 0, 0); }
100% { transform: translate3d(var(--gx-para-x, 0px), -600px, 0); }
}
@keyframes galaxy-twinkle {
0%, 100% { opacity: 0.3; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.2); }
50% { opacity: 1.0; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
#galaxy-bg, #galaxy-bg::before, #galaxy-bg::after, #galaxy-bg .galaxy-hero,
#galaxy-stars, #galaxy-stars .galaxy-hero {
#galaxy-bg::before,
#galaxy-bg::after,
#galaxy-bg .galaxy-hero {
animation: none !important;
}
}
@@ -259,9 +303,11 @@ body {
[data-theme="light"] #galaxy-bg::before,
[data-theme="light"] #galaxy-bg::after,
[data-theme="light"] #galaxy-bg .galaxy-hero {
opacity: 0.12;
opacity: 0.18;
}
[v-cloak] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); }
@@ -304,8 +350,6 @@ ul { list-style: none; margin: 0; padding: 0; }
position: sticky;
top: 0;
z-index: var(--z-appbar);
transform: translateZ(0);
isolation: isolate;
}
.gx-appbar__pill {
@@ -325,7 +369,8 @@ ul { list-style: none; margin: 0; padding: 0; }
transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.gx-appbar__back {
.gx-appbar__back,
.gx-theme-toggle {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
@@ -339,7 +384,8 @@ ul { list-style: none; margin: 0; padding: 0; }
transition: transform var(--motion-fast), background-color var(--motion-fast);
}
.gx-appbar__back:active { transform: scale(0.92); }
.gx-appbar__back:active,
.gx-theme-toggle:active { transform: scale(0.92); }
.gx-appbar__title {
background: linear-gradient(135deg, #8b6cc5 0%, #5ec8c8 55%, #d4789c 100%);
@@ -411,27 +457,6 @@ ul { list-style: none; margin: 0; padding: 0; }
.gx-back-btn { display: none; }
.gx-menu-btn { display: inline-flex; }
.gx-theme-toggle {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 50%;
box-shadow: var(--glass-shadow);
color: var(--glass-text);
flex: none;
height: var(--touch-target);
width: var(--touch-target);
transition: transform var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast);
}
.gx-theme-toggle:active { transform: scale(0.92); }
[data-theme="light"] .gx-theme-toggle {
border: 1.5px solid var(--primary);
box-shadow: 0 2px 8px rgba(120, 73, 232, 0.2);
}
.gx-searchwrap {
align-items: center;
display: flex;
@@ -513,10 +538,7 @@ ul { list-style: none; margin: 0; padding: 0; }
position: fixed;
bottom: calc(18px + env(safe-area-inset-bottom, 0px));
left: 50%;
transform: translateX(-50%) translateZ(0);
will-change: transform;
isolation: isolate;
contain: layout style;
transform: translateX(-50%);
z-index: 1000;
display: flex;
@@ -592,81 +614,7 @@ ul { list-style: none; margin: 0; padding: 0; }
box-shadow: var(--elev-1);
margin-bottom: var(--sp-4);
overflow: hidden;
transition: transform var(--motion-fast), box-shadow var(--motion-fast), background-color 0.15s ease-out;
}
/* Surgical content-visibility for top-level non-collapsible cards */
.dh-card:not(.dh-stat),
.gx-content > div > .gx-card {
content-visibility: auto;
contain-intrinsic-size: 280px;
contain-intrinsic-size: auto 280px;
}
.dh-stat {
content-visibility: auto;
contain-intrinsic-size: 110px;
contain-intrinsic-size: auto 110px;
}
/* Disarm containment on collapsible sections and nested cards */
.gx-card:has(.gx-section__body),
.gx-card .gx-card,
.gx-tree-node .gx-card {
content-visibility: visible !important;
contain-intrinsic-size: none !important;
}
/* Velocity-Adaptive Glass: bypass blur on scrolling cards with contrast boost */
body.is-scrolling .gx-card,
body.is-scrolling .gx-tile {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: var(--card-scroll-bg) !important;
}
/* Layer 2: Celestial Starlight Canopy */
#galaxy-stars {
position: fixed;
inset: 0;
z-index: 20;
pointer-events: none;
overflow: hidden;
contain: strict;
transform: translateZ(0);
}
#galaxy-stars .galaxy-hero {
position: absolute;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.95) 0%,
rgba(157, 114, 255, 0.65) 35%,
rgba(77, 232, 232, 0.2) 65%,
transparent 100%
);
box-shadow:
0 0 8px rgba(157, 114, 255, 0.4),
0 0 3px rgba(255, 255, 255, 0.8);
mix-blend-mode: screen;
will-change: transform, opacity;
animation: galaxy-twinkle 6s ease-in-out infinite alternate;
}
/* Keep decorative animation out of modal backdrops and drawer content. */
body:has(.gx-scrim, .gx-underlay, .gx-drawer.open) #galaxy-stars {
display: none;
}
[data-theme="light"] #galaxy-stars {
opacity: 0.4;
}
[data-theme="light"] #galaxy-stars .galaxy-hero {
background: radial-gradient(circle at center, #7849e8 0%, #b38fff 60%, rgba(120, 73, 232, 0) 100%);
box-shadow: 0 0 4px rgba(120, 73, 232, 0.45), 0 0 8px rgba(77, 232, 232, 0.3);
mix-blend-mode: normal;
transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}
.gx-unit-note {
@@ -944,10 +892,6 @@ input[type="range"].gx-slider:active::-webkit-slider-thumb {
border: 1.5px solid var(--primary);
}
/* Fields are fluid and shrinkable: never let a select/textarea blow past its
container (intrinsic width from options/content) or refuse to shrink inside
a flex row. Contexts that want a full-width field (e.g. stacked toggle rows,
.gx-field--full) still stretch explicitly. */
.gx-field {
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--glass-border);
@@ -1373,8 +1317,6 @@ input[type="color"].gx-color {
margin-top: var(--sp-5);
}
/* Native-style bottom sheet used for fullscreen player overlays. Kept as a
sibling of gx-sheet so confirm dialogs keep their centered look. */
.gx-scrim--bottomsheet {
align-items: flex-end;
padding: var(--sp-4) 0 calc(var(--bottomnav-height) + var(--sp-3));
@@ -1536,9 +1478,6 @@ input[type="color"].gx-color {
.gx-fade-enter-active, .gx-fade-leave-active { transition: opacity var(--motion-base); }
.gx-fade-enter-from, .gx-fade-leave-to { opacity: 0; }
/* Keep the underlay (and star suppression) until the drawer finishes closing. */
.gx-underlay.gx-fade-leave-active { transition: opacity var(--motion-slow); }
.gx-slide-enter-active, .gx-slide-leave-active {
transition: transform var(--motion-base), opacity var(--motion-base);
}
@@ -1552,8 +1491,6 @@ input[type="color"].gx-color {
}
.gx-collapse-enter-from, .gx-collapse-leave-to { max-height: 0; opacity: 0; }
/* ---- PWA install guidance (Galaxy page) ---- */
.gx-install__body {
display: grid;
gap: var(--sp-3);
@@ -1644,4 +1581,4 @@ input[type="color"].gx-color {
.gx-menu-btn { display: inline-flex; }
.gx-back-btn { display: none; }
.gx-content { padding-bottom: var(--sp-6); }
}
}