MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
(53 intermediate revisions by the same user not shown) | |||
Line 9: | Line 9: | ||
/* Meta color scheme */ | /* Meta color scheme */ | ||
--fiendish-dark-purple: #5A1A45; | --fiendish-dark-purple: #5A1A45; | ||
--fiendish-purple: #993B80; | --fiendish-purple: #993B80; | ||
--fiendish-gold: #C8AA6E; | --fiendish-gold: #C8AA6E; | ||
Line 537: | Line 537: | ||
@font-face { | @font-face { | ||
font-family: 'Nunito'; | font-family: 'Nunito'; | ||
src: local("Nunito"), url('/ | src: local("Nunito"), url('https://mediawiki.s3.bhs.io.cloud.ovh.net/fonts/Nunito-Regular.woff2') format('woff2'); | ||
font-weight: 400; | font-weight: 400; | ||
font-display: swap; | font-display: swap; | ||
Line 544: | Line 544: | ||
@font-face { | @font-face { | ||
font-family: 'Nunito'; | font-family: 'Nunito'; | ||
src: local("Nunito Italic"), url('/ | src: local("Nunito Italic"), url('https://mediawiki.s3.bhs.io.cloud.ovh.net/fonts/Nunito-Italic.woff2') format('woff2'); | ||
font-weight: 400; | font-weight: 400; | ||
font-display: swap; | font-display: swap; | ||
Line 551: | Line 551: | ||
@font-face { | @font-face { | ||
font-family: 'Nunito'; | font-family: 'Nunito'; | ||
src: local("Nunito Bold"), url('/ | src: local("Nunito Bold"), url('https://mediawiki.s3.bhs.io.cloud.ovh.net/fonts/Nunito-Bold.woff2') format('woff2'); | ||
font-weight: 700; | font-weight: 700; | ||
font-display: swap; | font-display: swap; | ||
Line 558: | Line 558: | ||
@font-face { | @font-face { | ||
font-family: 'Nunito'; | font-family: 'Nunito'; | ||
src: local("Nunito Bold Italic"), url('/ | src: local("Nunito Bold Italic"), url('https://mediawiki.s3.bhs.io.cloud.ovh.net/fonts/Nunito-BoldItalic.woff2') format('woff2'); | ||
font-weight: 700; | font-weight: 700; | ||
font-display: swap; | font-display: swap; | ||
Line 659: | Line 659: | ||
@font-face { | @font-face { | ||
font-family: "Lovelo"; | font-family: "Lovelo"; | ||
src: local("Lovelo Black"), url("/ | src: local("Lovelo Black"), url("https://mediawiki.s3.bhs.io.cloud.ovh.net/fonts/Lovelo-Black.woff2") format("woff2"); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 1,388: | Line 1,388: | ||
.wikitable > * > tr > th { | .wikitable > * > tr > th { | ||
background-color: var(--wikitable-header-bg); | background-color: var(--wikitable-header-bg); | ||
color: var(--league-white); | |||
} | } | ||
Line 2,236: | Line 2,237: | ||
:root { | :root { | ||
--ooui-text: var(--league-white); /*Was black for unknown. Now white because of RecentChanges and Special:AllMessages. */ | --ooui-text: var(--league-white); /*Was black for unknown. Now white because of RecentChanges and Special:AllMessages. */ | ||
--ooui-interface: var(--body- | --ooui-interface: var(--body-dark); | ||
--ooui-interface-border: var(--body-border); | --ooui-interface-border: var(--body-border); | ||
--ooui-window-background: rgba(25, 25, 25, 0.5); | --ooui-window-background: rgba(25, 25, 25, 0.5); | ||
Line 3,696: | Line 3,697: | ||
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title { | .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title { | ||
color: var(--text-color); | color: var(--text-color) !important; | ||
} | } | ||
.mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters { | .mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters { | ||
color: var(--byline-color); | color: var(--byline-color) !important; | ||
} | } | ||
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle { | .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle { | ||
background-color: var(--ooui-interface); | background-color: var(--ooui-interface) !important; | ||
border-color: var(--ooui-interface-border); | border-color: var(--ooui-interface-border) !important; | ||
} | } | ||
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget { | .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget { | ||
border-color: var(--ooui-interface-border); | border-color: var(--ooui-interface-border) !important; | ||
} | } | ||
.mw-rcfilters-collapsed .mw-rcfilters-ui-filterTagMultiselectWidget { | .mw-rcfilters-collapsed .mw-rcfilters-ui-filterTagMultiselectWidget { | ||
border-bottom-color: var(--ooui-interface-border); | border-bottom-color: var(--ooui-interface-border) !important; | ||
} | } | ||
.mw-rcfilters-ui-menuSelectWidget-footer { | .mw-rcfilters-ui-menuSelectWidget-footer { | ||
background-color: var(--ooui-interface); | background-color: var(--ooui-interface) !important; | ||
border-color: var(--ooui-interface-border); | border-color: var(--ooui-interface-border) !important; | ||
} | } | ||
.mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget { | .mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget { | ||
color: var(--byline-color); | color: var(--byline-color) !important; | ||
} | } | ||
.mw-rcfilters-ui-tagItemWidget-popup-content { | .mw-rcfilters-ui-tagItemWidget-popup-content { | ||
color: var(--ooui-text); | color: var(--ooui-text) !important; | ||
} | } | ||
Line 3,734: | Line 3,735: | ||
.mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator { | .mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator { | ||
border-color: var(--sidebar); | border-color: var(--sidebar) !important; | ||
} | } | ||
Line 3,743: | Line 3,744: | ||
.mw-rcfilters-ui-watchlistTopSectionWidget-separator { | .mw-rcfilters-ui-watchlistTopSectionWidget-separator { | ||
border-color: var(--sidebar); | border-color: var(--sidebar) !important; | ||
} | } | ||
.mw-rcfilters-ui-itemMenuOptionWidget-header { | .mw-rcfilters-ui-itemMenuOptionWidget-header { | ||
border-bottom-color: var(--ooui-interface); | border-bottom-color: var(--ooui-interface) !important; | ||
background-color: var(--ooui-interface-border); | background-color: var(--ooui-interface-border) !important; | ||
} | } | ||
.mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk) { | .mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk) { | ||
border-bottom-color: var(--ooui-normal-border); | border-bottom-color: var(--ooui-normal-border) !important; | ||
} | } | ||
.mw-rcfilters-ui-itemMenuOptionWidget-label-title, | .mw-rcfilters-ui-itemMenuOptionWidget-label-title, | ||
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc { | .mw-rcfilters-ui-itemMenuOptionWidget-label-desc { | ||
color: var(--text-color); | color: var(--text-color) !important; | ||
} | } | ||
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected) { | .mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected) { | ||
background-color: var(--body-main); | background-color: var(--body-main) !important; | ||
} | } | ||
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-title, | .mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-title, | ||
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-desc { | .mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-desc { | ||
color: var(--subtle-color); | color: var(--subtle-color) !important; | ||
} | } | ||
.mw-rcfilters-ui-filterMenuSectionOptionWidget { | .mw-rcfilters-ui-filterMenuSectionOptionWidget { | ||
background-color: var(--body-mid); | background-color: var(--body-mid) !important; | ||
} | } | ||
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label { | .mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label { | ||
color: var(--ooui-text); | color: var(--ooui-text) !important; | ||
} | } | ||
.mw-rcfilters-ui-filterMenuHeaderWidget-title { | .mw-rcfilters-ui-filterMenuHeaderWidget-title { | ||
color: var(--ooui-text); | color: var(--ooui-text) !important; | ||
} | } | ||
Line 3,828: | Line 3,829: | ||
} | } | ||
#mw-indicator-mw-helplink a::before { | /*#mw-indicator-mw-helplink a::before { | ||
content: ''; | content: ''; | ||
margin-right: 5px; | margin-right: 5px; | ||
Line 3,836: | Line 3,837: | ||
height: 20px; | height: 20px; | ||
width: 20px; | width: 20px; | ||
}*/ | |||
.mw-helplink-icon { | |||
background-color: var(--text-color) !important; | |||
} | } | ||
Line 3,856: | Line 3,861: | ||
border: none; | border: none; | ||
border-radius: 0; | border-radius: 0; | ||
color: var(--text-color); | |||
height: 2.5rem; | height: 2.5rem; | ||
padding: 7px 2.15384615em 7px 8px; | padding: 7px 2.15384615em 7px 8px; | ||
Line 3,864: | Line 3,870: | ||
} | } | ||
.vector-search-box-input:focus { | .vector-search-box-input:focus { | ||
border-color: var(--league-gold); | |||
box-shadow: inset 0 0 0 1px var(--league-gold); | |||
} | |||
.vector-search-box-input:focus, .vector-search-box-inner:hover .vector-search-box-input:focus { | |||
border-color: var(--league-gold); | border-color: var(--league-gold); | ||
box-shadow: inset 0 0 0 1px var(--league-gold); | box-shadow: inset 0 0 0 1px var(--league-gold); | ||
Line 3,870: | Line 3,880: | ||
background-image: var(--searchbutton-icon) !important; | background-image: var(--searchbutton-icon) !important; | ||
} | } | ||
} | |||
.suggestions-special { | |||
background-color: var(--body-light); | |||
border-color: var(--body-border); | |||
} | |||
.suggestions-special .special-label { | |||
color: var(--text-color); | |||
} | |||
.suggestions-special .special-query { | |||
color: var(--text-color); | |||
font-weight: 700; | |||
} | |||
.suggestions-results { | |||
background-color: var(--body-light); | |||
border: none; | |||
} | |||
.suggestions-result { | |||
color: var(--text-color); | |||
} | |||
.suggestions-result-current { | |||
background-color: var(--body-dark); | |||
} | } | ||
Line 4,340: | Line 4,372: | ||
border-color: var(--infobox-accent); | border-color: var(--infobox-accent); | ||
} | } | ||
/* PortableInfobox Type-Specific CSS */ | |||
.portable-infobox.pi-type-conflict { | |||
width: 330px; | |||
} | } | ||
.pi- | .portable-infobox.pi-type-conflict .pi-image-thumnail { | ||
max-width: 100%; | |||
height: auto; | |||
} | } | ||
- | .pi-left-align { | ||
text-align: left; | |||
margin-left: 0 !important; | |||
} | } | ||
Line 4,889: | Line 4,922: | ||
border: 0; | border: 0; | ||
text-align: center; | text-align: center; | ||
} | |||
.discord-icon-background { | |||
width: 68px; | |||
height: 52px; | |||
background-size: 68px 52px !important; | |||
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1)); | |||
background: url('data:image/svg+xml,<svg width="71" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0)"><path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="%23ffffff"/></g><defs><clipPath id="clip0"><rect width="71" height="55" fill="white"/></clipPath></defs></svg>') no-repeat; | |||
} | } | ||
.mainpage-discord a { | .mainpage-discord a { | ||
display: flex; | display: flex; | ||
box-shadow: 9px 10px 5px -8px rgba(0,0,0,0.35); | /*box-shadow: 9px 10px 5px -8px rgba(0,0,0,0.35);*/ | ||
margin-bottom: 1em; | /*margin-bottom: 1em;*/ | ||
background: #5865f2; | background: #5865f2; | ||
padding: .5em 1em; | padding: .5em 1em; | ||
Line 4,901: | Line 4,942: | ||
text-decoration: none; | text-decoration: none; | ||
align-items: center; | align-items: center; | ||
gap: 0.75em; | /*gap: 0.75em;*/ | ||
} | } | ||
Line 5,003: | Line 5,044: | ||
/********************/ | /********************/ | ||
/* | /* OSRS Main Page */ | ||
/********************/ | /********************/ | ||
/* Template:Tt/Template:Texttip */ | :root { | ||
.tt-basic-tooltip { | --byline-arrow-filter: invert(29%) sepia(0%) saturate(376%) hue-rotate(172deg) brightness(87%) contrast(80%); | ||
padding: 2px 5px; | --tile-border-color: #cabe9b; | ||
border-radius: 4px; | --tile-background-color: #f9f3eb; | ||
background-color: var(--tooltip-bg-color); | --tile-link-button-color: #f5e9db; | ||
border: 1px solid #999; | --tile-link-button-highlight-color: #dfccb0; | ||
box-sizing: content-box; | --tile-dark-color: #fff; | ||
} | --tile-dark-bg: #5d6773; | ||
--tile-dark-link-color: #ccc; | |||
.blue-tooltip { | --tile-dark-byline-color: rgba(255, 255, 255, 0.7); | ||
border: 1px solid #999; | --tile-dark-header-color: #fff; | ||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); | } | ||
z-index: 9999; | |||
border-radius: 4px; | .tile { | ||
padding: 2px 5px; | background: var(--infobox-background); | ||
background-color: var(--tooltip-bg-color); | border: 1px solid var(--infobox-accent); | ||
} | box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); | ||
padding: 1.5em 2em 1em; | |||
/********************/ | max-width: 40em; | ||
/* Templates */ | } | ||
/********************/ | |||
.tile h2 { | |||
/* [[Template:Sm2]] - has to be here to prevent a FOUC */ | font-size: 1.4em; | ||
.inline-audio audio { | font-weight: bold; | ||
display: none; | border: none; | ||
} | margin: 0 0 0.4em; | ||
} | |||
/* Champion roster */ | |||
.champion_roster { | .tile .byline + h2 { | ||
line-height: 0; /* Kills any vertical spacing between rows */ | margin-top: -0.5em; | ||
margin: 0 !important; | } | ||
padding: .5em 0 !important; | |||
text-align: center; | .byline { | ||
} | font-size: 0.9em; | ||
.champion_roster li { | color: var(--byline-color); | ||
display: inline-block; | } | ||
margin: 1px; | |||
overflow: hidden; | .byline a { | ||
border-radius: 5px; | color: var(--byline-color); | ||
} | } | ||
.champion_roster li:hover { | |||
box-shadow: 0 0 3px #aac, 0 0 4px #111; | .tile-row { | ||
} | display: flex; | ||
flex-flow: row wrap; | |||
margin-bottom: 1em; | |||
/* Template:Audio page legend */ | } | ||
.lol-quotes-caption { | |||
display: flex; | .tile-halves { | ||
flex-wrap: wrap; | display: flex; | ||
justify-content: center; | flex-flow: row wrap; | ||
column-gap: 0.5em; | border: 1px solid var(--infobox-accent); | ||
font-weight: bold; | background: var(--infobox-background); | ||
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); | |||
} | |||
.tile-halves h2 { | |||
/*font-size: 1.4em; | |||
font-weight: bold;*/ | |||
border: none; | |||
margin: 0 0 0.4em; | |||
} | |||
.tile-halves .byline + h2 { | |||
margin-top: -0.5em; | |||
} | |||
.tile-top { | |||
width: 100%; | |||
padding: 1.3rem 1.5rem 0.6rem; | |||
} | |||
.tile-top.tile-image { | |||
display: flex; | |||
align-items: center; | |||
background-color: var(--infobox-background); | |||
overflow: hidden; | |||
padding: 0; | |||
height: 13vw; | |||
max-height: 12em; | |||
transition: 0.4s ease-out; | |||
} | |||
.tile-top.tile-image.blog-embed-image { | |||
display: block; | |||
} | |||
.tile-halves:hover .tile-top.tile-image img { | |||
transform: scale(1.1); | |||
transition: 0.5s ease-out; | |||
} | |||
.tile-top.tile-image span { | |||
width: 100%; | |||
} | |||
.tile-top.tile-image img { | |||
width: 100%; | |||
object-fit: cover; | |||
max-height: 200px; | |||
transition: 0.4s ease-out; | |||
} | |||
.tile-top a.external { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: start; | |||
} | |||
.mw-parser-output .tile-top a.external.text { | |||
padding: 0 !important; | |||
} | |||
.mw-parser-output .tile-top a.external { | |||
background: none !important; | |||
padding-left: 0 !important; | |||
} | |||
.tile-bottom { | |||
background: var(--infobox-background); | |||
border-top: 1px solid var(--infobox-accent); | |||
width: 100%; | |||
padding: 1rem 1.5rem 0.6rem; | |||
} | |||
.tile-bottom.link-button { | |||
align-self: flex-end; | |||
padding: 0; | |||
} | |||
.tile-bottom.link-button a { | |||
display: block; | |||
text-align: center; | |||
padding: 0.75em 1.5em 0.8em; | |||
text-decoration: none; | |||
} | |||
.tile-bottom.read-more { | |||
background: var(--tile-link-button-color); | |||
transition: 0.3s ease-out; | |||
} | |||
.tile-bottom.read-more a { | |||
color: var(--byline-color); | |||
font-weight: bold; | |||
text-align: right; | |||
} | |||
.tile-bottom.read-more:hover { | |||
background: var(--tile-link-button-highlight-color); | |||
} | |||
.tile-bottom.read-more:hover .arrow { | |||
transform: translateX(50%); | |||
} | |||
.tile-bottom.read-more .arrow { | |||
filter: var(--byline-arrow-filter); | |||
margin-left: 0.4em; | |||
transition: 0.3s ease-out; | |||
} | |||
.tile.oswf-day { | |||
margin-left: 0.5em; | |||
} | |||
.oswf-tile { | |||
margin: 1em; | |||
} | |||
.oswf-tile.oswf-complete { | |||
opacity: 0.65; | |||
} | |||
.oswf-tile .oswf-summary { | |||
font-size: 105%; | |||
line-height: 1.6; | |||
margin-top: -0.4em; | |||
} | |||
.oswf-tile .oswf-img { | |||
display: block; | |||
max-width: 75px; | |||
float: right; | |||
} | |||
.oswf-tile .oswf-img img { | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
.oswf-tile .oswf-guidance { | |||
border-top: 1px solid #eee; | |||
padding-top: 1em; | |||
} | |||
body.page-Main_Page .mw-parser-output { | |||
max-width: 75em; | |||
margin: 0 auto; | |||
} | |||
body.page-Main_Page.action-view .catlinks, | |||
body.page-Main_Page.action-view #contentSub, | |||
body.page-Main_Page.action-view #siteNotice { | |||
display: none; | |||
} | |||
.mainpage-header { | |||
display: flex; | |||
margin: 2.6em 1.75em 1.5em; | |||
} | |||
.mainpage-header .header-intro { | |||
flex: 2; | |||
} | |||
.mainpage-header .header-intro h1 { | |||
font-size: 2.5em; | |||
font-weight: bold; | |||
border: none; | |||
margin: 0 0 0.15em; | |||
} | |||
.mainpage-header .header-intro p { | |||
font-size: 1.1em; | |||
line-height: 1.7em; | |||
} | |||
.mainpage-header .header-stats { | |||
flex: 1; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
margin-top: -1em; | |||
} | |||
.mainpage-body { | |||
display: grid; | |||
grid-template-areas: "update update update" "content content content" "left left right"; | |||
gap: 0.9rem; | |||
grid-template-columns: repeat(3, 1fr); | |||
} | |||
.mainpage-body:has(.mainpage-event) { | |||
grid-template-areas: "event event event" "update update update" "content content content" "left left right"; | |||
} | |||
.mainpage-body h2 a { | |||
color: var(--text-color); | |||
} | |||
.mainpage-body .tile { | |||
padding-left: 1.75em; | |||
padding-right: 1.75em; | |||
max-width: 100%; | |||
} | |||
.mainpage-body .tile-row { | |||
width: 100%; | |||
margin-bottom: 0; | |||
} | |||
.mainpage-body .tile-row { | |||
display: grid; | |||
gap: 0.9rem; | |||
} | |||
.mainpage-left { | |||
grid-area: left; | |||
flex: 2; | |||
display: flex; | |||
flex-flow: column wrap; | |||
} | |||
.mainpage-left > * { | |||
margin: 0 0 0.9rem; | |||
} | |||
.mainpage-right { | |||
grid-area: right; | |||
flex: 1; | |||
display: flex; | |||
flex-flow: column wrap; | |||
} | |||
.mainpage-right > * { | |||
margin: 0 0 0.9rem; | |||
} | |||
.arrow { | |||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='10' viewBox='0 0 7 10'%3E%3Cpolyline fill='none' stroke='%23FFFFFF' stroke-width='2' points='1.775 1.55 5.225 4.996 1.775 8.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; | |||
display: inline-block; | |||
height: 0.7rem; | |||
width: 0.45rem; | |||
vertical-align: middle; | |||
} | |||
.arrow.dark { | |||
filter: invert(80%); | |||
} | |||
.mainpage-recent-updates { | |||
grid-area: update; | |||
grid-template-columns: repeat(3, 1fr); | |||
} | |||
.mainpage-recent-updates .tile-halves { | |||
flex: 1; | |||
align-content: flex-start; | |||
} | |||
.mainpage-recent-updates .tile-halves:hover .tile-top img { | |||
transform: scale(1.04); | |||
} | |||
.mainpage-recent-updates .tile-halves .tile-top span { | |||
width: 100%; | |||
} | |||
.mainpage-recent-updates .tile-bottom.link-button a { | |||
text-align: left; | |||
padding: 1rem 1.5rem 0.75rem; | |||
} | |||
.mainpage-recent-updates h2 { | |||
margin: -0.5em 0 0.3em; | |||
} | |||
.mainpage-recent-updates p:not(.byline) { | |||
font-size: 0.9em; | |||
line-height: 1.75em; | |||
color: var(--text-color); | |||
} | |||
.mainpage-contents { | |||
grid-area: content; | |||
grid-template-columns: repeat(6, 1fr); | |||
} | |||
.mainpage-contents .tile-halves { | |||
flex: 1; | |||
} | |||
.mainpage-contents .tile-top { | |||
position: relative; | |||
} | |||
.mainpage-contents h2 { | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.mainpage-contents .tile-bottom.link-button a { | |||
padding: 0.75em 0.2em; | |||
} | |||
.mainpage-skills ul { | |||
columns: 3 9em; | |||
margin: 1em 0.7em 0.7em 1em; | |||
} | |||
.mainpage-skills li { | |||
display: flex; | |||
margin-bottom: 0.29em; | |||
} | |||
.mainpage-skills li span a { | |||
border-radius: 2px; | |||
padding: 4px; | |||
width: 25px; | |||
height: 25px; | |||
text-align: center; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.mainpage-skills li > a:last-child { | |||
flex: 1; | |||
display: flex; | |||
align-items: center; | |||
font-weight: bold; | |||
padding-left: 0.7em; | |||
text-decoration: none; | |||
} | |||
.mainpage-skills li:hover a:first-child { | |||
border-radius: 2px 0 0 2px; | |||
} | |||
.mainpage-skills li:hover > a:last-child { | |||
color: rgba(255, 255, 255, 0.9); | |||
border-radius: 0 2px 2px 0; | |||
} | |||
.skill-agility span a, | |||
.skill-melee span a { | |||
background: #bc483d; | |||
} | |||
.skill-agility:hover > a:last-child, | |||
.skill-melee:hover > a:last-child { | |||
background: #932419; | |||
} | |||
.skill-ranged span a { | |||
background: #748d36; | |||
} | |||
.skill-ranged:hover > a:last-child { | |||
background: #4c6215; | |||
} | |||
.skill-magic span a { | |||
background: #6274ab; | |||
} | |||
.skill-magic:hover > a:last-child { | |||
background: #304791; | |||
} | |||
.skill-fishing span a, | |||
.skill-fletching span a { | |||
background: #3e8e9a; | |||
} | |||
.skill-fishing:hover > a:last-child, | |||
.skill-fletching:hover > a:last-child { | |||
background: #1a6671; | |||
} | |||
.skill-cooking span a, | |||
.skill-thieving span a { | |||
background: #91689e; | |||
} | |||
.skill-cooking:hover > a:last-child, | |||
.skill-thieving:hover > a:last-child { | |||
background: #713684; | |||
} | |||
.skill-farming span a, | |||
.skill-woodcutting span a { | |||
background: #59924f; | |||
} | |||
.skill-farming:hover > a:last-child, | |||
.skill-woodcutting:hover > a:last-child { | |||
background: #306f25; | |||
} | |||
.skill-mining span a { | |||
background: #6385a8; | |||
} | |||
.skill-mining:hover > a:last-child { | |||
background: #315f8d; | |||
} | |||
.skill-smithing span a { | |||
background: #d2b244; | |||
} | |||
.skill-smithing:hover > a:last-child { | |||
background: #b69213; | |||
} | |||
.popular-pages ul { | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
grid-gap: 0.6em; | |||
margin: 1em 0 0.7em 0; | |||
} | |||
.mp-popular-page-light { | |||
display: flex; | |||
align-items: center; | |||
background-color: var(--infobox-accent); | |||
transition: 100ms; | |||
} | |||
.mp-popular-page-light a { | |||
flex: 1; | |||
display: block; | |||
color: var(--text-color) !important; | |||
font-weight: bold; | |||
text-align: center; | |||
text-decoration: none; | |||
padding: 0.7em 1em; | |||
} | |||
.mp-popular-page-light:hover { | |||
filter: brightness(115%); | |||
transition: 100ms; | |||
} | |||
.mainpage-discord { | |||
border: none; | |||
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3); | |||
} | |||
.mainpage-discord .tile-top { | |||
display: flex; | |||
align-items: center; | |||
background: #5865f2; | |||
padding: 1em 1.75em; | |||
} | |||
.mainpage-discord .tile-top a { | |||
flex: 1; | |||
position: relative; | |||
text-decoration: none; | |||
} | |||
.mainpage-discord .tile-top a:hover .arrow { | |||
transform: translateX(50%); | |||
} | |||
.mainpage-discord .tile-bottom { | |||
background: #525ee0; | |||
border: none; | |||
padding: 1em 1.75em; | |||
} | |||
.mainpage-discord .tile-bottom p { | |||
color: #fff; | |||
font-weight: bold; | |||
font-size: 0.9em; | |||
text-align: center; | |||
text-transform: uppercase; | |||
letter-spacing: 0.03em; | |||
margin: 0; | |||
} | |||
.mainpage-discord .partner-icon { | |||
margin-right: 0.75em; | |||
} | |||
.mainpage-discord .server-name { | |||
color: #fff; | |||
font-weight: bold; | |||
font-size: 1.25em; | |||
margin: 0.5em 0 -0.15em; | |||
} | |||
.mainpage-discord .server-tagline { | |||
color: rgba(255, 255, 255, 0.9); | |||
margin-bottom: 0.5em; | |||
} | |||
.mainpage-discord .arrow { | |||
position: absolute; | |||
top: calc(50% - .5em); | |||
right: 0; | |||
height: 1em; | |||
width: 0.7em; | |||
background-size: 0.7em 1em; | |||
transition: 0.3s ease-out; | |||
} | |||
.mainpage-twitter { | |||
border: none; | |||
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3); | |||
} | |||
.mainpage-twitter .tile-top { | |||
display: flex; | |||
align-items: center; | |||
background: #15202b; | |||
padding: 1em 1.75em; | |||
} | |||
.mainpage-twitter .tile-top a { | |||
flex: 1; | |||
position: relative; | |||
text-decoration: none; | |||
} | |||
.mainpage-twitter .tile-top a:hover .arrow { | |||
transform: translateX(50%); | |||
} | |||
.mainpage-twitter .tile-bottom { | |||
background: #121c26; | |||
border: none; | |||
padding: 1em 1.75em; | |||
} | |||
.mainpage-twitter .tile-bottom p { | |||
color: #fff; | |||
font-weight: bold; | |||
font-size: 0.9em; | |||
text-align: center; | |||
text-transform: uppercase; | |||
letter-spacing: 0.03em; | |||
margin: 0; | |||
} | |||
.mainpage-twitter .twitter-logo { | |||
margin-right: 0.75em; | |||
} | |||
.mainpage-twitter .twitter-name { | |||
color: #fff; | |||
font-weight: bold; | |||
font-size: 1.25em; | |||
margin: 0.5em 0 -0.15em; | |||
} | |||
.mainpage-twitter .twitter-tagline { | |||
color: rgba(255, 255, 255, 0.9); | |||
margin-bottom: 0.5em; | |||
} | |||
.mainpage-twitter .arrow { | |||
position: absolute; | |||
top: calc(50% - .5em); | |||
right: 0; | |||
height: 1em; | |||
width: 0.7em; | |||
background-size: 0.7em 1em; | |||
transition: 0.3s ease-out; | |||
} | |||
.mainpage-valence { | |||
border: none; | |||
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3); | |||
} | |||
.mainpage-valence .tile-top { | |||
display: flex; | |||
align-items: center; | |||
background: #6a882f; | |||
padding: 1em 1.75em; | |||
} | |||
.mainpage-valence .tile-top a { | |||
flex: 1; | |||
position: relative; | |||
text-decoration: none; | |||
} | |||
.mainpage-valence .tile-top a:hover .arrow { | |||
transform: translateX(50%); | |||
} | |||
.mainpage-valence .tile-bottom { | |||
background: #2d4303; | |||
border: none; | |||
padding: 1em 1.75em; | |||
} | |||
.mainpage-valence .tile-bottom p { | |||
color: #fff; | |||
font-weight: bold; | |||
font-size: 0.9em; | |||
text-align: center; | |||
text-transform: uppercase; | |||
letter-spacing: 0.03em; | |||
margin: 0; | |||
} | |||
.mainpage-valence .valence-logo { | |||
margin-right: 0.75em; | |||
} | |||
.mainpage-valence .valence-name { | |||
color: #fff; | |||
font-weight: bold; | |||
font-size: 1.25em; | |||
margin: 0.5em 0 -0.15em; | |||
} | |||
.mainpage-valence .valence-tagline { | |||
color: rgba(255, 255, 255, 0.9); | |||
margin-bottom: 0.5em; | |||
} | |||
.mainpage-valence .arrow { | |||
position: absolute; | |||
top: calc(50% - .5em); | |||
right: 0; | |||
height: 1em; | |||
width: 0.7em; | |||
background-size: 0.7em 1em; | |||
transition: 0.3s ease-out; | |||
} | |||
.mainpage-editing { | |||
border: none; | |||
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3); | |||
} | |||
.mainpage-editing .tile-top { | |||
background: #438ab5; | |||
} | |||
.mainpage-editing .tile-bottom { | |||
background: #3980ab; | |||
border: none; | |||
padding: 0.8rem 1.5rem 0.4rem; | |||
} | |||
.mainpage-editing h2, | |||
.mainpage-editing a { | |||
color: #fff; | |||
} | |||
.mainpage-editing p { | |||
color: rgba(255, 255, 255, 0.9); | |||
} | |||
.mainpage-editing ul { | |||
list-style-image: url('filepath://Transparent-chevron.svg'); | |||
} | |||
.mainpage-poll .ajaxpoll { | |||
border: none; | |||
background: none; | |||
padding: 0; | |||
width: auto; | |||
} | |||
.mainpage-trailblazer { | |||
grid-area: event; | |||
} | |||
.mainpage-trailblazer .tb-logo { | |||
margin-bottom: 0.9rem; | |||
} | |||
.mainpage-trailblazer .tile-row { | |||
grid-template-columns: repeat(4, 1fr); | |||
} | |||
@media only screen and (max-width: 720px) { | |||
.mainpage-trailblazer .tile-row { | |||
grid-template-columns: none; | |||
} | |||
.mainpage-trailblazer .tile-row .tile-top { | |||
height: 20vw; | |||
min-height: 9em; | |||
} | |||
} | |||
@media only screen and (max-width: 1200px) { | |||
.mainpage-contents { | |||
grid-template-columns: repeat(3, 1fr); | |||
} | |||
} | |||
@media only screen and (max-width: 1000px) { | |||
.mainpage-body { | |||
grid-template-areas: "update" "content" "left" "right"; | |||
grid-template-columns: 1fr; | |||
} | |||
.mainpage-body:has(.mainpage-event) { | |||
grid-template-areas: "event" "update" "content" "left" "right"; | |||
} | |||
.mainpage-recent-updates { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
.mainpage-recent-updates .tile-halves:last-child { | |||
display: none; | |||
} | |||
.mainpage-recent-updates .tile-halves:hover .tile-top img { | |||
transform: scale(1.04); | |||
} | |||
.mainpage-recent-updates .tile-top { | |||
height: 18vw; | |||
min-height: 9em; | |||
} | |||
.mainpage-header .header-stats { | |||
display: none; | |||
} | |||
.mainpage-left > *:last-child, | |||
.mainpage-right > *:last-child { | |||
margin-bottom: 0; | |||
} | |||
.popular-pages ul { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
} | |||
@media only screen and (max-width: 720px) { | |||
.mainpage-recent-updates { | |||
grid-template-columns: none; | |||
} | |||
.mainpage-recent-updates .tile-halves:last-child { | |||
display: flex; | |||
} | |||
.mainpage-contents { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
} | |||
/********************/ | |||
/* Tooltips */ | |||
/********************/ | |||
/* Template:Tt/Template:Texttip */ | |||
.tt-basic-tooltip { | |||
padding: 2px 5px; | |||
border-radius: 4px; | |||
background-color: var(--tooltip-bg-color); | |||
border: 1px solid #999; | |||
box-sizing: content-box; | |||
} | |||
.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); | |||
} | |||
/********************/ | |||
/* Templates */ | |||
/********************/ | |||
/* [[Template:Sm2]] - has to be here to prevent a FOUC */ | |||
.inline-audio audio { | |||
display: none; | |||
} | |||
/* 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; | |||
} | |||
/* Template:Audio page legend */ | |||
.lol-quotes-caption { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
column-gap: 0.5em; | |||
font-weight: bold; | |||
} | } | ||
Line 5,564: | Line 6,419: | ||
} | } | ||
} | |||
figure[data-item-name="pixelated"] > a > img { | |||
-ms-interpolation-mode: nearest-neighbor; | |||
image-rendering: -moz-crisp-edges; | |||
image-rendering: -o-crisp-edges; | |||
image-rendering: -webkit-optimize-contrast; | |||
image-rendering: pixelated; | |||
image-rendering: crisp-edges; | |||
width: 256px; | |||
height: 256px; | |||
} | } | ||