League of Legends Wiki
Nie masz konta?
Zarejestruj się
Advertisement
Zarejestruj się
League of Legends Wiki
League of Legends Wiki
2609
stron

Champion summary.css

Strona MediaWiki
Wersja z dnia 07:29, 31 paź 2017 autorstwa Nanaki (tablica | edycje)
Zaloguj się, aby edytować

Uwaga: aby zobaczyć zmiany po opublikowaniu, może zajść potrzeba wyczyszczenia pamięci podręcznej przeglądarki.

  • Firefox / Safari: Przytrzymaj Shift podczas klikania Odśwież bieżącą stronę, lub naciśnij klawisze Ctrl+F5, lub Ctrl+R (⌘-R na komputerze Mac)
  • Google Chrome: Naciśnij Ctrl-Shift-R (⌘-Shift-R na komputerze Mac)
  • Internet Explorer / Edge: Przytrzymaj Ctrl, jednocześnie klikając Odśwież, lub naciśnij klawisze Ctrl+F5
  • Opera: Naciśnij klawisze Ctrl+F5.
.champion-summary-v2 {
  margin: 0 auto 1em;
  max-width: 900px;
}
.champion-summary-v2 a,
.champion-summary-v2 a.new,
.champion-summary-v2 a:visited,
.champion-summary-v2 a.new:visited,
.champion-summary-v2 .pi-europa .pi-header a,
.champion-summary-v2 .pi-europa .pi-title a {
  color: inherit !important;
  text-decoration: none;
}
.champion-summary-v2 a.new {
  text-decoration-color: #F05048;
}
.champion-summary-v2 a:hover
.champion-summary-v2 .pi-europa .pi-header a:hover,
.champion-summary-v2 .pi-europa .pi-title a:hover {
  text-decoration: underline;
}
.champion-summary-v2 .portable-infobox .pi-title,
.champion-summary-v2 .portable-infobox .pi-secondary-font {
  font-size: inherit;
}


.portable-infobox.pi-theme-champion-summary {
  float: none;
  width: auto;
  margin: 2.50em 0 0;
  background-color: #192A4C;
  border-radius: .2em;
  color: #D5D4D4;
  box-shadow: 0 .1em .5em rgba(0, 0, 0, .5);
  position: relative;
  background-image: linear-gradient(to right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
  overflow: visible;
  z-index: 2;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}
#mw-content-text > .champion-summary-v2:first-child > .pi-theme-champion-summary {
  margin-top: 1.88em;
}
.champion-summary-v2.no-stats > .pi-theme-champion-summary {
  height: 60px;
}
.pi-theme-champion-summary::after {
  content: '';
  display: block;
  clear: both;
}
.champion-summary-v2 .pi-border-color,
.champion-summary-v2 .pi-border-color * {
  border: none;
}
.pi-theme-champion-summary > .pi-image {
  display: none;
}

