萌娘百科: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
|