Difference between revisions of "MediaWiki:Vector.css"

From Timespinner Wiki
Jump to: navigation, search
Line 219: Line 219:
 
}
 
}
  
body.page-Timespinner_Wiki img, body.page-Timespinner img {
+
body.page-Timespinner_Wiki img, body.page-Timespinner img, div.big-image img {
 
   max-width: 100%;
 
   max-width: 100%;
 
   height: auto;
 
   height: auto;

Revision as of 15:34, 18 October 2018

/* CSS placed here will affect users of the Vector skin */

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P:400);

/* Body Styling */
body {
  background: #080810 url("skins/Timespinner/background_img.png") no-repeat fixed center center;
  color:white;
}

#mw-page-base {
  background:none;
}

a:visited, a.external:visited, .mw-body a.external:visited, div#mw-panel div.portal div.body ul li a:visited  {
    color: rgb(227, 226, 129);
}

#p-personal a, #p-personal a.new, p-personal a:visited, #p-personal a.new:visited {
    color: rgb(227, 226, 129);
    text-decoration:none;
}

div#p-personal {
   top: 0.6em;
}

.previewnote p {
    color: #ff7676;
}

div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited {
    color: rgb(227, 226, 129);
}

a, a.external, .mw-body a.external, div#mw-panel div.portal div.body ul li a {
    color: rgb(227,226,129);
}

a.new {
    color: #ff9d9d;
}

.mw-body {
  border: 1px solid #301818;
  margin-right: 15px;
  background-color: rgba(43, 34, 34, 0.93);
  min-height:500px;
  margin-bottom: 60px;
  color:#ffffff;
}

.editOptions {
    background-color: rgba(0,0,0,0.31);
    color: white;
}

div.mw-number-text {
    color: white;
}

td.diff-deletedline .diffchange, td.diff-addedline .diffchange {
    color: black;
}

#contentSub, #contentSub2 {
    color: white;
}

.catlinks {
    border: 1px solid #aaa;
    background-color: rgba(0,0,0,0.17);
}

#toc, .toc {
    background-color: rgba(0, 0, 0, 0.18);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
    color: white;
}

#topnavbar a {
    width:100%;
    height: 100%;
    display:block;
}

/* Sidebar Styling */

div#mw-panel {
  border: 1px solid #301818;
   left: -12px;
   background-color: rgba(43, 34, 34, 0.93);
   padding-bottom: 15px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   margin-top: 190px;
}

div#mw-panel div.portal h3 {
  color:#d2d2d2;
}

#p-logo {
    margin-top: -140px;
    padding-left: 10px;
    margin-bottom: -30px;
}

ul {
    list-style-image: none;
}

#pagehistory li.selected {
    background-color: rgba(0,0,0,0.31);
}

/* Footer Styling */

div#footer {
  background: rgba(0, 0, 0, 0.8) none repeat scroll 0% 0%;
  width: 100%;
  padding: 0px !important;
  margin-top: 20px !important;
  bottom: 0px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #C2C8CF;
}

div#footer a {
  color:white;
}

div#footer ul {
  padding-left: 190px;
  padding-right: 15px;
}

div#footer ul li {
  color:#C2C8CF;
}

div.thumbinner {
    border: 1px solid #9E9E9E;
    background-color: rgba(255,255,255,0.13);
}

/* Mediawiki page tabs */
#mw-head {
    top: 63px;
}

div#mw-head div.vectorMenu h3, div.vectorTabs ul, div.vectorTabs li.selected, div.vectorTabs ul li, div.vectorTabs, div.vectorTabs span {
  background:none;
}

div.vectorTabs li a {
  color: rgb(227,226,129);
}

div.vectorTabs li.new a, div.vectorTabs li.new a:visited, div.vectorMenu h3 span, div.vectorMenu li a {
  color: rgb(227,226,129);
}

div.vectorMenu div.menu {
  background-color: rgba(0,0,0,0.18);
}

/* Social Media Links */
div.sociallinks {
   float: right;
   padding-top: 9px;
}

.sociallinks img {
   -webkit-filter: opacity(25%) brightness(0);  /* Chrome, Safari, Opera */
   filter: opacity(25%) brightness(0);
}

.sociallinks img:hover {
   -webkit-filter: opacity(100%) brightness(100%);  /* Chrome, Safari, Opera */
   filter: opacity(100%) brightness(100%);
}

body.page-Pocket_Rumble_Wiki div.sociallinks {
   display:none;
}

.main-logo {
    margin-bottom: -95px;
}

/* Table Styling */
table.wikitable {
    background-color: rgba(0, 0, 0, 0.17);
    color: white;
}

table.wikitable > tr > th, table.wikitable > * > tr > th {
    background-color: rgba(0, 0, 0, 0.31);
}

table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
    border-color: ##2e222b;
}

/* TOC Class for number removal */
.noautonum .tocnumber { 
    display: none;
}

/* Main Page Styling */

body.page-Timespinner_Wiki h1.firstHeading, body.page-Timespinner_Wiki #contentSub, body.page-Timespinner_Wiki #contentSub2 {
   display: none;
}

body.page-Timespinner_Wiki img, body.page-Timespinner img, div.big-image img {
   max-width: 100%;
   height: auto;
}

div#mainpage_details {
   width: 600px;
   margin: auto;
   margin-top: -100px;
}

