Imported from Mediawiki default skin

This commit is contained in:
Diskette Guy
2025-07-18 00:20:55 +07:00
parent 314b39f4bb
commit 9da7278191
35 changed files with 7825 additions and 0 deletions
+1
View File
@@ -0,0 +1 @@
/vendor/
+8
View File
@@ -0,0 +1,8 @@
{
"root": true,
"extends": [
"wikimedia/client",
"wikimedia/jquery",
"wikimedia/mediawiki"
]
}
+4
View File
@@ -0,0 +1,4 @@
node_modules/
vendor/
composer.lock
.eslintcache
+6
View File
@@ -0,0 +1,6 @@
[gerrit]
host=gerrit.wikimedia.org
port=29418
project=mediawiki/skins/Example.git
track=1
defaultrebase=0
+3
View File
@@ -0,0 +1,3 @@
<?php
return require __DIR__ . '/../vendor/mediawiki/mediawiki-phan-config/src/config.php';
+7
View File
@@ -0,0 +1,7 @@
<?xml version="1.0"?>
<ruleset>
<rule ref="./vendor/mediawiki/mediawiki-codesniffer/MediaWiki" />
<file>.</file>
<arg name="extensions" value="php"/>
<arg name="encoding" value="UTF-8"/>
</ruleset>
+2
View File
@@ -0,0 +1,2 @@
vendor/
resources/libraries/
+6
View File
@@ -0,0 +1,6 @@
{
"extends": "stylelint-config-wikimedia",
"rules": {
"selector-max-id": null
}
}
+1
View File
@@ -0,0 +1 @@
The development of this software is covered by a [Code of Conduct](https://www.mediawiki.org/wiki/Special:MyLanguage/Code_of_Conduct).
+14
View File
@@ -0,0 +1,14 @@
Example skin
This is an example skin showcasing the best practices, a companion to the
MediaWiki skinning guide available at
<https://www.mediawiki.org/wiki/Manual:Skinning>.
The code is released into public domain, which means you can freely copy it,
modify and release as your own skin without providing attribution and with
absolutely no restrictions. Remember to change the license information if you
do not intend to provide your changes on the same terms.
See <http://creativecommons.org/publicdomain/zero/1.0/> for full licensing
details.
+27
View File
@@ -0,0 +1,27 @@
{
"require-dev": {
"mediawiki/mediawiki-codesniffer": "47.0.0",
"mediawiki/mediawiki-phan-config": "0.16.0",
"mediawiki/minus-x": "1.1.3",
"php-parallel-lint/php-console-highlighter": "1.0.0",
"php-parallel-lint/php-parallel-lint": "1.4.0"
},
"scripts": {
"fix": [
"minus-x fix .",
"phpcbf"
],
"test": [
"parallel-lint . --exclude vendor --exclude node_modules",
"minus-x check .",
"@phpcs"
],
"phan": "phan -d . --long-progress-bar",
"phpcs": "phpcs -sp"
},
"config": {
"allow-plugins": {
"dealerdirect/phpcodesniffer-composer-installer": true
}
}
}
+10
View File
@@ -0,0 +1,10 @@
{
"@metadata": {
"authors": [
"..."
]
},
"skinname-example": "Example",
"example-skin-desc": "An example skin showcasing the best practices",
"example-no-categories": "No categories"
}
+10
View File
@@ -0,0 +1,10 @@
{
"@metadata": {
"authors": [
"..."
]
},
"skinname-example": "{{optional}}",
"example-skin-desc": "{{desc|what=skin|name=Example|url=https://www.mediawiki.org/wiki/Skin:Example}}",
"example-no-categories": "Message to show when no categories available"
}
+7219
View File
File diff suppressed because it is too large Load Diff
+18
View File
@@ -0,0 +1,18 @@
{
"name": "Example",
"private": true,
"scripts": {
"test": "npm -s run lint",
"lint": "npm -s run lint:js && npm -s run lint:styles && npm -s run lint:i18n",
"lint:fix:js": "npm -s run lint:js -- --fix",
"lint:fix:styles": "npm -s run lint:styles -- --fix",
"lint:js": "eslint --cache .",
"lint:styles": "stylelint \"**/*.{less,css}\"",
"lint:i18n": "banana-checker i18n/"
},
"devDependencies": {
"eslint-config-wikimedia": "0.30.0",
"grunt-banana-checker": "0.13.0",
"stylelint-config-wikimedia": "0.18.0"
}
}
+33
View File
@@ -0,0 +1,33 @@
// Import MediaWiki skin variables for general fundamental styling.
@import 'mediawiki.skin.variables.less';
.mw-portlet {
position: relative;
ul {
margin: 0;
}
h3 {
display: none;
}
li {
display: inline-block;
margin-right: 10px;
}
input[ type='checkbox' ] {
display: block;
position: absolute;
opacity: 0;
cursor: pointer;
top: 0;
left: 0;
z-index: @z-index-stacking-1;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
}
+15
View File
@@ -0,0 +1,15 @@
@media screen {
@import './screen-common.less';
@media ( min-width: 751px ) {
@import './screen-desktop.less';
}
@media ( min-width: 750px ) {
@import './screen-mobile.less';
}
}
@media print {
@import './print.css';
}
@@ -0,0 +1,7 @@
// Styles for echo badges
#pt-notifications-alert,
#pt-notifications-notice {
white-space: nowrap;
display: inline-block;
}
+11
View File
@@ -0,0 +1,11 @@
/* Styles for print view and printing. */
/* You can use CSS files or Less files depending on your preference. */
/* Hide some extra stuff from print view (some of the navigation is already hidden automatically,
but not all). */
.mw-indicators,
#p-logo,
#catlinks,
#mw-footer {
display: none;
}
+124
View File
@@ -0,0 +1,124 @@
/* Common styling for the Example skin */
@import 'mediawiki.mixins.less';
// Page layout
#mw-wrapper {
max-width: @width;
margin: 0 auto;
position: relative;
padding: 1em;
}
#p-logo {
text-align: center;
width: 10em;
float: right;
// Make logo image visible
// The class sets the background image from $wgLogo, but we still need to give it a size in order to show up
a.mw-wiki-logo {
display: block;
content: '';
width: 10em;
height: 10em;
background-repeat: no-repeat;
background-position: 50% 50%;
}
}
.mw-body {
position: relative;
word-wrap: break-word;
}
// Some content stuff
.firstHeading {
margin-top: 0;
}
.mw-indicators {
float: right;
margin: 1.5em 0 0 1em;
}
pre {
overflow: auto;
white-space: pre-wrap;
}
.center,
.center * {
margin: auto;
text-align: center;
}
// Splatter the menus and tools at the bottom
.mw-footer,
#page-tools,
#p-personal {
margin: 1em 0;
ul {
list-style-type: none;
margin: 0;
}
li {
padding-right: 1em;
display: inline-block;
}
}
#page-tools .mw-portlet {
display: inline-block;
}
#mw-navigation {
margin: 1em 0;
h2 {
.mixin-screen-reader-text;
}
}
// Footer
.mw-footer {
border-top: 1px solid @border;
// stylelint-disable-next-line no-descending-specificity
ul {
margin-top: 1em;
}
}
#footer-icons {
float: right;
margin: 0 0 1em 1em;
}
// hidden stuff
#page-tools h3,
#p-search h3,
#p-personal h3 {
.mixin-screen-reader-text;
}
// user tools
#user-tools {
margin-top: 10px;
}
#p-user-interface-preferences,
#p-notifications,
#p-user-page {
display: inline-block;
vertical-align: middle;
}
#p-user-page a::before {
content: '👤';
display: inline-block;
padding-right: 10px;
}
+13
View File
@@ -0,0 +1,13 @@
/* Styles appear on displays over 750 pixels wide */
#site-navigation {
ul {
list-style-type: none;
margin: 0;
}
li {
padding-right: 1em;
display: inline-block;
}
}
+66
View File
@@ -0,0 +1,66 @@
/* Styles appear on displays 750 pixels wide and below */
#p-logo {
width: 6em;
// Make the logo smaller because we're dealing with less space here
// Note that background-size doesn't necessarily work in older browsers, but whatever
a.mw-wiki-logo {
margin: 0 0 1em 1em;
width: 5em;
height: 5em;
background-size: contain;
}
}
#p-banner {
display: none;
}
// Full-width thumbnails (to avoid having really squished text around them)
div.thumb {
float: none;
}
.thumb {
width: 100%;
margin: 1em auto;
}
.thumbinner {
/* stylelint-disable-next-line declaration-no-important */
width: 100% !important;
}
div.tright {
margin-left: 0;
.thumbinner {
padding-left: 0;
}
}
div.tleft {
margin-right: 0;
.thumbinner {
padding-right: 0;
}
}
.thumbimage {
display: block;
margin: 0 auto 0.5em;
}
// Keep images from overflowing
.mw-body-content a > img {
/* stylelint-disable-next-line declaration-no-important */
height: auto !important;
/* stylelint-disable-next-line declaration-no-important */
max-width: 100% !important;
}
.nomobile {
display: none;
}
+1
View File
@@ -0,0 +1 @@
/* JavaScript for the Example skin */
+11
View File
@@ -0,0 +1,11 @@
// Reference all skin stylesheets and variables aside of extension specific.
// Note, that 'screen-*' and 'print.css' stylesheets are imported in 'common.less'.
// Import MediaWiki skin variables for general fundamental styling.
@import 'mediawiki.skin.variables.less';
// Import skin specific variables beyond MediaWiki skin variables scope.
@import 'variables.less';
// Import common skin style rules.
@import 'common.less';
// Import specific module style rules.
@import 'Portlet.less';
+2
View File
@@ -0,0 +1,2 @@
@width: 66em;
@border: #ccc;
Binary file not shown.

