From 9bdbb12839738d856cc2c92c3a64cd2cdcdf7b97 Mon Sep 17 00:00:00 2001
From: Pablo Hellmann <phtijger@gmail.com>
Date: Mon, 25 Aug 2025 16:32:39 +0200
Subject: [PATCH] migrated to sdnext.css

---
 javascript/black-teal.css | 108 --------------------------------------
 javascript/sdnext.css     |  89 +++++++++++++++++--------------
 2 files changed, 49 insertions(+), 148 deletions(-)

diff --git a/javascript/black-teal.css b/javascript/black-teal.css
index 7bef75083..e3f0081b0 100644
--- a/javascript/black-teal.css
+++ b/javascript/black-teal.css
@@ -315,112 +315,4 @@ textarea[rows="1"] { height: 33px !important; width: 99% !important; padding: 8p
   --button-transition: none;
   --size-9: 64px;
   --size-14: 64px;
-}
-
-.splash {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, 0.8);
-}
-
-.motd {
-  margin-top: 1em;
-  color: var(--body-text-color-subdued);
-  font-family: monospace;
-  font-variant: all-petite-caps;
-  font-size: 1.2em;
-}
-
-.splash-img {
-  margin: 0;
-  width: 512px;
-  height: 512px;
-  background-repeat: no-repeat;
-  animation: color 8s infinite alternate, move 3s infinite alternate;
-}
-
-.loading {
-  color: white;
-  position: border-box;
-  top: 85%;
-  font-size: 1.5em;
-}
-
-.loader {
-  width: 100px;
-  height: 100px;
-  border: var(--spacing-md) solid transparent;
-  border-radius: 50%;
-  border-top: var(--spacing-md) solid var(--primary-600);
-  animation: spin 2s linear infinite, pulse 1.5s ease-in-out infinite;
-  position: border-box;
-}
-
-.loader::before,
-.loader::after {
-  content: "";
-  position: absolute;
-  top: 6px;
-  bottom: 6px;
-  left: 6px;
-  right: 6px;
-  border-radius: 50%;
-  border: var(--spacing-md) solid transparent;
-}
-
-.loader::before {
-  border-top-color: var(--primary-900);
-  animation: spin 3s linear infinite;
-}
-
-.loader::after {
-  border-top-color: var(--primary-300);
-  animation: spin 1.5s linear infinite;
-}
-
-@keyframes move {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-}
-
-@keyframes color {
-  0% {
-    filter: hue-rotate(0deg);
-  }
-  100% {
-    filter: hue-rotate(360deg);
-  }
 }
\ No newline at end of file
diff --git a/javascript/sdnext.css b/javascript/sdnext.css
index 337637568..bb42a73b8 100644
--- a/javascript/sdnext.css
+++ b/javascript/sdnext.css
@@ -1877,70 +1877,72 @@ div:has(>#tab-gallery-folders) {
 }
 
 .splash {
-  display: block;
-  height: 100vh;
-  left: 0;
   position: fixed;
-  text-align: center;
   top: 0;
+  left: 0;
   width: 100vw;
+  height: 100vh;
   z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 .motd {
+  margin-top: 1em;
   color: var(--body-text-color-subdued);
   font-family: monospace;
   font-variant: all-petite-caps;
-  margin-top: 2em;
+  font-size: 1.2em;
 }
 
 .splash-img {
-  animation: color 10s infinite alternate;
-  background-repeat: no-repeat;
-  background-size: contain;
-  height: 512px;
-  margin: 10% auto 0 auto;
-  max-width: 80vw;
+  margin: 0;
   width: 512px;
+  height: 512px;
+  background-repeat: no-repeat;
+  animation: color 8s infinite alternate, move 3s infinite alternate;
 }
 
 .loading {
   color: white;
-  left: 50%;
-  position: absolute;
-  top: 20%;
-  transform: translateX(-50%);
+  position: border-box;
+  top: 85%;
+  font-size: 1.5em;
 }
 
 .loader {
-  animation: spin 4s linear infinite;
+  width: 100px;
+  height: 100px;
   border: var(--spacing-md) solid transparent;
   border-radius: 50%;
   border-top: var(--spacing-md) solid var(--primary-600);
-  height: 300px;
-  position: relative;
-  width: 300px;
+  animation: spin 2s linear infinite, pulse 1.5s ease-in-out infinite;
+  position: border-box;
 }
 
-.loader::before, .loader::after {
-  border: var(--spacing-md) solid transparent;
-  border-radius: 50%;
-  bottom: 6px;
+.loader::before,
+.loader::after {
   content: "";
-  left: 6px;
   position: absolute;
-  right: 6px;
   top: 6px;
+  bottom: 6px;
+  left: 6px;
+  right: 6px;
+  border-radius: 50%;
+  border: var(--spacing-md) solid transparent;
 }
 
 .loader::before {
-  animation: 3s spin linear infinite;
   border-top-color: var(--primary-900);
+  animation: spin 3s linear infinite;
 }
 
 .loader::after {
-  animation: spin 1.5s linear infinite;
   border-top-color: var(--primary-300);
+  animation: spin 1.5s linear infinite;
 }
 
 .docs-search textarea {
@@ -2098,12 +2100,14 @@ div:has(>#tab-gallery-folders) {
 }
 
 @keyframes move {
-  from {
-    background-position-x: 0, -40px;
+  0% {
+    transform: translateY(0);
   }
-
-  to {
-    background-position-x: 0, 40px;
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
   }
 }
 
@@ -2111,21 +2115,26 @@ div:has(>#tab-gallery-folders) {
   from {
     transform: rotate(0deg);
   }
-
   to {
     transform: rotate(360deg);
   }
 }
 
-@keyframes color {
-  from {
-
-    filter: hue-rotate(0deg)
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
   }
+  50% {
+    transform: scale(1.1);
+  }
+}
 
-  to {
-
-    filter: hue-rotate(360deg)
+@keyframes color {
+  0% {
+    filter: hue-rotate(0deg);
+  }
+  100% {
+    filter: hue-rotate(360deg);
   }
 }