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)
(Undo revision 1656 by Greg.Fuller (talk))
(Tag: Undo)
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: 4px;
 +
    left: 214px;
 +
    z-index: 10001;
 +
    color: #fff;
 +
}
 +
 +
#jfatitle a, #jfatitle a:visited {
 +
    color: #fff;
 +
    font-size: 36px;
 +
 +
}
 +
 +
@media (min-width: 601px) {
 +
    /* tablet and desktop */
 +
    #site-info img {
 +
        width: 130px;
 +
        height: 130px;
 +
        top: 20px;
 +
        position: absolute;
 +
        left: 30px;
 +
    }
 +
 +
    #sidebar-wrapper {
 +
        position: relative;
 +
        float: left;
 +
        margin-top: 70px;
 +
    }
 +
 +
    #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-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;
 +
    }
 +
 +
    /* 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;
 +
    }
 +
}

Revision as of 13:49, 13 February 2019

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

/*redo header */

/* title is creates in common.js */

  1. jfatitle {
   position: absolute;
   top: 4px;
   left: 214px;
   z-index: 10001;
   color: #fff;

}

  1. jfatitle a, #jfatitle a:visited {
   color: #fff;
   font-size: 36px;

}

@media (min-width: 601px) { 

   /* tablet and desktop */
   #site-info img {
       width: 130px;
       height: 130px;
       top: 20px;
       position: absolute;
       left: 30px;
   }

   #sidebar-wrapper {
       position: relative;
       float: left;
       margin-top: 70px;
   }

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

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

  1. sidebar-wrapper {
   color: #444;

}

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

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

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

  1. jfa-toc {

}

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

  1. 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 ?? */

  1. 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);

}

  1. 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-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;
   }

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

}

Retrieved from "https://justiceforanimals.org/index.php?title=MediaWiki:Common.css&oldid=1657"