MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
mNo edit summary |
||
| (78 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
.starry{background-image:url('/images/6/69/Alnilam-Stars-Pattern.png');} | |||
/* 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{ | .starry img{ | ||
display:block; | display:block; | ||
margin:auto; | 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{ | .nav{ | ||
color:white;text-transform: uppercase;background: | 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{ | .navcontent{ | ||
transform: perspective(10px) rotateX(-4deg); | transform: perspective(10px) rotateX(-4deg); /* don't let transformation of .nav affect the font */ | ||
} | } | ||
.navcontent a{ | .navcontent a{ | ||
text-shadow:0 0 4px #000; | |||
color:white; | color:white; | ||
text-decoration:none; | 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 | |||
} | |||
} | } | ||
Latest revision as of 04:57, 12 January 2020
/* 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
}
}