萌娘百科:MoeSkin
（重定向自萌娘百科:Moeskin）
跳到导航
跳到搜索
MoeSkin是由萌娘百科团队于2022年推出的全新wiki外观。
这次更新皮肤的计划旨在使页面布局陈旧的萌娘百科与时俱进，在保证美观的同时更替到最新的网页设计技术以及规范。
它将在之后作为萌娘百科主站的默认皮肤。不过
简介
由萌娘百科开发的猛男专属响应式MediaWiki皮肤☆
- 作者
- 黑卡 (v1 prototype design)
- 波奇 (v2 prototype design)
- 加奈 (v2 UI design)
- 小鱼君 (programming/IXD/UX)
- 萌娘百科 (copyright owner)
兼容性
- Firefox, Chrome, Safari, Opera, Microsoft Edge 以及其他主流浏览器的最新5个版本
- 您需要允许浏览器运行 JavaScript 以使用 MoeSkin
- IE 浏览器不受到萌娘百科官方支持
系统讯息
由 MoeSkin 定义的会对用户界面造成影响的系统讯息。
MediaWiki:Moeskin-topbar
- 全局顶部导航栏，导航链接
| 语法示例 |
|---|
* 页面名称 * 页面名称|显示名称 * |无链接的按钮 * 这样做链接依旧会显示内容| * 一级菜单 ** 这是二级菜单 ** 将作为一级菜单 ** 的下拉菜单 *** 从2.2.0开始，子节点可以无限套娃 **** 但是建议保持在三级以内 * |以下是特殊用法，仅在children内有意义 ** <li class="my-class-name" title="Hello, world" data-accesskey="x">将以上DOM属性传递到链接上（注意：只有部分属性会被传递）</li> ** <li data-raw>该LI元素所有内容被解析为HTML后，直接嵌入下拉菜单</li> |
- 这个系统讯息不支持语言对应的子页面，请直接建立为根页面
- 您可以在显示名称处使用{{int:}}魔术字
MediaWiki:Moeskin-topbanner
- 页顶横幅
用于置顶公告和运营活动
MediaWiki:Moeskin-sitenotice
- 侧边栏公告栏
MediaWiki:Moeskin-sitenotice / MediaWiki:Moeskin-anonnotice
- 全局底部导航栏，上半部分
- 全局底部导航栏，下半部分
MediaWiki:Moeskin-footer-copyright
皮肤样式表
- 仅对MoeSkin生效的全站CSS
MediaWiki:Gadget-moeskin-styles.css MediaWiki:Moeskin.css（不推荐使用）
皮肤脚本
- 仅对MoeSkin生效的全站JS
自定义
自定义主题
MoeSkin 采用 CSS3 原生的 CSS变量 在全局根元素（:root）上定义了皮肤所使用了调色板，您可以通过修改全局CSS变量轻松定义主题配色。
| 预设调色板 |
|---|
:root {
--theme-accent-color: rgb(37, 180, 73);
--theme-accent-color--rgb: 37, 180, 73;
--theme-secondary-color: rgb(24, 127, 245);
--theme-secondary-color--rgb: 24, 127, 245;
--theme-text-color: rgb(44, 62, 80);
--theme-text-color--rgb: 44, 62, 80;
--theme-success-color: rgb(35, 165, 94);
--theme-info-color: rgb(122, 157, 255);
--theme-warn-color: rgb(255, 180, 4);
--theme-danger-color: rgb(255, 114, 114);
--theme-empty-color: rgb(185, 185, 185);
--theme-link-color: rgb(63, 81, 181);
--theme-accent-link-color: rgb(255, 255, 255);
--theme-background-color: rgb(248, 248, 248);
--theme-border-color: rgb(220, 220, 231);
--theme-button-color: rgb(37, 180, 73);
--theme-button-color--hover: #2bd155;
--theme-button-color--active: #219e40;
--theme-card-border-radius: 0.5rem;
--theme-card-background-color: rgba(255, 255, 255);
--theme-card-background-color--rgb: 255, 255, 255;
--theme-card-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
--theme-card-box-shadow--hover: 0 0 0.85rem rgba(0, 0, 0, 0.2);
--theme-card-border-color: rgb(220, 220, 231);
--theme-header-background-color: rgb(255, 255, 255);
--theme-header-box-shadow-color: rgb(220, 220, 231);
--theme-footer-top-color: rgb(251, 251, 252);
--theme-footer-bottom-color: #e7e7ed;
--theme-toolbar-background-color: rgb(225, 240, 230);
--theme-input-background-color: rgb(245, 245, 245);
--theme-input-border-color: rgb(222, 222, 222);
--theme-input-border-color--hover: #e1e1e1;
--theme-list-item-background-color: rgb(255, 255, 255);
--theme-list-item-background-color--hover: rgba(24, 160, 88, 0.16);
}
|
Breakpoints
| 预设调色板 |
|---|
/** Breakpoints */
// Minimum body width
$breakpoint-screen-minimum: 370px
// General smartphones
$breakpoint-screen-small: 576px
// General tablets
$breakpoint-screen-middle: 768px
// Laptops and small desktops
$breakpoint-screen-large: 992px
// Large desktops
$breakpoint-screen-exlarge: 1200px
|