MediaWiki:Vector.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 html {
3 -webkit-text-size-adjust: 100%;
4 }
5
6 body {
7 background: var(--body-background-image) var(--body-background-color) no-repeat;
8 background-size: 1500px 375px;
9 background-position: top left;
10 font-family: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif;
11 }
12
13 .vector-body {
14 font-size: 0.9em;
15 line-height: 1.6em;
16 }
17
18 #firstHeading {
19 font-weight: bold;
20 }
21
22 pre,
23 code,
24 .mw-code {
25 color: inherit;
26 background-color: var(--mw-code-background-color);
27 border: 1px solid var(--body-border);
28 }
29
30 dl {
31 margin: 0;
32 }
33
34 .skin-vector-legacy a.new,
35 .skin-vector-legacy a.new:visited {
36 color: var(--redlink-color);
37 }
38
39 :root {
40 --personal-links-bg: hsl(43, 27%, 78%);
41 --arrow-down: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E %3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 fill=%22%23444%22/%3E %3C/svg%3E");
42 }
43
44 .vector-menu-dropdown .vector-menu-heading {
45 background-color: var(--body-background-color);
46 padding-top: 1em;
47 }
48
49 .vector-menu-dropdown .vector-menu-heading,
50 .vector-menu-dropdown .vector-menu-heading:hover,
51 .vector-menu-dropdown .vector-menu-heading:focus {
52 color: var(--background-text-color);
53 }
54
55 .vector-menu-dropdown .vector-menu-heading:after {
56 margin-bottom: 0.4em;
57 background-image: var(--arrow-down);
58 }
59
60 .vector-menu-dropdown .vector-menu-content {
61 border: 1px solid var(--body-border);
62 background-color: var(--body-light);
63 box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
64 }
65
66 .vector-menu-dropdown li a {
67 color: var(--background-link-color);
68 }
69
70 .vector-menu-dropdown .selected a,
71 .vector-menu-dropdown .selected a:visited {
72 color: var(--text-color);
73 }
74
75 #p-personal {
76 background: var(--personal-links-bg);
77 top: 0;
78 right: 0;
79 border-radius: 0 0 0 0.3em;
80 height: 30px;
81 }
82
83 #p-personal ul {
84 padding: 0 1em 0 0.4em;
85 }
86
87 .vector-search-box-inner {
88 background: var(--search-box);
89 height: 2.485em;
90 margin-top: 0;
91 box-shadow: inset 0 -7px 7px -7px rgba(0, 0, 0, 0.15);
92 }
93
94 .vector-search-box-input {
95 color: var(--text-color);
96 height: 100%;
97 border: none;
98 background: none;
99 padding-left: 1em;
100 }
101
102 .vector-search-box-input::placeholder {
103 color: var(--text-color);
104 opacity: 0.67;
105 }
106
107 .vector-search-box-inner:hover .vector-search-box-input,
108 .vector-search-box-input:focus,
109 .vector-search-box-inner:hover .vector-search-box-input:focus {
110 border: none;
111 box-shadow: none;
112 }
113
114 :root {
115 --searchbutton-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M11.29 11.71l-4-4'/%3E%3Ccircle cx='5' cy='5' r='4'/%3E%3C/g%3E%3C/svg%3E");
116 }
117
118 .searchButton[name='go'] {
119 width: 2.5em;
120 background: no-repeat center var(--searchbutton-icon);
121 }
122
123 .vector-search-box {
124 margin: 0;
125 }
126
127 .vector-search-box form {
128 margin-top: 0;
129 }
130
131 .suggestions-results {
132 background-color: var(--body-light);
133 border-color: var(--body-border);
134 }
135
136 .suggestions-result {
137 color: var(--text-color);
138 }
139
140 .suggestions a.mw-searchSuggest-link,
141 .suggestions a.mw-searchSuggest-link:hover,
142 .suggestions a.mw-searchSuggest-link:active,
143 .suggestions a.mw-searchSuggest-link:focus {
144 color: var(--text-color);
145 }
146
147 .suggestions-special {
148 background-color: var(--body-light);
149 border-color: var(--body-border);
150 }
151
152 .suggestions-special .special-label {
153 color: var(--byline-color);
154 }
155
156 .suggestions-special .special-query {
157 color: var(--text-color);
158 }
159
160 .suggestions-result-current {
161 background-color: var(--body-mid);
162 color: var(--text-color);
163 }
164
165 .suggestions-result-current .special-label,
166 .suggestions-result-current .special-query {
167 color: var(--text-color);
168 }
169
170 #mw-panel {
171 padding-top: 2.5em;
172 }
173
174 .vector-menu-portal .vector-menu-heading {
175 color: var(--background-text-color);
176 font-weight: bold;
177 background: none;
178 }
179
180 .vector-menu-portal .vector-menu-content li a,
181 .vector-menu-portal .vector-menu-content li a:visited {
182 color: var(--background-link-color);
183 }
184
185 #p-logo {
186 filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
187 margin: -1.5em 0 0;
188 }
189
190 #n-Discord a {
191 color: white !important;
192 font-size: 12px;
193 font-weight: bold;
194 border-radius: 5px;
195 border: 1px solid #4c57d0;
196 background-color: #5865f2;
197 display: block;
198 position: relative;
199 padding: 4px 0 5px calc(17px + 6.5px * 2);
200 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
201 transition: 0.2s ease;
202 }
203
204 #n-Discord a::before {
205 content: 'Chat on ';
206 font-weight: normal;
207 opacity: 0.85;
208 }
209
210 #n-Discord a::after {
211 content: '';
212 background: url('images/Discord_logo_icon.svg') no-repeat;
213 background-size: 17px 13px;
214 filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
215 position: absolute;
216 top: 5px;
217 left: 7px;
218 width: 17px;
219 height: 13px;
220 }
221
222 #n-Discord a:hover {
223 text-decoration: none;
224 background-color: #525ee0;
225 }
226
227 .wgl-darkmode #n-Discord a {
228 background-color: #525ee0;
229 }
230
231 .wgl-darkmode #n-Discord a:hover {
232 background-color: #4c57d0;
233 }
234
235 .vector-menu-tabs,
236 .vector-menu-tabs ul {
237 padding: 0;
238 }
239
240 .vector-menu-tabs .vector-menu-content {
241 height: 100%;
242 }
243
244 .skin-vector-legacy .vector-menu-tabs .new a,
245 .skin-vector-legacy .vector-menu-tabs .new a:visited {
246 color: var(--redlink-color);
247 }
248
249 .vector-menu-tabs .selected {
250 background: var(--body-main);
251 }
252
253 .vector-menu-tabs .selected a,
254 .vector-menu-tabs .selected a:visited {
255 color: var(--text-color);
256 }
257
258 .vector-menu-tabs li a {
259 color: var(--background-link-color);
260 padding: 0 0.75em;
261 padding-top: 1em;
262 }
263
264 .vector-menu-tabs li a:visited {
265 color: var(--background-link-color);
266 }
267
268 .vector-menu-tabs ul li {
269 background: var(--body-background-color);
270 }
271
272 .vector-menu-tabs #ca-view {
273 display: none !important;
274 }
275
276 .vector-menu-tabs ul li:hover a {
277 text-decoration: none;
278 }
279
280 .vector-menu-tabs ul li:not(.selected):hover,
281 #p-cactions:hover #p-cactions-label {
282 background: var(--body-mid);
283 }
284
285 .vector-menu-tabs ul li:not(.selected),
286 #mw-head .vector-menu-dropdown .vector-menu-heading {
287 box-shadow: inset 0 -7px 7px -7px rgba(0, 0, 0, 0.15);
288 }
289
290 .vector-menu-tabs,
291 .vector-menu-tabs a,
292 #mw-head .vector-menu-dropdown .vector-menu-heading {
293 background-image: none;
294 }
295
296 .ve-activated .vector-menu-tabs .selected {
297 box-shadow: none;
298 }
299
300 :root {
301 --watch-icon: linear-gradient(transparent, transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='transparent' stroke='%2352351e' stroke-width='.8' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E%0A");
302 --unwatch-icon: linear-gradient(transparent, transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%2352351e' stroke='%2352351e' stroke-width='.8' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E%0A");
303 }
304
305 .vector-menu-tabs #ca-watch.icon a:before,
306 .vector-menu-tabs #ca-watch.icon a:hover:before,
307 .vector-menu-tabs #ca-watch.icon a:focus:before {
308 background-image: var(--watch-icon);
309 }
310
311 .vector-menu-tabs #ca-unwatch.icon a:before,
312 .vector-menu-tabs #ca-unwatch.icon a:hover:before,
313 .vector-menu-tabs #ca-unwatch.icon a:focus:before {
314 background-image: var(--unwatch-icon);
315 }
316
317 #p-Recent_changes {
318 display: block;
319 }
320
321 #p-Recent_changes .vector-menu-content {
322 display: none;
323 }
324
325 #p-Recent_changes .vector-menu-heading:after {
326 content: '';
327 position: relative;
328 left: 0.5em;
329 display: inline-block;
330 background-color: #3c7b07;
331 width: 6px;
332 height: 6px;
333 border-radius: 100%;
334 }
335
336 #p-Recent_changes .rc-sidebar-item {
337 position: relative;
338 font-size: 0.75em;
339 margin: 0.5em 0.25em 0 0.66em;
340 }
341
342 #p-Recent_changes .rc-sidebar-page {
343 display: block;
344 white-space: nowrap;
345 text-overflow: ellipsis;
346 overflow: hidden;
347 max-width: max-content;
348 }
349
350 #p-Recent_changes .rc-sidebar-page,
351 #p-Recent_changes .rc-sidebar-page:active,
352 #p-Recent_changes .rc-sidebar-page:visited {
353 color: var(--background-link-color);
354 }
355
356 #p-Recent_changes .rc-sidebar-user {
357 color: var(--byline-color);
358 margin: 0;
359 white-space: nowrap;
360 text-overflow: ellipsis;
361 overflow: hidden;
362 }
363
364 #p-Recent_changes .rc-sidebar-user a {
365 color: inherit;
366 }
367
368 #p-Recent_changes .rc-sidebar-more {
369 text-align: left;
370 }
371
372 #p-Recent_changes .rc-sidebar-more .rc-sidebar-page {
373 display: inline-block;
374 }
375
376 :root {
377 --thumb-image-background: var(--body-light);
378 --thumb-caption-background: var(--body-mid);
379 }
380
381 div.thumbinner {
382 border: none;
383 background: none;
384 padding: 0;
385 }
386
387 .thumbimage {
388 background-color: var(--thumb-image-background);
389 border-color: transparent;
390 border-bottom: none;
391 }
392
393 .thumbcaption {
394 background: var(--thumb-caption-background);
395 padding: 4px 6px;
396 }
397
398 :root {
399 --toc-bg: var(--body-light);
400 --toc-title-bg: var(--body-dark);
401 --toc-border-color: var(--body-border);
402 --toc-subheader-left-border-color: #c7b67b;
403 }
404
405 .toc {
406 font-size: 0.9em;
407 background: var(--toc-bg);
408 margin-top: 0.75em;
409 padding: 0;
410 border-color: var(--toc-border-color);
411 box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
412 clear: left;
413 }
414
415 .toc .toctitle {
416 background: var(--toc-title-bg);
417 padding: 0.25em 1em;
418 }
419
420 .toc .toctitle h2,
421 .toc .toctitle a {
422 font-family: inherit;
423 }
424
425 .toc .toctogglespan {
426 padding-left: 0.2em;
427 }
428
429 .toc .tocnumber {
430 display: none;
431 }
432
433 .toc > ul {
434 line-height: 1.8em;
435 padding: 0.75em 1.75em;
436 margin: 0;
437 }
438
439 .toc ul ul {
440 border-left: 1px dotted var(--toc-subheader-left-border-color);
441 padding-left: 0.5em;
442 }
443
444 .toctogglelabel {
445 color: var(--link-color);
446 }
447
448 .toclimit-2 #toc .toclevel-2,
449 .toclimit-3 #toc .toclevel-3,
450 .toclimit-4 #toc .toclevel-4,
451 .toclimit-5 #toc .toclevel-5,
452 .toclimit-6 #toc .toclevel-6,
453 .toclimit-7 #toc .toclevel-7 {
454 display: none;
455 }
456
457 .infobox {
458 background: var(--body-light);
459 border: 1px solid var(--body-border);
460 font-size: 0.85em;
461 width: 300px;
462 margin: 0.5em 0 1em 1em;
463 border-collapse: collapse;
464 box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
465 float: right;
466 table-layout: fixed;
467 word-break: break-word;
468 }
469
470 .infobox .infobox-header {
471 color: var(--infobox-text-color);
472 font-size: 1.15em;
473 line-height: 1.4em;
474 background: var(--body-dark);
475 padding: 0.5em 0;
476 white-space: normal;
477 }
478
479 .infobox .infobox-header a {
480 color: var(--infobox-text-color);
481 font-size: 1.15em;
482 font-weight: bold;
483 }
484
485 .infobox .infobox-subheader {
486 background: var(--body-dark);
487 color: var(--infobox-text-color);
488 line-height: 2em;
489 }
490
491 .infobox .infobox-subheader a {
492 color: var(--infobox-text-color);
493 }
494
495 .infobox .infobox-subheader + .infobox-subheader {
496 border-left: 2px solid var(--body-light);
497 }
498
499 .infobox .infobox-image {
500 text-align: center;
501 }
502
503 .infobox .infobox-image.inventory-image {
504 height: 32px;
505 }
506
507 .infobox .infobox-image a.image + a.image {
508 margin-left: 0.1em;
509 }
510
511 .infobox .infobox-image img {
512 max-width: 300px;
513 height: auto;
514 }
515
516 .infobox th:not(.infobox-header):not(.infobox-subheader):not(.infobox-nested) {
517 text-align: right;
518 vertical-align: top;
519 border-right: 2px solid var(--body-dark);
520 padding: 0.2em 0.5em;
521 }
522
523 .infobox th {
524 white-space: nowrap;
525 }
526
527 .infobox td {
528 padding: 0.25em 0.5em;
529 line-height: 1.6em;
530 }
531
532 .infobox td.infobox-nested {
533 padding: 0.25em 0;
534 line-height: 1em;
535 }
536
537 .infobox .infobox-padding {
538 height: 0.5em;
539 padding: 0;
540 border: 0;
541 }
542
543 .infobox .infobox-nested {
544 text-align: center;
545 }
546
547 .infobox .infobox-nested + .infobox-nested {
548 border-left: 2px solid var(--body-dark);
549 }
550
551 .infobox .infobox-cell-hidden {
552 display: none;
553 }
554
555 .infobox .infobox-template-links {
556 text-align: center;
557 }
558
559 .infobox .infobox-full-width-content {
560 max-width: 300px;
561 text-align: center;
562 overflow: hidden;
563 padding: 0;
564 }
565
566 .infobox .infobox-caption {
567 font-weight: bold;
568 }
569
570 .infobox.skill-info {
571 float: none;
572 margin: 1em 0;
573 }
574
575 .infobox .infobox-media-player {
576 overflow: visible;
577 }
578
579 .infobox-item th {
580 width: 75px;
581 }
582
583 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
584 .infobox-item .infobox-image {
585 image-rendering: -moz-crisp-edges;
586 image-rendering: pixelated;
587 image-rendering: crisp-edges;
588 }
589
590 }
591
592 .infobox-bonuses {
593 clear: left;
594 float: none;
595 word-break: break-word;
596 font-size: 100%;
597 }
598
599 .infobox-bonuses .infobox-bonuses-image {
600 width: 125px;
601 text-align: center;
602 vertical-align: middle;
603 border: 1px solid var(--body-border);
604 }
605
606 .infobox-bonuses .infobox-bonuses-image-caption {
607 font-size: 0.85em;
608 }
609
610 .infobox-bonuses .infobox-subheader {
611 width: 250px;
612 }
613
614 .infobox-bonuses a {
615 font-weight: bold;
616 }
617
618 .skill-info a[href$="?action=edit"] + a[href$="?action=edit"] {
619 display: none;
620 }
621
622 .poh-room {
623 background-color: var(--infobox-room-poh-color);
624 margin: auto;
625 width: 100px;
626 }
627
628 .poh-room img {
629 display: block;
630 }
631
632 .poh-room-row {
633 display: flex;
634 }
635
636 .poh-room-text {
637 margin: auto;
638 width: 92px;
639 }
640
641 .infobox-bottom-links {
642 clear: right;
643 float: right;
644 font-size: xx-small;
645 margin-top: -1.5em;
646 }
647
648 .infobox-buttons {
649 text-align: center;
650 max-width: 300px;
651 display: none;
652 }
653
654 .infobox-buttons .button {
655 margin: 0 3px;
656 }
657
658 .infobox-switch-resources {
659 display: none;
660 }
661
662 .switch-infobox .switch-infobox-triggers,
663 .switch-infobox .loading-button {
664 clear: left;
665 }
666
667 .infobox-pure .max-hit-list {
668 list-style: none;
669 margin-left: 0;
670 }
671
672 .infobox-pure .max-hit-list a {
673 display: inline-block;
674 min-width: 32px;
675 min-height: 32px;
676 text-align: center;
677 }
678
679 .advanced-data {
680 display: none;
681 }
682
683 .multi-infobox {
684 float: right;
685 margin-left: 5px;
686 }
687
688 .multi-infobox .tabber {
689 margin: 0;
690 }
691
692 .multi-infobox .tabber .tabbernav {
693 text-align: center;
694 margin: 0;
695 }
696
697 .multi-infobox .tabber .tabbernav a {
698 padding: 0.5em 0.8em;
699 }
700
701 .multi-infobox .tabber .tabbertab {
702 padding: 5px;
703 }
704
705 .multi-infobox .infobox {
706 margin: 0;
707 }
708
709 .navbox {
710 font-size: 0.85em;
711 background: var(--body-light);
712 border-collapse: collapse;
713 margin: 1em auto;
714 width: 100%;
715 clear: both;
716 }
717
718 .navbox:not(.navbox-collapsible) {
719 box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.1);
720 }
721
722 .navbox img {
723 height: auto;
724 width: auto;
725 padding: 0 1px;
726 }
727
728 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
729 .navbox img {
730 image-rendering: -moz-crisp-edges;
731 image-rendering: pixelated;
732 image-rendering: crisp-edges;
733 }
734
735 }
736
737 .navbox + .navbox {
738 margin-top: -0.5em;
739 }
740
741 .navbox-title {
742 font-size: 110%;
743 background: var(--body-dark);
744 text-align: center;
745 padding: 3px 8px;
746 }
747
748 .navbox-title-name {
749 margin: 0 4em;
750 }
751
752 .navbox-title .mw-collapsible-toggle {
753 font-size: 0.9em;
754 text-align: right;
755 }
756
757 .navbox-footer {
758 background: var(--body-dark);
759 border-top: 1px;
760 text-align: center;
761 font-size: smaller;
762 }
763
764 .navbox-group-title {
765 background: var(--body-mid);
766 border: 1px solid var(--body-dark);
767 border-width: 0 1px 1px 0;
768 font-weight: bold;
769 padding-left: 10px;
770 width: 15%;
771 }
772
773 .navbox-group-title a {
774 white-space: normal;
775 }
776
777 .navbox-list {
778 border-bottom: 1px solid var(--body-dark);
779 padding: 4px 8px;
780 }
781
782 .navbox-list ul {
783 margin: 0;
784 }
785
786 .navbox-list li {
787 display: inline-block;
788 }
789
790 .navbox-list li + li::before {
791 content: '• ';
792 }
793
794 .navbox-parent {
795 padding: 0;
796 }
797
798 .navbox-subgroup {
799 border-collapse: collapse;
800 border-spacing: 0;
801 width: 100%;
802 }
803
804 .navbox-subgroup > tbody > tr:last-child > td {
805 border-bottom: none;
806 }
807
808 .navbox.navbox-collapsible {
809 font-size: 100%;
810 margin: 0.5em 0 0;
811 }
812
813 .navbox.navbox-collapsible .navbox-title {
814 background: var(--body-dark);
815 padding: 0 8px;
816 }
817
818 .navbox-data {
819 display: none;
820 }
821
822 .navbox-data + .navbox {
823 margin-top: -0.5em;
824 }
825
826 .mw-collapsible.mw-collapsed {
827 min-width: 250px;
828 }
829
830 .mw-collapsible:not( .mw-made-collapsible) th::before,
831 .mw-collapsible .mw-collapsible-toggle {
832 font-weight: normal;
833 }
834
835 :root {
836 --button-background: var(--osrsw-brown);
837 --button-color: #fff;
838 }
839
840 .button {
841 background: var(--button-background);
842 border: transparent;
843 color: var(--button-color);
844 cursor: pointer;
845 display: inline-block;
846 font-size: 12px;
847 height: 19px;
848 line-height: 20px;
849 padding: 0 10px;
850 }
851
852 .ui-dialog,
853 .ui-widget-content {
854 background-color: var(--body-light);
855 border-color: var(--body-border);
856 background-image: none;
857 color: var(--text-color);
858 }
859
860 .ui-dialog .ui-dialog-titlebar.ui-widget-header,
861 .ui-widget-content .ui-dialog-titlebar.ui-widget-header {
862 background-image: none !important;
863 background-color: var(--body-dark) !important;
864 border-color: var(--body-border) !important;
865 }
866
867 .ui-dialog .ui-dialog-titlebar .ui-dialog-title,
868 .ui-widget-content .ui-dialog-titlebar .ui-dialog-title {
869 color: var(--text-color);
870 }
871
872 .ui-dialog .ui-dialog-titlebar-close,
873 .ui-widget-content .ui-dialog-titlebar-close {
874 background-color: var(--body-light);
875 }
876
877 .ui-dialog .ui-dialog-titlebar-close:hover,
878 .ui-widget-content .ui-dialog-titlebar-close:hover {
879 border: var(--link-color);
880 }
881
882 .wikiEditor-ui .wikiEditor-ui-view,
883 .wikiEditor-ui .wikiEditor-ui-top {
884 border-color: var(--body-mid);
885 }
886
887 .wikiEditor-ui-toolbar {
888 background-color: var(--body-light);
889 }
890
891 .wikiEditor-ui-toolbar .tabs span.tab > a,
892 .wikiEditor-ui-toolbar .tabs span.tab > a:visited {
893 color: var(--link-color);
894 }
895
896 .wikiEditor-ui-toolbar .tabs span.tab a.current,
897 .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
898 color: var(--text-colour);
899 }
900
901 .wikiEditor-ui-toolbar .group {
902 border-color: var(--body-mid);
903 }
904
905 .wikiEditor-ui-toolbar .group .tool-select {
906 background-color: var(--body-light);
907 border-color: var(--body-mid);
908 }
909
910 .wikiEditor-ui-toolbar .group .tool-select .options {
911 border-color: var(--body-mid);
912 background-color: var(--body-main);
913 }
914
915 .wikiEditor-ui-toolbar .group .tool-select .options .option {
916 color: var(--link-color);
917 }
918
919 .wikiEditor-ui-toolbar .group .tool-select .options .option:hover {
920 background-color: var(--wikitable-bg-lighter);
921 color: var(--link-color);
922 }
923
924 .wikiEditor-ui-toolbar .group-search {
925 border-left-color: var(--body-mid);
926 }
927
928 .wikiEditor-ui-toolbar .page-table td {
929 border-color: var(--body-mid);
930 color: var(--text-color);
931 }
932
933 .wikiEditor-ui-toolbar .page-table th {
934 color: var(--text-color);
935 }
936
937 .wikiEditor-ui-toolbar .sections .section {
938 border-color: var(--body-mid);
939 }
940
941 .wikiEditor-ui-toolbar .sections .toolbar .group > .label {
942 color: var(--text-color);
943 }
944
945 .wikiEditor-ui-toolbar .sections .toolbar .tool > .label {
946 color: var(--text-color);
947 }
948
949 .wikiEditor-ui-toolbar .booklet > .index > :hover {
950 background-color: var(--body-mid);
951 color: var(--text-color);
952 }
953
954 .wikiEditor-ui-toolbar .booklet .index > .current {
955 background-color: var(--body-mid);
956 color: var(--link-color);
957 }
958
959 .wikiEditor-ui-toolbar .page-characters div span {
960 border-color: var(--body-mid);
961 color: var(--text-color);
962 }
963
964 .wikiEditor-ui-toolbar .page-characters div span:hover {
965 border-color: var(--body-dark);
966 background-color: transparent;
967 }
968
969 :root {
970 --sourceeditor-bg: white;
971 }
972
973 .ace-tm {
974 background-color: var(--sourceeditor-bg);
975 color: var(--text-color);
976 }
977
978 .ace-tm .ace_gutter {
979 background: var(--body-mid);
980 color: var(--text-color);
981 }
982
983 .ace-tm .ace_gutter-cell {
984 color: var(--text-color);
985 }
986
987 .ace-tm .ace_gutter-active-line {
988 background-color: var(--body-light);
989 }
990
991 .ace_search {
992 background-color: var(--body-light);
993 color: var(--text-color);
994 border-color: var(--body-mid);
995 }
996
997 .ace_button {
998 color: var(--text-color);
999 }
1000
1001 .ace_button:hover {
1002 background-color: rgba(0, 23, 70, 0.086);
1003 }
1004
1005 .ace_button:active {
1006 background-color: rgba(0, 23, 70, 0.06);
1007 }
1008
1009 .CodeMirror {
1010 background: var(--sourceeditor-bg);
1011 }
1012
1013 .CodeMirror pre {
1014 color: var(--text-color);
1015 }
1016
1017 .codeEditor-status {
1018 border-color: var(--body-mid);
1019 background-color: var(--body-light);
1020 }
1021
1022 .codeEditor-status-message {
1023 border-color: var(--body-mid);
1024 }
1025
1026 .CodeMirror-gutters {
1027 background-color: var(--body-mid);
1028 border-color: var(--body-mid);
1029 }
1030
1031 .CodeMirror-linenumber {
1032 color: var(--text-color);
1033 }
1034
1035 .mw-editform #wpTextbox1 {
1036 color: var(--text-color);
1037 background: var(--sourceeditor-bg);
1038 border-color: var(--body-mid);
1039 }
1040
1041 input[name="model"][value="Scribunto"] ~ .wikiEditor-ui #wpTextbox1,
1042 input[name="model"][value="css"] ~ .wikiEditor-ui #wpTextbox1,
1043 input[name="model"][value="less"] ~ .wikiEditor-ui #wpTextbox1,
1044 input[name="model"][value="javascript"] ~ .wikiEditor-ui #wpTextbox1,
1045 input[name="model"][value="json"] ~ .wikiEditor-ui #wpTextbox1 {
1046 height: 600px;
1047 }
1048
1049 .tdg-templateDataDialog-listParamsPanel textarea.oo-ui-textInputWidget-autosized {
1050 resize: vertical;
1051 }
1052
1053 #wpAceFilterEditor {
1054 resize: horizontal;
1055 }
1056
1057 .warn-userupload,
1058 .ns-2 .upload-own-work {
1059 display: none;
1060 }
1061
1062 .ns-2 .warn-userupload {
1063 display: inline;
1064 }
1065
1066 ul.preload-list {
1067 margin-left: 0;
1068 }
1069
1070 ul.preload-list li {
1071 list-style: none;
1072 display: inline-block;
1073 margin: 0.3em;
1074 }
1075
1076 textarea[name="wfUploadDescription"] {
1077 height: 3em;
1078 }
1079
1080 #editform {
1081 margin-top: 1.25em;
1082 }
1083
1084 #mw-scribunto-input,
1085 #mw-scribunto-output {
1086 padding: 3px;
1087 font-family: monospace;
1088 font-size: 13px;
1089 line-height: 1.5em;
1090 }
1091
1092 #mw-scribunto-input {
1093 background-color: var(--ooui-input);
1094 border-color: var(--ooui-input-border);
1095 }
1096
1097 :root {
1098 --scribuntoconsole-input: #0b5884;
1099 --scibuntoconsole-print: #a48900;
1100 --scribuntoconsole-error: #9f261e;
1101 --scribuntoconsole-message: #3c780a;
1102 --scribuntoconsole-tabcomplete: #4f348b;
1103 --scribuntoconsole-clear: #9f261e;
1104 }
1105
1106 .mw-scribunto-console-fieldset {
1107 color: inherit;
1108 background-color: var(--ooui-interface);
1109 border-color: var(--ooui-interface-border);
1110 }
1111
1112 .mw-scribunto-normalOutput,
1113 .mw-scribunto-print,
1114 .mw-scribunto-error,
1115 .mw-scribunto-propList,
1116 .mw-scribunto-message,
1117 .mw-scribunto-tabcomplete {
1118 background: none;
1119 }
1120
1121 .mw-scribunto-input {
1122 color: var(--scribuntoconsole-input);
1123 }
1124
1125 .mw-scribunto-normalOutput {
1126 color: inherit;
1127 }
1128
1129 .mw-scribunto-print {
1130 color: var(--scibuntoconsole-print);
1131 }
1132
1133 .mw-scribunto-error {
1134 color: var(--scribuntoconsole-error);
1135 }
1136
1137 .mw-scribunto-propList,
1138 .mw-scribunto-message {
1139 color: var(--scribuntoconsole-message);
1140 }
1141
1142 .mw-scribunto-tabcomplete {
1143 color: var(--scribuntoconsole-tabcomplete);
1144 }
1145
1146 .mw-scribunto-clear {
1147 color: var(--scribuntoconsole-clear);
1148 border-bottom-color: var(--scribuntoconsole-clear);
1149 }
1150
1151 :root {
1152 --echo-icon-moon-bg-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg height='21' viewBox='0 0 21 21' width='21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.85464918.37900488c-1.91149353 1.51069427-3.13816124 3.84973402-3.13816124 6.47527736 0 4.55564936 3.69308349 8.24873286 8.24873286 8.24873286 2.5815709 0 4.8861545-1.1859235 6.3986798-3.0426994-.8206378 4.7389755-4.9523867 8.343122-9.9259291 8.343122-5.56375572 0-10.07407088-4.5103151-10.07407088-10.0740709 0-5.02506013 3.67919933-9.19079725 8.49074856-9.95036192z' fill='%234c4c4c'/%3E%3C/svg%3E");
1153 --echo-icon-person-bg-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2213.836%22 viewBox=%220 0 12 13.836%22%3E %3Cpath fill='%234c4c4c' d=%22M1.938%2C6.656c-1.32%2C1.485-1.47%2C3.15-0.97%2C4.25c0.323%2C0.707%2C0.78%2C1.127%2C1.313%2C1.375 c0.496%2C0.229%2C1.074%2C0.273%2C1.658%2C0.282c0.023%2C0%2C0.04%2C0.03%2C0.062%2C0.03h4.187c0.61%2C0%2C1.225-0.125%2C1.75-0.405 c0.527-0.28%2C0.961-0.718%2C1.188-1.376c0.335-0.964%2C0.175-2.529-1.094-4.03C9.094%2C7.954%2C7.68%2C8.719%2C6.065%2C8.719 c-1.677%2C0-3.182-0.812-4.125-2.063H1.938z%22/%3E %3Cpath fill='%234c4c4c' d=%22M6.063%2C0c-1.89%2C0-3.595%2C1.674-3.594%2C3.563C2.467%2C5.45%2C4.173%2C7.155%2C6.06%2C7.155 c1.89%2C0%2C3.564-1.705%2C3.563-3.593C9.625%2C1.673%2C7.95%2C0%2C6.063%2C0L6.063%2C0z%22/%3E %3C/svg%3E");
1154 --echo-icon-bell-bg-image: 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%3Ebell%3C/title%3E%3Cpath d=%22M16 7a5.38 5.38 0 00-4.46-4.85C11.6 1.46 11.53 0 10 0S8.4 1.46 8.46 2.15A5.38 5.38 0 004 7v6l-2 2v1h16v-1l-2-2zm-6 13a3 3 0 003-3H7a3 3 0 003 3z%22 fill='%234c4c4c'/%3E%3C/svg%3E");
1155 --echo-icon-tray-bg-image: 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%3Etray%3C/title%3E%3Cpath d=%22M3 1a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V3a2 2 0 00-2-2zm14 12h-4l-1 2H8l-1-2H3V3h14z%22 fill='%234c4c4c'/%3E%3C/svg%3E");
1156 }
1157
1158 .vector-user-menu-legacy #pt-userpage a,
1159 .vector-user-menu-legacy #pt-anonuserpage {
1160 background-image: var(--echo-icon-person-bg-image);
1161 padding-top: 0;
1162 background-position-y: 0;
1163 }
1164
1165 #pt-notifications-alert .mw-echo-notifications-badge,
1166 #pt-notifications-notice .mw-echo-notifications-badge {
1167 background-size: 75%;
1168 background-position: center 80%;
1169 background-repeat: no-repeat;
1170 opacity: unset;
1171 }
1172
1173 #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read,
1174 #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
1175 opacity: unset;
1176 }
1177
1178 #pt-notifications-alert .oo-ui-icon-bell {
1179 background-image: var(--echo-icon-bell-bg-image);
1180 }
1181
1182 #pt-notifications-notice .oo-ui-icon-tray {
1183 background-image: var(--echo-icon-tray-bg-image);
1184 }
1185
1186 #pt-skin-toggles .oo-ui-icon-advanced {
1187 background-image: var(--echo-icon-moon-bg-image);
1188 }
1189
1190 li#pt-anontalk {
1191 padding-top: 0.6em;
1192 }
1193
1194 .mw-parser-output .messagebox ul,
1195 .mw-talkpageheader .messagebox ul {
1196 margin: 0.3em 0 0 1.6em;
1197 }
1198
1199 .ns-120 .mw-parser-output > ul,
1200 .transcript > ul {
1201 margin: 5px 0 0 0;
1202 }
1203
1204 .ns-120 .mw-parser-output > ul ul,
1205 .transcript > ul ul,
1206 .ns-120 .mw-parser-output > ul ol,
1207 .transcript > ul ol {
1208 margin: 5px 0 0 15px;
1209 }
1210
1211 .ns-120 .mw-parser-output > ul,
1212 .transcript > ul,
1213 .ns-120 .mw-parser-output > ul ul,
1214 .transcript > ul ul,
1215 .ns-120 .mw-parser-output > ul ol,
1216 .transcript > ul ol {
1217 list-style: none;
1218 border-left: 1px dashed var(--transcript-border-color);
1219 }
1220
1221 .ns-120 .mw-parser-output > ul:hover,
1222 .transcript > ul:hover,
1223 .ns-120 .mw-parser-output > ul ul:hover,
1224 .transcript > ul ul:hover,
1225 .ns-120 .mw-parser-output > ul ol:hover,
1226 .transcript > ul ol:hover {
1227 border-color: var(--transcript-border-hover-color);
1228 }
1229
1230 .ns-120 .mw-parser-output > ul li,
1231 .transcript > ul li,
1232 .ns-120 .mw-parser-output > ul ul li,
1233 .transcript > ul ul li,
1234 .ns-120 .mw-parser-output > ul ol li,
1235 .transcript > ul ol li {
1236 flex-direction: column;
1237 padding-left: 15px;
1238 margin: 14px 0;
1239 }
1240
1241 .ns-120 .mw-parser-output > ul li:last-of-type,
1242 .transcript > ul li:last-of-type,
1243 .ns-120 .mw-parser-output > ul ul li:last-of-type,
1244 .transcript > ul ul li:last-of-type,
1245 .ns-120 .mw-parser-output > ul ol li:last-of-type,
1246 .transcript > ul ol li:last-of-type {
1247 margin-bottom: 0;
1248 }
1249
1250 .nodesktop {
1251 display: none;
1252 }
1253
1254 .tabber {
1255 display: inline-grid;
1256 }
1257
1258 :root {
1259 --external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23936039' d='M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1Z M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
1260 }
1261
1262 .mw-parser-output a.external {
1263 background-image: var(--external-icon);
1264 background-size: 0.857em;
1265 padding-right: 1em;
1266 }
1267
1268 .mw-editsection {
1269 font-family: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif;
1270 }
1271
1272 .client-js .mw-content-ltr .mw-editsection-bracket:first-of-type,
1273 .client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type) {
1274 color: var(--text-color);
1275 }
1276
1277 .mw-editsection-divider {
1278 color: var(--text-color);
1279 }