Template:Biome/styles.css
Template page
More actions
.loka-biome-card {
width: 260px;
max-width: 100%;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.loka-biome-card--dark {
overflow: hidden;
border: 1px solid #4a4030;
background: #1c1712;
}
.loka-biome-card--light {
box-sizing: border-box;
background: #faf7f0;
border: 1px solid #d8cfb8;
padding: .6em .7em;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.loka-biome-backdrop {
position: relative;
line-height: 0;
height: 108px;
overflow: hidden;
}
.loka-biome-scrim {
position: absolute;
inset: 0;
background: rgba(8, 6, 3, .58);
}
.loka-biome-title-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: .4em .6em .35em;
}
.loka-biome-title {
font-weight: 700;
font-size: 1em;
line-height: 1.3;
color: #ffffff;
text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}
.loka-biome-title--light {
color: #1f1c16;
text-shadow: none;
border-bottom: 1px solid #e5ddc8;
padding-bottom: .3em;
margin-bottom: .2em;
}
.loka-biome-title-inner {
display: inline-flex;
align-items: center;
gap: .35em;
}
.loka-biome-body {
background: #1c1712;
padding: .55em .7em .65em;
}
.loka-biome-label {
font-size: .7em;
font-weight: 700;
color: #f0cf8e;
text-transform: uppercase;
letter-spacing: .04em;
margin: .45em 0 .25em;
}
.loka-biome-label--light {
color: #9c6b2e;
}
.loka-biome-row {
display: flex;
flex-wrap: wrap;
gap: .3em;
}
/* Per-icon vertical nudge: compensates for each icon's own visual
weight (e.g. a tree's canopy vs its thin trunk) not matching its
symmetric bounding box, so the icon looks centered against the text
rather than just box-aligned. Most icons are served at native size
(no /thumb/ path); Sunset Isles is larger and gets thumbnailed. */
.loka-biome-title-inner img[src$="/Ancient_Forest_Icon.png"] {
transform: translateY(0.91px);
}
.loka-biome-title-inner img[src$="/Ancient_Jungle_Icon.png"] {
transform: translateY(-0.63px);
}
.loka-biome-title-inner img[src$="/Birch_Forest_Icon.png"] {
transform: translateY(1.17px);
}
.loka-biome-title-inner img[src$="/Cherry_Grove_Icon.png"] {
transform: translateY(1.63px);
}
.loka-biome-title-inner img[src$="/Clay_Cliffs_Icon.png"] {
transform: translateY(-0.88px);
}
.loka-biome-title-inner img[src$="/Desert_Icon.png"] {
transform: translateY(-0.15px);
}
.loka-biome-title-inner img[src$="/Forest_Icon.png"] {
transform: translateY(1.17px);
}
.loka-biome-title-inner img[src$="/Ice_Mountains_Icon.png"] {
transform: translateY(-2.25px);
}
.loka-biome-title-inner img[src$="/Ice_Taiga_Icon.png"] {
transform: translateY(-0.62px);
}
.loka-biome-title-inner img[src$="/Ice_Wastes_Icon.png"] {
transform: translateY(-1.61px);
}
.loka-biome-title-inner img[src$="/Mangrove_Forest_Icon.png"] {
transform: translateY(1.53px);
}
.loka-biome-title-inner img[src$="/Mega_Taiga_Icon.png"] {
transform: translateY(-0.59px);
}
.loka-biome-title-inner img[src$="/Mesa_Icon.png"] {
transform: translateY(-0.88px);
}
.loka-biome-title-inner img[src$="/Moor_Icon.png"] {
transform: translateY(-1.22px);
}
.loka-biome-title-inner img[src$="/Mountains_Icon.png"] {
transform: translateY(-2.25px);
}
.loka-biome-title-inner img[src$="/Mushroom_Isle_Icon.png"] {
transform: translateY(0.72px);
}
.loka-biome-title-inner img[src$="/Pale_Garden_Icon.png"] {
transform: translateY(0.71px);
}
.loka-biome-title-inner img[src$="/Roofed_Forest_Icon.png"] {
transform: translateY(-0.6px);
}
.loka-biome-title-inner img[src$="/Savannah_Icon.png"] {
transform: translateY(0.86px);
}
.loka-biome-title-inner img[src$="20px-Sunset_Isles_Icon.png"] {
transform: translateY(0.93px);
}
.loka-biome-title-inner img[src$="/Swamp_Icon.png"] {
transform: translateY(0.52px);
}
.loka-biome-title-inner img[src$="/Taiga_Icon.png"] {
transform: translateY(-0.62px);
}