MediaWiki:Vector.css: Difference between revisions
Jump to navigation
Jump to search
Want an adless experience? Log in or Create an account.
No edit summary |
(move some vector-specific styles from Common) |
||
Line 1: | Line 1: | ||
/* | .mw-body { border: 1px solid #aaaaaa; } | ||
/* Games Bar */ | |||
margin-bottom: | #sitenav-games { | ||
margin-bottom: 15px; | |||
} | } | ||
.secondary { | |||
margin-left: 1. | width: 100%; | ||
margin-bottom: . | /*background: #060805;*/ | ||
box-sizing: content-box; | |||
position: relative; | |||
height: auto; | |||
top: 0; | |||
} | |||
.secondary * { | |||
box-sizing: content-box; | |||
} | |||
.secondary h2 { | |||
margin: 12px 0 12px | |||
} | |||
.secondary > ul { | |||
/*z-index: 10000;*/ | |||
position: relative; | |||
height: 70px; | |||
margin: 0px auto; | |||
padding: 0px; | |||
box-shadow: 0px 1px 2px #333; | |||
} | |||
.secondary > ul > li { | |||
list-style: none; | |||
float: left; | |||
} | |||
.secondary > ul > li { | |||
display: block; | |||
width: 60px; | |||
height: 70px; | |||
} | |||
/* splitting pixels.. */ | |||
.secondary > ul > li:nth-child(even) { | |||
width: 61px; | |||
} | |||
.secondary > ul > li > a { | |||
display: block; | |||
background-repeat: no-repeat; | |||
background-position-y: 5px; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.secondary > ul, .secondary > ul > li { | |||
border-right: 1px solid rgba(38, 96, 38, 0.4); | |||
background: #1C3E26; /* Old browsers */ | |||
background: -moz-linear-gradient(top, #1C3E26 0%, #000201 100%); /* FF3.6+ */ | |||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1C3E26), color-stop(100%, #000201)); /* Chrome,Safari4+ */ | |||
background: -webkit-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Chrome10+,Safari5.1+ */ | |||
background: -o-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Opera 11.10+ */ | |||
background: -ms-linear-gradient(top, #1C3E26 0%, #000201 100%); /* IE10+ */ | |||
background: linear-gradient(to bottom, #1C3E26 0%, #000201 100%); /* W3C */ | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C3E26', endColorstr='#000201', GradientType=0); /* IE6-9 */ | |||
} | |||
.secondary > ul > li:last-child { | |||
border: none; | |||
} | |||
.secondary > ul > li:hover { | |||
background: #C6E2C9; /* Old browsers */ | |||
background: -moz-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* FF3.6+ */ | |||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1C3E26), color-stop(100%, #C6E2C9)); /* Chrome,Safari4+ */ | |||
background: -webkit-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* Chrome10+,Safari5.1+ */ | |||
background: -o-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* Opera 11.10+ */ | |||
background: -ms-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* IE10+ */ | |||
background: linear-gradient(to bottom, #1C3E26 0%, #C6E2C9 100%); /* W3C */ | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C3E26', endColorstr='#C6E2C9', GradientType=0); /* IE6-9 */ | |||
} | |||
/* wide game nav */ | |||
@media (min-width: 1280px) { | |||
.secondary { | |||
background: #1C3E26; /* Old browsers */ | |||
background: -moz-linear-gradient(top, #1C3E26 0%, #000201 100%); /* FF3.6+ */ | |||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1C3E26), color-stop(100%, #000201)); /* Chrome,Safari4+ */ | |||
background: -webkit-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Chrome10+,Safari5.1+ */ | |||
background: -o-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Opera 11.10+ */ | |||
background: -ms-linear-gradient(top, #1C3E26 0%, #000201 100%); /* IE10+ */ | |||
background: linear-gradient(to bottom, #1C3E26 0%, #000201 100%); /* W3C */ | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C3E26', endColorstr='#000201', GradientType=0); /* IE6-9 */ | |||
box-shadow: 0px 1px 2px #333; | |||
} | |||
.secondary > ul { | |||
width: 1280px; | |||
margin: 0 auto; | |||
box-shadow: none; | |||
} | |||
.secondary > ul > li, | |||
.secondary > ul > li:nth-child(even) { | |||
width: 66px; | |||
} | |||
.secondary > ul > li:nth-child(4n+1) { | |||
width: 67px; | |||
} | |||
.secondary > ul > li a { | |||
background-position-x: 3px; | |||
} | |||
} | |||
@media only screen and (max-width: 1280px) and (min-width: 1200px){ | |||
.secondary > ul > li { | |||
width: 59px!important; | |||
} | |||
} | |||
@media (min-width: 1440px) { | |||
.secondary > ul { | |||
width: 1440px; | |||
margin: 0 auto; | |||
box-shadow: none; | |||
} | |||
.secondary > ul > li, | |||
.secondary > ul > li:nth-child(even) { | |||
width: 75px; | |||
} | |||
.secondary > ul > li:nth-child(4n+1) { | |||
width: 74px; | |||
} | |||
.secondary > ul > li > a { | |||
background-position-x: 7px; | |||
} | |||
} | |||
/* Main Header Nav */ | |||
#top { background: #253125; } | |||
.primary-mast { background: #0F1B11; } | |||
#nav-primary ul li a { font-size: 14px; } | |||
@media screen and (min-width: 1201px) { | |||
.site-nav ul li { | |||
display: inline-flex; | |||
float: left; | |||
padding: 15px 30px 0px 0px; | |||
margin-bottom: -10px; | |||
} | |||
.site-nav { | |||
margin: 0px auto; | |||
width: 1440px; | |||
} | |||
} | |||
@media (min-width: 768px) { | |||
.primary-mast { | |||
box-shadow: 0 0 20px 5px #100100; | |||
} | |||
} | |||
@media screen and (max-width: 729px) { | |||
.titlebar, #nav-primary { | |||
border-bottom: 1px solid #0F1B11; | |||
background-color: #0F1B11; | |||
} | |||
.titlebar i { | |||
left: 15px; | |||
right: auto; | |||
top: 9px; | |||
} | |||
} | |||
/* Sidebar */ | |||
@media screen and (min-width: 982px){ | |||
div#mw-panel { width: 300px; padding-left: 0px; margin-right: 20px; margin-top: 4px;} | |||
div#footer, #mw-head-base, div#content { margin-left: 305px; } | |||
#left-navigation { margin-left: 305px; } | |||
} | |||
/* Fix for gap created by Recent Changes legend. */ | |||
table.mw-recentchanges-table { | |||
width: 575px; | |||
} | |||
/* Fix to make changes in the Diff view more visible post-MediaWiki 1.23.7. */ | |||
del.diffchange, del.diffchange-inline { | |||
color: #8b0000; | |||
} | |||
ins.diffchange, ins.diffchange-inline { | |||
color: #006400; | |||
} | |||
/* Fix for de-uglify the vector tabs that were broken in an update. */ | |||
div.vectorTabs { | |||
background: transparent !important; | |||
background-image: none !important; | |||
margin-bottom: -1px !important; | |||
padding-left: 0px !important; | |||
} | |||
div.vectorTabs ul, div.vectorTabs ul li, div.vectorTabs ul li span { | |||
background: transparent !important; | |||
background-image: none !important; | |||
border: none; | |||
} | |||
#mw-head .vectorMenu h3 { | |||
background: none; | |||
border: none; | |||
} | |||
.vectorTabs a, .vectorMenu { | |||
border-top: 1px solid #AAA; | |||
border-left: 1px solid #AAA; | |||
border-right: 1px solid #AAA; | |||
-moz-border-radius-topleft: 8px; | |||
-moz-border-radius-topright: 8px; | |||
-moz-border-radius-bottomright: 0; | |||
-moz-border-radius-bottomleft: 0; | |||
border-radius: 8px 8px 0 0; | |||
-moz-border-radius: 8px 8px 0 0; | |||
-webkit-border-radius: 8px 8px 0 0; | |||
border-radius: 8px 8px 0 0; | |||
background: #FBF0D4; /* Old browsers */ | |||
background: -moz-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* FF3.6+ */ | |||
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FBF0D4),color-stop(100%,#F9F9F9)); /* Chrome,Safari4+ */ | |||
background: -webkit-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Chrome10+,Safari5.1+ */ | |||
background: -o-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Opera 11.10+ */ | |||
background: -ms-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* IE10+ */ | |||
background: linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* W3C */ | |||
} | |||
.vectorTabs a:hover, .vectorTabs strong:hover, .selected a, .selected strong,.elected a:hover, .selected strong:hover{ | |||
text-shadow: 0px -1.5px 0px #DDD; | |||
background: #FBF0D4; | |||
} | |||
.vectorTabs a:hover,.vectorTabs strong:hover { | |||
background: #FBF0D4; /* Old browsers */ | |||
background: -moz-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* FF3.6+ */ | |||
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#E1E4FA),color-stop(100%,#F9F9F9)); /* Chrome,Safari4+ */ | |||
background: -webkit-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Chrome10+,Safari5.1+ */ | |||
background: -o-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Opera 11.10+ */ | |||
background: -ms-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* IE10+ */ | |||
background: linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* W3C */ | |||
} | |||
.selected li, .selected li,.selected a:hover, .selected strong:hover { | |||
background: #FBF0D4; /* Old browsers */ | |||
background: -moz-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* FF3.6+ */ | |||
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,white),color-stop(5%,#F9F9F9),color-stop(55%,#FBF0D4)); /* Chrome,Safari4+ */ | |||
background: -webkit-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* Chrome10+,Safari5.1+ */ | |||
background: -o-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* Opera 11.10+ */ | |||
background: -ms-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* IE10+ */ | |||
background: linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* W3C */ | |||
} | } |
Revision as of 23:31, January 20, 2020
.mw-body { border: 1px solid #aaaaaa; } /* Games Bar */ #sitenav-games { margin-bottom: 15px; } .secondary { width: 100%; /*background: #060805;*/ box-sizing: content-box; position: relative; height: auto; top: 0; } .secondary * { box-sizing: content-box; } .secondary h2 { margin: 12px 0 12px } .secondary > ul { /*z-index: 10000;*/ position: relative; height: 70px; margin: 0px auto; padding: 0px; box-shadow: 0px 1px 2px #333; } .secondary > ul > li { list-style: none; float: left; } .secondary > ul > li { display: block; width: 60px; height: 70px; } /* splitting pixels.. */ .secondary > ul > li:nth-child(even) { width: 61px; } .secondary > ul > li > a { display: block; background-repeat: no-repeat; background-position-y: 5px; width: 100%; height: 100%; } .secondary > ul, .secondary > ul > li { border-right: 1px solid rgba(38, 96, 38, 0.4); background: #1C3E26; /* Old browsers */ background: -moz-linear-gradient(top, #1C3E26 0%, #000201 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1C3E26), color-stop(100%, #000201)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1C3E26 0%, #000201 100%); /* IE10+ */ background: linear-gradient(to bottom, #1C3E26 0%, #000201 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C3E26', endColorstr='#000201', GradientType=0); /* IE6-9 */ } .secondary > ul > li:last-child { border: none; } .secondary > ul > li:hover { background: #C6E2C9; /* Old browsers */ background: -moz-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1C3E26), color-stop(100%, #C6E2C9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* IE10+ */ background: linear-gradient(to bottom, #1C3E26 0%, #C6E2C9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C3E26', endColorstr='#C6E2C9', GradientType=0); /* IE6-9 */ } /* wide game nav */ @media (min-width: 1280px) { .secondary { background: #1C3E26; /* Old browsers */ background: -moz-linear-gradient(top, #1C3E26 0%, #000201 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1C3E26), color-stop(100%, #000201)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1C3E26 0%, #000201 100%); /* IE10+ */ background: linear-gradient(to bottom, #1C3E26 0%, #000201 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C3E26', endColorstr='#000201', GradientType=0); /* IE6-9 */ box-shadow: 0px 1px 2px #333; } .secondary > ul { width: 1280px; margin: 0 auto; box-shadow: none; } .secondary > ul > li, .secondary > ul > li:nth-child(even) { width: 66px; } .secondary > ul > li:nth-child(4n+1) { width: 67px; } .secondary > ul > li a { background-position-x: 3px; } } @media only screen and (max-width: 1280px) and (min-width: 1200px){ .secondary > ul > li { width: 59px!important; } } @media (min-width: 1440px) { .secondary > ul { width: 1440px; margin: 0 auto; box-shadow: none; } .secondary > ul > li, .secondary > ul > li:nth-child(even) { width: 75px; } .secondary > ul > li:nth-child(4n+1) { width: 74px; } .secondary > ul > li > a { background-position-x: 7px; } } /* Main Header Nav */ #top { background: #253125; } .primary-mast { background: #0F1B11; } #nav-primary ul li a { font-size: 14px; } @media screen and (min-width: 1201px) { .site-nav ul li { display: inline-flex; float: left; padding: 15px 30px 0px 0px; margin-bottom: -10px; } .site-nav { margin: 0px auto; width: 1440px; } } @media (min-width: 768px) { .primary-mast { box-shadow: 0 0 20px 5px #100100; } } @media screen and (max-width: 729px) { .titlebar, #nav-primary { border-bottom: 1px solid #0F1B11; background-color: #0F1B11; } .titlebar i { left: 15px; right: auto; top: 9px; } } /* Sidebar */ @media screen and (min-width: 982px){ div#mw-panel { width: 300px; padding-left: 0px; margin-right: 20px; margin-top: 4px;} div#footer, #mw-head-base, div#content { margin-left: 305px; } #left-navigation { margin-left: 305px; } } /* Fix for gap created by Recent Changes legend. */ table.mw-recentchanges-table { width: 575px; } /* Fix to make changes in the Diff view more visible post-MediaWiki 1.23.7. */ del.diffchange, del.diffchange-inline { color: #8b0000; } ins.diffchange, ins.diffchange-inline { color: #006400; } /* Fix for de-uglify the vector tabs that were broken in an update. */ div.vectorTabs { background: transparent !important; background-image: none !important; margin-bottom: -1px !important; padding-left: 0px !important; } div.vectorTabs ul, div.vectorTabs ul li, div.vectorTabs ul li span { background: transparent !important; background-image: none !important; border: none; } #mw-head .vectorMenu h3 { background: none; border: none; } .vectorTabs a, .vectorMenu { border-top: 1px solid #AAA; border-left: 1px solid #AAA; border-right: 1px solid #AAA; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 0; border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; background: #FBF0D4; /* Old browsers */ background: -moz-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* FF3.6+ */ background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FBF0D4),color-stop(100%,#F9F9F9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* IE10+ */ background: linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* W3C */ } .vectorTabs a:hover, .vectorTabs strong:hover, .selected a, .selected strong,.elected a:hover, .selected strong:hover{ text-shadow: 0px -1.5px 0px #DDD; background: #FBF0D4; } .vectorTabs a:hover,.vectorTabs strong:hover { background: #FBF0D4; /* Old browsers */ background: -moz-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* FF3.6+ */ background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#E1E4FA),color-stop(100%,#F9F9F9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* IE10+ */ background: linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* W3C */ } .selected li, .selected li,.selected a:hover, .selected strong:hover { background: #FBF0D4; /* Old browsers */ background: -moz-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* FF3.6+ */ background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,white),color-stop(5%,#F9F9F9),color-stop(55%,#FBF0D4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* IE10+ */ background: linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* W3C */ }