User:Ret Samys/common.css: Difference between revisions

From Drive: The SciFi Comic
Jump to navigation Jump to search
No edit summary
(getting closer to getting the design to mimic drivecomic.com)
Line 1: Line 1:
@media screen and (min-width: 1000px){
html{
html{
background: url(http://drive.mcslp.net/images/6/69/Alnilam-Stars-Pattern.png);
background: url(http://drive.mcslp.net/images/6/69/Alnilam-Stars-Pattern.png);
Line 5: Line 7:
body{
body{
background: linear-gradient(rgba(0,0,0,.9),transparent,transparent);
background: linear-gradient(rgba(0,0,0,.9),transparent,transparent);
}
#mw-page-base{
background:transparent;
}
#mw-page-base:after {   
content:'\A';   
position:absolute;   
background:white;   
top:0;
bottom:0;   
left:0;     
height:5px;
width:100%;
}
#personal,#right-navigation,#mw-panel{
width:14%;
}
}


#content{
#content{
margin: auto !important;
margin: auto !important;
width: 80% !important;
width: 70% !important;
border-radius: 10px !important;
border-radius: 10px !important;
box-shadow: 0 0 15px black,0 0 10px rgba(0,0,255,.3) inset !important;
box-shadow: 0 0 15px black,0 0 10px rgba(0,0,255,.3) inset !important;
Line 21: Line 43:
}
}


#content-body b,#content-body strong{
#content b,#content strong,#content a{
/*color: black;*/
/*color: black;*/
font-weight:900;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
}
Line 32: Line 55:
.vectorTabs{
.vectorTabs{
background:initial !important;
background:initial !important;
position: absolute;
position: absolute !important;
z-index: 2;
z-index: 2 !important;
margin: auto;
margin: auto !important;
left: 0;
padding:0 !important;
right: 0;
left: 0 !important;
display: table;
right: 0 !important;
background: linear-gradient(darkred,darkred ,rgba(255,10,10,.9)) transparent !important;
display: table !important;
background: rgb(200,40,40) !important;
height: 2em !important;
height: 2em !important;
}
}
Line 52: Line 76:
#left-navigation .vectorTabs:before {
#left-navigation .vectorTabs:before {
content: "\A";
content: "\A";
background: linear-gradient(-45deg, rgba(255,10,10,.9),darkred,darkred,rgba(255,10,10,.9),darkred,darkred);
background: rgb(200,40,40);
width: 2em;
width: 2em;
height: 5em;
height: 4.8em;
transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
position: absolute;
Line 61: Line 85:
}
}


.vectorTabs ul, .vectorTabs ul li, .vectorTabs ul li span, .vectorTabs ul li span a{
#right-navigation .vectorTabs:after{
content: "\A";
background: rgb(200,40,40);
width: 2em;
height: 4.8em;
transform: rotate(-45deg);
position: absolute;
 
z-index: -1;
}
 
.vectorTabs ul, .vectorTabs ul li,.vectorTabs ul li span{
margin: 0 !important;
margin: 0 !important;
padding: 0 !important;
padding: 0 !important;
background:initial !important;
background:initial !important;
}
.vectorTabs ul{
padding-top:.4em !important;
}
.vectorTabs a{
white-space: nowrap;
color: white !important;
text-transform: uppercase;
font-family: Consolas,Courier New,monospace;
padding-left:.7em !important;
padding-right:.7em !important;
padding-top:0 !important;
font-size:1em !important;
height:1em !important;
overflow:hidden !important;
border-left:solid white 2px;
border-right:solid white 2px;
}
.vectorTabs li.icon a{
line-height: 3em !important;
max-width: 5px !important;
overflow: hidden !important;
}
.vectorMenu{
top:-.5em;
z-index:6;
}
}
}

Revision as of 07:45, 8 February 2017

@media screen and (min-width: 1000px){

html{
background: url(http://drive.mcslp.net/images/6/69/Alnilam-Stars-Pattern.png);
}

body{
background: linear-gradient(rgba(0,0,0,.9),transparent,transparent);
}

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

#mw-page-base:after {     
content:'\A';     
position:absolute;     
background:white;     
top:0; 
bottom:0;     
left:0;      
height:5px;
width:100%;
}


#personal,#right-navigation,#mw-panel{
width:14%;
}

#content{
margin: auto !important;
width: 70% !important;
border-radius: 10px !important;
box-shadow: 0 0 15px black,0 0 10px rgba(0,0,255,.3) inset !important;
color: #02425B !important;
font-family: "Trebuchet MS", Helvetica, sans-serif !important;
font-weight: 500 !important;
left: 0 !important;
right: 0 !important;
position:absolute !important;
z-index:5 !important;
}

#content b,#content strong,#content a{
/*color: black;*/
font-weight:900;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#left-navigation,#right-navigation{
margin-top:3em !important;
}

.vectorTabs{
background:initial !important;
position: absolute !important;
z-index: 2 !important;
margin: auto !important;
padding:0 !important;
left: 0 !important;
right: 0 !important;
display: table !important;
background: rgb(200,40,40) !important;
height: 2em !important;
}

#right-navigation .vectorTabs{
transform: translateX(50%);
}

#left-navigation .vectorTabs{
transform: translateX(-50%);
}

#left-navigation .vectorTabs:before {
content: "\A";
background: rgb(200,40,40);
width: 2em;
height: 4.8em;
transform: rotate(45deg);
position: absolute;
left: -2em;
z-index: -1;
}

#right-navigation .vectorTabs:after{
content: "\A";
background: rgb(200,40,40);
width: 2em;
height: 4.8em;
transform: rotate(-45deg);
position: absolute;

z-index: -1;
}

.vectorTabs ul, .vectorTabs ul li,.vectorTabs ul li span{
margin: 0 !important;
padding: 0 !important;
background:initial !important;
}

.vectorTabs ul{
padding-top:.4em !important;
}

.vectorTabs a{
white-space: nowrap;
color: white !important;
text-transform: uppercase;
font-family: Consolas,Courier New,monospace;
padding-left:.7em !important;
padding-right:.7em !important;
padding-top:0 !important;
font-size:1em !important;
height:1em !important;
overflow:hidden !important;
border-left:solid white 2px;
border-right:solid white 2px;
}

.vectorTabs li.icon a{
line-height: 3em !important;
max-width: 5px !important;
overflow: hidden !important;
}

.vectorMenu{
top:-.5em;
z-index:6;
}
}