Adminer cPanel 设计主题：让数据库管理界面融入 Jupiter 控制面板

数据库数据库客户端后端【免费下载链接】adminerDatabase management in a single PHP file项目地址https://gitcode.com/gh_mirrors/ad/adminer点击查看免费下载导读本文围绕 Adminer 仓库自带的 cPanel 设计主题展开它通过一套仿照 cPanel 默认 Jupiter 主题的样式表让托管服务商在 cPanel 的「Databases」分组中嵌入 Adminer 时界面观感与 cPanel 原生工具保持一致。读完本文你将掌握 cPanel 主题的设计令牌design tokens体系、卡片式布局与表单控件的覆盖逻辑以及 Adminer 主题系统如何识别、校验并加载这套主题。cPanel 主题的说明文档位于 designs/cpanel/README.md完整样式实现位于 designs/cpanel/adminer.css是仓库designs/目录下 20 余个官方设计之一。它不引入任何 JavaScript只通过 CSS 变量覆盖与组件级规则实现视觉迁移。cPanel 主题的定位为托管服务商提供原生观感Adminer 的核心卖点是单个 PHP 文件搞定数据库管理。当托管服务商把 Adminer 与 cPanel 内的其他数据库工具并列提供给用户时最直观的问题就是界面风格和 cPanel 原生工具不一致会让用户感到外来。cPanel 主题正是为此而生——文档原文README明确定义了它的目标模仿 JupiterJupiter 是 cPanel 的默认主题本设计力求让从 cPanel「Databases」分组打开的 Adminer 不再显得突兀直接取色颜色、字体、卡片、按钮和表单控件均取自随 cPanel 11.136 一起分发的 Jupiter 样式表styles/preload_styles.css中的令牌以及cpanel/jupiter-styles中的 Bootstrap 5 组件仅浅色与 cPanel 默认行为一致本主题只提供浅色外观不包含adminer-dark.css深色变体。这个定位与 designs/README.md 中描述的设计规范完全吻合每个设计以/* Adminer design name */注释开头注释名须与目录名一致本主题即/* Adminer design cpanel */Adminer 会连同校验和checksum一起使用该标记用于提示当前使用的设计版本与当前 Adminer 版本不匹配。安装与启用一行复制即可根据 designs/README.md 的通用规则使用 cPanel 主题只需把adminer.css复制到 Adminer 的 PHP 脚本旁将 designs/cpanel/adminer.css 复制到 Adminer 脚本如adminer.php所在目录命名为adminer.css浅色模式本主题不含adminer-dark.css刷新页面Adminer 会在static/default.css之后自动加载该文件加载顺序见下文与 Adminer 主题系统的集成。如果想在多个设计之间切换可以改用官方插件 plugins/designs.php或直接使用 designs.php 入口文件它会扫描designs/*/*.css并在导航区渲染一个设计下拉框把选中的设计路径存入$_SESSION[design]。设计令牌从 Jupiter 到 CSS 变量的映射cPanel 主题的精髓在html根元素上定义的一组自定义属性CSS 变量每条注释都标注了它在 cPanel 11.136 Jupiter 样式表里的对应令牌。下表完整列出了这套映射来源designs/cpanel/adminer.css变量默认值对应 Jupiter 令牌 / 来源--cp-page#fafafa--cp-body-bg页面底色--cp-surface#fff--cp-component-bg卡片表面--cp-fg#243746--cp-body-color、--cp-gray-900前景文本--cp-muted#6d7983--cp-gray-600次要文本--cp-border#c3c7cc--cp-border-color、--cp-gray-300--cp-border-light#e5e7e9--cp-gray-200--cp-cap#f2f3f4--cp-card-cap-bg卡片头底色--cp-link#003da6--cp-link-color、--cp-primary--cp-link-hover#003185--cp-link-hover-color--cp-accent#de5c2e--cp-accent、--cp-graphic-color--cp-danger#dc3545--cp-danger--cp-alert-error#d03f00css/cpanel_base.css中的.alert-danger--cp-alert-error-bg#f2dede.alert-danger背景--cp-alert-success#83b655.alert-success--cp-alert-success-bg#dff2d5.alert-success背景--cp-radius.25rem--cp-border-radius--cp-focus0 0 0 .25rem rgba(0, 61, 166, .25)--cp-focus-ring-color--cp-shadow0 .125rem .25rem rgba(0, 0, 0, .075).card-raised--cp-stripcalc(2em 10px)计算值default.css的2em加#menu外边距用于对齐两张卡片头紧接着样式表把 Jupiter 令牌桥接到 Adminer 默认样式使用的四个核心变量--bg: var(--cp-surface); --fg: var(--cp-fg); --dim: var(--cp-cap); --lit: var(--cp-border-light);这一层桥接非常关键Adminer 的基础样式 adminer/static/default.css 整体基于--bg / --fg / --dim / --lit四个变量构建html { --bg: #fff; --fg: #000; --dim: #eee; --lit: #ddf; }主题只需重写这四者即可让默认样式的大多数规则自动跟随新配色之后再针对卡片、按钮等组件做局部定制。卡片式布局把页面改造成两张 Bootstrap 卡片Jupiter 是典型的卡片化界面cPanel 主题在布局层面把 Adminer 的两大区块——左侧导航#menu和右侧内容#content——渲染成两张带阴影的 Bootstrap 风格卡片#menu, #content { background: var(--cp-surface); border: 1px solid var(--cp-border-light); border-radius: .125rem; box-shadow: var(--cp-shadow); } #menu { margin: 10px 0 0 10px; } #content { margin: var(--cp-strip) 20px 20px 21em; padding: 0 1rem 1rem; }细节上它精确复刻了 Jupiter 的组件观感卡片头.card-headerh1, h2采用.25rem圆角顶部、--cp-cap底色、1.25rem/600 字重与卡片主体用--cp-border-light分隔顶栏对齐--cp-strip这个变量专门用来撑起顶栏高度让面包屑#breadcrumb垂直居中于.logout和#lang同时保证#content卡片头与左侧#menu卡片头对齐页脚贴边.footer { margin-right: -1rem; }抵消卡片内边距让页脚内容铺满卡片底部。表单控件与按钮复刻 Bootstrap 5 组件Jupiter 的输入控件来自 Bootstrap 5cPanel 主题逐条覆盖了 Adminer 的表单元素input, select, textarea { border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: .25rem .5rem; } input:focus, select:focus, textarea:focus, [contenteditable].jush:focus { border-color: var(--cp-link); outline: 0; box-shadow: var(--cp-focus); } input:disabled, select:disabled, textarea:disabled { background: var(--cp-border-light); }有几处值得注意的实现细节复选框、单选与文件输入保留border: 0; padding: 0;避免圆角边框破坏原生控件外观[contenteditable].jushSQL 输入区的可编辑pre边框由 static/jush/jush.css 提供同样获得圆角与聚焦环保证 SQL 编辑器与表单观感统一由于default.css中.size、.type、.options的固定宽度是border-box盒模型主题用calc(7ex .75rem)、calc(15ex .75rem)、calc(20ex .75rem)补偿新增的内边距避免输入内容被吃掉。按钮部分实现 Jupiter 的.btn体系并用实心.btn-primary突出默认动作input[typesubmit], input[typebutton], button:not(.icon):not(.link) { padding: .25rem .75rem; border-color: var(--cp-link); background: var(--cp-surface); color: var(--cp-link); cursor: pointer; } input.default { background: var(--cp-link); color: var(--cp-surface); } input.default:hover { background: var(--cp-link-hover); border-color: var(--cp-link-hover); }图标按钮.icon也从default.css的海军蓝/红色系切换为 cPanel 的蓝色--cp-link悬停时变为强调色--cp-accent#de5c2e 橙禁用态统一置灰并显示cursor: not-allowed且规则写在状态规则之后确保禁用按钮永远不会点亮。提示框Alert错误与成功的语义色Adminer 用.error和.message两个类渲染错误与成功提示。cPanel 主题把它们映射为 Jupiter 的.alert-danger与.alert-success注意注释说明Jupiter 的 alert 带 41px 内嵌 box-shadow 图标本主题不引入图标.error, .message { color: var(--cp-fg); border: 1px solid; border-radius: .125rem; } .error, #menu p.error { border-color: var(--cp-alert-error); background: var(--cp-alert-error-bg); } .message, #menu p.message { border-color: var(--cp-alert-success); background: var(--cp-alert-success-bg); }其中针对#menu p.error / #menu p.message的特设规则是有原因的default.css中#menu p, #logins, #tables { border-bottom: 1px solid #ccc; }的分隔线会压过 alert 的边框导致提示框底部缺一条边因此需要补上margin: .8em 1em; padding: .5em .8em;独立修正。响应式与 RTL兼顾移动端与阿拉伯语系主题在media all and (max-width: 800px)下做了专门的移动端适配此时#menu浮动在内容之上卡片的细微阴影不足以区分层级因此改用更强的0 0 20px -3px rgba(0, 0, 0, .3)投影#menuopen菜单开关按钮被拉伸到整条顶栏高度并垂直居中与面包屑排在同一水平线上。右到左RTL支持也相当完整.rtl #content { margin: var(--cp-strip) 21em 20px 20px; }镜像左右边距、.rtl .logout { left: 20px; right: auto; }镜像登出按钮位置。注释还指出一个容易踩的坑.rtl规则不在媒体查询内因此在移动端需要额外的.rtl #content { margin-right: 10px; }和.rtl #menu { margin: 9px 0 0; }来清除侧栏留白。与 Adminer 主题系统的集成加载、识别与校验cPanel 主题之所以复制即生效依赖 Adminer 内置的主题加载机制其核心在 adminer/include/design.inc.php加载顺序page_header()先输出static/default.css基础样式再通过adminer()-css()获取设计样式并逐一输出link relstylesheet同时根据设计是 light/dark/两者皆备输出对应的media属性与color-scheme元信息名称标记每个设计文件首行必须是/* Adminer design name */。design_checksums()用正则~^/\* Adminer design ([-\w]) \*/~提取名称official_design_checksums()则扫描../designs/*/*.css生成官方设计清单离线校验如 docs/developing.md 所述由于所有设计都叫adminer.css/adminer-dark.css只能靠首行注释区分身份Adminer 会对用到的设计与官方清单逐一计算 crc32 校验和完全离线比对用于提示设计版本与当前 Adminer 版本不匹配编译版由 compile.php 内联校验和开发版现场计算。以 cPanel 主题为例其首行/* Adminer design cpanel */满足命名规范且作为仅浅色设计css()返回light模式Adminer 不会为其附加暗色媒体查询。局限与自定义建议使用 cPanel 主题前需要了解以下几点仅浅色不提供adminer-dark.css跟随 cPanel 的默认浅色行为若浏览器处于深色偏好Adminer 会按design.inc.php的逻辑输出static/dark.css作为兜底两套样式叠加效果需自行测试依赖 Jupiter 版本取色针对 cPanel 11.136 的样式令牌若面板升级后 Jupiter 令牌变更配色可能不再完全同步可对照上文的映射表自行更新--cp-*变量自定义入口如需微调建议只改--cp-*变量块designs/cpanel/adminer.cssdefault.css的其余规则会自动跟随--bg/--fg/--dim/--lit桥接生效作为新设计的模板这套令牌映射 组件覆盖 RTL/响应式兜底的写法与仓库中 designs/nette、designs/rmsoft 等主题结构一致是编写 Adminer 新设计时值得参考的范本。赞分享数据库数据库客户端后端【免费下载链接】adminerDatabase management in a single PHP file项目地址https://gitcode.com/gh_mirrors/ad/adminer点击查看免费下载相关推荐OBS Studio多窗口布局主界面与控制面板设计OBS Studio多窗口布局主界面与控制面板设计 你是否曾在直播或录制时被复杂的界面布局搞得手忙脚乱是否希望像专业主播一样高效管理场景、控制音频和监控性能音视频直播屏幕录制桌面应用视频Adminer轻量级数据库管理工具全面解析Adminer轻量级数据库管理工具全面解析 Adminer是一个用PHP编写的全功能数据库管理工具以其轻量级、单文件部署和强大的多数据库支持而著称。作为一个数据库数据库客户端后端H2数据库控制台完全教程Web界面管理你的数据库H2数据库控制台完全教程Web界面管理你的数据库 H2数据库是一款轻量级的嵌入式关系数据库管理系统完全用Java编写。它最强大的功能之一就是内置的Web控制数据库关系型数据库嵌入式数据库上一篇LizzieYzy三步打造你的专业围棋AI复盘助手免费开源快速上手下一篇免费围棋AI分析工具LizzieYzy三步打造你的职业级复盘助手创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考