Template:Emblem/style.css: Difference between revisions
Jump to navigation
Jump to search
Content added Content deleted
(Created page with ".emblemtable { width: 100%; min-width: 380px; max-width: 780px; } →.emblemtable .summary { }: .emblemtable .summary img { max-width: 100%; max-height: 240px; object-fit: contain; } →.emblemtable .summary img.splashicon { max-height: 425px; }: .item-name-main { display: block; text-align: center; font-size: 22px; font-weight: bold; } .item-name-sub { display: block; text-align: center; font-size: 16px; font-weight: bold; c...") |
mNo edit summary |
||
(16 intermediate revisions by the same user not shown) | |||
Line 5: | Line 5: | ||
} |
} |
||
.emblemtable .emblem { |
|||
margin: 3em auto 2em; |
|||
} |
} |
||
.emblemtable .summary img { |
.emblemtable .summary img { |
||
Line 14: | Line 14: | ||
object-fit: contain; |
object-fit: contain; |
||
} |
} |
||
/* .emblemtable .summary img.splashicon { |
|||
max-height: 425px; |
|||
} */ |
|||
.item-name-main { |
.item-name-main { |
||
Line 31: | Line 27: | ||
width: 100%; |
width: 100%; |
||
clear: both; |
clear: both; |
||
text-align: center; |
|||
} |
} |
||
Line 36: | Line 33: | ||
text-align: center; |
text-align: center; |
||
} |
} |
||
.emblemtable .data-row { |
.emblemtable .data-row { |
||
Line 46: | Line 41: | ||
.emblemtable .data-row > th { |
.emblemtable .data-row > th { |
||
width: calc(100% / 4); |
width: calc(100% / 4); |
||
} |
|||
/* Emblem */ |
|||
div.emblem { |
|||
position: relative; |
|||
width: 100%; |
|||
max-width: 558px; |
|||
aspect-ratio: 558/106; |
|||
/* container-type: inline-size; does not pass MediaWiki css sanitation, moved inline */ |
|||
} |
|||
div.emblem > div { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
position: absolute; |
|||
} |
|||
div.emblem .name, |
|||
div.emblem .text { |
|||
position: absolute; |
|||
padding-left: 28%; |
|||
padding-right: 4%; |
|||
top:4%; |
|||
bottom: 13%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
line-height: 1; |
|||
text-align: center; |
|||
color: #4f6881; |
|||
text-shadow: 0 0 3px #fff; |
|||
font-size: 32px; |
|||
/* font-size: 5.8cqw; does not pass MediaWiki css sanitation, moved inline */ |
|||
font-weight: bold; |
|||
text-shadow: 2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, -2px 2px 0 #fff; |
|||
} |
|||
div.emblem.emblem-favor .name { |
|||
top:11%; |
|||
bottom: 50%; |
|||
text-transform: uppercase; |
|||
} |
|||
div.emblem .text { |
|||
align-items: end; |
|||
font-size: 30px; |
|||
color: #4e1f87; |
|||
} |
|||
div.emblem .text > span { |
|||
font-size: 36px; |
|||
color: #a238df; |
|||
} |
|||
div.emblem .emblem-icon, |
|||
div.emblem .emblem-iconbg { |
|||
position: absolute; |
|||
height: 100%; |
|||
width: auto; |
|||
padding-top: 0.55%; |
|||
padding-left: 0.7%; |
|||
padding-bottom: 1.9%; |
|||
} |
|||
div.emblem .emblem-icon img, |
|||
div.emblem .emblem-iconbg img { |
|||
height: 100%; |
|||
width: auto; |
|||
} |
|||
div.emblem .emblem-bg img { |
|||
width: 100%; |
|||
height: auto; |
|||
} |
|||
div.emblem .year { |
|||
position: absolute; |
|||
bottom: 14%; |
|||
left: 2%; |
|||
width: auto!important; |
|||
background-color: #ffffff; |
|||
color: #4e1f87; |
|||
font-style: italic; |
|||
border-radius: 7px; |
|||
padding: 0 6px 0 4px; |
|||
font-weight: bold; |
|||
line-height: 1.3; |
|||
} |
|||
div.emblem .emblem-bg { |
|||
z-index: 1; |
|||
} |
|||
div.emblem .emblem-iconbg { |
|||
z-index: 2; |
|||
} |
|||
div.emblem .emblem-icon, |
|||
div.emblem .icon { |
|||
z-index: 3; |
|||
} |
|||
div.emblem .name, |
|||
div.emblem .text, |
|||
div.emblem .year { |
|||
z-index: 4; |
|||
} |
|||
div.emblem.emblem-boss .emblem-icon{ |
|||
left: 5%; |
|||
} |
} |
Latest revision as of 13:39, 4 February 2024
.emblemtable {
width: 100%;
min-width: 380px;
max-width: 780px;
}
.emblemtable .emblem {
margin: 3em auto 2em;
}
.emblemtable .summary img {
max-width: 100%;
max-height: 240px;
object-fit: contain;
}
.item-name-main {
display: block; text-align: center; font-size: 22px; font-weight: bold;
}
.item-name-sub {
display: block; text-align: center; font-size: 16px; font-weight: bold; color: #555555;
}
.item-description {
display: block;
width: 100%;
clear: both;
text-align: center;
}
.emblemtable .rarity {
text-align: center;
}
.emblemtable .data-row {
text-align: center;
}
.emblemtable .data-row > td,
.emblemtable .data-row > th {
width: calc(100% / 4);
}
/* Emblem */
div.emblem {
position: relative;
width: 100%;
max-width: 558px;
aspect-ratio: 558/106;
/* container-type: inline-size; does not pass MediaWiki css sanitation, moved inline */
}
div.emblem > div {
width: 100%;
box-sizing: border-box;
position: absolute;
}
div.emblem .name,
div.emblem .text {
position: absolute;
padding-left: 28%;
padding-right: 4%;
top:4%;
bottom: 13%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
text-align: center;
color: #4f6881;
text-shadow: 0 0 3px #fff;
font-size: 32px;
/* font-size: 5.8cqw; does not pass MediaWiki css sanitation, moved inline */
font-weight: bold;
text-shadow: 2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, -2px 2px 0 #fff;
}
div.emblem.emblem-favor .name {
top:11%;
bottom: 50%;
text-transform: uppercase;
}
div.emblem .text {
align-items: end;
font-size: 30px;
color: #4e1f87;
}
div.emblem .text > span {
font-size: 36px;
color: #a238df;
}
div.emblem .emblem-icon,
div.emblem .emblem-iconbg {
position: absolute;
height: 100%;
width: auto;
padding-top: 0.55%;
padding-left: 0.7%;
padding-bottom: 1.9%;
}
div.emblem .emblem-icon img,
div.emblem .emblem-iconbg img {
height: 100%;
width: auto;
}
div.emblem .emblem-bg img {
width: 100%;
height: auto;
}
div.emblem .year {
position: absolute;
bottom: 14%;
left: 2%;
width: auto!important;
background-color: #ffffff;
color: #4e1f87;
font-style: italic;
border-radius: 7px;
padding: 0 6px 0 4px;
font-weight: bold;
line-height: 1.3;
}
div.emblem .emblem-bg {
z-index: 1;
}
div.emblem .emblem-iconbg {
z-index: 2;
}
div.emblem .emblem-icon,
div.emblem .icon {
z-index: 3;
}
div.emblem .name,
div.emblem .text,
div.emblem .year {
z-index: 4;
}
div.emblem.emblem-boss .emblem-icon{
left: 5%;
}