MediaWiki
Common.css: Difference between revisions
From Grouse House Wiki
No edit summary |
No edit summary Tag: Manual revert |
||
(114 intermediate revisions by 2 users not shown) | |||
Line 46: | Line 46: | ||
.crowdsource-warning { | .crowdsource-warning { | ||
background-color: #d4d4d4; | |||
width: 90%; | |||
margin: auto; | |||
} | } | ||
.warningtitle { | .warningtitle { | ||
text-align: center; | |||
background-color: #b3b3b3; | |||
padding: 5px; | |||
font-weight: bold; | |||
} | } | ||
.warning-body { | .warning-body { | ||
padding: 10px; | padding: 10px; | ||
} | |||
.grousetipimage { | |||
padding: 10px; | |||
width: 10%; | |||
} | |||
@media only screen and (max-width: 40em) { | |||
.grousetipimage { | |||
padding: 10px; | |||
width: 20%; | |||
} | |||
} | } | ||
Line 574: | Line 583: | ||
} | } | ||
/* | /* Achievement box */ | ||
table. | table.achievement { | ||
width: | background-color: #d4d4d4; | ||
width: 400px; | |||
border: 1px solid black; | |||
border-collapse: collapse; | |||
margin: 0.5em; | |||
height: 200px; | |||
} | } | ||
@media only screen and (max-width: 40em) { | |||
background: # | table.achievement { | ||
background-color: #d4d4d4; | |||
width: 100%; | |||
} | } | ||
} | } | ||
.achievement_icon { | |||
background-color: #b7b7b7; | |||
padding: 10px; | |||
font-weight: bold; | |||
} | } | ||
tr.achievement-text td { | |||
padding: 10px; | padding: 10px; | ||
} | } | ||
.achievementName { | |||
background-color: #3a5f70; | |||
padding: 5px; | |||
font-weight: bold; | |||
color: white; | |||
} | } | ||
/* Individual applicator preview boxes */ | |||
border | table.applicatorpreview { | ||
background-color: #dedede; | |||
border: 1px solid black; | |||
border-collapse: collapse; | |||
text-align: center; | |||
} | } | ||
table.applicatorpreview td { | |||
border: 1px solid black; | |||
table. | 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. | table.markingapplicatorpreview { | ||
background-color: # | background-color: #dedede; | ||
border: 1px solid black; | border: 1px solid black; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
text-align: center; | |||
} | } | ||
table.markingapplicatorpreview td { | |||
table. | border: 1px solid black; | ||
padding: 10px; | |||
} | } | ||
table.clawleathersapplicatorpreview { | |||
table. | |||
background-color: #dedede; | background-color: #dedede; | ||
border: 1px solid black; | border: 1px solid black; | ||
Line 680: | Line 668: | ||
} | } | ||
table. | table.clawleathersapplicatorpreview td { | ||
border: 1px solid black; | border: 1px solid black; | ||
padding: 10px; | padding: 10px; | ||
} | } | ||
td# | table.clawleathersapplicatorpreview td#app_preview img { | ||
width: 100%; | |||
height: auto; | |||
} | } | ||
td# | table.applicatorpreview td#app_preview img { | ||
width: 100%; | |||
height: auto; | |||
} | } | ||
td# | td#app_explorepreview { | ||
border-top: none; | |||
} | } | ||
/* NPC Profile Box */ | |||
table.npc { | |||
background-color: #d4d4d4; | |||
border-collapse: collapse; | |||
width: 75%; | |||
margin: auto; | |||
} | } | ||
table. | table.npc p { | ||
font-size: 14px; | |||
} | } | ||
table. | @media only screen and (max-width: 40em) { | ||
table.npc { | |||
width: 100%; | |||
} | } | ||
table. | 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# | 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; | |||
border- | 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- | .npc-gallery { | ||
background: #dfdfdf; | |||
} | } | ||
.npc-gallery div { | .npc-gallery div { | ||
height: | text-align: center; | ||
height: 300px; | |||
overflow-y: auto; | overflow-y: auto; | ||
} | } | ||
.npc-gallery div img { | |||
margin: 0.5em; | |||
} | } | ||
/* Spoiler button */ | |||
background-color: # | |||
.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; | |||
padding: | |||
} | } | ||
/* 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; | ||
margin | |||
} | } | ||
. | .storyliner span[typeof="mw:File"] { | ||
float: right; | |||
margin-left: 1.5em; | |||
} | } | ||
. | .storylinel .text { | ||
padding: | 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; | |||
.storylinel { | |||
} | } | ||
.storyliner { | .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; | ||
width: | 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 { | ||
font- | 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 { | ||
font- | 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; | |||
padding: | height: 3vh; | ||
padding-left: 10px; | |||
font-weight: bold; | |||
background: #a1a1a1; | |||
text-align: center; | text-align: center; | ||
} | } | ||
table.enemy td.enemymodifiers { | |||
height: 15vh; | |||
table.enemy { | border-bottom: 1px solid gray; | ||
border: 1px solid gray; | |||
} | } | ||
table.enemy | table.enemy div.tableflex { | ||
display: flex; | |||
flex-direction: row; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
} | } | ||
table.enemy | table.enemy div.modifier { | ||
margin: 10px; | |||
background: darkgray; | |||
width: 75px; | |||
text-align: center; | text-align: center; | ||
border-radius: 5px; | |||
border | border: 1px solid gray; | ||
height: 75px; | |||
padding-top: 10px; | |||
} | } | ||
table.enemy. | table.enemy div.modifier.modifiernone { | ||
font-size: 0.8em; | |||
line-height: 2.8em; | |||
} | } | ||
table.enemy | table.enemy div.modifier img { | ||
height: 50%; | |||
width: auto; | |||
} | |||
table.enemy td.enemymoves { | |||
border-bottom: 1px solid gray; | border-bottom: 1px solid gray; | ||
padding-left: 10px; | |||
height: 15vh; | |||
vertical-align: top; | |||
padding-top: 10px; | |||
} | } | ||
table.enemy td. | table.enemy td.enemybiomes { | ||
border-right: 1px solid gray; | |||
border-bottom: 1px solid gray; | |||
} | } | ||
table.enemy td. | 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. | 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. | 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. | 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 div. | 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 div. | 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 div. | 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 div. | 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. | 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); | |||
table.enemy td.enemybiomes div.biome. | |||
background: url(https://grousehouse.wiki/images/ | |||
background-position: center; | background-position: center; | ||
background-size: 250%; | background-size: 250%; | ||
} | } | ||
table.enemy td.enemybiomes div.biome. | table.enemy td.enemybiomes div.biome.glacier { | ||
background: url(https://grousehouse.wiki/images/ | background: url(https://grousehouse.wiki/images/a/ac/Explore_glacier_summer_day.png); | ||
background-position: center; | background-position: center; | ||
background-size: 250%; | background-size: 250%; | ||
} | } | ||
table.enemy td.enemybiomes div.biome. | table.enemy td.enemybiomes div.biome.rainforest { | ||
background: url(https://grousehouse.wiki/images/ | background: url(https://grousehouse.wiki/images/0/0c/Explore_rainforest_summer_day.png); | ||
background-position: center; | background-position: center; | ||
background-size: 250%; | background-size: 250%; | ||
} | } | ||
table.enemy td. | table.enemy td.enemystats { | ||
border-bottom: 1px solid gray; | |||
} | } | ||
table.enemy td. | table.enemy td.enemystats div.stat { | ||
width: 8rem; | |||
text-align: center; | |||
border-radius: 10px; | |||
margin: 0.5em; | |||
} | } | ||
table.enemy td. | table.enemy td.enemystats div.stat.strength { | ||
color: #682323; | |||
background-color: #ca8282; | |||
border: 2px solid #682323; | |||
} | } | ||
table.enemy td. | table.enemy td.enemystats div.stat.speed { | ||
color: #513f71; | |||
background- | background-color: #9582b5; | ||
border: 2px solid #513f71; | |||
} | } | ||
table.enemy td. | table.enemy td.enemystats div.stat.agility { | ||
color: #625e2b; | |||
background- | background-color: #c6bc5f; | ||
border: 2px solid #625e2b; | |||
} | } | ||
table.enemy td. | table.enemy td.enemystats div.stat.wisdom { | ||
color: #235554; | |||
background- | background-color: #63b3b0; | ||
border: 2px solid #235554; | |||
} | } | ||
table.enemy td. | table.enemy td.enemystats div.stat.smarts { | ||
color: #255924; | |||
background- | background-color: #65b363; | ||
border: 2px solid #255924; | |||
} | } | ||
table. | table.enemydrops { | ||
background: | background-color: #d4d4d4; | ||
border: 1px solid gray; | |||
border-top: 1px solid gray; | |||
margin-top: -1.4em; | |||
word-break: normal; | |||
} | } | ||
table. | table.enemydrops div.tableflex { | ||
display: flex; | |||
flex-direction: row; | |||
flex-wrap: wrap; | |||
justify-content: left; | |||
} | } | ||
table. | table.enemydrops td.trophies { | ||
padding: 10px; | |||
border-bottom: 1px solid gray; | border-bottom: 1px solid gray; | ||
} | } | ||
table. | table.enemydrops div.trophy { | ||
width: | margin: 0.5em; | ||
width: 10%; | |||
text-align: center; | text-align: center; | ||
background: #b4b4b4; | |||
padding: 0.5em; | |||
border-radius: 10px; | border-radius: 10px; | ||
min-width: 6em; | |||
} | } | ||
table. | table.enemydrops td.recipeheader { | ||
width: 11%; | |||
} | } | ||
table. | table.enemydrops td.recipeheader div.recipe { | ||
width: 100%; | |||
background | background: none !important; | ||
} | } | ||
table. | table.enemydrops td.recipes { | ||
padding: 10px; | |||
} | } | ||
table. | table.enemydrops div.recipe { | ||
margin: 0.5em; | |||
background | width: 11.5%; | ||
border: | 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. | table.enemy.cryptid td.enemybiomes { | ||
border-right: 1px solid gray; | |||
border-bottom: 1px solid gray; | |||
} | } | ||
table. | 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 | table.enemy { | ||
width: 100%; | |||
font-size: 0.7em; | 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 | table.enemy td.enemymoves p { | ||
font-size: 1em; | |||
} | } | ||
table.enemy | 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: | 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. | |||
} | } | ||
table.enemydrops div.recipe { | |||
margin: 0.2em; | |||
table. | |||
margin: | |||
width: 15vw; | width: 15vw; | ||
min-width: 15vw; | |||
font-size: 0.7em; | font-size: 0.7em; | ||
} | } | ||
table. | table.enemydrops td.recipes { | ||
border-right: 2px solid #6c6c6c; | |||
} | } | ||
table.enemy div. | table.enemy td.enemybiomes div.biome.deciduous { | ||
font-size: 0.6rem; | |||
line-height: 1.1rem; | |||
} | } | ||
table.enemy td. | table.enemy td.enemybiomes div.biome.riparian { | ||
font-size: 0.6rem; | |||
line-height: 1.1rem; | |||
} | } | ||
table.enemy td.enemybiomes { | table.enemy td.enemybiomes div.biome.coniferous { | ||
font-size: 0.6rem; | |||
line-height: 1.1rem; | |||
} | } | ||
} | } | ||
table. | /* 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 { | |||
font-size: | 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 { | |||
padding: | 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 { | |||
div. | |||
display: flex; | display: flex; | ||
padding: 10px; | |||
margin: 0 auto; | |||
height: 3em; | |||
justify-content: center; | justify-content: center; | ||
align-items: center; | |||
} | } | ||
div.shop- | div.shop-image { | ||
padding: 10px; | |||
background: white; | |||
} | } | ||
div.shop- | div.shop-preview { | ||
border-radius: 0 0 10px 10px; | |||
background: white; | |||
padding: 10px; | |||
} | } | ||
div.shop-item | @media only screen and (max-width: 50.01em) { | ||
div.shop-item { | |||
width: 7em !important; | |||
} | } | ||
div.shop- | div.shop-text { | ||
font-size: 8px; | |||
} | } | ||
div.shop- | div.shop-title { | ||
font-size: 8px; | |||
} | } | ||
.shop-subtext { | |||
font-size: 8px; | |||
font-size: | |||
} | } | ||
.shop- | .shop-image img { | ||
width: 70px; | |||
} | } | ||
.shop-text img { | .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 { | ||
font-size: | 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 { | |||
background- | width: 50%; | ||
margin: auto; | |||
text-align: center; | |||
background: #d4d4d4; | |||
border-radius: 10px; | |||
border: 1px solid black; | border: 1px solid black; | ||
} | } | ||
.dateable1_title { | |||
background-color: #868686; | |||
padding: 10px; | padding: 10px; | ||
border-radius: 10px 10px 0 0; | |||
} | } | ||
.dateable1 div.spoilerContent div div { | |||
display: block; | |||
width: 13em; | |||
height: auto; | 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. | table.dateablewolf { | ||
background-color: #d4d4d4; | |||
border-collapse: collapse; | |||
width: 100%; | |||
margin: auto; | |||
} | } | ||
table. | @media only screen and (max-width: 40em) { | ||
table.dateablewolf { | |||
font-size: 0.7em; | |||
} | } | ||
} | } | ||
table. | 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: | width: 33%; | ||
border-right: none !important; | |||
text-align:center; | |||
} | } | ||
. | td.wolf-intro { | ||
border-left: none !important; | |||
border- | |||
} | } | ||
. | td.wolf-image img { | ||
max-width: 25vw; | |||
height: auto; | height: auto; | ||
} | } | ||
. | td.wolf-requirements { | ||
padding: 5px; | |||
} | } | ||
td.trait-header { | |||
background-color: #9b9b9b; | |||
padding: 5px; | |||
background-color: # | 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; | text-align: center; | ||
} | } | ||
.dateable_spoiler { | |||
background: #d4d4d4; | |||
width: 100%; | |||
margin: auto; | |||
font-size: 14px; | |||
padding: 1px; | |||
border: 1px solid gray; | 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 { | |||
td | |||
padding: 5px; | padding: 5px; | ||
} | } | ||
tr.flavortext_title { | |||
background-color: #9b9b9b; | background-color: #9b9b9b; | ||
} | } | ||
/* Fayre event-specific tables */ | |||
/* Crop detail tables */ | |||
.fayreCrop { | |||
width: 100%; | |||
} | } | ||
.fayreCrop tr { | |||
border-bottom: 1px solid black; | |||
border- | |||
} | } | ||
. | .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 { | ||
padding: | 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%; | width: 100%; | ||
} | } | ||
. | .fayreCropMobile tr { | ||
border-bottom: 1px solid black; | 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 { | |||
background | 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 | background: white; | ||
width: 250px; | |||
margin: 0.5em; | |||
border: 1px solid gray; | |||
} | } | ||
. | .markingName { | ||
background-color: # | text-align: center; | ||
background-color: #3a5f70; | |||
padding: 10px; | |||
font-weight: bold; | |||
color: white; | |||
} | } | ||
. | .markingSource { | ||
background-color: # | text-align: center; | ||
background-color: #c4c4c4; | |||
padding: 10px; | |||
} | } | ||
. | .markingPreview { | ||
padding: 10px; | |||
} | } | ||
@media only screen and (max-width: | @media only screen and (max-width: 40em) { | ||
. | |||
font-size: | .markingName { | ||
font-size: 12px; | |||
} | } | ||
.markingSource { | |||
font-size: 12px; | |||
} | } | ||
} | } | ||
@media only screen and (max-width: 50em) { | |||
. | .markingBody { | ||
background | background: white; | ||
width: 100%; | |||
margin: 0.5em; | |||
border: 1px solid gray; | |||
} | } | ||
} | } | ||
. | @media only screen and (min-width: 50.01em) { | ||
background | |||
.markingBody { | |||
background: white; | |||
width: 47%; | |||
margin: 0.5em; | |||
border: 1px solid gray; | |||
} | } | ||
} | } | ||
@media only screen and (min-width: 65.626em) { | |||
.markingBody { | .markingBody { | ||
background: white; | background: white; | ||
width: | width: 31%; | ||
margin: 0.5em; | margin: 0.5em; | ||
border: 1px solid gray; | 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) { | @media only screen and (max-width: 50em) { | ||
. | .baseBody { | ||
background: white; | background: white; | ||
width: 100%; | width: 100%; | ||
Line 2,045: | Line 2,068: | ||
@media only screen and (min-width: 50.01em) { | @media only screen and (min-width: 50.01em) { | ||
. | .baseBody { | ||
background: white; | background: white; | ||
width: 47%; | width: 47%; | ||
Line 2,054: | Line 2,077: | ||
} | } | ||
@media only screen and (min-width: | @media only screen and (min-width: 75.01em) { | ||
. | .baseBody { | ||
background: white; | background: white; | ||
width: 31%; | width: 31%; | ||
Line 2,065: | Line 2,088: | ||
} | } | ||
/* Biome Hunting Trail Tables */ | |||
. | .trailprey { | ||
margin-top: -5em; | |||
} | } | ||
.trailimage { | |||
background: transparent !important; | |||
} | } | ||
.trailimage img { | |||
width: 100%; | |||
. | |||
} | } | ||
. | .trailnames { | ||
background: transparent !important; | |||
background | |||
color: white; | 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 { | ||
background: | width: 30%; | ||
background: #b0b0b0; | |||
padding: 0.5em; | |||
margin: 1em; | |||
margin-bottom: 2em; | |||
text-align: left; | |||
} | } | ||
@media only screen and (max-width: 40em) { | |||
. | .contributor { | ||
background: | width: 100%; | ||
background: #b0b0b0; | |||
text- | 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; | |||
width: | |||
} | } | ||
.contributorbio { | |||
font-style: italic; | |||
} | } | ||
/* Cryptid Tables */ | |||
.cryptid { | |||
background: #e6e6e6; | |||
border-collapse: collapse; | |||
width: 100%; | width: 100%; | ||
margin: auto; | |||
} | } | ||
.cryptidquick { | |||
background: # | background: #d4d4d4; | ||
margin | border-collapse: collapse; | ||
width: 300px; | |||
margin: 0.5em; | |||
max-width:100%; | |||
} | } | ||
.cryptidquick .cryptidcolor { | |||
padding: 0px !important; | |||
padding | |||
} | } | ||
.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 { | .cryptidquick { | ||
width: 48% !important; | |||
} | } | ||
} | } | ||
. | @media only screen and (min-width: 101.25em) { | ||
. | .cryptidquick { | ||
width: 30% !important; | |||
} | } | ||
} | } | ||
. | .cryptid td { | ||
border: 1px solid gray; | |||
padding: | 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: | width: 70%; | ||
margin-top: 1em; | |||
text-align: | 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; | width: 300px; | ||
border: 1px solid black; | border: 1px solid black; | ||
margin: 0.5em; | margin: 0.5em; | ||
text-align: center; | |||
} | } | ||
. | .exploreeyebuttons { | ||
background-color: # | 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 { | |||
.accentBody { | |||
background: white; | background: white; | ||
width: | width: 47%; | ||
margin: 0.5em; | margin: 0.5em; | ||
border: 1px solid gray; | border: 1px solid gray; | ||
} | } | ||
@media only screen and ( | } | ||
@media only screen and (min-width: 65.626em) { | |||
.accentBody { | .accentBody { | ||
background: white; | background: white; | ||
width: | width: 47%; | ||
margin: 0.5em; | margin: 0.5em; | ||
border: 1px solid gray; | border: 1px solid gray; | ||
Line 2,487: | Line 2,460: | ||
} | } | ||
@media only screen and (min-width: | @media only screen and (min-width: 101.25em) { | ||
.accentBody { | .accentBody { | ||
background: white; | background: white; | ||
width: 31%; | |||
width: 31%; | |||
margin: 0.5em; | margin: 0.5em; | ||
border: 1px solid gray; | border: 1px solid gray; | ||
Line 2,991: | Line 2,942: | ||
} | } | ||
@media only screen and (max-width: | @media only screen and (max-width: 46.875rem) { | ||
.rafflestud { | .rafflestud { | ||
width: 100%; | width: 100%; | ||
font-size: 10px; | font-size: 10px; | ||
margin-bottom: 3em; | margin-bottom: 3em; | ||
} | |||
} | |||
/* Crafting recipe list {{CraftingList}} {{EndCraftingList}} */ | |||
div.craftinglist { | |||
display: flex; | |||
flex-direction: row; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
} | |||
/* Crafting recipe tables {{CraftingRecipe}} */ | |||
table.craftingrecipe { | |||
width: 100%; | |||
margin: 5px; | |||
background-color: #b0b0b0; | |||
border: 1px solid gray; | |||
max-width: 380px; | |||
} | |||
tr.recipename td { | |||
background: #3a5f70; | |||
color: white; | |||
height: 15px; | |||
font-weight: bold; | |||
padding: 10px; | |||
} | |||
.recipename td img { | |||
width: 36px; | |||
margin-right: 0.5em; | |||
} | |||
td.recipethumb { | |||
vertical-align: top; | |||
padding: 10px; | |||
border-bottom: none !important; | |||
background: #b7b7b7; | |||
width: 23%; | |||
} | |||
td.recipeingredientsimg { | |||
background: #d4d4d4; | |||
width: 12%; | |||
vertical-align: top; | |||
font-weight: bold; | |||
padding: 5px; | |||
line-height: 40px; | |||
padding: 3px; | |||
} | |||
td.recipeingredientsimg p { | |||
line-height: 40px; | |||
} | |||
td.recipeingredientsimg img { | |||
height: 37px; | |||
} | |||
td.recipeingredientsnum { | |||
background: #d4d4d4; | |||
width: 8%; | |||
vertical-align: top; | |||
font-weight: bold; | |||
line-height: 40px; | |||
padding-top: 3px; | |||
padding-left: 3px; | |||
} | |||
td.recipeingredientsnum p { | |||
font-weight: bold; | |||
line-height: 40px; | |||
} | |||
td.recipeingredients { | |||
background: #d4d4d4; | |||
padding-top: 3px; | |||
padding-left: 3px; | |||
height: 100%; | |||
width: 57%; | |||
vertical-align: top; | |||
font-size: 12px; | |||
line-height: 40px; | |||
} | |||
td.recipeingredients p { | |||
font-size: 12px; | |||
line-height: 40px; | |||
} | |||
td.recipeingredients b { | |||
font-size: 14px; | |||
} | |||
td.recipeobtentionsource { | |||
padding: 10px; | |||
border-top: 5px solid #3a5f70; | |||
vertical-align: middle; | |||
text-align: center; | |||
font-weight: bold; | |||
} | |||
td.recipeobtention { | |||
padding: 10px; | |||
height: 70px; | |||
background: #d4d4d4; | |||
vertical-align: top; | |||
} | } |
Latest revision as of 09:14, 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 list {{CraftingList}} {{EndCraftingList}} */ div.craftinglist { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } /* Crafting recipe tables {{CraftingRecipe}} */ table.craftingrecipe { width: 100%; margin: 5px; background-color: #b0b0b0; border: 1px solid gray; max-width: 380px; } tr.recipename td { background: #3a5f70; color: white; height: 15px; font-weight: bold; padding: 10px; } .recipename td img { width: 36px; margin-right: 0.5em; } td.recipethumb { vertical-align: top; padding: 10px; border-bottom: none !important; background: #b7b7b7; width: 23%; } td.recipeingredientsimg { background: #d4d4d4; width: 12%; vertical-align: top; font-weight: bold; padding: 5px; line-height: 40px; padding: 3px; } td.recipeingredientsimg p { line-height: 40px; } td.recipeingredientsimg img { height: 37px; } td.recipeingredientsnum { background: #d4d4d4; width: 8%; vertical-align: top; font-weight: bold; line-height: 40px; padding-top: 3px; padding-left: 3px; } td.recipeingredientsnum p { font-weight: bold; line-height: 40px; } td.recipeingredients { background: #d4d4d4; padding-top: 3px; padding-left: 3px; height: 100%; width: 57%; vertical-align: top; font-size: 12px; line-height: 40px; } td.recipeingredients p { font-size: 12px; line-height: 40px; } td.recipeingredients b { font-size: 14px; } td.recipeobtentionsource { padding: 10px; border-top: 5px solid #3a5f70; vertical-align: middle; text-align: center; font-weight: bold; } td.recipeobtention { padding: 10px; height: 70px; background: #d4d4d4; vertical-align: top; }