/* ========================================================================== PAGEFORYOU - Global Standard v3 Project:PFY_MEME_LOVE_001 Art Direction: Cat Meme / Playful ========================================================================== */ /* ------------------------------------------------------------------------- 1. CSS Variables & Theme (Rule 4.3) ------------------------------------------------------------------------- */ :root { /* 1.1 Colors (Setting for Theme support) */ --color-primary: #ff85a1; /* Pink */ --color-border: #ffb6c1; /* Lighter Pink */ /* [เพิ่ม/แก้ไขตรงนี้] เพิ่มตัวแปรสีพื้นหลังกล่อง */ --color-box-bg: #ffffff; /* Default เป็นขาวก่อน เดี๋ยว JS มาเปลี่ยนเป็นชมพูอ่อน */ /* [แก้ไขตรงนี้] ค่าเดิมอาจจะเป็น var(--color-bg-white); */ --color-text-dark: #333333; /* 1.2 Base Specs */ --border-radius-lg: 20px; --font-family: 'Prompt', sans-serif; /* แนะนำให้ใช้ Font นุ่มนวล */ /* [เพิ่มตรงนี้] กำหนดความหนาขอบให้แก้ที่นี่ทีเดียว */ --border-thickness: 5px; /* 1.3 Viewport standard dvh (Rule 1.1.1) */ --app-height: 100dvh; } /* ------------------------------------------------------------------------- 2. Reset & Viewport Standard (Rule 1.1) ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: var(--app-height); width: 100vw; font-family: var(--font-family); -webkit-font-smoothing: antialiased; background-color: #f0f0f0; /* Fallback color */ /* Prevent Scrolling & Rubber-banding (Rule 1.1.2) */ overscroll-behavior: none; touch-action: none; overflow: hidden; position: fixed; /* Extra protection on mobile */ top: 0; left: 0; } /* Custom Scrollbar (Hide globally as it's a fixed app) (Rule 1.1.3) */ ::-webkit-scrollbar { display: none; } /* Prevent User Selection on decoration (Rule 2.2) */ body { user-select: none; -webkit-touch-callout: none; } /* ------------------------------------------------------------------------- 3. Core Layout Structure ------------------------------------------------------------------------- */ /* Main Container to be Scaled by JS (Rule 1.2) */ .app__container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* ไม่ต้องกำหนดขนาดคงที่ เพราะ white_box จะขยายตามเนื้อหา */ /* opacity: 0; will be controlled by main.js intro animation */ pointer-events: none; /* Disable until intro finishes */ } .app__container.is-active { pointer-events: auto; } /* White Box - The Content Box (Central Actor) */ .white__box { background-color: var(--color-box-bg); border: var(--border-thickness) solid var(--color-border); border-radius: var(--border-radius-lg); position: relative; padding: 20px; display: flex; flex-direction: column; align-items: stretch; /* เปลี่ยนเป็น stretch เพื่อให้ child ขยายเต็มความกว้าง */ justify-content: flex-start; min-height: auto; height: auto; min-width: 450px; /* เพิ่ม min-width 450px สำหรับไอแพดและคอม */ /* ใช้ค่าจาก setting.json ผ่าน CSS variables */ max-width: min(var(--white-box-max-width-percent, 90vw), var(--white-box-max-width-px, 600px)); width: 100%; /* เพิ่ม width: 100% เพื่อให้ white_box ขยายเต็มที่ */ } /* Media Query สำหรับหน้าจอขนาดโทรศัพท์ - ให้ white_box มีขนาดคงที่ 90vw และ min-width 450px */ @media (max-width: 768px) { .white__box { width: 90vw !important; /* บังคับให้ขนาด 90vw บนมือถือ */ min-width: 10px !important; /* เพิ่ม min-width 450px สำหรับมือถือ */ max-width: none !important; /* ลบการจำกัด max-width บนมือถือ */ } } /* ------------------------------------------------------------------------- 4. Meme Area (Logic handling ratios & crop) ------------------------------------------------------------------------- */ /* Meme Area Wrapper - Always Square (1:1) relative to white box */ .meme__area__wrapper { /* เปลี่ยนกลับมาใช้ 70% และเพิ่ม min-width */ width: var(--meme-box-width, 70%); min-width: 250px; /* เพิ่ม min-width เพื่อให้มีขนาดไม่เล็กเกินไป */ margin: 0 auto; /* เพิ่ม margin auto เพื่อให้อยู่ตรงกลาง */ position: relative; aspect-ratio: 1 / 1; margin-bottom: 20px; margin-top: 20px; /* เพิ่ม margin-top นิดนึงให้ห่างจากขอบบน */ display: flex; align-items: center; /* เปลี่ยน align-items เป็น center */ } /* Meme Area Inner - The container that handles requested aspect ratios for the image */ .meme__area__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; /* Important for crop */ display: flex; align-items: center; justify-content: center; /* Default: No Crop logic - Object Contain (เหมือนที่คุณต้องการ default เอามีมชนขอบ) */ /* JS will change this class to .is-cropped if meme_ratio is specified */ } /* Handle Crop Logic (CSS Object-Fit Cover) */ .meme__area__inner.is-cropped .meme__image { object-fit: cover; /* Crop to fill */ } .meme__image { width: 100%; height: 100%; max-width: 350px; /* จำกัดความกว้างสูงสุด 350px */ object-fit: contain; /* Default: ชนขอบ ไม่เลยกรอบ */ /* object-position will be dynamically modified by JS: default 'center' */ } /* ------------------------------------------------------------------------- 5. Content Area (Text) ------------------------------------------------------------------------- */ .content__area { text-align: center; padding: 0 10px; /* เพิ่ม padding ซ้ายขวา กันข้อความชนขอบกล่องขาว */ width: 100%; } .meme__text { /* ใช้ clamp เพื่อให้ตัวหนังสือยืดหยุ่น: เล็กสุด 1rem, อิงตามจอ 4vw, ใหญ่สุดไม่เกิน 1.5rem */ font-size: clamp(1rem, 4vw, 1.5rem); line-height: 1.4; /* เพิ่มระยะห่างระหว่างบรรทัดให้อ่านง่ายขึ้นเวลาตัดคำ */ color: var(--color-text-dark); font-weight: 500; } /* ------------------------------------------------------------------------- 6. Action Area (Buttons) ------------------------------------------------------------------------- */ .action__area { width: 100%; display: flex; justify-content: center; align-items: center; /* [เพิ่มบรรทัดนี้!] หยุดการยืดความสูง ให้ปุ่มอยู่ตรงกลางแบบอิสระ */ gap: 15px; padding-top: 10px; } /* ปุ่มสวยงาม 3 มิติน่ารักๆ */ .pfy-btn { padding: 12px 24px; border-radius: 25px; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, opacity, box-shadow; position: relative; overflow: hidden; /* เงา 3 มิติ */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.3); /* ขอบเล็กๆ ให้ดูมีมิติ */ border: 1px solid rgba(255, 255, 255, 0.2); } /* Hover effect - ลอยสูงขึ้น */ .pfy-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4); } /* Active effect - กดแล้วยุบ */ .pfy-btn:active { transform: translateY(1px) scale(0.98); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* Button Types (Mapping your labels) - สวยงาม 3 มิติ */ .pfy-btn--normal { background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%); color: #333; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); } .pfy-btn--primary { background: linear-gradient(135deg, var(--color-primary) 0%, #ff6b9d 100%); color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .pfy-btn--warning { background: linear-gradient(135deg, #ffb74d 0%, #ff9800 50%, #f57c00 100%); color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .pfy-btn--reject { background: linear-gradient(135deg, #ef5350 0%, #f44336 50%, #d32f2f 100%); color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .pfy-btn--ghost { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 240, 240, 0.9) 100%); color: #333; border: 2px solid #ccc; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); } .pfy-btn--accept { background: linear-gradient(135deg, #81C784 0%, #66BB6A 50%, #4CAF50 100%); color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* ------------------------------------------------------------------------- 7. Circular Images for Happy Scene ------------------------------------------------------------------------- */ .circular-image { position: absolute; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10; } .circular-image.image1 { top: 7%; left: 5%; transform: rotate(-15deg); } .circular-image.image2 { top: 20%; right: 4%; transform: rotate(10deg); } /* ------------------------------------------------------------------------- 8. Helper Classes ------------------------------------------------------------------------- */ .hidden { display: none !important; } /* Wrapper for fade animation (Rule 6.2.2) */ .fade-wrapper { will-change: opacity; animation: none !important; /* Stop keyframes before fade */ } * { word-break: break-word; }