/* * shared.css — 上學趣 * 所有頁面共用：CSS 變數、主題、字型、基礎重置 * 使用方式：在每個 HTML 的 加入 * * * 主題切換由 shared.js 的 applyTheme() 負責， * 它會動態覆寫 :root 上的 --blue / --blue-dk / --blue-lt / --bg。 */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Noto+Sans+TC:wght@400;500;700;900&family=Noto+Serif+TC:wght@400;700;900&display=swap'); /* ── 預設主題（藍天） ── */ :root { /* 主色 — 可被 applyTheme() 覆寫 */ --blue: #4a90d9; --blue-dk: #2d6fa8; --blue-lt: #e8f4fd; --bg: #eef5fc; /* 固定色 — 不隨主題變動 */ --green: #52c97a; --green-dk: #389959; --orange: #ff8c42; --red: #e84444; --yellow: #ffd54f; --text: #1e2d3d; --muted: #7a99b5; --white: #ffffff; --border: #d4e8f8; /* 間距 & 陰影 */ --radius: 22px; --radius-sm: 13px; --shadow: 0 6px 28px rgba(44,100,160,.13); --shadow-lg: 0 12px 48px rgba(44,100,160,.2); --grad-btn: linear-gradient(135deg, var(--blue), var(--blue-dk)); } /* ── 基礎重置 ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } body { font-family: 'Nunito', 'Noto Sans TC', sans-serif; background: var(--bg); color: var(--text); transition: background .3s; } /* ── 動畫 ── */ @keyframes popIn { 0%{opacity:0;transform:scale(.88) translateY(10px)} 100%{opacity:1;transform:scale(1) translateY(0)} } /* ── 彈窗 overlay ── */ .overlay { position:fixed; inset:0; background:rgba(18,32,46,.5); backdrop-filter:blur(4px); z-index:200; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s; } .overlay.show { opacity:1; pointer-events:all; } .overlay-box { background:white; border-radius:var(--radius); padding:28px 24px; max-width:300px; width:90%; text-align:center; box-shadow:var(--shadow-lg); animation:popIn .3s both; } .overlay-icon { font-size:2.2rem; margin-bottom:9px; } .overlay-title { font-size:1.02rem; font-weight:900; color:var(--text); margin-bottom:5px; } .overlay-sub { font-size:.82rem; color:var(--muted); font-weight:600; margin-bottom:18px; } .overlay-btns { display:flex; gap:9px; } .overlay-btns button { flex:1; padding:11px; border:none; border-radius:11px; font-family:'Nunito','Noto Sans TC',sans-serif; font-weight:800; font-size:.9rem; cursor:pointer; transition:all .15s; } .btn-cancel { background:#f1f5f9; color:var(--muted); } .btn-confirm { background:linear-gradient(135deg,var(--red),#c0392b); color:white; } .btn-cancel:active,.btn-confirm:active { transform:scale(.96); } /* ── 個人資料畫面（index.html screen-profile，跨頁共用） ── */ #screen-profile { background:var(--bg); } .profile-topbar { display:flex; align-items:center; gap:10px; padding:14px 18px; background:white; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; } .profile-body { padding:20px 18px; max-width:480px; margin:0 auto; } .avatar-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:8px; } .avatar-btn { font-size:2rem; border:3px solid transparent; border-radius:14px; background:white; cursor:pointer; padding:8px; transition:all .18s; line-height:1; aspect-ratio:1; } .avatar-btn.selected { border-color:var(--blue); background:var(--blue-lt); transform:scale(1.1); box-shadow:0 0 0 3px rgba(74,144,217,.15); } .level-card { background:linear-gradient(135deg,var(--blue),var(--blue-dk)); border-radius:16px; padding:20px; color:white; display:flex; align-items:center; gap:16px; margin-bottom:16px; box-shadow:0 6px 20px rgba(44,111,168,.3); } .level-icon { font-size:3rem; line-height:1; } .level-info { flex:1; } .level-title { font-size:1.2rem; font-weight:900; margin-bottom:2px; } .level-sub { font-size:.8rem; opacity:.85; font-weight:600; } .level-progress { height:10px; background:rgba(255,255,255,.25); border-radius:20px; overflow:hidden; margin-top:10px; } .level-progress-fill { height:100%; background:white; border-radius:20px; transition:width .6s; } .achievement-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; } .achievement-item { background:white; border-radius:14px; padding:14px; border:1.5px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:6px; box-shadow:var(--shadow); } .achievement-icon { font-size:1.8rem; } .achievement-num { font-size:1.6rem; font-weight:900; color:var(--blue-dk); line-height:1; } .achievement-lbl { font-size:.72rem; font-weight:700; color:var(--muted); text-align:center; } .profile-card { background:white; border-radius:14px; padding:18px; border:1.5px solid var(--border); box-shadow:var(--shadow); margin-bottom:16px; } .profile-card-title { font-size:.82rem; font-weight:800; color:var(--muted); margin-bottom:12px; letter-spacing:.5px; } .profile-input { width:100%; border:2px solid var(--border); border-radius:10px; padding:11px 14px; font-size:1rem; font-family:inherit; outline:none; transition:border-color .2s; color:var(--text); background:var(--bg); } .profile-input:focus { border-color:var(--blue); background:white; } .btn-profile-save { width:100%; padding:13px; border:none; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--blue-dk)); color:white; font-size:1rem; font-weight:800; cursor:pointer; font-family:'Nunito','Noto Sans TC',sans-serif; transition:all .15s; box-shadow:0 4px 12px rgba(44,111,168,.3); margin-top:4px; } .btn-profile-save:active { transform:scale(.97); } .btn-back-profile { background:var(--blue-lt); border:none; border-radius:14px; padding:9px 18px; font-size:.95rem; font-weight:900; color:var(--blue-dk); cursor:pointer; transition:all .15s; font-family:'Nunito','Noto Sans TC',sans-serif; } .btn-back-profile:active { transform:scale(.95); } .logout-row { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:white; border-top:1px solid var(--border); margin-top:8px; } .btn-logout-profile { background:#fff0f0; color:var(--red); border:none; border-radius:11px; padding:10px 20px; font-size:.9rem; font-weight:800; cursor:pointer; font-family:'Nunito','Noto Sans TC',sans-serif; transition:all .15s; } .btn-logout-profile:active { transform:scale(.95); } .btn-primary { font-family: 'Nunito', 'Noto Sans TC', sans-serif; font-weight: 800; font-size: 1.05rem; background: var(--grad-btn); color: white; border: none; cursor: pointer; padding: 14px 28px; border-radius: var(--radius-sm); width: 100%; transition: transform .15s, box-shadow .15s; box-shadow: 0 4px 16px rgba(45,111,168,.30); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(45,111,168,.40); } .btn-primary:active { transform: scale(.97); } /* ── Toast 通知（用 id 避免與頁面專屬 CSS 的 class 衝突） ── */ #toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1e2d3d; color: white; padding: 11px 22px; border-radius: 30px; font-size: .92rem; font-weight: 700; opacity: 0; transition: opacity .28s, transform .28s; pointer-events: none; z-index: 9999; white-space: nowrap; max-width: 90vw; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── 畫面滑入切換動畫 ── */ .screen { position: absolute; inset: 0; overflow-y: auto; transition: transform .38s cubic-bezier(.77,0,.175,1), opacity .38s ease; will-change: transform, opacity; } .screen.active { transform: translateX(0); opacity: 1; pointer-events: all; } .screen.right { transform: translateX(100%); opacity: .3; pointer-events: none; } .screen.left { transform: translateX(-100%); opacity: .3; pointer-events: none; } .app { position: relative; width: 100vw; height: 100vh; overflow: hidden; } /* ════════════════════════════════════════ 學習系統共用元件 所有子項目（國字、數學、閱讀…）統一使用 ════════════════════════════════════════ */ /* ── 載入中遮罩 ── */ .loading-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: linear-gradient(160deg, #1a3a5c, #2d6fa8, #4a90d9); flex-direction: column; align-items: center; justify-content: center; gap: 16px; } .loading-overlay.show { display: flex; } .loading-overlay-icon { font-size: 3rem; } .loading-overlay-text { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.2rem; color: white; } .loading-overlay-spinner { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,.3); border-top-color: white; border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── 狀態系統（new / practiced / mastered） ── */ .status-new { background: var(--blue-lt); color: var(--blue-dk); } .status-practiced { background: #fff8e1; color: #b07800; } .status-mastered { background: #e8f8ee; color: var(--green-dk); } /* ── 學習項目卡（泛用，取代各項目自己的 item card） ── */ .item-card { background: var(--white); border-radius: var(--radius); padding: 20px 12px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; transition: transform .18s, box-shadow .18s; border: 3px solid transparent; position: relative; overflow: hidden; user-select: none; align-self: start; } .item-card:active { transform: scale(.93); } .item-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .item-card.mastered { border-color: var(--green); } .item-card.practiced { border-color: var(--yellow); } .item-card-glyph { font-size: 3.6rem; font-family: 'Noto Serif TC', serif; font-weight: 900; color: var(--text); line-height: 1; } .item-card-label { font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; } .item-card-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: white; font-size: .68rem; font-weight: 900; display: none; align-items: center; justify-content: center; } .item-card.mastered .item-card-check { display: flex; } .item-card-ripple { position: absolute; border-radius: 50%; background: rgba(74,144,217,.25); animation: ripple .5s ease-out forwards; pointer-events: none; } /* ── 學習模式橫幅 ── */ .mode-banner { background: var(--white); padding: 9px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.05); flex-shrink: 0; } .mode-icon { font-size: 1.5rem; } .mode-info-title { font-size: .95rem; font-weight: 900; } .mode-info-sub { font-size: .72rem; color: var(--muted); font-weight: 600; } /* ── 回饋框 ── */ .feedback-box { border-radius: 14px; padding: 13px 14px; font-size: 1rem; font-weight: 800; text-align: center; min-height: 72px; display: flex; align-items: center; justify-content: center; line-height: 1.6; transition: all .3s; border: 3px solid transparent; } .fb-idle { background: var(--blue-lt); color: var(--muted); border-color: #d0e8f8; } .fb-ok { background: #e8f8ee; color: var(--green-dk); border-color: var(--green); } .fb-wrong { background: #fff0f0; color: var(--red); border-color: #ffb3b3; } .fb-praise { background: #fff8e1; color: #8a6200; border-color: var(--yellow); } .fb-big { font-size: 1.15rem; animation: popIn .4s cubic-bezier(.34,1.56,.64,1); } /* ── 結果面板 ── */ .result-panel { display: none; flex-direction: column; align-items: center; gap: 16px; background: var(--white); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); width: 100%; max-width: 600px; } .result-panel.show { display: flex; animation: popIn .4s cubic-bezier(.34,1.56,.64,1); } /* ── 通用動畫 ── */ @keyframes popIn { 0%{transform:scale(.88);opacity:.5} 100%{transform:scale(1);opacity:1} } @keyframes ripple { 0%{transform:scale(0);opacity:1} 100%{transform:scale(4);opacity:0} } @keyframes sparkle { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} } @keyframes flashGreen { 0% { border-color: var(--green); box-shadow: 0 0 0 0 rgba(82,201,122,.7); } 60% { box-shadow: 0 0 0 18px rgba(82,201,122,0); } 100%{ border-color: #c8d8ec; box-shadow: none; } } @keyframes flashRed { 0% { border-color: var(--red); box-shadow: 0 0 0 0 rgba(232,68,68,.7); } 60% { box-shadow: 0 0 0 18px rgba(232,68,68,0); } 100%{ border-color: #c8d8ec; box-shadow: none; } } .flash-green { animation: flashGreen .55s ease forwards; } .flash-red { animation: flashRed .55s ease forwards; } /* ── 進度條 ── */ .progress-track { height: 14px; background: #eef2f8; border-radius: 20px; overflow: hidden; display: flex; } .progress-seg { height: 100%; transition: width .6s cubic-bezier(.34,1.56,.64,1); } .progress-seg.mastered { background: var(--green); } .progress-seg.practiced { background: var(--yellow); } .progress-seg.new { background: #d0e4f5; } .progress-counts { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; } .progress-count-item { display: flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 800; } .progress-count-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* ── 大按鈕（底部動作） ── */ .bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; padding: 10px 16px 16px; background: linear-gradient(to top, rgba(238,245,252,1) 60%, rgba(238,245,252,0)); display: flex; flex-direction: column; gap: 8px; } .btn-big { width: 100%; padding: 16px; border: none; border-radius: 16px; font-family: 'Nunito', 'Noto Sans TC', sans-serif; font-size: 1.15rem; font-weight: 900; cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 5px 18px rgba(0,0,0,.14); } .btn-big:active { transform: scale(.97); } .btn-big-primary { background: linear-gradient(135deg, var(--blue), var(--blue-dk)); color: white; } .btn-big-danger { background: linear-gradient(135deg, #c22, var(--red)); color: white; } .btn-big-icon { font-size: 1.5rem; } /* 浮動小按鈕組（右下角） */ .float-bar { position: fixed; bottom: 20px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .btn-float { border: none; border-radius: 50px; font-family: 'Nunito', 'Noto Sans TC', sans-serif; font-size: .88rem; font-weight: 900; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 8px; padding: 11px 18px; box-shadow: 0 4px 16px rgba(0,0,0,.22); white-space: nowrap; } .btn-float:active { transform: scale(.95); } .btn-float-primary { background: linear-gradient(135deg, var(--blue), var(--blue-dk)); color: white; } .btn-float-danger { background: linear-gradient(135deg, #c22, var(--red)); color: white; } /* 控制按鈕組 */ .btn-ctrl { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 14px; border-radius: 12px; border: none; font-family: 'Nunito', 'Noto Sans TC', sans-serif; font-size: .9rem; font-weight: 800; cursor: pointer; transition: all .15s; } .btn-ctrl:active { transform: scale(.96); } .btn-ctrl-clear { background: #fff3e0; color: var(--orange); } .btn-ctrl-next { background: var(--blue); color: white; } .btn-ctrl-next:disabled { background: #b0c8e8; cursor: not-allowed; opacity: .7; } /* 成績結果卡 */ .score-card { display: none; flex-direction: column; align-items: center; gap: 14px; background: white; border-radius: var(--radius); padding: 24px 20px; box-shadow: var(--shadow-lg); width: 100%; max-width: 500px; animation: popIn .4s cubic-bezier(.34,1.56,.64,1); } .score-card.show { display: flex; } .score-card-icon { font-size: 4rem; } .score-card-title { font-size: 1.4rem; font-weight: 900; text-align: center; } .score-card-detail { font-size: .92rem; font-weight: 700; color: var(--muted); text-align: center; } .score-card-pass { color: var(--green-dk); } .score-card-fail { color: var(--red); } /* 成績格（測驗完成後每個項目的結果） */ .score-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; width: 100%; margin-bottom: 8px; } .score-item { background: white; border-radius: 12px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; box-shadow: 0 2px 10px rgba(44,100,160,.1); border: 2.5px solid transparent; } .score-item.pass { border-color: var(--green); } .score-item.ok { border-color: var(--yellow); } .score-item.fail { border-color: #ffb3b3; } .score-item.skip { border-color: #c8d8ec; opacity: .7; } .score-item-glyph { font-size: 2rem; font-family: 'Noto Serif TC', serif; font-weight: 900; line-height: 1; } .score-item-label { font-size: .65rem; font-weight: 800; padding: 2px 7px; border-radius: 20px; } .label-pass { background: #e8f8ee; color: var(--green-dk); } .label-ok { background: #fff8e1; color: #b07800; } .label-fail { background: #fff0f0; color: var(--red); } .label-skip { background: #f0f4f8; color: var(--muted); } /* 模式選擇大卡 */ .mode-select-btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; width: 100%; } .btn-mode-select { flex: 1; min-width: 140px; max-width: 220px; padding: 22px 16px; border-radius: 20px; border: none; font-family: 'Nunito', 'Noto Sans TC', sans-serif; font-weight: 900; cursor: pointer; transition: all .15s; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--shadow); } .btn-mode-select:active { transform: scale(.95); } .btn-mode-select-icon { font-size: 2.8rem; } .btn-mode-select-title { font-size: 1.2rem; } .btn-mode-select-sub { font-size: .78rem; font-weight: 700; opacity: .75; } .btn-mode-practice { background: linear-gradient(135deg,#e8f4fd,#c8dff5); color: var(--blue-dk); border: 3px solid var(--blue); } .btn-mode-exam { background: linear-gradient(135deg,#fff0e0,#ffd5b0); color: #b05000; border: 3px solid var(--orange); } /* ══════════════════════════════════════ 響應式斷點（共用元件） ══════════════════════════════════════ */ /* 平板（≤ 768px） */ @media (max-width: 768px) { :root { --radius: 18px; --radius-sm: 11px; } .overlay-box { max-width: 280px; padding: 24px 20px; } } /* 手機（≤ 480px） */ @media (max-width: 480px) { :root { --radius: 14px; --radius-sm: 9px; } /* 學習卡字體流體縮放 */ .item-card-glyph { font-size: clamp(2.2rem, 9vw, 3.6rem); } /* 頭像格：5 欄 → 4 欄 */ .avatar-grid { grid-template-columns: repeat(4, 1fr); } /* 底部按鈕列 */ .bottom-bar { padding: 8px 12px 12px; } .btn-big { padding: 13px; font-size: 1rem; } /* 模式選擇大卡 */ .btn-mode-select { padding: 16px 12px; min-width: 110px; } .btn-mode-select-icon { font-size: 2.2rem; } .btn-mode-select-title { font-size: 1rem; } /* 成績格字體 */ .score-item-glyph { font-size: 1.6rem; } .exam-score-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; } } /* 極窄手機（≤ 360px） */ @media (max-width: 360px) { .item-card-glyph { font-size: 2rem; } .btn-big { padding: 11px; font-size: .92rem; } .btn-mode-select { padding: 14px 10px; min-width: 100px; } }