/* ============================================================================ APHOTO-BRIDGE.CSS — Variable Bridge & Theme Switcher Styles Only contains: 1. Variable bridge (maps aphoto vars to 光影集 vars for JS compatibility) 2. Theme switcher panel styles (aphoto-mode specific) 3. Theme swatch color previews NOTE: This file intentionally does NOT override any aphoto-base.css styles. The aphoto-mode HTML structure already matches aphoto-base.css expectations. ============================================================================ */ /* ============================================================ 1. VARIABLE BRIDGE — Map aphoto vars to 光影集 vars When .aphoto-mode is active on , 光影集's CSS variables are populated from aphoto's variable values. This ensures JS code referencing 光影集 var names still works. ============================================================ */ .aphoto-mode { --c-bg: var(--bg); --c-bg-grad: var(--bg); --c-surface: var(--bg-2); --c-surface-2: var(--bg-3); --c-text: var(--text); --c-muted: var(--text-dim); --c-accent: var(--accent); --c-accent-2: var(--accent); --c-border: var(--border); --c-on-accent: var(--white); --hero-grad: linear-gradient(135deg, var(--accent), var(--accent)); --hero-pattern: none; --nav-bg: var(--nav-scrolled-bg, rgba(10,10,10,0.92)); --nav-blur: blur(20px); --radius: 4px; --shadow: 0 18px 40px rgba(0,0,0,0.3); --card-hover-lift: -6px; --deco: none; } /* ============================================================ 2. THEME SWITCHER PANEL — aphoto-mode specific styles The theme switcher HTML is shared between 光影集 and aphoto modes. aphoto-base.css does not style these elements, so we define them here. ============================================================ */ .aphoto-mode .ts-btn { display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:30px; border:1px solid var(--border);background:var(--bg-2);color:var(--text); cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;transition:.18s; } .aphoto-mode .ts-btn:hover{border-color:var(--accent)} .aphoto-mode .ts-panel{ position:absolute;right:0;top:calc(100% + 10px);width:520px;max-width:calc(100vw - 32px); max-height:calc(100vh - 130px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch; background:var(--bg-2);border:1px solid var(--border);border-radius:18px; box-shadow:0 8px 30px rgba(0,0,0,0.3);padding:18px;opacity:0;visibility:hidden;transform:translateY(-8px); transition:.22s;z-index:200; scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg-3); } .aphoto-mode .ts-panel::-webkit-scrollbar{width:6px} .aphoto-mode .ts-panel::-webkit-scrollbar-track{background:var(--bg-3);border-radius:10px} .aphoto-mode .ts-panel::-webkit-scrollbar-thumb{background-color:var(--accent);border-radius:10px} .aphoto-mode .ts-panel.open{opacity:1;visibility:visible;transform:translateY(0)} .aphoto-mode .ts-tabs{display:flex;gap:0;margin-bottom:14px;border-bottom:2px solid var(--border)} .aphoto-mode .ts-tab{flex:1;padding:10px 12px;border:none;background:transparent;color:var(--text-dim);font-size:13px;font-weight:600;cursor:pointer;transition:.18s;border-bottom:2px solid transparent;margin-bottom:-2px;font-family:inherit} .aphoto-mode .ts-tab:hover{color:var(--text)} .aphoto-mode .ts-tab.active{color:var(--accent);border-bottom-color:var(--accent)} .aphoto-mode .ts-tab-content{display:none} .aphoto-mode .ts-tab-content.active{display:block} .aphoto-mode .ts-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .aphoto-mode .ts-item{ display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px; border:1px solid var(--border);transition:.16s;cursor:pointer;text-decoration:none; } .aphoto-mode .ts-item:hover{border-color:var(--accent);background:var(--bg-3)} .aphoto-mode .ts-item.active{border-color:var(--accent);background:var(--accent-glow)} .aphoto-mode .ts-swatch{width:30px;height:30px;border-radius:9px;flex-shrink:0;border:1px solid var(--border)} .aphoto-mode .ts-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0} .aphoto-mode .ts-meta b{font-size:13px;font-weight:700;color:var(--text)} .aphoto-mode .ts-meta small{font-size:10px;color:var(--text-dim)} .aphoto-mode .ts-meta i{font-size:10px;color:var(--text-dim);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:768px){ .aphoto-mode .ts-btn{padding:8px 12px} .aphoto-mode .ts-panel{width:360px;max-width:calc(100vw - 24px)} .aphoto-mode .ts-grid{grid-template-columns:1fr 1fr} } /* Color variant selector */ .aphoto-mode .ts-color-section{ margin-top:14px;padding-top:14px;border-top:1px solid var(--border); } .aphoto-mode .ts-color-label{ font-size:12px;color:var(--text-dim);margin-bottom:8px;font-weight:600; } .aphoto-mode .ts-color-row{ display:flex;flex-wrap:wrap;gap:6px; } .aphoto-mode .ts-color-btn{ padding:6px 14px;border-radius:20px;border:1px solid var(--border); background:var(--bg-3);color:var(--text-dim);cursor:pointer; font-family:inherit;font-size:12px;font-weight:600;transition:.16s; } .aphoto-mode .ts-color-btn:hover{border-color:var(--accent);color:var(--text)} .aphoto-mode .ts-color-btn.active{ border-color:var(--accent);background:var(--accent);color:var(--bg); } /* ============================================================ 3. JOURNAL / ARTICLE LIST STYLES aphoto-base.css doesn't include these, so we define them here using aphoto's design language ============================================================ */ .aphoto-mode .journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .aphoto-mode .journal-item { display: block; position: relative; overflow: hidden; border-radius: 8px; background: var(--bg-3); cursor: pointer; transition: transform 0.4s var(--transition), box-shadow 0.4s var(--transition); border: 1px solid var(--border); } .aphoto-mode .journal-item:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); border-color: var(--accent); } .aphoto-mode .journal-item-cover { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-2); } .aphoto-mode .journal-item-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--transition); } .aphoto-mode .journal-item:hover .journal-item-cover img { transform: scale(1.08); } .aphoto-mode .journal-item-body { padding: 24px; } .aphoto-mode .journal-item-body h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 8px; transition: color 0.3s; } .aphoto-mode .journal-item:hover .journal-item-body h3 { color: var(--accent); } .aphoto-mode .journal-item-body p { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aphoto-mode .journal-item-meta { font-size: 12px; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; display: flex; justify-content: space-between; } @media(max-width:768px) { .aphoto-mode .journal-grid { grid-template-columns: 1fr; } } /* ============================================================ 4. WATERFALL MODE STYLES (aphoto mode) ============================================================ */ .aphoto-mode .wf-container { columns: 4; column-gap: 20px; max-width: 1200px; margin: 0 auto; } .aphoto-mode .wf-item { break-inside: avoid; margin-bottom: 20px; display: block; position: relative; overflow: hidden; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); background: var(--bg-3); transition: transform 0.4s var(--transition), box-shadow 0.4s var(--transition); } .aphoto-mode .wf-item:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,0.4); border-color: var(--accent); } .aphoto-mode .wf-item-inner { position: relative; overflow: hidden; } .aphoto-mode .wf-img-wrap { overflow: hidden; } .aphoto-mode .wf-img-wrap img { width: 100%; height: auto; display: block; transition: transform 0.6s var(--transition); } .aphoto-mode .wf-item:hover .wf-img-wrap img { transform: scale(1.05); } .aphoto-mode .wf-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.8)); opacity: 0; transition: opacity 0.3s; display: flex; align-items: flex-end; } .aphoto-mode .wf-item:hover .wf-overlay { opacity: 1; } .aphoto-mode .wf-overlay-content { padding: 16px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .aphoto-mode .wf-album-badge { font-size: 11px; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; } .aphoto-mode .wf-view { font-family: var(--font-display); font-size: 14px; color: var(--text); } @media(max-width:1024px) { .aphoto-mode .wf-container { columns: 3; } } @media(max-width:768px) { .aphoto-mode .wf-container { columns: 2; } } @media(max-width:480px) { .aphoto-mode .wf-container { columns: 1; } } /* ============================================================ 5. THEME SWITCHER SWATCHES Color previews for aphoto themes in the theme switcher ============================================================ */ .ts-swatch.ts-ap-dark{background:linear-gradient(135deg,#0a0a0a,#c9a96e)} .ts-swatch.ts-ap-light{background:linear-gradient(135deg,#f8f8f8,#2563eb)} .ts-swatch.ts-ap-warm{background:linear-gradient(135deg,#f5f0e8,#b45309)} .ts-swatch.ts-ap-neon{background:linear-gradient(135deg,#0a0a14,#00ff9f,#ff006e)} .ts-swatch.ts-ap-magazine{background:linear-gradient(135deg,#1a1a1a,#e63946)} .ts-swatch.ts-ap-brutal{background:linear-gradient(135deg,#f5f5f5,#000,#ff3b00)} .ts-swatch.ts-ap-glass{background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(100,200,255,.3),rgba(255,100,200,.3))} .ts-swatch.ts-ap-split{background:linear-gradient(90deg,#0a0a0a 50%,#f8f8f8 50%)} .ts-swatch.ts-ap-terminal{background:linear-gradient(135deg,#0c0c0c,#00ff41)} .ts-swatch.ts-ap-horizontal{background:linear-gradient(135deg,#1a1a2e,#e94560)} .ts-swatch.ts-ap-minimal{background:linear-gradient(135deg,#ffffff,#f0f0f0)} .ts-swatch.ts-ap-retro{background:linear-gradient(135deg,#2a1a3a,#ff6b35,#f7c59f)} .ts-swatch.ts-ap-organic{background:linear-gradient(135deg,#f0ebe0,#8ab17d)} .ts-swatch.ts-ap-darkroom{background:linear-gradient(135deg,#1a0505,#e63946)} .ts-swatch.ts-ap-polaroid{background:linear-gradient(135deg,#f5f0e8,#ff6b9d)} .ts-swatch.ts-ap-cinematic{background:linear-gradient(135deg,#0a0a0a,#d4a574)} .ts-swatch.ts-ap-contactsheet{background:linear-gradient(135deg,#1a1a1a,#888)} .ts-swatch.ts-ap-bokeh{background:linear-gradient(135deg,#1a1a2e,#a8e6cf,#ffd3b6)} .ts-swatch.ts-ap-silver{background:linear-gradient(135deg,#1a1a1a,#e0e0e0)} .ts-swatch.ts-ap-viewfinder{background:linear-gradient(135deg,#0a0a0a,#7cb342)} .ts-swatch.ts-ap-filmstrip{background:linear-gradient(135deg,#1a1010,#d4a574,#1a1010)} .ts-swatch.ts-ap-goldenhour{background:linear-gradient(135deg,#ff6b35,#f7c59f,#ffd166)} .ts-swatch.ts-ap-exposure{background:linear-gradient(135deg,#0a0a0a,#e0e0e0,#0a0a0a)} .ts-swatch.ts-ap-charcoal{background:linear-gradient(135deg,#f5f0e8,#5a7a96)} .ts-swatch.ts-ap-watercolor{background:linear-gradient(135deg,#e8f4f8,#a8d8ea,#aa96da)} .ts-swatch.ts-ap-oilpaint{background:linear-gradient(135deg,#3e2723,#d4a574)} .ts-swatch.ts-ap-collage{background:linear-gradient(135deg,#e8e0d4,#c44536,#fdca40)} .ts-swatch.ts-ap-lightpaint{background:linear-gradient(135deg,#0a0a0a,#00ffff,#ff00ff)} .ts-swatch.ts-ap-macro{background:linear-gradient(135deg,#1a1a2e,#4ecdc4)} .ts-swatch.ts-ap-infrared{background:linear-gradient(135deg,#1a0a2e,#ff006e,#00b4d8)} .ts-swatch.ts-ap-wetplate{background:linear-gradient(135deg,#1a1a1a,#6d4c41)} .ts-swatch.ts-ap-startrail{background:linear-gradient(135deg,#0a0a1a,#4fc3f7)} .ts-swatch.ts-ap-doubleexp{background:linear-gradient(135deg,#1a1a2e,#e94560,#0a0a0a)} .ts-swatch.ts-ap-lensbaby{background:linear-gradient(135deg,#faf6f0,#d4a574,#ff6b9d)} .ts-swatch.ts-ap-daguerreotype{background:linear-gradient(135deg,#1a1a1a,#c0c0c0)} .ts-swatch.ts-ap-pinhole{background:linear-gradient(135deg,#1a1a1a,#f5f0e8)} .ts-swatch.ts-ap-lomography{background:linear-gradient(135deg,#1a0a0a,#e63946,#f7c59f)} .ts-swatch.ts-ap-fisheye{background:linear-gradient(135deg,#0a0a1a,#4fc3f7,#0a0a1a)} .ts-swatch.ts-ap-tri-x{background:linear-gradient(135deg,#0a0a0a,#f5f5f5,#0a0a0a)} .ts-swatch.ts-ap-portra{background:linear-gradient(135deg,#fdf5e6,#e8b4a0)} .ts-swatch.ts-ap-velvia{background:linear-gradient(135deg,#0a1a0a,#4caf50,#2196f3)} .ts-swatch.ts-ap-ektachrome{background:linear-gradient(135deg,#0a1a2e,#2196f3)} .ts-swatch.ts-ap-chronophoto{background:linear-gradient(135deg,#1a1a1a,#ff6b35,#1a1a1a)} .ts-swatch.ts-ap-aerial{background:linear-gradient(135deg,#2c3e50,#34495e,#95a5a6)} .ts-swatch.ts-ap-underwater{background:linear-gradient(135deg,#003366,#0099cc)} .ts-swatch.ts-ap-astrophoto{background:linear-gradient(135deg,#0a0a1a,#7c4dff,#00bcd4)} .ts-swatch.ts-ap-street{background:linear-gradient(135deg,#1a1a1a,#ff6b35)} .ts-swatch.ts-ap-zenphoto{background:linear-gradient(135deg,#f5f0e8,#2c2416)} .ts-swatch.ts-ap-abstract{background:linear-gradient(135deg,#e63946,#f7c59f,#a8dadc)} .ts-swatch.ts-ap-neonnoir{background:linear-gradient(135deg,#0a0a14,#ff006e,#00d4ff)} .ts-swatch.ts-ap-sports{background:linear-gradient(135deg,#1a1a1a,#ff3b00)} .ts-swatch.ts-ap-foodphoto{background:linear-gradient(135deg,#f5e6d3,#d4a574,#8b4513)} .ts-swatch.ts-ap-architecture{background:linear-gradient(135deg,#e8e8e8,#455a64)} .ts-swatch.ts-ap-wildlife{background:linear-gradient(135deg,#1a2e1a,#558b2f)} .ts-swatch.ts-ap-fineart{background:linear-gradient(135deg,#1a1a1a,#d4a574)} .ts-swatch.ts-ap-vintage70{background:linear-gradient(135deg,#3e2723,#ff6f00,#ffa726)} .ts-swatch.ts-ap-cyanotype{background:linear-gradient(135deg,#0a1a3a,#1e88e5)} .ts-swatch.ts-ap-tintype{background:linear-gradient(135deg,#1a1a1a,#5d4037)} .ts-swatch.ts-ap-holga{background:linear-gradient(135deg,#2a1a2a,#e91e63)} .ts-swatch.ts-ap-panorama{background:linear-gradient(135deg,#0a0a0a,#4fc3f7,#0a0a0a)} .ts-swatch.ts-ap-hologram{background:linear-gradient(135deg,#050810,#00ffff,#ff00ff)} .ts-swatch.ts-ap-shatter{background:linear-gradient(135deg,#0a0a1a,#80deea,#b3e5fc)} .ts-swatch.ts-ap-origami{background:linear-gradient(135deg,#f5f0e8,#d4a574,#5d4037)} .ts-swatch.ts-ap-prism{background:linear-gradient(135deg,#ff004c,#ff8a00,#ffe600,#00e676,#00b0ff,#7c4dff)} .ts-swatch.ts-ap-magnetic{background:linear-gradient(135deg,#0a0a1a,#7c4dff,#00bcd4)} .ts-swatch.ts-ap-typography{background:linear-gradient(135deg,#0a0a0a,#00ff41)} .ts-swatch.ts-ap-polaroid3d{background:linear-gradient(135deg,#f5f0e8,#ff6b9d,#fdca40)} .ts-swatch.ts-ap-kaleidoscope{background:linear-gradient(135deg,#4a0e4e,#e91e63,#00bcd4)} .ts-swatch.ts-ap-neonframe{background:linear-gradient(135deg,#0a0a14,#ff00ff,#00ffff)} .ts-swatch.ts-ap-silhouette{background:linear-gradient(135deg,#ff6b35,#f7c59f,#1a1a1a)} .ts-swatch.ts-ap-glassplate{background:linear-gradient(135deg,#1a1a2e,#90a4ae,#b0bec5)} .ts-swatch.ts-ap-rainstorm{background:linear-gradient(135deg,#0a0a1a,#4fc3f7,#1a1a2e)} .ts-swatch.ts-ap-fogfrost{background:linear-gradient(135deg,#e0e0e0,#b0bec5,#eceff1)} .ts-swatch.ts-ap-snowfall{background:linear-gradient(135deg,#0a0a1a,#e0e0e0)} .ts-swatch.ts-ap-sandstorm{background:linear-gradient(135deg,#d4a574,#8b4513,#3e2723)} .ts-swatch.ts-ap-aurora{background:linear-gradient(135deg,#0a0a1a,#00ff7f,#ff00ff)} .ts-swatch.ts-ap-lightning{background:linear-gradient(135deg,#0a0a14,#ffeb3b,#0a0a14)} .ts-swatch.ts-ap-petals{background:linear-gradient(135deg,#1a0a0a,#ff69b4,#ffb6c1)} .ts-swatch.ts-ap-lightleak{background:linear-gradient(135deg,#ff6b35,#ffd166,#1a1a1a)} .ts-swatch.ts-ap-dustgrain{background:linear-gradient(135deg,#1a1a1a,#8d6e63,#d7ccc8)} .ts-swatch.ts-ap-prismatic{background:linear-gradient(135deg,#ff004c,#ffe600,#00e676,#00b0ff)}