诚邀有MediaWiki开发维护经验的朋友和我们一起共建英雄联盟中文Wiki平台,期待你的加入! 甜咖啡(QQ:815798492)(微信:glf101012) 请备注来意,并附带您的GitHub/Gitee主页或作品链接。

MediaWiki:Common.css:修订间差异

MediaWiki界面页面
第1行: 第1行:
/* 这里放置的CSS将应用于所有皮肤 */
/* 这里放置的CSS将应用于所有皮肤 */
@import url("/resources/Css/Portal.css");
@import url("/resources/Css/Portal.css?v=0.0.1");
@import url("/resources/Css/Runes.css");
@import url("/resources/Css/Runes.css");
@import url("/resources/Css/Skill.css");
@import url("/resources/Css/Skill.css");

2024年2月20日 (二) 11:44的版本

/* 这里放置的CSS将应用于所有皮肤 */
@import url("/resources/Css/Portal.css?v=0.0.1");
@import url("/resources/Css/Runes.css");
@import url("/resources/Css/Skill.css");
@import url("/resources/Css/StatWheel.css");
@import url("/resources/Css/Tabber.css");

/* BeaufortLoL */
@font-face {
    font-family:BeaufortLoL;
    src:
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Heavy.woff2) format("woff2"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Heavy.woff) format("woff"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Heavy.ttf) format("truetype");
    font-weight:800;
    font-style:normal;
    }
@font-face {
    font-family:BeaufortLoL;
    src:
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-HeavyItalic.woff2) format("woff2"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-HeavyItalic.woff) format("woff"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-HeavyItalic.ttf) format("truetype");
    font-weight:800;
    font-style:italic;
    }
@font-face {
    font-family:BeaufortLoL;
    src:
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Bold.woff2) format("woff2"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Bold.woff) format("woff"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Bold.ttf) format("truetype");
    font-weight:700;
    font-style:normal;
    }
@font-face {
    font-family:BeaufortLoL;
    src:
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-BoldItalic.woff2) format("woff2"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-BoldItalic.woff) format("woff"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-BoldItalic.ttf) format("truetype");
    font-weight:700;
    font-style:italic;
    }
@font-face {
    font-family:BeaufortLoL;
    src:
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Medium.woff2) format("woff2"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Medium.woff) format("woff"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Medium.ttf) format("truetype");
    font-weight:500;
    font-style:normal;
    }
@font-face {
    font-family:BeaufortLoL;
    src:
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-MediumItalic.woff2) format("woff2"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-MediumItalic.woff) format("woff"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-MediumItalic.ttf) format("truetype");
    font-weight:500;
    font-style:italic;
    }
@font-face {
    font-family:BeaufortLoL;
    src:
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Regular.woff2) format("woff2"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Regular.woff) format("woff"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Regular.ttf) format("truetype");
    font-weight:400;
    font-style:normal;
    }
@font-face {
    font-family:BeaufortLoL;
    src:
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Italic.woff2) format("woff2"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Italic.woff) format("woff"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Italic.ttf) format("truetype");
    font-weight:400;
    font-style:italic;
    }
@font-face {
    font-family:BeaufortLoL;
    src:
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Light.woff2) format("woff2"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Light.woff) format("woff"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-Light.ttf) format("truetype");
    font-weight:200;
    font-style:normal;
    }
@font-face {
    font-family:BeaufortLoL;
    src:
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-LightItalic.woff2) format("woff2"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-LightItalic.woff) format("woff"),
    url(https://s.lolstatic.com/awesomefonts/1.0.0/Fonts/BeaufortforLOL-LightItalic.ttf) format("truetype");
    font-weight:200;
    font-style:italic;
    }

/******************/
/* Fandom Footers */
/******************/

#FooterCCGGames {
	background: var(--secondary-color);
}
#FooterMOBAGames {
	background: var(--secondary-color);
}
#FooterAutobattler {
	background: var(--secondary-color);
}
#FooterFightingGames {
	background: var(--secondary-color);
}

/*******************************************************/
/* Disables the WikiaRail on 'homepages' for all users */
/*******************************************************/

