Difference between revisions of "MediaWiki:Vector.css"
Jump to navigation
Jump to search
James Hare (talk | contribs) (Adjustments to Vector for mobile devices) |
James Hare (talk | contribs) (Replacing third-party webfont with extension) |
||
| (22 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | /* |
+ | /* Adjusted Vector Appearance */ |
| + | body { |
||
| + | background-color: #f8f9fa; |
||
| + | } |
||
| + | #mw-page-base { |
||
| − | /* For mobile devices */ |
||
| + | background-color: #f8f9fa; |
||
| − | /* These changes have been tested exclusively in Vector */ |
||
| + | background-image: none; |
||
| + | } |
||
| + | div#content { |
||
| + | border: 1px solid #fff; |
||
| + | } |
||
| + | div.vectorTabs ul li { |
||
| + | background-image: none; |
||
| + | background-color: #fff; |
||
| + | } |
||
| + | #p-views, #p-views *, #p-namespaces, #p-namespaces * { |
||
| + | background-image: none; |
||
| + | } |
||
| + | div.vectorTabs ul li.selected { |
||
| + | font-weight:bold; |
||
| + | } |
||
| + | div.vectorTabs ul li span a:hover { |
||
| + | text-decoration: none; |
||
| + | } |
||
| + | #catlinks { |
||
| + | border:none; |
||
| + | padding:10px; |
||
| + | } |
||
| + | .vectorTabs ul li { |
||
| − | @media only screen and (max-width:749px) { |
||
| + | background-color: #f8f9fa !important; |
||
| − | |||
| + | } |
||
| − | /* |
||
| − | The styles below essentially place the navigation menu below the content, |
||
| − | instead of to the side of it. They also hide the logo, as there's no space |
||
| − | left for it. |
||
| − | */ |
||
| − | + | #toc { |
|
| + | border:none; |
||
| − | position:static !important; |
||
| − | + | padding:14px; |
|
| − | + | } |
|
| − | |||
| − | /* Move the panel to the bottom and display it as in-line lists; hide the logo and tabs */ |
||
| − | div#mw-panel { |
||
| − | display: table; |
||
| − | position: static; |
||
| − | table-layout: fixed; |
||
| − | width: 100%; |
||
| − | overflow: hidden; |
||
| − | } |
||
| − | div#mw-panel .portal { |
||
| − | display: block; |
||
| − | width:100%; |
||
| − | vertical-align: top; |
||
| − | } |
||
| − | #mw-panel ul li { |
||
| − | list-style:none; |
||
| − | } |
||
| − | #mw-panel ul li:before { |
||
| − | content: " ◦ "; |
||
| − | } |
||
| − | #p-logo { |
||
| − | display: none; |
||
| − | } |
||
| − | #left-navigation { |
||
| − | display:none; |
||
| − | } |
||
| − | #p-cactions { |
||
| − | display:none; |
||
| − | } |
||
| − | #p-views { |
||
| − | display:none; |
||
| − | } |
||
| + | /* Typography */ |
||
| − | /* Rearrange various page elements to fill the now-available space */ |
||
| + | /* Makes site-wide what has been implemented on a page-by-page basis */ |
||
| − | #p-personal ul { |
||
| + | |||
| − | padding-left: 0; |
||
| + | body { |
||
| − | } |
||
| + | font-family:'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; |
||
| − | div#footer { |
||
| − | margin-left: 0; |
||
| − | padding-top: 0; |
||
| − | } |
||
| − | #p-personal { |
||
| − | display:table; |
||
| − | position:relative; |
||
| − | width:100%; |
||
| − | top:inherit; |
||
| − | left:inherit; |
||
| − | right:inherit; |
||
| − | } |
||
| − | #right-navigation { |
||
| − | max-width:500px; |
||
| − | position:absolute; |
||
| − | top:inherit; |
||
| − | margin-top:-1px; |
||
| − | float:none; |
||
| − | } |
||
| − | #right-navigation:before { |
||
| − | content:url("http://wikimediadc.org/w/images/6/60/Mobile_logo.svg"); |
||
| − | } |
||
| − | #p-search { |
||
| − | margin-left: 73px; |
||
| − | margin-top: -1.5em; |
||
| − | } |
||
| − | div#content { |
||
| − | /* Hide the 1px blue border on the left side */ |
||
| − | border-left: 0; |
||
| − | margin-left: 0; |
||
| − | } |
||
} |
} |
||
| + | |||
| + | div#content h1, div#content h2, div#content, #firstHeading { |
||
| + | font-family:'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; |
||
| + | } |
||
| + | |||
| + | .firstHeading { |
||
| + | border-bottom: none; |
||
| + | margin-bottom:0.5em !important; |
||
| + | padding-left:0; |
||
| + | font-size: 2.4em !important; |
||
| + | width:100%; |
||
| + | margin:auto; |
||
| + | border-collapse:collapse; |
||
| + | vertical-align:top; |
||
| + | line-height:100%; |
||
| + | font-weight: 700; |
||
| + | } |
||
| + | |||
| + | .mw-body h2 { |
||
| + | margin-bottom: 1em; |
||
| + | } |
||
| + | |||
| + | div#mw-panel div.portal#p-navigation div.body { |
||
| + | background-image:none; |
||
| + | } |
||
| + | |||
| + | div#content { |
||
| + | border: 1px solid #c8ccd1; |
||
| + | } |
||
| + | |||
| + | #mw-head-base { |
||
| + | border-bottom: 1px solid #c8ccd1; |
||
Latest revision as of 17:20, 10 May 2018
/* Adjusted Vector Appearance */
body {
background-color: #f8f9fa;
}
#mw-page-base {
background-color: #f8f9fa;
background-image: none;
}
div#content {
border: 1px solid #fff;
}
div.vectorTabs ul li {
background-image: none;
background-color: #fff;
}
#p-views, #p-views *, #p-namespaces, #p-namespaces * {
background-image: none;
}
div.vectorTabs ul li.selected {
font-weight:bold;
}
div.vectorTabs ul li span a:hover {
text-decoration: none;
}
#catlinks {
border:none;
padding:10px;
}
.vectorTabs ul li {
background-color: #f8f9fa !important;
}
#toc {
border:none;
padding:14px;
}
/* Typography */
/* Makes site-wide what has been implemented on a page-by-page basis */
body {
font-family:'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
div#content h1, div#content h2, div#content, #firstHeading {
font-family:'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.firstHeading {
border-bottom: none;
margin-bottom:0.5em !important;
padding-left:0;
font-size: 2.4em !important;
width:100%;
margin:auto;
border-collapse:collapse;
vertical-align:top;
line-height:100%;
font-weight: 700;
}
.mw-body h2 {
margin-bottom: 1em;
}
div#mw-panel div.portal#p-navigation div.body {
background-image:none;
}
div#content {
border: 1px solid #c8ccd1;
}
#mw-head-base {
border-bottom: 1px solid #c8ccd1;