/* Collapsed image-module picker (home + create composers). Mirrors the canvas capability picker: the primary tab stays visible and the remaining modules fold into one compact trigger that opens an icon grid on . The hidden .module-picker-source buttons stay the authoritative option list for the pages' existing tab-switching code, so this file only styles the new trigger/menu surfaces and the pill container that hosts them. */ .module-picker { position: relative; min-width: 0; flex: 0 1 auto; } /* Authoritative option list: kept in the markup for the page's existing [data-tab] / [data-home-image-module] code paths, never visible. */ .module-picker-source { display: none; } .module-picker-trigger { position: relative; isolation: isolate; display: flex; align-items: center; gap: 6px; min-width: 168px; min-height: 32px; max-width: 100%; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.55); cursor: pointer; font-size: 12px; font-weight: 600; text-align: left; transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .module-picker-trigger:hover, .module-picker-trigger.is-open, .module-picker-trigger.active { background: rgba(255, 255, 255, 0.05); color: #fff; } .module-picker-trigger.is-empty { color: rgba(255, 255, 255, 0.45); } .module-picker-trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); } /* Active state reuses the page's .tab-item.active language (soft fill + the conic-gradient hairline ring from the tapnow theme). */ body.create-page .module-picker-trigger.active::before { content: ""; position: absolute; inset: 0; z-index: 0; display: block; padding: 1px; border-radius: inherit; pointer-events: none; background: conic-gradient( from 270deg at 50% 50%, transparent 0%, rgba(144, 144, 144, 0.45) 25%, transparent 50%, rgba(144, 144, 144, 0.45) 75%, transparent 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } .module-picker-trigger-icon { display: inline-flex; flex: 0 0 auto; } .module-picker-trigger-icon .ui-icon { width: 15px; height: 15px; } .module-picker-trigger-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .module-picker-trigger-arrow { display: inline-flex; flex: 0 0 auto; transition: transform 180ms ease; } .module-picker-trigger-arrow .ui-icon { width: 13px; height: 13px; color: rgba(255, 255, 255, 0.4); } .module-picker-trigger.is-open .module-picker-trigger-arrow { transform: rotate(180deg); } .module-picker-trigger:hover .module-picker-trigger-arrow .ui-icon, .module-picker-trigger.active .module-picker-trigger-arrow .ui-icon { color: rgba(255, 255, 255, 0.7); } /* The image-tool tab row becomes the canvas-style dark pill once it hosts the picker; other .tabs rows (video tools) are untouched. */ body.create-page .image-composer-panel .tabs:has(.module-picker), body.home-page.create-page .home-input-panel .tabs:has(.module-picker) { border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; background: #0f0f0f !important; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.055) !important; padding: 4px !important; } .module-picker-menu { position: fixed; z-index: 1400; box-sizing: border-box; padding: 6px; overflow-x: hidden; overflow-y: auto; transform-origin: left top; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: #1c1c1e; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42), inset 0 0.5px 0 rgba(255, 255, 255, 0.08); animation: modulePickerMenuIn 170ms cubic-bezier(0.22, 1, 0.36, 1) both; } .module-picker-menu.is-dropup { transform-origin: left bottom; animation-name: modulePickerMenuUp; } .module-picker-menu-grid { display: grid; grid-template-columns: repeat(var(--module-picker-columns, 3), minmax(0, 1fr)); gap: 5px; } .module-picker-option { position: relative; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px 8px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.045); color: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.05); cursor: pointer; text-align: center; font-size: 12px; font-weight: 600; transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .module-picker-option:hover:not(:disabled) { background: rgba(255, 255, 255, 0.09); color: #fff; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08); } .module-picker-option.is-keyboard-active:not(:disabled) { background: rgba(255, 255, 255, 0.12); color: #fff; } .module-picker-option:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); } .module-picker-option.is-selected { background: #4a4a4a; color: #f5f5f5; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12); } .module-picker-option.is-selected:hover { background: #565656; } .module-picker-option:disabled, .module-picker-option:disabled:hover { background: transparent; color: rgba(255, 255, 255, 0.25); box-shadow: none; cursor: not-allowed; } .module-picker-option-icon { display: inline-flex; } .module-picker-option-icon .ui-icon { width: 18px; height: 18px; } .module-picker-option-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .module-picker-option-check { position: absolute; top: 5px; right: 6px; display: inline-flex; } .module-picker-option-check .ui-icon { width: 12px; height: 12px; } @keyframes modulePickerMenuIn { from { opacity: 0; transform: translate3d(0, -5px, 0) scale(0.98); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes modulePickerMenuUp { from { opacity: 0; transform: translate3d(0, 5px, 0) scale(0.98); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .module-picker-trigger-arrow, .module-picker-menu { transition: none; animation: none; } } @media (max-width: 520px) { .module-picker-trigger { min-width: 0; flex: 1 1 auto; } }