MoeSkin是由萌娘百科团队于2022年推出的全新wiki外观。
这次更新皮肤的计划旨在使页面布局陈旧的萌娘百科与时俱进，在保证美观的同时更替到最新的网页设计技术以及规范。
它将在之后作为萌娘百科主站的默认皮肤。不过
由萌娘百科开发的猛男专属响应式MediaWiki皮肤☆
由 MoeSkin 定义的会对用户界面造成影响的系统讯息。
| 语法示例 |
|---|
* 页面名称 * 页面名称|显示名称 * |无链接的按钮 * 这样做链接依旧会显示内容| * 一级菜单 ** 这是二级菜单 ** 将作为一级菜单 ** 的下拉菜单 *** 从2.2.0开始，子节点可以无限套娃 **** 但是建议保持在三级以内 * |以下是特殊用法，仅在children内有意义 ** <li class="my-class-name" title="Hello, world" data-accesskey="x">将以上DOM属性传递到链接上（注意：只有部分属性会被传递）</li> ** <li data-raw>该LI元素所有内容被解析为HTML后，直接嵌入下拉菜单</li> |
用于置顶公告和运营活动
MediaWiki:Moeskin-sitenotice / MediaWiki:Moeskin-anonnotice
MediaWiki:Moeskin-footer-copyright
MediaWiki:Gadget-moeskin-styles.css MediaWiki:Moeskin.css（不推荐使用）
MoeSkin 采用 CSS3 原生的 CSS变量 在全局根元素（:root）上定义了皮肤所使用了调色板，您可以通过修改全局CSS变量轻松定义主题配色。
| 预设调色板 |
|---|
:root {
--theme-accent-color: rgb(142, 212, 149);
--theme-accent-color--rgb: 142, 212, 149;
--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-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(218, 218, 218);
--theme-text-shadow-color: rgb(85, 124, 88);
--theme-button-color: rgb(37, 180, 73);
--theme-button-color--hover: #2bd155;
--theme-button-color--active: #219e40;
--theme-card-background-color: rgba(255, 255, 255);
--theme-card-background-color--rgb: 255, 255, 255;
--theme-card-box-shadow: 0 0 .5rem rgba(0, 0, 0, .1);
--theme-card-box-shadow--hover: 0 0 .85rem rgba(0, 0, 0, .2);
--theme-header-background-color: rgb(255, 255, 255);
--theme-header-box-shadow-color: rgb(238, 239, 241);
--theme-footer-top-color: rgb(250, 250, 252);
--theme-footer-bottom-color: #eaeaf3;
--theme-danger-color: rgb(186, 0, 0);
--theme-input-background-color: rgb(245, 245, 245);
--theme-input-border-color: rgb(222, 222, 222);
--theme-input-border-color--hover: #e1e1e1;
}
|
| 预设调色板 |
|---|
/** 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
|