imported>Sacrezar |
imported>Sacrezar |
| (5 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* Custom Fonts and Fontoverriding */ | | /* --------------------------Prayers --------------------------- */ |
| @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 */
| | .prayerFlex { |
| .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; | | flex-wrap: wrap; |
| display: flex; | | display: flex; |
| justify-content:space-between; | | justify-content:space-between; |
| } | | } |
| .skillDiv { | | .prayerDiv { |
| display: inline-block; | | display: inline-block; |
| flex: 48%; | | flex: 48%; |
| flex-grow:0; | | flex-grow:0; |
| margin-bottom:1em; | | margin-bottom:0em; |
| }
| |
| .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 { | | .prayerDiv div p { |
| position: -webkit-sticky;
| | display: block !important; |
| position: sticky;
| | margin: 0px !important; |
| top: 20px;
| | border: 0px !important; |
| | padding: 0px !important; |
| } | | } |
