User:Sacrezar/common.css
From IdleOn MMO Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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;
}