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
1886 .mainpage-recent-updates .tile {
1887 width: 78%;
1888 }
1889
1890 .mainpage-recent-updates .tile p,
1891 .mainpage-recent-updates .tile a {
1892 white-space: normal !important;
1893 }
1894
1895 .mainpage-recent-updates .tile-halves {
1896 display: inline-block;
1897 margin: 1em 0.75em 0 0;
1898 width: 85vw;
1899 max-width: 18em;
1900 white-space: initial;
1901 -webkit-scroll-snap-coordinate: 50% 50%;
1902 scroll-snap-coordinate: 50% 50%;
1903 scroll-snap-align: center;
1904 }
1905
1906 .mainpage-recent-updates .tile-halves:nth-child(1) {
1907 animation: 0.9s 0.2s both slide-up;
1908 }
1909
1910 .mainpage-recent-updates .tile-halves:nth-child(2) {
1911 animation: 0.9s 0.4s both slide-up;
1912 }
1913
1914 .mainpage-recent-updates .tile-halves:nth-child(3) {
1915 animation: 0.9s 0.6s both slide-up;
1916 margin-right: 1em;
1917 }
1918
1919 .mainpage-recent-updates .tile-top {
1920 height: 9em;
1921 overflow: hidden;
1922 }
1923
1924 .mainpage-recent-updates .tile-bottom {
1925 display: flex;
1926 padding-bottom: 0.5rem;
1927 }
1928
1929 .mainpage-recent-updates .tile-bottom p:not(.byline) {
1930 color: #4c4c4c;
1931 }
1932
1933 .mainpage-recent-updates .byline {
1934 margin: 0;
1935 }
1936
1937 .mainpage-recent-updates .byline + h2 {
1938 margin: 0.025em 0 0;
1939 padding: 0;
1940 }
1941
1942 @media only screen and (min-width: 58em) {
1943 .mainpage-recent-updates {
1944 display: flex;
1945 flex-flow: row wrap;
1946 justify-content: center;
1947 overflow-x: initial;
1948 }
1949
1950 .mainpage-recent-updates::before {
1951 width: 100%;
1952 }
1953
1954 .mainpage-recent-updates .tile-halves:nth-child(3) {
1955 margin-right: 0;
1956 }
1957
1958 }
1959
1960 .mainpage-contents {
1961 background: #5d6773;
1962 padding: 2.5em 1em 2em;
1963 }
1964
1965 .mainpage-contents::before {
1966 content: 'Explore';
1967 margin-left: 1.5em;
1968 color: #949eaa;
1969 font-weight: bold;
1970 text-transform: uppercase;
1971 letter-spacing: 0.025em;
1972 }
1973
1974 .mainpage-contents .tile-halves {
1975 border: none;
1976 background: none;
1977 box-shadow: none;
1978 margin: 0 1.5em;
1979 }
1980
1981 .mainpage-contents .tile-halves:first-child {
1982 margin-top: 1.25em;
1983 }
1984
1985 .mainpage-contents .tile-halves:first-child .tile-bottom {
1986 border-top: none;
1987 }
1988
1989 .mainpage-contents .tile-halves:last-child {
1990 margin-bottom: 0;
1991 }
1992
1993 .mainpage-contents .tile-halves:last-child .tile-top {
1994 border-bottom: none;
1995 }
1996
1997 .mainpage-contents .tile-bottom {
1998 border-color: #828d9a;
1999 padding: 0.25em 0;
2000 background: none;
2001 }
2002
2003 .mainpage-contents h2 {
2004 padding: 0 0 0.35em;
2005 width: 100%;
2006 }
2007
2008 .mainpage-contents h2 a {
2009 color: #f9fafa;
2010 display: block;
2011 }
2012
2013 .mainpage-skills .tile-top {
2014 overflow-x: scroll;
2015 -webkit-overflow-scrolling: touch;
2016 }
2017
2018 .mainpage-skills .tile-top h2 {
2019 position: -webkit-sticky;
2020 position: sticky;
2021 left: 0.5em;
2022 }
2023
2024 .mainpage-skills .tile-top ul {
2025 columns: 3;
2026 width: 32em;
2027 list-style: none;
2028 margin-left: 0.75em;
2029 }
2030
2031 @media only screen and (min-width: 32em) {
2032 .mainpage-skills .tile-top ul {
2033 width: 100%;
2034 max-width: 50em;
2035 margin: auto;
2036 }
2037
2038 }
2039
2040 .mainpage-skills .tile-top li {
2041 display: flex;
2042 align-items: center;
2043 margin-bottom: 0.6em;
2044 }
2045
2046 .mainpage-skills .tile-top li a:first-child {
2047 width: 25px;
2048 height: 25px;
2049 padding: 4px;
2050 border-radius: 3px;
2051 }
2052
2053 .mainpage-skills .tile-top li a:last-child {
2054 flex: 1;
2055 color: #444e5a;
2056 font-weight: bold;
2057 padding-left: 0.5em;
2058 }
2059
2060 .skill-agility a:first-child,
2061 .skill-melee a:first-child {
2062 background: #bc483d;
2063 }
2064
2065 .skill-ranged a:first-child {
2066 background: #748d36;
2067 }
2068
2069 .skill-magic a:first-child {
2070 background: #6274ab;
2071 }
2072
2073 .skill-fishing a:first-child,
2074 .skill-fletching a:first-child {
2075 background: #3e8e9a;
2076 }
2077
2078 .skill-cooking a:first-child,
2079 .skill-divination a:first-child,
2080 .skill-thieving a:first-child {
2081 background: #91689e;
2082 }
2083
2084 .skill-farming a:first-child,
2085 .skill-woodcutting a:first-child {
2086 background: #59924f;
2087 }
2088
2089 .skill-mining a:first-child,
2090 .skill-summoning a:first-child {
2091 background: #6385a8;
2092 }
2093
2094 .skill-invention a:first-child,
2095 .skill-smithing a:first-child {
2096 background: #d2b244;
2097 }
2098
2099 .skill-archaeology a:first-child {
2100 background: #a56831;
2101 }
2102
2103 .mainpage-wikinews::before {
2104 content: 'From the wiki';
2105 margin-left: 0.75em;
2106 color: #949eaa;
2107 font-weight: bold;
2108 text-transform: uppercase;
2109 letter-spacing: 0.025em;
2110 }
2111
2112 .mainpage-wikinews .news-date {
2113 font-weight: bold;
2114 margin-bottom: 0;
2115 }
2116
2117 .mainpage-left .mainpage-wikinews p {
2118 margin-left: 0.75em;
2119 margin-right: 0.75em;
2120 }
2121
2122 .mainpage-yg {
2123 display: none;
2124 padding-bottom: 2.5em !important;
2125 }
2126
2127 .mainpage-yg::before {
2128 content: 'Discussions';
2129 margin-left: 0.75em;
2130 color: #949eaa;
2131 font-weight: bold;
2132 text-transform: uppercase;
2133 letter-spacing: 0.025em;
2134 }
2135
2136 body.is-authenticated .mainpage-yg {
2137 display: inherit;
2138 }
2139
2140 .mainpage-news {
2141 background: #f9fafa;
2142 }
2143
2144 .mainpage-news .news-updates::before {
2145 content: 'Newsposts';
2146 margin-left: 0.75em;
2147 color: #949eaa;
2148 font-weight: bold;
2149 text-transform: uppercase;
2150 letter-spacing: 0.025em;
2151 }
2152
2153 .mainpage-news .news-updates li {
2154 text-overflow: ellipsis;
2155 white-space: nowrap;
2156 overflow: hidden;
2157 }
2158
2159 .mainpage-social {
2160 border: none;
2161 margin-bottom: 0;
2162 }
2163
2164 .mainpage-social .tile-top {
2165 display: flex;
2166 align-items: center;
2167 justify-content: center;
2168 padding: 1em 2em;
2169 height: 70px;
2170 }
2171
2172 .mainpage-social .tile-top .social-icon {
2173 float: left;
2174 margin: 0 1em 0 -1em;
2175 width: 60px;
2176 text-align: center;
2177 }
2178
2179 .mainpage-social .tile-top .social-header {
2180 color: #ffffff;
2181 font-weight: bold;
2182 font-size: 1.25em;
2183 margin: 0;
2184 }
2185
2186 .mainpage-social .tile-top .social-tagline {
2187 color: rgba(255, 255, 255, 0.85);
2188 margin: 0;
2189 }
2190
2191 .mainpage-social .tile-bottom {
2192 border: none;
2193 padding: 1em 2em;
2194 }
2195
2196 .mainpage-social .tile-bottom p {
2197 color: #949eaa;
2198 font-weight: bold;
2199 text-transform: uppercase;
2200 letter-spacing: 0.025em;
2201 color: #ffffff;
2202 font-size: 0.9em;
2203 text-align: center;
2204 margin: 0;
2205 }
2206
2207 .mainpage-social.mainpage-discord .tile-top {
2208 background: #7289da;
2209 }
2210
2211 .mainpage-social.mainpage-discord .tile-bottom {
2212 background: #697ec4;
2213 }
2214
2215 .mainpage-social.mainpage-twitter .tile-top {
2216 background: #1da1f2;
2217 }
2218
2219 .mainpage-social.mainpage-twitter .tile-bottom {
2220 background: #1e96e0;
2221 }
2222
2223 .mainpage-events {
2224 border: none;
2225 margin-bottom: 0;
2226 }
2227
2228 .mainpage-events .tile-top {
2229 background-color: #4f348b;
2230 color: #fff;
2231 padding: 1em 2em;
2232 }
2233
2234 .mainpage-events .tile-top h2 {
2235 margin-bottom: 0;
2236 padding-bottom: 0;
2237 }
2238
2239 .mainpage-events .tile-top .note {
2240 margin-top: 0;
2241 color: #949eaa;
2242 font-style: italic;
2243 }
2244
2245 .mainpage-events .tile-top .note a,
2246 .mainpage-events .tile-top .note a:visited {
2247 color: #b8c5d4;
2248 }
2249
2250 .mainpage-events .tile-top a,
2251 .mainpage-events .tile-top a:visited,
2252 .mainpage-events .tile-top h2 a {
2253 color: #fff;
2254 text-decoration: none;
2255 }
2256
2257 .mainpage-events .tile-top ul {
2258 list-style: none;
2259 margin-top: 1em;
2260 margin-left: 0;
2261 }
2262
2263 .mainpage-events .tile-top li {
2264 padding-bottom: 0.6em;
2265 overflow: auto;
2266 }
2267
2268 .mainpage-events .tile-top li img {
2269 max-width: 30px;
2270 width: auto;
2271 height: auto;
2272 }
2273
2274 .mainpage-events .tile-top li a:hover,
2275 .mainpage-events .tile-top li a:focus {
2276 text-decoration: underline;
2277 }
2278
2279 .mainpage-events .tile-top li a {
2280 float: left;
2281 }
2282
2283 .mainpage-events .tile-top li a:first-child {
2284 width: 30px;
2285 }
2286
2287 .mainpage-events .tile-top li a:last-child {
2288 padding-left: 1.5em;
2289 text-indent: -1em;
2290 line-height: 1.5;
2291 }
2292
2293 .mainpage-events .tile-top li:last-of-type {
2294 display: none;
2295 }
2296
2297 .mainpage-events .tile-bottom {
2298 border: none;
2299 padding: 1em 1.75em;
2300 background-color: #3d276b;
2301 color: #fff;
2302 font-weight: bold;
2303 font-size: 0.9em;
2304 text-align: center;
2305 text-transform: uppercase;
2306 letter-spacing: 0.03em;
2307 margin: 0;
2308 }
2309
2310 body.wgl-darkmode .mainpage-events .tile-bottom {
2311 background-color: #3d276b;
2312 color: #fff;
2313 }
2314
2315 .mainpage-events .tile-bottom a,
2316 .mainpage-events .tile-bottom a:visited {
2317 color: #fff;
2318 text-decoration: none;
2319 }
2320
2321 .mainpage-events .tile-bottom .arrow {
2322 margin-left: 0.2em;
2323 }
2324
2325 .mw-recentchanges-toplinks th {
2326 font-size: 90%;
2327 }
2328
2329 .mw-changeslist-legend {
2330 margin-left: 0;
2331 }
2332
2333 #mw-mf-diffview del {
2334 border: 2px #379541 solid;
2335 padding: 0.15em 0.5em;
2336 background-color: #c1edbf !important;
2337 margin-right: 2px;
2338 }
2339
2340 #mw-mf-diffview del::before {
2341 content: "- ";
2342 font-weight: bold;
2343 font-size: 100%;
2344 }
2345
2346 #mw-mf-diffview ins {
2347 border: 2px #438ab5 solid;
2348 padding: 0.15em 0.5em;
2349 background-color: #bddff2 !important;
2350 margin-right: 2px;
2351 }
2352
2353 #mw-mf-diffview ins::before {
2354 content: "+ ";
2355 font-weight: bold;
2356 font-size: 100%;
2357 }
2358
2359 #mw-mf-minidiff {
2360 background: #f9f9f9;
2361 border: 1px #f1f1f1 solid;
2362 padding: 10px;
2363 }
2364
2365 .mw-diff-inline-changed,
2366 .mw-diff-inline-added {
2367 padding-bottom: 10px;
2368 }
2369
2370 #mw-mf-diffview #mw-mf-diff-comment::before {
2371 content: "(";
2372 }
2373
2374 #mw-mf-diffview #mw-mf-diff-comment::after {
2375 content: ")";
2376 }
2377
2378 #mw-mf-diffarea {
2379 padding: 1em 1em 2em !important;
2380 }
2381
2382 .forumsearchbox {
2383 padding: 0.5em;
2384 text-align: center;
2385 font-size: 90%;
2386 background-color: #f1f1f1;
2387 margin: auto !important;
2388 }
2389
2390 .forumsearchbox tbody {
2391 display: inline;
2392 }
2393
2394 .forumsearchbox input {
2395 margin: 0.5em;
2396 }
2397
2398 .forumheader {
2399 border-left: 15px solid #ccc;
2400 background-color: #f1f1f1;
2401 margin: 1em 0;
2402 padding: 12px;
2403 }
2404
2405 .forum_title {
2406 text-align: left;
2407 }
2408
2409 .forum_title .forum_new {
2410 font-weight: bold;
2411 padding-top: 2px;
2412 padding-bottom: 1px;
2413 }
2414
2415 .forum_edited {
2416 text-align: right;
2417 }
2418
2419 .forumlist {
2420 margin: auto !important;
2421 }
2422
2423 .forumlist .forum_editor,
2424 .forumlist .forum_type {
2425 display: none;
2426 }
2427
2428 .forumlist .forum_title,
2429 .forumlist .forum_edited {
2430 width: auto;
2431 }
2432
2433 .forumactiveheader,
2434 .forumarchiveheader,
2435 .forumoldarchives {
2436 background-color: #438ab5;
2437 color: #ffffff;
2438 }
2439
2440 .forumoldarchives a {
2441 color: #ffffff;
2442 }
2443
2444 .forumcolumnheader {
2445 background-color: #e6e6e6;
2446 color: #000000;
2447 text-align: left;
2448 padding-left: 5px;
2449 margin: auto;
2450 }
2451
2452 .mainpage-skills .tile-top {
2453 overflow-x: scroll;
2454 -webkit-overflow-scrolling: touch;
2455 }
2456
2457 .mainpage-skills .tile-top h2 {
2458 position: -webkit-sticky;
2459 position: sticky;
2460 left: 0.5em;
2461 }
2462
2463 .mainpage-skills .tile-top ul {
2464 columns: 3;
2465 width: 32em;
2466 list-style: none;
2467 margin-left: 0.75em;
2468 }
2469
2470 @media only screen and (min-width: 32em) {
2471 .mainpage-skills .tile-top ul {
2472 width: 100%;
2473 max-width: 50em;
2474 margin: auto;
2475 }
2476
2477 }
2478
2479 .mainpage-skills .tile-top li {
2480 display: flex;
2481 align-items: center;
2482 margin-bottom: 0.6em;
2483 }
2484
2485 .mainpage-skills .tile-top li a:first-child {
2486 width: 25px;
2487 height: 25px;
2488 padding: 4px;
2489 border-radius: 3px;
2490 }
2491
2492 .mainpage-skills .tile-top li a:last-child {
2493 flex: 1;
2494 color: #444e5a;
2495 font-weight: bold;
2496 padding-left: 0.5em;
2497 }
2498
2499 .skill-agility a:first-child,
2500 .skill-melee a:first-child {
2501 background: #bc483d;
2502 }
2503
2504 .skill-ranged a:first-child {
2505 background: #748d36;
2506 }
2507
2508 .skill-magic a:first-child {
2509 background: #6274ab;
2510 }
2511
2512 .skill-fishing a:first-child,
2513 .skill-fletching a:first-child {
2514 background: #3e8e9a;
2515 }
2516
2517 .skill-cooking a:first-child,
2518 .skill-divination a:first-child,
2519 .skill-thieving a:first-child {
2520 background: #91689e;
2521 }
2522
2523 .skill-farming a:first-child,
2524 .skill-woodcutting a:first-child {
2525 background: #59924f;
2526 }
2527
2528 .skill-mining a:first-child,
2529 .skill-summoning a:first-child {
2530 background: #6385a8;
2531 }
2532
2533 .skill-invention a:first-child,
2534 .skill-smithing a:first-child {
2535 background: #d2b244;
2536 }
2537
2538 .skill-archaeology a:first-child {
2539 background: #a56831;
2540 }