Difference between revisions of "MediaWiki:Vector.css"

From Wikimedia District of Columbia
Jump to navigation Jump to search
(Adjustments to Vector for mobile devices)
 
(Replacing third-party webfont with extension)
 
(22 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will affect users of the Vector skin */
+
/* 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.
 
*/
 
   
#mw-head {
+
#toc {
  +
border:none;
position:static !important;
 
margin-top:0.5em;
+
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;