User:Sacrezar/common.css: Difference between revisions
From IdleOn MMO Wiki
imported>Sacrezar No edit summary |
imported>Sacrezar No edit summary |
||
Line 1: | Line 1: | ||
. | /* Custom Fonts and Fontoverriding */ | ||
flex- | @font-face { | ||
font-family: 'Idleon'; | |||
src: url('https://static.miraheze.org/idleonwiki/3/31/Idleon.ttf') format('truetype'); | |||
} | |||
.pixelfont, .mw-body h1, .mw-body h2, .mw-body h3 { | |||
font-family: 'Idleon'; | |||
} | |||
.Infobox th.Header { | |||
font-family: 'Idleon'; | |||
font-size: 1.2em; | |||
font-weight: bold; | |||
} | |||
/* -------------------------- GENERAL SITEWIDE CHANGES */ | |||
* { | |||
box-sizing: border-box; | |||
} | |||
.classimg img { | |||
width: auto; | |||
height: 50px; | |||
} | |||
.transparent | |||
{background: transparent; | |||
} | |||
img{ | |||
max-width: 100%; | |||
height: auto; | |||
image-rendering: -webkit-optimize-contrast; | |||
} | |||
img[src$="Coin.png"] { | |||
margin-right: 2px; | |||
vertical-align: bottom; | |||
} | |||
/* Background Image */ /* But where?! */ | |||
#mw-content-container { | |||
background: url('https://static.miraheze.org/idleonwiki/2/24/NightDesertBG.png') no-repeat center center fixed; | |||
-webkit-background-size: cover; | |||
-moz-background-size: cover; | |||
-o-background-size: cover; | |||
background-size: cover; | |||
} | |||
/* Logo image border */ | |||
#p-logo { | |||
background-color: #f8f9fa; | |||
padding: 1px 1px 0.8em 1px; | |||
border-color: black; | |||
border-style: solid; | |||
border-width: 1px 1px 0.2em; | |||
} | |||
/* sidebar text color */ | |||
#mw-related-navigation .sidebar-chunk{color:initial!important;} | |||
/* Text and image alignment, meant for cleaner tables first and foremost */ | |||
.left { | |||
text-align: left; | |||
} | |||
.leftImage img { | |||
display: block; | |||
float: left; | |||
} | |||
.center { | |||
text-align: center; | |||
} | |||
.centerImage img { | |||
display: block; | |||
margin: 0 auto; | |||
} | |||
.right { | |||
text-align: right; | |||
} | |||
.rightImage img { | |||
display: block; | |||
float: right; | |||
} | |||
/* -------------------------- MAIN PAGE -------------------------- */ | |||
.mainpage-body { | |||
display: flex; | |||
} | |||
.mainpage-left { | |||
flex: 2.721; | |||
display: flex; | |||
flex-flow: column; | |||
margin-right: 1.5rem; | |||
max-width:100%; | |||
} | |||
.mainpage-right { | |||
flex: 0.999; | |||
display: flex; | |||
flex-flow: column; | |||
} | |||
.mainpage-right > * { | |||
margin: 0 0 0.9rem; | |||
} | |||
.mainpage-container { | |||
display: flex; | |||
border: 1px solid #b0ad9b; | |||
background: #e6e6e6; | |||
margin-bottom:1em; | |||
} | |||
.mainpage-container h3 { | |||
font-size: 1.4em; | |||
font-weight: bold; | |||
border: none; | |||
text-decoration: none; | |||
padding: 0px; | |||
margin-bottom: 0.2em; | |||
margin-top: -0.4em; | |||
} | |||
.mainpage-box { | |||
width: 100%; | |||
padding: 1em 0.9em 0.3em; | |||
} | |||
/* --- MAIN PAGE SKILLS --- */ | |||
.mainpage-skills ul { | |||
flex: 1 1 auto; | |||
columns: 3; | |||
margin: 0; | |||
} | |||
.mainpage-skills li { | |||
display: flex; | |||
margin-bottom: 0.3em; | |||
} | |||
.mainpage-skills li:hover img { | |||
transform: scale(1.2); | |||
transition: 0.2s ease-out; | |||
} | |||
.mainpage-skills li a:first-child { | |||
border-radius: 3px; | |||
width: 48px; | |||
height: 48px; | |||
text-align: center; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.mainpage-skills li a:last-child { | |||
flex: 1 1 auto; | |||
display: flex; | |||
align-items: center; | |||
color: #444e5a; | |||
font-size: 1.1em; | |||
font-weight: bold; | |||
padding-left: 0.7em; | |||
text-decoration: none; | |||
} | |||
.mainpage-skills li:hover a:first-child { | |||
border-radius: 3px 0 0 3px; | |||
} | |||
.mainpage-skills li:hover a:last-child { | |||
color: rgba(255, 255, 255, 0.9); | |||
border-radius: 0 3px 3px 0; | |||
} | |||
.skill-Mining a:first-child { | |||
background-color: #d2b244; | |||
} | |||
.skill-Mining:hover a:last-child { | |||
background-color: #b69213; | |||
} | |||
.skill-Choppin a:first-child { | |||
background-color: #748d36; | |||
} | |||
.skill-Choppin:hover a:last-child { | |||
background-color: #4c6215; | |||
} | |||
.skill-Smithing a:first-child { | |||
background-color: #878787; | |||
} | |||
.skill-Smithing:hover a:last-child { | |||
background-color: #616161; | |||
} | |||
.skill-Fishing a:first-child { | |||
background-color: #3e8e9a; | |||
} | |||
.skill-Fishing:hover a:last-child { | |||
background-color: #1a6671; | |||
} | |||
.skill-Catching a:first-child { | |||
background-color: #8d6a36; | |||
} | |||
.skill-Catching:hover a:last-child { | |||
background-color: #624a15; | |||
} | |||
.skill-Alchemy a:first-child { | |||
background-color: #6274ab; | |||
} | |||
.skill-Alchemy:hover a:last-child { | |||
background-color: #304791; | |||
} | |||
/* --- MAINPAGE ITEMS ---*/ | |||
.mainpage-items ul { | |||
flex: 1 1 auto; | |||
columns: 3; | |||
margin: 0; | |||
} | |||
.mainpage-items li { | |||
display: flex; | |||
margin-bottom: 0.3em; | |||
} | |||
.mainpage-items li:hover img { | |||
transform: scale(1.2); | |||
transition: 0.2s ease-out; | |||
} | |||
.mainpage-items li a:first-child { | |||
border-radius: 3px; | |||
width: 48px; | |||
height: 48px; | |||
text-align: center; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.mainpage-items li a:last-child { | |||
flex: 1 1 auto; | |||
display: flex; | |||
align-items: center; | |||
color: #444e5a; | |||
font-size: 1.1em; | |||
font-weight: bold; | |||
padding-left: 0.7em; | |||
text-decoration: none; | |||
} | |||
.mainpage-items li:hover a:first-child { | |||
border-radius: 3px 0 0 3px; | |||
} | |||
.mainpage-items li:hover a:last-child { | |||
color: rgba(255, 255, 255, 0.9); | |||
border-radius: 0 3px 3px 0; | |||
} | |||
.items a:first-child { | |||
background-color: #6274ab; | |||
} | |||
.items:hover a:last-child { | |||
background-color: #304791; | |||
} | |||
/* --- MAINPAGE FEATURES --- */ | |||
.tile-row { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fill,minmax(140px, 1fr)); | |||
width: calc(100% + 1em); | |||
} | |||
.mainpage-features .tile-halves { | |||
display: flex; | display: flex; | ||
justify-content: | flex: 1 1 auto; | ||
flex-flow: column; | |||
margin-right: 0.9rem; | |||
overflow: hidden; | |||
margin-bottom: 0.9em; | |||
background: #d0d2e6; | |||
border-radius: 3px; | |||
} | |||
.mainpage-features .tile-halves:hover { | |||
background: #6274ab; | |||
} | |||
.mainpage-features .tile-halves img{ | |||
background: #e6e6e6; | |||
} | |||
.mainpage-features .tile-halves a{ | |||
color: #444e5a; | |||
} | |||
.mainpage-features .tile-halves:hover a{ | |||
color: #ffffff; | |||
} | |||
.mainpage-features .tile-halves h3 { | |||
font-size: 1em; | |||
font-weight: bold; | |||
font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif; | |||
margin: 0; | |||
text-decoration: none; | |||
} | |||
.mainpage-features .tile-top { | |||
height: 6rem; | |||
position: relative; | |||
} | |||
.tile-top.tile-image { | |||
display: flex; | |||
align-items: center; | |||
overflow: hidden; | |||
padding: 0; | |||
max-height: 60em; | |||
} | |||
.tile-top.tile-image a { | |||
width: 100%; | |||
} | |||
.tile-top.tile-image img { | |||
width: 100%; | |||
object-fit: cover; | |||
} | |||
.tile-bottom { | |||
width: 100%; | |||
padding: 0; | |||
} | |||
.tile-bottom.link-button { | |||
align-content: flex-end; | |||
padding: 0; | |||
} | |||
.tile-bottom.link-button a { | |||
display: block; | |||
text-align: center; | |||
text-decoration: none; | |||
padding: 0.4em 0 0.3em; | |||
} | |||
/* --- MAINPAGE EMBEDS --- */ | |||
.twitchplayer{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;} | |||
.twitchplayer iframe{position: absolute; top: 0; left: 0; width: 100%!important; height: 100%!important;} | |||
.youtubeplayer{text-align:center;} | |||
.widget-twitter{display:block;} | |||
/* World banners (couldn't make .banner-image work, using style instead) */ | |||
.banner-image { | |||
position: relative; | |||
border-radius: 0.4em; | |||
max-width: 100%; | |||
overflow: hidden; | |||
float: left; | |||
margin: 0 0 3px; | |||
} | |||
.banner-text { | |||
position: absolute; | |||
bottom: 10px; | |||
left: 20px; | |||
color: white; | |||
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; | |||
font-size: 35px; | |||
font-weight: bold; | |||
padding-left: 2px; | |||
padding-right: 2px; | |||
} | |||
.header-text { | |||
position: absolute; | |||
bottom: 2px; | |||
left: 20px; | |||
color: white; | |||
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; | |||
font-size: 18px; | |||
font-weight: bold; | |||
padding-left: 2px; | |||
padding-right: 2px; | |||
} | |||
/* -------------------------- Table Styling -------------------------- */ | |||
/* Image centering for specific table columns */ | |||
.CenterColumn1Image tr td:nth-child(1) img { | |||
display: block; | |||
margin: 0 auto; | |||
max-height:50px; | |||
width:auto; | |||
} | |||
.CenterColumn2Image tr td:nth-child(1) img { | |||
display: block; | |||
margin: 0 auto; | |||
} | |||
.CenterColumn1Image tr td.drop-separator:nth-child(1) img { | |||
display: inline-block; | |||
} | |||
/* makes table header purple */ | |||
.wikitable > tr > th, .wikitable > * > tr > th { | |||
background-color: #916699; | |||
} | |||
/* Removes the bright white background of tables, this is a light grey town, punk */ | |||
.wikitable { | |||
background-color: #e6e6e6; | |||
} | |||
.mw-collapsed { | |||
width:65%; | |||
} | |||
/* ----- Bosses, Items, NPC tables ----- */ | |||
.FirstImage{ | |||
width:100%; | |||
} | |||
.FirstImage td:first-of-type{ | |||
width:12%; | |||
min-width:100px; | |||
} | |||
/* Sets a boundary on the image size of the boss images, general image max-width is already 100% / Also centers them inside their invisible table */ | |||
.FirstImage td:first-of-type img { | |||
max-height:100px; | |||
height: auto; | |||
width: auto; | |||
margin: 0 auto; | |||
display: block; | |||
} | |||
.FirstImage tr:hover { | |||
background:none; | |||
} | |||
/* World Headers */ | |||
.worldheader.mw-collapsed { | |||
width:100%; | |||
} | |||
.mw-body .headerimg{ | |||
height:64px; | |||
width:100%; | |||
object-fit:cover; | |||
object-position:0; | |||
border-radius:5px; | |||
} | |||
@media screen and (max-width: 850px){ | |||
.mw-body .headerimg{ | |||
height:50px !important; | |||
} | |||
} | |||
/* ----- Alchemy ----- */ | |||
.bubble-table { | |||
border: 1px solid #000; | |||
border-radius: 0.7em; | |||
background-color: #f6f6f6; | |||
font-size: 120%; | |||
color: #000; | |||
width: 100%; | |||
margin: auto; | |||
overflow:hidden; | |||
} | |||
.bubble-table th.name { | |||
width: 15%; | |||
padding: 0 3px 0 3px; | |||
text-align: center; | |||
font-weight: bold; | |||
} | |||
.orange-cauldron tr:nth-child(odd){ | |||
background-color: #ffefcc; | |||
} | |||
.green-cauldron tr:nth-child(odd){ | |||
background-color: #ccffd0; | |||
} | |||
.purple-cauldron tr:nth-child(odd){ | |||
background-color: #fcccff30; | |||
} | |||
.yellow-cauldron tr:nth-child(odd){ | |||
background-color: #ffffcc; | |||
} | |||
/* ----- Bestiary ----- */ | |||
.bestiary-gallery { | |||
display: flex; | |||
flex-direction: row; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.bestiary-cell { | |||
display: flex; | |||
align-items: center; | |||
float: left; | |||
overflow: hidden; | |||
border: 1px solid #ccc; | |||
border-radius: 0.4em; | |||
min-height: 120px; | |||
margin: 1px; | |||
} | |||
.bestiary-cell:hover { | |||
border: 1px solid #000; | |||
background-color: #e6e6e6; | |||
} | |||
.bestiary-cell table { | |||
line-height: 0; | |||
} | |||
.bestiary-cell p { | |||
text-align: center; | |||
} | |||
/* ----- Droptable ----- */ | |||
.droptable{ | |||
width: 60%; | |||
} | |||
.droptable th.header { | |||
background: #916699; | |||
color: #000; | |||
font-size: 120%; | |||
font-weight: bold; | |||
border-radius: .4em .4em 0 0; | |||
text-align: center; | |||
} | |||
.droptable th.subheader { | |||
text-align: center; | |||
background: #916699; | |||
font-weight: bold; | |||
} | } | ||
. | .droptable tr:nth-child(odd){ | ||
background-color: lightgrey; | |||
} | } | ||
. | .navigation{ | ||
width: 60%; | |||
} | } | ||
Line 32: | Line 520: | ||
.tocnumber { | .tocnumber { | ||
display: none; | display: none; | ||
} | |||
/* -------------------------- ITEMS WIP -------------------------- */ | |||
.tile-row-items { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fill,minmax(144px, 1fr)); | |||
width: calc(100% + 1em); | |||
} | |||
.mainpage-features .tile-top-items { | |||
position: relative; | |||
height:6em | |||
} | |||
.tile-top-items.tile-image { | |||
display: flex; | |||
align-items: center; | |||
overflow: hidden; | |||
padding: 0; | |||
height: 144px; | |||
width: 144px; | |||
} | |||
.tile-top-items.tile-image a { | |||
width: 100%; | |||
} | |||
.tile-top-items.tile-image img { | |||
width: 100%; | |||
object-fit: cover; | |||
} | |||
/* -------------------------- BESTIARY WIP -------------------------- */ | |||
.mainpage-features .tile-halves-best { | |||
display: flex; | |||
flex: 1 1 auto; | |||
flex-flow: column; | |||
margin-right: 0.9rem; | |||
overflow: hidden; | |||
margin-bottom: 0.9em; | |||
background-color: #d0d2e6; | |||
} | |||
.mainpage-features .tile-halves-best h3 { | |||
font-size: 1em; | |||
font-weight: bold; | |||
font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif; | |||
margin: 0; | |||
text-decoration: none; | |||
} | |||
.mainpage-features .tile-halves-best:hover { | |||
background: #6274ab; | |||
} | |||
.mainpage-features .tile-halves-best img{ | |||
background: #e6e6e6; | |||
} | |||
.mainpage-features .tile-halves-best a{ | |||
color: #444e5a; | |||
} | |||
.mainpage-features .tile-halves-best:hover a{ | |||
color: #ffffff; | |||
} | |||
.mainpage-features .tile-top-best { | |||
height: 8rem; | |||
position: relative; | |||
} | |||
.tile-top-best.tile-image-best { | |||
display: flex; | |||
align-items: flex-end; | |||
overflow: hidden; | |||
background-color: #e6e6e6; | |||
padding-bottom: 5px; | |||
} | |||
.tile-top-best.tile-image-best a { | |||
width: 100%; | |||
} | |||
.tile-top-best.tile-image-best img { | |||
margin: auto; | |||
display: block; | |||
} | |||
.tile-bottom-best { | |||
width: 100%; | |||
padding: 0; | |||
} | |||
.tile-bottom-best.link-button-best { | |||
align-content: flex-end; | |||
padding: 0; | |||
} | |||
.tile-bottom-best.link-button-best a { | |||
display: block; | |||
text-align: center; | |||
text-decoration: none; | |||
padding: 0.4em 0 0.3em; | |||
} | |||
/* -------------------------- Boxes Page -------------------------- */ | |||
.BoxFlex { | |||
flex-wrap: wrap; | |||
display: flex; | |||
justify-content:space-between; | |||
} | |||
.boxDiv { | |||
display: inline-block; | |||
flex: 48%; | |||
flex-grow:0; | |||
margin-bottom:1em; | |||
} | |||
.boxDiv .result1 , .boxDiv .result2 , .boxDiv .result3, .boxDiv p { | |||
margin:0; display:inline; | |||
} | |||
/* -------------------------- Talents/Class Page -------------------------- */ | |||
/* Flexbox styling for the talents */ | |||
.TalentFlex { | |||
flex-wrap: wrap; | |||
display: flex; | |||
justify-content:space-between; | |||
} | |||
.skillDiv { | |||
display: inline-block; | |||
flex: 48%; | |||
flex-grow:0; | |||
margin-bottom:1em; | |||
} | |||
.skillDiv .result1 p, .skillDiv .result2 p { | |||
margin:0; display:inline; | |||
} | |||
/* -------------------------- Infobox -------------------------- */ | |||
/* Fix for Firefox, <table> doesn't fill the space properly */ | |||
.Infobox table { | |||
width: 100%; | |||
} | |||
/* --- General Styling --- */ | |||
.Infobox { | |||
width: 30%; | |||
float: right; | |||
clear: right; | |||
background: #e6e6e6; | |||
border: 1px solid black; | |||
border-radius: 0.7em; | |||
margin: 0 0 .5em .5em; | |||
} | |||
/* Affects the left column (purple) */ | |||
.Infobox th { | |||
background: #c0b3cc; | |||
text-align: left; | |||
padding: 0.2em 0.2em 0.2em 0.3em; | |||
} | |||
/* Affects the very first header of the Infobox */ | |||
.Infobox .Header { | |||
background: #916699; | |||
text-align: center; | |||
padding: 0.5em; | |||
border-radius: .4em .4em 0 0; | |||
} | |||
/* Affects all the headers/dividers below the image */ | |||
.Infobox .SubHeader { | |||
background: #916699; | |||
font-weight: bold; | |||
text-align: center; | |||
} | |||
/* Makes width of the two rows more consistent, but allows for flexibility // % gets overriden by colspan, em works // */ | |||
.Infobox th, .Infobox td { | |||
max-width: 8em; | |||
min-width: 5em; | |||
} | |||
/* Centers the main image */ | |||
.Infobox .HeaderImage { | |||
text-align: center; | |||
} | |||
/* Constraining the max height of images in infoboxes, this way we never need to constrain it with the imagesize attribute, like [[whatever|20px]] */ | |||
.Infobox .HeaderImage img { | |||
max-height:300px; | |||
width:auto; | |||
} | |||
/* Rounds the last table row to fit with the rounded edge of the Infobox */ | |||
.LastTable { | |||
border-radius: 0 0 0 0.4em; | |||
} | |||
/* Removes premade styling from the <tabber> tag, so not to mess with the layout in the Infobox*/ | |||
.Infobox .tabber .tabbertab { | |||
padding:0; | |||
border:0; | |||
} | |||
/* ----- Frontpage Infobox ----- */ | |||
/* Frontpage Infobox has specific space designated for it, so we need to override the 30% width */ | |||
.Infobox.FrontPageBox { | |||
width:100%; | |||
margin:0; | |||
} | |||
/* Frontpage Infobox header font size */ | |||
.Infobox.FrontPageBox .Header { | |||
font-size: 1.6em; | |||
} | |||
/* ----- Class Template Infobox ----- */ | |||
/* Center-alignment for the talents and even spacing for top and bottom*/ | |||
.InfoboxTalents { | |||
text-align: center; | |||
padding-bottom: 6px | |||
} | |||
/* Gives the talent icons some much needed space from eachother */ | |||
.InfoboxTalents img { | |||
margin-top:4px; | |||
} | |||
/* Removes styling from the <p> element the talents get wrapped inside */ | |||
.InfoboxTalents p { | |||
margin: 0; | |||
} | |||
/* -------------------------- Banner Styling -------------------------- */ | |||
.banner{ | |||
border: 1px solid #000; | |||
border-spacing: 3px; | |||
background-image: linear-gradient(#d5d5d5 60%,#979797 70%); | |||
width:60%; | |||
text-align:center; | |||
border-radius:5px; | |||
color: #fff; | |||
font-size:32px; | |||
text-shadow:-.065em 0 #000,0 .065em #000,.065em 0 #000,0 -.065em #000; | |||
} | |||
.banner td{ | |||
border: 1px solid #000; | |||
border-radius: 5px; | |||
background-image: linear-gradient(#868686 30%,#696969 80%); | |||
padding:0 1em; | |||
} | |||
.banner a{ | |||
color:#94f9ff; | |||
} | |||
.banner.blue{ | |||
background-image: linear-gradient(#6371BF 60%,#3C4AA3 70%); | |||
} | |||
.banner.blue td{ | |||
background-image: linear-gradient(#4D97BC 30%,#2165A0 80%); | |||
} | |||
.banner.red{ | |||
background-image: linear-gradient(#FF7A68 60%,#FF614C 70%); | |||
} | |||
.banner.red td{ | |||
background-image: linear-gradient(#FF614C 30%,#FF7A68 80%); | |||
} | |||
.banner.purple{ | |||
background-image: linear-gradient(#ffcffa 60%,#ee75ff 70%); | |||
} | |||
.banner.purple td{ | |||
background-image: linear-gradient(#a94bc1 30%,#7e38aa 80%); | |||
} | |||
/* ----- SECRETS PAGE ----- */ | |||
.secrets{box-sizing:border-box; width:100%; border:1px solid #a2a9b1; padding:1em; background-color:#e6e6e6; margin-bottom:1em; clear:both;} | |||
.secrets > h3{margin:0; font-size:20px;} | |||
.secrets > .mw-collapsible-content{margin-top:1em;} | |||
/* ----- DARK MODE ----- */ | |||
.client-dark-mode #mw-content-container, .client-dark-mode #mw-content-block, .client-dark-mode .mw-wiki-logo.fallback, .client-dark-mode .banner{ | |||
filter: invert(1) hue-rotate(180deg); | |||
-webkit-filter: invert(1) hue-rotate(180deg); | |||
} | |||
.client-dark-mode #mw-content-container{ | |||
background:url(https://static.miraheze.org/idleonwiki/2/24/NightDesertBG.png) no-repeat center center fixed; | |||
background-size: cover; | |||
} | |||
.client-dark-mode #mw-content, .client-dark-mode #mw-site-navigation .sidebar-chunk, .client-dark-mode #mw-site-navigation #p-logo, .client-dark-mode #mw-related-navigation .sidebar-chunk, .client-dark-mode .Infobox{ | |||
border-color:#6b6b6b; | |||
} | |||
/* -------------------------- RESPONSIVE DESIGN ALTERATIONS -------------------------- */ | |||
@media screen and (max-width: 850px) { | |||
.mainpage-body { | |||
flex-flow: column wrap; | |||
} | |||
.mainpage-left { | |||
margin-right: 0; | |||
} | |||
.mainpage-container, .mainpage-right > * { | |||
margin: 0 0 0.45em; | |||
} | |||
.mainpage-box { | |||
padding: 1.5em 0.5em 0.3em; | |||
} | |||
.mainpage-container h3 { | |||
margin-bottom: 0.3em; | |||
margin-top: -0.7em; | |||
} | |||
.mainpage-skills li a:first-child { | |||
border-radius: 3px; | |||
padding: 3px 2px 1px 2px; | |||
width: 40px; | |||
height: 40px; | |||
} | |||
.mainpage-skills li a:last-child { | |||
flex: 1 1 auto; | |||
display: flex; | |||
align-items: center; | |||
color: #444e5a; | |||
font-size: 0.9em; | |||
font-weight: bold; | |||
padding-left: 0.2em; | |||
text-decoration: none; | |||
} | |||
.mainpage-skills li:hover img { | |||
transform: scale(1); | |||
transition: 0; | |||
} | |||
.tile-row { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fill,minmax(120px, 1fr)); | |||
width: calc(100% + 0.3em); | |||
} | |||
.mainpage-features .tile-halves { | |||
margin-right: 0.3em; | |||
margin-bottom: 0.3em; | |||
} | |||
} | |||
@media screen and (max-width: 550px){ | |||
#p-logo-text { | |||
position:absolute; | |||
} | |||
/* Makes the Infobox page-wide on small screens */ | |||
.Infobox, .wikitable { | |||
width: 100%; | |||
float: none; | |||
margin: 0; | |||
} | |||
} | |||
tr:hover { | |||
background: #d1d1d1 | |||
} | |||
.stickyHeader th { | |||
position: -webkit-sticky; | |||
position: sticky; | |||
top: 20px; | |||
} | } |
Revision as of 16:20, 20 May 2021
/* Custom Fonts and Fontoverriding */
@font-face {
font-family: 'Idleon';
src: url('https://static.miraheze.org/idleonwiki/3/31/Idleon.ttf') format('truetype');
}
.pixelfont, .mw-body h1, .mw-body h2, .mw-body h3 {
font-family: 'Idleon';
}
.Infobox th.Header {
font-family: 'Idleon';
font-size: 1.2em;
font-weight: bold;
}
/* -------------------------- GENERAL SITEWIDE CHANGES */
* {
box-sizing: border-box;
}
.classimg img {
width: auto;
height: 50px;
}
.transparent
{background: transparent;
}
img{
max-width: 100%;
height: auto;
image-rendering: -webkit-optimize-contrast;
}
img[src$="Coin.png"] {
margin-right: 2px;
vertical-align: bottom;
}
/* Background Image */ /* But where?! */
#mw-content-container {
background: url('https://static.miraheze.org/idleonwiki/2/24/NightDesertBG.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Logo image border */
#p-logo {
background-color: #f8f9fa;
padding: 1px 1px 0.8em 1px;
border-color: black;
border-style: solid;
border-width: 1px 1px 0.2em;
}
/* sidebar text color */
#mw-related-navigation .sidebar-chunk{color:initial!important;}
/* Text and image alignment, meant for cleaner tables first and foremost */
.left {
text-align: left;
}
.leftImage img {
display: block;
float: left;
}
.center {
text-align: center;
}
.centerImage img {
display: block;
margin: 0 auto;
}
.right {
text-align: right;
}
.rightImage img {
display: block;
float: right;
}
/* -------------------------- MAIN PAGE -------------------------- */
.mainpage-body {
display: flex;
}
.mainpage-left {
flex: 2.721;
display: flex;
flex-flow: column;
margin-right: 1.5rem;
max-width:100%;
}
.mainpage-right {
flex: 0.999;
display: flex;
flex-flow: column;
}
.mainpage-right > * {
margin: 0 0 0.9rem;
}
.mainpage-container {
display: flex;
border: 1px solid #b0ad9b;
background: #e6e6e6;
margin-bottom:1em;
}
.mainpage-container h3 {
font-size: 1.4em;
font-weight: bold;
border: none;
text-decoration: none;
padding: 0px;
margin-bottom: 0.2em;
margin-top: -0.4em;
}
.mainpage-box {
width: 100%;
padding: 1em 0.9em 0.3em;
}
/* --- MAIN PAGE SKILLS --- */
.mainpage-skills ul {
flex: 1 1 auto;
columns: 3;
margin: 0;
}
.mainpage-skills li {
display: flex;
margin-bottom: 0.3em;
}
.mainpage-skills li:hover img {
transform: scale(1.2);
transition: 0.2s ease-out;
}
.mainpage-skills li a:first-child {
border-radius: 3px;
width: 48px;
height: 48px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.mainpage-skills li a:last-child {
flex: 1 1 auto;
display: flex;
align-items: center;
color: #444e5a;
font-size: 1.1em;
font-weight: bold;
padding-left: 0.7em;
text-decoration: none;
}
.mainpage-skills li:hover a:first-child {
border-radius: 3px 0 0 3px;
}
.mainpage-skills li:hover a:last-child {
color: rgba(255, 255, 255, 0.9);
border-radius: 0 3px 3px 0;
}
.skill-Mining a:first-child {
background-color: #d2b244;
}
.skill-Mining:hover a:last-child {
background-color: #b69213;
}
.skill-Choppin a:first-child {
background-color: #748d36;
}
.skill-Choppin:hover a:last-child {
background-color: #4c6215;
}
.skill-Smithing a:first-child {
background-color: #878787;
}
.skill-Smithing:hover a:last-child {
background-color: #616161;
}
.skill-Fishing a:first-child {
background-color: #3e8e9a;
}
.skill-Fishing:hover a:last-child {
background-color: #1a6671;
}
.skill-Catching a:first-child {
background-color: #8d6a36;
}
.skill-Catching:hover a:last-child {
background-color: #624a15;
}
.skill-Alchemy a:first-child {
background-color: #6274ab;
}
.skill-Alchemy:hover a:last-child {
background-color: #304791;
}
/* --- MAINPAGE ITEMS ---*/
.mainpage-items ul {
flex: 1 1 auto;
columns: 3;
margin: 0;
}
.mainpage-items li {
display: flex;
margin-bottom: 0.3em;
}
.mainpage-items li:hover img {
transform: scale(1.2);
transition: 0.2s ease-out;
}
.mainpage-items li a:first-child {
border-radius: 3px;
width: 48px;
height: 48px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.mainpage-items li a:last-child {
flex: 1 1 auto;
display: flex;
align-items: center;
color: #444e5a;
font-size: 1.1em;
font-weight: bold;
padding-left: 0.7em;
text-decoration: none;
}
.mainpage-items li:hover a:first-child {
border-radius: 3px 0 0 3px;
}
.mainpage-items li:hover a:last-child {
color: rgba(255, 255, 255, 0.9);
border-radius: 0 3px 3px 0;
}
.items a:first-child {
background-color: #6274ab;
}
.items:hover a:last-child {
background-color: #304791;
}
/* --- MAINPAGE FEATURES --- */
.tile-row {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(140px, 1fr));
width: calc(100% + 1em);
}
.mainpage-features .tile-halves {
display: flex;
flex: 1 1 auto;
flex-flow: column;
margin-right: 0.9rem;
overflow: hidden;
margin-bottom: 0.9em;
background: #d0d2e6;
border-radius: 3px;
}
.mainpage-features .tile-halves:hover {
background: #6274ab;
}
.mainpage-features .tile-halves img{
background: #e6e6e6;
}
.mainpage-features .tile-halves a{
color: #444e5a;
}
.mainpage-features .tile-halves:hover a{
color: #ffffff;
}
.mainpage-features .tile-halves h3 {
font-size: 1em;
font-weight: bold;
font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
margin: 0;
text-decoration: none;
}
.mainpage-features .tile-top {
height: 6rem;
position: relative;
}
.tile-top.tile-image {
display: flex;
align-items: center;
overflow: hidden;
padding: 0;
max-height: 60em;
}
.tile-top.tile-image a {
width: 100%;
}
.tile-top.tile-image img {
width: 100%;
object-fit: cover;
}
.tile-bottom {
width: 100%;
padding: 0;
}
.tile-bottom.link-button {
align-content: flex-end;
padding: 0;
}
.tile-bottom.link-button a {
display: block;
text-align: center;
text-decoration: none;
padding: 0.4em 0 0.3em;
}
/* --- MAINPAGE EMBEDS --- */
.twitchplayer{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;}
.twitchplayer iframe{position: absolute; top: 0; left: 0; width: 100%!important; height: 100%!important;}
.youtubeplayer{text-align:center;}
.widget-twitter{display:block;}
/* World banners (couldn't make .banner-image work, using style instead) */
.banner-image {
position: relative;
border-radius: 0.4em;
max-width: 100%;
overflow: hidden;
float: left;
margin: 0 0 3px;
}
.banner-text {
position: absolute;
bottom: 10px;
left: 20px;
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-size: 35px;
font-weight: bold;
padding-left: 2px;
padding-right: 2px;
}
.header-text {
position: absolute;
bottom: 2px;
left: 20px;
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-size: 18px;
font-weight: bold;
padding-left: 2px;
padding-right: 2px;
}
/* -------------------------- Table Styling -------------------------- */
/* Image centering for specific table columns */
.CenterColumn1Image tr td:nth-child(1) img {
display: block;
margin: 0 auto;
max-height:50px;
width:auto;
}
.CenterColumn2Image tr td:nth-child(1) img {
display: block;
margin: 0 auto;
}
.CenterColumn1Image tr td.drop-separator:nth-child(1) img {
display: inline-block;
}
/* makes table header purple */
.wikitable > tr > th, .wikitable > * > tr > th {
background-color: #916699;
}
/* Removes the bright white background of tables, this is a light grey town, punk */
.wikitable {
background-color: #e6e6e6;
}
.mw-collapsed {
width:65%;
}
/* ----- Bosses, Items, NPC tables ----- */
.FirstImage{
width:100%;
}
.FirstImage td:first-of-type{
width:12%;
min-width:100px;
}
/* Sets a boundary on the image size of the boss images, general image max-width is already 100% / Also centers them inside their invisible table */
.FirstImage td:first-of-type img {
max-height:100px;
height: auto;
width: auto;
margin: 0 auto;
display: block;
}
.FirstImage tr:hover {
background:none;
}
/* World Headers */
.worldheader.mw-collapsed {
width:100%;
}
.mw-body .headerimg{
height:64px;
width:100%;
object-fit:cover;
object-position:0;
border-radius:5px;
}
@media screen and (max-width: 850px){
.mw-body .headerimg{
height:50px !important;
}
}
/* ----- Alchemy ----- */
.bubble-table {
border: 1px solid #000;
border-radius: 0.7em;
background-color: #f6f6f6;
font-size: 120%;
color: #000;
width: 100%;
margin: auto;
overflow:hidden;
}
.bubble-table th.name {
width: 15%;
padding: 0 3px 0 3px;
text-align: center;
font-weight: bold;
}
.orange-cauldron tr:nth-child(odd){
background-color: #ffefcc;
}
.green-cauldron tr:nth-child(odd){
background-color: #ccffd0;
}
.purple-cauldron tr:nth-child(odd){
background-color: #fcccff30;
}
.yellow-cauldron tr:nth-child(odd){
background-color: #ffffcc;
}
/* ----- Bestiary ----- */
.bestiary-gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.bestiary-cell {
display: flex;
align-items: center;
float: left;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 0.4em;
min-height: 120px;
margin: 1px;
}
.bestiary-cell:hover {
border: 1px solid #000;
background-color: #e6e6e6;
}
.bestiary-cell table {
line-height: 0;
}
.bestiary-cell p {
text-align: center;
}
/* ----- Droptable ----- */
.droptable{
width: 60%;
}
.droptable th.header {
background: #916699;
color: #000;
font-size: 120%;
font-weight: bold;
border-radius: .4em .4em 0 0;
text-align: center;
}
.droptable th.subheader {
text-align: center;
background: #916699;
font-weight: bold;
}
.droptable tr:nth-child(odd){
background-color: lightgrey;
}
.navigation{
width: 60%;
}
/* -------------------------- TOC -------------------------- */
.toc {
float:right;
background-color: #e6e6e6;
border-radius: 10px 10px 10px 10px;
border: 0.5px black solid;
margin: 0 0 0 0;
padding: 0.5em;
}
.toc .toctitle {
text-align: center;
}
.toc .toctitle h2 {
font-weight: bold;
}
.tocnumber {
display: none;
}
/* -------------------------- ITEMS WIP -------------------------- */
.tile-row-items {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(144px, 1fr));
width: calc(100% + 1em);
}
.mainpage-features .tile-top-items {
position: relative;
height:6em
}
.tile-top-items.tile-image {
display: flex;
align-items: center;
overflow: hidden;
padding: 0;
height: 144px;
width: 144px;
}
.tile-top-items.tile-image a {
width: 100%;
}
.tile-top-items.tile-image img {
width: 100%;
object-fit: cover;
}
/* -------------------------- BESTIARY WIP -------------------------- */
.mainpage-features .tile-halves-best {
display: flex;
flex: 1 1 auto;
flex-flow: column;
margin-right: 0.9rem;
overflow: hidden;
margin-bottom: 0.9em;
background-color: #d0d2e6;
}
.mainpage-features .tile-halves-best h3 {
font-size: 1em;
font-weight: bold;
font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
margin: 0;
text-decoration: none;
}
.mainpage-features .tile-halves-best:hover {
background: #6274ab;
}
.mainpage-features .tile-halves-best img{
background: #e6e6e6;
}
.mainpage-features .tile-halves-best a{
color: #444e5a;
}
.mainpage-features .tile-halves-best:hover a{
color: #ffffff;
}
.mainpage-features .tile-top-best {
height: 8rem;
position: relative;
}
.tile-top-best.tile-image-best {
display: flex;
align-items: flex-end;
overflow: hidden;
background-color: #e6e6e6;
padding-bottom: 5px;
}
.tile-top-best.tile-image-best a {
width: 100%;
}
.tile-top-best.tile-image-best img {
margin: auto;
display: block;
}
.tile-bottom-best {
width: 100%;
padding: 0;
}
.tile-bottom-best.link-button-best {
align-content: flex-end;
padding: 0;
}
.tile-bottom-best.link-button-best a {
display: block;
text-align: center;
text-decoration: none;
padding: 0.4em 0 0.3em;
}
/* -------------------------- Boxes Page -------------------------- */
.BoxFlex {
flex-wrap: wrap;
display: flex;
justify-content:space-between;
}
.boxDiv {
display: inline-block;
flex: 48%;
flex-grow:0;
margin-bottom:1em;
}
.boxDiv .result1 , .boxDiv .result2 , .boxDiv .result3, .boxDiv p {
margin:0; display:inline;
}
/* -------------------------- Talents/Class Page -------------------------- */
/* Flexbox styling for the talents */
.TalentFlex {
flex-wrap: wrap;
display: flex;
justify-content:space-between;
}
.skillDiv {
display: inline-block;
flex: 48%;
flex-grow:0;
margin-bottom:1em;
}
.skillDiv .result1 p, .skillDiv .result2 p {
margin:0; display:inline;
}
/* -------------------------- Infobox -------------------------- */
/* Fix for Firefox, <table> doesn't fill the space properly */
.Infobox table {
width: 100%;
}
/* --- General Styling --- */
.Infobox {
width: 30%;
float: right;
clear: right;
background: #e6e6e6;
border: 1px solid black;
border-radius: 0.7em;
margin: 0 0 .5em .5em;
}
/* Affects the left column (purple) */
.Infobox th {
background: #c0b3cc;
text-align: left;
padding: 0.2em 0.2em 0.2em 0.3em;
}
/* Affects the very first header of the Infobox */
.Infobox .Header {
background: #916699;
text-align: center;
padding: 0.5em;
border-radius: .4em .4em 0 0;
}
/* Affects all the headers/dividers below the image */
.Infobox .SubHeader {
background: #916699;
font-weight: bold;
text-align: center;
}
/* Makes width of the two rows more consistent, but allows for flexibility // % gets overriden by colspan, em works // */
.Infobox th, .Infobox td {
max-width: 8em;
min-width: 5em;
}
/* Centers the main image */
.Infobox .HeaderImage {
text-align: center;
}
/* Constraining the max height of images in infoboxes, this way we never need to constrain it with the imagesize attribute, like [[whatever|20px]] */
.Infobox .HeaderImage img {
max-height:300px;
width:auto;
}
/* Rounds the last table row to fit with the rounded edge of the Infobox */
.LastTable {
border-radius: 0 0 0 0.4em;
}
/* Removes premade styling from the <tabber> tag, so not to mess with the layout in the Infobox*/
.Infobox .tabber .tabbertab {
padding:0;
border:0;
}
/* ----- Frontpage Infobox ----- */
/* Frontpage Infobox has specific space designated for it, so we need to override the 30% width */
.Infobox.FrontPageBox {
width:100%;
margin:0;
}
/* Frontpage Infobox header font size */
.Infobox.FrontPageBox .Header {
font-size: 1.6em;
}
/* ----- Class Template Infobox ----- */
/* Center-alignment for the talents and even spacing for top and bottom*/
.InfoboxTalents {
text-align: center;
padding-bottom: 6px
}
/* Gives the talent icons some much needed space from eachother */
.InfoboxTalents img {
margin-top:4px;
}
/* Removes styling from the <p> element the talents get wrapped inside */
.InfoboxTalents p {
margin: 0;
}
/* -------------------------- Banner Styling -------------------------- */
.banner{
border: 1px solid #000;
border-spacing: 3px;
background-image: linear-gradient(#d5d5d5 60%,#979797 70%);
width:60%;
text-align:center;
border-radius:5px;
color: #fff;
font-size:32px;
text-shadow:-.065em 0 #000,0 .065em #000,.065em 0 #000,0 -.065em #000;
}
.banner td{
border: 1px solid #000;
border-radius: 5px;
background-image: linear-gradient(#868686 30%,#696969 80%);
padding:0 1em;
}
.banner a{
color:#94f9ff;
}
.banner.blue{
background-image: linear-gradient(#6371BF 60%,#3C4AA3 70%);
}
.banner.blue td{
background-image: linear-gradient(#4D97BC 30%,#2165A0 80%);
}
.banner.red{
background-image: linear-gradient(#FF7A68 60%,#FF614C 70%);
}
.banner.red td{
background-image: linear-gradient(#FF614C 30%,#FF7A68 80%);
}
.banner.purple{
background-image: linear-gradient(#ffcffa 60%,#ee75ff 70%);
}
.banner.purple td{
background-image: linear-gradient(#a94bc1 30%,#7e38aa 80%);
}
/* ----- SECRETS PAGE ----- */
.secrets{box-sizing:border-box; width:100%; border:1px solid #a2a9b1; padding:1em; background-color:#e6e6e6; margin-bottom:1em; clear:both;}
.secrets > h3{margin:0; font-size:20px;}
.secrets > .mw-collapsible-content{margin-top:1em;}
/* ----- DARK MODE ----- */
.client-dark-mode #mw-content-container, .client-dark-mode #mw-content-block, .client-dark-mode .mw-wiki-logo.fallback, .client-dark-mode .banner{
filter: invert(1) hue-rotate(180deg);
-webkit-filter: invert(1) hue-rotate(180deg);
}
.client-dark-mode #mw-content-container{
background:url(https://static.miraheze.org/idleonwiki/2/24/NightDesertBG.png) no-repeat center center fixed;
background-size: cover;
}
.client-dark-mode #mw-content, .client-dark-mode #mw-site-navigation .sidebar-chunk, .client-dark-mode #mw-site-navigation #p-logo, .client-dark-mode #mw-related-navigation .sidebar-chunk, .client-dark-mode .Infobox{
border-color:#6b6b6b;
}
/* -------------------------- RESPONSIVE DESIGN ALTERATIONS -------------------------- */
@media screen and (max-width: 850px) {
.mainpage-body {
flex-flow: column wrap;
}
.mainpage-left {
margin-right: 0;
}
.mainpage-container, .mainpage-right > * {
margin: 0 0 0.45em;
}
.mainpage-box {
padding: 1.5em 0.5em 0.3em;
}
.mainpage-container h3 {
margin-bottom: 0.3em;
margin-top: -0.7em;
}
.mainpage-skills li a:first-child {
border-radius: 3px;
padding: 3px 2px 1px 2px;
width: 40px;
height: 40px;
}
.mainpage-skills li a:last-child {
flex: 1 1 auto;
display: flex;
align-items: center;
color: #444e5a;
font-size: 0.9em;
font-weight: bold;
padding-left: 0.2em;
text-decoration: none;
}
.mainpage-skills li:hover img {
transform: scale(1);
transition: 0;
}
.tile-row {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(120px, 1fr));
width: calc(100% + 0.3em);
}
.mainpage-features .tile-halves {
margin-right: 0.3em;
margin-bottom: 0.3em;
}
}
@media screen and (max-width: 550px){
#p-logo-text {
position:absolute;
}
/* Makes the Infobox page-wide on small screens */
.Infobox, .wikitable {
width: 100%;
float: none;
margin: 0;
}
}
tr:hover {
background: #d1d1d1
}
.stickyHeader th {
position: -webkit-sticky;
position: sticky;
top: 20px;
}