highcontrast.scss

@import "mixins.scss";
$darkgray: #30343b;
$lightgray: #e7ebf1;

$medium-gray: #cccccc;
$darkergray: #444444;

$contrast-blue: #2849d8;
$contrast-blue-medium: #2D2C64;
$contrast-blue-dark: #14246c;
$contrast-red: #ff0000;
$medium-red: #c80000;
$contrast-yellow: #ffff00;
$lightyellow: #fffa90;

/* General contrasts */
body #scroll-to-top {
    background-color: $black;

    &:hover {
        background-color: $black;
    }
}

body.fixed #navigation-level-1-items li > a,
#header-links > ul > li > a {
    color: $white !important;
    text-decoration: underline !important;
}

div.index_container div.index_main {
    background-color: hsla(0, 0%, 100%, 1);
}

.js .drag-and-drop {
    background-color: $white;
    color: $black;
    border: 1px solid $black;
}

.boxed-grid {
    a {
        background-color: $white;
        border: 1px solid $black;

        p {
            color: $black;
        }

        img {
            opacity: 0;
        }

        &:hover {
            background-color: $black;

            p, h3 {
                color: $white;
            }
        }
    }

}

#tour_tip {
    background-color: $black;
}

.ui-widget-content {
    color: $black;
}

/* HEADER */
#responsive-menu,
#header-links {
    background-color: $black;

}

#site-title {
    background-color: $black;
    color: $white;
}

#navigation-level-1 {
    background-color: $white;
    border-bottom: 1px solid $black !important;
}

body.fixed #navigation-level-1-items {
    background-color: $black;

    li  a {
        color: $white;
    }

    li:hover {
        background-color: $white;

        a {
            color: $black !important;
            img {
                filter: brightness(0);
            }

        }
    }

}

body:not(.fixed) #navigation-level-1-items > li.active:after,
#tabs > li.current:after {
    background-color: $black;
}

#tabs li,
#navigation-level-2,
#current-page-structure #navigation-level-2 .tabs_wrapper {
    background-color: $white;
}

#tabs li.current a,
#tabs li:hover a,
body:not(.fixed) #navigation-level-1-items li.active .navtitle,
body:not(.fixed) #navigation-level-1-items li:hover .navtitle {
    color: $contrast-blue;
}

/* RESPONSIVE NAVIGATION AND SIDEBAR */
#responsive-navigation {
    background-color: $black;
    background-image: unset;
    border-right: 6px solid $black;

    ul > li {
        background-color: rgba(150,150,150) !important;

        > div > a {
            color: $black !important;
        }

        > ul > li {
            background-color: rgba(255,255,255) !important;

            > div > a {
                color: $black !important;
            }

        }
    }

}

.responsive-display #sidebar {
    background-color: $black;
    background-image: unset;
    border-left: 6px solid $black;

}

/* MESSAGE BOXES */
div.messagebox_exception {
    color: $medium-red !important;
    background-color: $white !important;
}

/* DIALOG */
.ui-dialog.ui-widget.ui-widget-content .ui-dialog-titlebar {
    background-color: $black;
    color: $white;
}

ul.message-options > li a img {
    filter: brightness(0);
}

/* BUTTONS */
.ui-dialog.ui-widget.ui-widget-content .ui-dialog-buttonpane .ui-button,
button.button,
a.button,
.fc .fc-button-group .fc-button {
    border-color: $black !important;
    color: $black !important;
}

.ui-dialog.ui-widget.ui-widget-content .ui-dialog-buttonpane .ui-button:hover,
button.button:hover,
a.button:hover,
.fc .fc-button-group .fc-button:hover,
.fc .fc-button-group .fc-button-active,
.fc-button-primary:not(:disabled).fc-button-active {
    background-color: $black;
    color: $white !important;
}

button.button[disabled],
button.button[disabled]:hover {
    background-color: $white;
    color: $black !important;
    cursor: not-allowed;
}

/* SIDEBAR AND WIDGETS */

#sidebar .sidebar-image {
    background-image: unset;
    background: $black;
}

.studip-widget .widget-header,
.sidebar-widget-header {
    background-color: $black !important;
    color: $white !important;
}

.sidebar-widget-content ul li form,
.sidebar-widget-content form,
.-widget-content form {
    border: unset !important;
}

.studip-widget,
.studip-widget:hover {
    border: 2px solid $black;

}

// hover over sidebar list elements ...
.sidebar-widget-content > ul > li > a {
    color: $black;

    &:hover {
        background-color: $black;
        color: $white;
    }
}
// .. except for "Ansichten"
.sidebar-widget-content > ul.sidebar-views > li > a:hover {
    background-color: transparent;
    color: $contrast-red;

}

