chore: update scroll shadow indicators to use dynamic theme-based background colors and adjust width

Author: yilanboy

resources/css/app.css

@@ -254,19 +254,19 @@ pre.shiki code span.line.diff.add::after {
 
 /* scroll shadow indicators for code blocks */
 .scroll-indicator-right {
-    background: linear-gradient(to left, --alpha(var(--color-emerald-400) / 12%), transparent);
+    background: linear-gradient(to left, var(--pre-light-bg), transparent);
 }
 
 .scroll-indicator-left {
-    background: linear-gradient(to right, --alpha(var(--color-emerald-400) / 12%), transparent);
+    background: linear-gradient(to right, var(--pre-light-bg), transparent);
 }
 
 html[data-theme='dark'] .scroll-indicator-right {
-    background: linear-gradient(to left, --alpha(var(--color-lividus-700) / 25%), transparent);
+    background: linear-gradient(to left, var(--pre-dark-bg), transparent);
 }
 
 html[data-theme='dark'] .scroll-indicator-left {
-    background: linear-gradient(to right, --alpha(var(--color-lividus-700) / 25%), transparent);
+    background: linear-gradient(to right, var(--pre-dark-bg), transparent);
 }
 
 /* Alpine.js */

resources/ts/reader-helpers/code-block-helper.ts

@@ -80,7 +80,7 @@ function createScrollIndicator(side: 'left' | 'right'): HTMLDivElement {
         'absolute', 'top-0', 'bottom-0',
         side === 'right' ? 'right-0' : 'left-0',
         side === 'right' ? SCROLL_INDICATOR_RIGHT_CLASS : SCROLL_INDICATOR_LEFT_CLASS,
-        'w-8',
+        'w-12',
         'pointer-events-none',
         'transition-opacity', 'duration-300'
     );
@@ -186,6 +186,9 @@ window.codeBlockHelper = function(element: HTMLElement): void {
             preTag.outerHTML
         );
 
+        wrapper.style.setProperty('--pre-light-bg', preTag.style.backgroundColor);
+        wrapper.style.setProperty('--pre-dark-bg', preTag.style.getPropertyValue('--shiki-dark-bg').trim());
+
         const leftScrollIndicator = createScrollIndicator('left');
         const rightScrollIndicator = createScrollIndicator('right');