Merge branch 'main' into issue-3911issue-3911

28 files changed, 422 insertions, 328 deletions

diff --git a/resources/assets/stylesheets/scss/admin-courses.scss b/resources/assets/stylesheets/scss/admin-courses.scss
index 753e56b..09ec6ca 100644
--- a/resources/assets/stylesheets/scss/admin-courses.scss
+++ b/resources/assets/stylesheets/scss/admin-courses.scss
@@ -29,10 +29,6 @@
     }
 }
 
-#admin-filter-widget .label-text {
-    display: block;
-}
-
 .action-menu.filter {
     margin-left: 1em;
 }
diff --git a/resources/assets/stylesheets/scss/blubber.scss b/resources/assets/stylesheets/scss/blubber.scss
index 1893fd5..76bafe4 100644
--- a/resources/assets/stylesheets/scss/blubber.scss
+++ b/resources/assets/stylesheets/scss/blubber.scss
@@ -1,7 +1,7 @@
 .blubber_panel {
     display: flex;
     align-items: stretch;
-    height: calc(100vh - 174px);
+    height: calc(100vh - 130px);
     transition: opacity 100ms, filter 100ms;
     &.waiting {
         filter: blur(1px);
@@ -447,15 +447,12 @@
 }
 
 
-form.default {
-    .blubber_composer_select_container {
-        input, select, .container {
-            width: calc(100% - 50px);
-            display: inline-block;
-        }
+.blubber_composer_select_container {
+    input, select, .container {
+        width: 90%;
+        display: inline-block;
     }
 }
-
 .float_right {
     float: right;
 }
@@ -523,4 +520,7 @@ ol.tagcloud {
     .blubber_thread {
         margin-right: 0;
     }
+    .blubber_threads_widget .sidebar-widget-content {
+        max-height: calc(100vh - 230px);
+    }
 }
diff --git a/resources/assets/stylesheets/scss/buttons.scss b/resources/assets/stylesheets/scss/buttons.scss
index 6c5d070..c148b72 100644
--- a/resources/assets/stylesheets/scss/buttons.scss
+++ b/resources/assets/stylesheets/scss/buttons.scss
@@ -140,7 +140,8 @@ button,
 .button {
     &.as-link,
     &.styleless,
-    &.undecorated {
+    &.undecorated,
+    &.icon-button {
         background-color: unset;
         border: 0;
     }
diff --git a/resources/assets/stylesheets/scss/contents.scss b/resources/assets/stylesheets/scss/contents.scss
index fc8a6c9..8e02284 100644
--- a/resources/assets/stylesheets/scss/contents.scss
+++ b/resources/assets/stylesheets/scss/contents.scss
@@ -8,7 +8,7 @@
         width: 100%;
 
         .content-item {
-            height: 100px;
+            min-height: 100px;
 
             .content-item-link {
                 padding: 5px;
@@ -46,7 +46,7 @@
         background-color: var(--dark-gray-color-5);
         border: solid thin var(--light-gray-color-40);
         display: flex;
-        height: 150px;
+        min-height: 150px;
         justify-content: stretch;
 
         .content-item-link {
diff --git a/resources/assets/stylesheets/scss/copyable-links.scss b/resources/assets/stylesheets/scss/copyable-links.scss
deleted file mode 100644
index f5ff73a..0000000
--- a/resources/assets/stylesheets/scss/copyable-links.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.copyable-link-confirmation {
-    position: fixed;
-    bottom: 60px;
-    right: 12px;
-    height: 60px;
-    line-height: 60px;
-    max-width: calc(100% - 140px);
-    z-index: 42000;
-    border: solid thin var(--content-color-40);
-    background-color: var(--white);
-    background-repeat: no-repeat;
-    background-position: 1em center;
-    background-size: 100px;
-    box-shadow: 5px 5px var(--dark-gray-color-10);
-    padding: 5px 100px;
-    transition: transform .5s ease;
-
-    &.copyable-link-success {
-        @include background-icon(check-circle, status-green, 24);
-    }
-    &.copyable-link-error {
-        @include background-icon(decline-circle, status-red, 24);
-    }
-}
diff --git a/resources/assets/stylesheets/scss/courseware/blockadder.scss b/resources/assets/stylesheets/scss/courseware/blockadder.scss
index 93325dd..f0e993a 100644
--- a/resources/assets/stylesheets/scss/courseware/blockadder.scss
+++ b/resources/assets/stylesheets/scss/courseware/blockadder.scss
@@ -7,6 +7,7 @@
 
     .cw-blockadder-item-wrapper {
         display: flex;
+        position: relative;
         border: solid thin var(--content-color-40);
         max-width: 268px;
 
@@ -54,6 +55,7 @@
 }
 
 .cw-containeradder-item-wrapper {
+    position: relative;
     border: solid thin var(--content-color-40);
     margin-bottom: 4px;
     .cw-sortable-handle {
@@ -136,7 +138,7 @@
 }
 .cw-element-inserter-wrapper {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     grid-auto-rows: auto;
     grid-gap: 4px;
     margin-bottom: 8px;
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/document.scss b/resources/assets/stylesheets/scss/courseware/blocks/document.scss
index fb230b2..0c69cda 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/document.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/document.scss
@@ -109,6 +109,7 @@
     .cw-pdf-outer-container {
         position: relative;
         width: 100%;
+        overflow: hidden;
 
         .cw-pdf-content {
             display: flex;
diff --git a/resources/assets/stylesheets/scss/courseware/toolbar.scss b/resources/assets/stylesheets/scss/courseware/toolbar.scss
index fdabbf2..0670486 100644
--- a/resources/assets/stylesheets/scss/courseware/toolbar.scss
+++ b/resources/assets/stylesheets/scss/courseware/toolbar.scss
@@ -14,8 +14,7 @@
         min-height: 100%;
         border: solid thin var(--content-color-40);
         background-color: var(--white);
-        overflow-y: auto;
-        overflow-x: hidden;
+        overflow: hidden;
         position: relative;
         padding: 0 4px;
         top: 0;
@@ -33,6 +32,11 @@
             right: 0;
         }
 
+        .cw-toolbar-tool-content {
+            overflow-y: auto;
+            padding-right: 8px;
+        }
+
         .cw-toolbar-blocks {
             .input-group.files-search {
                 &.search {
@@ -96,6 +100,12 @@
             }
 
         }
+
+        .cw-toolbar-clipboard {
+            .cw-collapsible {
+                margin-bottom: 4px;
+            }
+        }
     }
     .cw-toolbar-folded-wrapper {
         display: flex;
@@ -124,6 +134,7 @@
 
         &.cw-toolbar-button-toggle {
             text-align: end;
+            flex-grow: 1;
         }
 
         &.active {
@@ -142,7 +153,7 @@
     .cw-toolbar-tools.hd {
         .cw-toolbar-button-wrapper {
             .cw-toolbar-button {
-                width: 128px;
+                min-width: 110px;
                 padding: 2px 16px 0 16px;
                 &.cw-toolbar-button-toggle {
                     text-align: end;
diff --git a/resources/assets/stylesheets/scss/dashboard.scss b/resources/assets/stylesheets/scss/dashboard.scss
index 6020d6e..e353f72 100644
--- a/resources/assets/stylesheets/scss/dashboard.scss
+++ b/resources/assets/stylesheets/scss/dashboard.scss
@@ -77,7 +77,7 @@
     padding-bottom: 1em;
 
     ul {
-        @include list-inline();
+        @extend .list-inline;
 
         img {
             margin-left: 0.25em;
diff --git a/resources/assets/stylesheets/scss/evaluation.scss b/resources/assets/stylesheets/scss/evaluation.scss
deleted file mode 100644
index 63fcef6..0000000
--- a/resources/assets/stylesheets/scss/evaluation.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/* classes for the evaluation modules in Stud.IP ---------------------------- */
-.eval_title {
-    font-size: 1.2em;
-    font-weight: bold;
-    color: var(--base-color);
-}
-
-.eval_error {
-    color: var(--red);
-}
-
-.eval_success {
-    color: var(--green);
-}
-
-.eval_info {
-    color: var(--base-gray);
-}
-
-.eval_metainfo {
-    font-size: 0.8em;
-}
-
-.eval_highlight {
-    background-color: var(--content-color-60);
-}
-
-.eval_gray {
-    background: var(--dark-gray-color-20) none;
-}
-.evaluation_item {
-    box-sizing: border-box;
-    margin: 3px;
-}
-
-h3.eval {
-    font-size: 1.3em;
-    color: var(--black);
-    font-weight: bold;
-}
diff --git a/resources/assets/stylesheets/scss/files.scss b/resources/assets/stylesheets/scss/files.scss
index 7808f15..a75f8f3 100644
--- a/resources/assets/stylesheets/scss/files.scss
+++ b/resources/assets/stylesheets/scss/files.scss
@@ -406,19 +406,20 @@ form.default {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 6px 6px 2px;
+            padding: 0 10px 0;
             margin-bottom: 0;
             border-top: none;
             > .text {
                 width: 100%;
                 margin-left: 10px;
             }
-            > .arrow {
-                margin-right: 5px;
-            }
             > .check {
                 display: none;
             }
+
+            > .icon {
+                margin-top: 6px;
+            }
         }
         > label:first-of-type {
             border-top: 1px solid var(--content-color-40);
diff --git a/resources/assets/stylesheets/scss/forms.scss b/resources/assets/stylesheets/scss/forms.scss
index c647ee8..888cf56 100644
--- a/resources/assets/stylesheets/scss/forms.scss
+++ b/resources/assets/stylesheets/scss/forms.scss
@@ -621,6 +621,28 @@ form.inline {
     }
 }
 
+.studip-dialog {
+    form[data-vue-app] {
+        display: flex;
+        flex-direction: column;
+        min-height: 100%;
+
+        fieldset {
+            flex: 0;
+        }
+
+        footer[data-dialog-button] {
+            background: var(--white);
+            border-top-color: var(--base-color-20);
+            bottom: -0.5em;
+            margin-top: auto;
+            padding: 1.3em 0;
+            position: sticky;
+            text-align: center;
+        }
+    }
+}
+
 @media (min-width: 800px) {
     form.default .form-columns {
         display: flex;
diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss
index 4faee5f..ef7c6e6 100644
--- a/resources/assets/stylesheets/scss/globalsearch.scss
+++ b/resources/assets/stylesheets/scss/globalsearch.scss
@@ -171,7 +171,7 @@
                 }
             }
 
-            section {
+            a[role=listitem] {
                 display: flex;
                 flex-direction: row;
                 flex-wrap: nowrap;
@@ -189,7 +189,7 @@
                     display: none;
                 }
 
-                & > a {
+                & > span.detail {
                     display: flex;
                     flex-direction: row;
                     flex-wrap: nowrap;
diff --git a/resources/assets/stylesheets/scss/lists.scss b/resources/assets/stylesheets/scss/lists.scss
index 8ef1eb7..80796b7 100644
--- a/resources/assets/stylesheets/scss/lists.scss
+++ b/resources/assets/stylesheets/scss/lists.scss
@@ -10,9 +10,25 @@ ol {
     }
 }
 
+.list-unstyled {
+    padding-left: 0;
+    list-style: none;
+}
+
+.list-inline {
+    @extend .list-unstyled;
+    margin-left: -5px;
+
+    > li {
+        display: inline-block;
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+}
+
 //comma separated
 .list-csv {
-    @include list-inline();
+    @extend .list-inline;
     margin-left: 0;
 
     > li {
@@ -22,8 +38,11 @@ ol {
             content: ",";
         }
 
-        &:last-child::after {
-            content: unset;
+        &:last-child {
+            padding-right: 0;
+            &::after {
+                content: unset;
+            }
         }
     }
 
@@ -35,7 +54,7 @@ ol {
 }
 
 .list-pipe-separated {
-    @include list-inline();
+    @extend .list-inline;
     display: flex; // Prevents the mystery gap between elements
 
     > li {
@@ -47,6 +66,19 @@ ol {
     }
 }
 
+.list-slash-separated-small {
+    @extend .list-csv;
+
+    > li {
+        padding-right: 0;
+        font-size: small;
+
+        &::after {
+            content: "/";
+        }
+    }
+}
+
 dl {
     dt {
         font-weight: bold;
diff --git a/resources/assets/stylesheets/scss/messagebox.scss b/resources/assets/stylesheets/scss/messagebox.scss
index a928bb6..7f77f0f 100644
--- a/resources/assets/stylesheets/scss/messagebox.scss
+++ b/resources/assets/stylesheets/scss/messagebox.scss
@@ -72,7 +72,7 @@ div.messagebox_details {
 
 // Define modal messagebox
 .modaloverlay {
-    background: fadeout($base-color, 50%);
+    background: fade-out($base-color, 0.5);
     position: fixed;
     top: 0;
     left: 0;
diff --git a/resources/assets/stylesheets/scss/mvv.scss b/resources/assets/stylesheets/scss/mvv.scss
index c93b214..ce85701 100644
--- a/resources/assets/stylesheets/scss/mvv.scss
+++ b/resources/assets/stylesheets/scss/mvv.scss
@@ -253,22 +253,6 @@ ul {
         dd {
             margin: 0;
         }
-
-        &.even {
-            background-color: var(--dark-gray-color-10);
-
-            &:hover {
-                background-color: var(--content-color-60);
-            }
-        }
-
-        &.odd {
-            background-color: var(--dark-gray-color-5);
-
-            &:hover {
-                background-color: var(--content-color-40);
-            }
-        }
     }
 
     &.mvv-modul li {
@@ -559,14 +543,6 @@ form.default .mvv-inst-chooser select {
     h3 {
         margin-top: 1em;
     }
-
-    &.odd {
-        background-color: var(--dark-gray-color-5);
-    }
-
-    &.even {
-        background-color: var(--content-color-20);
-    }
 }
 
 #lvgruppe_selection_chosen {
diff --git a/resources/assets/stylesheets/scss/my_courses.scss b/resources/assets/stylesheets/scss/my_courses.scss
index b82ec2b..769f3d2 100644
--- a/resources/assets/stylesheets/scss/my_courses.scss
+++ b/resources/assets/stylesheets/scss/my_courses.scss
@@ -9,7 +9,7 @@
     background: var(--white);
 }
 
-.mycourses-group-selector {
+form.default .mycourses-group-selector {
     position: relative;
 
     background-clip: padding-box;
@@ -19,26 +19,41 @@
         @extend .sr-only;
 
         &:checked + label {
-            @include background-icon(accept, info);
+            .group-number {
+                display: none;
+            }
+            .checked-icon {
+                display: inline;
+            }
         }
     }
 
     &:hover label {
-        @include background-icon(accept, info);
+        .group-number {
+            display: none;
+        }
+        .checked-icon {
+            display: inline;
+        }
     }
 
     label {
-        @include hide-text();
+        text-align: center;
+        font-size: large;
+        font-weight: bold;
+        cursor: pointer;
 
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
+        background-color: var(--white);
+        margin-bottom: 0;
+        text-indent: 0;
 
-        background-position: center;
-        background-repeat: no-repeat;
+        height: 1.2em;
 
-        cursor: pointer;
+        .group-number {
+            display: inline;
+        }
+        .checked-icon {
+            display: none;
+        }
     }
 }
diff --git a/resources/assets/stylesheets/scss/profile.scss b/resources/assets/stylesheets/scss/profile.scss
index ef7e75a..c180e03 100644
--- a/resources/assets/stylesheets/scss/profile.scss
+++ b/resources/assets/stylesheets/scss/profile.scss
@@ -13,7 +13,7 @@
     padding: 0 1em;
 }
 .profile-view-actions {
-    @include list-unstyled();
+    @extend .list-unstyled;
     img {
         vertical-align: text-top;
     }
diff --git a/resources/assets/stylesheets/scss/questionnaire.scss b/resources/assets/stylesheets/scss/questionnaire.scss
index f5e726b..fde7d32 100644
--- a/resources/assets/stylesheets/scss/questionnaire.scss
+++ b/resources/assets/stylesheets/scss/questionnaire.scss
@@ -1,8 +1,6 @@
 $width: 270px;
 
 .questionnaire_edit {
-
-
     .editor {
         display: flex;
         flex-direction: row-reverse;
@@ -14,14 +12,16 @@ $width: 270px;
             min-width: $width;
             width: $width;
             .questions_container {
-                padding: 0px;
+                padding: 0;
                 .questions {
                     display: flex;
                     flex-direction: column;
                 }
             }
 
-            > .admin, > .add_question, .questions > * {
+            > .admin,
+            > .add_question,
+            .questions > * {
                 width: calc(100% - 8px);
                 padding: 4px;
                 border-bottom: 1px solid var(--content-color-40);
@@ -42,8 +42,8 @@ $width: 270px;
                     &::before {
                         content: '';
                         position: absolute;
-                        height: 0px;
-                        width: 0px;
+                        height: 0;
+                        width: 0;
                         border-top: 25px transparent solid;
                         border-bottom: 25px transparent solid;
                         border-left: 7px var(--content-color-40) solid;
@@ -52,8 +52,8 @@ $width: 270px;
                     &::after {
                         content: '';
                         position: absolute;
-                        height: 0px;
-                        width: 0px;
+                        height: 0;
+                        width: 0;
                         border-top: 25px transparent solid;
                         border-bottom: 25px transparent solid;
                         border-left: 7px var(--yellow-40) solid;
@@ -93,42 +93,11 @@ $width: 270px;
             border: 1px solid var(--content-color-40);
             border-left: none;
             flex-grow: 1;
-            padding: 10px;
-            padding-left: 15px;
+            padding: 10px 10px 10px 15px;
             min-height: 150px;
             min-width: 0;
         }
-        .vote_edit {
-            .options {
-                > li {
-                    display: flex;
-                    align-items: center;
-                    > * {
-                        margin-right: 10px;
-                    }
-                }
-            }
-        }
-        .rangescale_edit table.default > thead > tr > th.number {
-            padding-left: 12px;
-        }
-
-        .dragcolumn {
-            max-width: 1px;
-            padding-bottom: 0px;
-            > .dragarea {
-                display: inline-block;
-                height: 27px;
-            }
-        }
-
-        .input-array {
-            margin-left: 4px;
-        }
 
-        .likert_edit .input-array {
-            margin-left: 7px;
-        }
         .inline_editing {
             width: 100%;
             display: flex;
@@ -150,114 +119,25 @@ $width: 270px;
                 justify-items: center;
             }
         }
-        .drag-handle {
-            display: inline-block;
-            height: 24px;
-        }
-    }
 
-    /* ab hier der alte kram */
-
-    section {
-        border: thin solid var(--black);
-        margin: 3px;
-    }
-
-    .options {
-        padding: 0;
-        list-style-type: none;
-
-        > li {
-            margin-top: 5px;
-            margin-bottom: 5px;
-
-            > .move {
-                cursor: move;
-                display: inline-block;
-                vertical-align: middle;
-            }
-
-            > input {
-                display: inline-block;
-                vertical-align: middle;
-            }
-
-            > input[type=text] {
-                width: calc(100% - 70px);
-            }
-
-            .delete {
+        .dragcolumn {
+            max-width: 1px;
+            padding-bottom: 0;
+            > .dragarea {
                 display: inline-block;
-                vertical-align: middle;
-                cursor: pointer;
-            }
-
-            .add {
-                display: none;
-                vertical-align: middle;
-                cursor: pointer;
+                height: 27px;
             }
         }
 
-        > li:last-child .delete {
-            display: none;
-        }
-
-        > li:last-child .add {
+        .drag-handle {
             display: inline-block;
+            height: 24px;
         }
 
-        > li:only-child .move {
-            display: none;
-        }
-
-    }
-
-    .all_questions {
-        .question:first-child .move_up {
-            display: none;
-        }
-
-        .question:last-child .move_down {
-            display: none;
-        }
-    }
-
-    .add_questions {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: stretch;
-        border: thin dashed var(--content-color-40);
-
-        > a {
-            background-color: transparent;
-            margin: 10px;
-            border: thin solid var(--content-color-20);
-            padding: 5px;
-            width: 100px;
-            min-width: 100px;
-            max-width: 100px;
-            height: 100px;
-            min-height: 100px;
-            max-height: 100px;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            align-items: center;
+        .option-cell {
             text-align: center;
-
-            > img {
-                margin-left: auto;
-                margin-right: auto;
-            }
         }
     }
-
-    .questionnaire_metadata {
-        margin-top: 10px;
-    }
 }
 
 .questionnaire_results {
@@ -308,7 +188,8 @@ $width: 270px;
 }
 
 
-.questionnaire_answer, .questionnaire_results {
+.questionnaire_answer,
+.questionnaire_results {
     .description_container {
         display: flex;
         > .icon_container {
@@ -335,7 +216,7 @@ $width: 270px;
         border: none;
 
         > :first-child {
-            margin-top: 0px;
+            margin-top: 0;
         }
 
         .invalidation_notice {
@@ -351,9 +232,6 @@ $width: 270px;
         font-size: 0.7em;
         padding-left: 5px;
     }
-    .rangescale_center {
-        text-align: center;
-    }
     .centerline {
         border-top: 1px solid var(--base-color);
         position: relative;
@@ -387,39 +265,13 @@ $width: 270px;
             }
         }
     }
+}
 
-    .centerline {
-        border-top: 1px solid var(--base-color);
-        position: relative;
-        top: 35px;
-        margin-left: -5px;
-        margin-right: -5px;
-        z-index: 2;
-    }
-    .questionnaire-evaluation-circle-container {
+.questionnaire_edit,
+.questionnaire_answer,
+.questionnaire_results {
+    .option-cell {
         text-align: center;
-        display: block;
-        .questionnaire-evaluation-circle {
-            width: 70px;
-            height: 70px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-left: auto;
-            margin-right: auto;
-            z-index: 3;
-            position: relative;
-            > .value {
-                border-radius: 100px;
-                color: white;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                background-color: var(--base-color);
-                width: 100%;
-                height: 100%;
-            }
-        }
     }
 }
 
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index c4317e9..e84a8a8 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -537,6 +537,26 @@ $sidebarOut: -330px;
             }
         }
     }
+
+    #system-notifications {
+        top: 0;
+        position: fixed;
+        left: 0;
+        width: 100%;
+        z-index: 1001;
+    }
+
+    .system-notification {
+        &.system-notification-slide-enter,
+        &.system-notification-slide-leave-to {
+            transform: translateY(-100%);
+        }
+
+        &.system-notification-slide-leave,
+        &.system-notification-slide-enter-to {
+            transform: translateY(0);
+        }
+    }
 }
 
 /* Settings especially for fullscreen mode */
diff --git a/resources/assets/stylesheets/scss/schedule.scss b/resources/assets/stylesheets/scss/schedule.scss
index c8c8f5a..a09e3ad 100644
--- a/resources/assets/stylesheets/scss/schedule.scss
+++ b/resources/assets/stylesheets/scss/schedule.scss
@@ -185,10 +185,6 @@ td.schedule-adminbind {
 }
 
 #color_picker {
-    div {
-        display: flex;
-        flex-wrap: wrap;
-    }
 
     span {
         flex: 0 0 auto;
@@ -198,7 +194,7 @@ td.schedule-adminbind {
     }
 
     input[type="radio"] {
-        display: none;
+        @extend .sr-only;
 
         &:checked + label {
             outline: 1px solid var(--black);
@@ -266,6 +262,15 @@ td.schedule-adminbind {
         &.schedule-category15 {
             background-color: $calendar-category-15;
         }
+        &.schedule-category16 {
+            background-color: $calendar-category-16;
+        }
+        &.schedule-category17 {
+            background-color: $calendar-category-17;
+        }
+        &.schedule-category18 {
+            background-color: $calendar-category-18;
+        }
         &.schedule-category255 {
             background-color: $calendar-category-255;
         }
@@ -440,5 +445,38 @@ div.schedule_entry {
                 color: contrast($calendar-category-15-aux, $black, $white);
             }
         }
+        &.schedule-category16 {
+            background-color: $calendar-category-16-aux;
+            border: 1px solid $calendar-category-16;
+            dt {
+                background-color: $calendar-category-16;
+                color: contrast($calendar-category-16, $black, $white);
+            }
+            dd {
+                color: contrast($calendar-category-16-aux, $black, $white);
+            }
+        }
+        &.schedule-category17 {
+            background-color: $calendar-category-17-aux;
+            border: 1px solid $calendar-category-17;
+            dt {
+                background-color: $calendar-category-17;
+                color: contrast($calendar-category-17, $black, $white);
+            }
+            dd {
+                color: contrast($calendar-category-17-aux, $black, $white);
+            }
+        }
+        &.schedule-category18 {
+            background-color: $calendar-category-18-aux;
+            border: 1px solid $calendar-category-18;
+            dt {
+                background-color: $calendar-category-18;
+                color: contrast($calendar-category-18, $black, $white);
+            }
+            dd {
+                color: contrast($calendar-category-18-aux, $black, $white);
+            }
+        }
     }
 }
diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss
index 9a97976..c161778 100644
--- a/resources/assets/stylesheets/scss/sidebar.scss
+++ b/resources/assets/stylesheets/scss/sidebar.scss
@@ -313,6 +313,7 @@ select.sidebar-selectlist {
                     flex: 1;
                     padding: .25em .5em;
                     width: 100%;
+                    order: 1;
                 }
 
                 .submit-search {
@@ -324,17 +325,22 @@ select.sidebar-selectlist {
                     cursor: pointer;
                     font: 0/0 a;
                     text-shadow: none;
+                    order: 3;
                 }
 
                 .reset-search {
-                    background-color: transparent;
-                    border: 1px solid var(--dark-gray-color-30);
-                    border-left: 0;
-                    border-right: 0;
+                    background: unset;
                     display: inline-block;
-                    padding-right: 5px;
-                    padding-top: 4px;
                     cursor: pointer;
+                    order: 2;
+                    height: 100%;
+                    box-sizing: border-box;
+                    margin-right: 2px;
+                    margin-left: -22px;
+
+                    img {
+                        padding-top: 4px;
+                    }
                 }
 
             }
diff --git a/resources/assets/stylesheets/scss/system-notifications.scss b/resources/assets/stylesheets/scss/system-notifications.scss
new file mode 100644
index 0000000..34c341b
--- /dev/null
+++ b/resources/assets/stylesheets/scss/system-notifications.scss
@@ -0,0 +1,178 @@
+#system-notifications {
+    &.bottom-right {
+        bottom: 50px;
+        right: 15px;
+
+        .system-notification {
+            box-shadow: 5px 5px var(--dark-gray-color-10);
+
+            &.system-notification-slide-enter,
+            &.system-notification-slide-leave-to {
+                opacity: 0;
+                transform: translateX(100%);
+            }
+
+            &.system-notification-slide-leave,
+            &.system-notification-slide-enter-to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+    }
+
+    &.top-center {
+        left: calc(50% - 300px);
+        top: 0;
+
+        .system-notification {
+            box-shadow: 0 0 0 3px var(--dark-gray-color-10);
+
+            &.system-notification-slide-enter,
+            &.system-notification-slide-leave-to {
+                opacity: 0;
+                transform: translateY(-100%);
+            }
+
+            &.system-notification-slide-leave,
+            &.system-notification-slide-enter-to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    }
+
+    &:not(.system-notifications-login) {
+        position: fixed;
+        width: 600px;
+    }
+
+    &.system-notifications-login {
+        margin-bottom: 15px;
+    }
+
+    overflow: hidden;
+    z-index: 1001;
+}
+
+.system-notification {
+    background-color: var(--content-color-20);
+    border: thin solid var(--content-color-40);
+    color: var(--black);
+    cursor: pointer;
+    display: flex;
+    padding: 10px;
+    position: relative;
+
+    &.system-notification-slide-enter-active,
+    &.system-notification-slide-leave-active {
+        transition: all var(--transition-duration-slow) ease-in-out;
+    }
+
+    .system-notification-icon {
+        flex: 0;
+        padding: 10px;
+    }
+
+    .system-notification-content {
+        flex: 1;
+        height: auto;
+        margin: auto 25px auto 10px;
+        word-wrap: break-word;
+
+        .system-notification-details {
+            .system-notification-details-content {
+                padding-left: 10px;
+            }
+        }
+    }
+
+    .system-notification-close {
+        align-self: normal;
+        flex: 0;
+        height: 20px;
+        width: 20px;
+
+        img, svg {
+            cursor: pointer;
+            position: absolute;
+            right: 10px;
+            top: 10px;
+        }
+    }
+
+    .system-notification-timeout {
+        &.system-notification-timeout-enter-active,
+        &.system-notification-timeout-leave-active {
+            transition: width 5s linear;
+        }
+
+        &.system-notification-timeout-enter {
+            width: 100%;
+        }
+
+        &.system-notification-timeout-leave {
+            width: 0;
+        }
+
+        background-color: var(--base-color-40);
+        bottom: 0;
+        height: 5px;
+        left: 0;
+        position: absolute;
+        width: 0;
+    }
+
+    &.system-notification-disrupted .system-notification-timeout {
+        display: none;
+    }
+
+    a:not(.system-notification-message) {
+        color: var(--black);
+        text-decoration-line: underline;
+    }
+
+    a.system-notification-message {
+        color: var(--text-color);
+        text-decoration: unset;
+    }
+}
+
+.system-notification-exception {
+    background-color: var(--red-40);
+
+    .system-notification-timeout {
+        background-color: var(--red);
+    }
+}
+
+.system-notification-error {
+    background-color: var(--red-20);
+
+    .system-notification-timeout {
+        background-color: var(--red-80);
+    }
+}
+
+.system-notification-warning {
+    background-color: var(--yellow-20);
+
+    .system-notification-timeout {
+        background-color: var(--yellow-80);
+    }
+}
+
+.system-notification-success {
+    background-color: var(--green-20);
+
+    .system-notification-timeout {
+        background-color: var(--green-80);
+    }
+}
+
+.system-notification-info {
+    background-color: var(--dark-violet-20);
+
+    .system-notification-timeout {
+        background-color: var(--dark-violet-60);
+    }
+}
diff --git a/resources/assets/stylesheets/scss/tables.scss b/resources/assets/stylesheets/scss/tables.scss
index 9e05f01..665a6f3 100644
--- a/resources/assets/stylesheets/scss/tables.scss
+++ b/resources/assets/stylesheets/scss/tables.scss
@@ -504,7 +504,7 @@ table.default {
     > thead {
         > tr > th {
             background-color: var(--content-color-20);
-            border-bottom: 1px solid fadeout($brand-color-lighter, 80%);
+            border-bottom: 1px solid fade-out($brand-color-lighter, 0.8);
             border-top: 1px solid var(--brand-color-darker);
             font-size: 1.0em;
         }
@@ -515,7 +515,7 @@ table.default {
             > th {
                 background-color: var(--content-color-20);
                 border-top: 1px solid var(--brand-color-darker);
-                border-bottom: 1px solid fadeout($brand-color-lighter, 80%);
+                border-bottom: 1px solid fade-out($brand-color-lighter, 0.8);
                 text-align: left;
             }
 
@@ -580,7 +580,7 @@ table.default {
 
     // Hover effect
     &:not(.nohover) > tbody:not(.nohover) > tr:not(.nohover):hover > td:not(.nohover) {
-        background-color: fadeout($light-gray-color, 80%);
+        background-color: fade-out($light-gray-color, 0.8);
     }
 
     &:not(.nohover) > tbody:not(.nohover) > tr.selected:not(.nohover):hover > td:not(.nohover) {
@@ -742,7 +742,7 @@ table.withdetails {
     }
 
     > tbody > tr.open > td {
-        background-color: fadeout($light-gray-color, 80%);
+        background-color: fade-out($light-gray-color, 0.8);
     }
 
     > tbody > tr.open > td:first-child {
diff --git a/resources/assets/stylesheets/scss/tabs.scss b/resources/assets/stylesheets/scss/tabs.scss
index b37005e..63bf1a0 100644
--- a/resources/assets/stylesheets/scss/tabs.scss
+++ b/resources/assets/stylesheets/scss/tabs.scss
@@ -31,8 +31,6 @@ div.clear
     .quiet img { opacity: 0.25; }
 
     li {
-        background-color: var(--dark-gray-color-10);
-
         &:last-child {
             border-right: none;
         }
diff --git a/resources/assets/stylesheets/scss/talk-bubble.scss b/resources/assets/stylesheets/scss/talk-bubble.scss
index bc44600..380fb6d 100644
--- a/resources/assets/stylesheets/scss/talk-bubble.scss
+++ b/resources/assets/stylesheets/scss/talk-bubble.scss
@@ -8,6 +8,13 @@ $ownColor: var(--petrol-40);
 
     .talk-bubble-avatar {
         padding: 8px;
+        width: 40px;
+        height: 40px;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
     }
 
     .talk-bubble {
@@ -136,4 +143,4 @@ $ownColor: var(--petrol-40);
             flex-direction: row-reverse;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/resources/assets/stylesheets/scss/tooltip.scss b/resources/assets/stylesheets/scss/tooltip.scss
index 4b7b36b..ac570a8 100644
--- a/resources/assets/stylesheets/scss/tooltip.scss
+++ b/resources/assets/stylesheets/scss/tooltip.scss
@@ -7,7 +7,7 @@
     box-shadow: 0 1px 0 fade-out($white, 0.5) inset;
     font-size: var(--font-size-base);
     margin-bottom: 8px;
-    max-width: 230px;
+    max-width: $grid-element-width;
     padding: 10px;
     position: absolute;
     text-align: left;
@@ -38,11 +38,13 @@
         @extend %tooltip;
         display: none;
     }
-    &:hover .tooltip-content {
+
+    &:hover .tooltip-content,
+    &:focus .tooltip-content {
         bottom: 100%;
         display: inline-block;
         left: 50%;
-        margin-left: -129px;
-        width: 230px;
+        margin-left: - calc($grid-element-width / 2) - 10px;
+        width: $grid-element-width;
     }
 }
diff --git a/resources/assets/stylesheets/scss/wiki.scss b/resources/assets/stylesheets/scss/wiki.scss
index e19b9b1..323fbb5 100644
--- a/resources/assets/stylesheets/scss/wiki.scss
+++ b/resources/assets/stylesheets/scss/wiki.scss
@@ -190,12 +190,12 @@ article.studip.wiki {
      padding: 0;
      li {
          margin-bottom: 5px;
+         display: flex;
      }
      a {
          background-position: left top;
          background-repeat: no-repeat;
          background-size: var(--avatar-small);
-         display: block;
          min-height: var(--avatar-small);
          padding-left: calc(var(--avatar-small) + 1ex);
      }