refactor: docubook@latest template nextjs-docker

styles/globals.css

@@ -1,7 +1,6 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 @plugin '@tailwindcss/typography';
 
-
 @custom-variant dark (&:is(.dark *));
 
 @utility container {
@@ -85,8 +84,27 @@
     }
   }
 
-  @keyframes shiny-text {
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
 
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes shiny-text {
     0%,
     90%,
     100% {
@@ -109,7 +127,6 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
-
   *,
   ::after,
   ::before,
@@ -119,6 +136,14 @@
   }
 }
 
+@utility animate-collapsible-down {
+  animation: collapsible-down 0.2s ease-out;
+}
+
+@utility animate-collapsible-up {
+  animation: collapsible-up 0.2s ease-out;
+}
+
 @utility animate-shine {
   --animate-shine: shine var(--duration) infinite linear;
   animation: var(--animate-shine);
@@ -206,7 +231,7 @@
     overflow-x: auto;
   }
 
-  pre>code {
+  pre > code {
     display: grid;
     max-width: inherit !important;
     padding: 14px 0 !important;
@@ -230,20 +255,19 @@
   }
 
   .highlight-line {
-    @apply bg-primary/5 border-l-2 border-primary/30;
+    @apply bg-primary/5 border-primary/30 border-l-2;
   }
 
   .rehype-code-title {
-    @apply px-2 -mb-8 w-full text-sm pb-5 font-medium mt-5 font-code;
+    @apply font-code mt-5 -mb-8 w-full px-2 pb-5 text-sm font-medium;
   }
 
-  .highlight-comp>code {
+  .highlight-comp > code {
     background-color: transparent !important;
   }
 }
 
 @layer utilities {
-
   @keyframes shine {
     0% {
       background-position: 0% 0%;
@@ -257,4 +281,4 @@
       background-position: 0% 0%;
     }
   }
-}
+}