MediaWiki
Common.css: Difference between revisions
From Grouse House Wiki
No edit summary |
No edit summary |
||
Line 3,001: | Line 3,001: | ||
td.recipe-ingredients-amnt { | td.recipe-ingredients-amnt { | ||
background: #d4d4d4; | background: #d4d4d4; | ||
width: 10%; | width: 10%; | ||
vertical-align: top; | vertical-align: top; |
Revision as of 05:48, 24 December 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 • List with alternating color rows • Information table with alternating color rows • Images and image grids • Large image grid • Small item grid • Image grid with alternating color cells • 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 • Fayre event-specific tables • Crop detail tables • Decor preview modal • Befriending tables • Color scales */ /* Article warnings */ /* Crowdsourcing warning {{Crowdsourcing}} */ .crowdsource-warning { background-color: #d4d4d4; width: 90%; margin: auto; } .warningtitle { text-align: center; background-color: #b3b3b3; padding: 5px; font-weight: bold; } .warning-body { padding: 10px; } .grousetipimage { padding: 10px; width: 10%; } @media only screen and (max-width: 40em) { .grousetipimage { padding: 10px; width: 20%; } } /* 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; } /* Information table with alternating color rows */ .infotable { border: 1px solid black; } .infotable td { padding: 5px; } .infotable td.infoheader { background-color: black; color: white; } .infotable tr:nth-of-type(even){ background-color: #f5f5f5; } .infotable tr:nth-of-type(odd){ background-color: #fff; } /* 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.griditem.decoritem { background: #d4d4d4; margin-right: 10px; border: 1px solid gray; margin-bottom: 15px; text-wrap: wrap; width: 10em; border-radius: 0; } div.griditem.decoritem div.item-name { background-color: #3a5f70; padding: 5px; font-weight: bold; color: white; text-align: center; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; height: 4em; font-size: 11px; width: 13em; display: table-cell; vertical-align: middle; } div.griditem.decoritem div.item-image { background: white; } div.item-image { padding: 10px; width: auto; cursor: pointer; } div.item-image img { max-width: 20vw; height: auto; width: auto; } /* Image grid with alternating color cells */ .altimagegrid { border: none; text-align: center; } .altimagegrid td { padding: 5px; border: 1px solid black; } .altimage1 { background-color: #f5f5f5; } .altimage2 { background-color: #fff; } /* Universal tables and tools */ /* Table Type A */ @media only screen and (max-width: 40rem) { .tableA { width: 100% !important; font-size: 10px; } } .tableA th { padding: 10px; font-weight: bold; background: #648a9b; color: white; text-align: left; } .tableA td { padding: 10px; text-align: center; } .tableA tr { border-bottom: 1px solid black; } .tableA tr:nth-of-type(odd) { background-color: #f4f4f4; } .tableA tr:nth-of-type(even) { background-color: #fff; } .tableA tr:first-of-type th { background: #3a5f70 !important; text-align: center; } /* Table Type B */ @media only screen and (max-width: 40rem) { .tableB { width: 100% !important; font-size: 10px; } .tableB li { font-size: 10px; } } .tableB { text-align: center; } .tableB tr { border-bottom: 1px solid black; } .tableB td { padding: 10px; } .tableB th { background:#3a5f70; color: white; text-align: center; padding: 10px; } .tableB tr:nth-of-type(odd) { background-color: #f4f4f4; } .tableB tr:nth-of-type(even) { background-color: #fff; } /* Table Type C */ @media only screen and (max-width: 40rem) { .tableC { width: 100% !important; font-size: 10px; } } .tableC td { padding: 10px; text-align: center; } .tableC tr { border-bottom: 1px solid black; } .tableC tr:nth-of-type(even) td:nth-of-type(odd) { background-color: #f4f4f4; } .tableC tr:nth-of-type(even) td:nth-of-type(even) { background-color: #fff; } .tableC tr:nth-of-type(odd) td:nth-of-type(odd) { background-color: #fff; } .tableC tr:nth-of-type(odd) td:nth-of-type(even) { background-color: #f4f4f4; } .tableC th { background:#3a5f70; color: white; text-align: center; padding: 10px; } .tableC th.subheaderC { background:#648a9b; color: white; text-align: center; padding: 10px; } /* Table Type D */ @media only screen and (max-width: 40rem) { .tableD { width: 100% !important; font-size: 10px; } } .tableD th { padding: 10px; font-weight: bold; background: #d5d5d5; color: black; text-align: center; } .tableD td { padding: 10px; text-align: center; } .tableD tr { border-bottom: 1px solid black; } .tableD tr:nth-of-type(odd) { background-color: #f4f4f4; } .tableD tr:nth-of-type(even) { background-color: #fff; } .tableD tr:first-of-type th { background: #3a5f70 !important; text-align: center; color: white; } /* Flex box table */ @media only screen and (max-width: 40rem) { .flexTable { width: 100% !important; font-size: 10px; } } .flexTable th { padding: 10px; font-weight: bold; background: #3a5f70; color: white; text-align: center; } .flexTable td { padding: 10px; text-align: center; } .flexTable tr { border-bottom: 1px solid black; } .flexSubheader { padding: 10px; font-weight: bold; color: black; text-align: center; } .flexGroup { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .baseHeadshot { width: 150px; border: 1px solid black; margin: 0.5em; } .baseImage { margin-bottom: -1.2em !important; } .baseName { background-color: #d5d5d5; padding: 5px; font-weight: bold; } .baseObtention { position: relative; top: -0.5em; right: -7em; background: #fff; width: 75px !important; border-radius: 5px; border: 1px solid black; font-size: 10px; } /* Explore encounter table */ @media only screen and (max-width: 40rem) { table.explore_encounter { width: 100% !important; } } 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; } /* Achievement box */ table.achievement { background-color: #d4d4d4; width: 400px; border: 1px solid black; border-collapse: collapse; margin: 0.5em; height: 200px; } @media only screen and (max-width: 40em) { table.achievement { background-color: #d4d4d4; width: 100%; } } .achievement_icon { background-color: #b7b7b7; padding: 10px; font-weight: bold; } tr.achievement-text td { padding: 10px; } .achievementName { background-color: #3a5f70; padding: 5px; font-weight: bold; color: white; } /* 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: 75%; margin: auto; } table.npc p { font-size: 14px; } @media only screen and (max-width: 40em) { table.npc { width: 100%; } table.npc p { font-size: 12px; } .npc-bio div { height: 150px !important; overflow-y: auto; } .npc-gallery div { height: 150px !important; overflow-y: auto; } } td.npc-name { background-color: #3a5f70; padding: 10px; font-weight: bold; border-right: none !important; width: 40%; color: white; text-align: center; } td.npc-image { text-align: center; padding: 10px; border-bottom: none !important; background: #b7b7b7; width: 40%; } tr.npc-pronouns td { text-align: center; padding: 5px; font-style: italic; border-top: none !important; background: #919191; width: 20%; } .npc-bio div { height: 350px; overflow-y: auto; } td.npc-bio { padding: 10px; } .npc-imagegallery { border-top: 5px solid #3a5f70; } .npc-gallery { background: #dfdfdf; } .npc-gallery div { text-align: center; height: 300px; overflow-y: auto; } .npc-gallery div img { margin: 0.5em; } /* Spoiler button */ .spoilerButton p { background-color: #acacac; width: 40%; margin: 5px auto; padding: 10px; border-radius: 10px; } .spoilerButton p:hover { background-color: #929292; cursor: pointer; } .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; } /* Storyline Elements */ /* Page Boxes */ .storylinel { width: 100%; background: #d4d4d4; display: inline-block; margin-bottom: 0px; } .storyliner { width: 100%; background: #d4d4d4; display: inline-block; margin-bottom: 0px; } .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%; } .storylinel .text { font-size: 10px; } .storyliner .text { font-size: 10px; } .storylinel .text p { font-size: 10px; } .storyliner .text p { font-size: 10px; } .storybluebutton { font-size: 10px; } .storygreenbutton { font-size: 10px; } } /* 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: 1px solid gray; } table.enemy td.enemyname { background: #3a5f70; color: white; padding: 10px; font-weight: bold; border-bottom: 1px solid gray; } table.enemy td.enemyimage { text-align: center; width: 60%; border-right: 1px solid gray; border-bottom: 1px solid gray; background: white; } table.enemy.lunarenemy img[src*="night"] { margin-bottom: 1em; } table.enemy td.icons { background: #3a5f70; color: white; padding: 10px; font-weight: bold; border-bottom: 1px solid gray; text-align: right; } table.enemy td.icons img { max-height: 2em; margin-left: 0.5em; } table.enemy td.icons img.openimage { cursor: pointer; } table.enemy td.icons img.opponenttype { cursor: help; } table.enemy td.enemylevels { border-bottom: 1px solid gray; height: 3vh; padding-left: 10px; font-weight: bold; background: #a1a1a1; text-align: center; } table.enemy td.enemymodifiers { height: 15vh; border-bottom: 1px solid gray; } 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: 1px solid gray; height: 75px; padding-top: 10px; } table.enemy div.modifier.modifiernone { font-size: 0.8em; line-height: 2.8em; } table.enemy div.modifier img { height: 50%; width: auto; } table.enemy td.enemymoves { border-bottom: 1px solid gray; padding-left: 10px; height: 15vh; vertical-align: top; padding-top: 10px; } table.enemy td.enemybiomes { border-right: 1px solid gray; border-bottom: 1px solid gray; } table.enemy td.enemybiomes div.biome { width: 8rem; 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: 1px solid gray; } table.enemy td.enemybiomes div.biome.grasslands { background: url(https://grousehouse.wiki/images/0/03/Explore_grasslands_summer_day.png); background-position: center; background-size: 250%; } table.enemy td.enemybiomes div.biome.deciduous { background: url(https://grousehouse.wiki/images/9/94/Explore_deciduous_summer_day.png); background-position: center; background-size: 250%; font-size: 0.8rem; line-height: 1.4rem; } table.enemy td.enemybiomes div.biome.mountains { background: url(https://grousehouse.wiki/images/b/b4/Explore_mountains_summer_day.png); background-position: center; background-size: 250%; } table.enemy td.enemybiomes div.biome.riparian { background: url(https://grousehouse.wiki/images/2/28/Explore_riparian_summer_day.png); background-position: center; background-size: 250%; font-size: 0.8rem; line-height: 1.4rem; } table.enemy td.enemybiomes div.biome.prairie { background: url(https://grousehouse.wiki/images/e/e5/Explore_prairie_summer_day.png); background-position: center; background-size: 250%; } table.enemy td.enemybiomes div.biome.coniferous { background: url(https://grousehouse.wiki/images/b/ba/Explore_coniferous_summer_day.png); background-position: center; background-size: 250%; font-size: 0.8rem; line-height: 1.4rem; } table.enemy td.enemybiomes div.biome.taiga { background: url(https://grousehouse.wiki/images/3/3e/Explore_taiga_summer_day.png); background-position: center; background-size: 250%; } table.enemy td.enemybiomes div.biome.desert { background: url(https://grousehouse.wiki/images/b/b1/Explore_desert_summer_day.png); background-position: center; background-size: 250%; } table.enemy td.enemybiomes div.biome.swamp { background: url(https://grousehouse.wiki/images/f/f8/Explore_swamp_summer_day.png); background-position: center; background-size: 250%; } table.enemy td.enemybiomes div.biome.tundra { background: url(https://grousehouse.wiki/images/8/8f/Explore_tundra_summer_day.png); background-position: center; background-size: 250%; } table.enemy td.enemybiomes div.biome.glacier { background: url(https://grousehouse.wiki/images/a/ac/Explore_glacier_summer_day.png); background-position: center; background-size: 250%; } table.enemy td.enemybiomes div.biome.rainforest { background: url(https://grousehouse.wiki/images/0/0c/Explore_rainforest_summer_day.png); background-position: center; background-size: 250%; } table.enemy td.enemystats { border-bottom: 1px solid gray; } table.enemy td.enemystats div.stat { width: 8rem; text-align: center; border-radius: 10px; margin: 0.5em; } table.enemy td.enemystats div.stat.strength { color: #682323; background-color: #ca8282; border: 2px solid #682323; } table.enemy td.enemystats div.stat.speed { color: #513f71; background-color: #9582b5; border: 2px solid #513f71; } table.enemy td.enemystats div.stat.agility { color: #625e2b; background-color: #c6bc5f; border: 2px solid #625e2b; } table.enemy td.enemystats div.stat.wisdom { color: #235554; background-color: #63b3b0; border: 2px solid #235554; } table.enemy td.enemystats div.stat.smarts { color: #255924; background-color: #65b363; border: 2px solid #255924; } table.enemydrops { background-color: #d4d4d4; border: 1px solid gray; border-top: 1px solid gray; margin-top: -1.4em; word-break: normal; } table.enemydrops div.tableflex { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: left; } table.enemydrops td.trophies { padding: 10px; border-bottom: 1px solid gray; } 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;} table.enemy div.modifier.modifiervenom { font-size: 0.7em; line-height: 2.6em; } .faction { padding: 5px; border-bottom: 1px solid black; font-weight: bold; } .faction.merged { background: #cd574d; } .faction.kinfolk { background: #7ea549; } .faction.independent { background: #eeaf4b; } table.enemy.cryptid td.enemybiomes { border-right: 1px solid gray; border-bottom: 1px solid gray; } table.enemy.cryptid td.enemystats { border-bottom: 1px solid gray; } .itemgrid.cryptidThumbnails div { background: #d7d7d7; margin: 0.5em; padding: 10px; } .cryptidThumbnails .cryptidBiomeKinfolk img { border-bottom: 10px solid #7ea549 !important; } .cryptidThumbnails .cryptidBiomeIndependent img { border-bottom: 10px solid #eeaf4b !important; } .cryptidThumbnails .cryptidBiomeMerged img { border-bottom: 10px solid #cd574d !important; } /* Battle Enemy Mobile Formatting */ @media only screen and (max-width: 40em) { table.enemy { width: 100%; font-size: 0.7em; } select.variantDropdown { width: 90%; } table.enemy div.modifier { margin: 5px; background: darkgray; width: 15vw; text-align: center; border-radius: 5px; border: 2px solid #6c6c6c; height: 15vw; padding-top: 10px; font-size: 0.7em; } table.enemy div.modifier.modifiernone { font-size: 0.6em; line-height: 2.5em; } table.enemy div.modifier.modifiervenom { font-size: 0.5em; line-height: 2.5em; } table.enemy td.enemymoves p { font-size: 1em; } table.enemy td.enemybiomes { padding: 10px; } table.enemy td.enemybiomes div.biome { width: 23vw; font-size: 0.8em; margin: 0.2em; } table.enemy td.enemystats div.stat { width: 16vw; font-size: 0.8em; margin: 0.2em; } table.enemy td.enemystats { border-bottom: 2px solid #6c6c6c; height: 110px; } table.enemydrops div.trophy { margin: 0.2em; width: 15vw; min-width: 15vw; font-size: 0.7em; } table.enemydrops td.recipeheader { display: none; } table.enemydrops div.recipe { margin: 0.2em; width: 15vw; min-width: 15vw; font-size: 0.7em; } table.enemydrops td.recipes { border-right: 2px solid #6c6c6c; } table.enemy td.enemybiomes div.biome.deciduous { font-size: 0.6rem; line-height: 1.1rem; } table.enemy td.enemybiomes div.biome.riparian { font-size: 0.6rem; line-height: 1.1rem; } table.enemy td.enemybiomes div.biome.coniferous { font-size: 0.6rem; line-height: 1.1rem; } } /* 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%; } .shopkeeper .gridimage img { border: none; } /* Shop content boxes {{ShopContent}} {{_ShopItem}} */ div.shopcontent { display: flex; flex-direction: row; text-align: center; flex-wrap: wrap; justify-content: center; } div.shop-title { background-color: #3a5f70; padding: 5px; font-weight: bold; color: white; text-align: center; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; height: 4em; font-size: 11px; width: 13em; display: table-cell; vertical-align: middle; } div.shop-item { background: #e6e6e6; margin-right: 10px; border: 1px solid gray; margin-bottom: 15px; text-wrap: wrap; width: 10em; } 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: 5px; justify-content: center; align-items: center; font-size: 13px; background: #d4d4d4; } .shop-subtext { font-style: italic; text-align: center; font-size: 11px; padding: 0.5em; background: #e6e6e6; } .shop-subtext p { font-style: italic; text-align: center; font-size: 11px; padding: 0.5em; background: #e6e6e6; } .shop-text img { margin-right: 0.5em; } 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: 50.01em) { div.shop-item { width: 7em !important; } div.shop-text { font-size: 8px; } div.shop-title { font-size: 8px; } .shop-subtext { font-size: 8px; } .shop-image img { width: 70px; } .shop-text img { width: 15px; } } /* Lunar event-specific tables */ /* Monthly lunar applicator table */ .lunarApplicators { border: 1px solid gray; } .lunarApplicators th { background: #3a5f70; color: white; text-align: center; padding: 10px; } .appPreview { padding: 10px; text-align: center; } .appNames td { background: #648a9b; color: white; text-align: center; padding: 10px; font-size: 12px; border: 1px solid #5b5b5b; height: 75px; border-bottom: none; } .appThumbs td { text-align: center; padding: 10px; border: 1px solid gray; border-bottom: none; border-top: none; } .appThumbs td:nth-of-type(2n+1) { background-color: #f4f4f4; } .appCosts td { background: #d4d4d4; text-align: center; padding: 5px; border: 1px solid gray; border-top: none; font-size: 12px; } @media only screen and (max-width: 40em) { .appNames td { font-size: 8px; height: 35px; } .appCosts td { font-size: 8px; } } 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; } /* Fayre event-specific tables */ /* Crop detail tables */ .fayreCrop { width: 100%; } .fayreCrop tr { border-bottom: 1px solid black; } .cropHeader { background: #3a5f70; color: white; } .cropName { padding: 10px; font-weight: bold; } .cropStats { width: 20%; vertical-align: top; padding: 10px; background: #ebebeb; } .cropStat { margin-bottom: 1em; } .cropVariantName { background: #648a9b; color: white; padding: 10px; font-weight: bold; width: 50%; } .cropVariantStats { width: 20%; padding: 10px; } .cropVariantStats div { margin-bottom: 0.5em; } .cropVariantImages div { margin-bottom: 0.5em; } .fayreCrop .imagegrid img { height: 100px; border: none; } .fayreCropMobile { width: 100%; } .fayreCropMobile tr { border-bottom: 1px solid black; } .fayreCropMobile .imagegrid img { height: 100px; border: none; } @media only screen and (max-width: 40rem) { .fayreCrop { display: none; } .desktopTables p { display: none; } } @media only screen and (min-width: 40.01rem) { .fayreCropMobile { display: none; } .mobileTables p { display: none; } } /* Illness table */ .illnessTable td { border: 1px solid gray; padding: 5px; } /* Befriending tables */ .befriendTable td { border: 1px solid black; padding: 5px; } .befriendHeader { background-color: #3a5f70; color: white; font-weight: bold; } .befriendMove { background-color: #3a5f70; color: white; font-weight: bold; } .befriendPositive { background-color: #d9ead3; } .befriendNegative { background-color: #f4cccc; } .befriendPositive2 { background-color: #93c47d; } .befriendNegative2 { background-color: #e06666; } @media only screen and (max-width: 40rem) { .befriendTable { font-size: 10px; } } /* Color Scales */ .scaleA0 { background-color: #e67c73; } .scaleA25 { background-color: #f3a96c; } .scaleA50 { background-color: #ffd666; } .scaleA75 { background-color: #abc878; } .scaleA100 { background-color: #57bb8a; } [data-tooltip]:hover::after { content: attr(data-tooltip); background: #fff; padding: 5px 12px; border: solid 1px #ddd; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); } /* Marking Tables */ .markingBody { background: white; width: 250px; margin: 0.5em; border: 1px solid gray; } .markingName { text-align: center; background-color: #3a5f70; padding: 10px; font-weight: bold; color: white; } .markingSource { text-align: center; background-color: #c4c4c4; padding: 10px; } .markingPreview { padding: 10px; } @media only screen and (max-width: 40em) { .markingName { font-size: 12px; } .markingSource { font-size: 12px; } } @media only screen and (max-width: 50em) { .markingBody { background: white; width: 100%; margin: 0.5em; border: 1px solid gray; } } @media only screen and (min-width: 50.01em) { .markingBody { background: white; width: 47%; margin: 0.5em; border: 1px solid gray; } } @media only screen and (min-width: 65.626em) { .markingBody { background: white; width: 31%; margin: 0.5em; border: 1px solid gray; } } @media only screen and (min-width: 101.25em) { .markingBody { background: white; width: 23%; margin: 0.5em; border: 1px solid gray; } } /* Base Tables */ .baseBody { background: white; width: 31%; margin: 0.5em; border: 1px solid gray; } .baseBody .baseName { text-align: center; background-color: #3a5f70; padding: 10px; font-weight: bold; color: white; } .baseGenetics { text-align: center; background-color: #d4d4d4; padding: 10px; } .basePreview { padding: 20px; margin-top: 1em; } @media only screen and (max-width: 50em) { .baseBody { background: white; width: 100%; margin: 0.5em; border: 1px solid gray; } } @media only screen and (min-width: 50.01em) { .baseBody { background: white; width: 47%; margin: 0.5em; border: 1px solid gray; } } @media only screen and (min-width: 75.01em) { .baseBody { background: white; width: 31%; margin: 0.5em; border: 1px solid gray; } } /* Biome Hunting Trail Tables */ .trailprey { margin-top: -5em; } .trailimage { background: transparent !important; } .trailimage img { width: 100%; } .trailnames { background: transparent !important; color: white; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000; } @media only screen and (max-width: 40em) { .trailprey tr td span a img { width: 70px; } } /* Main page contributors */ #mainpagecontributors { width: 100%; height: auto; overflow: auto; background-color: #d4d4d4; margin: 0.5em; } #mainpageevents { width: 60%; } #mainpageevents img { width: 175px; height: auto; } @media only screen and (max-width: 74.125em) { #mainpageevents { width: 100%; } } #contributorstitle { background: #b0b0b0; margin-top: -0.8em; } #contributorstitle h3 { border-bottom: 1px solid black; padding-bottom: ; padding-top: 1em; padding-bottom: 1em; padding-left: 1em; } #contributorsbody { padding-left: 1em; } .contributor { width: 30%; background: #b0b0b0; padding: 0.5em; margin: 1em; margin-bottom: 2em; text-align: left; } @media only screen and (max-width: 40em) { .contributor { width: 100%; background: #b0b0b0; padding: 0.5em; margin: 1em; text-align: left; height: 150px; overflow: auto; } } .contributorimage { float: left; padding-right: 0.5em; padding-top: 0.5em; } .contributorimage img { width: 75px; } .contributorbio { font-style: italic; } /* Cryptid Tables */ .cryptid { background: #e6e6e6; border-collapse: collapse; width: 100%; margin: auto; } .cryptidquick { background: #d4d4d4; border-collapse: collapse; width: 300px; margin: 0.5em; max-width:100%; } .cryptidquick .cryptidcolor { padding: 0px !important; } .cryptidinformation img { width: 150px; } .cryptidinformation.cryptidnotes p { display: table-cell; vertical-align: middle; } .cryptidinformation.cryptidnotes div { height: 60px; font-size: 12px; overflow-y: auto; } .cryptidinformation.cryptidnotes { background: #c6c6c6; padding: 5px !important; } .cryptidinformation.cryptidnotes { height: 70px; } .cryptidinformation { height: 200px; } @media only screen and (min-width: 50.01em) { .cryptidquick { width: 100% !important; font-size: 11px; } } @media only screen and (min-width: 65.626em) { .cryptidquick { width: 48% !important; } } @media only screen and (min-width: 101.25em) { .cryptidquick { width: 30% !important; } } .cryptid td { border: 1px solid gray; padding: 15px; } .cryptid th { background-color: #9b9b9b; padding: 10px; font-weight: bold; border: 1px solid gray; } .cryptid th.sub { background-color: #b5b5b5; padding: 10px; font-weight: bold; } .cryptidname { border-right: none !important; } .cryptidfaction { border-left: none !important; text-align: right; } .cryptidcolor.kinfolk { background: #7ea549; height: 15px; } .cryptidcolor.merged { background: #cd574d; height: 15px; } .cryptidcolor.independent { background: #eeaf4b; height: 15px; } .cryptidinformation { padding-bottom: 15px; } .cryptidportrait { width: 30%; float: left; text-align: center; } .cryptidintrotext { float: right; width: 70%; padding-left: 15px; } .cryptidThumbnails img { width: 130px; margin: 0.5em; } @media only screen and (max-width: 40em) { .cryptidThumbnails img { width: 100px; } } /* Eye Color Tables */ .eyecolorbox { width: 250px; border: 1px solid black; margin: 0.5em; } .eyename { background-color: #3a5f70; padding: 5px; font-weight: bold; color: white; } .eyeinfo { display: flex; flex-direction: row; text-align: center; } .eyepreview { width: 70%; margin-top: 1em; margin-left: 0em; text-align: left; } .eyefails { width: 50%; background-color: #f4f4f4; border-radius: 10px; border: 1px solid black; margin: 1em; height: 177px; overflow: scroll; overflow-x: hidden; } .failtitle { padding: 5px; background-color: #d5d5d5; } .eyeexplorepreview { text-align: center; height: 100px; } .eyesource { background-color: #d5d5d5; padding: 5px; text-align: center; margin-top: -2em; } .eyeexplorepreview img { height: 100px; width: auto; margin-top: -2em; } .exploreeyes { width: 300px; border: 1px solid black; margin: 0.5em; text-align: center; } .exploreeyebuttons { background-color: #c7c7c7; height: 42px; } .exploreeyebuttons p { height: 30px; margin-top: -0.5em; } /* Accent Tables */ .accentBody { background: white; width: 300px; margin: 0.5em; border: 1px solid gray; } @media only screen and (max-width: 50em) { .accentBody { background: white; width: 100%; margin: 0.5em; border: 1px solid gray; } } @media only screen and (min-width: 50.01em) { .accentBody { background: white; width: 47%; margin: 0.5em; border: 1px solid gray; } } @media only screen and (min-width: 65.626em) { .accentBody { background: white; width: 47%; margin: 0.5em; border: 1px solid gray; } } @media only screen and (min-width: 101.25em) { .accentBody { background: white; width: 31%; margin: 0.5em; border: 1px solid gray; } } /* Disaster Tables */ @media only screen and (max-width: 74.125em) { .disaster { width: 100% !important; } } .disaster { width: 46%; margin: 1em; background-color: #ededed; text-align: center; border-collapse: collapse; border: 1px solid black; } .disasterImage { background-color: white; } .disasterImage div:first-of-type { background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; } div[id*="BiomeImage"] { margin-bottom: -0.4em; } .disasterName { background-color: #3a5f70; padding: 5px; font-weight: bold; color: white; } .disasterCategory { background-color: #b4b4b4; padding: 5px; font-weight: bold; } .disasterCategory img { width: 30px; } .disasterEvolutions { background-color: #b4b4b4; padding: 5px; height: 80px; width: 80%; } .disasterText { background-color: #d1d1d1; padding: 5px; text-align: left; } .disasterText div { height: 200px; overflow: auto; } .disasterSubheader { height: 50px; } .pageButton { width: 200px; margin: 1em; font-weight: bold; text-align: center; } .pageButton a { color: white; } .pageButton a:hover { color: white; } /* Mutation Tables */ @media only screen and (max-width: 74.125em) { .mutation { width: 100% !important; } } .mutation { width: 70%; margin: auto; background-color: #ededed; text-align: center; border-collapse: collapse; border: 1px solid black; } .mutationName { background-color: #3a5f70; padding: 10px; font-weight: bold; color: white; text-align: center; } .mutationImage { background-color: white; } .mutationText { background-color: #d1d1d1; padding: 10px; text-align: center; width: 33%; border: 1px solid black; } .mutationAge { padding: 10px; text-align: center; width: 33%; border: 1px solid black; background-color: #b0b0b0; } .mutationPreviews { width: 70%; margin: auto; margin-top: -0.3em; background-color: #ededed; text-align: center; border-collapse: collapse; border: 1px solid black; } @media only screen and (max-width: 74.125em) { .mutationPreviews { width: 100% !important; } } /* Decor preview modal */ #decorModalV1 { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100vh; overflow: hidden; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } #decorModalContent { position: fixed; background: white; border: 3px solid white; border-radius: 10px; height: calc(100vw * .80); max-height: 625px; min-height: 480px; width: 100vw; max-width: min(640px, 100vw); top: 50%; left: 50%; overflow: hidden; transform: translate(-50%, -50%); z-index: 99000; } .modalheader { background-color: #3a5f70; padding: 10px; font-weight: bold; color: white; border-bottom: 3px solid white; } .decorname { font-weight: bold; } .modalclose { color: white; float: right; font-size: 28px; font-weight: bold; } .modalclose:hover, .modalclose:focus { color: black; text-decoration: none; cursor: pointer; } .modalfooter { display: flex; flex-direction: row; background: #d4d4d4; padding: 10px; align-items: center; position: absolute; width: 100%; border-top: 3px solid white; bottom: 0; } #previewinput { display: none; width: 50%; text-align: right; } #previewoptions { width: 100%; } #checkboxesbutton { background: #acacac; height: auto; line-height: 2em; padding: 5px; border-radius: 0px; width: 6em; text-align: center; margin-right: 0.8em; display: none; } #checkboxesbutton:hover { background: #8c8c8c; cursor: pointer; } #decorModalV1 #checkboxes { position: fixed; background: #bbb; padding: 10px; bottom: 76px; left: 0; width: 15em; transform: ; z-index: 99999; padding-top: 20px; padding-left: 20px; display: none; } /* Background Previews */ .background { width: 250px; margin: 0.5em; margin-bottom: -3.5em; } .backround-header { background-color: #3a5f70; padding: 5px; font-weight: bold; color: white; text-align: center; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; height: auto; width: 100%; border-bottom: 2px solid white; height: 50px; align-content: center; } .background-thumb { position: relative; width: 25%; bottom: 5em; left: 0.75em; } .background-name { width: 100%; font-size: 10px; } #backgroundModal { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100vh; overflow: hidden; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } #backgroundModalContent { position: fixed; background: white; border: 3px solid white; border-radius: 10px; height: calc(100vw * .80); max-height: 625px; min-height: 480px; width: 100vw; max-width: min(640px, 100vw); top: 50%; left: 50%; overflow: hidden; transform: translate(-50%, -50%); z-index: 99000; } .bkgmodalheader { background-color: #3a5f70; padding: 10px; font-weight: bold; color: white; border-bottom: 3px solid white; } .bkgname { font-weight: bold; } .bkgmodalclose { color: white; float: right; font-size: 28px; font-weight: bold; } .bkgmodalclose:hover, .bkgmodalclose:focus { color: black; text-decoration: none; cursor: pointer; } .bkgmodalfooter { display: flex; flex-direction: row; background: #d4d4d4; padding: 10px; align-items: center; position: absolute; width: 100%; border-top: 3px solid white; bottom: 0; } #bkgpreviewinput { display: none; width: 50%; text-align: right; } #bkgpreviewoptions { width: 100%; } #bkgcheckboxesbutton { background: #acacac; height: auto; line-height: 2em; padding: 5px; border-radius: 0px; width: 6em; text-align: center; margin-right: 0.8em; display: none; } #bkgcheckboxesbutton:hover { background: #8c8c8c; cursor: pointer; } #backgroundModal #bkgcheckboxes { position: fixed; background: #bbb; padding: 10px; bottom: 76px; left: 0; width: 15em; transform: ; z-index: 99999; padding-top: 20px; padding-left: 20px; display: none; } @media only screen and (max-width: 40em) { .background-thumb { position: relative; width: 25%; bottom: 3.5em; left: 0.5em; } .background { width: 150px; margin: 0.5em; margin-bottom: -2.5em; } } .lightCard { background-color: #f9f9f9; border: 1px solid #e2e2e2; } .lightCard .cardTitle { padding: .75rem 1.25rem; margin-bottom: 0; color: inherit; background-color: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.125); } .lightCard .cardBody { padding: 1.25rem; } /* Raffle Stud Tables */ .rafflestud { width: 80%; margin: auto; font-size: 12px; margin-bottom: 3em; } .rafflestud td { padding: 5px; } .studname { background: #3a5f70; color: white; padding: 10px; } .studdate { background: #3a5f70; color: white; padding: 10px; text-align: right; } .rafflesub { background: #648a9b; color: white; text-align: center; padding: 5px; } @media only screen and (max-width: 46.875rem) { .rafflestud { width: 100%; font-size: 10px; margin-bottom: 3em; } } /* Crafting recipe table {{CraftingRecipe}} */ div.craftinglist { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding-bottom: 20px; } table.crafting-recipe { width: 100%; margin: 5px; background-color: #b0b0b0; border: 1px solid gray; max-width: 380px; } tr.recipe-name td { background: #3a5f70; color: white; height: 15px; font-weight: bold; padding: 10px; } .recipe-name td img { width: 36px; margin-right: 0.5em; } td.recipe-thumb { vertical-align: top; padding: 10px; border-bottom: none !important; background: #b7b7b7; width: 23%; } td.recipe-ingredients-img { background: #d4d4d4; width: 10%; vertical-align: top; font-weight: bold; width: 40px; height: auto; padding: 5px; } td.recipe-ingredients-amnt { background: #d4d4d4; width: 10%; vertical-align: top; font-weight: bold; } td.recipe-ingredients { background: #d4d4d4; padding: 10px; padding-left: 0px; height: 100%; width: 57%; vertical-align: top; font-size: 12px; } td.recipe-ingredients p { font-size: 12px; } td.recipe-ingredients b { font-size: 14px; } /* td.recipe-ingredients img { width: 40px; height: auto; padding: 5px; } */ td.recipe-obtention-title { padding: 10px; border-top: 5px solid #3a5f70; vertical-align: middle; text-align: center; font-weight: bold; } td.recipe-obtention { padding: 10px; height: 70px; background: #d4d4d4; vertical-align: top; } @media only screen and (max-width: 40em) { table.crafting-recipe { font-size: 12px; } table.crafting-recipe p { font-size: 12px; } table.crafting-recipe b { font-size: 12px; } td.recipe-ingredients { font-size: 10px; } td.recipe-ingredients p { font-size: 10px; } }