User:Blackwolfe/common.css: Difference between revisions

From IdleOn MMO Wiki
imported>Blackwolfe
No edit summary
imported>Blackwolfe
No edit summary
 
(102 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Background Image */
/* ManageWiki Sidebar */
#mw-content-container {
.mw-special-ManageWiki #mw-content-text .oo-ui-menuLayout {
    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: #f8f9fa;
    padding: 1px 1px 0.8em 1px;
    border: #f8f9fa;
    border-style: solid;
    border-width: 1px 1px 0.2em;
}
 
/* Main Page */
 
.mainpage-body {         
    display: flex;
    flex-flow: row;
}
 
.mainpage-left {
    flex: 2.721;
     display: flex;
     display: flex;
    flex-flow: column;
    margin-right: 0.9rem;
}
}
 
.mw-special-ManageWiki #mw-content-text .oo-ui-indexLayout-tabPanel,
.mainpage-left > * {
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget {
     margin: 0 0 0.9rem;
     box-sizing: border-box;
    height: 100%;
}
}
 
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget {
.mainpage-right {
    flex: 0.999;
     display: flex;
     display: flex;
     flex-flow: column;
     flex-direction: column;
     }
     padding-bottom: 0.5em;
 
    width: 160px
.mainpage-right > * {
    margin: 0 0 0.9rem;
}
}
.main-box {               /* MAIN BOX - the yellow box, container of all*/
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget .oo-ui-optionWidget {
     display: flex;
     background: none;
     border: 1px solid #b0ad9b;
     border: none;
     background: #e6e6e6;           /* distance from page borders  - middle value is distance from sides */
     border-left: 4px solid transparent;
}
}
.main-box h3 {            /* Header over tiles */
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget .oo-ui-optionWidget .oo-ui-labelElement-label {
    font-size: 1.4em;
    font-weight: bold;
     border: none;
     border: none;
    text-decoration: none;
    padding: 0px;
    margin-bottom: 0.5em;    /* distance from tiles */
    margin-top: -0.5em;      /* and top border */
}
.mainpage-skills ul {
flex: 1 1 auto;
    columns: 3;
    margin: 0;                /* deletes default space that bullet list has */
}
.mainpage-skills li {
    display: flex;
    /*margin-right: -10px; ----- space after bullet points*/
    margin-bottom: 0.3em;    /* space between rows */
}
.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; /* makes tiles stretch as much as possible */
    display: flex; /* allows positioning of content inside tiles */
    align-items: center; /* centers content inside tile */
    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;
}
.tile-top {                                  /* SUBMAIN BOX - directly with tiles */
    width: 100%;
    padding: 1.5em 1.5em 1em 1.5em;          /* distance from borders */
}
/* ----------------------------------------------------- MOBILE --- */
@media only screen and (max-width: 499px) {
  .mainpage-left {
    margin-right: 0;
    }
    .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-top {
    width: 100%;
    padding: 1.5em 0.5em 1em 0.5em;          /* distance from borders */
    }
    .tile-halves {
    display: flex;
    flex-flow: row wrap;
    border-left: none;
    border-right: none;
    border-radius: 0;
    margin: 0;
    }
}
/* ------------------------------------------- INDIVIDUAL SKILL COLORS --- */
.skill-mining a:first-child {
    background: #d2b244;
}
.skill-mining:hover a:last-child {
    background: #b69213;
}
.skill-choppin a:first-child {
    background: #748d36;
}
.skill-choppin:hover a:last-child {
    background: #4c6215;
}
.skill-smithing a:first-child {
    background: #878787;
}
.skill-smithing:hover a:last-child {
    background: #616161;
}
.skill-fishing a:first-child {
    background: #3e8e9a;
}
.skill-fishing:hover a:last-child {
    background: #1a6671;
}
.skill-catching a:first-child {
    background: #8d6a36;
}
.skill-catching:hover a:last-child {
    background: #624a15;
}
.skill-alchemy a:first-child {
    background: #6274ab;
}
.skill-alchemy:hover a:last-child {
    background: #304791;
}
/* 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*/
/* 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;
}
/* -------------------------Infobox  */
.infobox {
    border: 1px solid #000;
    background: #e6e6e6;
    border-radius: 0.7em;
    font-size: 120%;
    color: #000;
    margin: 0 0 1em .5em;
    padding: 0.1em;
    float: right;
    clear: right;
    width: 30%;
}
.infobox-title {
    font-size: 2em;
    text-align: center;
}
.infobox-image {
    text-align: center;
}
.infobox th.header {
    background: #916699;
    color: #000;
    font-size: 120%;
    font-weight: bold;
    padding: 0.5em;
    border-radius: .4em .4em 0 0;
    text-align: center;
    width: 20em;
}
.infobox th.subheader {
text-align: center;
    background: #916699;
    width: 20em;
    padding: 0.2em;
    font-weight: bold;
}
.infobox th {
    vertical-align: top;
    background: #c0b3cc;
    text-align: left;
    padding: 0.2em;
    padding-left: 0.4em;
    width: 7.5em;
}
.infobox td {
    vertical-align: top;
}
/*----------------------------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; }
/* End of TOC */
.classimg img {
width: auto;
height: 50px;
}
.transparent
{background: transparent;
}
.gameinfobox {
    border: 1px solid #000;
    background: #e6e6e6;
    border-radius: 0.7em;
    font-size: 100%;
    color: #000;
    margin: 0 0 1em .5em;
    padding: 0.1em;
    float: right;
    clear: right;
    width:30%;
}
}
 
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget .oo-ui-optionWidget-selected {
img{
    background: rgba(51, 102, 204, .35);
     max-width: 100%;
     border-left: 4px solid #36c;
height: auto;
    border-radius: 2px 0 0 2px;
}
}

Latest revision as of 17:53, 16 October 2021

/* ManageWiki Sidebar */
.mw-special-ManageWiki #mw-content-text .oo-ui-menuLayout {
    display: flex;
}
.mw-special-ManageWiki #mw-content-text .oo-ui-indexLayout-tabPanel,
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget {
    box-sizing: border-box;
    height: 100%;
}
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget {
    display: flex;
    flex-direction: column;
    padding-bottom: 0.5em;
    width: 160px
}
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget .oo-ui-optionWidget {
    background: none;
    border: none;
    border-left: 4px solid transparent;
}
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget .oo-ui-optionWidget .oo-ui-labelElement-label {
    border: none;
}
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget .oo-ui-optionWidget-selected {
    background: rgba(51, 102, 204, .35);
    border-left: 4px solid #36c;
    border-radius: 2px 0 0 2px;
}
Retrieved from "https://idleon.wiki/wiki/index.php?title=User:Blackwolfe/common.css&oldid=17404"