/* 手帐(Journal)主题 —— 打样，仅作用于的页面。 * 做法:作用域内重定义 style.css 的 design token(奶油纸/棕墨/马克笔色), * 叠加点阵纸背景、Mac 系统手写字体、和纸胶带 + 便签卡(signature)。 * 纯 CSS,不改任何 HTML 结构;未引入本文件的页面不受影响。 */ /* 1) 作用域覆盖 token —— 奶油纸 + 蜜桃橙 + 薄荷绿 */ .theme-journal { --bg: #FBF7EE; --surface: #FFFDF7; --surface-2: #F4EEDF; --border: #E5DBC8; --text: #4A4038; --text-soft: #7A6E60; --muted: #7B7060; --primary: #E08D6E; --primary-dark: #C9704F; --primary-soft: #F6E0D3; --accent: #7FB2A0; --accent-soft: #DCEBE2; --radius: 14px; --radius-sm: 10px; --hand: "Hannotate SC", "HanziPen SC", "Yuanti SC", "Kaiti SC", "STKaiti", "Chalkboard SE", "Songti SC", "STSong", serif; } /* 2) 点阵纸背景(bullet journal 点阵) */ .theme-journal { background-color: var(--bg); background-image: radial-gradient(rgba(122,110,96,.16) 1.3px, transparent 1.3px); background-size: 22px 22px; } /* 3) 手写字体:标题 / 品牌 / 数据大字 / 标签 */ .theme-journal .brand, .theme-journal .page-head h1, .theme-journal .section > h2, .theme-journal .section > .row > h2, .theme-journal .section > .row > .ledger-head > h2, .theme-journal .stat .value, .theme-journal .uc-name, .theme-journal h3 { font-family: var(--hand); } .theme-journal .page-head h1 { font-size: 30px; letter-spacing: .01em; } .theme-journal .stat .value small { font-family: -apple-system, "PingFang SC", sans-serif; } .theme-journal .section > h2::before, .theme-journal .section > .row > h2::before, .theme-journal .section > .row > .ledger-head > h2::before { background: var(--primary); border-radius: 2px; } /* 4) 顶栏:手写品牌,柔和 */ .theme-journal .brand { color: var(--primary-dark); font-size: 19px; } .theme-journal .brand .dot { color: var(--accent); } .theme-journal .nav a.active { border-radius: 9px; } /* 5) 统计块:便签纸感 */ .theme-journal .stat { border-radius: var(--radius); box-shadow: 2px 3px 0 rgba(74,64,56,.05), 0 6px 16px rgba(74,64,56,.05); } /* 6) ★ signature:房源便签 + 和纸胶带 */ .theme-journal .unit-card { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 2px 3px 0 rgba(74,64,56,.06), 0 7px 18px rgba(74,64,56,.06); overflow: visible; transition: transform .14s, box-shadow .14s; } /* 和纸胶带:半透明色带斜贴左上角 */ .theme-journal .unit-card::before { content: ''; position: absolute; top: -9px; left: 20px; width: 62px; height: 19px; background: rgba(224,141,110,.34); border-left: 1px solid rgba(224,141,110,.12); border-right: 1px solid rgba(224,141,110,.12); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0,0,0,.04); } /* 轻微倾斜的拼贴感,hover 扶正 */ .theme-journal .grid > .unit-card:nth-child(odd) { transform: rotate(-.55deg); } .theme-journal .grid > .unit-card:nth-child(even) { transform: rotate(.55deg); } .theme-journal .unit-card:hover { transform: rotate(0) translateY(-3px); box-shadow: 2px 3px 0 rgba(74,64,56,.06), 0 12px 26px rgba(74,64,56,.12); } .theme-journal .uc-name { font-size: 16.5px; } .theme-journal .progress { height: 9px; background: #EFE7D6; border-radius: 99px; } .theme-journal .progress > i { background: var(--primary); border-radius: 99px; } /* 7) 状态:手写马克笔贴纸 */ .theme-journal .badge { font-family: var(--hand); font-weight: 600; font-size: 13px; border-radius: 8px; padding: 3px 11px; transform: rotate(-1.5deg); display: inline-block; } .theme-journal .badge.planning { background: #F6D48B; color: #6E5410; } .theme-journal .badge.vacant { background: #E8E4DA; color: #6b6355; } .theme-journal .badge.renovating { background: #F4A98A; color: #7a3319; } .theme-journal .badge.design { background: #A9CCE3; color: #274d66; } .theme-journal .badge.construction { background: #F4A98A; color: #7a3319; } .theme-journal .badge.finishing { background: #E8A0B0; color: #73303f; } .theme-journal .badge.renting { background: #A8D5BA; color: #285c3d; } .theme-journal .badge.done { background: #C9B8E0; color: #533b7a; } /* 8) 登录页:翻开的手帐扉页 —— 奶油点阵 + 便签登录卡 + 胶带 */ .theme-journal .login-wrap { background: #FBF7EE; background-image: radial-gradient(rgba(122,110,96,.16) 1.3px, transparent 1.3px); background-size: 22px 22px; } .theme-journal .login-card { border-radius: 16px; border: 1px solid var(--border); position: relative; transform: rotate(-1deg); box-shadow: 3px 4px 0 rgba(74,64,56,.07), 0 12px 32px rgba(74,64,56,.12); } .theme-journal .login-card::before { content: ''; position: absolute; top: -13px; left: 50%; width: 116px; height: 26px; background: rgba(127,178,160,.38); transform: translateX(-50%) rotate(-3deg); box-shadow: 0 1px 2px rgba(0,0,0,.05); } .theme-journal .login-card h1 { font-family: var(--hand); color: var(--primary-dark); font-size: 24px; } .theme-journal .login-card .btn.primary { border-radius: 10px; } /* 9) 全站组件手帐化(index/login 之外的页面) */ /* 卡片:便签纸感 */ .theme-journal .card { box-shadow: 2px 3px 0 rgba(74,64,56,.05), 0 6px 16px rgba(74,64,56,.05); } .theme-journal .card h3, .theme-journal .modal h3 { font-family: var(--hand); } /* 表格:表头奶油手写,行 hover 柔和 */ .theme-journal .table-wrap { border-radius: var(--radius); } /* 表头手写体没有真正的粗体字重，font-weight:700 合成加粗几乎无效——用描边(text-stroke)把笔画加粗，效果稳定 */ .theme-journal table.data th { font-family: var(--hand); font-size: 14.5px; font-weight: 700; -webkit-text-stroke: .4px currentColor; } .theme-journal table.data tr:hover td { background: #fdf8ee; } /* 手写小标签 */ .theme-journal .tag { font-family: var(--hand); border-radius: 8px; } /* 可编辑便签块:暖纸条 */ .theme-journal .edit-block { border-radius: 10px; background: #fffdf6; } .theme-journal .edit-block:hover { border-color: var(--primary); } /* 流程时间线:马克笔圆点 + 手写小标题 */ .theme-journal .timeline .tl-dot { font-family: var(--hand); } .theme-journal .timeline li.done .tl-dot { background: var(--accent); } .theme-journal .timeline .tl-title { font-family: var(--hand); font-size: 16px; } /* 阶段勾选名称手写 */ .theme-journal .stage-row .st-name { font-family: var(--hand); font-size: 15px; } /* 模态:纸感圆角 */ .theme-journal .modal { border-radius: var(--radius); } /* 悬浮新增按钮（前期学习 / 案例）:手写贴纸 */ .theme-journal .fab { font-family: var(--hand); border-radius: 14px; } /* 导航下拉菜单圆角 */ .theme-journal .nav-menu { border-radius: 10px; } /* 甘特条 / 统计条沿用主色 token,自动变蜜桃橙 */ .theme-journal .g-bar.construction { background: #F4A98A; } .theme-journal .g-bar.done, .theme-journal .g-bar.renting { background: #A8D5BA; } /* 10) 可访问性:文字链接用达标深色(WCAG 4.5:1),主色/薄荷仅作背景不作文字 */ .theme-journal .g-name a { color: #A8522C; }