zyc/rtc_prd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
rtc_prd/styles.css
seaislee1209 066eb8f820 feat: music-creation page + MiniMax API integration + Flutter dev setup 
Music Creation Page:
- Vinyl 3D flip to view lyrics, tonearm animation, glow rotation effect
- Circular SVG progress ring, speech bubble feedback, confirm dialog
- Playlist modal, free creation input, lyrics formatting optimization
- MiniMax API real music generation with SSE streaming progress

Backend:
- FastAPI proxy server.py for MiniMax API calls
- Music + lyrics file persistence to Capybara music/ directory
- GET /api/playlist endpoint for auto-building playlist from files

UI/UX Refinements:
- frontend-design skill compliance across all pages
- Glassmorphism effects, modal interactions, scroll tap prevention
- iPhone 12 Pro responsive layout (390x844)

Flutter Development Preparation:
- Installed flutter-expert skill with 6 reference docs
- Added 5 Cursor Rules: official Flutter, clean architecture, UI performance, testing, Dart standards

Assets:
- 9 Capybara music MP3 files + lyrics TXT files
- MiniMax API documentation

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-06 18:23:19 +08:00

4416 lines
58 KiB
CSS
Raw Permalink Blame History

/* ========================================
Airhub App - Global Styles
Design: Minimalist, Premium, Apple-inspired
======================================== */
/* CSS Variables - Design Tokens */
:root {
/* Gradient Colors - Soft pastels matching 首页背景.png */
--gradient-pink: #FEF0F5;
--gradient-lavender: #F5F0FE;
--gradient-blue: #EEF8FC;
--gradient-mint: #F0FCFA;
/* Primary Colors */
--primary-purple: #A78BFA;
--primary-blue: #93C5FD;
--primary-pink: #F9A8D4;
--primary-indigo: #6366F1;
/* Text Colors */
--text-primary: #1F2937;
--text-secondary: #6B7280;
--text-light: #9CA3AF;
/* Background */
--bg-base: #FAFBFC;
--bg-card: rgba(255, 255, 255, 0.7);
/* Shadows */
--shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.04);
--shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.08);
--shadow-button: 0 8px 32px rgba(167, 139, 250, 0.3);
/* Animation Timing */
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
/* ========================================
Layout Tokens - Unified Spacing
======================================== */
--header-padding-top: calc(env(safe-area-inset-top, 20px) + 12px);
--page-padding-x: 20px;
--safe-area-bottom: env(safe-area-inset-bottom, 20px);
--scroll-top-offset: calc(env(safe-area-inset-top, 20px) + 80px);
/* ========================================
Button Quality - Glowing Pill Standard
======================================== */
--btn-primary-gradient: linear-gradient(90deg, #22D3EE 0%, #3B82F6 35%, #6366F1 65%, #8B5CF6 100%);
--btn-primary-glow:
0 0 15px rgba(34, 211, 238, 0.35),
0 0 30px rgba(99, 102, 241, 0.25),
0 6px 20px rgba(99, 102, 241, 0.4),
inset 0 1px 1px rgba(255, 255, 255, 0.3),
inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}
/* Reset & Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
overflow: hidden;
}
body {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
background: var(--bg-base);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Display Font - Outfit for headings */
h1, h2, h3, h4, h5, h6,
.page-title,
.pixel-text {
font-family: 'Outfit', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* ========================================
App Container
======================================== */
.app-container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
z-index: 1;
/* Above .gradient-bg which is z-index: 0 */
}
/* ========================================
Animated Gradient Background - Organic Flow
======================================== */
.gradient-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
/* Base: soft white with hint of warmth */
background: #FEFEFE;
}
.gradient-layer {
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
opacity: 1;
mix-blend-mode: normal;
}
/* Layer 1: Soft pink flowing from bottom-left */
.layer-1 {
background:
radial-gradient(ellipse 120% 80% at 20% 80%, rgba(255, 200, 220, 0.6) 0%, transparent 50%),
radial-gradient(ellipse 80% 60% at 30% 60%, rgba(255, 180, 200, 0.4) 0%, transparent 40%);
animation: organicFlow1 20s ease-in-out infinite;
}
/* Layer 2: Mint/Cyan flowing from top-right */
.layer-2 {
background:
radial-gradient(ellipse 100% 70% at 80% 20%, rgba(180, 240, 240, 0.5) 0%, transparent 45%),
radial-gradient(ellipse 70% 90% at 70% 40%, rgba(200, 245, 245, 0.4) 0%, transparent 40%);
animation: organicFlow2 25s ease-in-out infinite;
}
/* Layer 3: Lavender/Purple flowing diagonally */
.layer-3 {
background:
radial-gradient(ellipse 90% 80% at 60% 50%, rgba(230, 210, 250, 0.45) 0%, transparent 45%),
radial-gradient(ellipse 60% 50% at 40% 70%, rgba(240, 220, 255, 0.35) 0%, transparent 35%);
animation: organicFlow3 30s ease-in-out infinite;
}
/* Additional flowing curves using pseudo-elements */
.gradient-bg::before {
content: '';
position: absolute;
width: 150%;
height: 150%;
top: -25%;
left: -25%;
background:
radial-gradient(ellipse 60% 40% at 15% 30%, rgba(255, 230, 240, 0.5) 0%, transparent 40%),
radial-gradient(ellipse 50% 70% at 85% 60%, rgba(220, 250, 250, 0.4) 0%, transparent 35%);
animation: organicFlow4 35s ease-in-out infinite;
}
.gradient-bg::after {
content: '';
position: absolute;
width: 120%;
height: 120%;
top: -10%;
left: -10%;
background:
radial-gradient(ellipse 70% 50% at 50% 90%, rgba(255, 210, 230, 0.35) 0%, transparent 40%),
radial-gradient(ellipse 40% 60% at 90% 10%, rgba(200, 240, 255, 0.3) 0%, transparent 35%);
animation: organicFlow5 28s ease-in-out infinite;
}
/* Organic Flow Animations */
@keyframes organicFlow1 {
0%,
100% {
transform: translate(0%, 0%) rotate(0deg) scale(1);
}
25% {
transform: translate(5%, -8%) rotate(2deg) scale(1.02);
}
50% {
transform: translate(-3%, 5%) rotate(-1deg) scale(0.98);
}
75% {
transform: translate(8%, 3%) rotate(1deg) scale(1.01);
}
}
@keyframes organicFlow2 {
0%,
100% {
transform: translate(0%, 0%) rotate(0deg) scale(1);
}
33% {
transform: translate(-8%, 6%) rotate(-2deg) scale(1.03);
}
66% {
transform: translate(6%, -5%) rotate(2deg) scale(0.97);
}
}
@keyframes organicFlow3 {
0%,
100% {
transform: translate(0%, 0%) rotate(0deg) scale(1);
}
20% {
transform: translate(4%, 7%) rotate(1deg) scale(1.02);
}
40% {
transform: translate(-6%, -4%) rotate(-2deg) scale(0.98);
}
60% {
transform: translate(7%, -6%) rotate(2deg) scale(1.01);
}
80% {
transform: translate(-4%, 5%) rotate(-1deg) scale(0.99);
}
}
@keyframes organicFlow4 {
0%,
100% {
transform: translate(0%, 0%) rotate(0deg);
}
50% {
transform: translate(5%, 5%) rotate(3deg);
}
}
@keyframes organicFlow5 {
0%,
100% {
transform: translate(0%, 0%) rotate(0deg);
}
50% {
transform: translate(-4%, -4%) rotate(-2deg);
}
}
/* ========================================
Page Structure
======================================== */
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s var(--ease-smooth), visibility 0.5s var(--ease-smooth);
}
.page.active {
opacity: 1;
visibility: visible;
}
/* ========================================
Home Page - 2026 Design Optimization
======================================== */
.home-page {
justify-content: space-between;
align-items: center;
padding: 72px 28px 56px;
}
/* Header - Logo */
.home-header {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
padding-top: env(safe-area-inset-top, 8px);
}
/* Pixel Logo - Tamagotchi/电子宠物机风?*/
.pixel-logo {
position: relative;
text-align: center;
opacity: 0;
animation: fadeInDown 0.8s var(--ease-smooth) 0.3s forwards;
}
.pixel-text {
font-family: 'Press Start 2P', cursive;
font-size: 28px;
color: #4B5563;
letter-spacing: 2px;
/* Compensate for letter-spacing on last character */
margin-right: -6px;
/* Ensure proper centering */
display: inline-block;
/* Crisp pixel rendering */
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: unset;
font-smooth: never;
/* Balanced retro shadow effect (symmetric) */
text-shadow:
1px 1px 0px rgba(139, 92, 246, 0.25),
2px 2px 0px rgba(139, 92, 246, 0.15);
}
.pixel-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 200%;
background: radial-gradient(ellipse, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
pointer-events: none;
animation: pixelPulse 3s ease-in-out infinite;
}
@keyframes pixelPulse {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 0.8;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Main Content - Mascot */
.home-content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.mascot-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mascot {
width: min(320px, 75vw);
height: auto;
object-fit: contain;
position: relative;
z-index: 2;
opacity: 0;
/* Offset RIGHT 5% to center the body (tail extends to right) */
transform: translateX(5%);
animation:
fadeInScale 1s var(--ease-bounce) 0.5s forwards,
float 4s ease-in-out 1.5s infinite;
filter: drop-shadow(0 24px 48px rgba(167, 139, 250, 0.15));
}
/* Floating animation - 漂浮效果 */
@keyframes float {
0%,
100% {
transform: translateX(5%) translateY(0);
}
50% {
transform: translateX(5%) translateY(-12px);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: translateX(5%) scale(0.85);
}
to {
opacity: 1;
transform: translateX(5%) scale(1);
}
}
.mascot-glow {
position: absolute;
width: 240px;
height: 240px;
/* Offset to match mascot body center */
transform: translateX(5%);
background: radial-gradient(circle, rgba(249, 168, 212, 0.25) 0%, transparent 70%);
border-radius: 50%;
z-index: 1;
animation: pulseGlow 5s ease-in-out infinite;
}
@keyframes pulseGlow {
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
}
/* Footer - Connect Button */
.home-footer {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: env(safe-area-inset-bottom, 20px);
}
.connect-btn {
position: relative;
width: min(300px, 82vw);
height: 58px;
border: none;
border-radius: 29px;
/* Cyan to purple gradient */
background: linear-gradient(90deg,
#22D3EE 0%,
/* Cyan */
#3B82F6 35%,
/* Blue */
#6366F1 65%,
/* Indigo */
#8B5CF6 100%
/* Purple */
);
border: none;
color: #FFFFFF;
font-family: inherit;
font-size: 17px;
font-weight: 600;
letter-spacing: 0.5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
cursor: pointer;
overflow: hidden;
/* Soft glow + inner depth for 3D effect */
box-shadow:
0 0 15px rgba(34, 211, 238, 0.35),
0 0 30px rgba(99, 102, 241, 0.25),
0 6px 20px rgba(99, 102, 241, 0.4),
inset 0 1px 1px rgba(255, 255, 255, 0.3),
inset 0 -1px 2px rgba(0, 0, 0, 0.1);
opacity: 0;
animation: fadeInUp 0.8s var(--ease-smooth) 0.8s forwards;
transition: transform 0.3s var(--ease-bounce), box-shadow 0.3s var(--ease-smooth);
}
/* Subtle top highlight for depth */
.connect-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
border-radius: 29px 29px 50% 50%;
pointer-events: none;
}
.connect-btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow:
0 0 20px rgba(34, 211, 238, 0.45),
0 0 40px rgba(99, 102, 241, 0.35),
0 10px 30px rgba(99, 102, 241, 0.45),
inset 0 1px 1px rgba(255, 255, 255, 0.3),
inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}
.connect-btn:active {
transform: translateY(0) scale(0.98);
}
.btn-text {
position: relative;
z-index: 50;
/* Ensure above story section */
}
.btn-shine {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
z-index: 1;
animation: shine 3s ease-in-out infinite;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes shine {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
body {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
background: var(--bg-base);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
/* ========================================
Responsive Design
======================================== */
@media (max-width: 375px) {
.home-page {
padding: 48px 20px 40px;
}
.logo {
height: 28px;
}
.mascot {
width: min(240px, 65vw);
}
.connect-btn {
width: min(260px, 85vw);
height: 52px;
font-size: 16px;
}
}
@media (min-height: 800px) {
.home-page {
padding-top: 80px;
padding-bottom: 60px;
}
}
/* ========================================
Layout Tokens - Unified Spacing
======================================== */
/* Exactly matching bluetooth.html logic */
:root {
--header-padding-top: calc(env(safe-area-inset-top, 20px) + 48px);
--page-padding-x: 20px;
--safe-area-bottom: env(safe-area-inset-bottom, 20px);
--scroll-top-offset: calc(env(safe-area-inset-top, 20px) + 110px);
--footer-padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 60px);
/* ========================================
Button Quality - Standard Design
======================================== */
--btn-primary-gradient: linear-gradient(90deg, #22D3EE 0%, #3B82F6 35%, #6366F1 65%, #8B5CF6 100%);
--btn-primary-glow:
0 0 15px rgba(34, 211, 238, 0.35),
0 0 30px rgba(99, 102, 241, 0.25),
0 6px 20px rgba(99, 102, 241, 0.4),
inset 0 1px 1px rgba(255, 255, 255, 0.3),
inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}
/* Reset & Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html,
body {
height: 100%;
overflow: hidden;
}
body {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
background: var(--bg-base);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
/* ========================================
Shared UI Components - MASTER TEMPLATE
======================================== */
/* 1. Standard Page Header - CLEAN TRANSPARENT */
.page-header {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px var(--page-padding-x);
padding-top: var(--header-padding-top);
z-index: 100;
/* Removed glass effect as requested */
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: none;
pointer-events: none;
}
.page-header>* {
pointer-events: auto;
}
/* 2. Standard Back Button */
.back-btn {
width: 40px;
height: 40px;
border: none;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #4B5563;
transition: all 0.2s var(--ease-smooth);
}
.back-btn:hover {
background: rgba(255, 255, 255, 0.8);
transform: scale(1.05);
}
.back-btn:active {
transform: scale(0.95);
}
/* 3. Standard Page Title */
.page-title {
font-size: 17px;
font-weight: 600;
color: #1F2937;
text-align: center;
flex: 1;
}
/* 4. Layout Spacer */
.header-spacer {
width: 40px;
}
/* 5. Standard Page Footer */
.page-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px var(--page-padding-x) var(--footer-padding-bottom);
display: flex;
justify-content: center;
gap: 16px;
z-index: 100;
background: transparent;
pointer-events: none;
}
.page-footer>* {
pointer-events: auto;
}
/* ========================================
Capybara Theme - Product Specific Specs
======================================== */
.btn-capybara-primary {
position: relative;
pointer-events: auto;
/* Fix: Overcome parent's pointer-events: none */
width: 100%;
height: 50px;
border: none;
border-radius: 25px;
/* Apricot to Warm Brown Gradient */
background: linear-gradient(135deg, #ECCFA8 0%, #C99672 100%);
color: #4B2404;
/* Dark Chocolate Text */
font-family: inherit;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
overflow: hidden;
/* Soft Warm Shadow */
box-shadow:
0 4px 15px rgba(201, 150, 114, 0.35),
0 2px 5px rgba(201, 150, 114, 0.2);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-capybara-primary:active {
transform: scale(0.98);
box-shadow:
0 2px 8px rgba(201, 150, 114, 0.35);
}
/* Modal Confirm Button Override */
.glass-modal .modal-btn.confirm {
background: linear-gradient(135deg, #ECCFA8 0%, #C99672 100%) !important;
color: #4B2404 !important;
box-shadow: 0 4px 12px rgba(201, 150, 114, 0.3) !important;
}
/* Text Colors */
.text-capybara-title {
color: #4B2404;
}
.text-capybara-body {
color: #4B5563;
}
/* 6. Primary Action Button */
.primary-btn {
position: relative;
padding: 16px 48px;
border: none;
border-radius: 29px;
background: var(--btn-primary-gradient);
color: white;
font-size: 17px;
font-weight: 600;
cursor: pointer;
overflow: hidden;
box-shadow: var(--btn-primary-glow);
transition: all 0.3s var(--ease-bounce);
display: flex;
align-items: center;
justify-content: center;
}
.primary-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
border-radius: 29px 29px 50% 50%;
pointer-events: none;
}
.primary-btn:hover {
transform: translateY(-2px) scale(1.02);
}
.primary-btn:active {
transform: translateY(0) scale(0.98);
}
/* 7. Secondary Action Button */
.secondary-btn {
padding: 14px 32px;
border: 1px solid #E5E7EB;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 25px;
font-size: 16px;
font-weight: 500;
color: #6B7280;
cursor: pointer;
transition: all 0.2s var(--ease-smooth);
}
.secondary-btn:hover {
background: rgba(255, 255, 255, 1);
border-color: #D1D5DB;
}
/* 8. Scroll Container - NO SCROLLBAR + FADE MASK */
.scroll-container {
padding: var(--scroll-top-offset) var(--page-padding-x);
padding-bottom: calc(var(--safe-area-bottom) + 120px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
height: 100vh;
/* Hide scrollbar */
scrollbar-width: none;
-ms-overflow-style: none;
/* Remove mask as user requested "card itself fades out" */
mask-image: none;
-webkit-mask-image: none;
}
.scroll-container::-webkit-scrollbar {
display: none;
}
/* Scroll-Driven Animation for Product Cards */
.product-card {
/* Ensure hardware acceleration */
will-change: opacity, transform;
/* Animation: Fade out and scale down as it exits the top */
animation: card-exit linear both;
animation-timeline: view();
/* Start fading when top of card is 120px from top (near header), finish when fully overlapping header */
animation-range: exit-crossing calc(var(--header-padding-top) + 60px) exit-crossing 0px;
}
@keyframes card-exit {
to {
opacity: 0;
transform: scale(0.95);
}
}
.scroll-container::-webkit-scrollbar {
display: none;
/* Chrome/Safari */
}
/* ========================================
Bluetooth Search Page (RESTORED)
======================================== */
.bluetooth-page {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
position: relative;
z-index: 1;
}
.bt-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
padding-top: calc(env(safe-area-inset-top, 20px) + 48px);
}
.bt-title {
font-size: 17px;
font-weight: 600;
color: #1F2937;
}
.bt-footer {
padding: 20px 20px 60px 20px;
padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 60px);
margin-top: auto;
display: flex;
justify-content: center;
gap: 16px;
width: 100%;
box-sizing: border-box;
}
.cancel-btn {
padding: 14px 32px;
border: 1px solid #E5E7EB;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 25px;
font-size: 16px;
font-weight: 500;
color: #6B7280;
cursor: pointer;
transition: all 0.2s var(--ease-smooth);
}
.connect-device-btn {
position: relative;
padding: 16px 48px;
border: none;
border-radius: 29px;
background: linear-gradient(90deg, #22D3EE 0%, #3B82F6 35%, #6366F1 65%, #8B5CF6 100%);
color: white;
font-size: 17px;
font-weight: 600;
cursor: pointer;
overflow: hidden;
box-shadow: var(--btn-primary-glow);
transition: all 0.3s var(--ease-bounce);
display: flex;
align-items: center;
justify-content: center;
}
/* ========================================
Bluetooth Search & Feature Components
(Reusable feature-level components)
======================================== */
.bt-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 20px;
padding-top: 40px;
gap: 24px;
}
/* Mystery Box Container */
.mystery-box-container {
position: relative;
width: 160px;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
}
/* Pixel Mystery Box */
.mystery-box {
width: 120px;
height: 120px;
background: transparent;
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: boxIdle 2s ease-in-out infinite;
}
.mystery-box-icon {
width: 120px;
height: 120px;
image-rendering: pixelated;
filter: drop-shadow(0 8px 20px rgba(245, 158, 11, 0.5));
}
.mystery-box.searching {
animation: boxBounce 0.5s ease-in-out infinite;
}
@keyframes boxIdle {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
@keyframes boxBounce {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-15px) scale(1.05);
}
}
@keyframes questionPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
@keyframes glowPulse {
0%,
100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.1);
}
}
/* Device Icon Container */
.device-icon-container {
display: flex;
align-items: center;
justify-content: center;
animation: deviceReveal 0.5s var(--ease-bounce) forwards;
}
.device-icon {
position: relative;
width: 120px;
height: 120px;
/* No card background - standalone pixel icon like mystery box */
background: transparent;
display: flex;
align-items: center;
justify-content: center;
animation: iconFloat 3s ease-in-out infinite;
}
.device-icon img {
width: 120px;
height: 120px;
object-fit: contain;
image-rendering: pixelated;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}
@keyframes iconFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.ai-badge {
position: absolute;
top: -4px;
right: -12px;
background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
color: white;
font-size: 11px;
font-weight: 700;
padding: 5px 10px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5);
z-index: 10;
}
@keyframes deviceReveal {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Search Status */
.search-status {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.status-text {
font-size: 16px;
color: #6B7280;
}
.loading-dots {
display: flex;
gap: 6px;
}
.loading-dots span {
width: 8px;
height: 8px;
background: #A78BFA;
border-radius: 50%;
animation: dotBounce 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes dotBounce {
0%,
80%,
100% {
transform: scale(0.6);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* Found Device Info */
.found-device {
text-align: center;
animation: fadeInUp 0.5s var(--ease-smooth) forwards;
}
.device-name {
font-size: 20px;
font-weight: 600;
color: #1F2937;
margin-bottom: 4px;
}
.device-type {
font-size: 14px;
color: #6B7280;
}
/* WiFi Config specific styles remains in HTML for now as they are very specific */
/* ========================================
Story UI (Capybara)
======================================== */
/* Story Section Container */
.story-section {
flex: 0 0 auto !important;
/* NEVER expand in parent flex context */
display: flex;
flex-direction: column;
padding: 0;
width: 100%;
height: auto !important;
/* Only as tall as content */
position: relative;
overflow: visible;
/* Changed from hidden to allow proper flow */
z-index: 5;
/* Ensure above background */
animation: fadeIn 0.3s var(--ease-smooth);
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.story-header-spacer {
height: 40px;
/* Reduced from 60px+safe-area since header is hidden */
width: 100%;
}
/* Bookshelf Container (Horizontal Scroll) */
.bookshelf-container {
/* REMOVED flex: 1 to prevent expansion */
display: flex;
align-items: stretch;
padding: 30px 20px;
gap: 20px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
height: 600px !important;
max-height: 600px !important;
flex: none !important;
}
.bookshelf-container::-webkit-scrollbar {
display: none;
}
/* Bookshelf Slide - Each card wrapper */
.bookshelf-slide {
flex: 0 0 85%;
/* Show 85% to peek next item */
scroll-snap-align: center;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
/* Add Book Placeholder (Unlock New Bookshelf) */
.add-book-placeholder {
width: 100%;
height: 100%;
/* Match parent slide height */
border: 2px dashed rgba(201, 150, 114, 0.5);
border-radius: 20px;
display: flex;
flex-direction: column;
/* Content positioned at LEFT edge so it's visible when peeking */
align-items: flex-start;
justify-content: center;
padding-left: 8px;
/* Minimal padding so text is flush with edge */
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
}
.placeholder-content {
display: flex;
flex-direction: column;
align-items: center;
/* Center children (icon and text) */
gap: 4px;
}
/* When placeholder is scrolled into view, center the content */
.add-book-placeholder.centered {
align-items: center;
padding-left: 0;
}
/* After user has unlocked once, hide text when peeking (they know the feature) */
.add-book-placeholder.hint-seen .placeholder-text {
display: none;
}
.add-book-placeholder.hint-seen.centered .placeholder-text {
display: block;
/* Show text again when fully in view */
}
.add-book-placeholder:hover {
background: rgba(255, 255, 255, 0.6);
border-color: rgba(201, 150, 114, 0.8);
}
.add-book-placeholder:active {
transform: scale(0.98);
}
.placeholder-text {
color: #9CA3AF;
font-size: 11px;
/* Smaller to fit in peek area */
font-weight: 600;
text-align: center;
line-height: 1.3;
white-space: nowrap;
/* Prevent wrapping */
}
.add-icon {
font-size: 18px;
color: #9CA3AF;
font-weight: 300;
}
/* Story Book Card */
.story-book {
min-width: 300px;
height: 100% !important;
/* FIX: Force match container height */
max-height: 100% !important;
background: rgba(255, 255, 255, 0.55);
/* Increased opacity, removed blur */
/* backdrop-filter: blur(20px); - REMOVED to prevent edge artifacts */
/* -webkit-backdrop-filter: blur(20px); - REMOVED */
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 24px;
padding: 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
/* Reduced shadow */
scroll-snap-align: center;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
/* Clip any overflow */
}
.book-cover {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.book-title {
font-size: 18px;
font-weight: 700;
color: #1F2937;
}
.book-count {
font-size: 13px;
font-weight: 600;
color: #6B7280;
background: rgba(255, 255, 255, 0.5);
padding: 4px 10px;
border-radius: 12px;
}
/* Story Grid (2 cols x 5 rows) */
.story-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, minmax(0, 1fr));
/* Force rows to fit even if content is huge */
gap: 12px;
flex: 1;
/* Occupy remaining space instead of fixed 100% */
height: auto;
min-height: 0;
/* Prevent flex overflow */
}
.story-slot {
background: rgba(255, 255, 255, 0.6);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #9CA3AF;
font-weight: 600;
position: relative;
/* Anchor for absolute children */
transition: all 0.2s;
border: 1px dashed rgba(0, 0, 0, 0.05);
overflow: hidden;
/* Ensure content never spills */
}
/* Filled State */
/* Filled State (Cover Art) */
.story-slot.filled {
background: white;
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 0;
/* Full bleed image */
overflow: hidden;
position: relative;
cursor: pointer;
}
/* Empty Interactions */
.story-slot.clickable {
cursor: pointer;
background: rgba(255, 255, 255, 0.4);
/* Slightly clearer */
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.story-slot.clickable:hover {
background: rgba(255, 255, 255, 0.6);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.empty-plus {
font-size: 24px;
color: #9CA3AF;
/* Match placeholder icon color */
font-weight: 300;
opacity: 0.7;
transition: all 0.2s;
}
.story-slot.clickable:hover .empty-plus {
opacity: 1;
color: #6B7280;
/* Darker on hover */
transform: scale(1.1);
}
.story-cover-img {
position: absolute;
/* Remove from flow to prevent pushing height */
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Scale to fill while maintaining aspect ratio */
}
.story-title-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: white;
font-size: 10px;
padding: 4px 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
backdrop-filter: blur(4px);
}
/* Story Actions Container (for centered buttons) */
/* Story Actions Container (for centered buttons) */
.story-actions-wrapper {
position: fixed;
/* Back to Fixed for stability */
bottom: 130px;
left: 0;
right: 0;
display: none;
/* Hidden by default, shown via JS */
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 90;
/* Ensure above content but below modals (100+) */
padding: 0 20px;
transition: opacity 0.3s;
}
.story-actions-wrapper.active {
display: flex;
pointer-events: auto;
/* Allow clicks when active */
}
/* Create Button (FAB) - Standardized Style Matching .primary-btn */
.create-story-btn {
pointer-events: auto;
position: relative;
/* In flow */
bottom: auto;
left: auto;
right: auto;
transform: none;
/* Standard Structure matching .primary-btn */
padding: 16px 48px;
border: none;
border-radius: 29px;
font-size: 17px;
font-weight: 600;
cursor: pointer;
overflow: hidden;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s var(--ease-bounce);
/* Capybara Theme: "Plush Core" Gradient */
background: linear-gradient(135deg, #ECCFA8 0%, #C99672 100%);
box-shadow:
0 0 15px rgba(201, 150, 114, 0.35),
0 0 30px rgba(201, 150, 114, 0.25),
0 6px 20px rgba(201, 150, 114, 0.4),
inset 0 1px 1px rgba(255, 255, 255, 0.3),
inset 0 -1px 2px rgba(0, 0, 0, 0.1);
color: white;
}
/* Top Shine Effect matching .primary-btn::before */
.create-story-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
border-radius: 29px 29px 50% 50%;
pointer-events: none;
}
.create-story-btn:active {
transform: scale(0.98);
}
.btn-icon {
font-size: 18px;
font-weight: 700;
}
/* Playback Bar Removed */
/* Generator Modal */
.generator-modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
z-index: 100;
display: none;
align-items: flex-end;
/* Slide from bottom */
}
.generator-modal.active {
display: flex;
animation: fadeIn 0.2s ease-out;
}
.modal-content {
width: 100%;
height: 90%;
background: #FDF9F3;
/* Warm Sand/Beige Background */
border-radius: 24px 24px 0 0;
padding: 0;
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
overflow: hidden;
animation: slideUp 0.3s var(--ease-smooth);
}
.modal-header {
padding: 20px 24px 10px;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.modal-header h3 {
margin: 0;
font-size: 20px;
color: #374151;
}
.close-btn {
background: none;
border: none;
font-size: 28px;
color: #9CA3AF;
cursor: pointer;
padding: 0;
}
/* Selection Preview Removed per User Request */
/* Tabs */
.generator-tabs {
display: flex;
justify-content: space-around;
padding: 0 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
background: #FDF9F3;
flex-shrink: 0;
z-index: 5;
/* Ensure above content if scrolling */
}
/* Tab Text Stability: Reserve space for bold text to prevent jitter */
.gen-tab {
padding: 12px 16px;
background: none;
border: none;
font-size: 16px;
color: #9CA3AF;
font-weight: 500;
cursor: pointer;
position: relative;
transition: color 0.2s;
}
/* Bold text simulation using pseudo-element to reserve width */
.gen-tab::after {
display: block;
content: attr(data-text);
font-weight: 700;
height: 1px;
color: transparent;
overflow: hidden;
visibility: hidden;
}
.gen-tab.active {
color: #4B2404;
font-weight: 700;
}
.gen-tab.active::after {
display: none;
/* Hide spacer when active, though it's 0 height */
}
/* Active indicator line */
.gen-tab.active::before {
content: '';
position: absolute;
bottom: -1px;
left: 16px;
right: 16px;
height: 3px;
background: #4B2404;
border-radius: 3px 3px 0 0;
}
/* Scrollable Content */
.generator-scroll-content {
flex: 1;
overflow-y: auto;
padding: 24px;
/* Padding inside the scroll area */
padding-bottom: 100px;
/* Stability Fix: Prevent collapse during tab switch */
min-height: 300px;
}
.element-section {
margin-top: 24px;
}
.element-section h4 {
margin: 0 0 12px;
font-size: 15px;
color: #6B7280;
font-weight: 600;
}
/* 4-Column Grid */
.element-grid-4col {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
/* Card Style (Reference Match) */
.element-card {
aspect-ratio: 0.85;
/* Taller rectangle */
background: #FFF;
/* Cream/White */
border: none;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
position: relative;
/* For badge positioning */
}
/* Hover: Slight lift, no scale */
.element-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
/* Remove Focus scaling to prevent "Sticky Zoom" */
.element-card:focus {
outline: none;
transform: none;
}
/* Selected: Scale UP and Persist */
.element-card.selected {
background: #FFF7ED;
box-shadow: 0 0 0 2px #EA9A3E;
/* Highlight border */
transform: scale(1.05);
/* Only selected items are big */
}
/* Checkmark Badge (Apple Style - Plush Gradient) */
.check-badge {
position: absolute;
top: 8px;
right: 8px;
width: 20px;
height: 20px;
/* Plush Gradient Background */
background: linear-gradient(135deg, #ECCFA8 0%, #C99672 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.5);
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
/* Bouncy pop */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.element-card.selected .check-badge {
opacity: 1;
transform: scale(1);
}
.check-badge svg {
width: 12px;
height: 12px;
stroke-width: 3;
}
.card-icon {
font-size: 32px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.card-name {
font-size: 12px;
color: #4B5563;
font-weight: 500;
}
/* 4-Column Grid */
.element-grid-4col {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.element-btn {
aspect-ratio: 1;
background: white;
border: 1px solid #E5E7EB;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
transition: all 0.2s;
}
.element-btn:hover {
border-color: #D1D5DB;
background: #F9FAFB;
}
.element-btn.selected {
border-color: #EA9A3E;
background: #FFF7ED;
box-shadow: 0 0 0 2px rgba(234, 154, 62, 0.2);
}
.e-icon {
font-size: 24px;
}
.e-name {
font-size: 12px;
color: #4B5563;
}
/* Footer & Generate Button */
.generator-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px 24px 30px;
/* Safe area padding */
background: linear-gradient(to top, #FDF9F3 80%, rgba(253, 249, 243, 0));
display: flex;
justify-content: center;
pointer-events: none;
/* Let clicks pass through transparent top part */
}
/* Standard Structure matching .create-story-btn */
.generate-btn {
pointer-events: auto;
width: 100%;
/* Capybara Theme: "Plush Core" Gradient */
background: linear-gradient(135deg, #ECCFA8 0%, #C99672 100%);
box-shadow:
0 0 15px rgba(201, 150, 114, 0.35),
0 0 30px rgba(201, 150, 114, 0.25),
0 6px 20px rgba(201, 150, 114, 0.4),
inset 0 1px 1px rgba(255, 255, 255, 0.3),
inset 0 -1px 2px rgba(0, 0, 0, 0.1);
border: none;
color: white;
padding: 16px 0;
border-radius: 29px;
font-size: 18px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
overflow: hidden;
/* For shine */
position: relative;
transition: transform 0.1s ease-out;
}
/* Secondary Button (Outline) - Used for "Rewrite" */
.btn-secondary {
pointer-events: auto;
width: 100%;
background: #FFFFFF;
border: 1px solid #D1D5DB;
/* Warm Grey Border */
color: #4B5563;
padding: 16px 0;
border-radius: 29px;
font-size: 17px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.btn-secondary:active {
background: #F3F4F6;
transform: scale(0.98);
}
/* Button Group (2 Columns) */
.btn-group-2col {
display: grid;
grid-template-columns: 1fr 1.5fr;
/* 1:1.5 ratio for Rewrite : Save */
gap: 16px;
width: 100%;
}
/* Top Shine Effect */
.generate-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
border-radius: 29px 29px 50% 50%;
pointer-events: none;
}
.generate-btn:active {
transform: scale(0.98);
}
/* --- CORRECTED LOADING & STORY STYLES --- */
/* Loading Page */
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 40px;
text-align: center;
}
.kapi-writing-img {
width: 200px;
height: auto;
margin-bottom: 40px;
filter: drop-shadow(0 10px 20px rgba(75, 36, 4, 0.15));
animation: float 3s ease-in-out infinite;
}
.loading-text {
font-size: 18px;
font-weight: 600;
color: #4B2404;
margin-bottom: 24px;
min-height: 27px;
/* Prevent layout shift */
}
.progress-track {
width: 100%;
max-width: 280px;
height: 12px;
background: rgba(201, 150, 114, 0.2);
border-radius: 6px;
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #ECCFA8 0%, #C99672 100%);
border-radius: 6px;
transition: width 0.3s linear;
}
/* Story Detail Page */
.story-paper {
background: #FFFFFF;
border-radius: 20px;
padding: 32px 24px;
margin-top: 24px;
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.02),
0 10px 24px rgba(75, 36, 4, 0.08);
/* Warm shadow */
font-size: 16px;
line-height: 1.8;
color: #374151;
text-align: justify;
position: relative;
}
.story-header {
text-align: center;
margin-bottom: 24px;
}
.story-title {
font-size: 20px;
font-weight: 700;
color: #4B2404;
margin-bottom: 8px;
}
.story-tags {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.story-tag {
font-size: 12px;
color: #9CA3AF;
background: #F9FAFB;
padding: 4px 8px;
border-radius: 4px;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* ========================================
Magic Animations (Story Save)
======================================== */
/* 1. Detail Page: Genie Suck Effect */
/* 1. Detail Page: Genie Suck Effect */
@keyframes genieSuck {
0% {
transform: translate(0px, 0px) scale(1);
opacity: 1;
filter: blur(0px);
}
20% {
/* Anticipation: slightly grow */
transform: translate(0px, 0px) scale(1.05);
}
100% {
/* Suck into bottom-center (assuming button is there) */
/* Translate FIRST, then Scale, to ensure full distance movement */
transform: translate(var(--tx, 0px), var(--ty, 500px)) scale(0.05);
opacity: 0;
filter: blur(10px);
}
}
.genie-effect {
animation: genieSuck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
transform-origin: center center;
}
/* 2. Shelf Page: Book Pop Effect */
@keyframes bookPop {
0% {
transform: scale(0);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
80% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.book-pop-in {
animation: bookPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
/* 2b. Magic Dust Particles */
@keyframes sparkleFloat {
0% {
transform: translate(0, 0) scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translate(var(--tx), var(--ty)) scale(0);
opacity: 0;
}
}
/* 3. Picture Book Video Styles */
.tab-switch-container {
display: flex;
justify-content: center;
margin-bottom: 16px;
z-index: 10;
position: relative;
}
.tab-switch {
background: white;
padding: 4px;
border-radius: 20px;
display: flex;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.switch-btn {
padding: 6px 16px;
border-radius: 16px;
border: none;
background: transparent;
font-size: 14px;
font-weight: 600;
color: #6B7280;
cursor: pointer;
transition: all 0.2s;
}
.switch-btn.active {
background: #FFF1F2;
/* Pink-50 */
color: #BE123C;
/* Rose-700 */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.video-view-container {
width: 100%;
aspect-ratio: 3 / 4;
background: #F3F4F6;
/* Changed from #000 to match light theme */
border-radius: 16px;
overflow: hidden;
position: relative;
display: none;
/* Hidden by default */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.story-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.2);
transition: opacity 0.3s;
cursor: pointer;
}
.video-overlay.hidden {
opacity: 0;
pointer-events: none;
/* Let clicks pass to video only if native controls used, but we are using container click */
}
.play-btn-circle {
width: 64px;
height: 64px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(4px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
border: 1px solid rgba(255, 255, 255, 0.5);
transition: transform 0.2s;
}
.play-btn-circle:active {
transform: scale(0.95);
}
/* Loading Mask */
.loading-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.loading-mask.active {
opacity: 1;
pointer-events: auto;
}
.loader-spinner {
width: 40px;
height: 40px;
border: 4px solid #E5E7EB;
border-top: 4px solid #F43F5E;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 16px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 4. Custom Glass Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.modal-overlay.active {
opacity: 1;
pointer-events: auto;
}
.glass-modal {
width: 80%;
max-width: 320px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 24px;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
transform: scale(0.9);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-overlay.active .glass-modal {
transform: scale(1);
}
.modal-title {
font-size: 18px;
font-weight: 700;
color: #4B2404;
margin-bottom: 12px;
}
.modal-desc {
font-size: 14px;
color: #6B7280;
margin-bottom: 24px;
line-height: 1.5;
}
.modal-actions {
display: flex;
gap: 12px;
}
.modal-btn {
flex: 1;
padding: 10px;
border-radius: 12px;
border: none;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.modal-btn.cancel {
background: #F3F4F6;
color: #6B7280;
}
.modal-btn.confirm {
background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%);
color: #B91C1C;
}
/* Toast Message */
.custom-toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 12px 24px;
border-radius: 30px;
font-size: 14px;
z-index: 10001;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
}
.custom-toast.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* --- Settings Page (V5 - Modals & Fixes) --- */
.settings-view {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Warm Capybara Theme Background */
background: linear-gradient(135deg, #FEF5EC 0%, #FDF2F8 100%);
z-index: 2000;
display: flex;
flex-direction: column;
animation: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
overflow: hidden;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* Header - Matching Main Page Header Height */
.settings-header {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: none !important;
/* Match main page: padding-top: calc(safe-area + 48px) */
padding-top: calc(env(safe-area-inset-top, 20px) + 48px) !important;
padding-bottom: 16px !important;
position: absolute !important;
top: 0;
left: 0;
right: 0;
z-index: 9999;
pointer-events: none;
/* 让点击穿透 header 背景 */
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
/* 确保 header 内的按钮和标题可点击 */
.settings-header>* {
pointer-events: auto;
}
.settings-title {
font-size: 16px !important;
font-weight: 600 !important;
color: #1F2937 !important;
}
/* Content Area - Gradient Fading Mask (Standard: PRD 3.3.2) */
.settings-content {
flex: 1;
overflow-y: auto;
/* Gradient Mask Scroll Standard: padding-top = safe-area + 120px */
padding-top: calc(env(safe-area-inset-top, 20px) + 120px) !important;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 100px;
background: transparent;
scrollbar-width: none;
/* Gradient Mask Scroll Standard: transparent 0-100px, fade 100-130px */
-webkit-mask-image: linear-gradient(to bottom, transparent 0px, transparent 100px, black 130px, black 100%);
mask-image: linear-gradient(to bottom, transparent 0px, transparent 100px, black 130px, black 100%);
pointer-events: auto !important;
position: relative;
z-index: 1;
}
.settings-content::-webkit-scrollbar {
display: none;
}
/* Settings Group */
.settings-group-title {
font-size: 12px;
color: #8B5E3C;
margin-bottom: 8px;
margin-left: 16px;
margin-top: 24px;
font-weight: 500;
}
.settings-group {
background: rgba(255, 255, 255, 0.8);
border-radius: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 16px rgba(139, 94, 60, 0.04);
overflow: hidden;
}
.settings-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
min-height: 48px;
background: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.settings-item:last-child {
border-bottom: none;
}
.settings-item.clickable {
cursor: pointer;
}
.settings-item.clickable:active {
background: rgba(255, 255, 255, 0.5);
}
/* Typography */
.item-label {
font-size: 15px;
color: #4B5563;
font-weight: 400;
}
.item-value {
font-size: 14px;
color: #9CA3AF;
display: flex;
align-items: center;
gap: 6px;
}
.arrow {
font-size: 18px;
color: #D1D5DB;
}
.item-text-col {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
}
.item-desc {
font-size: 11px;
color: #9CA3AF;
line-height: 1.3;
}
.settings-item.warning .item-label {
color: #EF4444;
}
/* Toggle */
.toggle-switch {
width: 50px;
height: 30px;
background: #E5E7EB;
border-radius: 15px;
position: relative;
cursor: pointer;
transition: background 0.3s;
}
.toggle-switch.active {
background: #FFB088;
}
.toggle-knob {
width: 26px;
height: 26px;
background: white;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: transform 0.3s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.toggle-switch.active .toggle-knob {
transform: translateX(20px);
}
/* Volume Slider */
.settings-item.column {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding-bottom: 16px;
}
.volume-row {
display: flex;
align-items: center;
width: 100%;
height: 32px;
}
.volume-slider {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 24px;
margin: 0 8px;
background: transparent;
cursor: grab;
width: 100%;
}
.volume-slider::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
background: #E5E5EA;
border-radius: 2px;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(139, 94, 60, 0.2);
margin-top: -10px;
/* (4-24)/2 = -10 */
}
.vol-icon {
font-size: 16px;
color: #9CA3AF;
width: 24px;
text-align: center;
}
/* --- Settings Page Additional Modal Styles --- */
/* Note: Base .modal-overlay and .glass-modal are defined earlier in file */
/* Settings Modal Button Overrides */
.modal-btn {
flex: 1;
padding: 12px 0;
border-radius: 12px;
border: none;
font-size: 16px;
font-weight: 500;
cursor: pointer;
position: relative;
z-index: 2220;
}
.modal-btn.cancel {
background: #F3F4F6;
color: #6B7280;
}
.modal-btn.confirm {
background: linear-gradient(135deg, #FFB088 0%, #FF8E53 100%);
color: white;
}
.modal-btn.danger {
background: #EF4444;
color: white;
}
.modal-btn.secondary {
background: #F3F4F6;
color: #4B5563;
}
.modal-input {
width: 100%;
padding: 12px;
margin-bottom: 20px;
box-sizing: border-box;
border: 1px solid #E5E7EB;
border-radius: 12px;
font-size: 16px;
background: #F9FAFB;
outline: none;
}
.modal-input:focus {
border-color: #FFB088;
background: white;
}
/* Unbind Styles */
.unbind-header {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 12px;
}
.warn-icon svg {
width: 24px;
color: #EF4444;
}
.unbind-title {
font-size: 18px;
font-weight: 600;
color: #1F2937;
}
.highlight-text {
color: #EF4444;
font-weight: 600;
}
Reference in New Issue View Git Blame Copy Permalink