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

/* The CSS added here will affect both desktop and mobile users. Before finishing, please ensure that the style works well on all devices.

This CSS page contains formatting for in-article elements like tables and images. If you're looking for formatting for the whole site, check https://grousehouse.wiki/MediaWiki:Foreground.css!

Table of Contents (you can search the page for these titles to jump straight there):
• Article warnings
    • Crowdsource warning
• Basic text tables and lists
    • Basic list
    • Basic list with inside borders
    • List with multiple items on each row
    • List with alternating color rows
• Images and image grids
    • Large image grid
    • Small item grid
• Universal tables and tools
    • Explore encounter table
    • Crafting recipe table
    • Achievements box
    • Individual applicator preview boxes
    • NPC profile box
    • Spoiler button
    • Grouse tips
    • Storyline elements
    • Battle enemy tables
• Shop content
    • Shopkeeper table
    • Shop content boxes
• Lunar event-specific tables
    • Monthly lunar applicator tables
• Matchmaker event-specific tables
    • Dateable list box (not currently in use - intended for lists about who each gender is able to date)
    • Dateable profile box
*/

/* Article warnings */

/* Crowdsourcing warning {{Crowdsourcing}} */

.crowdsource-warning {
    background-color: #d4d4d4;
    width: 90%;
    margin: auto;
    border: 1px solid gray;
    border-radius: 20px;
}

.warningtitle {
    text-align: center;
    background-color: #b0b0b0;
    border-radius: 20px 20px 0 0;
    padding: 10px;
    font-weight: bold;
}

.warning-body {
    padding: 10px;
}

/* Basic text tables and lists */

/* Basic list */

table.TB-basic-list {
    width: 100%;
    background-color: #c3c3c3;
    border: 1px solid black;
    border-collapse: collapse;
}

table.TB-basic-list th {
    background-color: black;
    color: white;
    padding: 5px;
}

table.TB-basic-list tr {
    border-top: 1px solid black;
}

table.TB-basic-list td {
    padding: 5px;
}

/* Basic list with inside borders */

table.TB-bordered-list {
    width: 40%;
    background-color: #c3c3c3;
    border-collapse: collapse;
    border: 1px solid black;
    text-align: center;
}

table.TB-bordered-list th {
    background-color: black;
    color: white;
    padding: 5px;
}

table.TB-bordered-list td {
    padding: 5px;
    border: 1px solid black;
}

/* List with multiple items on each row */

table.rowlist {
    background-color: #d4d4d4;
    width: 100%;
}

table.rowlist th {
    background-color: #acacac;
    padding: 10px;
    font-weight: bold;
    text-align: center;
}

tr.rowlistsubheader {
    text-align: center;
    background-color: #c4c4c4 !important;
    font-weight: bold;
}

