Difference between revisions of "User:Gyz/vector.css"

From Baka-Tsuki
Jump to navigation Jump to search
 
(18 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!*/
 
/*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;
Line 18: Line 20:
 
overflow-x:hidden;
 
overflow-x:hidden;
 
z-index:2;
 
z-index:2;
padding-top:160px;
 
 
height:100%;
 
height:100%;
 
box-shadow:0 0 10px 0 #000000;
 
box-shadow:0 0 10px 0 #000000;
Line 29: Line 30:
 
{
 
{
 
overflow:visible;
 
overflow:visible;
  +
}
  +
div#mw-panel div#p-navigation
  +
{
  +
padding-top:0em;
  +
margin-top:160px;
 
}
 
}
 
div#mw-panel:hover
 
div#mw-panel:hover
Line 54: Line 60:
 
{
 
{
 
position:absolute;
 
position:absolute;
left:-1em;
+
width:140px;
 
}
 
}
 
div#mw-panel:hover div#p-logo
 
div#mw-panel:hover div#p-logo
Line 98: Line 104:
 
opacity:0.3;
 
opacity:0.3;
 
filter:alpha(opacity=30);
 
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
 
div>table[style]:nth-last-child(4)>tbody:hover,div>table[style]:nth-last-child(5)>tbody:hover
Line 106: Line 114:
 
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(4) 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;
 
height:40px;
Line 137: Line 149:
 
filter:alpha(opacity=7);
 
filter:alpha(opacity=7);
 
z-index:3;
 
z-index:3;
  +
box-shadow:0 0 10px 0 #AAAAAA;
 
}
 
}
 
ol.references:hover
 
ol.references:hover
Line 145: Line 158:
 
opacity:1;
 
opacity:1;
 
filter:alpha(opacity=100);
 
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 167: Line 184:
 
filter:alpha(opacity=25);
 
filter:alpha(opacity=25);
 
box-shadow:-5px -5px 10px -5px #AAAAAA inset;
 
box-shadow:-5px -5px 10px -5px #AAAAAA inset;
transition:opacity 0.2s ease-out;
+
transition:opacity 0.15s ease-out;
-webkit-transition:opacity 0.2s ease-out;
+
-webkit-transition:opacity 0.15s ease-out;
-moz-transition:opacity 0.2s ease-out;
+
-moz-transition:opacity 0.15s ease-out;
-o-transition:opacity 0.2s ease-out;
+
-o-transition:opacity 0.15s ease-out;
 
}
 
}
 
div#mw-head:hover
 
div#mw-head:hover
Line 176: Line 193:
 
opacity:1;
 
opacity:1;
 
filter:alpha(opacity=100);
 
filter:alpha(opacity=100);
transition:opacity 0.2s cubic-bezier(1,0,1,0);
+
transition:opacity 0.1s cubic-bezier(0.5,0,1,0);
-webkit-transition:opacity 0.2s cubic-bezier(1,0,1,0);
+
-webkit-transition:opacity 0.1s cubic-bezier(0.5,0,1,0);
-moz-transition:opacity 0.2s cubic-bezier(1,0,1,0);
+
-moz-transition:opacity 0.1s cubic-bezier(0.5,0,1,0);
-o-transition:opacity 0.2s cubic-bezier(1,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 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*/