/* ========================================================================== ASSETSTATION MAIN STYLESHEET Consolidated from index.html inline styles ========================================================================== */ /* ========================================================================== SECTION 1: CORE THEME, TABS, RESULTS GRID, MODALS & GLOBAL LAYOUT ========================================================================== */ /* Theme */ @keyframes premiumAppLoad { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes folderTransition { 0% { opacity: 0; transform: translateY(8px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; } body { background-color: #0D0D0F; color: #E5E5E5; font-family: 'Inter', 'Segoe UI', sans-serif; margin: 0; padding: 12px; overflow-x: hidden; user-select: none; cursor: default; letter-spacing: 0.2px; } body.is-launching { overflow-y: hidden !important; animation: premiumAppLoad 0.4s ease forwards; } body.editor-open, html.editor-open, body.modal-open, html.modal-open { overflow: hidden !important; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; } /* Tabs */ /* 1. Fluid Flex Container */ .tabs { display: flex; flex-wrap: wrap; /* Allows them to neatly flow into 2 rows naturally */ justify-content: center; gap: 6px; padding-bottom: 12px; margin-bottom: 15px; border-bottom: 1px solid #222; } /* 2. Fluid Tabs */ .tab { /* 1. MAGIC MATH: 18% forces exactly 5 items on the top row, and 4 on the bottom */ flex: 1 1 18%; /* 2. CRITICAL: Allow the bottom 4 items to stretch perfectly flush to the edges */ max-width: none; /* 3. Keep this so text smoothly adds "..." instead of forcing a 3rd row */ min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; font-size: 11px; cursor: pointer; padding: 6px 12px; background: #1C1C22; border-radius: 6px; border: 1px solid #2A2A35; color: #B0B0B0; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s; font-weight: 500; } /* 3. Smart Text Truncation (Only when needed) */ .tab .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* 4. Protect the icon from squishing */ .tab .icon { flex-shrink: 0; } .tab .icon, .tab .text { pointer-events: none; } /* Extreme Squeeze: Show Icons Only */ @media (max-width: 380px) { .tab .text { display: none; } .tab { padding: 8px 0; /* Squares them up perfectly */ } } .tab:hover { background: #252530; border-color: #383845; color: #FFF; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.4); } .tab.active { background: #1A1A24; color: #FFF; font-weight: 600; transform: translateY(-1px); } /* Tab colors - High Contrast Neon/Laser Aesthetic */ .tab[data-id="community"] { border-bottom: 1px solid #2A2A35; } .tab[data-id="community"].active { background: rgba(88, 101, 242, 0.15); border: 1px solid #5865F2; color: #A5AFFF; box-shadow: 0 0 15px rgba(88,101,242,0.4), inset 0 0 8px rgba(88,101,242,0.2); } .tab[data-id="favorites"] { border-bottom: 1px solid #2A2A35; } .tab[data-id="favorites"].active { background: rgba(241, 196, 15, 0.15); border: 1px solid #f1c40f; color: #FCE181; box-shadow: 0 0 15px rgba(241,196,15,0.4), inset 0 0 8px rgba(241,196,15,0.2); } .tab[data-id="ai"] { border-bottom: 1px solid #2A2A35; } .tab[data-id="ai"].active { background: rgba(232, 67, 147, 0.15); border: 1px solid #e84393; color: #F5A3C7; box-shadow: 0 0 15px rgba(232,67,147,0.4), inset 0 0 8px rgba(232,67,147,0.2); } .tab[data-id="global_lib"] { border-bottom: 1px solid #2A2A35; } .tab[data-id="global_lib"].active { background: rgba(155, 89, 182, 0.15); border: 1px solid #9b59b6; color: #D2A8E5; box-shadow: 0 0 15px rgba(155,89,182,0.4), inset 0 0 8px rgba(155,89,182,0.2); } .tab[data-id="colors"] { border-bottom: 1px solid #2A2A35; } .tab[data-id="colors"].active { background: rgba(255, 0, 242, 0.15); border: 1px solid #ff00f2; color: #FF99FA; box-shadow: 0 0 15px rgba(255,0,242,0.4), inset 0 0 8px rgba(255,0,242,0.2); } .tab[data-id="assets"] { border-bottom: 1px solid #2A2A35; } .tab[data-id="assets"].active { background: rgba(46, 204, 113, 0.15); border: 1px solid #2ecc71; color: #8DF0B5; box-shadow: 0 0 15px rgba(46,204,113,0.4), inset 0 0 8px rgba(46,204,113,0.2); } .tab[data-id="library"] { border-bottom: 1px solid #2A2A35; } .tab[data-id="library"].active { background: rgba(230, 126, 34, 0.15); border: 1px solid #e67e22; color: #F4B882; box-shadow: 0 0 15px rgba(230,126,34,0.4), inset 0 0 8px rgba(230,126,34,0.2); } .tab[data-id="import"] { border-bottom: 1px solid #2A2A35; } .tab[data-id="import"].active { background: rgba(149, 165, 166, 0.15); border: 1px solid #95a5a6; color: #C9D5D6; box-shadow: 0 0 15px rgba(149,165,166,0.4), inset 0 0 8px rgba(149,165,166,0.2); } .tab[data-id="ai_assistant"] { border-bottom: 1px solid #2A2A35; } .tab[data-id="ai_assistant"].active { background: rgba(167, 119, 227, 0.15); border: 1px solid #a777e3; color: #D8C2F5; box-shadow: 0 0 15px rgba(167,119,227,0.4), inset 0 0 8px rgba(167,119,227,0.2); } /* Search row */ .search-row { display: flex; gap: 8px; margin-bottom: 18px; align-items: center; position: relative; z-index: 1000; } input { box-sizing: border-box; background: #08080A; border: 1px solid #25252A; color: #FFF; padding: 0 14px; flex-grow: 1; border-radius: 6px; height: 34px; outline: none; font-size: 12px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); transition: border-color 0.2s, box-shadow 0.2s; } input:focus { border-color: #3B82F6; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 0 2px rgba(59, 130, 246, 0.2); } #search-btn { display: flex; align-items: center; justify-content: center; background: #3B82F6; border: 1px solid #2563EB; color: white; padding: 0; margin: 0; width: 36px; height: 34px; min-width: 36px; min-height: 34px; flex-shrink: 0; box-sizing: border-box; border-radius: 6px; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 6px rgba(37,99,235,0.3); } #search-btn:hover { background: #60A5FA; border-color: #3B82F6; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(37,99,235,0.4); } #search-btn svg { width: 18px; height: 18px; fill: currentColor; } .icon-group { display: flex; gap: 6px; align-items: center; } .icon-btn { background: #151518; border: 1px solid #25252A; color: #888; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s; position: relative; } .icon-btn:hover { color: #FFF; background: #202025; border-color: #383840; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); } .icon-btn.active { background: rgba(59, 130, 246, 0.15); color: #60A5FA; border-color: #3B82F6; } .icon-btn svg { width: 18px; height: 18px; fill: currentColor; } #discord-btn { color: #7289DA; } #settings-btn:hover, #close-settings-btn:hover { transform: rotate(90deg) scale(1.1); } /* Sort & Filter Dropdown Menus */ #sort-menu, #filter-menu, .dynamic-submenu { position: absolute; background: #17171b !important; background: linear-gradient(175deg, #1f1f26 0%, #141417 100%) !important; opacity: 1 !important; border: 1px solid #2e2e38 !important; border-radius: 10px !important; padding: 5px !important; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; z-index: 2000; box-sizing: border-box; user-select: none; transform: none !important; } #sort-menu { display: none; top: 38px; right: 0; min-width: 130px; width: max-content; } #filter-menu { display: none; top: 40px; right: 80px; min-width: 155px; width: max-content; } .dynamic-submenu { display: none; position: fixed; z-index: 10005; min-width: 145px; width: max-content; } .sort-option, .filter-option { padding: 7px 11px; font-size: 11.5px; font-weight: 500; color: #b0b0ba; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-radius: 6px; border: 1px solid transparent; transition: all 0.14s ease; white-space: nowrap; box-sizing: border-box; margin-bottom: 2px; } .sort-option:last-child, .filter-option:last-child { margin-bottom: 0; } .sort-option:hover, .filter-option:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; border-color: rgba(255, 255, 255, 0.05); } .sort-option.selected, .filter-option.selected { background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(37, 99, 235, 0.14)) !important; border: 1px solid rgba(96, 165, 250, 0.38) !important; color: #93c5fd !important; font-weight: 600; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .sort-option.selected:hover, .filter-option.selected:hover { background: linear-gradient(135deg, rgba(59, 130, 246, 0.32), rgba(37, 99, 235, 0.22)) !important; color: #ffffff !important; border-color: rgba(96, 165, 250, 0.55) !important; } .filter-option.selected-all { background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(37, 99, 235, 0.14)) !important; border: 1px solid rgba(96, 165, 250, 0.38) !important; color: #93c5fd !important; } .filter-option.selected-commercial { background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.14)) !important; border: 1px solid rgba(52, 211, 153, 0.38) !important; color: #6ee7b7 !important; } .filter-option.selected-attribution { background: linear-gradient(135deg, rgba(234, 179, 8, 0.22), rgba(202, 138, 4, 0.14)) !important; border: 1px solid rgba(250, 204, 21, 0.38) !important; color: #fde047 !important; } .filter-option.selected-nc { background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(220, 38, 38, 0.14)) !important; border: 1px solid rgba(248, 113, 113, 0.38) !important; color: #fca5a5 !important; } .filter-divider { border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 4px 2px; } /* Applying Filter Loader */ @keyframes smoothRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pulseIcon { 0%, 100% { opacity: 0.7; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 12px rgba(52,152,219,0.8)); } } @keyframes pulseText { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .filter-applying-loader { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 auto !important; padding: 30px 10px !important; min-height: max(220px, calc(100vh - 280px)); display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; animation: softReveal 0.3s ease-out; } #results-grid.dynamic-ratio-view .filter-applying-loader { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } .filter-applying-card { position: relative; width: 64px; height: 64px; border-radius: 16px; background: rgba(30, 30, 30, 0.4); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; box-shadow: 0 10px 40px rgba(0,0,0,0.3); overflow: hidden; } .filter-applying-conic { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 70%, #3498db 100%); animation: smoothRotate 1.5s linear infinite; } .filter-applying-inner { position: absolute; inset: 2px; background: #171717; border-radius: 14px; } .filter-applying-icon { position: relative; z-index: 2; animation: pulseIcon 2s ease-in-out infinite; } .filter-applying-title { color: #eaeaea; font-size: 15px; font-weight: 500; letter-spacing: 0.5px; margin-bottom: 8px; animation: pulseText 2s ease-in-out infinite; } .filter-applying-badge { color: #3498db; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.9; } /* Results grid */ #results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding-bottom: 40px; contain: layout style; } .grid-item { background: #111; border-radius: 6px; overflow: hidden; cursor: pointer; position: relative; display: flex; flex-direction: column; border: 1px solid #33333e; aspect-ratio: 16/9; /* Ultra-smooth hardware-accelerated transitions */ transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); contain: layout style paint; } /* Smooth subtle hover lift */ .grid-item:hover { border-color: rgba(255, 255, 255, 0.28); transform: translateY(-3px) scale(1.012); z-index: 10; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35); } .grid-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), filter 0.22s ease, opacity 0.2s ease; } .grid-item:hover img:not(.icon-preview-img):not(.audio-waveform-img) { filter: brightness(1.06); } .grid-item video.preview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; pointer-events: none; background: #000; } /* Tactile Spring Micro-press on Click */ .grid-item:not(.audio-list-item):active { transform: translateY(0px) scale(0.982) !important; border-color: rgba(255, 255, 255, 0.38) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.04) !important; transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.08s, box-shadow 0.08s !important; } .grid-item.audio-list-item { min-height: 86px; background: #000000 !important; } .grid-item.audio-list-item:hover { transform: translateY(-2px) scale(1) !important; border-color: rgba(0, 206, 201, 0.4) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 206, 201, 0.18) !important; } /* 🟢 Rock-Solid Click Feedback for Audio: Near-zero downscaling (scale 0.998) + Vibrant Cyan Accent Glow */ .grid-item.audio-list-item:active { transform: translateY(-1px) scale(0.998) !important; border-color: #00cec9 !important; box-shadow: 0 0 14px rgba(0, 206, 201, 0.5), inset 0 0 15px rgba(0, 206, 201, 0.1) !important; transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.08s, box-shadow 0.08s !important; opacity: 1 !important; } /* Dynamic-ratio masonry */ #results-grid.dynamic-ratio-view:not(.list-view) { display: flex; flex-wrap: wrap !important; align-items: flex-start !important; gap: 10px !important; } /* 🟢 The Magic Fix: Protects Settings Panel AND respects List View */ #results-grid.dynamic-ratio-view:not(.list-view):not([style*="none"]) { display: flex !important; } /* NEW: JS Masonry Column Styles */ .masonry-col { flex: 0 0 calc(50% - 6px) !important; width: calc(50% - 6px) !important; display: flex; flex-direction: column; gap: 10px; } #results-grid.dynamic-ratio-view:not(.list-view) > .skeleton { flex: 0 0 calc(50% - 6px) !important; width: calc(50% - 6px) !important; } #results-grid.list-view .masonry-col { max-width: 100% !important; flex: 1 1 100% !important; gap: 4px !important; } /* 2. 🟢 FIXED: Standard items stretch naturally, but IMMUNIZE structural items */ #results-grid.dynamic-ratio-view:not(.list-view) .grid-item:not(.folder-item):not(.audio-list-item):not(.back-item):not(.pro-format-item):not(.threed-item):not(.folder-fallback-card):not(.icon-card-item):not(.force-16-9):not([data-item-type="icon"]):not([data-item-type="emoji"]) { display: inline-block !important; width: 100% !important; break-inside: avoid !important; page-break-inside: avoid !important; height: auto !important; aspect-ratio: auto; min-height: 100px !important; } /* 3. 🟢 FIXED: Standard images scale naturally, but IMMUNIZE icons and fallback images */ #results-grid.dynamic-ratio-view:not(.list-view) .grid-item:not(.folder-item):not(.audio-list-item):not(.back-item):not(.threed-item):not(.folder-fallback-card):not(.icon-card-item):not(.pro-format-item):not([data-item-type="icon"]):not([data-item-type="emoji"]) img:not(.icon-preview-img):not(.folder-fallback-img) { display: block !important; width: 100% !important; height: auto !important; position: relative !important; } /* 4. 🟢 FIXED: Folders, Icons, Fallbacks, Pro Formats and Back Buttons flow in columns natively with perfect centering */ #results-grid.dynamic-ratio-view:not(.list-view) .folder-item, #results-grid.dynamic-ratio-view:not(.list-view) .pro-format-item, #results-grid.dynamic-ratio-view:not(.list-view) .back-item, #results-grid.dynamic-ratio-view:not(.list-view) .threed-item, #results-grid.dynamic-ratio-view:not(.list-view) .folder-fallback-card, #results-grid.dynamic-ratio-view:not(.list-view) .icon-card-item, #results-grid.dynamic-ratio-view:not(.list-view) .grid-item.force-16-9, #results-grid.dynamic-ratio-view:not(.list-view) .grid-item[data-item-type="icon"], #results-grid.dynamic-ratio-view:not(.list-view) .grid-item[data-item-type="emoji"] { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; aspect-ratio: 16/9 !important; /* Restores their normal grid block size */ break-inside: avoid !important; page-break-inside: avoid !important; } /* --- 🟢 FIX: PRO FORMAT & DEFAULT FORMAT ICONS (AEP, PRPROJ, PSD, AI, FFX, JSX, MOGRT, FONTS) --- */ .grid-item.pro-format-item, .grid-item.ae-icon-fix, .grid-item.icon-card-item, .grid-item.folder-fallback-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; aspect-ratio: 16/9 !important; background: #161616 !important; } .grid-item.pro-format-item img, .grid-item.ae-icon-fix img, .grid-item.icon-card-item img, .grid-item.folder-fallback-card img, .grid-item img.icon-preview-img, .grid-item img.folder-fallback-img { width: 70px !important; height: 70px !important; padding: 0 !important; /* CRITICAL: Override .icon-preview-img padding */ object-fit: contain !important; margin: auto !important; display: block !important; transition: none !important; } /* Subtle upward balance when bottom label is present */ .grid-item.pro-format-item .grid-label ~ img, .grid-item.pro-format-item:has(.grid-label) img, .grid-item.ae-icon-fix:has(.grid-label) img, .grid-item:has(.grid-label) img.icon-preview-img { margin-top: auto !important; margin-bottom: 16px !important; margin-left: auto !important; margin-right: auto !important; } /* --- 🟢 FIX: PRO FORMAT ICONS (LIST VIEW OVERRIDES) --- */ #results-grid.list-view .grid-item.pro-format-item, #results-grid.list-view .grid-item.ae-icon-fix, #results-grid.list-view .grid-item.icon-card-item, #results-grid.list-view .grid-item.folder-fallback-card { flex-direction: row !important; aspect-ratio: auto !important; height: 40px !important; align-items: center !important; justify-content: flex-start !important; background: transparent !important; } #results-grid.list-view .grid-item.pro-format-item img, #results-grid.list-view .grid-item.ae-icon-fix img, #results-grid.list-view .grid-item.icon-card-item img, #results-grid.list-view .grid-item.folder-fallback-card img, #results-grid.list-view .grid-item img.icon-preview-img, #results-grid.list-view .grid-item img.folder-fallback-img { width: 30px !important; height: 30px !important; margin: 0 !important; margin-right: 10px !important; } /* --- 🟢 3D & HDRI ITEMS: Unified dark theme across all views --- */ .grid-item.threed-item { background: #111 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* --- 🟢 HDRI & 3D FALLBACK ICON SCALING & CENTERING --- */ .grid-item.threed-item img.hdri-fallback-img, .grid-item.threed-item img[src*="3389032.png"] { width: 56px !important; height: 56px !important; max-width: 56px !important; max-height: 56px !important; object-fit: contain !important; margin: auto !important; padding: 0 !important; display: block !important; transition: none !important; } .grid-item.threed-item img.threed-fallback-img, .grid-item.threed-item img[src*="2901131.png"] { width: 54px !important; height: 54px !important; max-width: 54px !important; max-height: 54px !important; object-fit: contain !important; margin: auto !important; padding: 0 !important; display: block !important; transition: none !important; } /* --- 🟢 FOLDER FALLBACK ICON SCALING & CENTERING --- */ .grid-item.folder-fallback-card, .grid-item:has(img.folder-fallback-img), .grid-item:has(img[src*="3767084.png"]) { justify-content: center !important; align-items: center !important; } .grid-item img.folder-fallback-img, .grid-item img[src*="3767084.png"] { width: 60px !important; height: 60px !important; max-width: 60px !important; max-height: 60px !important; object-fit: contain !important; margin: auto !important; padding: 0 !important; display: block !important; transition: none !important; } #results-grid.list-view .grid-item.threed-item { flex-direction: row !important; aspect-ratio: auto !important; width: 100% !important; max-width: 100% !important; height: 40px !important; align-items: center !important; justify-content: flex-start !important; background: transparent !important; padding: 0 10px !important; box-sizing: border-box !important; } #results-grid.list-view .grid-item.threed-item img { width: 30px !important; height: 30px !important; margin-bottom: 0 !important; margin-right: 10px !important; margin-left: 0 !important; margin-top: 0 !important; padding: 0 !important; object-fit: contain !important; flex-shrink: 0 !important; display: block !important; } #results-grid.list-view .grid-item img.folder-fallback-img, #results-grid.list-view .grid-item img[src*="3767084.png"], #results-grid.list-view .grid-item.threed-item img.hdri-fallback-img, #results-grid.list-view .grid-item.threed-item img.threed-fallback-img, #results-grid.list-view .grid-item.threed-item img[src*="3389032.png"], #results-grid.list-view .grid-item.threed-item img[src*="2901131.png"] { width: 30px !important; height: 30px !important; max-width: 30px !important; max-height: 30px !important; margin: 0 10px 0 0 !important; padding: 0 !important; object-fit: contain !important; flex-shrink: 0 !important; display: block !important; } /* 5. 🟢 FIXED: Keep Audio items safely sized to prevent waveform and player squishing */ #results-grid.dynamic-ratio-view:not(.list-view) .audio-list-item { display: flex !important; flex-direction: column !important; width: 100% !important; aspect-ratio: 16/9 !important; height: auto !important; break-inside: avoid !important; page-break-inside: avoid !important; } #results-grid.dynamic-ratio-view:not(.list-view) .audio-list-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* 🟢 FIX: HIDE FONT AND HDRI FILTERS IN DYNAMIC RATIO MODE */ body.is-dynamic-ratio .filter-option[data-filter="font"], body.is-dynamic-ratio .filter-option[data-filter="fonts"], body.is-dynamic-ratio .filter-option[data-value="font"], body.is-dynamic-ratio .filter-option[data-value="fonts"], body.is-dynamic-ratio .filter-option[data-type="font"], body.is-dynamic-ratio .filter-option[data-filter="hdri"], body.is-dynamic-ratio .filter-option[data-value="hdri"], body.is-dynamic-ratio .filter-option[data-type="hdri"] { display: none !important; pointer-events: none; } #results-grid.list-view { grid-template-columns: 1fr; gap: 4px; } #results-grid.list-view .grid-item:not(.audio-list-item) { aspect-ratio: auto !important; width: 100% !important; max-width: 100% !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; flex-direction: row !important; align-items: center !important; padding: 0 10px !important; gap: 10px !important; box-sizing: border-box !important; background: #141417 !important; border: 1px solid #232328 !important; border-radius: 6px !important; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important; } #results-grid.list-view .grid-item:not(.audio-list-item):hover { background: #19191e !important; border-color: #33333e !important; } #results-grid.list-view .grid-item:not(.audio-list-item) img:not(.icon-preview-img) { width: 64px !important; height: 36px !important; border-radius: 4px !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; flex-shrink: 0 !important; } #results-grid.list-view .grid-item:not(.audio-list-item) video.preview, #results-grid.list-view .grid-item video.preview, .list-view .grid-item:not(.audio-list-item) video.preview, .list-view .grid-item video.preview { position: absolute !important; top: 50% !important; left: 10px !important; transform: translateY(-50%) !important; width: 64px !important; height: 36px !important; border-radius: 4px !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; flex-shrink: 0 !important; z-index: 2 !important; pointer-events: none !important; background: #000 !important; } #results-grid.list-view .grid-item:not(.audio-list-item) img.icon-preview-img { width: 36px !important; height: 36px !important; border-radius: 4px !important; margin: 0 !important; padding: 2px !important; object-fit: contain !important; flex-shrink: 0 !important; } .item-name { display: none; } #results-grid.list-view .source-badge { display: none !important; } /* List View Type Badges */ #results-grid.list-view .grid-item:not(.audio-list-item) .type-badge { display: inline-flex !important; align-items: center; justify-content: center; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; right: 78px !important; /* Left of the 44px Info button */ left: auto !important; padding: 2px 6px !important; font-size: 9px !important; font-weight: 700 !important; border-radius: 3px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important; line-height: 1.2 !important; height: auto !important; z-index: 6 !important; pointer-events: none !important; white-space: nowrap !important; } /* Community tab / No Info button: Position with clean 3px gap beside the Star button */ #results-grid.list-view .grid-item:not(.audio-list-item).no-info-btn .type-badge, body[data-tab="community"] #results-grid.list-view .grid-item:not(.audio-list-item) .type-badge, #results-grid.list-view .grid-item:not(.audio-list-item) .type-badge.no-info-btn { right: 44px !important; } /* Audio items in List View */ #results-grid.list-view .grid-item.audio-list-item .type-badge { display: none !important; } /* List view file size badge (My Library tab) */ #results-grid.list-view .file-size-badge { position: absolute !important; right: 70px !important; /* Default beside Info button if NO type badge */ bottom: auto !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; background: transparent !important; border: none !important; font-size: 11px !important; color: #888 !important; z-index: 5 !important; pointer-events: none !important; white-space: nowrap !important; display: inline-block !important; } /* In My Library: when type badge is present, push file size cleanly to the left of the badge */ #results-grid.list-view .grid-item.has-type-badge .file-size-badge { right: 128px !important; } #results-grid.list-view .grid-item.has-type-badge.no-info-btn .file-size-badge, body[data-tab="community"] #results-grid.list-view .grid-item.has-type-badge .file-size-badge { right: 98px !important; } /* Dynamic positioning based on badge length to close large gaps on short badges like '3D' */ #results-grid.list-view .grid-item.has-type-badge.badge-len-2 .file-size-badge { right: 104px !important; } #results-grid.list-view .grid-item.has-type-badge.badge-len-3 .file-size-badge { right: 110px !important; } #results-grid.list-view .grid-item.has-type-badge.badge-len-4 .file-size-badge { right: 116px !important; } #results-grid.list-view .grid-item.has-type-badge.badge-len-5 .file-size-badge { right: 122px !important; } #results-grid.list-view .grid-item.has-type-badge.badge-len-6 .file-size-badge { right: 128px !important; } #results-grid.list-view .grid-item.has-type-badge.badge-len-7 .file-size-badge { right: 134px !important; } /* With no info button */ #results-grid.list-view .grid-item.has-type-badge.no-info-btn.badge-len-2 .file-size-badge, body[data-tab="community"] #results-grid.list-view .grid-item.has-type-badge.badge-len-2 .file-size-badge { right: 74px !important; } #results-grid.list-view .grid-item.has-type-badge.no-info-btn.badge-len-3 .file-size-badge, body[data-tab="community"] #results-grid.list-view .grid-item.has-type-badge.badge-len-3 .file-size-badge { right: 80px !important; } #results-grid.list-view .grid-item.has-type-badge.no-info-btn.badge-len-4 .file-size-badge, body[data-tab="community"] #results-grid.list-view .grid-item.has-type-badge.badge-len-4 .file-size-badge { right: 86px !important; } #results-grid.list-view .grid-item.has-type-badge.no-info-btn.badge-len-5 .file-size-badge, body[data-tab="community"] #results-grid.list-view .grid-item.has-type-badge.badge-len-5 .file-size-badge { right: 92px !important; } #results-grid.list-view .grid-item.has-type-badge.no-info-btn.badge-len-6 .file-size-badge, body[data-tab="community"] #results-grid.list-view .grid-item.has-type-badge.badge-len-6 .file-size-badge { right: 98px !important; } #results-grid.list-view .grid-item.has-type-badge.no-info-btn.badge-len-7 .file-size-badge, body[data-tab="community"] #results-grid.list-view .grid-item.has-type-badge.badge-len-7 .file-size-badge { right: 104px !important; } /* Items without Favorite Button (e.g. Fonts in Global Assets): Shift Info and Type Badge Right */ #results-grid.list-view .grid-item.no-fav-btn .info-btn, #results-grid.list-view .grid-item.font-card .info-btn { right: 10px !important; } #results-grid.list-view .grid-item.no-fav-btn .type-badge, #results-grid.list-view .grid-item.font-card .type-badge { right: 46px !important; } #results-grid.list-view .grid-item.no-fav-btn.no-info-btn .type-badge, #results-grid.list-view .grid-item.font-card.no-info-btn .type-badge, body[data-tab="community"] #results-grid.list-view .grid-item.no-fav-btn .type-badge, body[data-tab="community"] #results-grid.list-view .grid-item.font-card .type-badge { right: 10px !important; } /* Dynamic positioning for no-fav-btn items */ #results-grid.list-view .grid-item.has-type-badge.no-fav-btn .file-size-badge, #results-grid.list-view .grid-item.has-type-badge.font-card .file-size-badge { right: 98px !important; } #results-grid.list-view .grid-item.has-type-badge.no-fav-btn.badge-len-2 .file-size-badge { right: 74px !important; } #results-grid.list-view .grid-item.has-type-badge.no-fav-btn.badge-len-3 .file-size-badge { right: 80px !important; } #results-grid.list-view .grid-item.has-type-badge.no-fav-btn.badge-len-4 .file-size-badge { right: 86px !important; } #results-grid.list-view .grid-item.has-type-badge.no-fav-btn.badge-len-5 .file-size-badge { right: 92px !important; } #results-grid.list-view .grid-item.has-type-badge.no-fav-btn.badge-len-6 .file-size-badge { right: 98px !important; } #results-grid.list-view .grid-item.has-type-badge.no-fav-btn.badge-len-7 .file-size-badge { right: 104px !important; } /* 🔤 FONT LIST VIEW POLISH */ #results-grid.list-view .grid-item.font-card { padding: 0 10px !important; display: flex !important; align-items: center !important; position: relative !important; } #results-grid.list-view .grid-item.font-card .item-name { display: none !important; } #results-grid.list-view .grid-item.font-card .font-preview-box { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-left: 8px !important; padding-right: 90px !important; box-sizing: border-box !important; background: transparent !important; font-size: 16px !important; color: #eee !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #results-grid.list-view .grid-item.font-card .font-preview-box span { font-size: 14px !important; margin: 0 !important; color: #eee !important; } #results-grid.list-view .grid-item.font-card .font-preview-box span:last-child { font-size: 9px !important; margin-left: 8px !important; color: #777 !important; } /* Icon previews */ .icon-preview-img { object-fit: contain !important; width: 100%; height: 100%; padding: 25px; box-sizing: border-box; transition: none !important; } #results-grid.list-view .grid-item:not(.audio-list-item) .icon-preview-img { width: 30px !important; height: 30px !important; padding: 2px !important; } /* Keep action buttons aligned in list view. */ #results-grid.list-view .grid-item:not(.audio-list-item) .info-btn { display: block !important; left: auto !important; right: 44px !important; top: 14px !important; width: 26px !important; height: 26px !important; line-height: 26px !important; font-size: 13px !important; } #results-grid.list-view .grid-item:not(.audio-list-item) .fav-btn { top: 14px !important; right: 10px !important; width: 26px !important; height: 26px !important; line-height: 26px !important; font-size: 13px !important; } .source-badge { position: absolute; bottom: 6px; left: 6px; background: rgba(16, 16, 20, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255,255,255,0.85); padding: 2px 5px; border-radius: 3px; font-size: 9px; z-index: 4; pointer-events: none; } .type-badge { position: absolute; top: 6px; left: 6px; padding: 2px 5px; font-weight: bold; font-size: 9px; border-radius: 3px; z-index: 5; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.5); } .fav-btn { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.6); color: #ccc; width: 24px; height: 24px; text-align: center; line-height: 24px; border-radius: 50%; cursor: pointer; font-size: 14px; z-index: 10; transition: 0.2s; } .fav-btn:hover { background: rgba(0,0,0,0.9); color: white; transform: scale(1.1); } .fav-btn.active { color: #f1c40f; text-shadow: 0 0 5px #f1c40f; } .info-btn { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; color: white; font-size: 14px; font-weight: bold; text-align: center; line-height: 24px; cursor: pointer; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.5); transition: 0.2s; } .info-btn:hover { transform: scale(1.1); filter: brightness(1.2); } body:not([data-tab="library"]) .grid-item.downloaded, body:not([data-tab="library"]) #results-grid.list-view .grid-item.downloaded, body:not([data-tab="library"]) #results-grid.list-view .grid-item:not(.audio-list-item).downloaded, body:not([data-tab="library"]) #results-grid.list-view .grid-item.audio-list-item.downloaded { border: 2px solid rgba(52, 152, 219, 0.6) !important; } body:not([data-tab="library"]) .grid-item.downloaded:hover, body:not([data-tab="library"]) #results-grid.list-view .grid-item.downloaded:hover, body:not([data-tab="library"]) #results-grid.list-view .grid-item:not(.audio-list-item).downloaded:hover, body:not([data-tab="library"]) #results-grid.list-view .grid-item.audio-list-item.downloaded:hover { border-color: rgba(52, 152, 219, 0.9) !important; } .new-badge { position: absolute; top: 6px; right: 35px; /* Grid view: neatly to the left of the favorite button */ background: #e84393; color: white; font-size: 9px; padding: 2px 5px; border-radius: 3px; font-weight: bold; box-shadow: 0 0 5px #e84393; z-index: 15; /* Overlays above audio-name-badge (z-index 10) in Grid View */ pointer-events: none; } /* List View: Align vertically for standard compact items */ #results-grid.list-view .grid-item:not(.audio-list-item) .new-badge { top: 50% !important; transform: translateY(-50%) !important; right: 40px !important; /* Sits next to the Fav button if there is NO Info button & NO Type badge */ } #results-grid.list-view .grid-item:not(.audio-list-item) .new-badge.has-info-btn { right: 72px !important; } /* 🟢 Position NEW badge to the LEFT of the asset type badge with comfortable breathing space (List View) */ #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge .new-badge { right: 96px !important; } #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.badge-len-2 .new-badge { right: 74px !important; } #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.badge-len-3 .new-badge { right: 80px !important; } #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.badge-len-4 .new-badge { right: 88px !important; } #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.badge-len-5 .new-badge { right: 96px !important; } #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.badge-len-6 .new-badge { right: 103px !important; } #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.badge-len-7 .new-badge { right: 110px !important; } /* If Info button is also present with Type Badge */ #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.has-info-btn .new-badge { right: 126px !important; } #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.has-info-btn.badge-len-2 .new-badge { right: 104px !important; } #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.has-info-btn.badge-len-3 .new-badge { right: 110px !important; } #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.has-info-btn.badge-len-4 .new-badge { right: 118px !important; } #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.has-info-btn.badge-len-5 .new-badge { right: 126px !important; } #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.has-info-btn.badge-len-6 .new-badge { right: 133px !important; } #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.has-info-btn.badge-len-7 .new-badge { right: 140px !important; } /* List View: Clean positioning for Audio cards (Inside audio-list-sub next to duration) */ #results-grid.list-view .grid-item.audio-list-item .new-badge { position: static !important; transform: none !important; margin: 0 !important; flex-shrink: 0 !important; font-size: 7.5px !important; padding: 1px 4px !important; line-height: 1.1 !important; border-radius: 3px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #e84393 !important; color: #fff !important; box-shadow: 0 0 5px #e84393 !important; font-weight: bold !important; z-index: 6 !important; } /* Hide new badge in favorites tab */ body[data-tab="favorites"] .new-badge { display: none !important; } /* ========================================= ULTIMATE LIST VIEW FIX (STRICT MIXED LAYOUT) ========================================= */ /* 1. STANDARD ROW (Images/Videos/Folders) - Modern 54px Row */ #results-grid.list-view .grid-item { position: relative !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; padding: 0 10px !important; gap: 10px !important; background: #141417 !important; border: 1px solid #232328 !important; border-radius: 6px !important; box-sizing: border-box !important; overflow: hidden !important; transform: translateY(0) scale(1) !important; transition: background-color 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), border-color 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) !important; } #results-grid.list-view .grid-item:hover { background: #1c1c23 !important; border-color: #3e3e4d !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important; z-index: 4 !important; } #results-grid.list-view .grid-item:active { background: #121215 !important; border-color: rgba(255, 255, 255, 0.3) !important; transform: translateY(0) scale(0.993) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.03) !important; transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.08s, border-color 0.08s, box-shadow 0.08s !important; } /* 🟢 FIX: Hides the Grid-specific gradient labels when in List View */ #results-grid.list-view .grid-label { display: none !important; } /* 🟢 Audio Name Badge: Hidden in List View (we render clean metadata stack) */ #results-grid.list-view .audio-name-badge { display: none !important; } /* 🟢 Hide native audio player box when in List View */ #results-grid.list-view .grid-item.audio-list-item .audio-player-box { display: none !important; } /* 2. AUDIO ROW (Music/SFX) - Modern 54px DAW / Splice Style Layout */ #results-grid.list-view .grid-item.audio-list-item { position: relative !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; aspect-ratio: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; padding: 0 78px 0 10px !important; /* Leaves safe space on right for absolute Info + Fav buttons */ gap: 10px !important; background: #141417 !important; border: 1px solid #232328 !important; border-radius: 6px !important; box-sizing: border-box !important; overflow: hidden !important; transform: translateY(0) scale(1) !important; transition: background-color 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), border-color 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) !important; } #results-grid.list-view .grid-item.audio-list-item.no-info-btn, body[data-tab="community"] #results-grid.list-view .grid-item.audio-list-item { padding-right: 44px !important; } #results-grid.list-view .grid-item.audio-list-item:hover { background: #1c1c23 !important; border-color: #3e3e4d !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important; } #results-grid.list-view .grid-item.audio-list-item:active { background: #121215 !important; border-color: rgba(0, 206, 201, 0.45) !important; transform: translateY(0) scale(0.993) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(0, 206, 201, 0.06) !important; transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.08s, border-color 0.08s, box-shadow 0.08s !important; } #results-grid.list-view .grid-item.audio-list-item.is-active-playing { border-color: rgba(0, 206, 201, 0.45) !important; box-shadow: 0 0 14px rgba(0, 206, 201, 0.12), inset 0 0 1px rgba(0, 206, 201, 0.2) !important; } /* Hide direct img on audio item in list view because img is moved inside waveform box */ #results-grid.list-view .grid-item.audio-list-item > img:not(.audio-waveform-img) { display: none !important; } /* 1. Circular Neon Play/Pause Button */ .audio-list-play-btn { display: none; } #results-grid.list-view .audio-list-play-btn { display: flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; border-radius: 50% !important; background: rgba(0, 206, 201, 0.1) !important; border: 1px solid rgba(0, 206, 201, 0.35) !important; color: #00cec9 !important; cursor: pointer !important; flex-shrink: 0 !important; z-index: 10 !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important; padding: 0 !important; margin: 0 !important; } #results-grid.list-view .audio-list-play-btn:hover { background: rgba(0, 206, 201, 0.25) !important; border-color: #00cec9 !important; box-shadow: 0 0 10px rgba(0, 206, 201, 0.45) !important; transform: scale(1.06); } #results-grid.list-view .audio-list-play-btn:active { transform: scale(0.95); } #results-grid.list-view .audio-list-play-btn.is-playing { background: #00cec9 !important; color: #111114 !important; border-color: #00cec9 !important; box-shadow: 0 0 12px rgba(0, 206, 201, 0.6) !important; } #results-grid.list-view .audio-list-play-btn svg { width: 13px; height: 13px; fill: currentColor; pointer-events: none; transition: transform 0.15s ease; } /* 2. Metadata Stack (Title + Subtitle) */ .audio-list-meta { display: none; } #results-grid.list-view .audio-list-meta { display: flex !important; flex-direction: column !important; justify-content: center !important; width: 140px !important; min-width: 140px !important; max-width: 140px !important; flex: 0 0 140px !important; overflow: hidden !important; pointer-events: auto !important; cursor: pointer !important; user-select: none !important; -webkit-user-select: none !important; } #results-grid.list-view .audio-list-title { font-size: 11.5px !important; font-weight: 600 !important; color: #f0f0f4 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.3 !important; letter-spacing: 0.1px !important; user-select: none !important; -webkit-user-select: none !important; } #results-grid.list-view .audio-list-sub { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 9.5px !important; color: #888892 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.2 !important; margin-top: 2px !important; user-select: none !important; -webkit-user-select: none !important; } #results-grid.list-view .audio-list-sub .audio-sub-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 3. Waveform Scrubber Box */ .audio-list-wave-box { display: none; } #results-grid.list-view .audio-list-wave-box { display: flex !important; position: relative !important; flex: 1 !important; height: 32px !important; min-width: 60px !important; background: #0b0b0e !important; border: 1px solid #1f1f26 !important; border-radius: 5px !important; overflow: hidden !important; align-items: center !important; cursor: pointer !important; user-select: none !important; } #results-grid.list-view .audio-list-wave-box:hover { border-color: rgba(0, 206, 201, 0.4) !important; } /* Waveform Image centered and cropped */ #results-grid.list-view .audio-waveform-img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; opacity: 0.85 !important; pointer-events: none !important; filter: brightness(1.05) contrast(1.1); } /* Glowing Progress Bar */ #results-grid.list-view .audio-list-progress-bar { position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 0%; background: linear-gradient(90deg, rgba(0, 206, 201, 0.2) 0%, rgba(9, 132, 227, 0.35) 100%) !important; border-right: 2px solid #00cec9 !important; box-shadow: 0 0 10px rgba(0, 206, 201, 0.7) !important; pointer-events: none !important; z-index: 3 !important; transition: none !important; } /* Hover playhead cursor (List View) */ #results-grid.list-view .audio-list-hover-line { position: absolute !important; top: 0 !important; bottom: 0 !important; width: 1.5px !important; background: rgba(255, 255, 255, 0.85) !important; box-shadow: 0 0 5px rgba(255, 255, 255, 0.7) !important; display: none; pointer-events: none !important; z-index: 4 !important; } #results-grid.list-view .grid-item.audio-list-item:not(:hover) .audio-list-hover-line, #results-grid.list-view .audio-list-wave-box:not(:hover) .audio-list-hover-line { display: none !important; opacity: 0 !important; } /* Hover playhead cursor (Grid View) */ .audio-grid-hover-line { position: absolute !important; top: 0 !important; bottom: 26px !important; width: 1.5px !important; background: rgba(255, 255, 255, 0.85) !important; box-shadow: 0 0 5px rgba(255, 255, 255, 0.7) !important; display: none; pointer-events: none !important; z-index: 14 !important; } .grid-item:not(:hover) .audio-grid-hover-line, .grid-item.audio-list-item:not(:hover) .audio-grid-hover-line { display: none !important; opacity: 0 !important; } /* Monospace Time Badge */ #results-grid.list-view .audio-list-time { position: absolute !important; right: 5px !important; bottom: 3px !important; font-size: 8.5px !important; font-family: Consolas, Monaco, "Courier New", monospace !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.75) !important; background: rgba(10, 10, 14, 0.75) !important; padding: 1px 4px !important; border-radius: 3px !important; pointer-events: none !important; z-index: 5 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } /* 4. Action Buttons in List View (Audio & All Items) */ #results-grid.list-view .grid-item .fav-btn { position: absolute !important; top: 14px !important; right: 10px !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 0 !important; z-index: 10 !important; width: 26px !important; height: 26px !important; line-height: 26px !important; font-size: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } #results-grid.list-view .grid-item .info-btn { position: absolute !important; top: 14px !important; right: 44px !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 0 !important; z-index: 10 !important; width: 26px !important; height: 26px !important; line-height: 26px !important; font-size: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } #results-grid.list-view .grid-item.no-fav-btn .info-btn, #results-grid.list-view .grid-item.font-card .info-btn { right: 10px !important; } #results-grid.list-view .grid-item .fav-btn::after, #results-grid.list-view .grid-item .info-btn::after { display: none !important; pointer-events: none !important; } #results-grid.list-view .grid-item.audio-list-item .type-badge { display: none !important; } /* 5. SELECTION MODE: Transform 32px Play Button into 32px Emerald Checkmark */ #results-grid.list-view .grid-item.audio-list-item.asset-selected .audio-list-play-btn, #results-grid.list-view .grid-item.audio-list-item.lib-asset-selected .audio-list-play-btn { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } #results-grid.list-view .grid-item.audio-list-item .select-tick { top: 11px !important; left: 10px !important; width: 32px !important; height: 32px !important; font-size: 15px !important; border-radius: 50% !important; border: 2px solid #ffffff !important; box-sizing: border-box !important; box-shadow: 0 0 10px rgba(16, 185, 129, 0.45) !important; z-index: 50 !important; } /* 5. RESPONSIVE BREAKPOINTS FOR NARROW AE/PR PANELS */ @media (max-width: 440px) { #results-grid.list-view .audio-list-meta { width: 120px !important; min-width: 120px !important; max-width: 120px !important; flex: 0 0 120px !important; } } @media (max-width: 360px) { #results-grid.list-view .grid-item.audio-list-item { gap: 6px !important; padding: 0 78px 0 6px !important; } #results-grid.list-view .audio-list-meta { width: 100px !important; min-width: 100px !important; max-width: 100px !important; flex: 0 0 100px !important; } #results-grid.list-view .audio-list-play-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; } } @media (max-width: 290px) { #results-grid.list-view .grid-item.audio-list-item { padding: 0 78px 0 6px !important; } #results-grid.list-view .audio-list-meta { width: 80px !important; min-width: 80px !important; max-width: 80px !important; flex: 0 0 80px !important; } #results-grid.list-view .audio-list-sub { display: none !important; } } /* 3. Icons and Thumbnails */ #results-grid.list-view .grid-item:not(.audio-list-item) .icon-preview-img { position: static !important; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 2px !important; flex-shrink: 0 !important; object-fit: contain !important; } #results-grid.list-view .grid-item:not(.audio-list-item) img:not(.icon-preview-img) { position: static !important; width: 64px !important; height: 36px !important; border-radius: 4px !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; object-fit: cover !important; } /* Standard Rows */ #results-grid.list-view .grid-item:not(.audio-list-item) .item-name { position: static !important; margin: 0 85px 0 0 !important; /* Safe space on right for Info + Star buttons */ padding: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: #f0f0f4 !important; line-height: 1.3 !important; letter-spacing: 0.1px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex-grow: 1 !important; display: block !important; } #results-grid.list-view .grid-item:not(.audio-list-item) .select-tick { top: 11px !important; left: 10px !important; width: 32px !important; height: 32px !important; font-size: 15px !important; border-radius: 50% !important; border: 2px solid #ffffff !important; box-sizing: border-box !important; box-shadow: 0 0 10px rgba(16, 185, 129, 0.45) !important; z-index: 50 !important; } /* Community tab without badge (Star only) */ body[data-tab="community"] #results-grid.list-view .grid-item:not(.audio-list-item) .item-name, #results-grid.list-view .grid-item:not(.audio-list-item).no-info-btn .item-name { margin-right: 40px !important; } /* Community tab when type badge is present */ body[data-tab="community"] #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge .item-name, #results-grid.list-view .grid-item:not(.audio-list-item).no-info-btn.has-type-badge .item-name { margin-right: 85px !important; } /* Community tab / standard items when new badge is present */ #results-grid.list-view .grid-item:not(.audio-list-item).has-new-badge .item-name { margin-right: 85px !important; } #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.has-new-badge .item-name { margin-right: 140px !important; } /* General / Favorites / Search tabs when type badge is present */ #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge .item-name { margin-right: 125px !important; } /* When file size badge is present without type badge */ #results-grid.list-view .grid-item:not(.audio-list-item).has-size-badge .item-name { margin-right: 125px !important; } /* In My Library when both type badge and file size badge are present */ #results-grid.list-view .grid-item:not(.audio-list-item).has-type-badge.has-size-badge .item-name { margin-right: 156px !important; } /* 6. Buttons */ /* Standard Rows: Pinned strictly to the right edge */ #results-grid.list-view .grid-item:not(.audio-list-item) .info-btn { position: absolute !important; right: 44px !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } #results-grid.list-view .grid-item:not(.audio-list-item) .fav-btn { position: absolute !important; right: 10px !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } /* 7. No Favorite Button Rows (Fonts / Special Assets) */ #results-grid.list-view .grid-item.no-fav-btn .info-btn, #results-grid.list-view .grid-item.font-card .info-btn { right: 10px !important; } #results-grid.list-view .grid-item.no-fav-btn .type-badge, #results-grid.list-view .grid-item.font-card .type-badge { right: 46px !important; } #results-grid.list-view .grid-item.no-fav-btn.no-info-btn .type-badge, #results-grid.list-view .grid-item.font-card.no-info-btn .type-badge, body[data-tab="community"] #results-grid.list-view .grid-item.no-fav-btn .type-badge, body[data-tab="community"] #results-grid.list-view .grid-item.font-card .type-badge { right: 10px !important; } #results-grid.list-view .grid-item.font-card .item-name { display: none !important; } /* ========================================= 📁 FOLDER UI FIXES (Responsive & Centered) ========================================= */ /* Grid View (Default) */ #results-grid .grid-item.folder-item, .grid-item.folder-item { background: #151518 !important; border: 1px solid #25252A !important; justify-content: center !important; align-items: center !important; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); } #results-grid .grid-item.folder-item:hover, .grid-item.folder-item:hover { background: #1C1C22 !important; border-color: #383840 !important; } /* 🎨 Tinted Folder Card when custom color is assigned (Grid + List View) */ #results-grid .grid-item.folder-item.has-custom-color, #results-grid.list-view .grid-item.folder-item.has-custom-color, .grid-item.folder-item.has-custom-color { background: linear-gradient(145deg, var(--folder-bg-tint, rgba(255, 202, 40, 0.12)) 0%, #151518 100%) !important; border: 1px solid var(--folder-border-tint, #25252A) !important; box-shadow: 0 4px 15px var(--folder-glow-tint, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } #results-grid .grid-item.folder-item.has-custom-color:hover, #results-grid.list-view .grid-item.folder-item.has-custom-color:hover, .grid-item.folder-item.has-custom-color:hover { background: linear-gradient(145deg, var(--folder-bg-hover, rgba(255, 202, 40, 0.20)) 0%, #1C1C22 100%) !important; border-color: var(--folder-border-hover, #383840) !important; box-shadow: 0 6px 20px var(--folder-glow-hover, rgba(0, 0, 0, 0.35)), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } #results-grid .grid-item.folder-item.has-custom-color:active, #results-grid.list-view .grid-item.folder-item.has-custom-color:active, .grid-item.folder-item.has-custom-color:active { background: linear-gradient(145deg, var(--folder-bg-tint, rgba(255, 202, 40, 0.15)) 0%, #121215 100%) !important; border-color: var(--folder-border-hover, #383840) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.03) !important; } .grid-item.folder-item .folder-icon { font-size: clamp(32px, 3.8vw, 46px); /* Scales icon nicely without overscaling */ line-height: 1; margin-bottom: 8px; display: flex; justify-content: center; align-items: center; } .grid-item.folder-item .folder-icon svg { width: 1.3em !important; height: 1.3em !important; display: block; } .grid-item.folder-item .item-name { display: block !important; position: static !important; font-size: clamp(11px, 1.2vw, 14px) !important; /* Scales text nicely */ text-align: center !important; margin: 0 !important; width: 90% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* List View Overrides */ #results-grid.list-view .grid-item.folder-item { flex-direction: row !important; justify-content: flex-start !important; height: 44px !important; padding: 0 15px !important; } #results-grid.list-view .grid-item.folder-item .folder-icon { font-size: 25px !important; /* Locks icon size so it doesn't touch the bottom */ margin-bottom: 0 !important; margin-right: 15px !important; } #results-grid.list-view .grid-item.folder-item .folder-icon svg { width: 1.25em !important; height: 1.25em !important; } #results-grid.list-view .grid-item.folder-item .item-name { text-align: left !important; margin: 0 !important; font-size: 12px !important; } /* --- HIGH CONTRAST SKELETON --- */ /* ========================================================= */ /* 💀 MODERN SKELETON LOADERS (MATCHING 54px ROW & GRID UI) */ /* ========================================================= */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { width: 100%; background: #141418; border-radius: 8px; aspect-ratio: 16/9; position: relative; overflow: hidden; border: 1px solid #1f1f26; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; box-sizing: border-box; } .skeleton::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; pointer-events: none; z-index: 10; } /* Grid View Default Skeleton */ .skeleton-badge { width: 42px; height: 14px; background: #222228; border-radius: 3px; margin-bottom: 8px; position: relative; z-index: 1; } .skeleton-text-group { display: flex; flex-direction: column; width: 100%; gap: 5px; position: relative; z-index: 1; } .skeleton-text { width: 75%; height: 9px; background: #26262e; border-radius: 4px; position: relative; z-index: 1; } .skeleton-text-sub { width: 45% !important; height: 7px !important; background: #1c1c22 !important; border-radius: 3px !important; } .skeleton-audio-btn { display: none; } /* Grid View Audio Skeleton (Matches Grid Card UI Pixel-For-Pixel) */ #results-grid:not(.list-view) .skeleton.audio-skeleton { aspect-ratio: 16/9 !important; background: #0d0d10 !important; border: 1px solid #1f1f26 !important; border-radius: 8px !important; position: relative !important; overflow: hidden !important; padding: 0 !important; display: block !important; } #results-grid:not(.list-view) .skeleton.audio-skeleton .skeleton-audio-play { display: none !important; } #results-grid:not(.list-view) .skeleton.audio-skeleton .skeleton-audio-btn.skeleton-info-btn { display: block !important; position: absolute !important; top: 8px !important; left: 8px !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #24242e !important; z-index: 3 !important; } #results-grid:not(.list-view) .skeleton.audio-skeleton .skeleton-audio-btn.skeleton-star-btn { display: block !important; position: absolute !important; top: 8px !important; right: 8px !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #24242e !important; z-index: 3 !important; } #results-grid:not(.list-view) .skeleton.audio-skeleton .skeleton-audio-meta { position: absolute !important; top: 7px !important; left: 36px !important; right: 36px !important; height: 22px !important; background: rgba(0, 0, 0, 0.65) !important; border-radius: 4px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3 !important; padding: 0 8px !important; box-sizing: border-box !important; margin: 0 !important; } #results-grid:not(.list-view) .skeleton.audio-skeleton .skeleton-audio-title { width: 75% !important; height: 8px !important; background: #33333e !important; border-radius: 3px !important; } #results-grid:not(.list-view) .skeleton.audio-skeleton .skeleton-audio-sub { display: none !important; } #results-grid:not(.list-view) .skeleton.audio-skeleton .skeleton-audio-wave { position: absolute !important; top: 0 !important; bottom: 34px !important; left: 0 !important; right: 0 !important; display: flex !important; align-items: center !important; justify-content: space-evenly !important; gap: 2px !important; padding: 30px 10px 4px 10px !important; box-sizing: border-box !important; background: #0d0d10 !important; border: none !important; margin: 0 !important; } #results-grid:not(.list-view) .skeleton.audio-skeleton .skeleton-wave-bar { background: #22222c !important; width: 3.5px !important; border-radius: 2px !important; } #results-grid:not(.list-view) .skeleton.audio-skeleton .skeleton-audio-player-bar { display: flex !important; position: absolute !important; bottom: 4px !important; left: 4px !important; right: 4px !important; height: 26px !important; border-radius: 14px !important; background: #e2e2ea !important; align-items: center !important; padding: 0 10px !important; box-sizing: border-box !important; gap: 6px !important; z-index: 3 !important; } #results-grid:not(.list-view) .skeleton.audio-skeleton .skeleton-audio-player-bar .skel-play-icon { width: 0 !important; height: 0 !important; border-top: 4px solid transparent !important; border-bottom: 4px solid transparent !important; border-left: 7px solid #555562 !important; margin-right: 4px !important; } #results-grid:not(.list-view) .skeleton.audio-skeleton .skeleton-audio-player-bar .skel-time { width: 44px !important; height: 7px !important; background: #a4a4b0 !important; border-radius: 3px !important; } #results-grid:not(.list-view) .skeleton.audio-skeleton .skeleton-audio-player-bar .skel-bar { flex: 1 !important; height: 4px !important; background: #b8b8c4 !important; border-radius: 2px !important; } #results-grid:not(.list-view) .skeleton.audio-skeleton .skeleton-audio-player-bar .skel-dots { width: 10px !important; height: 10px !important; background: #888896 !important; border-radius: 50% !important; } /* ========================================================= */ /* 🎧 LIST VIEW SKELETON (MATCHES 54px ROW UI PIXEL-FOR-PIXEL) */ /* ========================================================= */ #results-grid.list-view .skeleton { aspect-ratio: auto !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; padding: 0 10px !important; margin: 0 !important; background: #141417 !important; border: 1px solid #232328 !important; border-radius: 6px !important; box-sizing: border-box !important; display: flex !important; position: relative !important; } /* List View Audio Row Skeleton */ #results-grid.list-view .skeleton.audio-skeleton { padding: 0 10px !important; display: flex !important; flex-direction: row !important; align-items: center !important; } #results-grid.list-view .skeleton.audio-skeleton .skeleton-audio-play { display: block !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #1f1f26 !important; margin: 0 12px 0 0 !important; flex-shrink: 0 !important; } #results-grid.list-view .skeleton.audio-skeleton .skeleton-audio-meta { position: static !important; background: transparent !important; border: none !important; padding: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 5px !important; width: 140px !important; min-width: 140px !important; max-width: 140px !important; flex: 0 0 140px !important; margin: 0 12px 0 0 !important; flex-shrink: 0 !important; } #results-grid.list-view .skeleton.audio-skeleton .skeleton-audio-title { width: 85% !important; height: 11px !important; background: #26262e !important; border-radius: 4px !important; } #results-grid.list-view .skeleton.audio-skeleton .skeleton-audio-sub { display: block !important; width: 55% !important; height: 8px !important; background: #1c1c22 !important; border-radius: 3px !important; } #results-grid.list-view .skeleton.audio-skeleton .skeleton-audio-wave { position: static !important; display: flex !important; align-items: center !important; justify-content: space-evenly !important; flex: 1 !important; height: 32px !important; min-width: 60px !important; background: #0b0b0e !important; border: 1px solid #1f1f26 !important; border-radius: 5px !important; margin: 0 12px 0 0 !important; padding: 0 8px !important; box-sizing: border-box !important; } #results-grid.list-view .skeleton.audio-skeleton .skeleton-wave-bar { background: #1c1c24 !important; width: 3px !important; border-radius: 2px !important; } #results-grid.list-view .skeleton.audio-skeleton .skeleton-audio-player-bar { display: none !important; } #results-grid.list-view .skeleton .skeleton-audio-btn { display: block !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; background: #1b1b22 !important; margin-left: 6px !important; flex-shrink: 0 !important; position: relative; z-index: 1 !important; } /* List View Non-Audio Row Skeleton (54px matching other assets) */ #results-grid.list-view .skeleton:not(.audio-skeleton) .skeleton-badge { display: block !important; width: 64px !important; height: 36px !important; border-radius: 4px !important; background: #1c1c24 !important; margin: 0 12px 0 0 !important; flex-shrink: 0 !important; } #results-grid.list-view .skeleton:not(.audio-skeleton) .skeleton-text-group { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 5px !important; flex: 1 !important; margin: 0 12px 0 0 !important; } #results-grid.list-view .skeleton:not(.audio-skeleton) .skeleton-text { width: 55% !important; height: 11px !important; background: #26262e !important; border-radius: 4px !important; margin: 0 !important; } #results-grid.list-view .skeleton:not(.audio-skeleton) .skeleton-text-sub { width: 30% !important; height: 8px !important; background: #1c1c22 !important; border-radius: 3px !important; margin: 0 !important; } #colors-panel { display: none; padding: 24px; background: rgba(25, 25, 30, 0.4); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); text-align: center; } #palette-container { display: flex; height: 150px; border-radius: 8px; overflow: hidden; margin-top: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .color-stripe { flex: 1; cursor: pointer; transition: 0.2s; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 10px; font-family: monospace; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .color-stripe:hover { flex: 1.5; z-index: 2; box-shadow: 0 0 10px rgba(0,0,0,0.5); } .color-hex { background: rgba(0,0,0,0.3); padding: 4px; border-radius: 4px; margin: 0 5px; font-size: 11px; color: white; pointer-events: none; } #generate-colors-btn { background: linear-gradient(45deg, #00b894, #0984e3); border: none; padding: 12px 30px; font-size: 14px; color: white; font-weight: bold; border-radius: 50px; cursor: pointer; margin-bottom: 10px; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } #generate-colors-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.4); filter: brightness(1.1); } /* Panels */ #ai-panel, #downloader-panel, #settings-panel { display: none; padding: 24px; background: rgba(25, 25, 30, 0.4); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } #ai-view-image > div:first-of-type { width: 100% !important; box-sizing: border-box !important; } #ai-view-image select { min-width: 0 !important; /* CRITICAL: Forces dropdowns to shrink */ flex: 1 1 0% !important; text-overflow: ellipsis !important; white-space: nowrap !important; overflow: hidden !important; box-sizing: border-box !important; } /* 🟢 NEW: AI Sub-Tab Styles */ .ai-sub-tabs { display: flex; background: #1a1a1a; padding: 4px; border-radius: 6px; margin-bottom: 15px; border: 1px solid #333; } .ai-sub-tab { flex: 1; text-align: center; padding: 8px; font-size: 11px; cursor: pointer; border-radius: 4px; color: #777; font-weight: 600; transition: 0.2s; } .ai-sub-tab:hover { color: #ccc; } .ai-sub-tab.active { background: #333; color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } #ai-preview-container { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #111; border-radius: 4px; margin-bottom: 10px; border: 1px dashed #444; overflow: hidden; } #ai-image { max-width: 100%; max-height: 350px; display: none; border-radius: 4px; margin-top: 10px; } #generate-btn { width: 100%; background: linear-gradient(90deg, #e84393, #6c5ce7); border: none; padding: 12px; margin-bottom: 10px; color: white; font-weight: bold; border-radius: 4px; cursor: pointer; transition: 0.3s; } #generate-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(1); } #save-ai-btn { background: #27ae60; width: 100%; padding: 12px; border: none; border-radius: 4px; color: white; font-weight: bold; cursor: pointer; display: none; } /* 🟢 Premium Settings yt-dlp Update Banner */ .settings-update-banner { margin-bottom: 15px; padding: 12px 14px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(30, 24, 18, 0.88) 100%); border-radius: 8px; border: 1px solid rgba(245, 158, 11, 0.35); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 16px rgba(245, 158, 11, 0.1); display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: all 0.25s ease; box-sizing: border-box; width: 100%; overflow: hidden; } .settings-update-banner:hover { border-color: rgba(245, 158, 11, 0.55); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(245, 158, 11, 0.18); } .settings-update-left { display: flex; align-items: center; gap: 10px; flex: 1 1 0%; min-width: 0; overflow: hidden; } .settings-update-icon-box { width: 34px; height: 34px; border-radius: 8px; background: rgba(245, 158, 11, 0.18); border: 1px solid rgba(245, 158, 11, 0.4); color: #FBBF24; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 12px rgba(245, 158, 11, 0.2); } .settings-update-meta { flex: 1 1 0%; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; } .settings-update-header { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow: hidden; } .settings-update-title { color: #FFFFFF; font-size: 12.5px; font-weight: 600; letter-spacing: 0.15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .update-version-badge { font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; background: rgba(245, 158, 11, 0.25); color: #FDE68A; border: 1px solid rgba(245, 158, 11, 0.45); flex-shrink: 0; } .settings-update-subtext { color: #9CA3AF; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-update-btn { background: linear-gradient(135deg, #D97706 0%, #B45309 100%); border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 6px; color: #FFFFFF; font-size: 11px; font-weight: 600; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35); } .settings-update-btn:hover { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5); } .settings-update-btn:active { transform: translateY(0); } .settings-update-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; } .ytdlp-spinning { animation: ytdlpSpin 1s linear infinite; } @keyframes ytdlpSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 🟢 Premium Settings License Card (with Robust Clipping Logic) */ .settings-license-card { margin-bottom: 20px; padding: 12px 14px; background: linear-gradient(135deg, rgba(28, 28, 35, 0.75) 0%, rgba(18, 18, 23, 0.85) 100%); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04); display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: all 0.25s ease; box-sizing: border-box; width: 100%; overflow: hidden; } .settings-license-card:hover { border-color: rgba(255, 255, 255, 0.13); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .settings-license-left { display: flex; align-items: center; gap: 10px; flex: 1 1 0%; min-width: 0; overflow: hidden; } .settings-license-icon-box { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(16, 185, 129, 0.04) 100%); border: 1px solid rgba(16, 185, 129, 0.25); color: #10B981; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 12px rgba(16, 185, 129, 0.12); } .settings-license-meta { flex: 1 1 0%; min-width: 0; overflow: hidden; display: flex; flex-direction: column; } .settings-license-header { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow: hidden; } .settings-license-title { color: #FFFFFF; font-size: 12.5px; font-weight: 600; letter-spacing: 0.15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } .license-status-badge { font-size: 9px; font-weight: 700; border-radius: 4px; padding: 1px 5px; text-transform: uppercase; letter-spacing: 0.4px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 16px; box-sizing: border-box; white-space: nowrap; flex-shrink: 0; } .license-status-badge.pro { color: #34D399; background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(16, 185, 129, 0.32); } .license-status-badge.inactive { color: #F87171; background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.32); } #settings-license-status { color: #10B981; font-size: 10.5px; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; margin-top: 3px; display: flex; align-items: center; gap: 5px; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; } #settings-license-status span:not(.license-status-dot), .license-key-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } .license-status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .license-status-dot.active { background: #10B981; box-shadow: 0 0 6px #10B981; } .license-status-dot.inactive { background: #EF4444; box-shadow: 0 0 6px #EF4444; } .settings-deactivate-btn { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.22); color: #f87171; padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; outline: none; margin-left: auto; } .settings-deactivate-btn:hover { background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.45); color: #ffffff; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(239, 68, 68, 0.22); } .settings-deactivate-btn:active { transform: translateY(0); box-shadow: none; } /* 🟢 Responsive Squeeze Handling */ @media (max-width: 380px) { #settings-panel { padding: 16px 12px; } .settings-license-card { padding: 10px 12px; gap: 8px; } .settings-license-left { gap: 8px; } .settings-license-icon-box { width: 30px; height: 30px; border-radius: 6px; } .settings-license-icon-box svg { width: 15px; height: 15px; } .settings-license-title { font-size: 11.5px; } .license-status-badge { font-size: 8.5px; height: 15px; padding: 0 4px; } #settings-license-status { font-size: 10px; } .settings-deactivate-btn { padding: 5px 8px; font-size: 10px; gap: 4px; } .settings-deactivate-btn svg { width: 10px; height: 10px; } } .path-group { display: flex; gap: 8px; margin-bottom: 15px; } .path-group input { flex-grow: 1; color: #888; cursor: not-allowed; background:#08080A; border:1px solid #25252A; padding:8px 10px; border-radius:6px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); outline:none; transition:all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); } label { color: #888; font-size: 10px; font-weight: bold; display: block; margin-top: 10px; } .clear-link { float: right; color: #e74c3c; cursor: pointer; font-size: 10px; transition:0.2s; } .clear-link:hover { text-decoration: underline; color: #c0392b; } /* 🟢 Reactive Settings Action Buttons */ #save-keys-btn, #reset-config-btn { position: relative; padding: 13px 20px; border: none; border-radius: 6px; font-weight: 700; font-size: 13.5px; letter-spacing: 0.5px; cursor: pointer; overflow: hidden; user-select: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); outline: none; display: flex; align-items: center; justify-content: center; gap: 6px; } #save-keys-btn { flex: 2; background: linear-gradient(135deg, #27ae60, #2ecc71); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 15px rgba(39, 174, 96, 0.35); } #save-keys-btn:hover:not(:disabled) { background: linear-gradient(135deg, #2ecc71, #27ae60); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(46, 204, 113, 0.55); filter: brightness(1.08); } #save-keys-btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); box-shadow: 0 2px 8px rgba(39, 174, 96, 0.4); filter: brightness(0.95); } #reset-config-btn { flex: 1; background: linear-gradient(135deg, #c0392b, #e74c3c); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 15px rgba(192, 57, 43, 0.35); } #reset-config-btn:hover:not(:disabled) { background: linear-gradient(135deg, #e74c3c, #c0392b); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6); filter: brightness(1.1); } #reset-config-btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); box-shadow: 0 2px 8px rgba(192, 57, 43, 0.4); filter: brightness(0.95); } #save-keys-btn:disabled, #reset-config-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; box-shadow: none !important; filter: grayscale(0.5); } #toast { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%) translateY(30px) scale(0.9); padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: bold; opacity: 0; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.2); z-index: 99999999; pointer-events: none; text-align: center; border: none; display: flex; align-items: center; justify-content: center; width: max-content; max-width: 90%; box-sizing: border-box; line-height: 1.4; word-break: break-word; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; cursor: pointer; } #scroll-trigger { height: 20px; margin-bottom: 20px; } #usage-container { display: flex; flex-direction: column; gap: 8px; } .usage-bar-bg { background: #333; height: 6px; width: 100%; border-radius: 3px; overflow: hidden; margin-top: 4px; } .usage-bar-fill { height: 100%; background: #047834; transition: width 0.5s; } .usage-text { display: flex; justify-content: space-between; font-size: 10px; color: #aaa; } #progress-container { display: none; position: fixed; bottom: 0; left: 0; width: 100%; height: 6px; background: #222; z-index: 10000; } #progress-bar { height: 100%; /* Fills the container height */ background-color: #00cec9; /* Fallback Cyan color */ width: 0%; /* Starts empty */ transition: width 0.2s ease; /* Smooth animation */ box-shadow: 0 0 10px #00cec9; /* Optional: Adds a nice glow effect */ } /* 1. Remove the Gap */ .library-view .tabs { margin-bottom: 5px !important; } .library-view .search-row { margin-bottom: 0px !important; padding-bottom: 5px !important; } .library-view #results-grid { padding-top: 0px !important; margin-top: 0px !important; border-top: 1px solid #333; /* Adds a clean separator */ } /* 2. Folders & Back Button: Always Horizontal Bars */ .grid-item.folder-style { grid-column: 1 / -1 !important; /* Forces folder to span full width regardless of Grid/List mode */ aspect-ratio: auto !important; height: 38px !important; flex-direction: row !important; align-items: center !important; padding: 0 12px !important; background: #252525 !important; } .grid-item.folder-style .folder-icon, .grid-item.folder-style .back-icon { font-size: 18px; margin-right: 12px; } /* 🟢 NEW: Smooth Image Reveal */ @keyframes softReveal { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } @keyframes softHide { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.98); } } .image-loaded { animation: softReveal 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } /* ========================================= 🍞 BREADCRUMB NAVIGATION ========================================= */ #breadcrumb-container { display: none; /* Hidden by default, JS will show it */ align-items: center; gap: 6px; padding: 8px 12px; background: #08080A; border: 1px solid #25252A; border-radius: 6px; margin-bottom: 15px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); overflow-x: auto; white-space: nowrap; scrollbar-width: none; /* Hides scrollbar on Firefox */ } #breadcrumb-container::-webkit-scrollbar { display: none; /* Hides scrollbar on Chromium/AE */ } .breadcrumb-item { font-size: 11px; color: #888; cursor: pointer; transition: 0.2s ease; padding: 2px 4px; border-radius: 3px; } .breadcrumb-item:hover { color: #0984e3; background: rgba(9, 132, 227, 0.1); } .breadcrumb-item.active { color: #eee; font-weight: bold; cursor: default; background: transparent; } .breadcrumb-separator { color: #555; font-size: 12px; pointer-events: none; } /* ========================================= 🔙 BACK BUTTON UI UPGRADE ========================================= */ .grid-item.back-item { background: rgba(255, 255, 255, 0.03) !important; border: 1px dashed rgba(255, 255, 255, 0.15) !important; } .grid-item.back-item:hover { background: rgba(9, 132, 227, 0.08) !important; border-color: rgba(9, 132, 227, 0.5) !important; } .back-icon-wrapper { width: 44px; height: 44px; background: rgba(0, 0, 0, 0.3); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; color: #888; transition: 0.2s ease; } .back-icon-wrapper svg { width: 20px; height: 20px; } .grid-item.back-item:hover .back-icon-wrapper { background: #0984e3; color: white; transform: scale(1.1); box-shadow: 0 4px 10px rgba(9, 132, 227, 0.4); } .grid-item.back-item .item-name { color: #999 !important; font-weight: 600; letter-spacing: 0.5px; } .grid-item.back-item:hover .item-name { color: #0984e3 !important; } /* List View Adjustments for Back Button */ #results-grid.list-view .grid-item.back-item { background: transparent !important; border: 1px solid transparent !important; border-bottom: 1px solid #222 !important; } #results-grid.list-view .grid-item.back-item:hover { background: rgba(255, 255, 255, 0.03) !important; } #results-grid.list-view .back-icon-wrapper { width: 28px; height: 28px; margin-bottom: 0; margin-right: 15px; } #results-grid.list-view .back-icon-wrapper svg { width: 14px; height: 14px; } /* 3. Asset Names: Ensure they show up correctly in Library */ .library-view .grid-item .item-name { display: block !important; position: static !important; background: none !important; font-size: 11px !important; text-align: left !important; margin: 0 !important; color: #ccc !important; } /* Add this to your CSS */ .invalid-input { border: 2px solid #e74c3c !important; /* Red border */ background-color: #3e1f1f !important; /* Slight red tint */ } /* --- INTEGRATED AE PANEL ONBOARDING (REFINED) --- */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes floatSlow { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } } @keyframes popIn { 0% { opacity: 0; transform: scale(0.9); } 70% { transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } @keyframes pulseGlow { 0% { box-shadow: 0 4px 12px rgba(37,99,235,0.2); } 50% { box-shadow: 0 4px 25px rgba(37,99,235,0.6); } 100% { box-shadow: 0 4px 12px rgba(37,99,235,0.2); } } .welcome-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #07070A; z-index: 100000; display: none; flex-direction: column; overflow-y: auto; overflow-x: hidden; } /* Ambient Decorative Background Lighting & Texture */ .welcome-bg-glow { position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; filter: blur(60px); } .welcome-bg-glow-top { top: -90px; left: 50%; transform: translateX(-50%); width: 340px; height: 260px; background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.22) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 75%); animation: pulseAmbient 8s ease-in-out infinite alternate; } .welcome-bg-glow-bottom { bottom: -60px; right: -20px; width: 260px; height: 260px; background: radial-gradient(circle at center, rgba(139, 92, 246, 0.16) 0%, transparent 70%); animation: pulseAmbient 10s ease-in-out 1s infinite alternate; } .welcome-bg-grid { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; z-index: 0; -webkit-mask-image: radial-gradient(circle at 50% 40%, black 30%, transparent 80%); mask-image: radial-gradient(circle at 50% 40%, black 30%, transparent 80%); opacity: 0.8; } @keyframes pulseAmbient { 0% { opacity: 0.6; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1.05); } } .panel-content { position: relative; z-index: 1; flex-grow: 1; display: flex; flex-direction: column; padding: 26px 18px 20px 18px; max-width: 100%; box-sizing: border-box; } .brand-section { text-align: center; margin-bottom: 20px; position: relative; } /* Redesigned MotionKit Tag: Frosted badge */ .motionkit-tag-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 999px; background: rgba(22, 36, 71, 0.9); border: 1px solid rgba(59, 130, 246, 0.35); margin-bottom: 14px; opacity: 0; animation: fadeSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; box-shadow: 0 2px 10px rgba(37, 99, 235, 0.2); } .motionkit-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: #60A5FA; box-shadow: 0 0 8px #3B82F6; } .motionkit-tag-text { font-size: 10.5px; letter-spacing: 2.8px; color: #93C5FD; font-weight: 800; text-transform: uppercase; } .app-logo-wrapper { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; } .app-logo { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(37, 99, 235, 0.35)); opacity: 0; animation: fadeSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards, floatSlow 4s ease-in-out 0.7s infinite; } .app-title { font-size: 24px; font-weight: 800; color: #FFF; margin: 0; letter-spacing: -0.5px; opacity: 0; animation: fadeSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); } .app-motto { font-size: 10.5px; color: #94A3B8; text-transform: uppercase; letter-spacing: 1.6px; margin-top: 5px; font-weight: 500; opacity: 0; animation: fadeSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.28s forwards; } /* Core 6 Features: 2 Columns x 3 Rows Square/Adjustable Grid */ .setup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; width: 100%; box-sizing: border-box; } .setup-item { --card-accent: #38BDF8; --card-sweep: rgba(56, 189, 248, 0.24); --card-border-hover: rgba(56, 189, 248, 0.6); --card-glow-shadow: rgba(14, 165, 233, 0.3); --card-bg-hover: rgba(14, 22, 34, 0.88); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 12px 11px 11px 11px; background: #121218; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; min-height: 96px; box-sizing: border-box; cursor: pointer; transition: all 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); opacity: 0; animation: fadeSlideUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; user-select: none; -webkit-user-select: none; contain: layout style paint; } /* Interactive Light-Sweep / Glass Proximity Effect (Card Theme Tinted) */ .setup-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle 130px at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--card-sweep) 0%, transparent 70%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 0; } .setup-item:hover::before { opacity: 1; } .setup-item:nth-child(1) { animation-delay: 0.35s; } .setup-item:nth-child(2) { animation-delay: 0.42s; } .setup-item:nth-child(3) { animation-delay: 0.49s; } .setup-item:nth-child(4) { animation-delay: 0.56s; } .setup-item:nth-child(5) { animation-delay: 0.63s; } .setup-item:nth-child(6) { animation-delay: 0.70s; } .setup-item:hover { border-color: var(--card-border-hover); background: var(--card-bg-hover); transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.6), 0 0 18px var(--card-glow-shadow); z-index: 2; } .setup-item:hover .setup-label { color: #FFFFFF; text-shadow: 0 0 12px var(--card-glow-shadow); } .setup-item:active { transform: translateY(1px) scale(0.98); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); } .setup-icon-box { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 8px; position: relative; z-index: 1; transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.24s ease, border-color 0.24s ease; } .setup-item:hover .setup-icon-box { transform: scale(1.1); box-shadow: 0 0 18px var(--card-glow-shadow); border-color: var(--card-border-hover); } /* Individual category colors & themed interaction settings */ .card-global { --card-accent: #38BDF8; --card-sweep: rgba(56, 189, 248, 0.24); --card-border-hover: rgba(56, 189, 248, 0.65); --card-glow-shadow: rgba(14, 165, 233, 0.32); --card-bg-hover: rgba(12, 24, 38, 0.88); } .card-global .setup-icon-box { background: rgba(14, 165, 233, 0.16); border: 1px solid rgba(56, 189, 248, 0.35); box-shadow: 0 0 12px rgba(14, 165, 233, 0.22); } .card-library { --card-accent: #FBBF24; --card-sweep: rgba(251, 191, 36, 0.24); --card-border-hover: rgba(251, 191, 36, 0.65); --card-glow-shadow: rgba(245, 158, 11, 0.32); --card-bg-hover: rgba(32, 24, 12, 0.88); } .card-library .setup-icon-box { background: rgba(245, 158, 11, 0.16); border: 1px solid rgba(251, 191, 36, 0.35); box-shadow: 0 0 12px rgba(245, 158, 11, 0.22); } .card-community { --card-accent: #34D399; --card-sweep: rgba(52, 211, 153, 0.24); --card-border-hover: rgba(52, 211, 153, 0.65); --card-glow-shadow: rgba(16, 185, 129, 0.32); --card-bg-hover: rgba(12, 30, 22, 0.88); } .card-community .setup-icon-box { background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(52, 211, 153, 0.35); box-shadow: 0 0 12px rgba(16, 185, 129, 0.22); } .card-colors { --card-accent: #F472B6; --card-sweep: rgba(244, 114, 182, 0.24); --card-border-hover: rgba(244, 114, 182, 0.65); --card-glow-shadow: rgba(236, 72, 153, 0.32); --card-bg-hover: rgba(32, 14, 26, 0.88); } .card-colors .setup-icon-box { background: rgba(236, 72, 153, 0.16); border: 1px solid rgba(244, 114, 182, 0.35); box-shadow: 0 0 12px rgba(236, 72, 153, 0.22); } .card-ai { --card-accent: #A78BFA; --card-sweep: rgba(167, 139, 250, 0.24); --card-border-hover: rgba(167, 139, 250, 0.65); --card-glow-shadow: rgba(139, 92, 246, 0.32); --card-bg-hover: rgba(24, 16, 38, 0.88); } .card-ai .setup-icon-box { background: rgba(139, 92, 246, 0.16); border: 1px solid rgba(167, 139, 250, 0.35); box-shadow: 0 0 12px rgba(139, 92, 246, 0.22); } .card-downloader { --card-accent: #F87171; --card-sweep: rgba(248, 113, 113, 0.24); --card-border-hover: rgba(248, 113, 113, 0.65); --card-glow-shadow: rgba(239, 68, 68, 0.32); --card-bg-hover: rgba(34, 14, 16, 0.88); } .card-downloader .setup-icon-box { background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(248, 113, 113, 0.35); box-shadow: 0 0 12px rgba(239, 68, 68, 0.22); } .setup-icon { line-height: 1; } .setup-info { position: relative; z-index: 1; width: 100%; } .setup-label { display: block; color: #FFF; font-size: 11.5px; font-weight: 700; line-height: 1.25; margin-bottom: 3px; letter-spacing: -0.2px; } .setup-detail { display: block; color: #94A3B8; font-size: 9.5px; line-height: 1.35; font-weight: 400; } /* ACTIONS */ .panel-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; position: relative; z-index: 1; } .main-cta { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); color: #FFF !important; border: 1px solid rgba(147, 197, 253, 0.35); padding: 14px 20px; border-radius: 10px; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35); opacity: 0; transform: translateY(0) scale(1); animation: popIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.85s forwards, pulseGlow 3s infinite 1.5s; display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 0.3px; } .main-cta:hover { background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); border-color: rgba(255, 255, 255, 0.5); color: #fff !important; transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 25px rgba(37, 99, 235, 0.55); } .main-cta:hover .cta-arrow { transform: translateX(3px); } .cta-arrow { transition: transform 0.2s ease; font-size: 15px; line-height: 1; } .main-cta:active { transform: translateY(1px) scale(0.98); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); } .version-badge { text-align: center; font-size: 8.5px; color: #64748B; margin-top: 18px; letter-spacing: 1.2px; font-weight: 700; opacity: 0; animation: fadeSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.1s forwards; position: relative; z-index: 1; } /* ======================================================== ✨ ULTRA-PREMIUM LICENSE VIEW STYLES ======================================================== */ /* ======================================================== ✨ ULTRA-PREMIUM LICENSE VIEW STYLES ======================================================== */ .license-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 100001; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle at 50% 30%, rgba(22, 26, 40, 0.96) 0%, rgba(8, 9, 12, 0.99) 100%); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; margin: 0 !important; padding: 16px; } .license-panel-content { max-width: 400px; width: 100%; padding: 0; margin: auto; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; } .license-card { width: 100%; text-align: center; padding: 30px 24px 22px 24px; background: radial-gradient(120% 120% at 50% 0%, #171924 0%, #0D0E13 100%); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.12); box-sizing: border-box; position: relative; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .license-brand-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.22); border-radius: 999px; color: #93C5FD; font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .license-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #3B82F6; box-shadow: 0 0 8px #3B82F6, 0 0 2px #60A5FA; animation: licenseDotPulse 2.5s ease-in-out infinite; } @keyframes licenseDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } .license-logo-container { position: relative; width: 64px; height: 64px; margin: 0 auto 12px auto; display: flex; align-items: center; justify-content: center; } .license-logo-glow { position: absolute; inset: -6px; background: radial-gradient(circle, rgba(59, 130, 246, 0.26) 0%, rgba(37, 99, 235, 0.08) 50%, transparent 70%); border-radius: 50%; filter: blur(4px); } .license-logo-img { width: 52px; height: 52px; object-fit: contain; position: relative; z-index: 2; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.65)); } .license-app-title { font-size: 22px; font-weight: 800; color: #FFFFFF; margin: 0 0 6px 0; letter-spacing: -0.4px; display: flex; align-items: center; justify-content: center; } .license-app-subtitle { font-size: 12px; line-height: 1.5; color: #8E92A4; margin: 0 auto 20px auto; max-width: 320px; font-weight: 400; } .host-name-pr { display: none; } .host-name-ae { display: inline; } body.is-ppro .host-name-pr { display: inline !important; } body.is-ppro .host-name-ae { display: none !important; } .license-field-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 0 2px; } .license-field-label { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: #93C5FD; letter-spacing: 1.2px; text-transform: uppercase; } .license-pill-badge { font-size: 10px; color: #6B7280; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); padding: 2px 8px; border-radius: 6px; font-weight: 500; letter-spacing: 0.2px; } /* Outer Single Input Box */ .license-input-wrapper { display: flex; align-items: center; height: 44px; background: rgba(10, 11, 15, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9px; padding: 0 6px 0 13px; margin-bottom: 14px; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); } .license-input-wrapper:hover { border-color: rgba(255, 255, 255, 0.18); background: rgba(13, 14, 20, 0.95); } .license-input-wrapper:focus-within { border-color: #3B82F6 !important; background: rgba(13, 14, 20, 1) !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22), 0 0 16px rgba(59, 130, 246, 0.15) !important; } .license-input-icon { color: #60A5FA; display: flex; align-items: center; justify-content: center; margin-right: 10px; flex-shrink: 0; line-height: 0; opacity: 0.9; } /* Override global input styles to avoid box-in-box */ .license-input-wrapper input, .license-input-wrapper input:focus, input#licenseKeyInput, input#licenseKeyInput:focus { flex: 1 !important; min-width: 0 !important; height: 100% !important; line-height: 42px !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; color: #F3F4F6 !important; font-size: 12.5px !important; font-family: 'Consolas', 'Courier New', monospace !important; letter-spacing: 0.8px !important; font-weight: 500 !important; text-align: left !important; } .license-input-wrapper input::placeholder { color: #525264 !important; letter-spacing: 0.2px !important; text-transform: none !important; font-weight: 400 !important; font-family: 'Inter', 'Segoe UI', sans-serif !important; font-size: 12px !important; } .license-paste-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); color: #A0A0B4; font-size: 11px; font-weight: 600; height: 30px; padding: 0 11px; border-radius: 7px; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; line-height: normal; } .license-paste-btn:hover { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.4); color: #FFFFFF; transform: translateY(-0.5px); } .license-paste-btn:active { transform: translateY(1px); } .license-activate-btn { position: relative; width: 100%; height: 44px; background: linear-gradient(135deg, #3B82F6 0%, #2563EB 60%, #1D4ED8 100%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9px; color: #FFFFFF; font-size: 13.5px; font-weight: 600; letter-spacing: 0.3px; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 8px 22px -4px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22); overflow: hidden; } .license-activate-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px -4px rgba(37, 99, 235, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); filter: brightness(1.06); } .license-activate-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); } .license-activate-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; box-shadow: none !important; filter: grayscale(0.2); } .license-status-box { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); margin: 0 !important; padding: 7px 16px; border-radius: 999px; background: rgba(20, 14, 18, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(239, 68, 68, 0.4); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(239, 68, 68, 0.2); display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: #FCA5A5; white-space: nowrap; max-width: 90%; z-index: 100005; pointer-events: auto; cursor: pointer; animation: floatAlertIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1.2) forwards; transition: opacity 0.25s ease, transform 0.25s ease; } .license-status-box.success { background: rgba(12, 24, 18, 0.96); border-color: rgba(16, 185, 129, 0.45); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(16, 185, 129, 0.2); color: #6EE7B7; } @keyframes floatAlertIn { 0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.95); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @keyframes inputShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } .license-status-icon { font-size: 13px; flex-shrink: 0; } .license-footer { margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #727288; } .license-link { color: #60A5FA; text-decoration: none; font-weight: 600; transition: all 0.2s ease; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .license-link:hover { color: #93C5FD; text-decoration: none; transform: translateX(1px); } /* --- ENHANCE & UPSCALE UI UPGRADES --- */ .enhance-prop-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); gap: 8px; /* 🟢 FIX: Added gap to prevent label and select from touching when squeezed */ flex-wrap: nowrap; } .enhance-prop-row:last-child { border-bottom: none; } .enhance-label { color: #bbb; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; /* 🟢 FIX: Prevents the label text from wrapping awkwardly */ overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; } .enhance-select { background: #111; color: #eee; border: 1px solid #444; padding: 6px 10px; border-radius: 4px; font-size: 11px; outline: none; cursor: pointer; /* 🟢 THE FIX: Replaced rigid min-width with flexible shrinking */ min-width: 0; flex: 0 1 170px; /* Increased from 140px to prevent clipping */ /* 🟢 FIX: Force long text to truncate with '...' instead of breaking the box */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: 0.2s ease; } .enhance-select:hover { border-color: #666; } .enhance-select:focus { border-color: #0984e3; box-shadow: 0 0 5px rgba(9, 132, 227, 0.3); } /* Custom Range Slider */ input[type=range].custom-range-slider { -webkit-appearance: none; width: 100%; background: transparent; } input[type=range].custom-range-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 14px; width: 14px; border-radius: 50%; background: #3498db; cursor: pointer; margin-top: -5px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); border: 1px solid #2980b9; } input[type=range].custom-range-slider::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #333; border-radius: 2px; } input[type=range].custom-range-slider:focus { outline: none; } input[type=range].custom-range-slider::-webkit-slider-thumb:hover { background: #4aa3df; } .enhance-upload-box { border: 2px dashed #444; border-radius: 8px; padding: 30px 15px; text-align: center; cursor: pointer; background: #151515; transition: all 0.2s ease; position: relative; overflow: hidden; } /* 🪄 Image Upscaler: Default Blue Outline */ #enhance-upload-zone { border-color: #0984e3; } #enhance-upload-zone:hover { border-color: #3498db; background: rgba(9, 132, 227, 0.08); } #enhance-upload-zone::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent, rgba(9, 132, 227, 0.05), transparent); transform: translateX(-100%); transition: 0.5s ease; } #enhance-upload-zone:hover::before { transform: translateX(100%); } /* 🎬 Video Upscaler: Orange Outline */ #enhance-upload-zone.video-mode { border-color: #e67e22; } #enhance-upload-zone.video-mode:hover { border-color: #f39c12; background: rgba(230, 126, 34, 0.1); } #enhance-upload-zone.video-mode::before { background: linear-gradient(45deg, transparent, rgba(230, 126, 34, 0.1), transparent); } /* ✂️ Auto Background Remover: Purple Outline */ #bg-upload-zone { border-color: #8e44ad; } #bg-upload-zone:hover { border-color: #9b59b6; background: rgba(142, 68, 173, 0.1); } #bg-upload-zone::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent, rgba(142, 68, 173, 0.05), transparent); transform: translateX(-100%); transition: 0.5s ease; } #bg-upload-zone:hover::before { transform: translateX(100%); } /* 🖌️ Object Inpainting: Dark Green Outline */ #bg-upload-zone.inpaint-mode { border-color: #15803d; } #bg-upload-zone.inpaint-mode:hover { border-color: #22c55e; background: rgba(21, 128, 61, 0.1); } #bg-upload-zone.inpaint-mode::before { background: linear-gradient(45deg, transparent, rgba(21, 128, 61, 0.06), transparent); } /* 🎬 Video Interpolation: Electric Cyan Outline */ #interpolation-upload-zone { border-color: #0891b2; } #interpolation-upload-zone:hover { border-color: #06b6d4; background: rgba(8, 145, 178, 0.1); } #interpolation-upload-zone::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent, rgba(8, 145, 178, 0.06), transparent); transform: translateX(-100%); transition: 0.5s ease; } #interpolation-upload-zone:hover::before { transform: translateX(100%); } .enhance-primary-btn { width: 100%; background: linear-gradient(90deg, #0984e3, #e84393); border: none; padding: 14px; color: white; font-weight: 700; border-radius: 6px; cursor: pointer; transition: 0.3s ease; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 4px 15px rgba(9, 132, 227, 0.2); white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 8px; } .enhance-primary-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(9, 132, 227, 0.4); filter: brightness(1.1); } /* Base style for the main panel */ #colors-panel { font-family: 'Segoe UI', sans-serif; } /* PREMIUM SUBTAB SWITCHER (SEGMENTED CONTROL) */ .subtab-container { display: flex; background: rgba(10, 10, 12, 0.6); padding: 6px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 20px; box-shadow: inset 0 2px 8px rgba(0,0,0,0.5); gap: 6px; } .subtab-btn { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; cursor: pointer; font-size: 11px; color: #888; background: transparent; font-weight: 600; border-radius: 8px; border: 1px solid transparent; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); } .subtab-btn:hover { color: #ccc; background: rgba(255, 255, 255, 0.03); } .subtab-btn.active { color: #fff !important; background: #202025 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; border: 1px solid #383840 !important; } /* ✨ THE ANIMATION (Applies to AI strips and Pro swatches) */ .color-stripe, #pro-swatches div { transition: flex 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s; /* Smooth speed */ flex: 1; /* Default width */ position: relative; z-index: 1; } /* EXPAND ON HOVER */ .color-stripe:hover, #pro-swatches div:hover { flex: 2 !important; /* Expands to 3x width */ z-index: 10; box-shadow: 0 0 15px rgba(0,0,0,0.5); /* Pop-out effect */ } #pro-swatches { /* Change 100px to whatever height you prefer */ height: 100px !important; } /* Highlight state for both Pro and AI swatches */ .color-stripe.active-swatch, #pro-swatches div.active-swatch { outline: 3px solid white !important; outline-offset: -3px; box-shadow: 0 0 15px rgba(255,255,255,0.8); z-index: 10; } /* --- TOGGLE SWITCH UI --- */ .switch { position: relative; display: inline-block; width: 34px; height: 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #444; transition: .3s; border-radius: 20px; } .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; } input:checked + .slider { background-color: #0984e3; } input:checked + .slider:before { transform: translateX(14px); } /* 🟢 FIX 1: Expand the container and lock the Y-axis so the hit-box cannot clip */ #ai-history-bar { height: 95px !important; overflow-y: hidden !important; } /* --- AI HISTORY THUMBNAILS --- */ .history-thumb { /* 🟢 FIX 2: Fixed height ensures it NEVER overflows the parent bounds when scaled */ height: 70px !important; border-radius: 4px; cursor: pointer; box-sizing: border-box; aspect-ratio: 1/1; object-fit: cover; display: block; position: relative; z-index: 1; /* 🟢 FIX 3: Removed 3D Hardware Acceleration (In older AE versions, forced compositing layers can detach the hit-box) */ transition: transform 0.15s ease, box-shadow 0.15s ease, outline 0.15s ease; outline: 2px solid transparent; outline-offset: -2px; } .history-thumb:hover { transform: scale(1.15); z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.6); } .history-thumb.active { outline-color: #0984e3; box-shadow: 0 0 10px rgba(9, 132, 227, 0.8); transform: scale(1.05); z-index: 5; } #back-to-top { display: none; /* Hidden by default */ position: fixed; bottom: 25px; right: 25px; width: 32px; height: 32px; background: rgba(9, 132, 227, 0.7); /* Match your active tab blue, slightly transparent */ color: white; border-radius: 50%; text-align: center; line-height: 32px; font-size: 14px; cursor: pointer; z-index: 99999; /* High enough to float over results, below context menu */ box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: 0.2s ease-in-out; border: 1px solid rgba(255, 255, 255, 0.1); } #back-to-top:hover { background: rgba(9, 132, 227, 1); transform: translateY(-2px) scale(1.05); } /* Hide Back-to-Top in Settings Panel */ body.settings-open #back-to-top, body:has(#settings-panel:not([style*="display: none"]):not([style*="display:none"])) #back-to-top { display: none !important; } /* 🛡️ BACK TO TOP INTERACTION SHIELD (Prevents accidental clicks on assets/favorites during & immediately after scroll) */ body.scrolling-to-top #results-grid, body.scrolling-to-top .grid-item, body.scrolling-to-top .fav-btn, body.scrolling-to-top .info-btn { pointer-events: none !important; } /* --- AI PREVIEW CLEAR BUTTON --- */ .preview-clear-btn { position: absolute; top: 8px; right: 8px; background: rgba(18, 18, 22, 0.92); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; width: 28px; height: 28px; font-size: 18px; font-weight: bold; line-height: 24px; text-align: center; cursor: pointer; z-index: 100; display: none; /* Hidden until an image loads */ transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); } .preview-clear-btn:hover { background: #e74c3c; /* Turns red on hover */ color: white; border-color: #c0392b; transform: scale(1.15); box-shadow: 0 0 12px rgba(231, 76, 60, 0.6); } /* 🟢 Nested Submenu Mechanics */ .has-submenu { position: relative; /* Crucial: anchors the absolute submenu */ display: flex; justify-content: space-between; align-items: center; } .has-submenu .arrow { font-size: 9px; opacity: 0.6; } .submenu { display: none; position: absolute; left: 100%; /* Pops out exactly to the right of the parent */ top: -6px; /* Aligns nicely with the parent item */ /* 🟢 MATCHES THE MAIN MENU DARK THEME EXACTLY */ background-color: #151518 !important; /* Solid background to prevent transparency bleeding */ border: 1px solid #25252A !important; border-radius: 8px; padding: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); /* 🟢 THE FIX: Forces the submenu to tightly hug the folder names */ width: max-content !important; white-space: nowrap !important; max-height: 250px; overflow-y: auto; /* Scrollbar if they have 50+ folders */ z-index: 10001; } /* Reveal on hover */ .has-submenu:hover .submenu { display: block; } /* Submenu item styling */ .submenu .ctx-item { padding: 4px 10px; margin-bottom: 1px; border-radius: 6px; cursor: pointer; color: #E0E0E0; font-size: 13px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.1s ease; } .submenu .ctx-item:hover { background-color: #1C1C22 !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } /* ========================================== 🟦 BULK SELECTION MODE STYLES ========================================== */ /* ========================================== 🟦 COMPACT BULK SELECTION FLOATING BARS ========================================== */ @keyframes bulkBarSlideUp { 0% { transform: translate(-50%, 12px) scale(0.98); opacity: 0; } 100% { transform: translate(-50%, 0) scale(1); opacity: 1; } } /* Universal Compact Floating Toolbar - Fluid flex container with squeeze protection */ .cep-floating-bar, .bulk-action-bar, #bulk-action-bar, #lib-bulk-action-bar { display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: rgba(18, 18, 22, 0.96); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px; padding: 0 10px; height: 38px; min-height: 38px; max-height: 38px; z-index: 9999; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); align-items: center; justify-content: center; gap: 4px; width: max-content; max-width: calc(100% - 24px); box-sizing: border-box; white-space: nowrap; animation: bulkBarSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1); } /* Count Indicator Pill - Squeeze Protected (Fixed Height 22px) */ .cep-bar-count, .bulk-action-bar .bulk-count, #bulk-count, #lib-bulk-count { color: #10B981; background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(16, 185, 129, 0.35); border-radius: 12px; font-weight: 700; font-size: 11px; padding: 0 7px; height: 22px; line-height: 22px; white-space: nowrap; flex-shrink: 0; /* 🟢 Squeeze Protection: never squish count number */ letter-spacing: 0.3px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 22px; box-sizing: border-box; } /* Smart Count Label Truncation */ .cep-bar-count .count-lbl, .bulk-action-bar .count-lbl, .count-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; pointer-events: none; } /* Slim Dividers - Fixed Height 16px */ .cep-bar-divider, .bulk-action-bar .bulk-divider { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.16); margin: 0 2px; flex-shrink: 0; /* 🟢 Squeeze Protection: keep separator lines intact */ } /* Action Buttons - Fixed Height 28px across ALL stages */ .cep-bar-btn, .bulk-action-bar button, .bulk-btn { background: transparent; border: 1px solid transparent; cursor: pointer; font-size: 11px; font-weight: 600; padding: 0 8px; height: 28px; min-height: 28px; max-height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: 0 1 auto; /* 🟢 Squeeze Protection: fluid flex shrinkage */ min-width: 0; /* 🟢 Squeeze Protection: enables text ellipsis truncation */ line-height: 1; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; user-select: none; box-sizing: border-box; } /* 🟢 Squeeze Protection: Protect the icon from squishing (Top tabs logic) */ .cep-bar-btn svg, .bulk-action-bar button svg, .bulk-btn svg { flex-shrink: 0; display: block; width: 13px; height: 13px; pointer-events: none; } /* 🟢 Squeeze Protection: Smart Text Truncation with Ellipsis (Top tabs logic) */ .cep-bar-btn span, .bulk-action-bar button span, .bulk-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; pointer-events: none; } .cep-bar-btn:hover, .bulk-action-bar button:hover, .bulk-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.1); transform: translateY(-1px); } .cep-bar-btn:active, .bulk-action-bar button:active, .bulk-btn:active { transform: scale(0.96); } /* Button Variants */ .cep-btn-import, #bulk-import, #lib-bulk-import { color: #10B981; } .cep-btn-import:hover, #bulk-import:hover, #lib-bulk-import:hover { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.28); } .cep-btn-select-all, #bulk-select-all, #lib-bulk-select-all { color: #38BDF8; } .cep-btn-select-all:hover, #bulk-select-all:hover, #lib-bulk-select-all:hover { background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.28); } .cep-btn-move, #bulk-move { color: #F59E0B; } .cep-btn-move:hover, #bulk-move:hover { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.28); } .cep-btn-delete, #bulk-delete { color: #EF4444; } .cep-btn-delete:hover, #bulk-delete:hover { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.28); } .cep-btn-cancel, #bulk-cancel, #lib-bulk-cancel { color: #9CA3AF; font-weight: 500; } .cep-btn-cancel:hover, #bulk-cancel:hover, #lib-bulk-cancel:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); } /* ========================================== 🛡️ LINEAR PROGRESSIVE SQUEEZE ADAPTATION - Bar height remains strictly 38px - Button height remains strictly 28px - Bottom offset remains strictly 24px ========================================== */ /* Stage 1: As panel narrows (≤ 450px), hide "Selected" word first so buttons have full space */ @media (max-width: 450px) { .cep-bar-count .count-lbl, .bulk-action-bar .count-lbl, .count-lbl { display: none !important; } .cep-bar-count, .bulk-action-bar .bulk-count, #bulk-count, #lib-bulk-count { padding: 0 6px; } } /* Stage 2: Squeeze buttons fluidly down to 300px (text smoothly gets ellipsis without jumping) */ @media (max-width: 360px) { .cep-floating-bar, .bulk-action-bar, #bulk-action-bar, #lib-bulk-action-bar { padding: 0 8px; gap: 3px; } .cep-bar-btn, .bulk-action-bar button, .bulk-btn { padding: 0 6px; gap: 3px; } .cep-bar-divider, .bulk-action-bar .bulk-divider { margin: 0 1px; } } /* Stage 3: Extreme Narrow (≤ 300px) - Icons Only (Squares buttons like top tabs @media, NO height reduction) */ @media (max-width: 300px) { .cep-floating-bar, .bulk-action-bar, #bulk-action-bar, #lib-bulk-action-bar { padding: 0 6px; gap: 2px; max-width: calc(100% - 16px); } .cep-bar-btn span, .bulk-action-bar button span, .bulk-btn span { display: none !important; } .cep-bar-btn, .bulk-action-bar button, .bulk-btn { padding: 0 6px; min-width: 28px; width: 28px; border-radius: 6px; } } /* Programmatic overrides compatibility */ .cep-floating-bar.is-semi-compact .count-lbl, .bulk-action-bar.is-semi-compact .count-lbl { display: none !important; } .cep-floating-bar.is-compact .count-lbl, .bulk-action-bar.is-compact .count-lbl, .cep-floating-bar.is-compact .cep-bar-btn span, .bulk-action-bar.is-compact button span, .cep-floating-bar.is-ultra-compact .count-lbl, .bulk-action-bar.is-ultra-compact .count-lbl, .cep-floating-bar.is-ultra-compact .cep-bar-btn span, .bulk-action-bar.is-ultra-compact button span { display: none !important; } .cep-floating-bar.is-compact .cep-bar-btn, .bulk-action-bar.is-compact button, .bulk-action-bar.is-compact .bulk-btn, .cep-floating-bar.is-ultra-compact .cep-bar-btn, .bulk-action-bar.is-ultra-compact button, .bulk-action-bar.is-ultra-compact .bulk-btn { padding: 0 6px; min-width: 28px; width: 28px; height: 28px; } /* ========================================== 📂 SHARED MULTI-SELECT UI STYLES ========================================== */ /* The Item Highlight - Emerald Green Smooth Selection */ .grid-item.asset-selected, .grid-item.lib-asset-selected { outline: none !important; opacity: 0.95; z-index: 5; /* Keep selected item above neighbors to prevent any adjacency clipping */ } /* Inner Border Overlay to guarantee flawless rendering without bleeding/cropping */ .grid-item.asset-selected::after, .grid-item.lib-asset-selected::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-sizing: border-box; border: 3px solid #10B981; border-radius: inherit; box-shadow: inset 0 0 12px rgba(16, 185, 129, 0.15), 0 0 10px rgba(16, 185, 129, 0.35); pointer-events: none; z-index: 20; animation: selectionFadeIn 0.15s ease-out; } @keyframes selectionFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* The Tick Mark - Emerald Green */ .select-tick { display: none; position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; background: #10B981; border-radius: 50%; border: 2px solid white; z-index: 50; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: bold; box-shadow: 0 2px 6px rgba(0,0,0,0.4); } .grid-item.asset-selected .select-tick, .grid-item.lib-asset-selected .select-tick { display: flex !important; } /* The Right-Click Context Menu */ .bulk-context-menu { display: none; position: fixed; background-color: rgba(21, 21, 24, 0.85) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid #25252A !important; border-radius: 8px; padding: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(255,255,255,0.05); min-width: 170px; z-index: 10000; color: #E0E0E0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .bulk-context-menu .ctx-separator { height: 1px; background: #444; margin: 4px 0; } /* 1. THE MENU CONTAINER */ .floating-menu { position: absolute; z-index: 10000; background-color: #151518 !important; border: 1px solid #25252A !important; border-radius: 8px; padding: 6px; /* 🟢 Fixes the massive empty space by hugging the text tightly */ width: max-content !important; white-space: nowrap !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); color: #E0E0E0; font-size: 13px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* 2. THE MENU ITEMS */ .floating-menu .ctx-item { padding: 4px 10px; margin-bottom: 1px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; /* 🟢 Glues the emoji and text together on the left */ justify-content: flex-start !important; gap: 8px; transition: background-color 0.1s ease; } .floating-menu .ctx-item:hover { background-color: #1C1C22 !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); border-radius: 6px; } /* 3. THE SUBMENU ARROW */ .floating-menu .ctx-item .arrow { /* 🟢 Pushes ONLY the arrow to the far right, with a buffer */ margin-left: auto !important; padding-left: 20px; } /* 🟢 FLIP SUBMENU TO THE LEFT WHEN NEAR RIGHT EDGE */ .floating-menu.flip-sub .submenu { left: auto !important; right: 100% !important; } /* Add this to your style.css */ input:focus, textarea:focus { outline: 2px solid #3498db; outline-offset: -2px; } .fav-color-swatch, .fav-icon-swatch { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: transform 0.1s ease; } .fav-color-swatch:hover, .fav-icon-swatch:hover { transform: scale(1.2); } .fav-color-swatch.active, .fav-icon-swatch.active { outline: 2px solid #fff; outline-offset: 2px; } .fav-icon-swatch { border-radius: 4px; background: #25252A; } /* Subtle glow for main buttons if the user tabs to them */ button:focus { box-shadow: 0 0 10px rgba(52, 152, 219, 0.8); outline: none; } /* 🟢 FIX: Prevent AI tool tabs from overflowing when the panel shrinks */ .ai-tool-tab { min-width: 0 !important; /* Forces the tab to shrink below its text width */ white-space: nowrap !important; /* Prevents text from wrapping to a second line */ overflow: hidden !important; text-overflow: ellipsis !important; /* Adds '...' if the text gets cut off */ padding: 10px 5px !important; /* Slightly reduced horizontal padding for tight spaces */ } /* ========================================== 🎨 COLOR LAB: PREMIUM INTERACTIVE BUTTONS ========================================== */ /* 1. Base State: Premium shaping, glassy edge, and smooth motion */ #apply-fill-btn, #apply-stroke-btn, #apply-text-btn { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-top: 1px solid rgba(255, 255, 255, 0.25) !important; /* Glassy top highlight */ border-radius: 6px !important; color: #ffffff !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; } /* 2. Custom Gradients & Resting Shadows for each color */ #apply-fill-btn { background: linear-gradient(135deg, #2ecc71, #219653) !important; box-shadow: 0 4px 10px rgba(46, 204, 113, 0.2) !important; } #apply-stroke-btn { background: linear-gradient(135deg, #3498db, #2471a3) !important; box-shadow: 0 4px 10px rgba(52, 152, 219, 0.2) !important; } #apply-text-btn { background: linear-gradient(135deg, #9b59b6, #76448a) !important; box-shadow: 0 4px 10px rgba(155, 89, 182, 0.2) !important; } /* 3. Hover State: Lift, glow, and intensify gradient */ #apply-fill-btn:hover { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 8px 20px rgba(46, 204, 113, 0.5) !important; filter: brightness(1.1) !important; } #apply-stroke-btn:hover { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 8px 20px rgba(52, 152, 219, 0.5) !important; filter: brightness(1.1) !important; } #apply-text-btn:hover { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 8px 20px rgba(155, 89, 182, 0.5) !important; filter: brightness(1.1) !important; } /* 4. Active (Click) State: Physical press effect */ #apply-fill-btn:active, #apply-stroke-btn:active, #apply-text-btn:active { transform: translateY(1px) scale(0.98) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important; filter: brightness(0.9) !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; /* Dim the highlight on press */ } #paste-image-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(52, 152, 219, 0.5) !important; filter: brightness(1.1); } /* Tip Toast */ .tip-toast { position: fixed; bottom: 20px; left: 0; right: 0; margin: 0 auto; background: rgba(15, 15, 20, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 4px solid #3B82F6; border-radius: 8px; padding: 12px 18px; color: #E5E5E5; font-size: 11.5px; box-shadow: 0 8px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); z-index: 9999; display: flex; align-items: center; gap: 12px; transform: translateY(100px); opacity: 0; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; width: max-content; max-width: 85%; line-height: 1.4; } .tip-toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; } .tip-toast-icon { font-size: 16px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); flex-shrink: 0; } .tip-toast-content strong { color: #60A5FA; font-weight: 600; } .tip-toast-close { cursor: pointer; opacity: 0.5; transition: 0.2s; font-size: 16px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: auto; flex-shrink: 0; } .tip-toast-close:hover { opacity: 1; background: #e74c3c; color: #FFF; transform: scale(1.1); } /* Custom Range Slider for Zoom & Pan */ .ae-slider { appearance: none; -webkit-appearance: none; background: transparent; height: 12px; outline: none !important; margin: 0; padding: 0; border: none !important; } .ae-slider::-webkit-slider-runnable-track { width: 100%; height: 12px; border-radius: 6px; background: #08080A; border: 1px solid #25252A; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); box-sizing: border-box; } .ae-slider:focus { outline: none !important; box-shadow: none !important; } .ae-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: 10px; width: 30px; border-radius: 5px; background: #444; cursor: pointer; margin-top: 0px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); } .ae-slider::-webkit-slider-thumb:hover { background: #666; } .ae-slider::-webkit-slider-thumb:active { background: #2563EB; } .scrubbable-input { cursor: ew-resize; } /* Animation for Grid <-> List View Transition */ #results-grid { transition: grid-template-columns 0.3s ease, gap 0.3s ease !important; } .grid-item { transition: all 0.3s ease, transform 0.2s, border-color 0.2s, box-shadow 0.2s !important; } .grid-item img { transition: opacity 0.2s ease !important; } .grid-item .item-name { transition: margin 0.3s ease, font-size 0.3s ease, opacity 0.3s ease !important; } /* 🟢 PR FIX: HIDE UNSUPPORTED FILTERS FOR PREMIERE PRO */ body.is-ppro .filter-option[data-filter="3d_all"], body.is-ppro .filter-option[data-filter="3d"], body.is-ppro .filter-option[data-filter="hdris"], body.is-ppro .filter-option[data-filter="hdri"], body.is-ppro .filter-option[data-filter="preset"], body.is-ppro .filter-option[data-filter="preset_text"], body.is-ppro .filter-option[data-filter="script_preset"] { display: none !important; pointer-events: none; } /* 🟢 PR FIX: HIDE AE SPECIFIC COLOR TOOLS */ body.is-ppro #color-sample-btn, body.is-ppro #ae-apply-section, body.is-ppro #ai-btn-expressions, body.is-ppro #ai-btn-console, body.is-ppro #ai-greeting-note { display: none !important; } /* ========================================================================== SECTION 2: URL INPUT & DOWNLOADER PANEL CONTROLS ========================================================================== */ #url-input-container:focus-within { border-color: rgba(155, 89, 182, 0.6) !important; box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.15), inset 0 2px 10px rgba(0,0,0,0.5) !important; } #download-url-btn { background: linear-gradient(90deg, #27ae60, #2ecc71) !important; color: white !important; } #download-url-btn:hover { background: linear-gradient(90deg, #27ae60, #2ecc71) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(39, 174, 96, 0.5) !important; filter: brightness(1.1); } /* ========================================================================== SECTION 3: TOGGLE SWITCH & SETTINGS INPUT CONTROLS ========================================================================== */ .toggle-switch { position: relative; display: inline-block; width: 40px; height: 20px; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #08080A; border: 1px solid #25252A; transition: .4s; border-radius: 20px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); } .toggle-slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; top: 0; bottom: 0; margin: auto; background-color: #888; transition: .4s; border-radius: 50%; } .toggle-switch input:checked + .toggle-slider { background-color: rgba(37, 99, 235, 0.2); border-color: #2563EB; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); background-color: #2563EB; box-shadow: 0 0 8px rgba(37, 99, 235, 0.8); } .ae-slider { -webkit-appearance: none; background: transparent; height: 12px; outline: none !important; margin: 0; padding: 0; border: none !important; } .ae-slider::-webkit-slider-runnable-track { width: 100%; height: 12px; border-radius: 6px; background: #08080A; border: 1px solid #25252A; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); box-sizing: border-box; } .ae-slider:focus { outline: none !important; box-shadow: none !important; } .ae-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 10px; width: 30px; border-radius: 5px; background: #444; cursor: pointer; margin-top: 0px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); } .ae-slider::-webkit-slider-thumb:hover { background: #666; } .ae-slider::-webkit-slider-thumb:active { background: #2563EB; } #ud-audio-waveform-container ::part(scroll)::-webkit-scrollbar { display: none !important; } #ud-audio-pitch-slider { -webkit-appearance: none; background: transparent; width: 100px; } #ud-audio-pitch-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: #2563EB; cursor: pointer; margin-top: -7px; box-shadow: 0 2px 5px rgba(0,0,0,0.5); } #ud-audio-pitch-slider::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #08080A; border: 1px solid #25252A; border-radius: 2px; } #ud-audio-pitch::-webkit-outer-spin-button, #ud-audio-pitch::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #ud-audio-pitch { -moz-appearance: textfield; } /* ========================================================================== SECTION 4: YOUTUBE PANEL & STREAM PREVIEW DESIGN SYSTEM ========================================================================== */ /* YouTube Premium Design System */ @keyframes pulseRadar { 0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 50% { transform: scale(1.15); opacity: 0.85; box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); } } @keyframes shimmerWave { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes ytSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .yt-subtab-btn { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #9CA3AF !important; border-radius: 9px !important; font-weight: 600 !important; letter-spacing: 0.2px !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; flex: 1 1 0 !important; min-width: 0 !important; box-sizing: border-box !important; } .yt-subtab-btn svg { flex-shrink: 0 !important; } .yt-subtab-btn span { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; } .yt-subtab-btn:hover { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #F3F4F6 !important; transform: translateY(-1px); } .yt-subtab-btn[data-target="ud-youtube-view"].active { background: linear-gradient(135deg, rgba(239, 35, 60, 0.2) 0%, rgba(186, 24, 27, 0.12) 100%) !important; border: 1px solid rgba(255, 70, 95, 0.45) !important; color: #FFFFFF !important; box-shadow: 0 4px 20px rgba(239, 35, 60, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; font-weight: 700 !important; } .yt-subtab-btn[data-target="ud-pinterest-view"].active { background: linear-gradient(135deg, rgba(230, 0, 35, 0.2) 0%, rgba(189, 8, 28, 0.12) 100%) !important; border: 1px solid rgba(255, 75, 95, 0.45) !important; color: #FFFFFF !important; box-shadow: 0 4px 20px rgba(230, 0, 35, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; font-weight: 700 !important; } .yt-subtab-btn[data-target="ud-link-view"].active { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(126, 34, 206, 0.12) 100%) !important; border: 1px solid rgba(192, 132, 252, 0.45) !important; color: #F3E8FF !important; box-shadow: 0 4px 20px rgba(168, 85, 247, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; font-weight: 700 !important; } .yt-search-wrapper { position: relative; display: flex; align-items: center; background: rgba(18, 18, 24, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.35); margin-bottom: 14px; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); padding: 4px 6px 4px 12px; gap: 8px; } .yt-search-wrapper:focus-within { border-color: rgba(239, 35, 60, 0.6); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(239, 35, 60, 0.18), 0 6px 24px rgba(239, 35, 60, 0.22); } #yt-search-input { width: 100%; background: transparent !important; border: none !important; box-shadow: none !important; color: #F9FAFB !important; padding: 9px 4px; font-size: 13px; font-weight: 500; letter-spacing: 0.15px; outline: none !important; min-width: 0; font-family: inherit; height: auto; } #yt-search-input:focus { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } #yt-search-input::placeholder { color: #6B7280; font-weight: 400; } #yt-search-btn { background: linear-gradient(135deg, #EF233C 0%, #BA181B 100%); border: 1px solid rgba(255, 120, 140, 0.35); color: #FFFFFF; padding: 8px 18px; border-radius: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; cursor: pointer; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 10px rgba(239, 35, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0; user-select: none; } #yt-search-btn:hover { background: linear-gradient(135deg, #FF334B 0%, #D90429 100%); transform: translateY(-1px); box-shadow: 0 4px 18px rgba(239, 35, 60, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35); border-color: rgba(255, 140, 160, 0.5); } #yt-search-btn:active { transform: scale(0.97); box-shadow: 0 1px 4px rgba(239, 35, 60, 0.4); } .yt-chips-container { display: flex; align-items: center; gap: 7px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 14px 2px; margin: 0 -2px 2px -2px; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .yt-chips-container::-webkit-scrollbar { display: none; } .yt-chip { background: rgba(26, 26, 32, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); color: #D1D5DB; padding: 7px 15px; border-radius: 20px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.15px; cursor: pointer; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); user-select: none; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 6px; box-sizing: border-box; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); contain: layout style paint; } .yt-chip:hover { background: rgba(255, 255, 255, 0.09); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.22); transform: translateY(-1.5px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); } .yt-chip.active { background: linear-gradient(135deg, #EF233C 0%, #BA181B 100%) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 120, 140, 0.5) !important; box-shadow: 0 3px 14px rgba(239, 35, 60, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; font-weight: 700; } .yt-chip.active:hover { background: linear-gradient(135deg, #FF334B 0%, #D90429 100%) !important; border-color: rgba(255, 140, 160, 0.6) !important; box-shadow: 0 5px 18px rgba(239, 35, 60, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; transform: translateY(-1.5px); } .yt-filter-select { background: #15151B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 9px center; border: 1px solid rgba(255, 255, 255, 0.1); color: #E5E7EB; padding: 6px 26px 6px 11px; border-radius: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px; outline: none; cursor: pointer; transition: all 0.2s ease; -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 80px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .yt-filter-select:hover { border-color: rgba(255, 255, 255, 0.25); background-color: #1C1C24; color: #FFFFFF; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); transform: translateY(-1px); } .yt-filter-select:focus { border-color: rgba(239, 35, 60, 0.6); box-shadow: 0 0 0 2px rgba(239, 35, 60, 0.2); background-color: #1C1C24; color: #FFFFFF; } .yt-clear-btn { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #9CA3AF; display: none; align-items: center; justify-content: center; cursor: pointer; user-select: none; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0; padding: 0; margin-right: 2px; } .yt-clear-btn:hover { background: rgba(239, 35, 60, 0.25) !important; border-color: rgba(239, 35, 60, 0.55) !important; color: #FF4D6D !important; transform: scale(1.1); box-shadow: 0 0 10px rgba(239, 35, 60, 0.35); } .yt-clear-btn:active { transform: scale(0.95); } /* Active Shimmering YouTube Skeleton Loaders */ .yt-skeleton-card { background: #111116; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04); } .yt-skeleton-media { aspect-ratio: 16/9; background: #17171F; position: relative; overflow: hidden; } .yt-skeleton-media::after, .yt-skeleton-block::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); animation: shimmerWave 1.4s infinite linear; } .yt-skeleton-block { position: relative; overflow: hidden; background: #1E1E28; border-radius: 5px; } /* ========================================================================== SECTION 5: AI GENERATION & ENHANCEMENT PANEL CONTROLS ========================================================================== */ #ai-prompt:focus { border-color: #3B82F6 !important; box-shadow: 0 0 8px rgba(59, 130, 246, 0.4), inset 0 2px 4px rgba(0,0,0,0.5) !important; } #open-history-btn:hover { background: #25252A !important; } #enhance-prompt-btn:hover { background: rgba(139, 92, 246, 0.25) !important; border-color: #A78BFA !important; box-shadow: 0 0 20px rgba(139, 92, 246, 0.4), inset 0 0 10px rgba(236, 72, 153, 0.3) !important; transform: translateY(-1px); } #enhance-prompt-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none !important; transform: none !important; } /* ========================================================================== SECTION 6: AI ASSISTANT CHAT & MESSAGE BUBBLES ========================================================================== */ #ai-assistant-messages { -webkit-user-select: text; user-select: text; cursor: auto; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; contain: layout style; } #ai-assistant-chat-input:focus { border-color: #a777e3 !important; box-shadow: 0 0 12px rgba(167, 119, 227, 0.4); } #ai-assistant-send-btn:hover { filter: brightness(1.15); box-shadow: 0 6px 20px rgba(167, 119, 227, 0.5), inset 0 1px 0 rgba(255,255,255,0.3); transform: translateY(-1px); } #ai-assistant-send-btn:active { transform: translateY(1px); box-shadow: 0 2px 10px rgba(167, 119, 227, 0.4); } #ai-assistant-abort-btn:hover { filter: brightness(1.15); box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5), inset 0 1px 0 rgba(255,255,255,0.3); transform: translateY(-1px); } #ai-assistant-abort-btn:active { transform: translateY(1px); box-shadow: 0 2px 10px rgba(255, 107, 107, 0.4); } #ai-assistant-new-chat:hover { filter: brightness(1.15); box-shadow: 0 4px 15px rgba(211, 84, 0, 0.5); transform: translateY(-1px); color: #fff !important; } #ai-assistant-new-chat:active { transform: translateY(1px); box-shadow: 0 2px 5px rgba(211, 84, 0, 0.4); } #ai-btn-expressions:hover, #ai-btn-console:hover, #ai-btn-history:hover { background: #1C1C22 !important; border-color: #383840 !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.5); } #ai-btn-expressions:active, #ai-btn-console:active, #ai-btn-history:active { transform: translateY(1px); box-shadow: none; } /* ========================================================================== SECTION 7: CODEMIRROR & CODE EDITOR INTERFACE OVERRIDES ========================================================================== */ .CodeMirror { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; height: 100% !important; width: 100% !important; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; } .CodeMirror-scroll { overflow-y: auto !important; overflow-x: auto !important; } .CodeMirror-line.error-line-highlight { background-color: rgba(231, 76, 60, 0.35) !important; border-radius: 3px; } .cm-search-match { background-color: rgba(50, 205, 50, 0.4); border-radius: 2px; } .cm-active-search-match { background-color: rgba(50, 205, 50, 0.9) !important; color: #000 !important; border-radius: 2px; } /* ========================================================================== SECTION 8: PINTEREST MASONRY MODULE & IN-CARD WORKFLOW ========================================================================== */ /* Pinterest Search Bar */ .pin-search-wrapper { position: relative; display: flex; align-items: center; background: rgba(18, 18, 24, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 4px 6px 4px 12px; gap: 8px; margin-bottom: 12px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3); transition: all 0.25s ease; min-width: 0; } .pin-search-wrapper:focus-within { border-color: #E60023; box-shadow: 0 0 18px rgba(230, 0, 35, 0.25), inset 0 2px 4px rgba(0,0,0,0.5); } #pin-search-input { flex: 1; width: 100%; min-width: 0; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; color: #FFFFFF !important; font-size: 13px !important; padding: 7px 0 !important; height: auto !important; border-radius: 0 !important; font-family: inherit; } #pin-search-input:focus { border: none !important; outline: none !important; box-shadow: none !important; } #pin-search-input::placeholder { color: #6B7280; } .pin-clear-btn { width: 20px; height: 20px; min-width: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #9CA3AF; display: none; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; user-select: none; } .pin-clear-btn:hover { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; } #pin-search-btn { background: linear-gradient(135deg, #E60023 0%, #BD081C 100%); border: 1px solid rgba(255, 120, 130, 0.35); color: #FFFFFF; padding: 7px 15px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; box-shadow: 0 3px 12px rgba(230, 0, 35, 0.4); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); user-select: none; flex-shrink: 0; white-space: nowrap; } #pin-search-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(230, 0, 35, 0.55); filter: brightness(1.1); } #pin-search-btn:active { transform: translateY(1px); } /* Category Chips (Slider Removed) */ .pin-chips-container { display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none !important; -ms-overflow-style: none !important; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .pin-chips-container::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } .pin-chip { flex-shrink: 0; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: #9CA3AF; font-size: 11.5px; font-weight: 600; padding: 5px 13px; border-radius: 16px; cursor: pointer; user-select: none; transition: all 0.2s ease; white-space: nowrap; } .pin-chip:hover { background: rgba(255, 255, 255, 0.1); color: #F3F4F6; border-color: rgba(255, 255, 255, 0.18); } .pin-chip.active { background: rgba(230, 0, 35, 0.15); border-color: rgba(230, 0, 35, 0.45); color: #FF6B81; box-shadow: 0 2px 10px rgba(230, 0, 35, 0.25); } /* Pinterest Filter Select */ .pin-filter-select { background: #15151B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 9px center; border: 1px solid rgba(255, 255, 255, 0.1); color: #E5E7EB; padding: 6px 26px 6px 11px; border-radius: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px; outline: none; cursor: pointer; transition: all 0.2s ease; -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 80px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .pin-filter-select:hover { border-color: rgba(255, 255, 255, 0.25); background-color: #1C1C24; color: #FFFFFF; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); transform: translateY(-1px); } .pin-filter-select:focus { border-color: rgba(230, 0, 35, 0.6); box-shadow: 0 0 0 2px rgba(230, 0, 35, 0.2); background-color: #1C1C24; color: #FFFFFF; } /* Authentic Pinterest Masonry Multi-Column Grid (True JS Masonry) */ .pin-masonry-grid { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; contain: layout style; } .pin-columns-wrapper { display: flex; gap: 14px; align-items: flex-start; width: 100%; box-sizing: border-box; } .pin-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; } @media (max-width: 580px) { .pin-columns-wrapper { gap: 10px; } .pin-col { gap: 10px; } } /* Individual Masonry Pin Card */ .pin-card { width: 100%; box-sizing: border-box; margin-bottom: 0; border-radius: 16px; overflow: hidden; position: relative; background: #141419; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease; cursor: pointer; display: flex; flex-direction: column; contain: layout style paint; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); } .pin-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(230, 0, 35, 0.15); border-color: rgba(230, 0, 35, 0.35); } /* Media Box */ .pin-media-wrapper { position: relative; width: 100%; background: #0D0D11; overflow: hidden; border-radius: 16px 16px 0 0; } .pin-img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .pin-card:hover .pin-img { transform: scale(1.025); } /* Video Player */ .pin-video-player { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; opacity: 0; pointer-events: none; z-index: 2; background: transparent; transition: opacity 0.25s ease; } .pin-card.is-video-playing .pin-video-player { opacity: 1; pointer-events: auto; } /* Badges */ .pin-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(10, 10, 14, 0.88); color: #FFFFFF; font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; display: flex; align-items: center; gap: 4px; z-index: 4; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 2px 6px rgba(0,0,0,0.5); user-select: none; } .pin-badge-video { background: rgba(230, 0, 35, 0.85); border-color: rgba(255, 255, 255, 0.25); } /* Play Button Overlay on Video Pins */ .pin-play-btn-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); width: 44px; height: 44px; border-radius: 50%; background: rgba(14, 14, 18, 0.88); border: 1.5px solid rgba(255, 255, 255, 0.4); color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55); opacity: 0.92; } .pin-play-btn-overlay svg { margin-left: 2px; transition: transform 0.2s ease; } .pin-card:hover .pin-play-btn-overlay { transform: translate(-50%, -50%) scale(1.08); background: #E60023; border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 6px 22px rgba(230, 0, 35, 0.6); opacity: 1; } .pin-play-btn-overlay:active { transform: translate(-50%, -50%) scale(0.92); } /* When video is actively playing, hide the central play button and the Video badge */ .pin-card.is-video-playing .pin-play-btn-overlay { display: none !important; } .pin-card.is-video-playing .pin-badge { display: none !important; } /* Close / Cancel Preview Button at Top-Right (YouTube Style) */ .pin-close-player-btn { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; background: rgba(10, 10, 14, 0.95); border: 1px solid rgba(255, 255, 255, 0.3); color: #FFFFFF; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; cursor: pointer; z-index: 30; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.75); user-select: none; } .pin-card.is-video-playing .pin-close-player-btn { display: flex; } .pin-close-player-btn:hover { background: #E60023; border-color: rgba(255, 120, 140, 0.7); box-shadow: 0 0 14px rgba(230, 0, 35, 0.7); transform: scale(1.1); } .pin-close-player-btn:active { transform: scale(0.92); } /* Audio Toggle Button at Top-Left */ .pin-audio-toggle-btn { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; background: rgba(10, 10, 14, 0.95); border: 1px solid rgba(255, 255, 255, 0.3); color: #FFFFFF; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; z-index: 30; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.75); user-select: none; } .pin-card.is-video-playing .pin-audio-toggle-btn { display: flex; } .pin-audio-toggle-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); transform: scale(1.1); } .pin-audio-toggle-btn:active { transform: scale(0.92); } /* Pin Info Footer */ .pin-info-footer { padding: 10px 12px; background: #141419; display: flex; flex-direction: column; gap: 4px; } .pin-title { color: #F3F4F6; font-size: 12px; font-weight: 600; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pin-author { color: #9CA3AF; font-size: 10.5px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pin-author-avatar { width: 16px; height: 16px; border-radius: 50%; background: #25252D; flex-shrink: 0; } /* Spinner */ @keyframes pinSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Skeleton Loading Cards */ .pin-skeleton-card { break-inside: avoid; margin-bottom: 14px; border-radius: 16px; overflow: hidden; background: #141419; border: 1px solid rgba(255, 255, 255, 0.06); position: relative; } .pin-skeleton-img { width: 100%; background: #181822; position: relative; overflow: hidden; } .pin-skeleton-img::after, .pin-skeleton-text::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); animation: shimmerWave 1.4s infinite linear; } .pin-skeleton-text { height: 12px; background: #22222E; border-radius: 4px; margin: 10px 12px 6px 12px; position: relative; overflow: hidden; } /* In-Card Action Toolbar & Progress Bar */ .pin-card-actions-wrapper { margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 6px; } .pin-card-action-bar { display: flex; align-items: center; gap: 6px; } .pin-card-quality-select { flex: 1; min-width: 0; background: #0D0D12; border: 1px solid rgba(255, 255, 255, 0.1); color: #D1D5DB; font-size: 10.5px; padding: 5px 6px; border-radius: 6px; outline: none; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: border-color 0.2s ease; } .pin-card-quality-select:focus { border-color: #E60023; } .pin-card-import-btn { background: linear-gradient(135deg, #059669 0%, #10B981 100%); border: 1px solid rgba(255, 255, 255, 0.2); color: #FFFFFF; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); } .pin-card-import-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } .pin-card-import-btn:active { transform: translateY(1px); } .pin-card-save-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: #D1D5DB; font-size: 11px; font-weight: 600; padding: 5px 8px; min-width: 28px; height: 26px; box-sizing: border-box; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex-shrink: 0; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); outline: none; box-shadow: none; } .pin-card-save-btn:hover { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.25); transform: translateY(-1px); } .pin-card-save-btn:active { transform: translateY(1px); } .pin-card-save-btn:focus { outline: none; box-shadow: none; } .pin-card-save-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } /* YouTube In-Card Action Buttons */ .yt-card-trim-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #D1D5DB; width: 32px; height: 32px; min-width: 32px; padding: 0; border-radius: 7px; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: all 0.2s; outline: none; box-shadow: none; } .yt-card-trim-btn:hover { background: rgba(59, 130, 246, 0.22); border-color: rgba(96, 165, 250, 0.5); color: #93C5FD; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35); } .yt-card-trim-btn:focus { outline: none; box-shadow: none; } .yt-card-trim-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } .yt-card-save-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #D1D5DB; width: 32px; height: 32px; min-width: 32px; padding: 0; border-radius: 7px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: all 0.2s; outline: none; box-shadow: none; } .yt-card-save-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.25); color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .yt-card-save-btn:focus { outline: none; box-shadow: none; } .yt-card-save-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } /* In-Card Progress Bar */ .pin-card-progress-bar { position: relative; height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; display: none; overflow: hidden; margin-top: 2px; width: 100%; box-sizing: border-box; } .pin-card-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #10B981, #34D399, #6EE7B7); box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); border-radius: 3px; transition: width 0.2s ease; } /* Waiting State for Reconnection (YouTube & Pinterest) */ .pin-btn-waiting, .yt-btn-waiting { background: #D97706 !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4) !important; cursor: pointer !important; animation: pinWaitingPulse 1.5s infinite ease-in-out; } .pin-btn-waiting:hover, .yt-btn-waiting:hover { background: #B45309 !important; border-color: rgba(255, 255, 255, 0.5) !important; box-shadow: 0 6px 20px rgba(217, 119, 6, 0.6) !important; } @keyframes pinWaitingPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }