zikai
fa980e74e0
- whiteboard.html 加 <meta name="color-scheme" content="light"> - whiteboard.css 在 :root 钉死 color-scheme: light 与浅色变量， 覆盖 common.css 的 prefers-color-scheme: dark
61 lines
2.5 KiB
CSS
61 lines
2.5 KiB
CSS
/* 记事本页专属样式：全屏 textarea、悬浮工具栏、移动端适配。 */
|
||
/* 强制浅色：本页常被 iframe 嵌入浅色站点，覆盖 common.css 的
|
||
color-scheme: light dark 与 prefers-color-scheme: dark，避免深色背景。 */
|
||
:root {
|
||
--bar-h: 52px;
|
||
color-scheme: light;
|
||
--bg: #f6f7f9;
|
||
--surface: #ffffff;
|
||
--surface-2: rgba(0, 0, 0, 0.02);
|
||
--border: #e0e3e7;
|
||
--text: #1a1a1a;
|
||
--text-dim: #6b7280;
|
||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||
}
|
||
body { overflow: hidden; background: var(--bg); }
|
||
.wb-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
|
||
.wb-bar {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
gap: 0.6em; padding: 0.5em 0.9em;
|
||
background: var(--surface); border-bottom: 1px solid var(--border);
|
||
box-shadow: var(--shadow); min-height: var(--bar-h);
|
||
flex-wrap: wrap;
|
||
}
|
||
.wb-bar-left, .wb-bar-right { display: flex; align-items: center; gap: 0.6em; }
|
||
.wb-title { font-weight: 700; font-size: 1.05em; }
|
||
.wb-id { background: var(--surface-2); padding: 0.15em 0.5em; border-radius: 6px; font-size: 0.82em; color: var(--text-dim); }
|
||
.wb-online { color: var(--success); font-size: 0.7em; }
|
||
.wb-online.off { color: var(--text-dim); }
|
||
.wb-bar .btn { padding: 0.4em 0.9em; font-size: 0.86em; }
|
||
|
||
.wb-stage { position: relative; flex: 1; overflow: hidden; }
|
||
.wb-editor {
|
||
position: absolute; inset: 0;
|
||
width: 100%; height: 100%;
|
||
display: block; resize: none; border: none; outline: none;
|
||
padding: 1em 1.2em;
|
||
font-family: ui-monospace, "SF Mono", Menlo, Consolas, "JetBrains Mono", monospace;
|
||
font-size: 14px; line-height: 1.6;
|
||
background: var(--surface); color: var(--text);
|
||
touch-action: manipulation;
|
||
}
|
||
.wb-editor::placeholder { color: var(--text-dim); }
|
||
.wb-status {
|
||
position: absolute; bottom: 0.8em; left: 50%; transform: translateX(-50%);
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
padding: 0.3em 0.9em; border-radius: 16px; font-size: 0.8em;
|
||
color: var(--text-dim); box-shadow: var(--shadow);
|
||
opacity: 0; transition: opacity 0.3s; pointer-events: none;
|
||
}
|
||
.wb-status.show { opacity: 1; }
|
||
.wb-status.err { color: var(--danger); border-color: var(--danger-soft); }
|
||
|
||
/* 移动端：工具栏紧凑、按钮变大易触 */
|
||
@media (max-width: 640px) {
|
||
.wb-bar { padding: 0.4em 0.5em; gap: 0.4em; }
|
||
.wb-id { max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.wb-bar .btn { padding: 0.45em 0.7em; }
|
||
.wb-title { display: none; }
|
||
.wb-editor { font-size: 15px; padding: 0.8em; }
|
||
}
|