css /* ============================================ ULTRA GALLERY - Custom Styles Dark theme with pink/red accents for premium NSFW viewing ============================================ */ /* ==================== CSS VARIABLES ==================== */ :root { --color-ultra-dark: #0a0a0b; --color-ultra-panel: #141416; --color-ultra-border: #2a2a2d; --color-ultra-pink: #ec4899; --color-ultra-red: #dc2626; --color-ultra-pink-glow: rgba(236, 72, 153, 0.2); --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ==================== GLOBAL STYLES ==================== */ * { scrollbar-width: thin; scrollbar-color: var(--color-ultra-border) var(--color-ultra-dark); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Custom scrollbar for WebKit */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-ultra-dark); } ::-webkit-scrollbar-thumb { background: var(--color-ultra-border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #3a3a3d; } /* ==================== MASONRY GRID ==================== */ #image-grid { /* CSS Columns for true masonry layout */ column-gap: 1rem; } /* Individual gallery item */ .gallery-item { break-inside: avoid; /* Prevent items from splitting across columns */ margin-bottom: 1rem; position: relative; border-radius: 12px; overflow: hidden; background: var(--color-ultra-panel); border: 1px solid var(--color-ultra-border); transition: var(--transition-smooth); cursor: zoom-in; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.5s forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } /* Stagger animation for grid items */ .gallery-item:nth-child(1) { animation-delay: 0.05s; } .gallery-item:nth-child(2) { animation-delay: 0.1s; } .gallery-item:nth-child(3) { animation-delay: 0.15s; } .gallery-item:nth-child(4) { animation-delay: 0.2s; } .gallery-item:nth-child(5) { animation-delay: 0.25s; } .gallery-item:nth-child(6) { animation-delay: 0.3s; } .gallery-item:nth-child(7) { animation-delay: 0.35s; } .gallery-item:nth-child(8) { animation-delay: 0.4s; } /* Hover effects */ .gallery-item:hover { transform: translateY(-4px); border-color: rgba(236, 72, 153, 0.4); box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 30px -5px rgba(236, 72, 153, 0.2); } .gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.4s ease, filter 0.3s ease; } .gallery-item:hover img { transform: scale(1.03); filter: brightness(0.8); } /* Image overlay with title */ .image-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.5rem 0.75rem 0.75rem; background: linear-gradient( to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100% ); opacity: 0; transform: translateY(10px); transition: var(--transition-smooth); pointer-events: none; } .gallery-item:hover .image-overlay { opacity: 1; transform: translateY(0); } /* ==================== SIDEBAR STYLES ==================== */ .sidebar-source-btn { width: 100%; text-align: left; padding: 0.75rem 1rem; border-radius: 8px; transition: var(--transition-smooth); color: #9ca3af; font-size: 0.875rem; display: flex; align-items: center; gap: 0.75rem; } .sidebar-source-btn:hover { background: rgba(236, 72, 153, 0.1); color: #f472b6; } .sidebar-source-btn.active { background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(220, 38, 38, 0.2)); color: white; border: 1px solid rgba(236, 72, 153, 0.3); font-weight: 500; } .sidebar-source-btn .source-icon { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; } .sidebar-source-btn.active .source-icon { background: var(--color-ultra-pink); opacity: 1; box-shadow: 0 0 8px var(--color-ultra-pink); } /* Multi-select checkbox styling */ .sidebar-source-label { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; border-radius: 8px; transition: var(--transition-smooth); color: #9ca3af; font-size: 0.875rem; cursor: pointer; } .sidebar-source-label:hover { background: rgba(236, 72, 153, 0.1); color: #f472b6; } .sidebar-source-label input[type="checkbox"] { appearance: none; width: 16px; height: 16px; border: 2px solid var(--color-ultra-border); border-radius: 4px; background: transparent; cursor: pointer; position: relative; flex-shrink: 0; } .sidebar-source-label input[type="checkbox"]:checked { background: linear-gradient(135deg, var(--color-ultra-pink), var(--color-ultra-red)); border-color: transparent; } .sidebar-source-label input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ==================== FILTER BUTTONS ==================== */ .filter-btn { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; transition: var(--transition-smooth); } .filter-btn.active { background: rgba(236, 72, 153, 0.15); color: var(--color-ultra-pink); border: 1px solid rgba(236, 72, 153, 0.3); } .filter-btn:not(.active):hover { color: #d1d5db; background: rgba(255, 255, 255, 0.05); } /* ==================== LOAD MORE BUTTON ==================== */ #load-more { position: relative; overflow: hidden; } #load-more::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transform: translateX(-100%); transition: transform 0.6s; } #load-more:hover::before { transform: translateX(100%); } /* ==================== LIGHTBOX ==================== */ #lightbox { animation: lightboxFadeIn 0.3s ease-out; } @keyframes lightboxFadeIn { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(12px); } } #lightbox-img { animation: lightboxZoom 0.3s ease-out; } @keyframes lightboxZoom { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ==================== LOADING STATES ==================== */ .skeleton { background: linear-gradient( 90deg, var(--color-ultra-panel) 25%, rgba(255,255,255,0.05) 50%, var(--color-ultra-panel) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ==================== UTILITY ANIMATIONS ==================== */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(236, 72, 153, 0.3); } 50% { box-shadow: 0 0 40px rgba(236, 72, 153, 0.5); } } .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } /* ==================== RESPONSIVE ADJUSTMENTS ==================== */ @media (max-width: 640px) { #image-grid { column-count: 1; } .gallery-item { border-radius: 8px; } } @media (min-width: 641px) and (max-width: 1024px) { #image-grid { column-count: 2; } } @media (min-width: 1025px) { #image-grid { column-count: 3; } } @media (min-width: 1280px) { #image-grid { column-count: 4; } } /* ==================== SELECTION ==================== */ ::selection { background: rgba(236, 72, 153, 0.3); color: white; }