Difference between revisions of "MediaWiki:Common.css"

From Wikimedia District of Columbia
Jump to navigation Jump to search
(Working)
(Working)
 
(87 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
.nav th {
  
−
text-align: center;
  
−
background: #ECECEC;
  
−
font-weight: bold;
  
−
margin: 0 .1em 0 0;
  
−
width: 25%;
  
−
font-size: 0.925em;
  
−
-moz-border-radius: 12px 12px 12px 12px;
  
−
}
  
−  
−
.nav th a {
  
−
padding: 1em 2em;
  
−
color: #224F82;
  
−
text-decoration: none;
  
−
}
  
−  
−
.nav th:hover {
  
−
color: #000;
  
−
}
  
−  
 
li#footer-info-lastmod,
  
li#footer-info-lastmod,
 
li#footer-info-viewcount,
  
li#footer-info-viewcount,
  +
li#footer-places-about,
 
li#footer-places-disclaimer {
  
li#footer-places-disclaimer {
 
display: none !important;
  
display: none !important;
−
}
  
−  
−
div#mw-panel div.portal#p-navigation div.body {
  
−
background-image:none;
  
 
}
  
}
   
Line 35: Line 12:
 
.nowrap {
 
.nowrap {
 
white-space: nowrap;
  
white-space: nowrap;
−
}
  
−  
−
h2 {
  
−
border-bottom: 2px dotted #BBBDBF;
  
−
}
  
−  
−
.firstHeading {
  
−
border-bottom: none;
  
−
margin-bottom:10px;
  
−
padding:10px;
  
−
padding-left:0;
  
−
font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif;
  
 
}
  
}
   
Line 64: Line 29:
 
.nodisplay {
  
.nodisplay {
 
display: none !important;
  
display: none !important;
−
}
  
−  
−
h1, h2, h3, h4, h5, h6 {
  
−
font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif;
  
 
}
  
}
   
Line 99: Line 60:
   
 
/* Arrow button formatting */
  
/* Arrow button formatting */
  +
  +
.arrowbutton {
  +
color:#ffffff;
  +
width:100px;
  +
padding:0.4em;
  +
line-height:1.5em;
  +
}
  +
  +
.arrowbutton::before {
  +
content:"⇒ ";
  +
font-weight:bold;
  +
}
  +
  +
.arrowbutton-red {
  +
background:#990000;
  +
}
  +
  +
.arrowbutton-green {
  +
background:#339966;
  +
}
  +
  +
.arrowbutton-blue {
  +
background:#0063BF;
  +
}
  +
  +
.arrowbutton-gold {
  +
background:#E5B921;
  +
}
   
 
.arrowbutton-red:hover {
  
.arrowbutton-red:hover {
−
background: #EDDEDE !important;
 +
background: #ffb3b3 !important;
 
color: #000000 !important;
  
color: #000000 !important;
 
}
  
}
   
 
.arrowbutton-green:hover {
  
.arrowbutton-green:hover {
−
background: #DEEDE6 !important;
 +
background: #c6ecd9 !important;
 
color: #000000 !important;
  
color: #000000 !important;
 
}
  
}
   
 
.arrowbutton-blue:hover {
  
.arrowbutton-blue:hover {
−
background: #DEE7ED !important;
 +
background: #b3daff !important;
 
color: #000000 !important;
  
color: #000000 !important;
 
}
  
}
   
  +
.arrowbutton-gold:hover {
−
/* Main Page CSS */
  
  +
background: #faefcb !important;
−  
  +
color: #000000 !important;
−
body #t-cite,
  
−
body #siteSub,
  
−
body.page-Home.action-view #contentSub,
  
−
body.page-Home.action-view h1.firstHeading,
  
−
body.page-Home.action-view #jump-to-nav {
  
−
display: none !important;
  
 
}
  
}
   
  +
