MediaWiki:Common.css
Revision as of 09:28, 31 October 2018 by Dinoguy1000 (talk | contribs) (add a link icon for links to Wikipedia)
Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: hold down Ctrl and click the Refresh or Reload button. Firefox: hold down ⇧ Shift while clicking Reload (or press Ctrl+⇧ Shift+R). Google Chrome and Safari users can just click the Reload button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/*<nowiki>
Some CSS is loaded via a default, hidden gadget:
* CSS from Wikimedia is in [[MediaWiki:Gadget-Wikimedia.css]]
* card table CSS is in [[MediaWiki:Gadget-Cardtable.css]]
Please keep this in mind when adding or looking for CSS.
*/
/** CSS placed here will be applied to all skins **/
/* Remove serifs from headers. */
.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
font-family: sans-serif;
}
/**********************************/
/** Card galleries and lists. */
/** These are temporary; may be implmented as a gadget later. */
/* Card gallery ToC. */
.card-gallery__toc {
background-color: #f8f9fa;
border: 1px solid #CCC;
}
.card-gallery__toc ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 0;
}
.card-gallery__toc__entry {
display: inline-block;
padding: 0.25em;
}
.card-gallery__toc__entry::before { font-weight: bold; }
.card-gallery__toc__entry:first-child::before { content: 'Go to:\20'; }
.card-gallery__toc__entry:not(:first-child)::before { content: '• '; }
/* Card gallery errors. */
.card-gallery__errors { color: red; }
/* Card gallery itself. */
.card-gallery__gallery {
border-collapse: collapse;
border: 1px solid #CCC;
margin: 0.5em auto;
text-align: center;
}
.card-gallery__gallery .mw-gallery-traditional {
display: initial; /* In the odd case flex is not supported. */
display: flex;
justify-content: space-around; /* Because not all support the above. */
justify-content: space-evenly;
flex-wrap: wrap;
}
/** End possible temporary styles. */
/**********************************/
/* Card <gallery> styles. */
.card-galleries { /* TODO: Cleanup after updating Module:Set gallery. */
border-collapse: collapse;
border: 1px solid #CCC;
margin: 0.5em auto;
text-align: center;
}
.card-galleries th {
background-color: #337C97;
color: #FFF;
border: 1px solid #999;
margin: 0;
padding: 3px;
}
.card-galleries td {
margin: 0;
padding: 0;
text-align: center;
}
.card-galleries table.gallery {
width: 100%;
margin: 0;
border: 0;
}
.card-galleries table.gallery td {
background-color: transparent;
}
.card-galleries table.gallery .gallerybox {
background-color: #F9F9F9;
border: 1px solid #CCC;
margin: 0 auto;
}
.card-galleries table.gallery .gallerybox .thumb {
background-color: transparent;
border: 0;
margin: 0 auto;
padding: 10px 0 0 !important;
}
.card-galleries .thumb neutral,
.card-galleries .image lightbox,
.card-galleries .lightbox-caption {
border: 0;
background-color: transparent;
white-space: normal;
text-align: center;
font: sans-serif;
padding: 0;
}
.card-galleries .mw-gallery-traditional { /* TODO: Cleanup after updating Module:Set gallery */
display: initial; /* In the odd case flex is not supported. */
display: flex;
justify-content: space-around; /* Because not all support the above. */
justify-content: space-evenly;
flex-wrap: wrap;
}
.thumb {
display: flex;
align-items: center;
justify-content: center;
}
.noFile {
word-break: break-all; /* Because some browsers don't support break-word. */
word-break: break-word; /* https://developer.mozilla.org/en-US/docs/Web/CSS/word-break */
}
/* For {{Set gallery}} headers. */
.gallery-header {
font-size: 110%;
font-weight: bold;
text-align: center;
padding: 3px;
border-bottom: 1px solid #CCC;
border-top: 1px solid #CCC;
}
.gallery-header:first-child { /* Except for first instance. */
border-top: 0;
}
/* Anime and manga card galleries */
.anime-card-gallery .image-no-lightbox {
background-image: url('https://ms.yugipedia.com/thumb/9/94/Back-Anime-2.png/127px-Back-Anime-2.png');
}
.manga-card-gallery .image-no-lightbox {
background-image: url('https://ms.yugipedia.com/thumb/d/d7/Back-JP-Manga.png/140px-Back-JP-Manga.png');
background-repeat: no-repeat;
}
.manga-card-gallery-color .image-no-lightbox {
background-image: url('https://ms.yugipedia.com/thumb/f/fe/Back-JP-Manga-DM-color.png/140px-Back-JP-Manga-DM-color.png');
background-repeat: no-repeat;
}
.anime-card-gallery .image-no-lightbox,
.manga-card-gallery .image-no-lightbox,
.manga-card-gallery-color .image-no-lightbox {
font-size: 0.1px;
color: transparent;
}
.anime-card-gallery .wikia-gallery-item,
.manga-card-gallery .wikia-gallery-item,
.manga-card-gallery-color .wikia-gallery-item {
text-align:center;
}
.anime-card-gallery .thumbimage,
.manga-card-gallery .thumbimage,
.manga-card-gallery-color .thumbimage,
.anime-card-gallery .thumb .gallery-image-wrapper,
.manga-card-gallery .thumb .gallery-image-wrapper,
.manga-card-gallery-color .thumb .gallery-image-wrapper {
border-width: 0;
}
.anime-card-gallery .thumbimage[src*="-NC."],
.manga-card-gallery .thumbimage[src*="-NC."],
.manga-card-gallery-color .thumbimage[src*="-NC."],
.anime-card-gallery .thumbimage[src*="-NC-"],
.manga-card-gallery .thumbimage[src*="-NC-"],
.manga-card-gallery-color .thumbimage[src*="-NC-"] {
border-width: 1px;
}
/* Card errata styles */
table.card-errata {
width: 100%;
}
.card-errata caption {
background-color: #337C97;
color: #FFF;
}
.card-errata th {
background-color: #337C97 !important;
color: #FFF;
width: 33.33%;
}
.card-errata .twocolumn th {
width: 50%;
}
.card-errata .lores td,
.card-errata .images td {
vertical-align: top;
}
.card-errata .names td,
.card-errata .types td,
.card-errata .thumbcaption {
text-align: center;
}
.card-errata ins {
text-decoration: inherit;
border-bottom: 1px solid #000;
background-color: #FFC;
}
.card-errata del {
text-decoration: line-through;
color: #F66;
}
.card-errata .original {
opacity: 0.5;
}
.card-errata .original ins,
.card-errata .original del {
background-color: inherit;
color: inherit;
border-bottom: inherit;
}
.card-errata .blank {
background-color: #DDD;
}
/* Newer card errata styling (testing) */
.errata-list {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.errata-item-heading {
background-color: #337C97;
color: #FFF;
font-size: 1em;
font-weight: bold;
text-align: center;
margin: 0;
padding:.2em;
}
.errata-item {
border: 1px solid #aaa;
box-sizing: border-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
vertical-align: bottom;
flex-direction: column;
}
.errata-item-lore {
padding: .5em;
}
.errata-item-image {
border-top: 1px solid #aaa;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-top: auto;
padding: 1em .5em;
text-align: center;
}
.errata-item-image img {
height: 220px;
}
.errata-item-caption {
text-align: center;
}
@media screen and (min-width: 600px) {
.errata-item {
width: 50%;
}
}
@media screen and (min-width: 700px) {
.errata-item {
width: 33%;
}
}
@media screen and (min-width: 1100px) {
.errata-item {
width: 25%;
}
}
/* Card lists */
.card-list {
width: 100%;
clear: both;
}
.card-list tr th[colspan], .card-list caption {
font-size: 110%;
margin-top: 15px;
padding: 3px;
border: 1px solid #CCC;
border-bottom: 0;
}
.card-list tr th[colspan] a, .card-list caption a {
/* TODO: come up with a color that isn't eye-gougingly horrible
we'll also need to cover the :active, :hover, and :visited selectors */
}
.card-list tr:hover td {
background-color: #EEE;
}
/* DDM list */
ul.manga-ddm-list {
margin: 0;
list-style: none;
}
.manga-ddm-list > li {
display: flex;
padding: 0.5em;
margin: 0;
}
.manga-ddm-list-image {
min-width: 9em;
text-align: center;
}
.manga-ddm-list-image img {
height: auto;
max-width: 100%;
}
.manga-ddm-list-stats {
padding-left: 1em;
width: 100%;
}
.manga-ddm-list-stats .hlist {
border: solid #fff;
border-width: 1px 0;
padding: .25em 0;
}
.manga-ddm-list-dragon {
background-image: linear-gradient(#fff, #f99);
}
.manga-ddm-list-warrior {
background-image: linear-gradient(#fff, #b7eaf0);
}
.manga-ddm-list-spellcaster {
background-image: linear-gradient(#fff, #f9f9f9);
}
.manga-ddm-list-item,
[class*="manga-ddm-list-???"] {
background-image: linear-gradient(#fff, #c0c0c0);
}
/* hide some stuff on rollback/mover requests pages */
.page-Yu-Gi-Oh_Requests_for_rollback_requests #wpSummary,
.page-Yu-Gi-Oh_Requests_for_rollback_requests #wpSummaryLabel,
.page-Yu-Gi-Oh_Requests_for_mover_requests #wpSummary,
.page-Yu-Gi-Oh_Requests_for_mover_requests #wpSummaryLabel {
display: none;
}
/* Need to deprecate this */
.infobox-subheading {
background-color: #DDD;
font-weight: bold;
}
/* Indentation to mark beginning of list items in infoboxes */
.infobox td ul {
margin-left: .3em !important;
}
.infobox td li {
list-style: none;
}
/* Lyrics highlighting */
.high-light {
width: 100%;
font-size: 90%;
text-align: left;
border: 1px solid #AAA;
margin: 1em 1em 1em 0;
background-color: #F9F9F9;
}
.high-light th {
background-color: #337C97;
color: #FFF;
text-align: center;
}
.high-light tr:hover {
background-color: #EEF;
}
.high-light .section-begin td {
border-top: 1px solid #337C97;
}
/* hlist varieties: comma, slash, plus, minus, pipe */
.hcomma dd::after,
.hcomma li::after {
content: ",\20";
font-weight: normal;
}
.hslash dd::after,
.hslash li::after {
content: " / ";
font-weight: normal;
}
.hplus dd::after,
.hplus li::after {
content: " + ";
font-weight: normal;
}
.hplus dd:lang(ja)::after,
.hplus li:lang(ja)::after {
content: " ＋ ";
}
.hplus.inline ul {
display: inline;
}
.hminus dd::after,
.hminus li::after,
.hdash dd::after,
.hdash li::after {
content: " - ";
font-weight: normal;
}
.hminus dd:lang(ja)::after,
.hminus li:lang(ja)::after,
.hdash dd:lang(ja)::after,
.hdash li:lang(ja)::after{
content: " － ";
}
.hpipe dd::after,
.hpipe li::after {
content: " | ";
font-weight: normal;
}
/* prevent a delimiter from appearing after the last item */
.hlist dd:last-child::after,
.hlist dt:last-child::after,
.hlist li:last-child::after {
content: none;
}
/* For IE8 */
.hlist dd.hlist-last-child::after,
.hlist dt.hlist-last-child::after,
.hlist li.hlist-last-child::after {
content: none;
}
/* ...but that hides the closing parenthesis on sublists, so we have to re-add it */
.hlist dl dl dd:last-child::after,
.hlist dl dl dt:last-child::after,
.hlist ol ol li:last-child::after,
.hlist ul ul li:last-child::after {
content: ")";
font-weight: normal;
}
/* For IE8 */
.hlist dl dl dd.hlist-last-child::after,
.hlist dl dl dt.hlist-last-child::after,
.hlist ol ol li.hlist-last-child::after,
.hlist ul ul li.hlist-last-child::after {
content: ")";
font-weight: normal;
}
/* Tabber stuff:
* background
* smaller text in tabs when there're too many
* even smaller text
*/
.tabbertab {
background-color: #FFF;
}
.smalltabs .tabbernav li {
font-size: smaller;
}
.smallertabs .tabbernav li {
font-size: xx-small;
}
/* prev/next navigation */
.nav-prev {
float: left;
text-align: left;
}
.nav-prev li::before {
content: "← ";
}
.nav-next {
float: right;
text-align: right;
}
.nav-next li::after {
content: " →";
}
/* quotes in page titles ({{Quoted title}}) */
.quoted-title::before,
.quoted-title::after {
content: '"';
}
/* hide content in non-mobile devices
to hide content on mobile devices, use the "nomobile" class */
.mobile-show {
display: none;
}
/* most people don't need to worry about SMW warnings/notices */
.smw-editpage-help,
.smwttactivepersist,
.smwttpersist {
display: none;
}
/* make the left column in facttables not take up half the available width */
.smwpropname {
width: 25%;
}
/* make image thumbnail borders transparent so they don't look horrible on colored backgrounds */
div.thumb {
border: transparent;
}
/* [[Template:LoadBox]] with navbox */
.loadbox-navbox {
padding: 2px !important;
margin: 1em 0 0 !important;
clear: both;
}
.loadbox-navbox > p {
background-color: #CCC;
text-align: center;
margin: 0;
padding: 0 3px;
}
.loadbox-navbox > p > b {
font-size: 110%;
}
.loadbox-navbox .navbox {
margin: 0 -2px -2px;
border: 0;
}
.loadbox-navbox .navbox > tbody > tr:first-child {
display: none;
}
/* Forum formatting -Algorithm & -Splaka (is this actually still needed?) */
.forumheader { border: 1px solid #aaa; background-color: #f9f9f9; margin-top: 1em; padding: 12px; }
.forumlist td.forum_edited a { color: black; text-decoration: none; }
.forumlist td.forum_title a { padding-left: 20px; }
.forumlist td.forum_title a.forum_new { font-weight: bold; background: url('https://yugipedia.com/wiki/Special:Redirect/file/Forum_new.gif') center left no-repeat; padding-left: 20px; }
.forumlist td.forum_title a.forum_new:visited { font-weight: normal; background: none; padding-left: 20px; }
.forumlist th.forum_title { padding-left: 20px; }
/* redirects in special pages (e.g. Special:AllPages) */
.allpagesredirect a {
background: url('data:image/gif;base64,R0lGODlhCgAKAKL/AP///4ODg4MAAAAAAMDAwAAAAAAAAAAAACH5BAEAAAQALAAAAAAKAAoAQAMTSLrc8ks0Jqeq5GE8uYuOJnZMAgA7') center left no-repeat;
padding-left: 13px;
}
/* Adjust the word breaking for fullwidth text */
:lang(ja-Latn),
:lang(ko-Latn),
:lang(zh-Latn) {
word-break: keep-all;
}
/* Firefox ruby support */
@-moz-document url-prefix() {
/* http://web.nickshanks.com/stylesheets/ruby.css */
ruby {
display: inline-table;
text-align: center;
white-space: nowrap;
text-indent: 0;
margin: 0;
vertical-align: 55%;
}
ruby > rb {
display: table-row-group;
line-height: 100%;
}
ruby > rt {
display: table-header-group;
font-size: 60%;
line-height: 50%;
letter-spacing: 0;
}
rp {
display: none;
}
}
/* links to official websites */
div#content a[href^="http://www.db.yugioh-card.com"],
div#content a[href^="https://www.db.yugioh-card.com"],
div#content a[href^="//www.db.yugioh-card.com"],
div#content a[href^="http://db.yugioh-card.com"],
div#content a[href^="https://db.yugioh-card.com"],
div#content a[href^="//db.yugioh-card.com"] {
background-image: url('https://yugipedia.com/wiki/Special:Redirect/file/Official_card_database_favicon.png');
}
div#content a[href^="http://www.yugioh.com/cards"],
div#content a[href^="https://www.yugioh.com/cards"],
div#content a[href^="//www.yugioh.com/cards"],
div#content a[href^="http://yugioh.com/cards"],
div#content a[href^="https://yugioh.com/cards"],
div#content a[href^="//yugioh.com/cards"] {
background-image: url('https://yugipedia.com/wiki/Special:Redirect/file/Yugioh.com_anime_site_favicon.png');
padding-right: 16px;
}
/* links to Wikipedia */
div#content a[href^="http://en.wikipedia.org"],
div#content a[href^="https://en.wikipedia.org"],
div#content a[href^="//en.wikipedia.org"] {
background-image: url(https://yugipedia.com/wiki/Special:Redirect/file/Wikipedia-favicon.png);
}
/* interwiki links to wikipedia ([[wikipedia:Foobar]]) */
div#content a.extiw[href^="http://en.wikipedia.org"],
div#content a.extiw[href^="https://en.wikipedia.org"],
div#content a.extiw[href^="//en.wikipedia.org"] {
background-position: center right;
background-repeat: no-repeat;
padding-right: 19px;
}
/* Fix bottom ad overlapping side bar. */
#bottom-ad {
margin-left: 10em;
}
@media screen and (min-width: 982px) {
#bottom-ad {
margin-left: 11em
}
}
/* </nowiki> */
