MediaWiki:Mobile.css: Difference between revisions
Jump to navigation
Jump to search
(Created page with "→<pre>: body { font-family: system-ui, -apple-system, Roboto, Helvetica, sans-serif; } @media all and (max-width: 320px) { body { font-size: 0.9em; } } #mw-content-text { line-height: 1.7em; } .pre-content h1, .content h1, .content h2 { font-weight: bold; } body { background: var(--body-background-color); color: var(--text-color); } select { color: var(--text-color); } a:not( [ href ] ) { color: inherit; } a.exter...") |
(try this) |
||
| Line 1,643: | Line 1,643: | ||
--thumb-image-background: var(--body-light); | --thumb-image-background: var(--body-light); | ||
--thumb-caption-background: var(--body-mid); | --thumb-caption-background: var(--body-mid); | ||
--body-background-image: https://runescape.wiki/images/RuneScape_Wiki_background.jpg | |||
} | } | ||
.content .thumbimage { | .content .thumbimage { | ||
Revision as of 13:18, 5 October 2022
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-size: 900px;
95 box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
96 }
97
98 .header-container .header .search-box {
99 text-align: right;
100 }
101
102 .header-container .header .search {
103 box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
104 }
105
106 .header-container .notification-count {
107 border-radius: 50%;
108 }
109
110 .header-container .notification-count.notification-unseen {
111 background: none;
112 }
113
114 .header-container .branding-box {
115 opacity: 1;
116 }
117
118 .overlay {
119 background: var(--body-main);
120 }
121
122 .overlay textarea {
123 color: var(--text-color);
124 }
125
126 .overlay.search-overlay {
127 background: var(--body-main);
128 }
129
130 .overlay.search-overlay .results,
131 .overlay.search-overlay .search-feedback {
132 background-color: var(--body-light);
133 }
134
135 .overlay.search-overlay .search-content {
136 border-color: var(--body-mid);
137 }
138
139 .overlay .license {
140 color: var(--base-text-color);
141 }
142
143 .overlay .panel {
144 border-color: var(--sidebar);
145 }
146
147 .overlay .content-header {
148 background-color: var(--body-light);
149 border-color: transparent;
150 }
151
152 .overlay.overlay-loading {
153 background: var(--ooui-window-background);
154 }
155
156 .overlay .overlay-content {
157 background: var(--body-main);
158 }
159
160 .page-summary h2,
161 .page-summary h3 {
162 color: var(--text-color);
163 }
164
165 .page-list li,
166 .topic-title-list li,
167 .site-link-list li {
168 border-color: var(--body-mid);
169 }
170
171 .overlay-enabled .overlay:not(.editor-overlay),
172 .overlay-enabled #mw-mf-page-center {
173 overflow-y: scroll;
174 }
175
176 .overlay-header-container,
177 .overlay-footer-container {
178 background-color: var(--body-background-color);
179 border-color: transparent;
180 }
181
182 .editor-overlay .wikitext-editor {
183 color: var(--text-color);
184 }
185
186 .editor-overlay .overlay-header {
187 outline-color: transparent;
188 }
189
190 .editor-overlay .summary-request {
191 color: var(--text-color);
192 }
193
194 .editor-overlay .editor-switcher {
195 border: none;
196 }
197
198 .action-submit .mw-editnotice .action-edit .mw-editnotice,
199 .action-submit .mw-editTools,
200 .action-edit .mw-editTools,
201 .action-submit .preview-limit-report-wrapper,
202 .action-edit .preview-limit-report-wrapper,
203 .action-submit .diff-otitle,
204 .action-edit .diff-otitle,
205 .action-submit .diff-ntitle,
206 .action-edit .diff-ntitle,
207 .action-submit #section_0,
208 .action-edit #section_0,
209 .action-submit #editpage-copywarn,
210 .action-edit #editpage-copywarn,
211 .action-submit #mw-anon-edit-warning,
212 .action-edit #mw-anon-edit-warning {
213 color: var(--byline-color);
214 }
215
216 .wikitext-editor {
217 background-color: var(--body-main);
218 }
219
220 .ve-mobile-fakeToolbar {
221 border: none;
222 }
223
224 .ve-mobile-fakeToolbar-container {
225 background: var(--body-background-color);
226 border: none;
227 }
228
229 .ve-mobile-fakeToolbar .mw-ui-icon-mf-spinner {
230 border-color: transparent;
231 }
232
233 .ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .ve-ui-toolbar-group-back {
234 border-color: transparent;
235 }
236
237 .ve-ui-mobileContext {
238 background-color: var(--body-light);
239 border-color: var(--body-light);
240 }
241
242 .ve-ui-mobileContext .ve-ui-linearContextItem-body-action-wrapper {
243 border-color: var(--body-border);
244 }
245
246 .ve-ui-linearContextItem-foot:not(:empty) {
247 border-color: var(--body-border);
248 }
249
250 .ve-ui-mwSaveDialog-options {
251 backgroubd-color: var(--body-light);
252 border-color: var(--body-mid);
253 }
254
255 .page-actions-menu {
256 border-color: var(--sidebar);
257 }
258
259 #language-selector {
260 display: none;
261 }
262
263 .minerva__tab-container .minerva__tab {
264 color: var(--text-color);
265 }
266
267 .minerva__tab-container .minerva__tab.new,
268 .minerva__tab-container .minerva__tab.new:visited,
269 .minerva__tab-container .minerva__tab.new:hover,
270 .minerva__tab-container .minerva__tab.new:active {
271 color: var(--redlink-color);
272 }
273
274 .minerva__tab-container .minerva__tab.selected {
275 border-color: var(--body-border);
276 }
277
278 .heading-holder .tagline {
279 color: var(--base-heading-color);
280 }
281
282 .minerva-footer {
283 border: none;
284 }
285
286 .mw-footer > .post-content {
287 margin-top: 32px;
288 }
289
290 .mw-footer > .post-content > .minerva-footer-logo {
291 display: none;
292 }
293
294 .mw-footer .hlist li:after {
295 color: var(--background-text-color);
296 }
297
298 .last-modified-bar {
299 border-top: 1px solid;
300 border-color: transparent;
301 background: none;
302 color: var(--text-color);
303 }
304
305 .last-modified-bar a,
306 .last-modified-bar a:active,
307 .last-modified-bar a:visited,
308 .last-modified-bar .last-modified-text-accent {
309 color: var(--background-text-color);
310 }
311
312 .last-modified-bar.active,
313 .last-modified-bar.active:active,
314 .last-modified-bar.active:visited,
315 .last-modified-bar.active .last-modified-text-accent {
316 color: #fff;
317 }
318
319 .mw-ui-icon-mf-expand-gray:not(.mw-ui-icon-mf-expand-invert):before {
320 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");
321 }
322
323 #content {
324 border-top: none;
325 }
326
327 .toggle-list__list {
328 background-color: var(--wikitable-bg);
329 }
330
331 .toggle-list-item__anchor:visited,
332 .toggle-list-item__anchor:active {
333 color: var(--base-text-color);
334 }
335
336 .toggle-list-item:hover {
337 background: var(--wikitable-bg-lighter);
338 }
339
340 .toggle-list-item__label {
341 color: var(--base-text-color);
342 }
343
344 .mw-ui-icon-wikimedia-search-base20:before {
345 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");
346 }
347
348 .mw-ui-icon-wikimedia-menu-base20:before {
349 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");
350 }
351
352 .mw-ui-icon-wikimedia-bellOutline-base20:before {
353 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");
354 }
355
356 .mw-ui-icon-minerva-userAvatarOutline:before {
357 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");
358 }
359
360 @media all and (min-width: 1000px) {
361 .mw-ui-icon-with-label-desktop,
362 .mw-ui-icon-with-label-desktop:hover,
363 .mw-ui-icon-with-label-desktop:focus,
364 .mw-ui-icon-with-label-desktop:active,
365 .mw-ui-icon-with-label-desktop:visited {
366 color: var(--base-text-color) !important;
367 }
368
369 }
370
371 .header-action .mw-ui-icon-mf-close-base20:before {
372 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");
373 }
374
375 #mw-mf-page-left {
376 background-color: var(--body-background-color);
377 }
378
379 #mw-mf-page-left .secondary-action {
380 border-left-color: var(--body-mid);
381 }
382
383 #mw-mf-page-left ul li {
384 background-color: var(--body-main);
385 border-color: var(--body-mid);
386 }
387
388 #mw-mf-page-left ul li a {
389 color: var(--base-text-color);
390 }
391
392 #mw-mf-page-left ul li a:hover {
393 box-shadow: inset 4px 0 0 0 var(--link-color);
394 }
395
396 #mw-mf-page-left ul.hlist li a {
397 color: var(--background-link-color);
398 }
399
400 #mw-mf-page-left ul.hlist li a span {
401 font-size: 0.8125rem;
402 }
403
404 .notifications-overlay.navigation-drawer {
405 box-shadow: -1px 0 8px 0 rgba(0, 0, 0, 0.35);
406 }
407
408 .notifications-overlay .mw-echo-ui-actionMenuPopupWidget-menu {
409 border: none;
410 }
411
412 .mw-ui-anchor.mw-ui-progressive,
413 .mw-ui-anchor.mw-ui-progressive:active,
414 .mw-ui-anchor.mw-ui-progressive:hover {
415 color: var(--link-color);
416 }
417
418 .minerva-talk-full-page-button {
419 background-color: var(--body-main);
420 border-color: var(--body-dark);
421 color: var(--link-color);
422 }
423
424 .minerva-talk-content-explained {
425 border-color: var(--sidebar);
426 color: var(--base-text-color);
427 }
428
429 .talk-overlay .comment .wikitext-editor {
430 border-color: var(--body-border);
431 }
432
433 .client-js .skin-minerva--talk-simplified .section-heading {
434 border-color: var(--sidebar);
435 }
436
437 .mw-notification a,
438 .toast a {
439 color: var(--link-color);
440 }
441
442 .drawer {
443 background-color: var(--body-light);
444 }
445
446 .drawer.references-drawer {
447 background-color: var(--body-light);
448 color: var(--text-color);
449 }
450
451 .drawer.references-drawer a {
452 color: var(--link-color);
453 }
454
455 .drawer.references-drawer .references-drawer__title {
456 color: var(--text-color);
457 }
458
459 .drawer.references-drawer .mw-ui-icon::before {
460 filter: brightness(0);
461 }
462
463 .cta-holder {
464 background: var(--body-light);
465 }
466
467 .cta-holder .desc {
468 color: var(--byline-color);
469 }
470
471 .mw-tag-marker {
472 border-color: var(--body-border);
473 }
474
475 .oo-ui-toolGroup {
476 background: var(--body-background-color);
477 }
478
479 .load-fail-msg {
480 color: var(--text-color);
481 }
482
483 .load-fail-msg-link a {
484 color: var(--link-color);
485 }
486
487 .image-details {
488 background-color: var(--body-light);
489 border-color: transparent;
490 }
491
492 .mw-recentchanges-toplinks th {
493 font-size: 90%;
494 }
495
496 .mw-changeslist-legend {
497 margin-left: 0;
498 }
499
500 @media all and (min-width: 720px) {
501 .ns-special .pre-content {
502 background-color: transparent;
503 }
504
505 .ns-special .mw-body {
506 background: var(--body-main);
507 }
508
509 .ns-special .mw-body form {
510 background: transparent;
511 }
512
513 }
514
515 form.mw-mf-settings .oo-ui-fieldLayout,
516 form.mw-mf-settings .oo-ui-fieldLayout:first-child {
517 border-color: var(--body-mid);
518 }
519
520 .ns-special .content-header {
521 border-bottom-color: var(--body-dark);
522 }
523
524 .action-history .mw-history-compareselectedversions {
525 background-color: var(--body-main);
526 }
527
528 .action-history #pagehistory li:not(.selected) {
529 border-bottom-color: var(--sidebar);
530 }
531
532 ul.mw-contributions-list li,
533 ul.special li {
534 border-color: var(--sidebar);
535 }
536
537 .page-list li > a:not(.mw-ui-icon-element),
538 .topic-title-list li > a:not(.mw-ui-icon-element),
539 .site-link-list li > a:not(.mw-ui-icon-element) {
540 color: var(--byline-color);
541 }
542
543 .page-list.side-list .list-thumb,
544 .topic-title-list.side-list .list-thumb,
545 .site-link-list.side-list .list-thumb {
546 color: var(--text-color);
547 }
548
549 .mw-mf-user {
550 color: var(--text-color);
551 }
552
553 .diff-editfont-monospace {
554 font-family: monospace,monospace;
555 }
556
557 :root {
558 --diff-deletedline-background: #fbc0ba;
559 }
560
561 .minoredit {
562 background: var(--body-mid);
563 }
564
565 #mw-mf-diffview .mw-mf-diff-date {
566 color: var(--byline-color);
567 }
568
569 #mw-mf-diffview .mw-diff-inline-deleted del,
570 #mw-mf-diffview .mw-diff-inline-changed del {
571 background: var(--diff-deletedline-background);
572 color: var(--diff-deletedline-color);
573 border-radius: 0.33em;
574 }
575
576 #mw-mf-diffview .mw-diff-inline-added ins,
577 #mw-mf-diffview .mw-diff-inline-changed ins {
578 background: var(--diff-addedline-background);
579 color: var(--diff-addedline-color);
580 border-radius: 0.33em;
581 }
582
583 #mw-mf-diffview .mw-diff-inline-moved {
584 background: var(--diff-context-background);
585 }
586
587 #mw-mf-diffview #mw-mf-userinfo {
588 background: var(--body-light);
589 border-top-color: var(--body-border);
590 }
591
592 #mw-mf-diffview #mw-mf-userinfo .mw-mf-edit-count {
593 color: var(--text-color);
594 }
595
596 #mw-mf-diffview #mw-mf-userinfo .mw-mf-edit-count div {
597 color: var(--base-text-color);
598 }
599
600 .content table.relative-location {
601 display: table;
602 }
603
604 .floornumber-us {
605 display: none;
606 }
607
608 div.hatnote {
609 padding: 5px 7px;
610 color: var(--text-color);
611 font-size: 0.8125rem;
612 background-color: var(--body-mid);
613 margin: 0 0 0.5em 0;
614 overflow: hidden;
615 }
616
617 .tbz-check {
618 display: none;
619 }
620
621 @media screen and (max-width: 719px) {
622 .pollquestion {
623 width: auto;
624 }
625
626 .transcript {
627 width: auto;
628 margin: 20px auto;
629 }
630
631 .musicplayer {
632 clear: both !important;
633 float: none !important;
634 width: 100%;
635 max-width: 100%;
636 text-align: center;
637 margin-left: 0;
638 }
639
640 }
641
642 .infobox {
643 font-size: 85%;
644 background-color: var(--body-light);
645 border: 1px solid var(--body-border);
646 box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
647 table-layout: fixed;
648 }
649
650 .content .infobox {
651 display: table;
652 }
653
654 .content .infobox caption {
655 display: table-caption;
656 }
657
658 .infobox .infobox-header {
659 color: var(--infobox-text-color);
660 font-size: 1.15em;
661 background: var(--body-dark);
662 padding: 0.5em 0;
663 text-align: center;
664 }
665
666 .infobox .infobox-subheader {
667 background: var(--body-dark);
668 line-height: 2em;
669 text-align: center;
670 }
671
672 .infobox .infobox-subheader a {
673 color: var(--infobox-text-color);
674 }
675
676 .infobox th:not(.infobox-nested):not(.infobox-subheader):not(.infobox-header) {
677 text-align: right;
678 vertical-align: top;
679 border-right: 0.175em solid var(--body-dark);
680 padding: 0.2em 0.5em;
681 }
682
683 .infobox caption.infobox-caption {
684 text-align: center;
685 }
686
687 .infobox td {
688 padding: 0.25em 0.5em;
689 line-height: 1.6em;
690 padding-bottom: 0.6em;
691 }
692
693 .infobox td.infobox-nested {
694 padding: 0.25em 0;
695 line-height: 1em;
696 }
697
698 .infobox .infobox-padding {
699 height: 0.5em;
700 padding: 0;
701 border: 0;
702 }
703
704 .infobox .infobox-image {
705 text-align: center;
706 }
707
708 .infobox .infobox-image.inventory-image {
709 height: 32px;
710 }
711
712 .infobox .infobox-nested {
713 text-align: center;
714 }
715
716 .infobox .infobox-nested + .infobox-nested {
717 border-left: 0.175em solid var(--body-dark);
718 }
719
720 .infobox .infobox-full-width-content {
721 max-width: 300px;
722 text-align: center;
723 overflow-x: hidden;
724 padding: 0;
725 }
726
727 .skill-info a[href$="?action=edit"] + a[href$="?action=edit"] {
728 display: none;
729 }
730
731 .infobox-bonuses {
732 float: none;
733 table-layout: fixed;
734 font-size: 100%;
735 }
736
737 table.infobox-switch.infobox-bonuses {
738 display: block !important;
739 }
740
741 .content .infobox-bonuses {
742 display: block;
743 }
744
745 .infobox-bonuses tbody {
746 border: 1px solid var(--body-border);
747 }
748
749 .infobox-bonuses .infobox-bonuses-image {
750 text-align: center;
751 vertical-align: middle;
752 border: 1px solid var(--body-border);
753 }
754
755 .infobox-bonuses .infobox-bonuses-image-caption {
756 font-size: 0.85em;
757 }
758
759 .infobox-bonuses .infobox-subheader {
760 background: var(--body-dark);
761 color: var(--infobox-text-color);
762 line-height: 2em;
763 border-top: none;
764 border-bottom: none;
765 }
766
767 .infobox-bonuses .infobox-subheader a {
768 color: var(--infobox-text-color);
769 }
770
771 .infobox-bonuses .infobox-subheader + .infobox-subheader {
772 border-left: 0.175em solid var(--body-light);
773 }
774
775 .infobox-bonuses a {
776 font-weight: bold;
777 }
778
779 .poh-room {
780 background-color: var(--infobox-room-poh-color);
781 margin: auto;
782 width: 100px;
783 }
784
785 .poh-room img {
786 display: block;
787 }
788
789 .poh-room-row {
790 display: flex;
791 }
792
793 .poh-room-text {
794 margin: auto;
795 width: 92px;
796 }
797
798 .infobox-buttons {
799 margin-top: 0.5em;
800 text-align: center;
801 }
802
803 .infobox-bottom-links {
804 display: none;
805 }
806
807 .advanced-data {
808 display: none;
809 }
810
811 @media screen and (min-width: 720px) {
812 .content table.infobox {
813 float: right;
814 margin-top: 0.5em;
815 margin-left: 1em;
816 width: 300px !important;
817 }
818
819 .content table.infobox.skill-info {
820 float: none;
821 margin: 0 0 1em 0;
822 }
823
824 .content table.infobox.infobox-bonuses {
825 display: table;
826 float: none;
827 margin: 0;
828 width: 100% !important;
829 max-width: 600px;
830 }
831
832 }
833
834 .multi-infobox {
835 margin-top: 0.5em;
836 margin-bottom: 2.5em;
837 }
838
839 .multi-infobox .tabber {
840 margin: 0;
841 }
842
843 .multi-infobox .tabber .tabbernav {
844 text-align: center;
845 margin-left: 0;
846 }
847
848 .mw-body .multi-infobox .tabber .tabbertab {
849 padding: 5px;
850 }
851
852 .multi-infobox table.infobox {
853 margin: 0;
854 }
855
856 .multi-infobox .infobox-buttons {
857 margin-top: 0;
858 }
859
860 @media screen and (min-width: 720px) {
861 .multi-infobox {
862 float: right;
863 margin-left: 1em;
864 width: 300px;
865 }
866
867 }
868
869 @media screen and (max-width: 720px) {
870 .inventorytable.storage-left,
871 .lootingbagtable.storage-left,
872 .runepouchtable.storage-left {
873 margin-right: auto;
874 clear: none;
875 float: none;
876 }
877
878 .inventorytable.storage-right,
879 .lootingbagtable.storage-right,
880 .runepouchtable.storage-right {
881 margin-left: auto;
882 clear: none;
883 float: none;
884 }
885
886 .runepouchtable.storage-center {
887 margin-left: 23px;
888 }
889
890 .runepouchtable.storage-right {
891 margin-left: 23px;
892 }
893
894 .equipment-div.equipment-left,
895 .equipment-div-buttons.equipment-left {
896 margin-right: auto;
897 clear: none;
898 float: none;
899 width: 100%;
900 }
901
902 .equipment-div.equipment-center,
903 .equipment-div-buttons.equipment-center {
904 width: 100%;
905 }
906
907 .equipment-div.equipment-right,
908 .equipment-div-buttons.equipment-right {
909 margin-left: auto;
910 clear: none;
911 float: none;
912 width: 100%;
913 }
914
915 }
916
917 .tile {
918 padding: 1.5em 2em 1em;
919 }
920
921 .tile h2 {
922 font-weight: 600;
923 border: none;
924 margin-top: 0.4em;
925 }
926
927 .tile .byline + h2 {
928 margin-top: -0.5em;
929 }
930
931 .tile-top {
932 padding: 1.3rem 1.5rem 2rem;
933 }
934
935 .tile-bottom {
936 padding: 1rem 1.5rem 2rem;
937 }
938
939 .tile-bottom.read-more {
940 padding: 0;
941 }
942
943 .tile-bottom.read-more a {
944 padding: 1em 1.75em;
945 }
946
947 .tile.oswf-day {
948 float: none !important;
949 padding: 0.5em 2em;
950 }
951
952 .tile.oswf-day h2 {
953 margin-right: auto;
954 margin-left: auto;
955 margin-top: -0.5em;
956 }
957
958 .oswf-tile {
959 margin-bottom: 1em;
960 }
961
962 .oswf-tile h2 {
963 clear: none !important;
964 margin-top: 0;
965 padding-top: f2em !important;
966 }
967
968 .oswf-tile .oswf-img {
969 display: block;
970 max-width: 75px;
971 float: right;
972 }
973
974 .oswf-tile .oswf-img img {
975 max-width: 100%;
976 height: auto !important;
977 }
978
979 :root {
980 --mobile-navbox-wide-bg-color: #dcd3bf;
981 --mobile-navbox-linear-gradient: linear-gradient(to right, rgba(226, 219, 200, 0), #e2dbc8 95%, #e2dbc8);
982 }
983
984 .navbox {
985 border: 1px solid var(--body-border);
986 box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
987 font-size: 0.85em;
988 }
989
990 .content .navbox ul {
991 padding-left: 0;
992 }
993
994 .content .navbox ul li {
995 margin-bottom: 0;
996 }
997
998 @media screen and (max-width: 719px) {
999 .navbox td,
1000 .navbox th,
1001 .navbox tr,
1002 .navbox tbody,
1003 .navbox .navbox-subgroup {
1004 display: block;
1005 }
1006
1007 }
1008
1009 @media screen and (min-width: 720px) {
1010 .content table.navbox,
1011 .content .navbox table {
1012 width: 100% !important;
1013 }
1014
1015 }
1016
1017 .navbox .navbox-subgroup {
1018 margin: 0;
1019 }
1020
1021 .navbox .navbar {
1022 display: none;
1023 }
1024
1025 .navbox .plink-template,
1026 .navbox img {
1027 display: none;
1028 }
1029
1030 .navbox-title {
1031 color: var(--text-color);
1032 background-color: var(--body-dark);
1033 font-size: 140%;
1034 font-weight: bold;
1035 text-align: center;
1036 padding: 0.25em 0;
1037 }
1038
1039 @media screen and (min-width: 720px) {
1040 .navbox-title {
1041 border-bottom: 1px solid var(--body-border);
1042 }
1043
1044 }
1045
1046 .navbox-group-title {
1047 background-color: var(--body-mid);
1048 font-weight: bold;
1049 padding: 0.2em 0.85em;
1050 }
1051
1052 @media screen and (max-width: 719px) {
1053 .navbox-group-title {
1054 overflow: hidden;
1055 white-space: nowrap;
1056 text-overflow: ellipsis;
1057 }
1058
1059 }
1060
1061 @media screen and (min-width: 720px) {
1062 .navbox-group-title {
1063 border: 1px solid var(--body-border);
1064 border-width: 0 1px 1px 0;
1065 width: 12vw;
1066 }
1067
1068 }
1069
1070 .navbox-group-title-hidden {
1071 display: none;
1072 }
1073
1074 .navbox-list {
1075 padding: 0;
1076 position: relative;
1077 }
1078
1079 @media screen and (min-width: 720px) {
1080 .navbox-list {
1081 border-bottom: 1px solid var(--body-border);
1082 }
1083
1084 }
1085
1086 @media screen and (max-width: 719px) {
1087 .navbox-list ul {
1088 white-space: nowrap;
1089 overflow-x: auto;
1090 overflow-y: hidden;
1091 -webkit-overflow-scrolling: touch;
1092 }
1093
1094 }
1095
1096 @media screen and (min-width: 720px) {
1097 .navbox-list ul {
1098 padding: 0.2em 0.85em 0.5em !important;
1099 }
1100
1101 }
1102
1103 .navbox-list li {
1104 display: inline-flex;
1105 align-items: center;
1106 height: 3.5em;
1107 margin: 0 0 0 0.85em;
1108 }
1109
1110 @media screen and (min-width: 720px) {
1111 .navbox-list li {
1112 height: 2.1em;
1113 }
1114
1115 .navbox-list li:first-child {
1116 margin-left: 0;
1117 }
1118
1119 }
1120
1121 .navbox-list li + li {
1122 margin-left: 0.5em;
1123 }
1124
1125 .navbox-list li + li > a::before {
1126 content: '•';
1127 display: inline-block;
1128 white-space: pre-wrap;
1129 position: relative;
1130 left: -0.425em;
1131 color: var(--text-color);
1132 pointer-events: none;
1133 }
1134
1135 .navbox-list li + li > a + a::before {
1136 display: none;
1137 }
1138
1139 .navbox-list li:last-child {
1140 margin-right: 2em;
1141 }
1142
1143 .navbox-list:not([style*="center"])::after {
1144 content: '';
1145 display: block;
1146 position: absolute;
1147 background-image: var(--mobile-navbox-linear-gradient);
1148 height: 100%;
1149 width: 2.5em;
1150 top: 0;
1151 right: 0;
1152 pointer-events: none;
1153 }
1154
1155 @media screen and (min-width: 720px) {
1156 .navbox-list:not([style*="center"])::after {
1157 display: none;
1158 }
1159
1160 }
1161
1162 .navbox-list.navbox-parent {
1163 border-bottom: 0;
1164 padding: 0;
1165 }
1166
1167 .navbox-list.navbox-parent::after {
1168 display: none;
1169 }
1170
1171 .navbox-group .navbox-group .navbox-group-title {
1172 background-color: var(--body-light);
1173 padding: 0 0.85em 0 1.7em;
1174 }
1175
1176 @media screen and (min-width: 720px) {
1177 .navbox-group .navbox-group .navbox-group-title {
1178 padding-left: 0.85em;
1179 }
1180
1181 }
1182
1183 .navbox-group .navbox-group .navbox-list ul {
1184 padding-left: 1.7em;
1185 }
1186
1187 .navbox-group .navbox-group .navbox-list li {
1188 margin-bottom: 0;
1189 }
1190
1191 .navbox-group .navbox-group .navbox-list li:first-child {
1192 margin-left: 0;
1193 }
1194
1195 .navbox-group .navbox-group.navbox-group-split .navbox-list ul {
1196 padding-left: 0.85em;
1197 }
1198
1199 .navbox-group .navbox-group .navbox-group:first-child .navbox-group-title {
1200 padding-top: 0.5em;
1201 }
1202
1203 @media screen and (min-width: 720px) {
1204 .navbox-group .navbox-group .navbox-group:first-child .navbox-group-title {
1205 padding-top: 0;
1206 }
1207
1208 }
1209
1210 .navbox-group .navbox-group .navbox-group .navbox-group-title {
1211 background-color: transparent;
1212 padding-left: 2.55em;
1213 }
1214
1215 @media screen and (min-width: 720px) {
1216 .navbox-group .navbox-group .navbox-group .navbox-group-title {
1217 background-color: var(--mobile-navbox-wide-bg-color);
1218 padding-left: 0.85em;
1219 }
1220
1221 }
1222
1223 .navbox-group .navbox-group .navbox-group .navbox-list ul {
1224 padding-left: 2.55em;
1225 }
1226
1227 .navbox-group .navbox-group .navbox-group.navbox-group-split .navbox-list ul {
1228 padding-left: 1.7em;
1229 }
1230
1231 @media screen and (max-width: 720px) {
1232 .questdetails-header {
1233 text-align: center;
1234 display: block;
1235 width: auto;
1236 background-color: rgba(0, 0, 0, 0.1);
1237 }
1238
1239 .questdetails-info {
1240 display: block;
1241 margin-top: 10px;
1242 margin-bottom: 10px;
1243 }
1244
1245 .questdetails tr,
1246 .questdetails tbody {
1247 display: block;
1248 }
1249
1250 .questdetails {
1251 padding: 0;
1252 }
1253
1254 .questdetails ul {
1255 padding-left: 2px;
1256 margin-left: 2px;
1257 }
1258
1259 .questdetails-info {
1260 word-wrap: normal;
1261 }
1262
1263 }
1264
1265 @keyframes slide-up {
1266 from {
1267 opacity: 0;
1268 transform: translateY(1rem);
1269 }
1270
1271 to {
1272 opacity: 1;
1273 transform: translateY(0);
1274 }
1275
1276 }
1277
1278 @media only screen and (max-width: 65.999rem) {
1279 .mainpage-header h1 {
1280 text-align: center;
1281 }
1282
1283 }
1284
1285 .mainpage-body {
1286 display: unset;
1287 }
1288
1289 .mainpage-body ul {
1290 margin: 0 0.25em;
1291 list-style-type: disc;
1292 }
1293
1294 .mainpage-body .tile-row {
1295 width: inherit;
1296 }
1297
1298 .mainpage-left {
1299 margin-right: 0;
1300 }
1301
1302 .mainpage-left .tile {
1303 padding: 2.5em 1.75em 2em;
1304 }
1305
1306 .mainpage-left .tile h2 {
1307 padding: 0;
1308 margin: 0.65em 0.5em;
1309 }
1310
1311 .mainpage-left .tile-halves h2 {
1312 padding: 0;
1313 margin: 0.65em 0.5em;
1314 }
1315
1316 .mainpage-recent-updates {
1317 display: flex;
1318 flex-flow: row wrap;
1319 justify-content: center;
1320 padding: 1.5em 1em 2.5em;
1321 white-space: nowrap;
1322 -webkit-overflow-scrolling: touch;
1323 -webkit-scroll-snap-type: mandatory;
1324 scroll-snap-type: mandatory;
1325 }
1326
1327 .mainpage-recent-updates::before {
1328 content: 'Recent updates';
1329 display: block;
1330 position: -webkit-sticky;
1331 position: sticky;
1332 left: 1.5em;
1333 color: var(--byline-color);
1334 font-weight: bold;
1335 text-transform: uppercase;
1336 letter-spacing: 0.025em;
1337 }
1338
1339 .mainpage-recent-updates .tile-halves {
1340 display: inline-block;
1341 margin: 1em 0.75em 0 0;
1342 width: 100%;
1343 white-space: initial;
1344 flex: unset;
1345 scroll-snap-align: center;
1346 }
1347
1348 .mainpage-recent-updates .tile-halves:nth-child(1) {
1349 animation: 0.9s 0.2s both slide-up;
1350 }
1351
1352 .mainpage-recent-updates .tile-halves:nth-child(2) {
1353 animation: 0.9s 0.4s both slide-up;
1354 }
1355
1356 .mainpage-recent-updates .tile-halves:nth-child(3) {
1357 animation: 0.9s 0.6s both slide-up;
1358 margin-right: 1em;
1359 }
1360
1361 .mainpage-recent-updates .tile-top {
1362 height: 9em;
1363 overflow: hidden;
1364 }
1365
1366 .mainpage-recent-updates .tile-bottom {
1367 padding-bottom: 0.5rem;
1368 }
1369
1370 .mainpage-recent-updates .byline {
1371 margin: 0;
1372 }
1373
1374 .mainpage-recent-updates .byline + h2 {
1375 margin: 0.025em 0 0;
1376 padding: 0;
1377 }
1378
1379 .mainpage-recent-updates a + a:before {
1380 content: "· ";
1381 display: inline-block;
1382 white-space: pre-wrap;
1383 pointer-events: none;
1384 }
1385
1386 @media only screen and (min-width: 58em) {
1387 .mainpage-recent-updates {
1388 overflow-x: initial;
1389 }
1390
1391 .mainpage-recent-updates::before {
1392 width: 100%;
1393 }
1394
1395 .mainpage-recent-updates .tile-halves {
1396 width: 85vw;
1397 max-width: 18em;
1398 }
1399
1400 .mainpage-recent-updates .tile-halves:nth-child(3) {
1401 margin-right: 0;
1402 }
1403
1404 .mainpage-recent-updates .tile-halves img {
1405 margin-top: unset;
1406 }
1407
1408 .mainpage-recent-updates .tile-halves:nth-child(3) {
1409 margin-right: 0;
1410 }
1411
1412 }
1413
1414 @media only screen and (max-width: 65.999rem) {
1415 .mainpage-recent-updates .tile-halves:last-child {
1416 display: block;
1417 }
1418
1419 .mainpage-recent-updates .tile-halves:nth-last-child(1),
1420 .mainpage-recent-updates .tile-halves:nth-last-child(3) {
1421 margin-right: 0;
1422 }
1423
1424 }
1425
1426 .mainpage-contents {
1427 background: var(--body-mid);
1428 padding: 55px 1em 2em 2.5em;
1429 display: flex;
1430 flex-wrap: nowrap;
1431 align-items: flex-start;
1432 overflow-x: auto;
1433 position: relative;
1434 }
1435
1436 .mainpage-contents::before {
1437 content: 'Explore';
1438 margin: 1em;
1439 position: absolute;
1440 top: 0;
1441 color: inherit;
1442 font-weight: bold;
1443 text-transform: uppercase;
1444 letter-spacing: 0.025em;
1445 }
1446
1447 .mainpage-contents .tile-halves {
1448 border: none;
1449 background: none;
1450 box-shadow: none;
1451 flex: 0 0 auto;
1452 width: 200px;
1453 margin-right: 10px;
1454 }
1455
1456 .mainpage-contents .tile-halves:nth-child(3) {
1457 margin-right: 0.9rem;
1458 }
1459
1460 .mainpage-contents .tile-top {
1461 padding: 0;
1462 height: initial;
1463 }
1464
1465 .mainpage-contents .tile-bottom {
1466 border: none;
1467 }
1468
1469 .mainpage-contents h2 {
1470 width: 100%;
1471 }
1472
1473 .mainpage-skills .tile-top {
1474 }
1475
1476 @media only screen and (min-width: 32em) {
1477 .mainpage-skills .tile-top ul {
1478 width: 100%;
1479 max-width: 50em;
1480 margin: auto;
1481 }
1482
1483 }
1484
1485 .mainpage-wikinews::before {
1486 content: 'From the wiki';
1487 margin-left: 0.75em;
1488 color: var(--byline-color);
1489 font-weight: bold;
1490 text-transform: uppercase;
1491 letter-spacing: 0.025em;
1492 }
1493
1494 .mainpage-wikinews .news-date {
1495 font-weight: bold;
1496 margin-bottom: 0;
1497 }
1498
1499 .mainpage-wikinews p {
1500 margin-left: 0.5em;
1501 margin-right: 0.5em;
1502 }
1503
1504 .mainpage-discord .tile-top {
1505 padding: 1em 2em;
1506 height: 70px;
1507 }
1508
1509 .mainpage-discord .tile-top .partner-icon img {
1510 float: left;
1511 margin: 0 1em 0 -1em;
1512 }
1513
1514 .mainpage-discord .tile-top .server-name {
1515 margin: 0;
1516 }
1517
1518 .mainpage-discord .tile-top .server-tagline {
1519 margin: 0;
1520 }
1521
1522 .mainpage-twitter {
1523 margin-bottom: 0;
1524 }
1525
1526 .mainpage-twitter .tile-top {
1527 padding: 1em 2em;
1528 height: 70px;
1529 }
1530
1531 .mainpage-twitter .tile-top .twitter-logo {
1532 float: left;
1533 margin: 0 1em 0 -1em;
1534 }
1535
1536 .mainpage-twitter .tile-top .twitter-name {
1537 margin: 0;
1538 }
1539
1540 .mainpage-twitter .tile-top .twitter-tagline {
1541 margin: 0;
1542 }
1543
1544 .ns-120 section ul,
1545 .transcript ul,
1546 .ns-120 section ol,
1547 .transcript ol {
1548 padding: 0;
1549 }
1550
1551 .ns-120 section ul,
1552 .transcript ul {
1553 margin: 5px 0 0 0;
1554 }
1555
1556 .ns-120 section ul ul,
1557 .transcript ul ul,
1558 .ns-120 section ul ol,
1559 .transcript ul ol {
1560 margin: 5px 0 0 15px;
1561 }
1562
1563 .ns-120 section ul,
1564 .transcript ul,
1565 .ns-120 section ul ul,
1566 .transcript ul ul,
1567 .ns-120 section ul ol,
1568 .transcript ul ol {
1569 list-style: none !important;
1570 border-left: 1px dashed var(--transcript-border-color);
1571 }
1572
1573 .ns-120 section ul:hover,
1574 .transcript ul:hover,
1575 .ns-120 section ul ul:hover,
1576 .transcript ul ul:hover,
1577 .ns-120 section ul ol:hover,
1578 .transcript ul ol:hover {
1579 border-color: var(--transcript-border-hover-color);
1580 }
1581
1582 .ns-120 section ul li,
1583 .transcript ul li,
1584 .ns-120 section ul ul li,
1585 .transcript ul ul li,
1586 .ns-120 section ul ol li,
1587 .transcript ul ol li {
1588 flex-direction: column;
1589 padding-left: 10px;
1590 margin: 14px 0;
1591 }
1592
1593 .ns-120 section ul li:last-of-type,
1594 .transcript ul li:last-of-type,
1595 .ns-120 section ul ul li:last-of-type,
1596 .transcript ul ul li:last-of-type,
1597 .ns-120 section ul ol li:last-of-type,
1598 .transcript ul ol li:last-of-type {
1599 margin-bottom: 0;
1600 }
1601
1602 .smallChart .highcharts-range-selector {
1603 display: none;
1604 }
1605
1606 .smallChart .highcharts-button title + rect {
1607 display: none;
1608 }
1609
1610 #GEpopupchart {
1611 overflow-x: auto !important;
1612 }
1613
1614 .wikitable {
1615 background: none;
1616 box-shadow: none;
1617 }
1618
1619 .wikitable tbody {
1620 background: var(--body-light);
1621 }
1622
1623 .toc {
1624 background-color: var(--body-light);
1625 border-color: var(--body-border);
1626 }
1627
1628 #filetoc li {
1629 display: inline;
1630 padding-right: 2em;
1631 }
1632
1633 .mw-dismissable-notice-body {
1634 margin: 0;
1635 }
1636
1637 .mw-dismissable-notice-body .mw-dismissable-notice-close-parent {
1638 border-radius: 0 !important;
1639 font-size: 0.75em;
1640 }
1641
1642 :root {
1643 --thumb-image-background: var(--body-light);
1644 --thumb-caption-background: var(--body-mid);
1645 --body-background-image: https://runescape.wiki/images/RuneScape_Wiki_background.jpg
1646 }
1647
1648
1649 .content .thumbimage {
1650 background-color: var(--thumb-image-background);
1651 border: 1px solid transparent;
1652 border-bottom: none;
1653 }
1654
1655 .content .thumbcaption {
1656 margin: 0;
1657 padding: 4px 6px !important;
1658 color: inherit;
1659 background: var(--thumb-caption-background);
1660 }
1661
1662 .content table.messagebox {
1663 margin: 0.5em auto;
1664 }
1665
1666 .content table a > img {
1667 max-width: inherit !important;
1668 height: inherit !important;
1669 }
1670
1671 .content .infobox a > img {
1672 max-width: 100% !important;
1673 height: auto !important;
1674 }
1675
1676 .content .infobox-bonuses a > img {
1677 max-width: inherit !important;
1678 height: inherit !important;
1679 }