body[class*="page-League_of_Legends_Wiki_"] #WikiaMainContent,
body.page-Teamfight_Tactics #WikiaMainContent,
body.page-Legends_of_Runeterra #WikiaMainContent,
body.page-Wild_Rift #WikiaMainContent,
body.page-Universe #WikiaMainContent {
  width: inherit;
}
body[class*="page-League_of_Legends_Wiki_"] #WikiaRail,
body.page-Teamfight_Tactics #WikiaRail,
body.page-Legends_of_Runeterra #WikiaRail,
body.page-Wild_Rift #WikiaRail,
body.page-Universe #WikiaRail {
  display: none;
}
body[class*="page-League_of_Legends_Wiki_"] #WikiaRailWrapper,
body.page-Teamfight_Tactics #WikiaRailWrapper,
body.page-Legends_of_Runeterra #WikiaRailWrapper,
body.page-Wild_Rift #WikiaRailWrapper,
body.page-Universe #WikiaRailWrapper {
  display: none;
}
body[class*="page-League_of_Legends_Wiki_"] #wikiPreview,
body.page-Teamfight_Tactics #wikiPreview,
body.page-Legends_of_Runeterra #wikiPreview,
body.page-Wild_Rift #wikiPreview,
body.page-Universe #wikiPreview {
  margin-right: 0;
}
body[class*="page-League_of_Legends_Wiki_"] .page__right-rail,
body.page-Teamfight_Tactics .page__right-rail,
body.page-Legends_of_Runeterra .page__right-rail,
body.page-Wild_Rift .page__right-rail,
body.page-Universe .page__right-rail {
  display: none;
}

/*******************************/
/* NAVIGATION: Champion roster */
/*******************************/
.champion_roster {
  line-height: 0; /* Kills any vertical spacing between rows */
  margin: 0 !important;
  padding: .5em 0 !important;
  text-align: center;
}
.champion_roster li {
  display: inline-block;
  margin: 1px;
  overflow: hidden;
  border-radius: 5px;
}
.champion_roster li:hover {
  box-shadow: 0 0 3px #aac, 0 0 4px #111;
}

/***************************/
/* Homepage: Free Rotation */
/***************************/
#rotation {
  border-top: 1px solid #181818;
}
#rotation > h3 {
  float: left;
  width: 100%;
  margin: 0;
  text-align: center;
}
#rotation > #rotationweek {
  float: left;
  margin: 0;
  width: 100%;
}
#rotation .text {
    position: absolute;
    right: 14px;
}
.free_champion_rotation {
  clear:both;
  overflow: hidden;
  margin: 0 !important;
  padding-top: 6px;
  font-size: 80%;
  text-align: center;
}
.free_champion_rotation li {
  min-width:60px;
  display: inline-block;
  list-style: none;
}
.free_champion_rotation img {
  border-radius: 1000px;
}
.free_champion_rotation img:hover {
  box-shadow: 0 0 4px #aac, 0 0 6px #000;
}
.free_champion_rotation .champion-icon span,
.break .champion-icon span {
  display: block;
}

/********************/
/* Image Formatting */
/********************/

.FullWidthImage img {
    height: auto;
    width: 100%;
}

.FillImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.FullHeightImage img {
    height: 100%;
    width: auto;
}

/**************/
/* Flex Grids */
/**************/

.centered-grid {
	display: flex;
	justify-content: center; 
	flex-wrap: wrap;
}

.justified-grid {
	display: flex;
	justify-content: space-evenly; 
	flex-wrap: wrap;
}

/*****************/
/* Ambox styling */
/*****************/
.ambox {
  font-size: 95%;
  width: 80%; 
  margin: 0 auto;
  border: 1px #AAA solid;
  border-left: 10px solid #bba;
  border-collapse: collapse;
  background-color: transparent;
}
table.ambox + table.ambox {      /* Single border between stacked boxes. */
    margin-top: -1px;
}
.ambox-blue {
  border-left: 10px solid #0000FF;       /* Blue (notice) */
}
.ambox-red {
  border-left: 10px solid #b22222;       /* Red (delete/serious) */
}
.ambox-orange {
  border-left: 10px solid #f28500;       /* Orange (content) */
}
.ambox-yellow {
  border-left: 10px solid #f4c430;       /* Yellow (style) */
}
.ambox-purple {
  border-left: 10px solid #9932cc;       /* Purple (merge) */
}
.ambox-gray {
  border-left: 10px solid #cccccc;          /* Gray (protection) */
}
.ambox-green {
  border-left: 10px solid #228b22;       /* Green */
}
 