.widget-links button,
.widget-links.sidebar-views > li.active a,
.widget-links.sidebar-views > li.active button {
    color: $black;
}
.widget-links.sidebar-views > li:hover button,
.widget-links.sidebar-views > li:hover a {
    color: $black;
    background-color: $medium-gray;
}


.widget-links.sidebar-navigation > li.active {
    background-color: $black !important;
    color: $white !important;
    box-shadow: unset;

}


.widget-links.sidebar-navigation > li.active,
.widget-links.sidebar-navigation > li.active a {

    &::before,
    &::after {
        border-left-color: $black;
    }
}


// "Ansichten" need to be white
.widget-links.sidebar-views > li.active {
    background-color: $medium-gray;
    box-shadow: unset;
    border-top: 2px solid $black;
    border-bottom: 2px solid $black;

    a {
        color: $black;
    }

    &:hover {
        background-color: $darkergray;

        a {
            color: $white;
        }
    }
}

.widget-links.sidebar-views > li.active:before {
    border-left: 10px solid $black;
}

.widget-links.sidebar-views > li.active:after {
    border-left-color: $medium-gray;
}

.sidebar-search input[type=submit] {
    background-color: $black;
}

/* Black borders */
.sidebar-widget,
.sidebar-widget-placeholder,
section.contentbox,
article.studip,
form.default,
table.default {
    // this is making problems in so many ways
    border: 2px solid $black;

    > header > nav {
        > a {
            color: $white;
        }

        > a:before {
            filter: brightness(100);
        }

        .action-menu .action-menu-icon {
            filter: brightness(100);
        }

        .action-menu.is-open .action-menu-icon {
            filter: brightness(0);
        }
    }

}

article.wiki {
    border: unset;
}

// remove this border, else you end up having two
.studip-widget > div > article.studip {
    border: none !important;
}

/* Sections,Articles and Forms header */
section.contentbox header,
article.studip header,
form.default fieldset > legend {
    background-color: $black;
}

section.contentbox header h1,
section.contentbox header h1 a,
section.contentbox header,
article.studip > header,
article.studip > header h1,
article.studip > header h1 > a,
article.studip > header > nav > *,
form.default fieldset > legend  {
    color: $white !important;
    border: 1px solid $black;
}

.action-menu-wrapper .action-menu-icon span,
.action-menu .action-menu-icon span {
    border: unset;
}

section.contentbox header h1 a:before,
article.studip.toggle > header h1 > a:before,
article.studip > header h1 > a > img,
article.studip > header > a > img,
article.studip > header > nav > a > img {
    filter: brightness(100);

}

// brightness does not work with black icons,so make it white this way
article.studip > header h1 > img {
    filter: invert(100%);
}

article.new.toggle > header h1 > a::before {
    filter: unset !important;
}

// avoid having double outline and weird line at bottom
form.default table.default {
    border: unset;

    tbody:last-of-type>tr:last-child>td {
        border-bottom: unset;
    }
}

/* Sections,Articles and Forms footer */
form.default footer,
table.default > tfoot > tr > td {
    background-color: $white;
}

/* Tables */
table.default > tbody > tr > th,
table.default > thead > tr > th {
    background-color: $black;
    color: $white !important;

    a {
        color: $white !important;
        text-decoration: underline;
    }
}

tr.sortable th.sortasc:after {
    filter: brightness(100);
}

table td.printcontent,
table td.printcontent:hover {
    background-color: $white;
}

table.toolbar,
td.printhead,
td.toolbar {
    background-color: $white !important;
    background-image: unset;
    border-top: 2px solid $black;
    line-height: 30pt;
}

.table_header_bold {
    background-color: $black;
}

// Table header Icons must be white ...
table.default thead .actions img,
table.default thead .actions input[type=image],
table.default thead .actions svg {
    filter: brightness(100);
}

// ... but Icons in Table Data must be black
table.default .actions .action-menu .action-menu-icon {
    filter: brightness(0);
}

table.dates .nextdate {
    background-color: $lightgray;

    > td > a {
        color: $black;
    }
}

/* Action Menu */
.action-menu-wrapper .action-menu-content,
.action-menu .action-menu-content {
    border: 2px solid $black;
    font-weight: 600;
}

/* FOOTER */
#main-footer {
    background-color: $black;
    color: $white;
    font-weight: 700;

    > ul > li > a {
        color: $white;

        &:hover {
            color: $white !important;
            text-decoration: underline;
        }
    }

}

