Common.css: Difference between revisions

Revision as of 07:21, 5 February 2024

/* 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
• 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
• 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: 40%;
    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;
}

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

/* Storyline Elements */

/* Page Boxes */

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

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

.storylinel span {
    float: left;
    margin-left: 1.5em;
}

.storylinel span {
    float: right;
    margin-left: 1.5em;
}

.text {
    padding: 2em;
}

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