ATTENTION: An Animal Crossing Wiki from Miraheze will be at a new website at animalcrossing.indyamos.com. This will be an enhanced version of this wiki. Please view Special:Diff/57616 for more information.

MediaWiki:Common.css

From Animal Crossing Wiki
Revision as of 07:48, 14 June 2024 by Lavapop101 (talk | contribs) (More css)
Jump to navigationJump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* 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;
}

/** We eliminate the edit section buttons **/
. mw-editsection {  
	display : none ; 
}

/*** Useful for templates and small effects ***/
. Squeeze { 
   padding-left : 0 px ;
   padding-right : 0 px ;
   transition-timing-function : ease-out ; 
    -webkit- transition-duration : 1.3 s ; 
       -moz- transition-duration : 1.3 s ; 
        -ms- transition-duration : 1.3 s ; 
         -o- transition-duration : 1.3 s ; 
            transition-duration : 1.3 s ; 
}

}

. Squeeze: hover {
   padding-left:130px;
   padding-right:130px;
}

. Featured Article {
   text-align:center;
   border-left:20px solid limegreen;
   border-right:20px solid limegreen;
}

. Featured Article: hover {
   text-align:center;
   border-left:20px solid #00b300;
   border-right:20px solid #00b300;
}

. ArticleFeatured to {
   text-decoration:none;
   border-bottom:none;
}

. ArticleFeatured to:hover {
   text-decoration:none;
   border-bottom:none;
   text-shadow:none ! important;
}

. Featured Article2, . Featured Article3, . Featured Article4 {
   text-align:center;
   border:2px solid lightgreen;
   border-radius:20px;
   -moz-border-radius:20px;
   -webkit-border-radius:20px;
}

. Featured Article2:hover {
   border:2px dashed #00b300;
   border-radius:0 20px 20px 25px;
   -moz-border-radius:0 20px 20px 25px;
   -webkit-border-radius:0 20px 20px 25px;
}

. Featured Article3:hover {
   border:2px dashed #00b300;
}

. Featured Article4:hover {
   border:2px dashed #00b300;
   border-radius: 20px 0 25px 20px;
   -moz-border-radius: 20px 0 25px 20px;
   -webkit-border-radius: 20px 0 25px 20px;
}

. Featured Article2 to, . Featured Article3 to, . Featured Article4 to {
   text-decoration:none;
   border-bottom:none;
   font-weight:bold;
   color:#00b300;
   font-size:110%;
   font-family: 'FinkHeavy', 'Comic Sans MS', Sans-serif;
}

. ArticleFeatured2 to: hover, . ArticleFeatured3 to: hover, . Featured Article4 to:hover {
   text-decoration:none;
   border-bottom:none;
   font-weight:bold;
   color: green;
   font-size:110%;
   font-family: 'FinkHeavy', 'Comic Sans MS', Sans-serif;
}

. Featured Survey {
   border:3px solid #E5DA76;
   background:#E5DA76;
   margin-top:5px;
}

. Featured Survey: hover {
   border:3px dotted yellow;
}

. SurveyFeatured to {
   border-bottom:none;
   text-decoration:none;
   color: black;
}

. SurveyFeatured to: hover {
   border-bottom:none;
   text-decoration:none;
   color:darkkhaki;
   text-shadow:0 0 5px yellow;
}

. BackgroundSectionsCover {
   background:url("http://indy.snowsherrill.com/images/2/29/Fence.png"), repeat-x ! important;
   padding-top:15px;
   padding-left:5px;
   font-family: 'FinkHeavy', 'Comic Sans MS', sans-serif;
   font-size:120%;
   font-weight:bold;
   min-height:46px;
}

. BackgroundSectionsCover:hover {
   font-size:130%;
}

. SheetSectionsCover {
   background:#E3FFA9;
   border-radius:10px;
   -moz-boder-radius:10px;
   -webkit-border-radius:10px;
   transition-timing-function: ease-out;
    -webkit-transition-duration: 0.4s;
       -moz-transition-duration: 0.4s;
        -ms-transition-duration: 0.4s;
         -o-transition-duration: 0.4s;
            transition-duration: 0.4s;
}

. SheetSectionsCover:hover {
   border-radius:30px;
   -moz-boder-radius:30px;
   -webkit-border-radius:30px;
}

.irObjects {
   background:white;
   transition-timing-function: ease-out;
    -webkit-transition-duration: 0.6s;
       -moz-transition-duration: 0.6s;
        -ms-transition-duration: 0.6s;
         -o-transition-duration: 0.6s;
            transition-duration: 0.6s;
    -webkit-transition-duration: 0.6s;
       -moz-transition-duration: 0.6s;
        -ms-transition-duration: 0.6s;
         -o-transition-duration: 0.6s;
            transition-duration: 0.6s;
   text-align:center! important;
}
.irObjects:hover {
   text-shadow:0 0 10px black ! important;
   -moz-text-shadow:0 0 10px black ! important;
   -webkit-text-shadow:0 0 10px black ! important;
   background:silver ! important;
   color: white! important;
   padding-left:5px ! important;
   text-align:left ! important;
}
.irObjects: hover a {
   color: white! important;
}
.irObjects to {
   color: black! important;
}
.irObjects to:hover {
   text-decoration:none;
}

. Song Button {
   border:1px solid orange;
   background:#FFFF8C;
}

. Song button: hover {
   border:1px solid white ! important;
   background:red ! important;
}

. Song Button: hover to {
   color: white;
   text-decoration:none;
}

. Song button2 {
   border:1px solid orange;
   background:#FFFF8C;
}

. ButtonSong2:hover {
   border:1px solid white ! important;
   background:blue! important;
}

. Song button 2: hover to {
   color: white;
   text-decoration:none;
}

. VTPSong {
   border:none;
}

. VTPSong: hover {
   box-shadow:0 0 10px red;
   -moz-box-shadow:0 0 10px red;
   -webkit-box-shadow:0 0 10px red;
}

. VTPSong to {
   color: red;
}

. VTP Song: hover to {
   color: red;
   text-shadow:0 0 5px orange;
   -moz-text-shadow:0 0 5px orange;
   -webkit-text-shadow:0 0 5px orange;
}

. Transparency {
   opacity:0.5;
}

. Transparency: hover {
   opacity:1;
}

#button-hub {
   margin-top:-5px;
}

#button-hub:hover {
   margin-top:8px ! important;
}

/* 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; }