MediaWiki:Common.css
Jump to navigation
Jump to search
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: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* CSS placed here will be applied to all skins */ @media screen { /* Vector screen styles */ /** * Minimum available screen width at which a device can be considered a mobile device * Many older feature phones have screens smaller than this value. * Number is prone to change with new information. * @since 1.31 */ /** * Minimum available screen width at which a device can be considered a tablet * The number is currently based on the device width of a Samsung Galaxy S5 mini and is low * enough to cover iPad (768px). Number is prone to change with new information. * @since 1.31 */ /** * Minimum available screen width at which a device can be considered a desktop * Number is prone to change with new information. * @since 1.31 */ /* * Any rules which should not be flipped automatically in right-to-left situations should be * prepended with @noflip in a comment block. * */ /* stylelint-disable selector-no-vendor-prefix, at-rule-no-unknown */ /* stylelint-enable selector-no-vendor-prefix, at-rule-no-unknown */ /* Framework */ html { font-size: 100%; } html, body { height: 100%; margin: 0; padding: 0; font-family: sans-serif; } body { background-color: #050505; } a, .mw-parser-output a.external { color: #06ad1a; } a:visited, .mw-parser-output a.external:visited { color: #00801e; } /* Content */ .mw-body, .parsoid-body { background-color: #000000; color: #fff; padding: 1em; direction: ltr; } .mw-body, #mw-data-after-content { margin-left: 10em; } .mw-body { /* Border on top, left, and bottom side */ border: 4px solid YellowGreen; box-shadow: 0 0 1em SpringGreen, inset 0 0 1em SpringGreen; border-radius: 7px; border-right-width: 0; background-image: url(/images/f/fe/Anaxbackground.jpg); background-repeat: repeat; /* Merge the border with tabs' one (in their background image) */ margin-top: -1px; } .mw-body h1, .mw-body-content h1, .mw-body-content h2 { margin-bottom: 0.25em; padding: 0; font-family: 'Linux Libertine', 'Georgia', 'Times', serif; line-height: 1.3; color: #fff; /* Burmese (Myanmar) language headlines would be cropped with set `line-height` */ /* See T193270 */ } .mw-body h1:lang( ja ), .mw-body-content h1:lang( ja ), .mw-body-content h2:lang( ja ), .mw-body h1:lang( he ), .mw-body-content h1:lang( he ), .mw-body-content h2:lang( he ), .mw-body h1:lang( ko ), .mw-body-content h1:lang( ko ), .mw-body-content h2:lang( ko ) { /* See T65827 */ font-family: sans-serif; } .mw-body h1:lang( my ), .mw-body-content h1:lang( my ), .mw-body-content h2:lang( my ) { line-height: normal; } .mw-body h1, .mw-body-content h1 { font-size: 1.8em; } .mw-body .firstHeading { /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */ overflow: visible; } .mw-body .mw-indicators { float: right; font-size: 0.875em; line-height: 1.6; /* Ensure that this is displayed on top of .mw-body-content and clickable */ position: relative; z-index: 1; } .mw-body .mw-indicator { display: inline-block; } .mw-body-content { position: relative; font-size: 0.875em; line-height: 1.6; z-index: 0; } .mw-body-content p { margin: 0.5em 0; } .mw-body-content h1 { margin-top: 1em; } .mw-body-content h2 { margin-top: 1em; font-size: 1.5em; } .mw-body-content h3, .mw-body-content h4, .mw-body-content h5, .mw-body-content h6 { margin-top: 0.3em; margin-bottom: 0; padding-bottom: 0; line-height: 1.6; } .mw-body-content h3 { font-size: 1.2em; } .mw-body-content h3, .mw-body-content h4 { font-weight: bold; } .mw-body-content h4, .mw-body-content h5, .mw-body-content h6 { font-size: 100%; } .mw-body-content .toc h2 { font-family: sans-serif; font-size: 100%; } .mw-headline { color: white; } /* Allow edit sections outside of mw-body-content (T160269) */ .mw-editsection, .mw-editsection-like { font-family: sans-serif; } /* Hide empty portlets */ div.emptyPortlet { display: none; } ul { list-style-image: url(/w/skins/Vector/images/bullet-icon.svg?872f1); } pre, .mw-code { line-height: 1.3; } /* Site Notice (includes notices from CentralNotice extension) */ #siteNotice { font-size: 0.8em; } /* Personal */ #p-personal { position: absolute; top: 0.33em; right: 0.75em; /* Display on top of page tabs - bugs 37158, 48078 */ z-index: 100; } #p-personal h3 { display: none; } #p-personal ul { list-style: none none; margin: 0; padding-left: 10em; /* Keep from overlapping logo */ } #p-personal li { float: left; margin-left: 0.75em; padding-top: 0.5em; font-size: 0.75em; line-height: 1.16666667; white-space: nowrap; } /* Icon for registered user names & anonymous message */ #pt-anonuserpage, #pt-userpage a { background-image: url(/w/skins/Vector/images/user-avatar.png?59494); background-image: linear-gradient(transparent, transparent), url(/w/skins/Vector/images/user-avatar.svg?b7f58); background-position: left 0.33333333em; background-repeat: no-repeat; background-size: 1.16666667em 1.16666667em; padding-top: 0.5em !important; padding-left: 16px !important; } #pt-userpage { padding-top: 0 !important; } #pt-userpage a { display: inline-block; } /* Show anonymous "Not logged in" text in gray */ #pt-anonuserpage { color: #54595d; } /* Search */ #p-search { float: left; margin-right: 0.5em; margin-left: 0.5em; } #p-search h3 { display: block; position: absolute !important; /* stylelint-disable-line declaration-no-important */ clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; } #p-search form { margin: 0.5em 0 0; } #simpleSearch { display: block; width: 13.2em; width: 20vw; /* responsive width */ min-width: 5em; max-width: 20em; height: 100%; margin-top: 0; position: relative; } #simpleSearch input { margin: 0; } #searchInput { background-color: #050505; background-color: rgba(255, 255, 255, 0.5); color: #09e919; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #7bb372; border-radius: 2px; padding: 0.4em 1.84615385em 0.4em 0.4em; -webkit-box-shadow: inset 0 0 0 1px transparent; box-shadow: inset 0 0 0 1px transparent; font-size: 0.8125em; direction: ltr; -webkit-transition: border-color 250ms, box-shadow 250ms; -moz-transition: border-color 250ms, box-shadow 250ms; transition: border-color 250ms, box-shadow 250ms; -webkit-appearance: textfield; } #simpleSearch:hover #searchInput { border-color: #638160; } #searchInput:focus, #simpleSearch:hover #searchInput:focus { outline: 0; border-color: #37cc33; -webkit-box-shadow: inset 0 0 0 1px #37cc33, inset 0 0 0 2px #000000; box-shadow: inset 0 0 0 1px #37cc33, inset 0 0 0 2px #000000; } #searchInput::-webkit-input-placeholder { color: #72777d; opacity: 1; } #searchInput:-ms-input-placeholder { color: #72777d; opacity: 1; } #searchInput::-moz-placeholder { color: #72777d; opacity: 1; } #searchInput:-moz-placeholder { color: #72777d; opacity: 1; } #searchInput::placeholder { color: #72777d; opacity: 1; } #searchInput::-webkit-search-decoration, #searchInput::-webkit-search-cancel-button, #searchInput::-webkit-search-results-button, #searchInput::-webkit-search-results-decoration { -webkit-appearance: textfield; } #searchButton, #mw-searchButton { background-color: transparent; position: absolute; top: 1px; bottom: 1px; right: 1px; min-width: 24px; width: 1.84615385em; border: 0; padding: 0; cursor: pointer; font-size: 0.8125em; /* Opera 12 on RTL flips the text in a funny way without this. */ /* @noflip */ direction: ltr; /* Hide button text and replace it with the image. */ text-indent: -99999px; white-space: nowrap; overflow: hidden; z-index: 1; } #searchButton { background-image: url(/w/skins/Vector/images/search.png?39f97); background-image: linear-gradient(transparent, transparent), url(/w/skins/Vector/images/search.svg?4d50a); background-position: center center; background-repeat: no-repeat; } #mw-searchButton { z-index: 1; } /** * Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions) */ /* Namespaces and Views */ .vectorTabs { background-position: left bottom; float: left; height: 2.5em; padding-left: 1px; /* Navigation Labels */ } .vectorTabs h3 { display: none; } .vectorTabs ul { float: left; height: 100%; list-style: none none; margin: 0; padding: 0; } .vectorTabs li { /*background-image: url(/w/skins/Vector/images/tab-normal-fade.png?1cc52);*/ background-image: linear-gradient(to top, #000 0, #222 1px, #222222 100%); background-position: left bottom; background-repeat: repeat-x; float: left; display: block; height: 100%; margin: 0; padding: 0; line-height: 1.125em; white-space: nowrap; } .vectorTabs li.selected { background-image: linear-gradient(to top, #000 0, #222 1px, #333333 100%); background-color: #050505; color: #06ad1a; } .vectorTabs li.selected a { color: #06ad1a !important; } .vectorTabs li a { color: #06ad1a; display: block; height: 1.9em; padding-left: 0.615em; padding-right: 0.615em; cursor: pointer; font-size: 0.8125em; } .vectorTabs .new a, .vectorTabs .new a:visited { color: #00801e; } .vectorTabs .selected { /*background-image: url(/w/skins/Vector/images/tab-current-fade.png?22887);*/ background-color: #050505; } .vectorTabs .selected a, .vectorTabs .selected a:visited { color: #00801e; text-decoration: none; } .vectorTabs .icon a { background-position: right bottom; background-repeat: no-repeat; } .vectorTabs span { background-position: right bottom; display: inline-block; height: 100%; } .vectorTabs span a { float: left; display: block; position: relative; padding-top: 1.25em; } /* Variants and Actions */ .vectorMenu { direction: ltr; float: left; cursor: pointer; position: relative; line-height: 1.125em; } .vectorMenu h3 span { color: #bbbbbb; position: relative; display: block; padding-left: 0.615em; padding-top: 1.25em; padding-right: 16px; font-size: 0.8125em; font-weight: normal; } .vectorMenu h3 span:after { content: ''; background-image: url(/w/skins/Vector/images/arrow-down.png?42edd); background-image: linear-gradient(transparent, transparent), url(/w/skins/Vector/images/arrow-down.svg?2f021); background-position: 100% 50%; background-repeat: no-repeat; position: absolute; top: 1.25em; right: 0; bottom: 0; left: 0; opacity: 0.85; } .vectorMenu h3:hover span, .vectorMenu h3:focus span { color: #f3f3f3; } .vectorMenu h3:hover span:after, .vectorMenu h3:focus span:after { opacity: 1; } .vectorMenu .menu { background-color: #000000; list-style: none none; clear: both; min-width: 100%; position: absolute; top: 2.5em; left: -1px; margin: 0; border: 1px solid #a2a9b1; border-top-width: 0; padding: 0; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-align: left; opacity: 0; visibility: hidden; -webkit-transition: opacity 100ms; -moz-transition: opacity 100ms; transition: opacity 100ms; z-index: 2; } .vectorMenu:hover .menu { opacity: 1; visibility: visible; } .vectorMenu .vectorMenuCheckbox:checked ~ .menu { opacity: 1; visibility: visible; } .vectorMenu li { padding: 0; margin: 0; text-align: left; line-height: 1em; } .vectorMenu li a { color: #06ad12; display: block; padding: 0.625em; white-space: nowrap; cursor: pointer; font-size: 0.8125em; } .vectorMenu .selected a, .vectorMenu .selected a:visited { color: #06ad1a; text-decoration: none; } #mw-head .vectorMenu h3 { background-position: right bottom; float: left; font-size: 100%; height: 2.5em; margin: 0 -1px 0 0; padding: 0 0.5em 0 0; } .vectorTabs, .vectorTabs span, #mw-head .vectorMenu h3 { background-image: url(/w/skins/Vector/images/tab-separator.png?09d4b); background-image: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, ##050505 100%); background-repeat: no-repeat; background-size: 1px 100%; } .vectorMenuCheckbox { cursor: pointer; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; width: 100%; height: 100%; margin: 0; padding: 0; display: none; } :not( :checked ) > .vectorMenuCheckbox { display: block; } .vectorMenuCheckbox:checked + h3 span:after { transform: scaleY(-1); } .vectorMenuCheckbox:focus + h3 { outline: dotted 1px; outline: auto -webkit-focus-ring-color; } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes rotate { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } } /* Watch/Unwatch Icon Styling */ /* Only use icon if the menu item is not collapsed into the "More" dropdown * (in which case it is inside .vectorMenu instead of .vectorTabs). */ .vectorTabs .mw-watchlink.icon a { background-position: 5px 60%; background-repeat: no-repeat; margin: 0; padding: 0; display: block; width: 28px; /* This hides the text but shows the background image */ /* Must not exceed parent's height, otherwise the background disappears on Chrome (T196610) */ padding-top: 3.07692308em; height: 0; overflow: hidden; } .vectorTabs #ca-unwatch.icon a { background-image: url(/skins/Vector/images/unwatch-icon.png?fccbe); background-image: linear-gradient(transparent, transparent), url(/skins/Vector/images/unwatch-icon.svg?725e9); } .vectorTabs #ca-watch.icon a { background-image: url(/skins/Vector/images/watch-icon.png?e1b42); background-image: linear-gradient(transparent, transparent), url(/skins/Vector/images/watch-icon.svg?d3c31); } .vectorTabs #ca-unwatch.icon a:hover, .vectorTabs #ca-unwatch.icon a:focus { background-image: url(/skins/Vector/images/unwatch-icon-hl.png?c4723); background-image: linear-gradient(transparent, transparent), url(/skins/Vector/images/unwatch-icon-hl.svg?71c12); } .vectorTabs #ca-watch.icon a:hover, .vectorTabs #ca-watch.icon a:focus { background-image: url(/skins/Vector/images/watch-icon-hl.png?f4c7e); background-image: linear-gradient(transparent, transparent), url(/skins/Vector/images/watch-icon-hl.svg?26a8a); } .vectorTabs #ca-unwatch.icon .loading, .vectorTabs #ca-watch.icon .loading { background-image: url(/w/skins/Vector/images/watch-icon-loading.svg?34b1f); background-position: 50% 60%; -webkit-animation: rotate 700ms infinite linear; -moz-animation: rotate 700ms infinite linear; animation: rotate 700ms infinite linear; /* Suppress the hilarious rotating focus outline on Firefox */ outline: 0; cursor: default; pointer-events: none; -webkit-transform-origin: 50% 57%; transform-origin: 50% 57%; } /* Hide, but keep accessible for screen-readers */ #mw-navigation h2 { position: absolute; top: -9999px; } #ca-talk { display: none; } .mw-jump-link:not( :focus ) { display: block; position: absolute !important; /* stylelint-disable-line declaration-no-important */ clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; } /* Head */ #mw-page-base { background-position: bottom left; height: 5em; background-color: #0d0d0d; background-image: -webkit-gradient(linear, right top, right bottom, color-stop(50%, #000000), color-stop(100%, #2d2d2d)); background-image: -webkit-linear-gradient(top, #0d0d0d 50%, #000 100%); background-image: -moz-linear-gradient(top, #0d0d0d 50%, #000 100%); background-image: linear-gradient(to bottom, #0d0d0d 50%, #000 100%); } #mw-head-base { margin-top: -5em; margin-left: 10em; height: 5em; } #mw-head { background-color: #050505; position: absolute; top: 0; right: 0; width: 100%; } /* Navigation Containers */ #left-navigation { float: left; margin-left: 10em; margin-top: 2.5em; /* When right nav would overlap left nav, it's placed below it (normal CSS floats behavior). This rule ensures that no empty space is shown between them due to right nav's margin-top. Page layout is still broken, but at least the nav overlaps only the page title instead of half the content. */ margin-bottom: -2.5em; } #right-navigation { float: right; margin-top: 2.5em; } /* Logo */ .mw-wiki-logo { background-image: url( /images/d/d1/AnaxpediaLogo.png ) !important; background-size: 135px 135px; } #p-logo { width: 10em; height: 160px; } #p-logo a { background-position: center center; background-repeat: no-repeat; display: block; width: 10em; height: 160px; text-decoration: none; } /* Panel */ #mw-panel { position: absolute; top: 0; width: 10em; left: 0; font-size: inherit; /* First sidebar portlet. Not using :first-of-type for IE<=8 support. */ } #mw-panel .portal { margin: 0 0.6em 0 0.7em; padding: 0.25em 0; direction: ltr; } #mw-panel .portal h3 { color: #06ad1a; font-weight: normal; margin: 0.5em 0 0 0.66666667em; padding: 0.25em 0; cursor: default; border: 0; font-size: 0.75em; } #mw-panel .portal .body { background-image: url(/w/skins/Vector/images/portal-separator.png?4ab04); background-image: linear-gradient(to right, transparent 0, ##050505 35%, ##050505 70%, transparent 100%); background-repeat: no-repeat; background-size: 100% 1px; margin-left: 0.5em; padding-top: 0; } #mw-panel .portal .body ul { list-style: none none; margin: 0; padding-top: 0.3em; } #mw-panel .portal .body li { margin: 0; padding: 0.25em 0; font-size: 0.75em; line-height: 1.125em; word-wrap: break-word; } #mw-panel .portal .body li a { color: #06ad1a; } #mw-panel .portal .body li a:visited { color: #00801e; } #mw-panel #p-logo + .portal { background-image: none; margin-top: 1em; } #mw-panel #p-logo + .portal h3 { display: none; } #mw-panel #p-logo + .portal .body { background-image: none; margin-left: 0.5em; } /* Footer */ #footer { margin-left: 10em; margin-top: 0; padding: 0.75em; direction: ltr; } #footer ul { list-style: none none; margin: 0; padding: 0; } #footer li { color: #06ad1a; margin: 0; padding: 0.5em 0; font-size: 0.7em; } #footer-icons { float: right; } #footer-icons li { float: left; margin-left: 0.5em; line-height: 2; text-align: right; } #footer-info li { line-height: 1.4; } #footer-places li { float: left; margin-right: 1em; line-height: 2; } /** Toc, thumb styles */ div.thumbinner { background-color: black; } li.gallerybox div.thumb { background-color: black; } .tocnumber { color: #06ad1a; } .toc, .mw-warning, .toccolours { background-color: black; } /** End toc, thumb styles */ .mw-parser-output .external { background-position: center right; background-repeat: no-repeat; background-image: url(/w/skins/Vector/images/external-link-ltr-icon.png?325de); background-image: linear-gradient(transparent, transparent), url(/w/skins/Vector/images/external-link-ltr-icon.svg?b4b84); padding-right: 13px; }}@media screen and ( min-width: 982px ) { /* Vector screen styles for high definition displays */ /** * Minimum available screen width at which a device can be considered a mobile device * Many older feature phones have screens smaller than this value. * Number is prone to change with new information. * @since 1.31 */ /** * Minimum available screen width at which a device can be considered a tablet * The number is currently based on the device width of a Samsung Galaxy S5 mini and is low * enough to cover iPad (768px). Number is prone to change with new information. * @since 1.31 */ /** * Minimum available screen width at which a device can be considered a desktop * Number is prone to change with new information. * @since 1.31 */ .mw-body, #mw-head-base, #left-navigation, #mw-data-after-content, #footer { margin-left: 11em; } .mw-body { padding: 1.25em 1.5em 1.5em 1.5em; } #footer { padding: 1.25em; } #mw-panel { padding-left: 0.5em; } #p-search { margin-right: 1em; } #p-personal { right: 1em; }}/** * Minimum available screen width at which a device can be considered a mobile device * Many older feature phones have screens smaller than this value. * Number is prone to change with new information. * @since 1.31 */ /** * Minimum available screen width at which a device can be considered a tablet * The number is currently based on the device width of a Samsung Galaxy S5 mini and is low * enough to cover iPad (768px). Number is prone to change with new information. * @since 1.31 */ /** * Minimum available screen width at which a device can be considered a desktop * Number is prone to change with new information. * @since 1.31 */ @media print { /* These styles retain the existing typography in screen.less In future (when deploying these styles) we may want to refactor skins.vector.styles to apply certain styles in print as well as screen mode. */ .toc, body { padding: 10px; font-family: 'Linux Libertine', 'Georgia', 'Times', serif; } .printfooter, #footer, .thumb, table, ol, dl, ul, h3, h4, h5, h6 { font-family: sans-serif; } img { font-family: 'Linux Libertine', 'Georgia', 'Times', serif; } a.not( .image ) { border-bottom: 1px solid #06ad1a; } .firstHeading { font-size: 25pt; line-height: 28pt; margin-bottom: 20px; padding-bottom: 5px; } .firstHeading, h2 { overflow: hidden; border-bottom: 2px solid #000000; } h3, h4, h5, h6 { margin: 30px 0 0; } h2, h3, h4, h5, h6 { padding: 0; position: relative; } h2 { font-size: 18pt; line-height: 24pt; margin-bottom: 0.25em; } h3 { font-size: 13pt; line-height: 20pt; } h4, h5, h6 { font-size: 10pt; line-height: 15pt; } p { font-size: 10pt; line-height: 16pt; margin-top: 5px; text-align: justify; } p:before { content: ''; display: block; width: 120pt; overflow: hidden; } blockquote { border-left: 2px solid #000000; padding-left: 20px; } ol, ul { margin: 10px 0 0 1.6em; padding: 0; } ol li, ul li { padding: 2px 0; font-size: 10pt; } table ol li, table ul li { font-size: inherit; } .toc { page-break-before: avoid; page-break-after: avoid; background: none; border: 0; display: table; } .toc a { border: 0; font-weight: normal; } .toc > ul > li { margin-bottom: 4px; font-weight: bold; } .toc ul { margin: 0; list-style: none; } .toc ul ul { padding-left: 30px; } .toc li.toclevel-1 > a { font-weight: bold; font-size: 10pt; } .mw-jump-link, .toc .tocnumber { display: none; } .printfooter { margin-top: 10px; border-top: 3px solid #000000; padding-top: 10px; font-size: 10pt; clear: both; } #footer { margin-top: 12px; border-top: 1px solid #06ad1a; padding-top: 5px; } #footer-info { margin: 0; padding: 0; } #footer-info li { color: #06ad1a; list-style: none; display: block; padding-bottom: 10px; font-size: 10pt; } #footer-info li a { color: #00801e !important; /* stylelint-disable-line declaration-no-important */ } #footer-info-lastmod { color: #000000; font-size: 12pt; font-weight: bold; } }