To get updates on new site content, like us on Facebook or follow us on Twitter.

Difference between revisions of "MediaWiki:Common.css"

From JFA Wiki
(Reverted edits by Greg.Fuller (talk) to last revision by Gregfuller)
(Tag: Rollback)
Line 1: Line 1:
 
/* CSS placed here will be applied to all skins */
 
/* CSS placed here will be applied to all skins */
 
/* Google Fonts */
 
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville|Ovo');
 
 
div#bodyContent.mw-body-content  {
 
line-height: 1.4 !important;
 
}
 
 
/* =========== ANY AND ALL COLORS  =============== */
 
 
/* Default Colors */
 
a,
 
a:visited,
 
a:visited {
 
    color: #fdfdfd !important;
 
}
 
 
/* ----------- Top Colors -------------------------- */
 
/* links */
 
.vectorTabs li a,
 
.vectorTabs li a:visited,
 
.vectorTabs li a:active,
 
#jfatitle a,
 
#jfatitle a:visited,
 
#jfatitle a:visited,
 
.vectorMenu h3 span {
 
    color: #fdfdfd !important;
 
}
 
 
.vectorMenu .menu {
 
    background-color: #7a7a7a !important;
 
}
 
 
/* .ns-special #simpleSearch, */
 
#simpleSearch input {
 
    background-color: #f0f0f0 !important;
 
}
 
 
/* ----------- Side Colors -------------------------- */
 
/* links */
 
#mw-panel .portal .body li a,
 
#mw-panel .portal .body li a:visited,
 
#mw-panel .portal .body li a:active {
 
    color: #5a7c9f !important;
 
}
 
 
/* ----------- Content Colors -------------------------- */
 
 
#jfatitle a,
 
#firstHeading,
 
div#content h1 {
 
    font-family: "Libre+Baskerville", serif;
 
    font-weight: normal;
 
    /* color: #5a7c9f; legacy blue */
 
    /* color: #537c63;  green */
 
    color: #444; /* dark gray */
 
    border: 0px;
 
}
 
 
div#content h2,
 
div#content h3,
 
div#content h4,
 
div#content h5,
 
div#content h6 {
 
    font-family: "Libre+Baskerville", serif;
 
    font-weight: normal;
 
    /* color: #5a7c9f; legacy blue */
 
    /* color: #666; dark gray */
 
    color: rgb(198, 93, 25); /* mid orange */
 
}
 
 
div#content h2 {
 
border: 0;
 
}
 
 
div#content h3 {
 
    border-bottom: 1px solid #5a7c9f;
 
}
 
 
/* h4 {font-size:110% !important; } */
 
 
 
div#content .mw-parser-output h3 {
 
    /* border-bottom: 1px solid #9f501e; */
 
}
 
 
/* links */
 
#content a,
 
#content a:visited,
 
#content a:active {
 
    color: #5a7c9f !important;
 
}
 
 
/* content border */
 
.mw-body {
 
color: #555555;
 
    border: 1px solid #d66b28 !important; /* orange */
 
}
 
 
#toc {
 
background-color: #fff;
 
margin-top: 8px;
 
}
 
 
.toctogglelabel, .toctitle {
 
color: #666;
 
}
 
 
/* hide table of contents numbering */
 
.tocnumber { display: none; }
 
 
.toctext, .tocnumber {
 
font-size: .95em;
 
color: #5a7c9f;
 
}
 
 
.toclevel-1, .toclevel-2, .toclevel-3, .toclevel-4 {
 
list-style-type: circle;
 
}
 
 
/* Footer Colors */
 
#footer ul#footer-places, #footer ul#footer-places a {
 
color: #55555 !important;
 
}
 
 
 
/* ----------- Dialog / UI Colors -------------------------- */
 
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
 
    background-color: #7a7a7a !important;
 
}
 
 
/* ___________End Colors _____________ */
 
  
 
/* magnify most everything */
 
/* magnify most everything */
 
body {
 
body {
    font-size: 130%;
+
font-size: 130%;
    max-width: 1100px;
+
max-width: 1100px;
    font-family: "Ovo", sans-serif;
 
 
}
 
}
  
div#content .mw-parser-output span h3 {
 
    border: 0;
 
}
 
 
/* universals */
 
.mw-body h1 {
 
    font-size: 1.5em;
 
}
 
  
  
Line 154: Line 13:
 
/* title is creates in common.js */
 
/* title is creates in common.js */
 
#jfatitle {
 
#jfatitle {
    position: absolute;
+
position: absolute;
    top: 26px;
+
top: 26px;
    left: 220px;
+
left: 220px;
    z-index: 1000;
+
z-index: 1000;
    font-size: 15px;
+
font-size: 15px;
    color: #333;