/* Round button formatting */
−
@media screen and (min-width:750px) {
  
  +
−
#main-page-left {
  
  +
.roundbutton {
−
float:left;
  
  +
display:inline-block; border-radius:50%; color:#ffffff; width:54px; height:54px; padding:12px; margin-right:0.5em; margin-bottom:0.5em; text-align:center;
−
width:57%;
  
−
}
  
−
#main-page-right {
  
−
float:right;
  
−
width:40%;
  
−
max-width:30em;
  
−
}
  
 
}
  
}
   
  +
.roundbutton-large {
−
@media screen and (max-width:749px) {
  
  +
display:inline-block; border-radius:50%; color:#ffffff; width:68px; height:68px; padding:15px; margin-right:0.5em; margin-bottom:0.5em; text-align:center;
−
#main-page-left {
  
−
display:inline;
  
−
}
  
−
#main-page-right {
  
−
display:inline;
  
−
}
  
 
}
  
}
   
  +
/* Main Page CSS */
−
.main-page-box {
  
−
background:white; padding:1em; border:none; border:1px solid #CCCCCC; margin-bottom:2em;
  
−
}
 
   
  +
body #t-cite,
−
@media screen and (min-width:900px) {
  
  +
body #siteSub,
−
.main-page-feature-title {
  
  +
body #contentSub,
−
position: absolute; top:0; left:0; right:0; border:0; padding:0.75em; color:#FFF !important; background-color:rgba(0,102,153,0.85); letter-spacing:1px; z-index:100; font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif; line-height:1.25; font-weight:500;
  
  +
body.page-Home.action-view #jump-to-nav {
−
}
  
  +
display: none !important;
−
}
  
−  
−
@media screen and (max-width:899px) {
  
−
.main-page-feature-title {
  
−
font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif; line-height:1.25; font-weight:500;
  
−
}
  
 
}
  
}
   
 
/* Copied from Wikivoyage for scalable-width images */
  
/* Copied from Wikivoyage for scalable-width images */
   
−
@media screen and (max-width:749px) {
 +
@media screen and (max-width:767px) {
 
.banner-image {
  
.banner-image {
 
position: relative;
  
position: relative;
Line 183: Line 149:
 
}
  
}
   
−
@media screen and (min-width:750px) {
 +
@media screen and (min-width:768px) {
 
.banner-image {
  
.banner-image {
−
float: right;
  
 
position: relative;
  
position: relative;
 
overflow: hidden;
  
overflow: hidden;
Line 193: Line 158:
 
}
  
}
 
.banner-image img {
  
.banner-image img {
−
float: right;
  
 
width: 100%;
  
width: 100%;
 
height: auto;
  
height: auto;
Line 203: Line 167:
 
.banner-image-left img {
  
.banner-image-left img {
 
float: left !important;
  
float: left !important;
  +
}
  +
.banner-image-right {
  +
float: right !important;
  +
}
  +
.banner-image-right img {
  +
float: right !important;
 
}
  
}
 
.banner-image-none {
  
.banner-image-none {
Line 211: Line 181:
 
}
  
}
 
.banner-image-center {
  
.banner-image-center {
−
padding-left: none !important;
 +
padding-left: none !important;
 
float: none !important;
  
float: none !important;
 
margin-left: auto !important;
  
margin-left: auto !important;
Line 219: Line 189:
 
float: none !important;
  
float: none !important;
 
}
  
}
−
}
  
−  
−
.main-page-image {
  
−
position: relative;
  
−
overflow: hidden;
  
−
max-width: 1125px;
 
−
height: auto;
  
−
margin-left: -1em;
  
−
margin-right: -1.5em;
  
−
margin-bottom: .6em;
  
−
}
  
−
 
−
.main-page-image img {
  
−
width: 100%;
  
−
height: auto;
  
−
width: auto\9;
  
 
}
  
}
   
Line 256: Line 210:
 
/* Certain pages on this website use a two-column setup */
  
/* Certain pages on this website use a two-column setup */
 
/* Pages that employ the "mobile-collapse" class will force it down to a one-column setup on narrow screens (e.g. on mobile devices) */
  
/* Pages that employ the "mobile-collapse" class will force it down to a one-column setup on narrow screens (e.g. on mobile devices) */
−
/* This is not to be used on the main page, which employs its own sophisticated code to reduce two columns to one column */
  
   
−
@media screen and (max-width:749px) {
 +
@media screen and (max-width:767px) {
 
.mobile-collapse {
  
.mobile-collapse {
 
display: block !important;
  
display: block !important;
Line 268: Line 221:
 
overflow:scroll;
  
overflow:scroll;
 
}
  
}
  +
−  
  +
#donate-pullquote,
  +
#donate-otheroptions {
  +
display:none;
  +
}
 
}
  
}
   
  +
@media screen and (min-width:768px) {
−
/* Typography */
  
−
/* Makes site-wide what has been implemented on a page-by-page basis */
  
−
/* Only for desktop resolution—mobile pages should continue using default text settings */
  
−  
−
@media screen and (min-width:750px) {
  
 
div#bodyContent {
  
div#bodyContent {
−
font-size:0.965em; padding:0; font-family:'Helvetica Neue',sans-serif;
 +
font-size:1em; padding:0;
 
}
  
}
 
p {
  
p {
 
margin-bottom:1em;
  
margin-bottom:1em;
 
}
  
}
  +
h1 {
  +
font-size: 2.4em !important;
  +
}
  +
}
  +
  +
/* Header mega template */
  +
  +
#megaheader {
  +
position:relative;
  +
padding-bottom:1em;
  +
border:none;
  +
margin-bottom:2em;
  +
overflow: hidden;
  +
}
  +
  +
@media screen and (min-width:982px) {
  +
#megaheader {
  +
margin-top:-3em;
  +
margin-left:-1.5em;
  +
margin-right:-1.5em;
  +
}
  +
}
  +
  +