.ambox-image {                           /* The left image cell */
  width: 60px; 
  padding: 2px 0 2px 0.5em;            /* 0.5em left, 0px right */
  text-align: center; 
}
.ambox-info {
  padding: 0.25em 0.5em; 
}

/********************************************/
/* modification classes for 'article-table' */
/********************************************/

.nopadding th, .nopadding td {
    padding: 0 !important;
}

.novpadding th, .novpadding td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.hcpadding th, .hcpadding td {
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
}

/* Originally for LOR Ruling changes, also for Universe changelogs */
.ruling-table {
    width: 100%;
    max-width: 1240px;
}

.ruling-table td:nth-child(1) {
    width: 180px;
}

/***********************************/
/*            pi-themes            */
/***********************************/

.pi-theme-client.type-stats,
.pi-theme-stats-table {
    clear: unset;   
}

/*     pi-theme-client      */
 
.pi-theme-client.pi-background {
    background-color: var(--clientblue);
}

.pi-theme-client.portable-infobox {
    border-color: var(--gold);
    position: relative;
    border-width: 2px;
    border-style: inset;
    margin-bottom: 1em;
}

.pi-theme-teamfight-champion-top .pi-data[data-source=abilityname] > .pi-data-value {
	position: relative;
}

#infobox-champion-container {
    position: relative;
    z-index: 0;
    margin-bottom: 1em;
}
#infobox-champion-container::before  { 
    content: " ";
    position: absolute;
    z-index: -1;
    top: -1em;
    left: 1em;
    right: 1em;
    bottom: -1em;
    border-color: #c9aa71; /* Bug report - the before element can't see var colours */
    border-width: 2px;
    border-style: inset;
    border-radius: 3px;
}
#infobox-champion-container > .pi-theme-client.portable-infobox {
    margin-bottom: 0em;
}
.pi-theme-client .pi-image-collection-tabs {
    text-align: center;
}

/*     pi-theme-stats      */
 
.pi-theme-stats-table {
    width: calc(100% - 300px);
    /*max-width:551px;*/
    float:left;
    margin: 0 0 2em 0;
    position:relative;
}
 
.pi-theme-stats-table .pi-data-label {
    white-space:nowrap;
    -ms-flex-preferred-size: unset;
    -webkit-flex-basis: unset;
    -moz-flex-basis: unset;
    flex-basis: unset;
    width: 140px;
}
.pi-theme-stats-table .pi-data-value {
    width:100%;
    -ms-flex-preferred-size: unset;
    -webkit-flex-basis: unset;
    -moz-flex-basis: unset;
    flex-basis: unset;
    font-size: 14px;
    padding: 5px 5px;
}
 
.pi-theme-stats-table .external.text::after {
    display:none;
}

.pi-theme-stats-table h2 {
    background-color: var(--theme-color);
}

.pi-theme-stats-table {
    background-color: var(--secondary-color);
}

.pi-theme-stats-table .pi-secondary-font {
    line-height:25px;
}

/*      Legends of Runeterra cards    */
.card_container {
	max-width: 700px;
	margin-left:auto;
	margin-right:auto;
}
.pi-theme-card {
    float:left;
    width: calc(100% - 290px);
}
.pi-theme-card .pi-data-value {
    -ms-flex-preferred-size: unset;
    -webkit-flex-basis: unset;
    -moz-flex-basis: unset;
    flex-basis: unset;
}

/********************
/* Template:Skills */
/*******************/

.skill {
    position: relative;
    z-index: 1;
}

