MediaWiki:Common.css

From Drive: The SciFi Comic
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */


/* custom icon for external links to drivecomic.com, sheldoncomics.com, patreon.com, and gocomics.com */

a.external[href*="drivecomic.com"],#mw-panel a[href*="drivecomic.com"]{
background-image:url(http://drive.mcslp.net/images/a/a4/Externallogo.gif);
}

a.external[href*="sheldoncomics.com"],#mw-panel a[href*="sheldoncomics.com"]{
background-image:url(http://drive.mcslp.net/images/6/69/Sheldonarthur.png);
background-size:contain !important;
background-position: center right;
background-repeat: no-repeat;
padding-right: 1.75em;
}

a.external[href*="patreon.com"],#mw-panel a[href*="patreon.com"]{
background-image:url(http://drive.mcslp.net/images/6/68/Patreon.png);
}

a.external[href*="patreon.com"],a.external[href*="drivecomic.com"],#mw-panel a[href*="patreon.com"],#mw-panel a[href*="drivecomic.com"]{
background-size:auto 0.85em !important;
background-position: center right;
background-repeat: no-repeat;
padding-right: 1em;
}

a.external[href*="gocomics.com"],#mw-panel a[href*="gocomics.com"]{
background-image:url(http://drive.mcslp.net/images/0/05/GoComics_favicon.png);
padding-right:1.25em;
}

/*logo fix*/
.mw-wiki-logo{
background-size: contain;
}

/*hide Categories from Main Page*/
body.page-Main_Page #catlinks { display : none }

/* no external link arrow for links to this wiki */
a.external[href*="drive.mcslp.net"] {
    background: none !important;
    padding-right: 0 !important;
}


/*toggle location*/
/* leave toggle on the right for tables */
.tablecollapse span.mw-collapsible-toggle{
  float:right !important;
}
 
 /* put it on the left for everything else */
.mw-collapsible span.mw-collapsible-toggle {
    display:inline-block !important;
    float:none !important;
}

/* Standard Navigationsleisten, aka box hiding thingy
   from .de.  Documentation at [[Wikipedia:NavFrame]]. */
div.NavFrame {
    margin: 0;
    padding: 4px;
    border: 1px solid #aaa;
    text-align: center;
    border-collapse: collapse;
    font-size: 95%;
}
div.NavFrame + div.NavFrame {
    border-top-style: none;
    border-top-style: hidden;
}
div.NavPic {
    background-color: #fff;
    margin: 0;
    padding: 2px;
    /* @noflip */
    float: left;
}
div.NavFrame div.NavHead {
    height: 1.6em;
    font-weight: bold;
    background-color: #ccf;
    position: relative;
}
div.NavFrame p,
div.NavFrame div.NavContent,
div.NavFrame div.NavContent p {
    font-size: 100%;
}
div.NavEnd {
    margin: 0;
    padding: 0;
    line-height: 1px;
    clear: both;
}
a.NavToggle {
    position: absolute;
    top: 0;
    /* @noflip */
    right: 3px;
    font-weight: normal;
    font-size: 90%;
}

/****************************************************
 * Styles for the starry box (copyright template) *
 ****************************************************/

.starry{
background-image:url('/images/6/69/Alnilam-Stars-Pattern.png'); /* starry background image */
clear:both;
}

.starry img{
display:block;
margin:auto;
max-width:100%; /* make image fit into box */
height:auto;
}

.copyright a.external.free{
text-overflow: ellipsis;
max-width: 30ch; /* shorten links */
overflow: hidden;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}

/*******************************************************************
 * Styles for the Nav (navigation box) template                    *
 *******************************************************************/

.nav{
white-space: nowrap;
color:white;
text-transform: uppercase;
background:darkred;
font-family: Consolas, Courier New, monospace;
display:table;
margin:auto;
padding:2px 10px;
transform: perspective(10px) rotateX(4deg); /* transform rectangle into trapez */
box-shadow: 0px 1px 5px rgb(0, 0, 0);
background:linear-gradient(darkred,darkred,rgba(255,10,10,.9));
}

.navcontent{
transform: perspective(10px) rotateX(-4deg); /* don't let transformation of .nav affect the font */
}

.navcontent a{
text-shadow:0 0 4px #000;
color:white;
text-decoration:none;
display:inline-block;
padding-left: 2ch;
margin-left: -2ch;
padding-right: 2ch;
margin-right: -2ch;
font-weight:400;
}

.navcontent a:hover{
text-shadow:0 0 4px #fff;
}

.navcontent a.new{
color: #BA0000;
}

/**********
 * mobile * 
 **********/


@media handheld,screen and (max-width: 600px),screen and (max-device-width: 600px){

.mw-body{
margin-left:0 !important;
}

#mw-panel{
position:initial !important;
top:0 !important;
width:100% !important;
}

#mw-panel .portal{
float:left;
}

#p-search{
width:80%;
margin-left:5%;
position: absolute;
top: 1.5em;
}

#simpleSearch{
width:100% !important;
font-size:130%;
height:initial;
}

#searchInput{
font-size:inherit !important;
}

#right-navigation{
float:none;
}

#right-navigation,#left-navigation,body{
padding-top: 2em;
}

#left-navigation{
margin-left:1.5%;
}

.mw-body-content{
font-size:initial !important;
}

#p-cactions,#p-views{
float:right;
}

#p-personal ul{
padding:0;
}

#p-personal li,.body .h3,.body ul li{
font-size:0.85em
}

}