@media screen and (min-width:768px) and (max-width:981px) {
  +
#megaheader {
  +
margin-top:-2.7em;
  +
margin-left:-1em;
  +
margin-right:-1em;
  +
}
  +
}
  +
  +
@media screen and (max-width:767px) {
  +
#megaheader {
  +
margin-top:-3em;
  +
margin-left:-1.15em;
  +
margin-right:-1.15em;
  +
}
  +
}
  +
  +
  +
@media screen and (min-width:768px) {
  +
#megaheader {
  +
height:500px;
  +
}
  +
  +
#megaheader-short {
  +
height:200px;
  +
}
  +
}
  +
  +
@media screen and (max-width:767px) {
  +
#megaheader {
  +
height:auto;
  +
}
  +
}
  +
  +
#megaheader img {
  +
-moz-transition: opacity 2s; /* Firefox 4 */
  +
-webkit-transition: opacity 2s; /* Safari and Chrome */
  +
-o-transition: opacity 2s;
  +
transition: opacity 2s;
  +
}
  +
  +
/* Evil interface meddling for donations */
  +
  +
.page-Donate_Monthly_5 #mw-head,
  +
.page-Donate_Monthly_5 .portal,
  +
.page-Donate_Monthly_10 #mw-head,
  +
.page-Donate_Monthly_10 .portal,
  +
.page-Donate_Monthly_25 #mw-head,
  +
.page-Donate_Monthly_25 .portal,
  +
.page-Donate_Monthly_50 #mw-head,
  +
.page-Donate_Monthly_50 .portal,
  +
.page-Donate_Monthly_100 #mw-head,
  +
.page-Donate_Monthly_100 .portal,
  +
.page-Donate_Monthly_200 #mw-head,
  +
.page-Donate_Monthly_200 .portal,
  +
.page-Donate_Annually_5 #mw-head,
  +
.page-Donate_Annually_5 .portal,
  +
.page-Donate_Annually_10 #mw-head,
  +
.page-Donate_Annually_10 .portal,
  +
.page-Donate_Annually_25 #mw-head,
  +
