Difference between revisions of "MediaWiki:Mobile.css"
Jump to navigation
Jump to search
old>TheSatanicSanta (main page styles to match desktop) |
old>Malvodion m |
||
Line 32: | Line 32: | ||
body { | body { | ||
background-color: # | background-color: #03080e; | ||
color: #E0E0E0; | color: #E0E0E0; | ||
} | } |
Revision as of 01:44, 24 April 2018
/* CSS placed here will affect users of the mobile site */ /* Header and footer */ .header-container.header-chrome, #mw-mf-page-center { background: transparent; } /* Fonts */ @font-face { font-family: 'Volter'; src: local('Volter'), local('Volter'), url(/media/hydra/fonts/volter.ttf) format('truetype'); } #bodyContent, .footer-content { background: #171420; color: #E0E0E0; border-color: transparent; border-image: url(https://d1u5p3l4wpay3k.cloudfront.net/stoneshard_gamepedia_en/6/6a/Content_border.jpg) 25 fill round; border-width: 25px; border-style: solid; } footer .last-modified-bar { background: #161527; border-color: #9c9c9c; } footer { border-color: #9c9c9c; } body { background-color: #03080e; color: #E0E0E0; } .mw-body { background: transparent !important; } .header-chrome.header-container { border-bottom: 2px solid #9c9c9c; background: #161527; } .header-chrome.header-container h1, .header-chrome.header-container .search-box input.search { font-family: 'Volter'; } body h1#section_0 { font-family: 'Volter'; } .search-overlay { background: #000106; } footer { /* color: #e0e0e0; */ } .overlay #secondary-button.user-button, .header #secondary-button.user-button, .overlay .user-button, .header .user-button { background: transparent; } /* end header and footer */ .nomobile { display: none; } .client-js .toc-mobile { background-color: rgba(0, 0, 0, 0) !important; border: 1px solid #505050 !important; } .mw-ui-button, .last-modified-bar #mw-mf-last-modified { background-color: rgba(0, 0, 0, 0); /* color: #e0e0e0; */ } .overlay-enabled, #content { /* background: #101010; color: #e0e0e0; */ } a, a:visited, a.external { color: #5a93cc; } /* For hydradark only - makes the section collapse arrow visible */ /* .mw-ui-icon-arrow::before { filter: invert(100%); } */ .thumb, #content_wrapper .thumb, li.gallerybox div.thumb { background-color: rgba(0, 0, 0, 0); border: 1px solid #505050; } .content table th { background-color: rgba(0, 0, 0, 0); } .content table td, .content table th { border: 1px solid #505050; padding: 3px; } .content table.wikitable { background-color: rgba(0, 0, 0, 0); margin: auto; margin-bottom: 1em; } .content table.wikitable > tr > th, .content table.wikitable > tr > td, .content table.wikitable > * > tr > th, .content table.wikitable > * > tr > td { border: 1px solid #505050; } .content table.wikitable > tr > th, .content table.wikitable > * > tr > th { background-color: inherit; padding: 3px; } /* Responsive main page stuff */ /******************** /* Main menu styles * /********************/ .primary-navigation-enabled { border-left: 12px solid #505050 !important; background: #101010 !important; } #mw-mf-page-left { border-left: 12px solid #505050; background: transparent; } #mw-mf-page-left ul { background: transparent; } #mw-mf-page-left ul:first-child { border-bottom: 12px solid #505050; } #mw-mf-page-left ul li { border-top: 1px solid #505050; border-bottom: 1px solid #505050; background: transparent; text-shadow: none; } #mw-mf-page-left ul li a, #mw-mf-page-left ul.hlist li a { border: none; color: #3674b3; } #mw-mf-page-left ul li:hover { border-left: 12px solid #aaaaaa; background: #505050; } #mw-mf-page-left ul.hlist li:hover { border: none; } #mw-mf-page-left ul li:hover a, #mw-mf-page-left ul.hlist li:hover a { color: #ffffff; } /********************* /* Front page styles * /*********************/ .fpbox { border: 2px solid #000; background: #161527; color: inherit; margin: 5px; padding: 5px; } .fpbox .welcome { border-bottom: 2px solid #9c9c9c; background: transparent; color: #fff; font-family: 'Volter'; font-size: 150%; text-transform: uppercase; text-align: center; margin: 0 0 10px 0; padding: 0 0 5px 0; } .fpbox .heading { border-bottom: 2px solid #9c9c9c; background: transparent; color: #fff; font-family: 'Volter'; font-size: 132%; font-variant: small-caps; margin: 0 0 10px 0; padding: 0 0 5px 0; } .fpbox .heading .smalllink { color: #3674b3; font-weight: bold; font-size: 75%; } .fpbox hr { border: none; border-bottom: 2px solid #505050; } .fpplainbox { padding: 5px 8px 10px 8px; margin: 0 5px 10px 5px; vertical-align: top; } .fplinks { margin: -2px -3px; } .fplinks .linkslabel { border-bottom: 2px solid #505050; margin: 6px 3px 0 3px; } .fplink { display: inline-block; vertical-align: middle; width: 100%; } /* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */ .fplink .box { display: table; width: 100%; border-spacing: 2px 3px; border-collapse: separate; } .fplink .box .row { display: table-row; } .fplink .box .row .cell { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; /* background-color: #000000; background-image: -moz-linear-gradient(center top , #151515 0%, #000000 100%); background-image:-webkit-gradient(linear, center top, left bottom, color-stop(0%,#151515), color-stop(100%,#000000)); background-image:-webkit-linear-gradient(top, #151515 0%, #000000 100%); background-image:-o-linear-gradient(top, #151515 0%, #000000 100%); background-image:-ms-linear-gradient(top, #151515 0%, #000000 100%); background-image: linear-gradient(to bottom, #151515 0%, #000000 100%); */ border: 2px solid #505050; border-radius: 2px; box-shadow: 0 0 0 2px #505050 inset; /* color: #e0e0e0; */ display: table-cell; font-weight: bold; position: relative; text-align: center; text-transform: uppercase; vertical-align: middle; } .fplink.wide .box .row .cell { padding: 0 5px; } .fplink.image { width: 78px; height: 78px; } .fplink.image .box .row .cell { width: 70px; height: 70px; vertical-align: bottom; } .fplink.image .box .row .cell .image img { width: 70px; height: 70px; } .fplink.image .image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 75%; z-index: 1; } .fplink.image a { z-index: 2; } .fplink a { display: block; position: relative; top: 0; right: 0; bottom: 0; left: 0; padding: 3px 5px; } .fplink.image .image a { padding: 0; } .fplink.image .link a { border-top: 2px solid #505050; background: #ddddb7 !important; } .fplink.wide a { margin: 0 -5px; } .fplink.image a { top: auto; } .fpvideos { margin: 0 auto; overflow: hidden; text-align: center; max-width: 480px; } .fpvideo { position: relative; padding-top: 25px; padding-bottom: 56.25%; height: 0; } .fpvideo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }