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变量轻松定义主题配色。
| 预设调色板 |
|---|
html.light {
--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(32, 128, 240);
--theme-warn-color: rgb(240, 160, 32);
--theme-danger-color: rgb(208, 48, 80);
--theme-empty-color: rgb(185, 185, 185);
--theme-link-color: rgb(51, 102, 187);
--theme-link-color--hover: rgb(94.7142857143, 138.4285714286, 211.2857142857);
--theme-link-color--visited: rgb(38.25, 76.5, 140.25);
--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: rgb(
42.9950230415,
209.1649769585,
84.8280184332
);
--theme-button-color--active: rgb(32.56, 158.4, 64.24);
--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(220, 220, 231, 0.1);
--theme-card-box-shadow--hover: 0 0 0.85rem rgba(220, 220, 231, 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-header-height: 3.75rem;
--theme-footer-top-color: rgb(251, 251, 252);
--theme-footer-bottom-color: rgb(230.88, 230.88, 236.91);
--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: rgb(225.3, 225.3, 225.3);
--theme-list-item-background-color: rgb(255, 255, 255);
--theme-list-item-background-color--hover: rgba(24, 160, 88, 0.16);
}
html.dark {
--theme-accent-color: rgb(37, 180, 73);
--theme-accent-color--rgb: 37, 180, 73;
--theme-secondary-color: rgb(50, 150, 250);
--theme-secondary-color--rgb: 50, 150, 250;
--theme-text-color: rgb(233, 233, 233);
--theme-text-color--rgb: 233, 233, 233;
--theme-success-color: rgb(50, 200, 120);
--theme-info-color: rgb(118, 163, 247);
--theme-warn-color: rgb(255, 190, 50);
--theme-danger-color: rgb(232, 128, 128);
--theme-empty-color: rgb(120, 120, 120);
--theme-link-color: rgb(92, 208, 140);
--theme-link-color--hover: rgb(132.75, 219.75, 168.75);
--theme-link-color--visited: rgb(
57.0714285714,
197.9285714286,
115.3571428571
);
--theme-accent-link-color: rgb(210, 210, 210);
--theme-background-color: rgb(26, 26, 26);
--theme-border-color: rgb(62, 68, 82);
--theme-button-color: rgb(37, 180, 73);
--theme-button-color--hover: rgb(32.56, 158.4, 64.24);
--theme-button-color--active: rgb(
42.9950230415,
209.1649769585,
84.8280184332
);
--theme-card-border-radius: 0.5rem;
--theme-card-background-color: rgb(35, 39, 46);
--theme-card-background-color--rgb: 35, 39, 46;
--theme-card-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
--theme-card-box-shadow--hover: 0 0 0.85rem rgba(0, 0, 0, 0.7);
--theme-card-border-color: rgb(62, 68, 82);
--theme-header-background-color: rgb(30, 34, 39);
--theme-header-box-shadow-color: rgb(80, 80, 80);
--theme-header-height: 3.75rem;
--theme-footer-top-color: rgb(29, 31, 35);
--theme-footer-bottom-color: rgb(59.3140625, 63.4046875, 71.5859375);
--theme-toolbar-background-color: rgb(40, 50, 40);
--theme-input-background-color: rgb(29, 31, 35);
--theme-input-border-color: rgb(62, 68, 82);
--theme-input-border-color--hover: rgb(
77.7583333333,
85.2833333333,
102.8416666667
);
--theme-list-item-background-color: rgb(50, 50, 50);
--theme-list-item-background-color--hover: rgba(37, 180, 73, 0.3);
}
|
| 预设调色板 |
|---|
/** 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
|