Template:CharSelect/style.css: Difference between revisions

Template page
(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...")
 
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.7em;
  margin-bottom: 1.8em;
  width: 85px;
  width: 66px;
  position: relative;
  position: relative;
}
}


.char-select-text {
.char-select-text {
  white-space: nowrap;
  white-space: nowrap;
  line-height: initial;
  line-height: initial;
  /**
  /**
  * Not using text-align to center here because we want the long
    * Not using text-align to center here because we want the long
  * text ("Master Raven") to overflow a bit, and text-align doesn't
    * text ("Master Raven") to overflow a bit, and text-align doesn't
  * center this
    * center this
  **/
    **/
  text-align: left;
  text-align: left;
  position: absolute;
  position: absolute;
  left: 50%;
  left: 50%;
  transform: translateX(-50%);
  transform: translateX(-50%);
}
}


.char-select-img a {
.char-select-img a {
   margin: 0 auto;
   margin: 0 auto;
   height: 90px;
   height: 99px;
   width: 60px;
   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: -60px -0px;
   background-position: -66px -0px !important;
}
}
.char-select-img.shaheen img {
.char-select-img.shaheen img {
   background-position: -120px -0px;
   background-position: -132px -0px !important;
}
}
.char-select-img.alisa img {
.char-select-img.alisa img {
   background-position: -180px -0px;
   background-position: -198px -0px !important;
}
}
.char-select-img.asuka img {
.char-select-img.asuka img {
   background-position: -240px -0px;
   background-position: -264px -0px !important;
}
}
.char-select-img.bob img {
.char-select-img.bob img {
   background-position: -300px -0px;
   background-position: -330px -0px !important;
}
}
.char-select-img.bryan img {
.char-select-img.bryan img {
   background-position: -360px -0px;
   background-position: -396px -0px !important;
}
}
.char-select-img.gigas img {
.char-select-img.gigas img {
   background-position: -0px -90px;
   background-position: -462px -0px !important;
}
}
.char-select-img.lucky-chloe img {
.char-select-img.lucky-chloe img {
   background-position: -60px -90px;
   background-position: -0px -99px !important;
}
}
.char-select-img.dragonuv img {
.char-select-img.dragunov img {
   background-position: -120px -90px;
   background-position: -66px -99px !important;
}
}
.char-select-img.devil-jin img {
.char-select-img.devil-jin img {
   background-position: -180px -90px;
   background-position: -132px -99px !important;
}
}
.char-select-img.eddy img {
.char-select-img.eddy img {
   background-position: -240px -90px;
   background-position: -198px -99px !important;
}
}
.char-select-img.eliza img {
.char-select-img.eliza img {
   background-position: -300px -90px;
   background-position: -264px -99px !important;
}
}
.char-select-img.feng img {
.char-select-img.feng img {
   background-position: -360px -90px;
   background-position: -330px -99px !important;
}
}
.char-select-img.master-raven img {
.char-select-img.master-raven img {
   background-position: -0px -180px;
   background-position: -396px -99px !important;
}
}
.char-select-img.ganryu img {
.char-select-img.ganryu img {
   background-position: -60px -180px;
   background-position: -462px -99px !important;
}
}
.char-select-img.heihachi img {
.char-select-img.heihachi img {
   background-position: -120px -180px;
   background-position: -0px -198px !important;
}
}
.char-select-img.hwoarang img {
.char-select-img.hwoarang img {
   background-position: -180px -180px;
   background-position: -66px -198px !important;
}
}
.char-select-img.claudio img {
.char-select-img.claudio img {
   background-position: -240px -180px;
   background-position: -132px -198px !important;
}
}
.char-select-img.jack-7 img {
.char-select-img.jack-7 img {
   background-position: -300px -180px;
   background-position: -198px -198px !important;
}
}
.char-select-img.jin img {
.char-select-img.jin img {
   background-position: -360px -180px;
   background-position: -264px -198px !important;
}
}
.char-select-img.julia img {
.char-select-img.julia img {
   background-position: -0px -270px;
   background-position: -330px -198px !important;
}
}
.char-select-img.kazuya img {
.char-select-img.kazuya img {
   background-position: -60px -270px;
   background-position: -396px -198px !important;
}
}
.char-select-img.king img {
.char-select-img.king img {
   background-position: -120px -270px;
   background-position: -462px -198px !important;
}
}
.char-select-img.kunimitsu img {
.char-select-img.kunimitsu img {
   background-position: -180px -270px;
   background-position: -0px -297px !important;
}
}
.char-select-img.kuma img {
.char-select-img.kuma img {
   background-position: -240px -270px;
   background-position: -66px -297px !important;
}
}
.char-select-img.kazumi img {
.char-select-img.kazumi img {
   background-position: -300px -270px;
   background-position: -132px -297px !important;
}
}
.char-select-img.lars img {
.char-select-img.lars img {
   background-position: -360px -270px;
   background-position: -198px -297px !important;
}
}
.char-select-img.law img {
.char-select-img.law img {
   background-position: -0px -360px;
   background-position: -264px -297px !important;
}
}
.char-select-img.lee img {
.char-select-img.lee img {
   background-position: -60px -360px;
   background-position: -330px -297px !important;
}
}
.char-select-img.lei img {
.char-select-img.lei img {
   background-position: -120px -360px;
   background-position: -396px -297px !important;
}
}
.char-select-img.leo img {
.char-select-img.leo img {
   background-position: -180px -360px;
   background-position: -462px -297px !important;
}
}
.char-select-img.lili img {
.char-select-img.lili img {
   background-position: -240px -360px;
   background-position: -0px -396px !important;
}
}
.char-select-img.katarina img {
.char-select-img.katarina img {
   background-position: -300px -360px;
   background-position: -66px -396px !important;
}
}
.char-select-img.marduk img {
.char-select-img.marduk img {
   background-position: -360px -360px;
   background-position: -132px -396px !important;
}
}
.char-select-img.miguel img {
.char-select-img.miguel img {
   background-position: -0px -450px;
   background-position: -198px -396px !important;
}
}
.char-select-img.akuma img {
.char-select-img.akuma img {
   background-position: -60px -450px;
   background-position: -264px -396px !important;
}
}
.char-select-img.geese img {
.char-select-img.geese img {
   background-position: -120px -450px;
   background-position: -330px -396px !important;
}
}
.char-select-img.noctis img {
.char-select-img.noctis img {
   background-position: -180px -450px;
   background-position: -396px -396px !important;
}
}
.char-select-img.josie img {
.char-select-img.josie img {
   background-position: -240px -450px;
   background-position: -462px -396px !important;
}
}
.char-select-img.nina img {
.char-select-img.nina img {
   background-position: -300px -450px;
   background-position: -0px -495px !important;
}
}
.char-select-img.negan img {
.char-select-img.negan img {
   background-position: -360px -450px;
   background-position: -66px -495px !important;
}
}
.char-select-img.leroy img {
.char-select-img.leroy img {
   background-position: -0px -540px;
   background-position: -132px -495px !important;
}
}
.char-select-img.fahkumram img {
.char-select-img.fahkumram img {
   background-position: -60px -540px;
   background-position: -198px -495px !important;
}
}
.char-select-img.paul img {
.char-select-img.paul img {
   background-position: -120px -540px;
   background-position: -264px -495px !important;
}
}
.char-select-img.steve img {
.char-select-img.steve img {
   background-position: -180px -540px;
   background-position: -330px -495px !important;
}
}
.char-select-img.xiayou img {
.char-select-img.xiaoyu img {
   background-position: -240px -540px;
   background-position: -396px -495px !important;
}
}
.char-select-img.yoshimitsu img {
.char-select-img.yoshimitsu img {
   background-position: -300px -540px;
   background-position: -462px -495px !important;
}
}
.char-select-img.zafina img {
.char-select-img.zafina img {
   background-position: -360px -540px;
   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;
}