MediaWiki
Common.css: Difference between revisions
From Grouse House Wiki
No edit summary |
No edit summary |
||
(152 intermediate revisions by the same user not shown) | |||
Line 601: | Line 601: | ||
table.achievement { | table.achievement { | ||
background-color: #d4d4d4; | background-color: #d4d4d4; | ||
width: | width: 400px; | ||
border: 1px solid black; | border: 1px solid black; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
margin: | margin: 0.5em; | ||
height: 200px; | |||
} | } | ||
@media only screen and (max-width: 40em) { | |||
background-color: # | table.achievement { | ||
background-color: #d4d4d4; | |||
width: 100%; | |||
} | |||
} | } | ||
.achievement_icon { | |||
background-color: #b7b7b7; | |||
padding: 10px; | padding: 10px; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
tr. | tr.achievement-text td { | ||
padding: 10px; | |||
} | } | ||
.achievementName { | |||
background-color: #3a5f70; | |||
padding: 5px; | |||
font-weight: bold; | |||
color: white; | |||
} | } | ||
Line 699: | Line 705: | ||
table.npc { | table.npc { | ||
background-color: #d4d4d4; | background-color: #d4d4d4; | ||
border-collapse: collapse; | |||
width: 75%; | |||
margin: auto; | |||
} | } | ||
table.npc | table.npc p { | ||
font-size: 14px; | |||
} | } | ||
table.npc | @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- | td.npc-name { | ||
background-color: #3a5f70; | |||
padding: 10px; | |||
font-weight: bold; | |||
border-right: none !important; | |||
width: 40%; | |||
width: | color: white; | ||
text-align: center; | |||
font-size: 18px; | |||
} | } | ||
td.npc-image { | td.npc-image { | ||
text-align: center; | |||
padding: 10px; | |||
border-bottom: none !important; | border-bottom: none !important; | ||
background: #b7b7b7; | |||
width: 40%; | |||
} | } | ||
Line 741: | Line 758: | ||
font-style: italic; | font-style: italic; | ||
border-top: none !important; | border-top: none !important; | ||
background: #919191; | |||
width: 20%; | |||
} | |||
.npc-bio div { | |||
height: 350px; | |||
overflow-y: auto; | |||
} | } | ||
td.npc-bio { | td.npc-bio { | ||
padding: 10px; | 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; | |||
} | } | ||
Line 861: | Line 903: | ||
table.enemy { | table.enemy { | ||
background-color: #d4d4d4; | background-color: #d4d4d4; | ||
border: | border: 1px solid gray; | ||
} | } | ||
Line 869: | Line 911: | ||
padding: 10px; | padding: 10px; | ||
font-weight: bold; | font-weight: bold; | ||
border-bottom: | border-bottom: 1px solid gray; | ||
} | } | ||
Line 875: | Line 917: | ||
text-align: center; | text-align: center; | ||
width: 60%; | width: 60%; | ||
border-right: | border-right: 1px solid gray; | ||
border-bottom: | border-bottom: 1px solid gray; | ||
background: white; | background: white; | ||
} | } | ||
Line 889: | Line 931: | ||
padding: 10px; | padding: 10px; | ||
font-weight: bold; | font-weight: bold; | ||
border-bottom: | border-bottom: 1px solid gray; | ||
text-align: right; | text-align: right; | ||
} | } | ||
Line 907: | Line 949: | ||
table.enemy td.enemylevels { | table.enemy td.enemylevels { | ||
border-bottom: | border-bottom: 1px solid gray; | ||
height: 3vh; | height: 3vh; | ||
padding-left: 10px; | padding-left: 10px; | ||
Line 917: | Line 959: | ||
table.enemy td.enemymodifiers { | table.enemy td.enemymodifiers { | ||
height: 15vh; | height: 15vh; | ||
border-bottom: | border-bottom: 1px solid gray; | ||
} | } | ||
Line 933: | Line 975: | ||
text-align: center; | text-align: center; | ||
border-radius: 5px; | border-radius: 5px; | ||
border: | border: 1px solid gray; | ||
height: 75px; | height: 75px; | ||
padding-top: 10px; | padding-top: 10px; | ||
Line 949: | Line 991: | ||
table.enemy td.enemymoves { | table.enemy td.enemymoves { | ||
border-bottom: | border-bottom: 1px solid gray; | ||
padding-left: 10px; | padding-left: 10px; | ||
height: 15vh; | height: 15vh; | ||
Line 957: | Line 999: | ||
table.enemy td.enemybiomes { | table.enemy td.enemybiomes { | ||
border-right: | border-right: 1px solid gray; | ||
border-bottom: | border-bottom: 1px solid gray; | ||
} | } | ||
Line 968: | Line 1,010: | ||
border-radius: 10px; | border-radius: 10px; | ||
margin: 0.5em; | margin: 0.5em; | ||
border: | border: 1px solid gray; | ||
} | } | ||
Line 1,050: | Line 1,092: | ||
table.enemy td.enemystats { | table.enemy td.enemystats { | ||
border-bottom: | border-bottom: 1px solid gray; | ||
} | } | ||
Line 1,092: | Line 1,134: | ||
table.enemydrops { | table.enemydrops { | ||
background-color: #d4d4d4; | background-color: #d4d4d4; | ||
border: | border: 1px solid gray; | ||
border-top: | border-top: 1px solid gray; | ||
margin-top: -1.4em; | margin-top: -1.4em; | ||
word-break: normal; | word-break: normal; | ||
Line 1,107: | Line 1,149: | ||
table.enemydrops td.trophies { | table.enemydrops td.trophies { | ||
padding: 10px; | padding: 10px; | ||
border-bottom: | border-bottom: 1px solid gray; | ||
} | } | ||
Line 1,183: | Line 1,225: | ||
table.enemy.cryptid td.enemybiomes { | table.enemy.cryptid td.enemybiomes { | ||
border-right: | border-right: 1px solid gray; | ||
border-bottom: | border-bottom: 1px solid gray; | ||
} | } | ||
table.enemy.cryptid td.enemystats { | table.enemy.cryptid td.enemystats { | ||
border-bottom: | 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; | |||
} | } | ||
Line 1,331: | Line 1,391: | ||
} | } | ||
div.shop-item { | div.shop-title { | ||
background-color: #3a5f70; | |||
padding: 5px; | |||
font-weight: bold; | |||
color: white; | |||
text-align: center; | |||
} | |||
div.shop-item { | |||
background: #d4d4d4; | background: #d4d4d4; | ||
margin-right: | margin-right: 10px; | ||
border: 1px solid gray; | border: 1px solid gray; | ||
margin-bottom: 15px; | margin-bottom: 15px; | ||
text-wrap: wrap; | text-wrap: wrap; | ||
width: | width: 16em; | ||
} | } | ||
Line 1,354: | Line 1,421: | ||
div.shop-text { | div.shop-text { | ||
display: flex; | display: flex; | ||
padding: | padding: 5px; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
font-size: 13px; | |||
margin-top: 0.5em; | |||
} | } | ||
.shop-subtext { | |||
font-style: italic; | |||
text-align: center; | |||
margin-top: -0.5em; | |||
font-size: 13px; | |||
padding: 0.5em; | |||
} | } | ||
.shop-text img { | .shop-text img { | ||
margin-right: 0.5em; | margin-right: 0.5em; | ||
Line 1,403: | Line 1,461: | ||
} | } | ||
@media only screen and (max-width: | @media only screen and (max-width: 50.01em) { | ||
div.shop-item { | div.shop-item { | ||
width: | 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; | |||
} | } | ||
Line 1,908: | Line 1,986: | ||
.modalbody { | .modalbody { | ||
height: | height: 80%; | ||
} | } | ||
Line 1,919: | Line 1,997: | ||
max-width: 640px; | max-width: 640px; | ||
transform: translate(-50%,-50%); | transform: translate(-50%,-50%); | ||
} | |||
#behinddecorpreviewimg { | |||
position: fixed; | |||
z-index: 99900; | |||
top: 36%; | |||
left: 50%; | |||
width: 90vw; | |||
max-width: 640px; | |||
transform: translate(-50%, -50%); | |||
} | } | ||
Line 1,981: | Line 2,069: | ||
.befriendPositive2 { | .befriendPositive2 { | ||
background-color: # | background-color: #93c47d; | ||
} | } | ||
.befriendNegative2 { | .befriendNegative2 { | ||
background-color: # | background-color: #e06666; | ||
} | } | ||
Line 2,173: | Line 2,261: | ||
/* Biome Hunting Trail Tables */ | /* Biome Hunting Trail Tables */ | ||
.trailprey { | |||
margin-top: -5em; | margin-top: -5em; | ||
} | } | ||
Line 2,183: | Line 2,271: | ||
.trailimage img { | .trailimage img { | ||
width: 100%; | 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: 240px; | |||
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: 300px; | |||
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) { | |||
.mutationPreview { | |||
width: 100% !important; | |||
} | |||
} | } |
Latest revision as of 21:09, 20 August 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; border: 1px solid gray; border-radius: 20px; } .warningtitle { text-align: center; background-color: #b0b0b0; border-radius: 20px 20px 0 0; padding: 10px; font-weight: bold; } .warning-body { padding: 10px; } /* Basic text tables and lists */ /* Basic list */ table.TB-basic-list { width: 100%; background-color: #c3c3c3; border: 1px solid black; border-collapse: collapse; } table.TB-basic-list th { background-color: black; color: white; padding: 5px; } table.TB-basic-list tr { border-top: 1px solid black; } table.TB-basic-list td { padding: 5px; } /* Basic list with inside borders */ table.TB-bordered-list { width: 40%; background-color: #c3c3c3; border-collapse: collapse; border: 1px solid black; text-align: center; } table.TB-bordered-list th { background-color: black; color: white; padding: 5px; } table.TB-bordered-list td { padding: 5px; border: 1px solid black; } /* List with multiple items on each row */ table.rowlist { background-color: #d4d4d4; width: 100%; } table.rowlist th { background-color: #acacac; padding: 10px; font-weight: bold; text-align: center; } tr.rowlistsubheader { text-align: center; background-color: #c4c4c4 !important; font-weight: bold; } td.rowlistitems { display: flex; flex-direction: row; flex-wrap: wrap; } .rowlistitem { margin-left: 1em; background-color: #c4c4c4; padding: 5px; padding-left: 10px; padding-right: 10px; margin-top: 0.5em; margin-bottom: 0.5em; } /* List with alternating color rows */ table.altlist { width: 60%; margin: auto; border: 1px solid gray; } .altlist tr:nth-of-type(odd) { background-color: #c6c6c6; } .altlist tr:nth-of-type(even) { background-color: #d4d4d4; } table.altlist td { padding: 10px; padding-top: 5px; padding-bottom: 5px; } /* 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.item-name { display: flex; justify-content: center; align-items: center; background-color: #acacac; border-radius: 10px 10px 0 0; padding: 10px 5px; min-height: 50px; height: 70px; } div.item-image { padding: 10px; width: auto; 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; } /* Crafting recipe table {{CraftingRecipe}} */ table.crafting-recipe { width: 60%; margin: auto; background-color: #b0b0b0; border: 1px solid black; border-collapse: collapse; } tr.recipe-name td { padding: 10px; } td.recipe-thumb { background-color: #d4d4d4; text-align: center; width: 20%; padding: 10px; } td.recipe-ingredients { background: #d4d4d4; padding: 10px; } td.recipe-ingredients img { width: 40px; height: auto; padding: 5px; } td.recipe-obtention { text-align: center; padding: 10px; } td.recipe-preview { text-align: center; background-color: #d4d4d4; } /* Achievement box */ table.achievement { background-color: #d4d4d4; width: 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; font-size: 18px; } 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; } td.grousetipimage { width: 30%; vertical-align: top; } /* Storyline Elements */ /* Page Boxes */ .storylinel { width: 100%; background: #d4d4d4; display: inline-block; } .storyliner { width: 100%; background: #d4d4d4; display: inline-block; } .storylinel span[typeof="mw:File"] { float: left; margin-right: 1.5em; } .storyliner span[typeof="mw:File"] { float: right; margin-left: 1.5em; } .storylinel .text { padding: 2em; } .storyliner .text { padding: 2em; } @media only screen and (max-width: 56.25rem) { .storylinel span[typeof="mw:File"] { width: 50%; } .storyliner span[typeof="mw:File"] { width: 50%; } } /* Storyline Buttons */ .storybluebutton { background:#057cb3; padding: 0.5em; color: #fff; width: auto; text-align: center; font-weight: bold; margin-right: 1em; margin-top: 1em; } .storygreenbutton { background:#78a64b; padding: 0.5em; color: #fff; width: auto; text-align: center; font-weight: bold; margin-right: 1em; margin-top: 1em; } /* Battle enemy tables */ table.enemy { background-color: #d4d4d4; border: 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; } div.shop-item { background: #d4d4d4; margin-right: 10px; border: 1px solid gray; margin-bottom: 15px; text-wrap: wrap; width: 16em; } 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; margin-top: 0.5em; } .shop-subtext { font-style: italic; text-align: center; margin-top: -0.5em; font-size: 13px; padding: 0.5em; } .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 */ 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; } } /* Decor preview modal */ #decorModal { 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 { background-color: #fefefe; margin: 5vh auto; border: 1px solid #888; width: 75%; height: 75vh; } .modalheader { background: #d4d4d4; padding: 10px; } .decorname { font-weight: bold; } .modalclose { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .modalclose:hover, .modalclose:focus { color: black; text-decoration: none; cursor: pointer; } .modalbody { height: 84.5%; } #decorinformation { display: block; padding: 10px; } #decorpreview { display: none; } #decorpreviewimg { position: fixed; z-index: 99902; top: 42%; left: 50%; width: 40vw; max-width: 640px; transform: translate(-50%, -50%); } #behinddecorpreviewimg { position: fixed; z-index: 99900; top: 42%; left: 50%; width: 40vw; max-width: 640px; transform: translate(-50%, -50%); } #previewbasewolf { position: fixed; z-index: 99901; top: 42%; left: 50%; width: 40vw; max-width: 640px; transform: translate(-50%, -50%); } .modalfooter { display: flex; flex-direction: row; background: #d4d4d4; padding: 10px; align-items: center; margin-top: 1em; } #previewbutton { background: #acacac; height: auto; line-height: 2em; padding: 5px; border-radius: 5px; } #previewbutton:hover { background: #8c8c8c; cursor: pointer; } #back { display: none; width: 50%; } #backbutton { background: #acacac; height: auto; line-height: 2em; padding: 5px; border-radius: 5px; width: 4em; text-align: center; } #backbutton:hover { background: #8c8c8c; cursor: pointer; } #previewinput { display: none; width: 50%; text-align: right; } #previewoptions { width: 100%; } #checkboxesbutton { background: #acacac; height: auto; line-height: 2em; padding: 5px; border-radius: 5px; width: 6em; text-align: center; margin-right: 0.8em; display: none; } #checkboxesbutton:hover { background: #8c8c8c; cursor: pointer; } #checkboxes { position: fixed; background: #bbb; padding: 10px; text-align: center; top: 70%; left: 50%; width: 15em; max-width: 640px; transform: translate(-50%,-50%); z-index: 99999; padding-top: 20px; display: none; } #previewbackground { top: 42%; left: 50%; max-width: 640px; transform: translate(-50%,-50%); position: fixed; width: 40vw; } #obtentionheader { background: #d4d4d4; padding: 10px; } #decorinfo { display: flex; padding: 10px; } #decorobtention { padding: 10px; } @media only screen and (max-width: 40rem) { #decorModalContent { background-color: #fefefe; margin: 5vh auto; border: 1px solid #888; width: 94%; height: 60vh; } .modalbody { height: 80%; } #decorpreviewimg { position: fixed; z-index: 99902; top: 36%; left: 50%; width: 90vw; max-width: 640px; transform: translate(-50%,-50%); } #behinddecorpreviewimg { position: fixed; z-index: 99900; top: 36%; left: 50%; width: 90vw; max-width: 640px; transform: translate(-50%, -50%); } #previewbasewolf { position: fixed; z-index: 99901; top: 36%; left: 50%; width: 90vw; max-width: 640px; transform: translate(-50%,-50%); } #previewbackground { top: 36%; left: 50%; max-width: 640px; transform: translate(-50%,-50%); position: fixed; width: 90vw; } #checkboxes { top: 55%; } } /* 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: 240px; 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: 300px; 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) { .mutationPreview { width: 100% !important; } }