🚑 fix invisible elements to to safari ios bug

okfde · Jan 30, 2025 · cde95d9 · cde95d9
1 parent d69f355
commit cde95d9
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/src/assets/style.css b/src/assets/style.css
@@ -8,6 +8,30 @@
   --color-primary-green: #7ed956;
   --color-primary-yellow: #fae357;
   --color-primary-cyan: #b6eef2;
+
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+
+  --color-purple-50: #faf5ff;
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d5ff;
+  --color-purple-300: #d8b4fe;
+  --color-purple-400: #c084fc;
+  --color-purple-500: #a855f7;
+  --color-purple-600: #9333ea;
+  --color-purple-700: #7e22ce;
+  --color-purple-800: #6b21a8;
+  --color-purple-900: #581c87;
+  --color-purple-950: #3b0764;
 }
 
 .btn {
@@ -26,7 +50,7 @@
 
 .btn-outline {
   @apply inline-flex items-center rounded-full px-4 py-2 font-bold text-purple-700 hover:text-white;
-  @apply border border-purple-700 outline-none hover:bg-purple-800 hover:text-white focus:ring-3 focus:ring-purple-600/50 motion-safe:transition;
+  @apply border border-solid border-purple-700 outline-none hover:bg-purple-800 hover:text-white focus:ring-3 focus:ring-purple-600/50 motion-safe:transition;
 }
 
 .btn-text {
@@ -45,6 +69,14 @@ h2 {
   @apply mb-2 text-xl font-medium md:text-4xl;
 }
 
+.bg-white\/75 {
+  background-color: rgba(255, 255, 255, 0.75);
+}
+
+.bg-white\/50 {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .slide-enter-active,
   .slide-back-enter-active {

diff --git a/src/pages/methodik.astro b/src/pages/methodik.astro
@@ -255,6 +255,6 @@ const questions = (await getCollection('questions')).map((q) => q.data)
 
   th,
   td {
-    @apply border border-gray-300 p-2;
+    @apply border border-solid border-gray-300 p-2;
   }
 </style>
diff --git a/src/views/Weights.vue b/src/views/Weights.vue
@@ -92,7 +92,7 @@ const setWeight = (questionId: string, e: Event) => {
 input[type='checkbox'] {
   appearance: none;
 
-  @apply relative h-8 w-8 appearance-none rounded-full border border-gray-500 outline-none focus:ring-purple-600/75 motion-safe:transition-all motion-safe:duration-300;
+  @apply relative h-8 w-8 appearance-none rounded-full border border-solid border-gray-500 outline-none focus:ring-purple-600/75 motion-safe:transition-all motion-safe:duration-300;
 }
 
 input[type='checkbox']::before {