MediaWiki:Common.css: Difference between revisions

Revision as of 10:23, 3 June 2024

/* CSS placed here will be applied to all skins */

/* Tables with infobox class and additional bordered class */
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #aaaaaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}

/*Change in links on hover*/
a:hover {
color:darkgreen;
text-shadow:0 0 3px springgreen;
-moz-text-shadow:0 0 3px springgreen;
-webkit-text-shadow:0 0 3px springgreen;
}

/* Appearance of galleries (gallery tag) */
table.gallery {
border:none;
}

table.gallery td {
border:none;
font-size:95%;
}

div.gallerybox div.thumb:hover,div.gallerybox div.thumb div:hover {
background-color:Orange;
}

div.gallerybox div.thumb:hover {
-moz-box-shadow:0 0 0.5em 0.1em #598EFF;
}
/***Small caps***/
.Caps {
font-variant:small-caps;
}

/* Highlight diff changes with border, only on mouseover */
.diff tr:hover del, .diff tr:hover ins {outline:2px solid #1e90ff;}

/*** IMAGES (taken from WikiDex, the Pokémon encyclopedia) ***/
/* Grid background on transparent images */
body.ns-6 #file img {
background:url('data:image/gif;base64,R0lGODdhEAAQAIABAO/v7////ywAAAAAEAAQAAACH4RvoauIzNyBSyYaLMDZcv15HAaSIlWiJ5Sya/RWVgEAOw==') repeat fixed;
}
/* Dark background when hovering over */
body.ns-6 #file img:hover {
background:none #333;
}

/* We remove the 'outline' from the images */
a.image { outline: none; }

/* Appearance of the thumbs */
div.thumbinner {
background-color:green;
background:-moz-linear-gradient(center top, limegreen 0%, green 100%);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, limegreen), color-stop(100%, green));
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='limegreen', startColorstr='green', gradientType='0');
border:none;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
color:#FFFFFF !important;
-moz-box-shadow:2px 2px 5px lime;
-webkit-box-shadow:2px 2px 5px lime;
box-shadow:2px 2px 5px lime;
padding-top:4px !important; /* One more pixel to match the sides */
}

.thumbinner a, .thumbinner a:visited { color:yellow; }

.thumbnail a:hover { color:yellow; }

.content figcaption, .content .thumbcaption {
color: #FFFFFF
}

img.thumbimage {
background-color:#f9f9f9;
border:none;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

a.magnify.sprite { background:url("http://indy.snowsherrill.com/images/9/9b/Right_button.png") center center no-repeat; }

/* Reduced the bottom margin of thumbs */
div.tright, div.tleft {
margin-bottom: 0.8em;
}

/* Removed a huge white border that looks bad on colored backgrounds for the same margin value */
div.tright {
border-width:0;
margin:0.5em 0 0.8em 1.4em;
}
div.tleft {
border-width:0;
margin:0.5em 1.4em 0.8em 0;
}

/* Appearance of galleries in articles (gallery tag) */
.gallerybox {
background-color:#333;
background:-moz-linear-gradient(center top, #888 0%, #333 100%);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, limegreen), color-stop(100%, green));
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='limegreen', startColorstr='green', gradientType='0');
padding:4px 2px 4px 4px !important;
margin:6px 7px 6px 0 !important;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:2px 2px 5px lime;
-webkit-box-shadow:2px 2px 5px lime;
box-shadow:2px 2px 5px lime;
}
ul.mw-gallery-nolines li.gallerybox div.thumb {
background-color: #fff;
}
/*To make the letter in the galleries appear white*/
.gallerybox .gallerytext { color:#fff }

.gallerybox a { color:yellow; }

.accent { border:0 !important; }

.gallerybox > .lightbox-caption { font-size:95%; margin-top:0; }

.gallerybox > div.thumb {
height:auto !important;
background:#ededed;
border:none !important;
margin-right:2px !important;
}

.gallerybox > div.thumb > div.gallery-image-wrapper { position:static !important; }

/* Appearance of galleries in categories (gallery tag) */
table.gallery {
border:none;
}

table.gallery td, .gallerybox {
font-size:90%;
}

.gallerybox div.neutral {
background-color:#f9f9f9;
}

div.gallerybox div.thumb:hover, .gallerybox div.neutral:hover {
-moz-box-shadow:0 0 0.5em 0.1em #598EFF;
border-color:#598EFF !important;
}

/* Flex box */
.flexbox {
display: flex;
flex-flow: row wrap;
justify-content:center;
margin:auto;
max-width: 1000px;
}

/* Rounded Corners */
.roundy { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; -icab-border-radius: 20px; -o-border-radius: 20px; }
 
.roundytl { border-top-left-radius: 20px; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; -khtml-border-top-left-radius: 20px; -icab-border-top-left-radius: 20px; -o-border-top-left-radius: 20px; }
 
.roundytr { border-top-right-radius: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-top-right-radius: 20px; -icab-border-top-right-radius: 20px; -o-border-top-right-radius: 20px; }
 
.roundybl { border-bottom-left-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; -khtml-border-bottom-left-radius: 20px; -icab-border-bottom-left-radius: 20px; -o-border-bottom-left-radius: 20px; }
 
.roundybr { border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; -khtml-border-bottom-right-radius: 20px; -icab-border-bottom-right-radius: 20px; -o-border-bottom-right-radius: 20px; }
 
.roundybottom { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; -khtml-border-bottom-left-radius: 20px; -khtml-border-bottom-right-radius: 20px; -icab-border-bottom-left-radius: 20px; -icab-border-bottom-right-radius: 20px; -o-border-bottom-left-radius: 20px; -o-border-bottom-right-radius: 20px; }
 
.roundytop { border-top-left-radius: 20px; border-top-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-top-left-radius: 20px; -khtml-border-top-right-radius: 20px; -icab-border-top-left-radius: 20px; -icab-border-top-right-radius: 20px; -o-border-top-left-radius: 20px; -o-border-top-right-radius: 20px; }
 
.roundyleft { border-top-left-radius: 20px; border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -khtml-border-top-left-radius: 20px; -khtml-border-bottom-left-radius: 20px; -icab-border-top-left-radius: 20px; -icab-border-bottom-left-radius: 20px; -o-border-top-left-radius: 20px; -o-border-bottom-left-radius: 20px; }
 
.roundyright { border-bottom-right-radius: 20px; border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -moz-border-radius-topright: 20px; -webkit-border-bottom-right-radius: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-bottom-right-radius: 20px; -khtml-border-top-right-radius: 20px; -icab-border-bottom-right-radius: 20px; -icab-border-top-right-radius: 20px; -o-border-bottom-right-radius: 20px; -o-border-top-right-radius: 20px; }