User:Furinkan/common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

* {
  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-rarity-2 .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"); }
}