/* ICONS */
body:not(.fixed) #navigation-level-1-items li.active > a img,
body:not(.fixed) #navigation-level-1-items li:hover > a img,
form div.files-search.input-group .input-group-append img {
    filter: brightness(0) !important;
}

tr.sortable th.sortdesc:after,
.course-admin th .course-completion,
.sortable-table .tablesorter-headerDesc .tablesorter-header-inner:after,
.sortable-table .tablesorter-headerAsc .tablesorter-header-inner:after,
.action-menu-wrapper .action-menu-icon,
.action-menu .action-menu-icon,
.contentbox header nav .tooltip-icon,
article header h1 .tooltip-icon,
section.course-statusgroups article header h1 a img {
    filter: brightness(100);
}

// profile image
#avatar-menu .action-menu-icon,
.action-menu.is-open .action-menu-icon {
    filter: unset;
}

.js form.default.collapsable fieldset legend,
form.default fieldset.collapsable legend {
    @include background-icon('arr_1down', 'info_alt', 20);
}
.js form.default.collapsable fieldset.collapsed legend,
form.default fieldset.collapsable.collapsed legend {
    @include background-icon('arr_1right', 'info_alt', 20);
}

.sidebar-widget-header > div > a > img {
    filter: brightness(100);
}

/* Stundenplan / Terminkalender */
.celltoday {
    background-color: $white;
    border: 1px solid $black;

    > a {
        color: $black;
        font-size: 1.5em;
    }
}
a:link.calhead {
    color: $contrast-blue;
}

.calhead label {
    color: $contrast-blue !important;

    &:hover {
        text-decoration: underline;
    }
}

a .hidden-tiny-down {
    color: $contrast-blue !important;
}

/* Date picker */

// today's date
.ui-state-highlight {
    color: $black !important;
    background-color: $lightyellow !important;
}

.ui-state-active {
    color: $white !important;
    background-color: $black !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    background-color: $white;
    border: 1px solid $black;

    &:hover {
        background-color: $black;
    }
}


/* Calendar categories */

span li.calendar-category1,
ul li.calendar-category1,
span li.calendar-category2,
ul li.calendar-category2,
span li.calendar-category3,
ul li.calendar-category3,
span li.calendar-category4,
ul li.calendar-category4,
span li.calendar-category5,
ul li.calendar-category5,
span li.calendar-category6,
ul li.calendar-category6,
span li.calendar-category7,
ul li.calendar-category7,
span li.calendar-category8,
ul li.calendar-category8,
span li.calendar-category9,
ul li.calendar-category9,
span li.calendar-category10,
ul li.calendar-category10,
span li.calendar-category11,
ul li.calendar-category11,
span li.calendar-category12,
ul li.calendar-category12,
span li.calendar-category13,
ul li.calendar-category13,
span li.calendar-category14,
ul li.calendar-category14,
span li.calendar-category15,
ul li.calendar-category15 {
    color: $black;

}

