|
|
(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;
| |
− | }
| |