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 }