Welcome to IOPWiki, Commander.
With the release of the Global Beta, we encourage contributions to topics related to Girls' Frontline 2. Learn how to contribute and join our Discord server to discuss major changes.

User:Messing with data/vector.css: Difference between revisions

Welcome to IOP Wiki. This website is maintained by the Girls' Frontline community and is free to edit by anyone.
Jump to navigation Jump to search
Setting up some more values
Removed testing styles
Tag: Replaced
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
/** Room for texting things on vector.css */
* {
  box-sizing: border-box;
}
 
.gfl-doll-card {
width: 8rem;
height: 14.25rem;
position: relative;
border: thin solid white;
background-size: 8rem 14.25rem;
display: inline-block;
}
 
.gfl-doll-card .doll-image {
margin-top: 0.75rem;
width: 100%;
height: auto;
object-fit: contain;
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);
}
 
.gfl-doll-card .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: "Courier New",Courier,"Lucida Sans Typewriter","Lucida";
position: absolute;
left: 0;
}
 
.gfl-doll-card .card-frame {
width: 100%;
--gfl-comp-doll-card-type-icon-url: black;
background: var(--gfl-comp-doll-card-type-icon-url) 0.05rem 0.05rem no-repeat, url("//iopwiki.com/images/thumb/2/2c/Infobox_border.png/128px-Infobox_border.png") top left no-repeat;
height: 100%;
background-size: 3.3125rem, contain;
position: absolute;
top: 0;
left: 0;
}
 
.gfl-doll-card.doll-rarity-2.doll-classification-SMG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/b/b8/Icon_SMG_2star.png/50px-Icon_SMG_2star.png"); }
.gfl-doll-card.doll-rarity-2.doll-classification-MG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/c/cc/Icon_MG_2star.png/50px-Icon_MG_2star.png"); }
.gfl-doll-card.doll-rarity-2.doll-classification-SG .card-frame { /* SG rarity 2 does not exist */ }
.gfl-doll-card.doll-rarity-2.doll-classification-RF .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/a/aa/Icon_RF_2star.png/50px-Icon_RF_2star.png"); }
.gfl-doll-card.doll-rarity-2.doll-classification-AR .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/5/5f/Icon_AR_2star.png/50px-Icon_AR_2star.png"); }
.gfl-doll-card.doll-rarity-2.doll-classification-HG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/d/df/Icon_HG_2star.png/50px-Icon_HG_2star.png"); }
 
.gfl-doll-card.doll-rarity-3.doll-classification-SMG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/9/9e/Icon_SMG_3star.png/50px-Icon_SMG_3star.png"); }
.gfl-doll-card.doll-rarity-3.doll-classification-MG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/c/c9/Icon_MG_3star.png/50px-Icon_MG_3star.png"); }
.gfl-doll-card.doll-rarity-3.doll-classification-SG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/1/1b/Icon_SG_3star.png/50px-Icon_SG_3star.png"); }
.gfl-doll-card.doll-rarity-3.doll-classification-RF .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/7/7d/Icon_RF_3star.png/50px-Icon_RF_3star.png"); }
.gfl-doll-card.doll-rarity-3.doll-classification-AR .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/e/e9/Icon_AR_3star.png/50px-Icon_AR_3star.png"); }
.gfl-doll-card.doll-rarity-3.doll-classification-HG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/4/43/Icon_HG_3star.png/50px-Icon_HG_3star.png"); }
 
.gfl-doll-card.doll-rarity-4.doll-classification-SMG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/7/76/Icon_SMG_4star.png/50px-Icon_SMG_4star.png"); }
.gfl-doll-card.doll-rarity-4.doll-classification-MG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/7/77/Icon_MG_4star.png/50px-Icon_MG_4star.png"); }
.gfl-doll-card.doll-rarity-4.doll-classification-SG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/b/b0/Icon_SG_4star.png/50px-Icon_SG_4star.png"); }
.gfl-doll-card.doll-rarity-4.doll-classification-RF .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/e/e5/Icon_RF_4star.png/50px-Icon_RF_4star.png"); }
.gfl-doll-card.doll-rarity-4.doll-classification-AR .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/9/93/Icon_AR_4star.png/50px-Icon_AR_4star.png"); }
.gfl-doll-card.doll-rarity-4.doll-classification-HG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/4/41/Icon_HG_4star.png/50px-Icon_HG_4star.png"); }
 