+
color: #333;
 
}
 
}
  
 
#jfatitle a, a:visited {
 
#jfatitle a, a:visited {
    color: #333;
+
color: #333;
 
}
 
}
  
 
@media screen and (min-width: 800px) {
 
@media screen and (min-width: 800px) {
    #jfatitle {
+
#jfatitle {
        font-size: 22px;
+
font-size: 22px;
        top: 16px;
+
top: 16px;
        left: 235px;
+
left: 235px;
    }
+
}
 
}
 
}
  
 
/* close the gap between the two rows of menus */
 
/* close the gap between the two rows of menus */
 
#right-navigation {
 
#right-navigation {
    margin-top: .7em;
+
margin-top: .7em;
 
}
 
}
  
 
/* set the top background color */
 
/* set the top background color */
#mw-head, #left-navigation, #right-navigation {
+
#mw-head, #left-navigation, #right-navigation {
    /* background-color: #eaeaea; gray*/
+
background-color: #eaeaea;
    /*background-color: #eac2b4;  orange */
 
    background-color:  #7a7a7a; /* dark gray */
 
 
}
 
}
  
 
/* put a border on the bottom of the header */
 
/* put a border on the bottom of the header */
 
#mw-head {
 
#mw-head {
    border-bottom: 5px solid #d66b28; /* orange */
+
border-bottom: 2px solid #d66b28; /* orange */
 
}
 
}
  
 
/* resize the very top right personal menu */
 
/* resize the very top right personal menu */
 
#p-personal {
 
#p-personal {
    font-size: .9em;
+
font-size: .9em;
 
}
 
}
  
 
/* size and reposition top tabs */
 
/* size and reposition top tabs */
 
.vectorTabs, .vectorMenu {
 
.vectorTabs, .vectorMenu {
    font-size: .8em;
+
font-size: .8em;
    margin-top: 1em;
+
margin-top: 1em;
 
}
 
}
  
 
.ns-special .vectorTabs {
 
.ns-special .vectorTabs {
    margin-top: .8em;
+
margin-top: .8em;
 
}
 
}
  
 
/* size and reposition the search box */
 
/* size and reposition the search box */
 
#simpleSearch {
 
#simpleSearch {
    font-size: .8em;
+
font-size: .8em;
    margin-top: 1.6em;
+
margin-top: 1.6em;
 
}
 
}
  
 
.ns-special #simpleSearch {
 
.ns-special #simpleSearch {
    margin-bottom: .3em;
+
margin-bottom: .3em;
 
}
 
}
  
Line 222: Line 79:
 
.vectorTabs ul,
 
.vectorTabs ul,
 
.vectorTabs,
 
.vectorTabs,
#mw-head .vectorMenu h3
+
#mw-head .vectorMenu h3
{
+
{
    background-image: none;
+
background-image: none;
}
+
}
  
 
/* bring top left navagation back up */
 
/* bring top left navagation back up */
 
#left-navigation {
 
#left-navigation {
    margin-top: .7em;
+
margin-top: .7em;
 
}
 
}
  
Line 236: Line 93:
 
/* hide the sidebar logo */
 
/* hide the sidebar logo */
 
#p-logo a {
 
#p-logo a {
    /* display:none; */
+
/* display:none; */
 
}
 
}
  
 
/* set the sidebar backgroundcolor */
 
/* set the sidebar backgroundcolor */
 
body, #mw-page-base {
 
body, #mw-page-base {
    /* background-color:  #dae7df; green */
+
background-color:  #dae7df;
    /* background-color: #eaeaea; gray */
 
    /* background-color:  #e8eadc;  gray green */
 
    /* background-color: #e4ece7; /* light green */
 
      background-color: #f7f7f7;  
 
 
}
 
}
 
#mw-page-base {
 
#mw-page-base {
    background-image: none;
+
background-image: none;
 
}
 
}
  
 
/* why did the theme hide the top header "sections"? */
 
/* why did the theme hide the top header "sections"? */
 
#mw-panel #p-logo + .portal h3 {
 
#mw-panel #p-logo + .portal h3 {
    display: block;
+
display: block;
 
}
 
}
  
 
/* CONTENT.................................. */
 
/* CONTENT.................................. */
 
#content {
 
#content {
    margin-top: -30px;
+
margin-top: -30px;
    background-color: #fff;
+
background-color: #f7f7f7;
 
}
 
}
  
 
#content a, #content a:visited {
 
#content a, #content a:visited {
    color: #0b0080;
+
color: #0b0080;
 
}
 
}
  
 
/* TEMPLATES....................................*/
 
/* TEMPLATES....................................*/
 
