Difference between revisions of "User:Gyz/vector.css"
Jump to navigation
Jump to search
(46 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | /*eye candy*/ |
||
− | /*You must need 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 11: | Line 12: | ||
top:0px; |
top:0px; |
||
left:-9.5em; |
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; |
||
− | padding-top:0; |
||
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; |
||
} |
} |
||
div#mw-panel div.portal |
div#mw-panel div.portal |
||
Line 27: | Line 33: | ||
div#mw-panel div#p-navigation |
div#mw-panel div#p-navigation |
||
{ |
{ |
||
+ | padding-top:0em; |
||
margin-top:160px; |
margin-top:160px; |
||
} |
} |
||
Line 41: | Line 48: | ||
overflow:hidden; |
overflow:hidden; |
||
background-color:#F3F3F3; |
background-color:#F3F3F3; |
||
+ | z-index:1 |
||
− | border-bottom:2px solid #E0E0E0; |
||
+ | opacity:0.9 |
||
− | z-index:3 |
||
+ | 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 |
div#mw-panel:hover div#p-logo |
||
Line 49: | Line 67: | ||
} |
} |
||
div#mw-head-base |
div#mw-head-base |
||
+ | { |
||
+ | margin-left:10px; |
||
+ | } |
||
+ | div#mw-head |
||
{ |
{ |
||
margin-left:10px; |
margin-left:10px; |
||
Line 66: | Line 88: | ||
margin-left:10px; |
margin-left:10px; |
||
} |
} |
||
+ | /*section end*/ |
||
− | /*Page navigation*/ |
+ | /*Page navigation adjustment*/ |
− | table[style] |
+ | div>table[style]:nth-last-child(4)>tbody,div>table[style]:nth-last-child(5)>tbody |
{ |
{ |
||
position:fixed; |
position:fixed; |
||
− | margin:0; |
+ | margin:0 0 0 10em; |
− | padding:0 |
+ | padding:0; |
bottom:-15px; |
bottom:-15px; |
||
+ | left:2em; |
||
− | background-color:#A7D7F9; |
||
− | + | background-color:#CEE0F2; |
|
− | height: |
+ | height:40px; |
vertical-align:bottom; |
vertical-align:bottom; |
||
overflow-y:hidden; |
overflow-y:hidden; |
||
− | opacity:0. |
+ | opacity:0.3; |
− | filter:alpha(opacity= |
+ | filter:alpha(opacity=30); |
+ | box-shadow:0 0 10px 0 #AAAAAA; |
||
+ | z-index:4; |
||
} |
} |
||
− | table[style] |
+ | 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; |
background-color:transparent; |
||
− | border-color:#AAAAAA; |
||
− | height:40px; |
||
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 |
||
− | table[style] td |
||
{ |
{ |
||
+ | height:40px; |
||
− | vertical-align:bottom; |
||
} |
} |
||
+ | 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 |
||
− | table[style] tbody:hover td |
||
{ |
{ |
||
+ | height:auto; |
||
+ | vertical-align:middle; |
||
background-color:#F8F8F8; |
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*/ |
Latest revision as of 09: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*/