.page-Donate_Annually_25 .portal,
  +
.page-Donate_Annually_50 #mw-head,
  +
.page-Donate_Annually_50 .portal,
  +
.page-Donate_Annually_100 #mw-head,
  +
.page-Donate_Annually_100 .portal,
  +
.page-Donate_Annually_200 #mw-head,
  +
.page-Donate_Annually_200 .portal,
  +
.page-Donate_One-time_5 #mw-head,
  +
.page-Donate_One-time_5 .portal,
  +
.page-Donate_One-time_10 #mw-head,
  +
.page-Donate_One-time_10 .portal,
  +
.page-Donate_One-time_25 #mw-head,
  +
.page-Donate_One-time_25 .portal,
  +
.page-Donate_One-time_50 #mw-head,
  +
.page-Donate_One-time_50 .portal,
  +
.page-Donate_One-time_100 #mw-head,
  +
.page-Donate_One-time_100 .portal,
  +
.page-Donate_One-time_200 #mw-head,
  +
.page-Donate_One-time_200 .portal,
  +
.page-Calendar_One-time_25 #mw-head,
  +
.page-Calendar_One-time_25 .portal,
  +
.page-Calendar_One-time_30 #mw-head,
  +
.page-Calendar_One-time_30 .portal,
  +
.page-Calendar_One-time_35 #mw-head,
  +
.page-Calendar_One-time_35 .portal,
  +
.page-Calendar_One-time_50 #mw-head,
  +
.page-Calendar_One-time_50 .portal,
  +
.page-Calendar_One-time_75 #mw-head,
  +
.page-Calendar_One-time_75 .portal,
  +
.page-Calendar_One-time_100 #mw-head,
  +
.page-Calendar_One-time_100 .portal {
  +
display: none;
  +
}
  +
  +
@media screen and (max-width:767px) {
  +
.no-narrow {
  +
display: none;
  +
}
  +
}
  +
@media screen and (min-width:768px) {
  +
.narrow-only {
  +
display: none;
  +
}
  +
}
  +
  +
/* Limit display of TOC subsections where applied */
  +
.toclimit-2 .toclevel-1 ul,
  +
.toclimit-3 .toclevel-2 ul,
  +
.toclimit-4 .toclevel-3 ul,
  +
.toclimit-5 .toclevel-4 ul,
  +
.toclimit-6 .toclevel-5 ul,
  +
.toclimit-7 .toclevel-6 ul {
  +
display: none;
  +
}
  +
  +
/* Page Forms styling */
  +
input.createboxInput
  +
{
  +
border: 2px solid #ccc !important;
  +
box-sizing: border-box !important;
  +
margin: 8px 0 !important;
  +
max-width: 500px;
  +
outline: none !important;
  +
padding: 12px 10px !important;
  +
width: 50%;
 
}
  
}

Latest revision as of 13:42, 12 December 2020

li#footer-info-lastmod,
li#footer-info-viewcount,
li#footer-places-about,
li#footer-places-disclaimer {
  display: none !important;
}

#p-navigation h5 {
  display: none !important;
}

.nowrap { 
    white-space: nowrap;
}

