/* ===================================================== WILDVERSE MOBILE TOOLBAR File: public_html/wildverse/Styles/wildverse-library/wildverse-mobile-toolbar.css ROLE: - Compact mobile search/filter/stats area - Search remains full width - Filters become small chip controls - Stats become tiny metric bubbles - Must load AFTER wildverse-library.css ===================================================== */ @media (max-width: 760px) { /* ===================================================== FILTER TOOLBAR CONTAINER ===================================================== */ .wv-toolbar { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; margin: 10px 0 10px !important; padding: 10px !important; border: 1px solid rgba(120, 247, 255, 0.16) !important; border-radius: 18px !important; background: radial-gradient(circle at 12% 0%, rgba(120, 247, 255, 0.10), transparent 42%), linear-gradient(135deg, rgba(120, 247, 255, 0.055), rgba(255, 79, 216, 0.03)), rgba(3, 10, 18, 0.88) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 26px rgba(0, 0, 0, 0.22) !important; } /* Search full width */ #wvSearch { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; height: 46px !important; padding: 0 14px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 16px !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)), rgba(0, 0, 0, 0.32) !important; color: #f2ffff !important; font-size: 14px !important; font-weight: 750 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 16px rgba(120, 247, 255, 0.055) !important; } #wvSearch::placeholder { color: rgba(220, 238, 246, 0.42) !important; } /* ===================================================== FILTER SELECTS AS COMPACT CHIPS ===================================================== */ #wvPersonaFilter, #wvTypeFilter, #wvMoodFilter, #wvSortFilter { appearance: none !important; -webkit-appearance: none !important; width: 100% !important; min-width: 0 !important; height: 42px !important; padding: 0 24px 0 10px !important; border: 1px solid rgba(120, 247, 255, 0.18) !important; border-radius: 999px !important; background: linear-gradient(45deg, transparent 50%, #dffcff 50%) calc(100% - 13px) 50% / 6px 6px no-repeat, linear-gradient(135deg, #dffcff 50%, transparent 50%) calc(100% - 9px) 50% / 6px 6px no-repeat, linear-gradient(135deg, rgba(120, 247, 255, 0.08), rgba(255, 79, 216, 0.035)), rgba(3, 10, 18, 0.78) !important; color: rgba(236, 252, 255, 0.92) !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1 !important; text-overflow: ellipsis !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 14px rgba(120, 247, 255, 0.055) !important; overflow: hidden !important; white-space: nowrap !important; } #wvPersonaFilter:focus, #wvTypeFilter:focus, #wvMoodFilter:focus, #wvSortFilter:focus, #wvSearch:focus { outline: none !important; border-color: rgba(120, 247, 255, 0.62) !important; box-shadow: 0 0 0 3px rgba(120, 247, 255, 0.12), 0 0 20px rgba(120, 247, 255, 0.12) !important; } #wvPersonaFilter option, #wvTypeFilter option, #wvMoodFilter option, #wvSortFilter option { background: #142124 !important; color: #eaffff !important; font-size: 14px !important; } /* ===================================================== MOBILE STATS — MINIMAL SVG ICON STATS Order: 1 = sounds 2 = downloads 3 = likes 4 = personas ===================================================== */ .wv-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; align-items: center !important; width: 100% !important; margin: 10px 0 12px !important; padding: 0 !important; } .wv-stats > * { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-width: 0 !important; min-height: 34px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Hide long labels */ .wv-stats > * span, .wv-stats > * small { display: none !important; } /* Number */ .wv-stats > * strong, .wv-stats > * b, #wvCountTotal, #wvCountDownloads, #wvCountLikes { display: inline-block !important; margin: 0 !important; padding: 0 !important; color: #f4fbff !important; font-size: 17px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; } /* ===================================================== SVG ICON BASE ===================================================== */ .wv-stats > *::before { content: ""; display: inline-block !important; width: 22px !important; height: 22px !important; flex: 0 0 22px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 22px 22px !important; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.16)) drop-shadow(0 0 10px rgba(120, 247, 255, 0.06)); } /* ===================================================== 1 — SOUNDS Neon cyan music note ===================================================== */ .wv-stats > *:nth-child(1)::before { background-image: url("data:image/svg+xml;utf8,\ \ \ ") !important; } /* ===================================================== 2 — DOWNLOADS Minimal tray download arrow ===================================================== */ .wv-stats > *:nth-child(2)::before { background-image: url("data:image/svg+xml;utf8,\ \ \ \ \ "); } /* ===================================================== 3 — LIKES Cool outlined thumbs-up ===================================================== */ .wv-stats > *:nth-child(3)::before { background-image: url("data:image/svg+xml;utf8,\ \ \ "); } /* ===================================================== 4 — PERSONAS Minimal user / identity glyph ===================================================== */ .wv-stats > *:nth-child(4)::before { background-image: url("data:image/svg+xml;utf8,\ \ \ \ "); } @media (max-width: 390px) { .wv-stats { gap: 8px !important; } .wv-stats > * { gap: 6px !important; min-height: 30px !important; } .wv-stats > *::before { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; background-size: 20px 20px !important; } .wv-stats > * strong, .wv-stats > * b, #wvCountTotal, #wvCountDownloads, #wvCountLikes { font-size: 15px !important; } } }