.skill:before { /* This and the next four rules put the big faded letter at the top-right of each ability box. */
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.15;
}
.skill2 {
    position: relative;
    z-index: 1;
}
.skill2:before { /* This and the next four rules put the big faded letter at the top-right of each ability box. */
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.15;
}
.skill_q:before {
    background: url('https://vignette.wikia.nocookie.net/leagueoflegends/images/3/3d/Q_bg.png') no-repeat right top !important;
}
.skill_w:before {
    background: url('https://vignette.wikia.nocookie.net/leagueoflegends/images/d/d6/W_bg.png') no-repeat right top !important;
}
.skill_e:before {
    background: url('https://vignette.wikia.nocookie.net/leagueoflegends/images/2/20/E_bg.png') no-repeat right top !important;
}
.skill_r:before {
    background: url('https://vignette.wikia.nocookie.net/leagueoflegends/images/1/10/R_bg.png') no-repeat right top !important;
}
.basic_attack:before {
    background: url('https://vignette.wikia.nocookie.net/leagueoflegends/images/e/e7/RMB.svg/revision/latest/scale-to-width-down/64?cb=20190623113241') no-repeat right top !important;
}

.skill_leveling ul { 
    margin: 0;
}
.skill_leveling li {
    line-height: 1.25;
    list-style-type: none;
    margin-top: 0;
}
.skill_leveling li+li {
    list-style-type: none;
    margin-top: 3px;
}
.skill_wrapper + .skill_header {
    margin-top: 9px;
}

.ability-info {
    display:inline-block;
    white-space: nowrap;
    padding-right:7px;
}

/* Speical formatting for Aphelios */
.skill_aphelios .ability-info-container {
    position: relative;
    z-index: 1;
}
.skill_aphelios .ability-info-container:before { 
    content: "";
    position: absolute;
    z-index: -1;
    top: -1em;
    bottom: 0;
    left: 0;
    right: -1em;
    opacity: 0.15;
}

div:nth-of-type(1) > .ability-info-container:before {
    background: url('https://vignette.wikia.nocookie.net/leagueoflegends/images/e/e7/RMB.svg/revision/latest/scale-to-width-down/64?cb=20190623113241') no-repeat right top !important;
}

div:nth-of-type(2) > .ability-info-container:before {
    background: url('https://vignette.wikia.nocookie.net/leagueoflegends/images/3/3d/Q_bg.png') no-repeat right top !important;
}

/******************************************/
/*   Navigation Boxes                     */
/******************************************/

.navbox {                     /* Navbox container style */
    /*border: 1px solid #aaa;*/
    width: 100%;
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
}
.navbox-cell {
    border: 1px solid #393E4A;
    border-radius: 5px;
    padding: 0.5em;
}
.navbox-cell ul,
.navbox-cell ol {
    margin: 0 0 0 2.5em;
}
.navbox-cell li,
.hlist .navbox-cell ul,
.hlist .navbox-cell ol,
.navbox-cell.hlist ul,
.navbox-cell.hlist ol {
    margin: 0;
}
table.navbox + table.navbox {  /* Single pixel border between adjacent navboxes */
    margin-top: -1px;          /* (doesn't work for IE6, but that's okay)       */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
    padding: 0.125em 0;       /* Adjust hlist padding in navboxes */
}
ol + table.navbox,
ul + table.navbox {
    margin-top: 0.5em;        /* Prevent lists from clinging to navboxes */
}

/********************************/
/*           tooltips           */
/********************************/

.blue-tooltip {
    border: 1px solid #999;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    border-radius: 4px;
    padding: 2px 5px;
    background-color: var(--tooltip-bg-color);
}

/* Adds padding to the wrapper to make space for a shadow + z-index so tooltips are visible over edit preview screen */
#tooltip-wrapper {
    z-index: 9999;
    color: var(--tooltip-text-color);
    background-color: var(--tooltip-bg-color);
    border-radius: 4px;
}

#tooltip-wrapper img {
	vertical-align: middle;
}

/* Hides tooltips with redlinks, not yet loaded ones and elements containing tooltip contents for advanced tooltips */
.has-redlinks,
.tooltip-loading,
.advanced-tooltip .tooltip-contents {
   display: none;
}
 
.tooltips-init-complete {
    cursor: help;
}

.tooltip-header {
	color: var(--tooltip-header-text-color);
	/*text-shadow: 0 2px black;*/
}

.tooltip-bg-image img,
.tooltip-icon img {
	display: block;
}

