MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/*
<pre>*/
/* === Template:Ambox designs === */
/* Ambox design */
.ambox {
font-size: 95%;
width: 80%;
margin: 0 auto;
border: 1px #474747 solid;
border-left: 10px solid #228b22;
border-collapse: collapse;
background-color: #242424;
}
/* Ambox colours */
.ambox-blue {
border-left: 10px solid #1e90ff; /* Blue */
}
.ambox-deep-blue {
border-left: 10px solid #0a03a5; /* Deep Blue */
}
.ambox-red {
border-left: 10px solid #b22222; /* Red */
}
.ambox-orange {
border-left: 10px solid #f28500; /* Orange */
}
.ambox-brown {
border-left: 10px solid #59330b; /* Brown */
}
.ambox-yellow {
border-left: 10px solid #f4c430; /* Yellow */
}
.ambox-purple {
border-left: 10px solid #9932cc; /* Purple */
}
.ambox-pink {
border-left: 10px solid #f76fe3; /* Pink */
}
.ambox-gray {
border-left: 10px solid #c0c0c0; /* Gray */
}
.ambox-dark-gray {
border-left: 10px solid #4e4e4e; /* Dark Gray */
}
.ambox-green {
border-left: 10px solid #228b22; /* Green */
}
.ambox-black {
border-left: 10px solid #000000; /* Black */
}
.ambox-white {
border-left: 10px solid #ffffff; /* White */
}
/* Ambox small text */
.ambox-smalltext {
font-size: smaller;
margin-top:0.5em;
margin-left:0.8em;
}
/* Ambox image */
.ambox-image { /* The left image cell */
width: 60px;
padding: 2px 0px 2px 0.5em; /* 0.5em left, 0px right */
text-align: center;
}
@media print { .ambox { display: none; } } /* no ambox when printing */
/*</pre>
*/
/* === Glowing hyperlinks === */
a:visited:hover, .color2 a:visited:hover {
color: #3333CC;
text-shadow: #0499f7 0 0 5px;
text-decoration:none;
}
a:hover, .color2 a:hover {
color: #0000FF0;
text-shadow: #1900FF 0 0 5px;
text-decoration:none;
}
/* Infobox template style */
.infobox {
border: 1px solid #a2a9b1;
border-spacing: 3px;
background-color: #f8f9fa;
color: black;
/* @noflip */
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
/* @noflip */
float: right;
/* @noflip */
clear: right;
font-size: 88%;
line-height: 1.5em;
}
.infobox caption {
font-size: 125%;
font-weight: bold;
padding: 0.2em;
}
.infobox td,
.infobox th {
vertical-align: top;
/* @noflip */
text-align: left;
}
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #a2a9b1;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
.infobox.sisterproject {
width: 20em;
font-size: 90%;
}
.infobox.standard-talk {
border: 1px solid #c0c090;
background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
border: 1px solid #c0c090;
}
/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
border: 0;
border-top: 1px solid #a2a9b1;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
border: 0;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
/* Styles for geography infoboxes, eg countries,
country subdivisions, cities, etc. */
.infobox.geography {
border-collapse: collapse;
line-height: 1.2em;
font-size: 90%;
}
.infobox.geography td,
.infobox.geography th {
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
border: 0;
padding: 0 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
border-top: 0;
border-bottom: 1px solid #a2a9b1;
padding: 0 0.6em 0.4em 0.6em;
}
.infobox.geography .maptable td,
.infobox.geography .maptable th {
border: 0;
padding: 0;
}
/* === Make main page header invisible === */
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
/* === Quote Framework === */
:root {
-pull-quote-max-width: 80%;
-pull-quote-text-color: var(--theme-page-text-color, rgba(0, 0, 0, .8));
-pull-quote-mark-color: rgba(var(--theme-page-text-color--rgb), .15);
-pull-quote-mark-font: "Times New Roman", serif;
-pull-quote-hyphens: auto;
-pull-quote-frame-color: #bbb;
}
/* #content added as a parent selector to the following in order to override default blockquote styles. */
/* === Quote formatting I got to work: === */
.pull-quote {
background: #eaecf0;
border: 4px solid #eaecf0;
border-radius: 4px;
}
/* === Quote formatting I want but couldn't get to work: === */
/*.pull-quote {
-background: #474747;
-border: 4px solid #750000;
-border-radius: 4px;
-frame-color: #750000;
-mark-color: 117, 0, 0, 1;
-text-color: 192, 192, 192, 1;
}*/
#content .pull-quote {
display: flex;
flex-wrap: wrap;
max-width: var(--pull-quote-max-width);
margin: 1em auto;
font-size: 1em;
line-height: 1.8;
overflow: hidden;
}
#content .pull-quote__text {
flex-basis: 100%;
position: relative;
padding: 0 2em;
hyphens: var(--pull-quote-hyphens);
color: var(--pull-quote-text-color);
}
#content .pull-quote__text::before, #content .pull-quote__text::after {
display: inline;
position: absolute;
font-size: 3em;
font-family: var(--pull-quote-mark-font);
font-weight: 700;
color: var(--pull-quote-mark-color);
}
#content .pull-quote__text::before {
content: "“";
top: 0;
left: 0;
line-height: 1;
}
#content .pull-quote__text::after {
content: "”";
bottom: 0;
right: 0;
line-height: 0.2;
}
#content .pull-quote__source {
margin-left: auto;
}
#content .pull-quote__source cite {
display: inline;
}
#content .pull-quote__source::before {
content: "—";
}
#content .pull-quote--right, #content .pull-quote--left {
border: 1px solid var(--pull-quote-frame-color);
border-left: 0;
border-right: 0;
padding: 1em 0;
text-align: justify;
}
#content .pull-quote--right {
float: right;
margin: 1em 0 1em 2em;
}
#content .pull-quote--left {
float: left;
margin: 1em 2em 1em 0;
}