User:Angeleno/darkvector.css: Difference between revisions

Jump to: navigation, search
No edit summary
(replaceall)
Line 1: Line 1:
/* CSS placed here will affect users of the Vector skin */
/* CSS placed here will affect users of the darkvector skin */


/* positioning for custom logos and whatnot */
/* positioning for custom logos and whatnot */
Line 22: Line 22:
body {background: #a62e10}
body {background: #a62e10}


/* Override Vector colour scheme to make it dark (compiled from modified LESS code) */
/* Override darkvector colour scheme to make it dark (compiled from modified LESS code) */
h1,h2,h3,h4,h5,h6{
h1,h2,h3,h4,h5,h6{
color:#c1c1c1
color:#c1c1c1
Line 91: Line 91:
background-color:rgba(0,0,0,0.8)
background-color:rgba(0,0,0,0.8)
}
}
#left-navigation div.vectorTabs,#right-navigation div.vectorTabs{
#left-navigation div.darkvectorTabs,#right-navigation div.darkvectorTabs{
background-image:inherit;
background-image:inherit;
background-color:#e87057;
background-color:#e87057;


}
}
#left-navigation div.vectorTabs ul,#right-navigation div.vectorTabs ul{
#left-navigation div.darkvectorTabs ul,#right-navigation div.darkvectorTabs ul{
background-color:#e87057
background-color:#e87057
}
}
#left-navigation div.vectorTabs ul li,#right-navigation div.vectorTabs ul li{
#left-navigation div.darkvectorTabs ul li,#right-navigation div.darkvectorTabs ul li{
background-color:#222;
background-color:#222;
background-image:-moz-linear-gradient(top, #8c4434 20%, #8c4434 100%);
background-image:-moz-linear-gradient(top, #8c4434 20%, #8c4434 100%);
Line 106: Line 106:
background-image:linear-gradient(#e67860 20%, #8c4434 100%)
background-image:linear-gradient(#e67860 20%, #8c4434 100%)
}
}
#left-navigation div.vectorTabs li.new a,#right-navigation div.vectorTabs li.new a,#left-navigation div.vectorTabs li.new a:visited,#right-navigation div.vectorTabs li.new a:visited{
#left-navigation div.darkvectorTabs li.new a,#right-navigation div.darkvectorTabs li.new a,#left-navigation div.darkvectorTabs li.new a:visited,#right-navigation div.darkvectorTabs li.new a:visited{
color:#FFFFFF;
color:#FFFFFF;
}
}
#left-navigation div.vectorTabs li.selected,#right-navigation div.vectorTabs li.selected{
#left-navigation div.darkvectorTabs li.selected,#right-navigation div.darkvectorTabs li.selected{
background-color:#333;
background-color:#333;
background-image:-moz-linear-gradient(top, #ffa896 0, #ffa896 10%);
background-image:-moz-linear-gradient(top, #ffa896 0, #ffa896 10%);
Line 116: Line 116:
background-image:linear-gradient(#ffa896 0, #e87057 50%)
background-image:linear-gradient(#ffa896 0, #e87057 50%)
}
}
#left-navigation div.vectorTabs li.selected a,#right-navigation div.vectorTabs li.selected a,#left-navigation div.vectorTabs li.selected a:visited,#right-navigation div.vectorTabs li.selected a:visited{
#left-navigation div.darkvectorTabs li.selected a,#right-navigation div.darkvectorTabs li.selected a,#left-navigation div.darkvectorTabs li.selected a:visited,#right-navigation div.darkvectorTabs li.selected a:visited{
color:#FFFFFF
color:#FFFFFF
}
}
#left-navigation div.vectorTabs li a,#right-navigation div.vectorTabs li a{
#left-navigation div.darkvectorTabs li a,#right-navigation div.darkvectorTabs li a{
color:#FFFFFF
color:#FFFFFF
}
}
#left-navigation div.vectorTabs span,#right-navigation div.vectorTabs span{
#left-navigation div.darkvectorTabs span,#right-navigation div.darkvectorTabs span{
background:transparent
background:transparent
}
}
div#mw-head #right-navigation div.vectorMenu h3{
div#mw-head #right-navigation div.darkvectorMenu h3{
background:inherit
background:inherit
}
}
div#mw-head div.vectorMenu h3 span{
div#mw-head div.darkvectorMenu h3 span{
color:#e87057
color:#e87057
}
}
div.vectorMenu h3 a{
div.darkvectorMenu h3 a{
background:inherit
background:inherit
}
}
div.vectorMenu ul{
div.darkvectorMenu ul{
background-color:black;
background-color:black;
border:solid 1px #0c0c0c
border:solid 1px #0c0c0c
}
}
div.vectorMenu li a{
div.darkvectorMenu li a{
color:#e87057
color:#e87057
}
}
div.vectorMenu li.selected a,div.vectorMenu li.selected a:visited{
div.darkvectorMenu li.selected a,div.darkvectorMenu li.selected a:visited{
color:#009900;
color:#009900;
text-decoration:none
text-decoration:none
}
}
div.vectorMenu#p-cactions div.menu{
div.darkvectorMenu#p-cactions div.menu{
border-color:#1f1f1f
border-color:#1f1f1f
}
}
div.vectorMenu#p-cactions ul{
div.darkvectorMenu#p-cactions ul{
border:0;
border:0;
background-color:#4c4c4c
background-color:#4c4c4c
Line 212: Line 212:
list-style-type:disc;
list-style-type:disc;
list-style-image:/* @embed */
list-style-image:/* @embed */
url('skins/Vector/images/bullet-icon.png')
url('skins/darkvector/images/bullet-icon.png')
}
}
pre,.mw-code{
pre,.mw-code{
Line 231: Line 231:
font-size:.875em
font-size:.875em
}
}
body.vector-animateLayout .mw-body,body.vector-animateLayout div#footer,body.vector-animateLayout #left-navigation{
body.darkvector-animateLayout .mw-body,body.darkvector-animateLayout div#footer,body.darkvector-animateLayout #left-navigation{
-webkit-transition:margin-left 250ms,padding 250ms;
-webkit-transition:margin-left 250ms,padding 250ms;
-moz-transition:margin-left 250ms,padding 250ms;
-moz-transition:margin-left 250ms,padding 250ms;
Line 237: Line 237:
transition:margin-left 250ms,padding 250ms
transition:margin-left 250ms,padding 250ms
}
}
body.vector-animateLayout #p-logo{
body.darkvector-animateLayout #p-logo{
-webkit-transition:left 250ms;
-webkit-transition:left 250ms;
-moz-transition:left 250ms;
-moz-transition:left 250ms;
Line 243: Line 243:
transition:left 250ms
transition:left 250ms
}
}
body.vector-animateLayout #mw-panel{
body.darkvector-animateLayout #mw-panel{
-webkit-transition:padding-right 250ms;
-webkit-transition:padding-right 250ms;
-moz-transition:padding-right 250ms;
-moz-transition:padding-right 250ms;
Line 249: Line 249:
transition:padding-right 250ms
transition:padding-right 250ms
}
}
body.vector-animateLayout #p-search{
body.darkvector-animateLayout #p-search{
-webkit-transition:margin-right 250ms;
-webkit-transition:margin-right 250ms;
-moz-transition:margin-right 250ms;
-moz-transition:margin-right 250ms;
Line 255: Line 255:
transition:margin-right 250ms
transition:margin-right 250ms
}
}
body.vector-animateLayout #p-personal{
body.darkvector-animateLayout #p-personal{
-webkit-transition:right 250ms;
-webkit-transition:right 250ms;
-moz-transition:right 250ms;
-moz-transition:right 250ms;
Line 261: Line 261:
transition:right 250ms
transition:right 250ms
}
}
body.vector-animateLayout #mw-head-base{
body.darkvector-animateLayout #mw-head-base{
-webkit-transition:margin-left 250ms;
-webkit-transition:margin-left 250ms;
-moz-transition:margin-left 250ms;
-moz-transition:margin-left 250ms;
Line 293: Line 293:
background-position:left top;
background-position:left top;
background-repeat:no-repeat;
background-repeat:no-repeat;
background-image:url('skins/Vector/images/user-icon.png');
background-image:url('skins/darkvector/images/user-icon.png');
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/user-icon.svg');
url('skins/darkvector/images/user-icon.svg');
background-image:linear-gradient(transparent, transparent),/* @embed */
background-image:linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/user-icon.svg');
url('skins/darkvector/images/user-icon.svg');
padding-left:15px !important
padding-left:15px !important
}
}
Line 369: Line 369:
white-space:nowrap;
white-space:nowrap;
overflow:hidden;
overflow:hidden;
background-image:url('skins/Vector/images/search-ltr.png');
background-image:url('skins/darkvector/images/search-ltr.png');
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/search-ltr.svg');
url('skins/darkvector/images/search-ltr.svg');
background-image:linear-gradient(transparent, transparent),/* @embed */
background-image:linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/search-ltr.svg');
url('skins/darkvector/images/search-ltr.svg');
background-position:center center;
background-position:center center;
background-repeat:no-repeat
background-repeat:no-repeat
Line 380: Line 380:
z-index:1
z-index:1
}
}
div.vectorTabs h3{
div.darkvectorTabs h3{
display:none
display:none
}
}
div.vectorTabs{
div.darkvectorTabs{
float:left;
float:left;
height:2.5em;
height:2.5em;
background-image:/* @embed */
background-image:/* @embed */
url('skins/Vector/images/tab-break.png');
url('skins/darkvector/images/tab-break.png');
background-position:bottom left;
background-position:bottom left;
background-repeat:no-repeat;
background-repeat:no-repeat;
padding-left:1px
padding-left:1px
}
}
div.vectorTabs ul{
div.darkvectorTabs ul{
float:left;
float:left;
height:100%;
height:100%;
Line 400: Line 400:
padding:0;
padding:0;
background-image:/* @embed */
background-image:/* @embed */
url('skins/Vector/images/tab-break.png');
url('skins/darkvector/images/tab-break.png');
background-position:right bottom;
background-position:right bottom;
background-repeat:no-repeat
background-repeat:no-repeat
}
}
div.vectorTabs ul li{
div.darkvectorTabs ul li{
float:left;
float:left;
line-height:1.125em;
line-height:1.125em;
Line 413: Line 413:
background-color:#f3f3f3;
background-color:#f3f3f3;
background-image:/* @embed */
background-image:/* @embed */
url('skins/Vector/images/tab-normal-fade.png');
url('skins/darkvector/images/tab-normal-fade.png');
background-position:bottom left;
background-position:bottom left;
background-repeat:repeat-x;
background-repeat:repeat-x;
white-space:nowrap
white-space:nowrap
}
}
div.vectorTabs ul>li{
div.darkvectorTabs ul>li{
display:block
display:block
}
}
div.vectorTabs li.new a,div.vectorTabs li.new a:visited{
div.darkvectorTabs li.new a,div.darkvectorTabs li.new a:visited{
color:#a55858
color:#a55858
}
}
div.vectorTabs li.selected{
div.darkvectorTabs li.selected{
background-image:/* @embed */
background-image:/* @embed */
url('skins/Vector/images/tab-current-fade.png')
url('skins/darkvector/images/tab-current-fade.png')
}
}
div.vectorTabs li.selected a,div.vectorTabs li.selected a:visited{
div.darkvectorTabs li.selected a,div.darkvectorTabs li.selected a:visited{
color:#333;
color:#333;
text-decoration:none
text-decoration:none
}
}
div.vectorTabs li.icon a{
div.darkvectorTabs li.icon a{
background-position:bottom right;
background-position:bottom right;
background-repeat:no-repeat
background-repeat:no-repeat
}
}
div.vectorTabs li a{
div.darkvectorTabs li a{
display:inline-block;
display:inline-block;
height:1.9em;
height:1.9em;
Line 445: Line 445:
font-size:.8em
font-size:.8em
}
}
div.vectorTabs li>a{
div.darkvectorTabs li>a{
display:block
display:block
}
}
div.vectorTabs span{
div.darkvectorTabs span{
display:inline-block;
display:inline-block;
background-image:/* @embed */
background-image:/* @embed */
url('skins/Vector/images/tab-break.png');
url('skins/darkvector/images/tab-break.png');
background-position:bottom right;
background-position:bottom right;
background-repeat:no-repeat
background-repeat:no-repeat
}
}
div.vectorTabs span a{
div.darkvectorTabs span a{
display:inline-block;
display:inline-block;
padding-top:1.25em
padding-top:1.25em
}
}
div.vectorTabs span>a{
div.darkvectorTabs span>a{
float:left;
float:left;
display:block
display:block
}
}
div.vectorMenu{
div.darkvectorMenu{
direction:ltr;
direction:ltr;
float:left;
float:left;
Line 469: Line 469:
position:relative;
position:relative;
}
}
body.rtl div.vectorMenu{
body.rtl div.darkvectorMenu{
direction:rtl
direction:rtl
}
}
div#mw-head div.vectorMenu h3{
div#mw-head div.darkvectorMenu h3{
float:left;
float:left;
background-image:/* @embed */
background-image:/* @embed */
url('skins/Vector/images/tab-break.png');
url('skins/darkvector/images/tab-break.png');
background-repeat:no-repeat;
background-repeat:no-repeat;
background-position:bottom right;
background-position:bottom right;
Line 484: Line 484:
margin-right:-1px
margin-right:-1px
}
}
div.vectorMenu h3 span{
div.darkvectorMenu h3 span{
display:block;
display:block;
font-size:.8em;
font-size:.8em;
Line 493: Line 493:
color:#4d4d4d
color:#4d4d4d
}
}
div.vectorMenu li a{
div.darkvectorMenu li a{
transition: 0.4s
transition: 0.4s
}
}
div.vectorMenu li:hover a{
div.darkvectorMenu li:hover a{
background-color:#383838;
background-color:#383838;
color:  #f54f2c
color:  #f54f2c
}
}
div.vectorMenu h3 a{
div.darkvectorMenu h3 a{
position:absolute;
position:absolute;
top:0;
top:0;
Line 506: Line 506:
width:20px;
width:20px;
height:2.5em;
height:2.5em;
background-image:url('skins/Vector/images/arrow-down-icon.png');
background-image:url('skins/darkvector/images/arrow-down-icon.png');
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/arrow-down-icon.svg');
url('skins/darkvector/images/arrow-down-icon.svg');
background-image:linear-gradient(transparent, transparent),/* @embed */
background-image:linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/arrow-down-icon.svg');
url('skins/darkvector/images/arrow-down-icon.svg');
background-position:100% 70%;
background-position:100% 70%;
background-repeat:no-repeat;
background-repeat:no-repeat;
Line 518: Line 518:
transition:background-position 250ms
transition:background-position 250ms
}
}
div.vectorMenu.menuForceShow h3 a{
div.darkvectorMenu.menuForceShow h3 a{
background-position:100% 100%
background-position:100% 100%
}
}
div.vectorMenuFocus h3 a{
div.darkvectorMenuFocus h3 a{
background-image:url('skins/Vector/images/arrow-down-focus-icon.png');
background-image:url('skins/darkvector/images/arrow-down-focus-icon.png');
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/arrow-down-focus-icon.svg');
url('skins/darkvector/images/arrow-down-focus-icon.svg');
background-image:linear-gradient(transparent, transparent),/* @embed */
background-image:linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/arrow-down-focus-icon.svg')
url('skins/darkvector/images/arrow-down-focus-icon.svg')
}
}
div.vectorMenu div.menu{
div.darkvectorMenu div.menu{
min-width:100%;
min-width:100%;
position:absolute;
position:absolute;
Line 540: Line 540:
display:none
display:none
}
}
div.vectorMenu:hover div.menu,div.vectorMenu.menuForceShow div.menu{
div.darkvectorMenu:hover div.menu,div.darkvectorMenu.menuForceShow div.menu{
display:block
display:block
}
}
div.vectorMenu ul{
div.darkvectorMenu ul{
list-style-type:none;
list-style-type:none;
list-style-image:none;
list-style-image:none;
Line 550: Line 550:
text-align:left
text-align:left
}
}
div.vectorMenu ul,x:-moz-any-link{
div.darkvectorMenu ul,x:-moz-any-link{
min-width:5em
min-width:5em
}
}
div.vectorMenu ul,x:-moz-any-link,x:default{
div.darkvectorMenu ul,x:-moz-any-link,x:default{
min-width:0
min-width:0
}
}
div.vectorMenu li{
div.darkvectorMenu li{
padding:0;
padding:0;
margin:0;
margin:0;
Line 562: Line 562:
line-height:1em
line-height:1em
}
}
div.vectorMenu li a{
div.darkvectorMenu li a{
display:inline-block;
display:inline-block;
padding:.5em;
padding:.5em;
Line 570: Line 570:
font-size:.8em
font-size:.8em
}
}
div.vectorMenu li>a{
div.darkvectorMenu li>a{
display:block
display:block
}
}
div.vectorMenu li.selected a,div.vectorMenu li.selected a:visited{
div.darkvectorMenu li.selected a,div.darkvectorMenu li.selected a:visited{
color:#333;
color:#333;
text-decoration:none
text-decoration:none
Line 637: Line 637:
}
}
#ca-unwatch.icon a{
#ca-unwatch.icon a{
background-image:url('skins/Vector/images/unwatch-icon.png');
background-image:url('skins/darkvector/images/unwatch-icon.png');
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/unwatch-icon.svg');
url('skins/darkvector/images/unwatch-icon.svg');
background-image:linear-gradient(transparent, transparent),/* @embed */
background-image:linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/unwatch-icon.svg')
url('skins/darkvector/images/unwatch-icon.svg')
}
}
#ca-watch.icon a{
#ca-watch.icon a{
background-image:url('skins/Vector/images/watch-icon.png');
background-image:url('skins/darkvector/images/watch-icon.png');
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/watch-icon.svg');
url('skins/darkvector/images/watch-icon.svg');
background-image:linear-gradient(transparent, transparent),/* @embed */
background-image:linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/watch-icon.svg')
url('skins/darkvector/images/watch-icon.svg')
}
}
#ca-unwatch.icon a:hover,#ca-unwatch.icon a:focus{
#ca-unwatch.icon a:hover,#ca-unwatch.icon a:focus{
background-image:url('skins/Vector/images/unwatch-icon-hl.png');
background-image:url('skins/darkvector/images/unwatch-icon-hl.png');
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/unwatch-icon-hl.svg');
url('skins/darkvector/images/unwatch-icon-hl.svg');
background-image:linear-gradient(transparent, transparent),/* @embed */
background-image:linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/unwatch-icon-hl.svg')
url('skins/darkvector/images/unwatch-icon-hl.svg')
}
}
#ca-watch.icon a:hover,#ca-watch.icon a:focus{
#ca-watch.icon a:hover,#ca-watch.icon a:focus{
background-image:url('skins/Vector/images/watch-icon-hl.png');
background-image:url('skins/darkvector/images/watch-icon-hl.png');
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/watch-icon-hl.svg');
url('skins/darkvector/images/watch-icon-hl.svg');
background-image:linear-gradient(transparent, transparent),/* @embed */
background-image:linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/watch-icon-hl.svg')
url('skins/darkvector/images/watch-icon-hl.svg')
}
}
#ca-unwatch.icon a.loading,#ca-watch.icon a.loading{
#ca-unwatch.icon a.loading,#ca-watch.icon a.loading{
background-image:url('skins/Vector/images/watch-icon-loading.png');
background-image:url('skins/darkvector/images/watch-icon-loading.png');
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/watch-icon-loading.svg');
url('skins/darkvector/images/watch-icon-loading.svg');
background-image:linear-gradient(transparent, transparent),/* @embed */
background-image:linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/watch-icon-loading.svg');
url('skins/darkvector/images/watch-icon-loading.svg');
-webkit-animation:rotate 700ms infinite linear;
-webkit-animation:rotate 700ms infinite linear;
-moz-animation:rotate 700ms infinite linear;
-moz-animation:rotate 700ms infinite linear;
Line 692: Line 692:
background-position:bottom left;
background-position:bottom left;
background-repeat:repeat-x;
background-repeat:repeat-x;
background-image:url('skins/Vector/images/page-fade.png');
background-image:url('skins/darkvector/images/page-fade.png');
background-color:1c1c1c;
background-color:1c1c1c;
background-image:-moz-linear-gradient(top, #1c1c1c 50%, 1c1c1c 100%);
background-image:-moz-linear-gradient(top, #1c1c1c 50%, 1c1c1c 100%);
Line 756: Line 756:
background-repeat:no-repeat;
background-repeat:no-repeat;
background-image:/* @embed */
background-image:/* @embed */
url('skins/Vector/images/portal-break.png')
url('skins/darkvector/images/portal-break.png')
}
}
div#mw-panel div.portal h3{
div#mw-panel div.portal h3{
Line 843: Line 843:
background-position:center right;
background-position:center right;
background-repeat:no-repeat;
background-repeat:no-repeat;
background-image:url('skins/Vector/images/external-link-ltr-icon.png');
background-image:url('skins/darkvector/images/external-link-ltr-icon.png');
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/external-link-ltr-icon.svg');
url('skins/darkvector/images/external-link-ltr-icon.svg');
background-image:linear-gradient(transparent, transparent),/* @embed */
background-image:linear-gradient(transparent, transparent),/* @embed */
url('skins/Vector/images/external-link-ltr-icon.svg');
url('skins/darkvector/images/external-link-ltr-icon.svg');
padding-right:13px
padding-right:13px
}
}