MediaWiki:Common.css: Difference between revisions

Revision as of 09:40, 14 July 2016

/* CSS placed here will be applied to all skins */

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

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

a.external[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"]{
background-size:auto 0.85em !important;

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

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

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

.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;
}

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

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

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


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

.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
}

}