/* BABYLOOP CSS Design System & Variables */ :root { --bg-primary: #fbf7f2; --bg-card: #fffdf9; --modal-body-bg: #faf3eb; --app-shell: #f1e5d8; --loop-milktea: #dfc5ad; --macaron-pink: #f7eee5; --macaron-pink-dark: #a8785d; --macaron-yellow: var(--loop-milktea); --macaron-yellow-dark: #967052; --macaron-yellow-lightest: #f7eee5; --macaron-blue: #f4eee7; --macaron-blue-dark: #8a725f; --line-brand-color: #55b968; --myship-orange: #f5e9dc; --myship-orange-dark: #8f644b; --myship-green: #eef2e8; --myship-green-dark: #6d8563; --family-green: #dcf0e5; --family-green-dark: #2f7d5c; --accent: #b48769; --accent-strong: #8b644d; --accent-soft: #f3e4d6; --accent-border: #dec2ab; --tip-amber: #8c634a; --strong-brown: #4f382d; --text-main: #503d33; --text-muted: #8b7465; --border-color: #e5d4c3; --card-shadow: 0 12px 30px rgba(90, 70, 60, 0.08); --inner-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04); --border-radius-lg: 24px; --border-radius-md: 16px; --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } /* 行內 SVG icon 常用的定位樣式，全站原本用行內 style 重複寫了 48 次，統一抽成 class */ .icon-inline { vertical-align: middle; display: inline-block; flex-shrink: 0; margin-right: 3px; } .icon-inline-after { vertical-align: middle; display: inline-block; flex-shrink: 0; margin-left: 3px; } /* 品牌／型號輸入框帶了 list="..." datalist 屬性，WebKit 會在輸入框右側自動畫一個系統藍色的下拉箭頭圖示（跟用的是同一個 calendar-picker-indicator），在暖色系整站配色裡顯得特別突兀，且沒有對應的 CSS 變數能改色，直接隱藏掉即可，不影響點擊/打字時 datalist 建議清單照常彈出。 */ input[list]::-webkit-calendar-picker-indicator, input[list]::-webkit-list-button { display: none; } img.emoji { height: 1.1em; width: 1.1em; margin: 0 0.1em; vertical-align: -0.12em; display: inline-block; } /* Dark Mode Variable Overrides with High Contrast */ .app-container.dark-mode { --bg-primary: #1a1613; /* Deep chocolate background */ --bg-card: #26211c; /* Dark cocoa card background */ --modal-body-bg: #26211c; /* 深色模式下彈窗內部背景要跟卡片一致，不能維持淺色 */ --macaron-pink: #35241e; --macaron-pink-dark: #d5a88b; --macaron-yellow: #432d24; --macaron-yellow-dark: #c9aa91; --macaron-yellow-lightest: #33231d; --macaron-blue: #30211c; --macaron-blue-dark: #d2b6a0; --line-brand-color: #79cf86; --myship-orange: #3a2821; --myship-orange-dark: #d7b08e; --myship-green: #3a2821; --myship-green-dark: #b6c8a7; --family-green: #24352b; --family-green-dark: #6fbf9a; --border-color: #4d4138; --text-main: #f5ebe0; --text-muted: #c5b5a5; --myship-orange-dark: #e6c8ae; --myship-green-dark: #d8c8b5; --tip-amber: #e6c8ae; --strong-brown: #f5ebe0; --app-shell: #1a1613; --accent: #c49a7d; --accent-strong: #e3c4aa; --accent-soft: #3b2c24; --accent-border: #6d5545; --card-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); } /* 所有彈窗（LINE/購物車/商品詳情/里程碑等）在 HTML 結構上是的直屬子層，不在 .app-container 裡面，所以上面那組深色變數傳不到彈窗身上。這裡在 body 上也套一份同樣的變數，彈窗才能正確跟著切換深色模式。 */ body.dark-mode { --bg-primary: #1a1613; --bg-card: #26211c; --modal-body-bg: #26211c; --macaron-pink: #40362f; --macaron-pink-dark: #d6b08f; --macaron-yellow: #4a3e35; --macaron-yellow-dark: #ccb095; --macaron-yellow-lightest: #332b25; --macaron-blue: #38302b; --macaron-blue-dark: #c7b09b; --border-color: #4d4138; --text-main: #f5ebe0; --text-muted: #c5b5a5; --myship-orange-dark: #e6c8ae; --myship-green-dark: #d8c8b5; --family-green-dark: #6fbf9a; --tip-amber: #e6c8ae; --strong-brown: #f5ebe0; --app-shell: #1a1613; --accent: #c49a7d; --accent-strong: #e3c4aa; --accent-soft: #3b2c24; --accent-border: #6d5545; } /* Hide standard browser spin-buttons (arrow adjusters) on number inputs */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .hidden { display: none !important; } * { box-sizing: border-box; margin: 0; padding: 0; } /* 對稱美學置中對齊定義 */ /* 1. 全域標題置中對齊 */ h1, h2, h3, h4, h5, h6 { display: flex; align-items: center; justify-content: center; text-align: center; } /* 2. 全域按鈕置中對齊 */ button, .btn, .settings-btn-premium, .cart-btn-premium { display: inline-flex; align-items: center; justify-content: center; } /* 3. 全域圖片容器置中對齊 */ .product-img-container, .detail-main-img-wrapper, .detail-main-img-wrapper div { display: flex; align-items: center; justify-content: center; } body { font-family: 'Fredoka', 'Noto Sans TC', sans-serif; background-color: var(--app-shell); color: var(--text-main); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 16px; transition: background-color var(--transition-smooth); overflow-x: hidden; width: 100%; max-width: 100%; overscroll-behavior-x: none; /* 中文提示文案優先在自然語意處換行，避免標點或短語被拆得難閱讀。 */ line-break: strict; overflow-wrap: break-word; } /* 適合閱讀的說明與提示：現代 Safari 會自動平衡每行長度；舊版則維持正常換行。 */ p, .form-group label, .settings-row span, .toast-body { text-wrap: pretty; } html { /* 全站文字大量用 rem 相對單位，調整這個根字級可以整體放大文字跟間距，不用逐一改幾千處的個別 rem 數值。從瀏覽器預設 16px 略調大到 17.5px，閱讀感受更接近蝦皮這類主流電商 App 的字級，同時仍在安全範圍內不會讓版面明顯破版。 */ font-size: 17.5px; overflow-x: hidden; width: 100%; max-width: 100%; overscroll-behavior-x: none; } /* 原生殼滿版鋪版：.app-container 原本是給桌面瀏覽器看的「手機外框預覽樣式」（圓角、邊框、置中、四周留白），裝在真機上要整個關掉，改成真正貼齊螢幕四邊，並且把系統瀏海/Dynamic Island（上）跟手勢列（下）會佔用的安全區域留出空間，不然畫面內容會被這些系統元素蓋住或裁切 */ html.is-native-shell { overflow-x: hidden; } html.is-native-shell body { padding: 0; background-color: var(--bg-primary); min-height: 100vh; min-height: 100dvh; overflow-x: hidden; } html.is-native-shell .app-container { width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border: none; box-shadow: none; } html.is-native-shell .app-header { /* .app-header 元素本身有行內 style 寫死 padding/height，這裡用 !important 蓋過去，把瀏海/Dynamic Island 的安全區域高度「加」到原本的高度上，而不是從固定高度裡面擠壓掉，否則搜尋框會被垂直壓扁 */ padding-top: calc(4px + env(safe-area-inset-top)) !important; height: calc(46px + env(safe-area-inset-top)) !important; } /* 系統設定／購物清單的頁面標題是絕對定位；若不扣掉瀏海安全區，標題會以整個 header 的高度置中，視覺上比右側圖示高。 */ html.is-native-shell .app-header #header-page-title { top: calc(env(safe-area-inset-top) + 4px) !important; bottom: 0 !important; } html.is-native-shell .app-nav { /* 往下貼近系統手勢區，但仍保留 4px 緩衝，不會壓到 Home 指示條。 */ padding-bottom: max(0px, calc(env(safe-area-inset-bottom) - 4px)); height: calc(64px + env(safe-area-inset-bottom)); } html.is-native-shell .app-nav .nav-item { position: relative; top: 4px; } /* 彈窗（商品詳情、成交回報、通知中心等）用 .line-modal-card 置中顯示，卡片本身 max-height:90vh 沒有扣掉瀏海/手勢列的安全區域，內容較長時卡片上緣會被 Dynamic Island 蓋住。這裡讓外層 overlay 上下各留一段安全區當緩衝，卡片高度也跟著收縮，確保卡片永遠完整落在安全區域「內」。 */ html.is-native-shell .modal-overlay { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; } html.is-native-shell .line-modal-card { max-height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; } /* App Container (Mobile Mockup layout for Web preview) */ .app-container { background-color: var(--bg-primary); width: 100%; max-width: 430px; /* Standard phone width */ height: 92vh; max-height: 850px; border-radius: 40px; box-shadow: 0 20px 60px rgba(80, 60, 50, 0.25); border: 8px solid var(--bg-card); display: flex; flex-direction: column; overflow: hidden; min-width: 0; position: relative; transition: var(--transition-smooth); } /* App Header */ .app-header { display: flex; justify-content: flex-end; align-items: center; padding: 10px 16px 4px 16px; background: transparent; border-bottom: none; flex-shrink: 0; position: relative; z-index: 9999; } .logo { display: flex; align-items: center; justify-content: center; gap: 12px; } .logo-img { width: 38px; height: 38px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); animation: wobble 4s infinite ease-in-out; } .app-header h1 { font-family: 'Fredoka', sans-serif; font-size: 1.8rem; font-weight: 700; color: #2d231e; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.6); letter-spacing: 0.5px; } .subtitle { font-size: 0.75rem; color: #2d231e; margin-top: 2px; font-weight: 500; letter-spacing: 1px; opacity: 0.9; } /* LINE Verification Banner */ .line-banner { background-color: var(--macaron-yellow-lightest); border: 1.5px solid var(--border-color); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; border-radius: var(--border-radius-md); margin-bottom: 12px; transition: var(--transition-smooth); } .line-banner.verified { background-color: var(--accent-soft); border-color: var(--accent-border); } .line-icon { color: var(--line-brand-color); font-size: 1rem; } .line-text { flex-grow: 1; margin-left: 8px; font-weight: 700; color: var(--text-main); } .btn-line-mini { background-color: var(--line-brand-color); color: white; border: none; border-radius: 20px; padding: 4px 10px; font-size: 0.75rem; cursor: pointer; font-family: inherit; font-weight: 700; transition: var(--transition-smooth); } .btn-line-mini:hover { background-color: var(--accent-strong); transform: scale(1.05); } /* Main Content Area */ .app-main { flex: 1; /* 底部內距原本是 14px，跟廣告版位的預留空間疊在一起時不明顯；廣告拿掉後這 14px 單獨看起來像一塊沒清乾淨的空白，使用者要求完全拿掉，內容直接貼齊導覽列的邊框線。 */ padding: 8px 14px 0 14px; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; position: relative; min-width: 0; overscroll-behavior-x: none; } /* 所有頁面文字不提供長按複製；輸入欄仍可正常選取、貼上與編輯。 */ html, body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* 原生 AdMob 橫幅只在逛商品的分頁出現。.app-nav 本身是版面裡正常佔位的 flex 子項目， .app-main 早就自然幫它留好空間，不用重複計算；只有「廣告本身的高度」是額外要留的，避免最後一張卡或最後一列內容被浮在畫面最上層的原生廣告蓋住。廣告固定用標準 BANNER 尺寸（320x50dp），高度是已知常數，這裡直接寫死 50px，不依賴非同步事件回報才校正—— 那個事件在部分裝置上可能延遲或沒觸發，會讓預留空間留在錯的舊值，導致滑到底還是被擋到。 */ html.has-native-admob-banner .app-main { padding-bottom: var(--admob-reserved-space, 50px); } /* 「回到最上面」按鈕原本用行內樣式寫死 bottom: 140px，廣告版位出現時擋住它、或者廣告版位比預估值矮時又浮太高，改成廣告出現時跟著動態變數走。這顆按鈕是 position:fixed（相對整個畫面，不吃 .app-nav 的 flex 版面），所以要用另一個已經把 navHeight 也算進去的變數，不能跟上面 .app-main 用同一個。 */ html.has-native-admob-banner #btn-scroll-top { bottom: calc(var(--admob-banner-offset, 148px) + 56px) !important; } /* Scrollbar customization for web views */ .app-main::-webkit-scrollbar { width: 6px; } .app-main::-webkit-scrollbar-thumb { background-color: var(--macaron-yellow-dark); border-radius: 10px; } .card { background-color: var(--bg-card); border-radius: var(--border-radius-lg); box-shadow: var(--card-shadow); padding: 16px; display: flex; flex-direction: column; gap: 14px; border: 2px solid var(--border-color); transition: var(--transition-smooth); } .card.hidden { display: none; } .section-title { font-size: 0.85rem; font-weight: 800; color: var(--text-main); padding-left: 4px; } /* Upload Mode Selector */ .mode-selector { display: flex; background-color: var(--bg-primary); border: 2px solid var(--border-color); border-radius: 30px; padding: 4px; margin-bottom: 4px; } .mode-btn { flex: 1; border: none; background: none; font-family: inherit; font-size: 0.75rem; font-weight: 800; padding: 6px 12px; border-radius: 20px; cursor: pointer; color: var(--text-muted); transition: var(--transition-smooth); display: flex; align-items: center; justify-content: center; gap: 4px; } .mode-btn.active { background-color: var(--macaron-yellow-dark); color: white; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } /* Mode Panes */ .mode-pane { display: none; flex-direction: column; gap: 12px; animation: modalPop 0.3s ease-out; } .mode-pane.active { display: flex; } /* AI Usage Banner */ .ai-usage-banner { background-color: var(--macaron-yellow-lightest); border: 2px dashed var(--macaron-yellow-dark); border-radius: 12px; padding: 8px 12px; text-align: center; font-size: 0.75rem; color: var(--text-main); font-weight: 700; } .ai-usage-banner strong { color: var(--myship-orange-dark); font-size: 0.85rem; } /* Split Layout for Left Sidebar Category Accordion */ .split-layout { display: flex; gap: 6px; width: 100%; } /* Left Sidebar Categories */ .category-sidebar { width: 90px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; border-right: 1.5px solid var(--border-color); padding-right: 6px; transition: width 0.22s ease, padding-right 0.22s ease; /* 分類側邊欄本來會跟著整頁一起捲動：捲到商品列表下方時展開分類選單，側邊欄其實已經展開了，只是位置還停在頁面最上方、被捲出可視範圍看不到，使用者會誤以為沒反應，要先捲回最上面才看得到。改成 sticky 貼著捲動容器頂端，不管捲到哪裡點開都會直接看到。部分安卓 WebView 版本不認得沒有前綴的 sticky（不是語法錯誤，是直接整條視為無效、退回預設的 static），才會實測出「按鈕確實有反應、狀態也真的切換了，但側邊欄整個沒出現」——因為它其實跑去頁面原本捲動位置的最上方，在目前可視範圍外幾百到上千 px 的地方，使用者完全看不到。加上 -webkit-sticky 前綴版本讓舊版 WebView 也吃得到。 */ position: -webkit-sticky; position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow-y: auto; } /* 收合狀態：三條槓按鈕移到頂部搜尋欄，分類欄收合時完全不佔版面空間，跟展開時是「推開商品格」的關係，不是疊在上面的浮層。 */ .category-sidebar.collapsed { width: 0; min-width: 0; gap: 0; border-right: none; padding-right: 0; margin: 0; overflow: hidden; } .category-sidebar.collapsed .accordion-item { /* 不用 display:none：部分 Android WebView 在側欄從 0 寬度展開後，會保留子項目的 display:none 計算結果，造成「欄位打開卻是空的」。側欄本身已是 0 寬度且 overflow:hidden，這裡只讓內容不可見即可。 */ display: flex; visibility: hidden; pointer-events: none; } /* 展開時明確還原內容，避免舊版 WebView 對前一個收合狀態快取排版。 */ #tab-marketplace-panel .category-sidebar:not(.collapsed) .accordion-item { display: flex !important; visibility: visible !important; pointer-events: auto; } .sidebar-title { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; text-align: center; } /* Accordion Item styles */ .accordion-item { display: flex; flex-direction: column; background-color: var(--bg-card); border-radius: 12px; border: 1.5px solid var(--border-color); overflow: hidden; } .accordion-header { background-color: var(--macaron-yellow); border: none; padding: 6px 4px; /* Tighter padding to prevent wraps */ font-family: inherit; font-size: 0.75rem; /* Smaller font */ font-weight: 800; color: var(--text-main); cursor: pointer; text-align: center; display: flex; justify-content: center; align-items: center; gap: 4px; transition: var(--transition-smooth); width: 100%; } .accordion-header:hover { background-color: var(--macaron-yellow-dark); color: white; } /* Ensure header text displays fully without ellipsis */ .accordion-header span:first-child { white-space: normal; overflow: visible; text-overflow: clip; flex: none; margin-right: 0; text-align: center; } .accordion-header .arrow { font-size: 0.75rem; transition: transform 0.3s ease; opacity: 0.7; flex-shrink: 0; } /* Accordion Body */ .accordion-body { display: none; flex-direction: column; background-color: var(--bg-primary); padding: 4px; gap: 4px; } .accordion-item.active .accordion-body { display: flex; } .accordion-item.active .arrow { transform: rotate(180deg); } /* Sub-category Buttons */ .subcat-item { background-color: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 8px; padding: 4px 2px; font-family: inherit; font-size: 0.75rem; font-weight: 800; color: var(--text-main); cursor: pointer; text-align: center; /* 分類是短詞，必須整個詞一起顯示；例如「其他」不可被拆成兩行。 */ white-space: nowrap; word-break: keep-all; overflow-wrap: normal; transition: var(--transition-smooth); } .subcat-item:hover, .subcat-item.active { background-color: var(--macaron-pink-dark); color: white; border-color: var(--macaron-pink-dark); } .accordion-header.active-filter { background-color: var(--macaron-pink-dark) !important; color: white !important; border-color: var(--macaron-pink-dark) !important; } /* Right Panel Upload Area */ .upload-content-pane { flex: 1; display: flex; flex-direction: column; gap: 12px; } /* Intro Box (Stress relief color tones) */ .intro-box { background-color: var(--bg-primary); border-radius: var(--border-radius-md); padding: 10px; color: var(--text-main); border: 2px solid var(--border-color); } .intro-box h3 { font-size: 0.75rem; margin-bottom: 4px; color: var(--macaron-yellow-dark); font-weight: 800; } .intro-box ol { padding-left: 14px; font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); } /* Upload Area */ .upload-area-wrapper { display: flex; flex-direction: column; gap: 12px; transition: var(--transition-smooth); } .upload-area-wrapper.hidden { display: none; } .upload-area { border: 3px dashed var(--macaron-yellow-dark); background-color: var(--bg-primary); border-radius: var(--border-radius-md); padding: 20px 12px; text-align: center; cursor: pointer; transition: var(--transition-smooth); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-height: 110px; } .upload-area:hover { background-color: var(--macaron-yellow-lightest); transform: scale(1.02); } .upload-icon { font-size: 2rem; margin-bottom: 4px; transition: transform 0.3s ease; } .upload-area:hover .upload-icon { transform: rotate(-10deg) scale(1.1); } .upload-title { font-size: 0.85rem; font-weight: 800; color: var(--text-main); margin-bottom: 2px; } .upload-sub { font-size: 0.75rem; color: var(--text-muted); } .preview-img { width: 100%; max-height: 160px; object-fit: contain; border-radius: var(--border-radius-md); border: 1px solid var(--border-color); } .preview-img.hidden { display: none; } /* Transaction Setup Card */ .transaction-setup-card { background-color: var(--macaron-yellow-lightest); border: 2px solid var(--border-color); border-radius: var(--border-radius-md); padding: 10px; display: flex; flex-direction: column; gap: 6px; } .form-label-sm { font-size: 0.75rem; font-weight: 800; color: var(--text-main); } .select-sm { border: 1.5px solid var(--border-color); border-radius: 8px; padding: 4px 8px; font-size: 0.75rem; font-family: inherit; outline: none; background-color: var(--bg-card); color: var(--text-main); font-weight: 700; } .input-sm { width: 100%; border: 1.5px solid var(--border-color); border-radius: 8px; padding: 4px 8px; font-size: 0.75rem; font-family: inherit; outline: none; background-color: var(--bg-card); color: var(--text-main); } .ai-trans-input-row { margin-top: 2px; } /* Manual Form Styles */ .manual-form { display: flex; flex-direction: column; gap: 8px; background-color: var(--macaron-yellow-lightest); border: 2px solid var(--border-color); border-radius: var(--border-radius-md); padding: 12px; } .form-group { display: flex; flex-direction: column; gap: 3px; } .form-group label { font-size: 0.75rem; /* 表單標籤只是「這欄要填什麼」的說明，不是內容本身，權重要輕於欄位裡使用者實際填的資料。用 !important 蓋掉一批各自寫死 font-weight:700 的行內樣式（新舊標籤原本因為有沒有寫行內樣式而分別是 800/700 兩種粗細，這裡順便統一）。 */ font-weight: 600 !important; color: var(--text-main); } .form-group input, .form-group select, .form-group textarea { border: 1.5px solid var(--border-color); border-radius: 8px; padding: 6px 8px; font-size: 0.75rem; font-family: inherit; outline: none; background-color: var(--bg-card); color: var(--text-main); transition: var(--transition-smooth); } .form-group select { text-align: center; text-align-last: center; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--macaron-yellow-dark); } .form-group textarea { resize: none; } /* Buttons */ .btn { font-family: 'Fredoka', 'Noto Sans TC', sans-serif; border: none; border-radius: 50px; padding: 10px 20px; font-size: 1rem; font-weight: 800; cursor: pointer; transition: var(--transition-smooth); box-shadow: 0 4px 12px rgba(120, 90, 80, 0.15); display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; } .btn:active { transform: translateY(2px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } .btn-primary { background: linear-gradient(135deg, var(--macaron-yellow), var(--macaron-yellow-dark)); color: #ffffff; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); border: 1px solid var(--macaron-yellow-dark); } .btn-primary:hover { background: linear-gradient(135deg, var(--macaron-yellow-dark), var(--macaron-yellow-dark)); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35); } .btn-secondary { background-color: var(--bg-primary); color: var(--text-main); border: 2px solid var(--border-color); box-shadow: none; } .btn-secondary:hover { background-color: var(--macaron-yellow-lightest); } /* 市集空分類引導：使用圓潤膠囊按鈕，與整體奶茶主題一致。 */ .market-empty-action { min-width: 102px; min-height: 36px; padding: 8px 16px; border-radius: 999px; font-family: inherit; font-size: 0.75rem; font-weight: 800; line-height: 1; white-space: nowrap; } .market-empty-state { grid-column: 1 / -1; padding: 30px 20px; color: var(--text-muted); font-size: 0.85rem; line-height: 1.65; text-align: center; } .market-empty-state p { margin: 0; text-wrap: balance; } .market-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; } .btn-success { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: white; } .btn-success:hover { background: var(--accent-strong); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(248, 113, 113, 0.25); } /* Tab Panels */ .tab-panel { display: none; flex-direction: column; gap: 14px; animation: modalPop 0.3s ease-out; } .tab-panel.active { display: flex; } /* 7-11 MyShop Buyer Button */ .myship-buyer-box { margin-top: 4px; width: 100%; } .myship-buyer-box.hidden { display: none; } .btn-myship-buy { width: 100%; font-family: inherit; border: none; border-radius: 50px; padding: 10px 20px; font-size: 1rem; font-weight: 800; cursor: pointer; transition: var(--transition-smooth); background: linear-gradient(135deg, var(--myship-orange-dark), var(--myship-green-dark)); color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; gap: 6px; } .btn-myship-buy:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(249, 115, 22, 0.35); } /* Loading View */ .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 10px; text-align: center; } .loading-bubble-wrapper { display: flex; gap: 15px; margin-bottom: 20px; } .loading-bubble { font-size: 2rem; animation: bounce 1.2s infinite ease-in-out alternate; } .loading-bubble:nth-child(2) { animation-delay: 0.3s; } .loading-bubble:nth-child(3) { animation-delay: 0.6s; } .loading-title { font-size: 1rem; font-weight: 800; margin-bottom: 6px; color: var(--text-main); } .loading-desc { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 16px; } .progress-bar { width: 80%; height: 6px; background-color: var(--border-color); border-radius: 10px; overflow: hidden; } .progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--macaron-yellow-dark), var(--macaron-pink-dark)); border-radius: 10px; transition: width 0.4s ease; } /* Result View */ .result-header { display: flex; flex-direction: column; gap: 6px; } .success-badge { background-color: var(--macaron-yellow); color: var(--accent-strong); font-size: 0.75rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; align-self: flex-start; border: 2px solid var(--border-color); } .title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .product-title { font-size: 1.1rem; font-weight: 800; color: var(--text-main); flex-grow: 1; } /* LINE Verified Badge */ .verified-badge { font-size: 0.75rem; font-weight: 800; padding: 3px 8px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .verified-badge.unverified { background-color: var(--bg-primary); color: var(--text-muted); border: 1.5px solid var(--border-color); } .verified-badge.verified { background-color: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-border); animation: pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .result-price-card { background: linear-gradient(135deg, var(--macaron-yellow-lightest), var(--macaron-yellow)); border-radius: var(--border-radius-md); padding: 14px; border: 2px solid var(--border-color); display: flex; flex-direction: column; gap: 8px; } .price-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; } .price-row.suggested { border-top: 1px dashed var(--border-color); padding-top: 6px; } .price-lbl { color: var(--text-muted); font-weight: 700; } .price-val-recent { font-size: 1rem; font-weight: 800; color: var(--text-main); } .price-val-suggested { font-size: 1.25rem; font-weight: 800; color: var(--myship-orange-dark); } /* Community consensus and warmth indicator */ .community-consensus { background-color: var(--bg-card); border-radius: 20px; padding: 4px 10px; font-size: 0.75rem; color: var(--accent-strong); font-weight: 800; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 6px rgba(120,90,80,0.06); border: 1.5px solid var(--border-color); align-self: center; } .heart-icon { color: var(--accent); } .result-details { display: flex; flex-direction: column; gap: 10px; } .detail-item { font-size: 0.75rem; line-height: 1.4; } .detail-label { font-weight: 800; color: var(--text-main); } .detail-value { color: var(--myship-green-dark); font-weight: 800; } .detail-value-highlight { font-size: 0.85rem; font-weight: 800; color: #1e3a8a; /* Soft royal blue for high visual hierarchy */ background-color: #eff6ff; padding: 2px 8px; border-radius: 6px; border: 1px solid #dbeafe; } .detail-desc { color: var(--text-muted); margin-top: 4px; padding-left: 8px; border-left: 2.5px solid var(--macaron-yellow-dark); } /* AI Copywriting Box */ .copywriting-box { background-color: var(--macaron-yellow-lightest); border-radius: var(--border-radius-md); padding: 14px; border: 2px solid var(--border-color); display: flex; flex-direction: column; gap: 8px; } .copywriting-content { background-color: var(--bg-card); border-radius: var(--border-radius-md); padding: 10px; font-size: 0.75rem; color: var(--text-main); line-height: 1.5; height: 90px; overflow-y: auto; border: 1.5px solid var(--border-color); white-space: pre-line; } .copywriting-content::-webkit-scrollbar { width: 4px; } .copywriting-content::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 4px; } .copywriting-header { display: flex; justify-content: space-between; align-items: center; } .copywriting-header h4 { font-size: 0.75rem; color: var(--text-main); font-weight: 800; } .btn-copy { background-color: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 8px; padding: 3px 8px; font-size: 0.75rem; color: var(--text-main); cursor: pointer; font-family: inherit; transition: var(--transition-smooth); } .btn-copy:hover { background-color: var(--macaron-yellow); border-color: var(--macaron-yellow-dark); } .action-buttons { display: flex; gap: 8px; margin-top: 4px; } .action-buttons .btn { flex: 1; } /* Bottom Navigation Bar Styles */ .app-nav { display: flex; justify-content: space-around; align-items: center; background-color: var(--bg-card); border-top: 2px solid var(--border-color); padding: 0 8px; position: relative; z-index: 1000; flex-shrink: 0; height: 64px; /* Taller height for 2+1+2 layout */ box-sizing: border-box; transition: var(--transition-smooth); } /* 聊天室打字時暫時把底部導覽列收起來，讓鍵盤彈出時訊息區多一點空間，不用跟導覽列搶畫面（見 chatInputText 的 focus/blur 事件） */ .app-nav.hidden-for-keyboard { display: none; } .nav-item { background: none; border: none; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; flex: 1; color: var(--text-muted); /* 未選取：淺一點，跟選取的深咖啡拉開對比 */ transition: all 0.3s ease; opacity: 0.62; overflow: visible !important; padding: 4px 0; } .nav-item.active { color: var(--strong-brown); /* 選取：整套色票裡最深的咖啡色，跟未選取的淺色明顯拉開 */ opacity: 1; } /* Color Lubi Bear icon wrapper (Left 1) */ .nav-icon-wrapper { position: relative; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: visible; filter: grayscale(0.8) opacity(0.5); /* Inactive Lubi Bear: Grayscale */ transition: filter 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .nav-item.active .nav-icon-wrapper { filter: none; /* Active Lubi Bear: full color */ transform: scale(1.1) translateY(-2px); } .nav-bear-img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; border: 2px solid #482d1b; background-color: #fffdf5; } /* SVG Line Icon wrapper (Symmetric Icons) */ .nav-svg-wrapper { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .nav-item.active .nav-svg-wrapper { transform: scale(1.15) translateY(-2px); } .nav-svg-icon { width: 20px; height: 20px; stroke: var(--text-muted); fill: none; transition: all 0.3s ease; } .nav-item.active .nav-svg-icon { stroke: var(--strong-brown); } /* Central Raised Button Styling (2+1+2 Central Axis) */ .nav-item-raised { position: relative; top: -4px; z-index: 2; opacity: 1; } .nav-raised-btn { width: 44px; height: 44px; border-radius: 50%; background-color: #e7c3a4; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(117, 79, 53, 0.18); transition: transform 0.2s ease; border: 2px solid #c9926f; } .nav-item-raised:hover .nav-raised-btn, .nav-item-raised.active .nav-raised-btn { transform: scale(1.06); background-color: #dba47f; box-shadow: 0 4px 10px rgba(117, 79, 53, 0.24); } .nav-raised-btn svg { width: 22px !important; height: 22px !important; color: #fffaf5 !important; } .nav-item-raised.active .nav-raised-btn svg { color: #fffaf5 !important; } .nav-item-raised .nav-label { margin-top: -2px; color: var(--text-main); } /* Overlay Badge for chat messages count */ .nav-chat-bubble-overlay { position: absolute; top: -4px; right: -6px; background-color: var(--macaron-pink-dark); color: white; font-size: 0.75rem; font-weight: bold; padding: 1px 4px; border-radius: 8px; line-height: 1; min-width: 10px; text-align: center; z-index: 10; } .nav-item.active .nav-icon-svg { color: var(--macaron-blue-dark); } .nav-chat-bubble-overlay { position: absolute; top: -4px; right: -4px; background-color: var(--macaron-pink-dark); color: white; font-size: 0.75rem; padding: 0; border-radius: 50%; width: 17px; height: 17px; display: flex; justify-content: center; align-items: center; border: 1.5px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.15); z-index: 10; animation: bubbleBounce 2s ease-in-out infinite alternate; } @keyframes bubbleBounce { 0% { transform: translateY(0); } 100% { transform: translateY(-3px); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .login-verifying-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3.5px solid var(--border-color); border-top-color: var(--strong-brown); animation: spin 0.8s linear infinite; } /* 1. Camera Flash Animation for Valuation (Flashes ONCE) */ .prop-camera-flash { opacity: 0; transform: scale(0.5); transform-box: fill-box; transform-origin: center; transition: all 0.2s ease; } .nav-item.active .prop-camera-flash { animation: cameraFlashBurstOnce 0.6s 1 ease-out forwards; /* Flashes ONLY ONCE */ } @keyframes cameraFlashBurstOnce { 0% { opacity: 0; transform: scale(0.5); } 20%, 40% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1.6); } } /* 2. Basket items for My Shop (Static pop up, no infinite animation) */ .prop-basket-items-full { opacity: 0; transform: translateY(8px); transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .nav-item.active .prop-basket-items-full { opacity: 1; transform: translateY(0); /* Static full basket */ } /* 3. Magic Wand for Wishlist (Plain stick becomes gorgeous star wand with sparkles) */ .prop-wand-star-group, .prop-wand-sparkles { opacity: 0; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: scale(0.5); transform-box: fill-box; transform-origin: center; } .nav-item.active .prop-wand-star-group, .nav-item.active .prop-wand-sparkles { opacity: 1; transform: scale(1); /* Static Star Wand appearance */ filter: drop-shadow(0 0 6px #fde047); } /* 4. Chat bubble for Chat Room (Dots hide, heart appears, no infinite animation) */ .prop-chat { fill: #e2e8f0 !important; /* Inactive: Grey bubble */ transition: fill 0.3s ease; } .nav-item.active .prop-chat { fill: #fda4af !important; /* Active: Turns strawberry pink */ } .prop-chat-dots-group { opacity: 1; transition: opacity 0.2s ease; } .nav-item.active .prop-chat-dots-group { opacity: 0; /* Hide dots */ } .prop-chat-heart { opacity: 0; transform: scale(0.4); transform-box: fill-box; transform-origin: center; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .nav-item.active .prop-chat-heart { opacity: 1; transform: scale(1); /* Static heart display */ } /* 5. Construction bear face dirt Settings (Wrench & Helmet are static) */ .bear-face-dirt { opacity: 0; transition: opacity 0.3s ease; } .nav-item.active .bear-face-dirt { opacity: 0.9; /* Dirt smudges appear statically */ } .nav-label { /* 參考蝦皮等主流電商 App：底部導覽列文字本來就只是圖示的輔助說明，不需要跟內文一樣大，縮小一點、字重也不用那麼粗，畫面比較精簡俐落。 */ font-size: 0.65rem; font-weight: 700; } /* Chat Room Panel Styles */ /* 原本用寫死的 520px 高度，手機扣掉頂部搜尋欄／已追蹤賣場卡片／底部導覽列後，剩餘空間常常不夠塞下這個高度，導致整個 .app-main 被撐到要捲動整頁——連帶聊天室標題列跟輸入欄都跟著被捲走。改成用 flex 填滿分頁剩餘空間，讓聊天室本身固定在螢幕內，只有訊息內容（.chat-messages）自己捲動。 */ .chat-container { display: flex; flex-direction: column; flex: 1; min-height: 0; background-color: var(--bg-card); border-radius: var(--border-radius-lg); border: 2px solid var(--border-color); overflow: hidden; } #tab-chat-panel.active { height: 100%; min-height: 0; overflow: hidden; } .chat-window { min-height: 0; } .chat-header-bar { background: linear-gradient(135deg, var(--macaron-yellow), var(--macaron-pink)); padding: 12px 16px; border-bottom: 2px solid var(--border-color); } .chat-header-bar h3 { font-size: 1rem; font-weight: 800; color: var(--text-main); } .chat-subtitle { font-size: 0.75rem; color: var(--text-muted); } .chat-list { display: flex; flex-direction: column; overflow-y: auto; flex: 1; min-height: 0; border-bottom: none; } /* 展開上方「已追蹤的賣場」時，.chat-container 會被壓縮高度，聊天室清單能拿到的空間跟著變少。.chat-list 本身有 overflow-y: auto，理論上空間不夠就該讓清單自己捲動——但清單裡每一筆對話（.chat-item-wrapper）預設 flex-shrink 是 1（跟一般 flex 子項目一樣），空間不夠時瀏覽器會先把每一筆的高度壓扁，而不是直接讓清單捲動，訊息一多、展開賣場清單時，看起來就是下面的對話一筆筆擠在一起、頭像跟文字都被壓縮，不是乾淨的捲動。鎖住每一筆的高度不能被壓縮，空間不夠就該交給捲軸處理。 */ .chat-item-wrapper { flex-shrink: 0; } .chat-thread { display: flex; align-items: center; padding: 12px 16px; gap: 12px; cursor: pointer; border-bottom: 1.5px solid var(--border-color); transition: var(--transition-smooth); } .chat-thread:hover, .chat-thread.active { background-color: var(--macaron-yellow-lightest); } .chat-avatar { width: 42px; height: 42px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.05); object-fit: cover; flex-shrink: 0; } .thread-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .thread-title { display: flex; justify-content: space-between; align-items: center; width: 100%; } .thread-title strong { font-size: 0.85rem; color: var(--text-main); } .thread-time { font-size: 0.75rem; color: var(--text-muted); } .thread-last-msg { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .unread-badge { background-color: var(--macaron-pink-dark); color: white; font-size: 0.75rem; font-weight: 800; padding: 2px 6px; border-radius: 10px; } /* Active Chat Window Styles */ .chat-window { display: flex; flex-direction: column; flex: 1; background-color: var(--bg-primary); position: relative; } /* 「已追蹤的賣場」只在聊天室清單頁有意義；一旦點進某個對話視窗，就不該還留在畫面上方佔空間。開關對話視窗的地方分散在好幾個函式裡，這裡改用 CSS 直接跟著 #chat-window-view 自己的 hidden 狀態走，不用逐一去改每個切換視窗的地方，也不會漏掉任何一個入口。 #chat-followed-sellers-section 現在搬到 .chat-container 外面獨立成卡片， #chat-window-view 變成「後面兄弟元素裡的子孫」而不是直接兄弟，選擇器要多穿一層。 */ #chat-followed-sellers-section:has(~ .chat-container #chat-window-view:not(.hidden)) { display: none; } #chat-back-btn { transition: transform 0.2s ease, background-color 0.2s ease; border-radius: 50%; width: 28px; height: 28px; } #chat-back-btn:hover { transform: scale(1.15); background-color: var(--macaron-yellow-lightest) !important; } .chat-window-header { background-color: var(--bg-card); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1.5px solid var(--border-color); font-size: 0.75rem; font-weight: 800; } /* 對話標題跟返回箭頭同列，讓文字與箭頭保持垂直置中。 */ #chat-active-title { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: calc(100vw - 118px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1; } .chat-active-name { /* 原本用 --macaron-blue-dark，跟旁邊「與」「聊聊中」的 --text-muted 顏色太接近（#8a725f 對 #8b7465，幾乎分不出來），改用整套色票裡最深的顏色拉開對比。 */ color: var(--strong-brown); font-weight: 900; overflow: hidden; text-overflow: ellipsis; } .chat-title-prefix, .chat-title-suffix { color: var(--text-muted); flex-shrink: 0; } .user-status-online { color: var(--myship-green-dark); font-size: 0.75rem; } /* 包住訊息清單＋「回到最新訊息」按鈕，取代原本的 .chat-window 當定位基準，讓按鈕永遠貼齊「訊息區塊本身」的右下角，不會被下方快速操作列／照片預覽／回覆預覽等會動態出現的列影響位置。 */ .chat-messages-wrapper { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; } .chat-messages { flex: 1; min-height: 0; overflow-y: auto; /* 只寫 overflow-y 沒有明講 overflow-x 的話，瀏覽器會把預設值 visible 換算成 auto（CSS 的 overflow-x/y 互相牽動的行為），對話框內容只要有一則稍寬（長網址、長訊息）就會變成可以左右滑動，畫面看起來會晃動。明講擋掉。 */ overflow-x: hidden; padding: 12px; display: flex; flex-direction: column; gap: 12px; /* 瀏覽器內建的「捲動錨定」：訊息裡的照片非同步載入變更版面高度時，瀏覽器會自動調整捲動位置想保持畫面內容視覺上不跳動，這會跟我們寫的「捲到最新訊息」互相打架，常常錨定在對話裡第一張照片附近。關掉即可。 */ overflow-anchor: none; } /* 使用者往上翻找紀錄時才顯示，避免一直遮住最新對話。定位基準是 .chat-messages-wrapper，所以 bottom 只需相對訊息區塊本身留一點間距即可，不用再猜下面還有幾條列。 */ .btn-chat-scroll-latest { position: absolute; right: 16px; bottom: 12px; z-index: 8; display: inline-flex; align-items: center; width: 34px; height: 34px; justify-content: center; padding: 0; margin: 0; border: 1.5px solid var(--border-color); border-radius: 50%; background: var(--bg-card); color: var(--text-main); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14); cursor: pointer; } .btn-chat-scroll-latest:hover { background: var(--macaron-yellow-lightest); } /* 聊天室日期分隔線（比照 LINE 置中膠囊樣式） */ .chat-date-separator { align-self: center; background-color: rgba(0, 0, 0, 0.08); color: var(--text-muted); font-size: 0.75rem; font-weight: 700; padding: 3px 12px; border-radius: 20px; margin: 4px 0; } .msg-time { font-size: 0.75rem; color: var(--text-muted); align-self: center; margin-bottom: 4px; } .msg-bubble { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 6px; max-width: 92%; } /* 時間／已讀狀態改比照 LINE，貼在氣泡外側、跟氣泡底部切齊，不再獨占一整行擠到氣泡下方。 */ .msg-time-label { flex: 0 0 auto; white-space: nowrap; align-self: flex-end; } .msg-bubble.incoming { align-self: flex-start; } .msg-bubble.outgoing { align-self: flex-end; flex-direction: row-reverse; } .msg-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .msg-content { background-color: var(--bg-card); padding: 8px 12px; border-radius: 12px; font-size: 0.75rem; line-height: 1.4; border: 1.5px solid var(--border-color); color: var(--text-main); box-shadow: 0 1px 3px rgba(0,0,0,0.02); } .msg-bubble.incoming .msg-content { border-top-left-radius: 2px; } .msg-bubble.outgoing .msg-content { background-color: var(--macaron-yellow); border-color: #fce19f; border-top-right-radius: 2px; } .chat-input-area { display: flex; background-color: var(--bg-card); padding: 8px 12px; border-top: 2px solid var(--border-color); gap: 8px; } .btn-chat-photo { width: 34px; height: 34px; border: 1.5px solid var(--border-color); border-radius: 50%; background: var(--bg-primary); color: var(--text-main); padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .btn-chat-photo:hover { background: var(--accent-soft); } /* 固定三格的照片格子：一開始就看得出最多三張，不用點過一次才知道上限。上架表單／編輯商品共用同一套樣式（.photo-slot-grid），JS 那邊每次重畫都固定輸出三格，已選的格子放實際照片（沿用原本縮圖的刪除／標記污損／拖曳排序功能），還沒選的格子用 .photo-slot-empty 純灰色方塊表示還有空位，第一個空格子额外加 .photo-slot-add 顯示「+」。 */ .photo-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; } .photo-slot-empty { aspect-ratio: 1 / 1; border-radius: 10px; background-color: #f3f4f6; border: 1.5px dashed #b0b6bf; display: flex; align-items: center; justify-content: center; cursor: pointer; box-sizing: border-box; transition: var(--transition-smooth); color: var(--text-muted); } .photo-slot-empty:active { background-color: var(--macaron-yellow-lightest); border-color: var(--macaron-yellow-dark); } .photo-slot-item { position: relative; width: 100%; } .photo-slot-item img { width: 100%; aspect-ratio: 1 / 1; display: block; object-fit: cover; border-radius: 10px; cursor: zoom-in; } .chat-photo-message { display: block; width: min(220px, 100%); max-height: 300px; object-fit: cover; border-radius: 10px; cursor: zoom-in; } .chat-input-area input, .chat-input-area textarea { flex: 1; border: 1.5px solid var(--border-color); border-radius: 20px; padding: 6px 12px; font-size: 0.75rem; font-family: inherit; outline: none; background-color: var(--bg-primary); color: var(--text-main); } .chat-input-area textarea { resize: none; line-height: 1.4; max-height: 220px; overflow-y: auto; /* 預設看起來跟原本單行輸入框一樣高，貼入多行預設文字時再靠 JS 自動長高，這樣使用者才能一次看到「聯絡賣家」帶過來的完整多行商品清單，不用在小框裡橫向捲動。 220px 大約能放下 10 行左右，購物車勾選好幾件商品的清單訊息也能一次看完，真的超出才需要內部捲動 */ border-radius: 18px; } .btn-chat-send { background-color: var(--macaron-yellow-dark); border: none; border-radius: 20px; padding: 6px 14px; font-family: inherit; font-size: 0.75rem; font-weight: 800; color: white; cursor: pointer; transition: var(--transition-smooth); } .btn-chat-send:hover { background-color: var(--accent-strong); } /* Settings Panel Styles */ .settings-container { display: flex; flex-direction: column; gap: 12px; } .settings-header-bar { padding: 4px 4px 8px 4px; } .settings-header-bar h3 { font-size: 1rem; font-weight: 800; color: var(--text-main); } .settings-subtitle { font-size: 0.75rem; color: var(--text-muted); } .settings-card { background-color: var(--bg-card); border-radius: var(--border-radius-md); border: 2px solid var(--border-color); padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--card-shadow); } .settings-section-title { font-size: 0.85rem; font-weight: 800; color: var(--text-main); border-bottom: 2px dashed var(--border-color); padding-bottom: 4px; margin-bottom: 4px; } .theme-options { display: flex; gap: 12px; } .theme-btn { flex: 1; background-color: var(--bg-primary); border: 2px solid var(--border-color); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; transition: var(--transition-smooth); } .theme-btn.active { border-color: var(--macaron-yellow-dark); background-color: var(--macaron-yellow-lightest); } .theme-preview { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); } .yellow-preview { background-color: #fffef7; } .dark-preview { background-color: #221e1a; } .theme-label { font-size: 0.75rem; font-weight: 800; color: var(--text-main); } .settings-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-main); padding: 4px 0; /* 這是列的「標籤」預設粗細（例如「用戶暱稱」幾個字）；每一列右邊實際的值（輸入框/顯示文字）大多有自己寫死 font-weight:bold 的行內樣式，不受這裡影響，兩者粗細現在有分層，值比標籤重、看得出誰是內容誰是說明。 */ font-weight: 600; } .settings-value { color: var(--text-muted); font-weight: 600; } .settings-badge-status { font-size: 0.75rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; } .settings-badge-status.unverified { background-color: var(--macaron-pink); color: var(--text-muted); border: 1px solid var(--border-color); } .settings-badge-status.verified { background-color: #ecfdf5; color: var(--line-brand-color); border: 1px solid #a7f3d0; } .settings-desc-text { font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); background-color: var(--bg-primary); border-radius: 8px; padding: 8px; border: 1.5px solid var(--border-color); } /* My Shop Styles */ .shop-container { display: flex; flex-direction: column; gap: 12px; } .shop-header-banner { background: linear-gradient(135deg, var(--macaron-yellow), var(--macaron-pink)); border-radius: var(--border-radius-lg); padding: 16px; border: 2px solid var(--border-color); box-shadow: var(--card-shadow); } .shop-user-profile { display: flex; align-items: center; gap: 12px; } .shop-mom-avatar { width: 56px; height: 56px; border-radius: 50%; border: 2px solid white; box-shadow: 0 4px 8px rgba(0,0,0,0.05); flex-shrink: 0; object-fit: cover; } .shop-mom-info { text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 56px; } .shop-mom-info h3 { font-size: 1rem; font-weight: 800; color: var(--text-main); text-align: left; justify-content: flex-start; } .shop-mom-info p { font-size: 0.75rem; color: var(--text-muted); text-align: left; } .shop-stat-bar { display: flex; background-color: var(--bg-card); border: 2px solid var(--border-color); border-radius: var(--border-radius-md); padding: 8px; justify-content: space-around; text-align: center; box-shadow: var(--card-shadow); } .stat-item { display: flex; flex-direction: column; flex: 1; } .stat-item strong { font-size: 0.85rem; color: var(--text-main); } .stat-item span { font-size: 0.75rem; color: var(--text-muted); } .shop-section-title { font-size: 0.85rem; font-weight: 800; color: var(--text-main); margin-top: 4px; } .shop-product-grid { display: flex; flex-direction: column; gap: 12px; } /* 收藏清單專用：改成雙欄卡片式排版（跟市集卡片同風格），比原本一排一件的直式清單省空間。間距跟 .market-product-grid 保持一致（同一種卡片元件，全站間距要一致）。 */ .shop-product-grid.favorites-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* CSS Grid 理論上預設 align-items 就是 stretch，同一列的卡片應該自動一樣高，但 WKWebView（iOS 內嵌網頁引擎）在 grid 項目內含 -webkit-line-clamp 時，這個預設拉伸行為不可靠，實測同一列卡片還是會一高一矮。這裡明確寫出來，不要依賴瀏覽器的預設值。 */ align-items: stretch; gap: 6px; } .shop-product-card { display: flex; background-color: var(--bg-card); border: 2px solid var(--border-color); border-radius: var(--border-radius-md); padding: 10px; gap: 12px; position: relative; align-items: center; box-shadow: var(--card-shadow); animation: modalPop 0.3s ease-out; } .shop-product-img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; background-color: var(--bg-primary); border: 1.5px solid var(--border-color); } .shop-product-info { flex: 1; display: flex; flex-direction: column; gap: 2px; } .shop-product-info h5 { font-size: 0.75rem; font-weight: 800; color: var(--text-main); } /* 已上架商品資訊：名稱、價格與數量採同一個左側閱讀軸，完整顯示不截斷。 */ .shop-product-info .shop-product-full-title { width: 100%; margin: 0; /* 全站 h5 預設採 flex 置中；賣場商品名稱需明確覆寫，才能真的貼齊左側。 */ display: block; justify-content: flex-start; align-items: flex-start; text-align: left; line-height: 1.35; white-space: normal; overflow: visible; overflow-wrap: anywhere; word-break: break-word; } .shop-product-price-emphasis { color: var(--accent-strong) !important; font-size: 0.85rem; font-weight: 900; text-align: left; letter-spacing: 0.01em; } /* 已上架卡片右下方操作圖示採相同尺寸、底色與顏色。原本用 .shop-product-card 這個 class 選取，但許願清單的卡片也共用同一個 class，導致這裡的 28px＋咖啡色邊框意外蓋掉許願清單刪除鍵自己的 24px／無邊框／紅色 inline style，變成刪除鍵比編輯鍵大一圈、顏色也對不上。改成只在 #shop-product-list（已上架商品清單本身）範圍內生效，不會再誤蓋到 #wishlist-items-list 裡的許願清單卡片。 */ #shop-product-list .shop-product-card .btn-mark-sold-product, #shop-product-list .shop-product-card .btn-delete-product { display: inline-flex !important; align-items: center; justify-content: center; width: 28px !important; height: 28px !important; padding: 0 !important; border: 1.5px solid var(--border-color) !important; border-radius: 50%; background: var(--bg-card) !important; color: var(--strong-brown) !important; cursor: pointer; box-sizing: border-box; } #shop-product-list .shop-product-card .btn-mark-sold-product svg, #shop-product-list .shop-product-card .btn-delete-product svg { color: var(--strong-brown) !important; } #shop-product-list .shop-product-card .btn-mark-sold-product:hover, #shop-product-list .shop-product-card .btn-delete-product:hover { background: var(--macaron-yellow-lightest) !important; transform: scale(1.06); } #sold-modal-product-title.sold-modal-product-title { text-align: center; overflow-wrap: anywhere; } #sold-modal-price-input:focus { border-color: var(--accent-strong) !important; box-shadow: 0 0 0 3px rgba(128, 84, 61, 0.18) !important; } #btn-sold-confirm:hover { background: var(--strong-brown) !important; transform: translateY(-1px); } .shop-product-price { font-size: 0.75rem; font-weight: 800; color: var(--myship-orange-dark); } .shop-product-condition { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; } .shop-product-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; } .tag-trans { font-size: 0.75rem; font-weight: 800; padding: 2px 6px; border-radius: 4px; white-space: nowrap; border: 1px solid transparent; } .tag-trans.tag-myship { background-color: var(--myship-orange); color: var(--myship-orange-dark); border-color: #ffd8a8; } .tag-trans.tag-face { background-color: #f5ece1; color: #482d1b; border-color: #c89d7c; } /* 賣貨便、面交與新舊程度共用同一個輕亮標籤，不用不同色塊造成視覺干擾。 */ .shop-product-tags .tag-trans.tag-myship { background-color: var(--accent-soft); color: var(--myship-orange-dark); border-color: var(--accent-border); } .shop-product-status { font-size: 0.75rem; font-weight: 800; color: var(--myship-green-dark); border: 1.5px solid var(--myship-green-dark); background-color: #ecfdf5; padding: 2px 6px; border-radius: 4px; position: absolute; top: 10px; right: 10px; } .btn-delete-product { background: none; border: none; font-size: 1rem; cursor: pointer; padding: 4px; position: absolute; bottom: 8px; right: 8px; opacity: 0.7; transition: var(--transition-smooth); } .btn-delete-product:hover { opacity: 1; transform: scale(1.1); } /* 許願清單編輯／刪除兩顆按鈕統一大小與互動效果，避免視覺上一顆比另一顆明顯。 */ .btn-edit-wishlist { opacity: 0.7; transition: var(--transition-smooth); } .btn-edit-wishlist:hover { opacity: 1; transform: scale(1.1); } /* Footer Section */ .app-footer { padding: 12px 20px; background-color: var(--macaron-yellow-lightest); display: flex; flex-direction: column; gap: 8px; align-items: center; border-top: 1px dashed var(--border-color); flex-shrink: 0; } .tip-card { background-color: var(--bg-card); border-radius: var(--border-radius-md); padding: 8px 12px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(120, 90, 80, 0.04); border: 1px solid var(--border-color); } .tip-icon { font-size: 1rem; } .tip-text { font-size: 0.75rem; line-height: 1.4; color: var(--text-main); } .copyright { font-size: 0.75rem; color: var(--text-muted); } /* Modal Overlay Styles */ .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); z-index: 2000; display: flex; justify-content: center; align-items: center; transition: var(--transition-smooth); } .modal-overlay.hidden { display: none !important; /* Ensure it is completely unmounted/hidden from the pointer events tree */ } .line-modal-card { background-color: var(--bg-card); width: 85%; max-width: 360px; border-radius: var(--border-radius-lg); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); overflow: hidden; animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 2px solid var(--border-color); } .line-modal-header { background-color: var(--line-brand-color); color: white; padding: 14px; display: flex; justify-content: space-between; align-items: center; position: relative; border-bottom: 1.5px solid rgba(0,0,0,0.15); } .modal-line-logo { font-weight: 900; letter-spacing: 1px; font-size: 1rem; font-family: 'Fredoka', sans-serif; } .line-modal-header h3 { font-size: 0.85rem; font-weight: 800; } .modal-close { background: none; border: none; color: white; font-size: 1.3rem; cursor: pointer; line-height: 1; } .line-modal-body { padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .shield-animation { display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .modal-bear-icon { width: 60px; height: 60px; border-radius: 18px; box-shadow: 0 8px 20px rgba(0,0,0,0.06); animation: float 2.5s infinite ease-in-out; } .line-modal-body h4 { font-size: 1rem; color: var(--text-main); font-weight: 800; } .line-modal-body p { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; } .line-user-mock { width: 100%; background-color: var(--macaron-yellow-lightest); border: 1.5px solid var(--border-color); border-radius: var(--border-radius-md); padding: 8px 12px; display: flex; align-items: center; gap: 10px; margin-top: 4px; text-align: left; } .mock-avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--macaron-pink-dark); border: 2px solid white; } .mock-info { display: flex; flex-direction: column; } .mock-info strong { font-size: 0.75rem; color: var(--text-main); } .mock-info span { font-size: 0.75rem; color: var(--accent-strong); font-weight: 700; } .line-modal-footer { padding: 12px 20px 20px 20px; } .btn-line-auth { width: 100%; background-color: var(--line-brand-color); color: white; box-shadow: 0 4px 12px rgba(6, 199, 85, 0.15); } .btn-line-auth:hover { background-color: var(--accent-strong); } /* API Key testing panel */ .api-key-panel { position: fixed; bottom: 10px; right: 10px; background-color: var(--bg-card); color: var(--text-main); padding: 6px 10px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); font-size: 0.75rem; display: flex; align-items: center; gap: 4px; border: 2px solid var(--macaron-yellow-dark); z-index: 1000; } .api-key-panel input { border: 1.5px solid var(--border-color); border-radius: 6px; padding: 3px 6px; font-size: 0.75rem; outline: none; width: 120px; background-color: var(--bg-card); color: var(--text-main); } /* Micro-animations Keyframes */ @keyframes wobble { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-6deg) scale(1.02); } 30% { transform: rotate(4deg) scale(0.98); } 45% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } 75% { transform: rotate(-1deg); } } @keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } @keyframes bounceActive { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1.04); } } @keyframes shine { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03) rotate(1deg); } } @keyframes pulse { 0% { transform: scale(0.97); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(217, 119, 6, 0); } 100% { transform: scale(0.97); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); } } @keyframes modalPop { 0% { transform: scale(0.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes pop { 0% { transform: scale(0.85); } 100% { transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(2deg); } } @keyframes heartBeat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.1); } 40% { transform: scale(1); } 60% { transform: scale(1.1); } } #estimate-btn:not(.hidden) { animation: pulse 2s infinite; } /* Search Bar Styles */ .search-bar-container { padding: 10px 14px 6px 14px; background-color: var(--bg-primary); flex-shrink: 0; } .search-input-wrapper { display: flex; align-items: center; background-color: var(--bg-card); border: 2px solid var(--border-color); border-radius: 30px; padding: 6px 14px; gap: 8px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.03); } .search-icon { font-size: 0.85rem; color: var(--text-muted); } #app-search-input { flex: 1; border: none; outline: none; font-family: inherit; font-size: 0.75rem; background: none; color: var(--text-main); font-weight: 700; } #app-search-input::placeholder { color: var(--text-muted); font-weight: 500; /* placeholder 比實際輸入字略小，窄螢幕也更容易維持完整詞語。 */ font-size: 15px; letter-spacing: 0; } /* Wishlist Switch Toggle Styles */ .switch { position: relative; display: inline-block; width: 36px; height: 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-color); transition: .3s; } .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .3s; } input:checked + .slider { background-color: var(--myship-orange-dark); } input:focus + .slider { box-shadow: 0 0 1px var(--myship-orange-dark); } input:checked + .slider:before { transform: translateX(16px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /* Wishlist Toast Notification Styles */ .wishlist-toast { /* 原本貼頂部滑入，實測發現使用者很容易漏看（例如上架沒附照片被擋下，卻沒注意到有跳提醒）改成畫面正中央出現＋自動消失，最不容易錯過，同時維持不用手動點掉、不擋路的特性 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85%; max-width: 340px; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); z-index: 3000; padding: 14px 16px; animation: toastPopCenter 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; gap: 4px; } .wishlist-toast.hidden { display: none !important; } /* 全站共用的提示 Toast（showGenericToast）背景原本寫死淺米黃色，深色模式下沒有跟著變暗；這個元素在 HTML 結構上是的直屬子層、不在 .app-container 裡面（跟其他彈窗一樣），所以同時要有 body.dark-mode 版本的規則，只寫 .app-container.dark-mode 永遠不會生效 */ .app-container.dark-mode .wishlist-toast, body.dark-mode .wishlist-toast { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important; } .app-container.dark-mode .toast-header, body.dark-mode .toast-header { border-bottom-color: var(--border-color) !important; } .app-container.dark-mode .toast-close, body.dark-mode .toast-close { color: var(--text-muted) !important; } .toast-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border-color); padding-bottom: 4px; } .toast-bell { font-size: 1rem; animation: ring 1.5s infinite ease-in-out; } .toast-close { background: none; border: none; color: var(--strong-brown); font-size: 1.2rem; cursor: pointer; font-weight: 700; } .toast-body { display: flex; flex-direction: column; align-items: flex-start; } @keyframes slideDown { 0% { transform: translateY(-40px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes toastPopCenter { 0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } @keyframes ring { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(10deg); } 40% { transform: rotate(-5deg); } 50% { transform: rotate(0); } } /* Mobile Responsive Adjustments */ @media (max-width: 480px) { body { padding: 0; background-color: var(--bg-primary); align-items: stretch; } .app-container { width: 100%; height: 100dvh; /* Dynamic viewport height to prevent browser bar bugs */ max-height: none; max-width: none; border-radius: 0; border: none; box-shadow: none; } .chat-container { height: calc(100dvh - 180px); } .chat-window { height: calc(100dvh - 310px); } } /* Sub-navigation bar inside My Shop */ .shop-sub-nav { display: flex; gap: 8px; margin: 15px 0 6px 0; padding: 4px; background-color: var(--macaron-yellow-lightest); border-radius: 12px; border: 1.5px solid var(--border-color); } .shop-sub-nav-btn { flex: 1; padding: 8px 12px; border: none; background: none; border-radius: 8px; color: var(--text-muted); font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); display: flex; align-items: center; justify-content: center; gap: 4px; } .shop-sub-nav-btn:hover { color: var(--text-main); background-color: rgba(255, 255, 255, 0.5); } .shop-sub-nav-btn.active { background-color: white; color: var(--text-main); box-shadow: 0 2px 6px rgba(133, 77, 14, 0.08); border: 1px solid var(--border-color); } /* Custom market-sort-select styling hover/focus */ #market-sort-select:hover { border-color: var(--macaron-pink-dark) !important; background-color: var(--macaron-yellow-lightest) !important; } #market-sort-select:focus { border-color: var(--macaron-pink-dark) !important; box-shadow: 0 0 0 2px rgba(204, 168, 141, 0.15); } /* Marketplace CSS */ .market-filters-row { padding: 2px 0 10px 0; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .market-filters-row::-webkit-scrollbar { height: 4px; } .market-filters-row::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 4px; } .market-filter-badges { display: flex; gap: 8px; padding-bottom: 4px; } .filter-badge { padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--border-color); background-color: white; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); outline: none; } .filter-badge:hover { color: var(--text-main); border-color: var(--macaron-pink-dark); background-color: var(--macaron-pink-lightest); } .filter-badge.active { background-color: var(--macaron-pink-dark); color: var(--text-main); border-color: var(--macaron-pink-dark); box-shadow: 0 2px 8px rgba(180, 138, 112, 0.15); } /* Marketplace Seller Row in Cards */ .market-seller-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1.5px dashed var(--border-color); background-color: var(--bg-card); border-radius: 20px 20px 0 0; } .market-mom-avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-color); background-color: var(--macaron-blue-lightest); object-fit: cover; } .market-seller-info { flex: 1; display: flex; flex-direction: column; text-align: left; } .market-seller-name { font-size: 0.75rem; font-weight: 800; color: var(--text-main); line-height: 1.2; display: flex; align-items: center; gap: 4px; } .market-post-time { font-size: 0.75rem; color: var(--text-muted); } .market-verified-badge { background-color: #22c55e; color: white; font-size: 0.75rem; padding: 1px 4px; border-radius: 4px; font-weight: 800; } .market-card-actions { display: flex; gap: 8px; padding: 10px 12px 12px 12px; background-color: var(--bg-card); border-radius: 0 0 20px 20px; border-top: 1px solid var(--border-color); } .market-card-actions .btn { flex: 1; margin: 0; padding: 8px; font-size: 0.75rem; font-weight: 700; } .btn-chat-seller { background-color: var(--macaron-blue-light); border: 1.5px solid var(--border-color); color: var(--text-main); } .btn-chat-seller:hover { background-color: var(--macaron-blue-dark); } .btn-buy-now { background: linear-gradient(135deg, var(--macaron-pink-dark), #ffa6c9); border: none; color: var(--text-main); } .btn-buy-now:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(255, 107, 139, 0.2); } /* 2-Column Grid & Stain Details Modal for BABYLOOP v2.5.0 */ /* Stack price and transaction badge vertically to prevent horizontal overflow on smaller screens */ /*.market-product-grid aligns perfectly with right boundaries */ .market-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 0; padding-right: 6px; /* 原本這裡自己另外開一個 max-height + overflow-y:auto 的獨立捲動區域，跟外層 .app-main 自己的捲動各自為政，兩層高度算法互相沒對齊，才會出現「捲不到最後一列」的狀況。市集分類側邊欄本身也沒有做 sticky 固定，拆成兩層捲動沒有實際好處，直接讓整頁交給 .app-main 統一捲動，廣告要保留的空間也統一由 .app-main 那條規則處理，不用在這裡重複算一次 */ width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; /* 圖片改正方形後高度會隨卡片寬度變動，改用 auto 讓每列自動依內容取高； Grid 預設 align-items:stretch 仍會讓同一列的兩張卡片高度互相對齊，不會參差不齊。 */ grid-auto-rows: auto; } /* 空分類只有引導內容，不應被商品卡固定列高截斷或顯示多餘捲軸。 */ .market-product-grid.is-empty { display: block; max-height: none; overflow: hidden; padding-right: 0; } /* 市集在小螢幕必須維持在可視寬度內：分類欄固定精簡、商品區自動分配剩餘空間。先前商品區的行內 288px 固定寬度，會在 375px 裝置推寬整頁並造成左右滑動。 */ #tab-marketplace-panel { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; } /* 這裡故意不能跟上面 #tab-marketplace-panel 合併寫同一個 overflow-x: hidden 規則：只要一個元素的 overflow-x 被設成非 visible，瀏覽器就會把它的 overflow-y 計算值也自動變成 auto（CSS 規範行為），讓 .split-layout（分類側邊欄的直接父層）意外變成一個「有捲動能力的容器」——但它本身內容剛好跟自身等高、實際上完全不會捲動。分類側邊欄用 position: sticky 想要黏在「真正在捲動的那層」（#tab-marketplace-panel 本身）頂端，但 sticky 只會找「離自己最近、真的有捲動能力」的祖先層去黏——如果中間這層 .split-layout 意外符合這個條件，sticky 就會錯誤地黏在它身上，而 .split-layout 自己完全不動，側邊欄看起來就會直接跟著頁面內容一起被捲走，捲到商品列表下方點開分類選單，選單會出現在畫面外、要捲回最上面才看得到。橫向溢出這件事已經由外層 #tab-marketplace-panel 自己的 overflow-x: hidden 負責擋掉了，這裡不需要重複設定。 */ #tab-marketplace-panel .split-layout { width: 100%; max-width: 100%; min-width: 0; } #tab-marketplace-panel .split-layout { box-sizing: border-box; touch-action: pan-y pinch-zoom; } #tab-marketplace-panel .category-sidebar { width: 80px; min-width: 80px; box-sizing: border-box; padding-right: 5px; } #tab-marketplace-panel .market-content-pane { width: auto !important; max-width: calc(100% - 86px); min-width: 0; flex: 1 1 0 !important; overflow-x: hidden; } @media (max-width: 360px) { #tab-marketplace-panel .category-sidebar { width: 74px; min-width: 74px; } #tab-marketplace-panel .market-content-pane { max-width: calc(100% - 80px); } } #tab-marketplace-panel .category-sidebar.collapsed { width: 0; min-width: 0; padding-right: 0; } #tab-marketplace-panel .category-sidebar.collapsed ~ .market-content-pane { max-width: 100%; } /* 纖細且高質感的自訂滾動條，避免遮擋右側商品卡片 */ .market-product-grid::-webkit-scrollbar { width: 4px; } .market-product-grid::-webkit-scrollbar-track { background: transparent; } .market-product-grid::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 4px; } .market-product-grid::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); } .market-product-card { display: flex; flex-direction: column; background-color: var(--bg-card); border: 2px solid var(--border-color); border-radius: var(--border-radius-md); padding: 2px; /* Even more compact padding */ gap: 2px; position: relative; box-shadow: var(--card-shadow); animation: modalPop 0.3s ease-out; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } .market-product-card .price-tag-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 2px; } .market-product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .market-product-card .product-img-container { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background-color: var(--bg-primary); } /* 審核體驗資料與真實上架商品清楚區分，避免被誤認為可直接交易。 */ .demo-product-badge { position: absolute; bottom: 6px; left: 6px; z-index: 5; padding: 2px 6px; border: 1px solid var(--accent-border); border-radius: 6px; background: rgba(255, 253, 249, 0.92); color: var(--text-muted); font-size: 0.75rem; font-weight: 800; line-height: 1.2; } .market-product-card .shop-product-img { width: 100%; height: 100%; object-fit: cover; background-color: white; } .market-product-card .stain-tag { position: absolute; top: 6px; left: 6px; background-color: rgba(255, 247, 230, 0.96); color: #9a5b13; font-size: 0.75rem; padding: 2px 6px; border-radius: 10px; font-weight: 700; border: 1px solid #efc77e; z-index: 5; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .market-product-card .video-tag { position: absolute; top: 4px; left: 4px; background-color: var(--accent); color: white; font-size: 0.75rem; padding: 1px 5px; border-radius: 10px; font-weight: 700; border: 1px solid var(--accent-border); z-index: 5; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } /* 示範商品的左上角留給「示範商品」標示，影片標籤往下排列。 */ .market-product-card .video-tag-with-demo { top: 28px; } /* 示範商品仍顯示購物車，版面一致；以較柔和透明度提示不可結帳。 */ .btn-add-to-cart-quick.is-demo-cart { opacity: 0.62; } .market-product-card .shop-product-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow: hidden; } .market-product-card .shop-product-info h5 { font-size: 0.75rem; font-weight: 800; color: var(--text-main); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; height: 2.5em; } /* 收藏與好物市集用同一張卡片規格，避免字級、色彩與高低看起來像兩套設計。卡片高度不再寫死，改成跟隨正方形圖片自然撐開（Grid 預設 stretch 仍會讓同列對齊）。 */ .favorites-grid .favorite-product-card .shop-product-info { min-height: 0; /* 成交回報／分享／刪除這幾顆圖示改成跟價錢同一行排列（inline flex），不再用 position: absolute 疊在卡片右下角，所以這裡不用再留額外的底部空間。 */ padding: 3px 5px !important; gap: 1px !important; } .favorites-grid .favorite-product-card .shop-product-title-text { /* 這條規則原本用 !important 蓋掉了 renderShopProducts() 等函式在 JS 裡寫的 inline style（2 行、固定 2.3rem 高度、0.85rem 字級），導致改了好幾次 JS 都沒有實際生效—— 畫面上看到的其實一直是這裡的舊版設定（3 行、auto 高度、0.76rem 字級）。改成跟 JS 那邊完全一致：固定 2 行、固定高度（不是 auto／max-height，這樣短標題跟長標題的卡片才會一樣高），避免兩邊各自為政又對不上。 */ display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; overflow: hidden; /* 2.3rem 比 2 行實際需要的高度（line-height 1.2 × 2 = 2.4em）還要高一截， WKWebView 上 -webkit-line-clamp 沒辦法完全擋住第三行不排版，多出來的這截空間會讓第三行文字最上緣稍微露出來才被 overflow:hidden 切掉。改用 2.4em（跟自己的 font-size 走，不受根字級 rem 影響）剛好卡在 2 行的實際高度，第三行從一開始就被整個裁掉，見同一份修法：app_v3.js 三處商品卡標題 inline style 的 height。已用真的 WebKit 引擎渲染逐像素比對驗證過。 */ height: 2.4em !important; font-size: 0.85rem !important; line-height: 1.2 !important; } .favorites-grid .favorite-product-card .price-val { /* 字級要跟 renderShopProducts() 的 inline style 保持一致（0.92rem）——這裡原本寫死 1rem !important，價錢加上同一行的三顆操作圖示，在兩欄窄卡片裡會放不下被迫換行，跟圖示分成兩行，看起來又「跑掉」。 */ min-height: 0; font-size: 0.92rem !important; white-space: nowrap; } /* 品牌是商品名稱前的輔助文字，直接嵌在 .shop-product-title-text 標題裡面，不使用框線或膠囊標籤。字級改成 inherit 直接跟著標題走，不要自己寫死一個數字——這裡原本是 0.65rem，比標題的 0.85rem 小了一截，同一行文字忽大忽小，看起來很不協調（下面第 4064 行那個共用選取器區塊也對這個 class 設了一次 0.75rem，兩條規則互相打架，讓人搞不清楚實際套用的到底是哪個）。 */ .market-product-brand { /* 顏色也改成 inherit，直接跟著外層標題文字走——理由跟 font-size 一樣：寫死 var(--text-muted) 沒辦法保證在所有卡片情境下都精準對得起來，改成 inherit 就不會再有「好物市集」跟「已上架」品牌字顏色對不上的疑慮。 */ color: inherit; font-size: inherit; font-weight: 800; letter-spacing: 0.01em; margin-right: 3px; } .market-product-card .shop-product-desc { font-size: 0.75rem; color: var(--text-muted); margin: 0; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.5em; } .market-product-card .price-val { font-size: 0.75rem; font-weight: 800; color: var(--macaron-pink-dark); } /* 標題只佔實際文字的行數（1~3 行不等），但價格一律要鎖在卡片左下角，不能因為某張卡標題比較短就往上飄，跟同一排其他卡片對不齊。 .shop-product-info 是 flex column，價格這個直屬子項用 margin-top: auto 自動把自己推到欄位最底部，不管上面標題實際佔了幾行都一樣。 */ .market-product-card .shop-product-info > .price-val, .market-product-card .shop-product-info > .price-row { margin-top: auto; } .market-product-card .condition-badge { font-size: 0.75rem; padding: 1px 4px; border-radius: 10px; background: var(--macaron-yellow-light); border: 1px solid var(--border-color); font-weight: 700; } .market-product-card .chat-btn-row { margin-top: 4px; display: flex; gap: 4px; } .market-product-card .btn-chat-mini { flex: 1; padding: 4px 0; font-size: 0.75rem; background-color: var(--macaron-blue-light); border: 1.5px solid var(--border-color); border-radius: 20px; font-weight: 700; color: var(--text-main); cursor: pointer; text-align: center; transition: var(--transition-smooth); outline: none; } .market-product-card .btn-chat-mini:hover { background-color: var(--macaron-blue); } /* Stain indicator thumbnail styling */ .detail-thumb-item { width: 55px; height: 55px; border-radius: 8px; border: 2px solid var(--border-color); cursor: pointer; object-fit: cover; background-color: white; flex-shrink: 0; transition: border-color 0.2s; position: relative; box-sizing: border-box; } .detail-thumb-item.active { border-color: var(--macaron-pink-dark); } .detail-thumb-item.has-stain::after { content: ""; position: absolute; bottom: -2px; right: -2px; background-color: white; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 9px 9px; border-radius: 50%; width: 14px; height: 14px; display: block; box-shadow: 0 1px 3px rgba(0,0,0,0.25); border: 1px solid var(--border-color); } /* 商品照片放大檢視：使用原生圖片等比例呈現，避免裁切商品細節。 */ .photo-lightbox { position: fixed; inset: 0; z-index: 100100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; /* 上方留白多加 14px：關閉鍵改成貼齊照片右上角、往外飄一半（見 .photo-lightbox-close），照片如果剛好高到頂到可用高度上緣（例如接近全螢幕的直式截圖），要保留這 14px 緩衝，關閉鍵才不會探出去疊到瀏海/動態島那塊安全區域。 */ padding: max(24px, calc(env(safe-area-inset-top) + 14px)) 20px max(24px, env(safe-area-inset-bottom)); background: rgba(30, 24, 20, 0.92); backdrop-filter: blur(8px); cursor: zoom-out; } .photo-lightbox.hidden { display: none; } /* 包住照片本身的容器，寬高會自動收縮貼齊照片實際顯示的大小（不管照片是正方形、縮小顯示，還是接近滿版的直式截圖），關閉鍵才能相對「照片本身的邊角」定位，而不是相對整個螢幕的角落——照片小的時候關閉鍵不會離照片一大截，照片大到接近滿版時關閉鍵也不會整個疊在照片內容上面。 */ .photo-lightbox-image-wrap { position: relative; display: inline-flex; max-width: 100%; max-height: calc(100vh - 104px); } .photo-lightbox img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 104px); object-fit: contain; border-radius: 14px; background: white; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); cursor: default; /* 雙指縮放/拖曳靠自己的 JS 手勢處理（見 app_v3.js），瀏覽器原生的縮放/捲動手勢要整個關掉，不然兩邊會互搶同一組觸控事件，縮放時畫面反而卡頓或跳掉。這裡的 max-width/max-height 決定照片「原始未縮放」時佔用的版面大小，雙指縮放時套用的是 transform（純視覺效果，不影響版面），wrap 容器跟關閉鍵的位置只跟著這個未縮放的版面大小走，縮放照片時不會跟著亂飄。 */ touch-action: none; } .photo-lightbox-close { /* 原本相對整個畫面的角落定位（top/right 對齊螢幕邊角），照片縮小顯示時離照片本身一大截、感覺不像是「這張照片的關閉鍵」；照片接近滿版（例如直式截圖）時又會整個疊到照片內容上面。改成相對 .photo-lightbox-image-wrap （貼齊照片實際大小的容器）定位，往外飄一半，變成貼在照片右上角的圓形徽章——不管照片多大多小，關閉鍵都固定貼著照片的角，只有一半疊在照片邊緣（通常不是照片的重要內容），另一半飄在照片外側。 */ position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.96); color: #1e1814; font-size: 1.5rem; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } .photo-lightbox-hint { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.75rem; font-weight: 700; pointer-events: none; } .photo-crop-modal { position: fixed; inset: 0; z-index: 100200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: rgba(30, 24, 20, 0.92); backdrop-filter: blur(8px); } .photo-crop-modal.hidden { display: none; } .photo-crop-hint { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.75rem; font-weight: 700; } .photo-crop-viewport { position: relative; width: min(78vw, 340px); height: min(78vw, 340px); border-radius: 16px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.5); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); touch-action: none; cursor: grab; background: #111; } .photo-crop-viewport.is-dragging { cursor: grabbing; } .photo-crop-viewport img { position: absolute; top: 0; left: 0; max-width: none; max-height: none; transform-origin: top left; user-select: none; -webkit-user-drag: none; pointer-events: none; } .photo-crop-actions { display: flex; gap: 10px; width: min(78vw, 340px); } .photo-crop-actions .btn { flex: 1; margin: 0; } .shop-product-card .shop-product-img, #detail-main-img { cursor: zoom-in; } /* Hover effects for setting cog in Header */ #header-settings-btn:hover { transform: rotate(45deg) scale(1.1) !important; color: var(--text-main) !important; } /* Splash Screen Styles */ .splash-screen-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background-color: #E8E4D9; /* Seamless match with new Lubi bear picture backdrop (232, 228, 217) */ display: flex; align-items: center; justify-content: center; z-index: 100000; /* Ensure it is above everything else */ transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.8s; /* 開機畫面只是品牌載入頁，不應出現長按選字、圖片拖曳或系統複製選單。 */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .splash-screen-container.fade-out { opacity: 0; visibility: hidden; /* On iOS a transparent fixed layer can still swallow taps during a transition. Never let the retired splash block the login controls. */ pointer-events: none !important; } /* Login is an action sheet, not selectable article text. This prevents the iOS long-press copy menu without disabling any button or policy link. */ #register-welcome-modal, #register-welcome-modal * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } #register-welcome-modal button, #register-welcome-modal [role="button"], #register-welcome-modal #login-terms-link, #register-welcome-modal #login-privacy-link { -webkit-touch-callout: default; touch-action: manipulation; } /* WKWebView can ignore the inherited rule for inline text. Apply the native selection guards directly to every textual login element as well. */ #register-welcome-modal .login-card-panel, #register-welcome-modal .login-card-panel h2, #register-welcome-modal .login-card-panel p, #register-welcome-modal .login-card-panel span, #register-welcome-modal .login-card-panel div, #register-welcome-modal .login-card-panel label { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; } /* Policy names should wrap as complete words, never leave a lone character. */ #register-welcome-modal .login-policy-link { display: inline-block; white-space: nowrap; } .splash-content { text-align: center; display: flex; flex-direction: column; align-items: center; } .splash-logo-container { position: relative; display: flex; justify-content: center; align-items: center; } .splash-logo-img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-drag: none; pointer-events: none; } /* Background stars floating gently */ .splash-bg-star { position: absolute; font-size: 1.4rem; color: #ffd166; opacity: 0.6; pointer-events: none; z-index: 10; animation: starFloat 3s ease-in-out infinite alternate; } .star-1 { top: 20%; left: 15%; animation-delay: 0s; font-size: 1.8rem; } .star-2 { top: 15%; right: 18%; animation-delay: 0.5s; } .star-3 { bottom: 25%; left: 20%; animation-delay: 1s; } .star-4 { bottom: 20%; right: 15%; animation-delay: 1.5s; font-size: 1.7rem; } .star-5 { top: 40%; right: 8%; animation-delay: 0.8s; } @keyframes starFloat { 0% { transform: translateY(0) rotate(0deg) scale(1); } 100% { transform: translateY(-10px) rotate(15deg) scale(1.1); } } /* Sparkle burst animation when items land (around 1.4s) */ .sparkles-burst { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; pointer-events: none; overflow: visible; z-index: 15; } .sparkle { position: absolute; font-size: 1.6rem; color: #ffd166; opacity: 0; transform: scale(0); text-shadow: 0 0 4px rgba(255, 209, 102, 0.4); } /* Burst keyframes triggering at 1.4s */ .sparkle.sp-1 { animation: burst1 0.8s ease-out forwards; animation-delay: 1.4s; } .sparkle.sp-2 { animation: burst2 0.8s ease-out forwards; animation-delay: 1.4s; } .sparkle.sp-3 { animation: burst3 0.8s ease-out forwards; animation-delay: 1.45s; } .sparkle.sp-4 { animation: burst4 0.8s ease-out forwards; animation-delay: 1.45s; } .sparkle.sp-5 { animation: burst5 0.8s ease-out forwards; animation-delay: 1.5s; } .sparkle.sp-6 { animation: burst6 0.8s ease-out forwards; animation-delay: 1.5s; } @keyframes burst1 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(-100px, -60px) scale(1.2) rotate(30deg); opacity: 0; } } @keyframes burst2 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(100px, -70px) scale(1.2) rotate(-30deg); opacity: 0; } } @keyframes burst3 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(-80px, 80px) scale(1) rotate(45deg); opacity: 0; } } @keyframes burst4 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(80px, 90px) scale(1) rotate(-45deg); opacity: 0; } } @keyframes burst5 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(0px, -110px) scale(1.3) rotate(15deg); opacity: 0; } } @keyframes burst6 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(-20px, 110px) scale(1.3) rotate(-15deg); opacity: 0; } } .splash-text-group { position: absolute; bottom: 35px; left: 0; width: 100%; text-align: center; z-index: 10; pointer-events: none; } .splash-title { font-family: 'Fredoka', 'Noto Sans TC', sans-serif; font-size: 2.1rem; font-weight: 800; color: #785b46; /* Deep milk-tea brown matching the screenshot */ margin: 0; letter-spacing: 2px; } .splash-subtitle { font-family: 'Noto Sans TC', sans-serif; font-size: 0.85rem; font-weight: 700; color: #8c7362; margin: 5px 0 0 0; letter-spacing: 3px; } .splash-loader { display: flex; gap: 8px; margin-top: 15px; } .loader-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #785b46; animation: dotBounce 1.4s infinite ease-in-out both; } .loader-dot:nth-child(1) { animation-delay: -0.32s; } .loader-dot:nth-child(2) { animation-delay: -0.16s; } /* Item and Bear Animations inside SVG */ .bear-head-group { animation: bearHeadNod 3.6s ease-in-out infinite alternate; transform-origin: 50px 32px; } .item-elephant-group { animation: elephantFloat 2.6s ease-in-out infinite alternate; transform-origin: 44.5px 59px; } .item-bunny-group { animation: bunnyFloat 2.2s ease-in-out infinite alternate; transform-origin: 33px 59px; } .item-pin-group { animation: pinFloat 2.5s ease-in-out infinite alternate; transform-origin: 50px 59px; } .item-rattle-group { animation: rattleShake 1.6s ease-in-out infinite; transform-origin: 60.5px 59px; } .item-bottle-group { animation: bottleFloat 2.8s ease-in-out infinite alternate; transform-origin: 67px 59px; } /* Keyframe Animations */ @keyframes bearHeadNod { 0% { transform: rotate(-2deg) translateY(0); } 100% { transform: rotate(2deg) translateY(0.5px); } } @keyframes elephantFloat { 0% { transform: translateY(0) rotate(1deg); } 100% { transform: translateY(-2px) rotate(-1deg); } } @keyframes bunnyFloat { 0% { transform: translateY(0) rotate(-1.5deg); } 100% { transform: translateY(-2.5px) rotate(1.5deg); } } @keyframes pinFloat { 0% { transform: translateY(0) scaleY(1); } 100% { transform: translateY(-1.5px) scaleY(0.97); } } @keyframes rattleShake { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(10deg); } } @keyframes starFloat { 0% { transform: translateY(0) rotate(0deg) scale(1); } 100% { transform: translateY(-2px) rotate(10deg) scale(1.05); } } @keyframes bottleFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-1.8px); } } @keyframes blanketWave { 0% { transform: skewX(-2deg); } 100% { transform: skewX(2deg); } } @keyframes zoomInSplash { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes textPop { 0% { transform: translateY(15px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes dotBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* Premium Settings Button Style */ .settings-btn-premium { background-color: var(--bg-card); border: 2px solid var(--border-color); border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04); padding: 0; flex-shrink: 0; outline: none; } .settings-btn-premium:hover { transform: rotate(45deg) scale(1.05); background-color: var(--macaron-blue-lightest); border-color: var(--macaron-blue-dark); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08); } .settings-btn-premium svg { color: var(--accent); transition: color 0.3s ease; } .settings-btn-premium:hover svg { color: var(--accent-strong); } /* Premium Cart Button Style & Badge */ .cart-btn-premium { background-color: var(--bg-card); border: 2px solid var(--border-color); border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04); padding: 0; flex-shrink: 0; outline: none; position: relative; } .cart-btn-premium:hover { transform: translateY(-2px) scale(1.05); background-color: var(--macaron-blue-lightest); border-color: var(--macaron-blue-dark); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08); } .cart-btn-premium svg { color: var(--accent); transition: color 0.3s ease; } .cart-btn-premium:hover svg { color: var(--accent-strong); } .cart-badge { position: absolute; top: -5px; right: -5px; background-color: var(--macaron-pink-dark); color: white; border-radius: 50%; font-size: 0.75rem; font-weight: 800; min-width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; border: 1.5px solid white; box-sizing: border-box; box-shadow: 0 2px 4px rgba(0,0,0,0.15); } /* Filter chip styles */ .filter-chip { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .filter-chip:hover { background-color: var(--macaron-yellow-light) !important; border-color: var(--macaron-yellow-dark) !important; transform: translateY(-1px); } .filter-chip.active { background-color: var(--macaron-blue-dark) !important; border-color: var(--macaron-blue-dark) !important; color: white !important; box-shadow: 0 3px 8px rgba(118, 194, 190, 0.35); } /* 許願清單的預算價格複選按鈕，樣式比照篩選面板的 filter-chip，但可以同時選多個（不互斥） */ .wish-budget-chip.active { background-color: var(--macaron-blue-dark) !important; border-color: var(--macaron-blue-dark) !important; color: white !important; box-shadow: 0 3px 8px rgba(118, 194, 190, 0.35); } /* History chips */ .history-chip { padding: 3px 10px; background-color: white; border: 1.5px solid var(--border-color); border-radius: 12px; font-size: 0.75rem; font-weight: 700; color: var(--text-main); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s ease; } .history-chip:hover { background-color: var(--macaron-pink-lightest); border-color: var(--macaron-pink-dark); transform: translateY(-1px); } /* 原本這裡用 body [style*="font-size: 0.6rem"] 這種屬性選擇器，在執行期把任何 inline style 寫 0.6rem／0.65rem 的元素強制拉高到 0.75rem !important——用意（手機上太小的字不好讀）是對的，但做法很脆弱：只對 inline style 生效，用 CSS class 宣告同樣數值的地方完全不受影響，導致「原始碼講的字級」跟「畫面實際大小」對不上，兩個同樣寫 0.65rem 的元素，一個用 inline style、一個用 class，畫面上會是兩種不同大小，看起來當然不協調。改成直接把「至少要多大字才好讀」這件事做進原始碼本身：不管是 CSS 檔還是 app_v3.js 裡的 inline style，凡是原本寫 0.6rem／0.65rem 的地方都直接改成 0.75rem，不再需要這種執行期補丁。 */ .accordion-header, .subcat-item, .tag-trans, .shop-product-condition, .market-product-brand, .market-product-card .shop-product-desc, .market-product-card .condition-badge, .market-product-card .btn-chat-mini, .history-chip, .demo-product-badge, .market-product-card .stain-tag, .market-product-card .video-tag { font-size: 0.75rem; line-height: 1.35; } .shop-product-price, .shop-product-info h5, .market-product-card .shop-product-info h5, .market-product-card .price-val { font-size: 0.85rem; line-height: 1.4; } .cart-badge, .nav-chat-bubble-overlay { font-size: 0.75rem; } .history-chip-delete { font-weight: bold; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; line-height: 1; } .history-chip-delete:hover { color: var(--macaron-pink-dark); } /* Edit product condition select left alignment override */ #edit-product-condition { text-align: left !important; text-align-last: left !important; } /* Dark Mode Specific Contrast Enhancements */ .app-container.dark-mode .app-header h1 { color: var(--text-main); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.6); } .app-container.dark-mode .subtitle { color: var(--text-main); opacity: 0.85; } .app-container.dark-mode .tag-trans.tag-face { background-color: #44332a; color: #e5c8ad; border-color: #80624e; } .app-container.dark-mode .tag-trans.tag-myship { background-color: #3d2d25; color: #dfb998; border-color: #745642; } .app-container.dark-mode .shop-product-status { background-color: #064e3b; color: #34d399; border-color: #047857; } /* 賣貨便連結卡片的「點我前往下單」按鈕：淺色模式下 --myship-orange-dark 是偏深的咖啡色，當背景色配白字沒問題；但這個變數在深色模式被調亮成淺卡其色（給文字當強調色用），直接拿來當按鈕底色反而變成一塊刺眼的亮色塊、疊白字幾乎看不清楚。深色模式下改成底色用偏深的 --myship-orange、文字用原本調亮的 --myship-orange-dark，跟卡片本身融合。 */ .app-container.dark-mode .myship-order-btn { background-color: var(--myship-orange) !important; border-color: var(--myship-orange-dark) !important; color: var(--myship-orange-dark) !important; } /* 聊天視窗頂部「這筆交易完成了嗎？」提醒條，整條底色跟裡面兩顆按鈕都是寫死的亮色（#fef3c7 淺黃、白色按鈕、--myship-orange-dark 當按鈕底色），深色模式完全沒被蓋掉，在暗色聊天室裡變成一整條刺眼的亮黃色。這裡補上深色版本，維持同一組配色邏輯但反過來用。 */ .app-container.dark-mode .seller-status-prompt { background-color: #4a3714 !important; color: #f5ebe0 !important; } .app-container.dark-mode #chat-seller-status-text svg { color: #e8c07d !important; } .app-container.dark-mode #btn-chat-remind-later { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-muted) !important; } .app-container.dark-mode #btn-chat-mark-sold { background: var(--myship-orange) !important; color: var(--myship-orange-dark) !important; } .app-container.dark-mode .msg-bubble.outgoing .msg-content { border-color: #5f4a27; } #brand-suggestion-bubble, #edit-brand-suggestion-bubble { transition: all 0.2s ease; } #brand-suggestion-bubble:hover, #edit-brand-suggestion-bubble:hover { transform: scale(1.02); box-shadow: 0 3px 8px rgba(0,0,0,0.08); } #brand-suggestion-bubble:active, #edit-brand-suggestion-bubble:active { transform: scale(0.98); } .app-container.dark-mode #brand-suggestion-bubble, .app-container.dark-mode #edit-brand-suggestion-bubble { background-color: #33251e !important; border-color: #745642 !important; color: #dfb998 !important; } /* My Shop Dark Mode & Contrast Overrides (Chocolate & Cocoa Theme) */ .trust-badge-line { background-color: #e0f2fe; color: #0369a1; border: 1.5px solid #bae6fd; } .app-container.dark-mode .shop-header-banner { background: linear-gradient(135deg, #3a2e26, #2d241e) !important; border-color: var(--border-color) !important; } .app-container.dark-mode .shop-mom-info h3 { color: var(--text-main) !important; } .app-container.dark-mode .shop-mom-info p { color: var(--text-muted) !important; } .app-container.dark-mode .seller-trust-info-container { background: rgba(38, 33, 28, 0.6) !important; border-color: var(--border-color) !important; } .app-container.dark-mode .trust-badge-line { background-color: var(--macaron-blue) !important; color: var(--macaron-blue-dark) !important; border-color: var(--border-color) !important; } .app-container.dark-mode .shop-sub-nav { background-color: var(--macaron-yellow-lightest) !important; border-color: var(--border-color) !important; } .app-container.dark-mode .shop-sub-nav-btn { color: var(--text-muted) !important; } .app-container.dark-mode .shop-sub-nav-btn:hover { color: var(--text-main) !important; background-color: rgba(255, 255, 255, 0.03) !important; } .app-container.dark-mode .shop-sub-nav-btn.active { background-color: var(--bg-card) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important; } .app-container.dark-mode .verified-badge { background-color: #064e3b !important; color: #34d399 !important; border-color: #047857 !important; } .app-container.dark-mode .detail-user-row { background: rgba(38, 33, 28, 0.5) !important; border-color: var(--border-color) !important; } .app-container.dark-mode #msrp-matching-status, .app-container.dark-mode #edit-msrp-matching-status { background-color: var(--macaron-blue) !important; color: var(--macaron-blue-dark) !important; border-color: var(--border-color) !important; } /* Force edit product modal layout to align left like upload page */ #edit-product-modal .line-modal-body { align-items: flex-start !important; text-align: left !important; } #edit-product-modal .form-group { width: 100% !important; } /* ========================================================================== Mocha Cocoa (Dark Mode) Chat & Option Visibility Overrides ========================================================================== */ .app-container.dark-mode .chat-item-wrapper { background-color: var(--bg-card) !important; border-bottom-color: var(--border-color) !important; } .app-container.dark-mode .chat-thread { background-color: var(--bg-card) !important; border-bottom-color: var(--border-color) !important; } .app-container.dark-mode .chat-thread.active { background-color: var(--macaron-yellow-lightest) !important; } .app-container.dark-mode .chat-thread strong { color: var(--text-main) !important; } .app-container.dark-mode .chat-thread p { color: var(--text-muted) !important; } .app-container.dark-mode .chat-thread .thread-time { color: var(--text-muted) !important; } /* Chat Input Area */ .app-container.dark-mode .chat-input-area { background-color: var(--bg-card) !important; border-top-color: var(--border-color) !important; } .app-container.dark-mode .chat-input-area input, .app-container.dark-mode .chat-input-area textarea { background-color: var(--bg-primary) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } /* Form controls (Upload panel select, input, textarea) */ .app-container.dark-mode select, .app-container.dark-mode input[type="text"], .app-container.dark-mode input[type="number"], .app-container.dark-mode textarea { background-color: var(--bg-card) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } /* 下拉選單的箭頭是瀏覽器原生畫的，深色模式下背景變暗、箭頭卻還是原本偏深的顏色，兩個疊在一起幾乎看不見。改用自訂的淺色箭頭圖示取代原生箭頭。 */ .app-container.dark-mode select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8ded2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 14px !important; padding-right: 26px !important; } /* Specific inputs with white/gray inline backgrounds */ .app-container.dark-mode #upload-main-category, .app-container.dark-mode #upload-sub-category, .app-container.dark-mode #manual-brand, .app-container.dark-mode #manual-model, .app-container.dark-mode #manual-quantity, .app-container.dark-mode #manual-price, .app-container.dark-mode #manual-condition, .app-container.dark-mode #manual-desc, .app-container.dark-mode #manual-location { background-color: var(--bg-card) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } .app-container.dark-mode #manual-original-price { background-color: var(--macaron-yellow-lightest) !important; color: var(--text-muted) !important; border-color: var(--border-color) !important; } .app-container.dark-mode .photo-slot-empty { background-color: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.25) !important; } /* 修改寶貝好物彈窗的欄位，跟上架表單是各自獨立的一批 id（edit- 開頭），前面那份深色模式覆寫名單只列了上架表單，這批完全沒被蓋到，一直維持淺色底。 */ .app-container.dark-mode #edit-product-brand, .app-container.dark-mode #edit-product-model, .app-container.dark-mode #edit-product-title, .app-container.dark-mode #edit-product-price, .app-container.dark-mode #edit-product-original-price, .app-container.dark-mode #edit-product-quantity, .app-container.dark-mode #edit-product-desc, .app-container.dark-mode #edit-product-condition, .app-container.dark-mode #edit-product-spec, .app-container.dark-mode #edit-location-city, .app-container.dark-mode #edit-location-district { background-color: var(--bg-card) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } /* 賣場卡片右下角的「分享／成交回報（或重新上架）／刪除」三顆圓形圖示按鈕，底色原本寫死 rgba(255,255,255,0.92)，深色模式下變成貼在暗色卡片上的亮白色塊。 */ .app-container.dark-mode .btn-share-product, .app-container.dark-mode .btn-mark-sold-product, .app-container.dark-mode .btn-relist-product, .app-container.dark-mode .btn-delete-product, .app-container.dark-mode .btn-edit-product { background-color: var(--bg-card) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important; } /* Filter Chips */ .app-container.dark-mode .filter-chip { background-color: var(--bg-card) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } .app-container.dark-mode .filter-chip.active { background-color: var(--macaron-pink-dark) !important; color: var(--bg-primary) !important; border-color: var(--macaron-pink-dark) !important; } /* 通知／購物車角標：原本背景色用 --macaron-pink-dark，深色模式下這個變數會變成很淺的焦糖色，白色數字疊上去幾乎看不清楚；角標本來就該是搶眼的提示色，跟主題無關，固定用一個飽和度夠的玫瑰紅，淺色/深色模式都維持清楚對比 */ .cart-badge { background-color: #e0447e !important; } .app-container.dark-mode .cart-badge { border-color: var(--bg-primary); } /* 同一個問題其實不只角標：--macaron-pink-dark／--macaron-yellow-dark／--myship-orange-dark 這幾個變數的深色模式版本都是特意調亮、給「淺色文字疊在深色卡片上」用的，但同一個變數在別的地方是拿來當「白字疊上去的實心底色」（按鈕、聊天泡泡角標、滑動刪除鈕），這兩種用法互相衝突——深色模式下背景變太淺、白字幾乎看不見。不動共用變數本身（改了會連帶影響原本正常的淺色文字用法），只針對這些「白字+實心底色」的按鈕/角標個別覆寫深色模式底色 */ .app-container.dark-mode .nav-chat-bubble-overlay, .app-container.dark-mode .unread-badge, .app-container.dark-mode .action-btn.delete-btn { background-color: #e0447e !important; } /* 深色模式底部導覽要維持清楚的奶茶高對比，不讓五個圖示沉進深色背景。 */ .app-container.dark-mode .app-nav { background-color: #211b17; border-top-color: #69584c; } .app-container.dark-mode .nav-item { color: #a8998c; opacity: 1; } .app-container.dark-mode .nav-svg-icon, .app-container.dark-mode .nav-raised-btn svg { stroke: #a8998c !important; color: #a8998c !important; } .app-container.dark-mode .nav-label { color: #e5d4c4; } .app-container.dark-mode .nav-item.active { color: #ffd0aa; } .app-container.dark-mode .nav-item.active .nav-svg-icon, .app-container.dark-mode .nav-item-raised.active .nav-raised-btn svg { stroke: #ffd0aa !important; color: #ffd0aa !important; } .app-container.dark-mode .nav-item.active .nav-label { color: #ffd0aa; } .app-container.dark-mode .nav-raised-btn, .app-container.dark-mode .nav-item-raised.active .nav-raised-btn { background-color: #c8906c; border-color: #edc4a2; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35); } .app-container.dark-mode .nav-raised-btn svg, .app-container.dark-mode .nav-item-raised.active .nav-raised-btn svg { color: #2b1f18 !important; stroke: #2b1f18 !important; } /* 意見回報按鈕不需要跟角標/刪除鈕一樣搶眼，改用跟其他深色模式卡片一致的中性配色 */ .app-container.dark-mode #btn-submit-support-feedback, body.dark-mode #btn-submit-support-feedback { background-color: var(--bg-card) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } .app-container.dark-mode .btn-chat-send, body.dark-mode .btn-chat-send { background-color: #c9860f !important; } /* 收藏愛心按鈕的圓形底色原本寫死接近純白，深色模式下在暗色卡片上會顯得過亮刺眼；購物車按鈕已經移到資訊欄用 var(--macaron-yellow-lightest) 當底色，這個變數本身就有深色模式定義會自動變暗，不需要再額外覆寫 */ .app-container.dark-mode .btn-favorite-toggle, .app-container.dark-mode .btn-unfavorite-product, body.dark-mode .btn-favorite-toggle, body.dark-mode .btn-unfavorite-product { background-color: rgba(38, 33, 28, 0.85) !important; } /* 各彈窗標題列（使用條款/回報已成交/通知中心/編輯商品）原本用行內樣式寫死一個暖白色，深色模式下沒有跟著變暗，用 class 選擇器 + !important 一次覆蓋所有用到這個 class 的彈窗，之後新增的彈窗只要沿用這個 class 也會自動套用，不用每個彈窗個別修。這些彈窗在 HTML 結構上是的直屬子層、不在 .app-container 裡面，只寫 .app-container.dark-mode 前綴永遠不會命中，一定要同時有 body.dark-mode 版本 */ .app-container.dark-mode .line-modal-header, body.dark-mode .line-modal-header { background-color: var(--modal-body-bg) !important; } /* 賣場搜尋家長卡片的追蹤/取消追蹤按鈕、以及幾個功能相近的次要按鈕（回報已成交/通知中心「取消/全部已讀」、聊天室貼上賣貨便連結）原本都寫死接近純白底色，深色模式下在暗色卡片上同樣過亮 */ .app-container.dark-mode .btn-toggle-follow-seller, .app-container.dark-mode #btn-sold-cancel, .app-container.dark-mode #btn-notification-read-all, .app-container.dark-mode #btn-chat-create-myship, .app-container.dark-mode #btn-chat-create-family, body.dark-mode .btn-toggle-follow-seller, body.dark-mode #btn-sold-cancel, body.dark-mode #btn-notification-read-all, body.dark-mode #btn-chat-create-myship, body.dark-mode #btn-chat-create-family { background-color: var(--bg-card) !important; } .app-container.dark-mode #btn-chat-paste-myship, body.dark-mode #btn-chat-paste-myship { background-color: #a8632a !important; border-color: #a8632a !important; color: white !important; } /* Unfollow Button in Followed Sellers */ .app-container.dark-mode .btn-secondary { background-color: var(--bg-card) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } .app-container.dark-mode .btn-secondary:hover { background-color: var(--macaron-yellow-lightest) !important; } /* --- Sales Dashboard & Confetti Animations --- */ /* Time filter button style */ .time-filter-btn { border: none; background: none; font-size: 0.75rem; padding: 3px 8px; border-radius: 20px; cursor: pointer; color: #482d1b; font-weight: bold; font-family: inherit; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); outline: none; } .time-filter-btn.active { background: #482d1b !important; color: #fffdf5 !important; box-shadow: 0 2px 5px rgba(72,45,27,0.15); } /* Edit product card button */ .btn-mark-sold-product { background: none; border: none; font-size: 1rem; cursor: pointer; padding: 4px; position: absolute; bottom: 8px; right: 92px; /* Positioned to the left of bump button, so it no longer overlaps it */ opacity: 0.7; transition: var(--transition-smooth); } .btn-mark-sold-product:hover { opacity: 1; transform: scale(1.1); } /* Dark Mode adaptation for Dashboard */ .app-container.dark-mode .seller-dashboard-card { background: linear-gradient(135deg, #2d1a12 0%, #1e110b 100%) !important; border-color: #5a3c29 !important; box-shadow: 0 6px 16px rgba(0,0,0,0.3) !important; } .app-container.dark-mode .seller-dashboard-card span, .app-container.dark-mode .seller-dashboard-card #dashboard-total-sales { color: #f5ebe0 !important; } .app-container.dark-mode .seller-dashboard-card #dashboard-total-sales { text-shadow: 1px 1px 0px #1e110b !important; } .app-container.dark-mode .seller-dashboard-card #dashboard-motivation-text { color: #fbbf24 !important; } .app-container.dark-mode .dashboard-time-filters { background: rgba(255,255,255,0.08) !important; } .app-container.dark-mode .time-filter-btn { color: #c5a894 !important; } .app-container.dark-mode .time-filter-btn.active { background: #5a3c29 !important; color: #fffdf5 !important; } /* 進度條軌道跟成交紀錄卡片底色原本都是寫死的淺色（rgba(72,45,27,0.08) 和 rgba(255,255,255,0.5)），淺色模式下沒問題，但深色模式完全沒被蓋掉：軌道幾乎全透明變成看不見，只剩橘粉漸層的一小截進度像顆孤立的紅點；成交紀錄卡片則變成一塊刺眼的灰白色塊。這裡分別補上深色模式該有的底色。 */ .app-container.dark-mode .dashboard-progress-track { background: rgba(255,255,255,0.12) !important; } .app-container.dark-mode #sales-records-summary { background: rgba(0,0,0,0.22) !important; border-color: #5a3c29 !important; } /* 成交紀錄每一列左滑露出「重新上架／刪除」按鈕 */ .sales-record-actions { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding-right: 6px; } .sales-record-action-btn { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: white; } .sales-record-action-relist { background: var(--macaron-blue-dark, #6b9ac4); } .sales-record-action-edit-price { background: var(--accent-strong, #8b644d); } .sales-record-action-delete { background: #ef4444; } .sales-record-content { transform: translateX(0); transition: transform 0.2s ease; touch-action: pan-y; } /* 每列現在至少會有「修改金額／刪除」兩顆按鈕（不像重新上架只在還能復原時才出現），基準改成 2 顆按鈕的滑出距離；還能重新上架時是 3 顆按鈕，滑出距離要再多留一顆的寬度。每多一顆按鈕的間距（按鈕 32px + gap 6px = 38px）跟原本兩種距離之間的差值一致，沿用同一套算法往下延伸。 */ .sales-record-item.swiped-open .sales-record-content { transform: translateX(-114px); } .sales-record-item:has(.sales-record-action-relist).swiped-open .sales-record-content { transform: translateX(-152px); } .app-container.dark-mode .sales-record-content { background: rgba(0,0,0,0.22) !important; } /* Confetti celebratory elements */ .confetti-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 100010; overflow: hidden; } .confetti-piece { position: absolute; width: 8px; height: 16px; background: #ffd700; opacity: 0; border-radius: 2px; animation: confetti-fall 2.5s ease-out forwards; } @keyframes confetti-fall { 0% { transform: translateY(-50px) rotate(0deg); opacity: 1; } 100% { transform: translateY(105dvh) rotate(720deg); opacity: 0; } } /* Skeleton Screen Shimmer Styles */ .skeleton-card { background-color: var(--bg-card); border-radius: var(--border-radius-lg); border: 2px solid var(--border-color); padding: 10px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; } .skeleton-shimmer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%); animation: skeletonShimmerAnimation 1.5s infinite; } @keyframes skeletonShimmerAnimation { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .skeleton-image { width: 100%; height: 100px; background-color: var(--border-color); border-radius: var(--border-radius-md); opacity: 0.6; } .skeleton-title { width: 70%; height: 14px; background-color: var(--border-color); border-radius: var(--border-radius-sm); opacity: 0.6; } .skeleton-price { width: 40%; height: 12px; background-color: var(--border-color); border-radius: var(--border-radius-sm); opacity: 0.6; } /* 登入流程：保留品牌感，同時避免小螢幕被鍵盤或安全區遮住。 */ #register-welcome-modal.login-welcome-modal { min-height: 100dvh; height: 100dvh !important; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; background: radial-gradient(circle at 18% 12%, rgba(255, 225, 220, 0.82), transparent 34%), radial-gradient(circle at 84% 88%, rgba(222, 238, 246, 0.9), transparent 40%), var(--macaron-blue) !important; } #register-welcome-modal .login-card-panel { width: min(100%, 390px) !important; max-width: 390px !important; max-height: calc(100dvh - 40px); overflow-y: auto !important; -webkit-overflow-scrolling: touch; animation: login-card-enter 260ms cubic-bezier(.2, .85, .32, 1) both; } #register-welcome-modal .login-auth-button, #register-welcome-modal #btn-reg-complete { transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease, filter 160ms ease !important; } #register-welcome-modal .login-auth-button:hover, #register-welcome-modal #btn-reg-complete:hover { transform: translateY(-1px); filter: brightness(1.03); } #register-welcome-modal .login-auth-button:active, #register-welcome-modal #btn-reg-complete:active { transform: translateY(1px) scale(.99); } #register-welcome-modal .login-auth-button:disabled, #register-welcome-modal #btn-reg-complete:disabled { cursor: wait !important; opacity: .68; transform: none; } @keyframes login-card-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { #register-welcome-modal .login-card-panel { animation: none; } #register-welcome-modal .login-auth-button, #register-welcome-modal #btn-reg-complete { transition: none !important; } } /* 行動版頂部列：圖示維持精緻，但實際可點範圍要符合單手操作。 44px 是 iOS 與 Android 都舒服的最小觸控目標；縮小外側留白後，不會犧牲搜尋欄的可用寬度。 */ .app-header { padding: 0 10px !important; gap: 6px !important; } .app-header .cart-btn-premium, .app-header .settings-btn-premium, .app-header #btn-toggle-filter { width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px; padding: 0 !important; flex: 0 0 44px; } .app-header .header-actions { gap: 4px !important; } .app-header .search-input-wrapper { min-width: 0; min-height: 44px; padding: 6px 8px !important; } /* 搜尋中優先保留文字可讀寬度。分類、通知、購物車都可在結束輸入後立即使用，但不應在輸入關鍵字時把搜尋欄壓成只看得到幾個字。 */ .app-header.search-input-active #btn-toggle-market-sidebar, .app-header.search-input-active .header-actions { display: none !important; } #app-search-input { min-width: 0; font-size: 16px !important; } /* 排序是主要篩選操作，不應比手指可舒服點按的範圍小。 */ #market-sort-select { min-height: 44px; padding: 8px 28px 8px 10px !important; font-size: 14px !important; } /* 商品數量是排序列的主要回饋資訊；略微加大即可提高掃讀性，不把它做成搶走商品內容注意力的大標題。 */ .market-sort-bar { font-size: 14px !important; line-height: 1.35; } #market-product-count { font-size: 1.08em; }