testeranto 0.189.0 → 0.198.0

package/testeranto/App.css

@@ -11329,49 +11329,9 @@ fieldset:disabled .btn {
   font-weight: 900;
   font-style: normal;
 }
-.video-container {
-  position: relative;
-  width: 100%;
-  height: 315px;
-  margin: 1rem 0;
-  background: #1a1a1a;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-}
-.video-container canvas {
-  width: 100%;
-  height: 100%;
-}
-body {
-  font-family: "M PLUS Rounded 1c", sans-serif;
-  color: var(--dark);
-  line-height: 1.6;
-  margin: 0;
-  padding: 0;
-  min-height: 100vh;
-  position: relative;
-  transition: background-color 0.3s ease;
-}
 tr:last-child td {
   border-bottom: none;
 }
-p,
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6,
-li {
-  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
-}
 pre {
   white-space: pre-wrap;
   word-wrap: break-word;
@@ -11541,495 +11501,76 @@ h6,
   z-index: 1000;
   isolation: isolate;
 }
-@keyframes gradientBG {
-  0%, 100% {
-    background-position: 0% 50%, 0% 0%;
-  }
-  25% {
-    background-position: 100% 50%, 100% 50%;
-  }
-  50% {
-    background-position: 50% 100%, 50% 100%;
-  }
-  75% {
-    background-position: 100% 0%, 0% 100%;
-  }
-}
-@keyframes rotateGradient {
-  0% {
-    --angle: 45deg;
-  }
-  100% {
-    --angle: 405deg;
-  }
-}
-@keyframes ripple {
-  0%, 100% {
-    background-size: 300% 300%, 100% 100%;
-  }
-  50% {
-    background-size: 300% 300%, 200% 200%;
-  }
-}
-:root[data-bs-theme=light-vibrant] {
-  --primary: #ff2d75;
-  --secondary: #00e5ff;
-  --accent: #ffeb3b;
-  --light: #fff9fb;
-  --dark: #3a1c42;
-  --success: #00ffa3;
-  --danger: #ff4081;
-  --content-bg: rgba(255, 249, 251, 0.85);
-  --semi-trans-bg: rgba(255, 249, 251, 0.8);
-}
-[data-bs-theme=light-vibrant] body {
-  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 25%, #80deea 50%, #4dd0e1 75%, #00bcd4 100%);
-  background-attachment: fixed;
-  background-size: 200% 200%;
-  animation: gradientBG 15s ease infinite;
-}
-:root[data-bs-theme=dark-vibrant] {
-  --primary: #ff2d75;
-  --secondary: #00e5ff;
-  --accent: #ffeb3b;
-  --light: #1a1a2e;
-  --dark: #e6e6e6;
-  --success: #00ffa3;
-  --danger: #ff4081;
-  --content-bg: rgba(26, 26, 46, 0.85);
-  --semi-trans-bg: rgba(26, 26, 46, 0.8);
-}
-[data-bs-theme=dark-vibrant] body {
-  background: linear-gradient(135deg, #16213e 0%, #1a1a2e 25%, #0f3460 50%, #533483 75%, #e94560 100%);
-  background-attachment: fixed;
-  background-size: 200% 200%;
-  animation: gradientBG 15s ease infinite;
-}
-html[data-bs-theme=dark] body {
-  --primary: #ff6b6b;
-  --secondary: #4ecdc4;
-  --yellow: #e6b422;
-  --green: #00b4a0;
-  --light: #292f36;
-  --dark: #f1faee;
-  --content-bg: rgba(30, 42, 58, 0.7);
-  --bg-start: #0a0f1f;
-  --bg-mid: #1a2b50;
-  --bg-sunrise: rgba(176, 125, 133, 1);
-  --bg-sunrise2: #b07d85;
-  --bg-end: #7fb3d5;
-  --semi-trans-bg: #292f3649;
-}
-:root[data-bs-theme=light-grayscale] {
-  --primary: #666666;
-  --secondary: #999999;
-  --accent: #cccccc;
-  --light: #f5f5f5;
-  --dark: #333333;
-  --success: #888888;
-  --danger: #777777;
-  --content-bg: rgba(245, 245, 245, 0.9);
-  --semi-trans-bg: rgba(245, 245, 245, 0.8);
-}
-[data-bs-theme=light-grayscale] body {
-  background: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 25%, #c0c0c0 50%, #b0b0b0 75%, #a0a0a0 100%);
-  background-attachment: fixed;
-  background-size: 200% 200%;
-  animation: gradientBG 15s ease infinite;
-  filter: grayscale(100%);
-  min-height: 100vh;
-  position: relative;
-}
-[data-bs-theme=light-grayscale] img {
-  filter: grayscale(100%);
-}
-:root[data-bs-theme=dark-grayscale] {
-  --primary: #999999;
-  --secondary: #777777;
-  --accent: #555555;
-  --light: #222222;
-  --dark: #e0e0e0;
-  --success: #666666;
-  --danger: #888888;
-  --content-bg: rgba(34, 34, 34, 0.9);
-  --semi-trans-bg: rgba(34, 34, 34, 0.8);
-}
-[data-bs-theme=dark-grayscale] body {
-  background: linear-gradient(135deg, #222222 0%, #333333 25%, #444444 50%, #555555 75%, #666666 100%);
-  background-attachment: fixed;
-  background-size: 200% 200%;
-  animation: gradientBG 15s ease infinite;
-  filter: grayscale(100%);
-  min-height: 100vh;
-  position: relative;
-}
-[data-bs-theme=dark-grayscale] img {
-  filter: grayscale(100%);
-}
-:root[data-bs-theme=sepia] {
-  --primary: #8b6b4a;
-  --secondary: #a38b6f;
-  --accent: #c0a080;
-  --light: #f4ecd8;
-  --dark: #3a3226;
-  --success: #8b8b4a;
-  --danger: #8b4a4a;
-  --content-bg: rgba(244, 236, 216, 0.9);
-  --semi-trans-bg: rgba(244, 236, 216, 0.8);
-}
-[data-bs-theme=sepia] body {
-  background: linear-gradient(135deg, #f4ecd8 0%, #e8d8b5 25%, #dcc8a2 50%, #d0b88f 75%, #c4a87c 100%);
-  background-attachment: fixed;
-  background-size: 200% 200%;
-  animation: gradientBG 15s ease infinite;
-  filter: sepia(30%);
-  min-height: 100vh;
-  position: relative;
-}
-[data-bs-theme=sepia] img {
-  filter: sepia(30%);
-}
-:root[data-bs-theme=protanopia] {
-  --primary: #3366cc;
-  --secondary: #66aa00;
-  --accent: #ffcc00;
-  --light: #f8f9fa;
-  --dark: #333333;
-  --success: #00aa66;
-  --danger: #cc3300;
-  --content-bg: rgba(248, 249, 250, 0.9);
-  --semi-trans-bg: rgba(248, 249, 250, 0.8);
-}
-[data-bs-theme=protanopia] body {
-  background: linear-gradient(135deg, #f8f9fa 0%, #e0e8ff 100%);
-  color: #333;
-}
-:root[data-bs-theme=deuteranopia] {
-  --primary: #cc6633;
-  --secondary: #3366cc;
-  --accent: #ffcc00;
-  --light: #f8f9fa;
-  --dark: #333333;
-  --success: #0066cc;
-  --danger: #cc0033;
-  --content-bg: rgba(248, 249, 250, 0.9);
-  --semi-trans-bg: rgba(248, 249, 250, 0.8);
-}
-[data-bs-theme=deuteranopia] body {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffe0e0 100%);
-  color: #333;
-}
-:root[data-bs-theme=tritanopia] {
-  --primary: #cc3300;
-  --secondary: #00aa66;
-  --accent: #ffcc00;
-  --light: #f8f9fa;
-  --dark: #333333;
-  --success: #00aa66;
-  --danger: #cc0033;
-  --content-bg: rgba(248, 249, 250, 0.9);
-  --semi-trans-bg: rgba(248, 249, 250, 0.8);
-}
-[data-bs-theme=tritanopia] body {
-  background: linear-gradient(135deg, #f8f9fa 0%, #e0ffe0 100%);
-  color: #333;
-}
-:root[data-bs-theme=daily] {
-  --primary: #f7d62e;
-  --secondary: #1a7eae;
-  --accent: #f9f91c;
-  --light: #f9fbf0;
-  --dark: #00192d;
-  --success: #00b4a0;
-  --danger: #ff6b6b;
-  --content-bg: rgba(249, 251, 240, 0.85);
-  --semi-trans-bg: rgba(249, 251, 240, 0.8);
-}
-[data-bs-theme=daily] {
-}
-[data-bs-theme=daily] #sunrise {
-  display: block;
-}
-body:not([data-bs-theme=daily]) {
-}
-#starsContainer {
-  position: fixed;
-  top: 0;
-  left: -50%;
-  width: 200%;
-  height: 50%;
-  z-index: -100;
-  opacity: 0;
-  perspective: 350;
-  perspective-origin: 50% 300%;
-  overflow: hidden;
-}
-#stars {
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="10" cy="10" r="0.5" fill="white"/><circle cx="30" cy="25" r="0.5" fill="white"/><circle cx="70" cy="15" r="0.5" fill="white"/><circle cx="90" cy="40" r="0.5" fill="white"/><circle cx="20" cy="60" r="0.5" fill="white"/><circle cx="50" cy="70" r="0.5" fill="white"/><circle cx="80" cy="85" r="0.5" fill="white"/></svg>');
-  position: absolute;
-  width: 200%;
-  height: 200%;
-  left: -50%;
-  bottom: 0;
-  opacity: 0.5;
-  transform: rotateX(-90deg);
-}
-#sun {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  background: radial-gradient(circle at 50% 25%, rgb(242, 248, 247) 0%, rgb(249, 249, 28) 3%, rgb(247, 214, 46) 8%, rgb(248, 200, 95) 12%, rgb(201, 165, 132) 30%, rgb(115, 130, 133) 51%, rgb(46, 97, 122) 85%, rgb(24, 75, 106) 100%);
-  z-index: -99;
-  opacity: 0.5;
-}
-#sunDay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  background: radial-gradient(circle at 50% 25%, rgba(252, 255, 251, 0.9) 0%, rgba(253, 250, 219, 0.4) 30%, rgba(226, 219, 197, 0.01) 70%, transparent 100%);
-  z-index: -98;
-  opacity: 0.5;
-}
-#sunSet {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  background: radial-gradient(circle at 50% 25%, rgba(254, 255, 255, 0.8) 5%, rgb(236, 255, 0) 10%, rgb(253, 50, 41) 25%, rgb(243, 0, 0) 40%, rgb(93, 0, 0) 100%);
-  z-index: -97;
-  opacity: 0.3;
-}
-#sky {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  background: linear-gradient(to bottom, rgb(249, 251, 240) 10%, rgb(215, 253, 254) 20%, rgb(167, 222, 253) 40%, rgb(110, 175, 255) 100%);
-  z-index: -96;
-  opacity: 0.52;
-}
-#horizon {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  background: linear-gradient(to bottom, rgba(212, 87, 43, 0.9) 0%, rgba(246, 149, 52, 0.8) 20%, rgba(24, 75, 106, 0) 100%);
-  z-index: -95;
-  opacity: 0.99;
-}
-#horizonNight {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  background: linear-gradient(to bottom, rgb(57, 167, 255) 0%, rgb(13, 98, 245) 20%, rgba(0, 11, 22, 0.1) 60%);
-  z-index: -94;
-  opacity: 0;
-}
-#moon {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  background: radial-gradient(circle at 40% 55%, rgb(249, 249, 250) -1%, rgb(189, 255, 254) 1%, rgb(8, 49, 78) 1%, rgb(8, 26, 56) 10%, rgb(4, 16, 46) 40%, rgb(2, 8, 13) 70%);
-  z-index: -93;
-  opacity: 0;
-}
-#mountainRange {
-  position: fixed;
-  left: 0;
-  width: 100%;
-  bottom: 50%;
-  z-index: -92;
-}
-#mountain {
-  border-bottom: 100px solid #000;
-  border-right: 100px solid transparent;
-  width: 0;
-  height: 0;
-  position: absolute;
-  left: 0;
-  bottom: 50%;
-  z-index: -91;
-}
-#water {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  background: linear-gradient(to bottom, rgb(0, 25, 45) 0%, rgb(14, 71, 117) 35%, rgb(26, 126, 174) 70%, rgb(62, 168, 220) 100%);
-  z-index: -90;
-}
-#waterReflectionContainer {
-  position: fixed;
-  top: 50%;
-  left: -3%;
-  width: 103%;
-  height: 50%;
-  -webkit-perspective: 30;
-  perspective-origin: 50% -12%;
-  overflow: hidden;
-  z-index: -89;
-}
-#waterReflectionMiddle {
-  position: absolute;
-  top: 0;
-  left: -50%;
-  width: 200%;
-  height: 55%;
-  background: radial-gradient(50% 0px, rgb(247, 177, 72) 3%, rgb(248, 175, 65) 6%, rgba(207, 62, 30, 0.4) 35%, rgba(176, 91, 48, 0.1) 45%, rgba(141, 88, 47, 0) 60%, rgba(116, 82, 63, 0) 70%, rgba(44, 65, 68, 0) 80%, rgba(7, 19, 31, 0) 100%);
-  transform: rotateX(45deg);
-  z-index: -88;
-  opacity: 0.7;
-}
-#waterDistance {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.2) 44%, rgba(0, 0, 0, 0.65) 95%, rgba(0, 0, 0, 0.62) 100%);
-  z-index: -87;
-}
-#darknessOverlaySky {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  background-color: #000;
-  opacity: 0;
-  z-index: -86;
-}
-#darknessOverlay {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  background-color: #000;
-  opacity: 0;
-  z-index: -85;
-}
-#oceanRippleContainer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  z-index: -84;
-}
-#oceanRipple {
-  position: absolute;
-  left: 0%;
-  bottom: 0;
-  width: 100%;
-  height: 50%;
-  background-image: repeating-linear-gradient(175deg, rgba(165, 165, 165, 0.08) 43%, rgba(175, 175, 175, 0.08) 45%, rgba(235, 235, 235, 0.08) 49%, rgba(195, 195, 195, 0.08) 50%, rgba(165, 165, 165, 0.08) 54%);
-  opacity: 0.5;
-  z-index: -83;
-}
-@keyframes sunMovement {
-  0%, 100% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  25% {
-    opacity: 0.5;
-  }
-  50% {
-    transform: translateY(0%);
-    opacity: 1;
-  }
-  75% {
-    opacity: 0.5;
-  }
-}
-@keyframes gradientBG {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
+:root {
+  --bs-heading-color: rgba(0, 0, 0, 0.9);
+  --bs-modal-color: rgba(0, 0, 0, 0.9);
+  --frosted-bg: rgba(255, 255, 255, 0.2);
+  --frosted-border: rgba(255, 255, 255, 0.3);
+  --frosted-text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.3), 1px 1px 0 rgba(0, 0, 0, 0.3);
+  --frosted-inset-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
 }
