MediaWiki:Common.css
Jump to navigation
Jump to search
In other languages: Deutsch • Español • Français • Italiano • Nederlands • Polski • Portuguese • Русский
Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Clear the cache in Tools → Preferences
/*******************************************************************************
* *
* COMMON.CSS *
* *
*******************************************************************************/
:root {
--layout-topbar-height: 35px; /* height of wiki.gg topbar */
--layout-sidebar-width: 188px; /* width of side navbar, without gap */
--layout-sidespace: 24px; /* whitespace width on most left and most right */
--layout-content-width: minmax(0, 1fr);
--layout-box-gap-x: 12px;
--layout-box-gap-y: 12px;
--layout-logo-scale: 1;
--layout-logo-width: calc(
var(--theme-site-logo-width) * var(--layout-logo-scale)
);
--layout-logo-height: calc(
var(--theme-site-logo-height) * var(--layout-logo-scale)
);
--layout-box-padding: 6px;
--layout-padding-x: 24px;
--layout-padding-y: 16px;
--layout-gap: 6px;
--layout-gap-l: 12px;
--layout-dropdown-item-padding-x: 12px;
--layout-dropdown-item-padding-y: 6px;
--font-size: 14px;
--line-height: 24px;
--font-size-s: 12px;
--line-height-s: 20px;
--font-size-i: 13px;
--line-height-i: 21px;
--font-size-l: 16px;
--line-height-l: 24px;
--font-size-xs: 10px;
--line-height-xs: 16px;
/* https://www.iconfinder.com/icons/7422432/wikipedia_wiki_encyclopedia_knowledge_education_icon */
--icon-wiki: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Wikipedia'%3E%3Cpath d='M32.59,12.32a.46.46,0,0,1-.08.25.26.26,0,0,1-.19.11,2.34,2.34,0,0,0-1.35.53,5,5,0,0,0-1.09,1.73L24.16,27.82c0,.12-.14.18-.31.18a.33.33,0,0,1-.31-.18l-3.21-6.7-3.69,6.7a.34.34,0,0,1-.31.18.34.34,0,0,1-.33-.18L10.39,14.94a4.37,4.37,0,0,0-1.11-1.67,3,3,0,0,0-1.63-.59.19.19,0,0,1-.16-.1.29.29,0,0,1-.08-.22c0-.21.06-.31.18-.31.5,0,1,0,1.57.07s1,.07,1.43.07,1,0,1.61-.07,1.23-.07,1.73-.07c.12,0,.18.1.18.31s0,.32-.11.32a2.09,2.09,0,0,0-1.18.38,1,1,0,0,0-.44.85,1.72,1.72,0,0,0,.18.67L17.2,25.06l2.64-5-2.46-5.15a6.87,6.87,0,0,0-1.08-1.78A2.25,2.25,0,0,0,15,12.68a.17.17,0,0,1-.15-.1.33.33,0,0,1-.08-.22c0-.21.05-.31.16-.31a11.78,11.78,0,0,1,1.38.07,12.87,12.87,0,0,0,1.29.07c.45,0,.92,0,1.42-.07s1-.07,1.52-.07c.12,0,.18.1.18.31s0,.32-.11.32c-1,.07-1.5.35-1.5.85a2.8,2.8,0,0,0,.35,1l1.62,3.3,1.62-3A2.43,2.43,0,0,0,23,13.78c0-.69-.5-1.06-1.5-1.1-.09,0-.13-.11-.13-.32a.42.42,0,0,1,.06-.21c.05-.07.09-.1.14-.1.36,0,.8,0,1.32.07s.91.07,1.23.07.58,0,1-.06,1.05-.08,1.43-.08c.09,0,.13.09.13.27s-.08.36-.24.36a2.81,2.81,0,0,0-1.41.48,6.12,6.12,0,0,0-1.33,1.78l-2.15,4,2.91,5.94,4.31-10a2.64,2.64,0,0,0,.22-1c0-.73-.5-1.12-1.5-1.16-.09,0-.14-.11-.14-.32s.07-.31.21-.31c.36,0,.8,0,1.3.07s.85.07,1.16.07.71,0,1.14-.07a11.09,11.09,0,0,1,1.22-.07Q32.59,12.05,32.59,12.32Z'/%3E%3C/g%3E%3C/svg%3E");
/* https://www.iconfinder.com/icons/8678406/brush_paint_painting_icon */
--icon-brush: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15.456 9.678l-.142-.142a5.475 5.475 0 0 0-2.39-1.349c-2.907-.778-5.699.869-6.492 3.83-.043.16-.066.34-.104.791-.154 1.87-.594 3.265-1.8 4.68 2.26.888 4.938 1.514 6.974 1.514a5.505 5.505 0 0 0 5.31-4.078 5.497 5.497 0 0 0-1.356-5.246zM13.29 6.216l4.939-3.841a1 1 0 0 1 1.32.082l2.995 2.994a1 1 0 0 1 .082 1.321l-3.84 4.938a7.505 7.505 0 0 1-7.283 9.292C8 21.002 3.5 19.5 1 18c3.98-3 3.047-4.81 3.5-6.5 1.058-3.95 4.842-6.257 8.789-5.284zm3.413 1.879c.065.063.13.128.193.194l1.135 1.134 2.475-3.182-1.746-1.746-3.182 2.475 1.125 1.125z'/%3E%3C/g%3E%3C/svg%3E");
/* icons below are from https://tabler-icons.io/ */
--icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
--icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-file' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'%3E%3C/path%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'%3E%3C/path%3E%3C/svg%3E");
--icon-star-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-star-filled' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z' stroke-width='0' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
--icon-star-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-star' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z'%3E%3C/path%3E%3C/svg%3E");
--icon-talk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-messages' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10'%3E%3C/path%3E%3Cpath d='M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2'%3E%3C/path%3E%3C/svg%3E");
--icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-eye' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'%3E%3C/path%3E%3Cpath d='M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7'%3E%3C/path%3E%3C/svg%3E");
--icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
--icon-pencil-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-pencil-plus' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 20l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4h4z'%3E%3C/path%3E%3Cpath d='M13.5 6.5l4 4'%3E%3C/path%3E%3Cpath d='M16 18h4m-2 -2v4'%3E%3C/path%3E%3C/svg%3E");
--icon-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-code' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 8l-4 4l4 4'%3E%3C/path%3E%3Cpath d='M17 8l4 4l-4 4'%3E%3C/path%3E%3Cpath d='M14 4l-4 16'%3E%3C/path%3E%3C/svg%3E");
--icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-world' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'%3E%3C/path%3E%3Cpath d='M3.6 9l16.8 0'%3E%3C/path%3E%3Cpath d='M3.6 15l16.8 0'%3E%3C/path%3E%3Cpath d='M11.5 3a17 17 0 0 0 0 18'%3E%3C/path%3E%3Cpath d='M12.5 3a17 17 0 0 1 0 18'%3E%3C/path%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-search' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'%3E%3C/path%3E%3Cpath d='M21 21l-6 -6'%3E%3C/path%3E%3C/svg%3E");
--icon-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-history' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 8l0 4l2 2'%3E%3C/path%3E%3Cpath d='M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5'%3E%3C/path%3E%3C/svg%3E");
--icon-jigsaw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-puzzle' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1'%3E%3C/path%3E%3C/svg%3E");
--icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-dots-vertical' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'%3E%3C/path%3E%3Cpath d='M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'%3E%3C/path%3E%3Cpath d='M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'%3E%3C/path%3E%3C/svg%3E");
--icon-sidebar-collapse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-layout-sidebar-left-collapse' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M9 4v16'%3E%3C/path%3E%3Cpath d='M15 10l-2 2l2 2'%3E%3C/path%3E%3C/svg%3E");
--icon-sidebar-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-layout-sidebar-left-expand' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M9 4v16'%3E%3C/path%3E%3Cpath d='M14 10l2 2l-2 2'%3E%3C/path%3E%3C/svg%3E");
--icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-user-circle' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'%3E%3C/path%3E%3Cpath d='M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%3E%3C/path%3E%3Cpath d='M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855'%3E%3C/path%3E%3C/svg%3E");
--icon-arrow-bar-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-arrow-bar-right' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M20 12l-10 0'%3E%3C/path%3E%3Cpath d='M20 12l-4 4'%3E%3C/path%3E%3Cpath d='M20 12l-4 -4'%3E%3C/path%3E%3Cpath d='M4 4l0 16'%3E%3C/path%3E%3C/svg%3E");
--icon-language: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-language' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M4 5h7'%3E%3C/path%3E%3Cpath d='M9 3v2c0 4.418 -2.239 8 -5 8'%3E%3C/path%3E%3Cpath d='M5 9c0 2.144 2.952 3.908 6.7 4'%3E%3C/path%3E%3Cpath d='M12 20l4 -9l4 9'%3E%3C/path%3E%3Cpath d='M19.1 18h-6.2'%3E%3C/path%3E%3C/svg%3E");
--icon-category: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-category-2' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M14 4h6v6h-6z'%3E%3C/path%3E%3Cpath d='M4 14h6v6h-6z'%3E%3C/path%3E%3Cpath d='M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%3E%3C/path%3E%3Cpath d='M7 7m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%3E%3C/path%3E%3C/svg%3E");
}
@media screen and (min-width: 2472px) {
:root {
--layout-sidespace: 12%;
}
}
/***********************************************************************************************************
* css reset for browser default rules and MediaWiki internal rules
***********************************************************************************************************/
* {
outline: 0;
}
table {
display: table;
white-space: unset; /* be set to `nowrap` in MW internal css */
}
html {
font-size: 16px; /* reset rem size */
}
body {
overflow-y: unset;
}
body,
code {
background: none;
}
pre {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
border: 0 solid transparent;
}
/***********************************************************************************************************
* css for wiki.gg top bar and footer bar
***********************************************************************************************************/
/********* wiki.gg header *********/
header#wikigg-header {
z-index: 9999;
}
header#wikigg-header * {
font-size: 14px;
line-height: 24px;
}
header#wikigg-header img {
box-sizing: content-box;
}
header#wikigg-header #p-personal {
height: 100%;
}
header#wikigg-header #p-personal .body {
height: 100%;
}
header#wikigg-header #p-personal .body > ul {
white-space: nowrap; /* for "log out" */
height: 100%;
gap: 12px;
}
header#wikigg-header #p-personal .body > ul > li:active {
background: #0b1040;
}
header#wikigg-header #p-personal #pt-anonuserpage,
header#wikigg-header #p-personal #pt-tmpuserpage,
header#wikigg-header #p-personal #pt-userpage a {
padding: 0;
background: none;
display: flex;
align-items: center;
}
header#wikigg-header #p-personal #pt-anonuserpage::before,
header#wikigg-header #p-personal #pt-tmpuserpage::before,
header#wikigg-header #p-personal #pt-userpage a::before {
content: "";
display: block;
width: 17px;
height: 17px;
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%2354595d'%3E%3Cpath d='M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5z'/%3E%3Ccircle cx='10' cy='5.5' r='4.5'/%3E%3C/g%3E%3C/svg%3E%0A")
no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: #666;
margin: 0 3px 0 0;
}
/* header responsive */
@media screen and (max-width: 961px) {
header#wikigg-header.no-session > #p-personal {
flex: unset;
position: absolute;
right: 0;
}
header#wikigg-header #p-personal {
position: relative;
box-sizing: content-box;
padding-right: 0;
margin-right: 0;
}
header#wikigg-header #p-personal .body {
position: absolute;
right: 0;
top: var(--layout-topbar-height);
height: auto;
background: #000538;
border-radius: 0 0 6px 6px;
transition: opacity 0.1s;
}
header#wikigg-header #p-personal .body > ul {
flex-direction: column;
align-items: stretch;
gap: 2px;
}
header#wikigg-header #p-personal .body > ul li {
transition: background 0.3s;
border-radius: 4px;
}
header#wikigg-header #p-personal .body > ul a {
display: block;
padding: 4px 6px;
text-decoration: none;
}
header#wikigg-header #p-personal #pt-anonuserpage,
header#wikigg-header #p-personal #pt-tmpuserpage,
header#wikigg-header #p-personal #pt-userpage a {
padding: 4px 6px;
}
header#wikigg-header .mobile-menu {
display: block;
position: absolute;
top: 0;
right: 0;
}
header#wikigg-header .mobile-menu .menu-icon {
display: block;
margin: 0;
cursor: pointer;
}
header#wikigg-header .mobile-menu .menu-icon * {
display: none;
}
header#wikigg-header .mobile-menu .menu-icon::after {
content: "";
display: block;
pointer-events: none;
width: var(--layout-topbar-height);
height: var(--layout-topbar-height);
--mask: var(--icon-user) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 19px 19px;
mask-size: 19px 19px;
-webkit-mask-position: center center;
mask-position: center center;
background-color: #fff;
}
/* collapsed */
header#wikigg-header #p-personal .body > ul {
padding: 0;
}
header#wikigg-header #p-personal .body > ul > li {
display: none;
}
/* expanded */
header#wikigg-header #mobile-toggle:not(:checked) ~ #p-personal .body > ul {
padding: 4px;
}
header#wikigg-header
#mobile-toggle:not(:checked)
~ #p-personal
.body
> ul
> li {
display: block;
}
header#wikigg-header .mobile-menu:hover .menu-icon,
header#wikigg-header #mobile-toggle:not(:checked) ~ .mobile-menu .menu-icon {
background: rgba(255, 255, 255, 0.25);
}
header#wikigg-header #p-personal ul > li a.mw-echo-notifications-badge {
text-indent: 0;
opacity: 1;
width: auto;
background-image: none;
top: unset;
height: unset;
filter: unset;
}
#pt-notifications-alert .mw-echo-notifications-badge::after {
display: none;
}
}
/* reset */
@media screen and (max-width: 961px) {
div.mobile-header {
text-align: unset;
}
#mobile-toggle:checked ~ #p-personal {
display: block;
}
header#wikigg-header #p-personal {
top: unset;
width: auto;
background-color: unset;
padding: unset;
}
header#wikigg-header #p-personal ul {
font-size: inherit;
}
header#wikigg-header #p-personal ul > li {
width: unset;
text-align: unset;
margin: unset;
}
header#wikigg-header #p-personal ul > li a:hover {
background: rgba(255, 255, 255, 0.25);
}
}
/********* wiki.gg footer *********/
footer#wikigg-footer .footer-right,
footer#wikigg-footer .footer-left {
margin: 0;
text-align: center;
}
@media screen and (max-width: 479px) {
footer#wikigg-footer .footer-right,
footer#wikigg-footer .footer-left {
width: auto;
}
}
@media screen and (max-width: 359px) {
footer#wikigg-footer .footer-middle {
/* hide wiki.gg logo to make room to avoid text wrapping */
display: none;
}
}
/********* Extension:ThemeToggle *********/
header#wikigg-header #p-personal li#pt-themes {
white-space: nowrap;
line-height: unset; /* reset */
height: var(--layout-topbar-height);
border-right: 1px solid #404040;
padding-left: 12px;
padding-right: 12px;
}
header#wikigg-header #p-personal li#pt-themes:hover,
header#wikigg-header #p-personal li#pt-themes:active {
background: unset;
}
header#wikigg-header #p-personal li#pt-themes #pt-themes-label {
padding: 0;
margin: 0;
background: none;
align-items: flex-start;
justify-content: center;
cursor: pointer;
height: 100%;
}
header#wikigg-header
#p-personal
li#pt-themes
#pt-themes-label
> span:first-child {
color: #bbb;
font-size: 10px;
line-height: 12px;
margin: 0;
}
header#wikigg-header
#p-personal
li#pt-themes
#pt-themes-label
> span:last-child {
line-height: 18px;
margin: 0;
display: flex;
align-items: center;
}
header#wikigg-header
#p-personal
li#pt-themes
#pt-themes-label
> span:last-child::after {
all: unset;
content: "";
display: block;
width: 14px;
height: 14px;
--mask: var(--icon-chevron-down) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: #bbb;
margin: 0 0 0 3px;
}
header#wikigg-header #p-personal li#pt-themes #pt-themes-checkbox {
display: none;
}
header#wikigg-header
#p-personal
li#pt-themes
#pt-themes-checkbox:checked
+ #pt-themes-label::after {
transform: scaleY(-1);
}
header#wikigg-header #p-personal li#pt-themes .ext-themetoggle-popup {
border: 0;
padding: 0;
width: auto;
min-width: 100%;
left: 0;
top: var(--layout-topbar-height);
transform: none;
font-size: inherit; /* reset */
line-height: inherit; /* reset */
}
header#wikigg-header #p-personal li#pt-themes .ext-themetoggle-popup::before {
display: none;
}
header#wikigg-header #p-personal li#pt-themes .ext-themetoggle-popup ul {
padding: 6px;
gap: 2px;
border: 0;
background: #000538; /* same as top bar */
}
header#wikigg-header #p-personal li#pt-themes .ext-themetoggle-popup ul li {
transition: background 0.3s;
}
header#wikigg-header
#p-personal
li#pt-themes
.ext-themetoggle-popup
ul
li:first-child {
padding: 0 6px;
font-size: 12px;
line-height: 20px;
color: #bbb;
}
header#wikigg-header #p-personal li#pt-themes .ext-themetoggle-popup ul a {
padding: 2px 6px;
font-size: inherit;
}
@media screen and (max-width: 961px) {
header#wikigg-header #p-personal li#pt-themes {
border-right: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
display: block;
float: none;
position: absolute;
top: calc(0px - var(--layout-topbar-height));
right: var(--layout-topbar-height);
/* Disable hover-to-show for styleToggle menu, keep click-to-show only */
}
header#wikigg-header #p-personal li#pt-themes .ext-themetoggle-popup {
left: auto;
right: -1px;
z-index: 1;
}
header#wikigg-header
#p-personal
li#pt-themes
.ext-themetoggle-popup
ul
li:not(#pt-themes):hover {
background: rgba(255, 255, 255, 0.25);
}
header#wikigg-header #p-personal li#pt-themes #pt-themes-label span,
header#wikigg-header
#p-personal
li#pt-themes
#pt-themes-label
span:last-child {
display: none;
}
header#wikigg-header #p-personal li#pt-themes #pt-themes-label::after {
content: "";
display: block;
--mask: var(--icon-brush) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 19px 19px;
mask-size: 19px 19px;
-webkit-mask-position: center center;
mask-position: center center;
background-color: #fff;
width: var(--layout-topbar-height);
height: var(--layout-topbar-height);
margin: 0;
}
header#wikigg-header
#p-personal
li#pt-themes
#pt-themes-checkbox:checked
+ #pt-themes-label::after {
transform: none;
}
header#wikigg-header #p-personal li#pt-themes:hover .ext-themetoggle-popup {
display: none;
}
header#wikigg-header
#p-personal
li#pt-themes
> input[type="checkbox"]:checked
~ .ext-themetoggle-popup {
display: block;
}
header#wikigg-header #p-personal li#pt-themes #pt-themes-label:hover,
header#wikigg-header
#p-personal
li#pt-themes
.vector-menu-checkbox:checked
~ #pt-themes-label {
background: rgba(255, 255, 255, 0.25);
}
}
/***********************************************************************************************************
* base css styles for both interface and content box: font, color, etc.
***********************************************************************************************************/
/** Font **/
html,
body {
font-family: Helvetica, Arial, sans-serif;
color: var(--theme-text-color);
}
/* Text color */
#content {
color: var(--theme-text-color);
--theme-background: var(--theme-background-solid-color-main);
}
html {
background: var(--theme-site-background);
/* always show scroll bar for short page.
* By doing this page background size won't change when expand/collapse sidebar sections.
*/
overflow-y: scroll;
}
body {
font-size: var(--font-size);
line-height: var(--line-height);
}
ul,
ol {
margin: 2px 0 2px 1.5em;
}
ul {
list-style-image: none;
}
li {
margin: 0 0 2px 0;
}
small {
font-size: var(--font-size-s);
line-height: var(--line-height-s);
}
sup,
sub {
font-size: var(--font-size-s);
}
/* Code styling, overriding styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/REL1_39/resources/src/mediawiki.skinning/elements.less#164
* (not sure about the purpose of ".mw-code", it only seems to be used on very
* long Lua pages like [[Module:Exclusive/data]])
* (looks like ".mw-code" can also be used manually on pages to mimic <pre>
* styling while still respecting wikicode; see [[Help:Displaying code text]]) */
pre,
code,
.mw-code {
color: var(--theme-text-color);
border: 1px solid var(--theme-box-border-color-light);
}
pre,
.mw-code {
background-color: var(--theme-box-background);
}
/* Break really long words when they overflow to the next line.
* By default this is only applied to pre and .mw-code, not code:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/REL1_39/resources/src/mediawiki.skinning/elements.less#177 */
code {
word-wrap: break-word;
}
fieldset {
border-width: 2px;
border-color: var(--theme-border-color);
}
/** link color **/
/* Self-links aren't real links, they're not clickable.
* Hence, they shouldn't change color when hovered over like real links, as that is counter-intuitive.
* We should not use :not(.selflink) since it increases the priority and make it is difficult to override
* link styles for certain elements (e.g. in wiki.gg header).
*/
a,
a.selflink:hover,
a.selflink:active {
text-decoration: none;
color: var(--theme-link-color);
}
a:visited {
color: var(--theme-link-color-visited);
}
a:hover,
a:active {
text-decoration: underline;
color: var(--theme-link-color-hover);
}
/** red link **/
/* we don't really need to mark you have "visited" an inexistent page */
a.new,
a.new:visited {
color: var(--theme-link-color-redlink);
}
/* Blockquotes, overriding styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+/refs/heads/master/resources/common/typography.less */
.vector-body blockquote {
border-left-color: var(--oouihelper--themerelated-lighter-transparent);
padding-left: 24px;
}
/*********************************************************************************************************/
input,
button {
color: var(--theme-control-text-color);
caret-color: var(--theme-text-color);
}
input[type="submit"] {
color: var(--theme-control-text-color);
}
::placeholder {
color: var(--theme-text-color-placeholder);
}
/* Link color */
.mw-parser-output a.external,
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw,
.mw-parser-output a.extiw:visited,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button {
color: var(--theme-link-color);
}
/* "Note text" color */
.note-text {
color: var(--theme-text-color-note);
}
.pixel img,
.pixel,
#mw-imagepage-section-filehistory img {
image-rendering: pixelated; /*for chrome*/
image-rendering: crisp-edges; /*for firefox*/
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/REL1_39/resources/src/mediawiki.skinning/elements.less#230 */
.small {
font-size: 85%;
}
.fullwidth,
.full-width {
width: 100%;
}
.nowrap {
white-space: nowrap;
}
/* The default ".center" class has a "width:100%" style, see here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/REL1_39/resources/src/mediawiki.skinning/elements.less#219
* We don't always want that, so we're using a different, new class name. */
.aligncenter,
.align-center {
text-align: center;
}
.alignleft,
.align-left {
text-align: left;
}
.alignright,
.align-right {
text-align: right;
}
/* clear fix for float block */
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
/* floating */
.float-right {
float: right;
margin: 0 0 var(--layout-gap) var(--layout-gap);
}
.float-left {
float: left;
margin: 0 var(--layout-gap) var(--layout-gap) 0;
}
/* Facilitate inline scary transclusion */
.scary-transclusion p,
.scary-transclusion .mw-parser-output {
display: inline;
}
/* hide last empty paragraph at the end */
div.mw-parser-output > p:last-child > br:only-child {
display: none;
}
.block {
display: block;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
/* Theme-aware color for icons (black for light themes, white for dark themes) */
.blackwhite-icon {
filter: var(--ooui--icon-normal-filter);
}
/* Invert for dark theme -- deprecated, please use ".blackwhite-icon" */
.dark-invert {
filter: invert(1);
}
/* Invert class */
.invert {
filter: invert(1);
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/REL1_39/resources/src/mediawiki.skinning/elements.less#55 */
hr {
height: 0;
background: none;
border-top: 1px solid var(--theme-hr-color-top);
border-bottom: 1px solid var(--theme-hr-color-bottom);
margin: 4px 0;
}
hr.space {
height: 4px;
background: none;
border: 0;
}
hr.incell-border {
/* border inside a table cell */
margin: 0.7em 0;
background-color: var(--theme-box-border-color);
}
.page-content .vertical-align-top * {
vertical-align: top;
}
.page-content .vertical-align-bottom * {
vertical-align: bottom;
}
/***********************************************************************************************************
* interface layout and styles for widgets outside of content box
***********************************************************************************************************/
/**** Main Layout START ***********************************************************/
/**
* Note: wiki.gg topbar is position:fixed. So we don't need to consider it in grid layout
*/
html,
body {
min-height: 100%;
}
html {
height: 100%;
scroll-padding-top: 100px; /* scroll offset */
}
body {
height: auto;
}
/*** main grid container ***/
body {
/* grid */
display: grid;
grid-template-columns:
[body-left] var(--layout-sidespace) [aside-left] var(--layout-sidebar-width)
[aside-right nav-left content-left footer-left] var(--layout-content-width)
[nav-right content-right footer-right] var(--layout-sidespace) [body-right];
grid-template-rows:
[body-start topbar-start] auto [topbar-end page-start] var(
--layout-box-gap-y
)
[logo-start] var(--layout-logo-height) [logo-end] var(--layout-box-gap-y) [nav-start aside-start] auto [nav-end content-start] auto [content-end footer-start] auto [footer-end] minmax(
0,
1fr
)
[aside-end] var(
--layout-box-gap-y
) [page-end footerbar-start] auto [footerbar-end body-end];
gap: 0 var(--layout-box-gap-x);
}
/*** grid items ***/
/* Flatten DOM structure. Therefore we have following grid items under body grid container:
* div#mw-page-base, div#mw-head-base, #mw-navigation>h2, div#mw-head, div#mw-panel, div#content.mw-body, div#footer, footer.
*/
body > .content-wrapper,
#mw-navigation {
display: contents;
}
/** unused, hide them **/
#mw-navigation > h2 {
display: none;
}
/** wiki.gg header **/
header#wikigg-header {
position: sticky;
grid-column: body-left/body-right;
grid-row: topbar-start/topbar-end;
}
/** side nav bar **/
#mw-panel {
grid-column: aside-left/aside-right;
grid-row: aside-start/aside-end;
float: none;
width: unset;
padding: 0;
}
/** nav **/
#mw-head,
#mw-head-base {
grid-column: nav-left/nav-right;
grid-row: nav-start/nav-end;
}
/** content **/
.mw-body {
grid-column: content-left/content-right;
grid-row: content-start/content-end;
}
/* For some pages such as api.php, .mw-body is the only child, so take up all space. */
.mw-body:first-child {
grid-column: body-left/body-right;
grid-row: page-start/page-end;
}
/** #footer: content footer **/
#footer {
grid-column: footer-left/footer-right;
grid-row: footer-start/footer-end;
margin: 0;
z-index: 0;
}
/** used to gen box shadow for main box (nav + content + #footer) **/
#mw-page-base {
grid-column: content-left/content-right;
grid-row: nav-start/footer-end;
height: 100%;
}
/** wiki.gg footer bar **/
body > footer {
grid-column: body-left/body-right;
grid-row: footerbar-start/footerbar-end;
}
/*** logo block. It is absolute position ***/
#p-logo {
position: absolute;
width: 100%;
height: var(--layout-logo-height);
left: 0;
top: calc(var(--layout-topbar-height) + var(--layout-box-gap-y));
background: var(--theme-site-logo-image) center
center/var(--layout-logo-width) auto no-repeat;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
filter: var(--theme-site-logo-filter);
}
#p-logo .mw-wiki-logo {
width: var(--theme-site-logo-width);
height: var(--theme-site-logo-height);
margin: auto;
/* use logo image as <a>'s background will sometime flicker when hovered on Firefox,
* I still don't know why, but move background to #p-logo can avoid this issue.
*/
background: none; /* logo flicker fix */
}
/**** Main Layout END ***********************************************************/
/********* side panel START *********/
#mw-panel,
#mw-panel * {
box-sizing: border-box;
}
#mw-panel {
--list-body-font-size: 14px;
--list-body-padding-x: 6px;
--list-body-padding-y: 6px;
display: flex;
flex-direction: column;
gap: var(--layout-box-gap-y) var(--layout-box-gap-x);
}
#mw-panel #t-print {
/* hide the "Printable version" link. */
display: none;
}
#mw-panel a:not(:focus) {
/* remove the underline from links, unless the links are focused (accessibility: focused links must be distinguishable in some way) */
text-decoration: none;
}
#mw-panel .menu-toggle {
display: none;
}
#mw-panel .portal {
/* section box */
border-width: 1px;
border-style: solid;
border-color: var(--theme-widget-border-color);
border-radius: var(--theme-widget-border-radius);
box-shadow: var(--theme-widget-shadow);
background: var(--theme-section-background);
margin: 0;
padding: 0;
}
#mw-panel .portal .vector-menu-heading {
/* section heading */
border-radius: var(--theme-widget-border-radius)
var(--theme-widget-border-radius) 0 0;
background: var(--theme-heading-background);
margin: 0;
padding: 6px 10px;
font-size: 16px;
line-height: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--theme-heading-color);
}
#mw-panel .portal .vector-menu-heading::after {
content: "";
display: block;
pointer-events: none;
width: 14px;
height: 14px;
margin-top: 1px; /* offset */
--mask: var(--icon-chevron-down) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-icon-color);
transform: scaleY(-1);
}
.client-nojs #mw-panel .portal .vector-menu-heading {
/* the cursor should not be pointer if JavaScript is disabled
* (because the heading can't be clicked in that case); see also
* https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#.client-js_and_.client-nojs */
cursor: unset;
}
.client-nojs #mw-panel .portal .vector-menu-heading::after {
/* don't display the arrow if JavaScript is disabled (because
* the heading can't be collapsed in that case); see also
* https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#.client-js_and_.client-nojs */
display: none;
}
#mw-panel .portal:hover .vector-menu-heading::after {
background-color: var(--theme-icon-color-hover);
}
#mw-panel .portal.collapsed .vector-menu-heading::after {
transform: none;
}
#mw-panel #p-logo + .portal {
/* first section */
position: relative; /* for the "grass" */
}
#mw-panel #p-logo + .portal .vector-menu-heading {
/* show the heading of first section */
display: flex;
}
#mw-panel .portal .body {
/* list body */
background: none;
border: 0;
padding: 0;
margin: 0;
}
#mw-panel .portal .body::before {
/* line between header and body */
content: "";
display: block;
pointer-events: none;
height: 0;
border-top: 1px solid var(--theme-hr-color-top);
border-bottom: 1px solid var(--theme-hr-color-bottom);
}
#mw-panel .portal .body ul {
padding: 4px;
}
#mw-panel .portal .body li {
margin: 0;
padding: 0;
font-size: var(--list-body-font-size);
line-height: calc(var(--list-body-font-size) + 2px);
border-radius: calc(var(--theme-widget-border-radius) - 2px);
transition: background 0.3s;
}
#mw-panel .portal .body li:hover {
background: var(--theme-highlight-background);
}
#mw-panel .portal .body li a {
display: block;
padding: var(--list-body-padding-y) var(--list-body-padding-x);
color: var(--theme-link-color);
}
#mw-panel .portal .body li a:visited {
color: var(--theme-link-color-visited);
}
#mw-panel .portal .body li a:hover {
color: var(--theme-link-color-hover);
}
#mw-panel .portal .body li a.feedlink {
/* "Atom" RSS Feed */
text-indent: calc(var(--list-body-font-size) + 2px);
background-position: var(--list-body-padding-x) center; /* align icon with other text */
}
/********* side panel END *********/
/********* main content box *********/
/****** #mw-head (navbar) ******/
/* reset */
#mw-head * {
float: unset;
font-size: unset;
line-height: unset;
box-sizing: border-box;
}
/* tabs layout */
#mw-head {
--layout-padding: 12px;
--layout-gap: 6px;
--layout-content-size-toggle-gap-left: 4px;
--layout-content-size-toggle-gap-right: 5px;
--tab-padding-x: 12px;
--tab-padding-y: 4px;
--icon-size: 1em;
--icon-margin: 3px;
top: unset; /* reset for under 720/960px */
box-sizing: border-box;
padding: var(--layout-padding) 0 0 0;
background: var(--theme-background);
border-radius: var(--theme-widget-border-radius)
var(--theme-widget-border-radius) 0 0;
border-width: 1px 1px 0;
border-style: solid;
border-color: var(--theme-widget-border-color);
position: relative;
display: flex;
justify-content: space-between;
align-items: stretch;
}
#mw-head #left-navigation,
#mw-head #right-navigation {
float: none;
flex: 1 1 auto;
margin: 0;
display: flex;
align-items: stretch;
}
#mw-head #left-navigation::before,
#mw-head #left-navigation::after,
#mw-head #right-navigation::before,
#mw-head #right-navigation::after {
content: "";
display: block;
border-bottom: 1px solid var(--theme-border-bottom-color);
background: var(--theme-background-shadow);
}
#mw-head #nav-content-size-toggle {
flex: 0 0 auto;
}
#mw-head #left-navigation {
justify-content: flex-start;
}
#mw-head #right-navigation {
justify-content: flex-end;
}
#mw-head #left-navigation::before {
flex: 0 0
calc(
var(--layout-content-size-toggle-gap-left) + 22px +
var(--layout-content-size-toggle-gap-right)
); /* for sidebar toggle button */
}
#mw-head #right-navigation::after {
flex: 0 0 calc(var(--layout-padding) - var(--layout-gap)); /* last item of #right-navigation has margin-right:var(--layout-gap) */
}
#mw-head #left-navigation::after,
#mw-head #right-navigation::before {
flex: 1 1 auto;
}
/*** tabs of navbar ***/
/* reset */
#mw-head .vector-menu,
#mw-head .vector-menu * {
background: none;
}
/* tabs list */
#mw-head .vector-menu-tabs {
height: unset;
padding: unset;
}
#mw-head .vector-menu-tabs .vector-menu-content-list {
display: flex;
align-items: stretch;
}
/* tab */
#mw-head {
--theme-tab-border-radius: var(--theme-widget-border-radius);
--theme-tab-border-style: solid;
--theme-tab-border-left-width: 1px;
--theme-tab-border-right-width: 1px;
--theme-tab-border-top-width: 1px;
--theme-tab-border-bottom-width: 1px;
--theme-tab-border-width: var(--theme-tab-border-top-width)
var(--theme-tab-border-right-width) var(--theme-tab-border-bottom-width)
var(--theme-tab-border-left-width);
--theme-tab-border-bottom-color: var(--theme-border-bottom-color);
--theme-tab-border-bottom: var(--theme-tab-border-style)
var(--theme-tab-border-bottom-width) var(--theme-tab-border-bottom-color);
--theme-tab-border-bottom-selected: var(--theme-tab-border-style)
var(--theme-tab-border-bottom-width) transparent;
}
#mw-head .vector-menu-tabs .mw-list-item,
#mw-head .vector-menu-dropdown {
/* outer box */
height: auto;
border-bottom: var(--theme-tab-border-bottom);
position: relative;
padding-right: var(--layout-gap); /* make space for gap */
}
#mw-head .vector-menu-tabs .mw-list-item::after,
#mw-head .vector-menu-dropdown::after {
/* inset shadow */
content: "";
display: block;
pointer-events: none;
width: 100%;
height: 100%;
background: var(--theme-background-shadow);
position: absolute;
right: 0;
bottom: 0;
}
#mw-head .vector-menu-tabs .mw-list-item.icon,
#mw-head .vector-menu-dropdown.icon {
display: flex;
}
#mw-head .vector-menu-tabs .mw-list-item a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
/* inner box */
height: auto;
margin: 0;
padding: var(--tab-padding-y) var(--tab-padding-x);
background: var(--theme-tab-background);
border-width: var(--theme-tab-border-width);
border-style: var(--theme-tab-border-style);
border-color: var(--theme-tab-border-color);
border-bottom: 0;
border-radius: var(--theme-tab-border-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
color: var(--theme-link-color);
}
#mw-head .vector-menu-tabs .mw-list-item a:hover,
#mw-head .vector-menu-dropdown .vector-menu-heading:hover {
color: var(--theme-link-color-hover);
}
#mw-head .vector-menu-tabs .mw-list-item a.new,
#mw-head .vector-menu-dropdown .vector-menu-heading.new {
color: var(--theme-link-color-redlink);
}
#mw-head .vector-menu-tabs .mw-list-item.selected {
/* outer box: selected */
background: var(--theme-tab-background-selected);
border-width: var(--theme-tab-border-width);
border-style: var(--theme-tab-border-style);
border-color: var(--theme-tab-border-color-selected);
border-radius: var(--theme-tab-border-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
padding-right: 0;
margin-right: var(--layout-gap); /* make space for gap */
}
#mw-head .vector-menu-tabs .mw-list-item.selected::after {
/* gap */
width: var(--layout-gap);
right: auto;
left: 100%;
margin: 0 0 0 var(--theme-tab-border-left-width); /* left offset */
border-bottom: var(--theme-tab-border-bottom);
}
#mw-head .vector-menu-tabs .mw-list-item.selected a {
/* inner box: selected */
border: 0;
border-bottom: var(--theme-tab-border-bottom-selected);
background: none;
color: var(--theme-text-color);
}
/* dropdown menu*/
#mw-head .vector-menu-dropdown .vector-menu-heading {
/* tab label */
position: relative;
display: flex;
align-items: center;
gap: 3px;
}
#mw-head .vector-menu-dropdown .vector-menu-heading::after {
all: unset;
/* arrow icon */
content: "";
display: block;
pointer-events: none;
width: 14px;
height: 14px;
margin-top: 1px; /* offset */
--mask: var(--icon-chevron-down) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-icon-color-link);
}
#mw-head .vector-menu-dropdown:hover .vector-menu-heading::after {
/* .vector-menu-heading is covered by .vector-menu-checkbox, therefore we can't use .vector-menu-heading:hover::after */
--mask: var(--icon-chevron-down) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-icon-color-hover);
}
#mw-head .vector-menu-dropdown .vector-menu-content {
/* dropdown list body */
border-width: var(--theme-dropdown-border-width);
border-style: var(--theme-dropdown-border-style);
border-color: var(--theme-dropdown-border-color);
border-radius: var(--theme-dropdown-border-radius);
background: var(--theme-dropdown-background);
box-shadow: var(--theme-dropdown-shadow);
border-top-left-radius: 0;
border-top-right-radius: 0;
left: 0;
margin-top: 0;
white-space: nowrap;
z-index: 999;
}
#mw-head .vector-menu-dropdown .vector-menu-content ul {
padding: 4px;
}
#mw-head .vector-menu-dropdown .vector-menu-content li {
border-radius: calc(var(--theme-widget-border-radius) - 2px);
transition: background 0.3s;
}
#mw-head .vector-menu-dropdown .vector-menu-content li:hover {
background: var(--theme-highlight-background);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a {
display: block;
padding: var(--layout-dropdown-item-padding-y)
var(--layout-dropdown-item-padding-x);
text-decoration: none;
color: var(--theme-link-color);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:visited {
color: var(--theme-link-color-visited);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:hover {
color: var(--theme-link-color-hover);
}
/* "more" menu */
#mw-head #right-navigation .vector-menu-dropdown .vector-menu-content {
left: auto;
right: var(--layout-gap);
}
/* watch/unwatch star */
#mw-head .vector-menu-tabs .mw-watchlink.icon a {
--theme-link-color-hover: var(--theme-icon-color-hover);
width: calc(var(--icon-margin) * 2 + var(--icon-size));
box-sizing: content-box;
padding: var(--tab-padding-y);
color: transparent; /* for watch/unwatch, the text of <a> will be plain 'watch'/'unwatch' without <span> after clicking. */
display: flex;
align-items: center;
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a::before {
content: "";
display: block;
position: unset;
background-image: none;
width: var(--icon-size);
height: var(--icon-size);
flex: 0 0 auto;
margin: var(--icon-margin);
--mask: var(--icon) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-link-color);
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a:hover::before {
background-color: var(--theme-link-color-hover);
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a span {
display: none;
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a::before {
transform-origin: 50% calc(var(--icon-size) / 2 * 1.125);
}
#mw-head .vector-menu-tabs #ca-watch.icon {
/* line star */
--icon: var(--icon-star-empty);
}
#mw-head .vector-menu-tabs #ca-unwatch.icon {
/* solid star */
--icon: var(--icon-star-filled);
}
/*** search form ***/
#mw-head #p-search {
--theme-border-radius: 2px;
--theme-background: var(--theme-tab-background);
--theme-background-active: var(--theme-tab-background-selected);
--theme-border-color: var(--theme-legacy-search-border-color);
--theme-border-color-active: var(--theme-legacy-search-border-color-active);
background: var(--theme-background-shadow);
border: 0;
border-bottom: 1px solid var(--theme-border-bottom-color);
margin: 0;
padding: 1px var(--layout-gap) 0 2px;
}
#mw-head #p-search > div {
display: flex;
align-items: flex-start;
height: 100%;
}
#mw-head #p-search form {
margin: 0;
overflow: hidden;
width: auto;
opacity: unset;
align-self: stretch;
padding-bottom: var(--layout-gap);
}
#mw-head #p-search #simpleSearch {
margin: 0;
width: 50vw;
max-width: 15em;
display: flex;
}
#mw-head #p-search .vector-search-box-input {
height: unset;
padding: 0 26px 0 4px;
box-shadow: none;
caret-color: var(--theme-text-color);
align-self: stretch;
border-radius: var(--theme-border-radius);
border-width: 1px;
border-style: solid;
border-color: var(--theme-border-color);
background: var(--theme-background);
color: var(--theme-text-color);
}
#mw-head #p-search .vector-search-box-input:focus {
outline: 0;
border-color: var(--theme-border-color-active);
}
#mw-head #p-search .vector-search-box-input::placeholder {
color: var(--theme-text-color-note);
}
#mw-head #p-search .mw-searchButton {
opacity: 0;
}
#mw-head #p-search .searchButton {
width: 26px;
min-width: unset;
opacity: 1;
background-image: none;
--mask: var(--icon-search) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 19px 19px;
mask-size: 19px 19px;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-icon-color);
}
#mw-head #p-search .searchButton:hover {
background-color: var(--theme-icon-color-hover);
}
#mw-head #p-search .searchButton.mw-fallbackSearchButton {
opacity: 0;
}
/*** search result suggestions ***/
.suggestions {
border-width: var(--theme-dropdown-border-width);
border-style: var(--theme-dropdown-border-style);
border-color: var(--theme-dropdown-border-color);
border-radius: var(--theme-dropdown-border-radius);
background: var(--theme-dropdown-background);
box-shadow: var(--theme-dropdown-shadow);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.suggestions .suggestions-results,
.suggestions .suggestions-special {
background: none;
}
.suggestions .suggestions-results {
border: 0;
border-bottom: 1px solid var(--theme-border-color);
}
.suggestions .suggestions-results:empty {
border-bottom: 0;
}
.suggestions .suggestions-result,
.suggestions .suggestions-special .special-label,
.suggestions .suggestions-special .special-query {
color: var(--theme-text-color);
}
.suggestions .suggestions-result {
padding: 1px 4px;
line-height: unset;
}
.suggestions .suggestions-special {
margin: 0;
border: 0;
line-height: unset;
padding: 2px 4px 4px;
}
.suggestions a.mw-searchSuggest-link,
.suggestions a.mw-searchSuggest-link:hover,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus {
color: var(--theme-text-color);
}
.suggestions .suggestions-result-current {
background: var(--theme-highlight-background);
}
#nav-content-size-toggle {
display: none;
}
@media screen and (min-width: 1367px) {
/*** sidebar toggle ***/
#nav-content-size-toggle {
display: flex;
padding-left: var(--layout-content-size-toggle-gap-left);
margin-right: calc(
0px - var(--layout-content-size-toggle-gap-left) - 22px
); /* effective width = 0 */
}
#nav-content-size-toggle span {
align-self: center;
display: block;
width: 22px;
height: 22px;
cursor: pointer;
--mask: var(--icon-sidebar-collapse) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-icon-color-link);
}
#nav-content-size-toggle span:hover {
background-color: var(--theme-icon-color-hover);
}
.content-size-expanded #nav-content-size-toggle span {
--mask: var(--icon-sidebar-expand) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-icon-color-link);
}
.content-size-expanded #nav-content-size-toggle span:hover {
background-color: var(--theme-icon-color-hover);
}
/* expanded */
body.content-size-expanded {
grid-template-columns:
[body-left] var(
--layout-sidespace
) [aside-left aside-right nav-left content-left footer-left] var(
--layout-sidebar-width
)
var(--layout-content-width) [nav-right content-right footer-right] var(
--layout-sidespace
)
[body-right];
}
body.content-size-expanded #mw-panel > * {
display: none;
}
body.content-size-expanded #mw-panel #p-logo {
display: block;
}
}
/****** main content box ******/
/* font */
.vector-body {
font-size: inherit; /* reset */
line-height: inherit;
}
/** layout **/
#content {
color: inherit;
padding: 0;
display: flex;
flex-direction: column;
background: var(--theme-background);
border-width: 1px 1px 0;
border-style: solid;
border-color: var(--theme-widget-border-color);
}
.content-body {
flex: 1 1 auto;
}
.content-body > main {
align-self: stretch;
padding: var(--layout-padding-y) var(--layout-padding-x);
}
#bodyContent {
display: flex;
flex-direction: column;
position: unset;
}
/*** main heading section ***/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+/refs/heads/REL1_39/resources/skins.vector.styles.legacy/layouts/screen.less#47 */
.mw-body .firstHeading {
/* fix scroll-x issue for narrow width */
overflow: hidden;
}
/* the " < rootpage < page " crumb */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/REL1_39/resources/src/mediawiki.skinning/interface-subtitle.less#6 */
#contentSub,
#contentSub2 {
font-size: 12px;
line-height: 20px;
margin: 0;
color: var(--theme-text-color-note);
}
/* custom "back-arrows" */
#contentSub .subpages {
color: transparent;
line-height: 20px;
font-size: 0;
}
#contentSub .subpages a {
font-size: 12px;
vertical-align: middle;
display: inline-flex;
align-items: center;
padding-left: 4px;
}
#contentSub .subpages a::before {
content: "";
display: inline-block;
height: 4px;
width: 4px;
border-color: var(--theme-icon-color);
border-style: solid;
border-width: 0 0 2px 2px;
margin: 0 2px 0 0;
transform: rotate(45deg);
}
#contentSub::after {
/* the line between heading section and content body box */
content: "";
display: block;
pointer-events: none;
height: 0;
border-top: 1px solid var(--theme-hr-color-top);
border-bottom: 1px solid var(--theme-hr-color-bottom);
margin-top: 4px;
margin-bottom: var(--layout-padding-y);
}
/** content body box **/
#mw-content-text {
flex: 1 1 auto;
min-height: 20em;
}
/********* Catlinks *********/
/* "Categories:" box at the bottom of the page */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.skinning/interface.category.less */
.catlinks {
border-color: var(--theme-border-color);
border-radius: var(--theme-widget-border-radius);
background: var(--theme-background);
padding: 6px 12px;
margin: var(--layout-padding-y) 0 0 0;
}
.catlinks li {
border-left-color: var(--theme-border-color-accent);
}
/********* Helplink *********/
/* The help icon on category pages, Special:RecentChanges, etc. */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.helplink/helplink.less */
/* see also interface/mainBox/content/indicators.scss */
/* In the default style, the icon is the background-image of the <a> element.
* We want to apply a filter to the image only (not the text), so we have to
* move the image to a new pseudo-element. */
#mw-indicator-mw-helplink a {
background: none;
padding-left: 0;
display: flex;
}
#mw-indicator-mw-helplink a:before {
content: "";
background-image: url(/resources/src/mediawiki.helplink/images/helpNotice.svg?46d34);
background-position: left center;
background-repeat: no-repeat;
display: inline-block;
height: 20px;
padding-left: 25px;
filter: var(
--ooui--icon-normal-filter
); /* theme-dependent color of the icon */
}
/********* TablePager *********/
/* Data tables, used on e.g. Special:ListFiles */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.pager.styles/DataTable.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.pager.styles/TablePager.less */
.mw-datatable {
border-color: var(--oouihelper--borderdark);
}
.mw-datatable td,
.mw-datatable th {
border-color: var(--oouihelper--borderdark);
}
.mw-datatable th {
background-color: var(--oouihelper--textinput-background-darker);
}
.mw-datatable td {
background-color: var(--oouihelper--textinput-background);
}
.mw-datatable tr:hover td {
background-color: var(--oouihelper--textinput-background-lighter);
}
/********* Indicators *********/
/* The section with the little icons on the top right, e.g. the help icon on category pages */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.skinning/interface-indicators.less */
.mw-body .mw-indicators {
z-index: 0;
}
.mw-body .mw-indicator {
vertical-align: middle;
}
/****** #footer (copyright info) ******/
#footer {
font-size: 12px;
line-height: 18px;
background: var(--theme-background);
padding: var(--layout-padding-y) var(--layout-padding-y);
border-radius: 0 0 var(--theme-widget-border-radius)
var(--theme-widget-border-radius);
border-width: 0 1px 1px;
border-style: solid;
border-color: var(--theme-widget-border-color);
box-shadow: var(--theme-inner-shadow);
position: relative;
/* grid */
display: grid;
grid-template-columns: [l] 1fr 0fr [r];
grid-template-rows: [t] auto auto [b] auto;
z-index: 0; /* covered by content */
}
#footer a {
color: var(--theme-link-color);
}
#footer a:hover {
color: var(--theme-link-color-hover);
}
#footer ul li {
color: inherit;
font-size: inherit;
line-height: inherit;
padding: 0;
}
#footer #footer-info {
display: contents;
}
#footer #footer-icons {
grid-column: span 1 / r;
grid-row: t/b;
place-self: end;
}
#footer #footer-info-lastmod {
grid-column: l/span 1;
grid-row: t/span 1;
place-self: start;
margin-bottom: 1em;
}
#footer #footer-info-copyright {
grid-column: l/span 1;
grid-row: span 1 / b;
place-self: end stretch;
position: relative;
padding-right: 100px;
}
#footer #footer-info-copyright img {
position: absolute;
right: 0;
bottom: 0;
height: 31px;
width: auto;
}
#footer #footer-places {
grid-column: l/span 1;
grid-row: b/span 1;
}
/* background box for nav+content+#footer */
#mw-page-base {
box-shadow: var(--theme-widget-shadow);
border-radius: var(--theme-widget-border-radius);
background: none;
z-index: -1;
}
#mw-head,
#content,
#footer {
margin: 0;
}
#mw-head {
border-bottom-width: 0;
}
#content {
border-top-width: 0;
border-bottom-width: 0;
}
#footer {
border-top-width: 0;
}
/****** responsive Layout ******/
@media screen and (min-width: 1800px) {
:root {
--layout-sidespace: 10%;
}
}
@media screen and (max-width: 1800px) {
:root {
--layout-sidespace: 8%;
}
} /* screen and (max-width: 1800px) */
@media screen and (max-width: 1366px) {
:root {
--layout-sidespace: 1%;
}
/* change layout */
body {
grid-template-columns:
[body-left] var(
--layout-sidespace
) [aside-left nav-left content-left footer-left] var(
--layout-content-width
)
[content-right aside-right nav-right footer-right] var(--layout-sidespace)
[body-right];
grid-template-rows:
[body-start topbar-start] auto [topbar-end page-start] var(
--layout-box-gap-y
)
[logo-start] var(--layout-logo-height) [logo-end] var(--layout-box-gap-y)
[aside-start] auto [aside-end] var(
--layout-box-gap-y
) [nav-start] auto [nav-end content-start] auto [content-end footer-start] auto [footer-end] minmax(
var(--layout-box-gap-y),
1fr
)
[page-end footerbar-start] auto [footerbar-end body-end];
}
/* re-style navbar */
#mw-panel {
flex-direction: row;
align-items: flex-end;
align-self: end;
height: min-content;
padding: 0 4px;
border-width: 1px;
border-style: solid;
border-color: var(--theme-widget-border-color);
border-radius: var(--theme-widget-border-radius);
box-shadow: var(--theme-widget-shadow);
background: var(--theme-background);
/* Make #p-logo be positioned relative to #mw-panel. By this way, we can safely apply filter/backdrop-filter on #mw-panel */
position: relative;
z-index: 100;
}
#mw-panel .portal {
background: none;
box-shadow: none;
border: 0;
margin: 0;
padding: 0;
position: relative;
}
#mw-panel .portal .vector-menu-heading {
padding: 12px 8px 9px;
border: 0;
border-radius: 0;
background: none;
}
#mw-panel .portal .vector-menu-heading::after {
transform: scaleY(1); /* normalize arrow direction */
margin-left: 3px;
}
#mw-panel .portal .body {
display: none !important; /* !important is required, since there is inline-css from sidebar collapse/expand */
position: absolute;
left: 0;
top: 100%;
width: max-content;
min-width: 8em;
border-width: var(--theme-dropdown-border-width);
border-color: var(--theme-dropdown-border-color);
border-style: var(--theme-dropdown-border-style);
border-radius: var(--theme-dropdown-border-radius);
background: var(--theme-dropdown-background);
box-shadow: var(--theme-widget-shadow);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#mw-panel .portal .body::before {
display: none;
}
#mw-panel .portal .body li {
line-height: unset;
}
#mw-panel .portal .body li a {
padding: 6px 12px;
}
#mw-panel .portal.expanded .vector-menu-heading,
#mw-panel .portal:hover .vector-menu-heading {
background: var(--theme-highlight-background);
border-radius: 0;
}
#mw-panel .portal.expanded .vector-menu-heading::after,
#mw-panel .portal:hover .vector-menu-heading::after {
transform: scaleY(-1);
}
#mw-panel .portal.expanded .body,
#mw-panel .portal:hover .body {
display: block !important;
}
#mw-panel #p-logo + .portal::before {
/* hide the "grass" for first section */
display: none;
}
#mw-head #p-search {
position: absolute;
z-index: 101;
top: -45px;
background: none;
border: 0;
padding: 0 var(--layout-padding) 0 0;
}
/* remove the "grass" from main box */
#mw-head-base {
display: none;
}
/* no sidebar toggle now. */
#mw-head #left-navigation::before {
flex: 0 0 var(--layout-padding);
}
/* logo: smaller, and position relative to #mw-panel */
#p-logo {
background-size: var(--layout-logo-width) auto;
top: calc(0px - var(--layout-logo-height) - var(--layout-box-gap-y));
}
#p-logo .mw-wiki-logo {
width: var(--layout-logo-width);
height: var(--layout-logo-height);
}
} /* screen and (max-width: 1366px) */
@media screen and (max-width: 900px) {
:root {
--layout-logo-scale: 0.75;
--layout-box-gap: 6px;
}
/* change layout */
body {
grid-template-columns:
[body-left aside-left nav-left content-left footer-left] var(
--layout-content-width
)
[content-right aside-right nav-right footer-right body-right];
}
#mw-page-base,
#mw-panel,
#mw-head,
#content,
#footer {
border-radius: 0;
border-left: 0;
border-right: 0;
}
/* the "grass" size fix */
#mw-panel::before {
padding: 0;
left: 0;
}
#mw-panel {
display: block;
height: 41px;
}
#mw-panel .menu-toggle {
--mask: var(--icon-category) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 20px 20px;
mask-size: 20px 20px;
-webkit-mask-position: center calc(50% + 1px);
mask-position: center calc(50% + 1px);
background-color: var(--theme-heading-color);
cursor: pointer;
display: block;
flex: 0 0 auto;
width: 24px;
height: 24px;
margin: 9px 12px 6px;
}
#mw-panel .portal {
display: none;
background: var(--theme-dropdown-background);
border-radius: 0;
}
#mw-panel .portal .vector-menu-heading {
padding: 0 12px 4px;
border: 0;
display: block;
background: none;
}
#mw-panel .portal .vector-menu-heading::after {
display: none;
}
#mw-panel .portal.expanded .vector-menu-heading,
#mw-panel .portal:hover .vector-menu-heading {
background: none;
color: var(--theme-heading-color);
}
#mw-panel .portal .body {
display: block !important; /* !important is required, since there is inline-css from sidebar collapse/expand */
position: unset;
border: 0;
background: none;
backdrop-filter: none;
box-shadow: none;
padding: 0 0 8px;
width: 100%;
}
#mw-panel .portal .body ul {
padding: 0 12px;
display: flex;
flex-wrap: wrap;
justify-content: unset;
}
#mw-panel .portal .body li a {
padding: 4px 8px;
white-space: nowrap;
}
#mw-panel #p-logo + .portal .vector-menu-heading {
padding-top: 8px;
}
#mw-panel .menu-toggle.expanded ~ .portal {
display: block;
}
#mw-panel #p-lang {
/* "languages"*/
display: block;
justify-content: flex-end;
position: absolute;
left: 48px;
top: 9px;
background: none;
}
#mw-panel #p-lang .vector-menu-heading {
margin: 0;
padding: 0;
width: 24px;
height: 24px;
}
#mw-panel #p-lang .vector-menu-heading span {
display: none;
}
#mw-panel #p-lang .vector-menu-heading::before {
content: "";
display: block;
pointer-events: none;
--mask: var(--icon-language) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 20px 20px;
mask-size: 20px 20px;
-webkit-mask-position: center calc(50% + 1px);
mask-position: center calc(50% + 1px);
background-color: var(--theme-heading-color);
width: 24px;
height: 24px;
margin: 0;
}
#mw-panel #p-lang .body {
display: none !important;
position: absolute;
left: 0;
top: 100%;
width: max-content;
min-width: 8em;
border-width: var(--theme-dropdown-border-width);
border-color: var(--theme-dropdown-border-color);
border-style: var(--theme-dropdown-border-style);
border-radius: var(--theme-dropdown-border-radius);
background: var(--theme-dropdown-background);
box-shadow: var(--theme-widget-shadow);
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: 6px;
}
#mw-panel #p-lang .body ul {
display: block;
padding: 4px 4px 0 4px;
}
#mw-panel #p-lang.expanded .body {
display: block !important;
}
#mw-head #p-search {
top: -45px;
}
#mw-head #p-search #simpleSearch {
width: 65vw;
}
} /* screen and (max-width:900px) */
@media screen and (max-width: 720px) {
#content {
--layout-padding-x: 12px;
--layout-padding-y: 12px;
}
/* navbar tabs to icons */
#mw-head {
--icon: var(--icon-wiki);
--icon-size: 18px;
--icon-margin: 2px;
}
#mw-head .vector-menu-tabs .mw-list-item a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
--theme-link-color-hover: var(--theme-icon-color-hover);
width: calc(var(--icon-margin) * 2 + var(--icon-size));
box-sizing: content-box;
padding: var(--tab-padding-y);
color: transparent; /* for watch/unwatch, the text of <a> will be plain 'watch'/'unwatch' without <span> after clicking. */
display: flex;
align-items: center;
}
#mw-head .vector-menu-tabs .mw-list-item a::before,
#mw-head .vector-menu-dropdown .vector-menu-heading::before {
content: "";
display: block;
position: unset;
background-image: none;
width: var(--icon-size);
height: var(--icon-size);
flex: 0 0 auto;
margin: var(--icon-margin);
--mask: var(--icon) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-link-color);
}
#mw-head .vector-menu-tabs .mw-list-item a:hover::before,
#mw-head .vector-menu-dropdown .vector-menu-heading:hover::before {
background-color: var(--theme-link-color-hover);
}
#mw-head .vector-menu-tabs .mw-list-item a span,
#mw-head .vector-menu-dropdown .vector-menu-heading span {
display: none;
}
#mw-head .vector-menu-dropdown .vector-menu-heading::after {
display: none;
}
#ca-edit {
--icon: var(--icon-edit);
}
#ca-view,
#ca-view-foreign {
--icon: var(--icon-eye);
}
#left-navigation li[id^="ca-nstab-"] {
--icon: var(--icon-doc);
}
#ca-history {
--icon: var(--icon-history);
}
#ca-talk {
--icon: var(--icon-talk);
}
#t-contributions {
--icon: var(--icon-jigsaw);
}
#ca-addsection {
--icon: var(--icon-pencil-plus);
}
#ca-viewsource {
--icon: var(--icon-code);
}
#p-variants {
--icon: var(--icon-globe);
}
#p-cactions {
--icon: var(--icon-more);
}
} /* screen and (max-width:720px) */
@media screen and (max-width: 600px) {
:root {
--layout-logo-scale: 0.5;
}
/* footer */
#footer #footer-info-lastmod {
grid-column: l/r;
}
#footer #footer-icons {
float: none;
}
#footer #footer-info-copyright {
grid-column: l/r;
padding-right: 0;
padding-bottom: 40px;
}
#footer #footer-info-copyright img {
right: auto;
left: 0;
}
} /* screen and (max-width:600px) */
/***** Notification area *****/
/* Notification boxes on the right, e.g. after patrolling an edit.
* Introduction: https://www.mediawiki.org/wiki/Bubble_notifications */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.notification/common.css
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.notification/default.css */
.mw-notification-area-overlay {
position: fixed;
z-index: 9999;
}
.mw-notification-area {
font-size: 14px;
line-height: 1.7142857143;
}
.mw-notification {
color: var(--theme-text-color);
border-width: 1px;
border-style: solid;
border-color: var(--theme-widget-border-color);
border-radius: var(--theme-widget-border-radius);
box-shadow: var(--theme-widget-shadow);
background: var(--theme-widget-background);
transform: none;
}
.mw-notification.mw-notification-type-error {
border-color: var(--theme-notice-red-border-color);
color: var(--theme-notice-red-text-color);
}
.mw-notification.mw-notification-type-warn {
border-color: var(--theme-notice-orange-border-color);
color: var(--theme-notice-orange-text-color);
}
.mw-notification.mw-notification-type-success {
border-color: var(--theme-notice-green-border-color);
color: var(--ooui--messagewidget-success-color);
}
/********* Collapsible elements *********/
/* Documentation of jquery.makeCollapsible:
* https://www.mediawiki.org/wiki/Manual:Collapsible_elements
* https://www.mediawiki.org/wiki/ResourceLoader/Core_modules#jquery.makeCollapsible */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/jquery/jquery.makeCollapsible.styles.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/jquery/jquery.makeCollapsible.css */
/* Define a custom class "plaincollapse":
* Removes brackets from collapse/expand links */
.plaincollapse > .mw-collapsible-toggle {
/* only apply to immediate children to allow nesting */
color: rgba(0, 0, 0, 0);
}
.plaincollapse > .mw-collapsible-toggle > a,
.plaincollapse > .mw-collapsible-toggle > a:link,
.plaincollapse > .mw-collapsible-toggle > a:visited,
.plaincollapse > .mw-collapsible-toggle > a:hover {
font-weight: bold;
}
/* For floating the "Collapse"/"Expand" link (instead of always right next to text) */
.mw-collapsible-alignbtnright .mw-collapsible-toggle {
float: right !important;
}
.mw-collapsible-alignbtnleft .mw-collapsible-toggle {
float: left !important;
}
/* To forcibly prevent floating altogether */
.mw-collapsible-nofloat .mw-collapsible-toggle {
float: none;
}
/********* Usermessage *********/
/* Box at the top of all pages when the user has a new message on their User_talk: page:
* https://meta.wikimedia.org/wiki/New_messages_notification */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.skinning/interface-user-message.less */
.usermessage {
border-width: 1px;
border-style: solid;
border-color: var(--theme-widget-border-color);
border-radius: var(--theme-widget-border-radius);
box-shadow: var(--theme-widget-shadow);
background: var(--theme-widget-background);
border-color: var(--theme-notice-yellow-border-color);
background: var(--theme-notice-yellow-background-color);
color: var(--theme-text-color);
}
/********* Message boxes *********/
/* Various boxes, e.g. when previewing a page */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.skinning/messageBoxes.less */
/* ".{message|error|warning|success}box" are deprecated as of MediaWiki 1.39, see:
* https://phabricator.wikimedia.org/T300306
* https://phabricator.wikimedia.org/T270796
* https://phabricator.wikimedia.org/T300314
*/
.messagebox,
.errorbox,
.warningbox,
.successbox,
.mw-message-box,
.mw-message-box-warning,
.mw-message-box-error,
.mw-message-box-success {
color: var(--theme-text-color);
}
.messagebox,
.mw-message-box {
background-color: var(--ooui--messagewidget-notice-background-color);
border-color: var(--ooui--messagewidget-notice-border-color);
}
.errorbox,
.mw-message-box-error {
background-color: var(--ooui--messagewidget-error-background-color);
border-color: var(--ooui--messagewidget-error-border-color);
}
.warningbox,
.mw-message-box-warning {
background-color: var(--ooui--messagewidget-warning-background-color);
border-color: var(--ooui--messagewidget-warning-border-color);
}
.successbox,
.mw-message-box-success {
background-color: var(--ooui--messagewidget-success-background-color);
border-color: var(--ooui--messagewidget-success-border-color);
}
/********* Spinner *********/
/* e.g. when patrolling an edit */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/jquery.spinner/spinner.less */
.mw-spinner-container > div::after {
background: var(--theme-text-color-em);
}
/***********************************************************************************************************
* Over-width table floating-scroll
***********************************************************************************************************/
/*
css for floating-scroll v3.2.0
https://amphiluke.github.io/floating-scroll/
(c) 2022 Amphiluke
*/
.fl-scrolls {
overflow: auto;
position: fixed;
}
.fl-scrolls div {
overflow: hidden;
pointer-events: none;
}
.fl-scrolls div:before {
content: " ";
}
.fl-scrolls,
.fl-scrolls div {
font-size: 1px;
line-height: 0;
margin: 0;
padding: 0;
}
.fl-scrolls-hidden div:before {
content: " ";
}
.fl-scrolls-viewport {
position: relative;
}
.fl-scrolls-body {
overflow: auto;
}
.fl-scrolls-viewport .fl-scrolls {
position: absolute;
}
.fl-scrolls-hoverable .fl-scrolls {
opacity: 0;
transition: opacity 0.5s 0.3s;
}
.fl-scrolls-hoverable:hover .fl-scrolls {
opacity: 1;
}
.fl-scrolls:not([data-orientation]),
.fl-scrolls[data-orientation="horizontal"] {
bottom: 0;
min-height: 17px;
}
.fl-scrolls:not([data-orientation]) div,
.fl-scrolls[data-orientation="horizontal"] div {
height: 1px;
}
.fl-scrolls-hidden.fl-scrolls:not([data-orientation]),
.fl-scrolls-hidden.fl-scrolls[data-orientation="horizontal"] {
bottom: 9999px;
}
.fl-scrolls-viewport .fl-scrolls:not([data-orientation]),
.fl-scrolls-viewport .fl-scrolls[data-orientation="horizontal"] {
left: 0;
}
.fl-scrolls[data-orientation="vertical"] {
right: 0;
min-width: 17px;
}
.fl-scrolls[data-orientation="vertical"] div {
width: 1px;
}
.fl-scrolls-hidden.fl-scrolls[data-orientation="vertical"] {
right: 9999px;
}
.fl-scrolls-viewport .fl-scrolls[data-orientation="vertical"] {
top: 0;
}
/*css for wide table */
.table-wide {
clear: both;
position: relative;
}
.mw-parser-output > .table-width {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.table-wide-inner {
overflow-x: auto;
}
.table-wide-inner > table {
margin: 0 !important;
}
.table-wide:before {
content: "";
display: block;
pointer-events: none;
box-shadow: inset -15px 0 20px -15px var(--theme-wide-table-shadow-color);
width: 20px;
height: 100%;
position: absolute;
right: 0;
z-index: 2;
}
/***********************************************************************************************************
* css for pages under MediaWiki or Special NS, or system widgets on template/module pages and so on
***********************************************************************************************************/
/********* mediawiki.ui *********/
/********* mediawiki.ui.button *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.ui.button/button.less */
/* the rules here can seem a bit strange/redundant/counter-intuitive, but that's necessary to overwrite the default styling */
.mw-ui-button {
border-radius: 4px;
background: var(--ooui--button-background);
color: var(--ooui--button-color);
border-top: var(--ooui--button-border-top);
border-right: var(--ooui--button-border-right);
border-bottom: var(--ooui--button-border-bottom);
border-left: var(--ooui--button-border-left);
}
.mw-ui-button:not(:disabled) {
box-shadow: var(--ooui--button-box-shadow);
transition: none;
}
.mw-ui-button:not(:disabled):visited {
color: var(--ooui--button-color);
}
.mw-ui-button:not(:disabled):hover {
background: var(--ooui--button-background--hover);
color: var(--ooui--button-color--hover);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.mw-ui-button:not(:disabled):focus {
color: var(--ooui--button-color--hover);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
box-shadow: var(--ooui--button-box-shadow),
var(--ooui--button-box-shadow--focus);
}
.mw-ui-button:not(:disabled):active,
.mw-ui-button:not(:disabled).is-on {
background: var(--ooui--button-background);
color: var(--ooui--button-color);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.mw-ui-button:disabled {
background: var(--ooui--button-disabled-background);
color: var(--ooui--button-disabled-color);
border-top: var(--ooui--button-disabled-border-top);
border-right: var(--ooui--button-disabled-border-right);
border-bottom: var(--ooui--button-disabled-border-bottom);
border-left: var(--ooui--button-disabled-border-left);
}
.mw-ui-button.mw-ui-quiet:not(:disabled),
.mw-ui-button.mw-ui-quiet.mw-ui-progressive:not(:disabled),
.mw-ui-button.mw-ui-quiet.mw-ui-destructive:not(:disabled) {
border-radius: 0;
background: unset;
color: var(--ooui--button-color);
border-width: 0;
box-shadow: none;
}
.mw-ui-button.mw-ui-quiet:not(:disabled):hover,
.mw-ui-button.mw-ui-quiet.mw-ui-progressive:not(:disabled):hover,
.mw-ui-button.mw-ui-quiet.mw-ui-destructive:not(:disabled):hover {
background: unset;
color: var(--ooui--button-color--hover);
border-width: 0;
}
.mw-ui-button.mw-ui-quiet:not(:disabled):focus,
.mw-ui-button.mw-ui-quiet.mw-ui-progressive:not(:disabled):focus,
.mw-ui-button.mw-ui-quiet.mw-ui-destructive:not(:disabled):focus {
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
box-shadow: var(--ooui--button-box-shadow--focus);
}
.mw-ui-button.mw-ui-quiet:not(:disabled):active,
.mw-ui-button.mw-ui-quiet.mw-ui-progressive:not(:disabled):active,
.mw-ui-button.mw-ui-quiet.mw-ui-destructive:not(:disabled):active {
background: unset;
color: var(--ooui--button-color);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.mw-ui-button.mw-ui-quiet:disabled,
.mw-ui-button.mw-ui-quiet:disabled:hover,
.mw-ui-button.mw-ui-quiet:disabled:active,
.mw-ui-button.mw-ui-quiet.mw-ui-progressive:disabled,
.mw-ui-button.mw-ui-quiet.mw-ui-progressive:disabled:hover,
.mw-ui-button.mw-ui-quiet.mw-ui-progressive:disabled:active,
.mw-ui-button.mw-ui-quiet.mw-ui-destructive:disabled,
.mw-ui-button.mw-ui-quiet.mw-ui-destructive:disabled:hover,
.mw-ui-button.mw-ui-quiet.mw-ui-destructive:disabled:active {
border-radius: 0;
background: unset;
color: var(--ooui--button-disabled-color);
border-width: 0;
box-shadow: none;
}
.mw-ui-button.mw-ui-progressive:not(:disabled) {
border-radius: 4px;
background: var(--ooui--button-background);
color: var(--ooui--button-progressive-color);
border-top: var(--ooui--button-border-top);
border-right: var(--ooui--button-border-right);
border-bottom: var(--ooui--button-border-bottom);
border-left: var(--ooui--button-border-left);
border-color: var(--ooui--button-progressive-primary-border-color);
}
.mw-ui-button.mw-ui-progressive:not(:disabled):hover {
background: var(--ooui--button-background--hover);
color: var(--ooui--button-progressive-color--hover);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
border-color: var(--ooui--button-progressive-primary-border-color--hover);
}
.mw-ui-button.mw-ui-progressive:not(:disabled):focus {
border-top: var(--ooui--button-border-top);
border-right: var(--ooui--button-border-right);
border-bottom: var(--ooui--button-border-bottom);
border-left: var(--ooui--button-border-left);
border-color: var(--ooui--button-progressive-primary-border-color);
box-shadow: var(--ooui--button-box-shadow),
var(--ooui--button-progressive-box-shadow--focus);
}
.mw-ui-button.mw-ui-progressive:not(:disabled):active {
background: var(--ooui--button-background);
color: var(--ooui--button-progressive-color);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
border-color: var(--ooui--button-progressive-primary-border-color);
}
.mw-ui-button.mw-ui-progressive:disabled {
background: var(--ooui--button-disabled-background);
color: var(--ooui--button-disabled-color);
border-top: var(--ooui--button-disabled-border-top);
border-right: var(--ooui--button-disabled-border-right);
border-bottom: var(--ooui--button-disabled-border-bottom);
border-left: var(--ooui--button-disabled-border-left);
}
.mw-ui-button.mw-ui-progressive.mw-ui-quiet:not(:disabled) {
color: var(--ooui--button-progressive-color);
}
.mw-ui-button.mw-ui-progressive.mw-ui-quiet:not(:disabled):hover {
color: var(--ooui--button-progressive-color--hover);
}
.mw-ui-button.mw-ui-progressive.mw-ui-quiet:not(:disabled):focus {
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
box-shadow: var(--ooui--button-box-shadow--focus);
}
.mw-ui-button.mw-ui-progressive.mw-ui-quiet:not(:disabled):active {
color: var(--ooui--button-progressive-color);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.mw-ui-button.mw-ui-destructive:not(:disabled) {
border-radius: 4px;
background: var(--ooui--button-background);
color: var(--ooui--button-destructive-color);
border-top: var(--ooui--button-border-top);
border-right: var(--ooui--button-border-right);
border-bottom: var(--ooui--button-border-bottom);
border-left: var(--ooui--button-border-left);
border-color: var(--ooui--button-destructive-primary-border-color);
}
.mw-ui-button.mw-ui-destructive:not(:disabled):hover {
background: var(--ooui--button-background--hover);
color: var(--ooui--button-destructive-color--hover);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
border-color: var(--ooui--button-destructive-primary-border-color--hover);
}
.mw-ui-button.mw-ui-destructive:not(:disabled):focus {
border-top: var(--ooui--button-border-top);
border-right: var(--ooui--button-border-right);
border-bottom: var(--ooui--button-border-bottom);
border-left: var(--ooui--button-border-left);
border-color: var(--ooui--button-destructive-primary-border-color);
box-shadow: var(--ooui--button-box-shadow),
var(--ooui--button-destructive-box-shadow--focus);
}
.mw-ui-button.mw-ui-destructive:not(:disabled):active {
background: var(--ooui--button-background);
color: var(--ooui--button-destructive-color);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
border-color: var(--ooui--button-destructive-primary-border-color);
}
.mw-ui-button.mw-ui-destructive:disabled {
background: var(--ooui--button-disabled-background);
color: var(--ooui--button-disabled-color);
border-top: var(--ooui--button-disabled-border-top);
border-right: var(--ooui--button-disabled-border-right);
border-bottom: var(--ooui--button-disabled-border-bottom);
border-left: var(--ooui--button-disabled-border-left);
}
.mw-ui-button.mw-ui-destructive.mw-ui-quiet:not(:disabled) {
color: var(--ooui--button-destructive-color);
}
.mw-ui-button.mw-ui-destructive.mw-ui-quiet:not(:disabled):hover {
color: var(--ooui--button-destructive-color--hover);
}
.mw-ui-button.mw-ui-destructive.mw-ui-quiet:not(:disabled):focus {
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
box-shadow: var(--ooui--button-box-shadow--focus);
}
.mw-ui-button.mw-ui-destructive.mw-ui-quiet:not(:disabled):active {
color: var(--ooui--button-destructive-color);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
input[type="submit"].mw-ui-button {
/* this is necessary because of a rule in base.scss */
color: var(--ooui--button-color);
}
/********* mediawiki.ui.checkbox *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.ui.checkbox/checkbox.less */
.mw-ui-checkbox [type="checkbox"] + label::before {
background-color: transparent;
border-color: var(--ooui--checkbox-border-color);
border-width: 2px;
}
.mw-ui-checkbox [type="checkbox"]:checked + label::before {
background-image: none;
background-size: 1em 1em;
}
.mw-ui-checkbox [type="checkbox"]:enabled + label::before {
border-color: var(--ooui--checkbox-border-color);
}
.mw-ui-checkbox [type="checkbox"]:enabled:focus + label::before {
border-color: var(--ooui--checkbox-border-color);
box-shadow: inset 0 0 0 1px var(--ooui--checkbox-box-shadow--focus);
outline: 0;
}
.mw-ui-checkbox [type="checkbox"]:enabled:hover + label::before {
border-color: var(--ooui--checkbox-border-color--hover);
}
.mw-ui-checkbox [type="checkbox"]:enabled:active + label::before {
background-color: var(--ooui--checkbox-border-color);
border-color: var(--ooui--checkbox-border-color);
box-shadow: none;
}
.mw-ui-checkbox [type="checkbox"]:enabled:checked + label::before {
background-color: transparent;
border-color: var(--ooui--checkbox-border-color);
border-width: 2px;
background-image: linear-gradient(transparent, transparent),
var(--ooui--checkbox-icon);
}
.mw-ui-checkbox [type="checkbox"]:enabled:checked:focus + label::before {
background-color: transparent;
border-color: var(--ooui--checkbox-border-color);
box-shadow: inset 0 0 0 1px var(--ooui--checkbox-box-shadow--focus);
}
.mw-ui-checkbox [type="checkbox"]:enabled:checked:hover + label::before {
background-color: transparent;
border-color: var(--ooui--checkbox-border-color--hover);
background-image: linear-gradient(transparent, transparent),
var(--ooui--checkbox-icon--hover);
}
.mw-ui-checkbox [type="checkbox"]:enabled:checked:active + label::before {
background-color: transparent;
border-color: var(--ooui--checkbox-border-color);
box-shadow: none;
}
.mw-ui-checkbox [type="checkbox"]:disabled + label::before {
background-color: var(--ooui--checkbox-disabled-background-color);
border-color: var(--ooui--checkbox-border-color);
background-image: linear-gradient(transparent, transparent),
var(--ooui--checkbox-icon);
}
/********* mediawiki.ui.icon *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.ui.icon/icons-2.less */
.mw-ui-icon-before::before {
filter: var(--ooui--icon-normal-filter);
}
/********* mediawiki.ui.input *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.ui.input/input.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.less/mediawiki.mixins.less */
.mw-ui-input::-webkit-input-placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.mw-ui-input:-ms-input-placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.mw-ui-input::-moz-placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.mw-ui-input::placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.mw-ui-input:not(:disabled) {
background-color: var(--ooui--textarea-background-color);
color: var(--theme-text-color);
border-color: var(--ooui--textarea-border-color);
}
.mw-ui-input:not(:disabled):hover {
border-color: var(--ooui--textarea-border-color--hover);
}
.mw-ui-input:not(:disabled):focus {
border-color: var(--ooui--textarea-border-color--focus);
box-shadow: none;
outline: 0;
}
.mw-ui-input:disabled {
background-color: var(--ooui--textarea-disabled-background-color);
-webkit-text-fill-color: var(--ooui--textarea-disabled-color);
color: var(--ooui--textarea-disabled-color);
text-shadow: none;
border-color: var(--ooui--textarea-disabled-border-color);
}
/********* mediawiki.widgets *********/
/********* mediawiki.widgets.CalendarWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less */
.mw-widget-calendarWidget {
border-color: var(--ooui--textarea-border-color);
}
.mw-widget-calendarWidget:focus {
border-color: var(--ooui--textarea-border-color--focus);
box-shadow: inset 0 0 0 1px var(--ooui--textarea-border-color--focus);
outline: 0;
}
.mw-widget-calendarWidget-day {
color: var(--theme-text-color);
}
.mw-widget-calendarWidget-day-heading {
color: var(--theme-text-color-em);
}
.mw-widget-calendarWidget-day-additional {
color: var(--oouihelper--disabled-lighter-transparent);
}
.mw-widget-calendarWidget-day-additional:hover {
color: var(--theme-text-color-em);
}
.mw-widget-calendarWidget-day-today {
border: 1px solid var(--oouihelper--progressive-transparent);
box-shadow: none;
}
.mw-widget-calendarWidget-item:hover {
background-color: var(--oouihelper--textinput-background-lighter);
color: var(--theme-text-color-em);
}
.mw-widget-calendarWidget-item-selected {
background-color: var(--oouihelper--textinput-background-darker);
color: var(--oouihelper--progressive);
}
/********* mediawiki.widgets.DateInputWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less */
.mw-widget-dateInputWidget-calendar {
background-color: var(--oouihelper--text-background);
box-shadow: none;
}
.mw-widget-dateInputWidget-calendar:focus {
box-shadow: inset 0 0 0 1px var(--ooui--textarea-border-color--focus);
}
.mw-widget-dateInputWidget-empty .mw-widget-dateInputWidget-handle {
color: var(--ooui--textarea-placeholder-color);
}
.mw-widget-dateInputWidget.oo-ui-flaggedElement-invalid
.mw-widget-dateInputWidget-handle {
border-color: var(--ooui--textarea-invalid-border-color);
}
.mw-widget-dateInputWidget.oo-ui-widget-enabled
.mw-widget-dateInputWidget-handle:hover {
border-color: var(--ooui--textarea-border-color--hover);
}
.mw-widget-dateInputWidget.oo-ui-widget-enabled
.oo-ui-inputWidget-input[readonly]:not(.oo-ui-pendingElement-pending)
~ .mw-widget-dateInputWidget-handle {
background-color: var(--ooui--textarea-readonly-background-color);
}
.mw-widget-dateInputWidget.oo-ui-widget-disabled
.mw-widget-dateInputWidget-handle {
background-color: var(--ooui--textarea-disabled-background-color);
-webkit-text-fill-color: var(--ooui--textarea-disabled-color);
color: var(--ooui--textarea-disabled-color);
text-shadow: none;
border-color: var(--ooui--textarea-disabled-border-color);
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.styles.less */
.mw-widget-dateInputWidget-handle {
background-color: var(--ooui--textarea-background-color);
color: var(--theme-text-color);
border-color: var(--ooui--textarea-border-color);
}
.mw-widget-dateInputWidget.oo-ui-widget-enabled
.mw-widget-dateInputWidget-handle {
box-shadow: none;
}
.mw-widget-dateInputWidget.oo-ui-widget-enabled
.mw-widget-dateInputWidget-handle:hover {
border-color: var(--ooui--textarea-border-color--hover);
}
.mw-widget-dateInputWidget.oo-ui-widget-enabled
.mw-widget-dateInputWidget-handle:focus {
outline: 0;
border-color: var(--ooui--textarea-border-color--focus);
box-shadow: inset 0 0 0 1px var(--ooui--textarea-border-color--focus);
}
/* --------------------------------------------------------------------------------
* ===================================== OOUI =====================================
* --------------------------------------------------------------------------------
* OOUI ([[mw:OOUI]]) is a library that is used by MediaWiki to provide "widgets,
* layouts, and windows". This includes various interface elements, like buttons,
* text input fields, checkboxes, radio buttons, etc. For instance, the entire
* form at the top of [[Special:AllPages]] consists of OOUI elements. See
* https://doc.wikimedia.org/oojs-ui/master/demos for a demo of almost everything
* OOUI provides. A local adaptation of that demo is at [[Terraria Wiki:OOUI demo]],
* where our custom OOUI styling can be tested out with the different themes.
*
* As with all of our customization of MediaWiki styling, the file structure and
* contents are kept as close to the original as possible, for easier maintainability.
* For OOUI, it is notable that the rules defined in the files in
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles
* usually only concern very basic styling, which we don't need to adjust. Instead,
* the more interesting styles with colors, border radii, etc. are defined in the files in
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui
*
* Only default OOUI styles (those from the links above) are customized here. Some
* other parts of MediaWiki like RCFilters ([[mw:RCFilters]]) and especially certain
* extensions also affect OOUI, but those styles belong in their respective files.
* -------------------------------------------------------------------------------- */
/********* OOUI: MessageDialog *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/dialogs/MessageDialog.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/windows.less */
.oo-ui-messageDialog-content > .oo-ui-window-foot {
outline-color: var(--ooui--dialog-border-color);
}
.oo-ui-messageDialog-title {
color: var(--theme-text-color);
}
.oo-ui-messageDialog-message {
color: var(--theme-text-color);
}
.oo-ui-messageDialog-actions
.oo-ui-actionWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive
.oo-ui-buttonElement-button:active {
background: var(--ooui--button-background);
}
.oo-ui-messageDialog-actions
.oo-ui-actionWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
.oo-ui-buttonElement-button:active {
background: var(--ooui--button-background);
}
.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
border-right-color: var(--ooui--dialog-border-color);
}
.oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget {
border-bottom-color: var(--ooui--dialog-border-color--lighter);
}
/********* OOUI: ProcessDialog *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/dialogs/ProcessDialog.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/windows.less */
.oo-ui-processDialog-content .oo-ui-window-head,
.oo-ui-processDialog-content .oo-ui-window-foot {
outline-color: var(--ooui--dialog-border-color--lighter);
}
.oo-ui-processDialog-actions-primary
.oo-ui-actionWidget
> .oo-ui-buttonElement-button {
border-left-color: var(--ooui--dialog-border-color--lighter);
}
.oo-ui-processDialog-actions-primary
.oo-ui-actionWidget:not(.oo-ui-flaggedElement-progressive):not(
.oo-ui-flaggedElement-destructive
)
> .oo-ui-buttonElement-button:hover,
.oo-ui-processDialog-actions-primary
.oo-ui-actionWidget:not(.oo-ui-flaggedElement-progressive):not(
.oo-ui-flaggedElement-destructive
)
> .oo-ui-buttonElement-button:active {
border-left-color: var(--ooui--dialog-border-color--lighter);
}
.oo-ui-processDialog-actions-primary
.oo-ui-actionWidget:not(.oo-ui-flaggedElement-progressive):not(
.oo-ui-flaggedElement-destructive
)
> .oo-ui-buttonElement-button:focus {
border-color: var(--ooui--button-progressive-primary-border-color);
}
.oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
> .oo-ui-buttonElement-button,
.oo-ui-processDialog-actions-other
.oo-ui-actionWidget
> .oo-ui-buttonElement-button {
border-right-color: var(--ooui--dialog-border-color--lighter);
}
.oo-ui-processDialog-actions-safe
.oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement)
> .oo-ui-buttonElement-button:hover {
background: var(--ooui--button-background--hover);
border-right: var(--ooui--button-border-right--hover);
}
.oo-ui-processDialog-actions-safe
.oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement)
> .oo-ui-buttonElement-button:active {
background: var(--ooui--button-background);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-processDialog-actions-safe
.oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement)
> .oo-ui-buttonElement-button:focus {
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
/********* OOUI: ButtonElement *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/elements/ButtonElement.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/elements.less */
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled
> .oo-ui-buttonElement-button {
color: var(--ooui--button-color);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled
> .oo-ui-buttonElement-button:hover {
background-color: unset;
color: var(--ooui--button-color--hover);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled
> .oo-ui-buttonElement-button:focus {
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
box-shadow: var(--ooui--button-box-shadow--focus);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-buttonElement-pressed
> input.oo-ui-buttonElement-button,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled
> .oo-ui-buttonElement-button:active {
background-color: unset;
color: var(--ooui--button-color);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button {
color: var(--ooui--button-progressive-color);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button:hover {
color: var(--ooui--button-progressive-color--hover);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed
> .oo-ui-buttonElement-button {
color: var(--ooui--button-progressive-color);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button {
color: var(--ooui--button-destructive-color);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button:hover {
color: var(--ooui--button-destructive-color--hover);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed
> .oo-ui-buttonElement-button {
color: var(--ooui--button-destructive-color);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-disabled
> .oo-ui-buttonElement-button {
color: var(--ooui--button-disabled-color);
}
.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
border-radius: 4px;
}
.oo-ui-buttonElement-framed.oo-ui-widget-disabled
> .oo-ui-buttonElement-button {
background: var(--ooui--button-disabled-background);
color: var(--ooui--button-disabled-color);
border-top: var(--ooui--button-disabled-border-top);
border-right: var(--ooui--button-disabled-border-right);
border-bottom: var(--ooui--button-disabled-border-bottom);
border-left: var(--ooui--button-disabled-border-left);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background: var(--ooui--button-background);
color: var(--ooui--button-color);
border-top: var(--ooui--button-border-top);
border-right: var(--ooui--button-border-right);
border-bottom: var(--ooui--button-border-bottom);
border-left: var(--ooui--button-border-left);
box-shadow: var(--ooui--button-box-shadow);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled
> .oo-ui-buttonElement-button:hover {
background: var(--ooui--button-background--hover);
color: var(--ooui--button-color--hover);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled
> .oo-ui-buttonElement-button:focus {
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
box-shadow: var(--ooui--button-box-shadow),
var(--ooui--button-box-shadow--focus);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active
> .oo-ui-buttonElement-button {
background: var(--ooui--button-background--hover);
color: var(--ooui--button-progressive-color);
border-color: var(--ooui--button-progressive-primary-border-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active
> .oo-ui-buttonElement-button:focus {
border-color: var(--ooui--button-progressive-primary-border-color);
box-shadow: var(--ooui--button-box-shadow),
var(--ooui--button-progressive-box-shadow--focus);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled
> .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed
> .oo-ui-buttonElement-button {
background: var(--ooui--button-background);
color: var(--ooui--button-color);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button {
color: var(--ooui--button-progressive-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button:hover {
color: var(--ooui--button-progressive-color--hover);
background: var(--ooui--button-background--hover);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button:focus {
border-top: var(--ooui--button-border-top);
border-right: var(--ooui--button-border-right);
border-bottom: var(--ooui--button-border-bottom);
border-left: var(--ooui--button-border-left);
box-shadow: var(--ooui--button-box-shadow),
var(--ooui--button-progressive-box-shadow--focus);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed
> .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active
> .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active
> .oo-ui-buttonElement-button {
background: var(--ooui--button-background);
color: var(--ooui--button-progressive-color);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button {
color: var(--ooui--button-destructive-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button:hover {
color: var(--ooui--button-destructive-color--hover);
background: var(--ooui--button-background--hover);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button:focus {
border-top: var(--ooui--button-border-top);
border-right: var(--ooui--button-border-right);
border-bottom: var(--ooui--button-border-bottom);
border-left: var(--ooui--button-border-left);
box-shadow: var(--ooui--button-box-shadow),
var(--ooui--button-destructive-box-shadow--focus);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed
> .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-active
> .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active
> .oo-ui-buttonElement-button {
background: var(--ooui--button-background);
color: var(--ooui--button-destructive-color);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button {
color: var(--ooui--button-progressive-color);
background: var(--ooui--button-background);
border-color: var(--ooui--button-progressive-primary-border-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button:hover {
color: var(--ooui--button-progressive-color--hover);
background: var(--ooui--button-background--hover);
border-color: var(--ooui--button-progressive-primary-border-color--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button:focus {
border-color: var(--ooui--button-progressive-primary-border-color);
box-shadow: var(--ooui--button-box-shadow),
var(--ooui--button-progressive-box-shadow--focus);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed
> .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active
> .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active
> .oo-ui-buttonElement-button {
color: var(--ooui--button-progressive-color);
background: var(--ooui--button-background);
border-color: var(--ooui--button-progressive-primary-border-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button {
color: var(--ooui--button-destructive-color);
background: var(--ooui--button-background);
border-color: var(--ooui--button-destructive-primary-border-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button:hover {
color: var(--ooui--button-destructive-color--hover);
background: var(--ooui--button-background--hover);
border-color: var(--ooui--button-destructive-primary-border-color--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button:focus {
border-color: var(--ooui--button-destructive-primary-border-color);
box-shadow: var(--ooui--button-box-shadow),
var(--ooui--button-destructive-box-shadow--focus);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed
> .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-active
> .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active
> .oo-ui-buttonElement-button {
color: var(--ooui--button-destructive-color);
background: var(--ooui--button-background);
border-color: var(--ooui--button-destructive-primary-border-color);
}
/********* OOUI: PendingElement *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/elements/PendingElement.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/elements.less */
.oo-ui-pendingElement-pending {
background-color: var(--ooui--textarea-pending-background-color-1);
background-image: linear-gradient(
135deg,
var(--ooui--textarea-pending-background-color-2) 25%,
transparent 25%,
transparent 50%,
var(--ooui--textarea-pending-background-color-2) 50%,
var(--ooui--textarea-pending-background-color-2) 75%,
transparent 75%,
transparent
);
}
/********* OOUI: icons *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/elements/IconElement.less */
.oo-ui-iconElement-icon {
filter: var(--ooui--icon-normal-filter);
}
/* the six "icon variants" invert/progressive/destructive/error/warning/success are defined in icons-*.json in this directory:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/
* but the colors are set to the same values in every file:
* invert: #fff
* progressive: #36c
* destructive #d33
* error #d33
* warning #edab00
* success #14866d */
.oo-ui-iconElement-icon.oo-ui-image-invert {
filter: var(--ooui--icon-invert-filter);
}
.oo-ui-iconElement-icon.oo-ui-image-progressive {
filter: var(--ooui--icon-progressive-filter);
}
.oo-ui-iconElement-icon.oo-ui-image-destructive {
filter: var(--ooui--icon-destructive-filter);
}
.oo-ui-iconElement-icon.oo-ui-image-error {
filter: var(--ooui--icon-error-filter);
}
.oo-ui-iconElement-icon.oo-ui-image-warning {
filter: var(--ooui--icon-warning-filter);
}
.oo-ui-iconElement-icon.oo-ui-image-success {
filter: var(--ooui--icon-success-filter);
}
/********* OOUI: indicators *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/indicators.json */
.oo-ui-indicator-clear {
filter: var(--ooui--indicator-filter);
}
.oo-ui-image-invert.oo-ui-indicator-clear {
filter: var(--ooui--indicator-invert-filter);
}
.oo-ui-indicator-up {
filter: var(--ooui--indicator-filter);
}
.oo-ui-image-invert.oo-ui-indicator-up {
filter: var(--ooui--indicator-invert-filter);
}
.oo-ui-indicator-down {
filter: var(--ooui--indicator-filter);
}
.oo-ui-image-invert.oo-ui-indicator-down {
filter: var(--ooui--indicator-invert-filter);
}
.oo-ui-indicator-required {
filter: var(--ooui--indicator-filter);
}
.oo-ui-image-invert.oo-ui-indicator-required {
filter: var(--ooui--indicator-invert-filter);
}
/********* OOUI: BookletLayout *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/layouts/BookletLayout.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/layouts.less */
.oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
border-top-color: var(--ooui--bookletlayout-border-color);
}
.oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
border-right-color: var(--ooui--bookletlayout-border-color);
}
/********* OOUI: FieldLayout *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/layouts/FieldLayout.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/layouts.less */
.oo-ui-fieldLayout-disabled
> .oo-ui-fieldLayout-body
> .oo-ui-fieldLayout-header
> .oo-ui-labelElement-label {
color: var(--ooui--dropdown-disabled-color);
}
/********* OOUI: PanelLayout *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/layouts/PanelLayout.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/layouts.less */
.oo-ui-panelLayout-framed {
border-color: var(--ooui--panellayout-border-color);
}
/********* OOUI: ButtonGroupWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/ButtonGroupWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-buttonGroupWidget
.oo-ui-buttonElement-framed.oo-ui-widget-disabled
+ .oo-ui-widget-disabled
> .oo-ui-buttonElement-button {
border-left-color: var(--ooui--button-disabled-border-left);
}
.oo-ui-buttonGroupWidget.oo-ui-widget-enabled
.oo-ui-buttonElement.oo-ui-toggleWidget-on
+ .oo-ui-toggleWidget-on
> .oo-ui-buttonElement-button,
.oo-ui-buttonGroupWidget.oo-ui-widget-enabled
.oo-ui-buttonElement.oo-ui-toggleWidget-on
+ .oo-ui-toggleWidget-on
> .oo-ui-buttonElement-button:active {
border-left-color: var(--ooui--button-border-left);
}
/********* OOUI: ButtonSelectWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/ButtonSelectWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-buttonSelectWidget
.oo-ui-buttonOptionWidget.oo-ui-widget-disabled
+ .oo-ui-widget-disabled
> .oo-ui-buttonElement-button {
border-left: var(--ooui--button-disabled-border-left);
}
.oo-ui-buttonSelectWidget.oo-ui-widget-enabled:focus
.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected
.oo-ui-buttonElement-button {
border-color: var(--ooui--button-progressive-primary-border-color);
box-shadow: var(--ooui--button-box-shadow),
var(--ooui--button-progressive-box-shadow--focus);
}
/********* OOUI: CheckboxInputWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/CheckboxInputWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-checkboxInputWidget [type="checkbox"] + span {
background-color: transparent;
border-color: var(--ooui--checkbox-border-color);
border-width: 2px;
filter: none;
}
.oo-ui-checkboxInputWidget [type="checkbox"]:indeterminate + span::before {
background-color: var(--ooui--checkbox-border-color);
}
.oo-ui-checkboxInputWidget [type="checkbox"]:disabled + span {
background-color: var(--ooui--checkbox-disabled-background-color);
border-color: var(--ooui--checkbox-border-color);
background-image: linear-gradient(transparent, transparent),
var(--ooui--checkbox-icon);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:focus + span {
border-color: var(--ooui--checkbox-border-color);
box-shadow: inset 0 0 0 1px var(--ooui--checkbox-box-shadow--focus);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:hover + span {
border-color: var(--ooui--checkbox-border-color--hover);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
[type="checkbox"]:active
+ span {
background-color: var(--ooui--checkbox-border-color);
border-color: var(--ooui--checkbox-border-color);
box-shadow: none;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
[type="checkbox"]:checked
+ span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
[type="checkbox"]:indeterminate
+ span {
background-color: transparent;
border-color: var(--ooui--checkbox-border-color);
border-width: 2px;
background-image: linear-gradient(transparent, transparent),
var(--ooui--checkbox-icon);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
[type="checkbox"]:checked:focus
+ span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
[type="checkbox"]:indeterminate:focus
+ span {
background-color: transparent;
border-color: var(--ooui--checkbox-border-color);
box-shadow: inset 0 0 0 1px var(--ooui--checkbox-box-shadow--focus);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
[type="checkbox"]:checked:hover
+ span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
[type="checkbox"]:indeterminate:hover
+ span {
background-color: transparent;
border-color: var(--ooui--checkbox-border-color--hover);
background-image: linear-gradient(transparent, transparent),
var(--ooui--checkbox-icon--hover);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
[type="checkbox"]:checked:active
+ span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
[type="checkbox"]:indeterminate:active
+ span {
background-color: transparent;
border-color: var(--ooui--checkbox-border-color);
box-shadow: none;
}
/********* OOUI: DropdownInputWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/DropdownInputWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-dropdownInputWidget select {
border-color: var(--ooui--dropdown-border-color);
}
.oo-ui-dropdownInputWidget option {
color: initial;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
background-color: transparent;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover {
background-color: transparent;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select {
color: var(--theme-text-color);
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover {
color: var(--theme-text-color);
border-color: transparent;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:active {
color: var(--theme-text-color);
border-color: transparent;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:focus {
border-color: transparent;
box-shadow: none;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-disabled {
background-color: transparent;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-disabled select {
color: var(--ooui--dropdown-disabled-color);
border-color: transparent;
}
/********* OOUI: DropdownWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/DropdownWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-dropdownWidget-handle {
border-color: var(--ooui--dropdown-border-color);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
background-color: var(--ooui--dropdown-background-color);
color: var(--theme-text-color);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
background-color: var(--ooui--dropdown-background-color--hover);
color: var(--theme-text-color);
border-color: var(--ooui--dropdown-border-color--hover);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:active {
color: var(--theme-text-color);
border-color: var(--ooui--dropdown-border-color--hover);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
border-color: var(--ooui--dropdown-border-color--focus);
box-shadow: inset 0 0 0 1px var(--ooui--dropdown-border-color--focus);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open
.oo-ui-dropdownWidget-handle {
background-color: var(--ooui--dropdown-background-color);
}
.oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle {
color: var(--ooui--dropdown-disabled-color);
text-shadow: none;
border-color: var(--ooui--dropdown-disabled-border-color);
background-color: var(--ooui--dropdown-disabled-background-color);
}
/********* OOUI: LabelWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/LabelWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-labelWidget.oo-ui-inline-help {
color: var(--ooui--inlinehelp-color);
}
/********* OOUI: MenuOptionWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/MenuOptionWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
background-color: var(--ooui--menuselect-highlighted-background-color);
color: var(--theme-text-color);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
background-color: var(--ooui--menuselect-selected-background-color);
color: var(--theme-text-color);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
background-color: var(--ooui--menuselect-selected-background-color);
color: var(--theme-link-color);
}
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
color: var(--theme-text-color);
}
/********* OOUI: MenuSectionOptionWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/MenuSectionOptionWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-menuSectionOptionWidget {
color: var(--ooui--menusectionoption-color);
}
/********* OOUI: MenuSelectWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/MenuSelectWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-menuSelectWidget {
background-color: var(--ooui--menuselect-background-color);
border-color: var(--ooui--menuselect-border-color);
}
/********* OOUI: MessageWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/MessageWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error {
background-color: var(--ooui--messagewidget-error-background-color);
border-color: var(--ooui--messagewidget-error-border-color);
}
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
background-color: var(--ooui--messagewidget-warning-background-color);
border-color: var(--ooui--messagewidget-warning-border-color);
}
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
background-color: var(--ooui--messagewidget-success-background-color);
border-color: var(--ooui--messagewidget-success-border-color);
}
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice {
background-color: var(--ooui--messagewidget-notice-background-color);
border-color: var(--ooui--messagewidget-notice-border-color);
}
.oo-ui-messageWidget.oo-ui-flaggedElement-error:not(
.oo-ui-messageWidget-block
) {
color: var(--ooui--messagewidget-error-color);
}
.oo-ui-messageWidget.oo-ui-flaggedElement-success:not(
.oo-ui-messageWidget-block
) {
color: var(--ooui--messagewidget-success-color);
}
/********* OOUI: MultioptionWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/MultioptionWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-multioptionWidget.oo-ui-widget-disabled {
color: var(--ooui--multioption-disabled-color);
}
/********* OOUI: OptionWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/OptionWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-optionWidget.oo-ui-widget-disabled {
color: var(--ooui--disabled-color);
}
/********* OOUI: OutlineOptionWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/OutlineOptionWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
background-color: var(--ooui--outlineoption-highlighted-background-color);
color: var(--theme-text-color);
}
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
background-color: var(--ooui--outlineoption-selected-background-color);
color: var(--theme-text-color);
}
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed {
background-color: var(--ooui--outlineoption-pressed-background-color);
color: var(--theme-link-color);
}
/********* OOUI: OutlineSelectWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/OutlineSelectWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-outlineSelectWidget:focus {
box-shadow: var(--ooui--outlineselect-box-shadow--focus);
}
/********* OOUI: PopupWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/PopupWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-popupWidget-popup {
background-color: var(--ooui--popup-background-color);
border-color: var(--ooui--popup-border-color);
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before {
border-bottom-color: var(--ooui--popup-border-color);
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::after {
border-bottom-color: var(--ooui--popup-background-color);
}
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::before {
border-top-color: var(--ooui--popup-border-color);
}
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::after {
border-top-color: var(--ooui--popup-background-color);
}
.oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor::before {
border-right-color: var(--ooui--popup-border-color);
}
.oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor::after {
border-right-color: var(--ooui--popup-background-color);
}
.oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor::before {
border-left-color: var(--ooui--popup-border-color);
}
.oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor::after {
border-left-color: var(--ooui--popup-background-color);
}
/********* OOUI: ProgressBarWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/ProgressBarWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-progressBarWidget {
border-color: var(--ooui--progressbar-border-color);
}
.oo-ui-progressBarWidget:not(.oo-ui-pendingElement-pending) {
background-color: transparent;
}
.oo-ui-progressBarWidget.oo-ui-widget-enabled .oo-ui-progressBarWidget-bar {
background-color: var(--ooui--progressbar-bar-background-color);
}
.oo-ui-progressBarWidget.oo-ui-widget-disabled .oo-ui-progressBarWidget-bar {
background-color: var(--ooui--progressbar-disabled-border-color);
}
.oo-ui-progressBarWidget.oo-ui-pendingElement-pending {
background-color: var(--ooui--progressbar-pending-background-color-1);
background-image: linear-gradient(
135deg,
var(--ooui--progressbar-pending-background-color-2) 25%,
transparent 25%,
transparent 50%,
var(--ooui--progressbar-pending-background-color-2) 50%,
var(--ooui--progressbar-pending-background-color-2) 75%,
transparent 75%,
transparent
);
}
/********* OOUI: RadioInputWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/RadioInputWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-radioInputWidget [type="radio"] + span {
background-color: transparent;
border-color: var(--ooui--radiobutton-border-color);
border-width: 3px;
}
.oo-ui-radioInputWidget [type="radio"] + span::before {
top: 2.5px;
left: 2.5px;
right: 2.5px;
bottom: 2.5px;
}
.oo-ui-radioInputWidget [type="radio"]:checked + span,
.oo-ui-radioInputWidget [type="radio"]:checked:hover + span,
.oo-ui-radioInputWidget [type="radio"]:checked:focus:hover + span {
border-width: 3px;
}
.oo-ui-radioInputWidget [type="radio"]:checked + span:before,
.oo-ui-radioInputWidget [type="radio"]:checked:hover + span:before,
.oo-ui-radioInputWidget [type="radio"]:checked:focus:hover + span:before {
background-color: var(--ooui--radiobutton-border-color);
}
.oo-ui-radioInputWidget [type="radio"]:disabled + span {
background-color: var(--ooui--radiobutton-disabled-background-color);
border-color: var(--ooui--radiobutton-border-color);
}
.oo-ui-radioInputWidget [type="radio"]:disabled:checked + span {
background-color: var(--ooui--radiobutton-disabled-background-color);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:hover + span {
border-color: var(--ooui--radiobutton-border-color--hover);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:active + span {
background-color: var(--ooui--radiobutton-border-color);
border-color: var(--ooui--radiobutton-border-color);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:checked + span {
border-color: var(--ooui--radiobutton-border-color);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled
[type="radio"]:checked:focus
+ span {
box-shadow: inset 0 0 0 1px var(--ooui--radiobutton-box-shadow--focus);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled
[type="radio"]:checked:focus
+ span::before {
border-color: transparent;
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled
[type="radio"]:checked:hover
+ span {
border-color: var(--ooui--radiobutton-border-color--hover);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled
[type="radio"]:checked:active
+ span {
border-color: var(--ooui--radiobutton-border-color);
box-shadow: inset 0 0 0 1px var(--ooui--radiobutton-box-shadow--focus);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled
[type="radio"]:checked:active
+ span::before {
border-color: transparent;
}
/********* OOUI: RadioSelectWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/RadioSelectWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-radioSelectWidget:focus [type="radio"]:checked + span::before {
border-color: transparent;
}
/********* OOUI: SelectFileWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/SelectFileWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-selectFileWidget-dropTarget {
background-color: var(--ooui--selectfile-background-color);
border: 1px solid var(--ooui--selectfile-border-color);
}
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget {
background-color: var(--ooui--selectfile-background-color);
}
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget:hover {
border-color: var(--ooui--selectfile-border-color);
}
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop.oo-ui-selectFileWidget-dropTarget,
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop
.oo-ui-selectFileInputWidget-info
> .oo-ui-inputWidget-input {
background-color: var(--ooui--selectfile-candrop-background-color);
color: var(--theme-link-color);
}
.oo-ui-selectFileWidget.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
.oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget {
background-color: var(--ooui--textarea-disabled-background-color);
border-color: var(--ooui--selectfile-border-color);
}
/********* OOUI: TabOptionWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/TabOptionWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-tabOptionWidget {
color: var(--ooui--taboption-color);
}
.oo-ui-tabSelectWidget-framed
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
background-color: var(--ooui--tabselect-selected-background-color);
color: var(--theme-text-color);
}
.oo-ui-tabSelectWidget-framed
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected
.oo-ui-labelElement-label {
border-bottom-color: var(--ooui--tabselect-selected-background-color);
}
.oo-ui-tabSelectWidget-framed
.oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
background-color: var(--ooui--tabselect-highlighted-background-color);
color: var(--theme-text-color);
}
.oo-ui-tabSelectWidget-framed
.oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
background-color: var(--ooui--tabselect-selected-background-color);
color: var(--theme-text-color);
}
.oo-ui-tabSelectWidget-framed
.oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
background-color: var(--ooui--tabselect-selected-background-color);
}
.oo-ui-tabSelectWidget-framed.oo-ui-widget-enabled:focus
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected
.oo-ui-labelElement-label {
border-bottom-color: var(--theme-text-color);
}
.oo-ui-tabSelectWidget-frameless
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
color: var(--ooui--tabselect-frameless-selected-color);
box-shadow: inset 0 -2px 0 0 var(--ooui--tabselect-frameless-selected-box-shadow-color);
}
.oo-ui-tabSelectWidget-frameless
.oo-ui-tabOptionWidget.oo-ui-widget-enabled:not(
.oo-ui-optionWidget-selected
):hover {
color: var(--ooui--tabselect-frameless-highlighted-color);
box-shadow: inset 0 -2px 0 0 var(--ooui--tabselect-frameless-highlighted-color);
}
.oo-ui-tabSelectWidget-frameless
.oo-ui-tabOptionWidget.oo-ui-widget-enabled:not(
.oo-ui-optionWidget-selected
):active {
color: var(--ooui--tabselect-frameless-selected-color);
box-shadow: inset 0 -2px 0 0 var(--ooui--tabselect-frameless-selected-color);
}
.oo-ui-tabSelectWidget-frameless.oo-ui-widget-enabled:focus
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
box-shadow: inset 0 0 0 2px
var(--ooui--tabselect-frameless-selected-box-shadow-color);
}
/********* OOUI: TabSelectWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/TabSelectWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-tabSelectWidget-framed {
background-color: var(--ooui--tabselect-background-color);
}
.oo-ui-tabSelectWidget-frameless {
box-shadow: inset 0 -1px 0 0 var(--ooui--tabselect-frameless-box-shadow-color);
}
/********* OOUI: TagItemWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/TagItemWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-tagItemWidget {
border-color: var(--ooui--tagitem-border-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled {
color: var(--theme-text-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled:hover {
background-color: var(--ooui--tagitem-background-color);
color: var(--ooui--tagitem-color--hover);
border-color: var(--ooui--tagitem-border-color--hover);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled:focus {
border-color: var(--ooui--tagitem-border-color--focus);
box-shadow: inset 0 0 0 1px var(--ooui--tagitem-border-color--focus);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled:not(.oo-ui-tagItemWidget-fixed) {
background-color: var(--ooui--tagitem-background-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid {
border-color: var(--ooui--tagitem-invalid-border-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:hover {
border-color: var(--ooui--tagitem-invalid-border-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:focus {
border-color: var(--ooui--tagitem-invalid-border-color);
box-shadow: inset 0 0 0 1px var(--ooui--tagitem-invalid-border-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
background-color: var(--ooui--textarea-background-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:focus {
border: 0;
box-shadow: none;
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:active {
background-color: var(--ooui--tagitem-border-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-disabled {
background-color: var(--ooui--tagitem-disabled-background-color);
color: var(--ooui--tagitem-disabled-color);
border-color: var(--ooui--tagitem-disabled-border-color);
text-shadow: none;
}
/********* OOUI: TagMultiselectWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/TagMultiselectWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-tagMultiselectWidget-handle {
border: 1px solid var(--ooui--textarea-border-color);
}
.oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input {
color: var(--theme-text-color);
}
.oo-ui-tagMultiselectWidget-handle
.oo-ui-tagMultiselectWidget-group
> input::-webkit-input-placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-tagMultiselectWidget-handle
.oo-ui-tagMultiselectWidget-group
> input:-ms-input-placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-tagMultiselectWidget-handle
.oo-ui-tagMultiselectWidget-group
> input::-moz-placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-tagMultiselectWidget-handle
.oo-ui-tagMultiselectWidget-group
> input::placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--ooui--textarea-readonly-background-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled {
background-color: var(--ooui--textarea-background-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover
.oo-ui-tagMultiselectWidget-handle {
border-color: var(--ooui--textarea-border-color--hover);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-tagMultiselectWidget-focus
.oo-ui-tagMultiselectWidget-handle {
border-color: var(--ooui--textarea-border-color--focus);
box-shadow: inset 0 0 0 1px var(--ooui--textarea-border-color--focus);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid
.oo-ui-tagMultiselectWidget-handle,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid:hover
.oo-ui-tagMultiselectWidget-handle {
border-color: var(--ooui--textarea-invalid-border-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
background-color: var(--ooui--textarea-readonly-background-color);
background-color: transparent;
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined
.oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: var(--ooui--tagitem-background-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined.oo-ui-flaggedElement-invalid
.oo-ui-inputWidget-input {
border-color: var(--ooui--textarea-invalid-border-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid
.oo-ui-inputWidget-input {
color: var(--ooui--textarea-invalid-border-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-disabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--ooui--textarea-disabled-background-color);
color: var(--ooui--textarea-disabled-color);
text-shadow: none;
border-color: var(--ooui--textarea-disabled-border-color);
}
/********* OOUI: TextInputWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/TextInputWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--ooui--textarea-background-color);
color: var(--theme-text-color);
border-color: var(--ooui--textarea-border-color);
}
.oo-ui-textInputWidget .oo-ui-pendingElement-pending {
background-color: var(--ooui--textarea-pending-background-color-1);
}
.oo-ui-textInputWidget > .oo-ui-labelElement-label {
color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled
.oo-ui-inputWidget-input::-webkit-input-placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled
.oo-ui-inputWidget-input:-ms-input-placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled
.oo-ui-inputWidget-input::-moz-placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled
.oo-ui-inputWidget-input::placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus {
border-color: var(--ooui--textarea-border-color--focus);
box-shadow: inset 0 0 0 1px var(--ooui--textarea-border-color--focus);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled
.oo-ui-inputWidget-input[readonly]:not(.oo-ui-pendingElement-pending) {
background-color: var(--ooui--textarea-readonly-background-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
border-color: var(--ooui--textarea-border-color--hover);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover
.oo-ui-inputWidget-input:focus {
border-color: var(--ooui--textarea-border-color--focus);
}
@media screen and (min-width: 0) {
.oo-ui-textInputWidget.oo-ui-widget-enabled
textarea.oo-ui-inputWidget-input:focus {
outline-color: var(--ooui--textarea-border-color--focus);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid
textarea.oo-ui-inputWidget-input:focus {
outline-color: var(--ooui--textarea-invalid-border-color);
}
}
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid
.oo-ui-inputWidget-input {
border-color: var(--ooui--textarea-invalid-border-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid
.oo-ui-inputWidget-input:hover {
border-color: var(--ooui--textarea-invalid-border-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid
.oo-ui-inputWidget-input:focus {
border-color: var(--ooui--textarea-invalid-border-color);
box-shadow: inset 0 0 0 1px var(--ooui--textarea-invalid-border-color);
}
.oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-inputWidget-input {
background-color: var(--ooui--textarea-disabled-background-color);
-webkit-text-fill-color: var(--ooui--textarea-disabled-color);
color: var(--ooui--textarea-disabled-color);
text-shadow: none;
border-color: var(--ooui--textarea-disabled-border-color);
}
.oo-ui-textInputWidget.oo-ui-widget-disabled > .oo-ui-labelElement-label {
color: var(--ooui--textarea-placeholder-color);
text-shadow: none;
}
/********* OOUI: ToggleButtonWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/ToggleButtonWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on
.oo-ui-buttonElement-button {
background-color: transparent;
color: var(--ooui--button-frameless-on-color);
}
/********* OOUI: ToggleSwitchWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/ToggleSwitchWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-toggleSwitchWidget {
background-color: transparent;
border: 3px solid var(--ooui--toggleswitch-border-color);
}
.oo-ui-toggleSwitchWidget-grip {
top: 0.2142857143em;
}
.oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
left: 1.7142857143em;
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip {
background-color: transparent;
border: 3px solid var(--ooui--toggleswitch-border-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
background-color: transparent;
border-color: var(--ooui--toggleswitch-border-color--hover);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover
.oo-ui-toggleSwitchWidget-grip {
background-color: transparent;
border-color: var(--ooui--toggleswitch-border-color--hover);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active,
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover,
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus {
background-color: var(--ooui--toggleswitch-color--active);
border-color: var(--ooui--toggleswitch-color--active);
box-shadow: inset 0 0 0 1px var(--ooui--toggleswitch-color--active);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active
.oo-ui-toggleSwitchWidget-grip,
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover
.oo-ui-toggleSwitchWidget-grip,
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus
.oo-ui-toggleSwitchWidget-grip {
background-color: var(--ooui--toggleswitch-grip-color);
border-color: var(--ooui--toggleswitch-grip-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus {
border-color: var(--ooui--toggleswitch-border-color);
box-shadow: inset 0 0 0 1px var(--ooui--toggleswitch-box-shadow--focus);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus
.oo-ui-toggleSwitchWidget-grip {
border-color: var(--ooui--toggleswitch-border-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on {
background-color: var(--ooui--toggleswitch-border-color);
border-color: var(--ooui--toggleswitch-border-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on
.oo-ui-toggleSwitchWidget-grip {
background-color: var(--ooui--toggleswitch-grip-color);
border-color: var(--ooui--toggleswitch-grip-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover {
background-color: var(--ooui--toggleswitch-border-color--hover);
border-color: var(--ooui--toggleswitch-border-color--hover);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active,
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover {
background-color: var(--ooui--toggleswitch-color--active);
border-color: var(--ooui--toggleswitch-color--active);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus {
border-color: var(--ooui--toggleswitch-border-color);
box-shadow: none;
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus::before {
border-color: var(--ooui--toggleswitch-grip-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
background-color: var(--ooui--toggleswitch-disabled-background-color);
border-color: var(--ooui--toggleswitch-border-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-off
.oo-ui-toggleSwitchWidget-grip {
background-color: transparent;
border: 3px solid var(--ooui--toggleswitch-border-color);
box-shadow: none;
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-on
.oo-ui-toggleSwitchWidget-grip {
background-color: var(--ooui--toggleswitch-disabled-grip-color);
}
/********* OOUI: WindowManager *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/WindowManager.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/windows.less */
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
background-color: var(--ooui--window-background-color);
}
.oo-ui-windowManager-modal.oo-ui-windowManager-floating
> .oo-ui-dialog
> .oo-ui-window-frame {
border-color: var(--ooui--window-border-color);
}
/* -------------------------------------------------------------------------------- */
/********* RCFilters *********/
/* Filtering interface at the top of [[Special:RecentChanges]], [[Special:Watchlist]], and [[Special:RelatedChanges]].
* For documentation of the project, see https://www.mediawiki.org/wiki/Edit_Review_Improvements/New_filters_for_edit_review */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less */
.client-js
.mw-recentchanges-toplinks:not(.mw-recentchanges-toplinks-collapsed) {
border-color: var(--ooui--dialog-border-color--lighter);
}
.client-js .mw-rcfilters-spinner .mw-rcfilters-spinner-bounce,
.client-js .mw-rcfilters-spinner:before,
.client-js .mw-rcfilters-spinner:after {
background-color: var(--ooui--checkbox-border-color);
}
/********* RCFilters: ChangesListWrapperWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less */
.mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator {
border-top-color: var(--oouihelper--disabled);
}
.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey
td:not(:nth-child(-n + 2)) {
background-color: var(--oouihelper--themerelated-disabled);
}
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background-color: var(--ooui--messagewidget-notice-background-color);
border-color: var(--ooui--messagewidget-notice-border-color);
}
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c1,
.mw-rcfilters-ui-changesListWrapperWidget
.mw-rcfilters-highlight-color-c1
tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget
tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-toplevel:not(
.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey
)
td:not(:nth-child(-n + 2)),
.mw-rcfilters-ui-changesListWrapperWidget
tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-nested:not(
.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey
)
td:not(:nth-child(-n + 4)) {
background-color: var(--theme-notice-blue-background-color);
}
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c2,
.mw-rcfilters-ui-changesListWrapperWidget
.mw-rcfilters-highlight-color-c2
tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget
tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-toplevel:not(
.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey
)
td:not(:nth-child(-n + 2)),
.mw-rcfilters-ui-changesListWrapperWidget
tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-nested:not(
.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey
)
td:not(:nth-child(-n + 4)) {
background-color: var(--theme-notice-green-background-color);
}
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c3,
.mw-rcfilters-ui-changesListWrapperWidget
.mw-rcfilters-highlight-color-c3
tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget
tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-toplevel:not(
.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey
)
td:not(:nth-child(-n + 2)),
.mw-rcfilters-ui-changesListWrapperWidget
tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-nested:not(
.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey
)
td:not(:nth-child(-n + 4)) {
background-color: var(--theme-notice-yellow-background-color);
}
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c4,
.mw-rcfilters-ui-changesListWrapperWidget
.mw-rcfilters-highlight-color-c4
tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget
tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-toplevel:not(
.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey
)
td:not(:nth-child(-n + 2)),
.mw-rcfilters-ui-changesListWrapperWidget
tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-nested:not(
.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey
)
td:not(:nth-child(-n + 4)) {
background-color: var(--theme-notice-orange-background-color);
}
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c5,
.mw-rcfilters-ui-changesListWrapperWidget
.mw-rcfilters-highlight-color-c5
tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget
tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-toplevel:not(
.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey
)
td:not(:nth-child(-n + 2)),
.mw-rcfilters-ui-changesListWrapperWidget
tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-nested:not(
.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey
)
td:not(:nth-child(-n + 4)) {
background-color: var(--theme-notice-red-background-color);
}
/* the mixing of two and more colors is impossible with CSS variables, unless of course each mixed color is hardcoded */
/********* RCFilters: DatePopupWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.DatePopupWidget.less */
.mw-rcfilters-ui-datePopupWidget {
border-top-color: var(--ooui--textarea-border-color);
}
.mw-rcfilters-ui-datePopupWidget .mw-rcfilters-ui-valuePickerWidget-title {
color: var(--theme-text-color-note);
}
/********* RCFilters: FilterItemHighlightButton *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less */
.oo-ui-buttonWidget.oo-ui-popupButtonWidget
.oo-ui-buttonElement-button
> .mw-rcfilters-ui-filterItemHighlightButton-circle {
/* override the rule from base OOUI where we apply a filter to all ".oo-ui-iconElement-icon"
* elements, which prevents this circle's color from being displayed properly */
filter: none;
}
/********* RCFilters: FilterMenuHeaderWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less */
.mw-rcfilters-ui-filterMenuHeaderWidget-title {
color: var(--theme-text-color);
}
.mw-rcfilters-ui-filterMenuHeaderWidget-header {
border-bottom-color: var(--ooui--textarea-border-color);
background-color: var(--ooui--textarea-readonly-background-color);
}
/********* RCFilters: FilterMenuOptionWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less */
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(
.oo-ui-optionWidget-selected
) {
background-color: transparent;
}
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted
.mw-rcfilters-ui-itemMenuOptionWidget-label-title,
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
color: var(--ooui--dropdown-disabled-color);
}
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted.oo-ui-optionWidget-highlighted {
background-color: var(--ooui--menuselect-highlighted-background-color);
color: var(--theme-text-color);
}
/********* RCFilters: FilterMenuSectionOptionWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less */
.mw-rcfilters-ui-filterMenuSectionOptionWidget {
background-color: var(--ooui--dropdown-disabled-background-color);
}
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label {
color: var(--ooui--dropdown-disabled-color);
}
/********* RCFilters: FilterTagMultiselectWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less */
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--ooui--textarea-readonly-background-color);
border-color: var(--ooui--textarea-border-color);
}
.mw-rcfilters-collapsed .mw-rcfilters-ui-filterTagMultiselectWidget {
border-bottom-color: var(--ooui--textarea-border-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled
.mw-rcfilters-ui-filterTagMultiselectWidget-emphasize.oo-ui-tagMultiselectWidget-handle {
background-color: var(--ooui--textarea-background-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
color: var(--theme-text-color-note);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle {
color: var(--theme-text-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
border-color: var(--ooui--textarea-border-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters {
color: var(--theme-text-color-note);
}
/********* RCFilters: FilterTagMultiselectWidgetMobile *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidgetMobile.less */
.mw-rcfilters-ui-filterTagMultiselectWidget-mobile
.oo-ui-tagMultiselectWidget-input.oo-ui-textInputWidget
input[readonly] {
background-color: var(--ooui--textarea-readonly-background-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-mobile
.oo-ui-tagMultiselectWidget-input.oo-ui-textInputWidget
input[readonly]::-webkit-input-placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-mobile
.oo-ui-tagMultiselectWidget-input.oo-ui-textInputWidget
input[readonly]:-ms-input-placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-mobile
.oo-ui-tagMultiselectWidget-input.oo-ui-textInputWidget
input[readonly]::-moz-placeholder {
color: var(--ooui--textarea-placeholder-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-mobile
.oo-ui-tagMultiselectWidget-input.oo-ui-textInputWidget
input[readonly]::placeholder {
color: var(--ooui--textarea-placeholder-color);
}
/********* RCFilters: HighlightColorPickerWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less */
.mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color
.oo-ui-iconElement-icon.oo-ui-icon-check {
/* Override the rule from base OOUI where we apply a filter to all ".oo-ui-iconElement-icon"
* elements. This is not necessary here because the six circles have the same color in all
* themes, so this checkmark needs to be the same in all themes as well. */
filter: none;
}
/********* RCFilters: ItemMenuOptionWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less */
.mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(
.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk
) {
border-bottom-color: var(--ooui--menuselect-border-color);
}
.mw-rcfilters-ui-itemMenuOptionWidget-view-namespaces {
border-top-width: 3px;
border-top-color: var(--ooui--menuselect-border-color);
}
.mw-rcfilters-ui-itemMenuOptionWidget:hover {
background-color: var(--ooui--menuselect-highlighted-background-color);
}
.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected {
background-color: var(--ooui--menuselect-selected-background-color);
}
.mw-rcfilters-ui-itemMenuOptionWidget-label-title {
color: var(--theme-text-color);
}
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
color: var(--theme-text-color-note);
}
.mw-rcfilters-ui-itemMenuOptionWidget-excludeLabel {
color: var(--theme-text-color-note);
}
/********* RCFilters: LiveUpdateButtonWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less */
.mw-rcfilters-ui-liveUpdateButtonWidget.oo-ui-toggleWidget-on:after {
background: rgba(var(--theme-link-color--rgb), 0.5);
}
/********* RCFilters: MenuSelectWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less */
.mw-rcfilters-ui-menuSelectWidget-noresults {
color: var(--theme-text-color-note);
}
.mw-rcfilters-ui-menuSelectWidget-footer {
background-color: var(--ooui--textarea-readonly-background-color);
border-top-color: var(--ooui--textarea-border-color);
}
/********* RCFilters: SavedLinksListItemWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less */
.mw-rcfilters-ui-savedLinksListItemWidget:hover {
/* Mimicking OOUI optionWidget styles */
background-color: var(--ooui--menuselect-highlighted-background-color);
color: var(--theme-text-color);
}
.mw-rcfilters-ui-savedLinksListItemWidget-label {
color: var(--theme-link-color);
}
/********* RCFilters: TagItemWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less */
.mw-rcfilters-ui-tagItemWidget.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: var(--ooui--tagitem-disabled-background-color);
border-color: var(--ooui--tagitem-disabled-border-color);
}
.mw-rcfilters-ui-tagItemWidget.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled
.oo-ui-labelElement-label {
color: var(--ooui--tagitem-disabled-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined
.mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: var(--ooui--tagitem-background-color);
border-color: var(--ooui--tagitem-border-color--focus);
}
.mw-rcfilters-ui-tagItemWidget-popup-content {
color: var(--theme-text-color-note);
}
/********* RCFilters: ViewSwitchWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less */
.mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget {
color: var(--theme-text-color);
}
/********* RCFilters: WatchlistTopSectionWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less */
.mw-rcfilters-ui-watchlistTopSectionWidget-separator {
border-top-color: var(--ooui--textarea-border-color);
}
/********* Pages with content model "JSON" *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.content.json.less */
.mw-json th,
.mw-json td {
border-color: var(--theme-box-border-color);
}
.mw-json tr {
background-color: transparent;
}
.mw-json th {
background-color: var(--theme-box-background);
}
.mw-json-value,
.mw-json-single-value {
background-color: var(--theme-highlight-background);
}
.mw-json-single-value {
background-color: var(--theme-highlight-background);
}
.mw-json-empty {
background-color: var(--theme-box-background);
}
/********* api.php *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.apipretty/apihelp.css */
.apihelp-flags {
border-color: var(--oouihelper--borderdark);
}
.apihelp-deprecated,
.apihelp-internal,
.apihelp-flag-deprecated,
.apihelp-flag-internal strong {
color: var(--theme-text-color-red);
}
.apihelp-unknown {
color: var(--theme-text-color-note);
}
.apihelp-empty {
color: var(--theme-text-color-note);
}
/* overwriting styles from the "apioutput" skin (can't find the base stylesheet) */
.skin-apioutput .mw-body {
background: var(--theme-content-background);
color: var(--theme-text-color);
margin: 20px;
padding: 10px;
}
/* Fix empty parameter descriptions having no height, causing misalignments that seriously impede readability */
.apihelp-parameters dd:empty::before {
content: " ";
}
/* Theme color for h3 headings */
.apihelp-header {
color: var(--theme-heading-color);
}
/********* ?action=history *********/
/* History pages */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.action/mediawiki.action.history.styles.less */
#pagehistory li.selected {
background-color: transparent;
color: inherit;
}
.updatedmarker {
background-color: var(--oouihelper--yellow);
}
/********* changeslist *********/
/* Special:Watchlist, Special:RecentChanges, etc. */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.special.changeslist/default.less */
/* Colored byte size change numbers */
.mw-plusminus-pos {
color: var(--theme-text-color-green);
}
.mw-plusminus-neg {
color: var(--theme-text-color-red);
}
.mw-plusminus-null {
color: var(--theme-text-color-note);
}
/* Colors in the "Legend" box for the non-JavaScript version of Special:RecentChanges
* (and to prevent a color flash for the JavaScript version) */
.mw-changeslist-legend {
background-color: var(--ooui--messagewidget-notice-background-color);
border-color: var(--ooui--messagewidget-notice-border-color);
}
/********* redirect *********/
/* Arrow on redirect pages */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.action/mediawiki.action.view.redirectPage.css */
/* In the default style, the icon is the background of the <li> element.
* We want to apply a filter to the image only (not the text), so we have to
* move the image to a new pseudo-element. */
.mw-content-ltr .redirectText li:first-child {
background: none;
padding-left: 0;
}
.mw-content-ltr .redirectText li:first-child:before {
content: "";
background: linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg);
padding-left: 47px;
filter: var(
--ooui--icon-normal-filter
); /* theme-dependent color of the icon */
}
/********* File: namespace *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.action/mediawiki.action.view.filepage.less */
#filetoc {
border-color: var(--theme-box-border-color);
background-color: var(--theme-highlight-background);
}
.mw_metadata td,
.mw_metadata th {
border-color: var(--theme-box-border-color);
/* overwrite our "table th, table td" rule and restore MediaWiki default */
padding-top: 0;
padding-bottom: 0;
}
.mw_metadata th {
background-color: var(--theme-box-background);
}
.mw_metadata td {
background-color: var(--theme-highlight-background);
}
/* space between the "Open in MediaViewer" button and page content
* (needs the ".fullMedia +" because "#mw-imagepage-content" is different on file
* page revision diffs) */
.fullMedia + #mw-imagepage-content {
margin-top: 1em;
}
/********* helpers *********/
/* Helper classes used across special pages and actions */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.interface.helpers.styles.less */
.unpatrolled {
color: var(--ooui--messagewidget-error-color);
}
.autocomment,
.autocomment a,
.autocomment a:visited {
color: var(--theme-text-color-note);
}
li span.deleted,
span.history-deleted {
color: var(--ooui--messagewidget-error-border-color);
}
/* "| contribs |" links for users with no edits, e.g. on Special:AbuseLog/x */
.mw-usertoollinks-contribs-no-edits,
.mw-usertoollinks-contribs-no-edits:visited {
color: var(--theme-link-color-redlink);
}
/********* ?action=edit *********/
/* Styles for elements of the editing form */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.action/mediawiki.action.edit.styles.less */
.editOptions {
background-color: var(--ooui--messagewidget-notice-background-color);
color: var(--theme-text-color);
border-color: var(--ooui--messagewidget-notice-border-color);
}
#wpTextbox1 {
font-size: var(--font-size-s);
}
/********* HTMLForm *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.htmlform.styles/styles.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.htmlform.ooui.styles.less */
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td {
background-color: var(--oouihelper--textinput-background-lighter);
}
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td {
background-color: var(--oouihelper--textinput-background);
}
/********* [[Special:AllMessages]] *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.special/special.less */
#mw-allmessagestable tbody:hover td {
background-color: var(--oouihelper--textinput-background-lighter);
}
#mw-allmessagestable .am_default {
background-color: var(--oouihelper--yellow-darker);
}
#mw-allmessagestable tbody:hover .am_default {
background-color: var(--oouihelper--yellow);
}
#mw-allmessagestable .am_actual {
background-color: var(--oouihelper--green-darker);
}
#mw-allmessagestable tbody:hover .am_actual {
background-color: var(--oouihelper--green);
}
/********* [[Special:NewPages]] *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.special/newpages.less */
.not-patrolled {
background-color: var(--oouihelper--yellow);
}
/********* Special:Contribs *********/
.mw-contributions-table > :nth-child(3) label + select,
.mw-contributions-table > :nth-child(4) label + input {
display: inline;
margin: 0;
}
.mw-contributions-table .mw-input-with-label {
vertical-align: middle;
}
/********* [[Special:Search]] *********/
/* Search result page */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.special.search.styles.less */
.mw-search-form-wrapper {
font-size: 1em;
}
.mw-search-form-wrapper #mw-search-top-table {
display: flex;
align-items: center;
}
.mw-search-form-wrapper #mw-search-top-table > div {
float: none;
}
.mw-search-form-wrapper .results-info {
color: var(--theme-text-color-note);
font-size: 1em;
padding: 0 0 0 3em;
white-space: nowrap;
text-align: right;
flex: 1 1 auto;
}
.mw-search-form-wrapper .mw-search-visualclear {
display: none;
}
.mw-search-form-wrapper .mw-search-profile-tabs {
background: none;
border: 0;
margin: 1em 0;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types + div {
display: none;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types {
width: 100%;
float: none;
padding: 0;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li {
float: none;
display: inline-block;
vertical-align: middle;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li.current {
background: var(--theme-highlight-background);
border-radius: 4px;
overflow: hidden;
}
.search-types .current a {
color: var(--theme-text-color);
}
.mw-search-form-wrapper #mw-searchoptions {
padding: 1em;
background: var(--theme-box-background);
border: 1px solid var(--theme-box-border-color);
border-radius: 4px;
}
.mw-search-form-wrapper #mw-searchoptions .divider {
border-color: var(--theme-box-border-color);
}
/* theme-dependent color for the size and last edit date of each search result */
.mw-search-result-data {
color: var(--theme-text-color-note);
}
/* responsive tweak */
@media screen and (max-width: 600px) {
.mw-search-form-wrapper #mw-search-top-table {
display: block;
}
.mw-search-form-wrapper .results-info {
margin-top: 1em;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li {
font-size: 12px;
}
}
/********* [[Special:ApiSandbox]] *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.special.apisandbox/apisandbox.less */
/* Fix background color of the bar at the top which contains the "Make request" and "Clear" buttons on the right */
.mw-apisandbox-toolbar {
background-color: var(--ooui--tabselect-background-color);
}
/********* [[Special:Diff]] *********/
/* Diff rendering */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.diff.styles/diff.less */
/* Add diff accent to make even smaller changes visible */
.diffchange-inline {
border: 1px var(--theme-alert-color) dashed;
}
/* More noticeable diff coloring */
.diff td.diff-context {
background: none repeat scroll 0 0 transparent;
color: var(--theme-text-color);
border-color: rgba(var(--theme-border-color--rgb), 0.5);
}
.diff td.diff-deletedline {
background-color: #ffe49c;
border-color: #ffe49c;
color: #000;
}
.diff td.diff-deletedline .diffchange {
background-color: #feeec8;
color: #000;
}
.diff td.diff-addedline {
background-color: #a3d3ff;
border-color: #a3d3ff;
color: #000;
}
.diff td.diff-addedline .diffchange {
background-color: #d8ecff;
color: #000;
}
/* theme-dependent color of the arrow that indicates a line was moved */
.mw-diff-movedpara-left:after,
.mw-diff-movedpara-right:after {
color: var(--theme-text-color);
}
/********* Special:CreateAccount *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.special.userlogin.signup.styles/signup.less */
/* Numbers of edits/pages/contributors on Special:CreateAccount */
.mw-createacct-benefits-list .mw-number-text,
#bodyContent .mw-createacct-benefits-list .mw-number-text h3 {
color: var(--theme-text-color);
}
/********* Special:UserLogin *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.special.userlogin.login.styles/login.less */
#mw-createaccount-cta {
padding-top: calc(
113px + 0.5em
); /* height of the background image: 113px; then there is one line of text */
}
#mw-createaccount-join {
/* recreate the styling for a "progressive" button; based on system/OOUI/elements/ButtonElement.scss */
color: var(--ooui--button-progressive-color);
background: var(--ooui--button-background);
border-top: var(--ooui--button-border-top);
border-right: var(--ooui--button-border-right);
border-bottom: var(--ooui--button-border-bottom);
border-left: var(--ooui--button-border-left);
box-shadow: var(--ooui--button-box-shadow);
}
#mw-createaccount-join:hover {
color: var(--ooui--button-progressive-color--hover);
background: var(--ooui--button-background--hover);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
#mw-createaccount-join:active {
background: var(--ooui--button-background);
color: var(--ooui--button-progressive-color);
border-top: var(--ooui--button-border-top--hover);
border-right: var(--ooui--button-border-right--hover);
border-bottom: var(--ooui--button-border-bottom--hover);
border-left: var(--ooui--button-border-left--hover);
}
#mw-createaccount-join:focus {
border-top: var(--ooui--button-border-top);
border-right: var(--ooui--button-border-right);
border-bottom: var(--ooui--button-border-bottom);
border-left: var(--ooui--button-border-left);
box-shadow: var(--ooui--button-box-shadow),
var(--ooui--button-progressive-box-shadow--focus);
}
/********* [[Special:Upload]] *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.special/upload.css */
/* Warning box that appears sometimes when uploading a file */
.mw-destfile-warning {
border-color: var(--ooui--messagewidget-warning-border-color);
color: var(--theme-text-color);
background-color: var(--ooui--messagewidget-warning-background-color);
}
/********* [[Special:Preferences]] *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.special.preferences.styles.ooui.less */
.mw-email-not-authenticated .oo-ui-labelWidget,
.mw-email-none .oo-ui-labelWidget {
color: unset;
}
.mw-email-not-authenticated .oo-ui-labelWidget {
background-color: var(--ooui--messagewidget-warning-background-color);
border-color: var(--ooui--messagewidget-warning-border-color);
}
.mw-email-none .oo-ui-labelWidget {
background-color: var(--ooui--messagewidget-notice-background-color);
border-color: var(--ooui--messagewidget-notice-border-color);
}
/* This rule will be deprecated from MediaWiki 1.40 on, per:
* https://gerrit.wikimedia.org/r/c/mediawiki/core/+/886385/1/resources/src/mediawiki.special.preferences.styles.ooui.less
* It can be removed then and replaced with the rule below. */
#preferences .mw-htmlform-submit-buttons {
/* pre-MediaWiki 1.40 */
background-color: var(--theme-content-background);
border-top-color: var(--ooui--panellayout-border-color);
}
/*
#preferences .mw-htmlform-submit-buttons { /* post-MediaWiki 1.40 */ /*
background-color: var(--theme-content-background);
border-top-color: var(--ooui--panellayout-border-color);
}
*/
.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed,
.mw-prefs-tabs
> .oo-ui-menuLayout-content
> .oo-ui-indexLayout-stackLayout
> .oo-ui-tabPanelLayout {
border-color: var(--ooui--panellayout-border-color);
}
.client-nojs
.mw-prefs-tabs
.mw-prefs-section-fieldset
> .oo-ui-fieldsetLayout-group {
border-top-color: var(--ooui--panellayout-border-color);
}
/* overwriting a rule from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/layouts.less
* the max-width set there unnecessarily limits the gadget descriptions, so we reset it
*/
#mw-prefsection-gadgets
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top
> .oo-ui-fieldLayout-body
> .oo-ui-fieldLayout-header,
#mw-prefsection-gadgets
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline
> .oo-ui-fieldLayout-body {
max-width: unset;
}
/***********************************************************************************************************
* css for certain extensions
***********************************************************************************************************/
/* overwriting styles from here:
* https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue/blob/main/modules/ext.tabberNeue.legacy/ext.tabberNeue.legacy.less */
.tabber__header {
margin-bottom: 4px;
box-shadow: inset 0 -1px 0 0 var(--oouihelper--themerelated-lighter-transparent);
}
.tabber__header__prev:after {
left: 2px;
}
.tabber__header__next:after {
right: 2px;
}
.tabber__header__prev:after,
.tabber__header__next:after {
filter: var(--ooui--icon-normal-filter);
}
.tabber__indicator {
background-color: var(--theme-link-color);
}
.tabber__tab {
padding-top: 2px;
color: var(--theme-text-color);
}
.tabber__tab:visited {
color: var(--theme-text-color);
}
.tabber__tab:hover {
color: var(--theme-link-color);
}
.tabber__tab[aria-selected="true"],
.tabber__tab[aria-selected="true"]:visited {
color: var(--theme-link-color);
}
.tabber__panel {
overflow-x: unset;
}
/********* Extension:Cargo *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Cargo/+/refs/heads/master/resources/Cargo.css
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Cargo/+/refs/heads/master/resources/CargoPageValues.css
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Cargo/+/refs/heads/master/drilldown/resources/CargoDrilldown.css
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Cargo/+/refs/heads/master/resources/ext.cargo.dagre.css */
/* Removes redundant Cargo extension "Purge cache" link */
div.menu li#ca-cargo-purge {
display: none;
}
/* Maximum image size for NPC images storing in Cargo table */
.npcimg img {
height: auto;
width: auto;
max-height: 100px;
max-width: 100px;
}
/* Table row "zebra striping" ([[Special:CargoQuery]]) */
table.cargoTable.noMerge tr:nth-child(odd) {
background: rgba(0, 0, 0, 0.25);
}
table.cargoTable.noMerge tr:nth-child(even) {
background: none;
}
table.cargoTable.mergeSimilarCells td.odd {
background: rgba(0, 0, 0, 0.25);
}
table.cargoTable.mergeSimilarCells td.even {
background: none;
}
div.cargoReplacementTableInfo {
background-color: rgba(255, 255, 255, 0.2);
}
/* The query table at the bottom of [[Special:CargoQuery]] */
div.specialCargoQuery-extraPane {
background: var(--oouihelper--text-background);
border-color: var(--oouihelper--borderdark);
}
/* Adjustments for the table headers on ?action=pagevalues */
.cargo-pagevalues-tableinfo {
background-color: var(--oouihelper--text-background);
top: 35px; /* wiki.gg header offset */
}
/* [[Special:Drilldown]] */
div#drilldown-tables-tabs-wrapper {
border: 0;
background: var(--theme-background);
}
div#drilldown-tables-tabs-wrapper.open {
z-index: 1000;
padding-top: 50px;
border-right: 1px solid var(--theme-box-border-color);
}
div#drilldown-tables-tabs-wrapper.open li {
border: 0;
background: none;
border-top: 1px solid var(--theme-box-border-color);
}
div#drilldown-tables-tabs-wrapper.open li:last-child {
border-bottom: 0;
}
div#drilldown-tables-tabs-wrapper.open li.selected {
background: var(--theme-highlight-background);
}
div#drilldown-tables-tabs-wrapper.open li.selected:after {
display: none;
}
.drilldown-tabs {
background: none;
border-bottom: 1px solid var(--theme-box-border-color);
}
.drilldown-tabs li {
background: var(--theme-box-background);
border: 1px solid var(--theme-box-border-color);
border-bottom: 0;
border-radius: var(--theme-box-border-radius) var(--theme-box-border-radius) 0
0;
margin-right: var(--layout-gap);
}
.drilldown-tabs li a {
color: var(--theme-text-color);
}
.drilldown-tabs li.selected {
margin-left: 0;
position: relative;
background: none;
}
.drilldown-tabs li.selected::after {
content: "";
display: block;
pointer-events: none;
background: var(--theme-background);
width: 100%;
height: 2px;
position: absolute;
bottom: -1px;
left: 0;
}
.drilldown-tabs li.selected a {
background: none;
color: var(--theme-text-color);
}
div.drilldown-filters-wrapper {
background: none;
border: 1px solid var(--theme-box-border-color);
color: var(--theme-text-color);
padding: var(--layout-box-padding);
}
div.drilldown-filter-values a {
color: unset;
}
#drilldown-header img,
div.drilldown-filters-wrapper img {
filter: invert(1);
}
/* (max-width: 549px) */
div#header {
background: none;
border: 0;
padding-top: 0;
border-bottom-color: var(--theme-box-border-color);
}
/********* Extension:InputBox *********/
/* Hide text input box for just a button */
.notextbox form > .mw-ui-input {
display: none;
}
/********* Extension:MultimediaViewer *********/
/* Reset link color to default (from Vector skin) */
/* (this entire thing could be styled to fit the currently active theme, but as
* long as it uses default Vector styling, the links should too, in order to be readable) */
.mw-mmv-main a {
color: #0645ad;
}
/* same for text color in attribution warning */
.mw-mmv-dialog .mw-mmv-dialog-warning {
color: #202122;
}
/* offset for wiki.gg topbar */
.mw-mmv-overlay,
.mw-mmv-wrapper,
.mw-mmv-image-wrapper {
top: var(--layout-topbar-height);
}
.mw-mmv-options-button,
.mw-mmv-close,
.mw-mmv-fullscreen {
/* buttons on top right */
margin-top: calc(
14px + var(--layout-topbar-height)
); /* 14px is the original value */
}
.mw-mmv-next-image,
.mw-mmv-prev-image {
/* "<" and ">" buttons. */
margin-top: var(--layout-topbar-height);
}
/********* Extension:CiteThisPage *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/CiteThisPage/+/refs/heads/master/modules/ext.citeThisPage.css */
.mw-specialCiteThisPage-bibliographic {
background-color: var(--theme-page-background-color--secondary);
}
/********* Extension:CategoryTree *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/CategoryTree/+/refs/heads/master/modules/ext.categoryTree.styles.css */
/* Use theme-dependent colors for the "expand"/"collapse" arrows */
.CategoryTreeEmptyBullet {
color: var(--theme-text-color-note);
}
.CategoryTreeToggle {
color: var(--theme-link-color);
}
/********* Extension:Scribunto *********/
/* The "Script error" dialog uses jquery.ui.dialog, which looks the same in all
* themes. The links do use theme-dependent styling by default though, which
* causes them to be hard to read in some themes.
* Resetting them here to the Vector default to be the same in all themes. */
.scribunto-trace a {
color: #0645ad;
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Scribunto/+/refs/heads/master/modules/ext.scribunto.edit.css */
/* Styles for the "debug console" at the bottom of the editing screen on Module: pages */
.mw-scribunto-console-fieldset {
background-color: var(--ooui--messagewidget-notice-background-color);
color: var(--theme-text-color);
}
#mw-scribunto-input {
background-color: var(--ooui--textarea-background-color);
}
.mw-scribunto-input {
color: var(--theme-text-color-highlight);
}
.mw-scribunto-normalOutput {
color: var(--theme-text-color);
background: transparent;
}
.mw-scribunto-print {
color: var(--oouihelper--yellow);
background: transparent;
}
.mw-scribunto-error {
color: var(--ooui--messagewidget-error-color);
background: transparent;
}
.mw-scribunto-message {
color: var(--theme-text-color-em);
background: transparent;
}
/********* Extension:SyntaxHighlight *********/
/* (formerly known as "SyntaxHighlight_GeSHi") */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/SyntaxHighlight_GeSHi/+/refs/heads/master/modules/pygments.wrapper.less */
.mw-highlight pre {
margin-top: 1em;
background: #282828 !important;
color: #fff !important;
overflow: auto; /* scroll if needed */
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/SyntaxHighlight_GeSHi/+/refs/heads/master/modules/pygments.generated.css */
.mw-highlight,
.kw1 {
color: #ffffff;
font-weight: bold;
}
.mw-highlight .nf {
color: aqua;
}
/* Operators */
.mw-highlight .p,
.mw-highlight .o {
color: #fff;
font-weight: bold;
}
/* Comments */
.mw-highlight .c {
color: #8d9e6b;
font-weight: bold;
}
/* HTML Tags */
.mw-highlight .nt {
color: #bfe431;
}
/* IDs */
.mw-highlight .nn {
color: #a8a8ff;
}
/* Classes */
.mw-highlight .nc {
color: #7676ff;
}
/* Pseudo-classes */
.mw-highlight .nd {
color: #cf82ff;
}
/* Properties */
.mw-highlight .k,
.mw-highlight .kp {
color: #fff;
font-weight: normal;
}
/* Keywords */
.mw-highlight .nb {
color: #ff5858;
}
/* Text values, strings */
.mw-highlight .kc,
.mw-highlight .s1,
.mw-highlight .s2,
.mw-highlight .sx,
.mw-highlight .n {
color: #00c6d2;
}
/* Numeric values */
.mw-highlight .mi,
.mw-highlight .mf {
color: #60feff;
font-weight: bold;
}
/* Units */
.mw-highlight .kt {
color: #ff3f85;
font-weight: bold;
}
/* #Color values */
.mw-highlight .mh {
color: #b2d241;
}
/* !important */
.mw-highlight .cp {
color: #f37f20;
}
/* JS generic */
.mw-highlight .nx {
color: #a8a8ff;
}
.mw-highlight .nv {
color: #fff;
}
/* Highlighted lines */
.mw-highlight .hll {
background-color: #50503e;
}
/* Highlight fields inside code class (e.g. Template:Code) */
code.mw-highlight {
background: var(--theme-page-background-color);
color: var(--theme-text-color);
}
/********* Extension:EmbedVideo *********/
/* Fix missing thumbnail styling */
.thumb.embedvideo .embedvideo {
background-color: var(--theme-box-background);
border: 1px solid var(--theme-border-color);
border-radius: var(--theme-box-border-radius);
padding: 3px;
text-align: center;
overflow: hidden;
}
/********* Extension:Interwiki *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Interwiki/+/refs/heads/master/modules/interwiki.css */
/* "Forward" column on Special:Interwiki */
table.mw-interwikitable.body td.mw-interwikitable-local-yes {
background-color: var(--theme-page-background-color--secondary);
}
/********* Extension:TemplateData *********/
/* Small default and example values to separate them from the parameter description */
.ve-ui-mwParameterPage-description-default,
.ve-ui-mwParameterPage-description-example {
font-size: small;
}
/********* Extension:Cite *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Cite/+/refs/heads/master/modules/ext.cite.style.css
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Cite/+/refs/heads/master/modules/ext.cite.styles.css */
/* Here are only rules that are necessary for overwriting styles from the extension's base styling.
* See template/reflist.scss for custom reference styling. */
ol.references li:target,
sup.reference:target {
background-color: var(--theme-page-background-color);
}
/********* Extension:CodeEditor *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/CodeEditor/+/refs/heads/master/modules/jquery.codeEditor.less */
/* Unify text color in status bar */
/* (the "status-message" and "status-line" divs use the current theme's text
* color, which might be hard to read on the hard-coded white background */
.codeEditor-status {
color: rgb(114, 119, 125); /* same color as div.ace_gutter-cell */
}
/* The placeholder text in the search/replace field uses the standard
* var(--theme-text-color-placeholder), which is in most themes hard to read on
* the white background */
.wikiEditor-ui .ace_editor .ace_search_field::placeholder {
color: unset;
}
/* The caret in the search/replace field uses the current theme's text color,
* which is in most themes hard to read on the hard-coded white background */
.wikiEditor-ui .ace_editor .ace_search_field {
caret-color: unset;
}
/********* Extension:WikiEditor *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/WikiEditor/+/refs/heads/master/modules/jquery.wikiEditor.less */
.wikiEditor-ui .wikiEditor-ui-view {
border-color: var(--ooui--textarea-border-color);
}
.wikiEditor-ui .wikiEditor-ui-top {
border-color: var(--ooui--textarea-border-color);
}
/********* Extension:WikiEditor toolbar *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/WikiEditor/+/refs/heads/master/modules/jquery.wikiEditor.toolbar.less */
.wikiEditor-ui-toolbar .sections .section {
border-top-color: var(--ooui--textarea-border-color);
}
.wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--theme-link-color);
}
.wikiEditor-ui-toolbar .tabs span.tab a:before {
filter: var(--ooui--icon-normal-filter);
}
.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
color: var(--theme-text-color);
}
.wikiEditor-ui-toolbar .group .label {
color: var(--ooui--textarea-placeholder-color);
}
.wikiEditor-ui-toolbar .group .tool-select .label {
color: var(--theme-text-color);
}
.wikiEditor-ui-toolbar .group .tool-select .label:after {
filter: var(--ooui--icon-normal-filter);
}
.wikiEditor-ui-toolbar .group .tool-select .options {
border-color: var(--ooui--menuselect-border-color);
background-color: var(--ooui--menuselect-background-color);
}
.wikiEditor-ui-toolbar .group .tool-select .options .option {
color: var(--theme-text-color);
}
.wikiEditor-ui-toolbar .page-table th {
color: var(--ooui--disabled-color);
}
.wikiEditor-ui-toolbar .page-table td {
color: var(--theme-text-color);
border-top-color: var(--ooui--menuselect-border-color);
}
.wikiEditor-ui-toolbar .page-characters div span {
border-color: var(--ooui--tagitem-border-color);
color: var(--theme-text-color);
height: unset;
}
.wikiEditor-ui-toolbar .page-characters div span:hover {
background-color: var(--ooui--menuselect-highlighted-background-color);
border-color: var(--ooui--tagitem-border-color--hover);
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/WikiEditor/+/refs/heads/master/modules/jquery.wikiEditor.toolbar-wikimedia.less */
.wikiEditor-ui-toolbar {
background-color: var(--theme-content-background);
}
.wikiEditor-ui-toolbar .group {
border-color: var(--ooui--menuselect-border-color);
}
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover {
background-color: var(--ooui--menuselect-highlighted-background-color);
}
.wikiEditor-ui-toolbar .booklet > .index > :hover {
background-color: var(--ooui--menuselect-highlighted-background-color);
}
.wikiEditor-ui-toolbar .booklet > .index > .current {
background-color: var(--ooui--menuselect-selected-background-color);
color: var(--theme-link-color);
}
.tool-button:hover,
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement
> .oo-ui-buttonElement-button:hover {
background-color: var(--ooui--menuselect-highlighted-background-color);
}
/********* Extension:ReplaceText *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/ReplaceText/+/refs/heads/master/resources/ext.ReplaceTextStyles.less */
/* [[Special:ReplaceText]] */
.ext-replacetext-searchoptions {
border: 1px solid var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
background: var(--theme-box-background);
padding: var(--layout-box-padding);
}
.ext-replacetext-searchoptions:first-of-type {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.ext-replacetext-searchoptions:last-of-type {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.ext-replacetext-searchoptions .ext-replacetext-divider {
border-color: var(--theme-border-color);
}
/********* Extension:AbuseFilter *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/AbuseFilter/+/refs/heads/master/modules/ext.abuseFilter.css */
/* [[Special:AbuseLog/x]] */
table.mw-abuselog-details {
background: var(--oouihelper--textinput-background);
border-color: var(--oouihelper--borderdark);
}
table.mw-abuselog-details th,
table.mw-abuselog-details td {
border-color: var(--oouihelper--borderdark);
}
table.mw-abuselog-details th {
background: var(--oouihelper--textinput-background-darker);
}
/* [[Special:AbuseFilter]] */
body td.mw-abusefilter-history-changed {
background: var(--oouihelper--themerelated-darkest);
}
#mw-abusefilter-warn-preview,
#mw-abusefilter-disallow-preview {
border-color: var(--oouihelper--borderdark-lighter);
}
tr.mw-abusefilter-list-disabled,
tr.mw-abusefilter-list-disabled td {
color: var(--oouihelper--disabled);
}
tr.mw-abusefilter-list-deleted,
tr.mw-abusefilter-list-deleted td {
color: var(--oouihelper--disabled);
}
tr.mw-abusefilter-list-throttled,
tr.mw-abusefilter-list-throttled td {
color: var(--oouihelper--red);
}
div.mw-abusefilter-editor {
border-color: var(--oouihelper--borderdark);
}
.mw-abusefilter-tools-error {
color: var(--oouihelper--red);
}
/********* Extension:Echo *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/REL1_39/modules/nojs/mw.echo.badge.vector.less */
#pt-notifications-notice .mw-echo-notifications-badge,
#pt-notifications-alert .mw-echo-notifications-badge {
top: -1px; /* offset fix */
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less */
.mw-echo-ui-crossWikiNotificationItemWidget-group,
.mw-echo-ui-bundleNotificationItemWidget-group {
background-color: var(--ooui--textarea-readonly-background-color);
}
.mw-echo-ui-crossWikiNotificationItemWidget
.mw-echo-ui-subGroupListWidget-header-row-title,
.mw-echo-ui-bundleNotificationItemWidget
.mw-echo-ui-subGroupListWidget-header-row-title {
color: var(--theme-text-color-note);
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/styles/mw.echo.ui.CrossWikiUnreadFilterWidget.less */
.mw-echo-ui-crossWikiUnreadFilterWidget {
border-color: var(--ooui--messagewidget-notice-border-color);
}
.mw-echo-ui-crossWikiUnreadFilterWidget-subtitle {
color: var(--theme-text-color-note);
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less */
.mw-body-content .mw-echo-ui-datedSubGroupListWidget-title-secondary {
color: var(--theme-text-color-note);
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/styles/mw.echo.ui.FooterNoticeWidget.less */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/styles/mw.echo.ui.MenuItemWidget.less */
.mw-echo-ui-menuItemWidget
> .oo-ui-buttonElement-button
> .oo-ui-labelElement-label {
color: var(--theme-text-color);
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/styles/mw.echo.ui.NotificationBadgeWidget.less */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
> .oo-ui-popupWidget-popup
> .oo-ui-popupWidget-head {
border-bottom-color: var(--ooui--popup-border-color);
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
> .oo-ui-popupWidget-popup
> .oo-ui-popupWidget-body
> .mw-echo-ui-notificationsListWidget
> .mw-echo-ui-notificationItemWidget:focus {
box-shadow: var(--ooui--button-progressive-box-shadow--focus);
border-color: var(--ooui--popup-border-color);
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
> .oo-ui-popupWidget-popup
> .oo-ui-popupWidget-footer {
border-top-color: var(--ooui--popup-border-color);
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
> .oo-ui-popupWidget-popup
> .oo-ui-popupWidget-footer
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons
.oo-ui-buttonElement:last-child {
border-left-color: var(--ooui--popup-border-color);
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
> .oo-ui-popupWidget-popup
> .oo-ui-popupWidget-footer
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons
.oo-ui-buttonElement
> .oo-ui-buttonElement-button:focus {
box-shadow: unset;
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/styles/mw.echo.ui.NotificationItemWidget.less */
.mw-echo-ui-notificationItemWidget {
background-color: var(--ooui--messagewidget-notice-background-color);
border-color: var(--ooui--menuselect-border-color);
}
.mw-echo-ui-notificationItemWidget:hover {
background-color: var(--ooui--messagewidget-notice-background-color);
}
.mw-echo-ui-notificationItemWidget:focus {
background-color: var(--ooui--menuselect-selected-background-color);
box-shadow: var(--ooui--button-progressive-box-shadow--focus);
outline: 0;
}
.mw-echo-ui-notificationItemWidget:last-child {
border-bottom-color: var(--ooui--menuselect-border-color);
}
.mw-echo-ui-notificationItemWidget-unread {
background-color: var(--ooui--menuselect-selected-background-color);
}
.mw-echo-ui-notificationItemWidget-unread:hover {
background-color: var(--ooui--menuselect-highlighted-background-color);
}
.mw-echo-ui-notificationItemWidget-content-message-header {
color: var(--theme-text-color-em);
}
.mw-echo-ui-notificationItemWidget-content-message-body {
color: var(--theme-text-color);
}
.mw-echo-ui-notificationItemWidget-content-actions-timestamp {
color: var(--theme-text-color-em);
}
@keyframes unseen-fadeout-to-unread {
from {
background-color: var(--oouihelper--progressive-transparent);
}
to {
background-color: var(--ooui--menuselect-selected-background-color);
}
}
@keyframes unseen-fadeout-to-read {
from {
background-color: var(--oouihelper--progressive-transparent);
}
to {
background-color: var(--ooui--messagewidget-notice-background-color);
}
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/styles/mw.echo.ui.NotificationsInboxWidget.less */
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
background-color: var(--ooui--messagewidget-notice-background-color);
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less */
.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted {
background-color: var(--ooui--outlineoption-highlighted-background-color);
color: var(--theme-text-color);
}
.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected {
background-color: var(--ooui--outlineoption-highlighted-background-color);
color: var(--theme-link-color);
}
.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected {
background-color: var(--ooui--outlineoption-selected-background-color);
color: var(--theme-link-color);
}
.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-pressed.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted {
background-color: var(--ooui--outlineoption-pressed-background-color);
color: var(--theme-link-color);
}
.mw-echo-ui-pageNotificationsOptionWidget-label-count {
background-color: var(--ooui--messagewidget-notice-background-color);
color: var(--theme-text-color-note);
}
.oo-ui-optionWidget-selected
.mw-echo-ui-pageNotificationsOptionWidget-label-count {
background-color: transparent;
color: var(--theme-link-color);
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/styles/mw.echo.ui.PlaceholderItemWidget.less */
.mw-echo-ui-placeholderItemWidget {
background-color: var(--ooui--messagewidget-notice-background-color);
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less */
.mw-echo-ui-toggleReadCircleButtonWidget-circle {
background-color: var(--oouihelper--progressive);
}
.mw-echo-ui-toggleReadCircleButtonWidget-circle-unread {
/* keep the default (white) */
background-color: #eaecf0;
}
.mw-echo-ui-toggleReadCircleButtonWidget:hover
.mw-echo-ui-toggleReadCircleButtonWidget-circle {
background-color: var(--oouihelper--progressive-lighter);
}
.mw-echo-ui-toggleReadCircleButtonWidget:hover
.mw-echo-ui-toggleReadCircleButtonWidget-circle-unread {
/* keep the default (gray) */
background-color: #c8ccd1;
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/nojs/mw.echo.notifications.less */
/* for the Special:Notifications page in no-JavaScript mode */
.mw-echo-state .mw-echo-notification {
color: var(--theme-text-color);
}
.mw-echo-state .mw-echo-notifications {
background-color: transparent;
}
.mw-echo-state .mw-echo-content .mw-echo-title {
color: var(--theme-text-color-em);
}
.mw-echo-state .mw-echo-content .mw-echo-payload {
color: var(--theme-text-color);
}
.mw-echo-state .mw-echo-content .mw-echo-notification-footer {
color: var(--theme-text-color-note);
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/nojs/mw.echo.special.less */
.mw-echo-date-section {
border-bottom-color: var(--oouihelper--borderdark);
color: var(--theme-text-color-note);
}
.mw-echo-special-navbar-bottom {
border-top-color: var(--oouihelper--borderdark);
}
.mw-echo-special-notifications .mw-echo-notification {
background-color: transparent;
}
.mw-echo-special-notifications .mw-echo-notification:hover {
background-color: var(--ooui--menuselect-highlighted-background-color);
}
.mw-echo-special-notifications .mw-echo-notification-unread {
background-color: var(--ooui--menuselect-selected-background-color);
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/mobile/notificationsFilterOverlay.less */
.notifications-filter-overlay
.overlay-content
.mw-echo-ui-crossWikiUnreadFilterWidget {
border-color: var(--ooui--messagewidget-notice-border-color);
}
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Echo/+/refs/heads/master/modules/mobile/overlay.less */
/********* Extension:DebugTemplates *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/DebugTemplates/+/refs/heads/master/ext.debugTemplates.css */
.dt-error {
color: var(--theme-text-color-red);
}
.dt-crumbs {
background-color: var(--oouihelper--text-background);
}
.dt-crumb-visited {
color: var(--theme-link-color);
}
.dt-debug-output-wrapper {
background-color: var(--oouihelper--text-background);
border-color: var(--oouihelper--borderdark);
}
/********* Extension:SimpleMathJax *********/
mjx-container {
font-size: 125% !important;
}
/* Reset link color in the menu to default (from Vector skin) */
/* The right-click menu ("About MathJax" or "MathJax Help") has a hardcoded
* white background. The links must not use theme styling there, as they are
* colored according to their theme's background, which can make them hard to
* read with some themes. */
.CtxtMenu_Info a {
color: #0645ad;
}
/* Reset code text color in the menu to default (from Vector skin) */
/* The right-click menu ("Show Math As") has a hardcoded white background. The
* code text must not use theme styling there, as it is colored according to
* its theme's background, which can make it hard to read with some themes. */
.CtxtMenu_Info pre {
background-color: #f8f9fa;
color: #000;
border-color: #eaecf0;
}
/***********************************************************************************************************
* Styles for "real" wiki page content. (in div.mw-parser-output)
***********************************************************************************************************/
/* remove external link icon. */
.mw-parser-output a.external {
padding-right: 0;
background: none;
}
.mw-parser-output > :first-child {
margin-top: 0;
}
@media screen and (max-width: 450px) {
/* images/thumbnails */
.mw-parser-output .image > img {
max-width: 100%;
max-height: 50vh;
width: auto;
height: auto;
}
}
/* used by mobile floating fix, see [[:en:MediaWiki:Common.js]] */
.mobile-floating-fix {
float: none !important;
margin-left: 0 !important;
width: fit-content;
}
.mobile-fullwidth {
width: 100% !important;
}
/* Classic Mode Color */
.tab.normal {
color: var(--theme-modetabs-classic-text-color-label);
}
/* Expert Mode Color */
.tab.expert {
color: var(--theme-modetabs-expert-text-color-label);
}
/* Master Mode Color */
.tab.master {
color: var(--theme-modetabs-master-text-color-label);
}
/********* Tables *********/
table {
border: 0 solid var(--theme-box-border-color);
border-collapse: separate;
border-spacing: 0;
padding: 0;
margin-bottom: 20px;
}
table th,
table td {
border: 0 solid var(--theme-border-color);
padding: 3px 6px;
}
table tfoot:empty,
table thead:empty {
display: none;
}
table.wikitable {
color: inherit;
background: none;
border-collapse: collapse;
border-color: var(--theme-border-color-accent);
}
table.wikitable th,
table.wikitable td {
border-color: var(--theme-border-color-accent);
}
table.wikitable th {
color: inherit;
background: none;
}
table.lined {
border-top-width: 1px;
}
table.lined th,
table.lined td {
border-bottom-width: 1px;
}
table.cellborder {
border-collapse: collapse;
}
table.cellborder th,
table.cellborder td {
border-width: 1px;
}
/* .topline, .bottomline, .noline */
table tr.topline th,
table tr.topline td,
table th.topline,
table td.topline {
border-top-width: 1px;
border-top-color: var(--theme-border-color);
}
table tr.bottomline th,
table tr.bottomline td,
table th.bottomline,
table td.bottomline {
border-bottom-width: 1px;
border-bottom-color: var(--theme-border-color);
}
table tr.noline th,
table tr.noline td,
table th.noline,
table td.noline {
border-width: 0;
}
table tr.noline th.topline,
table tr.noline td.topline {
border-top-width: 1px;
border-top-color: var(--theme-border-color);
}
table tr.noline th.bottomline,
table tr.noline td.bottomline {
border-bottom-width: 1px;
border-bottom-color: var(--theme-border-color);
}
/********* headings *********/
.mw-body h1,
.mw-body-content h1,
.mw-body-content h2,
.vector-body h3,
.vector-body h4,
.vector-body h5,
.vector-body h6 {
margin: 0;
color: var(--theme-heading-color);
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: 1.25;
}
.mw-body h1,
.mw-body-content h1 {
font-size: 32px;
line-height: 40px;
}
.mw-body-content h2 {
font-size: 26px;
line-height: 32px;
margin-top: 18px;
margin-bottom: 12px;
}
.mw-body-content h2::after {
content: "";
display: block;
pointer-events: none;
height: 0;
border-top: 1px solid var(--theme-hr-color-top);
border-bottom: 1px solid var(--theme-hr-color-bottom);
margin-top: 3px;
}
.vector-body h3 {
font-size: 22px;
line-height: 28px;
margin-top: 14px;
margin-bottom: 7px;
}
.vector-body h4 {
font-size: 18px;
font-weight: bold;
line-height: 24px;
margin-top: 14px;
margin-bottom: 7px;
}
.vector-body h5 {
line-height: 22px;
font-size: 16px;
font-weight: bold;
margin-top: 10px;
margin-bottom: 7px;
}
.vector-body h6 {
line-height: 20px;
font-size: 14px;
font-weight: bold;
margin-top: 7px;
margin-bottom: 7px;
}
/* reduce heading font size */
@media (max-width: 900px) {
.mw-body h1,
.mw-body-content h1 {
font-size: 24px;
line-height: 32px;
}
.mw-body-content h2 {
font-size: 20px;
line-height: 28px;
}
.vector-body h3 {
font-size: 18px;
line-height: 24px;
}
.vector-body h4 {
font-size: 16px;
}
.vector-body h5 {
font-size: 14px;
}
.vector-body h6 {
font-size: 12px;
}
}
/*** section edit link ****/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.skinning/interface-edit-section-links.less */
.mw-editsection {
white-space: nowrap;
font-size: 14px;
--theme-icon-color: var(--theme-link-color-accent);
}
.mw-editsection .mw-editsection-bracket {
display: none;
}
.mw-editsection a {
color: transparent;
display: inline-block;
width: 12px;
height: 12px;
margin-left: -6px;
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.86 12.86'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M7.11.8,1,6.87a1,1,0,0,0-.29.7v4.54H5.29a1,1,0,0,0,.7-.29l6.07-6.08M5,2.92l4.95,5M7.16.75l4.95,5'/%3E%3C/svg%3E")
no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-icon-color);
}
/** ToC **/
.toc,
.toc * {
box-sizing: border-box;
}
/* base common style */
.toc {
border: 1px solid var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
background: var(--theme-box-background);
padding: var(--layout-box-padding);
margin: var(--layout-gap-l) 0;
font-size: unset;
min-width: 12em;
}
.toc a {
color: var(--theme-text-color);
}
.toc .tocnumber {
color: var(--theme-text-color-note);
}
.toc .tocnumber:after {
content: ".";
}
/* header */
.toc .toctitle {
position: relative;
overflow: hidden;
text-align: left;
}
.toc .toctitle h2,
.toc .toctitle .toctogglespan {
line-height: 20px;
margin: 0;
border: 0;
}
.toc .toctitle h2 {
padding: 0 8px;
font-weight: normal;
display: flex;
align-items: center;
}
.toc .toctitle h2::before {
content: "";
display: block;
width: 12px;
height: 12px;
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E")
no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-text-color);
margin: 0 6px 0 0;
}
.toc .toctogglelabel {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
font-size: unset;
line-height: unset;
display: flex;
align-items: center;
justify-content: flex-end;
}
.toc .toctogglespan::before,
.toc .toctogglespan::after,
.toc .toctogglelabel::after {
display: none;
}
.toc .toctogglelabel::before {
/* arrow */
content: "";
display: block;
pointer-events: none;
--mask: var(--icon-chevron-down) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-icon-color);
width: 14px;
height: 14px;
flex: 0 0 auto;
transform: scaleY(-1);
}
.toc .toctogglelabel:hover::before {
background-color: var(--theme-icon-color-hover);
}
.toc .toctogglecheckbox:checked + .toctitle .toctogglelabel::before {
transform: none;
}
.toc .toctogglecheckbox:checked ~ ul {
/* do not change ToC title size when toggle show/hide. */
overflow: hidden;
display: block;
height: 0;
border: 0;
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
/* content list */
.mw-content-ltr .toc ul ul,
.mw-content-rtl .toc ul ul {
margin: 0 0 0 1em;
}
.toc > ul {
margin: var(--layout-box-padding) 0 0 0;
border-top: 1px solid var(--theme-border-color);
padding-top: var(--layout-box-padding);
}
.toc > ul a {
display: block;
padding: 2px 8px;
border-radius: 4px;
transition: background 0.3s;
}
.toc > ul a:hover {
text-decoration: none;
background: var(--theme-highlight-background);
}
.toc > ul li {
margin: 0;
}
/********* Thumbnails *********/
/* Styles relating to vanilla MediaWiki thumbnails. For legacy reasons this also contains the floatleft, tleft, tright and floatright classes. */
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.skinning/content.thumbnails-screen.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.skinning/content.thumbnails-common.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.skinning/content.thumbnails-print.less */
.thumb {
margin-bottom: var(--layout-gap);
border: 0;
}
.thumb * {
box-sizing: content-box;
}
.thumb .thumbinner {
border: 1px solid var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
background: var(--theme-box-background);
padding: var(--layout-box-padding);
font-size: unset;
}
.thumb a.img {
display: block;
}
.thumb img {
background: none;
border-color: var(--theme-box-border-color);
}
.thumb .thumbcaption {
font-size: var(--font-size-s);
line-height: var(--line-height-s);
padding: 0 1px; /* 1px for border of image. */
margin-top: var(--layout-gap);
}
.thumb .thumbcaption .magnify:first-child {
display: none;
}
div.tleft {
margin: 0 var(--layout-gap) var(--layout-gap) 0;
}
div.tright {
margin: 0 0 var(--layout-gap) var(--layout-gap);
}
/********* Gallery *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.page.gallery.styles/gallery.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.page.gallery.styles/print.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.page.gallery.styles/content.media.less */
.gallery.gallery {
margin: var(--layout-gap) 0;
}
.gallery.mw-gallery-traditional {
/* Some lengths are hard-coded in html code, so we have to do some tricks. */
--offset-width: -5px; /* html width of .gallerybox>div is width of .thumb + 5px */
--offset-margin: -15px; /* width/height of .thumb is width/height of .thumb>div>img + 15px */
display: flex;
flex-wrap: wrap;
gap: var(--layout-gap);
}
.gallery.mw-gallery-traditional .gallerybox {
width: unset !important;
margin: 0;
--offset-left: calc(
0px - var(--offset-margin) - var(--layout-box-padding) - 1px
);
--offset-right: calc(
0px - var(--offset-width) - var(--offset-margin) - var(--layout-box-padding) -
1px
);
}
.gallery.mw-gallery-traditional .gallerybox > div {
margin: 0 calc(0px - var(--offset-right)) 0 calc(0px - var(--offset-left));
}
.gallery.mw-gallery-traditional .gallerybox .thumb {
border: 1px solid var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
background: var(--theme-box-background);
padding: var(--layout-box-padding);
margin: 0 var(--offset-right) 0 var(--offset-left);
width: unset !important;
}
.gallery.mw-gallery-traditional .gallerybox .thumb > div > *:first-child {
margin-top: var(--offset-margin);
margin-bottom: var(--offset-margin);
}
.gallery.mw-gallery-traditional .gallerybox .thumb a {
display: block;
}
.gallery.mw-gallery-traditional .gallerybox .gallerytext {
font-size: var(--font-size-s);
line-height: var(--line-height-s);
padding: 0 1px; /* 1px for border of image. */
margin: 4px var(--offset-right) var(--layout-gap) var(--offset-left); /* 5px margin-right for .gallerybox>div */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.gallery.mw-gallery-traditional .gallerybox .gallerytext p {
width: auto;
flex: 0 1 auto;
}
.gallery.mw-gallery-traditional .gallerycaption {
flex-basis: 100%; /* the caption should always be on its own line */
}
/********* Unknown *********/
/* Warning color */
/* used at least by Extension:Cite; see https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Cite/+/refs/heads/REL1_39/src/ErrorReporter.php#103 */
/* where is this defined in the MediaWiki internal CSS? */
.warning {
color: var(--oouihelper--yellow);
}
/* Remove external link icon */
/* where is this used? where is it defined in the MediaWiki internal CSS? */
.link-https {
padding-right: 0;
background: none;
}
/***********************************************************************************************************
* css for certain templates
***********************************************************************************************************/
/********* [[Template:Navbox]] *********/
/* subtemplates:
* [[Template:Navbox/end]]
* [[Template:Navbox/h1]]
* [[Template:Navbox/h2]]
* [[Template:Navbox/start]]
* [[Template:Navbox/v.d.e]]
*/
.navbox {
background: var(--theme-highlight-background);
background-size: 100%;
border-width: 1px;
border-style: solid;
border-color: var(--theme-box-border-color-inner);
border-radius: var(--theme-box-border-radius-inner);
box-sizing: border-box;
padding: 6px;
margin: 0.5em auto;
width: 100%;
max-width: 1800px;
position: relative;
clear: both;
}
.navbox .i {
padding: 1px 0;
}
.navbox > .header {
background: var(--theme-highlight-background);
background-size: 100%;
border-width: 1px;
border-style: solid;
border-color: var(--theme-box-border-color-inner);
border-radius: var(--theme-box-border-radius-inner);
text-align: left;
font-size: 16px;
font-weight: bold;
line-height: 2;
min-height: 1em;
padding: 4px 70px 4px 6px;
}
.navbox > .vde {
position: absolute;
right: 10px;
top: calc(2rem + 2px);
font-size: 9px;
line-height: 1;
color: var(--theme-text-color-note);
}
.navbox .table > div > .title,
.navbox .table > div > .h1,
.navbox .table > div > .h2 {
background: var(--theme-highlight-background);
background-size: 100%;
border-width: 1px;
border-style: solid;
border-color: var(--theme-box-border-color-inner);
border-radius: var(--theme-box-border-radius-inner);
}
.navbox > .mw-collapsible-toggle {
position: absolute;
line-height: 1;
right: 10px;
top: 10px;
font-size: 12px;
}
.navbox > .mw-collapsible-toggle > .mw-collapsible-bracket {
display: none;
}
.navbox > .mw-collapsible-toggle:before {
content: "";
vertical-align: middle;
display: inline-block;
width: 5px;
height: 5px;
transform: rotate(45deg);
position: relative;
left: -3px;
border-left: 2px solid var(--theme-link-color);
border-top: 2px solid var(--theme-link-color);
border-right: 0;
border-bottom: 0;
top: 1px;
}
.navbox > .mw-collapsible-toggle:after {
content: "";
}
.navbox > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed:before {
border-left: 0;
border-top: 0;
border-right: 2px solid var(--theme-link-color);
border-bottom: 2px solid var(--theme-link-color);
top: -2px;
}
.navbox > .content {
text-align: left;
padding: 6px 6px 0;
}
.navbox > .content .dotlist + .dotlist {
margin-top: 0.5em;
}
.navbox > .content > .dotlist + .dotlist {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--theme-body-text-color--hover);
}
.navbox .navbox {
/* nested navbox */
border: 0;
padding: 0;
width: auto;
margin: 0 -6px 6px -6px;
}
.navbox .navbox:last-child {
margin: 0 -6px;
}
.navbox .navbox > .header {
font-size: 14px;
padding: 0 64px 0 6px;
}
.navbox .navbox > .mw-collapsible-toggle {
right: 4px;
top: 4px;
font-size: 10px;
}
.navbox .navbox > .mw-collapsible-toggle:before {
width: 3px;
height: 3px;
border-left: 1px solid var(--theme-link-color);
border-top: 1px solid var(--theme-link-color);
border-right: 0;
border-bottom: 0;
top: 1px;
}
.navbox
.navbox
> .mw-collapsible-toggle.mw-collapsible-toggle-collapsed:before {
border-left: 0;
border-top: 0;
border-right: 1px solid var(--theme-link-color);
border-bottom: 1px solid var(--theme-link-color);
top: -1px;
}
.navbox .h1 {
font-weight: bold;
margin-top: 0.5em;
margin-bottom: 0.25em;
line-height: 1.5;
}
.navbox .h1::after {
content: "";
display: block;
margin: auto auto auto 0;
width: 5em;
height: 0;
border-bottom: 2px solid var(--theme-box-border-color);
}
.navbox .h1 + .h2 {
margin-top: 0.5em;
}
.navbox .table > div:first-child .h1,
.navbox .content > .h1:first-child {
margin-top: auto;
}
.navbox .h2 {
font-weight: bold;
line-height: 1.5;
margin-top: 0.25em;
font-size: 12px;
}
.navbox .h2 + .h3 {
margin-top: 0.5em;
}
.navbox .h3 {
font-size: 10px;
font-weight: bold;
line-height: 1.5;
}
@media (max-width: 599px) {
.navbox .table > div > .title::after,
.navbox .table > .dotlist > .title::after {
content: ":";
margin-right: 0.25em;
}
}
@media (min-width: 600px) {
.navbox .table {
display: table;
text-align: left;
margin: -5px -7px -1px -7px;
}
.navbox .table > div {
display: table-row;
}
.navbox .table > div > * {
display: table-cell;
padding: 4px 7px;
vertical-align: middle;
box-shadow: inset 0 0 0 1px var(--theme-page-background-color);
}
.navbox .table > div > .title,
.navbox .table > div > .h1,
.navbox .table > div > .h2 {
background: var(--theme-highlight-background);
text-align: right;
line-height: 1.1;
/*width: max-content;*/
}
.navbox .table > div > .title .eil,
.navbox .table > div > .h1 .eil,
.navbox .table > div > .h2 .eil {
white-space: normal;
}
.navbox .table > div > .title::after,
.navbox .table > div > .h1::after {
display: none;
}
.navbox .table .table {
display: table;
padding: 0;
margin: 0 -1px 0 0;
}
.navbox .table .cell {
padding: 0;
}
.navbox .table .cell > .dotlist {
padding: 4px 7px;
}
}
/********* [[Template:Coin]] *********/
.coins {
white-space: nowrap;
}
.coins s {
display: none;
}
.coin {
white-space: nowrap;
}
.coin i {
display: none;
}
.coin span::after {
content: "";
display: inline-block;
width: 12px;
height: 16px;
margin: -3px 2px auto;
vertical-align: middle;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAQCAMAAACBWcfHAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABaUExURQAAAJN9IW+Nn1xnakwsDMu1R1xCEjI3SiE1P1QdCo+cnWBtj4iksOF1S/Hy6npbGUVMUKGsrbZXG/z4tpmsuFJXbe3Zeey3oOzw89XF45VDFq+h03o3Ea7CxDpXvFYAAAABdFJOUwBA5thmAAAAwUlEQVQoz43SSxKDIBREUXyCQVBRUBQ1+99m4MVQJf5yq3p4Zk2I74WRX4WPPHenuO/c9L1zTbO5omDMmOh2qvT9oTjvummKLqpgAKoKAB2ljGVZdDtVlnU9jujuFOdC5Hl0O1X5miYsKmOsTVUw86w1uifVtsEdFYCU7zeAc6iyTClrGaM0VVqv6zzX9aPK89YnxFFJOQxhyxKVUkdF0KEht4qg28xOfR0AmlBwm0lU8o1rdf2ow3spjeb6vffqtA8gqhYRvoCL8AAAAABJRU5ErkJggg==);
background-repeat: no-repeat;
background-size: auto 16px;
image-rendering: pixelated; /* for chrome */
image-rendering: crisp-edges; /* for firefox */
}
.coin .pc::after {
width: 14px;
background-position: 0 50%;
}
.coin .gc::after {
background-position: -15px 50%;
}
.coin .sc::after {
background-position: -28px 50%;
}
.coin .cc::after {
background-position: -41px 50%;
}
/********* [[Template:Multi-column TOC]] *********/
/* todo: 这个模板的样式是有问题的。看[[Recipes]] */
.horizontal-toc {
/* to match styles of .toc */
border: 1px solid var(--theme-box-border-color);
border-radius: 3px;
margin: 24px auto 24px 0;
}
.horizontal-toc #toc {
display: block;
border: 0;
padding: 0;
margin: 0;
}
.horizontal-toc .toctitle {
-webkit-column-span: all;
column-span: all;
margin-bottom: 9px;
min-width: 0 !important;
}
.horizontal-toc .toctitle h2 {
margin: 0;
}
.horizontal-toc .toctogglecheckbox:checked ~ .toctitle {
margin-bottom: 0;
}
.horizontal-toc .toctogglecheckbox:checked ~ ul:after {
display: none;
}
.horizontal-toc ul:after {
content: "";
display: block;
-webkit-column-span: all;
column-span: all;
height: 9px;
}
.horizontal-toc ul,
.horizontal-toc ol {
margin-top: 0;
padding: 0;
}
.horizontal-toc ul li:first-child,
.horizontal-toc ol li:first-child {
margin-top: 0;
}
/********* [[Template:Quotation]] *********/
blockquote.quotation {
position: relative;
font-style: italic;
padding: 0 1em;
margin: 1em auto;
overflow: hidden;
border-left: none; /* Override default vector styling */
}
blockquote.quotation > div.m {
display: block;
font: bold 5em Times New Roman, Times, Georgie, serif;
line-height: 0.8;
color: var(--theme-text-color-note);
position: absolute;
left: 0.2em;
top: 0;
}
blockquote.quotation > div.c {
padding: 0.25em 0 0 1em;
margin-left: 3em;
border-left: 1px solid var(--theme-text-color-note);
display: inline-block;
}
blockquote.quotation > div.c > p:last-child {
text-align: right;
font-size: 0.9em;
margin: 0;
}
@media (max-width: 640px) {
blockquote.quotation {
clear: both;
}
}
/********* [[Template:Spoiler]] *********/
.spoiler-content {
background-color: rgb(127, 127, 127);
transition: all 0.3s;
cursor: pointer;
}
.spoiler-content > span {
opacity: 0;
transition: all 0.3s;
}
.spoiler-content > * {
pointer-events: none;
}
.spoiler-content.show,
.spoiler-content.hover:hover {
background-color: rgba(127, 127, 127, 0);
}
.spoiler-content.show > span,
.spoiler-content.hover:hover > span {
opacity: 1;
}
.spoiler-content.show > *,
.spoiler-content.hover:hover > * {
pointer-events: unset;
}
/********* [[Template:Hp]] *********/
.hp {
display: inline-block;
vertical-align: middle;
}
.hp > div {
margin: -2px;
max-width: 260px; /* maximum number of hearts in one row: 10 */
}
.hp > div > img,
.hp > div > a {
width: 22px;
height: 22px;
padding: 2px;
}
.hp > div .text-red {
color: #fe9b9b;
}
.hp > div .text-golden {
color: #e1ad60;
}
/********* [[Template:Living preferences]] *********/
.living-preferences .love {
background-color: rgba(86, 229, 86, 0.4392156863);
}
.living-preferences .like {
background-color: rgba(183, 229, 86, 0.4392156863);
}
.living-preferences .dislike {
background-color: rgba(229, 189, 86, 0.4392156863);
}
.living-preferences .hate {
background-color: rgba(229, 90, 86, 0.4392156863);
}
/********* [[Template:L10n subtemplate]] *********/
table.l10n-data-table tr:hover td {
background-color: rgba(180, 0, 0, 0.05);
}
table.l10n-data-table th.all-lang,
table.l10n-data-table th.lang {
cursor: pointer;
}
table.l10n-data-table th.lang.en {
cursor: auto;
}
table.l10n-data-table th.shrinked {
padding-left: 0;
padding-right: 0;
}
table.l10n-data-table th.shrinked code {
padding-left: 1px;
padding-right: 1px;
}
table.l10n-data-table th.shrinked small {
display: none;
}
table.l10n-data-table td.shrinked {
background-color: rgba(127, 127, 127, 0.05);
}
table.l10n-data-table td.shrinked > div {
display: none;
}
/* Fade out the EN fallback strings more. The difference from regular strings is
* not notable enough otherwise. */
.l10n-data-table .note-text {
opacity: 0.5;
}
/********* Template:project *********/
.project {
float: right;
display: block;
margin: -0.6em 0 0.5em;
border: 1px solid var(--theme-box-border-color);
background: var(--theme-highlight-background);
padding: 0 7px;
font-size: 90%;
}
/********* [[Template:GameText]] *********/
.gameText {
white-space: pre-wrap;
}
/********* [[Template:Dpl3]] *********/
.dpl3 {
background-color: var(--theme-page-background-color--secondary);
font: 120% Courier, monospace;
}
/********* [[Template:Archive-box]] *********/
.archive-box {
float: right;
margin: 0 0 0.5em 0.5em;
padding: 0.5em 1em;
width: 150px;
background: var(--theme-page-background-color);
border: 1px solid var(--theme-box-border-color);
border-radius: 10px;
-moz-border-radius: 10px;
}
.archive-box .archive-header {
padding: 0.1em;
font-size: 0.9em;
color: var(--theme-text-color);
background-color: var(--theme-box-border-color);
text-align: center;
border-radius: 7px;
-moz-border-radius: 7px;
}
/********* [[Template:Chance]] *********/
/* Legacy rule. As of [[Special:Diff/884944]], the template no longer uses <s>
* to display hidden text. Some language wikis might not have updated the template
* yet, so the rule is still kept here. */
.chance > s {
display: none;
}
/********* [[Template:Flavor text]] *********/
.flavor-text {
margin-bottom: 1em;
}
/********* [[Template:ToggleBox]] *********/
/* subtemplates:
* [[Template:ToggleBox/end]]
* [[Template:ToggleBox/handle]]
* [[Template:ToggleBox/start]]
*/
.trw-toggleable .trw-togglehandle {
color: var(--theme-link-color);
cursor: pointer;
}
.trw-toggleable .trw-togglehandle:hover {
color: var(--theme-link-color--hover);
}
.trw-toggleable.not-toggled .only-toggled,
.trw-toggleable.toggled .only-not-toggled {
display: none;
}
.trw-toggleable .trw-togglehandle > span:first-child {
display: inline-block;
}
.trw-toggleable .trw-togglehandle > span:last-child {
display: none;
}
.trw-toggleable.toggled .trw-togglehandle > span:first-child {
display: none;
}
.trw-toggleable.toggled .trw-togglehandle > span:last-child {
display: inline-block;
}
/********* [[Template:Sound]] *********/
/* All of these styles should only be applied if JavaScript is enabled (because
* the functionality doesn't work otherwise); see also
* https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#.client-js_and_.client-nojs */
.client-js .sound {
cursor: pointer;
}
.client-js .sound audio {
/* hide the default HTML audio player */
display: none;
}
.client-js .sound.iconlast .sound-title::after,
.client-js .sound.iconfirst .sound-title::before {
/* speaker icon */
content: "";
display: inline-block;
width: 1.143em;
height: 1.143em;
vertical-align: text-top;
background: url(https://commons.wiki.gg/images/3/36/Audio.svg);
background-size: contain;
filter: var(--ooui--icon-normal-filter);
}
.client-js .sound .sound-title::after {
/* for sound.iconlast */
margin-left: 2px;
}
.client-js .sound .sound-title::before {
/* for sound.iconfirst */
margin-right: 2px;
}
.client-js .sound.sound-playing .sound-title::after,
.client-js .sound.sound-playing .sound-title::before {
/* color the speaker icon in the "progressive" color */
filter: var(--ooui--icon-progressive-filter);
}
/********* [[Template:Multi-column list]] *********/
/* correct webkit/chrome uneven margin on the first column*/
.responsive-columns ul,
.responsive-columns ol {
margin-top: 0;
}
.responsive-columns ul li:first-child,
.responsive-columns ol li:first-child {
margin-top: 0;
}
.mclist.block > ul {
list-style: none;
margin-left: 0;
}
@media screen and (max-width: 720px) {
.mclist {
overflow-x: auto;
}
.mclist li {
display: block;
text-overflow: unset;
white-space: nowrap;
overflow: unset;
}
}
/********* [[Template:Itemlist]] *********/
.itemlist > ul {
list-style: none;
margin: 0;
}
.itemlist > ul > li {
width: 10em;
margin: 0.25em 1em 0.25em auto;
display: inline-block;
}
/********* [[Template:Dotlist]] *********/
.dotlist {
margin: auto;
}
.dotlist > .title {
font-weight: bold;
}
.dotlist > .title::after {
content: "";
display: inline-block;
width: 0.25em;
}
.dotlist.nobold > .title {
font-weight: normal;
}
.dotlist > ul {
display: inline;
list-style: none;
margin: auto; /* please don't delete this line, we need it to remove default ul margin setting. */
}
.dotlist > ul > li {
display: inline-block;
}
.dotlist > ul > li::after {
content: "•";
padding: 0 0.25em;
word-break: break-all;
}
.dotlist > ul > li:last-child::after {
display: none;
}
.dotlist.nodot > ul > li::after {
content: " ";
padding: 0;
margin: 0;
}
.dotlist.inline {
display: inline;
}
.dotlist.inline > ul > li {
display: inline;
}
.dotlist.l > .title {
margin-right: 0.4em;
}
.dotlist.l > ul > li::after {
margin-left: 0.25em;
margin-right: 0.25em;
}
.dotlist.xl > .title {
margin-right: 0.8em;
}
.dotlist.xl > ul > li::after {
margin-left: 0.5em;
margin-right: 0.5em;
}
.dotlist.xxl > .title {
margin-right: 1.2em;
}
.dotlist.xxl > ul > li::after {
margin-left: 0.75em;
margin-right: 0.75em;
}
.dotlist.xxxl > .title {
margin-right: 1.6em;
}
.dotlist.xxxl > ul > li::after {
margin-left: 1em;
margin-right: 1em;
}
.dotlist.xxxxl > .title {
margin-right: 2em;
}
.dotlist.xxxxl > ul > li::after {
margin-left: 1.25em;
margin-right: 1.25em;
}
/********* [[Template:Toc limit]] *********/
/* Allows limiting TOCs to generate links for only header levels below a limit, for instance only level-3 (=== ===) and below. */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
display: none !important;
}
/********* [[Template:Error]] *********/
.error {
font-weight: bold;
color: red;
}
/********* [[Template:Achievement]] *********/
div.achievement {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin: 0.5em 0;
}
div.achievement > div {
margin-left: 0.5em;
}
div.achievement .mw-selflink {
font-weight: inherit;
}
/********* [[Template:History]] *********/
.history-header {
background: none;
margin: 0;
padding-top: 0.5em;
padding-bottom: 0.17em;
border-bottom: none;
font-size: 116%;
font-weight: bold;
}
.history-title {
font-weight: bold;
}
/********* [[Template:Key]] *********/
span.key {
display: inline-block;
white-space: nowrap;
cursor: pointer;
}
span.key a:-webkit-any-link {
text-decoration: none;
}
span.key kbd {
color: black;
border: 1px solid rgb(170, 170, 170);
box-shadow: 0.1em 0.2em 0.2em rgb(221, 221, 221);
border-radius: 0.2em;
background-image: linear-gradient(
to bottom,
rgb(238, 238, 238),
rgb(249, 249, 249),
rgb(238, 238, 238)
);
background-color: rgb(249, 249, 249);
padding: 0.1em 0.4em 0.2em 0.3em;
margin-right: 2px;
font-size: 85%;
font-family: inherit;
font-style: normal;
}
/********* [[Template:Na]] *********/
.na {
font-size: 90%;
color: var(--theme-text-color-note);
font-weight: bold;
font-style: italic;
}
/********* [[Template:Color box]] *********/
.color-box {
display: inline-block;
margin: 1px 0;
vertical-align: middle;
}
/********* [[Template:Transclude]] *********/
.transclude-box {
float: right;
margin: 0.6em 0 0.5em 0.6em;
border: 1px solid var(--theme-box-border-color);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: var(--theme-highlight-background);
padding: 0 7px;
font-size: 90%;
}
/********* [[Template:Protected]] *********/
.protected-box {
background: var(--theme-box-background);
border-color: var(--theme-box-border-color);
}
.protected-box table {
background: none;
}
.protected-box #left,
.protected-box #right {
width: 50%;
vertical-align: top;
padding: 1.3em;
}
.protected-box #left div,
.protected-box #right div {
font-size: 120%;
font-weight: bold;
margin-left: 1.3em;
}
.protected-box #left {
padding: 1.3em 5% 1.3em 1.3em;
}
/********* [[Template:Loot]] *********/
.loot-table tr:nth-child(2).topline td {
border-top: 0;
}
/********* [[Template:Editcopy notice]] *********/
.editcopy-notice {
text-align: center;
margin: 0.75em 2px 0;
}
.editcopy-notice > div {
border: 1px solid var(--theme-box-border-color);
-moz-border-radius: 5px;
border-radius: 5px;
background: var(--theme-highlight-background);
padding: 0.5em;
max-width: 25em;
margin: auto;
font-style: italic;
}
.editcopy-notice > div span {
display: inline-block;
}
/********* [[Template:Licensebox]] *********/
.message-box.licensebox {
/* override the "width:fit-content" from .message-box */
width: 100%;
}
.licensebox.licensebox_re-logic .icon,
.licensebox.licensebox_fairuse .icon {
filter: var(--ooui--icon-normal-filter);
}
/********* [[Template:GetDropInfo]] *********/
.dropinfo br {
content: "";
}
.dropinfo br::after {
content: " / ";
}
.dropinfo .mode-content span + span::before {
content: " / ";
}
/********* [[Template:Doc]] *********/
.feature,
.documentation {
background: var(--theme-box-background);
border: 1px solid var(--theme-box-border-color);
border-radius: 5px;
padding: 10px;
clear: both;
}
.documentation_header {
padding-bottom: 3px;
border-bottom: 1px solid var(--theme-box-border-color);
}
/********* [[Template:Exclusive icons]] *********/
/* Template:eicons
.eico:before => d (.i1)
.eico b:before => c (.i2)
.eico b:after => o (.i3)
.eico b => m (.i4)
.eico i:before => 3 (.i5)
.eico i:after => unused
.eico i => unused
.eico:after => unused
*/
.eico {
--width: 0;
--height: 16px;
--small-scale: 0.75;
--gap: 0;
--base-gap: 2px;
}
.eico span {
/* hidden text for SEO */
display: none;
}
.eico,
.eico b,
.eico i {
padding-right: var(--width);
}
.eico,
.eico:before,
.eico:after,
.eico b,
.eico b:before,
.eico b:after,
.eico i,
.eico i:before,
.eico i:after {
display: inline-block;
vertical-align: middle;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
height: var(--height);
width: var(--width);
margin-right: var(--gap);
}
.eico.s {
margin-right: calc(-1 * var(--base-gap) * var(--small-scale));
}
.eico.s,
.eico.s b,
.eico.s i {
padding-right: calc(var(--width) * var(--small-scale));
}
.eico.s,
.eico.s:before,
.eico.s:after,
.eico.s b,
.eico.s b:before,
.eico.s b:after,
.eico.s i,
.eico.s i:before,
.eico.s i:after {
width: calc(var(--width) * var(--small-scale));
height: calc(var(--height) * var(--small-scale));
}
.eico,
.eico b,
.eico i,
.eico.s,
.eico.s b,
.eico.s i {
width: auto;
background-position: right center;
}
.eico.i1:before,
.eico.i2 b:before,
.eico.i3 b:after,
.eico.i4 b,
.eico.i5 i:before,
.eico.i6 i:after {
--gap: var(--base-gap);
}
.eico {
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
vertical-align: middle !important;
white-space: nowrap !important;
margin-right: calc(-1 * var(--base-gap));
}
.eico.j {
/* Japanese console version */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAYAAABr5z2BAAAApElEQVQoka2SQQrEMAhFPaU5mgeb3sBF6CJpGrML6Z9NO0zoZJiWET4I6gO/kqrCzJBzviQzg/cetCwLRrG1hq21YT3n/BlQQ0AUgTJDmRFEUEMYAFIPqDFCmTER4bFrIoIyo8bY9ZrZGRBEXsPTriMPImdASqnbWZ3rht8h6lznyf8Bt1ZY1/W2iaWUMwD4/YxDwLsn3x6plALy3l9+40PzPOMJC/qV2WNuhKAAAAAASUVORK5CYII=);
width: 16px;
height: 12px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}
.eico.j.s {
width: 12px;
height: 9px;
}
.eico.i1:before {
/* Desktop version */
content: "";
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAYAAABr5z2BAAACp0lEQVQokY2SzUuTcQDHf7haiHjwb/DgSeR3kFGtZeqaLufbHva0mpYoPOIYk9RGoBEmy0wmpEhkGyk8tmVmloHvNdG5x+m02V58aw7nG9Ompw4dvp0KvPW5fuBz+hDyn2g1GhXLMBzDajmGYTkdU8qVqQtURKPVqFidjititFyptpwr0lVyKl0lp9RWckq2glMxOq6U1XJqtbr6cH8PkZ19RLZ3cHJ0gNvqgmpSWFhQvX0Yg//oN7xxwHUMzMWBhTiwcgSEYr8QiZ1i+NMI3HMuuNwCBMED18w0SpRyPVEo5fpg9BA3atuQ++A1ch46oGh+j5LWYZQ/e4eG5/0IROP4PDaJaDSKra0wNta3EA2HUSCX64lSIdd7w/vIrX+Biv51lDki0L3Zxl1+DTV9S6jtGsZS5BT2wRFMTX7B+PgkpqenMTU2iizpRSOR58iMwuYBLtfbkN2xAFnHIq5YPLjaNoc88yiqOj5gZj0Ox/A4AoEQfD4fAqvfsRb0Q3ZJUkeysmTGr74fkJn6cM3ixvXubyjsCYLt3UQVH0ID78F46AQ9/BBWfX44nU7YXr2ERxAgyZTUEYkks84dCOPO07fQdTlR3euFgfehfjCIxiE/2j+uYGJ1D+3dNszOuzAxNYVlnxeCIIBmUBORSqV1iyurcC6vYza4C+/2TyxsxrAUPoY7tAuXbwPzy36o2VtQ39QgjymGimVQXFyMRJGYJ5RSLaXUlJ6ebqKUmqxWK2w2G6xWKyilpoyMDBOl1EQI6awxGlBz/x4etbfCYDAgkYg6z9yWmpraZLfbMTAwAIfDgbS0tKa/LjEpyfK41YxGczOa256gpaUFFxLOWc4EkpOTzdnZ2Xx+fj6vUCj4lJQU8z+ZQHgiSuCJWMQTsYgXi8X8eZGI/wPwz6C3jZnAMAAAAABJRU5ErkJggg==);
--width: 16px;
}
.eico.i2 b:before {
/* Console version */
content: "";
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAANCAYAAABPeYUaAAACjklEQVQokY2SS08aYRiFv4UxI5dejCFk2kxQdEKMKa0/qQ1iqiVpKw29KKvZGYq0BEQtOCCKVSsCQ0UQhRkuVdA0WlQiRY0umvgbTheaxjQsfLZP3nPexSHkBu1axqBjWYNOqzOQBrRrGQPbrjWwDNvQE023xnp+cYKLkzPUj+vo6NRZb3r2MWs9PavhvH6Kyz+X6PzPE9LSZBGLEvJ5Caf136jXaijtlMF2d1s7ejqtHY9Ya3mvjHq9hsPKPqqHR5AkCU3yFsvVvVxpcTqdEEURmewGht+/xY9CDok1AdXqIY5rVVSrVQhCFJKUhdHwDIWcCEnKwuV2Qi5vsRAlpeRWFsMIzc7hzdArvB56iXeWIfi8bqTXE8iJEjLpDKa9Pgw+78fR0QH6jE+xMB/E0sIcZDKKIwpKyYWC80iuJuCdmsDIyAeImXXEoouIhBexvPQNkeUI4jEB6VQSL0wDcLk/IfE9ivnQDCiqmSMK5V3O7nAgHA7ji3cSodkg/NM+DAwa4fG44ZnyYHxyAv39feB5H+aCAXx2jOHrQggOhx0KhYwj1B3FMD/rx/7BTwjCChx2G+y2UYyPuzAT9GMjswmfn4fL7YTNNoox20fEYwJ+VfYQmOHR2npvmKhptTmRiuO4VsHWtoTVRBy8bxoKGcX16p/w+h49r9f38jKZjAsEAkiuJrFdLCGflxCNrUBNq8yE0TImUcygUMygvFOAIEQhU1Bcoy01K5u5SCSG3dIuSlvbyOclMAxjIg80GmN5dweFYg6xSBg0TZsbrvGaNlpljoajKEgFVPYq6NJqjeShRmPayGSRWlu7eu0W3Fe3mdPpTaSSaTBdGiMhhBC1ijbTKvWtAv4F0Spz23XpX3tXlLpeYi2zAAAAAElFTkSuQmCC);
--width: 17px;
}
.eico.i3 b:after {
/* Old-gen console version */
content: "";
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAYAAAAiYZ4HAAACcUlEQVQokXXRW0hTAQAG4PMSDdkl1+atmTbPEEw8bpKYI7TQKDNyRan54GWblacUzU1ZOtGz0mIuiYi00zY3tVLoxS4vBx8KJWPkhdxyO2qWVoRFtxfr4e+lAiX/1///nn6CWBcmUq63yeRolcagVRqnX9+vSasiRn9ZIsJqvRkrdB3sslhcUpAbI4dcjqXc/cDR4/hZdBK/6Gq0S6OxIeiQScHv2o1P6nR835eNH0UlaJNEbQwaFREYVachkJiMhdRUBHNy0RwT/3+gVUSZjoVLTB2yCDxNy8BYqhqdIhEKJeGmvXE7TGvGKlWC6dv7Jaz6AxjSn4EpIhZN8ig8MhjwxfcMn9+9QULCH6RQqcwzfBA8H8QNG4MB8wU0a7Ngy9Difn0tmJoq8HOvsLj0Ftvj481EJBln8c/PYnFxDtfbWoBQEI2ZWtgP5OD13T40nzJiIRTEfIgHSZIWIoUkLTPPx7Hsn0aXxYzQ42HcpCvB0kYEBvvRYjDgw0wA874XSI7eZiGyhDKrz+nBx5EnYBsaYa+twcNeFg/6WFgry3DLVI+VkRFMeb3YIxRbicMCqfWarhhO/VlMuO+A6x9AQw2Numoaw14Pvo6Nwm00ovNIAQ4JhVYihxAwVw7qYC8oxoT7HpZ9k+AnX2J2yo+FiWmMO124mJcHh06HPLGYIbLFW5muUiPaS8rRVFKO82UGnNOfRpWBRnVFJdpKK2ArPIGr5WXIDAtjCI1SmR8tEjn62R54brPwOt3odbnhdHvgdnkwyLow1N0D5RapI12pyv933iaJoDuRSuIoiuIoiuKSNBpup1rDUSkpnGizoPvv7jfmDU3XQ9W5ywAAAABJRU5ErkJggg==);
--width: 12px;
}
.eico.i4 b {
/* Mobile version */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAQCAYAAADAvYV+AAACZ0lEQVQokT3SyU8TYQBA8e8fU2OQqMQYCQejB3EFFO0ww0wBgSIBGmJAQGUKTmmhdNMGsNS2WEHKXqBYQUSw4sKFLXgwERA1zwOJh9/tHZ8QQghXp0d3OQK4nL04XX463F4MtxfD7ae96xl2l18XQgjh8nXrRpeXH/uwswcbB7D++9DWAWzvgs3ho9vn0YXd7WRj7y91zmGqPQtU+BYp9y9h8S5S60nS6HrFzi8wOjsRrYaN9PYumn2CQmeags5V8rpWueVcRXHMYzGGSG/9oUlvQzxpa+fjxj6m1hku29LkGqvkGmmuGCvkt6dQbMO824ZG3Y6wPW5lae0nN5oTnG9e5uKjpf8uPXxLXkuc2U2of+xANLQ0MfP5OxesQ5ypTZJtnSHbOsNZ6wLZdUnOW2OMrEFNiwNR1/SA0ZUtcu7FyKycIqtqjCzLBCctb8iqnOacJczQF6hqsiOq6+8z93WP0+YXHCmZ4NjdUTIqxjmqjZNpjnNGCzD8Ccob2hA11gYm329yqrCDE3IPxyU3mbKXjNs+sm57yCkyCCfXKa1tRFRW1TGdWiYYX6BvZJEXI/OEXqd4ObJCePgDwfgCiaVvVNTWIyrKLMwl54nFBpFlmdhABK1I4VUkhiqbiQ4OkkilMJeXIcpUM4mxCWKhCCWSSjQYRTapRMIDKEoRA9EQick4qlaEKNFUZqcmifYGMZuKed7Xzx1Jpj8cRCk2MRgOMTs+SmlJMULVFF2WJcL9IQKBAIFwD4HIU3pCfkLBAAP9EVRJQ5Kkw/NUTdUVRaVQvsNV5RrXtSsUSLlIpvzD8KaqCyHEP/2E67btctK/AAAAAElFTkSuQmCC);
--width: 11px;
}
.eico.i5 i:before {
/* 3DS version */
content: "";
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAJCAYAAABT2S4KAAAD10lEQVQ4jYWSa0xTZxjHj9vM4pZJ39NKz/uWSOPYFJEQLk5AtrWCEm6aCaXQ0x5gzOkiIhMmAg4LzHA90nKJwUUCkngj2+IUw9wyQmEfliw776kW2JaBIc4GzcqEgNzaZx/EDzNuez7/n+T3/+XPUJZUUcQ5qQL/ThGZpCy5L7PYTVnyq4zINSeLP3QyfggAuKrKyrH30vZCZnqGN1cQfHlCDuRaLGAx8SsH8vPv1lirv7p587oRAF5lGIaZmZlRdXV2Vhw7UkjzhJyFPCEHVn+8VZWVd9xu91ZGVpJCGeHPKMJmJwpIdiIuiSJ8UGLxtzLCPllBFqX1/u2PJUlrNGSOqVklxEXHzLfZ7R3NoljW1NBQc7yk5IvUpOQHwUFvQLxOP9NQV9cGAOrG+noxOmr7yo7IqMXysvJLzaJYZjtz5uSpik/PNjU2fe12u7cyALCGec7JKrKXsmSOIgzUj/t+pq/vTd5oHMMqf0jQ66cHBwdjn2YBYK3D4Yg3m/gxjZqD7RGRyz3d3bbDhz76EStVkJiw+9HQ0FA2AKxdza8BgHUA8BLDMAzj3LgRSSrMSyw+ICvwUZkldhnhMQmRecqSW7fX+ccCAMdnrgLo9NMOh2Pns9Dnz507Fr4t1Ef81ZCf977r6uXLtnidbnZToBbidfrp48XF1y/29HwwMTGh/Udx14aAIIrIN1SBf5ZYPEIRfkARXqGIm5VZ7qr8iioCAPD/AfT396fE7Yhe4pQq2JeSdn9qairsy95eQ/HRolu7d+16FLJ5C7wVEblsyTb90t7aan04OUmeKDQYXpS0WsWoRqN0bdByt5WBwRRpDkos+YMiDJKfWp4srXgnOyt75D8NfH6+6KkBwWQanZubI6vKXxsYGNDV19a27ktNvafVBEBkWPjK6erqG8xvQUEvP28HroAAliIy/GQD6tlxg8liNJpc/7aB4eFhvcCbRzRqDsK3hfpa7HYRABQA8MIzloR3Y3cuqFklZBsyFxmKcI+sxGdlBSmUEcmSWS7DqSQFFHE3ZIQXKYsfS+v9u/7s6grJMhhH1awS4mJi5tvsrR3NolgmNjZWl5aU9KYlJU9t3vQ6vB0Tu1BltV7weDyh7W1tvSdPnOhuFsVTrTbbxy22lk+KCo70h2wJ9kWFhS/XWK19DGVJJ0XcHcqSe5KCPKQKMk0R9xdF+K6MyDXKkryfGOQHAFx5aenInvgEb0pi4pIxPcNrzMjwGfan+wz700HgzZ6K8vLvrly5dMjj8fgBgLK+tu6HHLPFK/A8CLx5JdcieAWeXyo8XODq6Og4PT4+Hvg3tXbwvaiwAi8AAAAASUVORK5CYII=);
--width: 32px;
}
/********* [[Template:Etext]] *********/
.etxt {
white-space: nowrap;
}
.etxt .eico {
margin-left: calc(var(--base-gap) + 1px);
margin-right: calc(var(--base-gap) + 1px);
}
.etxt .eico.s {
margin-left: calc(var(--base-gap) * var(--small-scale) + 1px);
margin-right: calc(var(--base-gap) * var(--small-scale) + 1px);
}
.etxt .eico:first-child {
margin-left: auto;
}
.etxt .eico:last-child {
margin-right: auto;
}
/********* [[Template:Exclusive icon link]] *********/
.eil {
white-space: nowrap;
}
.eil > span:first-child {
display: inline-block; /* gracefully wrap */
}
.eil .eico {
margin-left: 2px;
}
/********* [[Template:Hardmode]] *********/
abbr.hardmode > span.sep {
padding: 0 0.3em;
color: var(--theme-text-color-note);
}
/********* [[Template:Msgbox]] *********/
.message-box {
margin: 1px auto var(--layout-gap);
width: fit-content;
background: var(--theme-box-background);
border-radius: var(--theme-box-border-radius);
overflow: hidden;
display: grid;
border: 1px solid var(--theme-box-border-color);
grid-template-columns: 0fr 0fr 1fr;
align-items: center;
}
.message-box::before {
content: "";
display: block;
pointer-events: none;
width: 6px;
height: 100%;
/* darken a little */
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
var(--message-box-highlight-color, var(--theme-box-border-color));
}
.message-box > div {
grid-column: 3/4;
padding: 6px 12px;
}
.message-box > .icon {
padding: 6px 0 6px 12px;
grid-column: 2/3;
white-space: nowrap;
}
.message-box.msgbox-color-blue {
--message-box-highlight-color: var(--theme-notice-blue-border-color);
}
.message-box.msgbox-color-red {
--message-box-highlight-color: var(--theme-notice-red-border-color);
}
.message-box.msgbox-color-purple {
--message-box-highlight-color: var(--theme-notice-purple-border-color);
}
.message-box.msgbox-color-yellow {
--message-box-highlight-color: var(--theme-notice-yellow-border-color);
}
.message-box.msgbox-color-green {
--message-box-highlight-color: var(--theme-notice-green-border-color);
}
.message-box.msgbox-color-orange {
--message-box-highlight-color: var(--theme-notice-orange-border-color);
}
.message-box.msgbox-color-pink {
--message-box-highlight-color: var(--theme-notice-pink-border-color);
}
/********* [[Template:Item]] *********/
.i {
white-space: nowrap;
display: inline-block;
}
.i .note2,
.i .id {
display: block;
}
.i > a.new {
/* CSS trick for non-existent item images: a orange "?" image */
display: inline-block;
width: 16px;
height: 24px;
text-indent: -9999px;
direction: ltr;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAB3SURBVDhP5ZDdCoAgFIPPI/aY3fSMRrBJTOcRkW76YKDuhyiU64gyEmKeXuktxFoYKOdYdmh5QIu8OzVDznCaHsAHVmzOGoLN8aBCr8L3/QMZDFLfDWhhukiWB7TIO4WYh8HtA7Bztg2oYOf0yo9g57Dwm38QcQN+/9SIQx7WTAAAAABJRU5ErkJggg==");
background-repeat: no-repeat;
background-position: center center;
}
.i > img,
.i > span.img,
.i > a {
/* item image block */
display: inline-block;
line-height: 0;
vertical-align: middle;
}
.i > img + span,
.i > span.img + span,
.i > a + span {
/* "main" text block after item image */
margin-left: 2px;
}
.i > img,
.i > span.img img,
.i > a img {
/* item image */
margin: 1px;
}
.i > span {
display: inline-block;
text-align: left;
}
.i > span + span {
/* "bignote" after text block */
margin-left: 3px;
}
.i.multi-line > span,
.i.-w > span,
.i.break > span {
line-height: 18px;
vertical-align: middle;
}
.i.break > span {
white-space: normal;
}
.i .note {
color: var(--theme-text-color-note);
font-size: var(--font-size-s);
}
.i > span:first-of-type > .eico {
font-size: var(--font-size-xs);
vertical-align: middle;
}
.i > span:first-of-type > .note2 {
/*note2*/
font-size: 100%;
line-height: 1;
}
.i > span:first-of-type > .eico,
.i > span:first-of-type > span.note {
margin-left: 3px;
}
.i.-w > span:first-of-type > .eico:last-child,
.i.-w > span:first-of-type > span.note:last-child,
.i.-w > span.img + span > .eico:last-child,
.i.-w > span.img + span > span.note:last-child {
display: block;
margin-left: 1px; /* visually left align */
}
.i.-w > span:first-of-type > span.note:last-child,
.i.-w > span.img + span > span.note:last-child {
line-height: 1;
}
.i .id {
font-size: var(--font-size-xs);
background-color: var(--theme-accent-color);
font-weight: bold;
margin-top: 1px;
padding: 0 2px;
}
.i.boldname > span:first-of-type span:first-child {
font-weight: bold;
}
.i.notecolor span.note {
color: inherit;
}
.i.note2color .note2 {
color: inherit;
}
.i.block,
.i.block > span:first-child,
.i.allblock,
.i.allblock > * {
display: block;
}
.i.allblock > * {
text-align: inherit;
}
.i.notesize span.note {
font-size: 100%;
}
.i.note2size span .note2 {
font-size: var(--font-size-s);
}
.i.alignleft {
text-align: left;
}
.i.aligncenter {
text-align: center;
}
.i.alignright {
text-align: right;
}
.i.textleft > span {
text-align: left;
}
.i.textcenter > span {
text-align: center;
}
.i.textright > span {
text-align: right;
}
.i.flip > a:first-child img,
.i.flip > img:first-child {
transform: scaleY(-1);
}
.i.mirror > a:first-child img,
.i.mirror > img:first-child {
transform: scaleX(-1);
}
.i.rotate90 > a:first-child img,
.i.rotate90 > img:first-child {
transform: rotate(90deg);
}
.i.rotate180 > a:first-child img,
.i.rotate180 > img:first-child {
transform: rotate(180deg);
}
.i.rotate270 > a:first-child img,
.i.rotate270 > img:first-child {
transform: rotate(270deg);
}
td.il1c .i {
display: block;
text-align: center;
}
td.il1c .i.alignleft {
text-align: left;
}
td.il1c .i.alignright {
text-align: right;
}
td.il2c .i {
display: block;
text-align: left;
}
table.item-noborder td.il1c {
border-right: 0 !important;
padding-right: 1px;
}
table.item-noborder td.il2c {
border-left: 0 !important;
padding-left: 1px;
}
/********* [[Template:Reflist]] *********/
/* based on https://en.wikipedia.org/wiki/Template:Reflist/styles.css */
.reflist {
font-size: 90%; /* Default font-size */
margin-bottom: 0.5em;
list-style-type: decimal;
}
.reflist .references {
font-size: 100%; /* Reset font-size when nested in div.reflist */
margin-bottom: 0; /* Avoid double margin when nested in div.reflist */
list-style-type: inherit; /* Enable custom list style types */
}
/* Reset top margin for lists embedded in columns */
.reflist-columns {
margin-top: 0.3em;
}
.reflist-columns ol {
margin-top: 0;
}
/* Avoid elements breaking between columns */
.reflist-columns li {
page-break-inside: avoid; /* Removed from CSS in favor of break-inside c. 2020 */
break-inside: avoid-column;
}
.reflist-upper-alpha {
list-style-type: upper-alpha;
}
.reflist-upper-roman {
list-style-type: upper-roman;
}
.reflist-lower-alpha {
list-style-type: lower-alpha;
}
.reflist-lower-greek {
list-style-type: lower-greek;
}
.reflist-lower-roman {
list-style-type: lower-roman;
}
/********* [[Template:Translation projects]] *********/
#indic-project.collapsed .text-wrapper {
display: none;
}
#indic-project.expanded {
border: 1px solid var(--theme-box-border-color);
border-radius: 0.2em;
padding: 0.5em;
background: var(--theme-box-background);
}
#indic-project.expanded #indic-project-flag {
margin-left: 1em;
}
.client-js #indic-project-flag {
/* the cursor should not be pointer if JavaScript is disabled (because
* the flag can't be clicked in that case); see also
* https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#.client-js_and_.client-nojs */
cursor: pointer;
}
#indic-project-flag > img {
border: 1px solid var(--theme-box-border-color-invert); /* border around the flag to improve visibility */
}
/********* [[Template:Yes]], [[Template:No]] *********/
.t-yes,
.t-no {
width: 20px;
height: 20px;
display: inline-block;
color: transparent;
background-size: contain;
}
.t-yes {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABKVBMVEX///8POg9bzFsSqBIPhg8POg8POg8POg8POg8eVx4POg8POg8dVR0POg8cVBwPOg8POg8cVBwVRhUPOg8POg8cUhwWSBYPOg8POg8bUBsYTBgPOg8POg8aTxoZTRkPOg8WSBYXShcPOg8POg9WwlY1hDVVwFU6vDpRx1EyfTIyuDISqBI7vDtLrUtTvlMvti8SohI2tzZNsU0stSwRmhEnpCdRvVEosygQlxAopChOsk5Ptk89kz1RvFEmsiYQlhAppClRuVFAv0BMxEwYSxhPuk8jsCMRlBErpitOtE4pbClZy1kgryAVqRVDwENWyVYhsCERkxEspywveC9Ow04UkhQRnhEZpxkQkBAuqS4udi5QxFASjhIPhg8tdC1SxlI2sDYtcy3///96G+hpAAAAJHRSTlMAAAAAADaZZjPzeDDwYPCHLe3eGyrt25Z17d+QJ+rfGNjZFU4CAy6JAAAAAWJLR0QAiAUdSAAAAAd0SU1FB+QIExEnKMFJk1wAAAABb3JOVAHPoneaAAAAxElEQVQY02NgIAEwIgFWNnZGRpAgEwJwcKqockEEmWGAm0dNXUOTF0WQm09NS1tHlx8iyAIGAoJ6+gaGRkLCSIIionrGJqZGYsIQM4XFJYBikmbmFpZWYsJMYEFhKWsbaRlZWzt7B6AYM0RQztHJ2cbF1c3dw1NMngUq6OXt4+vnHxAYBBKDCXIFh4SGhUdEeioAxWCCTFxR0TGxkZ6KIDG4IDNXXHyCtaISC7IgExNXIlAMFgCMsFBSZldCBBUpQYwNAADsdBhCcqhwpwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wOC0xOVQxNzozOTo0MCswMDowMF4hGvUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDgtMTlUMTc6Mzk6NDArMDA6MDAvfKJJAAAAIHRFWHRzb2Z0d2FyZQBodHRwczovL2ltYWdlbWFnaWNrLm9yZ7zPHZ0AAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAXdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADIw3+GomQAAABZ0RVh0VGh1bWI6OkltYWdlOjpXaWR0aAAyMCdOaBQAAAAZdEVYdFRodW1iOjpNaW1ldHlwZQBpbWFnZS9wbmc/slZOAAAAF3RFWHRUaHVtYjo6TVRpbWUAMTU5Nzg1ODc4MM3733wAAAAOdEVYdFRodW1iOjpTaXplADBCyW8Y7QAAADZ0RVh0VGh1bWI6OlVSSQBmaWxlOi8vL3RtcC90aHVtYmxyL2ltZzExODc4ODM3MDA5OTYzNjkxNjgz9+auPAAAAABJRU5ErkJggg==");
}
.t-no {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAABMlBMVEX///9eAAD/YmL+AADGAABeAABeAABeAABeAABeAAByDAxeAAByDAxeAABeAABzDQ1eAABeAABxDAxeAABeAABeAABzDQ1rCAh3Dw9tCQl5ERFuCgpeAABeAAB1Dg5yDAxeAABlBAReAABeAABeAABvCgpzDQ1eAABzDQ1eAABeAACvMjLoVFSiKiqsLy//Vlb/NjbqVVX/Ojr/VVWoLS3kUlL/NDT+AAD+MDDsVlb/MzPbTEzuWFj+Ly//MjKEFxf+Li7hUFD/YmLyWlr+FxfmU1OLHBz+FRX+GRmAFRX+Kyv7AADwERH+LCzyAADoHR3kGhrsAAD1JSXYAADhFxeGGBjgFhbTAADwJibsIyPHAADiGBjGAADmICD4SkroICDoHx/4Tk6uMDCmLCyeJyf///8Bf9RuAAAAK3RSTlMAAAAAAFRmG05+4R7fdWDfV4fkPIQk5+Do4+jnIUXn2RWKP3hp4eVR4nKZPdb+ugAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQflAhEQMQDCQ+fJAAAA7klEQVQY02NgIAUwMrKysTOCADsbByMjRJCJU1uHi5uJiYmdR0eXFyrIp6dvABRlZuc3NDI2EYAICpqamVvoCAnzW1qZW1mLQARFxWxsze107C3tzB0cxdmhZopK2FiYmznZmtuaSnLDLGISlXK2Mncxt3WVlmGCCzLLujm5m3s4ecoyIwRlxAy9vH287XSE2OGCQDFfP3+ngEArHR52qKCMnGVQcIhOqE1YeISOvAJEUNEmMirAlUtJzjI6JlZHGSKooh0Xb6rKziKjZpmQmKQONVMkGSgG9Du3hk6KJiMslFS0IKHErcUGCyUKAAAKiSBmgCLl9AAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0wMi0xN1QxNjo0OTowMCswMDowMGR5URYAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMDItMTdUMTY6NDk6MDArMDA6MDAVJOmqAAAAIHRFWHRzb2Z0d2FyZQBodHRwczovL2ltYWdlbWFnaWNrLm9yZ7zPHZ0AAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAXdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADIw3+GomQAAABZ0RVh0VGh1bWI6OkltYWdlOjpXaWR0aAAyMCdOaBQAAAAZdEVYdFRodW1iOjpNaW1ldHlwZQBpbWFnZS9wbmc/slZOAAAAF3RFWHRUaHVtYjo6TVRpbWUAMTYxMzU4MDU0MP1XuP0AAAAQdEVYdFRodW1iOjpTaXplADgxN0Iis7AJAAAANXRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vdG1wL3RodW1ibHIvaW1nNzI4Nzk1MDY5NDMyNjgxODQ2NAFjgaMAAAAASUVORK5CYII=");
}
/********* [[Template:Expert]], [[Template:Master]], [[Template:Journey]] *********/
abbr.mode-exclusive {
text-decoration: none;
}
.mode-exclusive {
font-weight: bold;
}
.mode-exclusive[title] {
cursor: pointer;
}
.mode-exclusive > span.postfix {
display: none;
}
.mode-exclusive > span.sep {
padding: 0 0.3em;
color: var(--theme-text-color-note);
}
.money .mode-exclusive > span.sep {
padding: 0 0.5em;
}
.expert {
color: var(--custom-template-expert-color);
}
.master {
color: var(--custom-template-master-color);
}
.journey {
color: var(--custom-template-journey-color);
}
/********* [[Template:Use time]], [[Template:Knockback]] *********/
.usetime,
.knockback {
font-size: 10.5px;
font-weight: bold;
}
/********* [[Template:Hatnote]] *********/
/*
* "Hatnote"-style templates:
* [[Template:About]]
* [[Template:Dablink]]
* [[Template:Distinguish]]
* [[Template:Forlist]]
* [[Template:Main]]
* [[Template:Redirect]]
* [[Template:See_also]]
*/
.hat-note {
margin: 8px auto 8px 24px;
font-style: italic;
}
.hat-note.no-indent {
margin-left: auto;
}
/********* [[Template:Float file box]] *********/
.floatfilebox {
/* infobox-like styling */
border: 1px solid var(--theme-box-border-color);
border-radius: 8px;
padding: 6px;
font-size: 12px;
background-color: var(--theme-box-background);
line-height: 1.5;
text-align: center;
width: 150px;
margin: 0.5em 1em 0.5em 0;
}
.floatfilebox.float-right {
float: right;
margin-right: 0;
margin-left: 1em;
}
.floatfilebox.float-left {
float: left;
}
.floatfilebox.float-none {
float: none;
}
.floatfilebox > div {
/* row elements */
padding: 3px 4px;
}
.floatfilebox > div.title {
/* "title" row elements */
background-color: var(--theme-highlight-background);
font-weight: bold;
margin-bottom: 0.5em;
padding-top: 5px;
padding-bottom: 5px;
}
.floatfilebox > div.title:not(:first-child) {
/* space above "title" rows, but not if the "title" row is the very first row */
margin-top: 0.5em;
}
.floatfilebox > .floatfilebox-even + div {
/* little bit of space after every 2 rows */
margin-top: 0.5em;
}
/********* [[Template:Shortcut]] *********/
.shortcutbox {
/* infobox-like styling */
border: 1px solid var(--theme-box-border-color);
border-radius: 8px;
padding: 6px;
font-size: 12px;
background-color: var(--theme-box-background);
line-height: 1.5;
text-align: center;
margin: 0 0 0.5em 1em;
float: right;
clear: right;
}
.shortcutbox > div {
padding: 2px 3px;
}
.shortcutbox > div.title {
background-color: var(--theme-highlight-background);
font-weight: bold;
padding-top: 3px;
padding-bottom: 3px;
}
@keyframes spr-ani {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
.spr-ani {
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
.spr-ani img {
image-rendering: pixelated;
animation: calc(var(--frames) * var(--interval, 1) * 1s / 60)
steps(var(--frames)) infinite spr-ani;
width: 100%;
height: auto;
}
.spr-ani.block {
display: block;
}
/***********************************************************************************************************
* CSS that only affects specific content pages
***********************************************************************************************************/
/********* [[Terraria Wiki]] *********/
/* Wiki main page.
* The responsive layout relies on [[MediaWiki:Common.js]] to adapt to different skins. */
#box-wikiheader,
#box-game,
#box-news,
#box-items,
#box-biomes,
#box-mechanics,
#box-npcs,
#box-bosses,
#box-events,
#box-software,
#box-wiki {
border: 1px solid;
border-color: var(--theme-widget-border-color);
border-radius: 8px;
}
/********* [[Hooks]] *********/
#Hooks-Pre-Hardmode-table th,
#Hooks-Hardmode-table th {
line-height: 18px;
}
#Hooks-Pre-Hardmode-table td:nth-child(3),
#Hooks-Pre-Hardmode-table td:last-child,
#Hooks-Hardmode-table td:nth-child(3),
#Hooks-Hardmode-table td:last-child {
text-align: left;
}
#Hooks-Pre-Hardmode-table td:nth-child(8),
#Hooks-Hardmode-table td:nth-child(8) {
text-align: right;
}
#Hooks-Pre-Hardmode-table td:last-child,
#Hooks-Hardmode-table td:last-child {
font-size: var(--font-size-s);
line-height: var(--line-height-s);
}
/********* [[Accessories]] and its related pages, [[Light sources]] *********/
.table-accessories tr {
height: 3.5em;
}
.table-accessories td {
position: relative;
}
.table-accessories td sup {
position: absolute;
right: 0.25em;
top: 0.25em;
}
.table-accessories td:last-child,
.table-accessories td:nth-child(4) {
text-align: center;
}
/* for music box accessories */
.table-accessories td:nth-child(3) {
text-align: left;
}
/********* [[Paintings]] *********/
.Paintings-table td:last-child,
.Paintings-table td:nth-last-child(2) {
text-align: left;
}
.Paintings-table td:nth-last-child(2) {
white-space: nowrap;
}
#Painter-sell-table td:nth-last-child(2) {
white-space: normal;
}
#Painter-sell-table td:nth-last-child(3) {
text-align: left;
white-space: nowrap;
}
#Paintings-chance-list li {
line-height: 3em;
}
#Paintings-chance-list li > span:last-child {
display: inline-block;
width: 50px;
text-align: right;
}
#Paintings-chance-list .i {
display: inline-block;
width: 270px;
}
/********* [[Fishing Poles]] *********/
#fishing-poles-table th {
line-height: 1.25;
}
#fishing-poles-table td:nth-child(3),
#fishing-poles-table td:nth-child(8),
#fishing-poles-table td:nth-child(9),
#fishing-poles-table td:nth-child(10) {
text-align: left;
font-size: 85%;
}
/* [[Light sources]] */
#table-portable-light-source td:first-child,
#table-portable-light-source td:nth-child(2) {
text-align: left;
}
#table-Furniture td:first-child {
text-align: left;
}
#table-Novelty-lights td:first-child,
#table-Novelty-lights td:nth-child(2) {
text-align: left;
}
#table-Light-Pet td:first-child {
text-align: left;
}
#table-buffs td:last-child,
#table-buffs td:nth-child(2) {
text-align: center;
}
#table-Furniture2 td:first-child {
text-align: left;
}
#table-Accessories td:last-child {
text-align: center;
}
#table-Blocks td:last-child {
text-align: center;
}
#table-Growable td:nth-child(2),
#table-Growable td:last-child {
text-align: center;
}
#table-other td:nth-child(2) {
text-align: center;
}
#table-world-generation td:first-child {
text-align: left;
}
/********* [[Drills]] *********/
#drills-Effectiveness-table td:first-child {
text-align: left;
}
/********* [[Pickaxes]], [[Mining speed]] *********/
#pickaxes-table th {
line-height: 1.25;
}
#pickaxes-table td:first-child,
#pickaxes-table td:nth-child(2) {
text-align: left;
}
/********* [[Bunny]] *********/
#bunny-variants {
float: right;
text-align: center;
width: 130px;
}
#bunny-variants img {
margin: 0.5em auto 0.25em;
}
#bunny-variants .npc-id {
background: var(--theme-highlight-background);
padding: 2px 0;
font-weight: bold;
text-align: center;
font-size: 10.5px;
}
/********* [[Help:Creating animated GIFs]] *********/
#table-gif td {
vertical-align: top;
}
/********* [[Terraria Wiki:Projects]] and subpages *********/
.projects-wrapper {
border: 1px solid var(--theme-box-border-color);
vertical-align: top;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 7px;
}
.projects-header {
background: var(--theme-highlight-background);
padding: 7px;
font-weight: bold;
text-align: center;
font-size: 140%;
}
/********* [[Terraria Wiki:List of administrators]] *********/
.admin-table-mainheading {
padding: 5px;
margin: 3px;
font-size: 110%;
color: var(--theme-accent-label-color);
white-space: nowrap;
}
.admin-table-mainheading-inactive {
padding: 3px;
margin: 3px;
color: var(--theme-accent-label-color);
white-space: nowrap;
}
.admin-table-subheading {
background: none;
}
/********* [[Evil biome#Corruption and Crimson counterparts]] *********/
#cc-counterparts td:nth-child(3) {
border-left-width: 1px;
}
/********* [[Guide:Game progression graph]] *********/
#progression-graph {
overflow: auto;
}
#progression-graph .diagram {
margin: auto;
}
#progression-graph .diagram big {
display: block;
line-height: 1.3;
font-size: 130%;
}
#progression-graph .diagram small {
display: block;
line-height: 1.3;
font-size: 80%;
}
.game-progression.legend {
white-space: nowrap;
display: inline-block;
color: var(--theme-text-color);
border: 2px var(--theme-box-border-color) solid;
padding: 2px 0.5em;
border-radius: 6px;
}
.game-progression.box {
background-color: rgba(255, 255, 255, 0.15);
}
.game-progression.biome {
border-color: var(--theme-notice-green-border-color);
}
.game-progression.boss {
border-color: var(--theme-notice-red-border-color);
}
.game-progression.miniboss {
border-color: var(--theme-notice-red-border-color);
border-style: dotted;
}
/********* [[Guide:Armor progression]] *********/
.armorg-subh {
font-size: 95%;
}
/********* [[Axes]] *********/
#axes-table td:first-child,
#axes-table td:nth-child(2) {
text-align: left;
}
/********* [[Hammers]] *********/
#hammers-table td:first-child,
#hammers-table td:nth-child(2) {
text-align: left;
}
#hammers-table th {
line-height: 1.25;
}
/********* [[Health]] *********/
#Preventing-damage-table td:nth-child(2) {
text-align: center;
}
#Preventing-Drowning-table td:nth-child(2) {
text-align: center;
}
#lava-safety-table td:nth-child(2) {
text-align: center;
}
#Healing-table td:nth-child(2),
#Healing-table td:nth-child(3) {
text-align: center;
}
#Regeneration-table td:nth-child(2) {
text-align: center;
max-width: 280px;
}
#draining-table td:nth-child(2) {
text-align: center;
}
/********* [[Map size]] *********/
#table-mapsizes td:nth-child(2),
#table-mapsizes td:nth-child(3),
#table-mapsizes td:nth-child(4),
#table-mapsizes td:nth-child(5) {
text-align: right;
}
/********* [[NPC spawning]] *********/
#NPC-spawning-table-1 td:first-child {
text-align: left;
}
/********* [[Player stats]] *********/
#Horizontal-movement-table td:first-child {
text-align: left;
}
#Medium-movement-table td:first-child {
text-align: left;
}
/********* [[Pickaxe power]] *********/
#in-game-table td:first-child {
text-align: left;
padding: 0.5em 0;
}
/********* [[Template:Item infobox/doc]], [[Template:Npc infobox/doc]] *********/
table.lined .infob-doc-no-border-b td {
border-bottom: 0;
}
table.lined .infob-doc-medium-border-t td {
border-top: 2px var(--theme-box-border-color) solid;
}
/********* [[Potion Sickness]] *********/
#Potion-Sickness-table td:last-child {
border-left: 1px var(--theme-box-border-color) solid;
text-align: center;
}
#Potion-Sickness-table td:first-child {
border-left: 0;
text-align: left;
}
/********* [[Angler/Quests]] *********/
#angler-quests-table td:first-child {
font-style: italic;
}
/********* [[Whips]] *********/
#whips-table td:nth-child(4) {
text-align: left;
font-size: 85%;
}
/********* [[Achievements]] *********/
.trw-toggleable.achievements .trw-togglehandle {
text-align: center;
}
.trw-toggleable.not-toggled.achievements thead,
.trw-toggleable.not-toggled.achievements tfoot,
.trw-toggleable.not-toggled.achievements td {
display: none;
}
.trw-toggleable.not-toggled.achievements table,
.trw-toggleable.not-toggled.achievements tr,
.trw-toggleable.not-toggled.achievements td:first-child {
display: block;
border: 0;
}
.trw-toggleable.not-toggled.achievements tbody {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
align-items: center;
}
.trw-toggleable.not-toggled.achievements .achievement > div > div:last-child,
.trw-toggleable.not-toggled.achievements .achievement > div > i {
display: none;
}
/* Achievement text color */
.trw-toggleable.not-toggled.achievements .achievement > div {
color: var(--theme-text-color) !important;
}
.trw-toggleable.not-toggled.achievements .achievement > div {
color: transparent;
}
.trw-toggleable.not-toggled.achievements .achievement b * {
color: var(--theme-text-color);
}
#ps3wiiu.not-toggled div.achievement:not(:first-child) {
display: none !important;
}
#ps3wiiu.not-toggled div.achievement img[alt="Playstation"] {
display: none;
}
#oldmobile.not-toggled .achievement:not(:first-child) > :first-child {
display: none;
}
#oldmobile.not-toggled td {
position: relative;
min-height: 72px;
min-width: 72px;
}
#oldmobile.not-toggled td:first-child {
display: flex;
flex-direction: column;
justify-content: center;
}
#oldmobile.not-toggled .achievement {
margin-left: 0 !important;
}
#oldmobile.not-toggled .achievement > :first-child {
position: absolute;
left: 0;
top: 0;
height: 100%;
display: flex;
align-items: center;
}
#oldmobile.not-toggled .achievement > div {
padding-left: 64px;
margin-top: 0;
margin-bottom: 0;
line-height: 1.1;
}
@media (max-width: 600px) {
.trw-toggleable.not-toggled.achievements .achievement > div {
display: none;
}
.trw-toggleable.not-toggled.achievements tbody {
display: block;
}
.trw-toggleable.not-toggled.achievements tr {
display: inline-block;
}
}
/********* [[Drowning]] *********/
.drowning-table-no-border {
border: none;
}
.drowning-table-no-border td {
border-bottom: 0 !important;
}
/********* [[Trees/Shaking]] (transcluded on [[Trees]]) *********/
#treeshaking-table ul {
list-style: none;
margin-left: 0;
}
#treeshaking-table td {
white-space: nowrap;
text-align: center;
}
#treeshaking-table td:first-child {
text-align: left;
}
/********* [[Terraria Wiki:Admin noticeboard/header]], [[Terraria Wiki:Community noticeboard/header]] *********/
.noticeboardheader-wrapper {
margin-bottom: 0.75em;
}
.noticeboardheader-header {
text-align: center;
font-size: 140%;
background: var(--theme-highlight-background);
padding: 4px;
}
.noticeboardheader-forumsnotice {
margin-top: 0.5em;
padding: 5px;
text-align: center;
border: 2px solid var(--theme-notice-red-border-color);
border-radius: 0.7em;
background-color: var(--theme-notice-red-background-color);
}
.noticeboardheader-adminslist {
z-index: 500;
float: right;
margin: 10px 0 10px 10px;
}
.noticeboardheader-intro {
padding: 10px;
}
.noticeboardheader-admin-part1 {
border-top: 1px solid var(--theme-border-color);
padding: 10px;
overflow: hidden;
}
.noticeboardheader-admin-part2 {
border-top: 1px solid var(--theme-border-color);
padding: 10px 10px 3px 10px;
overflow: hidden;
}
.noticeboardheader-admin-part3 {
border: 1px solid var(--theme-notice-purple-border-color);
border-radius: 10px;
padding: 5px 10px 10px 10px;
overflow: hidden;
}
.noticeboardheader-community-part1 {
border-top: 1px solid var(--theme-border-color);
font-size: 90%;
padding: 10px;
}
.noticeboardheader-community-part2 {
border: 1px solid var(--theme-notice-purple-border-color);
border-radius: 10px;
font-size: 90%;
padding: 10px;
}
/********* [[Terraria Wiki:Style guide/Disambiguation]] *********/
.disambigexample.terraria {
overflow: unset;
margin: 1.5em 0 1em;
}
.disambigexample > span {
position: absolute;
margin-top: calc(-8px - 1.2em);
margin-left: -3px;
padding-right: 3px;
padding-left: 3px;
background-color: var(--theme-background);
font-size: 80%;
}
/********* [[Guide:Class setups]] *********/
/* overriding the margin-top from the standard .infocard styling;
* we use flexbox's gap on the page instead */
.infocard.guide-class-setups + .infocard.guide-class-setups {
margin-top: unset;
}
/***********************************************************************************************************
* theming.
***********************************************************************************************************/
/***********************************************************************************************************
* base css styles for both interface and content box: font, color, theme vars, etc.
***********************************************************************************************************/
/*** vars, for theming ***/
:root {
--theme-accent-color: transparent;
--theme-accent-color--rgb: 228, 240, 247;
--theme-accent-color--hover: #95c4df;
--theme-accent-label-color: #eae3d1;
--custom-accent-border-color: #afcfe2;
--custom-accent-highlight-color: var(--theme-accent-color--hover);
--theme-page-background-color--secondary: rgba(255, 255, 255, 0.2);
/* the following "--custom-notice-" vars are deprecated, please use the "--theme-notice-" vars directly instead */
--custom-notice-blue-background-color: var(
--theme-notice-blue-background-color
);
--custom-notice-blue-border-color: var(--theme-notice-blue-border-color);
--custom-notice-red-background-color: var(
--theme-notice-red-background-color
);
--custom-notice-red-border-color: var(--theme-notice-red-border-color);
--custom-notice-purple-background-color: var(
--theme-notice-purple-background-color
);
--custom-notice-purple-border-color: var(--theme-notice-purple-border-color);
--custom-notice-green-background-color: var(
--theme-notice-green-background-color
);
--custom-notice-green-border-color: var(--theme-notice-green-border-color);
--custom-notice-yellow-background-color: var(
--theme-notice-yellow-background-color
);
--custom-notice-yellow-border-color: var(--theme-notice-yellow-border-color);
--custom-notice-orange-background-color: var(
--theme-notice-orange-background-color
);
--custom-notice-orange-border-color: var(--theme-notice-orange-border-color);
--custom-notice-pink-background-color: var(
--theme-notice-pink-background-color
);
--custom-notice-pink-border-color: var(--theme-notice-pink-border-color);
--custom-template-expert-color: #ffb556;
--custom-template-master-color: #ff5656;
--custom-template-journey-color: #ff69c4;
--custom-modetabs-expert-background-color: #ffeece;
--custom-modetabs-expert-border-color: #ffca67;
--custom-modetabs-expert-label-color: #eae3d1;
--custom-modetabs-master-background-color: #ffe9e9;
--custom-modetabs-master-border-color: #ffbaba;
--custom-modetabs-master-label-color: #eae3d1;
/*************************************************************************/
--theme-text-color-placeholder: rgba(234, 227, 209, 0.4);
--theme-control-text-color: #000;
--theme-control-text-color-hover: #fff;
/* temp */
--theme-page-background-color: rgba(255, 255, 255, 0.03);
--theme-success-color: #7fc759;
--theme-alert-color: #fe603f;
--theme-dark-color-rgb: 20, 20, 20;
--theme-light-color-rgb: 255, 247, 230;
--theme-shadow-color-rgb: 10, 10, 10;
--theme-box-border-color-light: rgba(255, 255, 255, 0.1);
--theme-box-hover-mask: rgba(var(--theme-dark-color-rgb), 0.25);
--theme-image-button-background: url(https://terraria.wiki.gg/images/d/d4/Button-background-overworld.jpg);
}
/**** Theme vars START ***********************************************************/
/*** base default theme (Overworld/dark) ***/
:root {
--theme-text-color--rgb: 234, 227, 209;
/* common */
--theme-border-color--rgb: 0, 0, 0;
--theme-highlight-background: rgba(20, 20, 20, 0.25);
--theme-box-border-color-inner: var(--theme-box-border-color);
--theme-box-border-radius-inner: 8px;
--theme-box-border-color-invert: rgba(255, 255, 255, 0.1);
--theme-button-background: linear-gradient(
rgba(20, 20, 20, 0.2),
rgba(20, 20, 20, 0.2)
),
var(--theme-button-background-active);
--theme-button-border-color: rgba(151, 107, 69, 0.7) rgba(86, 47, 33, 0.7)
rgba(86, 47, 33, 0.7) rgba(151, 107, 69, 0.7);
--theme-button-background-active: #7b573d var(--theme-image-button-background)
center center / cover repeat-x;
--theme-button-border-color-active: rgb(151, 107, 69) rgb(86, 47, 33)
rgb(86, 47, 33) rgb(151, 107, 69);
/* sidebar/content common */
--theme-box-shadow: 0px 0px 15px 0px rgba(10, 10, 10, 0.7);
/*** sidebar ***/
--theme-sidebar-box-background: linear-gradient(
rgba(20, 20, 20, 0.1),
rgba(20, 20, 20, 0.1)
),
var(--theme-background-solid-color-main);
--theme-sidebar-box-border-style: solid;
--theme-sidebar-box-border-color: var(
--theme-content-border-color
); /* set it to "transparent" for no border */
--theme-sidebar-box-shadow: var(--theme-box-shadow);
--theme-sidebar-heading-text-color: var(--theme-text-color);
--theme-sidebar-heading-arrow-color: rgba(234, 227, 209, 0.5);
--theme-sidebar-heading-arrow-color-hover: rgb(234, 227, 209);
--theme-sidebar-heading-background: rgba(20, 20, 20, 0.15);
--theme-sidebar-heading-background-hover: var(
--theme-sidebar-heading-background
); /* for hover effect */
/* following 3 values will affect the space between the heading and the list */
--theme-sidebar-heading-border-bottom: 1px solid rgb(10, 10, 10);
--theme-sidebar-list-border-top: 1px solid rgba(255, 255, 255, 0.1); /* will be hidden when collapsed */
--theme-sidebar-list-padding-top: 4px;
--theme-sidebar-list-item-background: none;
--theme-sidebar-list-item-hover-mask: rgba(20, 20, 20, 0.25);
--theme-sidebar-list-item-text-color: var(--theme-text-color-em);
--theme-sidebar-list-item-text-color-hover: var(--theme-text-color-em);
/* responsive */
--theme-sidebar-box-background-2: var(--theme-background-solid-color);
--theme-sidebar-dropdown-background: var(--theme-background-solid-color);
/*** content box ***/
--theme-content-background: #5a433a;
--theme-content-border-bottom-width: 0;
--theme-content-border-style: solid;
--theme-content-border-color: rgba(255, 255, 255, 0.1) rgba(13, 4, 2, 0.2)
rgba(13, 4, 2, 0.2) rgba(255, 255, 255, 0.1);
--theme-content-subpage-icon-color: rgba(
234,
227,
209,
0.4
); /* color for "<" */
/** category: box **/
--theme-content-category-background: rgba(20, 20, 20, 0.25);
--theme-content-category-border-style: solid;
--theme-content-category-border-color: rgba(13, 4, 2, 0.5)
rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) rgba(13, 4, 2, 0.5);
/** notification **/
--theme-notification-background: url(https://terraria.wiki.gg/images/5/56/Notification-background-overworld.png);
--theme-notification-border-color: #cdab7b #562f21 #562f21 #cdab7b;
--theme-notification-shadow: 0px 0px 10px 0px
rgb(var(--theme-shadow-color-rgb));
/******* "real" wiki content ********/
--theme-widget-toc-arrow-color: rgba(234, 227, 209, 0.5);
--theme-widget-toc-arrow-color-hover: rgba(234, 227, 209);
--theme-widget-toc-item-hover-background: rgba(20, 20, 20, 0.25);
--theme-collapsible-toggle-icon-color: var(--theme-text-color-note);
--theme-collapsible-toggle-icon-color-hover: var(--theme-link-color-hover);
/* modetabs */
--theme-modetabs-classic-background: var(--theme-box-background);
--theme-modetabs-classic-border-color: var(--theme-border-color);
--theme-modetabs-classic-text-color: var(--theme-text-color-highlight);
--theme-modetabs-classic-text-color-label: var(
--theme-modetabs-classic-text-color
);
--theme-modetabs-expert-background: #a1743a80;
--theme-modetabs-expert-border-color: #ffca67;
--theme-modetabs-expert-text-color: var(--theme-modetabs-classic-text-color);
--theme-modetabs-expert-text-color-label: #dab2fa;
--theme-modetabs-master-background: #a9545467;
--theme-modetabs-master-border-color: #ffbaba;
--theme-modetabs-master-text-color: var(--theme-modetabs-classic-text-color);
--theme-modetabs-master-text-color-label: #ff6c60;
}
:root {
/* floating scroll for wide table */
--theme-wide-table-shadow-color: #999;
/* background & logo */
--theme-site-background: #b8bad0
url(https://7daystodie.wiki.gg/images/c/c4/Site-background-dark.jpg) center
top / cover no-repeat fixed;
--theme-site-logo-image: url(https://7daystodie.wiki.gg/images/1/1f/OfficalWiki.png);
--theme-site-logo-width: 326.5px;
--theme-site-logo-height: 140px;
--theme-site-logo-filter: none;
/* content background */
--theme-background-solid-color: rgba(48, 46, 46, 0.96);
--theme-background-solid-color-main: rgba(48, 46, 46, 1);
--theme-background-solid-color-dark: rgba(44, 42, 43, 1);
--theme-background-solid-color-darker: rgba(31, 30, 30, 1);
--theme-background: var(--theme-background-solid-color);
/* background for accent block */
--theme-background-accent: rgba(20, 20, 20, 0.5);
/* text color */
--theme-text-color: #eee6e6;
--theme-text-color-note: #b5bdb2;
--theme-text-color-em: #dfcca1;
--theme-text-color-highlight: #fff;
--theme-heading-color: var(--theme-text-color);
--theme-text-color-green: #00d400;
--theme-text-color-red: #fe9b9b;
/* link text color */
--theme-link-color: #dfcca1;
--theme-link-color--rgb: 223, 204, 161;
--theme-link-color-hover: #c9b891;
--theme-link-color-visited: #b8a884;
--theme-link-color-redlink: #f66;
--theme-link-color-accent: var(--theme-text-color-em);
/* icon color */
--theme-icon-color: var(--theme-text-color);
--theme-icon-color-link: var(--theme-link-color);
--theme-icon-color-hover: var(--theme-link-color-hover);
--theme-icon-color-redlink: var(--theme-link-color-redlink);
/* hover mask */
--theme-highlight-background: rgba(20, 20, 20, 0.25);
/* "box" style for interface */
--theme-widget-shadow: 0px 0px 15px 0px rgba(10, 10, 10, 0.7);
--theme-widget-border-color: rgba(255, 255, 255, 0.1) rgba(13, 4, 2, 0.2)
rgba(13, 4, 2, 0.2) rgba(255, 255, 255, 0.1);
--theme-widget-border-radius: 6px;
--theme-widget-background: linear-gradient(
rgba(20, 20, 20, 0.1),
rgba(20, 20, 20, 0.1)
),
var(--theme-background-solid-color);
/* "box" style for content */
--theme-box-border-color: #000;
--theme-box-background: rgba(20, 20, 20, 0.12);
--theme-box-border-radius: 3px;
--theme-box-inset-shadow: inset 0 0 4px 1px rgba(255, 255, 255, 0.08);
--theme-border-color: var(
--theme-box-border-color
); /* inner separate border line */
--theme-border-color-accent: #999;
/* "horizontal rule" */
--theme-hr-color-top: rgb(20, 20, 20);
--theme-hr-color-bottom: rgba(255, 255, 255, 0.1);
/* dropdown menu body */
--theme-dropdown-border-width: 1px; /* single value */
--theme-dropdown-border-style: solid;
--theme-dropdown-border-radius: var(--theme-widget-border-radius);
--theme-dropdown-border-color: var(--theme-widget-border-color);
--theme-dropdown-background: var(--theme-background-solid-color);
--theme-dropdown-shadow: 0px 0 5px 0px rgba(10, 10, 10, 0.3);
/* border and background colors for various "notices", e.g. boxes like [[Template:Msgbox]] */
--theme-notice-blue-background-color: hsla(200, 80%, 90%, 20%);
--theme-notice-blue-border-color: hsl(200, 60%, 72%);
--theme-notice-red-text-color: hsl(0, 100%, 70%);
--theme-notice-red-background-color: hsla(0, 80%, 90%, 20%);
--theme-notice-red-border-color: hsl(0, 60%, 72%);
--theme-notice-purple-background-color: hsla(228, 80%, 90%, 20%);
--theme-notice-purple-border-color: hsl(243, 60%, 72%);
--theme-notice-green-background-color: hsla(84, 80%, 90%, 20%);
--theme-notice-green-border-color: hsl(84, 60%, 72%);
--theme-notice-yellow-background-color: hsla(58, 80%, 90%, 20%);
--theme-notice-yellow-border-color: hsl(58, 60%, 72%);
--theme-notice-orange-text-color: hsl(28, 100%, 70%);
--theme-notice-orange-background-color: hsla(28, 80%, 90%, 20%);
--theme-notice-orange-border-color: hsl(28, 60%, 72%);
--theme-notice-pink-background-color: hsla(324, 80%, 90%, 20%);
--theme-notice-pink-border-color: hsl(324, 60%, 72%);
}
/* sidebar */
#mw-panel {
--theme-section-background: var(--theme-widget-background);
--theme-heading-background: rgba(20, 20, 20, 0.15);
--theme-link-color: var(--theme-link-color-accent);
--theme-link-color-visited: var(--theme-link-color-accent);
--theme-link-color-hover: var(--theme-link-color-accent);
--theme-icon-color-hover: var(--theme-link-color-accent);
}
/* navbar */
#mw-head {
--theme-link-color: var(--theme-link-color-accent);
--theme-link-color-visited: var(--theme-link-color-accent);
--theme-link-color-hover: var(--theme-link-color-accent);
--theme-icon-color-hover: var(--theme-link-color-accent);
--theme-icon-color-link: var(--theme-link-color-accent);
--theme-background: linear-gradient(
rgba(20, 20, 20, 0.1),
rgba(20, 20, 20, 0.1)
),
var(--theme-background-solid-color);
--theme-background-shadow: linear-gradient(
to top,
rgba(10, 10, 10, 0.25),
transparent 30%
);
--theme-border-bottom-color: rgba(255, 255, 255, 0.1);
--theme-tab-background-selected: var(--theme-background-solid-color-main);
--theme-tab-background: linear-gradient(
rgba(20, 20, 20, 0.4),
rgba(20, 20, 20, 0.4)
),
var(--theme-background-solid-color-main);
--theme-tab-border-color-selected: rgba(255, 255, 255, 0.15)
rgba(13, 4, 2, 0.3) rgba(13, 4, 2, 0.3) rgba(255, 255, 255, 0.15);
--theme-tab-border-color: rgba(255, 255, 255, 0.1) rgba(13, 4, 2, 0.2)
rgba(13, 4, 2, 0.2) rgba(255, 255, 255, 0.1);
--theme-legacy-search-border-color: rgba(13, 4, 2, 0.2)
rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) rgba(13, 4, 2, 0.2);
--theme-legacy-search-border-color-active: rgba(13, 4, 2, 0.3)
rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.15) rgba(13, 4, 2, 0.3);
}
#footer {
--theme-background: linear-gradient(
rgba(20, 20, 20, 0.3),
rgba(20, 20, 20, 0.3)
),
var(--theme-background-solid-color);
--theme-inner-shadow: inset var(--theme-widget-shadow);
}
/* catlinks */
.catlinks {
--theme-background: rgba(10, 10, 10, 0.3);
--theme-border-color: rgba(13, 4, 2, 0.5) rgba(255, 255, 255, 0.1)
rgba(255, 255, 255, 0.1) rgba(13, 4, 2, 0.5);
}
/********* OOUI theming *********/
:root {
/* These helper variables are defined for reuse in the variable definitions below */
--oouihelper--red: #b32424;
--oouihelper--red-darker: #551111;
--oouihelper--red-lighter: #f04848;
--oouihelper--red-lighter-transparent: rgba(240, 72, 72, 0.6); /* #f0484899 */
--oouihelper--red-lightest: #ff5959;
--oouihelper--yellow: #ac6600;
--oouihelper--yellow-darker: #4d2e00;
--oouihelper--yellow-lighter: #ffcc33;
--oouihelper--green: #006633;
--oouihelper--green-darker: #00331a;
--oouihelper--green-lighter: #00e673;
--oouihelper--progressive: #9fecf0;
--oouihelper--progressive-transparent: rgba(
159,
236,
240,
0.6
); /* #9fecf099; */
--oouihelper--progressive-lighter: #a7eef1;
--oouihelper--disabled: #b3b3b3;
--oouihelper--disabled-lighter-transparent: rgba(196, 196, 196, 0.5);
--oouihelper--disabled-darker-transparent: rgba(128, 128, 128, 0.5);
--oouihelper--borderdark: #000;
--oouihelper--borderdark-lighter: #0e0c0c;
--oouihelper--borderdark-hover: #72777d;
--oouihelper--borderdark-focus: var(--oouihelper--progressive);
--oouihelper--textinput-background: rgba(20, 20, 20, 0.65);
--oouihelper--textinput-background-lighter: rgba(30, 30, 30, 0.65);
--oouihelper--textinput-background-darker: rgba(20, 20, 20, 0.9);
--oouihelper--placeholdertext: rgba(234, 227, 209, 0.4);
--oouihelper--themerelated: #a58350;
--oouihelper--themerelated-lighter: #cdab78;
--oouihelper--themerelated-lighter-transparent: rgba(171, 120, 84, 0.6);
--oouihelper--themerelated-lightest: #e6dbcb;
--oouihelper--themerelated-darker: #785f3a;
--oouihelper--themerelated-darkest: #342919;
--oouihelper--themerelated-disabled: rgba(230, 219, 203, 0.25);
--oouihelper--themerelated-disabled-lighter: rgba(238, 231, 221, 0.25);
--oouihelper--text-background: #2c2421;
/* ---------------------------------------------- */
/* Actual OOUI variables, grouped by element type */
/* misc */
--ooui--inlinehelp-color: var(--theme-text-color-note);
--ooui--disabled-color: var(--oouihelper--disabled);
/* all buttons */
--ooui--button-background--hover: #7b573d
url(https://terraria.wiki.gg/images/d/d4/Button-background-overworld.jpg)
center center / cover repeat-x;
--ooui--button-background: linear-gradient(
rgba(20, 20, 20, 0.2),
rgba(20, 20, 20, 0.2)
),
var(--ooui--button-background--hover);
--ooui--button-box-shadow: rgba(10, 10, 10, 0.5) 2px 2px 3px;
--ooui--button-box-shadow--focus: inset
var(--oouihelper--themerelated-lighter-transparent) 0 0 0 2px;
/* "normal" button */
--ooui--button-border-top: 1px solid rgba(151, 107, 69, 0.7);
--ooui--button-border-right: 1px solid rgba(86, 47, 33, 0.7);
--ooui--button-border-bottom: var(--ooui--button-border-right);
--ooui--button-border-left: var(--ooui--button-border-top);
--ooui--button-border-top--hover: 1px solid rgb(151, 107, 69);
--ooui--button-border-right--hover: 1px solid rgb(86, 47, 33);
--ooui--button-border-bottom--hover: var(--ooui--button-border-right--hover);
--ooui--button-border-left--hover: var(--ooui--button-border-top--hover);
--ooui--button-color: var(--theme-text-color);
--ooui--button-color--hover: var(--theme-text-color-highlight);
/* "progressive" button */
--ooui--button-progressive-color: var(--oouihelper--progressive);
--ooui--button-progressive-color--hover: var(
--oouihelper--progressive-lighter
);
--ooui--button-progressive-box-shadow--focus: inset
var(--oouihelper--progressive-transparent) 0 0 0 2px;
--ooui--button-progressive-primary-border-color: var(
--oouihelper--progressive
);
--ooui--button-progressive-primary-border-color--hover: var(
--oouihelper--progressive-lighter
);
/* "destructive" button */
--ooui--button-destructive-color: var(--oouihelper--red-lighter);
--ooui--button-destructive-color--hover: var(--oouihelper--red-lightest);
--ooui--button-destructive-box-shadow--focus: inset
var(--oouihelper--red-lighter-transparent) 0 0 0 2px;
--ooui--button-destructive-primary-border-color: var(
--oouihelper--red-lighter
);
--ooui--button-destructive-primary-border-color--hover: var(
--oouihelper--red-lightest
);
/* disabled button */
--ooui--button-disabled-color: var(--oouihelper--disabled);
--ooui--button-disabled-background: linear-gradient(
var(--oouihelper--disabled-darker-transparent),
var(--oouihelper--disabled-darker-transparent)
),
var(--ooui--button-background--hover);
--ooui--button-disabled-border-top: 1px solid rgba(126, 109, 93, 0.7);
--ooui--button-disabled-border-right: 1px solid rgba(70, 53, 47, 0.7);
--ooui--button-disabled-border-bottom: var(
--ooui--button-disabled-border-right
);
--ooui--button-disabled-border-left: var(--ooui--button-disabled-border-top);
/* frameless button */
--ooui--button-frameless-on-color: var(--theme-text-color-highlight);
/* textarea */
--ooui--textarea-background-color: var(--oouihelper--textinput-background);
--ooui--textarea-placeholder-color: var(--oouihelper--placeholdertext);
--ooui--textarea-border-color: var(--oouihelper--borderdark);
--ooui--textarea-border-color--hover: var(--oouihelper--borderdark-hover);
--ooui--textarea-border-color--focus: var(--oouihelper--borderdark-focus);
--ooui--textarea-invalid-border-color: var(--oouihelper--red-lighter);
--ooui--textarea-readonly-background-color: var(
--oouihelper--textinput-background-darker
);
--ooui--textarea-disabled-color: var(--oouihelper--disabled);
--ooui--textarea-disabled-border-color: var(
--oouihelper--disabled-lighter-transparent
);
--ooui--textarea-disabled-background-color: var(
--oouihelper--disabled-darker-transparent
);
--ooui--textarea-pending-background-color-1: rgba(20, 20, 20, 0.9);
--ooui--textarea-pending-background-color-2: #000;
/* checkbox */
--ooui--checkbox-border-color: var(--oouihelper--themerelated);
--ooui--checkbox-border-color--hover: var(--oouihelper--themerelated-lighter);
--ooui--checkbox-icon: 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%3Echeck%3C/title%3E%3Cg fill=%22%23a58350%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
--ooui--checkbox-icon--hover: 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%3Echeck%3C/title%3E%3Cg fill=%22%23cdab78%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
--ooui--checkbox-box-shadow--focus: var(--oouihelper--themerelated-darkest);
--ooui--checkbox-disabled-background-color: var(
--oouihelper--themerelated-disabled
);
--ooui--checkbox-disabled-icon: var(--ooui--checkbox-icon);
/* radiobutton */
--ooui--radiobutton-border-color: var(--oouihelper--themerelated);
--ooui--radiobutton-border-color--hover: var(
--oouihelper--themerelated-lighter
);
--ooui--radiobutton-box-shadow--focus: var(
--oouihelper--themerelated-darkest
);
--ooui--radiobutton-disabled-background-color: var(
--oouihelper--themerelated-disabled
);
/* toggleswitch */
--ooui--toggleswitch-border-color: var(--oouihelper--themerelated);
--ooui--toggleswitch-border-color--hover: var(
--oouihelper--themerelated-lighter
);
--ooui--toggleswitch-color--active: var(--oouihelper--themerelated-darker);
--ooui--toggleswitch-grip-color: var(--oouihelper--themerelated-lightest);
--ooui--toggleswitch-box-shadow--focus: var(
--oouihelper--themerelated-darkest
);
--ooui--toggleswitch-disabled-background-color: var(
--oouihelper--themerelated-disabled
);
--ooui--toggleswitch-disabled-grip-color: var(
--oouihelper--themerelated-disabled-lighter
);
/* dropdown */
--ooui--dropdown-background-color: var(--oouihelper--textinput-background);
--ooui--dropdown-background-color--hover: var(
--oouihelper--textinput-background-lighter
);
--ooui--dropdown-border-color: var(--oouihelper--borderdark);
--ooui--dropdown-border-color--hover: var(--oouihelper--borderdark-hover);
--ooui--dropdown-border-color--focus: var(--oouihelper--borderdark-focus);
--ooui--dropdown-disabled-color: var(--oouihelper--disabled);
--ooui--dropdown-disabled-border-color: var(
--oouihelper--disabled-lighter-transparent
);
--ooui--dropdown-disabled-background-color: var(
--oouihelper--disabled-darker-transparent
);
/* selectfile */
--ooui--selectfile-border-color: #72777d;
--ooui--selectfile-background-color: var(--oouihelper--textinput-background);
--ooui--selectfile-candrop-background-color: #514743;
/* tag item */
--ooui--tagitem-background-color: rgba(20, 20, 20, 0.75);
--ooui--tagitem-border-color: var(--oouihelper--borderdark);
--ooui--tagitem-border-color--hover: var(--oouihelper--borderdark-hover);
--ooui--tagitem-border-color--focus: var(--oouihelper--themerelated-darkest);
--ooui--tagitem-invalid-border-color: var(--oouihelper--red-lighter);
--ooui--tagitem-color--hover: #efeadc;
--ooui--tagitem-disabled-color: var(--oouihelper--disabled);
--ooui--tagitem-disabled-border-color: var(
--oouihelper--disabled-lighter-transparent
);
--ooui--tagitem-disabled-background-color: rgba(20, 20, 20, 0.5);
/* multioption */
--ooui--multioption-disabled-color: var(--oouihelper--disabled);
/* progressbar */
--ooui--progressbar-border-color: var(--oouihelper--themerelated);
--ooui--progressbar-bar-background-color: var(--oouihelper--themerelated);
--ooui--progressbar-disabled-border-color: var(
--oouihelper--themerelated-disabled
);
--ooui--progressbar-pending-background-color-1: #7a6a52;
--ooui--progressbar-pending-background-color-2: #4d4233;
/* messagewidget */
--ooui--messagewidget-notice-background-color: #4e3a32;
--ooui--messagewidget-notice-border-color: #2f231e;
--ooui--messagewidget-error-background-color: var(--oouihelper--red);
--ooui--messagewidget-error-border-color: var(--oouihelper--red-darker);
--ooui--messagewidget-error-color: var(--oouihelper--red-lighter);
--ooui--messagewidget-warning-background-color: var(--oouihelper--yellow);
--ooui--messagewidget-warning-border-color: var(--oouihelper--yellow-darker);
--ooui--messagewidget-success-background-color: var(--oouihelper--green);
--ooui--messagewidget-success-border-color: var(--oouihelper--green-darker);
--ooui--messagewidget-success-color: var(--oouihelper--green-lighter);
/* menuselectwidget */
--ooui--menuselect-background-color: var(--oouihelper--text-background);
--ooui--menuselect-selected-background-color: var(
--oouihelper--textinput-background-darker
);
--ooui--menuselect-highlighted-background-color: var(
--oouihelper--textinput-background-lighter
);
--ooui--menuselect-border-color: var(--oouihelper--borderdark);
--ooui--menusectionoption-color: var(--oouihelper--placeholdertext);
/* tabselectwidget */
--ooui--tabselect-background-color: var(--oouihelper--text-background);
--ooui--tabselect-selected-background-color: var(--theme-content-background);
--ooui--tabselect-highlighted-background-color: var(
--oouihelper--textinput-background-lighter
);
--ooui--tabselect-frameless-box-shadow-color: var(
--oouihelper--borderdark-lighter
);
--ooui--tabselect-frameless-selected-color: var(--theme-link-color);
--ooui--tabselect-frameless-selected-box-shadow-color: var(
--theme-link-color
);
--ooui--tabselect-frameless-highlighted-color: #bcd1d2;
--ooui--tabselect-frameless-highlighted-box-shadow-color: #bcd1d2;
--ooui--taboption-color: var(--oouihelper--placeholdertext);
/* outlineselectwidget */
--ooui--outlineselect-box-shadow--focus: inset
var(--oouihelper--themerelated-lighter-transparent) 0 0 0 2px;
--ooui--outlineoption-background-color: var(--oouihelper--text-background);
--ooui--outlineoption-border-color: var(--oouihelper--borderdark);
--ooui--outlineoption-selected-background-color: var(
--oouihelper--textinput-background-darker
);
--ooui--outlineoption-highlighted-background-color: var(
--oouihelper--textinput-background-lighter
);
--ooui--outlineoption-pressed-background-color: #22292a;
/* popupwidget */
--ooui--popup-background-color: var(--oouihelper--text-background);
--ooui--popup-border-color: var(--oouihelper--borderdark);
/* layouts */
--ooui--bookletlayout-border-color: var(--oouihelper--borderdark);
--ooui--panellayout-border-color: var(--oouihelper--borderdark);
/* dialog */
--ooui--dialog-border-color: var(--oouihelper--borderdark);
--ooui--dialog-border-color--lighter: var(--oouihelper--borderdark-lighter);
/* window */
--ooui--window-background-color: var(--oouihelper--text-background);
--ooui--window-border-color: var(--oouihelper--borderdark);
/* indicators */
/* tools like https://isotropic.co/tool/hex-color-to-css-filter/ allow converting the desired color into a filter */
--ooui--indicator-filter: brightness(0) invert(90%) sepia(28%) saturate(107%)
hue-rotate(5deg) brightness(96%) contrast(93%);
--ooui--indicator-invert-filter: brightness(0);
/* icons */
--ooui--icon-normal-filter: brightness(0) invert(90%) sepia(28%)
saturate(107%) hue-rotate(5deg) brightness(96%) contrast(93%);
--ooui--icon-progressive-filter: brightness(0) invert(90%) sepia(21%)
saturate(662%) hue-rotate(140deg) brightness(99%) contrast(91%);
--ooui--icon-destructive-filter: brightness(0) invert(33%) sepia(27%)
saturate(2948%) hue-rotate(329deg) brightness(116%) contrast(91%);
--ooui--icon-invert-filter: brightness(0);
--ooui--icon-success-filter: brightness(0) invert(76%) sepia(47%)
saturate(4832%) hue-rotate(101deg) brightness(101%) contrast(101%); /* #00e673 */
--ooui--icon-warning-filter: brightness(0) invert(81%) sepia(89%)
saturate(585%) hue-rotate(323deg) brightness(96%) contrast(112%); /* #ffcc33 */
--ooui--icon-error-filter: brightness(0) invert(56%) sepia(62%)
saturate(4943%) hue-rotate(329deg) brightness(91%) contrast(108%); /* #f04848 */
}
@media only screen and (min-width: 721px) {
.nomobile {
display: inherit;
}
.mobileonly {
display: none;
}
}
@media only screen and (max-width: 720px) {
.nomobile {
display: none;
}
.mobileonly {
display: inherit;
}
}
.mp_floating_box_container {
display: flex;
flex-flow: row wrap;
}
.mp_floating_box {
border-style: solid;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.1) rgba(13, 4, 2, 0.2) rgba(13, 4, 2, 0.2)
rgba(255, 255, 255, 0.1);
border-radius: 7px;
padding: 5px;
padding-left: 15px;
margin: 5px;
flex-basis: 90%;
flex-grow: 1;
}
.mp_floating_box > ul {
display: grid;
grid-template-columns: repeat(1, 1fr); /* 1 columns of equal width */
padding: 0px;
margin: 0px;
flex-basis: 45%;
flex-grow: 1;
justify-content: stretch;
}
.mp_floating_box > ul > li {
margin-left: 40px;
flex-grow: 1;
}
@media only screen and (min-width: 720px) {
.mp_floating_box {
flex-basis: 45%;
}
}
@media only screen and (min-width: 1000px) {
.mp_floating_box > ul {
grid-template-columns: repeat(2, 1fr); /* 2 columns of equal width */
}
}
.page-7_Days_to_Die_Wiki #p-logo {
display: none;
}
.page-7_Days_to_Die_Wiki {
--layout-logo-height: calc(var(--layout-sidespace) / 2);
}
.infoboxtable {
background-color: var(--theme-box-background);
border-style: solid;
border-width: 1px;
border-radius: 8px;
border-color: var(--oouihelper--borderdark-lighter);
margin-left: var(--layout-gap-l);
}
.infoboxtable .infoboxname {
font-size: var(--font-size-l);
padding: 6px 3px;
line-height: 1.2;
border-style: solid;
border-width: 0px;
border-bottom-width: 1px;
border-color: var(--oouihelper--borderdark-lighter);
background-image: linear-gradient(
to top,
rgba(14, 12, 12, 0.5),
rgba(14, 12, 12, 0.2) 90%
);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.infoboxtable .infoboxdescription {
font-size: var(--font-size);
background-image: linear-gradient(
to top,
rgba(14, 12, 12, 0.4),
rgba(14, 12, 12, 0.15) 90%,
rgba(14, 12, 12, 0.2)
);
}
.infoboxtable tr > td {
font-size: var(--font-size-i);
line-height: var(--line-height-i);
}
.infoboxtable tr > td:first-child {
min-width: 20%;
max-width: 50%;
}
.infoboxtable tr > td:nth-child(2) {
min-width: 50%;
}
/* Quick and dirty visual editor fix */
.ve-init-target>.oo-ui-toolbar {
width: 100%;
margin-left: 0;
margin-right: 0;
}
.ve-init-target>.oo-ui-toolbar>.oo-ui-toolbar-bar{
transform: translateY(20px);
}
.ve-init-target>.oo-ui-toolbar.ve-ui-toolbar-floating>.oo-ui-toolbar-bar {
transform: translateY(35px);
position: fixed;
left: calc(var(--layout-sidespace) + var(--layout-sidebar-width) + (2 * var(--layout-box-gap-x)));
right: calc(var(--layout-sidespace) + var(--layout-box-gap-x));
width: var(--layout-content-width)
}
.ve-init-target>.oo-ui-toolbar>.oo-ui-toolbar-bar {
background-color: var(--theme-background-solid-color-darker);
border-color: var(--oouihelper--borderdark-lighter);
}
.oo-ui-toolbar-bar {
color: var(--theme-text-color);
}
.ve-init-target>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-menuToolGroup {
border-color: var(--oouihelper--borderdark-lighter);
}
.ve-init-target>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover,
.ve-init-target>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-widget-enabled > .oo-ui-tool-link:hover{
background-color: var(--theme-background-solid-color-dark);
border-color: var(--oouihelper--borderdark-lighter);
}
.disp-div-s {
display: none;
}
.disp-div-m {
display: none;
}
.disp-div-l {
display: none;
}
.disp-div-xl {
display: none;
}
.disp-div-no-s {
display: block;
}
.disp-div-no-m {
display: block;
}
.disp-div-no-l {
display: block;
}
.disp-div-no-xl {
display: block;
}
@media screen and (max-width: 479px) {
.disp-div-s {
display: block;
}
.disp-div-no-s {
display: none;
}
}
@media screen and (min-width: 480px) and (max-width: 960px) {
.disp-div-m {
display: block;
}
.disp-div-no-m {
display: none;
}
}
@media screen and (min-width: 961px) and (max-width: 2000px) {
.disp-divl {
display: block;
}
.disp-div-no-l {
display: none;
}
}
@media screen and (min-width: 2001px) {
.disp-div-xl {
display: block;
}
.disp-div-no-xl {
display: none;
}
}