Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Recipe.css: Difference between revisions

MediaWiki interface page
LightSwitch (talk | contribs)
No edit summary
LightSwitch (talk | contribs)
No edit summary
Line 2: Line 2:


  For the recipe infobox template design customisation.
  For the recipe infobox template design customisation.
Also includes pet battle template.
   
   
  *************************************************/
  *************************************************/
Line 87: Line 88:
.recipebox table.content td small b {
.recipebox table.content td small b {
     color: #FFF;
     color: #FFF;
}
/* Pet Battles */
.petBattle {
    font-family: Century Gothic, sans-serif;
    font-weight: bold;
    margin-bottom: 5px;
    color: #FFFFFF;
    text-shadow: 2px 2px 1px rgba(0,0,0,0.8);
}
.petBattle.style1>.Earth{
    width: 100%;
    background-image: url("https://vignette.wikia.nocookie.net/growtopia/images/d/d7/PetEarthbg.png");
    background-color: #2d6023;
    background-repeat: repeat;
    background-position: left top;
    position: relative;
}
.petBattle.style1>.Air{
    width: 100%;
    background-image: url("https://vignette.wikia.nocookie.net/growtopia/images/d/dd/Petairbg2.png");
    background-color: #af9e3a;
    background-repeat: repeat;
    background-position: left top;
    position: relative;
}
.petBattle.style1>.Water{
    width: 100%;
    background-image: url("https://vignette.wikia.nocookie.net/growtopia/images/4/46/Petwaterbg2.png");
    background-color: #078bc6;
    background-repeat: repeat;
    background-position: left top;
    position: relative;
}
.petBattle.style1>.Fire{
    width: 100%;
    background-image: url("https://vignette.wikia.nocookie.net/growtopia/images/9/90/PetFirebg.png");
    background-color: #720909;
    background-repeat: repeat;
    background-position: left top;
    position: relative;
}
}

Revision as of 11:53, 11 April 2020

/******************** Recipe.css *******************

 For the recipe infobox template design customisation.
 Also includes pet battle template.
 
 *************************************************/

/* Recipe Templates Customisation */
.recipebox {
    border-radius: 5px;
    color: #FFF;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
    margin: 3px 0 3px;
}
.recipebox a {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}
.recipebox a:hover {
    text-decoration: none;
}
.recipebox a:after {
    display: none !important;
}
.recipebox .content {
    padding: 10px 25px 10px;
    font-family: Century Gothic, sans-serif;
}
.recipebox table.content tbody {
    display: flex;
    flex-wrap: wrap;
}
.recipebox table.content tr {
    display: block;
    width: 100%;
}
.recipebox table.content th {
    display: block;
    color: #FFF;
    font-size: 32px;
    text-shadow: -2px 2px rgba(0,0,0,0.5);
    text-align: left;
    background: none;
    padding: 0;
    border: none;
}
.recipebox table.content th .growsprite {
    vertical-align: text-bottom;
    margin-right: 10px;
}
.recipebox table.content th .growsprite img {
    width: 40px;
}
.recipebox table.content td {
    display: block;
    text-shadow: -1px 1px rgba(256, 256, 256, 0.2);
    padding: 0;
    border: none;
}
.recipebox table.content td b {
    color: #FFF;
    text-shadow: -1px 1px rgba(0, 0, 0, 0.3);
}
.recipebox td a {
    text-shadow: -1px 1px rgba(0, 0, 0, 0.3);
}
.recipebox table.content .itemslot {
    position: relative;
    display: inline-block;
    background: rgba(0,0,0,0.3);
    box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    border-radius: 5px;
    padding: 8px;
}
.recipebox table.content .desc {
    background: rgba(0,0,0,0.3);
    box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    border-radius: 5px;
    margin: 5px 0 5px;
    color: rgba(256,256,256,0.9);
    padding: 5px 15px 5px;
    font-style: italic;
}
.recipebox table.content td small {
    color: #CCC;
}
.recipebox table.content td small b {
    color: #FFF;
}

/* Pet Battles */
.petBattle {
    font-family: Century Gothic, sans-serif;
    font-weight: bold;
    margin-bottom: 5px;
    color: #FFFFFF;
    text-shadow: 2px 2px 1px rgba(0,0,0,0.8);
}
 
.petBattle.style1>.Earth{
    width: 100%;
    background-image: url("https://vignette.wikia.nocookie.net/growtopia/images/d/d7/PetEarthbg.png");
    background-color: #2d6023;
    background-repeat: repeat;
    background-position: left top;
    position: relative;
}
 
.petBattle.style1>.Air{
    width: 100%;
    background-image: url("https://vignette.wikia.nocookie.net/growtopia/images/d/dd/Petairbg2.png");
    background-color: #af9e3a;
    background-repeat: repeat;
    background-position: left top;
    position: relative;
}
 
.petBattle.style1>.Water{
    width: 100%;
    background-image: url("https://vignette.wikia.nocookie.net/growtopia/images/4/46/Petwaterbg2.png");
    background-color: #078bc6;
    background-repeat: repeat;
    background-position: left top;
    position: relative;
}
 
.petBattle.style1>.Fire{
    width: 100%;
    background-image: url("https://vignette.wikia.nocookie.net/growtopia/images/9/90/PetFirebg.png");
    background-color: #720909;
    background-repeat: repeat;
    background-position: left top;
    position: relative;
}