MediaWiki:Mobile.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
1 /* <pre> */
2 body {
3 font-family: system-ui, -apple-system, Roboto, Helvetica, sans-serif;
4 }
5
6 @media all and (max-width: 320px) {
7 body {
8 font-size: 0.9em;
9 }
10
11 }
12
13 #mw-content-text {
14 line-height: 1.7em;
15 }
16
17 .pre-content h1,
18 .content h1,
19 .content h2 {
20 font-weight: bold;
21 }
22
23 body {
24 background: var(--body-background-color);
25 color: var(--text-color);
26 }
27
28 select {
29 color: var(--text-color);
30 }
31
32 a:not( [ href ] ) {
33 color: inherit;
34 }
35
36 a.external,
37 .mw-parser-output a.external {
38 background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg fill='%23906039'%3E%3Cpath d='M8.9 8.9H1.1V1.1h2.8V0H1.1C.5 0 0 .5 0 1.1v7.8C0 9.5.5 10 1.1 10h7.8c.6 0 1.1-.5 1.1-1.1V6.1H8.9v2.8z'/%3E%3Cpath d='M10 0H5.6l1.8 1.8L4.2 5l.8.8 3.2-3.2L10 4.4V0z'/%3E%3C/g%3E%3C/svg%3E");
39 }
40
41 .pre-content h1 {
42 text-align: center;
43 }
44
45 .content .mw-parser-output > h2,
46 .content .section-heading {
47 border-color: var(--sidebar);
48 }
49
50 .content .mw-parser-output > h2,
51 .content .section-heading {
52 border-color: var(--sidebar);
53 }
54
55 .content .plainlist ol,
56 .content .plainlist ul {
57 padding: 0;
58 }
59
60 .content p {
61 margin: 0.5em 0;
62 }
63
64 .content hr {
65 background: none;
66 border-color: var(--sidebar);
67 border-style: solid;
68 border-width: 1px 0 0 0;
69 height: initial;
70 }
71
72 .content kbd,
73 .content samp {
74 border: none;
75 }
76
77 .content code,
78 .content pre {
79 background-color: var(--mw-code-background-color);
80 border: 1px solid var(--body-border);
81 }
82
83 #mw-mf-page-center {
84 background-color: transparent;
85 }
86
87 .header {
88 border-top: none;
89 }
90
91 .header-container.header-chrome {
92 background: var(--body-background-image) var(--body-background-color) no-repeat;
93 background-color: var(--body-background-color);
94 background-position: 0 50%;
95 background-size: 900px;
96 box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
97 }
98
99 .header-container .header .search-box {
100 text-align: right;
101 }
102
103 .header-container .header .search {
104 box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
105 }
106
107 .header-container .notification-count {
108 border-radius: 50%;
109 }
110
111 .header-container .notification-count.notification-unseen {
112 background: none;
113 }
114
115 .header-container .branding-box {
116 opacity: 1;
117 }
118
119 .overlay {
120 background: var(--body-main);
121 }
122
123 .overlay textarea {
124 color: var(--text-color);
125 }
126
127 .overlay.search-overlay {
128 background: var(--body-main);
129 }
130
131 .overlay.search-overlay .results,
132 .overlay.search-overlay .search-feedback {
133 background-color: var(--body-light);
134 }
135
136 .overlay.search-overlay .search-content {
137 border-color: var(--body-mid);
138 }
139
140 .overlay .license {
141 color: var(--base-text-color);
142 }
143
144 .overlay .panel {
145 border-color: var(--sidebar);
146 }
147
148 .overlay .content-header {
149 background-color: var(--body-light);
150 border-color: transparent;
151 }
152
153 .overlay.overlay-loading {
154 background: var(--ooui-window-background);
155 }
156
157 .overlay .overlay-content {
158 background: var(--body-main);
159 }
160
161 .page-summary h2,
162 .page-summary h3 {
163 color: var(--text-color);
164 }
165
166 .page-list li,
167 .topic-title-list li,
168 .site-link-list li {
169 border-color: var(--body-mid);
170 }
171
172 .overlay-enabled .overlay:not(.editor-overlay),
173 .overlay-enabled #mw-mf-page-center {
174 overflow-y: scroll;
175 }
176
177 .overlay-header-container,
178 .overlay-footer-container {
179 background-color: var(--body-background-color);
180 border-color: transparent;
181 }
182
183 .editor-overlay .wikitext-editor {
184 color: var(--text-color);
185 }
186
187 .editor-overlay .overlay-header {
188 outline-color: transparent;
189 }
190
191 .editor-overlay .summary-request {
192 color: var(--text-color);
193 }
194
195 .editor-overlay .editor-switcher {
196 border: none;
197 }
198
199 .action-submit .mw-editnotice .action-edit .mw-editnotice,
200 .action-submit .mw-editTools,
201 .action-edit .mw-editTools,
202 .action-submit .preview-limit-report-wrapper,
203 .action-edit .preview-limit-report-wrapper,
204 .action-submit .diff-otitle,
205 .action-edit .diff-otitle,
206 .action-submit .diff-ntitle,
207 .action-edit .diff-ntitle,
208 .action-submit #section_0,
209 .action-edit #section_0,
210 .action-submit #editpage-copywarn,
211 .action-edit #editpage-copywarn,
212 .action-submit #mw-anon-edit-warning,
213 .action-edit #mw-anon-edit-warning {
214 color: var(--byline-color);
215 }
216
217 .wikitext-editor {
218 background-color: var(--body-main);
219 }
220
221 .ve-mobile-fakeToolbar {
222 border: none;
223 }
224
225 .ve-mobile-fakeToolbar-container {
226 background: var(--body-background-color);
227 border: none;
228 }
229
230 .ve-mobile-fakeToolbar .mw-ui-icon-mf-spinner {
231 border-color: transparent;
232 }
233
234 .ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .ve-ui-toolbar-group-back {
235 border-color: transparent;
236 }
237
238 .ve-ui-mobileContext {
239 background-color: var(--body-light);
240 border-color: var(--body-light);
241 }
242
243 .ve-ui-mobileContext .ve-ui-linearContextItem-body-action-wrapper {
244 border-color: var(--body-border);
245 }
246
247 .ve-ui-linearContextItem-foot:not(:empty) {
248 border-color: var(--body-border);
249 }
250
251 .ve-ui-mwSaveDialog-options {
252 backgroubd-color: var(--body-light);
253 border-color: var(--body-mid);
254 }
255
256 .page-actions-menu {
257 border-color: var(--sidebar);
258 }
259
260 #language-selector {
261 display: none;
262 }
263
264 .minerva__tab-container .minerva__tab {
265 color: var(--text-color);
266 }
267
268 .minerva__tab-container .minerva__tab.new,
269 .minerva__tab-container .minerva__tab.new:visited,
270 .minerva__tab-container .minerva__tab.new:hover,
271 .minerva__tab-container .minerva__tab.new:active {
272 color: var(--redlink-color);
273 }
274
275 .minerva__tab-container .minerva__tab.selected {
276 border-color: var(--body-border);
277 }
278
279 .heading-holder .tagline {
280 color: var(--base-heading-color);
281 }
282
283 .minerva-footer {
284 border: none;
285 }
286
287 .mw-footer > .post-content {
288 margin-top: 32px;
289 }
290
291 .mw-footer > .post-content > .minerva-footer-logo {
292 display: none;
293 }
294
295 .mw-footer .hlist li:after {
296 color: var(--background-text-color);
297 }
298
299 .last-modified-bar {
300 border-top: 1px solid;
301 border-color: transparent;
302 background: none;
303 color: var(--text-color);
304 }
305
306 .last-modified-bar a,
307 .last-modified-bar a:active,
308 .last-modified-bar a:visited,
309 .last-modified-bar .last-modified-text-accent {
310 color: var(--background-text-color);
311 }
312
313 .last-modified-bar.active,
314 .last-modified-bar.active:active,
315 .last-modified-bar.active:visited,
316 .last-modified-bar.active .last-modified-text-accent {
317 color: #fff;
318 }
319
320 .mw-ui-icon-mf-expand-gray:not(.mw-ui-icon-mf-expand-invert):before {
321 background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eexpand%3C/title%3E%3Cg fill=%22%2354595d%22%3E%3Cpath d=%22M17.5 4.75l-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z%22/%3E%3C/g%3E%3C/svg%3E");
322 }
323
324 #content {
325 border-top: none;
326 }
327
328 .toggle-list__list {
329 background-color: var(--wikitable-bg);
330 }
331
332 .toggle-list-item__anchor:visited,
333 .toggle-list-item__anchor:active {
334 color: var(--base-text-color);
335 }
336
337 .toggle-list-item:hover {
338 background: var(--wikitable-bg-lighter);
339 }
340
341 .toggle-list-item__label {
342 color: var(--base-text-color);
343 }
344
345 .mw-ui-icon-wikimedia-search-base20:before {
346 background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Esearch%3C/title%3E%3Cg fill='white'%3E%3Cpath fill-rule='evenodd' d='M12.2 13.6a7 7 0 111.4-1.4l5.4 5.4-1.4 1.4-5.4-5.4zM13 8A5 5 0 113 8a5 5 0 0110 0z'/%3E%3C/g%3E%3C/svg%3E%0A");
347 }
348
349 .mw-ui-icon-wikimedia-menu-base20:before {
350 background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Emenu%3C/title%3E%3Cg fill='white'%3E%3Cpath d='M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z'/%3E%3C/g%3E%3C/svg%3E%0A");
351 }
352
353 .mw-ui-icon-wikimedia-bellOutline-base20:before {
354 background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Ebell%3C/title%3E%3Cg fill='white'%3E%3Cpath d='M11.5 2.19C14.09 2.86 16 5.2 16 8v6l2 2v1H2v-1l2-2V8c0-2.8 1.91-5.14 4.5-5.81V1.5C8.5.67 9.17 0 10 0s1.5.67 1.5 1.5v.69zM10 4C7.79 4 6 5.79 6 8v7h8V8c0-2.21-1.79-4-4-4zM8 18h4c0 1.1-.9 2-2 2s-2-.9-2-2z'/%3E%3C/g%3E%3C/svg%3E%0A");
355 }
356
357 .mw-ui-icon-minerva-userAvatarOutline:before {
358 background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Euser avatar%3C/title%3E%3Cg fill='white'%3E%3Cpath d='M10 8c1.7 0 3.06-1.35 3.06-3S11.7 2 10 2 6.94 3.35 6.94 5 8.3 8 10 8zm0 2c-2.8 0-5.06-2.24-5.06-5S7.2 0 10 0s5.06 2.24 5.06 5-2.26 5-5.06 5zm-7 8h14v-1.33c0-1.75-2.31-3.56-7-3.56s-7 1.81-7 3.56V18zm7-6.89c6.66 0 9 3.33 9 5.56V20H1v-3.33c0-2.23 2.34-5.56 9-5.56z'/%3E%3C/g%3E%3C/svg%3E%0A");
359 }
360
361 @media all and (min-width: 1000px) {
362 .mw-ui-icon-with-label-desktop,
363 .mw-ui-icon-with-label-desktop:hover,
364 .mw-ui-icon-with-label-desktop:focus,
365 .mw-ui-icon-with-label-desktop:active,
366 .mw-ui-icon-with-label-desktop:visited {
367 color: var(--base-text-color) !important;
368 }
369
370 }
371
372 .header-action .mw-ui-icon-mf-close-base20:before {
373 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Eclose%3C/title%3E%3Cg fill='white'%3E%3Cpath d='M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z'/%3E%3Cpath d='M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z'/%3E%3C/g%3E%3C/svg%3E");
374 }
375
376 #mw-mf-page-left {
377 background-color: var(--body-background-color);
378 }
379
380 #mw-mf-page-left .secondary-action {
381 border-left-color: var(--body-mid);
382 }
383
384 #mw-mf-page-left ul li {
385 background-color: var(--body-main);
386 border-color: var(--body-mid);
387 }
388
389 #mw-mf-page-left ul li a {
390 color: var(--base-text-color);
391 }
392
393 #mw-mf-page-left ul li a:hover {
394 box-shadow: inset 4px 0 0 0 var(--link-color);
395 }
396
397 #mw-mf-page-left ul.hlist li a {
398 color: var(--background-link-color);
399 }
400
401 #mw-mf-page-left ul.hlist li a span {
402 font-size: 0.8125rem;
403 }
404
405 .notifications-overlay.navigation-drawer {
406 box-shadow: -1px 0 8px 0 rgba(0, 0, 0, 0.35);
407 }
408
409 .notifications-overlay .mw-echo-ui-actionMenuPopupWidget-menu {
410 border: none;
411 }
412
413 .mw-ui-anchor.mw-ui-progressive,
414 .mw-ui-anchor.mw-ui-progressive:active,
415 .mw-ui-anchor.mw-ui-progressive:hover {
416 color: var(--link-color);
417 }
418
419 .minerva-talk-full-page-button {
420 background-color: var(--body-main);
421 border-color: var(--body-dark);
422 color: var(--link-color);
423 }
424
425 .minerva-talk-content-explained {
426 border-color: var(--sidebar);
427 color: var(--base-text-color);
428 }
429
430 .talk-overlay .comment .wikitext-editor {
431 border-color: var(--body-border);
432 }
433
434 .client-js .skin-minerva--talk-simplified .section-heading {
435 border-color: var(--sidebar);
436 }
437
438 .mw-notification a,
439 .toast a {
440 color: var(--link-color);
441 }
442
443 .drawer {
444 background-color: var(--body-light);
445 }
446
447 .drawer.references-drawer {
448 background-color: var(--body-light);
449 color: var(--text-color);
450 }
451
452 .drawer.references-drawer a {
453 color: var(--link-color);
454 }
455
456 .drawer.references-drawer .references-drawer__title {
457 color: var(--text-color);
458 }
459
460 .drawer.references-drawer .mw-ui-icon::before {
461 filter: brightness(0);
462 }
463
464 .cta-holder {
465 background: var(--body-light);
466 }
467
468 .cta-holder .desc {
469 color: var(--byline-color);
470 }
471
472 .mw-tag-marker {
473 border-color: var(--body-border);
474 }
475
476 .oo-ui-toolGroup {
477 background: var(--body-background-color);
478 }
479
480 .load-fail-msg {
481 color: var(--text-color);
482 }
483
484 .load-fail-msg-link a {
485 color: var(--link-color);
486 }
487
488 .image-details {
489 background-color: var(--body-light);
490 border-color: transparent;
491 }
492
493 .mw-recentchanges-toplinks th {
494 font-size: 90%;
495 }
496
497 .mw-changeslist-legend {
498 margin-left: 0;
499 }
500
501 @media all and (min-width: 720px) {
502 .ns-special .pre-content {
503 background-color: transparent;
504 }
505
506 .ns-special .mw-body {
507 background: var(--body-main);
508 }
509
510 .ns-special .mw-body form {
511 background: transparent;
512 }
513
514 }
515
516 form.mw-mf-settings .oo-ui-fieldLayout,
517 form.mw-mf-settings .oo-ui-fieldLayout:first-child {
518 border-color: var(--body-mid);
519 }
520
521 .ns-special .content-header {
522 border-bottom-color: var(--body-dark);
523 }
524
525 .action-history .mw-history-compareselectedversions {
526 background-color: var(--body-main);
527 }
528
529 .action-history #pagehistory li:not(.selected) {
530 border-bottom-color: var(--sidebar);
531 }
532
533 ul.mw-contributions-list li,
534 ul.special li {
535 border-color: var(--sidebar);
536 }
537
538 .page-list li > a:not(.mw-ui-icon-element),
539 .topic-title-list li > a:not(.mw-ui-icon-element),
540 .site-link-list li > a:not(.mw-ui-icon-element) {
541 color: var(--byline-color);
542 }
543
544 .page-list.side-list .list-thumb,
545 .topic-title-list.side-list .list-thumb,
546 .site-link-list.side-list .list-thumb {
547 color: var(--text-color);
548 }
549
550 .mw-mf-user {
551 color: var(--text-color);
552 }
553
554 .diff-editfont-monospace {
555 font-family: monospace,monospace;
556 }
557
558 :root {
559 --diff-deletedline-background: #fbc0ba;
560 }
561
562 .minoredit {
563 background: var(--body-mid);
564 }
565
566 #mw-mf-diffview .mw-mf-diff-date {
567 color: var(--byline-color);
568 }
569
570 #mw-mf-diffview .mw-diff-inline-deleted del,
571 #mw-mf-diffview .mw-diff-inline-changed del {
572 background: var(--diff-deletedline-background);
573 color: var(--diff-deletedline-color);
574 border-radius: 0.33em;
575 }
576
577 #mw-mf-diffview .mw-diff-inline-added ins,
578 #mw-mf-diffview .mw-diff-inline-changed ins {
579 background: var(--diff-addedline-background);
580 color: var(--diff-addedline-color);
581 border-radius: 0.33em;
582 }
583
584 #mw-mf-diffview .mw-diff-inline-moved {
585 background: var(--diff-context-background);
586 }
587
588 #mw-mf-diffview #mw-mf-userinfo {
589 background: var(--body-light);
590 border-top-color: var(--body-border);
591 }
592
593 #mw-mf-diffview #mw-mf-userinfo .mw-mf-edit-count {
594 color: var(--text-color);
595 }
596
597 #mw-mf-diffview #mw-mf-userinfo .mw-mf-edit-count div {
598 color: var(--base-text-color);
599 }
600
601 .content table.relative-location {
602 display: table;
603 }
604
605 .floornumber-us {
606 display: none;
607 }
608
609 div.hatnote {
610 padding: 5px 7px;
611 color: var(--text-color);
612 font-size: 0.8125rem;
613 background-color: var(--body-mid);
614 margin: 0 0 0.5em 0;
615 overflow: hidden;
616 }
617
618 .tbz-check {
619 display: none;
620 }
621
622 @media screen and (max-width: 719px) {
623 .pollquestion {
624 width: auto;
625 }
626
627 .transcript {
628 width: auto;
629 margin: 20px auto;
630 }
631
632 .musicplayer {
633 clear: both !important;
634 float: none !important;
635 width: 100%;
636 max-width: 100%;
637 text-align: center;
638 margin-left: 0;
639 }
640
641 }
642
643 .infobox {
644 font-size: 85%;
645 background-color: var(--body-light);
646 border: 1px solid var(--body-border);
647 box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
648 table-layout: fixed;
649 }
650
651 .content .infobox {
652 display: table;
653 }
654
655 .content .infobox caption {
656 display: table-caption;
657 }
658
659 .infobox .infobox-header {
660 color: var(--infobox-text-color);
661 font-size: 1.15em;
662 background: var(--body-dark);
663 padding: 0.5em 0;
664 text-align: center;
665 }
666
667 .infobox .infobox-subheader {
668 background: var(--body-dark);
669 line-height: 2em;
670 text-align: center;
671 }
672
673 .infobox .infobox-subheader a {
674 color: var(--infobox-text-color);
675 }
676
677 .infobox th:not(.infobox-nested):not(.infobox-subheader):not(.infobox-header) {
678 text-align: right;
679 vertical-align: top;
680 border-right: 0.175em solid var(--body-dark);
681 padding: 0.2em 0.5em;
682 }
683
684 .infobox caption.infobox-caption {
685 text-align: center;
686 }
687
688 .infobox td {
689 padding: 0.25em 0.5em;
690 line-height: 1.6em;
691 padding-bottom: 0.6em;
692 }
693
694 .infobox td.infobox-nested {
695 padding: 0.25em 0;
696 line-height: 1em;
697 }
698
699 .infobox .infobox-padding {
700 height: 0.5em;
701 padding: 0;
702 border: 0;
703 }
704
705 .infobox .infobox-image {
706 text-align: center;
707 }
708
709 .infobox .infobox-image.inventory-image {
710 height: 32px;
711 }
712
713 .infobox .infobox-nested {
714 text-align: center;
715 }
716
717 .infobox .infobox-nested + .infobox-nested {
718 border-left: 0.175em solid var(--body-dark);
719 }
720
721 .infobox .infobox-full-width-content {
722 max-width: 300px;
723 text-align: center;
724 overflow-x: hidden;
725 padding: 0;
726 }
727
728 .skill-info a[href$="?action=edit"] + a[href$="?action=edit"] {
729 display: none;
730 }
731
732 .infobox-bonuses {
733 float: none;
734 table-layout: fixed;
735 font-size: 100%;
736 }
737
738 table.infobox-switch.infobox-bonuses {
739 display: block !important;
740 }
741
742 .content .infobox-bonuses {
743 display: block;
744 }
745
746 .infobox-bonuses tbody {
747 border: 1px solid var(--body-border);
748 }
749
750 .infobox-bonuses .infobox-bonuses-image {
751 text-align: center;
752 vertical-align: middle;
753 border: 1px solid var(--body-border);
754 }
755
756 .infobox-bonuses .infobox-bonuses-image-caption {
757 font-size: 0.85em;
758 }
759
760 .infobox-bonuses .infobox-subheader {
761 background: var(--body-dark);
762 color: var(--infobox-text-color);
763 line-height: 2em;
764 border-top: none;
765 border-bottom: none;
766 }
767
768 .infobox-bonuses .infobox-subheader a {
769 color: var(--infobox-text-color);
770 }
771
772 .infobox-bonuses .infobox-subheader + .infobox-subheader {
773 border-left: 0.175em solid var(--body-light);
774 }
775
776 .infobox-bonuses a {
777 font-weight: bold;
778 }
779
780 .poh-room {
781 background-color: var(--infobox-room-poh-color);
782 margin: auto;
783 width: 100px;
784 }
785
786 .poh-room img {
787 display: block;
788 }
789
790 .poh-room-row {
791 display: flex;
792 }
793
794 .poh-room-text {
795 margin: auto;
796 width: 92px;
797 }
798
799 .infobox-buttons {
800 margin-top: 0.5em;
801 text-align: center;
802 }
803
804 .infobox-bottom-links {
805 display: none;
806 }
807
808 .advanced-data {
809 display: none;
810 }
811
812 @media screen and (min-width: 720px) {
813 .content table.infobox {
814 float: right;
815 margin-top: 0.5em;
816 margin-left: 1em;
817 width: 300px !important;
818 }
819
820 .content table.infobox.skill-info {
821 float: none;
822 margin: 0 0 1em 0;
823 }
824
825 .content table.infobox.infobox-bonuses {
826 display: table;
827 float: none;
828 margin: 0;
829 width: 100% !important;
830 max-width: 600px;
831 }
832
833 }
834
835 .multi-infobox {
836 margin-top: 0.5em;
837 margin-bottom: 2.5em;
838 }
839
840 .multi-infobox .tabber {
841 margin: 0;
842 }
843
844 .multi-infobox .tabber .tabbernav {
845 text-align: center;
846 margin-left: 0;
847 }
848
849 .mw-body .multi-infobox .tabber .tabbertab {
850 padding: 5px;
851 }
852
853 .multi-infobox table.infobox {
854 margin: 0;
855 }
856
857 .multi-infobox .infobox-buttons {
858 margin-top: 0;
859 }
860
861 @media screen and (min-width: 720px) {
862 .multi-infobox {
863 float: right;
864 margin-left: 1em;
865 width: 300px;
866 }
867
868 }
869
870 @media screen and (max-width: 720px) {
871 .inventorytable.storage-left,
872 .lootingbagtable.storage-left,
873 .runepouchtable.storage-left {
874 margin-right: auto;
875 clear: none;
876 float: none;
877 }
878
879 .inventorytable.storage-right,
880 .lootingbagtable.storage-right,
881 .runepouchtable.storage-right {
882 margin-left: auto;
883 clear: none;
884 float: none;
885 }
886
887 .runepouchtable.storage-center {
888 margin-left: 23px;
889 }
890
891 .runepouchtable.storage-right {
892 margin-left: 23px;
893 }
894
895 .equipment-div.equipment-left,
896 .equipment-div-buttons.equipment-left {
897 margin-right: auto;
898 clear: none;
899 float: none;
900 width: 100%;
901 }
902
903 .equipment-div.equipment-center,
904 .equipment-div-buttons.equipment-center {
905 width: 100%;
906 }
907
908 .equipment-div.equipment-right,
909 .equipment-div-buttons.equipment-right {
910 margin-left: auto;
911 clear: none;
912 float: none;
913 width: 100%;
914 }
915
916 }
917
918 .tile {
919 padding: 1.5em 2em 1em;
920 }
921
922 .tile h2 {
923 font-weight: 600;
924 border: none;
925 margin-top: 0.4em;
926 }
927
928 .tile .byline + h2 {
929 margin-top: -0.5em;
930 }
931
932 .tile-top {
933 padding: 1.3rem 1.5rem 2rem;
934 }
935
936 .tile-bottom {
937 padding: 1rem 1.5rem 2rem;
938 }
939
940 .tile-bottom.read-more {
941 padding: 0;
942 }
943
944 .tile-bottom.read-more a {
945 padding: 1em 1.75em;
946 }
947
948 .tile.oswf-day {
949 float: none !important;
950 padding: 0.5em 2em;
951 }
952
953 .tile.oswf-day h2 {
954 margin-right: auto;
955 margin-left: auto;
956 margin-top: -0.5em;
957 }
958
959 .oswf-tile {
960 margin-bottom: 1em;
961 }
962
963 .oswf-tile h2 {
964 clear: none !important;
965 margin-top: 0;
966 padding-top: f2em !important;
967 }
968
969 .oswf-tile .oswf-img {
970 display: block;
971 max-width: 75px;
972 float: right;
973 }
974
975 .oswf-tile .oswf-img img {
976 max-width: 100%;
977 height: auto !important;
978 }
979
980 :root {
981 --mobile-navbox-wide-bg-color: #dcd3bf;
982 --mobile-navbox-linear-gradient: linear-gradient(to right, rgba(226, 219, 200, 0), #e2dbc8 95%, #e2dbc8);
983 }
984
985 .navbox {
986 border: 1px solid var(--body-border);
987 box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
988 font-size: 0.85em;
989 }
990
991 .content .navbox ul {
992 padding-left: 0;
993 }
994
995 .content .navbox ul li {
996 margin-bottom: 0;
997 }
998
999 @media screen and (max-width: 719px) {
1000 .navbox td,
1001 .navbox th,
1002 .navbox tr,
1003 .navbox tbody,
1004 .navbox .navbox-subgroup {
1005 display: block;
1006 }
1007
1008 }
1009
1010 @media screen and (min-width: 720px) {
1011 .content table.navbox,
1012 .content .navbox table {
1013 width: 100% !important;
1014 }
1015
1016 }
1017
1018 .navbox .navbox-subgroup {
1019 margin: 0;
1020 }
1021
1022 .navbox .navbar {
1023 display: none;
1024 }
1025
1026 .navbox .plink-template,
1027 .navbox img {
1028 display: none;
1029 }
1030
1031 .navbox-title {
1032 color: var(--text-color);
1033 background-color: var(--body-dark);
1034 font-size: 140%;
1035 font-weight: bold;
1036 text-align: center;
1037 padding: 0.25em 0;
1038 }
1039
1040 @media screen and (min-width: 720px) {
1041 .navbox-title {
1042 border-bottom: 1px solid var(--body-border);
1043 }
1044
1045 }
1046
1047 .navbox-group-title {
1048 background-color: var(--body-mid);
1049 font-weight: bold;
1050 padding: 0.2em 0.85em;
1051 }
1052
1053 @media screen and (max-width: 719px) {
1054 .navbox-group-title {
1055 overflow: hidden;
1056 white-space: nowrap;
1057 text-overflow: ellipsis;
1058 }
1059
1060 }
1061
1062 @media screen and (min-width: 720px) {
1063 .navbox-group-title {
1064 border: 1px solid var(--body-border);
1065 border-width: 0 1px 1px 0;
1066 width: 12vw;
1067 }
1068
1069 }
1070
1071 .navbox-group-title-hidden {
1072 display: none;
1073 }
1074
1075 .navbox-list {
1076 padding: 0;
1077 position: relative;
1078 }
1079
1080 @media screen and (min-width: 720px) {
1081 .navbox-list {
1082 border-bottom: 1px solid var(--body-border);
1083 }
1084
1085 }
1086
1087 @media screen and (max-width: 719px) {
1088 .navbox-list ul {
1089 white-space: nowrap;
1090 overflow-x: auto;
1091 overflow-y: hidden;
1092 -webkit-overflow-scrolling: touch;
1093 }
1094
1095 }
1096
1097 @media screen and (min-width: 720px) {
1098 .navbox-list ul {
1099 padding: 0.2em 0.85em 0.5em !important;
1100 }
1101
1102 }
1103
1104 .navbox-list li {
1105 display: inline-flex;
1106 align-items: center;
1107 height: 3.5em;
1108 margin: 0 0 0 0.85em;
1109 }
1110
1111 @media screen and (min-width: 720px) {
1112 .navbox-list li {
1113 height: 2.1em;
1114 }
1115
1116 .navbox-list li:first-child {
1117 margin-left: 0;
1118 }
1119
1120 }
1121
1122 .navbox-list li + li {
1123 margin-left: 0.5em;
1124 }
1125
1126 .navbox-list li + li > a::before {
1127 content: '•';
1128 display: inline-block;
1129 white-space: pre-wrap;
1130 position: relative;
1131 left: -0.425em;
1132 color: var(--text-color);
1133 pointer-events: none;
1134 }
1135
1136 .navbox-list li + li > a + a::before {
1137 display: none;
1138 }
1139
1140 .navbox-list li:last-child {
1141 margin-right: 2em;
1142 }
1143
1144 .navbox-list:not([style*="center"])::after {
1145 content: '';
1146 display: block;
1147 position: absolute;
1148 background-image: var(--mobile-navbox-linear-gradient);
1149 height: 100%;
1150 width: 2.5em;
1151 top: 0;
1152 right: 0;
1153 pointer-events: none;
1154 }
1155
1156 @media screen and (min-width: 720px) {
1157 .navbox-list:not([style*="center"])::after {
1158 display: none;
1159 }
1160
1161 }
1162
1163 .navbox-list.navbox-parent {
1164 border-bottom: 0;
1165 padding: 0;
1166 }
1167
1168 .navbox-list.navbox-parent::after {
1169 display: none;
1170 }
1171
1172 .navbox-group .navbox-group .navbox-group-title {
1173 background-color: var(--body-light);
1174 padding: 0 0.85em 0 1.7em;
1175 }
1176
1177 @media screen and (min-width: 720px) {
1178 .navbox-group .navbox-group .navbox-group-title {
1179 padding-left: 0.85em;
1180 }
1181
1182 }
1183
1184 .navbox-group .navbox-group .navbox-list ul {
1185 padding-left: 1.7em;
1186 }
1187
1188 .navbox-group .navbox-group .navbox-list li {
1189 margin-bottom: 0;
1190 }
1191
1192 .navbox-group .navbox-group .navbox-list li:first-child {
1193 margin-left: 0;
1194 }
1195
1196 .navbox-group .navbox-group.navbox-group-split .navbox-list ul {
1197 padding-left: 0.85em;
1198 }
1199
1200 .navbox-group .navbox-group .navbox-group:first-child .navbox-group-title {
1201 padding-top: 0.5em;
1202 }
1203
1204 @media screen and (min-width: 720px) {
1205 .navbox-group .navbox-group .navbox-group:first-child .navbox-group-title {
1206 padding-top: 0;
1207 }
1208
1209 }
1210
1211 .navbox-group .navbox-group .navbox-group .navbox-group-title {
1212 background-color: transparent;
1213 padding-left: 2.55em;
1214 }
1215
1216 @media screen and (min-width: 720px) {
1217 .navbox-group .navbox-group .navbox-group .navbox-group-title {
1218 background-color: var(--mobile-navbox-wide-bg-color);
1219 padding-left: 0.85em;
1220 }
1221
1222 }
1223
1224 .navbox-group .navbox-group .navbox-group .navbox-list ul {
1225 padding-left: 2.55em;
1226 }
1227
1228 .navbox-group .navbox-group .navbox-group.navbox-group-split .navbox-list ul {
1229 padding-left: 1.7em;
1230 }
1231
1232 @media screen and (max-width: 720px) {
1233 .questdetails-header {
1234 text-align: center;
1235 display: block;
1236 width: auto;
1237 background-color: rgba(0, 0, 0, 0.1);
1238 }
1239
1240 .questdetails-info {
1241 display: block;
1242 margin-top: 10px;
1243 margin-bottom: 10px;
1244 }
1245
1246 .questdetails tr,
1247 .questdetails tbody {
1248 display: block;
1249 }
1250
1251 .questdetails {
1252 padding: 0;
1253 }
1254
1255 .questdetails ul {
1256 padding-left: 2px;
1257 margin-left: 2px;
1258 }
1259
1260 .questdetails-info {
1261 word-wrap: normal;
1262 }
1263
1264 }
1265
1266 @keyframes slide-up {
1267 from {
1268 opacity: 0;
1269 transform: translateY(1rem);
1270 }
1271
1272 to {
1273 opacity: 1;
1274 transform: translateY(0);
1275 }
1276
1277 }
1278
1279 @media only screen and (max-width: 65.999rem) {
1280 .mainpage-header h1 {
1281 text-align: center;
1282 }
1283
1284 }
1285
1286 .mainpage-body {
1287 display: unset;
1288 }
1289
1290 .mainpage-body ul {
1291 margin: 0 0.25em;
1292 list-style-type: disc;
1293 }
1294
1295 .mainpage-body .tile-row {
1296 width: inherit;
1297 }
1298
1299 .mainpage-left {
1300 margin-right: 0;
1301 }
1302
1303 .mainpage-left .tile {
1304 padding: 2.5em 1.75em 2em;
1305 }
1306
1307 .mainpage-left .tile h2 {
1308 padding: 0;
1309 margin: 0.65em 0.5em;
1310 }
1311
1312 .mainpage-left .tile-halves h2 {
1313 padding: 0;
1314 margin: 0.65em 0.5em;
1315 }
1316
1317 .mainpage-recent-updates {
1318 display: flex;
1319 flex-flow: row wrap;
1320 justify-content: center;
1321 padding: 1.5em 1em 2.5em;
1322 white-space: nowrap;
1323 -webkit-overflow-scrolling: touch;
1324 -webkit-scroll-snap-type: mandatory;
1325 scroll-snap-type: mandatory;
1326 }
1327
1328 .mainpage-recent-updates::before {
1329 content: 'Recent updates';
1330 display: block;
1331 position: -webkit-sticky;
1332 position: sticky;
1333 left: 1.5em;
1334 color: var(--byline-color);
1335 font-weight: bold;
1336 text-transform: uppercase;
1337 letter-spacing: 0.025em;
1338 }
1339
1340 .mainpage-recent-updates .tile-halves {
1341 display: inline-block;
1342 margin: 1em 0.75em 0 0;
1343 width: 100%;
1344 white-space: initial;
1345 flex: unset;
1346 scroll-snap-align: center;
1347 }
1348
1349 .mainpage-recent-updates .tile-halves:nth-child(1) {
1350 animation: 0.9s 0.2s both slide-up;
1351 }
1352
1353 .mainpage-recent-updates .tile-halves:nth-child(2) {
1354 animation: 0.9s 0.4s both slide-up;
1355 }
1356
1357 .mainpage-recent-updates .tile-halves:nth-child(3) {
1358 animation: 0.9s 0.6s both slide-up;
1359 margin-right: 1em;
1360 }
1361
1362 .mainpage-recent-updates .tile-top {
1363 height: 9em;
1364 overflow: hidden;
1365 }
1366
1367 .mainpage-recent-updates .tile-bottom {
1368 padding-bottom: 0.5rem;
1369 }
1370
1371 .mainpage-recent-updates .byline {
1372 margin: 0;
1373 }
1374
1375 .mainpage-recent-updates .byline + h2 {
1376 margin: 0.025em 0 0;
1377 padding: 0;
1378 }
1379
1380 .mainpage-recent-updates a + a:before {
1381 content: "· ";
1382 display: inline-block;
1383 white-space: pre-wrap;
1384 pointer-events: none;
1385 }
1386
1387 @media only screen and (min-width: 58em) {
1388 .mainpage-recent-updates {
1389 overflow-x: initial;
1390 }
1391
1392 .mainpage-recent-updates::before {
1393 width: 100%;
1394 }
1395
1396 .mainpage-recent-updates .tile-halves {
1397 width: 85vw;
1398 max-width: 18em;
1399 }
1400
1401 .mainpage-recent-updates .tile-halves:nth-child(3) {
1402 margin-right: 0;
1403 }
1404
1405 .mainpage-recent-updates .tile-halves img {
1406 margin-top: unset;
1407 }
1408
1409 .mainpage-recent-updates .tile-halves:nth-child(3) {
1410 margin-right: 0;
1411 }
1412
1413 }
1414
1415 @media only screen and (max-width: 65.999rem) {
1416 .mainpage-recent-updates .tile-halves:last-child {
1417 display: block;
1418 }
1419
1420 .mainpage-recent-updates .tile-halves:nth-last-child(1),
1421 .mainpage-recent-updates .tile-halves:nth-last-child(3) {
1422 margin-right: 0;
1423 }
1424
1425 }
1426
1427 .mainpage-contents {
1428 background: var(--body-mid);
1429 padding: 55px 1em 2em 2.5em;
1430 display: flex;
1431 flex-wrap: nowrap;
1432 align-items: flex-start;
1433 overflow-x: auto;
1434 position: relative;
1435 }
1436
1437 .mainpage-contents::before {
1438 content: 'Explore';
1439 margin: 1em;
1440 position: absolute;
1441 top: 0;
1442 color: inherit;
1443 font-weight: bold;
1444 text-transform: uppercase;
1445 letter-spacing: 0.025em;
1446 }
1447
1448 .mainpage-contents .tile-halves {
1449 border: none;
1450 background: none;
1451 box-shadow: none;
1452 flex: 0 0 auto;
1453 width: 200px;
1454 margin-right: 10px;
1455 }
1456
1457 .mainpage-contents .tile-halves:nth-child(3) {
1458 margin-right: 0.9rem;
1459 }
1460
1461 .mainpage-contents .tile-top {
1462 padding: 0;
1463 height: initial;
1464 }
1465
1466 .mainpage-contents .tile-bottom {
1467 border: none;
1468 }
1469
1470 .mainpage-contents h2 {
1471 width: 100%;
1472 }
1473
1474 .mainpage-skills .tile-top {
1475 }
1476
1477 @media only screen and (min-width: 32em) {
1478 .mainpage-skills .tile-top ul {
1479 width: 100%;
1480 max-width: 50em;
1481 margin: auto;
1482 }
1483
1484 }
1485
1486 .mainpage-wikinews::before {
1487 content: 'From the wiki';
1488 margin-left: 0.75em;
1489 color: var(--byline-color);
1490 font-weight: bold;
1491 text-transform: uppercase;
1492 letter-spacing: 0.025em;
1493 }
1494
1495 .mainpage-wikinews .news-date {
1496 font-weight: bold;
1497 margin-bottom: 0;
1498 }
1499
1500 .mainpage-wikinews p {
1501 margin-left: 0.5em;
1502 margin-right: 0.5em;
1503 }
1504
1505 .mainpage-discord .tile-top {
1506 padding: 1em 2em;
1507 height: 70px;
1508 }
1509
1510 .mainpage-discord .tile-top .partner-icon img {
1511 float: left;
1512 margin: 0 1em 0 -1em;
1513 }
1514
1515 .mainpage-discord .tile-top .server-name {
1516 margin: 0;
1517 }
1518
1519 .mainpage-discord .tile-top .server-tagline {
1520 margin: 0;
1521 }
1522
1523 .mainpage-twitter {
1524 margin-bottom: 0;
1525 }
1526
1527 .mainpage-twitter .tile-top {
1528 padding: 1em 2em;
1529 height: 70px;
1530 }
1531
1532 .mainpage-twitter .tile-top .twitter-logo {
1533 float: left;
1534 margin: 0 1em 0 -1em;
1535 }
1536
1537 .mainpage-twitter .tile-top .twitter-name {
1538 margin: 0;
1539 }
1540
1541 .mainpage-twitter .tile-top .twitter-tagline {
1542 margin: 0;
1543 }
1544
1545 .ns-120 section ul,
1546 .transcript ul,
1547 .ns-120 section ol,
1548 .transcript ol {
1549 padding: 0;
1550 }
1551
1552 .ns-120 section ul,
1553 .transcript ul {
1554 margin: 5px 0 0 0;
1555 }
1556
1557 .ns-120 section ul ul,
1558 .transcript ul ul,
1559 .ns-120 section ul ol,
1560 .transcript ul ol {
1561 margin: 5px 0 0 15px;
1562 }
1563
1564 .ns-120 section ul,
1565 .transcript ul,
1566 .ns-120 section ul ul,
1567 .transcript ul ul,
1568 .ns-120 section ul ol,
1569 .transcript ul ol {
1570 list-style: none !important;
1571 border-left: 1px dashed var(--transcript-border-color);
1572 }
1573
1574 .ns-120 section ul:hover,
1575 .transcript ul:hover,
1576 .ns-120 section ul ul:hover,
1577 .transcript ul ul:hover,
1578 .ns-120 section ul ol:hover,
1579 .transcript ul ol:hover {
1580 border-color: var(--transcript-border-hover-color);
1581 }
1582
1583 .ns-120 section ul li,
1584 .transcript ul li,
1585 .ns-120 section ul ul li,
1586 .transcript ul ul li,
1587 .ns-120 section ul ol li,
1588 .transcript ul ol li {
1589 flex-direction: column;
1590 padding-left: 10px;
1591 margin: 14px 0;
1592 }
1593
1594 .ns-120 section ul li:last-of-type,
1595 .transcript ul li:last-of-type,
1596 .ns-120 section ul ul li:last-of-type,
1597 .transcript ul ul li:last-of-type,
1598 .ns-120 section ul ol li:last-of-type,
1599 .transcript ul ol li:last-of-type {
1600 margin-bottom: 0;
1601 }
1602
1603 .smallChart .highcharts-range-selector {
1604 display: none;
1605 }
1606
1607 .smallChart .highcharts-button title + rect {
1608 display: none;
1609 }
1610
1611 #GEpopupchart {
1612 overflow-x: auto !important;
1613 }
1614
1615 .wikitable {
1616 background: none;
1617 box-shadow: none;
1618 }
1619
1620 .wikitable tbody {
1621 background: var(--body-light);
1622 }
1623
1624 .toc {
1625 background-color: var(--body-light);
1626 border-color: var(--body-border);
1627 }
1628
1629 #filetoc li {
1630 display: inline;
1631 padding-right: 2em;
1632 }
1633
1634 .mw-dismissable-notice-body {
1635 margin: 0;
1636 }
1637
1638 .mw-dismissable-notice-body .mw-dismissable-notice-close-parent {
1639 border-radius: 0 !important;
1640 font-size: 0.75em;
1641 }
1642
1643 :root {
1644 --thumb-image-background: var(--body-light);
1645 --thumb-caption-background: var(--body-mid);
1646 --body-background-image: url(https://runescape.wiki/images/RuneScape_Wiki_background.jpg);
1647 --body-background-color: #f6f6f6;
1648 }
1649
1650
1651 .content .thumbimage {
1652 background-color: var(--thumb-image-background);
1653 border: 1px solid transparent;
1654 border-bottom: none;
1655 }
1656
1657 .content .thumbcaption {
1658 margin: 0;
1659 padding: 4px 6px !important;
1660 color: inherit;
1661 background: var(--thumb-caption-background);
1662 }
1663
1664 .content table.messagebox {
1665 margin: 0.5em auto;
1666 }
1667
1668 .content table a > img {
1669 max-width: inherit !important;
1670 height: inherit !important;
1671 }
1672
1673 .content .infobox a > img {
1674 max-width: 100% !important;
1675 height: auto !important;
1676 }
1677
1678 .content .infobox-bonuses a > img {
1679 max-width: inherit !important;
1680 height: inherit !important;
1681 }
1682
1683 /* Added stuff from RL output */
1684
1685 .perk-link {
1686 background: #09222F;
1687 border-radius: 111px;
1688 width: 35px;
1689 height: 35px;
1690 line-height: 30px;
1691 display: inline-table;
1692 margin-right: 5px;
1693 text-align: center;
1694 }
1695
1696 .perk-link.perk-link-nobg {
1697 background: transparent;
1698 }
1699
1700 .perk-link > a {
1701 vertical-align: middle;
1702 }
1703
1704 .perk-link .perk-link-rank {
1705 position: relative;
1706 top: -26px;
1707 left: 5px;
1708 margin-bottom: -28px;
1709 line-height: 0;
1710 float: left;
1711 }
1712
1713 .perk-background {
1714 background: #09222F;
1715 }
1716
1717 .navbox .perk-link img {
1718 max-height: initial;
1719 }
1720
1721 .tile {
1722 background: #ffffff;
1723 border: 1px solid #e4eaee;
1724 box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
1725 padding: 1.5em 2em 1em;
1726 }
1727
1728 .tile h2 {
1729 font-weight: 600;
1730 border: none;
1731 margin-top: 0.4em;
1732 }
1733
1734 .tile .byline + h2 {
1735 margin-top: -0.5em;
1736 }
1737
1738 .byline {
1739 font-size: 0.9em;
1740 color: #949eaa;
1741 }
1742
1743 .byline a {
1744 color: #949eaa;
1745 }
1746
1747 .tile-halves {
1748 border: 1px solid #e4eaee;
1749 background: #ffffff;
1750 box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
1751 }
1752
1753 .tile-halves .byline + h2 {
1754 margin-top: -0.5em;
1755 }
1756
1757 .tile-top {
1758 padding: 1.3rem 1.5rem 2rem;
1759 }
1760
1761 .tile-top.tile-image {
1762 background-color: #949eaa;
1763 padding: 0;
1764 }
1765
1766 .tile-bottom {
1767 background: #ffffff;
1768 border-top: 1px solid #e4eaee;
1769 padding: 1rem 1.5rem 2rem;
1770 }
1771
1772 .tile-bottom.read-more {
1773 background: #f9fafa;
1774 padding: 0;
1775 transition: 0.3s ease-out;
1776 }
1777
1778 .tile-bottom.read-more a {
1779 display: block;
1780 color: #949eaa;
1781 font-weight: bold;
1782 text-align: right;
1783 padding: 1em 1.75em;
1784 text-decoration: none;
1785 }
1786
1787 .tile-bottom.read-more:hover {
1788 background: #f2f4f4;
1789 }
1790
1791 .tile-bottom.read-more .arrow {
1792 filter: invert(43%) sepia(50%) hue-rotate(175deg);
1793 margin-left: 0.4em;
1794 transition: 0.3s ease-out;
1795 }
1796
1797 .tile.oswf-day {
1798 float: none !important;
1799 padding: 0.5em 2em;
1800 }
1801
1802 .tile.oswf-day h2 {
1803 margin-right: auto;
1804 margin-left: auto;
1805 margin-top: -0.5em;
1806 }
1807
1808 .oswf-tile {
1809 margin-bottom: 1em;
1810 }
1811
1812 .oswf-tile h2 {
1813 clear: none !important;
1814 margin-top: 0;
1815 padding-top: 0.2em !important;
1816 }
1817
1818 .oswf-tile .oswf-img {
1819 display: block;
1820 max-width: 75px;
1821 float: right;
1822 }
1823
1824 .oswf-tile .oswf-img img {
1825 max-width: 100%;
1826 height: auto !important;
1827 }
1828
1829 .mainpage-body {
1830 color: #4c4c4c;
1831 }
1832
1833 .mainpage-body h2,
1834 .mainpage-body h2 a {
1835 color: #444e5a;
1836 }
1837
1838 .mainpage-body ul {
1839 margin: 0 0.25em;
1840 list-style-type: disc;
1841 }
1842
1843 .mainpage-left > * {
1844 border-bottom: none;
1845 }
1846
1847 .mainpage-left .tile {
1848 padding: 2.5em 1.75em 2em;
1849 border-left-width: 0;
1850 border-right-width: 0;
1851 }
1852
1853 .mainpage-left .tile h2 {
1854 padding: 0;
1855 margin: 0.65em 0.5em;
1856 }
1857
1858 .mainpage-left .tile-halves {
1859 border-left-width: 0;
1860 border-right-width: 0;
1861 }
1862
1863 .mainpage-left .tile-halves h2 {
1864 padding: 0;
1865 margin: 0.65em 0.5em;
1866 }
1867
1868 .tile.big-tile {
1869 border: none;
1870 border-bottom: 1px solid #e4eaee;
1871 }
1872
1873 .mainpage-recent-updates {
1874 border-bottom: 1px solid #e4eaee;
1875 padding: 1.5em 1em 2.5em;
1876 white-space: nowrap;
1877 overflow-x: scroll;
1878 -webkit-overflow-scrolling: touch;
1879 -webkit-scroll-snap-destination: 50% 50%;
1880 scroll-snap-destination: 50% 50%;
1881 -webkit-scroll-snap-type: mandatory;
1882 scroll-snap-type: mandatory;
1883 }
1884
1885 .mainpage-recent-updates::before {
1886 content: 'Recent updates';
1887 display: block;
1888 position: -webkit-sticky;
1889 position: sticky;
1890 left: 1.5em;
1891 color: #949eaa;
1892 font-weight: bold;
1893 text-transform: uppercase;
1894 letter-spacing: 0.025em;
1895 }
1896
1897 .mainpage-recent-updates .tile {
1898 width: 78%;
1899 }
1900
1901 .mainpage-recent-updates .tile p,
1902 .mainpage-recent-updates .tile a {
1903 white-space: normal !important;
1904 }
1905
1906 .mainpage-recent-updates .tile-halves {
1907 display: inline-block;
1908 margin: 1em 0.75em 0 0;
1909 width: 85vw;
1910 max-width: 18em;
1911 white-space: initial;
1912 -webkit-scroll-snap-coordinate: 50% 50%;
1913 scroll-snap-coordinate: 50% 50%;
1914 scroll-snap-align: center;
1915 }
1916
1917 .mainpage-recent-updates .tile-halves:nth-child(1) {
1918 animation: 0.9s 0.2s both slide-up;
1919 }
1920
1921 .mainpage-recent-updates .tile-halves:nth-child(2) {
1922 animation: 0.9s 0.4s both slide-up;
1923 }
1924
1925 .mainpage-recent-updates .tile-halves:nth-child(3) {
1926 animation: 0.9s 0.6s both slide-up;
1927 margin-right: 1em;
1928 }
1929
1930 .mainpage-recent-updates .tile-top {
1931 height: 9em;
1932 overflow: hidden;
1933 }
1934
1935 .mainpage-recent-updates .tile-bottom {
1936 display: flex;
1937 padding-bottom: 0.5rem;
1938 }
1939
1940 .mainpage-recent-updates .tile-bottom p:not(.byline) {
1941 color: #4c4c4c;
1942 }
1943
1944 .mainpage-recent-updates .byline {
1945 margin: 0;
1946 }
1947
1948 .mainpage-recent-updates .byline + h2 {
1949 margin: 0.025em 0 0;
1950 padding: 0;
1951 }
1952
1953 @media only screen and (min-width: 58em) {
1954 .mainpage-recent-updates {
1955 display: flex;
1956 flex-flow: row wrap;
1957 justify-content: center;
1958 overflow-x: initial;
1959 }
1960
1961 .mainpage-recent-updates::before {
1962 width: 100%;
1963 }
1964
1965 .mainpage-recent-updates .tile-halves:nth-child(3) {
1966 margin-right: 0;
1967 }
1968
1969 }
1970
1971 .mainpage-contents {
1972 background: #5d6773;
1973 padding: 2.5em 1em 2em;
1974 }
1975
1976 .mainpage-contents::before {
1977 content: 'Explore';
1978 margin-left: 1.5em;
1979 color: #949eaa;
1980 font-weight: bold;
1981 text-transform: uppercase;
1982 letter-spacing: 0.025em;
1983 }
1984
1985 .mainpage-contents .tile-halves {
1986 border: none;
1987 background: none;
1988 box-shadow: none;
1989 margin: 0 1.5em;
1990 }
1991
1992 .mainpage-contents .tile-halves:first-child {
1993 margin-top: 1.25em;
1994 }
1995
1996 .mainpage-contents .tile-halves:first-child .tile-bottom {
1997 border-top: none;
1998 }
1999
2000 .mainpage-contents .tile-halves:last-child {
2001 margin-bottom: 0;
2002 }
2003
2004 .mainpage-contents .tile-halves:last-child .tile-top {
2005 border-bottom: none;
2006 }
2007
2008 .mainpage-contents .tile-bottom {
2009 border-color: #828d9a;
2010 padding: 0.25em 0;
2011 background: none;
2012 }
2013
2014 .mainpage-contents h2 {
2015 padding: 0 0 0.35em;
2016 width: 100%;
2017 }
2018
2019 .mainpage-contents h2 a {
2020 color: #f9fafa;
2021 display: block;
2022 }
2023
2024 .mainpage-skills .tile-top {
2025 overflow-x: scroll;
2026 -webkit-overflow-scrolling: touch;
2027 }
2028
2029 .mainpage-skills .tile-top h2 {
2030 position: -webkit-sticky;
2031 position: sticky;
2032 left: 0.5em;
2033 }
2034
2035 .mainpage-skills .tile-top ul {
2036 columns: 3;
2037 width: 32em;
2038 list-style: none;
2039 margin-left: 0.75em;
2040 }
2041
2042 @media only screen and (min-width: 32em) {
2043 .mainpage-skills .tile-top ul {
2044 width: 100%;
2045 max-width: 50em;
2046 margin: auto;
2047 }
2048
2049 }
2050
2051 .mainpage-skills .tile-top li {
2052 display: flex;
2053 align-items: center;
2054 margin-bottom: 0.6em;
2055 }
2056
2057 .mainpage-skills .tile-top li a:first-child {
2058 width: 25px;
2059 height: 25px;
2060 padding: 4px;
2061 border-radius: 3px;
2062 }
2063
2064 .mainpage-skills .tile-top li a:last-child {
2065 flex: 1;
2066 color: #444e5a;
2067 font-weight: bold;
2068 padding-left: 0.5em;
2069 }
2070
2071 .skill-agility a:first-child,
2072 .skill-melee a:first-child {
2073 background: #bc483d;
2074 }
2075
2076 .skill-ranged a:first-child {
2077 background: #748d36;
2078 }
2079
2080 .skill-magic a:first-child {
2081 background: #6274ab;
2082 }
2083
2084 .skill-fishing a:first-child,
2085 .skill-fletching a:first-child {
2086 background: #3e8e9a;
2087 }
2088
2089 .skill-cooking a:first-child,
2090 .skill-divination a:first-child,
2091 .skill-thieving a:first-child {
2092 background: #91689e;
2093 }
2094
2095 .skill-farming a:first-child,
2096 .skill-woodcutting a:first-child {
2097 background: #59924f;
2098 }
2099
2100 .skill-mining a:first-child,
2101 .skill-summoning a:first-child {
2102 background: #6385a8;
2103 }
2104
2105 .skill-invention a:first-child,
2106 .skill-smithing a:first-child {
2107 background: #d2b244;
2108 }
2109
2110 .skill-archaeology a:first-child {
2111 background: #a56831;
2112 }
2113
2114 .mainpage-wikinews::before {
2115 content: 'From the wiki';
2116 margin-left: 0.75em;
2117 color: #949eaa;
2118 font-weight: bold;
2119 text-transform: uppercase;
2120 letter-spacing: 0.025em;
2121 }
2122
2123 .mainpage-wikinews .news-date {
2124 font-weight: bold;
2125 margin-bottom: 0;
2126 }
2127
2128 .mainpage-left .mainpage-wikinews p {
2129 margin-left: 0.75em;
2130 margin-right: 0.75em;
2131 }
2132
2133 .mainpage-yg {
2134 display: none;
2135 padding-bottom: 2.5em !important;
2136 }
2137
2138 .mainpage-yg::before {
2139 content: 'Discussions';
2140 margin-left: 0.75em;
2141 color: #949eaa;
2142 font-weight: bold;
2143 text-transform: uppercase;
2144 letter-spacing: 0.025em;
2145 }
2146
2147 body.is-authenticated .mainpage-yg {
2148 display: inherit;
2149 }
2150
2151 .mainpage-news {
2152 background: #f9fafa;
2153 }
2154
2155 .mainpage-news .news-updates::before {
2156 content: 'Newsposts';
2157 margin-left: 0.75em;
2158 color: #949eaa;
2159 font-weight: bold;
2160 text-transform: uppercase;
2161 letter-spacing: 0.025em;
2162 }
2163
2164 .mainpage-news .news-updates li {
2165 text-overflow: ellipsis;
2166 white-space: nowrap;
2167 overflow: hidden;
2168 }
2169
2170 .mainpage-social {
2171 border: none;
2172 margin-bottom: 0;
2173 }
2174
2175 .mainpage-social .tile-top {
2176 display: flex;
2177 align-items: center;
2178 justify-content: center;
2179 padding: 1em 2em;
2180 height: 70px;
2181 }
2182
2183 .mainpage-social .tile-top .social-icon {
2184 float: left;
2185 margin: 0 1em 0 -1em;
2186 width: 60px;
2187 text-align: center;
2188 }
2189
2190 .mainpage-social .tile-top .social-header {
2191 color: #ffffff;
2192 font-weight: bold;
2193 font-size: 1.25em;
2194 margin: 0;
2195 }
2196
2197 .mainpage-social .tile-top .social-tagline {
2198 color: rgba(255, 255, 255, 0.85);
2199 margin: 0;
2200 }
2201
2202 .mainpage-social .tile-bottom {
2203 border: none;
2204 padding: 1em 2em;
2205 }
2206
2207 .mainpage-social .tile-bottom p {
2208 color: #949eaa;
2209 font-weight: bold;
2210 text-transform: uppercase;
2211 letter-spacing: 0.025em;
2212 color: #ffffff;
2213 font-size: 0.9em;
2214 text-align: center;
2215 margin: 0;
2216 }
2217
2218 .mainpage-social.mainpage-discord .tile-top {
2219 background: #7289da;
2220 }
2221
2222 .mainpage-social.mainpage-discord .tile-bottom {
2223 background: #697ec4;
2224 }
2225
2226 .mainpage-social.mainpage-twitter .tile-top {
2227 background: #1da1f2;
2228 }
2229
2230 .mainpage-social.mainpage-twitter .tile-bottom {
2231 background: #1e96e0;
2232 }
2233
2234 .mainpage-events {
2235 border: none;
2236 margin-bottom: 0;
2237 }
2238
2239 .mainpage-events .tile-top {
2240 background-color: #4f348b;
2241 color: #fff;
2242 padding: 1em 2em;
2243 }
2244
2245 .mainpage-events .tile-top h2 {
2246 margin-bottom: 0;
2247 padding-bottom: 0;
2248 }
2249
2250 .mainpage-events .tile-top .note {
2251 margin-top: 0;
2252 color: #949eaa;
2253 font-style: italic;
2254 }
2255
2256 .mainpage-events .tile-top .note a,
2257 .mainpage-events .tile-top .note a:visited {
2258 color: #b8c5d4;
2259 }
2260
2261 .mainpage-events .tile-top a,
2262 .mainpage-events .tile-top a:visited,
2263 .mainpage-events .tile-top h2 a {
2264 color: #fff;
2265 text-decoration: none;
2266 }
2267
2268 .mainpage-events .tile-top ul {
2269 list-style: none;
2270 margin-top: 1em;
2271 margin-left: 0;
2272 }
2273
2274 .mainpage-events .tile-top li {
2275 padding-bottom: 0.6em;
2276 overflow: auto;
2277 }
2278
2279 .mainpage-events .tile-top li img {
2280 max-width: 30px;
2281 width: auto;
2282 height: auto;
2283 }
2284
2285 .mainpage-events .tile-top li a:hover,
2286 .mainpage-events .tile-top li a:focus {
2287 text-decoration: underline;
2288 }
2289
2290 .mainpage-events .tile-top li a {
2291 float: left;
2292 }
2293
2294 .mainpage-events .tile-top li a:first-child {
2295 width: 30px;
2296 }
2297
2298 .mainpage-events .tile-top li a:last-child {
2299 padding-left: 1.5em;
2300 text-indent: -1em;
2301 line-height: 1.5;
2302 }
2303
2304 .mainpage-events .tile-top li:last-of-type {
2305 display: none;
2306 }
2307
2308 .mainpage-events .tile-bottom {
2309 border: none;
2310 padding: 1em 1.75em;
2311 background-color: #3d276b;
2312 color: #fff;
2313 font-weight: bold;
2314 font-size: 0.9em;
2315 text-align: center;
2316 text-transform: uppercase;
2317 letter-spacing: 0.03em;
2318 margin: 0;
2319 }
2320
2321 body.wgl-darkmode .mainpage-events .tile-bottom {
2322 background-color: #3d276b;
2323 color: #fff;
2324 }
2325
2326 .mainpage-events .tile-bottom a,
2327 .mainpage-events .tile-bottom a:visited {
2328 color: #fff;
2329 text-decoration: none;
2330 }
2331
2332 .mainpage-events .tile-bottom .arrow {
2333 margin-left: 0.2em;
2334 }
2335
2336 .mw-recentchanges-toplinks th {
2337 font-size: 90%;
2338 }
2339
2340 .mw-changeslist-legend {
2341 margin-left: 0;
2342 }
2343
2344 #mw-mf-diffview del {
2345 border: 2px #379541 solid;
2346 padding: 0.15em 0.5em;
2347 background-color: #c1edbf !important;
2348 margin-right: 2px;
2349 }
2350
2351 #mw-mf-diffview del::before {
2352 content: "- ";
2353 font-weight: bold;
2354 font-size: 100%;
2355 }
2356
2357 #mw-mf-diffview ins {
2358 border: 2px #438ab5 solid;
2359 padding: 0.15em 0.5em;
2360 background-color: #bddff2 !important;
2361 margin-right: 2px;
2362 }
2363
2364 #mw-mf-diffview ins::before {
2365 content: "+ ";
2366 font-weight: bold;
2367 font-size: 100%;
2368 }
2369
2370 #mw-mf-minidiff {
2371 background: #f9f9f9;
2372 border: 1px #f1f1f1 solid;
2373 padding: 10px;
2374 }
2375
2376 .mw-diff-inline-changed,
2377 .mw-diff-inline-added {
2378 padding-bottom: 10px;
2379 }
2380
2381 #mw-mf-diffview #mw-mf-diff-comment::before {
2382 content: "(";
2383 }
2384
2385 #mw-mf-diffview #mw-mf-diff-comment::after {
2386 content: ")";
2387 }
2388
2389 #mw-mf-diffarea {
2390 padding: 1em 1em 2em !important;
2391 }
2392
2393 .forumsearchbox {
2394 padding: 0.5em;
2395 text-align: center;
2396 font-size: 90%;
2397 background-color: #f1f1f1;
2398 margin: auto !important;
2399 }
2400
2401 .forumsearchbox tbody {
2402 display: inline;
2403 }
2404
2405 .forumsearchbox input {
2406 margin: 0.5em;
2407 }
2408
2409 .forumheader {
2410 border-left: 15px solid #ccc;
2411 background-color: #f1f1f1;
2412 margin: 1em 0;
2413 padding: 12px;
2414 }
2415
2416 .forum_title {
2417 text-align: left;
2418 }
2419
2420 .forum_title .forum_new {
2421 font-weight: bold;
2422 padding-top: 2px;
2423 padding-bottom: 1px;
2424 }
2425
2426 .forum_edited {
2427 text-align: right;
2428 }
2429
2430 .forumlist {
2431 margin: auto !important;
2432 }
2433
2434 .forumlist .forum_editor,
2435 .forumlist .forum_type {
2436 display: none;
2437 }
2438
2439 .forumlist .forum_title,
2440 .forumlist .forum_edited {
2441 width: auto;
2442 }
2443
2444 .forumactiveheader,
2445 .forumarchiveheader,
2446 .forumoldarchives {
2447 background-color: #438ab5;
2448 color: #ffffff;
2449 }
2450
2451 .forumoldarchives a {
2452 color: #ffffff;
2453 }
2454
2455 .forumcolumnheader {
2456 background-color: #e6e6e6;
2457 color: #000000;
2458 text-align: left;
2459 padding-left: 5px;
2460 margin: auto;
2461 }