Foreground.css: Difference between revisions
From Mahara Wiki
(Created page with "→CSS placed here will be applied to the Foreground skin: ") |
No edit summary |
||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to the Foreground skin */ | /* CSS placed here will be applied to the Foreground skin */ | ||
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'); | |||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap&subset=latin-ext'); | |||
html, | |||
body, | |||
.mw-body, | |||
.mw-body h1, | |||
.mw-body h2, | |||
.mw-body h3, | |||
.mw-body h4, | |||
.mw-body h5, | |||
.mw-body h6, | |||
.mw-body a, | |||
.mw-body p { | |||
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |||
} | |||
a, | |||
a:visited, | |||
li a, | |||
li a:visited, | |||
.mw-body a.text, | |||
.mw-body a.text:visited, | |||
.mw-body a.external, | |||
.mw-body a.external:visited, | |||
div.vectorMenu li a, | |||
div.vectorMenu li a:visited, | |||
div.vectorTabs li a, | |||
div.vectorTabs li a:visited, | |||
div.vectorTabs li.new a, | |||
div.vectorTabs li.new a:visited, | |||
a.new, | |||
a.new:visited, | |||
#p-personal a.new:visited, | |||
div#mw-panel div.portal div.body ul li a, | |||
div#mw-panel div.portal div.body ul li a:visited { | |||
color: #566d31; | |||
} | |||
a:hover { | |||
color: #566d31; | |||
text-decoration: underline; | |||
} | |||
div#mw-panel div.portal div.body ul li { | |||
font-size: 0.8em; | |||
} | |||
body, | |||
#mw-page-base { | |||
background: #FFF; | |||
} | |||
ul { | |||
list-style-image: none; | |||
} | |||
nav.top-bar, | |||
nav.top-bar-section { | |||
background: #f5f7f1; | |||
color: #000000; | |||
} | |||
.mw-search-result-data { | |||
color: #636363; | |||
font-size: 90%; | |||
} | |||
.mw-body { | |||
border-color: #919191; | |||
border-top: 0; | |||
margin-top: 12px; | |||
padding-top: 0; | |||
} | |||
div.vectorMenu { | |||
background: #fff; | |||
} | |||
div.vectorTabs { | |||
background-image: none; | |||
border-left: 0; | |||
} | |||
div.vectorTabs ul { | |||
background-image: none; | |||
} | |||
div.vectorTabs ul li { | |||
background-image: none; | |||
background-color: transparent; | |||
background: #fff; | |||
} | |||
div.vectorTabs span, | |||
div#mw-head div.vectorMenu h3 { | |||
background-image: none; | |||
border-right: 0; | |||
} | |||
div.vectorTabs li.selected span { | |||
border-bottom: 2px solid #566d31; | |||
} | |||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { | |||
background-color: #566d31; | |||
border-color: #566d31; | |||
} | |||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { | |||
background-color: #2e391c; | |||
border-color: #2e391c; | |||
} | |||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active { | |||
background-color: #2e391c; | |||
border-color: #2e391c; | |||
} | |||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus, | |||
.oo-ui-textInputWidget.oo-ui-widget-enabled input:focus, .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus { | |||
border-color: #2e391c; | |||
box-shadow: inset 0 0 0 1px #566d31,inset 0 0 0 2px #fff; | |||
} | |||
.fa { | |||
color: #2e391c; | |||
} | |||
.btn { | |||
border-color: grey; | |||
} | |||
div.title-name div.title-name { | |||
display: none !important; | |||
} | |||
.top-bar-section ul li { | |||
background: transparent; | |||
} | |||
.top-bar-section ul li > a, | |||
.top-bar-section li.active:not(.has-form) a:not(.button) { | |||
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |||
color: #566d31; | |||
background: transparent; | |||
font-weight: 700; | |||
} | |||
.top-bar-section ul li > a:hover, | |||
.top-bar-section ul li > a:active, | |||
.top-bar-section ul li > a:visited, | |||
.top-bar-section ul li > a:focused, | |||
.top-bar-section li.active:not(.has-form) a:hover:not(.button), | |||
.top-bar-section li.active:not(.has-form) a:not(.button):hover { | |||
color: #566d31; | |||
background: #FFFFFF; | |||
} | |||
.top-bar-section ul li > a > .fa { | |||
color: #566d31; | |||
} | |||
@media only screen and (min-width: 40.0625em) { | |||
.top-bar-section .has-form { | |||
background: transparent; | |||
} | |||
.top-bar-section .has-dropdown > a { | |||
padding: 0 0.9375rem !important; | |||
} | |||
.top-bar-section li.active:not(.has-form) a:not(.button):hover { | |||
color: #566d31; | |||
background: #FFFFFF; | |||
} | |||
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) { | |||
color: #FFFFFF !important; | |||
background: #566d31; | |||
font-weight: 400; | |||
} | |||
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button), | |||
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button):hover, | |||
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button):hover { | |||
color: #FFFFFF !important; | |||
background: #2e3a1c; | |||
font-weight: 400; | |||
} | |||
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) .fa { | |||
color: #FFFFFF; | |||
} | |||
.top-bar-section .dropdown li.active:not(.has-form) a:not(.button) { | |||
color: #566d31; | |||
background: #FFFFFF; | |||
} | |||
} | |||
.top-bar .toggle-topbar a, | |||
.top-bar .toggle-topbar.menu-icon a { | |||
color: #566d31; | |||
} | |||
.top-bar .toggle-topbar.menu-icon a span::after { | |||
box-shadow: 0 0 0 1px #566d31, 0 7px 0 1px #566d31, 0 14px 0 1px #566d31; | |||
} | |||
.top-bar.expanded .title-area { | |||
background: #f5f7f1; | |||
} | |||
@media only screen and (max-width: 640px) { | |||
.top-bar-section .divider, .top-bar-section [role="separator"] { | |||
border-color: #d1d1d1; | |||
} | |||
.top-bar-section ul, | |||
#personal-tools-dropdown { | |||
border-top: 1px solid #d1d1d1; | |||
} | |||
.top-bar-section ul { | |||
border-bottom: 1px solid #d1d1d1; | |||
} | |||
.top-bar-section ul:first-child { | |||
border-top: 0; | |||
} | |||
} | |||
button, .button, a.button { | |||
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |||
background-color: #566d31; | |||
border-color: #566d31; | |||
color: #FFFFFF !important; | |||
} | |||
button:hover, button:focus, .button:hover, .button:focus, a.button:hover, a.button:focus { | |||
background-color: #566d31; | |||
border-color: #566d31; | |||
color: #FFFFFF !important; | |||
} | |||
button.radius, .button.radius, a.button { | |||
border-radius: 30px; | |||
} | |||
.fa .show-for-medium-up { | |||
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |||
} | |||
footer.row { | |||
background-color: #556d32; | |||
padding-top: 20px; | |||
padding-bottom: 20px; | |||
color: #9db577; | |||
max-width: 100%; | |||
} | |||
footer.row a { | |||
color: #9db577; | |||
} | |||
.top-bar .button.search { | |||
border-radius: 0 20px 20px 0; | |||
font-size: 12px; | |||
margin-left: -4px; | |||
} | |||
.top-bar input[type="search"] { | |||
border-radius: 20px 0 0 20px; | |||
border: 1px solid #566d31; | |||
box-shadow: none; | |||
font-size: 12px; | |||
} | |||
h1, h2, h3, h4, h5, h6 { | |||
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |||
} | |||
h1#firstHeading { | |||
font-weight: 300; | |||
} | |||
input[type="submit"] { | |||
background: #566d31; | |||
border: 0; | |||
border-radius: 20px; | |||
box-shadow: none; | |||
} | |||
.top-bar { | |||
padding: 5px 0; | |||
} | |||
.label { | |||
background-color: #e7e7e7; | |||
color: #000000; | |||
} | |||
.toctogglelabel { | |||
color: #566d31; | |||
} | |||
.text-center #footer-left { | |||
float: left; | |||
} |
Revision as of 11:57, 27 August 2019
/* CSS placed here will be applied to the Foreground skin */
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap&subset=latin-ext');
html,
body,
.mw-body,
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6,
.mw-body a,
.mw-body p {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a,
a:visited,
li a,
li a:visited,
.mw-body a.text,
.mw-body a.text:visited,
.mw-body a.external,
.mw-body a.external:visited,
div.vectorMenu li a,
div.vectorMenu li a:visited,
div.vectorTabs li a,
div.vectorTabs li a:visited,
div.vectorTabs li.new a,
div.vectorTabs li.new a:visited,
a.new,
a.new:visited,
#p-personal a.new:visited,
div#mw-panel div.portal div.body ul li a,
div#mw-panel div.portal div.body ul li a:visited {
color: #566d31;
}
a:hover {
color: #566d31;
text-decoration: underline;
}
div#mw-panel div.portal div.body ul li {
font-size: 0.8em;
}
body,
#mw-page-base {
background: #FFF;
}
ul {
list-style-image: none;
}
nav.top-bar,
nav.top-bar-section {
background: #f5f7f1;
color: #000000;
}
.mw-search-result-data {
color: #636363;
font-size: 90%;
}
.mw-body {
border-color: #919191;
border-top: 0;
margin-top: 12px;
padding-top: 0;
}
div.vectorMenu {
background: #fff;
}
div.vectorTabs {
background-image: none;
border-left: 0;
}
div.vectorTabs ul {
background-image: none;
}
div.vectorTabs ul li {
background-image: none;
background-color: transparent;
background: #fff;
}
div.vectorTabs span,
div#mw-head div.vectorMenu h3 {
background-image: none;
border-right: 0;
}
div.vectorTabs li.selected span {
border-bottom: 2px solid #566d31;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
background-color: #566d31;
border-color: #566d31;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: #2e391c;
border-color: #2e391c;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
background-color: #2e391c;
border-color: #2e391c;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus,
.oo-ui-textInputWidget.oo-ui-widget-enabled input:focus, .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus {
border-color: #2e391c;
box-shadow: inset 0 0 0 1px #566d31,inset 0 0 0 2px #fff;
}
.fa {
color: #2e391c;
}
.btn {
border-color: grey;
}
div.title-name div.title-name {
display: none !important;
}
.top-bar-section ul li {
background: transparent;
}
.top-bar-section ul li > a,
.top-bar-section li.active:not(.has-form) a:not(.button) {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #566d31;
background: transparent;
font-weight: 700;
}
.top-bar-section ul li > a:hover,
.top-bar-section ul li > a:active,
.top-bar-section ul li > a:visited,
.top-bar-section ul li > a:focused,
.top-bar-section li.active:not(.has-form) a:hover:not(.button),
.top-bar-section li.active:not(.has-form) a:not(.button):hover {
color: #566d31;
background: #FFFFFF;
}
.top-bar-section ul li > a > .fa {
color: #566d31;
}
@media only screen and (min-width: 40.0625em) {
.top-bar-section .has-form {
background: transparent;
}
.top-bar-section .has-dropdown > a {
padding: 0 0.9375rem !important;
}
.top-bar-section li.active:not(.has-form) a:not(.button):hover {
color: #566d31;
background: #FFFFFF;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
color: #FFFFFF !important;
background: #566d31;
font-weight: 400;
}
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button),
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button):hover,
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button):hover {
color: #FFFFFF !important;
background: #2e3a1c;
font-weight: 400;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) .fa {
color: #FFFFFF;
}
.top-bar-section .dropdown li.active:not(.has-form) a:not(.button) {
color: #566d31;
background: #FFFFFF;
}
}
.top-bar .toggle-topbar a,
.top-bar .toggle-topbar.menu-icon a {
color: #566d31;
}
.top-bar .toggle-topbar.menu-icon a span::after {
box-shadow: 0 0 0 1px #566d31, 0 7px 0 1px #566d31, 0 14px 0 1px #566d31;
}
.top-bar.expanded .title-area {
background: #f5f7f1;
}
@media only screen and (max-width: 640px) {
.top-bar-section .divider, .top-bar-section [role="separator"] {
border-color: #d1d1d1;
}
.top-bar-section ul,
#personal-tools-dropdown {
border-top: 1px solid #d1d1d1;
}
.top-bar-section ul {
border-bottom: 1px solid #d1d1d1;
}
.top-bar-section ul:first-child {
border-top: 0;
}
}
button, .button, a.button {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #566d31;
border-color: #566d31;
color: #FFFFFF !important;
}
button:hover, button:focus, .button:hover, .button:focus, a.button:hover, a.button:focus {
background-color: #566d31;
border-color: #566d31;
color: #FFFFFF !important;
}
button.radius, .button.radius, a.button {
border-radius: 30px;
}
.fa .show-for-medium-up {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
footer.row {
background-color: #556d32;
padding-top: 20px;
padding-bottom: 20px;
color: #9db577;
max-width: 100%;
}
footer.row a {
color: #9db577;
}
.top-bar .button.search {
border-radius: 0 20px 20px 0;
font-size: 12px;
margin-left: -4px;
}
.top-bar input[type="search"] {
border-radius: 20px 0 0 20px;
border: 1px solid #566d31;
box-shadow: none;
font-size: 12px;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1#firstHeading {
font-weight: 300;
}
input[type="submit"] {
background: #566d31;
border: 0;
border-radius: 20px;
box-shadow: none;
}
.top-bar {
padding: 5px 0;
}
.label {
background-color: #e7e7e7;
color: #000000;
}
.toctogglelabel {
color: #566d31;
}
.text-center #footer-left {
float: left;
}