User:Messing with data/vector.css: Difference between revisions
Jump to navigation
Jump to search
Further adjustments |
Another try for nested |
||
Line 16: | Line 16: | ||
background-size: calc(100% + 10px); | background-size: calc(100% + 10px); | ||
background-position: -5px calc(-0.75rem - 5px); | background-position: -5px calc(-0.75rem - 5px); | ||
& .doll-image { | |||
margin-top: 0.75rem; | margin-top: 0.75rem; | ||
width: 100%; | width: 100%; | ||
Line 25: | Line 25: | ||
} | } | ||
& .rarity-class { | |||
position: absolute; | position: absolute; | ||
top: 0.05rem; | top: 0.05rem; | ||
Line 33: | Line 33: | ||
} | } | ||
& .index { | |||
bottom: 0.165rem; | bottom: 0.165rem; | ||
width: 100%; | width: 100%; | ||
Line 48: | Line 48: | ||
} | } | ||
& .card-frame { | |||
width: 100%; | width: 100%; | ||
background: url("//iopwiki.com/images/thumb/2/2c/Infobox_border.png/128px-Infobox_border.png") top left no-repeat; | background: url("//iopwiki.com/images/thumb/2/2c/Infobox_border.png/128px-Infobox_border.png") top left no-repeat; | ||
Line 58: | Line 58: | ||
} | } | ||
& > .plainlinks.card-frame > .external.text { | |||
color: transparent; | color: transparent; | ||
opacity: 0; | opacity: 0; | ||
Line 66: | Line 66: | ||
} | } | ||
& .name { | |||
top: 11rem; | top: 11rem; | ||
font-size: 1rem; | font-size: 1rem; | ||
Line 87: | Line 87: | ||
} | } | ||
&.doll-rarity2 .name { background-image: url("/images/b/b1/Infobox_name_2star.png"); } | |||
&.doll-rarity-3 .name { background-image: url("/images/c/c1/Infobox_name_3star.png"); } | |||
&.doll-rarity-4 .name { background-image: url("/images/8/81/Infobox_name_4star.png"); } | |||
&.doll-rarity-5 .name { background-image: url("/images/2/26/Infobox_name_5star.png"); } | |||
&.doll-rarity-6 .name { background-image: url("/images/a/a0/Infobox_name_6star.png"); } | |||
&.doll-rarity-EXTRA .name { background-image: url("/images/c/c0/Infobox_name_EXTRAstar.png"); } | |||
} |
Revision as of 06:28, 20 June 2024
* {
box-sizing: border-box;
}
.gfl-doll-card {
width: 8rem;
height: 14.25rem;
position: relative;
border: thin solid var(--iopw-sys-palette-gray-99);
background-size: 8rem 14.25rem;
display: inline-block;
background-image: url(//iopwiki.com/images/thumb/5/5a/Infobox_bg.png/138px-Infobox_bg.png);
/* Background calc until Infobox gets rid of its shadow */
background-size: calc(100% + 10px);
background-position: -5px calc(-0.75rem - 5px);
& .doll-image {
margin-top: 0.75rem;
width: 100%;
height: auto;
object-fit: contain;
}
& .rarity-class {
position: absolute;
top: 0.05rem;
left: 0.05rem;
width: 3.3125rem;
height: auto;
}
& .index {
bottom: 0.165rem;
width: 100%;
font-size: 1.0rem;
letter-spacing: -0.1875rem;
padding-right: 0.35rem;
line-height: 1rem;
text-shadow: none;
text-align: right;
color: white;
font-family: var(--iopw-sys-typeface-mono),var(--iopw-sys-typeface-mono-alt),var(--iopw-sys-typeface-mono-fallback);
position: absolute;
left: 0;
}
& .card-frame {
width: 100%;
background: url("//iopwiki.com/images/thumb/2/2c/Infobox_border.png/128px-Infobox_border.png") top left no-repeat;
height: 100%;
background-size: contain;
position: absolute;
top: 0;
left: 0;
}
& > .plainlinks.card-frame > .external.text {
color: transparent;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
}
& .name {
top: 11rem;
font-size: 1rem;
width: 100%;
padding: 0.1rem;
background-repeat: no-repeat;
background-size: contain;
line-height: 1.5rem;
background-position: center;
text-align: left;
text-shadow: none;
color: black;
font-weight: var(--iopw-sys-font-weight-bold);
font-family: var(--iopw-sys-typeface-fancy);
text-overflow: ellipsis;
white-space: nowrap;
left: 0;
position: absolute;
overflow: hidden;
}
&.doll-rarity2 .name { background-image: url("/images/b/b1/Infobox_name_2star.png"); }
&.doll-rarity-3 .name { background-image: url("/images/c/c1/Infobox_name_3star.png"); }
&.doll-rarity-4 .name { background-image: url("/images/8/81/Infobox_name_4star.png"); }
&.doll-rarity-5 .name { background-image: url("/images/2/26/Infobox_name_5star.png"); }
&.doll-rarity-6 .name { background-image: url("/images/a/a0/Infobox_name_6star.png"); }
&.doll-rarity-EXTRA .name { background-image: url("/images/c/c0/Infobox_name_EXTRAstar.png"); }
}