├── .github
└── workflows
│ └── php.yml
├── .gitignore
├── CREDITS
├── LICENSE
├── README.md
├── ScratchWikiSkin.hooks.php
├── ScratchWikiSkin.php
├── ScratchWikiSkin.skin.php
├── ScratchWikiSkinTemplate.php
├── consts.php
├── i18n
├── de.json
├── en.json
├── fr.json
├── hi.json
├── hu.json
├── id.json
├── ja.json
├── nl.json
├── qqq.json
├── ru.json
├── tr.json
├── zh-hans.json
└── zh-hant.json
├── resources
├── Edit-pencil.png
├── External_link.png
├── Hamburger_icon.svg
├── LiberationSans-Bold.ttf
├── LiberationSans-BoldItalic.ttf
├── LiberationSans-Italic.ttf
├── LiberationSans-Regular.ttf
├── Scratch-logo-sm.png
├── User.svg
├── css
│ ├── dark.css
│ ├── main.css
│ ├── mobile-00.css
│ ├── mobile-10.css
│ ├── mobile-20.css
│ ├── mobile-30.css
│ ├── mobile-40.css
│ └── mobile.css
├── dropdown.png
├── nav-notifications.png
└── nav-search-glass.png
└── skin.json
/.github/workflows/php.yml:
--------------------------------------------------------------------------------
1 | name: Check PHP
2 | on: [push, pull_request]
3 | jobs:
4 | run:
5 | runs-on: ${{ matrix.operating-system }}
6 | strategy:
7 | matrix:
8 | php-versions: ['7.3']
9 | operating-system: [ubuntu-latest, windows-latest]
10 | name: PHP ${{ matrix.php-versions }} Test on ${{ matrix.operating-system }}
11 | steps:
12 | - name: Checkout
13 | uses: actions/checkout@v2
14 |
15 | - name: Setup PHP
16 | uses: shivammathur/setup-php@v2
17 | with:
18 | php-version: ${{ matrix.php-versions }}
19 | extensions: mbstring, intl
20 | ini-values: post_max_size=256M, short_open_tag=On
21 | coverage: xdebug
22 | tools: php-cs-fixer, phpunit
23 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.save
2 | error_log
3 |
--------------------------------------------------------------------------------
/CREDITS:
--------------------------------------------------------------------------------
1 | Below are attributions to files that require attribution.
2 | * Mobile layout hamburger icon: https://commons.wikimedia.org/wiki/File:Hamburger_icon.svg (licensed under CC BY-SA 3.0) (color inverted with CSS)
3 | * Mobile layout "person" icon: https://www.iconfinder.com/icons/1954535/account_people_person_profile_user_icon (licensed under CC BY 3.0) (color inverted with CSS)
4 | * Pencil icon for edit tools: https://commons.wikimedia.org/wiki/File:White_pencil.png (public domain)
5 | * External link icon: https://en.scratch-wiki.info/wiki/File:Link_icon.png (licensed under CC BY-SA 4.0)
6 |
7 | The [https://scratch.mit.edu Scratch website] is licensed under CC BY-SA 2.0; the following was copied from it:
8 | * The Scratch logo is a trademark of Scratch.
9 | * The search bar glass icon, dropdown icon, and message envelope icon.
10 | * A significant amount of source code, especially HTML and CSS.
11 |
12 | Thanks to the skin's [https://github.com/InternationalScratchWiki/ScratchWikiSkin2/graphs/contributors contributors] and people who reported bugs during the skin's development and use.
13 |
14 | Thanks to the skin's translators:
15 | * apple502j (Japanese)
16 | * T-taku (Japanese)
17 | * Smrman (French and Dutch)
18 | * Bouboufez (French)
19 | * RuMaks (Russian)
20 | * asqwde (Russian)
21 | * gohoski (Russian)
22 | * Kenny2scratch (Chinese)
23 | * Rumanti (Indonesian)
24 | * mtwoll (German)
25 | * LiFaytheGoblin (German)
26 | * ahmetlii (Turkish)
27 | * OragSam (Hungarian)
28 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018-2022 Ken Hilton
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is the default skin for the various Scratch Wikis.
2 |
3 | ## Installation
4 | 1. Download the contents of this repository and save them into $wgScriptPath/skins/ScratchWikiSkin2 (a new directory)
5 | 2. Add the following line to LocalSettings.php:
6 | ```
7 | wfLoadSkin( 'ScratchWikiSkin2' );
8 | ```
9 | 3. If desired, set $wgDefaultSkin as follows:
10 | ```
11 | $wgDefaultSkin = 'scratchwikiskin2';
12 | ```
13 |
--------------------------------------------------------------------------------
/ScratchWikiSkin.hooks.php:
--------------------------------------------------------------------------------
1 | $this->mID,
15 | 'name' => $this->mName,
16 | 'value' => $value,
17 | 'dir' => $this->mDir,
18 | 'pattern' => '#[0-9A-Fa-f]{6}',
19 | ];
20 |
21 | if ($this->mClass !== '') {
22 | $attribs['class'] = $this->mClass;
23 | }
24 |
25 | $allowedParams = [
26 | 'type',
27 | 'pattern',
28 | 'title',
29 | 'disabled',
30 | 'required',
31 | 'autofocus',
32 | 'readonly',
33 | ];
34 |
35 | $attribs += $this->getAttributes($allowedParams);
36 | return Html::input($this->mName, $value, 'color', $attribs);
37 | }
38 |
39 | public function validate($value, $alldata) {
40 | if (preg_match('%^#[a-fA-F0-9]{6}$%', $value) === 0) {
41 | return $this->msg('htmlform-invalid-input');
42 | }
43 | return parent::validate($value, $alldata);
44 | }
45 | }
46 |
47 | class ScratchWikiSkinHooks implements OutputPageBodyAttributesHook, GetPreferencesHook {
48 | private $userOptionsLookup;
49 |
50 | public function __construct(UserOptionsLookup $userOptionsLookup) {
51 | $this->userOptionsLookup = $userOptionsLookup;
52 | }
53 |
54 | public function onOutputPageBodyAttributes($out, $sk, &$bodyAttrs): void {
55 | global $wgSWS2ForceDarkTheme;
56 | $user = RequestContext::getMain()->getUser();
57 | if ($this->userOptionsLookup->getOption($user, DARK_THEME_PREF) || $wgSWS2ForceDarkTheme) {
58 | $bodyAttrs['class'] .= ' dark-theme';
59 | }
60 | }
61 |
62 | public function onGetPreferences($user, &$preferences) {
63 | HTMLForm::$typeMappings['color'] = HTMLColorField::class;
64 | $origpref = $this->userOptionsLookup->getOption($user, HEADER_COLOR_PREF);
65 | $preferences[HEADER_COLOR_PREF] = [
66 | 'type' => 'color',
67 | 'pattern' => '#[0-9A-Fa-f]{6}',
68 | 'label-message' => 'scratchwikiskin-pref-color',
69 | 'section' => 'rendering/skin',
70 | // Only expose background color preference when the skin is selected
71 | 'default' => ($origpref ? $origpref : '#7953c4'),
72 | 'hide-if' => ['!==', 'wpskin', 'scratchwikiskin2'],
73 | ];
74 | $preferences[DARK_THEME_PREF] = [
75 | 'type' => 'check',
76 | 'label-message' => 'scratchwikiskin-pref-dark',
77 | 'section' => 'rendering/skin',
78 | 'hide-if' => ['!==', 'wpskin', 'scratchwikiskin2'],
79 | ];
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/ScratchWikiSkin.php:
--------------------------------------------------------------------------------
1 | addModuleStyles([
33 | 'skins.scratchwikiskin2'
34 | ]);
35 | // make Chrome mobile testing work
36 | $out->addMeta('viewport', 'user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height');
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/ScratchWikiSkinTemplate.php:
--------------------------------------------------------------------------------
1 | getUser();
17 | $pre139 = version_compare( MW_VERSION, '1.39', '<' );
18 |
19 | if ( $pre139 ) {
20 | $this->html('headelement');
21 | }
22 | $userOptionsLookup = MediaWikiServices::getInstance()->getUserOptionsLookup();
23 | $colorPref = $userOptionsLookup->getOption( $user, HEADER_COLOR_PREF );
24 | $darkPref = $userOptionsLookup->getOption( $user, DARK_THEME_PREF );
25 | ?>
26 |
32 | getSkin()->getConfig() );
34 | $wordmark = $logos['wordmark']['src'] ?? $this->get('stylepath') . '/' . $this->getSkin()->stylename . '/resources/Scratch-logo-sm.png';
35 | $wordmarkW = $logos['wordmark']['width'] ?? 76;
36 | $wordmarkH = $logos['wordmark']['height'] ?? 28;
37 | ?>
38 |
155 |
156 |
157 |
158 |
159 |
160 |
161 | getSidebar() as $box) { ?>
162 |
163 |
166 |
167 |
168 |
169 | $item) { ?>
170 | =$this->getSkin()->makeListItem($name, $item)?>
171 |
172 |
173 |
174 |
175 |
176 | =$box['content']?>
177 |
178 |
179 |
180 | isRegistered() && $wgSWS2JoinBox) { ?>
182 |
192 |
193 |
194 |
195 | data['newtalk']) { ?>
196 | data['sitenotice']) { ?>
html('sitenotice'); ?>
197 |
198 |
202 |
203 |
=wfMessage( 'tagline' )->inLanguage( $wgLang )->escaped()?>
204 | data['subtitle']) { ?>
html('subtitle') ?>
205 | data['undelete']) { ?>
html('undelete') ?>
206 | html('bodytext') ?>
207 | html('dataAfterContent'); ?>
208 | data['catlinks']) {
209 | $this->html( 'catlinks' );
210 | }
211 | $url = wfMessage('scratchwikiskin-discuss-wiki')->inLanguage( $wgLang )->escaped();
212 | $text = wfMessage('scratchwikiskin-discuss-wiki-text')->inLanguage( $wgLang )->escaped();
213 | $link = "
$text ";
214 | $line = wfMessage('scratchwikiskin-dark-theme-feedback')->rawParams( $link )->inLanguage( $wgLang )->escaped();
215 | ?>
216 |
=$line?>
217 |
218 |
219 |
220 | getFooterLinks('flat') as $key ) { ?>
221 | html( $key ) ?>
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
;
282 |
283 |
394 |
395 | printTrail();
398 | }
399 | }
400 | }
401 |
--------------------------------------------------------------------------------
/consts.php:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/resources/LiberationSans-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/InternationalScratchWiki/ScratchWikiSkin2/0d75fc41362aa4b5d21aefc1dc6e27bb40f2b379/resources/LiberationSans-Bold.ttf
--------------------------------------------------------------------------------
/resources/LiberationSans-BoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/InternationalScratchWiki/ScratchWikiSkin2/0d75fc41362aa4b5d21aefc1dc6e27bb40f2b379/resources/LiberationSans-BoldItalic.ttf
--------------------------------------------------------------------------------
/resources/LiberationSans-Italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/InternationalScratchWiki/ScratchWikiSkin2/0d75fc41362aa4b5d21aefc1dc6e27bb40f2b379/resources/LiberationSans-Italic.ttf
--------------------------------------------------------------------------------
/resources/LiberationSans-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/InternationalScratchWiki/ScratchWikiSkin2/0d75fc41362aa4b5d21aefc1dc6e27bb40f2b379/resources/LiberationSans-Regular.ttf
--------------------------------------------------------------------------------
/resources/Scratch-logo-sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/InternationalScratchWiki/ScratchWikiSkin2/0d75fc41362aa4b5d21aefc1dc6e27bb40f2b379/resources/Scratch-logo-sm.png
--------------------------------------------------------------------------------
/resources/User.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/resources/css/dark.css:
--------------------------------------------------------------------------------
1 | body.dark-theme {
2 | --font-color: #eee;
3 | --dark-bg-1: #1f1f1f;
4 | --dark-bg-2: #232323;
5 | --dark-bg-3: #36393f;
6 | --dark-bg-4: #2c2f33;
7 | --dark-border-1: #bfbfbf;
8 | --link-color: #5da8ed;
9 | color: var(--font-color);
10 | }
11 |
12 | .dark-theme h1,
13 | .dark-theme h2,
14 | .dark-theme h3,
15 | .dark-theme h4,
16 | .dark-theme h5 {
17 | color: var(--font-color);
18 | }
19 |
20 | .dark-theme a:link,
21 | .dark-theme a:visited,
22 | .dark-theme a:active,
23 | .dark-theme .toctogglelabel {
24 | color: var(--link-color);
25 | }
26 |
27 | .dark-theme a:hover {
28 | text-decoration: underline;
29 | }
30 |
31 | .dark-theme p {
32 | color: var(--font-color);
33 | }
34 |
35 | .dark-theme #view {
36 | background-color: #23272a;
37 | }
38 |
39 | .dark-theme .dropdown>li a:hover {
40 | background-color: rgba(0, 0, 0, 0.3);
41 | }
42 |
43 | .dark-theme #navigation .inner>ul>li.right a:hover {
44 | background-color: rgba(0, 0, 0, 0.3);
45 | }
46 |
47 | .dark-theme #navigation .inner>ul>li.search .input {
48 | background-color: rgba(0, 0, 0, 0.3);
49 | }
50 |
51 | .dark-theme #navigation,
52 | .dark-theme #navigation .dropdown {
53 | background-color: var(--dark-bg-1); /* Sorry, but less colors go well with dark than light */
54 | }
55 |
56 | .dark-theme #footer {
57 | background-color: #202225;
58 | color: var(--font-color);
59 | }
60 |
61 | .dark-theme .box {
62 | background-color: var(--dark-bg-4);
63 | border-color: #000;
64 | }
65 |
66 | .dark-theme .box .box-header {
67 | background-color: var(--dark-bg-1);
68 | border-top-color: var(--dark-bg-1);
69 | border-bottom-color: #000;
70 | }
71 |
72 | .dark-theme .right .box .box-content {
73 | background-color: #2f3136;
74 | }
75 |
76 | .dark-theme #content {
77 | color: var(--font-color);
78 | }
79 |
80 | .dark-theme #content a.new, .dark-theme #content a.stub {
81 | color: #ef916c;
82 | }
83 |
84 | .dark-theme #content a.new:visited,
85 | .dark-theme #content a.stub:visited {
86 | color: #aaaa00;
87 | }
88 |
89 | .dark-theme #content pre:not([class^="blocks"]),
90 | .dark-theme #content code:not([class^="blocks"]) {
91 | border-color: var(--dark-bg-1);
92 | background: #23272a;
93 | color: var(--font-color);
94 | }
95 |
96 | .dark-theme #content h1,
97 | .dark-theme #content h2 {
98 | border-bottom-color: var(--font-color);
99 | }
100 |
101 | .dark-theme #content a:visited {
102 | color: #339cff;
103 | }
104 |
105 | .dark-theme .mw-notification {
106 | background-color: var(--dark-bg-4);
107 | color: var(--font-color);
108 | border: 1px solid #fff;
109 | }
110 |
111 | .dark-theme textarea,
112 | .dark-theme input,
113 | .dark-theme select,
114 | .dark-theme .mw-ui-button {
115 | background-color: var(--dark-bg-4);
116 | color: var(--font-color);
117 | border: 1px solid var(--dark-border-1);
118 | }
119 | .dark-theme textarea {
120 | border: 1px solid var(--dark-border-1) !important;
121 | }
122 | .dark-theme [class^="mw-widget-"],
123 | .dark-theme [class*=" mw-widget-"] {
124 | background-color: var(--dark-bg-1);
125 | color: var(--font-color);
126 | border: 1px solid var(--dark-bg-4);
127 | }
128 | .dark-theme [class$="-handle"],
129 | .dark-theme [class$="-input"]:not(.mw-input, .oo-ui-labelElement),
130 | .dark-theme [class*="-handle "],
131 | .dark-theme [class*="-input "]:not(.mw-input, .oo-ui-labelElement) {
132 | border: 1px solid var(--dark-border-1);
133 | }
134 | .dark-theme [class$="-disabled"] [class$="-handle"],
135 | .dark-theme [class$="-disabled"] [class$="-input"]:not(.mw-input, .oo-ui-labelElement),
136 | .dark-theme [class$="-disabled"] [class*="-handle "],
137 | .dark-theme [class$="-disabled"] [class*="-input "]:not(.mw-input, .oo-ui-labelElement),
138 | .dark-theme [class*="-disabled "] [class$="-handle"],
139 | .dark-theme [class*="-disabled "] [class$="-input"]:not(.mw-input, .oo-ui-labelElement),
140 | .dark-theme [class*="-disabled "] [class*="-handle "],
141 | .dark-theme [class*="-disabled "] [class*="-input "]:not(.mw-input, .oo-ui-labelElement) {
142 | border-color: #000;
143 | }
144 | .dark-theme .editOptions {
145 | background-color: var(--dark-bg-3);
146 | border: 1px solid var(--dark-bg-1);
147 | }
148 |
149 | .dark-theme #mw-indicator-mw-helplink a {
150 | filter: invert(100%);
151 | color: #ff6930; /* hack to invert the black question mark */
152 | }
153 | .dark-theme .mw-plusminus-pos {
154 | color: #00bb00; /* lighten it cuz */
155 | }
156 | /* OOUI hacks */
157 | .dark-theme .oo-ui-icon-search {
158 | filter: invert(1);
159 | }
160 | .dark-theme .oo-ui-inputWidget-input[type=search] {
161 | box-shadow: none;
162 | }
163 | .dark-theme .mw-search-profile-tabs {
164 | background-color: var(--dark-bg-1);
165 | border-color: var(--dark-border-1);
166 | }
167 |
168 | /* tables */
169 | .dark-theme table.wikitable,
170 | .dark-theme table.prettytable,
171 | .dark-theme table.mw-datatable {
172 | background-color: var(--dark-bg-1);
173 | border-color: #666;
174 | color: var(--font-color);
175 | }
176 | .dark-theme table.mw-datatable td {
177 | background-color: transparent;
178 | }
179 | .dark-theme table.mw-datatable :hover td {
180 | background-color: rgba(255, 255, 255, 0.1) !important;
181 | }
182 | .dark-theme table.wikitable th,
183 | .dark-theme table.wikitable td.h13,
184 | .dark-theme table.wikitable th.h13,
185 | .dark-theme table.prettytable th,
186 | .dark-theme table.prettytable td.h13,
187 | .dark-theme table.prettytable th.h13,
188 | .dark-theme table.mw-datatable th,
189 | .dark-theme table.mw-datatable td.h13,
190 | .dark-theme table.mw-datatable th.h13 {
191 | background-color: #102448
192 | }
193 | .dark-theme table.wikitable th,
194 | .dark-theme table.wikitable td,
195 | .dark-theme table.prettytable th,
196 | .dark-theme table.prettytable td,
197 | .dark-theme table.mw-datatable th,
198 | .dark-theme table.mw-datatable td {
199 | border-color: #666;
200 | }
201 |
202 | .dark-theme #mw-searchoptions {
203 | background-color: var(--dark-bg-1);
204 | border-color: #000;
205 | }
206 | .dark-theme .editOptions {
207 | color: var(--font-color);
208 | }
209 | .dark-theme #catlinks {
210 | background-color: var(--dark-bg-1);
211 | border-color: #000;
212 | }
213 | /* More OOUI hacks */
214 | .dark-theme .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
215 | background-color: var(--dark-bg-1);
216 | color: var(--font-color);
217 | border-color: var(--dark-border-1);
218 | }
219 | .dark-theme .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
220 | background-color: #000;
221 | text-decoration: underline;
222 | }
223 | .dark-theme .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
224 | background-color: #0645ad;
225 | border-color: #0645ad;
226 | }
227 | .dark-theme .oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle,
228 | .dark-theme .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
229 | background-color: #000;
230 | }
231 | .dark-theme .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
232 | background-color: var(--dark-bg-1);
233 | color: var(--font-color);
234 | }
235 | .dark-theme .oo-ui-tabSelectWidget-framed {
236 | background-color: #262626;
237 | }
238 | .dark-theme .oo-ui-tabOptionWidget {
239 | color: #ddd;
240 | }
241 | .dark-theme .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
242 | background-color: #000;
243 | color: var(--font-color);
244 | }
245 | .dark-theme .mw-prefs-buttons {
246 | background-color: transparent;
247 | }
248 | .dark-theme .oo-ui-labelWidget.oo-ui-inline-help {
249 | color: #ccc;
250 | }
251 | .dark-theme .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
252 | background-color: transparent;
253 | border-color: rgba(0, 0, 0, 0.5);
254 | }
255 | .dark-theme .oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
256 | background-color: transparent;
257 | }
258 | .dark-theme .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select,
259 | .dark-theme .oo-ui-dropdownInputWidget.oo-ui-widget-enabled input {
260 | background-color: var(--dark-bg-1);
261 | color: var(--font-color);
262 | border: 1px solid #000;
263 | }
264 | .dark-theme .oo-ui-menuSelectWidget {
265 | background-color: var(--dark-bg-1);
266 | color: var(--font-color);
267 | }
268 | .dark-theme .oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
269 | color: var(--font-color);
270 | }
271 | .dark-theme .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
272 | .dark-theme .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
273 | background-color: rgba(255, 255, 255, 0.1);
274 | }
275 | .dark-theme .oo-ui-toolbar-bar {
276 | background-color: #000;
277 | color: var(--font-color);
278 | }
279 | .dark-theme .oo-ui-toolbar-bar [class$="-handle"],
280 | .dark-theme .oo-ui-toolbar-bar [class$="-input"]:not(.mw-input),
281 | .dark-theme .oo-ui-toolbar-bar [class*="-handle "],
282 | .dark-theme .oo-ui-toolbar-bar [class*="-input "]:not(.mw-input) {
283 | border: none;
284 | }
285 | .dark-theme .oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link {
286 | background-color: var(--dark-bg-3);
287 | }
288 | .dark-theme .oo-ui-pendingElement-pending {
289 | background-color: var(--dark-bg-2);
290 | background-image: linear-gradient(135deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);
291 | background-size: 1.42857143em 1.42857143em;
292 | animation: oo-ui-pendingElement-stripes 650ms linear infinite;
293 | }
294 | .dark-theme .oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
295 | .dark-theme .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
296 | background-color: var(--dark-bg-1);
297 | }
298 | .dark-theme .oo-ui-toolbar-actions .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover {
299 | border-right-color: #000;
300 | }
301 | .dark-theme .oo-ui-windowManager-modal > .oo-ui-dialog {
302 | background-color: rgba(0, 0, 0, 0.5);
303 | }
304 | .dark-theme .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover,
305 | .dark-theme .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active,
306 | .dark-theme .oo-ui-listToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled:hover,
307 | .dark-theme .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover,
308 | .dark-theme .oo-ui-tool.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-tool-link,
309 | .dark-theme .oo-ui-tool.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-tool-link {
310 | background-color: var(--dark-bg-3);
311 | color: var(--font-color);
312 | }
313 | .dark-theme .oo-ui-indicator-down {
314 | filter: invert(1);
315 | }
316 | .dark-theme select.oo-ui-indicator-down {
317 | filter: none;
318 | }
319 | .dark-theme .oo-ui-popupToolGroup-tools {
320 | background-color: var(--dark-bg-1);
321 | }
322 | .dark-theme .oo-ui-popupToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
323 | color: #c93;
324 | }
325 | .dark-theme .oo-ui-toggleSwitchWidget {
326 | background-color: var(--dark-bg-3);
327 | border-color: var(--dark-border-1);
328 | }
329 | .dark-theme .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
330 | background-color: var(--dark-bg-1);
331 | border-color: var(--dark-bg-3);
332 | }
333 | .dark-theme .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled .oo-ui-toggleSwitchWidget-grip {
334 | background-color: #f8f9fa;
335 | }
336 | .dark-theme .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
337 | background-color: #000;
338 | }
339 | .dark-theme .oo-ui-menuToolGroup {
340 | border-color: #000;
341 | }
342 | .dark-theme .mw-widget-mediaResultWidget .mw-widget-mediaResultWidget-overlay {
343 | background-color: unset; /* to counteract .dark-theme [class^="mw-widget-"] */
344 | }
345 | .dark-theme .oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget {
346 | background-color: #000;
347 | }
348 | .dark-theme .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child( even ) td {
349 | background-color: #000;
350 | }
351 | .dark-theme .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td {
352 | background-color: var(--dark-bg-3);
353 | }
354 | .dark-theme .oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-inputWidget-input,
355 | .dark-theme .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input[readonly]:not( .oo-ui-pendingElement-pending ) {
356 | background-color: unset;
357 | border-color: #000;
358 | text-shadow: none;
359 | }
360 |
361 | /* Table of Contents fixes */
362 | .dark-theme .toc {
363 | background-color: var(--dark-bg-1);
364 | border-color: #000;
365 | }
366 | .dark-theme .tocnumber {
367 | color: var(--font-color);
368 | }
369 |
370 | .dark-theme .diff-context {
371 | background-color: var(--dark-bg-1);
372 | border-color: #000;
373 | color: var(--font-color);
374 | }
375 | .dark-theme .diff-addedline {
376 | background-color: var(--dark-bg-1);
377 | border-color: #859900;
378 | }
379 | .dark-theme .diff-deletedline {
380 | background-color: var(--dark-bg-1);
381 | border-color: #dc322f;
382 | }
383 | .dark-theme [class^="diff"] .diffchange,
384 | .dark-theme .diffchange {
385 | background-color: unset;
386 | border: 1px solid #aaa;
387 | }
388 |
389 | .dark-theme #filetoc {
390 | background-color: var(--dark-bg-1);
391 | border-color: #000;
392 | }
393 |
394 | /* Fix image thumbnails */
395 | .dark-theme .thumbimage {
396 | background-color: unset;
397 | border-color: #8b8174;
398 | }
399 | .dark-theme figure[typeof],
400 | .dark-theme figure[typeof] > figcaption,
401 | .dark-theme div.thumbinner {
402 | background-color: #070605;
403 | color: var(--font-color);
404 | }
405 |
406 | /* Fix recent changes */
407 | .dark-theme .oo-ui-tagMultiselectWidget,
408 | .dark-theme .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled,
409 | .dark-theme .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
410 | .dark-theme .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
411 | .dark-theme .mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not( .oo-ui-optionWidget-selected ),
412 | .dark-theme .mw-rcfilters-ui-filterMenuHeaderWidget-header,
413 | .dark-theme .mw-rcfilters-ui-menuSelectWidget-footer,
414 | .dark-theme .oo-ui-popupWidget-popup {
415 | background-color: var(--dark-bg-1);
416 | }
417 | .dark-theme .oo-ui-labelWidget,
418 | .dark-theme .mw-rcfilters-ui-itemMenuOptionWidget-label-desc,
419 | .dark-theme .oo-ui-labelElement-label,
420 | .dark-theme .mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label,
421 | .dark-theme .mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget {
422 | color: var(--font-color);
423 | }
424 | .dark-theme .oo-ui-iconElement-icon {
425 | filter: invert(1);
426 | }
427 | .dark-theme .oo-ui-textInputWidget .oo-ui-inputWidget-input,
428 | .dark-theme .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled,
429 | .dark-theme .mw-rcfilters-ui-filterMenuSectionOptionWidget {
430 | background-color: var(--dark-bg-1);
431 | color: var(--font-color);
432 | }
433 | .dark-theme .mw-changeslist-legend,
434 | .dark-theme .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
435 | background-color: unset;
436 | }
437 | .dark-theme .mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted.oo-ui-optionWidget-highlighted {
438 | background-color: var(--dark-bg-2);
439 | }
440 | .dark-theme .mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
441 | color: #ddd;
442 | }
443 | .dark-theme .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
444 | color: #fff;
445 | background-color: var(--dark-bg-2);
446 | }
447 | .dark-theme .mw-rcfilters-ui-filterTagMultiselectWidget-views-input:not(.mw-input),
448 | .dark-theme .mw-rcfilters-ui-filterTagMultiselectWidget-views-input:not(.mw-input) .oo-ui-inputWidget-input {
449 | border: none;
450 | }
451 |
452 | /* Fix editing */
453 | .dark-theme .wikiEditor-ui-toolbar {
454 | background-color: var(--dark-bg-1);
455 | }
456 | .dark-theme .wikiEditor-ui-toolbar .group .tool-select .options {
457 | background-color: var(--dark-bg-1);
458 | color: var(--font-color);
459 | }
460 | .dark-theme .ui-widget-content {
461 | background: var(--dark-bg-3);
462 | color: var(--font-color);
463 | }
464 | .dark-theme .wikiEditor-ui-toolbar .tabs span.tab a {
465 | color: var(--link-color);
466 | }
467 | .dark-theme .wikiEditor-ui-toolbar .group .tool-select .options .option {
468 | color: var(--font-color);
469 | }
470 | .dark-theme .wikiEditor-ui-toolbar .tabs span.tab a.current,
471 | .dark-theme .wikiEditor-ui-toolbar .tabs span.tab a.current:visited,
472 | .dark-theme .wikiEditor-ui-toolbar .group .tool-select .label {
473 | color: #ddd;
474 | }
475 | .dark-theme .wikiEditor-ui-toolbar .group .label {
476 | color: #afaaa7;
477 | }
478 | .dark-theme .ui-widget-header {
479 | background: var(--dark-bg-2);
480 | color: var(--font-color);
481 | }
482 | .dark-theme .ui-state-default,
483 | .dark-theme .ui-widget-content .ui-state-default,
484 | .dark-theme .ui-widget-header .ui-state-default {
485 | background: var(--dark-bg-1);
486 | border-color: var(--dark-bg-1);
487 | color: var(--font-color);
488 | }
489 | .dark-theme .wikiEditor-ui .wikiEditor-ui-top,
490 | .dark-theme .wikiEditor-ui-toolbar .group,
491 | .dark-theme .wikiEditor-ui .wikiEditor-ui-view,
492 | .dark-theme .wikiEditor-ui-toolbar .sections .section {
493 | border-color: var(--dark-border-1);
494 | }
495 | .dark-theme .wikiEditor-ui-toolbar .page-characters div span,
496 | .dark-theme .wikiEditor-ui-toolbar .page-table th,
497 | .dark-theme .wikiEditor-ui-toolbar .page-table td {
498 | color: var(--font-color);
499 | }
500 |
501 | /* CodeMirror fixes */
502 | .dark-theme .CodeMirror {
503 | background-color: var(--dark-bg-4);
504 | }
505 | .dark-theme .CodeMirror ::selection {
506 | color: var(--dark-bg-4);
507 | }
508 | .dark-theme .CodeMirror .CodeMirror-gutters {
509 | background-color: var(--dark-bg-1);
510 | border-right-color: var(--dark-border-1);
511 | }
512 | .dark-theme .CodeMirror .cm-mw-extlink-protocol,
513 | .dark-theme .CodeMirror .cm-mw-free-extlink-protocol,
514 | .dark-theme .CodeMirror .cm-mw-extlink,
515 | .dark-theme .CodeMirror .cm-mw-free-extlink,
516 | .dark-theme .CodeMirror .cm-mw-extlink-bracket,
517 | .dark-theme .CodeMirror .cm-mw-link-pagename,
518 | .dark-theme .CodeMirror .cm-mw-link-bracket,
519 | .dark-theme .CodeMirror .cm-mw-link-tosection,
520 | .dark-theme .CodeMirror .cm-mw-link-delimiter {
521 | color: var(--link-color);
522 | }
523 | .dark-theme .CodeMirror .cm-mw-link {
524 | color: var(--font-color);
525 | }
526 | .dark-theme .CodeMirror .cm-mw-htmltag-name,
527 | .dark-theme .CodeMirror .cm-mw-htmltag-bracket,
528 | .dark-theme .CodeMirror .cm-mw-htmltag-attribute,
529 | .dark-theme .CodeMirror .cm-mw-mnemonic,
530 | .dark-theme .CodeMirror .cm-mw-exttag-name,
531 | .dark-theme .CodeMirror .cm-mw-exttag-bracket,
532 | .dark-theme .CodeMirror .cm-mw-exttag-attribute {
533 | color: #32e600;
534 | }
535 | .dark-theme .CodeMirror .cm-mw-apostrophes-bold,
536 | .dark-theme .CodeMirror .cm-mw-apostrophes-italic {
537 | color: #80c4ff;
538 | }
539 | .dark-theme .CodeMirror .cm-mw-template-name,
540 | .dark-theme .CodeMirror .cm-mw-template-bracket,
541 | .dark-theme .CodeMirror .cm-mw-template-delimiter {
542 | color: #b31aff;
543 | }
544 | .dark-theme .CodeMirror .cm-mw-template,
545 | .dark-theme .CodeMirror .cm-mw-template-argument-name {
546 | color: #d580ff;
547 | }
548 | .dark-theme .CodeMirror .cm-mw-parserfunction-name,
549 | .dark-theme .CodeMirror .cm-mw-parserfunction-bracket {
550 | color: #e81717;
551 | }
552 | .dark-theme .CodeMirror .cm-mw-doubleUnderscore,
553 | .dark-theme .CodeMirror .cm-mw-signature,
554 | .dark-theme .CodeMirror .cm-mw-hr {
555 | color: var(--link-color);
556 | background-color: var(--dark-bg-3);
557 | }
558 |
559 | /* SyntaxHighlight fixes */
560 |
561 | .dark-theme #content pre[class*="language-"],
562 | .dark-theme #content code[class*="language-"] {
563 | background: #1d1f21;
564 | text-shadow: none;
565 | filter: saturate(2);
566 | }
567 |
568 | .dark-theme .mw-syntaxhighlight .keyword,
569 | .dark-theme .mw-syntaxhighlight .builtin {
570 | color: #0f0;
571 | }
572 | .dark-theme .mw-syntaxhighlight .function {
573 | color: #f0f;
574 | }
575 | .dark-theme .mw-syntaxhighlight .operator {
576 | color: #999;
577 | background: none;
578 | }
579 | .dark-theme .mw-syntaxhighlight .comment {
580 | color: #52a3a3;
581 | }
582 | .dark-theme .mw-syntaxhighlight .string {
583 | color: #e46767;
584 | }
585 | .dark-theme .mw-syntaxhighlight .deleted {
586 | color: #ff4d4d;
587 | }
588 | .dark-theme .mw-syntaxhighlight .inserted {
589 | color: #4dff4d;
590 | }
591 | .dark-theme .mw-syntaxhighlight .unchanged {
592 | color: #f0f;
593 | }
594 |
595 | /* RecentChanges banner fixes */
596 | .dark-theme .mw-scratch-confirmaccount-rc-awaiting,
597 | .dark-theme .mw-reoprt-reports-awaiting {
598 | background-color: #060606;
599 | color: #fff;
600 | }
601 |
602 | /* Box fixes */
603 |
604 | .dark-theme .mw-message-box,
605 | .dark-theme .messagebox,
606 | .dark-theme .mw-message-box-error,
607 | .dark-theme .errorbox,
608 | .dark-theme .mw-message-box-warning,
609 | .dark-theme .warningbox,
610 | .dark-theme .mw-message-box-success,
611 | .dark-theme .successbox {
612 | color: unset;
613 | }
614 | .dark-theme .mw-message-box,
615 | .dark-theme .messagebox {
616 | background-color: rgb(34, 37, 38);
617 | border-color: rgb(72, 78, 81);
618 | }
619 | .dark-theme .mw-message-box-error,
620 | .dark-theme .errorbox {
621 | background-color: rgb(64, 5, 3);
622 | border-color: rgb(149, 25, 25);
623 | }
624 | .dark-theme .mw-message-box-warning,
625 | .dark-theme .warningbox {
626 | background-color: rgb(63, 42, 3);
627 | border-color: rgb(163, 122, 0);
628 | }
629 | .dark-theme .mw-message-box-success,
630 | .dark-theme .successbox {
631 | background-color: rgb(4, 74, 62);
632 | border-color: rgb(27, 182, 148);
633 | }
634 |
635 | /* Page preview fixes */
636 | .dark-theme .mwe-popups {
637 | background: #181a1b;
638 | }
639 | .dark-theme .mwe-popups.flipped-y:after,
640 | .dark-theme .mwe-popups.mwe-popups-no-image-pointer:after,
641 | .dark-theme .mwe-popups.flipped-y:before,
642 | .dark-theme .mwe-popups.mwe-popups-no-image-pointer:before {
643 | border-top-color: #181a1b;
644 | border-bottom-color: #181a1b;
645 | }
646 | .dark-theme .mwe-popups *,
647 | .dark-theme .mwe-popups a.mwe-popups-extract,
648 | .dark-theme .mwe-popups a.mwe-popups-extract:link {
649 | color: #dfdedd;
650 | }
651 | .dark-theme .mwe-popups .mwe-popups-extract[dir='ltr']:after,
652 | .dark-theme .mwe-popups .mwe-popups-extract[dir='rtl']:after {
653 | background: none;
654 | }
655 | .dark-theme #content .previewnote p {
656 | color: #ffa2a2;
657 | }
658 |
659 | /* File: page metadata fixes */
660 | .dark-theme .mw_metadata th {
661 | background-color: var(--dark-bg-2);
662 | }
663 | .dark-theme .mw_metadata td {
664 | background-color: var(--dark-bg-1);
665 | }
666 | .dark-theme .mw_metadata td, .dark-theme .mw_metadata th {
667 | border-color: var(--dark-bg-3);
668 | }
669 |
670 | /* Visual Editor-specific (non-OOUI) fixes */
671 | .dark-theme .ve-activated #catlinks:hover {
672 | background-color: var(--dark-bg-1);
673 | }
674 | .dark-theme .ve-ce-branchNode-blockSlug,
675 | .dark-theme .ve-ce-branchNode-newSlug {
676 | background-color: rgba(29, 32, 33, 0.75);
677 | }
678 | .dark-theme .ve-ui-mwSaveDialog-options {
679 | background-color: unset;
680 | }
681 | .dark-theme .ve-ui-mwSaveDialog-summary {
682 | background-color: unset;
683 | border: 1px solid #fff;
684 | }
685 | .dark-theme .ve-ui-targetWidget:not(.oo-ui-pendingElement-pending) {
686 | background-color: #000;
687 | }
688 | .dark-theme .ve-ui-mwGalleryDialog-highlighted-image {
689 | background-color: var(--dark-bg-1);
690 | }
691 |
692 | /* Fix history page */
693 | .dark-theme #pagehistory li.selected {
694 | background-color: var(--dark-bg-1);
695 | color: var(--font-color);
696 | }
697 |
698 | /* Fix search suggestions */
699 | .dark-theme .suggestions-results,
700 | .dark-theme .suggestions-special {
701 | background-color: var(--dark-bg-1);
702 | border-color: var(--dark-border-1);
703 | }
704 | .dark-theme .suggestions a.mw-searchSuggest-link,
705 | .dark-theme .suggestions a.mw-searchSuggest-link:hover,
706 | .dark-theme .suggestions a.mw-searchSuggest-link:active,
707 | .dark-theme .suggestions a.mw-searchSuggest-link:focus,
708 | .dark-theme .suggestions-result,
709 | .dark-theme .suggestions-special .special-query {
710 | color: var(--font-color);
711 | }
712 |
713 | /* Fix math */
714 | .dark-theme .mwe-math-fallback-image-inline {
715 | filter: invert(1);
716 | }
717 |
718 | /* Fix Special:Preferences */
719 | .dark-theme #wpTimeCorrection {
720 | background-color: transparent;
721 | }
722 |
723 | /* Fix Echo */
724 | .dark-theme .mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
725 | background-color: unset;
726 | }
727 | .dark-theme .mw-echo-ui-notificationItemWidget {
728 | background-color: var(--dark-bg-2);
729 | }
730 | .dark-theme .mw-echo-ui-notificationItemWidget:hover {
731 | background-color: var(--dark-bg-4);
732 | }
733 | .dark-theme .mw-echo-ui-notificationItemWidget-unread {
734 | background-color: #000;
735 | }
736 | .dark-theme .mw-echo-ui-notificationItemWidget-unread:hover {
737 | background-color: var(--dark-bg-1);
738 | }
739 | .dark-theme .mw-echo-ui-notificationItemWidget-content-message-header,
740 | .dark-theme .mw-echo-ui-notificationItemWidget-content-message-body {
741 | color: var(--font-color);
742 | }
743 | .dark-theme .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected {
744 | background-color: var(--dark-bg-1);
745 | }
746 | .dark-theme .mw-echo-ui-pageNotificationsOptionWidget-label-count {
747 | background-color: var(--dark-bg-2);
748 | }
749 | .dark-theme .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted,
750 | .dark-theme .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-pressed.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted {
751 | background-color: rgba(33, 78, 163, 0.1);
752 | }
753 | .dark-theme .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted {
754 | background-color: var(--dark-bg-2);
755 | color: var(--font-color);
756 | }
757 | .dark-theme .mw-echo-ui-menuItemWidget > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
758 | color: var(--font-color);
759 | }
760 | .dark-theme .mw-echo-special-nojs {
761 | filter: invert(1); /* doesn't look great but it works */
762 | }
763 |
764 | /* Fix references */
765 | .dark-theme ol.references li:target,
766 | .dark-theme sup.reference:target {
767 | background-color: #000;
768 | }
769 | .dark-theme #content sup.reference:target a,
770 | .dark-theme #content sup.reference:target a:visited {
771 | color: #cc0;
772 | }
773 |
--------------------------------------------------------------------------------
/resources/css/main.css:
--------------------------------------------------------------------------------
1 | .inner {
2 | margin: 0 auto;
3 | }
4 |
5 | /* Fonts */
6 |
7 | @font-face {
8 | font-family: "Liberation Sans";
9 | src: url("../LiberationSans-Regular.ttf");
10 | }
11 | @font-face {
12 | font-family: "Liberation Sans";
13 | src: url("../LiberationSans-Bold.ttf");
14 | font-weight: bold;
15 | }
16 | @font-face {
17 | font-family: "Liberation Sans";
18 | src: url("../LiberationSans-Italic.ttf");
19 | font-style: italic;
20 | }
21 | @font-face {
22 | font-family: "Liberation Sans";
23 | src: url("../LiberationSans-BoldItalic.ttf");
24 | font-style: italic;
25 | font-weight: bold;
26 | }
27 |
28 | :root {
29 | --nav-height: 50px;
30 | }
31 |
32 | /* Tags */
33 |
34 | html,
35 | body {
36 | display: block;
37 | margin: 0;
38 | background-color: #4280d7;
39 | padding: 0;
40 | color: #575e75;
41 | font-family: "Liberation Sans", "Helvetica Neue", "Helvetica", Arial, sans-serif;
42 | font-size: 16px;
43 | }
44 | body {
45 | width: 100%;
46 | height: 100vh;
47 | position: fixed;
48 | }
49 |
50 | /* Typography */
51 |
52 | h1,
53 | h2,
54 | h3,
55 | h4,
56 | h5 {
57 | margin: 0;
58 | border: 0;
59 | padding: 0;
60 | color: #6b6b6b;
61 | font-weight: bold;
62 | }
63 |
64 | h1 {
65 | font-size: 24px;
66 | }
67 |
68 | h2 {
69 | font-size: 21px;
70 | }
71 |
72 | h3 {
73 | font-size: 16px;
74 | }
75 |
76 | h4 {
77 | font-size: 14px;
78 | }
79 |
80 | h5 {
81 | font-size: 12px;
82 | }
83 |
84 | b,
85 | strong {
86 | font-weight: 500;
87 | }
88 |
89 |
90 | /* Links */
91 |
92 | a {
93 | cursor: pointer;
94 | color: #4d97ff;
95 | }
96 |
97 | a:link,
98 | a:visited,
99 | a:active {
100 | text-decoration: none;
101 | color: #4d97ff;
102 | }
103 |
104 | a:hover {
105 | text-decoration: none;
106 | color: #4280d7;
107 | }
108 |
109 | /* Classes */
110 |
111 | h1,
112 | h2,
113 | h3,
114 | h4,
115 | h5 {
116 | line-height: 1.7em;
117 | color: #575e75;
118 | }
119 |
120 | p {
121 | color: #575e75;
122 | }
123 |
124 | .box-content {
125 | font-size: 13px;
126 | }
127 |
128 | ::-moz-selection {
129 | background-color: rgba(77, 151, 255, 0.25);
130 | }
131 |
132 | ::selection {
133 | background-color: rgba(77, 151, 255, 0.25);
134 | }
135 |
136 | ol,
137 | ul {
138 | padding-left: 20px;
139 | font-weight: 300;
140 | }
141 |
142 | .mw-content-ltr ol,
143 | .mw-content-ltr ul {
144 | margin-left: 3.2em;
145 | }
146 |
147 | dl {
148 | line-height: 1.5rem;
149 | font-size: 1rem;
150 | font-weight: normal;
151 | }
152 |
153 | dl dt {
154 | font-weight: bold;
155 | }
156 |
157 | #not-nav {
158 | display: flex;
159 | flex-direction: column;
160 | height: calc(100vh - var(--nav-height));
161 | overflow-y: auto;
162 | }
163 |
164 | #view {
165 | display: inline-block;
166 | background-color: #fcfcfc;
167 | min-width: 100%;
168 | flex: 1 0 auto;
169 | }
170 |
171 | #view .left {
172 | width: 160px;
173 | }
174 |
175 | #view .right {
176 | width: 800px;
177 | }
178 |
179 | .mw-wiki-logo {
180 | background-repeat: no-repeat;
181 | height: 140px;
182 | display: block;
183 | background-position: center center;
184 | }
185 |
186 | .button {
187 | display: inline-block;
188 | margin: .5em 0;
189 | border: 0;
190 | border-radius: 5px;
191 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
192 | background-color: #7953c4;
193 | cursor: pointer;
194 | padding: .75em 1em;
195 | color: #fff;
196 | font-size: .8rem;
197 | font-weight: bold;
198 | }
199 |
200 | .button:hover {
201 | box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
202 | }
203 |
204 | .button:active {
205 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
206 | }
207 |
208 | .button:focus {
209 | outline: none;
210 | }
211 |
212 | .button.pass {
213 | background-color: #26d9bb;
214 | }
215 |
216 | .button.fail {
217 | background-color: #f49d25;
218 | }
219 |
220 | .button:disabled {
221 | box-shadow: none;
222 | }
223 |
224 | .dropdown {
225 | display: none;
226 | position: absolute;
227 | left: 0;
228 | margin-left: 0;
229 | border: 1px solid rgba(0, 0, 0, 0.1);
230 | border-radius: 0 0 5px 5px;
231 | background-color: #7953c4;
232 | padding: 10px;
233 | overflow: visible;
234 | color: #fff;
235 | font-size: .8125rem;
236 | font-weight: normal;
237 | width: max-content;
238 | z-index: 8;
239 | }
240 | .right .dropdown {
241 | left: inherit;
242 | right: 0;
243 | }
244 |
245 | .dropdown.open {
246 | display: block;
247 | white-space:nowrap;
248 | }
249 |
250 | .dropdown a:link,
251 | .dropdown a:visited,
252 | .dropdown a:active {
253 | background-color: transparent;
254 | color: #fff;
255 | }
256 |
257 | .dropdown>li {
258 | display: block;
259 | line-height: 30px;
260 | }
261 |
262 | .dropdown>li a {
263 | display: block;
264 | padding: 0 15px;
265 | }
266 |
267 | .dropdown>li a:hover {
268 | background-color: rgba(0, 0, 0, 0.1);
269 | text-decoration: none;
270 | }
271 |
272 | .dropdown>li.no-link {
273 | padding: 0 15px;
274 | }
275 |
276 | .input {
277 | transition: all .5s ease;
278 | margin-bottom: .75rem;
279 | border: 1px solid rgba(0, 0, 0, 0.1);
280 | border-radius: 5px;
281 | background-color: #fafafa;
282 | padding: 0 1rem;
283 | height: 3rem;
284 | color: #6b6b6b;
285 | font-size: .875rem;
286 | }
287 |
288 | .input:focus {
289 | transition: all .5s ease;
290 | outline: none;
291 | border: 1px solid #25aff4;
292 | }
293 |
294 | .input::-ms-reveal,
295 | .input::-ms-clear {
296 | display: none;
297 | }
298 |
299 | .row.no-label label {
300 | display: none;
301 | }
302 |
303 | #navigation {
304 | display: block;
305 | z-index: 8;
306 | border-bottom: 1px solid rgba(0, 0, 0, 0.1);
307 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
308 | background-color: #7953c4;
309 | width: 100%;
310 | height: var(--nav-height);
311 | box-sizing: border-box;
312 | }
313 |
314 | #navigation a, #navigation a:link {
315 | color: #fff;
316 | }
317 |
318 | #navigation .inner>ul {
319 | display: -webkit-flex;
320 | display: -ms-flexbox;
321 | display: flex;
322 | margin: 0;
323 | padding: 0;
324 | height: var(--nav-height);
325 | list-style: none;
326 | -webkit-flex-wrap: nowrap;
327 | -ms-flex-wrap: nowrap;
328 | flex-wrap: nowrap;
329 | -webkit-flex-direction: row;
330 | -ms-flex-direction: row;
331 | flex-direction: row;
332 | -webkit-justify-content: flex-start;
333 | -ms-flex-pack: start;
334 | justify-content: flex-start;
335 | line-height: 1.5em;
336 | }
337 |
338 | #navigation .inner>ul>li {
339 | display: inline-block;
340 | position: relative;
341 | float: left;
342 | margin: 0;
343 | height: 100%;
344 | -webkit-align-self: flex-start;
345 | -ms-flex-item-align: start;
346 | align-self: flex-start;
347 | }
348 |
349 | #navigation .inner>ul>li.right {
350 | float: right;
351 | margin-left: auto;
352 | -webkit-align-self: flex-end;
353 | -ms-flex-item-align: end;
354 | align-self: flex-end;
355 | }
356 |
357 | #navigation .inner>ul>li.right a:hover {
358 | background-color: rgba(0, 0, 0, 0.1);
359 | }
360 |
361 | #navigation .link>a {
362 | display: block;
363 | padding: 13px 15px 4px 15px;
364 | height: 33px;
365 | text-decoration: none;
366 | white-space: nowrap;
367 | color: #fff;
368 | font-size: .85rem;
369 | font-weight: bold;
370 | }
371 |
372 | #navigation .link>a:hover {
373 | background-color: rgba(0, 0, 0, 0.1);
374 | }
375 |
376 | #navigation .logo {
377 | margin-right: 10px;
378 | }
379 |
380 | #navigation .logo a,
381 | #navigation .content-actions .dropdown-toggle {
382 | display: block;
383 | transition: .15s ease all;
384 | border: 0;
385 | }
386 |
387 | #navigation .logo a {
388 | display: flex;
389 | height: 100%;
390 | align-items: center;
391 | justify-content: center;
392 | }
393 |
394 | #navigation .logo a {
395 | margin: 0 6px 0 0;
396 | }
397 |
398 | #navigation .logo a:hover,
399 | #navigation .content-actions .dropdown-toggle:hover {
400 | transition: .15s ease all;
401 | }
402 |
403 | #navigation .logo a:hover img {
404 | transform: scale(1.05, 1.05);
405 | }
406 |
407 | #navigation .content-actions .dropdown-toggle:hover {
408 | background-size: 27.5px 27.5px;
409 | }
410 |
411 | #navigation .inner>ul>li.search {
412 | margin: 0 20px;
413 | border-right: 0;
414 | color: #fff;
415 | -webkit-flex-grow: 3;
416 | -ms-flex-positive: 3;
417 | flex-grow: 3;
418 | }
419 |
420 | #navigation .inner>ul>li.search .form {
421 | margin: 0;
422 | }
423 |
424 | #navigation .inner>ul>li.search .input,
425 | #navigation .inner>ul>li.search .button {
426 | display: inline-block;
427 | margin-top: 5px;
428 | outline: none;
429 | border: 0;
430 | background-color: rgba(0, 0, 0, 0.1);
431 | height: 14px;
432 | }
433 |
434 | #navigation .inner>ul>li.search .input[type=text],
435 | #navigation .inner>ul>li.search .button[type=text] {
436 | transition: .15s ease background-color;
437 | padding: 0;
438 | padding-right: 10px;
439 | padding-left: 40px;
440 | width: calc(100% - 50px);
441 | height: 40px;
442 | color: #fff;
443 | font-size: .85em;
444 | }
445 |
446 | #navigation .inner>ul>li.search .input[type=text]::-webkit-input-placeholder,
447 | #navigation .inner>ul>li.search .button[type=text]::-webkit-input-placeholder {
448 | color: rgba(255, 255, 255, 0.75);
449 | }
450 |
451 | #navigation .inner>ul>li.search .input[type=text]:-ms-input-placeholder,
452 | #navigation .inner>ul>li.search .button[type=text]:-ms-input-placeholder {
453 | color: rgba(255, 255, 255, 0.75);
454 | }
455 |
456 | #navigation .inner>ul>li.search .input[type=text]::placeholder,
457 | #navigation .inner>ul>li.search .button[type=text]::placeholder {
458 | color: rgba(255, 255, 255, 0.75);
459 | }
460 |
461 | #navigation .inner>ul>li.search .input[type=text]:focus,
462 | #navigation .inner>ul>li.search .button[type=text]:focus {
463 | transition: .15s ease background-color;
464 | background-color: rgba(0, 0, 0, 0.2);
465 | }
466 |
467 | #navigation .inner>ul>li.search .btn-search {
468 | position: absolute;
469 | box-shadow: none;
470 | background-color: transparent;
471 | /* @embed */
472 | background-image: url("../nav-search-glass.png");
473 | background-repeat: no-repeat;
474 | background-position: center center;
475 | background-size: 14px 14px;
476 | width: 40px;
477 | height: 40px;
478 | }
479 |
480 | #navigation .inner>ul>li.search .btn-search:hover {
481 | box-shadow: none;
482 | }
483 |
484 | #navigation .login-dropdown {
485 | width: 200px;
486 | }
487 |
488 | #navigation .login-dropdown .button {
489 | padding: .75em;
490 | }
491 |
492 | #navigation .dropdown .row {
493 | margin-bottom: 1.25rem;
494 | }
495 |
496 | #navigation .dropdown .row input {
497 | margin: 0;
498 | height: 2.25rem;
499 | }
500 |
501 | #navigation .account-nav .dropdown-toggle,
502 | #navigation .content-actions .dropdown-toggle,
503 | #navigation .messages .dropdown-toggle {
504 | padding-top: 14px;
505 | }
506 |
507 | #navigation .account-nav .dropdown li,
508 | #navigation .content-actions .dropdown li,
509 | #navigation .messages .dropdown li {
510 | margin: 0;
511 | white-space: nowrap;
512 | }
513 |
514 | #navigation .account-nav>a,
515 | #navigation .content-actions>a,
516 | #navigation .messages>a {
517 | display: inline-block;
518 | overflow: hidden;
519 | text-overflow: ellipsis;
520 | font-size: .8125rem;
521 | font-weight: normal;
522 | }
523 |
524 | #navigation .account-nav>a.open,
525 | #navigation .content-actions>a.open {
526 | background-color: rgba(0, 0, 0, 0.1);
527 | }
528 |
529 | #navigation .account-nav>a:after,
530 | #navigation .create>a:after,
531 | #navigation .explore>a:after,
532 | #navigation .discuss>a:after,
533 | #navigation .tips>a:after,
534 | #navigation .about>a:after,
535 | #navigation .content-actions>a:after {
536 | display: inline-block;
537 | margin-left: 8px;
538 | /* @embed */
539 | background-image: url("../dropdown.png");
540 | background-repeat: no-repeat;
541 | background-position: center center;
542 | background-size: 50%;
543 | width: 20px;
544 | height: 20px;
545 | vertical-align: middle;
546 | content: " ";
547 | }
548 |
549 | #navigation .account-nav .dropdown,
550 | #navigation .content-actions .dropdown,
551 | #navigation .messages .dropdown,
552 | #navigation .create .dropdown,
553 | #navigation .explore .dropdown,
554 | #navigation .discuss .dropdown,
555 | #navigation .tips .dropdown,
556 | #navigation .about .dropdown {
557 | top: var(--nav-height);
558 | padding: 0;
559 | margin-top: 0;
560 | box-sizing: border-box;
561 | min-width: 100%;
562 | }
563 |
564 | #footer {
565 | display: block;
566 | background-color: #f2f2f2;
567 | padding: 10px 0;
568 | color: #6b6b6b;
569 | font-size: .85rem;
570 | flex-shrink: 0;
571 | }
572 |
573 | #footer .lists {
574 | display: -webkit-flex;
575 | display: -ms-flexbox;
576 | display: flex;
577 | text-align: center;
578 | -webkit-flex-direction: row;
579 | -ms-flex-direction: row;
580 | flex-direction: row;
581 | -webkit-flex-wrap: wrap;
582 | -ms-flex-wrap: wrap;
583 | flex-wrap: wrap;
584 | -webkit-justify-content: space-between;
585 | -ms-flex-pack: justify;
586 | justify-content: space-between;
587 | }
588 |
589 | #footer .lists dl {
590 | display: inline-block;
591 | vertical-align: top;
592 | text-align: left;
593 | font-size: .8rem;
594 | margin: 0 10px;
595 | }
596 |
597 | #footer .lists dt {
598 | display: block;
599 | margin-bottom: 8px;
600 | }
601 |
602 | #footer .lists dd {
603 | display: block;
604 | margin: 5px 0;
605 | line-height: 1.2rem;
606 | }
607 |
608 | #footer .lists dd a {
609 | font-weight: 400;
610 | }
611 |
612 | #footer .copyright {
613 | display: block;
614 | width: 100%;
615 | text-align: center;
616 | }
617 |
618 | #footer .copyright p {
619 | font-size: .7rem;
620 | }
621 |
622 | .box {
623 | display: inline-block;
624 | border: 1px solid #d9d9d9;
625 | box-sizing: border-box;
626 | border-radius: 10px 10px 0 0;
627 | background-color: #fff;
628 | width: 100%;
629 | }
630 |
631 | .box .box-header h4,
632 | .box .box-header h5 {
633 | line-height: normal;
634 | font-size: 1.1rem;
635 | }
636 |
637 | .box .box-header {
638 | display: block;
639 | clear: both;
640 | margin: 0;
641 | border-top: 1px solid #fff;
642 | border-bottom: 1px solid #d9d9d9;
643 | border-radius: 10px 10px 0 0;
644 | background-color: #f2f2f2;
645 | padding: 8px 20px;
646 | overflow: hidden;
647 | }
648 |
649 | .box .box-header h4,
650 | .box .box-header h5 {
651 | display: inline-block;
652 | float: left;
653 | }
654 |
655 | .box .box-header h5 {
656 | margin: 0;
657 | padding-left: 5px;
658 | text-transform: none;
659 | letter-spacing: normal;
660 | font-weight: normal;
661 | }
662 |
663 | .box .box-header p {
664 | display: inline-block;
665 | float: right;
666 | margin: 1px 0 0 0;
667 | padding: 0;
668 | font-size: .85rem;
669 | }
670 |
671 | .right .box .box-content {
672 | display: block;
673 | clear: both;
674 | background-color: #fff;
675 | padding: 8px 20px;
676 | }
677 |
678 | .left .box-content {
679 | margin: 0;
680 | padding-top: 10px;
681 | padding-bottom: 10px;
682 | }
683 |
684 | .left .box-content>* {
685 | margin-left: 20px;
686 | }
687 |
688 | .left .box-content ul {
689 | list-style: none;
690 | list-style-position: outside;
691 | margin: 0;
692 | }
693 |
694 | .left .box-content ul li {
695 | margin: 0;
696 | }
697 |
698 | .box .empty {
699 | margin-top: 20px;
700 | }
701 |
702 | #navigation ul>li.content-actions>a.dropdown-toggle {
703 | height: 25px;
704 | width: auto;
705 | min-width: 25px;
706 | padding: 12.5px;
707 | /* @embed */
708 | background-image: url('../Edit-pencil.png');
709 | background-size: 25px 25px;
710 | background-position: 12.5px center;
711 | background-repeat: no-repeat;
712 | }
713 |
714 | #navigation ul>li.content-actions>a.dropdown-toggle>div {
715 | height: 25px;
716 | width: 25px;
717 | display: inline-block;
718 | vertical-align: middle;
719 | }
720 |
721 | #navigation ul>li.messages>a {
722 | /* @embed */
723 | background-image: url('../nav-notifications.png');
724 | background-repeat: no-repeat;
725 | background-position: center center;
726 | background-size: 45%;
727 | transition: .15s ease background-size;
728 | padding-right: 10px;
729 | padding-left: 10px;
730 | width: 30px;
731 | overflow: hidden;
732 | text-indent: 50px;
733 | white-space: nowrap;
734 | }
735 |
736 | #navigation .messages>a:hover {
737 | background-size: 50%;
738 | }
739 |
740 | #navigation .messages .message-count {
741 | display: none;
742 | }
743 |
744 | #navigation .messages .message-count.show {
745 | display: block;
746 | position: absolute;
747 | top: .5rem;
748 | right: .25rem;
749 | border-radius: 1rem;
750 | background-color: #ffab1a;
751 | padding: 0 .25rem;
752 | text-indent: 0;
753 | line-height: 1rem;
754 | color: #fff;
755 | font-size: .7rem;
756 | font-weight: bold;
757 | }
758 |
759 | #lastmod {
760 | text-align: center;
761 | font-size: 11px;
762 | color: #6b6b6b;
763 | }
764 |
765 | .feet {
766 | list-style: none;
767 | display: block;
768 | text-align: center;
769 | font-size: 11px;
770 | color: #6b6b6b;
771 | margin-bottom: 20px;
772 | }
773 |
774 | .feet li {
775 | list-style: none;
776 | display: inline;
777 | margin-right: 10px;
778 | }
779 |
780 | .inner.mod-splash {
781 | margin-top: 20px;
782 | display: flex;
783 | flex-direction: row;
784 | gap: 20px;
785 | }
786 |
787 | .splash .box {
788 | margin-bottom: 20px;
789 | }
790 |
791 | .mw-indicators {
792 | display: inline-block;
793 | font-size: 1rem;
794 | float: right;
795 | }
796 | .mw-indicator {
797 | display: inline-block;
798 | font-size: 1rem;
799 | }
800 |
801 | .jump-to:not( :focus ) {
802 | display: block;
803 | position: absolute !important;
804 | clip: rect(1px, 1px, 1px, 1px);
805 | width: 1px;
806 | height: 1px;
807 | margin: -1px;
808 | border: 0;
809 | padding: 0;
810 | overflow: hidden;
811 | }
812 |
813 | /* MASTER ARTICLE STYLE */
814 |
815 | #content {
816 | display: block;
817 | font-family: "Liberation Sans", "Helvetica Neue", "Helvetica", Arial, sans-serif;
818 | color: black;
819 | overflow-x: auto;
820 | }
821 |
822 | #content p {
823 | color: inherit;
824 | }
825 |
826 | #content b,
827 | #content strong {
828 | font-weight: bold;
829 | }
830 |
831 | #content a.new, #content a.stub {
832 | color: #ba0000;
833 | }
834 |
835 | #content a.new:visited,
836 | #content a.stub:visited {
837 | color: #a55858;
838 | }
839 |
840 | #content a.new:hover,
841 | #content a.stub:hover {
842 | text-decoration: underline;
843 | }
844 |
845 | #content .previewnote p {
846 | color: red;
847 | }
848 |
849 | #content code,
850 | #content pre {
851 | border-color: #cecece;
852 | border-radius: 3px;
853 | font-family: monospace;
854 | }
855 |
856 | #content pre {
857 | white-space: pre;
858 | overflow-x: auto;
859 | }
860 | #content pre[class^=CodeMirror], #content pre[class*=CodeMirror] {
861 | white-space: pre-wrap;
862 | }
863 | #content .CodeMirror pre {
864 | border-radius: none;
865 | }
866 |
867 | #content code[class^=blocks],
868 | #content pre[class^=blocks] {
869 | border: none;
870 | background: none;
871 | }
872 |
873 | #content .mw-editsection {
874 | float: right;
875 | line-height: inherit;
876 | }
877 |
878 | #content h1,
879 | #content h2 {
880 | border-bottom: 1px solid #111;
881 | }
882 |
883 | #content p img {
884 | max-width: 100%;
885 | height: auto;
886 | }
887 |
888 | #content a.external {
889 | /* @embed */
890 | background-image: url("../External_link.png");
891 | background-size: 10px 10px;
892 | background-position: center right;
893 | background-repeat: no-repeat;
894 | padding-right: 13px;
895 | word-break: break-all;
896 | }
897 |
898 | #content .plainlinks a {
899 | background: none;
900 | padding-right: 0;
901 | }
902 |
903 | #content hr {
904 | height: 1px;
905 | color: #111;
906 | background-color: #111;
907 | border: 0;
908 | margin: 0.2em 0;
909 | }
910 |
911 | #content h1,
912 | #content h2,
913 | #content h3,
914 | #content h4,
915 | #content h5 {
916 | margin-bottom: 1em;
917 | color: inherit;
918 | }
919 |
920 | #content dl {
921 | line-height: inherit;
922 | font-size: inherit;
923 | }
924 |
925 | #content a:visited {
926 | text-decoration: none;
927 | color: #0a85c2;
928 | }
929 |
930 | /* MASTER ARTICLE STYLE END */
931 |
932 | #catlinks {
933 | border-radius: 5px;
934 | border: 1px solid #d9d9d9;
935 | }
936 |
937 | /* Preferences styling */
938 |
939 | #preftoc ul {
940 | list-style: none;
941 | }
942 |
943 | #preftoc li {
944 | display: inline-block;
945 | padding: 1px 5px;
946 | border-right: 1px solid #6b6b6b;
947 | border-top: 1px solid #6b6b6b;
948 | border-bottom: 1px solid #6b6b6b;
949 | }
950 |
951 | #preftoc li.selected {
952 | background-color: #f49d25;
953 | }
954 |
955 | #preftoc li.selected a {
956 | color: #fff;
957 | }
958 |
959 | #preftoc li:nth-child(1) {
960 | border-left: 1px solid #6b6b6b;
961 | border-radius: 5px 0 0 5px;
962 | }
963 |
964 | #preftoc li:last-child {
965 | border-radius: 0 5px 5px 0;
966 | }
967 |
968 | #preftoc *:focus {
969 | outline: none;
970 | }
971 |
972 | #firstHeading {
973 | overflow-wrap: break-word;
974 | }
975 |
976 | #mw-input-wpscratchwikiskin-header-color {
977 | font-family: monospace;
978 | }
979 |
980 | .mw-notification {
981 | border-radius: 5px;
982 | }
983 |
984 | /* recent changes */
985 | .mw-rcfilters-ui-overlay {
986 | z-index: 1;
987 | }
988 | .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget.oo-ui-buttonGroupWidget {
989 | height: unset;
990 | }
991 |
992 | /* VisualEditor fixes/hacks */
993 | .ve-ui-context .oo-ui-popupWidget-body.oo-ui-clippableElement-clippable {
994 | height: unset !important;
995 | }
996 | .ve-ui-context-menu.ve-ui-desktopContext-menu {
997 | position: initial;
998 | }
999 |
--------------------------------------------------------------------------------
/resources/css/mobile-00.css:
--------------------------------------------------------------------------------
1 | .inner {
2 | width: 982px;
3 | }
4 | #navigation .inner>ul>.sidebar-toggle {
5 | display: none;
6 | }
7 |
--------------------------------------------------------------------------------
/resources/css/mobile-10.css:
--------------------------------------------------------------------------------
1 | .inner {
2 | width: 680px;
3 | }
4 | #navigation .inner .explore,
5 | #navigation .inner .about,
6 | #navigation .inner .discuss {
7 | display: none;
8 | }
--------------------------------------------------------------------------------
/resources/css/mobile-20.css:
--------------------------------------------------------------------------------
1 | .inner {
2 | width: 520px;
3 | }
4 | #navigation .inner .discuss,
5 | #navigation .inner .explore,
6 | #navigation .inner .about,
7 | #navigation .inner .tips {
8 | display: none;
9 | }
--------------------------------------------------------------------------------
/resources/css/mobile-30.css:
--------------------------------------------------------------------------------
1 | .inner {
2 | width: calc(100vw - 20px);
3 | }
4 | #navigation .inner .discuss,
5 | #navigation .inner .explore,
6 | #navigation .inner .tips,
7 | #navigation .inner .about,
8 | #navigation .inner .create {
9 | display: none;
10 | }
11 | #footer .lists {
12 | -webkit-justify-content: space-around;
13 | justify-content: space-around;
14 | }
15 | #navigation .content-actions>a:after {
16 | display: none;
17 | }
18 | #navigation .account-nav > a.dropdown-toggle {
19 | display: block;
20 | width: 50px;
21 | height: 50px;
22 | padding: 0;
23 | /* @embed */
24 | background-image: url("../User.svg");
25 | background-size: 25px 25px;
26 | background-position: center center;
27 | background-repeat: no-repeat;
28 | filter: invert(100%);
29 | }
30 | #navigation .account-nav .profile-name {
31 | display: none;
32 | }
33 | #navigation .account-nav > a:after {
34 | display: none;
35 | }
36 | #navigation .content-actions>a.dropdown-toggle {
37 | width: 25px;
38 | }
39 | #navigation .inner > ul > li.search {
40 | margin: 0;
41 | }
42 | #view {
43 | padding: 0 10px;
44 | min-width: calc(100% - 20px);
45 | }
--------------------------------------------------------------------------------
/resources/css/mobile-40.css:
--------------------------------------------------------------------------------
1 | #navigation .inner .logo {
2 | display: none;
3 | }
4 |
--------------------------------------------------------------------------------
/resources/css/mobile.css:
--------------------------------------------------------------------------------
1 | #view .left {
2 | position: fixed;
3 | background-color: rgba(255, 255, 255, 0.9);
4 | left: -185px;
5 | top: 0px;
6 | padding: 0 10px;
7 | height: calc(100% - 50px);
8 | z-index: 7;
9 | transition: left 0.5s;
10 | overflow-y: auto;
11 | margin-top: 50px;
12 | }
13 | #view .right {
14 | margin: auto 0;
15 | width: 100%;
16 | }
17 | #navigation .sidebar-toggle a {
18 | width: 50px;
19 | height: 50px;
20 | display: block;
21 | /* @embed */
22 | background-image: url("../Hamburger_icon.svg");
23 | background-size: 25px 25px;
24 | background-position: center center;
25 | background-repeat: no-repeat;
26 | filter: invert(100%);
27 | }
28 |
--------------------------------------------------------------------------------
/resources/dropdown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/InternationalScratchWiki/ScratchWikiSkin2/0d75fc41362aa4b5d21aefc1dc6e27bb40f2b379/resources/dropdown.png
--------------------------------------------------------------------------------
/resources/nav-notifications.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/InternationalScratchWiki/ScratchWikiSkin2/0d75fc41362aa4b5d21aefc1dc6e27bb40f2b379/resources/nav-notifications.png
--------------------------------------------------------------------------------
/resources/nav-search-glass.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/InternationalScratchWiki/ScratchWikiSkin2/0d75fc41362aa4b5d21aefc1dc6e27bb40f2b379/resources/nav-search-glass.png
--------------------------------------------------------------------------------
/skin.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ScratchWikiSkin",
3 | "author": "Original skin by JSO. Rewrite to update style and registration by Kenny2scratch. Contributions made from jvvg, blob8108, scmb1, -PRO-,",
4 | "url": "https://github.com/InternationalScratchWiki/ScratchWikiSkin2",
5 | "descriptionmsg": "scratchwikiskin-desc",
6 | "namemsg": "skinname-scratchwikiskin2",
7 | "license-name": "MIT",
8 | "type": "skin",
9 | "ValidSkinNames": {
10 | "scratchwikiskin2": "ScratchWikiSkin"
11 | },
12 | "AutoloadClasses": {
13 | "SkinScratchWikiSkin": "ScratchWikiSkin.skin.php",
14 | "ScratchWikiSkinTemplate": "ScratchWikiSkinTemplate.php",
15 | "ScratchWikiSkinHooks": "ScratchWikiSkin.hooks.php"
16 | },
17 | "Hooks": {
18 | "GetPreferences": "main",
19 | "OutputPageBodyAttributes": "main"
20 | },
21 | "HookHandlers": {
22 | "main": {
23 | "class": "ScratchWikiSkinHooks",
24 | "services": ["UserOptionsLookup"]
25 | }
26 | },
27 | "MessagesDirs": {
28 | "ScratchWikiSkin": "i18n"
29 | },
30 | "ResourceModules": {
31 | "skins.scratchwikiskin2": {
32 | "class": "MediaWiki\\ResourceLoader\\SkinModule",
33 | "features": {
34 | "content-links": true,
35 | "content-media": true,
36 | "interface-message-box": true,
37 | "interface-category": true,
38 | "content-tables": true,
39 | "i18n-ordered-lists": true,
40 | "i18n-all-lists-margins": true,
41 | "i18n-headings": true,
42 | "elements": true,
43 | "interface": true,
44 | "logo": true
45 | },
46 | "position": "top",
47 | "styles": {
48 | "resources/css/main.css": {
49 | "media": "screen"
50 | },
51 | "resources/css/dark.css": {
52 | "media": "screen"
53 | },
54 | "resources/css/mobile.css": {
55 | "media": "only screen and (max-width: 981.4px)"
56 | },
57 | "resources/css/mobile-40.css": {
58 | "media": "only screen and (max-width: 351.4px)"
59 | },
60 | "resources/css/mobile-30.css": {
61 | "media": "only screen and (max-width: 519.4px)"
62 | },
63 | "resources/css/mobile-20.css": {
64 | "media": "only screen and (min-width: 519.5px) and (max-width: 679.4px)"
65 | },
66 | "resources/css/mobile-10.css": {
67 | "media": "only screen and (min-width: 679.5px) and (max-width: 981.4px)"
68 | },
69 | "resources/css/mobile-00.css": {
70 | "media": "only screen and (min-width: 981.5px)"
71 | }
72 | }
73 | }
74 | },
75 | "ResourceFileModulePaths": {
76 | "localBasePath": "",
77 | "remoteSkinPath": "ScratchWikiSkin2"
78 | },
79 | "config": {
80 | "SWS2JoinBox": {
81 | "value": true
82 | },
83 | "SWS2ForceDarkTheme": {
84 | "value": false
85 | }
86 | },
87 | "manifest_version": 2,
88 | "requires": {
89 | "MediaWiki": ">= 1.35.0"
90 | }
91 | }
92 |
--------------------------------------------------------------------------------