Adminer adminer-border 设计详解：恢复行复选框与重复操作链接单元格的边框与背景

数据库数据库客户端后端【免费下载链接】adminerDatabase management in a single PHP file项目地址https://gitcode.com/gh_mirrors/ad/adminer点击查看免费下载本指南以 Adminer 官方设计目录中的 adminer-border 说明文档 为核心结合 adminer-border/adminer.css 的完整实现与 default.css、design.inc.php 等底层源码讲解该设计解决的问题、逐条规则的含义、安装方式与版本校验机制。读完本文你将理解 Adminer 6.0.0 前后表格 hover 单元格外观差异的来龙去脉并掌握如何在自己的 Adminer 部署中启用、验证乃至仿写这类「仅做局部修补、不改配色」的轻量设计。一、这个设计解决什么问题adminer-border是一个只包含 16 行 CSS 的官方设计其核心作用是把表格中承载「重复出现的操作链接」和「行复选框」的单元格即td.hover重新放回表格内——让它们与普通单元格拥有相同的边框和背景而不是看起来像悬在表格外部。按照 designs/adminer-border/README.md 的说明该设计不改变任何颜色浅色light与深色dark两种配色模式都继续沿用 Adminer 内置的默认配色它只是把边框宽度与背景重新对齐到相邻单元格。README 还明确提到这就是 Adminer 6.0.0 之前管理界面的默认外观。换句话说adminer-border是一个「怀旧/还原型」设计——它不是换肤而是把 Adminer 6.0.0 引入的视觉改版中一处容易引起困惑的细节恢复成旧版观感。二、为什么需要它6.0.0 之后 hover 单元格「游离于表格之外」要理解adminer-border的价值先要明白默认主题default.css在 6.0.0 之后做了什么。默认样式中针对.hover单元格的规则位于 adminer/static/default.csstbody tr:hover td, tbody tr:hover th { background: var(--dim); } td.hover, tr:hover td.hover, .js .checkable .checked td.hover { background-color: var(--bg); border-bottom-width: 0; } td.hover:first-child { border-inline-start-width: 0; } td.hover:last-child { border-inline-end-width: 0; } table :first-child :first-child td.hover { border-top-width: 0; }对比同一文件中普通单元格的边框定义default.csstd, th { border-width: 0; border-block-end-width: 1px; border-inline-end-width: 1px; padding: .2em .3em; margin: 0; } td:first-child, th:first-child { border-inline-start-width: 1px; } table :first-child :first-child td, table :first-child :first-child th { border-top-width: 1px; }可以清晰看到新默认主题对.hover单元格的四条边框宽度全部清零border-bottom-width: 0、border-inline-start-width: 0、border-inline-end-width: 0、border-top-width: 0并赋予background-color: var(--bg)页面底色。于是这些单元格看起来不再被表格边框包围如同「贴在表格外面的独立元素」——这正是adminer-border要修复的现象。.hover单元格在源码中的真实用途td.hover并不是抽象概念它在 Adminer 的多处界面中实际承担交互职责db.inc.php数据库列表页的「全选」复选框与每行的表/视图复选框select.inc.php数据浏览页的行级复选框带sticky定位processlist.inc.php进程列表的 kill 复选框privileges.inc.php用户权限列表的 Edit 链接adminer.inc.phpSQL 历史等处的 Edit 链接以及左侧导航中的选中项。这些单元格共同点在于它们是「每行重复出现」的操作入口链接或勾选框。新版默认主题刻意弱化其边框感而adminer-border则把它们重新「画回」表格栅格之中。三、adminer-border 的完整实现逐条解析设计主体是单文件 designs/adminer-border/adminer.css全文如下含文件头注释/* Adminer design adminer-border */ /* Restore the border and background of the cells with the repeated links and row checkboxes. */ td.hover, tr:hover td.hover, .js .checkable .checked td.hover { border-bottom-width: 1px; } td.hover:first-child { border-inline-start-width: 1px; } td.hover:last-child { border-inline-end-width: 1px; } table :first-child :first-child td.hover { border-top-width: 1px; } tbody td.hover { background-color: transparent; } thead td.hover, thead tr:hover td.hover { background-color: var(--lit); } tbody tr:hover td.hover { background-color: var(--dim); } .js .checkable .checked td.hover { background-color: var(--lit); } media (prefers-color-scheme: dark) { tbody tr:hover td.hover { background-color: #133553; } .js .checkable .checked td.hover { background-color: #1a5178; } .js .checkable .checked:hover td.hover { background-color: #15486c; } }下面逐组说明。1. 边框恢复前 4 条规则td.hover, tr:hover td.hover, .js .checkable .checked td.hover { border-bottom-width: 1px; } td.hover:first-child { border-inline-start-width: 1px; } td.hover:last-child { border-inline-end-width: 1px; } table :first-child :first-child td.hover { border-top-width: 1px; }这四条与默认主题中清空边框的四条规则一一对应把边框宽度从0恢复为1px第一条覆盖td.hover的三种状态——静态、整行悬停tr:hover td.hover、以及 JavaScript 勾选后.js .checkable .checked td.hover统一恢复下边框。第二、三条td.hover:first-child/:last-child恢复表格第一列/最后一列的左右边框。这里使用border-inline-start-width/border-inline-end-width逻辑属性而非border-left/right与默认主题的注释「logical so that the borders mirror in right-to-left languages」一致保证在阿拉伯语等 RTL 界面中边框也能正确镜像。第四条table :first-child :first-child td.hover选择器命中表格首行的首个分区如thead或tbody中的 hover 单元格恢复顶边框——与默认主题普通单元格的顶边框规则default.css完全对称。2. 背景恢复浅色模式后 4 条规则tbody td.hover { background-color: transparent; } thead td.hover, thead tr:hover td.hover { background-color: var(--lit); } tbody tr:hover td.hover { background-color: var(--dim); } .js .checkable .checked td.hover { background-color: var(--lit); }第一条是「地基」把tbody内 hover 单元格的背景设为transparent这样它们就能自然透出行级悬停tbody tr:hover td { background: var(--dim); }和勾选态的背景无需逐个硬编码颜色第二条表头thead中的 hover 单元格使用var(--lit)与默认主题中表头单元格的背景thead td, thead th { background: var(--lit); }见 default.css保持一致第三条行悬停时使用var(--dim)正是默认主题中普通单元格悬停时的背景色default.css第四条勾选态.js .checkable .checked使用var(--lit)对应默认主题对勾选行的整体处理.js .checkable .checked td { background: var(--lit); }见 default.css。可以看到浅色模式完全没有引入新颜色全部复用默认主题的 CSS 变量。默认主题通过 default.css 的:root定义了--bg: #fff、--dim: #eee、--lit: #ddfadminer-border 只是把这些变量「搬运」到 hover 单元格上。3. 深色模式media query 内的三处覆盖media (prefers-color-scheme: dark) { tbody tr:hover td.hover { background-color: #133553; } .js .checkable .checked td.hover { background-color: #1a5178; } .js .checkable .checked:hover td.hover { background-color: #15486c; } }深色模式通过media (prefers-color-scheme: dark)触发使用三个硬编码色值。将它们与内置深色主题 dark.css 对照可以发现这组颜色正是深色主题的悬停/勾选色系#133553对应 dark.css 中tbody tr:hover td { background: #133553; }dark.css#15486c对应 dark.css 中勾选行再悬停的#15486cdark.css#1a5178用于勾选态 hover 单元格是同一蓝色系中稍亮的一档。也就是说深色模式下这些单元格同样遵循「与周围单元格同一套背景色」的还原原则只是深色主题的变量值--bg: #002240、--dim: #0f3457、--lit: #011d35见 dark.css在语义上与浅色不同因此设计在 media query 中显式写出等价色值而非复用变量。四、如何安装与启用按照 designs/README.md 的通用安装约定将 designs/adminer-border/adminer.css 复制到 Adminer PHP 脚本index.php或编译后的adminer.php同一目录并重命名为adminer.css刷新页面后Adminer 即会自动加载该样式无需改动任何 PHP 配置。该文档同时说明了设计文件命名与模式的约定adminer-border恰好是其中最典型的一种同时支持浅色与深色模式的设计全部写在adminer.css中深色部分放在media (prefers-color-scheme: dark)内——adminer-border正是这样组织的仅支持深色模式的设计应命名为adminer-dark.css每个设计文件必须以/* Adminer design name */注释开头且name必须与所在目录名一致此处即adminer-border。adminer-border属于「单文件同时覆盖双模式」的情形Adminer 会把它作为无模式标记mode 为空的样式无条件加载浅色部分直接生效深色部分交给文件内的 media query 自行切换。五、如何确认设计已生效标记注释与 crc32 校验Adminer 并不是盲目加载任意 CSS 文件它会校验设计的「身份」与「版本匹配」。相关逻辑集中在 adminer/include/design.inc.phpdesign_checksums()design.inc.php检查脚本同目录下是否存在adminer.css/adminer-dark.css用正则~^/\* Adminer design ([-\w]) \*/~读取文件第一行注释中的设计名并计算 crc32 校验和Plugins::checksum()忽略行尾与翻译差异见 plugins.inc.phpofficial_design_checksums()design.inc.php通过glob(../designs/*/*.css)扫描本仓库 designs 目录下所有官方设计同样读取标记注释并计算校验和在 connect.inc.php 的数据库选择页底部会以「Loaded plugins」列表的形式列出当前加载的设计名与文件名若该设计是官方设计但校验和与当前 Adminer 版本不一致还会附上更新提示链接。这套机制保证了即使你从旧版本复制了一份adminer.css过来Adminer 也能识别出它是否与当前版本配套而不是静默地加载一份过时的样式。对adminer-border而言只要你的adminer.css首行是/* Adminer design adminer-border */且内容与官方文件一致页面底部的列表就会显示adminer.css: adminer-border。另外designs/README.md 末尾还提到 plugins/designs.php需要以插件方式引入设计时可以参考该文件。六、小结与扩展思路adminer-border是一个教科书级的「最小干预」设计案例单一职责只恢复td.hover单元格的边框与背景不碰任何其他样式零配色侵入浅色模式完全复用默认主题的--bg/--dim/--lit变量深色模式复用内置深色主题的悬停色值与官方 README 中「Colors are not changed」的描述完全吻合实现对称它的每一条规则都能在 default.css 中找到对应的「清零」规则四条边框逐一还原、三种状态静态/行悬停/勾选逐一覆盖历史价值README 明确指出它是 Adminer 6.0.0 之前的默认外观因此对希望保持旧版表格观感或刚升级到 6.x 的用户这是最直接、成本最低的视觉回归方案。如果你正在自研 Adminer 设计adminer-border的写法也提供了一个可复用的范式通过var(--...)变量引用内置配色、用media (prefers-color-scheme: dark)处理深色模式、以/* Adminer design name */标记注释配合 crc32 校验融入 Adminer 的设计加载与版本检测体系即可写出同样轻量、可维护且可被 Adminer 正确识别的主题文件。赞分享数据库数据库客户端后端【免费下载链接】adminerDatabase management in a single PHP file项目地址https://gitcode.com/gh_mirrors/ad/adminer点击查看免费下载相关推荐Textual 样式详解border-title-background 边框标题背景色Textual 样式详解border title background 边框标题背景色 border title background 是 Textual 框前端UI组件异步编程Voyager Checkbox 表单字段详解单复选框、多复选框与单选按钮的 JSON 配置与底层渲染原理Voyager Checkbox 表单字段详解单复选框、多复选框与单选按钮的 JSON 配置与底层渲染原理 在 VoyagerThe Missing Lar后端CMS上一篇gs-quant FXBinary 实战指南从最小参数到外汇二元期权完整定价下一篇如何轻松获取国家中小学智慧教育平台电子课本这个开源工具给你答案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考