div.schedule_entry {
    dl {
        &.hover:hover { opacity: unset; }

        &.schedule-category1 {
            background-color: $white;
            border: 1px solid $calendar-category-1;
            dt {
                background-color: $calendar-category-1;
                color: text-contrast($calendar-category-1, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category2 {
            background-color: $white;
            border: 1px solid $calendar-category-2;
            dt {
                background-color: $calendar-category-2;
                color: text-contrast($calendar-category-2, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category3 {
            background-color: $white;
            border: 1px solid $calendar-category-3;
            dt {
                background-color: $calendar-category-3;
                color: text-contrast($calendar-category-3, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category4 {
            background-color: $white;
            border: 1px solid $calendar-category-4;
            dt {
                background-color: $calendar-category-4;
                color: text-contrast($calendar-category-4, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category5 {
            background-color: $white;
            border: 1px solid $calendar-category-5;
            dt {
                background-color: $calendar-category-5;
                color: text-contrast($calendar-category-5, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category6 {
            background-color: $white;
            border: 1px solid $calendar-category-6;
            dt {
                background-color: $calendar-category-6;
                color: text-contrast($calendar-category-6, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category7 {
            background-color: $white;
            border: 1px solid $calendar-category-7;
            dt {
                background-color: $calendar-category-7;
                color: text-contrast($calendar-category-7, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category8 {
            background-color: $white;
            border: 1px solid $calendar-category-8;
            dt {
                background-color: $calendar-category-8;
                color: text-contrast($calendar-category-8, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category9 {
            background-color: $white;
            border: 1px solid $calendar-category-9;
            dt {
                background-color: $calendar-category-9;
                color: text-contrast($calendar-category-9, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category10 {
            background-color: $white;
            border: 1px solid $calendar-category-10;
            dt {
                background-color: $calendar-category-10;
                color: text-contrast($calendar-category-10, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category11 {
            background-color: $white;
            border: 1px solid $calendar-category-11;
            dt {
                background-color: $calendar-category-11;
                color: text-contrast($calendar-category-11, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category12 {
            background-color: $white;
            border: 1px solid $calendar-category-12;
            dt {
                background-color: $calendar-category-12;
                color: text-contrast($calendar-category-12, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category13 {
            background-color: $white;
            border: 1px solid $calendar-category-13;
            dt {
                background-color: $calendar-category-13;
                color: text-contrast($calendar-category-13, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category14 {
            background-color: $white;
            border: 1px solid $calendar-category-14;
            dt {
                background-color: $calendar-category-14;
                color: text-contrast($calendar-category-14, $black, $white);
            }
            dd {
                color: $black;
            }
        }
        &.schedule-category15 {
            background-color: $white;
            border: 1px solid $calendar-category-15;
            dt {
                background-color: $calendar-category-15;
                color: text-contrast($calendar-category-15, $black, $white);
            }
            dd {
                color: $black;
            }
        }
    }
}

table.calendar-week,
table.calendar-day {
    tbody tr td {
        &.calendar-day-event {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-day-event;
                overflow: hidden;
            }
            background: $white;
            border: solid 1px $calendar-day-event;
        }
        &.calendar-category1,
        &.calendar-course-category5 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-1;
                overflow: hidden;
            }
            background: $white;
            border: solid 1px $calendar-category-1;
        }
        &.calendar-category2,
        &.calendar-course-category1 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-2;
                overflow: hidden;
            }
            background: $white;
            border: solid 1px $calendar-category-2;
        }
        &.calendar-category3,
        &.calendar-course-category2 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color:  $calendar-category-3;
                overflow: hidden;
            }
            background: $white;
            border: solid 1px $calendar-category-3;
        }
        &.calendar-category4,
        &.calendar-course-category3 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-4;
                overflow: hidden;
                color: $black;
            }
            background: $white;
            border: solid 1px $calendar-category-4;
        }
        &.calendar-category5,
        &.calendar-course-category4 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-5;
                overflow: hidden;
                color: $black;
            }
            background: $white;
            border: solid 1px $calendar-category-5;
        }
        &.calendar-category6,
        &.calendar-course-category6 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-6;
                overflow: hidden;
                color: $black;
            }
            background: $white;
            border: solid 1px $calendar-category-6;
        }
        &.calendar-category7,
        &.calendar-course-category8 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-7;
                overflow: hidden;
            }
            background: $white;
            border: solid 1px $calendar-category-7;
        }
        &.calendar-category8,
        &.calendar-course-category9 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-8;
                overflow: hidden;
            }
            background: $white;
            border: solid 1px $calendar-category-8;
        }
        &.calendar-category9,
        &.calendar-course-category10 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-9;
                overflow: hidden;
            }
            background: $white;
            border: solid 1px $calendar-category-9;
        }
        &.calendar-category10,
        &.calendar-course-category11 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-10;
                overflow: hidden;
            }
            background: $white;
            border: solid 1px $calendar-category-10;
        }
        &.calendar-category11,
        &.calendar-course-category12 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-11;
                overflow: hidden;
            }
            background: $white;
            border: solid 1px $calendar-category-11;
        }
        &.calendar-category12,
        &.calendar-course-category13 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-12;
                overflow: hidden;
                color: $black;
            }
            background: $white;
            border: solid 1px $calendar-category-12;
        }
        &.calendar-category13,
        &.calendar-course-category14 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-13;
                overflow: hidden;
                color: $black;
            }
            background: $white;
            border: solid 1px $calendar-category-13;
        }
        &.calendar-category14,
        &.calendar-course-category15 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-14;
                overflow: hidden;
                color: $black;
            }
            background: $white;
            border: solid 1px $calendar-category-14;
        }
        &.calendar-category15,
        &.calendar-course-category7 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-15;
                overflow: hidden;
                color: $black;
            }
            background: $white;
            border: solid 1px $calendar-category-15;
        }
        &.calendar-category255,
        &.calendar-course-category255 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $calendar-category-255;
                overflow: hidden;
            }
            background: $white;
            border: solid 1px $calendar-category-255;
        }
        /* Termin von im Stundenplan vorgemerkter Kurs */
        &.calendar-course-category256 {
            a {
                color: $contrast-blue !important;
            }
            div:first-child {
                background-color: $contrast-blue-medium;
                overflow: hidden;
            }
            background: $white;
            border: solid 1px $contrast-blue-medium;
        }