td.rowlistitems {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.rowlistitem {
    margin-left: 1em;
    background-color: #c4c4c4;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* List with alternating color rows */

table.altlist {
    width: 60%;
    margin: auto;
    border: 1px solid gray;
}

.altlist tr:nth-of-type(odd) {
    background-color: #c6c6c6;
}

.altlist tr:nth-of-type(even) {
    background-color: #d4d4d4;
}

table.altlist td {
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/*  Images and image grids */

/* Large image grid */

.imagegrid {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.gridimage {
    padding: 10px;
}

.gridimage img {
    height: 150px;
    width: auto;
    border-radius: 10px;
    border: 1px solid black;
}

/* Small item grid {{ItemGrid}} {{ItemGridItem}} */

div.itemgrid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    margin-right: auto;
}

@media only screen and (max-width: 40rem) {

div.griditem {
    width: 10em !important;
}

}

div.griditem {
    background: #d4d4d4;
    margin-right: 15px;
    border: 1px solid gray;
    border-radius: 10px;
    margin-bottom: 15px;
    text-wrap: wrap;
    width: 15em;
}

div.item-name {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #acacac;
    border-radius: 10px 10px 0 0;
    padding: 10px 5px;
    min-height: 50px;
    height: 70px;
}

div.item-image {
    padding: 10px;
    width: auto;
}

div.item-image img {
    max-width: 20vw;
    height: auto;
    width: auto;
}

/* Universal tables and tools */

/* Explore encounter table */

table.explore_encounter {
    width: 90%;
    margin: auto;
    background-color: #ededed;
    text-align: center;
    border-collapse: collapse;
}

table.explore_encounter td {
    padding: 10px;
    border: 1px solid black;
}

tr.encounter_options td:first-of-type {
    background-color: #b4b4b4;
}

tr.encounter_options td {
    background-color: #d1d1d1;
}

button.b_encountertime {
    background: none;
    padding: 5px;
}

/* Crafting recipe table {{CraftingRecipe}} */

table.crafting-recipe {
    width: 60%;
    margin: auto;
    background-color: #b0b0b0;
    border: 1px solid black;
    border-collapse: collapse;
}

tr.recipe-name td {
    padding: 10px;
}

td.recipe-thumb {
    background-color: #d4d4d4;
    text-align: center;
    width: 20%;
    padding: 10px;
}

td.recipe-ingredients {
    background: #d4d4d4;
    padding: 10px;
}

td.recipe-ingredients img {
    width: 40px;
    height: auto;
    padding: 5px;
}

td.recipe-obtention {
    text-align: center;
    padding: 10px;
}

td.recipe-preview {
    text-align: center;
    background-color: #d4d4d4;
}

/* Achievement box */

table.achievement {
    background-color: #d4d4d4;
    width: 80%;
    border: 1px solid black;
    border-collapse: collapse;
    margin: auto;
}

tr.achievement_icon {
    background-color: #b7b7b7;
}

tr.achievement_icon td {
    padding: 10px;
    font-weight: bold;
}

tr.achievement_icon td:first-of-type {
    text-align: center;
    width: 20%;
    font-weight: normal;
}

tr.achievement-text td {
    padding: 10px;
}

/* Individual applicator preview boxes */

table.applicatorpreview {
    background-color: #dedede;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

table.applicatorpreview td {
    border: 1px solid black;
    padding: 10px;
}

td#app_name {
    background: #9e9e9e;
}

td#app_genetics {
    background: #bcbcbc;
}

td#app_obtention {
    background: #bcbcbc;
}

td#markingapp_preview img {
    width: 100%;
    height: auto;
}

table.markingapplicatorpreview {
    background-color: #dedede;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

table.markingapplicatorpreview td {
    border: 1px solid black;
    padding: 10px;
}

table.clawleathersapplicatorpreview {
    background-color: #dedede;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

table.clawleathersapplicatorpreview td {
    border: 1px solid black;
    padding: 10px;
}

table.clawleathersapplicatorpreview td#app_preview img {
    width: 100%;
    height: auto;
}

table.applicatorpreview td#app_preview img {
    width: 100%;
    height: auto;
}

td#app_explorepreview {
    border-top: none;
}

/* NPC Profile Box */

table.npc {
background-color: #d4d4d4;
    border-collapse: collapse;
    width: 100%;
    margin: auto;
font-size: 14px;
}

table.npc .spoilerButton {
text-align: center;
}

table.npc td {
    border: 1px solid gray;
}

td.npc-name {
    background-color: #9b9b9b;
    padding: 10px;
    font-weight: bold;
border-right: none !important;
width: 40%;
}

td.npc-species {
    background-color: #9b9b9b;
    padding: 10px;
    font-weight: bold;
text-align:right;
border-left: none !important;
width: 60%;
}

td.npc-image {
    text-align: center;
    padding: 10px;
border-bottom: none !important;
}

tr.npc-pronouns td {
    text-align: center;
    padding: 5px;
font-style: italic;
border-top: none !important;
}

td.npc-bio {
padding: 10px;
}

/* Spoiler button */

.spoilerButton p {
    background-color: #acacac;
    width: 40%;
    margin: 5px auto;
    padding: 10px;
    border-radius: 10px;
}

.spoilerButton p:hover {
    background-color: #929292;
}

.spoilerContent {
    padding: 10px;
}

/* Grouse Tips */

table.grousetip {
    width: 100%;
    background: #f0f0f0;
    border: 1px solid gray;
    border-collapse: collapse;
}

table.grousetip td {
    padding: 10px;
}

td.grousetipheader {
    background-color: #c7c7c7;
}

td.grousetipimage {
    width: 30%;
    vertical-align: top;
}

/* Storyline Elements */

/* Page Boxes */

.storylinel {
    width: 100%;
    background: #d4d4d4;
    display: inline-block;
}

.storyliner {
    width: 100%;
    background: #d4d4d4;
    display: inline-block;
}

