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
(Replaced content with "CSS placed here will be applied to all skins: Google Fonts: @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville|Ovo'); #bodyContent { font-...")
(Tag: Replaced)
Line 4: Line 4:
 
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville|Ovo');
 
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville|Ovo');
  
#bodyContent {
+
 
font-size: 1.2em !important;
+
/* =========== ANY AND ALL COLORS  =============== */
line-height: 1.6 !important;
+
 
font-family: "Ovo", sans-serif !important;
+
/* 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: #762c80 !important;
 
}
 
}
  
 +
/* ----------- Content Colors -------------------------- */
 +
#jfatitle a,
 +
#firstHeading,
 
div#content h1,
 
div#content h1,
 
div#content h2,
 
div#content h2,
Line 17: Line 53:
 
div#content h6 {
 
div#content h6 {
 
     font-family: "Libre+Baskerville", serif;
 
     font-family: "Libre+Baskerville", serif;
     color: #383838;
+
    /* color: #5a7c9f; legacy blue */
 +
    /* color: #537c63;  green */
 +
     color: #383838; /* dark gray */
 +
}
 +
 
 +
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: #762c80 !important;
 +
}
 +
 
 +
/* content border */
 +
.mw-body {
 +
    border: 0px solid #d66b28 !important; /* orange */
 +
}
 +
 
 +
 
 +
/* ----------- Dialog / UI Colors -------------------------- */
 +
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
 +
    background-color: #7a7a7a !important;
 +
}
 +
 
 +
/* ___________End Colors _____________ */
 +
 
 +
/* magnify most everything */
 +
body {
 +
    font-size: 130%;
 +
    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;
 +
}
 +
 
 +
 
 +
/* TOP................................ */
 +
 
 +
/* title is creates in common.js */
 +
#jfatitle {
 +
    position: absolute;
 +
    top: 26px;
 +
    left: 220px;
 +
    z-index: 1000;
 +
    font-size: 15px;
 +
    color: #333;
 +
}
 +
 
 +
#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 */
 +
#right-navigation {
 +
    margin-top: .7em;
 +
}
 +
 
 +
/* set the top background color */
 +
#mw-head, #left-navigation, #right-navigation {
 +
    /* background-color: #eaeaea;  gray*/
 +
    /*background-color: #eac2b4;  orange */
 +
    background-color:  #7a7a7a; /* dark gray */
 +
}
 +
 
 +
/* put a border on the bottom of the header */
 +
#mw-head {
 +
    border-bottom: 3px solid #d66b28; /* orange */
 +
}
 +
 
 +
/* resize the very top right personal menu */
 +
#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 */
 +
#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,
 +
#mw-head .vectorMenu h3
 +
{
 +
    background-image: none;
 +
}
 +
 +
/* bring top left navagation back up */
 +
#left-navigation {
 +
    margin-top: .7em;
 +
}
 +
 +
/* SIDEBAR............................ */
 +
 +
/* hide the sidebar logo */
 +
#p-logo a {
 +
    /* display:none; */
 +
}
 +
 +
/* set the sidebar backgroundcolor */
 +
body, #mw-page-base {
 +
    /* background-color:  #dae7df; green */
 +
    /* background-color: #eaeaea; gray */
 +
    /* background-color:  #e8eadc;  gray green */
 +
    background-color: #e4ece7; /* light green */
 +
    /* background-color: #e4e4e4; */
 +
}
 +
#mw-page-base {
 +
    background-image: none;
 +
}
 +
 +
/* why did the theme hide the top header "sections"? */
 +
#mw-panel #p-logo + .portal h3 {
 +
    display: block;
 +
}
 +
 +
/* CONTENT.................................. */
 +
#content {
 +
    margin-top: -30px;
 +
    background-color: #f7f7f7;
 +
}
 +
 +
#content a, #content a:visited {
 +
    color: #0b0080;
 +
}
  
 
/* TEMPLATES....................................*/
 
