/** * @file * Ensure Juicer post modal renders above Drupal's admin toolbar. * * Drupal's Olivero theme wraps the content area in .layout-main-wrapper with * position:relative and z-index:2, creating a stacking context. The toolbar * uses z-index up to 1250. The modal's fixed overlay is trapped inside the * low stacking context and cannot escape it via z-index alone. * * Solution: JS toggles a 'juicer-modal-open' class on when the modal * backdrop is visible, and this rule raises the main wrapper above the toolbar. */ body.juicer-modal-open .layout-main-wrapper { z-index: 999999 !important; } /* Loading spinner for pagination / infinite scroll. */ .juicer-spinner { display: inline-block; width: 24px; height: 24px; animation: juicer-spin 0.7s linear infinite; vertical-align: middle; border: 3px solid rgb(255, 107, 0, 0.2); border-top-color: #ff6b00; border-radius: 50%; } /* Centered spinner for infinite scroll trigger. */ .juicer-spinner--block { display: block; width: 32px; height: 32px; margin: 24px auto; border-width: 4px; } @keyframes juicer-spin { to { transform: rotate(360deg); } } /* Neutralize Juicer's hover effects injected via API \3c style> tag. */ .jcr-post:hover { transform: none !important; box-shadow: none !important; } /* * Render the feed as a full-height static grid inside the CMS block. * * Juicer's embed traps the feed in a viewport when a fixed height is configured * (.jcr-feed-scroll-y: overflow-y:auto + a pixel height) or when the autoscroll * theme is on (.jcr-autoscroll-container clips to max-height:100vh). Override * both so every post is visible and the block grows with its content. The * !important height beats the Alpine :style="{ height }" inline binding. * * This replaces the old approach of stripping jcr-max-h-screen / jcr-overflow-* * utility classes in JS, which no longer exist now that Juicer's embed moved * off Tailwind. The neutral .jcr-feed-clip layout (no configured height) is left * untouched. */ .juicer-drupal-feed .jcr-feed-scroll-y, .juicer-drupal-feed .jcr-autoscroll-container { overflow: visible !important; height: auto !important; max-height: none !important; } /* * Autoscroll is disabled in the static block (its x-data is removed in * juicer-feed.js), so hide the now-inert pause/play toggle. */ .juicer-drupal-feed .jcr-autoscroll-toggle { display: none !important; }