feat(code): add shadow effect for code blocks (#713)

assets/css/_core/_mixin/_box-shadow.scss

@@ -0,0 +1,26 @@
+/// Mixin to apply box-shadow with timing control
+/// @param {String} $when - When to show shadow: always | hover | never (default: always)
+/// @param {List} $shadow - The box-shadow value
+/// @example
+///   @include box-shadow;
+///   @include box-shadow(hover);
+///   @include box-shadow(never);
+///   @include box-shadow(always, 0 4px 8px rgba(0, 0, 0, 0.15));
+@mixin box-shadow(
+  $when: always,
+  $shadow: (0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04))
+) {
+  @if $when == always {
+    box-shadow: $shadow;
+  } @else if $when == hover {
+    transition: box-shadow 0.3s fixit-var(bezier);
+
+    &:hover {
+      box-shadow: $shadow;
+    }
+  } @else if $when == never {
+    box-shadow: none;
+  } @else {
+    @warn "box-shadow mixin: unknown $when value '#{$when}'. Expected always, hover, or never.";
+  }
+}

assets/css/_core/_mixin/_index.scss

@@ -1,8 +1,9 @@
-@import 'theme-vars';
 @import 'blur';
 @import 'border-radius';
+@import 'box-shadow';
 @import 'compatibility';
 @import 'link';
 @import 'loading';
 @import 'scrollbar-width';
+@import 'theme-vars';
 @import 'z-index';

assets/css/_core/_root.scss

@@ -55,6 +55,9 @@
     scrollbar-width: thin,
     scrollbar-width-legacy: 12px,
 
+    // Animations
+    bezier: cubic-bezier(.4, 0, .2, 1),
+
     // Other utilities
     breadcrumb-height: 0px,
     divider-edge-weak: linear-gradient(to right, transparent, fixit-var(divider-bg, #d0d0d5), transparent),

assets/css/_page/_media.scss

@@ -154,7 +154,8 @@
     }
   }
   [data-header-desktop='sticky'] {
-    .page .content .highlight.code-block .code-header {
+    .page .content .highlight.code-block .code-header,
+    .page .content .code-tabs .tabs-header {
       top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
     }
   }
@@ -193,7 +194,8 @@
     }
   }
   [data-header-mobile='sticky'] {
-    .page .content .highlight.code-block .code-header {
+    .page .content .highlight.code-block .code-header,
+    .page .content .code-tabs .tabs-header {
       top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
     }
   }

assets/css/_page/_single/_code.scss

@@ -132,6 +132,14 @@ pre {
 
   // code fences blocks wrapped
   &.code-block {
+    &[data-shadow='always'] {
+      @include box-shadow(always);
+    }
+
+    &[data-shadow='hover'] {
+      @include box-shadow(hover);
+    }
+
     &.instant-height .code-wrapper {
       transition: height 0s !important;
     }
@@ -267,10 +275,7 @@ pre {
 
     &.is-fullscreen {
       position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       margin: 0 !important;
       overflow: auto;
       @include z-index(fixed, 1);
@@ -567,6 +572,14 @@ pre {
   border: 1px solid fixit-var(global-border-color);
   @include border-radius;
 
+  &[data-shadow='always'] {
+    @include box-shadow(always);
+  }
+
+  &[data-shadow='hover'] {
+    @include box-shadow(hover);
+  }
+
   &:has(.code-block.active .code-expand-btn) {
     margin-bottom: 1rem;
   }
@@ -585,6 +598,9 @@ pre {
     font-size: fixit-var(code-block-font-size);
     color: fixit-var(code-header-color);
     background-color: fixit-var(code-header-background-color);
+    position: sticky;
+    top: fixit-var(breadcrumb-height);
+    @include z-index(base);
     @include border-radius(top);
 
     .tabs-items {
@@ -662,6 +678,7 @@ pre {
       display: none;
       margin: 0;
       @include border-radius(bottom);
+      @include box-shadow(never);
 
       &.active {
         display: block;

assets/css/_page/_single/_shortcodes/_admonition.scss

@@ -60,7 +60,8 @@
       margin: 0;
     }
 
-    .code-block .code-header {
+    .code-block .code-header,
+    .code-tabs .tabs-header {
       top: initial !important;
     }
   }

assets/js/theme.js

@@ -639,7 +639,7 @@ class FixIt {
       // insert container before the first block
       const $firstBlock = $tabs[0];
       $firstBlock.parentNode.insertBefore($container, $firstBlock);
-      
+
       const activeTabIndex = $tabs.findIndex(tab => tab.classList.contains('active'));
       $tabs.forEach(($tab, index) => {
         const title = $tab.dataset.tabTitle || 'Code';
@@ -671,7 +671,15 @@ class FixIt {
           $tabs.forEach(b => b.classList.remove('active'));
           $tab.classList.add('active');
 
-          // 4. move new buttons to actions
+          // 4. sync shadow mode data attribute
+          const shadowMode = $tab?.dataset.shadow;
+          if (shadowMode) {
+            $container.dataset.shadow = shadowMode;
+          } else {
+            delete $container.dataset.shadow;
+          }
+
+          // 5. move new buttons to actions
           const $codeHeader = $tab.querySelector('.code-header');
           if ($codeHeader) {
             $codeHeader.querySelectorAll('.action-btn').forEach(btn => $actions.appendChild(btn));