MediaWiki:Gadget-wm-portal.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
* This is the stylesheet for the [[m:Project portal]] templates.
* It should loosely match the style of MediaWiki's Vector theme
* for consistency.
* Colors from ./skins/Vector/screen.css
*
* Indention style: 1 tab
*
* Don't be afraid to document changes here with comments, this stylesheet
* is loaded through ResourceLoader on the portal pages and as such is minified
* and squeezed into a tiny package delivered from load.php
*
* Usage:
* <link rel="stylesheet" href="//meta.wikimedia.org/w/load.php?debug=false&lang=en&modules=ext.gadget.wm-portal&only=styles&skin=vector&*">
*
* (if RTL flipping is needed, replace lang=en with the correct language)
*/
body {
background-color: white;
font: 13px/1.5 sans-serif;
margin: 0.3em 0;
}
a,
a:active,
a:focus {
unicode-bidi: embed;
white-space: nowrap;
outline: 0;
color: #0645AD;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
border: none;
vertical-align: middle;
}
hr {
clear: both;
height: 0;
border: none;
border-bottom: 1px solid #aaa;
margin: 0.2em 1em;
}
/**
* Central logo area for wiki-project portals
* (e.g. where the globe is on www.wikipedia.org)
*/
.central-textlogo {
margin: 1em 0 0.3em 0;
text-align: center;
font-size: 30px;
line-height: 110%;
font-family: 'Linux Libertine', 'Hoefler Text', Georgia, 'Times New Roman', Times, serif;
font-weight: normal;
padding: 10px 0;
/* Crossed W in Linux Libertine */
-moz-font-feature-settings: "ss05=1"; -moz-font-feature-settings: "ss05";
-webkit-font-feature-settings: "ss05";
-ms-font-feature-settings: "ss05";
font-feature-settings: "ss05";
}
.central-featured {
position: relative;
text-align: center;
vertical-align: middle;
max-width: 100%;
width: 42em;
margin: 0 auto;
height: 26em;
}
.central-featured-logo {
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: 200px auto;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.central-featured-lang {
position: absolute;
width: 12em;
}
/* Make entire block clickable, surpress hover underline */
.central-featured-lang .link-box {
display: block;
padding: 0;
text-decoration: none;
}
/* Restore underline on main label */
.central-featured-lang .link-box:hover strong {
text-decoration: underline;
}
/* Surpress blue color */
.central-featured-lang .link-box em,
.central-featured-lang .link-box small {
color: black;
text-decoration: none;
}
.central-featured-lang strong {
font-size: larger;
}
.central-featured-lang em {
font-style: italic;
}
.central-featured-lang .emNonItalicLang {
font-style: normal;
}
/* Serbo-Croatian is dual-script, so it needs some tweaking to fit in the top 10 ring. */
/* .digraphic strong {
font-size: 110%;
line-height: 1em;
}
.digraphic em,
.digraphic em + br {
display: none;
} */
.lang1 {
top: 0;
right: 60%;
}
.lang2 {
top: 0;
left: 60%;
}
.lang3 {
top: 20%;
right: 70%;
}
.lang4 {
top: 20%;
left: 70%;
}
.lang5 {
top: 40%;
right: 72%;
}
.lang6 {
top: 40%;
left: 72%;
}
.lang7 {
top: 60%;
right: 70%;
}
.lang8 {
top: 60%;
left: 70%;
}
.lang9 {
top: 80%;
right: 60%;
}
.lang10 {
top: 80%;
left: 60%;
}
/**
* Search bar below the central logo area
*/
.search-container {
float: none;
margin: 1em auto 1.5em auto;
max-width: 95%;
padding: 0.3em;
text-align: center;
vertical-align: middle;
width: 540px;
}
.search-form fieldset {
background-color: #f9f9f9;
border: 1px solid #aaa;
margin-top: 0.5em;
padding: 0.7em;
width: auto;
}
.search-form #searchInput {
font-size: 1.2em;
margin: 0;
padding: 0;
vertical-align: top;
}
.search-form select {
margin: 0 0.4em;
padding: 0;
vertical-align: middle;
max-width: 12em;
}
/**
* Language lists, bookshelves, etc.
*/
.bookshelf-container {
width: 100%;
overflow: hidden;
margin: 2em 0 0.5em 0;
font-size: 13px;
font-weight: bold;
line-height: 20px;
}
.bookshelf-container .text {
padding: 0 0.5em;
}
.bookshelf {
display: block;
width: 300%;
overflow: hidden;
position: relative;
left: -100%;
text-align: center;
white-space: nowrap;
}
.bookshelf-container .bookend {
display: -moz-inline-stack; display: inline-block;
background-image: url(//upload.wikimedia.org/wikipedia/commons/b/bd/Bookshelf-40x201_6.png);
background-repeat: repeat-x;
width: 480px;
height: 20px;
vertical-align: top;
}
.langlist {
text-align: center;
margin: 0.5em 3em 2.5em 3em;
}
.langlist-large {
font-size: larger;
}
.langlist-tiny {
margin: 0.5em 3em 3em 3em;
}
.langlist-others {
margin: 0 3em 2em 3em;
font-weight: bold;
}
.otherprojects {
font-weight: bold;
margin: 1.5em auto;
text-align: left;
vertical-align: middle;
width: 90%;
}
.otherprojects-item {
float: left;
height: 60px;
min-width: 12em;
width: 24.75%;
line-height: 60px;
}
.otherprojects-item a {
display: block;
width: 10em;
margin: 0 auto;
}
.otherprojects-item .icon {
display: -moz-inline-stack; display: inline-block;
width: 47px;
text-align: center;
}
.wm-site-info {
clear: both;
margin: 2.5em 0 2em 0;
text-align: center;
padding-top: 1.5em;
}
/**
* Style for horizontal lists (separator following item).
* @note Support for unused tags like <dt> has been stripped out, and the
* dependency on :last-child and JavaScript has been removed in favor of
* :before.
* @source mediawiki.org/wiki/Snippets/Horizontal_lists
* @revision 6 (2014-05-09)
* @author [[User:Edokter]]
*/
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline */
.hlist li {
display: inline;
}
/* Display nested lists inline */
.hlist ul ul {
display: inline;
}
/* Generate interpuncts */
.hlist li:before {
content: " · ";
font-weight: bold;
}
.hlist li:first-child:before {
content: none;
}
/* Add parentheses around nested lists */
.hlist li + ul:before {
content: "\00a0(";
}
.hlist li + ul:after {
content: ") ";
}
/**
* Print stylesheet
*/
@media print {
body {
background-color: transparent;
}
a {
color: black !important;
background: none !important;
padding: 0 !important;
}
a:link,
a:visited {
color: #520;
background: transparent;
}
img {
border: none;
}
}
@media all and (max-width:480px) {
.central-textlogo {
line-height: normal;
padding: 0;
margin: 0;
height: 70px;
text-align: left;
padding-left: 84px;
position: relative;
}
.central-textlogo img {
height: 35px;
width: auto;
margin-top: 22.5px;
}
.central-featured {
width: auto;
height: auto;
padding-top: 2em;
text-align: left;
font-size: 0.8em;
margin-top: 4em;
}
.central-featured-logo {
right: 0;
left: 0.8em;
top: -70px;
margin-top: -4em;
width: 70px;
height: 70px;
background-size: 70px auto;
}
.central-featured-lang {
right: auto;
top: auto;
position: relative;
left: auto;
text-align: left;
margin-left: 1em;
display: block;
float: left;
width: 40%;
height: 5em;
}
.search-container {
margin-top: 0;
height: 6em;
position: absolute;
top: 5em;
left: 0;
right: 0;
max-width: 100%;
width: auto;
padding: 0;
text-align: left;
}
.search-container label {
display: none;
}
.search-form #searchInput {
max-width: 40%;
vertical-align:middle;
}
.search-form #searchLanguage,
.search-form .formBtn {
max-width: 25%;
vertical-align: middle;
}
form fieldset {
margin: 0;
border-left: none;
border-right: none;
}
.language-search {
display: none;
}
.bookshelf {
width: auto;
left: auto;
overflow: hidden;
text-align: left;
}
.bookshelf-container .bookend {
width: 40px !important;
}
.bookshelf-container .bookend:last-child {
display: none;
}
.langlist a {
word-wrap: break-word;
white-space: normal;
}
.langlist {
font-size: 0.7em
}
.otherprojects-item {
width: 50%;
text-align: left;
}
.bookshelf-container,
.langlist {
margin: 1em 1em 0 1em;
text-align: left;
width: auto;
}
hr {
margin-top: 0.5em;
}
}
@media all and (max-width:240px) {
.central-featured-lang,
.otherprojects-item {
width: 100%;
}
.central-textlogo img {
width: 100px;
height: auto;
}
}
@media all and (max-width: 45em) {
.otherprojects {
width: 100%;
}
.otherprojects-item {
width: 33.33%;
}
}
@media all and (max-width: 30em) {
.otherprojects-item {
width: 50%;
}
}
@media all and (max-width: 20em) {
.otherprojects-item {
width: 100%;
}
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
.bookshelf-container .bookend {
background-image: url(//upload.wikimedia.org/wikipedia/meta/5/52/Bookshelf-40x20_1.5x.png);
background-size: 40px auto;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
.bookshelf-container .bookend {
background-image: url(//upload.wikimedia.org/wikipedia/meta/4/46/Bookshelf-40x20_2x.png);
background-size: 40px auto;
}
}
/* Subpixel borders supported in Gecko, Trident */
@media (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
#footer,
.search-form fieldset {
border-width: 0.5px;
}
hr {
border-bottom-width: 0.5px;
}
}
/* Subpixel borders not supported in older releases of Blink, WebKit */
@supports (-webkit-marquee-style: slide) {
#footer,
.search-form fieldset {
border-width: 1px;
}
hr {
border-bottom-width: 1px;
}
}