After

Width:  |  Height:  |  Size: 324 KiB

+89
View File
@@ -0,0 +1,89 @@
{
"name": "Example",
"version": "1.0.0",
"author": [
"..."
],
"url": "https://www.mediawiki.org/wiki/Skin:Example",
"descriptionmsg": "example-skin-desc",
"namemsg": "skinname-example",
"license-name": "CC0-1.0",
"type": "skin",
"requires": {
"MediaWiki": ">= 1.45"
},
"ValidSkinNames": {
"example": {
"class": "SkinMustache",
"args": [
{
"name": "example",
"responsive": true,
"messages": [
"example-no-categories",
"sitetitle",
"search",
"otherlanguages",
"tagline",
"navigation-heading"
],
"styles": [
"mediawiki.ui.icon",
"mediawiki.ui.button",
"skins.example.styles"
],
"scripts": [
"skins.example"
]
}
]
}
},
"MessagesDirs": {
"Example": [
"i18n"
]
},
"ResourceModules": {
"skins.example.styles": {
"class": "MediaWiki\\ResourceLoader\\SkinModule",
"features": {
"normalize": true,
"elements": true,
"content-tables": true,
"content-links": false,
"content-media": false,
"content-links-external": false,
"interface-message-box": true,
"interface-category": false,
"toc": true
},
"targets": [
"desktop",
"mobile"
],
"styles": [
"resources/skin.less"
]
},
"skins.example": {
"targets": [
"desktop",
"mobile"
],
"packageFiles": [
"resources/skin.js"
]
}
},
"ResourceFileModulePaths": {
"localBasePath": "",
"remoteSkinPath": "Example"
},
"ResourceModuleSkinStyles": {
"example": {
"+ext.echo.styles.badge": "resources/extensions/echo.styles.badge.less"
}
},
"manifest_version": 2
}
@@ -0,0 +1,19 @@
{{#is-article}}
<div id="catlinks" class="catlinks" data-mw="interface">
{{#data-category-normal}}
<div id="{{id}}" class="{{class}}">
<ul>{{#array-items}}{{>ListItem}}{{/array-items}}</ul>
{{{html-after-portal}}}
</div>
{{/data-category-normal}}
{{^data-category-normal}}
<p>{{msg-example-no-categories}}</p>
{{/data-category-normal}}
{{#data-category-hidden}}
<div id="{{id}}" class="{{class}}">
<ul>{{#array-items}}{{>ListItem}}{{/array-items}}</ul>
{{{html-after-portal}}}
</div>
{{/data-category-hidden}}
</div>
{{/is-article}}
+10
View File
@@ -0,0 +1,10 @@
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles and
to mitigate a VoiceOver bug. }}
<footer id="footer" class="mw-footer" role="contentinfo" {{{html-user-language-attributes}}}>
{{!}}{{#data-icons}}{{>FooterList}}{{/data-icons}}
{{!}}<div id="footer-list">
{{#data-last-modified}}{{>LastModifiedLine}}{{/data-last-modified}}
<div id="copyright">{{#data-copyright}}{{{html}}}{{/data-copyright}}</div>
{{!}}{{#data-places}}{{>FooterList}}{{/data-places}}
{{!}}</div>
</footer>
+5
View File
@@ -0,0 +1,5 @@
<ul id="{{id}}">
{{#array-items}}
<li id="{{id}}">{{{html}}}</li>
{{/array-items}}
</ul>
@@ -0,0 +1 @@
<span class="skin-last-modified" data-time="{{time}}">{{text}}</span>
+1
View File
@@ -0,0 +1 @@
<li id="{{id}}" class="{{class}}">{{#array-links}}{{>ListItemLink}}{{/array-links}}</li>
@@ -0,0 +1,2 @@
<a {{#array-attributes}}{{key}}="{{value}}"{{/array-attributes}}>
<span class="list-item-{{icon}}"></span>{{ text }}</a>
+11
View File
@@ -0,0 +1,11 @@
<div role="navigation" id="{{id}}" class="{{class}}" title="{{html-tooltip}}"
aria-labelledby="{{id}}-label">
<input type="checkbox" aria-labelledby="{{id}}-label" />
<h3 id="{{id}}-label" {{{html-user-language-attributes}}}>{{label}}</h3>
<div class="mw-portlet-body">
<ul {{{html-user-language-attributes}}}>
{{#array-items}}{{>ListItem}}{{/array-items}}
</ul>
{{{html-after-portal}}}
</div>
</div>
+68
View File
@@ -0,0 +1,68 @@
<div id="mw-wrapper">
<div class="mw-body" id="content" role="main">
<div id="siteNotice">{{{html-site-notice}}}</div>
{{{html-user-message}}}
<div class="mw-indicators mw-body-content">
{{#array-indicators}}
<div id="{{id}}" class="{{class}}">{{{html}}}</div>
{{/array-indicators}}
</div>
{{{html-title-heading}}}
<div id="siteSub">{{msg-tagline}}</div>
<div class="mw-body-content">
<div id="contentSub">
{{{html-subtitle}}}
{{{html-undelete-link}}}
</div>
{{{html-body-content}}}
<!-- todo: replace with .mixin-clearfix -->
<div class="visualClear"></div>
{{#data-portlets}}
{{>CategoryPortlet}}
{{/data-portlets}}
</div>
{{{html-after-content}}}
</div>
<div id="mw-navigation">
<h2>{{msg-navigation-heading}}</h2>
<div id="p-logo" class="mw-portlet" role="banner">
<a href="{{link-mainpage}}">
{{#data-logos}}
{{#icon}}<img src="{{.}}" width="40" height="40">{{/icon}}
{{#wordmark}}<img src="{{src}}" width="{{width}}" height="{{height}}">{{/wordmark}}
{{^wordmark}}<h1>{{msg-sitetitle}}</h1>{{/wordmark}}
{{/data-logos}}
</a>
</div>
{{#data-search-box}}
<form action="{{form-action}}" role="search" class="mw-portlet" id="p-search">
<input type="hidden" name="title" value="{{page-title}}">
<h3>
<label for="searchInput">{{msg-search}}</label>
</h3>
{{{html-input}}}
{{{html-button-search}}}
</form>
{{/data-search-box}}
{{#data-portlets}}
<div id="user-tools">
{{#data-user-page}}{{>Portlet}}{{/data-user-page}}
{{#data-notifications}}{{>Portlet}}{{/data-notifications}}
{{#data-user-interface-preferences}}{{>Portlet}}{{/data-user-interface-preferences}}
{{#data-user-menu}}{{>Portlet}}{{/data-user-menu}}
</div>
<div id="page-tools">
{{#data-namespaces}}{{>Portlet}}{{/data-namespaces}}
{{#data-variants}}{{>Portlet}}{{/data-variants}}
{{#data-views}}{{>Portlet}}{{/data-views}}
{{#data-actions}}{{>Portlet}}{{/data-actions}}
</div>
{{/data-portlets}}
<div id="site-navigation">
{{#data-portlets-sidebar.data-portlets-first}}{{>Portlet}}{{/data-portlets-sidebar.data-portlets-first}}
{{#data-portlets-sidebar.array-portlets-rest}}{{>Portlet}}{{/data-portlets-sidebar.array-portlets-rest}}
{{#data-portlets.data-languages}}{{>Portlet}}{{/data-portlets.data-languages}}
</div>
</div>
{{#data-footer}}{{>Footer}}{{/data-footer}}
</div>