-#sky {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  background: linear-gradient(to bottom, #6eafff 0%, #a7defd 35%, #f9fbf0 60%);
-  z-index: -100;
-}
-html[data-bs-theme=light] body {
-  --primary: #0a2342;
-  --secondary: #4ecdc4;
-  --accent: #ff6b6b;
-  --light: #f8f9fa;
-  --dark: #333;
-  --success: #28a745;
-  --danger: #dc3545;
-  --content-bg: rgba(30, 42, 58, 0.7);
-  --semi-trans-bg: rgba(248, 249, 250, 0.7);
-}
-html[data-bs-theme=light] body body::before {
-  background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 35%, #dee2e6 50%, #ced4da 75%, #adb5bd 85%);
-}
-html[data-bs-theme=light] body pre,
-html[data-bs-theme=light] body code {
-  background-color: #f8f9fa;
-  color: #333;
-}
-html[data-bs-theme=light] body table,
-html[data-bs-theme=light] body tr,
-html[data-bs-theme=light] body td {
-  background-color: var(--semi-trans-bg) !important;
-  border-color: #dee2e6 !important;
+[data-bs-theme=dark] {
+  --bs-heading-color: rgba(255, 255, 255, 0.9);
+  --bs-modal-color: rgba(255, 255, 255, 0.9);
+  --frosted-bg: rgba(0, 0, 0, 0.2);
+  --frosted-border: rgba(0, 0, 0, 0.3);
+  --frosted-text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.3), 1px 1px 0 rgba(0, 0, 0, 0.3);
+  --frosted-inset-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 }
 pre,
