RogerDodger (talk | contribs) (Created page with ".char-select { display: flex; flex-flow: row wrap; justify-content: center; } .char-select > div { margin-bottom: 1.7em; width: 85px; position: relative; } .c...") |
RogerDodger (talk | contribs) No edit summary |
||
(11 intermediate revisions by 2 users not shown) | |||
Line 3: | Line 3: | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
justify-content: center; | justify-content: center; | ||
margin-top: 0.8em; | |||
font-size: 15px; | |||
letter-spacing: -0.125ch; | |||
} | } | ||
.char-select > div { | .char-select > div { | ||
margin-bottom: 1.8em; | |||
width: 66px; | |||
position: relative; | |||
} | } | ||
.char-select-text { | .char-select-text { | ||
white-space: nowrap; | |||
line-height: initial; | |||
/** | |||
* Not using text-align to center here because we want the long | |||
* text ("Master Raven") to overflow a bit, and text-align doesn't | |||
* center this | |||
**/ | |||
text-align: left; | |||
position: absolute; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
} | } | ||
.char-select-img a { | .char-select-img a { | ||
margin: 0 auto; | margin: 0 auto; | ||
height: | height: 99px; | ||
width: | width: 66px; | ||
display: block; | display: block; | ||
} | } | ||
.char-select-img img { | .char-select-img img { | ||
background-image: url('https://wavu.wiki/w/skins/Tekken/character-select-spritesheet-v3-66x99.webp'); | |||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: 200%; | background-position: 200%; | ||
} | } | ||
.char-select-img.armor-king img { | .char-select-img.armor-king img { | ||
background-position: -0px -0px; | background-position: -0px -0px !important; | ||
} | } | ||
.char-select-img.anna img { | .char-select-img.anna img { | ||
background-position: - | background-position: -66px -0px !important; | ||
} | } | ||
.char-select-img.shaheen img { | .char-select-img.shaheen img { | ||
background-position: - | background-position: -132px -0px !important; | ||
} | } | ||
.char-select-img.alisa img { | .char-select-img.alisa img { | ||
background-position: - | background-position: -198px -0px !important; | ||
} | } | ||
.char-select-img.asuka img { | .char-select-img.asuka img { | ||
background-position: - | background-position: -264px -0px !important; | ||
} | } | ||
.char-select-img.bob img { | .char-select-img.bob img { | ||
background-position: - | background-position: -330px -0px !important; | ||
} | } | ||
.char-select-img.bryan img { | .char-select-img.bryan img { | ||
background-position: - | background-position: -396px -0px !important; | ||
} | } | ||
.char-select-img.gigas img { | .char-select-img.gigas img { | ||
background-position: -0px | background-position: -462px -0px !important; | ||
} | } | ||
.char-select-img.lucky-chloe img { | .char-select-img.lucky-chloe img { | ||
background-position: - | background-position: -0px -99px !important; | ||
} | } | ||
.char-select-img. | .char-select-img.dragunov img { | ||
background-position: - | background-position: -66px -99px !important; | ||
} | } | ||
.char-select-img.devil-jin img { | .char-select-img.devil-jin img { | ||
background-position: - | background-position: -132px -99px !important; | ||
} | } | ||
.char-select-img.eddy img { | .char-select-img.eddy img { | ||
background-position: - | background-position: -198px -99px !important; | ||
} | } | ||
.char-select-img.eliza img { | .char-select-img.eliza img { | ||
background-position: - | background-position: -264px -99px !important; | ||
} | } | ||
.char-select-img.feng img { | .char-select-img.feng img { | ||
background-position: - | background-position: -330px -99px !important; | ||
} | } | ||
.char-select-img.master-raven img { | .char-select-img.master-raven img { | ||
background-position: - | background-position: -396px -99px !important; | ||
} | } | ||
.char-select-img.ganryu img { | .char-select-img.ganryu img { | ||
background-position: - | background-position: -462px -99px !important; | ||
} | } | ||
.char-select-img.heihachi img { | .char-select-img.heihachi img { | ||
background-position: - | background-position: -0px -198px !important; | ||
} | } | ||
.char-select-img.hwoarang img { | .char-select-img.hwoarang img { | ||
background-position: - | background-position: -66px -198px !important; | ||
} | } | ||
.char-select-img.claudio img { | .char-select-img.claudio img { | ||
background-position: - | background-position: -132px -198px !important; | ||
} | } | ||
.char-select-img.jack-7 img { | .char-select-img.jack-7 img { | ||
background-position: - | background-position: -198px -198px !important; | ||
} | } | ||
.char-select-img.jin img { | .char-select-img.jin img { | ||
background-position: - | background-position: -264px -198px !important; | ||
} | } | ||
.char-select-img.julia img { | .char-select-img.julia img { | ||
background-position: - | background-position: -330px -198px !important; | ||
} | } | ||
.char-select-img.kazuya img { | .char-select-img.kazuya img { | ||
background-position: - | background-position: -396px -198px !important; | ||
} | } | ||
.char-select-img.king img { | .char-select-img.king img { | ||
background-position: - | background-position: -462px -198px !important; | ||
} | } | ||
.char-select-img.kunimitsu img { | .char-select-img.kunimitsu img { | ||
background-position: - | background-position: -0px -297px !important; | ||
} | } | ||
.char-select-img.kuma img { | .char-select-img.kuma img { | ||
background-position: - | background-position: -66px -297px !important; | ||
} | } | ||
.char-select-img.kazumi img { | .char-select-img.kazumi img { | ||
background-position: - | background-position: -132px -297px !important; | ||
} | } | ||
.char-select-img.lars img { | .char-select-img.lars img { | ||
background-position: - | background-position: -198px -297px !important; | ||
} | } | ||
.char-select-img.law img { | .char-select-img.law img { | ||
background-position: - | background-position: -264px -297px !important; | ||
} | } | ||
.char-select-img.lee img { | .char-select-img.lee img { | ||
background-position: - | background-position: -330px -297px !important; | ||
} | } | ||
.char-select-img.lei img { | .char-select-img.lei img { | ||
background-position: - | background-position: -396px -297px !important; | ||
} | } | ||
.char-select-img.leo img { | .char-select-img.leo img { | ||
background-position: - | background-position: -462px -297px !important; | ||
} | } | ||
.char-select-img.lili img { | .char-select-img.lili img { | ||
background-position: - | background-position: -0px -396px !important; | ||
} | } | ||
.char-select-img.katarina img { | .char-select-img.katarina img { | ||
background-position: - | background-position: -66px -396px !important; | ||
} | } | ||
.char-select-img.marduk img { | .char-select-img.marduk img { | ||
background-position: - | background-position: -132px -396px !important; | ||
} | } | ||
.char-select-img.miguel img { | .char-select-img.miguel img { | ||
background-position: - | background-position: -198px -396px !important; | ||
} | } | ||
.char-select-img.akuma img { | .char-select-img.akuma img { | ||
background-position: - | background-position: -264px -396px !important; | ||
} | } | ||
.char-select-img.geese img { | .char-select-img.geese img { | ||
background-position: - | background-position: -330px -396px !important; | ||
} | } | ||
.char-select-img.noctis img { | .char-select-img.noctis img { | ||
background-position: - | background-position: -396px -396px !important; | ||
} | } | ||
.char-select-img.josie img { | .char-select-img.josie img { | ||
background-position: - | background-position: -462px -396px !important; | ||
} | } | ||
.char-select-img.nina img { | .char-select-img.nina img { | ||
background-position: - | background-position: -0px -495px !important; | ||
} | } | ||
.char-select-img.negan img { | .char-select-img.negan img { | ||
background-position: - | background-position: -66px -495px !important; | ||
} | } | ||
.char-select-img.leroy img { | .char-select-img.leroy img { | ||
background-position: - | background-position: -132px -495px !important; | ||
} | } | ||
.char-select-img.fahkumram img { | .char-select-img.fahkumram img { | ||
background-position: - | background-position: -198px -495px !important; | ||
} | } | ||
.char-select-img.paul img { | .char-select-img.paul img { | ||
background-position: - | background-position: -264px -495px !important; | ||
} | } | ||
.char-select-img.steve img { | .char-select-img.steve img { | ||
background-position: - | background-position: -330px -495px !important; | ||
} | } | ||
.char-select-img. | .char-select-img.xiaoyu img { | ||
background-position: - | background-position: -396px -495px !important; | ||
} | } | ||
.char-select-img.yoshimitsu img { | .char-select-img.yoshimitsu img { | ||
background-position: - | background-position: -462px -495px !important; | ||
} | } | ||
.char-select-img.zafina img { | .char-select-img.zafina img { | ||
background-position: - | background-position: -0px -594px !important; | ||
} | |||
.char-select-img.lidia img { | |||
background-position: -66px -594px !important; | |||
} | } |
Revision as of 10:36, 23 March 2021
.char-select {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin-top: 0.8em;
font-size: 15px;
letter-spacing: -0.125ch;
}
.char-select > div {
margin-bottom: 1.8em;
width: 66px;
position: relative;
}
.char-select-text {
white-space: nowrap;
line-height: initial;
/**
* Not using text-align to center here because we want the long
* text ("Master Raven") to overflow a bit, and text-align doesn't
* center this
**/
text-align: left;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.char-select-img a {
margin: 0 auto;
height: 99px;
width: 66px;
display: block;
}
.char-select-img img {
background-image: url('https://wavu.wiki/w/skins/Tekken/character-select-spritesheet-v3-66x99.webp');
background-repeat: no-repeat;
background-position: 200%;
}
.char-select-img.armor-king img {
background-position: -0px -0px !important;
}
.char-select-img.anna img {
background-position: -66px -0px !important;
}
.char-select-img.shaheen img {
background-position: -132px -0px !important;
}
.char-select-img.alisa img {
background-position: -198px -0px !important;
}
.char-select-img.asuka img {
background-position: -264px -0px !important;
}
.char-select-img.bob img {
background-position: -330px -0px !important;
}
.char-select-img.bryan img {
background-position: -396px -0px !important;
}
.char-select-img.gigas img {
background-position: -462px -0px !important;
}
.char-select-img.lucky-chloe img {
background-position: -0px -99px !important;
}
.char-select-img.dragunov img {
background-position: -66px -99px !important;
}
.char-select-img.devil-jin img {
background-position: -132px -99px !important;
}
.char-select-img.eddy img {
background-position: -198px -99px !important;
}
.char-select-img.eliza img {
background-position: -264px -99px !important;
}
.char-select-img.feng img {
background-position: -330px -99px !important;
}
.char-select-img.master-raven img {
background-position: -396px -99px !important;
}
.char-select-img.ganryu img {
background-position: -462px -99px !important;
}
.char-select-img.heihachi img {
background-position: -0px -198px !important;
}
.char-select-img.hwoarang img {
background-position: -66px -198px !important;
}
.char-select-img.claudio img {
background-position: -132px -198px !important;
}
.char-select-img.jack-7 img {
background-position: -198px -198px !important;
}
.char-select-img.jin img {
background-position: -264px -198px !important;
}
.char-select-img.julia img {
background-position: -330px -198px !important;
}
.char-select-img.kazuya img {
background-position: -396px -198px !important;
}
.char-select-img.king img {
background-position: -462px -198px !important;
}
.char-select-img.kunimitsu img {
background-position: -0px -297px !important;
}
.char-select-img.kuma img {
background-position: -66px -297px !important;
}
.char-select-img.kazumi img {
background-position: -132px -297px !important;
}
.char-select-img.lars img {
background-position: -198px -297px !important;
}
.char-select-img.law img {
background-position: -264px -297px !important;
}
.char-select-img.lee img {
background-position: -330px -297px !important;
}
.char-select-img.lei img {
background-position: -396px -297px !important;
}
.char-select-img.leo img {
background-position: -462px -297px !important;
}
.char-select-img.lili img {
background-position: -0px -396px !important;
}
.char-select-img.katarina img {
background-position: -66px -396px !important;
}
.char-select-img.marduk img {
background-position: -132px -396px !important;
}
.char-select-img.miguel img {
background-position: -198px -396px !important;
}
.char-select-img.akuma img {
background-position: -264px -396px !important;
}
.char-select-img.geese img {
background-position: -330px -396px !important;
}
.char-select-img.noctis img {
background-position: -396px -396px !important;
}
.char-select-img.josie img {
background-position: -462px -396px !important;
}
.char-select-img.nina img {
background-position: -0px -495px !important;
}
.char-select-img.negan img {
background-position: -66px -495px !important;
}
.char-select-img.leroy img {
background-position: -132px -495px !important;
}
.char-select-img.fahkumram img {
background-position: -198px -495px !important;
}
.char-select-img.paul img {
background-position: -264px -495px !important;
}
.char-select-img.steve img {
background-position: -330px -495px !important;
}
.char-select-img.xiaoyu img {
background-position: -396px -495px !important;
}
.char-select-img.yoshimitsu img {
background-position: -462px -495px !important;
}
.char-select-img.zafina img {
background-position: -0px -594px !important;
}
.char-select-img.lidia img {
background-position: -66px -594px !important;
}