/* TEMPLATES....................................*/
Line 43: Line 238:
 
     padding-right: 0px;
 
     padding-right: 0px;
 
     padding-left: 0px;
 
     padding-left: 0px;
     /* font-size: .8em; */
+
     font-size: .8em;
 
}
 
}
  
 +
/* Stop Expand/Collapse Crowding */
 +
.mw-customtoggle, .mw-collapsible-toggle {
 +
    margin-left: 10px;
 +
}
  
 
/* for jfa-h4wrap template */
 
/* for jfa-h4wrap template */
 
h4.jfa-h4wrap, h4.jfa-h4wrap + p {
 
h4.jfa-h4wrap, h4.jfa-h4wrap + p {
display: inline !important;
+
    display: inline !important;
 
}
 
}
  
 
/* for jfa-hwrap template */
 
/* for jfa-hwrap template */
 
.jfa-hwrap {
 
.jfa-hwrap {
/*margin-top: -16px;*/
+
    margin-top: -16px;
 
}
 
}
 
.jfa-hwrap h1,
 
.jfa-hwrap h1,
Line 63: Line 262:
 
.jfa-hwrap h6,
 
.jfa-hwrap h6,
 
.jfa-hwrap p {
 
.jfa-hwrap p {
display: inline;
+
    display: inline;
 
}
 
}
  
 
/* hide table of contents numbering */
 
/* hide table of contents numbering */
 
/* .tocnumber { display: none; } */
 
/* .tocnumber { display: none; } */
 
/* ---------------------------------------------------------------------- */
 

Revision as of 09:21, 6 February 2019

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

/* Google Fonts */ @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville%7COvo');


/* =========== 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,

  1. jfatitle a,
  2. jfatitle a:visited,
  3. jfatitle a:visited,

.vectorMenu h3 span {

   color: #fdfdfd !important;

}

.vectorMenu .menu {

   background-color: #7a7a7a !important;

}

/* .ns-special #simpleSearch, */

  1. simpleSearch input {
   background-color: #f0f0f0 !important;

}

/* ----------- Side Colors -------------------------- */ /* links */

  1. mw-panel .portal .body li a,
  2. mw-panel .portal .body li a:visited,
  3. mw-panel .portal .body li a:active {
   color: #762c80 !important;

}

/* ----------- Content Colors -------------------------- */

  1. jfatitle a,
  2. firstHeading,

div#content h1, div#content h2, div#content h3, div#content h4, div#content h5, div#content h6 {

   font-family: "Libre+Baskerville", serif;
   /* color: #5a7c9f; legacy blue */
   /* color: #537c63;   green */
   color: #383838; /* dark gray */

}

h4 {font-size:110% !important; }


div#content .mw-parser-output h3 {

   border-bottom: 1px solid #9f501e;

}

/* links */

  1. content a,
  2. content a:visited,
  3. content a:active {
   color: #762c80 !important;

}

/* content border */ .mw-body {

   border: 0px solid #d66b28 !important; /* orange */

}


/* ----------- Dialog / UI Colors -------------------------- */ .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {

   background-color: #7a7a7a !important;

}

/* ___________End Colors _____________ */

/* magnify most everything */ body {

   font-size: 130%;
   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;

}


/* 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 */

  1. mw-head, #left-navigation, #right-navigation {
   /* background-color: #eaeaea;  gray*/
   /*background-color: #eac2b4;  orange */
   background-color:  #7a7a7a; /* dark gray */

}

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

  1. mw-head {
   border-bottom: 3px 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; green */
   /* background-color: #eaeaea; gray */
   /* background-color:  #e8eadc;  gray green */
   background-color: #e4ece7; /* light green */
   /* background-color: #e4e4e4; */

}

  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;

}

/* Stop Expand/Collapse Crowding */ .mw-customtoggle, .mw-collapsible-toggle {

   margin-left: 10px;

}

/* for jfa-h4wrap template */ h4.jfa-h4wrap, h4.jfa-h4wrap + p {

   display: inline !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;

}

/* hide table of contents numbering */ /* .tocnumber { display: none; } */