2019-11-21 12:09:23 +01:00
|
|
|
/* Global styles */
|
|
|
|
body {
|
|
|
|
background-color: #121212;
|
|
|
|
}
|
2020-12-10 09:51:27 +01:00
|
|
|
a {
|
|
|
|
color: #01a299;
|
|
|
|
}
|
2019-11-21 12:09:23 +01:00
|
|
|
|
|
|
|
/* Login screen */
|
|
|
|
/* Background */
|
|
|
|
.stpanel section div#logo figure.figurelogo {
|
|
|
|
filter: grayscale(100%) brightness(400%);
|
|
|
|
}
|
|
|
|
.stpanel section {
|
|
|
|
background-color: #121212;
|
|
|
|
}
|
|
|
|
/* Marketing text */
|
|
|
|
.stpanel section div#marketing {
|
|
|
|
color: #e1e1e1;
|
|
|
|
}
|
|
|
|
/* Form container and messages */
|
|
|
|
.stpanel section div.form--holder .stpanel--error--message, .stpanel section div.form--holder form {
|
|
|
|
color: #e1e1e1;
|
|
|
|
box-shadow: unset;
|
|
|
|
background-color: #1E1E1E;
|
|
|
|
}
|
|
|
|
.stpanel .loader--dot1, .stpanel .loader--dot2, .stpanel .loader--dot3, .stpanel .loader--dot4 {
|
|
|
|
background-color: #01A299;
|
|
|
|
}
|
|
|
|
.stpanel--loader {
|
|
|
|
background-color: unset;
|
|
|
|
}
|
|
|
|
.stpanel--links a {
|
|
|
|
color: #017374;
|
|
|
|
}
|
|
|
|
.stpanel--links a:hover {
|
|
|
|
color: #00B3A6;
|
|
|
|
}
|
|
|
|
/* Slogan */
|
|
|
|
.stpanel section div#slogan span:last-of-type {
|
|
|
|
color: #01A299;
|
|
|
|
}
|
|
|
|
/* Inputs */
|
|
|
|
.stpanel .form--input input {
|
|
|
|
color: #e1e1e1;
|
|
|
|
border-color: #e1e1e1;
|
|
|
|
background-color: #383838;
|
|
|
|
}
|
|
|
|
.stpanel .form--input input:focus {
|
|
|
|
color: #ebebeb;
|
|
|
|
border-color: #70EFDE;
|
|
|
|
}
|
|
|
|
.stpanel .form--input.state-disabled input {
|
|
|
|
background-color: #01A299;
|
|
|
|
border-color: #01A299;
|
|
|
|
color: #ebebeb;
|
|
|
|
}
|
|
|
|
.stpanel .form--input i {
|
|
|
|
color: #ebebeb;
|
|
|
|
}
|
|
|
|
.stpanel .form--input i:hover {
|
|
|
|
color: #a5a5a5;
|
|
|
|
}
|
|
|
|
/* Checkbox */
|
|
|
|
.stpanel .form--checkbox:focus i, .stpanel .form--checkbox:hover i, .stpanel .form--radio:focus i, .stpanel .form--radio:hover i, .stpanel .form--select:focus select, .stpanel .form--select:hover select, .stpanel--screensaver .form--select:focus select, .stpanel--screensaver .form--select:hover select {
|
|
|
|
border-color: #01A299;
|
|
|
|
}
|
|
|
|
.stpanel .form--checkbox input + i::after{
|
|
|
|
color: #e1e1e1;
|
|
|
|
}
|
|
|
|
.stpanel .form--checkbox input:checked + i, .stpanel .form--radio input:checked + i {
|
|
|
|
background-color: #01A299;
|
|
|
|
border-color: #01A299;
|
|
|
|
}
|
|
|
|
/* Buttons */
|
|
|
|
.button--stpanel, button.button--stpanel, input[type="submit"].button--stpanel {
|
|
|
|
color: #01A299;
|
|
|
|
}
|
|
|
|
.stpanel section div#marketing a.btn, .stpanel section div.form--holder .stpanel--error--message a.button--stpanel, .stpanel section div.form--holder form a.button--stpanel, .stpanel--meldingen a.button--stpanel, .stpanel--screensaver section div.form--holder .stpanel--error--message a.button--stpanel, .stpanel--screensaver section div.form--holder form a.button--stpanel {
|
|
|
|
border-color: #01A299;
|
|
|
|
color: #01A299!important;
|
|
|
|
}
|
|
|
|
.stpanel section div#marketing a.btn:hover, .button--stpanel:active, .button--stpanel:focus, .button--stpanel:hover, .stpanel section div.form--holder .stpanel--error--message a.button--stpanel:active, .stpanel section div.form--holder .stpanel--error--message a.button--stpanel:focus, .stpanel section div.form--holder .stpanel--error--message a.button--stpanel:hover, .stpanel section div.form--holder form a.button--stpanel:active, .stpanel section div.form--holder form a.button--stpanel:focus, .stpanel section div.form--holder form a.button--stpanel:hover, .stpanel--meldingen a.button--stpanel:active, .stpanel--meldingen a.button--stpanel:focus, .stpanel--meldingen a.button--stpanel:hover, .stpanel--screensaver section div.form--holder .stpanel--error--message a.button--stpanel:active, .stpanel--screensaver section div.form--holder .stpanel--error--message a.button--stpanel:focus, .stpanel--screensaver section div.form--holder .stpanel--error--message a.button--stpanel:hover, .stpanel--screensaver section div.form--holder form a.button--stpanel:active, .stpanel--screensaver section div.form--holder form a.button--stpanel:focus, .stpanel--screensaver section div.form--holder form a.button--stpanel:hover, button.button--stpanel:active, button.button--stpanel:focus, button.button--stpanel:hover, input[type="submit"].button--stpanel:active, input[type="submit"].button--stpanel:focus, input[type="submit"].button--stpanel:hover {
|
|
|
|
background:#01A299;
|
|
|
|
color: #e1e1e1!important;
|
|
|
|
}
|
|
|
|
/* Footer */
|
|
|
|
footer > span {
|
|
|
|
color: #e1e1e1;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Main screen */
|
|
|
|
/* Header */
|
|
|
|
span.logo {
|
|
|
|
opacity: 0.75;
|
|
|
|
}
|
|
|
|
#header-wrapper {
|
|
|
|
background-color: #1E1E1E;
|
|
|
|
}
|
|
|
|
#header-wrapper a {
|
|
|
|
color: #a5a5a5!important;
|
|
|
|
}
|
|
|
|
#header-wrapper a:hover {
|
|
|
|
color: #e1e1e1!important;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
span.header {
|
|
|
|
color: unset;
|
|
|
|
}
|
|
|
|
#user img {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
#user span.header {
|
|
|
|
color: unset;
|
|
|
|
}
|
|
|
|
span#inbox-counter {
|
|
|
|
background-color: #01A299;
|
|
|
|
color: #121212!important;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Content Window */
|
|
|
|
/* Main menu */
|
|
|
|
#main-menu a.active, #main-menu a.active:hover {
|
|
|
|
background-color: #01A299;
|
|
|
|
color: #e1e1e1!important;
|
|
|
|
}
|
|
|
|
#main-menu a {
|
|
|
|
background-color: #232323;
|
|
|
|
color: #a5a5a5!important;
|
|
|
|
}
|
|
|
|
#main-menu a:hover {
|
|
|
|
background-color: #292929;
|
|
|
|
color: #e1e1e1!important;
|
|
|
|
}
|
|
|
|
#main-menu-bottom {
|
|
|
|
background-color: #01A299;
|
|
|
|
}
|
|
|
|
#content {
|
|
|
|
box-shadow: unset;
|
|
|
|
}
|
|
|
|
/* Panels */
|
|
|
|
#master-panel, #master-panel .panel-header {
|
|
|
|
background-color: #1E1E1E;
|
|
|
|
border: unset;
|
|
|
|
color: #e1e1e1;
|
|
|
|
}
|
|
|
|
.panel-header h2, #detail-panel h2, #detail-panel h3 {
|
|
|
|
color: #e1e1e1;
|
|
|
|
}
|
|
|
|
#master-panel h2, h1 {
|
|
|
|
color: #e1e1e1;
|
|
|
|
}
|
|
|
|
#master-panel .sub {
|
|
|
|
color: #a5a5a5;
|
|
|
|
}
|
|
|
|
div#detail-panel-wrapper {
|
|
|
|
background-color: #232323;
|
|
|
|
}
|
|
|
|
#master-panel ~ #detail-panel-wrapper, #content {
|
|
|
|
border: unset!important;
|
|
|
|
}
|
|
|
|
/* Date and type tags */
|
|
|
|
#master-panel .date div, .pauze, .roster-table-header .day .huiswerk-items, .uurNummer, .type {
|
|
|
|
background-color: #2C2C2C!important;
|
|
|
|
color: #e1e1e1!important;
|
|
|
|
border-color: #a5a5a5!important;
|
|
|
|
}
|
|
|
|
#master-panel .date div p.date-day, #master-panel .date div p.date-month, #master-panel .date span {
|
|
|
|
color: #e1e1e1!important;
|
|
|
|
}
|
|
|
|
#master-panel .date div {
|
|
|
|
border-right: 0px !important;
|
|
|
|
margin: 0 0 0 -40px !important;
|
|
|
|
padding: 5px !important;
|
|
|
|
}
|
|
|
|
#master-panel .date div p.date-day {
|
|
|
|
background: unset;
|
|
|
|
}
|
|
|
|
/* Top-right buttons */
|
|
|
|
.ribbon .chk.checked, .ribbon .chk:hover, .ribbon.chk.checked, .yellow.ribbon a {
|
|
|
|
color:#e1e1e1;
|
|
|
|
border-bottom: 3px solid #00C4B4;
|
|
|
|
background-color: unset!important;
|
|
|
|
}
|
|
|
|
.ribbon .chk, .ribbon .chk.checked:hover{
|
|
|
|
color: #a5a5a5;
|
|
|
|
border-color: #019592;
|
|
|
|
}
|
|
|
|
.yellow.ribbon span {
|
|
|
|
color: #a5a5a5;
|
|
|
|
}
|
|
|
|
/* Box items */
|
|
|
|
.box {
|
|
|
|
background-color: #2C2C2C;
|
|
|
|
color: #e1e1e1;
|
|
|
|
border: unset;
|
|
|
|
margin-top: 5px;
|
|
|
|
}
|
|
|
|
.m-element {
|
|
|
|
color: #e1e1e1;
|
|
|
|
border: unset!important;
|
|
|
|
}
|
|
|
|
.m-element:hover {
|
|
|
|
background-color: #2C2C2C;
|
|
|
|
}
|
2020-12-10 09:51:27 +01:00
|
|
|
.m-wrapper.active {
|
|
|
|
margin: 0;
|
|
|
|
background:#333333;
|
|
|
|
}
|
|
|
|
|
|
|
|
.section .block {
|
|
|
|
background: #2c2c2c;
|
|
|
|
border: unset;
|
|
|
|
}
|
|
|
|
.blue.ribbon p, .blue.ribbon .icon-check, .blue.ribbon .icon-check-empty{
|
|
|
|
color: #e1e1e1 !important;
|
|
|
|
}
|
|
|
|
.huiswerkbijlage .simple-view, .section a.right {
|
|
|
|
background: #333333;
|
|
|
|
color: #e1e1e1;
|
|
|
|
border-radius: 3px;
|
|
|
|
border: unset;
|
|
|
|
}
|
|
|
|
.huiswerkbijlage .simple-view .bijlage-label, .section a.right {
|
|
|
|
color: #a5a5a5;
|
|
|
|
}
|
|
|
|
.huiswerkbijlage .simple-view:hover .bijlage-label, .section a.right:hover {
|
|
|
|
color: #e1e1e1;
|
|
|
|
background: unset;
|
|
|
|
border: unset;
|
|
|
|
}
|
2019-11-21 12:09:23 +01:00
|
|
|
/* Ions */
|
|
|
|
.icon-geen-van-beide, .icon-huiswerk, .icon-leermiddelen, .icon-maatregel, .icon-studiewijzer, .icon-toets {
|
|
|
|
background-color: #01A299;
|
|
|
|
color: #121212!important;
|
|
|
|
}
|