/* Nawigacja */
.pi-theme-champion-summary > .pi-navigation {
  position: absolute;
  top: -2.5em;
  left: 0;
  right: 0;
  display: flex;
  padding: .5em 7% 0 !important;
  height: 2em;
  line-height: 2em !important;
  background: none;
  overflow: hidden;
  font-weight: bold;
}
.pi-theme-champion-summary > .pi-navigation > center {
  flex: 1;
  margin: 0 .5em;
}
.pi-theme-champion-summary > .pi-navigation > :first-child {
  margin-left: 0;
}
.pi-theme-champion-summary > .pi-navigation > :last-child {
  margin-right: 0;
}
.pi-theme-champion-summary > .pi-navigation > center a,
.pi-theme-champion-summary > .pi-navigation > center .selflink {
  display: block;
  border-radius: .2em .2em 0 0;
  font-size: 90%;
}
.pi-theme-champion-summary > .pi-navigation > center a {
  background-color: rgba(0, 0, 0, .2) !important;
}
.pi-theme-champion-summary > .pi-navigation > center .selflink {
  display: block;
  background-color: #131F39;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}

/* Nagłówek */
.pi-theme-champion-summary > .pi-title,
.pi-theme-champion-summary  .pi-title + .pi-item {
  color: #fff;
  text-align: left;
  font-weight: bold;
  text-shadow: 1px 1px 5px #000;
  background: none;
}
.pi-theme-champion-summary > .pi-title {
  position: relative;
  height: 60px;
  padding: 0;
}
.pi-theme-champion-summary > .pi-title::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 100%;
  background-position: center 50%;
  background-repeat: no-repeat;
  border-radius: .2em .2em 0 0;
  z-index: 1;
}
.no-stats > .pi-theme-champion-summary > .pi-title::before {
  border-radius: .2em;
}
.no-stats > .pi-theme-champion-summary > .pi-title::after {
  border-radius: 0 0 .2em .2em;
}
.pi-theme-champion-summary > .pi-title > div {
  line-height: 100%;
  position: absolute;
  left: 70px;
  right: 0;
  bottom: 30px;
  width: 50%;
  font-size: 20px;
  z-index: 3;
}
.pi-theme-champion-summary > .pi-title div::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  left: -50px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.pi-theme-champion-summary > .pi-title::after {
  content: '';
  display: block;
  position: absolute;
  height: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
}
.pi-theme-champion-summary > .pi-title + .pi-data {
  position: relative;
  padding: 6px 0 0;
  top: -30px;
  left: 70px;
  height: 35px;
  margin-bottom: -35px;
  width: 50%;
  z-index: 3;
}
.pi-theme-champion-summary > .pi-title + .pi-data > .pi-data-value {
  line-height: 100%;
  font-size: 14px;
  padding: 0;
}

/* Cena */
.pi-theme-champion-summary > .pi-group:nth-of-type(1) {
  margin-right: 10px;
  margin-bottom: -30px;
  position: relative;
  top: -31px;
  z-index: 3;
  float: right;
  white-space: nowrap;
  text-shadow: 1px 1px 5px #000;
}

