From b3a14cb48de36a579b286c1ed18979c9ecce90bf Mon Sep 17 00:00:00 2001
From: Prabhaav Pillai <prabhaav@msu.edu>
Date: Wed, 9 Sep 2026 02:14:29 -0400
Subject: [PATCH] trying to make firefox less laggy

---
 .../the_galaxy/assets/mobile/css/material.css | 229 +++++++-----------
 1 file changed, 83 insertions(+), 146 deletions(-)

diff --git a/starpilot/system/the_galaxy/assets/mobile/css/material.css b/starpilot/system/the_galaxy/assets/mobile/css/material.css
index ac27f505e..fdc0b7ecc 100644
--- a/starpilot/system/the_galaxy/assets/mobile/css/material.css
+++ b/starpilot/system/the_galaxy/assets/mobile/css/material.css
@@ -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); }
-}
+}
\ No newline at end of file