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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
@import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:ModernProfile/Masthead.css|u:dev:MediaWiki:ModernProfile/Wall.css");
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:Skill.css|MediaWiki:StatWheel.css|MediaWiki:Runes.css|MediaWiki:Tabber.css|MediaWiki:Portal.css");
@import url("https://use.fontawesome.com/releases/v5.15.0/css/all.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;
}
/****************************/
/* FandomDesktop overruling */
/****************************/
.article-table {
background-color: var(--secondary-color) !important;
margin-bottom: 1em;
border: unset !important;
}
.article-table td {
border-bottom: 1px solid #4a5462 !important;
border-left: unset !important;
}
.article-table th {
background-color: var(--theme-color) !important;
border-bottom: 1px solid #4a5462 !important;
}
.pi-background {
background-color: var(--clientblue) !important;
}
/******************/
/* Fandom Footers */
/******************/
#FooterCCGGames {
background: var(--secondary-color);
}
#FooterMOBAGames {
background: var(--secondary-color);
}
#FooterAutobattler {
background: var(--secondary-color);
}
#FooterFightingGames {
background: var(--secondary-color);
}
/*******************************/
/* 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: 120px;
}
/***********************************/
/* pi-themes */
/***********************************/
.pi-theme-client.type-stats,
.pi-theme-stats-table {
clear: unset;
}
/* pi-theme-client */
.pi-theme-client .pi-header, .pi-theme-wikia .pi-title {
background-color: var(--clientblue);
}
.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;
}
#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;
}
.ability-info-container:nth-of-type(1):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;
}
.ability-info-container:nth-of-type(2):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;
margin-bottom: 5px;
padding: 2px 5px;
background-color: var(--clientblue);
}
/* 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: #D5D4D4;
background-color: var(--clientblue);
}
/* 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;
}
/******************************************/
/* 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;
}
/*******************************/
/* 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%; }
/******************************************/
/**************** 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;
}