div#Lunais_Sprite {
   margin-top: 10px;
   float: left;
}

#twitterframe {
    background-color: rgba(0, 0, 0, 0.17);
}

#twitterframe iframe {
    max-height: 854px;
}

.mainpagetable, .mainpagetable img {
   max-width: 100%;
   height: auto;
}

#mainbannerright img {
   max-width: 330px;
   height: auto;
}

#mainbannerleft img {
   max-width: 295px;
   height: auto;
}

#mainlinks {
    width: 100%;
}

#mainlinks td {
    height: 170px;
    vertical-align: top;
}

table#main_menu.wikitable {
    width: 100%;
}

table#main_menu.wikitable th {
    width: 33%;
}

table#main_menu.wikitable a {
    color: rgb(227,226,129);
}

/* Template Styling */
.infoboxwrapper {
   float: right;
   min-width: 300px;
   max-width: 350px;
   background-color:#181818;
   margin-bottom: 20px;
   margin-left: 10px;
   box-shadow: 0 -2px #3a230b inset, 0 -4px #a9a660 inset, 0 -6px #5b5335 inset, 0 2px #ebe6c6 inset, 0 4px #a9a660 inset, 0 6px #39230a inset, -2px 0 #181818 inset, -4px 0 #39230a inset, 2px 0 #181818 inset, 4px 0 #39230a inset;
}

.infobox {
   padding: 6px;
}

.infoboxtable {
   width: 100%;
}

.infobox_title {
   text-align:center;
   font-family: CelticTime;
   color: #e5dfbf;
   font-size: 32px;
   line-height: 0.7em;
   text-shadow: 0 2px #4c3f19;
}

.infobox_img {
   padding:20px;
}

.left_border_top {
   background: url("skins/Timespinner/infobox_left_corner.png") no-repeat left top;
}

.left_border_bottom {
   background: url("skins/Timespinner/infobox_left_bottom.png") no-repeat left bottom;
}

.right_border_top {
   background: url("skins/Timespinner/infobox_right_corner.png") no-repeat right top;
}

.right_border_bottom {
   background: url("skins/Timespinner/infobox_right_bottom.png") no-repeat right bottom;
}

.infobox div#toc.toc {
    float: right;
    margin-top: 10px;
}

.template-character {
    border: 5px black solid;
    background-color: rgba(0, 0, 0, 0.18);
    box-shadow: 7px 7px rgba(0, 0, 0, 0.4);
    min-width: 300px;
    border-radius: 15px;
    margin-left: 15px;
    margin-bottom: 8px;
}

.template-character img {
    min-width: 146px;
    height: auto;
    image-rendering: pixelated;
}

.character-title {
    font-size: 24px;
    color: white;
    text-shadow: 0px 2.5px 0px rgba(0,0,0,0.5);
}

/* Navboxstyling */
#navbox {
   margin:auto;
   width:80%;
   border: 1px solid rgb(132, 174, 236);
   padding: 5px; 
   border-radius:11px;
   clear: both;
   margin-top: 15px;
}

.game-menu-text {
    font-family: CelticTime;
    font-size: 32px;
    line-height: 0;
    text-shadow: 0 2px #4c3f19;
}

/* Controls Tables */

table.controls img, .pixelated {
    image-rendering: pixelated;
}

.frames {
    font-family: 'Press Start 2P';
    font-size:16px;
}

.frames-green {
    color:#64ff64;
    min-width: 40px;
    text-align: center;
    text-shadow: 2px 2px #234b23;
}

.frames-yellow {
    color:#ffff64;
    min-width: 40px;
    text-align: center;
    text-shadow: 2px 2px #4b4b23;
}

.frames-red {
    color:#ff2e2e;
    min-width: 40px;
    text-align: center;
    text-shadow: 2px 2px #4a1414;
}

ul#filetoc, table.mw_metadata td {
    background-color: rgba(0,0,0,0.31);
}

/* Preferences Pages Styling */
#preferences {
    background-color: rgba(0,0,0,0.17);
    color: white;
}

.htmlform-tip, #preferences legend {
    color: white;
}

#preftoc a, #preftoc a:active {
    color: rgb(227, 226, 129);
}

.mw-email-not-authenticated .mw-input, .mw-email-none .mw-input {
    background-color: rgba(255, 192, 192, 0.33);
    color: white;
}

/* Responsive styling */
@media screen and (max-width: 1600px) {
    #mainbannerleft {
        display: none;
    }
    #mainbannermiddle {
        width: 60%;
    }
}

@media screen and (max-width: 1400px) {
    #menucontent {
        font-size:12px;
    }
    th#sidebar, td#sidebar, td#mainbannerright {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    th#devblog, td#devblog {
        display: none;
    }
}

@media screen and (max-width: 1150px) {
    div#mainpage_details {
        margin-top: -60px;
    }
}

@media screen and (max-width: 900px) {
    #features {
        display: none;
    }
}

@media screen and (max-width: 700px) {
    .mw-body, #left-navigation {
        margin-left: 8px;
        margin-right: 8px;
    }
    div#mw-panel {
        display: none;
    }
    div#footer ul {
        padding-left: 15px;
    }
}

@media screen and (max-width: 575px) {
    .main-logo {
        margin-bottom: -45px;
    }
}

@media screen and (max-width: 425px) {
    .main-logo {
        margin-top: 45px;
    }
}