imported>Blackwolfe |
imported>Blackwolfe |
| Line 1: |
Line 1: |
| /* Background Image */
| |
| #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: #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;
| |
| flex-flow: column;
| |
| margin-right: 0.9rem;
| |
| }
| |
|
| |
| .mainpage-left > * {
| |
| margin: 0 0 0.9rem;
| |
| }
| |
|
| |
| .mainpage-right {
| |
| flex: 0.999;
| |
| display: flex;
| |
| flex-flow: column;
| |
| }
| |
|
| |
| .mainpage-right > * {
| |
| margin: 0 0 0.9rem;
| |
| }
| |
| .main-box { /* MAIN BOX - the yellow box, container of all*/
| |
| display: flex;
| |
| border: 1px solid #b0ad9b;
| |
| background: #e6e6e6; /* distance from page borders - middle value is distance from sides */
| |
| }
| |
| .main-box h3 { /* Header over tiles */
| |
| font-size: 1.4em;
| |
| font-weight: bold;
| |
| 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%;
| |
| }
| |
|
| |
| img{
| |
| max-width: 100%;
| |
| height: auto;
| |
| }
| |
