MediaWiki:Recipe.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.
/******************** 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 tbody {
    padding: 10px 25px 10px;
}
.recipebox a {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}
.recipebox a:hover {
    text-decoration: none;
}
.recipebox a:after {
    display: none !important;
}
.recipebox .content {
    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;
}
.recipebox .growsprite {
    filter: drop-shadow(-2px 2px 0 rgba(0,0,0,0.4));
}

/* 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://cdn.growtopiawiki.com/uploads/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://cdn.growtopiawiki.com/uploads/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://cdn.growtopiawiki.com/uploads/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://cdn.growtopiawiki.com/uploads/9/90/PetFirebg.png");
    background-color: #720909;
    background-repeat: repeat;
    background-position: left top;
    position: relative;
}