MediaWiki:Common.css
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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* Refreshed Skin Tweaks */ /* Google Fonts */ @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville%7COvo');
/*redo header */
- jfa-sitenotice {
font-family: "Ovo", sans-serif; text-align: left; font-size: 16px; margin-top: 8px; margin-left: 14px; color: rgb(198, 93, 25); }
/* title is creates in common.js */
- jfatitle {
position: absolute; top: 8px; left: 214px; z-index: 10001; color: #fff;
}
- jfatitle a, #jfatitle a:visited {
color: #fff; font-size: 34px;
}
- user-info .header-menu {
background-color: #7a7a7a !important; color: white !important; }
.header-button collapse-trigger header-button-active { background-color: rgb(198, 93, 25); }
- user-info .header-menu a{
xbackground-color: #7a7a7a !important; color: white !important; }
@media (min-width: 601px) {
/* tablet and desktop */
#site-info img {
width: 130px;
height: 130px;
top: 10px;
position: absolute;
left: 30px;
}
#sidebar-wrapper {
position: relative;
float: left;
margin-top: 40px;
}
#sidebar {
position: relative;
float: left;
}
#header-wrapper {
position: relative;
}
#content-wrapper {
padding-left: 8px;
top: 0;
}
}
@media (max-width: 1000px) and (min-width: 601px) {
/* tablet */
#site-info img {
left: 14px;
}
#jfatitle {
left: 186px;
top: 8px;
}
}
/* odd size for header adjustment to keep left and right stuff from overlapping */ @media (max-width: 760px) and (min-width: 601px) {
/* tablet */
#jfatitle a, #jfatitle a:visited {
font-size: 26px;
left: 170px;
top: 12px;
}
}
/* styling for phones and smaller tablets */ @media (max-width: 600px) {
/* title is created in common.js */
#header-wrapper {
top: 0;
}
#jfatitle {
top: 8px;
left: 58px;
position: fixed;
}
#jfatitle a, a:visited {
color: #fff;
font-size: 26px;
}
.avatar {
margin-top: 2px;
}
#small-toolbox-wrapper {
font-size: 2.2em;
}
}
/* redo header end */
/* major fixes */
/* titles should wrap no matter where */ @media (max-width: 1000px) and (min-width: 601px) {
#firstHeading {
white-space: normal;
}
}
@media (max-width: 600px) {
#firstHeading {
white-space: normal;
}
}
/* global styling */
body {
font-family: "Ovo", sans-serif; background-color: #7a7a7a; /* bg-color of site */; background-color: #f7f7f7; color: #555; /* content/text color of site */;
}
DIV#bodyContent {
font-family: "Ovo", sans-serif;
}
h1, #firstHeading {
font-family: "Libre+Baskerville", serif; color: #555; font-weight: normal; font-size: 34px; margin-top: 0;
}
h2, h3, h4, h5, h6 {
font-family: "Libre+Baskerville", serif; color: rgb(198, 93, 25); font-weight: normal;
}
a, a:visited {
color: #5a7c9f;
}
a.new, a.new:visited {
color: #5a7c9f;
}
a.new:hover {
border-bottom: 0.25em solid #a55858;
}
/* header */
- header-wrapper {
background: #7a7a7a; /* bg-color/gradient of header web component */; border-bottom: 3px solid rgb(198, 93, 25);;
}
.header-button:hover, .header-dropdown-item:hover, .header-button-active, .sitedropdown-highlighted, .dropdown-highlighted {
/*background-color: bg-color of header items and dropdown menus */; /* color: content/text color of header items and dropdown menus */;
}
/* sidebar */
- sidebar-wrapper {
color: #444;
}
- sidebar a, #sidebar a:hover, #sidebar a:visited {
color: #444; xfont-weight: bold; color: #5a7c9f; margin-right: 10px; margin-bottom: 5px; line-height: 18px;
}
/* menu headings */
- sidebar h1 {
color: rgb(198, 93, 25); xfont-weight: bold; margin-left: 20px; margin-right: 20px; margin-top: 12px; margin-bottom: 6px; border-bottom: 1px solid; font-size: 16px;
}
/* content */
- bodyContent {
padding: 0 1em; line-height: 1.5em; font-size: 1.2em; word-wrap: break-word; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; color: #555;
}
.mw-parser-output a.external, .mw-parser-output a.external:visited {
color: #5a7c9f;
}
/* give [expand] [collapse] some breathing room */ .mw-collapsible-toggle {
margin-left: 10px;
}
/* toc */
- jfa-toc {
}
- toc {
float: right; margin-left: 20px; margin-bottom: 20px; max-width: 50%; background-color: #fff; padding: 16px;
}
/* hide table of contents numbering */ .tocnumber {
display: none;
}
.toctext, .tocnumber {
font-size: .95em; color: #5a7c9f;
}
/* the little show/hide on toc */
- toc .toctogglelabel, #toc .toctogglecheckbox {
color: #5a7c9f;
}
.toclevel-2, .toclevel-3, .toclevel-4 {
list-style-type: circle;
}
.header-button:hover, .header-button-active, .header-dropdown-item:hover {
background-color: rgb(198, 93, 25);
}
.standard-toolbox {
font-family: "Ovo", sans-serif; height: 1.5em; position: absolute; bottom: 1.20em; font-size: 13px;
}
.standard-toolbox a.selected {
border-bottom: 0;
}
.fixed-toolbox {
top: .3em;
}
/* tables */
.wikitable tbody tr:nth-child(2) {
color: rgb(198, 93, 25);
}
/* mobile ?? */
- user-info .header-menu {
top: 2.75em; background-color: rgb(198, 93, 25); padding: 0.15em 0 0.15em 0
}
.sidebar-shower {
background-color: rgb(198, 93, 25);
}
- header-wrapper .search-form {
xbackground-color: rgb(198, 93, 25);
}
/* styling for medium and large sized tablets */ @media (max-width: 1000px) and (min-width: 601px) {
#header-wrapper .search-form {
background-color: rgb(198, 93, 25); /* bg-color of search on tablet */;
}
}
/* styling for phones and smaller tablets */ @media (max-width: 600px) {
#sidebar-wrapper {
background-color: #f7f7f7 /* bg-color of sidebar on phones */;
color: #444;
}
#user-info .header-menu {
background-color: #333 /* bg-color of user dropdown menu */;
}
#toc {
float: none;
margin-left: 0;
width: 100%;
max-width: 100%;
}
#bodyContent {
font-size: 1.3em;
}
}
/* TEMPLATES....................................*/ /* first set fonts for templates */ .jfa-expand, .jfa-plaintext {
color: #555;
}
.jfaredflag {
color: #333; text-transform: uppercase; font-weight: bold;
}
.jfanote {
margin-bottom: 16px; margin-top: 16px; padding-right: 10px; padding-left: 14px; font-size: .9em; line-height: 1.4em; border-left: 1px solid gray; color: #98582a;
}
.jfastart, .jfaoutline-head, .jfaclipboard-head {
margin-bottom: 0; margin-top: 0; padding-right: 0; padding-left: 0; font-size: .8em;
}
.jfastart {
font-style: italic; text-align: center; font-size: .80em; color: rgb(198, 93, 25); margin-bottom: 10px;
}
/* Stop Expand/Collapse Crowding */ .mw-customtoggle, .mw-collapsible-toggle {
margin-left: 10px;
}
/* for jfa-hwrap template */ /* div#content h4.jfa-hwrap, div#content h4.jfa-hwrap + p {
display: inline !important; font-family: "Ovo", sans-serif !important; xcolor: #eac2b4 !important;
}
- /
.jfa-hwrap h4, .jfa-hwrap p:first-of-type { display: inline !important; }
.jfa-hwrap { margin-top: 16px; }
/* plain text expand, 2nd row */
- jfa-factsheet-help {
color: rgb(198, 93, 25) !important; font-size: .9em !important; font-style: italic !important;
}
- jfa-share {
margin-top: -16px; }
- jfa-share a:hover {
border-bottom: 1px #444;
}
/* hack to appropriately consider the presence or absence of
jfa-share, jfa-toc, jfa-maintence in all combinations (hopefully) */
@media (min-width: 9601px) { /* s/b 601, used 9601 to make it a comment */
/* tablet and desktop */
#jfa-share + #jfa-toc { margin-top: -55px; } #jfa-share + #jfa-toc + #jfa-maintext, #jfa-share + #jfa-toc + h2, #jfa-share + #jfa-toc + h3, #jfa-share + #jfa-toc + p { margin-top: 60px; }
/* avoid overlap when share is expanded */ #jfa-share { max-width: 45%; } }
.jfa-glf-test { color: white; }
