MediaWiki:Common.css: Difference between revisions
From Ephinea PSO Wiki
No edit summary |
No edit summary |
||
(102 intermediate revisions by 6 users not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
@import url("/index.php?title=MediaWiki:StickyTableHeaders.css&action=raw&ctype=text/css"); | @import url("/index.php?title=MediaWiki:StickyTableHeaders.css&action=raw&ctype=text/css"); | ||
@import url("/index.php?title=MediaWiki:Navbox.css&action=raw&ctype=text/css"); | @import url("/index.php?title=MediaWiki:Navbox.css&action=raw&ctype=text/css"); | ||
.mw-body h3 { | |||
font-weight:bold; | |||
} | |||
.cm-mw-matchingbracket { | |||
background-color:#232a35 !important; | |||
box-shadow:inset 0 0 1px 1px #232a35 !important; | |||
font-weight:bold !important; | |||
} | |||
/* Main page related */ | |||
/** Header related stuff **/ | |||
.mainpage-header { | |||
display: flex; | |||
margin: 0em 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-header .header-stats ul { | |||
list-style: none; | |||
} | |||
.mw-body .mw-parser-output h1.buttontext::after, | |||
.mw-body .mw-parser-output h2.buttontext::after { | |||
border:none; | |||
} | |||
/** Mainpage Body **/ | |||
.mainpage-body { | |||
display: flex; | |||
flex-flow: row wrap; | |||
} | |||
.mainpage-body .tile { | |||
padding-left: 1.75em; | |||
padding-right: 1.75em; | |||
max-width: 100%; | |||
} | |||
.mainpage-body .tile-row { | |||
width:100%; | |||
margin-bottom: 0.9rem; | |||
} | |||
/** Mainpage left **/ | |||
.mainpage-left { | |||
flex: 2; | |||
display: flex; | |||
flex-flow: column wrap; | |||
margin-right: 0.9rem; | |||
} | |||
.mainpage-left > * { | |||
margin: 0 0 0.9rem; | |||
} | |||
.mainpage-popular .tile-halves { | |||
display: flex; | |||
} | |||
.mainpage-contents .tile-below { | |||
flex: 1; | |||
margin-right: 0.9rem; | |||
} | |||
.mainpage-contents .tile-below:last-child { | |||
margin-right: 0; | |||
} | |||
.tile-below { | |||
display: flex; | |||
flex-flow: row wrap; | |||
border: 1px solid var(--tile-border-color); | |||
background: var(--tile-background-color); | |||
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); | |||
} | |||
.tile-below h2 { | |||
font-size: 1.4em; | |||
font-weight: bold; | |||
border: none; | |||
margin: 0 0 0.4em; | |||
} | |||
.tile-below .byline + h2 { | |||
margin-top: -0.5em; | |||
} | |||
.tile-popular { | |||
width: 100%; | |||
padding: 1.3rem 1.5rem 0.6rem; | |||
} | |||
/* Homepage Buttons effects (main content grid) */ | |||
.home-tile { | |||
position: relative; | |||
display: inline-block; | |||
height: 105px; | |||
width: 105px; | |||
margin: 1px; | |||
overflow: hidden; | |||
border-radius: 10px; | |||
background-color: rgba(0, 0, 0, 0.2); | |||
} | |||
.home-tile img { | |||
position: absolute; | |||
width: 105px; | |||
height: 105px; | |||
transition: 0.3s; | |||
} | |||
.home-tile .home-tile-silver img { | |||
top: 0; | |||
z-index: 1; | |||
} | |||
.home-tile .home-tile-gold img { | |||
bottom: 0; | |||
background: radial-gradient(circle at 50% 75%, #727272 0, #151515 50%); | |||
z-index: 2; | |||
opacity: 0; | |||
} | |||
.home-tile .home-tile-link { | |||
position: absolute; | |||
bottom: 0; | |||
width: 100%; | |||
background-color: rgba(0, 42, 40, 0.8); | |||
text-align: center; | |||
color: #ffffff; | |||
font-size: 12px; | |||
z-index: 4; | |||
font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif; | |||
} | |||
.home-tile:hover .home-tile-gold img { | |||
opacity: 1; | |||
} | |||
/** Popular pages **/ | |||
.popular-pages ul { | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
grid-gap: 0.6em; | |||
margin: 1em 0 0.7em 0; | |||
} | |||
@media screen and (max-width: 1000px) { | |||
.popular-pages ul { | |||
grid-template-columns: repeat(2, 1fr); | |||
}} | |||
.mp-popular-page-light { | |||
display: flex; | |||
align-items: center; | |||
list-style: none; | |||
background-color: rgba(0, 0, 0, 0.2); | |||
} | |||
.mp-popular-page-light a, .mp-popular-page-light a:visited { | |||
flex: 1; | |||
display: block; | |||
font-weight: bold; | |||
text-align: center; | |||
text-decoration: none; | |||
padding: 0.7em 1em; | |||
color: white; | |||
} | |||
.mp-popular-page-light a:hover, .mp-popular-page-light a:visited:hover { | |||
color: black; | |||
box-shadow: inset 0 0 3px 4px rgba(0,0,0,0.3); | |||
mix-blend-mode: hard-light; | |||
background-color: rgba(255, 158, 77, 0.88); | |||
} | |||
/** Mainpage right **/ | |||
.mainpage-right { | |||
flex: 1; | |||
display: flex; | |||
flex-flow: column wrap; | |||
margin-right: 0.9rem; | |||
} | |||
.mainpage-right > * { | |||
margin: 0 0 0.9rem; | |||
} | |||
.mainpage-kireek { | |||
position: relative; | |||
display: inline-block; | |||
overflow: hidden; | |||
background: linear-gradient(to bottom,rgba(255,255,255,0),#63347b 255px),url(https://wiki.pioneer2.net/images/d/db/HUcast_home.png) right top no-repeat #63347b; | |||
border: 1px solid #879978; | |||
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3); | |||
} | |||
.mainpage-kireek-text { | |||
background-color: rgba(40, 30, 40, 0.75); | |||
} | |||
h3.kireek-header { | |||
margin: 10px 0 0 20px; | |||
} | |||
.kireek { | |||
margin:10px 30px 0 30px; | |||
padding-bottom:10px; | |||
padding-top:10px; | |||
} | |||
/** Discord button **/ | |||
.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: #ffffff; | |||
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: #ffffff; | |||
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-discord .tile-top a:hover .arrow { | |||
transform: translateX(50%); | |||
} | |||
.tile-top { | |||
width: 100%; | |||
padding: 1.3rem 1.5rem 0.6rem; | |||
} | |||
.tile-top.tile-image { | |||
display: flex; | |||
align-items: center; | |||
overflow: hidden; | |||
padding: 0; | |||
max-height: 12em; | |||
transition: 0.4s ease-out; | |||
} | |||
.tile-top.tile-image:hover img { | |||
transform: scale(1.1); | |||
transition: 0.5s ease-out; | |||
} | |||
.tile-top.tile-image a { | |||
width: 100%; | |||
} | |||
.tile-top.tile-image img { | |||
width: 100%; | |||
object-fit: cover; | |||
max-height: 200px; | |||
transition: 0.4s ease-out; | |||
} | |||
.tile-bottom { | |||
width: 100%; | |||
padding: 1rem 1.5rem 0.6rem; | |||
border:none; | |||
} | |||
.tile-bottom.link-button { | |||
align-self: flex-end; | |||
padding: 0; | |||
background: #B41E2B; | |||
border:none; | |||
} | |||
.tile-bottom.link-button a { | |||
display: block; | |||
text-align: center; | |||
padding: 0.75em 1.5em 0.8em; | |||
text-decoration: none; | |||
border:none; | |||
} | |||
.tile-bottom.read-more { | |||
transition: 0.3s ease-out; | |||
} | |||
.tile-bottom.read-more a { | |||
font-weight: bold; | |||
text-align: right; | |||
} | |||
.tile-bottom.read-more:hover .arrow { | |||
transform: translateX(50%); | |||
} | |||
.tile-bottom.read-more .arrow { | |||
filter: invert(36%) sepia(9%) saturate(463%) hue-rotate(175deg) brightness(94%) contrast(80%); | |||
margin-left: 0.4em; | |||
transition: 0.3s ease-out; | |||
} | |||
/** Misc (I forgot what this is for) **/ | |||
@media only screen and (min-width: 100rem) { | |||
.mainpage-header .header-intro { | |||
margin-right: 2em; | |||
} | |||
.mainpage-contents .line-break { | |||
display: none; | |||
} | |||
.themainpage { | |||
width:82rem; | |||
margin: 0 auto; | |||
} | |||
} | |||
@media only screen and (min-width: 66rem) and (max-width: 72.999rem) { | |||
.mainpage-header .header-stats, | |||
.mainpage-articleoftheweek { | |||
display: none; | |||
} | |||
} | |||
@media only screen and (min-width: 73rem) and (max-width: 99.999rem) { | |||
.mainpage-header .header-stats, | |||
.mainpage-contents .line-break { | |||
display: none; | |||
} | |||
} | |||
@media only screen and (max-width: 65.999rem) { | |||
.mainpage-contents .tile-halves:nth-child(1), | |||
.mainpage-contents .tile-halves:nth-child(2), | |||
.mainpage-contents .tile-halves:nth-child(3) { | |||
margin-bottom: 0.9rem; | |||
} | |||
.mainpage-contents .line-break { | |||
width: 100%; | |||
} | |||
.mainpage-header .header-stats, | |||
.mainpage-articleoftheweek { | |||
display: none; | |||
} | |||
} | |||
.oo-ui-labelWidget.oo-ui-inline-help, | |||
.editOptions { | |||
color:#eee; | |||
} | |||
.wikitable tr:hover { | |||
background-color:#272C33; | |||
} | |||
.jquery-tablesorter > thead, | |||
.mw-sticky-header > thead { | |||
position: -webkit-sticky; | |||
position: sticky; | |||
top: 0; | |||
} | |||
@media screen and (max-width: 1099px) and (min-width: 851px) { | |||
.skin-timeless .jquery-tablesorter > thead, | |||
.skin-timeless .mw-sticky-header > thead { | |||
top: 3.5em; | |||
} | |||
} | |||
@media screen and (min-width: 1100px) { | |||
.skin-timeless .jquery-tablesorter > thead, | |||
.skin-timeless .mw-sticky-header > thead { | |||
top: 3.5em; | |||
} | |||
} | |||
.jquery-tablesorter > tfoot, | |||
.mw-sticky-header > tfoot { | |||
position: -webkit-sticky; | |||
position: sticky; | |||
bottom: 0; | |||
} | |||
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort { | |||
background-position-x: center; | |||
background-position-y: bottom 3px; | |||
padding-bottom:12px; | |||
padding-right:0.5em; | |||
} | |||
ul#filetoc, .toc, .toccolours, .mw-warning { | |||
background: #323942; | |||
border: solid 1px #465160; | |||
} | |||
@keyframes unseen-fadeout-to-unread { | |||
0% { background-color: none; } | |||
100% { background-color: none; } | |||
} | |||
@keyframes olga2 { | |||
0% { color: #ffae35; } | |||
25% { color: #f8a531; } | |||
50% { color: #bb5313; } | |||
75% { color: #f19b23; } | |||
100% { color: #ffae35; } | |||
} | |||
code, pre, .mw-code { | |||
color: #eee; | |||
background: #323942; | |||
} | |||
.talkbox { | |||
width: 65%; | |||
margin-left: auto; | |||
margin-right: auto; | |||
margin-top: 0.5em; | |||
margin-bottom: 0.5em; | |||
border: none; | |||
color:#eee; | |||
background-color: #232A35; | |||
} | |||
.talkbox .th { | |||
background-color: #465160; | |||
color:#eee; | |||
} | |||
.diff-addedline .diffchange { | |||
color: #000; | |||
} | |||
.diff-deletedline .diffchange { | |||
color: #000; | |||
} | |||
.diff-context, | |||
#pagehistory li.selected { | |||
background-color: #323942; | |||
color: #eee; | |||
} | |||
.mw-echo-ui-notificationItemWidget-unread:hover { | |||
background-color: rgba(41,98,204,0.1); | |||
} | |||
.mw-echo-ui-notificationItemWidget-content-actions-timestamp, | |||
.oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label, | |||
.mw-echo-ui-notificationItemWidget-content-message-header { | |||
color:#eee; | |||
} | |||
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper { | |||
background: none; | |||
box-shadow: none; | |||
} | |||
.mw-echo-ui-notificationItemWidget:last-child, | |||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body > .mw-echo-ui-notificationsListWidget > .mw-echo-ui-notificationItemWidget, | |||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body > .mw-echo-ui-notificationsListWidget > .mw-echo-ui-notificationItemWidget:last-child, | |||
.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected { | |||
background-color: #232A35; | |||
} | |||
.mw-echo-ui-placeholderItemWidget { | |||
background-color: #2C343F; | |||
} | |||
.mw-body li.gallerybox div.thumb { | |||
background: none; | |||
border: none; | |||
} | |||
#p-logo-text a, | |||
#content h1, | #content h1, | ||
#content h2, | #content h2, | ||
Line 8: | Line 573: | ||
#content h4, | #content h4, | ||
#content h5 { | #content h5 { | ||
font-family: | font-family: sans-serif; | ||
line-height: 1.3; | |||
} | } | ||
Line 20: | Line 586: | ||
margin-bottom: 0.5em; | margin-bottom: 0.5em; | ||
border: none; | border: none; | ||
border-left: 15px solid # | border-left: 15px solid #3366cc; | ||
background-color: # | background-color: #232a35; | ||
color:#eee; | color:#eee; | ||
} | } | ||
.messagebox.viridia-left { | |||
border-left: 15px solid #00ae6b; | |||
} | |||
.messagebox.greenill-left { | |||
border-left: 15px solid #73fb42; | |||
} | |||
.messagebox.skyly-left { | |||
border-left: 15px solid #6bfbff; | |||
} | |||
.messagebox.bluefull-left { | |||
border-left: 15px solid #4292ff; | |||
} | |||
.messagebox.purplenum-left { | |||
border-left: 15px solid #ce04ff; | |||
} | |||
.messagebox.pinkal-left { | |||
border-left: 15px solid #ff8ac5; | |||
} | |||
.messagebox.redria-left { | |||
border-left: 15px solid #f71019; | |||
} | |||
.messagebox.oran-left { | |||
border-left: 15px solid #ff9219; | |||
} | |||
.messagebox.yellowboze-left { | |||
border-left: 15px solid #f7fb19; | |||
} | |||
.messagebox.whitill-left { | |||
border-left: 15px solid #f7fbf7; | |||
} | |||
.messagebox, .errorbox, .warningbox, .successbox { | .messagebox, .errorbox, .warningbox, .successbox { | ||
Line 90: | Line 698: | ||
.psoStyle { | .psoStyle { | ||
box-shadow: | |||
box-shadow: | 0 0 0 1px #9aaaaa, | ||
0 0 0 2px #000; | |||
border-radius: 10px; | border-radius: 10px; | ||
font-size: 95%; | font-size: 95%; | ||
Line 111: | Line 720: | ||
flex: 1; | flex: 1; | ||
text-align: center; | text-align: center; | ||
font-size: | font-size: x-small; | ||
} | |||
.uncoloredClass { | |||
color: black; | |||
border: 1px solid black; | |||
box-shadow: inset 0 0 3px 4px rgba(0,0,0,0.3); | |||
mix-blend-mode: hard-light; | |||
padding: 4px; | |||
flex: 1; | |||
text-align: center; | |||
font-size: x-small; | |||
background-color: #eee; | |||
} | } | ||
Line 167: | Line 788: | ||
} | } | ||
.unequippable { | .unequippable, .grey, .gray { | ||
color: #909090; | color: #909090; | ||
} | } | ||
.normal { | .normal, .white { | ||
color: white; | color: white; | ||
} | } | ||
.attributes { | .attributes, .green { | ||
color: #61e853; | color: #61e853; | ||
} | } | ||
.untekked { | .untekked, .cyan, .blue { | ||
color: #00fffc; | color: #00fffc; | ||
} | } | ||
.rare { | .rare, .yellow { | ||
color: #ffea00; | color: #ffea00; | ||
} | } | ||
.es { | .es, .red { | ||
color: #fe3c28; | color: #fe3c28; | ||
} | |||
.native { | |||
color: #a5ffaa; | |||
} | |||
.abeast, .ab { | |||
color: #f5ff99; | |||
} | |||
.machine { | |||
color: #ff958b; | |||
} | |||
.dark { | |||
color: #e1a9ff; | |||
} | |||
.olga2, .glow { | |||
animation-name: olga2; | |||
animation-duration: 3.3s; | |||
animation-timing-function: linear; | |||
animation-iteration-count: infinite; | |||
animation-fill-mode: forwards; | |||
} | |||
.viridia { | |||
background-color: #00ae6b; | |||
} | |||
.greenill { | |||
background-color: #73fb42; | |||
} | |||
.skyly { | |||
background-color: #6bfbff; | |||
} | |||
.bluefull { | |||
background-color: #4292ff; | |||
} | |||
.purplenum { | |||
background-color: #ce04ff; | |||
} | |||
.pinkal { | |||
background-color: #ff8ac5; | |||
} | |||
.redria { | |||
background-color: #f71019; | |||
} | |||
.oran { | |||
background-color: #ff9219; | |||
} | |||
.yellowboze { | |||
background-color: #f7fb19; | |||
} | |||
.whitill { | |||
background-color: #f7fbf7; | |||
} | |||
.screen-blend img { | |||
mix-blend-mode: screen; | |||
} | |||
.hunt-list > p:nth-child(2) { | |||
margin: 1em 0; | |||
} | |||
.hunt-list > p { | |||
margin: 0; | |||
} | |||
.hunt-list > dl > dd { | |||
margin-bottom: 0; | |||
} | |||
.noPadding td { | |||
padding: 0; | |||
} | } |
Latest revision as of 09:27, 20 August 2023
/* CSS placed here will be applied to all skins */ @import url("/index.php?title=MediaWiki:StickyTableHeaders.css&action=raw&ctype=text/css"); @import url("/index.php?title=MediaWiki:Navbox.css&action=raw&ctype=text/css"); .mw-body h3 { font-weight:bold; } .cm-mw-matchingbracket { background-color:#232a35 !important; box-shadow:inset 0 0 1px 1px #232a35 !important; font-weight:bold !important; } /* Main page related */ /** Header related stuff **/ .mainpage-header { display: flex; margin: 0em 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-header .header-stats ul { list-style: none; } .mw-body .mw-parser-output h1.buttontext::after, .mw-body .mw-parser-output h2.buttontext::after { border:none; } /** Mainpage Body **/ .mainpage-body { display: flex; flex-flow: row wrap; } .mainpage-body .tile { padding-left: 1.75em; padding-right: 1.75em; max-width: 100%; } .mainpage-body .tile-row { width:100%; margin-bottom: 0.9rem; } /** Mainpage left **/ .mainpage-left { flex: 2; display: flex; flex-flow: column wrap; margin-right: 0.9rem; } .mainpage-left > * { margin: 0 0 0.9rem; } .mainpage-popular .tile-halves { display: flex; } .mainpage-contents .tile-below { flex: 1; margin-right: 0.9rem; } .mainpage-contents .tile-below:last-child { margin-right: 0; } .tile-below { display: flex; flex-flow: row wrap; border: 1px solid var(--tile-border-color); background: var(--tile-background-color); box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); } .tile-below h2 { font-size: 1.4em; font-weight: bold; border: none; margin: 0 0 0.4em; } .tile-below .byline + h2 { margin-top: -0.5em; } .tile-popular { width: 100%; padding: 1.3rem 1.5rem 0.6rem; } /* Homepage Buttons effects (main content grid) */ .home-tile { position: relative; display: inline-block; height: 105px; width: 105px; margin: 1px; overflow: hidden; border-radius: 10px; background-color: rgba(0, 0, 0, 0.2); } .home-tile img { position: absolute; width: 105px; height: 105px; transition: 0.3s; } .home-tile .home-tile-silver img { top: 0; z-index: 1; } .home-tile .home-tile-gold img { bottom: 0; background: radial-gradient(circle at 50% 75%, #727272 0, #151515 50%); z-index: 2; opacity: 0; } .home-tile .home-tile-link { position: absolute; bottom: 0; width: 100%; background-color: rgba(0, 42, 40, 0.8); text-align: center; color: #ffffff; font-size: 12px; z-index: 4; font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif; } .home-tile:hover .home-tile-gold img { opacity: 1; } /** Popular pages **/ .popular-pages ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.6em; margin: 1em 0 0.7em 0; } @media screen and (max-width: 1000px) { .popular-pages ul { grid-template-columns: repeat(2, 1fr); }} .mp-popular-page-light { display: flex; align-items: center; list-style: none; background-color: rgba(0, 0, 0, 0.2); } .mp-popular-page-light a, .mp-popular-page-light a:visited { flex: 1; display: block; font-weight: bold; text-align: center; text-decoration: none; padding: 0.7em 1em; color: white; } .mp-popular-page-light a:hover, .mp-popular-page-light a:visited:hover { color: black; box-shadow: inset 0 0 3px 4px rgba(0,0,0,0.3); mix-blend-mode: hard-light; background-color: rgba(255, 158, 77, 0.88); } /** Mainpage right **/ .mainpage-right { flex: 1; display: flex; flex-flow: column wrap; margin-right: 0.9rem; } .mainpage-right > * { margin: 0 0 0.9rem; } .mainpage-kireek { position: relative; display: inline-block; overflow: hidden; background: linear-gradient(to bottom,rgba(255,255,255,0),#63347b 255px),url(https://wiki.pioneer2.net/images/d/db/HUcast_home.png) right top no-repeat #63347b; border: 1px solid #879978; box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3); } .mainpage-kireek-text { background-color: rgba(40, 30, 40, 0.75); } h3.kireek-header { margin: 10px 0 0 20px; } .kireek { margin:10px 30px 0 30px; padding-bottom:10px; padding-top:10px; } /** Discord button **/ .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: #ffffff; 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: #ffffff; 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-discord .tile-top a:hover .arrow { transform: translateX(50%); } .tile-top { width: 100%; padding: 1.3rem 1.5rem 0.6rem; } .tile-top.tile-image { display: flex; align-items: center; overflow: hidden; padding: 0; max-height: 12em; transition: 0.4s ease-out; } .tile-top.tile-image:hover img { transform: scale(1.1); transition: 0.5s ease-out; } .tile-top.tile-image a { width: 100%; } .tile-top.tile-image img { width: 100%; object-fit: cover; max-height: 200px; transition: 0.4s ease-out; } .tile-bottom { width: 100%; padding: 1rem 1.5rem 0.6rem; border:none; } .tile-bottom.link-button { align-self: flex-end; padding: 0; background: #B41E2B; border:none; } .tile-bottom.link-button a { display: block; text-align: center; padding: 0.75em 1.5em 0.8em; text-decoration: none; border:none; } .tile-bottom.read-more { transition: 0.3s ease-out; } .tile-bottom.read-more a { font-weight: bold; text-align: right; } .tile-bottom.read-more:hover .arrow { transform: translateX(50%); } .tile-bottom.read-more .arrow { filter: invert(36%) sepia(9%) saturate(463%) hue-rotate(175deg) brightness(94%) contrast(80%); margin-left: 0.4em; transition: 0.3s ease-out; } /** Misc (I forgot what this is for) **/ @media only screen and (min-width: 100rem) { .mainpage-header .header-intro { margin-right: 2em; } .mainpage-contents .line-break { display: none; } .themainpage { width:82rem; margin: 0 auto; } } @media only screen and (min-width: 66rem) and (max-width: 72.999rem) { .mainpage-header .header-stats, .mainpage-articleoftheweek { display: none; } } @media only screen and (min-width: 73rem) and (max-width: 99.999rem) { .mainpage-header .header-stats, .mainpage-contents .line-break { display: none; } } @media only screen and (max-width: 65.999rem) { .mainpage-contents .tile-halves:nth-child(1), .mainpage-contents .tile-halves:nth-child(2), .mainpage-contents .tile-halves:nth-child(3) { margin-bottom: 0.9rem; } .mainpage-contents .line-break { width: 100%; } .mainpage-header .header-stats, .mainpage-articleoftheweek { display: none; } } .oo-ui-labelWidget.oo-ui-inline-help, .editOptions { color:#eee; } .wikitable tr:hover { background-color:#272C33; } .jquery-tablesorter > thead, .mw-sticky-header > thead { position: -webkit-sticky; position: sticky; top: 0; } @media screen and (max-width: 1099px) and (min-width: 851px) { .skin-timeless .jquery-tablesorter > thead, .skin-timeless .mw-sticky-header > thead { top: 3.5em; } } @media screen and (min-width: 1100px) { .skin-timeless .jquery-tablesorter > thead, .skin-timeless .mw-sticky-header > thead { top: 3.5em; } } .jquery-tablesorter > tfoot, .mw-sticky-header > tfoot { position: -webkit-sticky; position: sticky; bottom: 0; } .client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort { background-position-x: center; background-position-y: bottom 3px; padding-bottom:12px; padding-right:0.5em; } ul#filetoc, .toc, .toccolours, .mw-warning { background: #323942; border: solid 1px #465160; } @keyframes unseen-fadeout-to-unread { 0% { background-color: none; } 100% { background-color: none; } } @keyframes olga2 { 0% { color: #ffae35; } 25% { color: #f8a531; } 50% { color: #bb5313; } 75% { color: #f19b23; } 100% { color: #ffae35; } } code, pre, .mw-code { color: #eee; background: #323942; } .talkbox { width: 65%; margin-left: auto; margin-right: auto; margin-top: 0.5em; margin-bottom: 0.5em; border: none; color:#eee; background-color: #232A35; } .talkbox .th { background-color: #465160; color:#eee; } .diff-addedline .diffchange { color: #000; } .diff-deletedline .diffchange { color: #000; } .diff-context, #pagehistory li.selected { background-color: #323942; color: #eee; } .mw-echo-ui-notificationItemWidget-unread:hover { background-color: rgba(41,98,204,0.1); } .mw-echo-ui-notificationItemWidget-content-actions-timestamp, .oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label, .mw-echo-ui-notificationItemWidget-content-message-header { color:#eee; } .mw-echo-ui-notificationsInboxWidget-toolbarWrapper { background: none; box-shadow: none; } .mw-echo-ui-notificationItemWidget:last-child, .mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body > .mw-echo-ui-notificationsListWidget > .mw-echo-ui-notificationItemWidget, .mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body > .mw-echo-ui-notificationsListWidget > .mw-echo-ui-notificationItemWidget:last-child, .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected { background-color: #232A35; } .mw-echo-ui-placeholderItemWidget { background-color: #2C343F; } .mw-body li.gallerybox div.thumb { background: none; border: none; } #p-logo-text a, #content h1, #content h2, #content h3, #content h4, #content h5 { font-family: sans-serif; line-height: 1.3; } /* Message Box */ .messagebox { width: 65%; margin-left: auto; margin-right: auto; margin-top: 0.5em; margin-bottom: 0.5em; border: none; border-left: 15px solid #3366cc; background-color: #232a35; color:#eee; } .messagebox.viridia-left { border-left: 15px solid #00ae6b; } .messagebox.greenill-left { border-left: 15px solid #73fb42; } .messagebox.skyly-left { border-left: 15px solid #6bfbff; } .messagebox.bluefull-left { border-left: 15px solid #4292ff; } .messagebox.purplenum-left { border-left: 15px solid #ce04ff; } .messagebox.pinkal-left { border-left: 15px solid #ff8ac5; } .messagebox.redria-left { border-left: 15px solid #f71019; } .messagebox.oran-left { border-left: 15px solid #ff9219; } .messagebox.yellowboze-left { border-left: 15px solid #f7fb19; } .messagebox.whitill-left { border-left: 15px solid #f7fbf7; } .messagebox, .errorbox, .warningbox, .successbox { padding: 2px 12px; } /* Standard Navigationsleisten, aka box hiding thingy from .de. Documentation at [[Wikipedia:NavFrame]]. Slightly modified because <div> sucks. */ table.NavFrame { border: 1px solid #aaa; text-align: center; font-size: 75%; width: 100%; } table.NavFrame + table.NavFrame { border-top-style: none; border-top-style: hidden; } table.NavPic { background-color: #fff; margin: 0; padding: 2px; /* @noflip */ float: left; } table.NavFrame th.NavHead { font-size: larger; text-align: center; background-color: #ccc; position: relative; padding-right: 0; } table.NavFrame th { background-color: #ccc; text-align: right; padding-right: 1%; width: 7%; } table.NavFrame td.NavContent, table.NavFrame td { text-align: left; } table.NavEnd { margin: 0; padding: 0; line-height: 1px; clear: both; } a.NavToggle { position: absolute; top: 0; /* @noflip */ right: 3px; font-weight: normal; font-size: 90%; } .client-js .NavFrame.collapsed > td { display: none; } .psoBackground { background: repeating-linear-gradient(to bottom, #003431, #006675 1px, #003431 2px, #003431 6px); } .psoStyle { box-shadow: 0 0 0 1px #9aaaaa, 0 0 0 2px #000; border-radius: 10px; font-size: 95%; color: white; padding: 0; } .psoHeader { background-color: rgba(0, 0, 0, 0.2); font-size: larger; padding: 1px 8px; } th.smallClassHeader { border: 1px solid black; box-shadow: inset 0 0 3px 4px rgba(0,0,0,0.3); mix-blend-mode: hard-light; padding: 4px; flex: 1; text-align: center; font-size: x-small; } .uncoloredClass { color: black; border: 1px solid black; box-shadow: inset 0 0 3px 4px rgba(0,0,0,0.3); mix-blend-mode: hard-light; padding: 4px; flex: 1; text-align: center; font-size: x-small; background-color: #eee; } .classCannotUse { color: black; border: 1px solid black; box-shadow: inset 0 0 3px 4px rgba(0,0,0,0.3); mix-blend-mode: hard-light; padding: 4px; flex: 1; background-color: rgba(255, 158, 77, 0.88); text-align: center; } .classCanUse { color: black; border: 1px solid black; box-shadow: inset 0 0 3px 4px rgba(0,0,0,0.3); mix-blend-mode: hard-light; padding: 4px; flex: 1; background-color: rgba(221, 255, 83, 0.64); text-align: center; } .more_info { border-bottom: 1px dotted; position: relative; } .more_info .title { position: absolute; top: 20px; background: silver; padding: 4px; left: 0; white-space: nowrap; color:black; } .topLeft { border-radius: 10px 0 0 0; } .topRight { border-radius: 0 10px 0 0; } .bottomLeft { border-radius: 0 0 0 10px; } .bottomRight { border-radius: 0 0 10px 0; } .unequippable, .grey, .gray { color: #909090; } .normal, .white { color: white; } .attributes, .green { color: #61e853; } .untekked, .cyan, .blue { color: #00fffc; } .rare, .yellow { color: #ffea00; } .es, .red { color: #fe3c28; } .native { color: #a5ffaa; } .abeast, .ab { color: #f5ff99; } .machine { color: #ff958b; } .dark { color: #e1a9ff; } .olga2, .glow { animation-name: olga2; animation-duration: 3.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: forwards; } .viridia { background-color: #00ae6b; } .greenill { background-color: #73fb42; } .skyly { background-color: #6bfbff; } .bluefull { background-color: #4292ff; } .purplenum { background-color: #ce04ff; } .pinkal { background-color: #ff8ac5; } .redria { background-color: #f71019; } .oran { background-color: #ff9219; } .yellowboze { background-color: #f7fb19; } .whitill { background-color: #f7fbf7; } .screen-blend img { mix-blend-mode: screen; } .hunt-list > p:nth-child(2) { margin: 1em 0; } .hunt-list > p { margin: 0; } .hunt-list > dl > dd { margin-bottom: 0; } .noPadding td { padding: 0; }