/******************************************/
/*        Template:Game_navigation        */
/******************************************/

.game-nav-item-select{
    opacity: 0;
    transition: opacity 1s;
}
.game-nav-item:hover .game-nav-item-select,
.game-nav-item.game-nav-item-active .game-nav-item-select{
    opacity: 1;
}


/******************************************/
/*        Template:LoL_navigation         */
/******************************************/
.lol-navigation-item {
	border: 1px solid var(--lol-navigation-color);
}
.lol-navigation-icon {
	color: var(--lol-navigation-color);
}

/*******************************/
/* List styles                 */
/*******************************/

/* TLIST - Simulating a tablular list */
.tlist ul {
    margin: 0;
    padding: 0;
    text-align: left;
}
.tlist li {
    margin: 0;
    display: inline-block;
    white-space: nowrap;
}
.tlist.twrap li {
    white-space: normal;
}

.fluidcolumn_4 li { width: 20em; }
.fluidcolumn_8 li { width: 10em; }

.multicolumn_8 li { width:12.5%; }
.multicolumn_5 li { width:20.0%; }
.multicolumn_4 li { width:25.0%; }
.multicolumn_3 li { width:33.3%; }
.multicolumn_2 li { width:50.0%; }

/* Style for horizontal lists (separator following item) */
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
}
.hlist dd,
.hlist dt,
.hlist li {
    display: inline;
    margin: 0;
}
/* Display nested lists inline */
.hlist dl dl,
.hlist ol ol,
.hlist ul ul {
    display: inline;
}
/* Nowrap list items */
.hlist dd,
.hlist dt,
.hlist li {
    white-space: nowrap;
    white-space: normal !ie;  /* IE < 8 no-wraps entire list, so disable it */
}
/* But allow parent list items to be wrapped */
.hlist dd dl,
.hlist dt dl,
.hlist li ol,
.hlist li ul {
    white-space: normal;
}
/* Generate interpuncts */
.hlist dt:after {
    content: ":";
}
.hlist dd:after,
.hlist li:after {
    content: " ·";
    font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}
/* for IE 8 */
.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-last-child:after {
    content: none;
}
/* Add parens around nested lists */
.hlist dl dl dd:first-child:before,
.hlist ol ol li:first-child:before,
.hlist ul ul li:first-child:before {
    content: "(";
}
.hlist dl dl dd:last-child:after,
.hlist ol ol li:last-child:after,
.hlist ul ul li:last-child:after {
    content: ")";
    font-weight: normal;
}
/* For IE8 */
.hlist dl dl dd.hlist-last-child:after,
.hlist ol ol li.hlist-last-child:after,
.hlist ul ul li.hlist-last-child:after {
    content: ")";
    font-weight: normal;
}
/* Put numbers in ordered lists */
.hlist.hnum ol li {
    counter-increment: level1;
}
.hlist.hnum ol li:before {
    content: counter(level1) " ";
}
.hlist.hnum ol ol li {
    counter-increment: level2;
}
.hlist.hnum ol ol li:first-child:before {
    content: "(" counter(level2) " ";
}
.hlist.hnum ol ol li:before {
    content: counter(level2) " ";
}

/* Icon List */
.icon_list li {
  display: inline-block;
}


/******************************************/
/*     Template:Champion info historic    */
/*  Legacy Champion Header & Stat Table   */
/******************************************/
/* -- container -- */
#champinfo-container,
#champinfo-container a,
#champinfo-container a > span {
    font-family:BeaufortLoL;
    font-weight:700;
    text-transform:uppercase;
}
#champinfo-infos a > span {
    color: rgb(196, 185, 152);
}
#champinfo-container a:hover {
    text-decoration: none;
}
#champinfo-container a:hover {
    text-decoration: none;
    color: #f1e6d0;
}
/* Champion-Info-2017 */
/* Both */
.portable-infobox.pi-theme-championinfobox .pi-header,
.portable-infobox.pi-theme-championstatistics .pi-header{
    background: none;
}
.portable-infobox.pi-theme-championinfobox .pi-item-spacing,
.portable-infobox.pi-theme-championstatistics .pi-item-spacing {
    padding: 2px 10px;
}