.storylinel span[typeof="mw:File"] {
    float: left;
    margin-right: 1.5em;
}

.storyliner span[typeof="mw:File"] {
    float: right;
    margin-left: 1.5em;
}

.storylinel .text {
    padding: 2em;
}

.storyliner .text {
    padding: 2em;
}

@media only screen and (max-width: 56.25rem) {

.storylinel span[typeof="mw:File"] {
width: 50%;
}

.storyliner span[typeof="mw:File"] {
width: 50%;
}
}

/* Storyline Buttons */

.storybluebutton {
background:#057cb3;
padding: 0.5em;
    color: #fff;
    width: auto;
    text-align: center;
font-weight: bold;
    margin-right: 1em;
margin-top: 1em;
}

.storygreenbutton {
background:#78a64b;
padding: 0.5em;
    color: #fff;
    width: auto;
    text-align: center;
font-weight: bold;
    margin-right: 1em;
margin-top: 1em;
}

/* Battle enemy tables */

table.enemy {
    background-color: #d4d4d4;
    border: 2px solid black;
}

table.enemy td.enemyname {
    background: #3a5f70;
    color: white;
    padding: 10px;
    font-weight: bold;
    border-bottom: 2px solid #000000;
}

table.enemy td.enemyimage {
    text-align: center;
    width: 60%;
    border-right: 2px solid #6c6c6c;
    border-bottom: 2px solid #6c6c6c;
    background: white;
}

table.enemy td.icons {
    background: #3a5f70;
    color: white;
    padding: 10px;
    font-weight: bold;
    border-bottom: 2px solid #000000;
    text-align: right;
}

table.enemy td.icons img {
    max-height: 2em;
    margin-left: 0.5em;
}

table.enemy td.enemylevels {
    border-bottom: 2px solid #6c6c6c;
    height: 3vh;
    padding-left: 10px;
    font-weight: bold;
    background: #a1a1a1;
    text-align: center;
}

table.enemy td.enemymodifiers {
    height: 15vh;
    border-bottom: 2px solid #6c6c6c;
}

table.enemy div.tableflex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

table.enemy div.modifier {
    margin: 10px;
    background: darkgray;
    width: 75px;
    text-align: center;
    border-radius: 5px;
    border: 2px solid #6c6c6c;
    height: 75px;
    padding-top: 10px;
}

table.enemy div.modifier img {
    height: 50%;
    width: auto;
}

table.enemy td.enemymoves {
    border-bottom: 2px solid #6c6c6c;
    padding-left: 10px;
    height: 15vh;
    vertical-align: top;
    padding-top: 10px;
}

table.enemy td.enemybiomes {
    border-right: 2px solid #6c6c6c;
    border-bottom: 2px solid #6c6c6c;
}

table.enemy td.enemybiomes div.biome {
    background: url(https://grousehouse.wiki/images/b/b1/Explore_desert_summer_day.png);
    background-position: center;
    background-size: 250%;
    width: 8em;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: center;
    border-radius: 10px;
    margin: 0.5em;
    border: 2px solid black;
}

table.enemy td.enemystats {
    border-bottom: 2px solid #6c6c6c;
}

table.enemy td.enemystats div.stat {
    width: 8em;
    color: #713636;
    text-align: center;
    border-radius: 10px;
    margin: 0.5em;
    border: 2px solid #6c6c6c;
    height: 2.5em;
    line-height: 2.25em;
    background-color: #ca8282;
}

table.enemydrops {
    background-color: #d4d4d4;
    border: 2px solid black;
    border-top: 2px solid #6c6c6c;
    margin-top: -1.4em;
}

table.enemydrops div.tableflex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}

table.enemydrops td.trophies {
    padding: 10px;
    border-bottom: 2px solid #6c6c6c;
}

table.enemydrops div.trophy {
    margin: 0.5em;
    width: 10%;
    text-align: center;
    background: #b4b4b4;
    padding: 0.5em;
    border-radius: 10px;
    min-width: 6em;
}

table.enemydrops td.recipeheader {
    width: 11%;
}

table.enemydrops td.recipeheader div.recipe {
    width: 100%;
    background: none !important;
}

table.enemydrops td.recipes {
    padding: 10px;
}