.pi-theme-champion-summary > .pi-group:nth-of-type(1) > .pi-header,
.pi-theme-champion-summary > .pi-group:nth-of-type(1) .pi-smart-group-head {
  display: none;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(1) > .pi-smart-group {
  display: block;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(1) .pi-smart-group-body {
  display: inline-flex;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(1) .pi-smart-data-value {
  display: inline;
  padding: 0;
  flex-basis: auto;
  width: auto !important;
  background: none;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(1) .pi-smart-data-value:first-of-type::after {
  content: 'lub';
  margin: 0 10px;
  color: #ccc;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(1) a {
  display: inline-block;
  padding: 5px 5px 5px 25px;
  line-height: 16px;
  font-size: 16px;
  font-weight: bold;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 0px 2px;
  color: #fff !important;
}

.pi-theme-champion-summary > .pi-group:nth-of-type(1) .pi-smart-data-value:first-of-type a {
  background-image: url('/wiki/Special:Filepath/IP.png?width=40'); /* [[File:IP.png]] */
}
.pi-theme-champion-summary > .pi-group:nth-of-type(1) .pi-smart-data-value:last-of-type a {
  background-image: url('/wiki/Special:Filepath/RP.png?width=40'); /* [[File:RP.png]] */
}

/* Ikony klas */
.champion-summary-v2[data-class^="mag"] .pi-title div::before {
  background-image: url('/wiki/Special:Filepath/Mag.png?width=40'); /* [[File:Mag.png]] */
}
.champion-summary-v2[data-class^="inicjator"] .pi-title div::before,
.champion-summary-v2[data-class^="strażnik"] .pi-title div::before {
  background-image: url('/wiki/Special:Filepath/Obrońca.png?width=40'); /* [[File:Obrońca.png]] */
}
.champion-summary-v2[data-class^="strzelec"] .pi-title div::before {
  background-image: url('/wiki/Special:Filepath/Strzelec.png?width=40'); /* [[File:Strzelec.png]] */
}
.champion-summary-v2[data-class^="moloch"] .pi-title div::before,
.champion-summary-v2[data-class^="szturmowiec"] .pi-title div::before {
  background-image: url('/wiki/Special:Filepath/Wojownik.png?width=40'); /* [[File:Wojownik.png]] */
}
.champion-summary-v2[data-class^="zaklinacz"] .pi-title div::before,
.champion-summary-v2[data-class^="łapacz"] .pi-title div::before {
  background-image: url('/wiki/Special:Filepath/Kreator.png?width=40'); /* [[File:Kreator.png]] */
}
.champion-summary-v2[data-class^="zabójca"] .pi-title div::before,
.champion-summary-v2[data-class^="zwadźca"] .pi-title div::before {
  background-image: url('/wiki/Special:Filepath/Pogromca.png?width=40'); /* [[File:Pogromca.png]] */
}
.champion-summary-v2[data-class^="specjalista"] .pi-title div::before {
  background-image: url('/wiki/Special:Filepath/Specjalista.png?width=40'); /* [[File:Specjalista.png]] */
}

/* Dane */
.pi-theme-champion-summary > .pi-group:nth-of-type(2),
.pi-theme-champion-summary > .pi-group:nth-of-type(3) {
  width: calc(50% - 8em);
  min-height: 12em;
  vertical-align: top;
  padding: .5em 0;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(2) {
  float: left;
  text-align: right;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(3) {
  float: right;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(2) .pi-data,
.pi-theme-champion-summary > .pi-group:nth-of-type(3) .pi-data {
  height: 3em;
  padding: .2em 0 0;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(2) .pi-data-label,
.pi-theme-champion-summary > .pi-group:nth-of-type(3) .pi-data-label {
  color: #D6A541;
  font-variant: small-caps;
  line-height: 1.25em;
  font-size: 80%;
  padding: 0;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(2) .pi-data-value,
.pi-theme-champion-summary > .pi-group:nth-of-type(3) .pi-data-value {
  font-size: 1.1em;
  line-height: 1.6em;
  padding: 0;
}

/* Opływanie koła */
.pi-theme-champion-summary > .pi-group:nth-of-type(2) .pi-data:nth-of-type(2),
.pi-theme-champion-summary > .pi-group:nth-of-type(2) .pi-data:nth-of-type(3) {
  padding-right: 1em;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(3) .pi-data:nth-of-type(2),
.pi-theme-champion-summary > .pi-group:nth-of-type(3) .pi-data:nth-of-type(3) {
  padding-left: 1em;
}

/* Role */
.pi-theme-champion-summary .roles {
  display: flex;
  flex-direction: row-reverse;
}
.pi-theme-champion-summary .roles > span {
  margin-left: .4em;
}
.pi-theme-champion-summary .roles > small {
  opacity: .8;
}

/* Pasek stylu */
.pi-theme-champion-summary .style-bar img {
  width: auto;
  height: .7em;
}
.pi-theme-champion-summary .style-bar .style-icon img {
  width: auto;
  height: 1.4em;
}

/* Charakterystyka */
.pi-theme-champion-summary > .pi-group:nth-of-type(4) {
  position: absolute;
  top: 60px;
  right: 35%;
  left: 35%;
  bottom: 0px;
  padding-top: .8em;
  right: calc(50% - 6em);
  left: calc(50% - 6em);
  text-align: center;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(4) section {
  font-size: 80%;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(4) .pi-header {
  display: none;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(4) + .pi-group {
  display: none;
}
.pi-theme-champion-summary > .pi-group:nth-of-type(4) .pi-smart-data-label,
.pi-theme-champion-summary > .pi-group:nth-of-type(4) .pi-smart-data-value {
  background: none;
  text-align: center;
  padding: 5px 10px;
}

/* Koło */
.pi-theme-champion-summary > .pi-group.champion-summary-wheel svg {
  height: 10em;
  width: 10em;
  margin: 1em;
  border-radius: 50%;
  box-shadow: 0px .1em 1em rgba(0, 0, 0, .2);
}
.pi-theme-champion-summary > .pi-group.champion-summary-wheel img {
  width: 1.25em;
  position: absolute;
  margin: -.625em;
}
.pi-theme-champion-summary > .pi-group.champion-summary-wheel .damage-icon {
  left: 6em;
  top: 1.25em;
}
.pi-theme-champion-summary > .pi-group.champion-summary-wheel .toughness-icon {
  right: .6em;
  top: 5.3em;
}
.pi-theme-champion-summary > .pi-group.champion-summary-wheel .control-icon {
  right: 2.5em;
  top: 11.7em;
}
.pi-theme-champion-summary > .pi-group.champion-summary-wheel .mobility-icon {
  left: 2.5em;
  top: 11.7em;
}
.pi-theme-champion-summary > .pi-group.champion-summary-wheel .utility-icon {
  left: .6em;
  top: 5.3em;
}

/* Pasek trudności */
.difficulty-bar {
  background-color: #050a14;
  display: inline-flex;
  padding: 2px;
  border-radius: 6px;
  width: 150px;
}
.difficulty-bar span {
  background-color: #00202d;
  height: .4em;
  flex: 1;
  display: inline-block;
}
.difficulty-bar span:first-child {
  margin-right: 2px;
  border-radius: .2em 0 0 .2em;
}
.difficulty-bar span:last-child {
  margin-left: 2px;
  border-radius: 0 .2em .2em 0;
}
.difficulty-bar[data-difficulty-value="1"] span:nth-of-type(1),
.difficulty-bar[data-difficulty-value="2"] span:nth-of-type(1),
.difficulty-bar[data-difficulty-value="3"] span:nth-of-type(1){
  background-color: #0097ac;
}
.difficulty-bar[data-difficulty-value="2"] span:nth-of-type(2),
.difficulty-bar[data-difficulty-value="3"] span:nth-of-type(2) {
  background-color: #70b6c2;
}
.difficulty-bar[data-difficulty-value="3"] span:nth-of-type(3) {
  background-color: #b0d9db;
}

/* Statystyki */
.portable-infobox.pi-theme-champion-stats {
  float: none;
  width: auto;
  margin: 0 7%;
  padding: 1em;
  background-color: #131F39;
  border-radius: 0 0 .2em .2em;
  color: #D5D4D4;
  box-shadow: 0 .1em .5em rgba(0, 0, 0, .5);
  position: relative;
  background-image: linear-gradient(to right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
  overflow: visible;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.portable-infobox.pi-theme-champion-stats .pi-item-spacing {
  padding: 5px 10px;
}
.pi-theme-champion-stats .pi-header {
  background: none;
  text-align: center;
  padding: 0 0 10px;
  width: 100%;
}
.pi-theme-champion-stats .pi-group {
  flex: 1;
}
.pi-theme-champion-stats .pi-group + .pi-group {
  margin-left: 1em;
}
.pi-theme-champion-stats .pi-group .pi-data-label,
.pi-theme-champion-stats .pi-group .pi-data-value {
  -ms-flex-preferred-size: auto;
  -webkit-flex-basis: auto;
  -moz-flex-basis: auto;
  flex-basis: auto;
  flex: 1;
}
.pi-theme-champion-stats .pi-group .pi-data-label {
  text-align: right;
  padding-right: .3em;
  color: #D6A541;
  font-variant: small-caps;
  font-size: 90%;
  line-height: 1.2em;
  min-height: 1.2em;
}
.pi-theme-champion-stats .pi-group .pi-data-value {
  text-align: left;
  padding-left: .3em;
  font-size: 90%;
  line-height: 1.2em;
  min-height: 1.2em;
}
.champion-summary-v2 .pi-theme-champion-stats .pi-navigation {
  width: 100%;
  background: none;
  text-align: center;
  font-weight: normal;
  font-size: 80%;
  line-height: 120%;
  padding: 1.2em 0 0;
  opacity: .75;
}


/* Obecność tła */
.champion-summary-v2[data-background] .pi-theme-champion-summary > .pi-title {
  height: 13em;
}
.champion-summary-v2.no-stats[data-background] > .pi-theme-champion-summary {
  height: 13em;
}
.champion-summary-v2[data-background] .pi-theme-champion-summary > .pi-group:nth-of-type(4) {
  top: 13em;
}

/* Wyjątki */
.champion-summary-v2[data-background="Rakan.Klasyczna.sk%C3%B3rka.jpg"] .pi-title::before {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
Treści społeczności są dostępne na podstawie licencji CC-BY-SA, o ile nie zaznaczono inaczej.
Advertisement