|
|
| (45 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;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* hack to appropriately consider the presence or absence of
| |
| − | jfa-share, jfa-toc, jfa-maintence in all combinations (hopefully) */
| |
| − | @media (min-width: 2601px) {
| |
| − | /* tablet and desktop */
| |
| − | #jfa-share + #jfa-toc {
| |
| − | margin-top: -55px;
| |
| − | }
| |
| − | #jfa-share + #jfa-toc + #jfa-maintext,
| |
| − | #jfa-share + #jfa-toc + h2,
| |
| − | #jfa-share + #jfa-toc + h3,
| |
| − | #jfa-share + #jfa-toc + p
| |
| − | {
| |
| − | margin-top: 60px;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .jfa-glf-test {
| |
| − | color: white;
| |
| − | }
| |