table.enemydrops div.recipe {
    margin: 0.5em;
    width: 11.5%;
    text-align: center;
    background: #b4b4b4;
    padding: 0.5em;
    border-radius: 10px;
    min-width: 6em;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.show {display:block;}

/* Shop content */

/* Shopkeeper table */

table.shopkeeper {
    border-collapse: collapse;
    margin: auto;
    background-color: #dedede;
    border: 1px solid black;
}

table.shopkeeper td {
    padding: 10px;
}

td.shopkeepername {
    width: 50%;
}

td.shopkeeperimage {
    text-align: center;
}

td.shopkeeperimage img {
    width: 100%;
}

/* Shop content boxes {{ShopContent}} {{_ShopItem}} */ 

div.shopcontent {
    display: flex;
    flex-direction: row;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
}

div.shop-item {
    background: #d4d4d4;
    margin-right: 15px;
    border: 1px solid gray;
    border-radius: 10px;
    margin-bottom: 15px;
    text-wrap: wrap;
    width: 15em;
}

div.shop-item span a img {
    height: auto;
}

div.shop-item span a img[src*="preview"] {
}

div.shop-item i {
    font-size: 10px;
}

div.shop-text {
    display: flex;
    padding: 10px;
    margin: 0 auto;
    height: 70px;
    justify-content: center;
    align-items: center;
}

div.shop-cost {
    display: flex;
    padding: 10px;
    margin: 0 auto;
    height: 3em;
    justify-content: center;
    align-items: center;
}

div.shop-image {
    padding: 10px;
    background: white;
}

div.shop-preview {
    border-radius: 0 0 10px 10px;
    background: white;
    padding: 10px;
}

@media only screen and (max-width: 40em) {

div.shop-item {
    width: 10em;
}

}

/* Lunar event-specific tables */

/* Monthly lunar applicator table */

table.lunar_applicators {
    background-color: #dedede;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    margin: 0 auto;
}

table.lunar_applicators td {
    border: 1px solid black;
    padding: 10px;
}

table.lunar_applicators tr td span a img[src*="lunarapps" i] {
    width: auto;
    max-width: 60vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="base" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="markings" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="eyes" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="claw" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="skin" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="nose" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

/* Matchmaker event-specific tables */

/* Dateable list box */

.dateable1 {
    width: 50%;
    margin: auto;
    text-align: center;
    background: #d4d4d4;
    border-radius: 10px;
    border: 1px solid black;
}

.dateable1_title {
    background-color: #868686;
    padding: 10px;
    border-radius: 10px 10px 0 0;
}

.dateable1 div.spoilerContent div div {
    display: block;
    width: 13em;
    height: auto;
}

.dateable1 .dateablelistflex {
display:flex;
flex-direction:row;
flex-wrap:wrap;
text-align:center;
font-weight:bold;
justify-content:center;
}

/* Dateable profile box */

table.dateablewolf {
    background-color: #d4d4d4;
    border-collapse: collapse;
    width: 100%;
    margin: auto;
}

@media only screen and (max-width: 40em) {

table.dateablewolf {
    font-size: 0.7em;
}

}

table.dateablewolf .spoilerButton {
text-align: center;
}

table.dateablewolf td {
    border: 1px solid gray;
}

td.wolf-name {
    background-color: #9b9b9b;
    padding: 10px;
    font-weight: bold;
}

td.wolf-image {
    width: 33%;
border-right: none !important;
text-align:center;
}

td.wolf-intro {
    border-left: none !important;
}

td.wolf-image img {
    max-width: 25vw;
    height: auto;
}

td.wolf-requirements {
    padding: 5px;
}

td.trait-header {
    background-color: #9b9b9b;
    padding: 5px;
    font-weight: bold;
width: 33%;
}

td.trait-image {
    width: 7.5%;
text-align:center;
border-right: none !important;
}

td.trait {
    padding-left: 10px;
border-left: none !important;
}

.wolf-gallery img {
    width: 20%;
}

td.wolf-decor {
    text-align: center;
}

.dateable_spoiler {
    background: #d4d4d4;
    width: 100%;
    margin: auto;
    font-size: 14px;
    padding: 1px;
    border: 1px solid gray;
    border-top: none;
}

.dateable_spoiler .spoilerButton {
text-align: center;
}

.dateable_spoiler .spoilerContent {
padding: 0px;
}

table.dateable_flavortext {
    width: 100%;
}

table.dateable_flavortext td {
    padding: 5px;
}

tr.flavortext_title {
    background-color: #9b9b9b;
}