feat: enlarge main frame to ~90% screen, remove filmstrip, add canvas pile, unified polaroid style
This commit is contained in:
+48
-41
@@ -38,67 +38,75 @@ body.setup-mode { cursor: default; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
/* === SLIDESHOW - VINTAGE POLAROID PILE === */
|
||||
/* =============================================
|
||||
SLIDESHOW - VINTAGE POLAROID PILE
|
||||
============================================= */
|
||||
#slideshow-screen { background: #1a1510; }
|
||||
|
||||
/* Warm blurred bg behind everything */
|
||||
.bg-blur {
|
||||
position: absolute; top: -30px; left: -30px;
|
||||
width: calc(100% + 60px); height: calc(100% + 60px);
|
||||
background-size: cover; background-position: center;
|
||||
filter: blur(40px) brightness(0.3) saturate(0.6) sepia(0.3);
|
||||
filter: blur(40px) brightness(0.25) saturate(0.5) sepia(0.3);
|
||||
opacity: 0; transition: opacity 2s ease; z-index: 1;
|
||||
}
|
||||
.bg-blur.visible { opacity: 1; }
|
||||
|
||||
.bg-vignette {
|
||||
/* Canvas pile of accumulated polaroids */
|
||||
#pile-canvas {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: radial-gradient(ellipse at center, transparent 40%, rgba(15,12,8,0.7) 100%);
|
||||
z-index: 2; pointer-events: none;
|
||||
}
|
||||
|
||||
/* --- Photo pile --- */
|
||||
#photo-pile { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
|
||||
.pile-frame { position: absolute; top: 50%; left: 50%; width: 30vmin; height: 34vmin; transform: translate(-50%, -50%); opacity: 0; transition: all 1.5s ease; pointer-events: none; }
|
||||
.pile-frame.visible { opacity: 1; }
|
||||
/* Vignette on top of pile */
|
||||
.bg-vignette {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: radial-gradient(ellipse at center, transparent 50%, rgba(15,12,8,0.6) 100%);
|
||||
z-index: 3; pointer-events: none;
|
||||
}
|
||||
|
||||
/* --- Main floating frame --- */
|
||||
.main-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; opacity: 0; transition: opacity 1.2s ease; animation: float 25s ease-in-out infinite; }
|
||||
/* --- Main floating frame (nearly full screen) --- */
|
||||
.main-frame {
|
||||
position: absolute; top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 5; opacity: 0;
|
||||
transition: opacity 1.2s ease;
|
||||
animation: float 25s ease-in-out infinite;
|
||||
}
|
||||
.main-frame.visible { opacity: 1; }
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(0) translateY(0); }
|
||||
15% { transform: translate(-50%, -50%) rotate(0.8deg) translateX(8px) translateY(-5px); }
|
||||
30% { transform: translate(-50%, -50%) rotate(-0.5deg) translateX(-5px) translateY(6px); }
|
||||
50% { transform: translate(-50%, -50%) rotate(0.3deg) translateX(6px) translateY(3px); }
|
||||
65% { transform: translate(-50%, -50%) rotate(-0.7deg) translateX(-8px) translateY(-4px); }
|
||||
80% { transform: translate(-50%, -50%) rotate(0.4deg) translateX(4px) translateY(7px); }
|
||||
100% { transform: translate(-50%, -50%) rotate(0deg) translateX(0) translateY(0); }
|
||||
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(0) translateY(0); }
|
||||
15% { transform: translate(-50%, -50%) rotate(0.6deg) translateX(6px) translateY(-4px); }
|
||||
30% { transform: translate(-50%, -50%) rotate(-0.4deg) translateX(-4px) translateY(5px); }
|
||||
50% { transform: translate(-50%, -50%) rotate(0.3deg) translateX(5px) translateY(2px); }
|
||||
65% { transform: translate(-50%, -50%) rotate(-0.5deg) translateX(-6px) translateY(-3px); }
|
||||
80% { transform: translate(-50%, -50%) rotate(0.3deg) translateX(3px) translateY(5px); }
|
||||
100% { transform: translate(-50%, -50%) rotate(0deg) translateX(0) translateY(0); }
|
||||
}
|
||||
|
||||
/* Polaroid */
|
||||
.main-frame.polaroid .frame-border {
|
||||
background: #f5f0e8; padding: 12px 12px 44px 12px;
|
||||
box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(0,0,0,0.05);
|
||||
border-radius: 2px; position: relative;
|
||||
/* Polaroid frame — used for both photos and videos */
|
||||
.main-frame .frame-border {
|
||||
background: #f5f0e8;
|
||||
padding: 10px 10px 36px 10px;
|
||||
box-shadow:
|
||||
0 6px 40px rgba(0,0,0,0.6),
|
||||
0 2px 6px rgba(0,0,0,0.3),
|
||||
inset 0 0 0 1px rgba(0,0,0,0.05);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
.main-frame.polaroid .frame-media { display: block; max-width: 72vmin; max-height: 54vmin; width: auto; height: auto; object-fit: contain; background: #2a2520; min-width: 40vmin; min-height: 30vmin; }
|
||||
.main-frame.polaroid .filmstrip-top, .main-frame.polaroid .filmstrip-bottom { display: none; }
|
||||
|
||||
/* Film strip */
|
||||
.main-frame.filmstrip .frame-border {
|
||||
background: #1a1a1a; padding: 0;
|
||||
box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.2);
|
||||
border-radius: 2px; position: relative;
|
||||
}
|
||||
.main-frame.filmstrip .frame-media { display: block; max-width: 72vmin; max-height: 54vmin; width: auto; height: auto; object-fit: contain; background: #000; min-width: 40vmin; min-height: 30vmin; }
|
||||
|
||||
.filmstrip-top, .filmstrip-bottom { display: none; position: absolute; left: 0; width: 100%; height: 22px; background: #1a1a1a; z-index: 6; }
|
||||
.filmstrip-top { top: -22px; border-radius: 2px 2px 0 0; }
|
||||
.filmstrip-bottom { bottom: -22px; border-radius: 0 0 2px 2px; }
|
||||
.main-frame.filmstrip .filmstrip-top, .main-frame.filmstrip .filmstrip-bottom {
|
||||
.main-frame .frame-media {
|
||||
display: block;
|
||||
background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 10px, #333 10px, #333 12px, transparent 12px, transparent 16px, rgba(255,255,255,0.08) 16px, rgba(255,255,255,0.08) 26px, transparent 26px, transparent 28px, #333 28px, #333 30px, transparent 30px, transparent 40px);
|
||||
background-size: 40px 22px; background-position: 5px center;
|
||||
max-width: 88vw;
|
||||
max-height: 78vh;
|
||||
width: auto; height: auto;
|
||||
object-fit: contain;
|
||||
background: #2a2520;
|
||||
min-width: 50vw;
|
||||
min-height: 40vh;
|
||||
}
|
||||
|
||||
/* === OVERLAY === */
|
||||
@@ -128,9 +136,8 @@ body.setup-mode { cursor: default; }
|
||||
.overlay-top-right { top: 1rem; right: 1rem; }
|
||||
.overlay-bottom { padding: 1rem 1rem 0.5rem; }
|
||||
.source-buttons { flex-direction: column; }
|
||||
.main-frame.polaroid .frame-border { padding: 8px 8px 32px 8px; }
|
||||
.main-frame.polaroid .frame-media, .main-frame.filmstrip .frame-media { max-width: 85vmin; max-height: 60vmin; }
|
||||
.pile-frame { width: 25vmin; height: 29vmin; }
|
||||
.main-frame .frame-border { padding: 6px 6px 24px 6px; }
|
||||
.main-frame .frame-media { max-width: 94vw; max-height: 82vh; }
|
||||
}
|
||||
|
||||
.albums-list::-webkit-scrollbar, .setup-container::-webkit-scrollbar { width: 6px; }
|
||||
|
||||
Reference in New Issue
Block a user