/* ============================================================ KKnote V2 — Base Styles Source: 01-layout.html base rules ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 14px; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* Scrollbar */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 2px; } /* Links */ a { color: var(--primary); text-decoration: none; } /* 内联文字链接约定：不用浏览器默认下划线 观感来源 = 编辑页 .linked-item-title（document-edit.css，附说明：下划线夹在图标 与文字之间，观感像没套样式的裸链接）。现上提为全局 .lnk-plain，供文档列表的 分类链接 / 整页打开链接、以及其它需要「文字即链接」的位置复用。 hover = 主题色 + 浅底；padding 用负 margin 抵消，不撑开行高。 */ .lnk-plain { color: inherit; text-decoration: none; border-radius: 4px; padding: 1px 4px; margin: -1px -4px; transition: color var(--dur), background var(--dur); } .lnk-plain:hover { color: var(--primary); background: var(--primary-sub); text-decoration: none; } .lnk-plain:focus-visible { outline: 1px solid var(--primary); outline-offset: 2px; } /* Form elements */ input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; } /* 自定义复选框（原生框换皮，全站统一观感） 使用处：文档卡片勾选 .card-check（document.css）、导入导出面板 .io-rev / .io-exact。 只负责外观，尺寸/显隐仍由各使用方自己的类控制。 */ input[type="checkbox"].kk-check { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; border: 1.5px solid var(--border-md); border-radius: 4px; background-color: var(--bg-card); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; transition: background-color var(--dur), border-color var(--dur); } input[type="checkbox"].kk-check:hover { border-color: var(--primary); } input[type="checkbox"].kk-check:checked { background-color: var(--primary-fill); /* 实底状态：描边必须跟 --primary-fill，否则深底 + 亮描边会露接缝。 hover / focus-visible（第 94、102 行）仍是未填充态，继续用 --primary。 */ border-color: var(--primary-fill); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.4l3 3 6.2-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } input[type="checkbox"].kk-check:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* Utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ===== 跨页共享组件 ===== 上提判据见 V1+/tools/css_struct_scan.py 判据①：同选择器 + 逐字同声明，却因两个页面 各写一份而「改一处只生效一半」。 选本文件而非 layout.css 的原因：base.css 是全站唯一被**每一个**页面加载的样式表 —— 包括不走 layout.php 的三个独立认证页（auth/login.php、auth/install.php、 auth/install_server.php 只引 tokens + base + auth），放 layout.css 会漏掉这三页。 同类先例：本文件顶部 .lnk-plain（原在 document-edit.css，为跨页复用而上提）。 */ /* 页内切换 Tab —— 原 starred.css:31-69 与 trash.css:21-59 逐字各写一份。 两页互斥加载（starred 只引 starred.css、trash 只引 trash.css），改一份另一份不动； trash.css 当年已注明「不直接引入 starred.css」的顾虑（starred 的 .page-title / .page-sub / .empty-state 与本页值冲突）—— 上提 .tabs/.tab 本身才是既共享又不牵连的解。 */ .tabs { display: flex; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 2px; margin-bottom: 16px; width: fit-content; } .tab { padding: 6px 14px; border-radius: 6px; border: none; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--dur); display: flex; align-items: center; gap: 5px; } .tab:hover { color: var(--text); } .tab.active { background: var(--primary-sub); color: var(--primary); } .tab i { font-size: 13px; } /* 密码可见性（眼睛）按钮 —— 原 auth.css:120-137 与 settings.css:159-183 各一份。 5 个使用页（settings、auth 的 password/login/install/install_server）分属两套页面 CSS（auth 系 4 页引 auth.css、settings 引 settings.css），唯一公共点即本文件。 */ .pwd-wrap { position: relative; } .pwd-wrap .finput { padding-right: 36px; } .pwd-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 2px; transition: color var(--dur); } .pwd-eye:hover { color: var(--text); } /* 表单焦点环 —— 原 auth.css:112 / settings.css:125 / document.css:519 / document-edit.css:462 四份同值。.ftextarea 虽只有 settings 在用，仍一并上提： 焦点环是一个值，留一份在 settings 就等于下一个改环的人仍要改两处 —— 那正是判据① 要消掉的形态。本文件另有 input/textarea/select/button 的通用基元（第 62-66 行）， 表单基元放这里与之一致。 抽屉内的同值规则在 drawer-doc.css:228（#drawerContent .finput:focus）：带 id 前缀、 优先级更高且随后加载，不受本处影响 ⇒ 抽屉作用域仍归抽屉自己。 */ .finput:focus, .fselect:focus, .ftextarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } /* 语言切换下拉 —— 原只在 layout.css:367-386（顶栏用）。 登录页 auth/login.php 的 .lang-bar 里也是同一个