User:Gyz/vector.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
/*eye candy*/ | |||
/*You must retain the following four lines of code for any kind of customization I do!*/ | /*You must retain the following four lines of code for any kind of customization I do!*/ | ||
body | body | ||
Line 8: | Line 9: | ||
{ | { | ||
visibility:visible; | visibility:visible; | ||
position:fixed; | position:fixed; | ||
top:0px; | top:0px; | ||
left: | left:-9.5em; | ||
padding-top:0; | |||
background-color:#F3F3F3; | background-color:#F3F3F3; | ||
border-right:1px solid #A7D7F9; | border-right:1px solid #A7D7F9; | ||
opacity:0.9; | opacity:0.9; | ||
filter:alpha(opacity=90); | filter:alpha(opacity=90); | ||
overflow-y: | overflow-y:scroll; | ||
overflow-x:hidden; | overflow-x:hidden; | ||
z-index:2; | z-index:2; | ||
height:100%; | height:100%; | ||
box-shadow:0 0 10px 0 #000000; | |||
transition:left 0.2s ease-out; | |||
-webkit-transition:left 0.2s ease-out; | |||
-moz-transition:left 0.2s ease-out; | |||
-o-transition:left 0.2s ease-out; | |||
} | } | ||
#mw-panel | div#mw-panel div.portal | ||
{ | { | ||
overflow: | overflow:visible; | ||
} | } | ||
div#mw-panel div#p-navigation | div#mw-panel div#p-navigation | ||
{ | { | ||
margin: | padding-top:0em; | ||
margin-top:160px; | |||
} | |||
div#mw-panel:hover | |||
{ | |||
left:0; | |||
} | } | ||
div#p-logo | div#p-logo | ||
{ | { | ||
position:fixed; | position:fixed; | ||
left: | left:-9.5em; | ||
width:9em; | width:9em; | ||
top:0px; | |||
top: | |||
overflow:hidden; | overflow:hidden; | ||
background-color: | background-color:#F3F3F3; | ||
z-index:1 | |||
opacity:0.9 | |||
filter:alpha(opacity=90); | |||
box-shadow:-2.5px 0 5px 0 #000000; | |||
transition:left 0.2s ease-out; | |||
-webkit-transition:left 0.2s ease-out; | |||
-moz-transition:left 0.2s ease-out; | |||
-o-transition:left 0.2s ease-out; | |||
} | } | ||
div#p-logo a | div#p-logo a | ||
{ | { | ||
position:absolute; | |||
width: | width:140px; | ||
} | |||
div#mw-panel:hover div#p-logo | |||
{ | |||
left:0em | |||
} | } | ||
div#mw-head-base | div#mw-head-base | ||
Line 79: | Line 80: | ||
margin-left:10px; | margin-left:10px; | ||
} | } | ||
div#left-navigation | |||
{ | { | ||
left:10em; | left:10em; | ||
} | } | ||
div#footer | |||
{ | { | ||
margin-left:10px; | margin-left:10px; | ||
Line 93: | Line 94: | ||
{ | { | ||
position:fixed; | position:fixed; | ||
margin:0 0 0 10em; | |||
padding:0; | padding:0; | ||
bottom: | bottom:-15px; | ||
left: | left:2em; | ||
background-color:#CEE0F2; | |||
overflow-y:auto; | height:40px; | ||
vertical-align:bottom; | |||
overflow-y:hidden; | |||
opacity:0.3; | |||
filter:alpha(opacity=30); | |||
box-shadow:0 0 10px 0 #AAAAAA; | |||
z-index:4; | |||
} | |||
div>table[style]:nth-last-child(4)>tbody:hover,div>table[style]:nth-last-child(5)>tbody:hover | |||
{ | |||
bottom:0; | |||
height:auto; | |||
background-color:transparent; | |||
opacity:0.9; | opacity:0.9; | ||
filter:alpha(opacity=90); | filter:alpha(opacity=90); | ||
transition:opacity 0.1s linear; | |||
-webkit-transition:opacity 0.1s linear; | |||
-moz-transition:opacity 0.1s linear; | |||
-o-transition:opacity 0.1s linear; | |||
} | } | ||
div>table[style]:nth-last-child(4) td, div>table[style]:nth-last-child(4) th,div>table[style]:nth-last-child(5) td, div>table[style]:nth-last-child(5) th | div>table[style]:nth-last-child(4) td, div>table[style]:nth-last-child(4) th,div>table[style]:nth-last-child(5) td, div>table[style]:nth-last-child(5) th | ||
{ | { | ||
height:40px; | |||
} | } | ||
div>table[style]:nth-last-child(4) | div>table[style]:nth-last-child(4)>tbody:hover td,div>table[style]:nth-last-child(4)>tbody:hover th,div>table[style]:nth-last-child(5)>tbody:hover td,div>table[style]:nth-last-child(5)>tbody:hover th | ||
{ | { | ||
height:auto; | |||
vertical-align:middle; | |||
background-color:#F8F8F8; | |||
} | } | ||
/*section end*/ | /*section end*/ | ||
Line 119: | Line 134: | ||
ol.references | ol.references | ||
{ | { | ||
background-color:# | background-color:#000000; | ||
border:1px solid #000000; | border:1px solid #000000; | ||
margin:0; | margin:0; | ||
padding:0 0.25em 0 2. | padding:0 0.25em 0 2.25em; | ||
position:fixed; | position:fixed; | ||
bottom:0; | bottom:0; | ||
right:0; | |||
width: | width:40em; | ||
height: | height:25px; | ||
max-height:100%; | |||
min-height:25px; | |||
overflow-y:auto; | overflow-y:auto; | ||
z-index:1; | opacity:0.07; | ||
filter:alpha(opacity=7); | |||
z-index:3; | |||
box-shadow:0 0 10px 0 #AAAAAA; | |||
} | |||
ol.references:hover | |||
{ | |||
background-color:#FFFFFF; | |||
width:40em; | |||
height:auto; | |||
opacity:1; | |||
filter:alpha(opacity=100); | |||
transition:opacity 0.1s linear; | |||
-webkit-transition:opacity 0.1s linear; | |||
-moz-transition:opacity 0.1s linear; | |||
-o-transition:opacity 0.1s linear; | |||
} | } | ||
/*section end*/ | /*section end*/ | ||
Line 149: | Line 181: | ||
top:-1px; | top:-1px; | ||
left:0; | left:0; | ||
opacity:0.25; | |||
filter:alpha(opacity=25); | |||
box-shadow:-5px -5px 10px -5px #AAAAAA inset; | |||
transition:opacity 0.15s ease-out; | |||
-webkit-transition:opacity 0.15s ease-out; | |||
-moz-transition:opacity 0.15s ease-out; | |||
-o-transition:opacity 0.15s ease-out; | |||
} | |||
div#mw-head:hover | |||
{ | |||
opacity:1; | |||
filter:alpha(opacity=100); | |||
transition:opacity 0.1s cubic-bezier(0.5,0,1,0); | |||
-webkit-transition:opacity 0.1s cubic-bezier(0.5,0,1,0); | |||
-moz-transition:opacity 0.1s cubic-bezier(0.5,0,1,0); | |||
-o-transition:opacity 0.1s cubic-bezier(0.5,0,1,0); | |||
} | } | ||
div#left-navigation | div#left-navigation |
Latest revision as of 07:10, 3 April 2012
/*eye candy*/ /*You must retain the following four lines of code for any kind of customization I do!*/ body { height:100%; } /*Hides navbar*/ div#mw-panel { visibility:visible; position:fixed; top:0px; left:-9.5em; padding-top:0; background-color:#F3F3F3; border-right:1px solid #A7D7F9; opacity:0.9; filter:alpha(opacity=90); overflow-y:scroll; overflow-x:hidden; z-index:2; height:100%; box-shadow:0 0 10px 0 #000000; transition:left 0.2s ease-out; -webkit-transition:left 0.2s ease-out; -moz-transition:left 0.2s ease-out; -o-transition:left 0.2s ease-out; } div#mw-panel div.portal { overflow:visible; } div#mw-panel div#p-navigation { padding-top:0em; margin-top:160px; } div#mw-panel:hover { left:0; } div#p-logo { position:fixed; left:-9.5em; width:9em; top:0px; overflow:hidden; background-color:#F3F3F3; z-index:1 opacity:0.9 filter:alpha(opacity=90); box-shadow:-2.5px 0 5px 0 #000000; transition:left 0.2s ease-out; -webkit-transition:left 0.2s ease-out; -moz-transition:left 0.2s ease-out; -o-transition:left 0.2s ease-out; } div#p-logo a { position:absolute; width:140px; } div#mw-panel:hover div#p-logo { left:0em } div#mw-head-base { margin-left:10px; } div#mw-head { margin-left:10px; } div#content { position:relative; left:0; margin-left:10px; } div#left-navigation { left:10em; } div#footer { margin-left:10px; } /*section end*/ /*Page navigation adjustment*/ div>table[style]:nth-last-child(4)>tbody,div>table[style]:nth-last-child(5)>tbody { position:fixed; margin:0 0 0 10em; padding:0; bottom:-15px; left:2em; background-color:#CEE0F2; height:40px; vertical-align:bottom; overflow-y:hidden; opacity:0.3; filter:alpha(opacity=30); box-shadow:0 0 10px 0 #AAAAAA; z-index:4; } div>table[style]:nth-last-child(4)>tbody:hover,div>table[style]:nth-last-child(5)>tbody:hover { bottom:0; height:auto; background-color:transparent; opacity:0.9; filter:alpha(opacity=90); transition:opacity 0.1s linear; -webkit-transition:opacity 0.1s linear; -moz-transition:opacity 0.1s linear; -o-transition:opacity 0.1s linear; } div>table[style]:nth-last-child(4) td, div>table[style]:nth-last-child(4) th,div>table[style]:nth-last-child(5) td, div>table[style]:nth-last-child(5) th { height:40px; } div>table[style]:nth-last-child(4)>tbody:hover td,div>table[style]:nth-last-child(4)>tbody:hover th,div>table[style]:nth-last-child(5)>tbody:hover td,div>table[style]:nth-last-child(5)>tbody:hover th { height:auto; vertical-align:middle; background-color:#F8F8F8; } /*section end*/ /*References adjustment*/ ol.references { background-color:#000000; border:1px solid #000000; margin:0; padding:0 0.25em 0 2.25em; position:fixed; bottom:0; right:0; width:40em; height:25px; max-height:100%; min-height:25px; overflow-y:auto; opacity:0.07; filter:alpha(opacity=7); z-index:3; box-shadow:0 0 10px 0 #AAAAAA; } ol.references:hover { background-color:#FFFFFF; width:40em; height:auto; opacity:1; filter:alpha(opacity=100); transition:opacity 0.1s linear; -webkit-transition:opacity 0.1s linear; -moz-transition:opacity 0.1s linear; -o-transition:opacity 0.1s linear; } /*section end*/ /*Top bar adjustment*/ div#mw-page-base { height:3.5em; } div#mw-head { position:fixed; background-color:white; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAIAAAArRUU2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADpJREFUeF5VjUkOAEAIwoD//7lzGJd4MJHGSoBImkFETP67CdLldUd7KC6f8fv3+psd8znbtU5x354HaWQjOx76v7MAAAAASUVORK5CYII=); background-position:bottom left; background-repeat:repeat-x; border-bottom:1px solid #A7D7F9; height:3.5em; top:-1px; left:0; opacity:0.25; filter:alpha(opacity=25); box-shadow:-5px -5px 10px -5px #AAAAAA inset; transition:opacity 0.15s ease-out; -webkit-transition:opacity 0.15s ease-out; -moz-transition:opacity 0.15s ease-out; -o-transition:opacity 0.15s ease-out; } div#mw-head:hover { opacity:1; filter:alpha(opacity=100); transition:opacity 0.1s cubic-bezier(0.5,0,1,0); -webkit-transition:opacity 0.1s cubic-bezier(0.5,0,1,0); -moz-transition:opacity 0.1s cubic-bezier(0.5,0,1,0); -o-transition:opacity 0.1s cubic-bezier(0.5,0,1,0); } div#left-navigation { position:fixed; top:1em; z-index:1; } div#right-navigation { position:fixed; right:0; top:1em; margin-top:0; z-index:1; } div#p-personal { position:fixed; right:0.75em; z-index:2; } /*section end*/