align transition styles

diff --git a/src/components/metadata.astro b/src/components/metadata.astro
index ac88704df9a6023ba0df26924322b55934d0d6bf..91d5ef39c2bf9a6ffcddd9977e18be5437634dd2 100644 (file)
--- a/src/components/metadata.astro
+++ b/src/components/metadata.astro
@@ -32,12 +32,10 @@ const date = formatDate(entry.data.date);
         font-size: 0.8rem;
         &::details-content {
             opacity: 0;
-            block-size: 0;
         }
         &[open]::details-content {
             opacity: 1;
-            block-size: auto;
-            transition: content-visibility 0.4s allow-discrete, opacity 0.4s, block-size 0.4s;
+            transition: all 0.4s linear;
         }
     }
     summary:hover {

diff --git a/src/components/ui/spoiler.astro b/src/components/ui/spoiler.astro
index 9598ac61e234890e0f1fe3d504daaaa587c4e82f..28aaad94dd287217b9846f4173ee360320c001a5 100644 (file)
--- a/src/components/ui/spoiler.astro
+++ b/src/components/ui/spoiler.astro
@@ -9,10 +9,17 @@
         background-color: #000000;
         margin-bottom: 1rem;
         padding: 0.5rem;
-    }
-    details.spoiler[open] {
-        color: unset;
-        background-color: unset;
-        border: 0.1rem solid;
+        &[open] {
+            color: unset;
+            background-color: unset;
+            border: 0.1rem solid;
+        }
+        &::details-content {
+            opacity: 0;
+        }
+        &[open]::details-content {
+            opacity: 1;
+            transition: all 0.4s linear;
+        }
     }
 </style>
\ No newline at end of file