.jfaredflag {
 
.jfaredflag {
    color: #333;
+
color: red;
    text-transform: uppercase;
 
    font-weight: bold;
 
 
}
 
}
  
 
.jfanote {
 
.jfanote {
    margin-bottom: 16px;
+
margin-bottom: 16px;
    margin-top: 16px;
+
margin-top: 16px;
    padding-right: 10px;
+
padding-right: 10px;
    padding-left: 14px;
+
padding-left: 14px;
    font-size: .8em;
+
font-size: .8em;
    border-left: 1px solid gray;
+
border-left: 1px solid gray;
    color: #98582a;
+
color: #98582a;
 
}
 
}
  
 
.jfastart, .jfaoutline-head, .jfaclipboard-head {
 
.jfastart, .jfaoutline-head, .jfaclipboard-head {
    margin-bottom:0px;
+
margin-bottom:0px;
    margin-top: 0px;
+
margin-top: 0px;
    padding-right: 0px;
+
padding-right: 0px;
    padding-left: 0px;
+
padding-left: 0px;
    font-size: .8em;
+
font-size: .8em;
}
 
 
 
.jfastart {
 
padding-left: 10px;
 
border-left: 2px solid #4444;
 
}
 
 
 
/* Stop Expand/Collapse Crowding */
 
.mw-customtoggle, .mw-collapsible-toggle {
 
    margin-left: 10px;
 
}
 
 
 
/* for jfa-h4wrap template */
 
div#content h4.jfa-hwrap, div#content h4.jfa-hwrap + p {
 
    display: inline !important;
 
    font-family: "Ovo", sans-serif !important;
 
    color: #eac2b4 !important;
 
}
 
 
 
/* for jfa-hwrap template */
 
.jfa-hwrap {
 
    margin-top: -16px;
 
}
 
.jfa-hwrap h1,
 
.jfa-hwrap h2,
 
.jfa-hwrap h3,
 
.jfa-hwrap h4,
 
.jfa-hwrap h5,
 
.jfa-hwrap h6,
 
.jfa-hwrap p {
 
    display: inline;
 
}
 
 
 
 
 
/* make log contrast items visible */
 
/* ? .buttonElement */
 
.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
 
color: #fff !important;
 
 
}
 
}

Revision as of 01:45, 10 February 2019

/* CSS placed here will be applied to all skins */

/* magnify most everything */ body { font-size: 130%; max-width: 1100px; }


/* TOP................................ */

/* title is creates in common.js */

  1. jfatitle {

position: absolute; top: 26px; left: 220px; z-index: 1000; font-size: 15px; color: #333; }

  1. jfatitle a, a:visited {

color: #333; }

@media screen and (min-width: 800px) { #jfatitle { font-size: 22px; top: 16px; left: 235px; } }

/* close the gap between the two rows of menus */

  1. right-navigation {

margin-top: .7em; }

/* set the top background color */

#mw-head, #left-navigation, #right-navigation {

background-color: #eaeaea; }

/* put a border on the bottom of the header */

  1. mw-head {

border-bottom: 2px solid #d66b28; /* orange */ }

/* resize the very top right personal menu */

  1. p-personal {

font-size: .9em; }

/* size and reposition top tabs */ .vectorTabs, .vectorMenu { font-size: .8em; margin-top: 1em; }

.ns-special .vectorTabs { margin-top: .8em; }

/* size and reposition the search box */

  1. simpleSearch {

font-size: .8em; margin-top: 1.6em; }

.ns-special #simpleSearch { margin-bottom: .3em; }

/* take the ancient gradients off some of the top tabs */ .vectorTabs li.selected, .vectorTabs ul li, .vectorTabs span, .vectorTabs ul, .vectorTabs,

  1. mw-head .vectorMenu h3

{ background-image: none; }

/* bring top left navagation back up */

  1. left-navigation {

margin-top: .7em; }

/* SIDEBAR............................ */

/* hide the sidebar logo */

  1. p-logo a {

/* display:none; */ }

/* set the sidebar backgroundcolor */ body, #mw-page-base { background-color: #dae7df; }

  1. mw-page-base {

background-image: none; }

/* why did the theme hide the top header "sections"? */

  1. mw-panel #p-logo + .portal h3 {

display: block; }

/* CONTENT.................................. */

  1. content {

margin-top: -30px; background-color: #f7f7f7; }

  1. content a, #content a:visited {

color: #0b0080; }

/* TEMPLATES....................................*/ .jfaredflag { color: red; }

.jfanote { margin-bottom: 16px; margin-top: 16px; padding-right: 10px; padding-left: 14px; font-size: .8em; border-left: 1px solid gray; color: #98582a; }

.jfastart, .jfaoutline-head, .jfaclipboard-head { margin-bottom:0px; margin-top: 0px; padding-right: 0px; padding-left: 0px; font-size: .8em; }