Difference between revisions of "User:Gyz/vector.css"
Jump to navigation
Jump to search
(64 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | /*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 |
div#mw-panel |
||
{ |
{ |
||
visibility:visible; |
visibility:visible; |
||
position:fixed; |
position:fixed; |
||
+ | top:0px; |
||
− | resize:vertical; |
||
− | top:240px; |
||
left:-9.5em; |
left:-9.5em; |
||
+ | padding-top:0; |
||
− | background-color:#E8E8E8; |
||
+ | background-color:#F3F3F3; |
||
− | overflow-y:auto; |
||
+ | border-right:1px solid #A7D7F9; |
||
+ | opacity:0.9; |
||
+ | filter:alpha(opacity=90); |
||
+ | overflow-y:scroll; |
||
overflow-x:hidden; |
overflow-x:hidden; |
||
z-index:2; |
z-index:2; |
||
+ | height:100%; |
||
− | height:22em; /*this number sets the height of your navigation bar. The higher the number, the higher the navigation bar. Make sure you have "em" to the right of the number. The the original value I set it was 22em.*/ |
||
+ | 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 |
+ | div#mw-panel div.portal |
{ |
{ |
||
overflow:visible; |
overflow:visible; |
||
+ | } |
||
− | resize:none; |
||
+ | div#mw-panel div#p-navigation |
||
+ | { |
||
+ | padding-top:0em; |
||
+ | margin-top:160px; |
||
} |
} |
||
div#mw-panel:hover |
div#mw-panel:hover |
||
Line 25: | Line 44: | ||
position:fixed; |
position:fixed; |
||
left:-9.5em; |
left:-9.5em; |
||
− | + | width:9em; |
|
+ | top:0px; |
||
− | background-color:#E8E8E8; |
||
+ | overflow:hidden; |
||
+ | background-color:#F3F3F3; |
||
z-index:1 |
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 |
div#mw-panel:hover div#p-logo |
||
Line 34: | Line 67: | ||
} |
} |
||
div#mw-head-base |
div#mw-head-base |
||
+ | { |
||
+ | margin-left:10px; |
||
+ | } |
||
+ | div#mw-head |
||
{ |
{ |
||
margin-left:10px; |
margin-left:10px; |
||
Line 40: | Line 77: | ||
{ |
{ |
||
position:relative; |
position:relative; |
||
− | left: |
+ | left:0; |
− | margin-left: |
+ | margin-left:10px; |
} |
} |
||
div#left-navigation |
div#left-navigation |
||
{ |
{ |
||
− | left: |
+ | left:10em; |
} |
} |
||
div#footer |
div#footer |
||
Line 51: | Line 88: | ||
margin-left:10px; |
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*/ |
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*/