diff --git a/jey_theme/public/css/shared.css b/jey_theme/public/css/shared.css index a5bf11c..5b799da 100644 --- a/jey_theme/public/css/shared.css +++ b/jey_theme/public/css/shared.css @@ -873,6 +873,80 @@ textarea.form-control:focus, box-shadow: none !important; } +/* ========================================================================== + Desktop Modal (module icons picker) — caption overflow + clean heading + ========================================================================== */ + +/* Give the 4-col icon grid room between cells so captions don't collide */ +#desktop-modal .icons-container .icons { + gap: 12px 8px !important; + padding: 12px 0 !important; +} + +/* Each icon: constrain to its grid track and center contents */ +#desktop-modal .desktop-icon { + min-width: 0 !important; + display: flex !important; + flex-direction: column !important; + align-items: center !important; + text-align: center !important; +} + +/* Caption wraps to 2 lines max, truncates with ellipsis, never overflows column */ +#desktop-modal .desktop-icon .icon-caption { + width: 100% !important; + max-width: 100% !important; + padding: 0 4px !important; + margin-top: 14px !important; +} + +#desktop-modal .desktop-icon .icon-title { + width: 100% !important; + max-width: 100% !important; + display: -webkit-box !important; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden !important; + text-overflow: ellipsis !important; + overflow-wrap: anywhere !important; + word-break: break-word !important; + line-height: 1.25 !important; + white-space: normal !important; +} + +/* Strip the themed gradient/border off the desktop-modal header — title only, no bar */ +#desktop-modal .modal-header.desktop-modal-heading { + background: transparent !important; + border-bottom: 0 !important; + box-shadow: none !important; +} + +#desktop-modal .modal-header.desktop-modal-heading .modal-title, +#desktop-modal .modal-header.desktop-modal-heading .title-input-label span { + background: transparent !important; + box-shadow: none !important; + text-shadow: none !important; +} + +/* Everything inside the desktop-modal renders text crisply — no inherited blur */ +#desktop-modal .icon-title, +#desktop-modal .icon-caption { + text-shadow: none !important; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Grow to content: no inner scrollbar when icons fit */ +#desktop-modal .modal-body.desktop-modal-body { + overflow: visible !important; + max-height: none !important; +} + +#desktop-modal .icons-container { + overflow: visible !important; + max-height: none !important; +} + /* ========================================================================== Icon Animations — Shared (all themes) ========================================================================== */ diff --git a/jey_theme/public/css/theme_chrome.css b/jey_theme/public/css/theme_chrome.css index 0bc5bef..b845c49 100644 --- a/jey_theme/public/css/theme_chrome.css +++ b/jey_theme/public/css/theme_chrome.css @@ -581,12 +581,12 @@ [data-jey-theme="chrome"] .modal-content { background: linear-gradient(45deg, #ccc 3%, #e8e8e8 12%, #d5d5d5 30%, #eee 50%, #d5d5d5 70%, #e8e8e8 88%, #ccc 97%) !important; - border: 2px solid transparent !important; - border-image: conic-gradient(from 140deg, #a0a0a0 0deg, #e8e8e8 40deg, #888 80deg, #ddd 120deg, #a0a0a0 170deg, #eee 210deg, #999 260deg, #d0d0d0 310deg, #a0a0a0 360deg) 1 !important; + border: 1px solid #999 !important; box-shadow: 6px 6px 24px rgba(0,0,0,0.25), -3px -3px 8px rgba(255,255,255,0.15), - inset 0 1px 0 rgba(255,255,255,0.6) !important; + inset 0 1px 0 rgba(255,255,255,0.6), + inset 0 0 0 1px rgba(255,255,255,0.35) !important; } [data-jey-theme="chrome"] .modal-header {