/* Champion-info */
.portable-infobox.pi-theme-championinfobox {
    background: none;
    border: none;
    position: absolute;
    bottom: -20px;
    left: 230px;
    z-index: 30;
    width: 490px;
    font-family: BeaufortLoL;
    font-weight: 700;
    text-transform: uppercase;
}
.portable-infobox.pi-theme-championinfobox .pi-group{
    float:left;
    width: 245px;
    text-align:left;
    border:none;
}
.portable-infobox.pi-theme-championinfobox .pi-smart-group{
    text-align:left;
    border:none;
}
.portable-infobox.pi-theme-championinfobox .pi-smart-group-head,
.portable-infobox.pi-theme-championinfobox .pi-smart-group-body{
    height:18px;
}
.portable-infobox.pi-theme-championinfobox .pi-data-value,
.portable-infobox.pi-theme-championinfobox .pi-data-value a {
    color: rgb(196, 185, 152) !important;
}
.portable-infobox.pi-theme-championinfobox .pi-data-label{
    color: rgb(147, 115, 65);
}
 
/* Champion-statistics */
.portable-infobox.pi-theme-championstatistics {
    background: none;
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 30;
    width: 490px;
    font-family: BeaufortLoL;
    font-weight: 700;
    text-transform: uppercase;
}
.portable-infobox.pi-theme-championstatistics .pi-group{
    text-align:left;
    border:none;
}
.portable-infobox.pi-theme-championstatistics .pi-smart-group{
    text-align:left;
    border:none;
    flex-direction:row;
    width:50%;
    float:left;
}
.portable-infobox.pi-theme-championstatistics .pi-smart-group-head,
.portable-infobox.pi-theme-championstatistics .pi-smart-group-body{
    width:50%;
}
.portable-infobox.pi-theme-championstatistics .pi-data-value {
    color: rgb(196, 185, 152) !important;
}
.portable-infobox.pi-theme-championstatistics a:link,
.portable-infobox.pi-theme-championstatistics a:visited {
    color: rgb(147, 115, 65) !important;
}


/******************************************/
/**************** WIP LINE ****************/
/******************************************/

/* League Font */
.league-font {
    font-family:BeaufortLoL;
    font-weight:700;
    text-transform:uppercase;
}

.league-font a:hover {
    text-decoration: none;
}

/* Hide from view, but allows screen readers to read. */
.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

/* Image frames and captions. */
.WikiaArticle .thumbinner {
  background: inherit;
  border: none;
}

.wikia-slideshow-images li img {
  border: none;
}

body.ltr .thumbcaption {
  padding: .4em .75em;
  background: #101011;
  border-radius: 0 0 3px 3px;
  font-size: 85%;
  line-height: 1.35;
}

body.ltr .magnify {
  margin-right: .5em;
}

/* Give [[Media:]] file links a special icon */
a[href$=".mp3"].internal {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAAgUlEQVR4XpXRrQoCURBH8ftqPofBto9gFTTbTMJi2LxFNIogxsVqtaxNNNhEfsLlFtEy4fAPcxjmI+GLybqXqg5+av/EzPVBf2e0YtzyehchU0TkrI8Ma25PBnO6Cyl3KkCR5WhoTyz2TDdFBvzIywOzLbszVROSQ2MEFwydLvSUD8SWU67UN2OFAAAAAElFTkSuQmCC") no-repeat scroll right center transparent;
    padding-right: 13px;
}

/* Make <ref> tags not increase line height */
.reference {
   line-height: 1em;
}

/* Smaller text for <references> tag */
ol.references {
   font-size: 11px;
   line-height: 16px;
}

/* Disambiguation style table */
table.disambig {
    clear: both; 
    margin: 0.9em 1em; 
    border-top: 1px solid; 
    border-bottom: 1px solid; 
    background: transparent;
}

/* Disable image preview for Ogg files + style fix*/
.category-page__member {
    padding: inherit !important;
}
.category-page__trending-pages-header,
.category-page__trending-pages,
.category-page__member img[src*="ogg"] {
    display: none !important;
}