.gfl-doll-card.doll-rarity-5.doll-classification-SMG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/6/64/Icon_SMG_5star.png/50px-Icon_SMG_5star.png"); }
.gfl-doll-card.doll-rarity-5.doll-classification-MG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/3/33/Icon_MG_5star.png/50px-Icon_MG_5star.png"); }
.gfl-doll-card.doll-rarity-5.doll-classification-SG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/6/6d/Icon_SG_5star.png/50px-Icon_SG_5star.png"); }
.gfl-doll-card.doll-rarity-5.doll-classification-RF .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/7/73/Icon_RF_5star.png/50px-Icon_RF_5star.png"); }
.gfl-doll-card.doll-rarity-5.doll-classification-AR .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/b/b6/Icon_AR_5star.png/50px-Icon_AR_5star.png"); }
.gfl-doll-card.doll-rarity-5.doll-classification-HG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/d/d7/Icon_HG_5star.png/50px-Icon_HG_5star.png"); }
 
.gfl-doll-card.doll-rarity-EXTRA.doll-classification-SMG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/a/ae/Icon_SMG_EXTRAstar.png/50px-Icon_SMG_EXTRAstar.png"); }
.gfl-doll-card.doll-rarity-EXTRA.doll-classification-MG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/9/94/Icon_MG_EXTRAstar.png/50px-Icon_MG_EXTRAstar.png"); }
.gfl-doll-card.doll-rarity-EXTRA.doll-classification-SG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/b/b3/Icon_SG_EXTRAstar.png/50px-Icon_SG_EXTRAstar.png"); }
.gfl-doll-card.doll-rarity-EXTRA.doll-classification-RF .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/6/65/Icon_RF_EXTRAstar.png/50px-Icon_RF_EXTRAstar.png"); }
.gfl-doll-card.doll-rarity-EXTRA.doll-classification-AR .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/b/b3/Icon_AR_EXTRAstar.png/50px-Icon_AR_EXTRAstar.png"); }
.gfl-doll-card.doll-rarity-EXTRA.doll-classification-HG .card-frame { --gfl-comp-doll-card-type-icon-url: url("/images/thumb/8/8d/Icon_HG_EXTRAstar.png/50px-Icon_HG_EXTRAstar.png"); }
 
 
 
.gfl-doll-card > .plainlinks.card-frame > .external.text {
color: transparent;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
}
 
.gfl-doll-card .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: bold;
font-family: "Times New Roman",Times,serif;
text-overflow: ellipsis;
white-space: nowrap;
left: 0;
position: absolute;
overflow: hidden;
}
 
.gfl-doll-card.doll-rarity-2 .name { background-image: url("/images/b/b1/Infobox_name_2star.png"); }
.gfl-doll-card.doll-rarity-3 .name { background-image: url("/images/c/c1/Infobox_name_3star.png"); }
.gfl-doll-card.doll-rarity-4 .name { background-image: url("/images/8/81/Infobox_name_4star.png"); }
.gfl-doll-card.doll-rarity-5 .name { background-image: url("/images/2/26/Infobox_name_5star.png"); }
.gfl-doll-card.doll-rarity-6 .name { background-image: url("/images/a/a0/Infobox_name_6star.png"); }
.gfl-doll-card.doll-rarity-EXTRA .name { background-image: url("/images/c/c0/Infobox_name_EXTRAstar.png"); }

Latest revision as of 00:10, 22 June 2024

/** Room for texting things on vector.css */