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
(Blanked the page)
(Tag: Blanking)
 
(49 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Refreshed Skin Tweaks */
 
/* Google Fonts */
 
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville|Ovo');
 
  
/*redo header */
 
 
/* 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: 10px;
 
}
 
 
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;
 
}
 
 
/* 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 a:hover {
 
    border-bottom: 1px #444;
 
}
 
 
 
#jfa-share + #jfa-toc {
 
margin-top: -37px;
 
}
 
 
.jfa-glf-test {
 
color: white;
 
}
 

Latest revision as of 05:17, 25 February 2019