.toggle-head {
  background:url(//upload.wikimedia.org/wikipedia/commons/thumb/1/1c/HW_open_arrow.svg/10px-HW_open_arrow.svg.png) no-repeat 0% center;
}

.toggle-head:hover {
  text-decoration:underline;
  cursor:pointer;
}

.redirect-in-category, .allpagesredirect a {
  color: gray;
}

.nodisplay {
  display: none !important;
}

/* Custom table formatting */

table.rowlines { 
    border-collapse:collapse;
    border:2px solid #BBBDBF;
    width:100%;
    vertical-align:top;
}

table.rowlines th {
    border-bottom:1px solid #BBBDBF;
    border-top:1px solid #BBBDBF;
    padding:5px;
}

table.rowlines td {
    border-bottom:1px dotted #BBBDBF;
    padding:5px;
}

div.rowlines-wrapper {
    padding:0 10px 0 10px;
}

span.subpages {
  display: none !important;
}

/* Arrow button formatting */

.arrowbutton {
	color:#ffffff;
	width:100px;
	padding:0.4em;
	line-height:1.5em;
}

.arrowbutton::before {
	content:"⇒ ";
	font-weight:bold;
}

.arrowbutton-red {
	background:#990000;
}

.arrowbutton-green {
	background:#339966;
}

.arrowbutton-blue {
	background:#0063BF;
}

.arrowbutton-gold {
	background:#E5B921;
}

.arrowbutton-red:hover {
    background: #ffb3b3 !important;
    color: #000000 !important;
}

.arrowbutton-green:hover {
    background: #c6ecd9 !important;
    color: #000000 !important;
}

.arrowbutton-blue:hover {
    background: #b3daff !important;
    color: #000000 !important;
}

.arrowbutton-gold:hover {
    background: #faefcb !important;
    color: #000000 !important;
}

/* Round button formatting */

.roundbutton {
    display:inline-block; border-radius:50%; color:#ffffff; width:54px; height:54px; padding:12px; margin-right:0.5em; margin-bottom:0.5em; text-align:center;
}

.roundbutton-large {
    display:inline-block; border-radius:50%; color:#ffffff; width:68px; height:68px; padding:15px; margin-right:0.5em; margin-bottom:0.5em; text-align:center;
}

/* Main Page CSS */

body #t-cite,
body #siteSub,
body #contentSub,
body.page-Home.action-view #jump-to-nav {
  display: none !important;
}

/* Copied from Wikivoyage for scalable-width images */

@media screen and (max-width:767px) {
  .banner-image {
    position: relative;
    overflow: hidden;
    max-width: 1125px; 
    width: 100%;
    height: auto;
    margin-bottom: .6em;
    text-align: center;
    padding-left: 0 !important;
  }
  .banner-image img {
    width: 100%;
    height: auto;
    width: auto\9;
    margin:0 auto;
  }
}

@media screen and (min-width:768px) {
  .banner-image {
    position: relative;
    overflow: hidden;
    max-width: 1125px; 
    height: auto;
    margin-bottom: .6em;
  }
  .banner-image img {
    width: 100%;
    height: auto;
    width: auto\9;
  }
  .banner-image-left {
    float: left !important;
  }
  .banner-image-left img {
    float: left !important;
  }
  .banner-image-right {
    float: right !important;
  }
  .banner-image-right img {
    float: right !important;
  }
  .banner-image-none {
    float: none !important;
  }
  .banner-image-none img {
    float: none !important;
  }
  .banner-image-center {
    padding-left: none !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .banner-image-center img {
    float: none !important;
  }
}

/* Login interface adjustments */

.mw-createacct-benefits-container {
  display: none;
}

/* Changes to MediaWiki default image stuff */
/* Yell at James Hare if this breaks anything */

div.floatright {
  clear:none;
}

div.floatleft {
  clear:none;
}

/* Certain pages on this website use a two-column setup */
/* Pages that employ the "mobile-collapse" class will force it down to a one-column setup on narrow screens (e.g. on mobile devices) */

@media screen and (max-width:767px) {
  .mobile-collapse {
    display: block !important;
    width: 100% !important;
    margin-bottom:0.6em;
  }

  #donatebutton {
    overflow:scroll;
  }
  
  #donate-pullquote,
  #donate-otheroptions {
  	display:none;
  }
}

@media screen and (min-width:768px) {
  div#bodyContent {
    font-size:1em; padding:0;
  }
  p {
    margin-bottom:1em;
  }
  h1 {
    font-size: 2.4em !important;
  }
}

/* Header mega template */

#megaheader {
  position:relative;
  padding-bottom:1em;
  border:none;
  margin-bottom:2em;
  overflow: hidden;
}