-code {
+code,
+.modal-content,
+.accordion-button,
+.theme-card {
   white-space: pre-wrap;
   word-wrap: break-word;
   max-width: 80ch;
   overflow-x: auto;
   display: block;
   padding: 1rem;
-  border-radius: 4px;
+  border-radius: 8px;
   font-family: monospace;
   line-height: 1.4;
-  color: #333;
-  background-color: rgba(255, 255, 255, 0.1);
+  color: var(--bs-modal-color);
+  background-color: var(--frosted-bg);
   backdrop-filter: blur(16px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--frosted-border);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), var(--frosted-inset-shadow);
   isolation: isolate;
 }
-#settings-button {
-  margin-left: 0.5rem;
-  backdrop-filter: blur(20px) saturate(200%);
-  transition: all 0.3s ease;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--light-text);
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  backdrop-filter: var(--text-panel-blur);
+  background-color: var(--text-panel-bg);
+  border-radius: 8px;
+  text-shadow: var(--text-shadow-heavy);
+  box-shadow: var(--panel-border), 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin: 0.5rem 0;
 }
-#settings-button:hover {
-  transform: scale(1.05);
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+p,
+.lead {
+  color: var(--light-text);
+  text-shadow: var(--text-shadow-light);
+  backdrop-filter: var(--text-panel-blur);
+  background-color: var(--text-panel-bg);
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: var(--panel-border);
+  margin: 1rem 0;
 }
-#settings-button:hover #gear-icon-settings {
-  animation: spin 1s linear infinite;
-  transform-origin: center;
+.modal-content {
+  --bs-modal-color: var(--bs-heading-color);
+  background-color: var(--frosted-bg);
+  backdrop-filter: blur(24px) saturate(200%);
+  border: 1px solid var(--frosted-border);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), var(--frosted-inset-shadow);
 }
 .theme-card {
   cursor: pointer;