From e9366b5ab27756ce545b5f9a959d186e68dc17c1 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Sun, 24 Aug 2025 16:08:06 +0800
Subject: [PATCH] feat: add height transitions for detail content and code
 block content (#628)

- [interpolate-size](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size)
- [calc-size()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size)
---
 assets/css/_core/_base.scss             |  8 ++++++++
 assets/css/_core/_root.scss             |  2 ++
 assets/css/_mixin/_details.scss         | 15 ---------------
 assets/css/_mixin/_index.scss           |  1 -
 assets/css/_partials/_details.scss      |  7 +++----
 assets/css/_partials/_single/_code.scss |  7 +++----
 6 files changed, 16 insertions(+), 24 deletions(-)
 delete mode 100644 assets/css/_mixin/_details.scss

diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
index 57e9ac76..fa734b85 100644
--- a/assets/css/_core/_base.scss
+++ b/assets/css/_core/_base.scss
@@ -63,6 +63,14 @@ img,video {
   height: auto;
 }
 
+details {
+  &.center {
+    summary {
+      text-align: center;
+    }
+  }
+}
+
 %code {
   padding: 0.2em 0.4em;
   margin: 0;
diff --git a/assets/css/_core/_root.scss b/assets/css/_core/_root.scss
index 976cd812..5c1f7cb6 100644
--- a/assets/css/_core/_root.scss
+++ b/assets/css/_core/_root.scss
@@ -27,6 +27,8 @@
   #{$rootPrefix}scrollbar-track-color: transparent;
   #{$rootPrefix}scrollbar-width: thin;
   #{$rootPrefix}scrollbar-width-legacy: 12px;
+
+  interpolate-size: allow-keywords;
 }
 
 // Dark theme
diff --git a/assets/css/_mixin/_details.scss b/assets/css/_mixin/_details.scss
deleted file mode 100644
index 9bb339fe..00000000
--- a/assets/css/_mixin/_details.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@mixin details-transition-open {
-  @include transition(max-height 0.2s cubic-bezier(0, 1, 0, 1) -0.1s);
-}
-
-@mixin details-transition-close {
-  @include transition(max-height 0.2s cubic-bezier(0.5, 0, 1, 0) 0s);
-}
-
-details {
-  &.center {
-    summary {
-      text-align: center;
-    }
-  }
-}
diff --git a/assets/css/_mixin/_index.scss b/assets/css/_mixin/_index.scss
index 2ce7d64a..38861162 100644
--- a/assets/css/_mixin/_index.scss
+++ b/assets/css/_mixin/_index.scss
@@ -1,6 +1,5 @@
 @import '_compatibility';
 @import '_link';
 @import '_blur';
-@import '_details';
 @import '_scrollbar-width';
 @import '_z-index';
diff --git a/assets/css/_partials/_details.scss b/assets/css/_partials/_details.scss
index 7b4c7c90..c1ddf934 100644
--- a/assets/css/_partials/_details.scss
+++ b/assets/css/_partials/_details.scss
@@ -17,9 +17,9 @@
   }
 
   > .details-content {
-    max-height: 0;
+    height: 0;
     overflow-y: hidden;
-    @include details-transition-open;
+    @include transition(height 0.5s ease-out);
   }
 
   &.open {
@@ -32,9 +32,8 @@
     }
 
     > .details-content {
-      max-height: 100%;
+      height: auto;
       @include border-radius(0 0 $global-border-radius $global-border-radius);
-      @include details-transition-close;
     }
   }
 
diff --git a/assets/css/_partials/_single/_code.scss b/assets/css/_partials/_single/_code.scss
index ff96c79a..39575490 100644
--- a/assets/css/_partials/_single/_code.scss
+++ b/assets/css/_partials/_single/_code.scss
@@ -82,9 +82,9 @@ pre:not([data-processed]) {
 
       // delayed loading table-wrapper
       & + .table-wrapper {
-        max-height: 0;
+        height: 0;
         @include border-radius(0 0 $global-border-radius $global-border-radius);
-        @include details-transition-open;
+        @include transition(height 0.5s ease-out);
       }
 
       [data-theme='dark'] & {
@@ -227,8 +227,7 @@ pre:not([data-processed]) {
       }
 
       .table-wrapper {
-        max-height: 100%;
-        @include details-transition-close;
+        height: auto;
       }
 
       .arrow {