/* champion ability */
/* -- wrapper -- */
.champion-ability__header {
    display: flex;
    padding-right: 3em;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    font-weight: bold;
}
/* -- h3 -- */
.champion-ability__header > h3 {
    margin: 0 0 5px 0;
    color: #9797fc;
    text-shadow: 0 2px black;
    font-size: 18px; /* oasis only */
}
/* -- infobox -- */
.champion-ability__header > .pi-theme-champion-ability {
    flex-grow: 1;
    margin-bottom: 0;
    background-color: initial;
    border: initial;
}
.champion-ability__header > .pi-theme-champion-ability h2,
.champion-ability__header > .pi-theme-champion-ability figure {
    display: none;
}
/* -- infobox group -- */
.champion-ability__header > .pi-theme-champion-ability .pi-group {
    display: flex;
    flex-flow: row wrap;
    column-gap: 1em;
}
.champion-ability__header > .pi-theme-champion-ability .pi-data {
    display: initial;
    border: initial;
    padding: 0;
    width: initial; /* oasis only */
    text-transform: uppercase;
}
.champion-ability__header > .pi-theme-champion-ability .pi-data-label {
    display: inline-block;
    overflow: initial;
    color: #9797fc;
}
.champion-ability__header > .pi-theme-champion-ability .pi-data-value {
    display: inline-block;
    padding-left: 0;
}

/* Template 'lc' and 'sbc' */
.template_lc {
	font-weight:bold;
	font-size:89%;
	text-transform:uppercase;
	color:#9797FC;
}
.template_sbc {
	font-weight:bold;
	font-size:89%;
	text-transform:uppercase;
}

/* chroma exhibition */
.chroma-gallery {
  display: grid;
  width: 718px;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1px 1px;
  grid-template-areas: "base base 1 2 3 4" "base base 5 6 7 8";
}

.chroma-gallery-large {
  display: grid;
  width: 718px;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1px 1px;
  grid-template-areas: "base base 1 2 3 4 5" "base base 6 7 8 9 10";
}
 
.base { grid-area: base; }
 
.chroma {
    background-color: #1c3248;
    border-color: #6699cc;
    color: #D5D4D4;
}

.chroma-gallery * .chroma {margin: 0 18px;}
.chroma-gallery-large * .chroma {margin: 0 10px;}

.bundle-border * img.thumbborder {
    border-color: #e63031;
}
.rare-border * img.thumbborder {
    border-color: #e63031;
}
.loot-border * img.thumbborder {
    border-color: #82499D;
}
.partner-border * img.thumbborder {
    border-color: #8bc34a;
}
.limited-border * img.thumbborder {
    border-color: #FFD700;
}
.canceled-border * img.thumbborder {
    border-color: #FF00FF;
}

.chroma-caption {
    color: #858c93;
    font-size: 12px;
    line-height: 16px;
    margin: 8px 0 5px;
}

/* -- columntemplate  -- */
.columntemplate ul,
.columntemplate ol {
    margin: 0 0 0 2.5em;
}
.columntemplate dl {
    margin: 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    width: 100%;
}

/* -- Sticky Headers in Tables -- */
.sticky-header > thead > tr {
	position: sticky;
	top: 45px;
	z-index: 1;
}
.table-wide-inner > .sticky-header > thead > tr {
	position: static;
	top: auto;
	z-index: auto;
}
/* sticky header nearest scrollable ancestor fix */
.ns-subject .page-content {
	overflow: visible;
}

/* -- reduce extra dl spacing -- */
.ns-subject .page-content dl {
	margin-bottom: 12px;
}

/* -- ChampionDataLarge -- */
.hero-list-item {
	width: 220px;
    height: 280px;
    margin-right: .2rem;
    margin-bottom: .2rem;
    position: relative;
}
.hero-list-item .hero-item {
	width: 100%;
    height: 100%;
    background-color: #111419;
    box-sizing: border-box;
    border: 1px solid #313e4c;
    transition: all linear .2s;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    -moz-transform-origin: bottom center;
    -o-transform-origin: bottom center;
}
.hero-list-item .hero-item .hero-pic {
	height: 245px;
    position: relative;
    overflow: hidden;
}
.hero-list-item .hero-item .hero-pic img {
	width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.hero-list-item .hero-item .hero-name {
	color: #fff5e0;
}