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
Line 457: Line 457:
 
@media (max-width: 600px) {
 
@media (max-width: 600px) {
 
#firstHeading {
 
#firstHeading {
−
margin-top: 13px;
+
xmargin-top: 13px;
 
}
 
}
 
}
 
}

Revision as of 19:52, 15 February 2019

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

/*redo header */

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

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

}

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

}

  1. user-info .header-menu {

background-color: #7a7a7a !important; color: white !important; }

.header-button collapse-trigger header-button-active { background-color: rgb(198, 93, 25); }

  1. user-info .header-menu a{

xbackground-color: #7a7a7a !important; color: white !important; }

  1. content-heading {

padding-bottom: 0; }


@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 { margin-bottom: .1em; }

  1. jfa-share + h2 {

margin-top: -14px; }

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: relative;

top: 2px; 

   font-size: 13px;
   margin-bottom: 16px;

}

.standard-toolbox a.selected { 

   border-bottom: 0;

}

.fixed-toolbox { 

   top: .3em;
   left: 0;

}


/* tables */

/* table row headings */ .wikitable tbody tr:nth-child(2) { 

 color: rgb(198, 93, 25);

} /* table column headings */ .wikitable table tr td:nth-child(1) { 

   color: rgb(198, 93, 25);

}

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

  1. jfa-factsheet-help {
   color: rgb(198, 93, 25) !important;
   font-size: .9em !important;
   font-style: italic !important;

}

/* move share to top right */

  1. jfa-share {

position: absolute; left: -140px; top: 110px; background: #fff; z-index: 66300; font-size: 15px; margin: -15px 0 0 0; }

  1. jfa-share table {

margin: 0; }

@media (max-width: 600px) { #firstHeading { xmargin-top: 13px; } }

/* end moving share to top right */

  1. jfa-share a:hover {
   border-bottom: 1px #444;

}


.jfa-glf-test { color: white; }

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