(Created page with "→CSS placed here will affect users of the mobile site: @import url(https://commons-esports.gamepedia.com/index.php?title=MediaWiki:Global.css&action=raw&ctype=text/css); @...") |
(No difference)
|
Revision as of 15:59, 2 March 2021
/* CSS placed here will affect users of the mobile site */
@import url(https://commons-esports.gamepedia.com/index.php?title=MediaWiki:Global.css&action=raw&ctype=text/css);
@import url(https://commons-esports.gamepedia.com/index.php?title=MediaWiki:Global-mobile.css&action=raw&ctype=text/css);
/******************
/* General styles *
/******************/
.nomobile {
display: none;
}
.client-js .toc-mobile {
background-color: rgba(0, 0, 0, 0) !important;
border: 1px solid #505050 !important;
}
.mw-ui-button,
.last-modified-bar #mw-mf-last-modified {
background-color: rgba(0, 0, 0, 0);
/*
color: #e0e0e0;
*/
}
body.mediawiki #mw-mf-page-center {
/*
background: #101010;
color: #e0e0e0;
*/
}
a,
a:visited,
a.external {
color: #5a93cc;
}
/* For hydradark only - makes the section collapse arrow visible */
/*
.mw-ui-icon-arrow::before {
filter: invert(100%);
}
*/
.thumb,
#content_wrapper .thumb,
li.gallerybox div.thumb {
background-color: rgba(0, 0, 0, 0);
border: 1px solid #505050;
}
.content table th {
background-color: rgba(0, 0, 0, 0);
}
.content table td,
.content table th {
border: 1px solid #505050;
padding: 3px;
}
.content table.wikitable {
background-color: rgba(0, 0, 0, 0);
margin: auto;
margin-bottom: 1em;
}
.content table.wikitable > tr > th,
.content table.wikitable > tr > td,
.content table.wikitable > * > tr > th,
.content table.wikitable > * > tr > td {
border: 1px solid #505050;
}
.content table.wikitable > tr > th,
.content table.wikitable > * > tr > th {
background-color: inherit;
padding: 3px;
}
/* Responsive main page stuff */
/********************
/* Main menu styles *
/********************/
.primary-navigation-enabled {
border-left: 12px solid #505050 !important;
background: #101010 !important;
}
#mw-mf-page-left {
border-left: 12px solid #505050;
background: transparent;
}
#mw-mf-page-left ul {
background: transparent;
}
#mw-mf-page-left ul:first-child {
border-bottom: 12px solid #505050;
}
#mw-mf-page-left ul li {
border-top: 1px solid #505050;
border-bottom: 1px solid #505050;
background: transparent;
text-shadow: none;
}
#mw-mf-page-left ul li a,
#mw-mf-page-left ul.hlist li a {
border: none;
color: #3674b3;
}
#mw-mf-page-left ul li:hover {
border-left: 12px solid #aaaaaa;
background: #505050;
}
#mw-mf-page-left ul.hlist li:hover {
border: none;
}
#mw-mf-page-left ul li:hover a,
#mw-mf-page-left ul.hlist li:hover a {
color: #ffffff;
}
/*********************
/* Front page styles *
/*********************/
.fpbox {
border-radius: 5px;
border: 2px solid #505050;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0) inset;
background: transparent;
color: inherit;
margin: 5px;
padding: 5px;
}
.fpbox .welcome {
border-bottom: 1px solid #505050;
background: transparent;
/* color: #e0e0e0; */
font-size: 150%;
text-transform: uppercase;
text-align: center;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
}
.fpbox .heading {
border-bottom: 1px solid #505050;
background: transparent;
/* color: #e0e0e0; */
font-size: 132%;
font-variant: small-caps;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
}
.fpbox .heading .smalllink {
color: #3674b3;
font-weight: bold;
font-size: 75%;
}
.fpbox hr {
border: none;
border-bottom: 2px solid #505050;
}
.fpplainbox {
padding: 5px 8px 10px 8px;
margin: 0 5px 10px 5px;
vertical-align: top;
}
.fplinks {
margin: -2px -3px;
}
.fplinks .linkslabel {
border-bottom: 2px solid #505050;
margin: 6px 3px 0 3px;
}
.fplink {
display: inline-block;
vertical-align: middle;
width: 100%;
}
/* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */
.fplink .box {
display: table;
width: 100%;
border-spacing: 2px 3px;
border-collapse: separate;
}
.fplink .box .row {
display: table-row;
}
.fplink .box .row .cell {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 2px solid #505050;
border-radius: 2px;
box-shadow: 0 0 0 2px #505050 inset;
/* color: #e0e0e0; */
display: table-cell;
font-weight: bold;
position: relative;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
}
.fplink.wide .box .row .cell {
padding: 0 5px;
}
.fplink.image {
width: 78px;
height: 78px;
}
.fplink.image .box .row .cell {
width: 70px;
height: 70px;
vertical-align: bottom;
}
.fplink.image .box .row .cell .image img {
width: 70px;
height: 70px;
}
@media (min-width: 188px) {
.fplink {
width: 50%;
}
.fplink.wide {
width: 100%;
}
}
@media (min-width: 294px) {
.fplink {
width: 33.333%;
}
.fplink.wide {
width: 66.666%;
}
}
@media (min-width: 400px) {
.fplink {
width: 25%;
}
.fplink.wide {
width: 50%;
}
.fplink.image {
width: 108px;
height: 108px;
}
.fplink.image .box .row .cell {
width: 100px;
height: 100px;
}
.fplink.image .box .row .cell .image img {
width: 100px;
height: 100px;
}
}
@media (min-width: 506px) {
.fplink {
width: 20%;
}
.fplink.wide {
width: 40%;
}
}
@media (min-width: 612px) {
.fplink {
width: 16.666%;
}
.fplink.wide {
width: 33.333%;
}
}
@media (min-width: 718px) {
.fplink {
width: 14.285%;
}
.fplink.wide {
width: 28.571%;
}
}
@media (min-width: 824px) {
.fplink {
width: 12.5%;
}
.fplink.wide {
width: 25%;
}
}
@media (min-width: 930px) {
.fplink {
width: 11.111%;
}
.fplink.wide {
width: 22.222%;
}
}
@media (min-width: 1036px) {
.fplink {
width: 10%;
}
.fplink.wide {
width: 20%;
}
.fplink.image {
width: 128px;
height: 128px;
}
.fplink.image .box .row .cell {
width: 120px;
height: 120px;
}
.fplink.image .box .row .cell .image img {
width: 120px;
height: 120px;
}
}
.fplink.image .image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-size: 75%;
z-index: 1;
}
.fplink.image a {
z-index: 2;
}
.fplink a {
display: block;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 3px 5px;
}
.fplink.image .image a {
padding: 0;
}
.fplink.image .link a {
border-top: 2px solid #505050;
background: #ddddb7 !important;
}
.fplink.wide a {
margin: 0 -5px;
}
.fplink.image a {
top: auto;
}
.fpvideos {
margin: 0 auto;
overflow: hidden;
text-align: center;
max-width: 480px;
}
.fpvideo {
position: relative;
padding-top: 25px;
padding-bottom: 56.25%;
height: 0;
}
.fpvideo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* CSS placed here will affect users of the mobile site */
/******************
/* General styles *
/******************/
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 500;
src: local('Raleway Medium'), local('Raleway-Medium'), url(https://themes.googleusercontent.com/static/fonts/raleway/v6/CcKI4k9un7TZVWzRVT-T8xsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 400;
src: local('Oxygen'), local('Oxygen-Regular'), url(https://themes.googleusercontent.com/static/fonts/oxygen/v3/RzoNiRR1p2Mqyyz2RwqSMw.woff) format('woff');
}
body {
background: #ffffff;
color: #222222 !important;
font-family: sans-serif;
}
.globalNotice {
position: relative;
background: #ffffff;
color: #222222;
}
.header-container.header-chrome {
border: none;
border-bottom: 5px solid #3562B5;
background-color: #6698ff;
color: #ffffff;
font-family: 'Raleway', serif;
}
.header {
border-top: none;
}
.header .branding-box h1 {
border-bottom: none;
}
.mw-ui-anchor.mw-ui-progressive {
color: #000000;
}
.notification-count {
background: transparent;
}
.notification-count.notification-unseen .circle, .notification-count .circle {
border-color: #6698ff;
}
.mw-echo-ui-notificationItemWidget.mw-echo-ui-notificationItemWidget-unread {
background: #7fa9ff !important;
}
.mw-echo-ui-notificationItemWidget, .mw-echo-ui-crossWikiNotificationItemWidget-group, .mw-echo-ui-bundleNotificationItemWidget-group {
border: 1px solid #3562B5 !important;
background: transparent !important;
}
.overlay-header-container, .mw-echo-ui-crossWikiNotificationItemWidget-separator, .mw-echo-ui-bundleNotificationItemWidget-separator {
border-bottom: 1px solid #3562B5 !important;
}
.overlay-footer-container {
border-top: 1px solid #3562B5 !important;
}
.mw-echo-ui-notificationItemWidget-content-message-header, .mw-echo-ui-menuItemWidget-content, .mw-echo-ui-crossWikiNotificationItemWidget .mw-echo-ui-subGroupListWidget-header-row-title, .mw-echo-ui-bundleNotificationItemWidget .mw-echo-ui-subGroupListWidget-header-row-title, .mw-echo-ui-notificationItemWidget-content-actions-timestamp {
color: #222222 !important;
}
.mw-echo-ui-notificationItemWidget-content-message-body {
color: #666666 !important;
}
#mw-mf-page-center, body.navigation-enabled #mw-mf-page-center, .animations #mw-mf-page-center {
background: #ffffff url("https://static.wikia.nocookie.net/lolesports_gamepedia_en/images/a/a7/Gravesbgmobile.jpg/revision/latest") no-repeat center top / 100% auto !important;
}
body.navigation-enabled .transparent-shield {
background: rgba(255, 255, 255, 0.8) !important;
}
.overlay-enabled, #content {
background: transparent;
}
.overlay, .overlay.editor-overlay, .overlay-header-container, .overlay-footer-container {
background: #6698ff;
}
.pre-content h1, .content h1, .content h2, h1, h2, h3, h4, h5, h6 {
background: transparent !important;
color: #000000 !important;
font-family: sans-serif;
}
#content .section {
border-bottom: 2px solid #aaaaaa;
}
div.toc-mobile, .client-js div.toc-mobile {
border: 1px solid #aaaaaa;
background-color: #f9f9f9;
color: #222222;
padding: 8px;
margin-bottom: 5px;
}
#content .thumb {
border: 1px solid #aaaaaa;
background-color: #f9f9f9;
color: #222222;
padding: 8px;
margin-bottom: 5px;
}
div.content table.wikitable, div.content table.wikitable > * > tr > th, div.content table.prettytable, div.content table.prettytable > * > tr > th {
padding: 3px;
margin: auto;
margin-bottom: 5px;
}
div.content table.wikitable {
border: 3px solid #416eb6;
background: transparent;
color: #222222;
}
div.content table.wikitable th, div.content table.wikitable > * > tr > th, div.content table.wikitable > * > tr > th, div.content table.prettytable th, div.content table.prettytable > * > tr > th, div.content table.prettytable > * > tr > th {
border: 1px solid #aaaaaa;
background: #f9f9f9;
color: #222222;
font-family: 'Raleway', serif;
font-weight: bold;
margin: 0;
padding: 0 3px 3px 3px;
}
div.content table.wikitable td, div.content table.wikitable > * > tr > td, div.content table.wikitable > * > tr > td, div.content table.prettytable td, div.content table.prettytable > * > tr > td, div.content table.prettytable > * > tr > td {
border: 1px solid #aaaaaa;
background: transparent;
color: #222222 !important;
vertical-align: middle;
padding: 4px 8px;
}
div.view-border-box {
border: 1px solid #aaaaaa;
background-color: #f9f9f9;
color: #222222;
padding: 8px;
margin-bottom: 5px;
}
div.view-border-box.last-modified-bar {
border: none;
background: transparent;
color: #222222;
padding: 8px;
margin-bottom: 5px;
}
div.view-border-box.post-content {
border: none;
background: transparent !important;
color: #222222 !important;
margin: 0 30px 25px 30px;
}
div#mw-mf-last-modified {
background: transparent !important;
}
div.last-modified-bar a, div.last-modified-bar a:visited {
color: #ffffff;
}
div.view-border-box.watch-this-article {
border: none;
background-color: transparent;
overflow: visible;
}
.mwm-notice {
border: none;
background: transparent;
color: #222222;
}
pre, .mw-code {
border: 1px solid #eaecf0;
background-color: #f9f9f9;
color: #000000;
padding: 2px 2px;
white-space: pre-wrap;
word-wrap: break-word;
}
code {
border: 1px dashed #eaecf0;
background: transparent;
white-space: pre-wrap;
word-wrap: break-word;
}
input, select, textarea {
border: 1px solid #aaaaaa;
background-color: #f9f9f9;
color: #000000 !important;
padding: 2px 2px;
}
.header .search-box input.search, .search-box input.search {
background-color: #f9f9f9 !important;
}
.mw-ui-button {
font-family: 'Alegreya Sans', sans-serif;
border: none;
background: #3366cc;
color: #ffffff !Important;
font-weight: bold;
}
.mw-ui-button:hover {
background: #447ff5 !important;
color: #ffffff !important;
}
div.mw-echo-ui-menuItemWidget-content, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: #000000 !important;
}
footer {
border: none;
border-top: 5px solid #3562B5;
background-color: #6698ff;
color: #ffffff;
}
footer > .post-content > h2 {
border-bottom: 1px solid #3562B5;
color: #ffffff !important;
}
.toast {
border: 1px solid #aaaaaa;
background-color: #f9f9f9;
color: #222222;
}
.drawer {
background: #f9f9f9;
}
.editor-overlay .wikitext-editor {
color: #000000;
}
.editor-overlay .summary-request, .oo-ui-messageDialog-title, .oo-ui-messageDialog-message, div.mw-echo-ui-menuItemWidget-content {
color: #000000 !important;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
font-weight: bold;
border: none;
background: #3366cc;
color: #ffffff !important;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background: #447ff5 !important;
color: #ffffff !important;
}
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
background-color: rgba(255, 255, 255, 0.9) !important;
color: #000000;
}
.ve-ui-mwSaveDialog-options {
background-color: #ffffff !important;
}
.overlay #secondary-button.user-button,
.header #secondary-button.user-button,
.overlay .user-button,
.header .user-button {
background: transparent;
}
/*******************
/* Search elements *
/*******************/
.search-overlay {
background: rgba(255, 255, 255, 0.9) !important;
}
.search-overlay .results, .search-overlay .search-feedback {
background-color: #ffffff !important;
}
.page-summary h2, .page-summary h3 {
color: #000000 !important;
}
/********************
/* Main menu styles *
/********************/
.primary-navigation-enabled {
border-left: none !important;
background: #6698ff !important;
color: #000000;
font-family: 'Oxygen', serif;
}
#mw-mf-page-left {
border-left: none;
background: #6698ff;
font-family: 'Oxygen', serif;
}
div.menu.view-border-box, #mw-mf-page-left ul {
background: transparent;
}
#mw-mf-page-left ul:first-child {
border-bottom: none;
}
#mw-mf-page-left ul li {
border-top: 1px solid #3562B5;
border-bottom: 1px solid #3562B5;
background: transparent;
text-shadow: none;
}
#mw-mf-page-left ul li a, #mw-mf-page-left ul.hlist li a {
border: none;
color: #ffffff;
}
#mw-mf-page-left ul li:hover {
border-top: 1px solid #3562B5;
border-bottom: 1px solid #3562B5;
background: #7fa9ff;
}
#mw-mf-page-left ul.hlist li:hover {
border: none;
}
#mw-mf-page-left ul li:hover a, #mw-mf-page-left ul.hlist li:hover a {
color: #ffffff;
text-decoration: underline;
}
/***************************
/* Template example styles *
/***************************/
span.templateexample {
font-family: monospace;
}
span.templateexample span.templatelink {
font-weight: bold;
}
span.templateexample span.paramname {
}
span.templateexample span.paramvalue {
color: #888888;
font-style: italic;
}
/****************
/* Ambox styles *
/****************/
/* copyright images tweak */
.skin-hydradark .copyright-icon {
background-image: url("https://static.wikia.nocookie.net/commons_hydra/images/thumb/b/b6/Copyright.png/32px-Copyright.png");
background-size: 100%;
height: 32px;
width: 32px;
}
.ambox {
border: 3px solid #416eb6;
background: transparent;
color: #000000;
font-size: 95%;
margin: 0 auto 10px auto;
padding: 3px 6px 3px 16px;
width: 80%;
}
.ambox-gray {
box-shadow: 10px 0 0 #383838 inset;
}
.ambox.ambox-tiny {
font-size: 90%;
margin: 2px 0;
width: auto;
}
.ambox + .ambox {
margin-top: -10px;
}
.ambox-text {
padding: 0.25em 0.5em;
}
.ambox-image {
padding: 2px 0px 2px 0.5em;
text-align: center;
width: 60px;
}
.ambox-tiny .ambox-image {
padding: 2px 0.5em;
text-align: left;
width: auto;
}
/* Ambox colors */
.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 small text */
.amsmalltext {
font-size: smaller;
margin-left: 0.8em;
margin-top: 0.5em;
}
/******************
/* Infobox styles *
/******************/
.infoboxtable {
background-color: #f9f9f9;
border: 1px solid #aaaaaa;
color: #000000;
float: right;
font-size: 89%;
margin-bottom: 0.5em;
margin-left: 1em;
padding: 0.2em;
width: 300px;
}
.infoboxtable td {
vertical-align: top;
}
.infoboxtable td > div {
background-color: #f9f9f9;
border: 2px solid inherit;
border-radius: 5px;
font-weight: bold;
padding: 0.5px 7px;
text-align: right;
}
.infoboxname {
font-size: 110%;
font-weight: bold;
padding: 0.5em;
}
.infoboxdetails {
padding: 0em;
}
/********************
/* Navbox templates *
/********************/
table.navbox {
border: 1px solid #aaaaaa;
clear: both;
font-size: 88%;
margin: auto;
padding: 1px;
text-align: center;
width: 100%;
}
/* Border between adjacent navboxes */
table.navbox + table.navbox {
margin-top: -1px;
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
padding-left: 1em;
padding-right: 1em;
text-align: center;
}
.navbox-group {
font-weight: bold;
padding-left: 1em;
padding-right: 1em;
white-space: nowrap;
}
/* Base background */
.navbox, .navbox-subgroup {
background: #fdfdfd;
}
.navbox-list {
border-color: #fdfdfd; /* Must match background color */
}
/* Level 1 color */
.navbox-title,
table.navbox th {
background: #b6cfe5;
}
/* Level 2 styling */
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
background: #bed8ee;
}
/* Level 3 styling */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: #c4dff7;
}
/* Even row striping */
.navbox-even {
background: #f7f7f7;
}
/* Odd row striping */
.navbox-odd {
background: transparent;
}
.collapseButton {
font-weight: normal;
width: auto;
}
.navbox .collapseButton {
width: 6em;
}
.navbar {
font-size: 88%;
font-weight: normal;
}
.navbox .navbar {
font-size: 100%;
}
table.collapsed tr.collapsible {
display: none;
}
/* End of new Navbox styling */
/******************
/* General styles *
/******************/
.nomobile {
display: none;
}
/* start Module:TabsHeader styles */
.content .tabheadertop {
display: block;
margin: 0;
text-align: center;
border-spacing: 0;
line-height: 1.5em;
padding: 0.25em 0;
}
.tabheadertab {
display: inline-block;
padding: 0.25em 0.35em;
background-color: #ff8b00;
font-size: 90%;
line-height: 0.95em;
margin: 0 0.125em;
}
.tabheaderactive {
background-color: white;
border: solid 1px #777;
font-weight: bold;
}
.tabheaderspacer {
font-size: 90%;
line-height: 0;
display: none;
}
.correspondingpagebox {
margin: 0;
border: 1px dashed #777;
float: right;
padding: 0.25em 0.35em;
font-size: 90%;
display: inline-block;
line-height: 0.95em;
}
.tabheadertop tr, .tabheadertop tbody {
display: block;
}
/* end Module:TabsHeader styles */