/* ============ THEME: 暖纸手账 (warm paper journal) ============ */ /* 需要在 index.html 引入字体： */ body[data-theme="warmpaper"] { --bg: #f4ead7; --card: #fbf5e8; --primary: #c2683f; --primary-light: #f4e2d3; --primary-dark: #a04e29; --accent: #6f7a4e; --accent-light: #e7e6cf; --success: #6f8a52; --success-light: #e7eed8; --text: #3a2e23; --text-secondary: #6f6353; --text-muted: #a8927c; --border: rgba(58, 46, 35, 0.18); --danger: #b0463a; --radius: 14px; --shadow: 0 4px 14px rgba(58, 40, 20, 0.08); --shadow-lg: 0 14px 34px rgba(58, 40, 20, 0.14); --font-stack: 'Noto Serif SC', serif; } /* paper background with faint ruled lines */ body[data-theme="warmpaper"] { background-color: #f4ead7; background-image: repeating-linear-gradient(180deg, transparent 0, transparent 33px, rgba(58, 46, 35, 0.045) 34px), radial-gradient(120% 80% at 50% 0%, rgba(194, 104, 63, 0.07), transparent 60%); } /* ---- auth ---- */ body[data-theme="warmpaper"] .auth-title { font-family: 'Noto Serif SC', serif; color: #c2683f; } body[data-theme="warmpaper"] .auth-form .auth-input { background: #fbf5e8; } /* ---- header ---- */ body[data-theme="warmpaper"] .header { background: rgba(251, 245, 232, 0.85); border-bottom: 1px dashed rgba(58, 46, 35, 0.28); backdrop-filter: none; } body[data-theme="warmpaper"] .header h1 { font-family: 'Noto Serif SC', serif; font-weight: 700; color: #c2683f; } body[data-theme="warmpaper"] .header .subtitle { font-family: 'Space Mono', monospace; font-size: 11px; } body[data-theme="warmpaper"] .streak-badge { background: transparent; color: #c2683f; border: 1.5px solid #c2683f; border-radius: 50px; font-family: 'Space Mono', monospace; } /* ---- hero card -> cream note with washi tape ---- */ body[data-theme="warmpaper"] .hero-card { background: #fbf5e8; color: #3a2e23; border: 1px solid #e7d6ba; border-radius: 18px; box-shadow: 0 4px 14px rgba(58, 40, 20, 0.06); } body[data-theme="warmpaper"] .hero-card::after { display: none; } body[data-theme="warmpaper"] .hero-card::before { content: ''; position: absolute; top: -9px; left: 24px; width: 96px; height: 18px; background: rgba(194, 104, 63, 0.22); transform: rotate(-2deg); } body[data-theme="warmpaper"] .hero-name { font-family: 'Ma Shan Zheng', cursive; font-weight: 400; font-size: 20px; } body[data-theme="warmpaper"] .hero-rank-chip { background: #f4e2d3; color: #c2683f; border-color: transparent; } body[data-theme="warmpaper"] .hero-sub { color: #6f6353; } body[data-theme="warmpaper"] .hero-stat { background: #f6ecda; border: 1px solid #e7d6ba; } body[data-theme="warmpaper"] .hero-stat strong { color: #c2683f; } body[data-theme="warmpaper"] .hero-stat span { color: #8a7a68; } body[data-theme="warmpaper"] .xp-track { background: #f6ecda; border: 1px solid #e7d6ba; } body[data-theme="warmpaper"] .xp-meta { color: #8a7a68; opacity: 1; font-family: 'Space Mono', monospace; } body[data-theme="warmpaper"] .xp-bar { background: rgba(58, 46, 35, 0.1); } body[data-theme="warmpaper"] .xp-bar-fill { background: #c2683f; box-shadow: none; } body[data-theme="warmpaper"] .xp-bar-fill::after { display: none; } /* ---- quote -> bordered note ---- */ body[data-theme="warmpaper"] .quote-card { background: transparent; color: #4a3c2e; border-left: 3px solid #c2683f; border-radius: 0; padding: 6px 0 6px 14px; box-shadow: none; } body[data-theme="warmpaper"] .quote-card::before { display: none; } body[data-theme="warmpaper"] .quote-text { font-family: 'Ma Shan Zheng', cursive; font-size: 17px; line-height: 1.6; } body[data-theme="warmpaper"] .quote-author { font-family: 'Space Mono', monospace; color: #a8927c; opacity: 1; } /* ---- generic cards ---- */ body[data-theme="warmpaper"] .card, body[data-theme="warmpaper"] .quest-card, body[data-theme="warmpaper"] .chart-container, body[data-theme="warmpaper"] .profile-card, body[data-theme="warmpaper"] .stat-card, body[data-theme="warmpaper"] .badge-tile, body[data-theme="warmpaper"] .badge-summary { background: #fbf5e8; border: 1px solid #ecdcc2; } /* ---- progress ring ---- */ body[data-theme="warmpaper"] .progress-ring-fill { stroke: #c2683f; } body[data-theme="warmpaper"] .progress-center { color: #c2683f; } /* ---- quests ---- */ body[data-theme="warmpaper"] .quest-row { background: #f6ecda; border: 1px dashed rgba(58, 46, 35, 0.22); } body[data-theme="warmpaper"] .quest-check { background: #fff; border-color: #c2683f; } body[data-theme="warmpaper"] .quest-row.done .quest-check { background: #c2683f; border-color: #c2683f; } /* ---- entry inputs ---- */ body[data-theme="warmpaper"] .entry-input { background: #f6ecda; } body[data-theme="warmpaper"] .entry-input:focus { background: #fff; border-color: #c2683f; } body[data-theme="warmpaper"] .entry-number { background: #f4e2d3; color: #c2683f; } body[data-theme="warmpaper"] .entry-number.filled { background: #c2683f; color: #fff; } body[data-theme="warmpaper"] .entry-add-btn { border-style: dashed; border-color: #d8b89a; color: #b58a6f; } body[data-theme="warmpaper"] .entry-add-btn:hover { border-color: #c2683f; color: #c2683f; background: #f4e2d3; } /* ---- buttons ---- */ body[data-theme="warmpaper"] .save-btn, body[data-theme="warmpaper"] .auth-btn, body[data-theme="warmpaper"] .modal-btn, body[data-theme="warmpaper"] .dream-add-btn { background: #c2683f; box-shadow: 0 6px 16px rgba(194, 104, 63, 0.22); } body[data-theme="warmpaper"] .share-action { background: transparent !important; color: #c2683f; border: 1.5px solid #c2683f; box-shadow: none; } /* ---- tab bar ---- */ body[data-theme="warmpaper"] .tab-bar { background: #f0e4cf; border-top: 1px dashed rgba(58, 46, 35, 0.25); } body[data-theme="warmpaper"] .tab-item { color: #a8927c; } body[data-theme="warmpaper"] .tab-item.active { color: #c2683f; } /* ---- jar / stats ---- */ body[data-theme="warmpaper"] .jar-card { background: linear-gradient(145deg, #c2683f, #a04e29); } body[data-theme="warmpaper"] .stat-value { color: #c2683f; } /* ============ SHARE CARD (same DOM, paper restyle) ============ */ body[data-theme="warmpaper"] .share-card { background-color: #f4ead7; color: #3a2e23; background-image: repeating-linear-gradient(180deg, transparent 0, transparent 33px, rgba(58, 46, 35, 0.05) 34px); font-family: 'Noto Serif SC', serif; border: 1px solid #e2d2b6; } body[data-theme="warmpaper"] .share-card-header h2 { color: #c2683f; font-weight: 700; } body[data-theme="warmpaper"] .share-card-header p { font-family: 'Space Mono', monospace; color: #8a7a68; opacity: 1; } body[data-theme="warmpaper"] .share-card-stats { justify-content: space-between; gap: 0; border-top: 1px dashed rgba(58, 46, 35, 0.28); border-bottom: 1px dashed rgba(58, 46, 35, 0.28); padding: 14px 0; margin: 16px 0; } body[data-theme="warmpaper"] .share-card-stat { flex: 1; } body[data-theme="warmpaper"] .share-card-stat .val { color: #c2683f; font-weight: 700; } body[data-theme="warmpaper"] .share-card-stat .lbl { font-family: 'Space Mono', monospace; color: #8a7a68; opacity: 1; } body[data-theme="warmpaper"] .share-card-entries { background: transparent; padding: 0; backdrop-filter: none; } body[data-theme="warmpaper"] .share-card-entry { padding: 12px 0; align-items: center; } body[data-theme="warmpaper"] .share-card-entry + .share-card-entry { border-top: 1px dashed rgba(58, 46, 35, 0.2); } body[data-theme="warmpaper"] .share-card-num { background: transparent; color: #c2683f; border: 1.5px solid #c2683f; border-radius: 5px; width: 22px; height: 22px; } body[data-theme="warmpaper"] .share-card-text { font-size: 14px; } body[data-theme="warmpaper"] .share-card-tag { background: transparent; color: #a8927c; font-family: 'Space Mono', monospace; padding: 0; } body[data-theme="warmpaper"] .share-card-tag::before { content: '「'; } body[data-theme="warmpaper"] .share-card-tag::after { content: '」'; } body[data-theme="warmpaper"] .share-card-qr { background: #fff; border: 1.5px dashed #e0b48f; border-radius: 16px; } body[data-theme="warmpaper"] .share-qr-img { border-radius: 6px; } body[data-theme="warmpaper"] .share-qr-label { font-family: 'Ma Shan Zheng', cursive; font-size: 17px; color: #c2683f; } body[data-theme="warmpaper"] .share-qr-url { color: #8a7a68; opacity: 1; } body[data-theme="warmpaper"] .share-card-footer { font-family: 'Space Mono', monospace; } body[data-theme="warmpaper"] .share-card-footer .streak { color: #8a7a68; font-weight: 400; font-size: 12px; } body[data-theme="warmpaper"] .share-card-footer .brand { color: #8a7a68; opacity: 1; font-size: 11px; }