/* ux/note-card.css — overlay + 主题变量（仅作用于分享卡片） */ /* === 主题变量（给 canvas 取色用） === */ :root{ --card-accent:#29f50e; /* 主题主色 */ --card-fg:#dfffd8; /* 正文色 */ --card-bg:#000000; /* 背景色 */ } /* 主题映射：NoteCard.open 内会在 上写 data-card-theme */ :root[data-card-theme="green"] { --card-accent:#29f50e; --card-fg:#dfffd8; --card-bg:#000; } :root[data-card-theme="red"] { --card-accent:#ff4d4d; --card-fg:#ffecec; --card-bg:#000; } :root[data-card-theme="orange"] { --card-accent:#ffa42b; --card-fg:#fff1dd; --card-bg:#000; } :root[data-card-theme="blue"] { --card-accent:#4db7ff; --card-fg:#e6f6ff; --card-bg:#000; } :root[data-card-theme="gold"] { --card-accent:#ffd84d; --card-fg:#fff9e0; --card-bg:#000; } :root[data-card-theme="whale"] { --card-accent:#1aa2a2; --card-fg:#cde9e9; --card-bg:#081316; } /* 新增：rose 主题（light rose 配色） */ /* rose：浅粉色系（亮底） */ :root[data-card-theme="rose"] { --card-accent:#ff7aa2; --card-fg:#5b2b3b; --card-bg:#fff5f7; } /* === Overlay 容器 === */ .card-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.72); display: grid; place-items: center; z-index: 9999; backdrop-filter: blur(2px); } .card-modal{ width: min(92vw, 820px); background: #0b0b0b; border: 1px dashed #2e7d32; border-radius: 6px; box-shadow: 0 0 18px rgba(60,223,1,.25); padding: 14px; display: flex; flex-direction: column; gap: 12px; color: var(--card-fg); } .card-toolbar{ display:flex; align-items:center; gap:12px; } .card-toolbar .spacer{ flex:1; } /* 预览区（canvas 自适应预览） */ .card-canvas-wrap{ display:flex; justify-content:center; align-items:center; overflow:auto; max-height: 78vh; padding:10px; } .card-canvas-wrap canvas{ width: min(100%, 680px); height: auto; } /* 主题小圆点 */ .card-toolbar .theme-swatches{ display:flex; gap:8px; align-items:center; margin-right:8px; } .theme-swatch{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(255,255,255,.25); box-shadow:0 0 0 2px rgba(0,0,0,.35) inset; cursor:pointer; opacity:.9; } .theme-swatch.is-active{ outline:2px solid var(--card-accent); } .theme-swatch[data-t="green"] { background:#29f50e; } .theme-swatch[data-t="red"] { background:#ff4d4d; } .theme-swatch[data-t="orange"] { background:#ffa42b; } .theme-swatch[data-t="blue"] { background:#4db7ff; } .theme-swatch[data-t="gold"] { background:#ffd84d; } .theme-swatch[data-t="whale"] { background:#1aa2a2; } .theme-swatch[data-t="rose"] { background:#ff7aa2; } /* 可选：打印/动效约束，避免干扰 */ @media (prefers-reduced-motion: reduce){ .card-overlay *{ animation:none !important; transition:none !important; } } @media print{ .card-overlay{ display:none !important; } } /* note-card — quote theme (light rose) */ .note-card.theme-quote-rose{ --rose-0:#fff5f5; --rose-1:#ffe4e6; --rose-2:#fecdd3; --rose-3:#fda4af; --rose-4:#fb7185; --rose-5:#f43f5e; --rose-6:#e11d48; --rose-7:#be123c; --rose-8:#9f1239; --rose-9:#881337; --ink:#5b2b3b; /* 深玫瑰墨色 */ --bg: #fff5f7; /* 浅粉亮底 */ --fg: #5b2b3b; /* 主文色（深玫瑰）*/ --grid: rgba(244,143,177,.10); /* 浅粉网格 */ --rule: rgba(244, 63, 94, .35); /* 玫瑰分隔线 */ --sub: rgba(91, 43, 59, .75); /* 次要文字 */ background: var(--bg); color: var(--fg); position: relative; overflow: hidden; /* 仅 rose：方形卡片版式 */ aspect-ratio: 1 / 1; width: min(100%, 680px); display: grid; grid-template-rows: auto 1fr auto; } .note-card.theme-quote-rose .nc-head, .note-card.theme-quote-rose .nc-foot{ border: 1px dashed var(--rule); padding: 12px 16px; display: flex; align-items:center; justify-content:space-between; margin: 8px 8px 0; border-radius: 4px; } .note-card.theme-quote-rose .nc-foot{ margin: 0 8px 8px; } .note-card.theme-quote-rose .nc-body{ position: relative; margin: 12px 8px; padding: 24px 20px 48px; min-height: 180px; /* 黄金分割垂直布局：上 0.382fr · 内容(眉题/正文) · 下 0.618fr */ display: grid; grid-template-rows: var(--rose-top-fr, .382fr) auto auto var(--rose-bottom-fr, .618fr); row-gap: 10px; /* 数字雨/抽象竖线 */ background-image: linear-gradient(to bottom, rgba(255,214,220,.06) 0 60%, transparent 60% 100%), linear-gradient(to right, var(--grid) 1px, transparent 1px); background-size: 2px 12px, 28px 28px; background-position: 0 0, -6px -6px; border: 1px dashed var(--rule); border-radius: 4px; } .note-card.theme-quote-rose .nc-icon-dot{ width:28px;height:28px;display:grid;place-items:center; border:1px solid var(--rule); border-radius:4px; font-size:18px; line-height:1; color:var(--sub); } .note-card.theme-quote-rose .nc-date{ font-variant-numeric: tabular-nums; letter-spacing:.06em; color: var(--sub); } .note-card.theme-quote-rose .nc-eyebrow{ /* 标题：保持与原主题一致的字号，不做放大/缩小 */ font-size: clamp(18px, 3.2vw, 28px); font-weight: 700; color: var(--sub); margin: 6px 0 18px; text-align: left; /* 统一左对齐 */ } .note-card.theme-quote-rose .nc-quote{ /* 正文：上限 56，仅 rose */ font-size: clamp(32px, 6.6vw, 56px); line-height: 1.25; color: var(--fg); font-weight: 700; /* 加粗正文（仅 rose） */ text-shadow: 0 0 1px rgba(255,255,255,.06); text-align: left; white-space: pre-wrap; /* 允许空白行与空格换行 */ margin-block: 0; /* 由网格行负责垂直位置 */ } /* 金句：仅保留前置引号，隐藏末尾引号（仅 rose） */ .note-card.theme-quote-rose .nc-quote .nc-quote-mark:last-child{ display:none; } /* 前引号更夸张、更硬朗（仅 rose 的前引号） */ .note-card.theme-quote-rose .nc-quote .nc-quote-mark:first-child{ font-size: 1.35em; /* 放大一些 */ font-weight: 900; /* 更强壮 */ font-family: "Courier New", monospace; /* 更方正的字形 */ line-height: 0.9; /* 紧凑以贴合文本基线 */ margin-right: .1em; letter-spacing: 0; text-shadow: none; /* 去掉柔和阴影，显硬朗 */ } .note-card.theme-quote-rose .nc-quote-mark{ color: var(--rose-3); margin: 0 .15em; font-weight: 700; } .note-card.theme-quote-rose .nc-watermark{ position: absolute; right: 16px; bottom: 16px; font-size: 28px; opacity: .25; filter: grayscale(1); pointer-events: none; user-select: none; } .note-card.theme-quote-rose .nc-brand, .note-card.theme-quote-rose .nc-author{ font-family: Georgia, "Times New Roman", serif; color: var(--sub); letter-spacing:.02em; }