@media screen and (min-width:982px) {
  #megaheader {
    margin-top:-3em;
    margin-left:-1.5em;
    margin-right:-1.5em;
  }
}

@media screen and (min-width:768px) and (max-width:981px) {
  #megaheader {
    margin-top:-2.7em;
    margin-left:-1em;
    margin-right:-1em;
  }
}

@media screen and (max-width:767px) {
  #megaheader {
    margin-top:-3em;
    margin-left:-1.15em;
    margin-right:-1.15em;
  }
}


@media screen and (min-width:768px) {
  #megaheader {
    height:500px;
  }

  #megaheader-short {
  	height:200px;
  }
}

@media screen and (max-width:767px) {
  #megaheader {
     height:auto;
  }
}

#megaheader img {
  -moz-transition: opacity 2s; /* Firefox 4 */
  -webkit-transition: opacity 2s; /* Safari and Chrome */
  -o-transition: opacity 2s;
  transition: opacity 2s;
}

/* Evil interface meddling for donations */

.page-Donate_Monthly_5 #mw-head,
.page-Donate_Monthly_5 .portal,
.page-Donate_Monthly_10 #mw-head,
.page-Donate_Monthly_10 .portal,
.page-Donate_Monthly_25 #mw-head,
.page-Donate_Monthly_25 .portal,
.page-Donate_Monthly_50 #mw-head,
.page-Donate_Monthly_50 .portal,
.page-Donate_Monthly_100 #mw-head,
.page-Donate_Monthly_100 .portal,
.page-Donate_Monthly_200 #mw-head,
.page-Donate_Monthly_200 .portal,
.page-Donate_Annually_5 #mw-head,
.page-Donate_Annually_5 .portal,
.page-Donate_Annually_10 #mw-head,
.page-Donate_Annually_10 .portal,
.page-Donate_Annually_25 #mw-head,
.page-Donate_Annually_25 .portal,
.page-Donate_Annually_50 #mw-head,
.page-Donate_Annually_50 .portal,
.page-Donate_Annually_100 #mw-head,
.page-Donate_Annually_100 .portal,
.page-Donate_Annually_200 #mw-head,
.page-Donate_Annually_200 .portal,
.page-Donate_One-time_5 #mw-head,
.page-Donate_One-time_5 .portal,
.page-Donate_One-time_10 #mw-head,
.page-Donate_One-time_10 .portal,
.page-Donate_One-time_25 #mw-head,
.page-Donate_One-time_25 .portal,
.page-Donate_One-time_50 #mw-head,
.page-Donate_One-time_50 .portal,
.page-Donate_One-time_100 #mw-head,
.page-Donate_One-time_100 .portal,
.page-Donate_One-time_200 #mw-head,
.page-Donate_One-time_200 .portal,
.page-Calendar_One-time_25 #mw-head,
.page-Calendar_One-time_25 .portal,
.page-Calendar_One-time_30 #mw-head,
.page-Calendar_One-time_30 .portal,
.page-Calendar_One-time_35 #mw-head,
.page-Calendar_One-time_35 .portal,
.page-Calendar_One-time_50 #mw-head,
.page-Calendar_One-time_50 .portal,
.page-Calendar_One-time_75 #mw-head,
.page-Calendar_One-time_75 .portal,
.page-Calendar_One-time_100 #mw-head,
.page-Calendar_One-time_100 .portal {
    display: none;
}

@media screen and (max-width:767px) {
	.no-narrow {
		display: none;
	}
}
@media screen and (min-width:768px) {
	.narrow-only {
		display: none;
	}
}

/* Limit display of TOC subsections where applied */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
	display: none;
}

/* Page Forms styling */
input.createboxInput
{
  border: 2px solid #ccc !important;
  box-sizing: border-box !important;
  margin: 8px 0 !important;
  max-width: 500px;
  outline: none !important;
  padding: 12px 10px !important;
  width: 50%;
}
Retrieved from "https://wikimediadc.org/index.php?title=MediaWiki:Common.css&oldid=17306"