From 39f9cc6099738dc052cef015bca985cde0a25f55 Mon Sep 17 00:00:00 2001
From: David Siegfried <david.siegfried@uni-vechta.de>
Date: Fri, 15 Mar 2024 13:03:59 +0000
Subject: [PATCH] migrate less to scss, re #3786
Merge request studip/studip!2659
---
resources/assets/javascripts/entry-base.js | 3 +-
.../assets/javascripts/entry-statusgroups.js | 2 +-
.../assets/stylesheets/less/breakpoints.less | 7 -
.../assets/stylesheets/less/buttons.less | 167 ---
resources/assets/stylesheets/less/files.less | 500 ---------
.../stylesheets/less/jquery-ui/custom.less | 437 --------
resources/assets/stylesheets/less/tables.less | 823 ---------------
.../assets/stylesheets/less/variables.less | 38 -
.../assets/stylesheets/less/visibility.less | 91 --
resources/assets/stylesheets/mixins.less | 8 -
.../assets/stylesheets/mixins/arrow.less | 124 ---
.../assets/stylesheets/mixins/colors.less | 216 ----
resources/assets/stylesheets/mixins/flex.less | 51 -
resources/assets/stylesheets/mixins/misc.scss | 7 +
.../assets/stylesheets/mixins/studip.less | 219 ----
.../stylesheets/mixins/twitter-mixins.less | 607 -----------
.../stylesheets/{print.less => print.scss} | 102 +-
.../assets/stylesheets/scss/buttons.scss | 47 +-
resources/assets/stylesheets/scss/files.scss | 480 +++++++++
.../font-face-lato.scss} | 0
.../fullcalendar-print.scss} | 9 +-
.../stylesheets/scss/jquery-ui/custom.scss | 957 ++++++++++++++++++
.../jquery-ui/studip.scss} | 14 +-
.../messagebox.less => scss/messagebox.scss} | 46 +-
.../resources-print.scss} | 0
.../schedule.less => scss/schedule.scss} | 193 ++--
resources/assets/stylesheets/scss/tables.scss | 957 +++++++++++++++++-
.../assets/stylesheets/scss/visibility.scss | 150 ++-
.../{statusgroups.less => statusgroups.scss} | 4 +-
...p-jquery-ui.less => studip-jquery-ui.scss} | 42 +-
resources/assets/stylesheets/studip.less | 540 ----------
resources/assets/stylesheets/studip.scss | 465 +++++++++
webpack.common.js | 2 +-
33 files changed, 3218 insertions(+), 4090 deletions(-)
delete mode 100644 resources/assets/stylesheets/less/breakpoints.less
delete mode 100644 resources/assets/stylesheets/less/buttons.less
delete mode 100644 resources/assets/stylesheets/less/files.less
delete mode 100644 resources/assets/stylesheets/less/jquery-ui/custom.less
delete mode 100644 resources/assets/stylesheets/less/tables.less
delete mode 100644 resources/assets/stylesheets/less/variables.less
delete mode 100644 resources/assets/stylesheets/less/visibility.less
delete mode 100644 resources/assets/stylesheets/mixins.less
delete mode 100644 resources/assets/stylesheets/mixins/arrow.less
delete mode 100644 resources/assets/stylesheets/mixins/colors.less
delete mode 100644 resources/assets/stylesheets/mixins/flex.less
delete mode 100644 resources/assets/stylesheets/mixins/studip.less
delete mode 100644 resources/assets/stylesheets/mixins/twitter-mixins.less
rename resources/assets/stylesheets/{print.less => print.scss} (73%)
rename resources/assets/stylesheets/{less/font-face-lato.less => scss/font-face-lato.scss} (100%)
rename resources/assets/stylesheets/{less/fullcalendar-print.less => scss/fullcalendar-print.scss} (93%)
create mode 100644 resources/assets/stylesheets/scss/jquery-ui/custom.scss
rename resources/assets/stylesheets/{less/jquery-ui/studip.less => scss/jquery-ui/studip.scss} (92%)
rename resources/assets/stylesheets/{less/messagebox.less => scss/messagebox.scss} (64%)
rename resources/assets/stylesheets/{less/resources-print.less => scss/resources-print.scss} (100%)
rename resources/assets/stylesheets/{less/schedule.less => scss/schedule.scss} (52%)
rename resources/assets/stylesheets/{statusgroups.less => statusgroups.scss} (70%)
rename resources/assets/stylesheets/{studip-jquery-ui.less => studip-jquery-ui.scss} (76%)
delete mode 100644 resources/assets/stylesheets/studip.less
diff --git a/resources/assets/javascripts/entry-base.js b/resources/assets/javascripts/entry-base.js
index bb03231a393..845f19e9a20 100644
--- a/resources/assets/javascripts/entry-base.js
+++ b/resources/assets/javascripts/entry-base.js
@@ -3,8 +3,7 @@ import './public-path.js'
// promise polyfill needed for IE11 to load tablesorter
import 'es6-promise/auto'
-import "../stylesheets/studip-jquery-ui.less"
-import "../stylesheets/studip.less"
+import "../stylesheets/studip-jquery-ui.scss"
// Basic scss support
import "../stylesheets/studip.scss"
diff --git a/resources/assets/javascripts/entry-statusgroups.js b/resources/assets/javascripts/entry-statusgroups.js
index a6d05312937..18205f107d1 100644
--- a/resources/assets/javascripts/entry-statusgroups.js
+++ b/resources/assets/javascripts/entry-statusgroups.js
@@ -1,4 +1,4 @@
-import "../stylesheets/statusgroups.less"
+import "../stylesheets/statusgroups.scss"
import "jquery-nestable"
import "./bootstrap/statusgroups.js"
diff --git a/resources/assets/stylesheets/less/breakpoints.less b/resources/assets/stylesheets/less/breakpoints.less
deleted file mode 100644
index c06be0b4021..00000000000
--- a/resources/assets/stylesheets/less/breakpoints.less
+++ /dev/null
@@ -1,7 +0,0 @@
-// Major Breakpoints
-@major-breakpoint-tiny: 0;
-@major-breakpoint-small: 576px;
-@major-breakpoint-medium: 768px;
-@major-breakpoint-large: 1024px;
-@major-breakpoint-xlarge: 1280px;
-@major-breakpoint-xxlarge: 1600px;
diff --git a/resources/assets/stylesheets/less/buttons.less b/resources/assets/stylesheets/less/buttons.less
deleted file mode 100644
index 11e609556db..00000000000
--- a/resources/assets/stylesheets/less/buttons.less
+++ /dev/null
@@ -1,167 +0,0 @@
-/* Stud.IP button styles */
-.button() {
- background: white;
- border: 1px solid var(--base-color);
- border-radius: 0;
- box-sizing: border-box;
- color: var(--base-color);
- cursor: pointer;
- display: inline-block;
- font-family: @font-family-base;
- font-size: 14px;
- line-height: 130%;
- margin: 0.8em 0.6em 0.8em 0;
- min-width: 100px;
- overflow: visible;
- padding: 5px 15px;
- position: relative;
- text-align: center;
- text-decoration: none;
- vertical-align: middle;
- white-space: nowrap;
- width: auto;
-
- &:hover, &:active {
- background: var(--base-color);
- color: white;
- }
-
- &.disabled, &[disabled] {
- box-shadow: none;
- background: var(--light-gray-color-20);
- cursor: default;
- opacity: 0.65;
-
- &:hover {
- color: var(--base-color);
- }
- }
-
- transition: none;
-}
-
-a.button, button.button {
- .button;
-}
-
-.button-with-empty-icon {
- white-space: nowrap;
-
- &::before {
- background-repeat: no-repeat;
- content: " ";
- float: left;
- height: 16px;
- margin: 1px 5px 0 -8px;
- width: 16px;
- }
-}
-
-.button-with-icon(@icon, @role, @roleOnHover) {
- &:extend(.button-with-empty-icon);
- &::before {
- &:extend(.button-with-empty-icon::before);
- .background-icon(@icon, @role);
- }
-
- &:hover::before {
- .background-icon(@icon, @roleOnHover);
- }
-
- &.disabled,
- &[disabled] {
- &:hover::before {
- .background-icon(@icon, @role);
- }
- }
-}
-
-.button.accept {
- .button-with-icon("accept", "clickable", "info_alt");
-}
-
-.button.cancel {
- .button-with-icon("decline", "clickable", "info_alt");
-}
-
-.button.edit {
- .button-with-icon("edit", "clickable", "info_alt");
-}
-
-.button.move-up {
- .button-with-icon("arr_1up", "clickable", "info_alt");
-}
-
-.button.move-down {
- .button-with-icon("arr_1down", "clickable", "info_alt");
-}
-
-.button.add {
- .button-with-icon("add", "clickable", "info_alt");
-}
-
-.button.download {
- .button-with-icon("download", "clickable", "info_alt");
-}
-
-.button.search {
- .button-with-icon("search", "clickable", "info_alt");
-}
-
-.button.refresh {
- .button-with-icon("refresh", "clickable", "info_alt");
-}
-
-.button.sort {
- .button-with-icon("arr_1sort", "clickable", "info_alt");
-}
-
-.button.trash {
- .button-with-icon("trash", "clickable", "info_alt");
-}
-
-/* Grouped Buttons */
-.button-group {
- display: inline-flex;
- gap: 5px;
- list-style: none;
- margin: 0 0.8em 0 0;
- padding: 0;
- vertical-align: middle;
-
- button,
- .button {
- margin-left: 0;
- margin-right: 0;
- }
-}
-
-
-/* Other button styles */
-
-button,
-.button {
- &.undecorated {
- background: none;
- border: 0;
- margin: 0;
- padding: 0;
- cursor: pointer;
-
- &[formaction] {
- color: var(--base-color);
-
- transition: color 0.3s;
-
- &:hover,
- &:active {
- color: var(--active-color);
- text-decoration: none;
- }
-
- &[disabled] {
- pointer-events: none;
- }
- }
- }
-}
diff --git a/resources/assets/stylesheets/less/files.less b/resources/assets/stylesheets/less/files.less
deleted file mode 100644
index 6421d7ab211..00000000000
--- a/resources/assets/stylesheets/less/files.less
+++ /dev/null
@@ -1,500 +0,0 @@
-.file_uploader {
- display: none;
-}
-.file_upload_window {
- .filenames li {
- display: flex;
- justify-content: space-between;
-
- span {
- flex: 1;
- &.upload-progress {
- flex: 0;
- }
- }
-
- &:only-child .upload-progress {
- display: none;
- }
- }
-}
-.uploadbar {
- position: relative;
-
- img {
- margin: 10px;
- z-index: 1;
- }
-
- &.uploadbar-outer {
- border: var(--base-color) solid 1px;
- }
- &.uploadbar-inner {
- position: absolute;
- top: 0;
- right: 100%;
- bottom: 0;
- left: 0;
- background-color: var(--base-color);
- overflow: hidden;
- white-space: nowrap;
-
- display: flex;
- justify-content: space-between;
-
- transition: right var(--transition-duration);
-
- img {
- background-color: var(--base-color);
- flex: 0;
- outline: 10px solid var(--base-color);
- }
- .ufo {
- animation: ufoflight 1.5s linear infinite;
- z-index: 0;
- }
- }
-
- .upload-progress {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- mix-blend-mode: luminosity;
-
- color: (#fff - @base-color);
- font-size: large;
- }
-}
-
-@keyframes ufoflight {
- 25% {
- transform: translateX(-2px) translateY(4px);
- }
- 50% {
- transform: translateX(-0px) translateY(8px);
- }
- 75% {
- transform: translateX(-2px) translateY(4px);
- }
- 100% {
- transform: translateX(0px) translateY(0px);
- }
-}
-
-/* for file/edit view and file/new_edit_folder_form view and other views that offer a selection via tiles: */
-div.file_select_possibilities,
-.folder_type_select_possibilities,
-.square-item-container {
- @width: 100px;
- @height: 100px;
-
- display: flex;
- flex-direction: column;
- > div {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- align-items: stretch;
- > a, > button, > div.clickable {
- cursor: pointer;
- background-color: transparent;
- margin: 10px;
- border: thin solid var(--content-color-20);
- padding: 10px;
- width: @width;
- min-width: @width;
- max-width: @width;
- height: @height;
- min-height: @height;
- max-height: @height;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- align-items: center;
- text-align: center;
- > img {
- margin-left: auto;
- margin-right: auto;
- }
- }
-
- > .important-item {
- min-width: calc(100% - 1.5em);
- background-color: var(--content-color-20);
- border-color: var(--base-color-60);
- display: flex;
- flex-direction: row;
- height: initial;
- max-height: initial;
-
- > .icon {
- width: 10em;
- }
-
- > .description {
- width: 100%;
- text-align: left;
- margin-left: 1em;
- color: var(--black);
- }
- }
- }
-
- > label.content_terms_of_use_entry:not(.undecorated)
- {
- width: 40px;
- min-width: 40px;
- max-width: 40px;
- height: 40px;
- min-height: 40px;
- max-height: 40px;
-
- img {
- width:100%;
- height:100%;
- display:block;
- }
- }
-
- > button {
- box-sizing: content-box;
- cursor: pointer;
- color: yellow;
- }
-
-
- > label:not(.undecorated) {
- display: flex;
- justify-content: center;
- font-size:0.7em;
- cursor: pointer;
-
- img {
- width:40%;
- height:40%;
- display:block;
- }
- }
-
-
- /* for file/edit view only: */
-
- input[name=content_terms_of_use_id],
- input[name=oer_upload] {
- display: none;
- }
-
- input[name=content_terms_of_use_id]:checked + label,
- input[name=oer_upload]:checked + label {
- background-color: var(--brand-color-darker);
- color: var(--contrast-content-white);
-
- img {
- filter: invert(100%) brightness(200%);
- }
- }
-
-
- /* for file/new_edit_folder_form view only: */
-
- input[name=folder_type] {
- display: none;
- }
-
- input[name=folder_type]:checked + label {
- background-color: var(--brand-color-darker);
- color: var(--contrast-content-white);
-
- img {
- filter: invert(100%) brightness(200%);
- }
- }
-
-}
-
-div.file_select_possibilities.content_terms_of_use_icons {
- justify-content: left;
-}
-
-
-#file_edit_window,
-#file_details_window,
-#oer_file_details {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- align-content: flex-start;
-}
-
-#oer_file_details {
- max-width: 555px;
- flex-wrap: wrap;
-}
-
-#preview_container,
-#oer_aside {
- width: 270px;
-}
-
-#oer_title {
- max-height: 34px;
- max-width: 225px;
- overflow: hidden;
- text-overflow: ellipsis;
- hyphens: auto;
- word-break: break-all;
- text-indent: initial;
-}
-
-#oer_preview_image {
- width: 100%;
- display: flex;
- height: 170px;
- align-items: center;
-
- img {
- width: 100%;
- }
-}
-
-#file_suggest_oer {
- margin-top: 2%;
-
- .suggestion_text {
- font-size: 2em;
- font-weight: 700;
- margin-bottom: 0px;
- }
-
- #note {
- margin: 0 0 30px;
- }
-}
-
-
-
-table.documents tfoot td.sticky {
- position: sticky;
- bottom: 0;
-}
-
-table.documents {
- tfoot .footer-items {
- display: flex;
- flex-direction: row;
- & > .bulk-buttons {
- flex-grow: 1;
- }
- }
-}
-
-
-/* for file/edit and folder/edit only: */
-@media screen and (max-width: 800px) {
- /* mobile view: */
- #file_aside, #folder_aside {
- display: block;
-
- div.file-icon, div.folder-icon {
- img {
- width: 30%;
- height: 100%;
- max-height: 10em;
- margin-right: 1em;
- }
- }
-
- h3 {
- font-size: 140%;
- padding-top: 1em;
- }
-
- dl {
- display: table;
- }
- }
-
- #file_management_forms {
- display: table;
- width: 100%;
- }
-
- .file_preview {
- max-width: 100%;
- }
-
- #file_edit_window, #file_details_window {
- flex-direction: column;
- }
-
- #file_aside, #folder_aside {
- width: 100%;
- max-width: none;
- }
-
- #file_management_forms {
- width: 100%;
- max-width: none;
- }
-
- div#preview_container {
- .file_preview {
- max-width: 100%;
- }
-
- iframe.file_preview {
- width: 100%;
- height: 20em;
- }
- }
-}
-
-@media screen and (min-width: 801px) {
- /* desktop view: */
-
- #file_aside, #folder_aside {
- width: calc(30% - 10px);
- max-width: calc(30% - 10px);
- /* overflow: hidden; */
-
- div.file-icon, div.folder-icon {
- img {
- margin-left: 20%;
- width: 60%;
- max-height: 16em;
- height: 100%;
- }
- }
-
- h3 {
- font-size: 1.1em;
- }
- }
-
-
- #file_management_forms, div#preview_container:not(.oercampus_editmaterial) {
- width: calc(70% - 10px);
- max-width: calc(70% - 10px);
-
- .file_preview {
- max-width: 100%;
- }
-
- iframe.file_preview {
- width: 100%;
- height: 40em;
- }
- }
-
-}
-
-form.default {
- #select_oer_upload_info {
- padding-top: 15px;
- padding-bottom: 15px;
- }
-
- fieldset.select_terms_of_use,
- fieldset.select_oer_upload {
- > legend {
- margin: 0px;
- width: 100%;
- }
- border: none;
- padding: 0px;
- margin-left: 0px;
- margin-right: 0px;
-
- > input[type=radio] {
- opacity: 0;
- position: absolute;
- &:focus + label {
- outline: auto;
- }
- }
- > label {
- cursor: pointer;
- border: 1px solid var(--content-color-40);
- transition: background-color var(--transition-duration);
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 6px;
- padding-bottom: 2px;
- margin-bottom: 0;
- border-top: none;
- > .text {
- width: 100%;
- margin-left: 10px;
- }
- > .arrow {
- margin-right: 5px;
- }
- > .check {
- display: none;
- }
- }
- > label:first-of-type {
- border-top: 1px solid var(--content-color-40);
- }
- > div {
- border: 1px solid var(--content-color-40);
- border-top: none;
- display: none;
- padding: 10px;
-
- }
- > input[type=radio]:checked + label {
- background-color: var(--content-color-20);
- transition: background-color var(--transition-duration);
- > .arrow {
- display: none;
- }
- > .check {
- display: inline-block;
- }
- }
- > input[type=radio]:checked + label + div {
- display: block;
- .description {
- animation-duration: 400ms;
- animation-name: terms_of_use_fadein;
- }
- }
- }
-
-}
-
-@keyframes terms_of_use_fadein {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-table.documents {
- tr:target {
- background-color: var(--activity-color-20);
- }
-}
-
-
-/* Rules for the library search dialog: */
-
-h2.search-result-info {
- font-weight: normal;
- font-size: 1.4em;
- color: var(--base-gray);
- border-bottom: none;
- margin-top: 0;
-}
diff --git a/resources/assets/stylesheets/less/jquery-ui/custom.less b/resources/assets/stylesheets/less/jquery-ui/custom.less
deleted file mode 100644
index 269904e705e..00000000000
--- a/resources/assets/stylesheets/less/jquery-ui/custom.less
+++ /dev/null
@@ -1,437 +0,0 @@
-/*!
- * jQuery UI CSS Framework 1.12.0
- * http://jqueryui.com
- *
- * Copyright jQuery Foundation and other contributors
- * Released under the MIT license.
- * http://jquery.org/license
- *
- * http://api.jqueryui.com/category/theming/
- *
- * To view and modify this theme, visit http://jqueryui.com/themeroller/?bgShadowXPos=&bgOverlayXPos=&bgErrorXPos=&bgHighlightXPos=&bgContentXPos=&bgHeaderXPos=&bgActiveXPos=&bgHoverXPos=&bgDefaultXPos=&bgShadowYPos=&bgOverlayYPos=&bgErrorYPos=&bgHighlightYPos=&bgContentYPos=&bgHeaderYPos=&bgActiveYPos=&bgHoverYPos=&bgDefaultYPos=&bgShadowRepeat=&bgOverlayRepeat=&bgErrorRepeat=&bgHighlightRepeat=&bgContentRepeat=&bgHeaderRepeat=&bgActiveRepeat=&bgHoverRepeat=&bgDefaultRepeat=&iconsHover=url(%22images%2Fui-icons_555555_256x240.png%22)&iconsHighlight=url(%22images%2Fui-icons_777620_256x240.png%22)&iconsHeader=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsError=url(%22images%2Fui-icons_cc0000_256x240.png%22)&iconsDefault=url(%22images%2Fui-icons_777777_256x240.png%22)&iconsContent=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsActive=url(%22images%2Fui-icons_ffffff_256x240.png%22)&bgImgUrlShadow=&bgImgUrlOverlay=&bgImgUrlHover=&bgImgUrlHighlight=&bgImgUrlHeader=&bgImgUrlError=&bgImgUrlDefault=&bgImgUrlContent=&bgImgUrlActive=&opacityFilterShadow=Alpha(Opacity%3D30)&opacityFilterOverlay=Alpha(Opacity%3D30)&opacityShadowPerc=30&opacityOverlayPerc=30&iconColorHover=%23555555&iconColorHighlight=%23777620&iconColorHeader=%23444444&iconColorError=%23cc0000&iconColorDefault=%23777777&iconColorContent=%23444444&iconColorActive=%23ffffff&bgImgOpacityShadow=0&bgImgOpacityOverlay=0&bgImgOpacityError=95&bgImgOpacityHighlight=55&bgImgOpacityContent=75&bgImgOpacityHeader=75&bgImgOpacityActive=65&bgImgOpacityHover=75&bgImgOpacityDefault=75&bgTextureShadow=flat&bgTextureOverlay=flat&bgTextureError=flat&bgTextureHighlight=flat&bgTextureContent=flat&bgTextureHeader=flat&bgTextureActive=flat&bgTextureHover=flat&bgTextureDefault=flat&cornerRadius=3px&fwDefault=normal&ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&cornerRadiusShadow=8px&thicknessShadow=5px&offsetLeftShadow=0px&offsetTopShadow=0px&opacityShadow=.3&bgColorShadow=%23666666&opacityOverlay=.3&bgColorOverlay=%23aaaaaa&fcError=%235f3f3f&borderColorError=%23f1a899&bgColorError=%23fddfdf&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgColorHighlight=%23fffa90&fcContent=%23333333&borderColorContent=%23dddddd&bgColorContent=%23ffffff&fcHeader=%23333333&borderColorHeader=%23dddddd&bgColorHeader=%23e9e9e9&fcActive=%23ffffff&borderColorActive=%23003eff&bgColorActive=%23007fff&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgColorHover=%23ededed&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgColorDefault=%23f6f6f6
- */
-
-
-/* Component containers
-----------------------------------*/
-.ui-widget {
- font-family: Arial,Helvetica,sans-serif;
- font-size: 1em;
-}
-.ui-widget .ui-widget {
- font-size: 1em;
-}
-.ui-widget input,
-.ui-widget select,
-.ui-widget textarea,
-.ui-widget button {
- font-family: Arial,Helvetica,sans-serif;
- font-size: 1em;
-}
-.ui-widget.ui-widget-content {
- border: 1px solid #c5c5c5;
-}
-.ui-widget-content {
- border: 1px solid #dddddd;
- background: #ffffff;
- color: #333333;
-}
-.ui-widget-content a {
- color: #333333;
-}
-.ui-widget-header {
- border: 1px solid #dddddd;
- background: #e9e9e9;
- color: #333333;
- font-weight: bold;
-}
-.ui-widget-header a {
- color: #333333;
-}
-
-/* Interaction states
-----------------------------------*/
-.ui-state-default,
-.ui-widget-content .ui-state-default,
-.ui-widget-header .ui-state-default,
-.ui-button,
-
-/* We use html here because we need a greater specificity to make sure disabled
-works properly when clicked or hovered */
-html .ui-button.ui-state-disabled:hover,
-html .ui-button.ui-state-disabled:active {
- border: 1px solid #c5c5c5;
- background: #f6f6f6;
- font-weight: normal;
- color: #454545;
-}
-.ui-state-default a,
-.ui-state-default a:link,
-.ui-state-default a:visited,
-a.ui-button,
-a:link.ui-button,
-a:visited.ui-button,
-.ui-button {
- color: #454545;
- text-decoration: none;
-}
-.ui-state-hover,
-.ui-widget-content .ui-state-hover,
-.ui-widget-header .ui-state-hover,
-.ui-state-focus,
-.ui-widget-content .ui-state-focus,
-.ui-widget-header .ui-state-focus,
-.ui-button:hover,
-.ui-button:focus {
- border: 1px solid #cccccc;
- background: #ededed;
- font-weight: normal;
- color: #2b2b2b;
-}
-.ui-state-hover a,
-.ui-state-hover a:hover,
-.ui-state-hover a:link,
-.ui-state-hover a:visited,
-.ui-state-focus a,
-.ui-state-focus a:hover,
-.ui-state-focus a:link,
-.ui-state-focus a:visited,
-a.ui-button:hover,
-a.ui-button:focus {
- color: #2b2b2b;
- text-decoration: none;
-}
-
-.ui-visual-focus {
- box-shadow: 0 0 3px 1px rgb(94, 158, 214);
-}
-.ui-state-active,
-.ui-widget-content .ui-state-active,
-.ui-widget-header .ui-state-active,
-a.ui-button:active,
-.ui-button:active,
-.ui-button.ui-state-active:hover {
- border: 1px solid #003eff;
- background: #007fff;
- font-weight: normal;
- color: #ffffff;
-}
-.ui-icon-background,
-.ui-state-active .ui-icon-background {
- border: #003eff;
- background-color: #ffffff;
-}
-.ui-state-active a,
-.ui-state-active a:link,
-.ui-state-active a:visited {
- color: #ffffff;
- text-decoration: none;
-}
-
-/* Interaction Cues
-----------------------------------*/
-.ui-state-highlight,
-.ui-widget-content .ui-state-highlight,
-.ui-widget-header .ui-state-highlight {
- border: 1px solid #dad55e;
- background: #fffa90;
- color: #777620;
-}
-.ui-state-checked {
- border: 1px solid #dad55e;
- background: #fffa90;
-}
-.ui-state-highlight a,
-.ui-widget-content .ui-state-highlight a,
-.ui-widget-header .ui-state-highlight a {
- color: #777620;
-}
-.ui-state-error,
-.ui-widget-content .ui-state-error,
-.ui-widget-header .ui-state-error {
- border: 1px solid #f1a899;
- background: #fddfdf;
- color: #5f3f3f;
-}
-.ui-state-error a,
-.ui-widget-content .ui-state-error a,
-.ui-widget-header .ui-state-error a {
- color: #5f3f3f;
-}
-.ui-state-error-text,
-.ui-widget-content .ui-state-error-text,
-.ui-widget-header .ui-state-error-text {
- color: #5f3f3f;
-}
-.ui-priority-primary,
-.ui-widget-content .ui-priority-primary,
-.ui-widget-header .ui-priority-primary {
- font-weight: bold;
-}
-.ui-priority-secondary,
-.ui-widget-content .ui-priority-secondary,
-.ui-widget-header .ui-priority-secondary {
- opacity: .7;
- font-weight: normal;
-}
-.ui-state-disabled,
-.ui-widget-content .ui-state-disabled,
-.ui-widget-header .ui-state-disabled {
- opacity: .35;
- background-image: none;
-}
-
-/* Icons
-----------------------------------*/
-
-/* states and images */
-.ui-icon {
- width: 16px;
- height: 16px;
-}
-// .ui-icon,
-// .ui-widget-content .ui-icon {
-// background-image: url("images/ui-icons_444444_256x240.png");
-// }
-// .ui-widget-header .ui-icon {
-// background-image: url("images/ui-icons_444444_256x240.png");
-// }
-// .ui-button .ui-icon {
-// background-image: url("images/ui-icons_777777_256x240.png");
-// }
-// .ui-state-hover .ui-icon,
-// .ui-state-focus .ui-icon,
-// .ui-button:hover .ui-icon,
-// .ui-button:focus .ui-icon,
-// .ui-state-default .ui-icon {
-// background-image: url("images/ui-icons_555555_256x240.png");
-// }
-// .ui-state-active .ui-icon,
-// .ui-button:active .ui-icon {
-// background-image: url("images/ui-icons_ffffff_256x240.png");
-// }
-// .ui-state-highlight .ui-icon,
-// .ui-button .ui-state-highlight.ui-icon {
-// background-image: url("images/ui-icons_777620_256x240.png");
-// }
-// .ui-state-error .ui-icon,
-// .ui-state-error-text .ui-icon {
-// background-image: url("images/ui-icons_cc0000_256x240.png");
-// }
-
-/* positioning */
-.ui-icon-blank { background-position: 16px 16px; }
-.ui-icon-caret-1-n { background-position: 0 0; }
-.ui-icon-caret-1-ne { background-position: -16px 0; }
-.ui-icon-caret-1-e { background-position: -32px 0; }
-.ui-icon-caret-1-se { background-position: -48px 0; }
-.ui-icon-caret-1-s { background-position: -65px 0; }
-.ui-icon-caret-1-sw { background-position: -80px 0; }
-.ui-icon-caret-1-w { background-position: -96px 0; }
-.ui-icon-caret-1-nw { background-position: -112px 0; }
-.ui-icon-caret-2-n-s { background-position: -128px 0; }
-.ui-icon-caret-2-e-w { background-position: -144px 0; }
-.ui-icon-triangle-1-n { background-position: 0 -16px; }
-.ui-icon-triangle-1-ne { background-position: -16px -16px; }
-.ui-icon-triangle-1-e { background-position: -32px -16px; }
-.ui-icon-triangle-1-se { background-position: -48px -16px; }
-.ui-icon-triangle-1-s { background-position: -65px -16px; }
-.ui-icon-triangle-1-sw { background-position: -80px -16px; }
-.ui-icon-triangle-1-w { background-position: -96px -16px; }
-.ui-icon-triangle-1-nw { background-position: -112px -16px; }
-.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
-.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
-.ui-icon-arrow-1-n { background-position: 0 -32px; }
-.ui-icon-arrow-1-ne { background-position: -16px -32px; }
-.ui-icon-arrow-1-e { background-position: -32px -32px; }
-.ui-icon-arrow-1-se { background-position: -48px -32px; }
-.ui-icon-arrow-1-s { background-position: -65px -32px; }
-.ui-icon-arrow-1-sw { background-position: -80px -32px; }
-.ui-icon-arrow-1-w { background-position: -96px -32px; }
-.ui-icon-arrow-1-nw { background-position: -112px -32px; }
-.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
-.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
-.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
-.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
-.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
-.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
-.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
-.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
-.ui-icon-arrowthick-1-n { background-position: 1px -48px; }
-.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
-.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
-.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
-.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
-.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
-.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
-.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
-.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
-.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
-.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
-.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
-.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
-.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
-.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
-.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
-.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
-.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
-.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
-.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
-.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
-.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
-.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
-.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
-.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
-.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
-.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
-.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
-.ui-icon-arrow-4 { background-position: 0 -80px; }
-.ui-icon-arrow-4-diag { background-position: -16px -80px; }
-.ui-icon-extlink { background-position: -32px -80px; }
-.ui-icon-newwin { background-position: -48px -80px; }
-.ui-icon-refresh { background-position: -64px -80px; }
-.ui-icon-shuffle { background-position: -80px -80px; }
-.ui-icon-transfer-e-w { background-position: -96px -80px; }
-.ui-icon-transferthick-e-w { background-position: -112px -80px; }
-.ui-icon-folder-collapsed { background-position: 0 -96px; }
-.ui-icon-folder-open { background-position: -16px -96px; }
-.ui-icon-document { background-position: -32px -96px; }
-.ui-icon-document-b { background-position: -48px -96px; }
-.ui-icon-note { background-position: -64px -96px; }
-.ui-icon-mail-closed { background-position: -80px -96px; }
-.ui-icon-mail-open { background-position: -96px -96px; }
-.ui-icon-suitcase { background-position: -112px -96px; }
-.ui-icon-comment { background-position: -128px -96px; }
-.ui-icon-person { background-position: -144px -96px; }
-.ui-icon-print { background-position: -160px -96px; }
-.ui-icon-trash { background-position: -176px -96px; }
-.ui-icon-locked { background-position: -192px -96px; }
-.ui-icon-unlocked { background-position: -208px -96px; }
-.ui-icon-bookmark { background-position: -224px -96px; }
-.ui-icon-tag { background-position: -240px -96px; }
-.ui-icon-home { background-position: 0 -112px; }
-.ui-icon-flag { background-position: -16px -112px; }
-.ui-icon-calendar { background-position: -32px -112px; }
-.ui-icon-cart { background-position: -48px -112px; }
-.ui-icon-pencil { background-position: -64px -112px; }
-.ui-icon-clock { background-position: -80px -112px; }
-.ui-icon-disk { background-position: -96px -112px; }
-.ui-icon-calculator { background-position: -112px -112px; }
-.ui-icon-zoomin { background-position: -128px -112px; }
-.ui-icon-zoomout { background-position: -144px -112px; }
-.ui-icon-search { background-position: -160px -112px; }
-.ui-icon-wrench { background-position: -176px -112px; }
-.ui-icon-gear { background-position: -192px -112px; }
-.ui-icon-heart { background-position: -208px -112px; }
-.ui-icon-star { background-position: -224px -112px; }
-.ui-icon-link { background-position: -240px -112px; }
-.ui-icon-cancel { background-position: 0 -128px; }
-.ui-icon-plus { background-position: -16px -128px; }
-.ui-icon-plusthick { background-position: -32px -128px; }
-.ui-icon-minus { background-position: -48px -128px; }
-.ui-icon-minusthick { background-position: -64px -128px; }
-.ui-icon-close { background-position: -80px -128px; }
-.ui-icon-closethick { background-position: -96px -128px; }
-.ui-icon-key { background-position: -112px -128px; }
-.ui-icon-lightbulb { background-position: -128px -128px; }
-.ui-icon-scissors { background-position: -144px -128px; }
-.ui-icon-clipboard { background-position: -160px -128px; }
-.ui-icon-copy { background-position: -176px -128px; }
-.ui-icon-contact { background-position: -192px -128px; }
-.ui-icon-image { background-position: -208px -128px; }
-.ui-icon-video { background-position: -224px -128px; }
-.ui-icon-script { background-position: -240px -128px; }
-.ui-icon-alert { background-position: 0 -144px; }
-.ui-icon-info { background-position: -16px -144px; }
-.ui-icon-notice { background-position: -32px -144px; }
-.ui-icon-help { background-position: -48px -144px; }
-.ui-icon-check { background-position: -64px -144px; }
-.ui-icon-bullet { background-position: -80px -144px; }
-.ui-icon-radio-on { background-position: -96px -144px; }
-.ui-icon-radio-off { background-position: -112px -144px; }
-.ui-icon-pin-w { background-position: -128px -144px; }
-.ui-icon-pin-s { background-position: -144px -144px; }
-.ui-icon-play { background-position: 0 -160px; }
-.ui-icon-pause { background-position: -16px -160px; }
-.ui-icon-seek-next { background-position: -32px -160px; }
-.ui-icon-seek-prev { background-position: -48px -160px; }
-.ui-icon-seek-end { background-position: -64px -160px; }
-.ui-icon-seek-start { background-position: -80px -160px; }
-/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
-.ui-icon-seek-first { background-position: -80px -160px; }
-.ui-icon-stop { background-position: -96px -160px; }
-.ui-icon-eject { background-position: -112px -160px; }
-.ui-icon-volume-off { background-position: -128px -160px; }
-.ui-icon-volume-on { background-position: -144px -160px; }
-.ui-icon-power { background-position: 0 -176px; }
-.ui-icon-signal-diag { background-position: -16px -176px; }
-.ui-icon-signal { background-position: -32px -176px; }
-.ui-icon-battery-0 { background-position: -48px -176px; }
-.ui-icon-battery-1 { background-position: -64px -176px; }
-.ui-icon-battery-2 { background-position: -80px -176px; }
-.ui-icon-battery-3 { background-position: -96px -176px; }
-.ui-icon-circle-plus { background-position: 0 -192px; }
-.ui-icon-circle-minus { background-position: -16px -192px; }
-.ui-icon-circle-close { background-position: -32px -192px; }
-.ui-icon-circle-triangle-e { background-position: -48px -192px; }
-.ui-icon-circle-triangle-s { background-position: -64px -192px; }
-.ui-icon-circle-triangle-w { background-position: -80px -192px; }
-.ui-icon-circle-triangle-n { background-position: -96px -192px; }
-.ui-icon-circle-arrow-e { background-position: -112px -192px; }
-.ui-icon-circle-arrow-s { background-position: -128px -192px; }
-.ui-icon-circle-arrow-w { background-position: -144px -192px; }
-.ui-icon-circle-arrow-n { background-position: -160px -192px; }
-.ui-icon-circle-zoomin { background-position: -176px -192px; }
-.ui-icon-circle-zoomout { background-position: -192px -192px; }
-.ui-icon-circle-check { background-position: -208px -192px; }
-.ui-icon-circlesmall-plus { background-position: 0 -208px; }
-.ui-icon-circlesmall-minus { background-position: -16px -208px; }
-.ui-icon-circlesmall-close { background-position: -32px -208px; }
-.ui-icon-squaresmall-plus { background-position: -48px -208px; }
-.ui-icon-squaresmall-minus { background-position: -64px -208px; }
-.ui-icon-squaresmall-close { background-position: -80px -208px; }
-.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
-.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
-.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
-.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
-.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
-.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
-
-
-/* Misc visuals
-----------------------------------*/
-
-/* Corner radius */
-.ui-corner-all,
-.ui-corner-top,
-.ui-corner-left,
-.ui-corner-tl {
- border-top-left-radius: 3px;
-}
-.ui-corner-all,
-.ui-corner-top,
-.ui-corner-right,
-.ui-corner-tr {
- border-top-right-radius: 3px;
-}
-.ui-corner-all,
-.ui-corner-bottom,
-.ui-corner-left,
-.ui-corner-bl {
- border-bottom-left-radius: 3px;
-}
-.ui-corner-all,
-.ui-corner-bottom,
-.ui-corner-right,
-.ui-corner-br {
- border-bottom-right-radius: 3px;
-}
-
-/* Overlays */
-.ui-widget-overlay {
- background: #aaaaaa;
- opacity: .003;
-}
-.ui-widget-shadow {
- box-shadow: 0px 0px 5px #666666;
-}
diff --git a/resources/assets/stylesheets/less/tables.less b/resources/assets/stylesheets/less/tables.less
deleted file mode 100644
index ba5004e7446..00000000000
--- a/resources/assets/stylesheets/less/tables.less
+++ /dev/null
@@ -1,823 +0,0 @@
-/* --- Tabellen ------------------------------------------------------------- */
-table.header, .table_header { //normale Tabellenheader
- background-color: var(--table-header-color);
- border-bottom: 1px solid var(--dark-gray-color-80);
- color: var(--black);
- padding: 4px;
-
-}
-
-.table_header_bold { //formerly known as topic(-header)
- background-color: var(--brand-color-lighter);
- border-color: var(--brand-color-darker);
- border-style: solid;
- border-width: 0 0 1px 0;
- color: var(--white);
- font-size: 12pt;
- padding: 3px 5px;
-
- img, svg { vertical-align: middle; } // for the topic-icons
-}
-
-
-table.links1 { background-color: var(--white); }
-table.logintable {
- background-image: url("@{image-path}/login.jpg");
- background-size: 750px 350px;
- h1 {
- border-bottom: 0;
- font-size: 2.5em;
- }
-}
-
-
-.gradient-bar(@flow-content: true) {
- #gradient > .vertical-three-colors(#cdd9ed, #e3eaf6, 40%, #e3eaf6);
- border-top: 1px solid var(--brand-color-lighter);
- line-height: 17pt;
- height: 25px;
-}
-.gradient-bar(@flow-content: true) when (@flow-content) {
- &:last-child { padding-right: 5px; }
-
- img,svg {
- padding: 0 2px;
- vertical-align: text-bottom;
- }
-}
-
-table.toolbar {
- .gradient-bar(false);
-}
-td.toolbar, td.printhead {
- .gradient-bar();
-}
-
-td {
- &.aufklapp { background-color: var(--dark-gray-color-5); }
- &.angemeldet { border: 1px solid var(--black); }
- &.nix { background-color: transparent; }
- &.quote {
- border: 1px solid var(--black);
- font-size: 8px;
- }
- &.rahmen_steel {
- background-color: var(--content-color-10);
- border: 1px solid var(--black);
- }
- &.rahmen_table_row_odd {
- background-color: var(--content-color-20);
- border: 1px solid var(--black);
- }
- &.rahmen_white {
- background: var(--white);
- border: 1px solid var(--black);
- }
- &.table_header_bold_red {
- border: none;
- background-color: var(--red-20);
- border-bottom: 1px solid var(--red);
- color: var(--red);
- height: 20px;
- }
-}
-
-table.blank, td.blank, td.onlineinfo, td.blanksmall {
- background-color: var(--white);
-}
-
-td.tree-indent {
- img, svg {
- vertical-align: bottom;
- }
-}
-
-td.tree-elbow-line {
- background: url("@{image-path}/datatree_1.gif") repeat-y;
- vertical-align: bottom;
- width: 5px;
-}
-
-td.tree-elbow-end {
- vertical-align: top;
- white-space: nowrap;
- width: 5px;
-}
-
-td.tree-elbow-line, td.tree-elbow-end {
- img, svg {
- display: block;
- }
-}
-
-/* --- table.collapsable ---------------------------------------------------- */
-// TODO: This is pretty hard to understand and should be replaced with an easier,
-// better structured solution
-.collapsable {
- .header-row > td {
- border-bottom: 0;
- padding-left: 0;
- }
-
- .toggle-indicator {
- color: var(--black);
- font-weight: bold;
-
- a {
- background: left center no-repeat;
- .background-icon('arr_1down', 'clickable');
- color: var(--black);
- cursor: pointer;
- display: block;
- }
-
- }
- .empty .toggle-indicator a {
- .background-icon('arr_1right', 'inactive');
- }
- .collapsed .toggle-indicator a {
- .background-icon('arr_1right', 'clickable');
- }
- td.label-cell, .toggle-indicator a, .empty .toggle-indicator {
- padding-left: 20px;
- }
- > .collapsed {
- tr:not(.header-row) {
- display: none;
- }
- .toggle-indicator ~ *:not(.dont-hide) > * {
- opacity: 0;
- pointer-events: none;
- }
- }
-}
-* + html .collapsable .collapsed .header-row { display: inline-block !important; } // IE-Hack
-
-/* --- Table details -------------------------------------------------------- */
-.loaded-details {
- > td { padding: 0 0 5px 20px !important; }
- table {
- border-top: 0;
- }
-}
-
-/* --- Sonstige ------------------------------------------------------------- */
-.gruppe0 { background-color: var(--group-color-0) !important; }
-.gruppe1 { background-color: var(--group-color-1) !important; }
-.gruppe2 { background-color: var(--group-color-2) !important; }
-.gruppe3 { background-color: var(--group-color-3) !important; }
-.gruppe4 { background-color: var(--group-color-4) !important; }
-.gruppe5 { background-color: var(--group-color-5) !important; }
-.gruppe6 { background-color: var(--group-color-6) !important; }
-.gruppe7 { background-color: var(--group-color-7) !important; }
-.gruppe8 { background-color: var(--group-color-8) !important; }
-
-#my_seminars, #settings-notifications {
- .gruppe0, .gruppe1, .gruppe2, .gruppe3, .gruppe4,
- .gruppe5, .gruppe6, .gruppe7, .gruppe9 {
- width: 1px;
- }
- .mycourse_elements > img {
- display: none;
- }
- .special_nav {
- float: right;
- }
-}
-
-.grey { background: var(--dark-gray-color-40) none; }
-.white { background: var(--white) none; }
-
-.red_gradient {
- #gradient > .vertical-three-colors(#e3969a, #e8b6b9, 60%, #e8b6b9);
- border-top: 2px solid var(--brown);
-}
-
-/* --- Styles fuer printhead und printcontent ------------------------------- */
-table {
- td.printcontent {
- background-color: var(--dark-gray-color-5);
- text-align: left;
- }
- td.printcontent:hover {
- background-color: var(--dark-gray-color-5);
- }
- td.printhead2 {
- background-image: url("@{image-path}/content_object_arr-right.png");
- border-top: 1px solid var(--brand-color-lighter);
- padding: 0;
- }
- td.printhead3 {
- background-image: url("@{image-path}/content_object_arr-down.png");
- border-top: 1px solid var(--brand-color-lighter);
- padding: 0;
- }
-}
-
-/* classes for sortable table headers --------------------------------------- */
-tr.sortable {
- th.sortasc,
- th.sortdesc {
- .tablesorter-header-inner {
- display: inline-block;
- }
- }
-
- th.sortasc {
- .icon('after', 'arr_1up');
- }
- th.sortdesc {
- .icon('after', 'arr_1down');
- }
-}
-
-.tablesorter .filtered {
- display: none;
-}
-
-.tablesorter .tablesorter-errorRow td {
- text-align: center;
- cursor: pointer;
-}
-
-/* styles for settings tables */
-.settings {
- border-collapse: collapse;
- margin-bottom: 2em;
- width: 100%;
-
- thead th, tbody th {
- .table_header_bold;
- text-align: center;
- }
- td, th {
- padding: 8px;
- vertical-align: top;
- }
- tbody {
- &.maxed {
- input[type=email], input[type=password], input[type=tel], input[type=text], input[type=url], select, textarea {
- &:first-child {
- box-sizing: border-box;
- width: 100%;
- }
- }
- td[colspan]:first-child {
- input[type=email], input[type=password], input[type=tel], input[type=text], input[type=url], select, textarea {
- width: 200px;
- }
- }
- }
- &.privacy td:first-child ~ td {
- font-style: italic;
- text-align: center;
- }
- td:first-child label {
- display: block;
- font-weight: bold;
- }
- }
- td:first-child[colspan], .divider > th, .divider > td {
- background-color: lighten(@brand-color-lighter, 20%);
- border-bottom: 1px solid var(--base-gray);
- border-top: 1px solid var(--base-gray);
- color: var(--black);
- font-weight: bold;
- text-align: center;
- }
-
- dfn, small {
- display: block;
- font-weight: normal;
- }
- dfn {
- font-size: 0.8em;
- font-style: italic;
- padding-top: 0.5em;
- }
- tfoot {
- td {
- background: var(--table-footer-color);
- text-align: center;
- }
- tr:first-child td {
- border-top: 1px solid var(--dark-gray-color-80);
- }
- }
- label.required:after {
- color: var(--red);
- content:'*';
- font-size: 1.5em;
- padding-left: 5px;
- vertical-align: middle;
- }
- &.notification tbody td {
- text-align: center;
- &:first-child:not([colspan]) { padding-left: 0; padding-right: 0; font-size: small; }
- &:nth-child(-n+2) { text-align: left; }
- }
- .bordered {
- &.left { border-left: 1px solid var(--brand-color-lighter); }
- &.right { border-right: 1px solid var(--brand-color-lighter); }
- }
-}
-
-table.tree {
- .header > td {
- .gradient-bar();
-
- a.link {
- padding-left: 5px;
- &.open {
- .background-icon('arr_1down', 'clickable');
- background-position: left center;
- background-repeat: no-repeat;
- padding-left: 20px;
- }
- &.closed {
- .background-icon('arr_1right', 'clickable');
- background-position: left center;
- background-repeat: no-repeat;
- padding-left: 20px;
- }
- }
- }
- td.blank {
- background: var(--white);
- border: 0;
- }
- td.in-between {
- background: var(--white) url("@{image-path}/tree-line.gif") center repeat-y;
- border: 0;
- }
- td.leaf {
- background: var(--white) url("@{image-path}/tree-leaf.gif") center no-repeat;
- border: 0;
- }
- td.end {
- background: var(--white) url("@{image-path}/tree-end.gif") center no-repeat;
- border: 0;
- }
- .centered {
- text-align: center;
- table { margin: auto; text-align: left; }
- }
-}
-
-.table_footer, .table_footer td {
- background-color: var(--dark-gray-color-10);
- border-top: 1px solid var(--dark-gray-color-30);
-}
-
-// New table definition
-table.default {
- border-collapse: collapse;
- margin-bottom: 1em;
- width: 100%;
-
- .wrap-content {
- word-break: break-all;
- }
-
- .font-size-adjusted{
- font-size: 1.1em;
- }
-
- th, td, caption {
- &.nowrap {
- white-space: nowrap;
- }
- padding: 5px;
- text-align: left;
- }
- > caption {
- background-color: transparent;
- padding-top: 0px;
- color: var(--headings-color);
- font-size: 1.4em;
- text-align: left;
-
- header {
- > h2 {
- border: 0;
- font-size: inherit;
- font-weight: normal;
- margin: 0;
- padding: 0;
- }
- > p {
- font-size: 0.7em;
- font-weight: normal;
- margin: 0;
- padding: 0;
- }
- }
- }
- > thead {
- > tr > th {
- background-color: var(--content-color-20);
- border-bottom: 1px solid fadeout(@brand-color-lighter, 80%);
- border-top: 1px solid var(--brand-color-darker);
- font-size: 1.0em;
- }
- }
- > tbody {
- > tr {
- > th {
- background-color: var(--content-color-20);
- border-top: 1px solid var(--brand-color-darker);
- border-bottom: 1px solid fadeout(@brand-color-lighter, 80%);
- text-align: left;
- }
- > td {
- border-bottom: 1px solid var(--table-header-color);
- transition: background-color 0.3s;
- }
- &.dragover > td {
- background-color: var(--yellow-20);
- }
- }
- }
- > tbody > tr.selected > td {
- background-color: var(--yellow-20);
- &:first-child {
- position: relative;
- &::before {
- display: block;
- content: '';
- position: absolute;
-
- top: 0;
- bottom: 0;
- left: 0;
- width: 2px;
- background-color: var(--light-gray-color);
- }
- }
- }
- > tbody > tr.new > td {
- font-weight: bold;
- &:first-child {
- position: relative;
- &::before {
- display: block;
- content: '';
- position: absolute;
-
- top: 0;
- bottom: 0;
- left: 0;
- width: 2px;
- background-color: var(--red);
- }
- }
- .action-menu {
- font-weight: normal;
- }
- }
- > tbody:last-of-type > tr:last-child > td {
- border-bottom: 1px solid var(--brand-color-darker);
- }
- // Hover effect
- &:not(.nohover) > tbody:not(.nohover) > tr:not(.nohover):hover > td:not(.nohover) {
- background-color: fadeout(@light-gray-color, 80%);
- }
- &:not(.nohover) > tbody:not(.nohover) > tr.selected:not(.nohover):hover > td:not(.nohover) {
- background-color: var(--yellow-40);
- }
- > tfoot {
- > tr > td {
- background-color: var(--content-color-20);
- border-top: 1px solid var(--brand-color-darker);
- padding-left: 10px;
- padding-right: 10px;
- }
- }
- td.avatar, th.avatar {
- padding: 5px;
- }
- .actions {
- float: right;
- text-align: right;
- white-space: nowrap;
- img, svg, input[type="image"] {
- vertical-align: middle;
- }
- }
- > caption .actions {
- font-size: @font-size-base;
- border-left: 1px solid var(--brand-color-darker);
- margin-bottom: -5px;
- min-height: 26px;
- padding-bottom: 3px;
- padding-left: 0.5em;
- padding-top: 4px;
- }
- td.actions, th.actions {
- float: none;
- }
-
- > caption {
- .caption-container {
- display: flex;
- align-items: stretch;
- justify-content: space-between;
- margin-bottom: -5px;
- }
- .caption-content {
- flex-grow: 1;
- border-right: 1px solid var(--brand-color-darker);
- padding-bottom: 5px;
- padding-right: 0.5em;
- margin-right: 0.5em;
- }
- .caption-actions {
- align-self: flex-end;
- }
- }
-
- > tbody.toggleable {
- &.toggled {
- .toggle-switch {
- .background-icon('arr_1right', 'clickable');
- }
- tr:not(:first-child) {
- display: none;
- }
- }
- .toggle-switch {
- .hide-text();
- .background-icon('arr_1down', 'clickable');
- display: inline-block;
- height: 16px;
- text-align: center;
- vertical-align: top;
- width: 16px;
- }
- }
-
- dfn, small {
- display: block;
- font-weight: normal;
- }
- dfn {
- font-size: 0.8em;
- font-style: italic;
- padding-top: 0.5em;
- }
- label.required:after {
- color: red;
- content:'*';
- font-size: 1.5em;
- padding-left: 5px;
- vertical-align: middle;
- }
-
- &.has-form {
- input[type=text], textarea {
- box-sizing: border-box;
- min-width: 200px;
- width: 100%;
- }
- textarea {
- min-height: 100px;
- }
- }
-
- tfoot {
- // Fix button and select alignment
- select {
- vertical-align: middle;
- }
- // Adjust button margins
- .button {
- margin-bottom: 0;
- margin-top: 0;
- }
- }
-
- colgroup {
- col.checkbox {
- width: 24px;
- }
- }
-}
-
-
-// Remove trailing border and margin in content boxes if table is last element
-article.studip > section > table.default:last-child {
- margin-bottom: 0;
-
- > tbody:last-child > tr:last-child > td {
- border-bottom: 0;
- }
-}
-
-table.withdetails {
- > tbody > tr:not(.details) > td:first-child {
- .background-icon('arr_1right', 'clickable');
- background-repeat: no-repeat;
- background-position: 2px center;
- padding-left: 20px;
- > a {
- margin-left: -20px;
- padding-left: 20px;
- }
- }
- > tbody > tr.open > td {
- background-color: fadeout(@light-gray-color, 80%);
- }
- > tbody > tr.open > td:first-child {
- .background-icon('arr_1down', 'clickable');
- }
- tr.details {
- display: none;
- max-height: 0px;
- overflow: hidden;
- transition: max-height 0.8s;
- }
- tr.open + tr.details {
- display: table-row;
- max-height: 200px;
- overflow: hidden;
- transition: max-height 0.8s;
- background-color: transparent !important;
- > td {
- padding-top: 0px;
- padding-bottom: 10px;
- > .detailscontainer {
- padding: 5px;
- border: 1px solid var(--table-header-color);
- margin-top: -1px;
- border-top-color: white;
- }
- }
- }
-}
-.no-js table.withdetails tr.details {
- display: table-row;
-}
-
-.sortable-dreieck(@direction) {
- &::after {
- background-repeat: no-repeat;
- content: ' ';
- display: inline-block;
- height: 16px;
- margin-left: 0;
- .background-icon('arr_1@{direction}');
- vertical-align: text-bottom;
- width: 16px;
- }
-}
-
-.sortable-table {
- .header,
- .tablesorter-header:not(.sorter-false) {
- white-space: nowrap;
-
- color: var(--base-color);
- &:hover {
- color: var(--active-color);
- cursor: pointer;
- }
- &.tablesorter-headerDesc:hover .tablesorter-header-inner::after {
- .background-icon('arr_1down', 'status-red');
- }
- &.tablesorter-headerAsc:hover .tablesorter-header-inner::after {
- .background-icon('arr_1up', 'status-red');
- }
- }
- .headerSortUp,
- .tablesorter-headerDesc .tablesorter-header-inner {
- .sortable-dreieck('down');
- }
- .headerSortDown,
- .tablesorter-headerAsc .tablesorter-header-inner {
- .sortable-dreieck('up');
- }
- .tablesorter-headerUnSorted:not(.sorter-false) .tablesorter-header-inner {
- margin-right: 15px;
- }
-}
-
-// Schedule table
-table#schedule_data {
- width: 100%;
- table-layout: fixed;
- thead {
- tr {
- td {
- text-align: center;
- vertical-align: top;
- background-color: var(--content-color-20);
- padding-right: 2px;
- padding: 0px;
- &:first-child {
- width: 40px;
- }
- }
- &:first-child {
- td:first-child {
- background-color: inherit;
- }
- }
- }
- }
- tbody {
- td:first-child {
- text-align: right;
- vertical-align: top;
- background-color: var(--content-color-20);
- padding-right: 2px;
- padding: 0px;
- }
- }
-}
-
-// Responsive helper
-.table-scrollbox-horizontal {
- .scrollbox-horizontal();
-}
-
-//New table form for Course Search
-table.course-search{
- @max-width-s: 8em;
- @max-width-m: 48em;
- @max-width-l: 100%;
- border: 1px solid var(--content-color-40);
- padding: 0px;
- border-top: 0;
- caption.legend {
- box-sizing: border-box;
- background-color: @fieldset-header;
- border: 1px solid var(--content-color-40);
- border-bottom: 0;
- color: var(--brand-color-dark);
- font-size: 12pt;
- font-weight: bold;
- line-height: 2em;
- padding: 0;
- text-align: left;
- text-indent: 15px;
- }
-}
-
-//Show Tree Table
-table.show-tree {
- width:100%;
- padding: 0px 10px 10px 10px;
- td.b-top-va-center {
- border-top: 1px solid var(--content-color-40);
- padding-top: 10px;
- vertical-align:middle;
- }
- img[role=root-icon]{
- position: relative;
- top: 1px;
- }
- div.sem-root-icon{
- display: inline-block;
- vertical-align: top;
- }
- div.sem-path{
- display: inline-block;
- padding-left: 5px;
- div.sem-path-dir{
- // padding-left: 5px;
- }
- div.sem_path_info{
- // margin-left:30px;
- padding-top:10px;
- div.sem_path_title{
- font-weight: bold;
- font-size: 1.4em;
- margin: 3px 0px 5px 0px;
- }
- div.sem_path_text{
- padding-top:2px;
- }
- }
- }
- table.show-tree-kids{
- width: 100%;
- td.kids-tree-row{
- width: 50%;
- }
- ul.semtree{
- padding-left: 0px !important;
- a{
- padding-top: 5px !important;
- padding-bottom: 3px !important;
- padding-left: 14px !important;
- margin-left: -4px !important;
- display: block;
- }
- a:hover{
- background-color: @fieldset-header !important;
- color: var(--base-color) !important;
- }
- }
-
- }
-}
diff --git a/resources/assets/stylesheets/less/variables.less b/resources/assets/stylesheets/less/variables.less
deleted file mode 100644
index 33efcc5bbc5..00000000000
--- a/resources/assets/stylesheets/less/variables.less
+++ /dev/null
@@ -1,38 +0,0 @@
-@text-color: #000;
-
-@font-family-base: "Lato", sans-serif;
-
-@font-size-base: 14px;
-@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
-
-@font-size-h1: floor((@font-size-base * 1.4)); // ~36px
-@font-size-h2: floor((@font-size-base * 1.2)); // ~30px
-@font-size-h3: ceil((@font-size-base * 1.1)); // ~24px
-@font-size-h4: @font-size-base; // 14px
-@font-size-h5: @font-size-base;
-@font-size-h6: @font-size-base;
-
-// Unit-less `line-height` for use in components like buttons.
-@line-height-base: 1.428571429; // 20/14
-// Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
-
-// By default, this inherits from the `<body>`.
-@headings-font-family: inherit;
-@headings-font-weight: 550;
-@headings-line-height: 1.1;
-@headings-color: @black;
-
-// Design specific
-@bar-bottom-container-height: 40px;
-@header-height: 80px;
-
-// Drag & Drop specific:
-@drag_and_drop_z_index: 1000;
-@drag_and_drop_border: 1px solid @base-color;
-
-// Avatar sizes:
-@avatar-small: 25px;
-@avatar-medium: 100px;
-@avatar-normal: 250px;
diff --git a/resources/assets/stylesheets/less/visibility.less b/resources/assets/stylesheets/less/visibility.less
deleted file mode 100644
index 50dafee85c5..00000000000
--- a/resources/assets/stylesheets/less/visibility.less
+++ /dev/null
@@ -1,91 +0,0 @@
-.media-breakpoint-xxlarge-down(@rules) {
- @rules();
-}
-
-.media-breakpoint-xlarge-down(@rules) {
- @media (max-width: (@major-breakpoint-xxlarge - 1px)) { @rules(); }
-}
-
-.media-breakpoint-large-down(@rules) {
- @media (max-width: (@major-breakpoint-xlarge - 1px)) { @rules(); }
-}
-
-.media-breakpoint-medium-down(@rules) {
- @media (max-width: (@major-breakpoint-large - 1px)) { @rules(); }
-}
-
-.media-breakpoint-small-down(@rules) {
- @media (max-width: (@major-breakpoint-medium - 1px)) { @rules(); }
-}
-
-.media-breakpoint-tiny-down(@rules) {
- @media (max-width: (@major-breakpoint-small - 1px)) { @rules(); }
-}
-
-
-.media-breakpoint-xxlarge-up(@rules) {
- @media (min-width: (@major-breakpoint-xxlarge)) { @rules(); }
-}
-
-.media-breakpoint-xlarge-up(@rules) {
- @media (min-width: (@major-breakpoint-xlarge)) { @rules(); }
-}
-
-.media-breakpoint-large-up(@rules) {
- @media (min-width: (@major-breakpoint-large)) { @rules(); }
-}
-
-.media-breakpoint-medium-up(@rules) {
- @media (min-width: (@major-breakpoint-medium)) { @rules(); }
-}
-
-.media-breakpoint-small-up(@rules) {
- @media (min-width: (@major-breakpoint-small)) { @rules(); }
-}
-
-.media-breakpoint-tiny-up(@rules) {
- @rules();
-}
-
-
-.hidden-xxlarge-down {
- .media-breakpoint-xxlarge-down({ display: none !important; })
-}
-.hidden-xxlarge-up {
- .media-breakpoint-xxlarge-up({ display: none !important; });
-}
-
-.hidden-xlarge-down {
- .media-breakpoint-xlarge-down({ display: none !important; })
-}
-.hidden-xxlarge-up {
- .media-breakpoint-large-up({ display: none !important; });
-}
-
-.hidden-large-down {
- .media-breakpoint-large-down({ display: none !important; })
-}
-.hidden-large-up {
- .media-breakpoint-large-up({ display: none !important; });
-}
-
-.hidden-medium-down {
- .media-breakpoint-medium-down({ display: none !important; })
-}
-.hidden-medium-up {
- .media-breakpoint-medium-up({ display: none !important; });
-}
-
-.hidden-small-down {
- .media-breakpoint-small-down({ display: none !important; })
-}
-.hidden-small-up {
- .media-breakpoint-small-up({ display: none !important; });
-}
-
-.hidden-tiny-down {
- .media-breakpoint-tiny-down({ display: none !important; })
-}
-.hidden-tiny-up {
- .media-breakpoint-tiny-up({ display: none !important; });
-}
diff --git a/resources/assets/stylesheets/mixins.less b/resources/assets/stylesheets/mixins.less
deleted file mode 100644
index 9646596e0a1..00000000000
--- a/resources/assets/stylesheets/mixins.less
+++ /dev/null
@@ -1,8 +0,0 @@
-@image-path: "../images";
-@icon-path: "@{image-path}/icons/16";
-
-@import (reference) "mixins/colors.less";
-@import (reference) "mixins/twitter-mixins.less";
-@import (reference) "mixins/studip.less";
-@import (reference) "mixins/arrow.less";
-@import (reference) "mixins/flex.less";
diff --git a/resources/assets/stylesheets/mixins/arrow.less b/resources/assets/stylesheets/mixins/arrow.less
deleted file mode 100644
index 8b910aa3889..00000000000
--- a/resources/assets/stylesheets/mixins/arrow.less
+++ /dev/null
@@ -1,124 +0,0 @@
-/*
- * arrow.less - CSS arrows mixin
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License as
- * published by the Free Software Foundation; either version 2 of
- * the License, or (at your option) any later version.
- *
- * @author Jan-Hendrik Willms <tleilax+studip@gmail.com>
- * @license http://www.gnu.org/licenses/gpl-2.0.html GPL version 2
- * @category Stud.IP
- * @since 2.4
- */
-
-#arrow {
- .init() {
- position: relative;
- }
-
- .pseudo(@width, @color) {
- border: (@width) solid fadeout(@color, 100%);
- content: "";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- }
-
- // Top
- .top-pseudo(@width, @color) {
- #arrow > .pseudo(@width, @color);
- border-bottom-color: @color;
- bottom: 100%;
- left: 50%;
- margin-left: (-@width);
- }
- .top(@width, @color, @margin) {
- #arrow > .init();
- &:before { #arrow > .top-pseudo(@width, @color); }
- margin-top: (@margin);
- }
- .top(@width, @color) {
- #arrow > .top(@width, @color, @width);
- }
- .top-border(@width, @color, @border-width, @border-color, @margin) {
- #arrow > .top(@width, @border-color, @margin);
- &:after { #arrow > .top-pseudo(@width - @border-width, @color); }
- }
- .top-border(@width, @color, @border-width, @border-color) {
- #arrow > .top-border(@width, @color, @border-width, @border-color, @width);
- }
-
- // Right
- .right-pseudo(@width, @color) {
- #arrow > .pseudo(@width, @color);
- border-left-color: @color;
- left: 100%;
- top: 50%;
- margin-top: (-@width);
- }
- .right(@width, @color, @margin) {
- #arrow > .init();
- &:before { #arrow > .right-pseudo(@width, @color); }
- margin-right: (@margin);
- }
- .right(@width, @color) {
- #arrow > .right(@width, @color, @width);
- }
- .right-border(@width, @color, @border-width, @border-color, @margin) {
- #arrow > .right(@width, @border-color, @margin);
- &:after { #arrow > .right-pseudo(@width - @border-width, @color); }
- }
- .right-border(@width, @color, @border-width, @border-color) {
- #arrow > .right-border(@width, @color, @border-width, @border-color, @width);
- }
-
- // Bottom
- .bottom-pseudo(@width, @color) {
- #arrow > .pseudo(@width, @color);
- border-top-color: @color;
- top: 100%;
- left: 50%;
- margin-left: (-@width);
- }
- .bottom(@width, @color, @margin) {
- #arrow > .init();
- &:before { #arrow > .bottom-pseudo(@width, @color); }
- margin-bottom: (@margin);
- }
- .bottom(@width, @color) {
- #arrow > .bottom(@width, @color, @width);
- }
- .bottom-border(@width, @color, @border-width, @border-color, @margin) {
- #arrow > .bottom(@width, @border-color, @margin);
- &:after { #arrow > .bottom-pseudo(@width - @border-width, @color); }
- }
- .bottom-border(@width, @color, @border-width, @border-color) {
- #arrow > .bottom-border(@width, @color, @border-width, @border-color, @width);
- }
-
- // Left
- .left-pseudo(@width, @color) {
- #arrow > .pseudo(@width, @color);
- border-right-color: @color;
- right: 100%;
- top: 50%;
- margin-top: -(@width);
- }
- .left(@width, @color, @margin) {
- #arrow > .init();
- &:before { #arrow > .left-pseudo(@width, @color); }
- margin-left: (@margin);
- }
- .left(@width, @color) {
- #arrow > .left(@width, @color, @width);
- }
- .left-border(@width, @color, @border-width, @border-color, @margin) {
- #arrow > .left(@width, @border-color, @margin);
- &:after { #arrow > .left-pseudo(@width - @border-width, @color); }
- }
- .left-border(@width, @color, @border-width, @border-color) {
- #arrow > .left-border(@width, @color, @border-width, @border-color, @width);
- }
-}
diff --git a/resources/assets/stylesheets/mixins/colors.less b/resources/assets/stylesheets/mixins/colors.less
deleted file mode 100644
index bf1bb38152b..00000000000
--- a/resources/assets/stylesheets/mixins/colors.less
+++ /dev/null
@@ -1,216 +0,0 @@
-//if you like, change this (your brand color)
-@base-color: #28497c; // #28497c
-@contrast-blue: #2849d8;
-
-//PLEASE, no changes from here
-//@base-gray: #3c454e; // #3c454e
-//calculated base gray
-@base-gray: hsv(hsvhue(@base-color),
- hsvsaturation(#3c454e),
- hsvvalue(#3c454e));
-
-@brand-color-dark: @base-color;
-@brand-color-darker: hsv((hsvhue(@base-color) - 0.2),
- (hsvsaturation(@base-color) + 4.5%),
- (hsvvalue(@base-color) - 4.7)); // #1f3f70;
-
-@brand-color-light: hsv(hsvhue(@base-color),
- (hsvsaturation(@base-color) - 5.5%),
- (hsvvalue(@base-color) + 7.5)); // #36598f;
-
-@brand-color-lighter: hsv((hsvhue(@base-color) + 2.3),
- (hsvsaturation(@base-color) - 41.8%),
- (hsvvalue(@base-color) + 23.9)); // #899ab9;
-
-@public-course-bgcolor: @red;
-
-@table-header-color: @dark-gray-color-15;
-@table-footer-color: @dark-gray-color-15;
-
-@active-color: @red;
-/* This code calculates another activity color in case you dont wanna stick with red
-
-@active-color: hsv((hsvhue(@red) - hsvhue(@base-color) + hsvhue(@origin-base-color)),
-hsvsaturation(@red),
-hsvvalue(@red));
-*/
-
-@black: #000000;
-@white: #fff;
-
-// Default studip base color
-@origin-base-color: #28497c; // #28497c
-
-@base-color-80: mix(@base-color, #fff, 80%); // #536d96
-@base-color-60: mix(@base-color, #fff, 60%); // #7e92b0
-@base-color-40: mix(@base-color, #fff, 40%); // #a9b6cb
-@base-color-20: mix(@base-color, #fff, 20%); // #d4dbe5
-
-@content-color: @brand-color-lighter;
-@content-color-80: mix(@content-color, #fff, 80%); // #a1aec7
-@content-color-60: mix(@content-color, #fff, 60%); // #b8c2d5
-@content-color-40: mix(@content-color, #fff, 40%); // #d0d7e3
-@content-color-20: mix(@content-color, #fff, 20%); // #e7ebf1
-@content-color-10: mix(@content-color, #fff, 10%); // #e7ebf1
-
-@light-gray-color: @dark-gray-color-75;
-@light-gray-color-80: @dark-gray-color-60;
-@light-gray-color-60: @dark-gray-color-45;
-@light-gray-color-40: @dark-gray-color-30;
-@light-gray-color-20: @dark-gray-color-15;
-
-@dark-gray-color: @base-gray;
-@dark-gray-color-80: mix(@dark-gray-color, #fff, 80%); // #636a71
-@dark-gray-color-75: mix(@dark-gray-color, #fff, 75%); // #6c737a
-@dark-gray-color-60: mix(@dark-gray-color, #fff, 60%); // #898f94
-@dark-gray-color-45: mix(@dark-gray-color, #fff, 45%); // #a7abaf
-@dark-gray-color-40: mix(@dark-gray-color, #fff, 40%); // #b1b5b8
-@dark-gray-color-30: mix(@dark-gray-color, #fff, 30%); // #c4c7c9
-@dark-gray-color-20: mix(@dark-gray-color, #fff, 20%); // #d8dadc
-@dark-gray-color-15: mix(@dark-gray-color, #fff, 15%); // #e1e3e4
-@dark-gray-color-10: mix(@dark-gray-color, #fff, 10%); // #ebeced
-@dark-gray-color-5: mix(@dark-gray-color, #fff, 5%); // #f5f5f6
-
-
-@activity-color: @yellow;
-@activity-color-80: mix(@activity-color, #fff, 80%); // #ffca5c
-@activity-color-60: mix(@activity-color, #fff, 60%); // #ffd785
-@activity-color-40: mix(@activity-color, #fff, 40%); // #ffe4ad
-@activity-color-20: mix(@activity-color, #fff, 20%); // #fff2d6
-
-//colors. a lot of.
-
-@yellow: #ffbd33;
-@yellow-80: mix(@yellow, #fff, 80%); // #ffca5c
-@yellow-60: mix(@yellow, #fff, 60%); // #ffd785
-@yellow-40: mix(@yellow, #fff, 40%); // #ffe4ad
-@yellow-20: mix(@yellow, #fff, 20%); // #fff2d6
-
-@orange: #f26e00;
-@orange-80: mix(@orange, #fff, 80%); // #f58b33
-@orange-60: mix(@orange, #fff, 60%); // #f7a866
-@orange-40: mix(@orange, #fff, 40%); // #fac599
-@orange-20: mix(@orange, #fff, 20%); // #fce2cc
-
-@red: #d60000;
-@red-80: mix(@red, #fff, 80%); // #de3333
-@red-60: mix(@red, #fff, 60%); // #e76666
-@red-40: mix(@red, #fff, 40%); // #ef9999
-@red-20: mix(@red, #fff, 20%); // #f7cccc
-
-@violet: #b02e7c;
-@violet-80: mix(@violet, #fff, 80%); // #c05896
-@violet-60: mix(@violet, #fff, 60%); // #d082b0
-@violet-40: mix(@violet, #fff, 40%); // #dfabcb
-@violet-20: mix(@violet, #fff, 20%); // #efd5e5
-
-@dark-violet: #682c8b;
-@dark-violet-80: mix(@dark-violet, #fff, 80%); // #8656a2
-@dark-violet-60: mix(@dark-violet, #fff, 60%); // #a480b9
-@dark-violet-40: mix(@dark-violet, #fff, 40%); // #c2aad0
-@dark-violet-20: mix(@dark-violet, #fff, 20%); // #e0d4e7
-
-@green: #6ead10;
-@green-80: mix(@green, #fff, 80%); // #8bbd40
-@green-60: mix(@green, #fff, 60%); // #a8ce70
-@green-40: mix(@green, #fff, 40%); // #c5dea0
-@green-20: mix(@green, #fff, 20%); // #e2efcf
-
-@dark-green: #008512;
-@dark-green-80: mix(@dark-green, #fff, 80%); // #339d41
-@dark-green-60: mix(@dark-green, #fff, 60%); // #66b570
-@dark-green-40: mix(@dark-green, #fff, 40%); // #99cea0
-@dark-green-20: mix(@dark-green, #fff, 20%); // #cce6cf
-
-@petrol: #129c94;
-@petrol-80: mix(@petrol, #fff, 80%); // #41afaa
-@petrol-60: mix(@petrol, #fff, 60%); // #70c3bf
-@petrol-40: mix(@petrol, #fff, 40%); // #a0d7d4
-@petrol-20: mix(@petrol, #fff, 20%); // #cfebe9
-
-@brown: #a85d45;
-@brown-80: mix(@brown, #fff, 80%); // #b97d6a
-@brown-60: mix(@brown, #fff, 60%); // #ca9eaf
-@brown-40: mix(@brown, #fff, 40%); // #dcbeb4
-@brown-20: mix(@brown, #fff, 20%); // #edded9
-
-@fieldset-header: @content-color-20;
-@fieldset-border: @base-color-20;
-
-// contrast colors
-@contrast-content-white: contrast(@content-color, #ffffff, #000000, 67%);
-@contrast-content-gray: contrast(@content-color, @dark-gray-color, #000000 , 67%);
-@contrast-content-hovergray: contrast(@content-color, @dark-gray-color-10, @dark-gray-color);
-
-// Group colors (for my courses grouping)
-@group-color-0: @dark-violet;
-@group-color-1: @violet;
-@group-color-2: @red;
-@group-color-3: @orange;
-@group-color-4: @yellow;
-@group-color-5: @green;
-@group-color-6: @dark-green;
-@group-color-7: @petrol;
-@group-color-8: @brown;
-
-// Calender color mapping
-@calendar-day-event: @brand-color-dark;
-@calendar-day-event-aux: @base-color-60;
-
-@calendar-category-1: @dark-violet;
-@calendar-category-1-aux: @dark-violet-60;
-
-@calendar-category-2: @violet;
-@calendar-category-2-aux: @violet-60;
-
-@calendar-category-3: @red;
-@calendar-category-3-aux: @red-60;
-
-@calendar-category-4: @orange;
-@calendar-category-4-aux: @orange-60;
-
-@calendar-category-5: @yellow;
-@calendar-category-5-aux: @yellow-60;
-
-@calendar-category-6: @green;
-@calendar-category-6-aux: @green-60;
-
-@calendar-category-7: @dark-green;
-@calendar-category-7-aux: @dark-green-60;
-
-@calendar-category-8: @petrol;
-@calendar-category-8-aux: @petrol-60;
-
-@calendar-category-9: @brown;
-@calendar-category-9-aux: @brown-60;
-
-@calendar-category-10: @dark-violet-60;
-@calendar-category-10-aux: @dark-violet-20;
-
-@calendar-category-11: @violet-60;
-@calendar-category-11-aux: @violet-20;
-
-@calendar-category-12: @red-60;
-@calendar-category-12-aux: @red-20;
-
-@calendar-category-13: @orange-60;
-@calendar-category-13-aux: @orange-20;
-
-@calendar-category-14: @yellow-60;
-@calendar-category-14-aux: @yellow-20;
-
-@calendar-category-15: @green-60;
-@calendar-category-15-aux: @green-20;
-
-@calendar-category-16: @dark-green-60;
-@calendar-category-16-aux: @dark-green-20;
-
-@calendar-category-17: @petrol-60;
-@calendar-category-17-aux: @petrol-20;
-
-@calendar-category-18: @brown-60;
-@calendar-category-18-aux: @brown-20;
-
-/* used for course category 255 refer to (resources/assets/stylesheets/less/calendar.less) */
-@calendar-category-255: @light-gray-color-60;
-@calendar-category-255-aux: @light-gray-color-20;
diff --git a/resources/assets/stylesheets/mixins/flex.less b/resources/assets/stylesheets/mixins/flex.less
deleted file mode 100644
index 8b8586f198d..00000000000
--- a/resources/assets/stylesheets/mixins/flex.less
+++ /dev/null
@@ -1,51 +0,0 @@
-.flex() {
- display: flex;
-}
-
-.flex-direction-row() {
- flex-direction: row;
-}
-.flex-direction-row-reverse() {
- flex-direction: row-reverse;
-}
-
-.flex-direction-column() {
- flex-direction: column;
-}
-.flex-direction-column-reverse() {
- flex-direction: column-reverse;
-}
-
-.flex-wrap(@wrap) {
- flex-wrap: @wrap;
-}
-
-.flex-grow(@growth) {
- flex-grow: @growth;
-}
-
-.flex-align-content(@stretch) {
- align-content: @stretch;
-}
-
-.flex-align-items(@stretch) {
- align-items: @stretch;
-}
-
-.flex-justify-content(@justification) {
- justify-content: @justification;
-}
-
-.flex-justify-content() {
- justify-content: flex-start;
-}
-
-.flex-align-self(@alignment) {
- align-self: @alignment;
-}
-.flex-item(@growth) {
- flex: @growth;
-}
-.flex-item(@growth, @shrink, @basis: auto) {
- flex: @growth @shrink @basis;
-}
diff --git a/resources/assets/stylesheets/mixins/misc.scss b/resources/assets/stylesheets/mixins/misc.scss
index d1f3fe67e7c..90d61c5ec99 100644
--- a/resources/assets/stylesheets/mixins/misc.scss
+++ b/resources/assets/stylesheets/mixins/misc.scss
@@ -33,3 +33,10 @@
@function text-contrast($color, $dark, $light, $threshold: 51) {
@return if(lightness($color) < $threshold, $light, $dark)
}
+
+
+@mixin vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
+ background-color: mix($midColor, $endColor, 80%);
+ background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
+ background-repeat: no-repeat;
+}
diff --git a/resources/assets/stylesheets/mixins/studip.less b/resources/assets/stylesheets/mixins/studip.less
deleted file mode 100644
index 5f0418d286f..00000000000
--- a/resources/assets/stylesheets/mixins/studip.less
+++ /dev/null
@@ -1,219 +0,0 @@
-/*
- * studip-mixins.less
- *
- * This file contains all mixins created specifically for Stud.IP
- * while mixins.less should contain a copy of the mixins from
- * twitter's bootstrap.
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License as
- * published by the Free Software Foundation; either version 2 of
- * the License, or (at your option) any later version.
- *
- * @author Jan-Hendrik Willms <tleilax+studip@gmail.com>
- * @license http://www.gnu.org/licenses/gpl-2.0.html GPL version 2
- * @category Stud.IP
- * @since 2.4
- */
-
-// Drop shadows
-.box-shadow(@shadow1, @shadow2) {
- -webkit-box-shadow: @shadow1, @shadow2;
- -moz-box-shadow: @shadow1, @shadow2;
- box-shadow: @shadow1, @shadow2;
-}
-
-// Double transition
-.transition(@transition1, @transition2) {
- .transition(~"@{transition1}, @{transition2}");
-}
-// Double transform
-.transform(@transformation1, @transformation2) {
- -webkit-transform: @transformation1 @transformation2;
- -moz-transform: @transformation1 @transformation2;
- -ms-transform: @transformation1 @transformation2;
- -o-transform: @transformation1 @transformation2;
- transform: @transformation1 @transformation2;
-}
-
-// Disable text selection by user
-.disable-select() {
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Safari */
- -khtml-user-select: none; /* Konqueror HTML */
- -moz-user-select: none; /* Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none; /* Non-prefixed version, currently
- supported by Chrome and Opera */
-}
-
-// Retina background icons
-.retina-background-image(@image0, @image1, @width: 100%, @height: @width) {
- background-image: url("@{image-path}/@{image0}");
- @media (-webkit-min-device-pixel-ratio: 2),
- (min-resolution: 192dpi)
- {
- background-image: url("@{image-path}/@{image1}");
- .background-size(@width @height);
- }
-}
-
-// Role to color mapping
-.role2color(@role) when (@role = 'info') {
- @color: 'black';
-}
-
-.role2color(@role) when (@role = 'clickable'), (@role = 'link'), (@role = 'sort') {
- @color: 'blue';
-}
-
-.role2color(@role) when (@role = 'accept'), (@role = 'status-green') {
- @color: 'green';
-}
-
-.role2color(@role) when (@role = 'inactive') {
- @color: 'grey';
-}
-
-.role2color(@role) when (@role = 'navigation') {
- @color: 'blue';
-}
-
-.role2color(@role) when (@role = 'new'), (@role = 'attention'), (@role = 'status-red') {
- @color: 'red';
-}
-
-.role2color(@role) when (@role = 'info_alt') {
- @color: 'white';
-}
-
-.role2color(@role) when (@role = 'status-yellow') {
- @color: 'yellow';
-}
-
-.background-icon(@icon, @role: 'clickable', @size: 16, @append: 0) {
- .role2color(@role);
-
- & when (ispercentage(@size)) {
- @bgsize: @size;
- }
- & when not (ispercentage(@size)) {
- @bgsize: unit(@size, px);
- }
-
- @temp-icon: replace("@{color}/@{icon}", "\.(png|svg)$", '', g);
- @svg: "@{image-path}/icons/@{temp-icon}.svg";
-
-
- & when (@append = 0) {
- background-image: url("@{svg}");
- & when (ispercentage(@size)) {
- background-size: @size;
- }
- & when not (ispercentage(@size)) {
- background-size: unit(@size, px);
- }
- }
- & when (@append = 1) {
- background-image+: url("@{svg}");
- & when (ispercentage(@size)) {
- background-size+: @size;
- }
- & when not (ispercentage(@size)) {
- background-size+: unit(@size, px);
- }
- }
-}
-
-.background-icons(@icon0, @role0, @size0: 16, @icon1, @role1: @role0, @size1: @size0) {
- & {
- .background-icon(@icon0, @role0, @size0, 1);
- }
- & {
- .background-icon(@icon1, @role1, @size1, 1);
- }
-}
-
-.icon(@position, @icon, @role: "clickable", @size: 16, @padding: 0) when (@position = "before") {
- &::before {
- background-repeat: no-repeat;
- content: ' ';
- display: inline-block;
- height: unit(@size, px);
- margin-right: @padding;
- .background-icon(@icon, @role, @size);
- vertical-align: text-top;
- width: unit(@size, px);
- }
-}
-
-.icon(@position, @icon, @role: "clickable", @size: 16, @padding: 0) when (@position = "after") {
- &::after {
- background-repeat: no-repeat;
- content: ' ';
- display: inline-block;
- height: unit(@size, px);
- margin-left: @padding;
- .background-icon(@icon, @role, @size);
- vertical-align: text-top;
- width: unit(@size, px);
- }
-}
-
-// Scrollboxes
-// From http://lea.verou.me/2012/04/background-attachment-local/
-// and http://dabblet.com/gist/6134408
-.scrollbox-vertical {
- overflow: auto;
-
- background:
- /* Shadow covers */
- linear-gradient(white 30%, rgba(255,255,255,0)),
- linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
-
- /* Shadows */
- radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
- radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
- background-repeat: no-repeat;
- background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-
- /* Opera doesn't support this in the shorthand */
- background-attachment: local, local, scroll, scroll;
-}
-
-.scrollbox-horizontal {
- overflow: auto;
-
- background:
- /* Shadow covers */
- linear-gradient(90deg, white 30%, rgba(255,255,255,0)),
- linear-gradient(90deg, rgba(255,255,255,0), white 70%) 100% 0,
-
- /* Shadows */
- radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
- radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 100% 0;
- background-repeat: no-repeat;
- background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
-
- /* Opera doesn't support this in the shorthand */
- background-attachment: local, local, scroll, scroll;
-}
-
-// Define action icons for widgets
-/********************
- ** Widget actions **
- ********************/
-.widget-action(@action, @icon: @action, @role: 'clickable', @rules: {}) {
- .widget-action[data-action="@{action}"] {
- .hide-text();
- .square(16px);
- .background-icon(@icon, @role, 16px);
-
- background-repeat: no-repeat;
- cursor: pointer;
- display: block;
- // vertical-align: middle;
-
- @rules();
- }
-}
diff --git a/resources/assets/stylesheets/mixins/twitter-mixins.less b/resources/assets/stylesheets/mixins/twitter-mixins.less
deleted file mode 100644
index 53b32011dbc..00000000000
--- a/resources/assets/stylesheets/mixins/twitter-mixins.less
+++ /dev/null
@@ -1,607 +0,0 @@
-// Taken from Twitter's bootstrap toolkit, https://github.com/twitter/bootstrap
-// Source: https://github.com/twitter/bootstrap/blob/master/less/mixins.less
-
-//
-// Mixins
-// --------------------------------------------------
-
-
-// UTILITY MIXINS
-// --------------------------------------------------
-
-// Clearfix
-// --------
-// For clearing floats like a boss h5bp.com/q
-.clearfix {
- &:before,
- &:after {
- display: table;
- content: "";
- // Fixes Opera/contenteditable bug:
- // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
- line-height: 0;
- }
- &:after {
- clear: both;
- }
-}
-
-// Webkit-style focus
-// ------------------
-.tab-focus() {
- // Default
- outline: thin dotted #333;
- // Webkit
- outline: 5px auto -webkit-focus-ring-color;
- outline-offset: -2px;
-}
-
-// Center-align a block level element
-// ----------------------------------
-.center-block() {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-
-// IE7 inline-block
-// ----------------
-.ie7-inline-block() {
- *display: inline; /* IE7 inline-block hack */
- *zoom: 1;
-}
-
-// IE7 likes to collapse whitespace on either side of the inline-block elements.
-// Ems because we're attempting to match the width of a space character. Left
-// version is for form buttons, which typically come after other elements, and
-// right version is for icons, which come before. Applying both is ok, but it will
-// mean that space between those elements will be .6em (~2 space characters) in IE7,
-// instead of the 1 space in other browsers.
-.ie7-restore-left-whitespace() {
- *margin-left: .3em;
-
- &:first-child {
- *margin-left: 0;
- }
-}
-
-.ie7-restore-right-whitespace() {
- *margin-right: .3em;
-}
-
-// Sizing shortcuts
-// -------------------------
-.size(@height, @width) {
- width: @width;
- height: @height;
-}
-.square(@size) {
- .size(@size, @size);
-}
-
-// Placeholder text
-// -------------------------
-.placeholder(@color: @placeholderText) {
- &:-moz-placeholder {
- color: @color;
- }
- &:-ms-input-placeholder {
- color: @color;
- }
- &::-webkit-input-placeholder {
- color: @color;
- }
-}
-
-// Text overflow
-// -------------------------
-// Requires inline-block or block for proper styling
-.text-overflow() {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-// CSS image replacement
-// -------------------------
-// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
-.hide-text {
- font: 0/0 a;
- color: transparent;
- text-shadow: none;
- background-color: transparent;
- border: 0;
-}
-
-
-// FONTS
-// --------------------------------------------------
-
-#font {
- #family {
- .serif() {
- font-family: @serifFontFamily;
- }
- .sans-serif() {
- font-family: @sansFontFamily;
- }
- .monospace() {
- font-family: @monoFontFamily;
- }
- }
- .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
- .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
- #font > #family > .serif;
- #font > .shorthand(@size, @weight, @lineHeight);
- }
- .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
- #font > #family > .sans-serif;
- #font > .shorthand(@size, @weight, @lineHeight);
- }
- .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
- #font > #family > .monospace;
- #font > .shorthand(@size, @weight, @lineHeight);
- }
-}
-
-
-// FORMS
-// --------------------------------------------------
-
-// Block level inputs
-.input-block-level {
- display: block;
- width: 100%;
- min-height: 30px; // Make inputs at least the height of their button counterpart
- .box-sizing(border-box); // Makes inputs behave like true block-level elements
-}
-
-
-
-// Mixin for form field states
-.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
- // Set the text color
- > label,
- .help-block,
- .help-inline {
- color: @textColor;
- }
- // Style inputs accordingly
- .checkbox,
- .radio,
- input,
- select,
- textarea {
- color: @textColor;
- }
- input,
- select,
- textarea {
- border-color: @borderColor;
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
- &:focus {
- border-color: darken(@borderColor, 10%);
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%));
- }
- }
- // Give a small background color for input-prepend/-append
- .input-prepend .add-on,
- .input-append .add-on {
- color: @textColor;
- background-color: @backgroundColor;
- border-color: @textColor;
- }
-}
-
-
-
-// CSS3 PROPERTIES
-// --------------------------------------------------
-
-// Border Radius
-.border-radius(@radius) {
- border-radius: @radius;
-}
-
-// Single Corner Border Radius
-.border-top-left-radius(@radius) {
- border-top-left-radius: @radius;
-}
-.border-top-right-radius(@radius) {
- border-top-right-radius: @radius;
-}
-.border-bottom-right-radius(@radius) {
- border-bottom-right-radius: @radius;
-}
-.border-bottom-left-radius(@radius) {
- border-bottom-left-radius: @radius;
-}
-
-// Single Side Border Radius
-.border-top-radius(@radius) {
- .border-top-right-radius(@radius);
- .border-top-left-radius(@radius);
-}
-.border-right-radius(@radius) {
- .border-top-right-radius(@radius);
- .border-bottom-right-radius(@radius);
-}
-.border-bottom-radius(@radius) {
- .border-bottom-right-radius(@radius);
- .border-bottom-left-radius(@radius);
-}
-.border-left-radius(@radius) {
- .border-top-left-radius(@radius);
- .border-bottom-left-radius(@radius);
-}
-
-// Drop shadows
-.box-shadow(@shadow) {
- box-shadow: @shadow;
-}
-
-// Transitions
-.transition(@transition) {
- transition: @transition;
-}
-.transition-delay(@transition-delay) {
- transition-delay: @transition-delay;
-}
-
-// Transformations
-.rotate(@degrees) {
- transform: rotate(@degrees);
-}
-.scale(@ratio) {
- transform: scale(@ratio);
-}
-.translate(@x, @y) {
- transform: translate(@x, @y);
-}
-.skew(@x, @y) {
- transform: skew(@x, @y);
-}
-.translate3d(@x, @y, @z) {
- transform: translate3d(@x, @y, @z);
-}
-
-// Backface visibility
-// Prevent browsers from flickering when using CSS 3D transforms.
-// Default value is `visible`, but can be changed to `hidden
-// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
-.backface-visibility(@visibility){
- backface-visibility: @visibility;
-}
-
-// Background clipping
-// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
-.background-clip(@clip) {
- background-clip: @clip;
-}
-
-// Background sizing
-.background-size(@size){
- background-size: @size;
-}
-
-
-// Box sizing
-.box-sizing(@boxmodel) {
- box-sizing: @boxmodel;
-}
-
-// User select
-// For selecting text on the page
-.user-select(@select) {
- user-select: @select;
-}
-
-// Resize anything
-.resizable(@direction) {
- resize: @direction; // Options: horizontal, vertical, both
- overflow: auto; // Safari fix
-}
-
-// CSS3 Content Columns
-.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
- column-count: @columnCount;
- column-gap: @columnGap;
-}
-
-// Optional hyphenation
-.hyphens(@mode: auto) {
- word-wrap: break-word;
- hyphens: @mode;
-}
-
-// Opacity
-.opacity(@opacity) {
- opacity: (@opacity / 100);
-}
-
-
-
-// BACKGROUNDS
-// --------------------------------------------------
-
-// Add an alphatransparency value to any background or border color (via Elyse Holladay)
-#translucent {
- .background(@color: @white, @alpha: 1) {
- background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
- }
- .border(@color: @white, @alpha: 1) {
- border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
- .background-clip(padding-box);
- }
-}
-
-// Gradient Bar Colors for buttons and alerts
-.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
- color: @textColor;
- text-shadow: @textShadow;
- #gradient > .vertical(@primaryColor, @secondaryColor);
- border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
- border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
-}
-
-// Gradients
-#gradient {
- .horizontal(@startColor: #555, @endColor: #333) {
- background-color: @endColor;
- background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
- background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
- background-repeat: repeat-x;
- }
- .vertical(@startColor: #555, @endColor: #333) {
- background-color: mix(@startColor, @endColor, 60%);
- background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
- background-repeat: repeat-x;
- }
- .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
- background-color: @endColor;
- background-repeat: repeat-x;
- background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
- background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
- }
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- background-color: mix(@midColor, @endColor, 80%);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
- background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
- background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
- background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
- background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
- background-repeat: no-repeat;
- }
- .radial(@innerColor: #555, @outerColor: #333) {
- background-color: @outerColor;
- background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
- background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
- background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
- background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
- background-repeat: no-repeat;
- }
- .striped(@color: #555, @angle: 45deg) {
- background-color: @color;
- background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
- background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
- background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
- background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
- background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
- }
-}
-
-
-// COMPONENT MIXINS
-// --------------------------------------------------
-
-// Horizontal dividers
-// -------------------------
-// Dividers (basically an hr) within dropdowns and nav lists
-.nav-divider(@top: #e5e5e5, @bottom: @white) {
- // IE7 needs a set width since we gave a height. Restricting just
- // to IE7 to keep the 1px left/right space in other browsers.
- // It is unclear where IE is getting the extra space that we need
- // to negative-margin away, but so it goes.
- *width: 100%;
- height: 1px;
- margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
- *margin: -5px 0 5px;
- overflow: hidden;
- background-color: @top;
- border-bottom: 1px solid @bottom;
-}
-
-// Button backgrounds
-// ------------------
-.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
- // gradientBar will set the background to a pleasing blend of these, to support IE<=9
- .gradientBar(@startColor, @endColor, @textColor, @textShadow);
- background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
-
- // in these cases the gradient won't cover the background, so we override
- &:hover, &:active, &.active, &.disabled, &[disabled] {
- color: @textColor;
- background-color: @endColor;
- *background-color: darken(@endColor, 5%);
- }
-}
-
-// Navbar vertical align
-// -------------------------
-// Vertically center elements in the navbar.
-// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
-.navbarVerticalAlign(@elementHeight) {
- margin-top: (@navbarHeight - @elementHeight) / 2;
-}
-
-
-
-// Grid System
-// -----------
-
-// Centered container element
-.container-fixed() {
- margin-right: auto;
- margin-left: auto;
- .clearfix();
-}
-
-// Table columns
-.tableColumns(@columnSpan: 1) {
- float: none; // undo default grid column styles
- width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
- margin-left: 0; // undo default grid column styles
-}
-
-// Make a Grid
-// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-.makeRow() {
- margin-left: @gridGutterWidth * -1;
- .clearfix();
-}
-.makeColumn(@columns: 1, @offset: 0) {
- float: left;
- margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-}
-
-// The Grid
-#grid {
-
- .core (@gridColumnWidth, @gridGutterWidth) {
-
- .spanX (@index) when (@index > 0) {
- .span@{index} { .span(@index); }
- .spanX(@index - 1);
- }
- .spanX (0) {}
-
- .offsetX (@index) when (@index > 0) {
- .offset@{index} { .offset(@index); }
- .offsetX(@index - 1);
- }
- .offsetX (0) {}
-
- .offset (@columns) {
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
- }
-
- .span (@columns) {
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
- }
-
- .row {
- margin-left: @gridGutterWidth * -1;
- .clearfix();
- }
-
- [class*="span"] {
- float: left;
- min-height: 1px; // prevent collapsing columns
- margin-left: @gridGutterWidth;
- }
-
- // Set the container width, and override it for fixed navbars in media queries
- .container,
- .navbar-static-top .container,
- .navbar-fixed-top .container,
- .navbar-fixed-bottom .container { .span(@gridColumns); }
-
- // generate .spanX and .offsetX
- .spanX (@gridColumns);
- .offsetX (@gridColumns);
-
- }
-
- .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
-
- .spanX (@index) when (@index > 0) {
- .span@{index} { .span(@index); }
- .spanX(@index - 1);
- }
- .spanX (0) {}
-
- .offsetX (@index) when (@index > 0) {
- .offset@{index} { .offset(@index); }
- .offset@{index}:first-child { .offsetFirstChild(@index); }
- .offsetX(@index - 1);
- }
- .offsetX (0) {}
-
- .offset (@columns) {
- margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
- *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
- }
-
- .offsetFirstChild (@columns) {
- margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
- *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
- }
-
- .span (@columns) {
- width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
- *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
- }
-
- .row-fluid {
- width: 100%;
- .clearfix();
- [class*="span"] {
- .input-block-level();
- float: left;
- margin-left: @fluidGridGutterWidth;
- *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
- }
- [class*="span"]:first-child {
- margin-left: 0;
- }
-
- // generate .spanX and .offsetX
- .spanX (@gridColumns);
- .offsetX (@gridColumns);
- }
-
- }
-
- .input(@gridColumnWidth, @gridGutterWidth) {
-
- .spanX (@index) when (@index > 0) {
- input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
- .spanX(@index - 1);
- }
- .spanX (0) {}
-
- .span(@columns) {
- width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
- }
-
- input,
- textarea,
- .uneditable-input {
- margin-left: 0; // override margin-left from core grid system
- }
-
- // Space grid-sized controls properly if multiple per line
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: @gridGutterWidth;
- }
-
- // generate .spanX
- .spanX (@gridColumns);
-
- }
-
-}
diff --git a/resources/assets/stylesheets/print.less b/resources/assets/stylesheets/print.scss
similarity index 73%
rename from resources/assets/stylesheets/print.less
rename to resources/assets/stylesheets/print.scss
index 44d9f3cbbc9..bace5fba086 100644
--- a/resources/assets/stylesheets/print.less
+++ b/resources/assets/stylesheets/print.scss
@@ -1,9 +1,9 @@
-@import "mixins.less";
-@import "less/breakpoints.less";
-@import "less/visibility.less";
-@import "less/fullcalendar-print.less";
-@import "less/resources-print.less";
-@import (reference) "less/schedule.less";
+@import "mixins";
+@import "scss/breakpoints";
+@import "scss/visibility";
+@import "scss/fullcalendar-print";
+@import "scss/resources-print";
+@import "scss/schedule" ;
/*******************************************************************************
@@ -13,10 +13,7 @@
*******************************************************************************/
@page {
- margin-top: 15mm;
- margin-bottom: 15mm;
- margin-left: 15mm;
- margin-right: 15mm;
+ margin: 15mm;
}
html, body {
@@ -46,7 +43,7 @@ img {
}
a, a:link, a:visited {
- color: #000000;
+ color: var(--black);
}
a:visited, a:link, a:hover, a:active {
@@ -79,21 +76,21 @@ h3 {
}
td.angemeldet {
- border: 1pt solid #000000;
+ border: 1pt solid var(--black);
}
td.rahmen_white {
- border: 1pt solid #000000;
- background: #FFFFFF none;
+ border: 1pt solid var(--black);
+ background: var(--white) none;
}
td.rahmen_steel {
- border: 1pt solid #000000;
+ border: 1pt solid var(--black);
background-color: #f3f5f8;
}
td.rahmen_table_row_odd {
- border: 1pt solid #000000;
+ border: 1pt solid var(--black);
background-color: #ebebeb;
}
@@ -108,7 +105,7 @@ td.rahmen_table_row_odd {
font-size: 18pt;
padding: 0 0 2pt 0;
margin: 0 0 5pt 0;
- border-bottom: 1pt solid #000000;
+ border-bottom: 1pt solid var(--black);
}
@@ -122,7 +119,7 @@ td.rahmen_table_row_odd {
text-align: center;
padding: 2pt 0 0 0;
margin: 5pt 0 0 0;
- border-top: 1pt solid #000000;
+ border-top: 1pt solid var(--black);
&:after {
content: url('../images/logos/logo2b.png');
@@ -161,14 +158,14 @@ td.rahmen_table_row_odd {
margin: 0;
padding: 0;
font-size: 11pt;
- color: #000000;
+ color: var(--black);
dl {
height: 100%;
margin: 0;
- color: black ! important;
- background-color: @white;
- border: 1px solid @light-gray-color-60;
+ color: var(--black) ! important;
+ background-color: var(--white);
+ border: 1px solid var(--light-gray-color-60);
overflow: hidden;
dd {
@@ -188,7 +185,7 @@ td.rahmen_table_row_odd {
}
div.schedule_day {
- border-left: 1pt solid black;
+ border-left: 1pt solid var(--black);
position: relative;
}
@@ -235,57 +232,60 @@ td.rahmen_table_row_odd {
}
/* aus style.css */
-h1.content, h2.content, h3.content { color:#24437c; }
+h1.content, h2.content, h3.content {
+ color: var(--base-color);
+}
+
hr.content {
- margin:0 1em;
- background-color:#555555;
- border-radius:5px;
- height:1px;
- border:none;
+ margin: 0 1em;
+ background-color: #555555;
+ border-radius: 5px;
+ height: 1px;
+ border: none;
}
table.content {
- border-collapse:collapse;
+ border-collapse: collapse;
td {
- border:thin solid #666666;
- padding:3px;
+ border: thin solid #666666;
+ padding: 3px;
}
}
div.content {
- background-color:#f3f5f8;
- clear:both;
- margin:0;
- overflow:hidden;
- padding:2px;
+ background-color: #f3f5f8;
+ clear: both;
+ margin: 0;
+ overflow: hidden;
+ padding: 2px;
}
.quote {
- background:#eeeeee none;
- border:1px solid black;
- margin-left:20px;
- margin-right:20px;
- padding:3px;
+ background: #eeeeee none;
+ border: 1px solid var(--black);
+ margin-left: 20px;
+ margin-right: 20px;
+ padding: 3px;
}
td.quote {
- border:1px solid #000000;
- font-size:8px;
+ border: 1px solid var(--black);
+ font-size: 8px;
}
a.link-intern {
- padding-left:18px;
- .background-icon('link-intern', 'clickable');
- background-repeat: no-repeat;
+ padding-left: 18px;
+ @include background-icon(intern, clickable);
+ background-repeat: no-repeat;
}
a.link-extern {
- padding-left:18px;
- .background-icon('link-extern', 'clickable');
- background-repeat: no-repeat;
+ padding-left: 18px;
+ @include background-icon(link-extern, clickable);
+ background-repeat: no-repeat;
}
.formatted-content {
- display: inline;
+ display: inline;
}
diff --git a/resources/assets/stylesheets/scss/buttons.scss b/resources/assets/stylesheets/scss/buttons.scss
index b7235f7d0ca..6c5d0700180 100644
--- a/resources/assets/stylesheets/scss/buttons.scss
+++ b/resources/assets/stylesheets/scss/buttons.scss
@@ -1,7 +1,7 @@
@import '../mixins';
@mixin button() {
- background: white;
+ background: var(--white);
border: 1px solid var(--base-color);
border-radius: 0;
box-sizing: border-box;
@@ -25,7 +25,7 @@
&:hover,
&:active {
background: var(--base-color);
- color: white;
+ color: var(--white);
}
&.disabled,
@@ -136,24 +136,35 @@ button.button {
}
}
+button,
+.button {
+ &.as-link,
+ &.styleless,
+ &.undecorated {
+ background-color: unset;
+ border: 0;
+ }
-button.styleless {
- background-color: unset;
- border: 0;
-}
-
-button.as-link {
- border: 0;
- background-color: transparent;
- color: var(--base-color);
- cursor: pointer;
- padding: 0;
- &:hover,
- &:active {
- color: var(--active-color);
+ &.as-link,
+ &.undecorated {
+ cursor: pointer;
+ margin: 0;
+ padding: 0;
}
- @media not prefers-reduced-motion {
- transition: color $transition-duration;
+ &.as-link,
+ &.undecorated[formaction] {
+ color: var(--base-color);
+ transition: color var(--transition-duration);
+
+ &:hover,
+ &:active {
+ color: var(--active-color);
+ text-decoration: none;
+ }
+
+ &[disabled] {
+ pointer-events: none;
+ }
}
}
diff --git a/resources/assets/stylesheets/scss/files.scss b/resources/assets/stylesheets/scss/files.scss
index 78963197baf..7808f15b7f8 100644
--- a/resources/assets/stylesheets/scss/files.scss
+++ b/resources/assets/stylesheets/scss/files.scss
@@ -1,3 +1,483 @@
+.file_uploader {
+ display: none;
+}
+.file_upload_window {
+ .filenames li {
+ display: flex;
+ justify-content: space-between;
+
+ span {
+ flex: 1;
+ &.upload-progress {
+ flex: 0;
+ }
+ }
+
+ &:only-child .upload-progress {
+ display: none;
+ }
+ }
+}
+.uploadbar {
+ position: relative;
+
+ img {
+ margin: 10px;
+ z-index: 1;
+ }
+
+ &.uploadbar-outer {
+ border: var(--base-color) solid 1px;
+ }
+ &.uploadbar-inner {
+ position: absolute;
+ top: 0;
+ right: 100%;
+ bottom: 0;
+ left: 0;
+ background-color: var(--base-color);
+ overflow: hidden;
+ white-space: nowrap;
+
+ display: flex;
+ justify-content: space-between;
+
+ transition: right var(--transition-duration);
+
+ img {
+ background-color: var(--base-color);
+ flex: 0;
+ outline: 10px solid var(--base-color);
+ }
+ .ufo {
+ animation: ufoflight 1.5s linear infinite;
+ z-index: 0;
+ }
+ }
+
+ .upload-progress {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ mix-blend-mode: luminosity;
+
+ color: invert($base-color);
+ font-size: large;
+ }
+}
+
+@keyframes ufoflight {
+ 25% {
+ transform: translateX(-2px) translateY(4px);
+ }
+ 50% {
+ transform: translateX(-0px) translateY(8px);
+ }
+ 75% {
+ transform: translateX(-2px) translateY(4px);
+ }
+ 100% {
+ transform: translateX(0px) translateY(0px);
+ }
+}
+
+/* for file/edit view and file/new_edit_folder_form view and other views that offer a selection via tiles: */
+div.file_select_possibilities,
+.folder_type_select_possibilities,
+.square-item-container {
+ $width: 100px;
+ $height: 100px;
+
+ display: flex;
+ flex-direction: column;
+ > div {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: stretch;
+ > a,
+ > button,
+ > div.clickable {
+ cursor: pointer;
+ background-color: transparent;
+ margin: 10px;
+ border: thin solid var(--content-color-20);
+ padding: 10px;
+ width: $width;
+ min-width: $width;
+ max-width: $width;
+ height: $height;
+ min-height: $height;
+ max-height: $height;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+ text-align: center;
+ > img {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ }
+
+ > .important-item {
+ min-width: calc(100% - 1.5em);
+ background-color: var(--content-color-20);
+ border-color: var(--base-color-60);
+ display: flex;
+ flex-direction: row;
+ height: initial;
+ max-height: initial;
+
+ > .icon {
+ width: 10em;
+ }
+
+ > .description {
+ width: 100%;
+ text-align: left;
+ margin-left: 1em;
+ color: var(--black);
+ }
+ }
+ }
+
+ > button {
+ box-sizing: content-box;
+ cursor: pointer;
+ color: var(--yellow);
+ }
+
+
+ > label:not(.undecorated) {
+ display: flex;
+ justify-content: center;
+ font-size:0.7em;
+ cursor: pointer;
+
+ img {
+ width: 40%;
+ height: 40%;
+ display: block;
+ }
+ }
+
+
+ /* for file/edit view only: */
+
+ /* for file/edit view only: content_terms_of_use_id, oer_upload */
+ /* for file/new_edit_folder_form view only: folder_type */
+
+ input[name=content_terms_of_use_id],
+ input[name=oer_upload],
+ input[name=folder_type] {
+ display: none;
+
+ &:checked + label {
+ background-color: var(--brand-color-darker);
+ color: var(--contrast-content-white);
+
+ img {
+ filter: invert(100%) brightness(200%);
+ }
+ }
+ }
+
+}
+
+div.file_select_possibilities.content_terms_of_use_icons {
+ justify-content: left;
+}
+
+
+#file_edit_window,
+#file_details_window,
+#oer_file_details {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ align-content: flex-start;
+}
+
+#oer_file_details {
+ max-width: 555px;
+ flex-wrap: wrap;
+}
+
+#preview_container,
+#oer_aside {
+ width: 270px;
+}
+
+#oer_title {
+ max-height: 34px;
+ max-width: 225px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ hyphens: auto;
+ word-break: break-all;
+ text-indent: initial;
+}
+
+#oer_preview_image {
+ width: 100%;
+ display: flex;
+ height: 170px;
+ align-items: center;
+
+ img {
+ width: 100%;
+ }
+}
+
+#file_suggest_oer {
+ margin-top: 2%;
+
+ .suggestion_text {
+ font-size: 2em;
+ font-weight: 700;
+ margin-bottom: 0;
+ }
+
+ #note {
+ margin: 0 0 30px;
+ }
+}
+
+
+
+table.documents tfoot {
+ td.sticky {
+ position: sticky;
+ bottom: 0;
+ }
+
+ .footer-items {
+ display: flex;
+ flex-direction: row;
+ & > .bulk-buttons {
+ flex-grow: 1;
+ }
+ }
+}
+
+
+/* for file/edit and folder/edit only: */
+@include media-breakpoint-small-down() {
+ /* mobile view: */
+ #file_aside,
+ #folder_aside {
+ display: block;
+
+ .file-icon,
+ .folder-icon {
+ img {
+ width: 30%;
+ height: 100%;
+ max-height: 10em;
+ margin-right: 1em;
+ }
+ }
+
+ h3 {
+ font-size: 140%;
+ padding-top: 1em;
+ }
+
+ dl {
+ display: table;
+ }
+ }
+
+ #file_management_forms {
+ display: table;
+ width: 100%;
+ }
+
+ .file_preview {
+ max-width: 100%;
+ }
+
+ #file_edit_window,
+ #file_details_window {
+ flex-direction: column;
+ }
+
+ #file_aside,
+ #folder_aside {
+ width: 100%;
+ max-width: none;
+ }
+
+ #file_management_forms {
+ width: 100%;
+ max-width: none;
+ }
+
+ div#preview_container {
+ .file_preview {
+ max-width: 100%;
+ }
+
+ iframe.file_preview {
+ width: 100%;
+ height: 20em;
+ }
+ }
+}
+
+@include media-breakpoint-small-up() {
+ /* desktop view: */
+
+ #file_aside,
+ #folder_aside {
+ width: calc(30% - 10px);
+ max-width: calc(30% - 10px);
+
+ .file-icon,
+ .folder-icon {
+ img {
+ margin-left: 20%;
+ width: 60%;
+ max-height: 16em;
+ height: 100%;
+ }
+ }
+
+ h3 {
+ font-size: 1.1em;
+ }
+ }
+
+
+ #file_management_forms,
+ #preview_container:not(.oercampus_editmaterial) {
+ width: calc(70% - 10px);
+ max-width: calc(70% - 10px);
+
+ .file_preview {
+ max-width: 100%;
+ }
+
+ iframe.file_preview {
+ width: 100%;
+ height: 40em;
+ }
+ }
+
+}
+
+form.default {
+ #select_oer_upload_info {
+ padding-top: 15px;
+ padding-bottom: 15px;
+ }
+
+ fieldset.select_terms_of_use,
+ fieldset.select_oer_upload {
+ > legend {
+ margin: 0;
+ width: 100%;
+ }
+ border: none;
+ padding: 0;
+ margin-left: 0;
+ margin-right: 0;
+
+ > input[type=radio] {
+ opacity: 0;
+ position: absolute;
+ &:focus + label {
+ outline: auto;
+ }
+ }
+ > label {
+ cursor: pointer;
+ border: 1px solid var(--content-color-40);
+ transition: background-color var(--transition-duration);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 6px 6px 2px;
+ margin-bottom: 0;
+ border-top: none;
+ > .text {
+ width: 100%;
+ margin-left: 10px;
+ }
+ > .arrow {
+ margin-right: 5px;
+ }
+ > .check {
+ display: none;
+ }
+ }
+ > label:first-of-type {
+ border-top: 1px solid var(--content-color-40);
+ }
+ > div {
+ border: 1px solid var(--content-color-40);
+ border-top: none;
+ display: none;
+ padding: 10px;
+
+ }
+ > input[type=radio]:checked + label {
+ background-color: var(--content-color-20);
+ transition: background-color var(--transition-duration);
+ > .arrow {
+ display: none;
+ }
+ > .check {
+ display: inline-block;
+ }
+ }
+ > input[type=radio]:checked + label + div {
+ display: block;
+ .description {
+ animation-duration: 400ms;
+ animation-name: terms_of_use_fadein;
+ }
+ }
+ }
+
+}
+
+@keyframes terms_of_use_fadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+table.documents {
+ tr:target {
+ background-color: var(--activity-color-20);
+ }
+}
+
+
+/* Rules for the library search dialog: */
+
+h2.search-result-info {
+ font-weight: normal;
+ font-size: 1.4em;
+ color: var(--base-gray);
+ border-bottom: none;
+ margin-top: 0;
+}
+
+
table.documents tfoot td div.pagination-wrapper {
float: right;
}
diff --git a/resources/assets/stylesheets/less/font-face-lato.less b/resources/assets/stylesheets/scss/font-face-lato.scss
similarity index 100%
rename from resources/assets/stylesheets/less/font-face-lato.less
rename to resources/assets/stylesheets/scss/font-face-lato.scss
diff --git a/resources/assets/stylesheets/less/fullcalendar-print.less b/resources/assets/stylesheets/scss/fullcalendar-print.scss
similarity index 93%
rename from resources/assets/stylesheets/less/fullcalendar-print.less
rename to resources/assets/stylesheets/scss/fullcalendar-print.scss
index f6e690b0fdc..9e52dbd242f 100644
--- a/resources/assets/stylesheets/less/fullcalendar-print.less
+++ b/resources/assets/stylesheets/scss/fullcalendar-print.scss
@@ -1,11 +1,11 @@
a.fc-event {
border-radius: 0;
- color: black;
+ color: var(--black);
.fc-time {
text-decoration: underline;
- color: black;
+ color: var(--black);
}
}
@@ -60,7 +60,7 @@ div.fc-view-container {
display: block;
width: 100%;
margin-top: 2em;
- margin-right: 0em;
+ margin-right: 0;
}
}
@@ -89,7 +89,7 @@ div.fc-content-skeleton {
div.fc-time-grid a.fc-event {
position: absolute !important;
- margin: 0px 0px 1px 0px !important;
+ margin: 0 0 1px 0 !important;
img {
filter: brightness(0);
@@ -103,7 +103,6 @@ a.fc-timeline-event {
}
.fc-slats table tr {
- line-height: 1.7em;
line-height: 22px;
}
diff --git a/resources/assets/stylesheets/scss/jquery-ui/custom.scss b/resources/assets/stylesheets/scss/jquery-ui/custom.scss
new file mode 100644
index 00000000000..025c0ffbba7
--- /dev/null
+++ b/resources/assets/stylesheets/scss/jquery-ui/custom.scss
@@ -0,0 +1,957 @@
+/*!
+ * jQuery UI CSS Framework 1.12.0
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://api.jqueryui.com/category/theming/
+ *
+ * To view and modify this theme, visit http://jqueryui.com/themeroller/?bgShadowXPos=&bgOverlayXPos=&bgErrorXPos=&bgHighlightXPos=&bgContentXPos=&bgHeaderXPos=&bgActiveXPos=&bgHoverXPos=&bgDefaultXPos=&bgShadowYPos=&bgOverlayYPos=&bgErrorYPos=&bgHighlightYPos=&bgContentYPos=&bgHeaderYPos=&bgActiveYPos=&bgHoverYPos=&bgDefaultYPos=&bgShadowRepeat=&bgOverlayRepeat=&bgErrorRepeat=&bgHighlightRepeat=&bgContentRepeat=&bgHeaderRepeat=&bgActiveRepeat=&bgHoverRepeat=&bgDefaultRepeat=&iconsHover=url(%22images%2Fui-icons_555555_256x240.png%22)&iconsHighlight=url(%22images%2Fui-icons_777620_256x240.png%22)&iconsHeader=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsError=url(%22images%2Fui-icons_cc0000_256x240.png%22)&iconsDefault=url(%22images%2Fui-icons_777777_256x240.png%22)&iconsContent=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsActive=url(%22images%2Fui-icons_ffffff_256x240.png%22)&bgImgUrlShadow=&bgImgUrlOverlay=&bgImgUrlHover=&bgImgUrlHighlight=&bgImgUrlHeader=&bgImgUrlError=&bgImgUrlDefault=&bgImgUrlContent=&bgImgUrlActive=&opacityFilterShadow=Alpha(Opacity%3D30)&opacityFilterOverlay=Alpha(Opacity%3D30)&opacityShadowPerc=30&opacityOverlayPerc=30&iconColorHover=%23555555&iconColorHighlight=%23777620&iconColorHeader=%23444444&iconColorError=%23cc0000&iconColorDefault=%23777777&iconColorContent=%23444444&iconColorActive=%23ffffff&bgImgOpacityShadow=0&bgImgOpacityOverlay=0&bgImgOpacityError=95&bgImgOpacityHighlight=55&bgImgOpacityContent=75&bgImgOpacityHeader=75&bgImgOpacityActive=65&bgImgOpacityHover=75&bgImgOpacityDefault=75&bgTextureShadow=flat&bgTextureOverlay=flat&bgTextureError=flat&bgTextureHighlight=flat&bgTextureContent=flat&bgTextureHeader=flat&bgTextureActive=flat&bgTextureHover=flat&bgTextureDefault=flat&cornerRadius=3px&fwDefault=normal&ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&cornerRadiusShadow=8px&thicknessShadow=5px&offsetLeftShadow=0px&offsetTopShadow=0px&opacityShadow=.3&bgColorShadow=%23666666&opacityOverlay=.3&bgColorOverlay=%23aaaaaa&fcError=%235f3f3f&borderColorError=%23f1a899&bgColorError=%23fddfdf&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgColorHighlight=%23fffa90&fcContent=%23333333&borderColorContent=%23dddddd&bgColorContent=%23ffffff&fcHeader=%23333333&borderColorHeader=%23dddddd&bgColorHeader=%23e9e9e9&fcActive=%23ffffff&borderColorActive=%23003eff&bgColorActive=%23007fff&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgColorHover=%23ededed&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgColorDefault=%23f6f6f6
+ */
+
+
+/* Component containers
+----------------------------------*/
+.ui-widget {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 1em;
+}
+
+.ui-widget .ui-widget {
+ font-size: 1em;
+}
+
+.ui-widget input,
+.ui-widget select,
+.ui-widget textarea,
+.ui-widget button {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 1em;
+}
+
+.ui-widget.ui-widget-content {
+ border: 1px solid #c5c5c5;
+}
+
+.ui-widget-content {
+ border: 1px solid #dddddd;
+ background: var(--white);
+ color: #333333;
+}
+
+.ui-widget-content a {
+ color: #333333;
+}
+
+.ui-widget-header {
+ border: 1px solid #dddddd;
+ background: #e9e9e9;
+ color: #333333;
+ font-weight: bold;
+}
+
+.ui-widget-header a {
+ color: #333333;
+}
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default,
+.ui-button,
+ /* We use html here because we need a greater specificity to make sure disabled
+ works properly when clicked or hovered */
+html .ui-button.ui-state-disabled:hover,
+html .ui-button.ui-state-disabled:active {
+ border: 1px solid #c5c5c5;
+ background: #f6f6f6;
+ font-weight: normal;
+ color: #454545;
+}
+
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited,
+a.ui-button,
+a:link.ui-button,
+a:visited.ui-button,
+.ui-button {
+ color: #454545;
+ text-decoration: none;
+}
+
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus,
+.ui-button:hover,
+.ui-button:focus {
+ border: 1px solid #cccccc;
+ background: #ededed;
+ font-weight: normal;
+ color: #2b2b2b;
+}
+
+.ui-state-hover a,
+.ui-state-hover a:hover,
+.ui-state-hover a:link,
+.ui-state-hover a:visited,
+.ui-state-focus a,
+.ui-state-focus a:hover,
+.ui-state-focus a:link,
+.ui-state-focus a:visited,
+a.ui-button:hover,
+a.ui-button:focus {
+ color: #2b2b2b;
+ text-decoration: none;
+}
+
+.ui-visual-focus {
+ box-shadow: 0 0 3px 1px rgb(94, 158, 214);
+}
+
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active,
+a.ui-button:active,
+.ui-button:active,
+.ui-button.ui-state-active:hover {
+ border: 1px solid #003eff;
+ background: #007fff;
+ font-weight: normal;
+ color: #ffffff;
+}
+
+.ui-icon-background,
+.ui-state-active .ui-icon-background {
+ border: #003eff;
+ background-color: #ffffff;
+}
+
+.ui-state-active a,
+.ui-state-active a:link,
+.ui-state-active a:visited {
+ color: #ffffff;
+ text-decoration: none;
+}
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight,
+.ui-widget-content .ui-state-highlight,
+.ui-widget-header .ui-state-highlight {
+ border: 1px solid #dad55e;
+ background: #fffa90;
+ color: #777620;
+}
+
+.ui-state-checked {
+ border: 1px solid #dad55e;
+ background: #fffa90;
+}
+
+.ui-state-highlight a,
+.ui-widget-content .ui-state-highlight a,
+.ui-widget-header .ui-state-highlight a {
+ color: #777620;
+}
+
+.ui-state-error,
+.ui-widget-content .ui-state-error,
+.ui-widget-header .ui-state-error {
+ border: 1px solid #f1a899;
+ background: #fddfdf;
+ color: #5f3f3f;
+}
+
+.ui-state-error a,
+.ui-widget-content .ui-state-error a,
+.ui-widget-header .ui-state-error a {
+ color: var(--brown);
+}
+
+.ui-state-error-text,
+.ui-widget-content .ui-state-error-text,
+.ui-widget-header .ui-state-error-text {
+ color: var(--brown);
+}
+
+.ui-priority-primary,
+.ui-widget-content .ui-priority-primary,
+.ui-widget-header .ui-priority-primary {
+ font-weight: bold;
+}
+
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary,
+.ui-widget-header .ui-priority-secondary {
+ opacity: .7;
+ font-weight: normal;
+}
+
+.ui-state-disabled,
+.ui-widget-content .ui-state-disabled,
+.ui-widget-header .ui-state-disabled {
+ opacity: .35;
+ background-image: none;
+}
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+ width: 16px;
+ height: 16px;
+}
+
+
+/* positioning */
+.ui-icon-blank {
+ background-position: 16px 16px;
+}
+
+.ui-icon-caret-1-n {
+ background-position: 0 0;
+}
+
+.ui-icon-caret-1-ne {
+ background-position: -16px 0;
+}
+
+.ui-icon-caret-1-e {
+ background-position: -32px 0;
+}
+
+.ui-icon-caret-1-se {
+ background-position: -48px 0;
+}
+
+.ui-icon-caret-1-s {
+ background-position: -65px 0;
+}
+
+.ui-icon-caret-1-sw {
+ background-position: -80px 0;
+}
+
+.ui-icon-caret-1-w {
+ background-position: -96px 0;
+}
+
+.ui-icon-caret-1-nw {
+ background-position: -112px 0;
+}
+
+.ui-icon-caret-2-n-s {
+ background-position: -128px 0;
+}
+
+.ui-icon-caret-2-e-w {
+ background-position: -144px 0;
+}
+
+.ui-icon-triangle-1-n {
+ background-position: 0 -16px;
+}
+
+.ui-icon-triangle-1-ne {
+ background-position: -16px -16px;
+}
+
+.ui-icon-triangle-1-e {
+ background-position: -32px -16px;
+}
+
+.ui-icon-triangle-1-se {
+ background-position: -48px -16px;
+}
+
+.ui-icon-triangle-1-s {
+ background-position: -65px -16px;
+}
+
+.ui-icon-triangle-1-sw {
+ background-position: -80px -16px;
+}
+
+.ui-icon-triangle-1-w {
+ background-position: -96px -16px;
+}
+
+.ui-icon-triangle-1-nw {
+ background-position: -112px -16px;
+}
+
+.ui-icon-triangle-2-n-s {
+ background-position: -128px -16px;
+}
+
+.ui-icon-triangle-2-e-w {
+ background-position: -144px -16px;
+}
+
+.ui-icon-arrow-1-n {
+ background-position: 0 -32px;
+}
+
+.ui-icon-arrow-1-ne {
+ background-position: -16px -32px;
+}
+
+.ui-icon-arrow-1-e {
+ background-position: -32px -32px;
+}
+
+.ui-icon-arrow-1-se {
+ background-position: -48px -32px;
+}
+
+.ui-icon-arrow-1-s {
+ background-position: -65px -32px;
+}
+
+.ui-icon-arrow-1-sw {
+ background-position: -80px -32px;
+}
+
+.ui-icon-arrow-1-w {
+ background-position: -96px -32px;
+}
+
+.ui-icon-arrow-1-nw {
+ background-position: -112px -32px;
+}
+
+.ui-icon-arrow-2-n-s {
+ background-position: -128px -32px;
+}
+
+.ui-icon-arrow-2-ne-sw {
+ background-position: -144px -32px;
+}
+
+.ui-icon-arrow-2-e-w {
+ background-position: -160px -32px;
+}
+
+.ui-icon-arrow-2-se-nw {
+ background-position: -176px -32px;
+}
+
+.ui-icon-arrowstop-1-n {
+ background-position: -192px -32px;
+}
+
+.ui-icon-arrowstop-1-e {
+ background-position: -208px -32px;
+}
+
+.ui-icon-arrowstop-1-s {
+ background-position: -224px -32px;
+}
+
+.ui-icon-arrowstop-1-w {
+ background-position: -240px -32px;
+}
+
+.ui-icon-arrowthick-1-n {
+ background-position: 1px -48px;
+}
+
+.ui-icon-arrowthick-1-ne {
+ background-position: -16px -48px;
+}
+
+.ui-icon-arrowthick-1-e {
+ background-position: -32px -48px;
+}
+
+.ui-icon-arrowthick-1-se {
+ background-position: -48px -48px;
+}
+
+.ui-icon-arrowthick-1-s {
+ background-position: -64px -48px;
+}
+
+.ui-icon-arrowthick-1-sw {
+ background-position: -80px -48px;
+}
+
+.ui-icon-arrowthick-1-w {
+ background-position: -96px -48px;
+}
+
+.ui-icon-arrowthick-1-nw {
+ background-position: -112px -48px;
+}
+
+.ui-icon-arrowthick-2-n-s {
+ background-position: -128px -48px;
+}
+
+.ui-icon-arrowthick-2-ne-sw {
+ background-position: -144px -48px;
+}
+
+.ui-icon-arrowthick-2-e-w {
+ background-position: -160px -48px;
+}
+
+.ui-icon-arrowthick-2-se-nw {
+ background-position: -176px -48px;
+}
+
+.ui-icon-arrowthickstop-1-n {
+ background-position: -192px -48px;
+}
+
+.ui-icon-arrowthickstop-1-e {
+ background-position: -208px -48px;
+}
+
+.ui-icon-arrowthickstop-1-s {
+ background-position: -224px -48px;
+}
+
+.ui-icon-arrowthickstop-1-w {
+ background-position: -240px -48px;
+}
+
+.ui-icon-arrowreturnthick-1-w {
+ background-position: 0 -64px;
+}
+
+.ui-icon-arrowreturnthick-1-n {
+ background-position: -16px -64px;
+}
+
+.ui-icon-arrowreturnthick-1-e {
+ background-position: -32px -64px;
+}
+
+.ui-icon-arrowreturnthick-1-s {
+ background-position: -48px -64px;
+}
+
+.ui-icon-arrowreturn-1-w {
+ background-position: -64px -64px;
+}
+
+.ui-icon-arrowreturn-1-n {
+ background-position: -80px -64px;
+}
+
+.ui-icon-arrowreturn-1-e {
+ background-position: -96px -64px;
+}
+
+.ui-icon-arrowreturn-1-s {
+ background-position: -112px -64px;
+}
+
+.ui-icon-arrowrefresh-1-w {
+ background-position: -128px -64px;
+}
+
+.ui-icon-arrowrefresh-1-n {
+ background-position: -144px -64px;
+}
+
+.ui-icon-arrowrefresh-1-e {
+ background-position: -160px -64px;
+}
+
+.ui-icon-arrowrefresh-1-s {
+ background-position: -176px -64px;
+}
+
+.ui-icon-arrow-4 {
+ background-position: 0 -80px;
+}
+
+.ui-icon-arrow-4-diag {
+ background-position: -16px -80px;
+}
+
+.ui-icon-extlink {
+ background-position: -32px -80px;
+}
+
+.ui-icon-newwin {
+ background-position: -48px -80px;
+}
+
+.ui-icon-refresh {
+ background-position: -64px -80px;
+}
+
+.ui-icon-shuffle {
+ background-position: -80px -80px;
+}
+
+.ui-icon-transfer-e-w {
+ background-position: -96px -80px;
+}
+
+.ui-icon-transferthick-e-w {
+ background-position: -112px -80px;
+}
+
+.ui-icon-folder-collapsed {
+ background-position: 0 -96px;
+}
+
+.ui-icon-folder-open {
+ background-position: -16px -96px;
+}
+
+.ui-icon-document {
+ background-position: -32px -96px;
+}
+
+.ui-icon-document-b {
+ background-position: -48px -96px;
+}
+
+.ui-icon-note {
+ background-position: -64px -96px;
+}
+
+.ui-icon-mail-closed {
+ background-position: -80px -96px;
+}
+
+.ui-icon-mail-open {
+ background-position: -96px -96px;
+}
+
+.ui-icon-suitcase {
+ background-position: -112px -96px;
+}
+
+.ui-icon-comment {
+ background-position: -128px -96px;
+}
+
+.ui-icon-person {
+ background-position: -144px -96px;
+}
+
+.ui-icon-print {
+ background-position: -160px -96px;
+}
+
+.ui-icon-trash {
+ background-position: -176px -96px;
+}
+
+.ui-icon-locked {
+ background-position: -192px -96px;
+}
+
+.ui-icon-unlocked {
+ background-position: -208px -96px;
+}
+
+.ui-icon-bookmark {
+ background-position: -224px -96px;
+}
+
+.ui-icon-tag {
+ background-position: -240px -96px;
+}
+
+.ui-icon-home {
+ background-position: 0 -112px;
+}
+
+.ui-icon-flag {
+ background-position: -16px -112px;
+}
+
+.ui-icon-calendar {
+ background-position: -32px -112px;
+}
+
+.ui-icon-cart {
+ background-position: -48px -112px;
+}
+
+.ui-icon-pencil {
+ background-position: -64px -112px;
+}
+
+.ui-icon-clock {
+ background-position: -80px -112px;
+}
+
+.ui-icon-disk {
+ background-position: -96px -112px;
+}
+
+.ui-icon-calculator {
+ background-position: -112px -112px;
+}
+
+.ui-icon-zoomin {
+ background-position: -128px -112px;
+}
+
+.ui-icon-zoomout {
+ background-position: -144px -112px;
+}
+
+.ui-icon-search {
+ background-position: -160px -112px;
+}
+
+.ui-icon-wrench {
+ background-position: -176px -112px;
+}
+
+.ui-icon-gear {
+ background-position: -192px -112px;
+}
+
+.ui-icon-heart {
+ background-position: -208px -112px;
+}
+
+.ui-icon-star {
+ background-position: -224px -112px;
+}
+
+.ui-icon-link {
+ background-position: -240px -112px;
+}
+
+.ui-icon-cancel {
+ background-position: 0 -128px;
+}
+
+.ui-icon-plus {
+ background-position: -16px -128px;
+}
+
+.ui-icon-plusthick {
+ background-position: -32px -128px;
+}
+
+.ui-icon-minus {
+ background-position: -48px -128px;
+}
+
+.ui-icon-minusthick {
+ background-position: -64px -128px;
+}
+
+.ui-icon-close {
+ background-position: -80px -128px;
+}
+
+.ui-icon-closethick {
+ background-position: -96px -128px;
+}
+
+.ui-icon-key {
+ background-position: -112px -128px;
+}
+
+.ui-icon-lightbulb {
+ background-position: -128px -128px;
+}
+
+.ui-icon-scissors {
+ background-position: -144px -128px;
+}
+
+.ui-icon-clipboard {
+ background-position: -160px -128px;
+}
+
+.ui-icon-copy {
+ background-position: -176px -128px;
+}
+
+.ui-icon-contact {
+ background-position: -192px -128px;
+}
+
+.ui-icon-image {
+ background-position: -208px -128px;
+}
+
+.ui-icon-video {
+ background-position: -224px -128px;
+}
+
+.ui-icon-script {
+ background-position: -240px -128px;
+}
+
+.ui-icon-alert {
+ background-position: 0 -144px;
+}
+
+.ui-icon-info {
+ background-position: -16px -144px;
+}
+
+.ui-icon-notice {
+ background-position: -32px -144px;
+}
+
+.ui-icon-help {
+ background-position: -48px -144px;
+}
+
+.ui-icon-check {
+ background-position: -64px -144px;
+}
+
+.ui-icon-bullet {
+ background-position: -80px -144px;
+}
+
+.ui-icon-radio-on {
+ background-position: -96px -144px;
+}
+
+.ui-icon-radio-off {
+ background-position: -112px -144px;
+}
+
+.ui-icon-pin-w {
+ background-position: -128px -144px;
+}
+
+.ui-icon-pin-s {
+ background-position: -144px -144px;
+}
+
+.ui-icon-play {
+ background-position: 0 -160px;
+}
+
+.ui-icon-pause {
+ background-position: -16px -160px;
+}
+
+.ui-icon-seek-next {
+ background-position: -32px -160px;
+}
+
+.ui-icon-seek-prev {
+ background-position: -48px -160px;
+}
+
+.ui-icon-seek-end {
+ background-position: -64px -160px;
+}
+
+.ui-icon-seek-start {
+ background-position: -80px -160px;
+}
+
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first {
+ background-position: -80px -160px;
+}
+
+.ui-icon-stop {
+ background-position: -96px -160px;
+}
+
+.ui-icon-eject {
+ background-position: -112px -160px;
+}
+
+.ui-icon-volume-off {
+ background-position: -128px -160px;
+}
+
+.ui-icon-volume-on {
+ background-position: -144px -160px;
+}
+
+.ui-icon-power {
+ background-position: 0 -176px;
+}
+
+.ui-icon-signal-diag {
+ background-position: -16px -176px;
+}
+
+.ui-icon-signal {
+ background-position: -32px -176px;
+}
+
+.ui-icon-battery-0 {
+ background-position: -48px -176px;
+}
+
+.ui-icon-battery-1 {
+ background-position: -64px -176px;
+}
+
+.ui-icon-battery-2 {
+ background-position: -80px -176px;
+}
+
+.ui-icon-battery-3 {
+ background-position: -96px -176px;
+}
+
+.ui-icon-circle-plus {
+ background-position: 0 -192px;
+}
+
+.ui-icon-circle-minus {
+ background-position: -16px -192px;
+}
+
+.ui-icon-circle-close {
+ background-position: -32px -192px;
+}
+
+.ui-icon-circle-triangle-e {
+ background-position: -48px -192px;
+}
+
+.ui-icon-circle-triangle-s {
+ background-position: -64px -192px;
+}
+
+.ui-icon-circle-triangle-w {
+ background-position: -80px -192px;
+}
+
+.ui-icon-circle-triangle-n {
+ background-position: -96px -192px;
+}
+
+.ui-icon-circle-arrow-e {
+ background-position: -112px -192px;
+}
+
+.ui-icon-circle-arrow-s {
+ background-position: -128px -192px;
+}
+
+.ui-icon-circle-arrow-w {
+ background-position: -144px -192px;
+}
+
+.ui-icon-circle-arrow-n {
+ background-position: -160px -192px;
+}
+
+.ui-icon-circle-zoomin {
+ background-position: -176px -192px;
+}
+
+.ui-icon-circle-zoomout {
+ background-position: -192px -192px;
+}
+
+.ui-icon-circle-check {
+ background-position: -208px -192px;
+}
+
+.ui-icon-circlesmall-plus {
+ background-position: 0 -208px;
+}
+
+.ui-icon-circlesmall-minus {
+ background-position: -16px -208px;
+}
+
+.ui-icon-circlesmall-close {
+ background-position: -32px -208px;
+}
+
+.ui-icon-squaresmall-plus {
+ background-position: -48px -208px;
+}
+
+.ui-icon-squaresmall-minus {
+ background-position: -64px -208px;
+}
+
+.ui-icon-squaresmall-close {
+ background-position: -80px -208px;
+}
+
+.ui-icon-grip-dotted-vertical {
+ background-position: 0 -224px;
+}
+
+.ui-icon-grip-dotted-horizontal {
+ background-position: -16px -224px;
+}
+
+.ui-icon-grip-solid-vertical {
+ background-position: -32px -224px;
+}
+
+.ui-icon-grip-solid-horizontal {
+ background-position: -48px -224px;
+}
+
+.ui-icon-gripsmall-diagonal-se {
+ background-position: -64px -224px;
+}
+
+.ui-icon-grip-diagonal-se {
+ background-position: -80px -224px;
+}
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-left,
+.ui-corner-tl {
+ border-top-left-radius: 3px;
+}
+
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-right,
+.ui-corner-tr {
+ border-top-right-radius: 3px;
+}
+
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-left,
+.ui-corner-bl {
+ border-bottom-left-radius: 3px;
+}
+
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-right,
+.ui-corner-br {
+ border-bottom-right-radius: 3px;
+}
+
+/* Overlays */
+.ui-widget-overlay {
+ background: #aaaaaa;
+ opacity: .003;
+}
+
+.ui-widget-shadow {
+ box-shadow: 0 0 5px #666666;
+}
diff --git a/resources/assets/stylesheets/less/jquery-ui/studip.less b/resources/assets/stylesheets/scss/jquery-ui/studip.scss
similarity index 92%
rename from resources/assets/stylesheets/less/jquery-ui/studip.less
rename to resources/assets/stylesheets/scss/jquery-ui/studip.scss
index 1bd0fbf4a6e..1f1a0a69c02 100644
--- a/resources/assets/stylesheets/less/jquery-ui/studip.less
+++ b/resources/assets/stylesheets/scss/jquery-ui/studip.scss
@@ -1,5 +1,5 @@
.ui-front {
- z-index: @z-index;
+ z-index: $z-index;
}
.ui-widget_start {
font-family: Arial, Helvetica, sans-serif;
@@ -37,13 +37,13 @@
}
.ui-widgetContainer {
background-image: none;
- color: white;
+ color: var(--white);
padding: 2%;
}
.ui-widget_head {
background-color: var(--brand-color-lighter);
- color: white;
+ color: var(--white);
font-size: 1.3em;
line-height: 30px;
text-align: center;
@@ -81,7 +81,7 @@
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
background-color: var(--brand-color-light);
- color: white;
+ color: var(--white);
}
.ui-accordion .ui-accordion-header {
@@ -146,7 +146,7 @@
/* --- textarea resizer ----------------------------------------------------- */
textarea.ui-resizable-handle.ui-resizable-s {
- background: var(--dark-gray-color-10) url("@{image-path}/vendor/handle_background.png") no-repeat center;
+ background: var(--dark-gray-color-10) url("#{$image-path}/vendor/handle_background.png") no-repeat center;
bottom: 0;
cursor: s-resize;
height: 12px;
@@ -177,7 +177,7 @@ textarea.ui-resizable-handle.ui-resizable-s {
.has-date-picker,
[data-datetime-picker],
.has-datetime-picker {
- .background-icon('schedule', 'clickable', 20);
+ @include background-icon(schedule, clickable, 20px);
background-position: right 3px center;
background-repeat: no-repeat;
min-width: 12ex;
@@ -189,7 +189,7 @@ textarea.ui-resizable-handle.ui-resizable-s {
.hasTimepicker,
[data-time-picker],
.has-time-picker {
- .background-icon('date', 'clickable', 20);
+ @include background-icon(date, clickable, 20px);
background-position: right 3px center;
background-repeat: no-repeat;
min-width: 10ex;
diff --git a/resources/assets/stylesheets/less/messagebox.less b/resources/assets/stylesheets/scss/messagebox.scss
similarity index 64%
rename from resources/assets/stylesheets/less/messagebox.less
rename to resources/assets/stylesheets/scss/messagebox.scss
index ce29b28eeea..a928bb6c8d9 100644
--- a/resources/assets/stylesheets/less/messagebox.less
+++ b/resources/assets/stylesheets/scss/messagebox.scss
@@ -24,23 +24,25 @@ div.messagebox {
display: inline-block;
margin: 1px;
- .size(16px, 16px);
+ width: 16px;
+ height: 16px;
- &.close, &.details {
+ &.close,
+ &.details {
span { display: none; }
}
&.close {
- .background-icon('decline', 'clickable');
+ @include background-icon(decline);
}
&.details {
- .background-icon('arr_eol-down', 'clickable');
+ @include background-icon(arr_eol-down);
}
}
}
&.details_hidden {
.messagebox_buttons a.details {
- .background-icon('arr_eol-up', 'clickable');
+ @include background-icon(arr_eol-up);
}
.messagebox_details { height: 0; }
}
@@ -52,35 +54,25 @@ div.messagebox_details {
}
// Messagebox definitions
-
-.messagebox (@name, @color, @background-color) {
- .messagebox (@name, @color, @background-color, @color, @name);
-}
-
-.messagebox (@name, @color, @background-color, @border-color) {
- .messagebox (@name, @color, @background-color, @border-color, @name);
-}
-
-.messagebox (@name, @color, @background-color, @border-color, @image) {
- // Also generates the neccessary selector not only the rules
- div.messagebox_@{name} {
- color: @color;
- background-color: @background-color;
- background-image: url("@{image-path}/messagebox/@{image}.png");
+@mixin messagebox ($name, $color, $background-color, $border-color: $color, $image: $name) {
+ div.messagebox_#{$name} {
+ color: $color;
+ background-color: $background-color;
+ background-image: url("#{$image-path}/messagebox/#{$image}.png");
background-size: 32px 32px;
- border-color: @border-color;
+ border-color: $border-color;
}
}
-.messagebox(info, var(--black), var(--white), var(--base-color));
-.messagebox(success, var(--black), var(--white), var(--dark-green));
-.messagebox(error, var(--black), var(--white), var(--red));
-.messagebox(exception, var(--red), var(--red-20), var(--red));
-.messagebox(warning, var(--black), var(--white), var(--yellow-60), 'advice');
+@include messagebox(info, var(--black), var(--white), var(--base-color));
+@include messagebox(success, var(--black), var(--white), var(--dark-green));
+@include messagebox(error, var(--black), var(--white), var(--red));
+@include messagebox(exception, var(--red), var(--red-20), var(--red));
+@include messagebox(warning, var(--black), var(--white), var(--yellow-60), advice);
// Define modal messagebox
.modaloverlay {
- background: fadeout(@base-color, 50%);
+ background: fadeout($base-color, 50%);
position: fixed;
top: 0;
left: 0;
diff --git a/resources/assets/stylesheets/less/resources-print.less b/resources/assets/stylesheets/scss/resources-print.scss
similarity index 100%
rename from resources/assets/stylesheets/less/resources-print.less
rename to resources/assets/stylesheets/scss/resources-print.scss
diff --git a/resources/assets/stylesheets/less/schedule.less b/resources/assets/stylesheets/scss/schedule.scss
similarity index 52%
rename from resources/assets/stylesheets/less/schedule.less
rename to resources/assets/stylesheets/scss/schedule.scss
index bdb9b25e826..c8c8f5a6302 100644
--- a/resources/assets/stylesheets/less/schedule.less
+++ b/resources/assets/stylesheets/scss/schedule.scss
@@ -61,7 +61,7 @@ div.schedule_entry {
&.hover:hover { opacity: 0.7; }
a {
- color: white;
+ color: var(--white);
&:hover { text-decoration: underline; }
}
dd {
@@ -83,7 +83,7 @@ div.snatch {
width: 100%;
div {
- border-top: 3px double white;
+ border-top: 3px double var(--white);
cursor: ns-resize;
height: 0;
margin-left: auto;
@@ -141,7 +141,8 @@ div.schedule_edit_entry > form {
top: 0;
img {
- .square(16px);
+ width: 16px;
+ height: 16px;
}
}
@@ -165,7 +166,7 @@ div.schedule_settings {
.schedule-dialog {
display: block;
- outline: 0px none;
+ outline: 0 none;
z-index: 1002;
position: absolute;
@@ -203,7 +204,7 @@ td.schedule-adminbind {
outline: 1px solid var(--black);
position: relative;
- .icon('before', 'accept', 'info', 24px);
+ @include icon(before, accept, info, 24px);
&::before {
position: absolute;
left: 50%;
@@ -221,52 +222,52 @@ td.schedule-adminbind {
width: 32px;
&.schedule-category1 {
- background-color: @calendar-category-1;
+ background-color: $calendar-category-1;
}
&.schedule-category2 {
- background-color: @calendar-category-2;
+ background-color: $calendar-category-2;
}
&.schedule-category3 {
- background-color: @calendar-category-3;
+ background-color: $calendar-category-3;
}
&.schedule-category4 {
- background-color: @calendar-category-4;
+ background-color: $calendar-category-4;
}
&.schedule-category5 {
- background-color: @calendar-category-5;
+ background-color: $calendar-category-5;
}
&.schedule-category6 {
- background-color: @calendar-category-6;
+ background-color: $calendar-category-6;
}
&.schedule-category7 {
- background-color: @calendar-category-7;
+ background-color: $calendar-category-7;
}
&.schedule-category8 {
- background-color: @calendar-category-8;
+ background-color: $calendar-category-8;
}
&.schedule-category9 {
- background-color: @calendar-category-9;
+ background-color: $calendar-category-9;
}
&.schedule-category10 {
- background-color: @calendar-category-10;
+ background-color: $calendar-category-10;
}
&.schedule-category11 {
- background-color: @calendar-category-11;
+ background-color: $calendar-category-11;
}
&.schedule-category12 {
- background-color: @calendar-category-12;
+ background-color: $calendar-category-12;
}
&.schedule-category13 {
- background-color: @calendar-category-13;
+ background-color: $calendar-category-13;
}
&.schedule-category14 {
- background-color: @calendar-category-14;
+ background-color: $calendar-category-14;
}
&.schedule-category15 {
- background-color: @calendar-category-15;
+ background-color: $calendar-category-15;
}
&.schedule-category255 {
- background-color: @calendar-category-255;
+ background-color: $calendar-category-255;
}
}
}
@@ -275,168 +276,168 @@ div.schedule_entry {
dl {
&.schedule-category1 {
- background-color: @calendar-category-1-aux;
- border: 1px solid @calendar-category-1;
+ background-color: $calendar-category-1-aux;
+ border: 1px solid $calendar-category-1;
dt {
- background-color: @calendar-category-1;
- color: contrast(@calendar-category-1, black, white);
+ background-color: $calendar-category-1;
+ color: contrast($calendar-category-1, $black, $white);
}
dd {
- color: contrast(@calendar-category-1-aux, black, white);
+ color: contrast($calendar-category-1-aux, $black, $white);
}
}
&.schedule-category2 {
- background-color: @calendar-category-2-aux;
- border: 1px solid @calendar-category-2;
+ background-color: $calendar-category-2-aux;
+ border: 1px solid $calendar-category-2;
dt {
- background-color: @calendar-category-2;
- color: contrast(@calendar-category-2, black, white);
+ background-color: $calendar-category-2;
+ color: contrast($calendar-category-2, $black, $white);
}
dd {
- color: contrast(@calendar-category-2-aux, black, white);
+ color: contrast($calendar-category-2-aux, $black, $white);
}
}
&.schedule-category3 {
- background-color: @calendar-category-3-aux;
- border: 1px solid @calendar-category-3;
+ background-color: $calendar-category-3-aux;
+ border: 1px solid $calendar-category-3;
dt {
- background-color: @calendar-category-3;
- color: contrast(@calendar-category-3, black, white);
+ background-color: $calendar-category-3;
+ color: contrast($calendar-category-3, $black, $white);
}
dd {
- color: contrast(@calendar-category-3-aux, black, white);
+ color: contrast($calendar-category-3-aux, $black, $white);
}
}
&.schedule-category4 {
- background-color: @calendar-category-4-aux;
- border: 1px solid @calendar-category-4;
+ background-color: $calendar-category-4-aux;
+ border: 1px solid $calendar-category-4;
dt {
- background-color: @calendar-category-4;
- color: contrast(@calendar-category-4, black, white);
+ background-color: $calendar-category-4;
+ color: contrast($calendar-category-4, $black, $white);
}
dd {
- color: contrast(@calendar-category-4-aux, black, white);
+ color: contrast($calendar-category-4-aux, $black, $white);
}
}
&.schedule-category5 {
- background-color: @calendar-category-5-aux;
- border: 1px solid @calendar-category-5;
+ background-color: $calendar-category-5-aux;
+ border: 1px solid $calendar-category-5;
dt {
- background-color: @calendar-category-5;
- color: contrast(@calendar-category-5, black, white);
+ background-color: $calendar-category-5;
+ color: contrast($calendar-category-5, $black, $white);
}
dd {
- color: contrast(@calendar-category-5-aux, black, white);
+ color: contrast($calendar-category-5-aux, $black, $white);
}
}
&.schedule-category6 {
- background-color: @calendar-category-6-aux;
- border: 1px solid @calendar-category-6;
+ background-color: $calendar-category-6-aux;
+ border: 1px solid $calendar-category-6;
dt {
- background-color: @calendar-category-6;
- color: contrast(@calendar-category-6, black, white);
+ background-color: $calendar-category-6;
+ color: contrast($calendar-category-6, $black, $white);
}
dd {
- color: contrast(@calendar-category-6-aux, black, white);
+ color: contrast($calendar-category-6-aux, $black, $white);
}
}
&.schedule-category7 {
- background-color: @calendar-category-7-aux;
- border: 1px solid @calendar-category-7;
+ background-color: $calendar-category-7-aux;
+ border: 1px solid $calendar-category-7;
dt {
- background-color: @calendar-category-7;
- color: contrast(@calendar-category-7, black, white);
+ background-color: $calendar-category-7;
+ color: contrast($calendar-category-7, $black, $white);
}
dd {
- color: contrast(@calendar-category-7-aux, black, white);
+ color: contrast($calendar-category-7-aux, $black, $white);
}
}
&.schedule-category8 {
- background-color: @calendar-category-8-aux;
- border: 1px solid @calendar-category-8;
+ background-color: $calendar-category-8-aux;
+ border: 1px solid $calendar-category-8;
dt {
- background-color: @calendar-category-8;
- color: contrast(@calendar-category-8, black, white);
+ background-color: $calendar-category-8;
+ color: contrast($calendar-category-8, $black, $white);
}
dd {
- color: contrast(@calendar-category-8-aux, black, white);
+ color: contrast($calendar-category-8-aux, $black, $white);
}
}
&.schedule-category9 {
- background-color: @calendar-category-9-aux;
- border: 1px solid @calendar-category-9;
+ background-color: $calendar-category-9-aux;
+ border: 1px solid $calendar-category-9;
dt {
- background-color: @calendar-category-9;
- color: contrast(@calendar-category-9, black, white);
+ background-color: $calendar-category-9;
+ color: contrast($calendar-category-9, $black, $white);
}
dd {
- color: contrast(@calendar-category-9-aux, black, white);
+ color: contrast($calendar-category-9-aux, $black, $white);
}
}
&.schedule-category10 {
- background-color: @calendar-category-10-aux;
- border: 1px solid @calendar-category-10;
+ background-color: $calendar-category-10-aux;
+ border: 1px solid $calendar-category-10;
dt {
- background-color: @calendar-category-10;
- color: contrast(@calendar-category-10, black, white);
+ background-color: $calendar-category-10;
+ color: contrast($calendar-category-10, $black, $white);
}
dd {
- color: contrast(@calendar-category-10-aux, black, white);
+ color: contrast($calendar-category-10-aux, $black, $white);
}
}
&.schedule-category11 {
- background-color: @calendar-category-11-aux;
- border: 1px solid @calendar-category-11;
+ background-color: $calendar-category-11-aux;
+ border: 1px solid $calendar-category-11;
dt {
- background-color: @calendar-category-11;
- color: contrast(@calendar-category-11, black, white);
+ background-color: $calendar-category-11;
+ color: contrast($calendar-category-11, $black, $white);
}
dd {
- color: contrast(@calendar-category-11-aux, black, white);
+ color: contrast($calendar-category-11-aux, $black, $white);
}
}
&.schedule-category12 {
- background-color: @calendar-category-12-aux;
- border: 1px solid @calendar-category-12;
+ background-color: $calendar-category-12-aux;
+ border: 1px solid $calendar-category-12;
dt {
- background-color: @calendar-category-12;
- color: contrast(@calendar-category-12, black, white);
+ background-color: $calendar-category-12;
+ color: contrast($calendar-category-12, $black, $white);
}
dd {
- color: contrast(@calendar-category-12-aux, black, white);
+ color: contrast($calendar-category-12-aux, $black, $white);
}
}
&.schedule-category13 {
- background-color: @calendar-category-13-aux;
- border: 1px solid @calendar-category-13;
+ background-color: $calendar-category-13-aux;
+ border: 1px solid $calendar-category-13;
dt {
- background-color: @calendar-category-13;
- color: contrast(@calendar-category-13, black, white);
+ background-color: $calendar-category-13;
+ color: contrast($calendar-category-13, $black, $white);
}
dd {
- color: contrast(@calendar-category-13-aux, black, white);
+ color: contrast($calendar-category-13-aux, $black, $white);
}
}
&.schedule-category14 {
- background-color: @calendar-category-14-aux;
- border: 1px solid @calendar-category-14;
+ background-color: $calendar-category-14-aux;
+ border: 1px solid $calendar-category-14;
dt {
- background-color: @calendar-category-14;
- color: contrast(@calendar-category-14, black, white);
+ background-color: $calendar-category-14;
+ color: contrast($calendar-category-14, $black, $white);
}
dd {
- color: contrast(@calendar-category-14-aux, black, white);
+ color: contrast($calendar-category-14-aux, $black, $white);
}
}
&.schedule-category15 {
- background-color: @calendar-category-15-aux;
- border: 1px solid @calendar-category-15;
+ background-color: $calendar-category-15-aux;
+ border: 1px solid $calendar-category-15;
dt {
- background-color: @calendar-category-15;
- color: contrast(@calendar-category-15, black, white);
+ background-color: $calendar-category-15;
+ color: contrast($calendar-category-15, $black, $white);
}
dd {
- color: contrast(@calendar-category-15-aux, black, white);
+ color: contrast($calendar-category-15-aux, $black, $white);
}
}
}
diff --git a/resources/assets/stylesheets/scss/tables.scss b/resources/assets/stylesheets/scss/tables.scss
index 85d1d982df5..9e05f014fdb 100644
--- a/resources/assets/stylesheets/scss/tables.scss
+++ b/resources/assets/stylesheets/scss/tables.scss
@@ -1,7 +1,962 @@
+/* --- Tabellen ------------------------------------------------------------- */
+table.header, .table_header { //normale Tabellenheader
+ background-color: var(--table-header-color);
+ border-bottom: 1px solid var(--dark-gray-color-80);
+ color: var(--black);
+ padding: 4px;
+
+}
+
+.table_header_bold { //formerly known as topic(-header)
+ background-color: var(--brand-color-lighter);
+ border-color: var(--brand-color-darker);
+ border-style: solid;
+ border-width: 0 0 1px 0;
+ color: var(--white);
+ font-size: 12pt;
+ padding: 3px 5px;
+
+ img,
+ svg {
+ vertical-align: middle;
+ }
+
+ // for the topic-icons
+}
+
+@mixin gradient-bar($flow-content: true) {
+ #gradient {
+ @include vertical-three-colors(#cdd9ed, #e3eaf6, 40%, #e3eaf6);
+ }
+
+ border-top: 1px solid var(--brand-color-lighter);
+ line-height: 17pt;
+ height: 25px;
+
+ @if $flow-content {
+ &:last-child {
+ padding-right: 5px;
+ }
+
+ img,
+ svg {
+ padding: 0 2px;
+ vertical-align: text-bottom;
+ }
+ }
+}
+
+table.toolbar {
+ @include gradient-bar(false);
+}
+
+td.toolbar,
+td.printhead {
+ @include gradient-bar();
+}
+
+td {
+ &.aufklapp {
+ background-color: var(--dark-gray-color-5);
+ }
+
+ &.angemeldet {
+ border: 1px solid var(--black);
+ }
+
+ &.nix {
+ background-color: transparent;
+ }
+
+ &.quote {
+ border: 1px solid var(--black);
+ font-size: 8px;
+ }
+}
+
+table.blank,
+td.blank,
+td.onlineinfo,
+td.blanksmall {
+ background-color: var(--white);
+}
+
+td.tree-indent {
+ img, svg {
+ vertical-align: bottom;
+ }
+}
+
+td.tree-elbow-line {
+ background: url("#{$image-path}/datatree_1.gif") repeat-y;
+ vertical-align: bottom;
+ width: 5px;
+}
+
+td.tree-elbow-end {
+ vertical-align: top;
+ white-space: nowrap;
+ width: 5px;
+}
+
+td.tree-elbow-line, td.tree-elbow-end {
+ img, svg {
+ display: block;
+ }
+}
+
+/* --- table.collapsable ---------------------------------------------------- */
+// TODO: This is pretty hard to understand and should be replaced with an easier,
+// better structured solution
+.collapsable {
+ .header-row > td {
+ border-bottom: 0;
+ padding-left: 0;
+ }
+
+ .toggle-indicator {
+ color: var(--black);
+ font-weight: bold;
+
+ a {
+ background: left center no-repeat;
+ @include background-icon(arr_1down);
+ color: var(--black);
+ cursor: pointer;
+ display: block;
+ }
+
+ }
+
+ .empty .toggle-indicator a {
+ @include background-icon(arr_1right, inactive);
+ }
+
+ .collapsed .toggle-indicator a {
+ @include background-icon(arr_1right);
+ }
+
+ td.label-cell, .toggle-indicator a, .empty .toggle-indicator {
+ padding-left: 20px;
+ }
+
+ > .collapsed {
+ tr:not(.header-row) {
+ display: none;
+ }
+
+ .toggle-indicator ~ *:not(.dont-hide) > * {
+ opacity: 0;
+ pointer-events: none;
+ }
+ }
+}
+
+* + html .collapsable .collapsed .header-row {
+ display: inline-block !important;
+}
+
+// IE-Hack
+
+/* --- Table details -------------------------------------------------------- */
+.loaded-details {
+ > td {
+ padding: 0 0 5px 20px !important;
+ }
+
+ table {
+ border-top: 0;
+ }
+}
+
+/* --- Sonstige ------------------------------------------------------------- */
+.gruppe0 {
+ background-color: var(--group-color-0) !important;
+}
+
+.gruppe1 {
+ background-color: var(--group-color-1) !important;
+}
+
+.gruppe2 {
+ background-color: var(--group-color-2) !important;
+}
+
+.gruppe3 {
+ background-color: var(--group-color-3) !important;
+}
+
+.gruppe4 {
+ background-color: var(--group-color-4) !important;
+}
+
+.gruppe5 {
+ background-color: var(--group-color-5) !important;
+}
+
+.gruppe6 {
+ background-color: var(--group-color-6) !important;
+}
+
+.gruppe7 {
+ background-color: var(--group-color-7) !important;
+}
+
+.gruppe8 {
+ background-color: var(--group-color-8) !important;
+}
+
+#my_seminars, #settings-notifications {
+ .gruppe0, .gruppe1, .gruppe2, .gruppe3, .gruppe4,
+ .gruppe5, .gruppe6, .gruppe7, .gruppe9 {
+ width: 1px;
+ }
+
+ .mycourse_elements > img {
+ display: none;
+ }
+
+ .special_nav {
+ float: right;
+ }
+}
+
+.grey {
+ background: var(--dark-gray-color-40) none;
+}
+
+.white {
+ background: var(--white) none;
+}
+
+.red_gradient {
+ #gradient {
+ @include vertical-three-colors(#e3969a, #e8b6b9, 60%, #e8b6b9);
+ }
+
+ border-top: 2px solid var(--brown);
+}
+
+/* --- Styles fuer printhead und printcontent ------------------------------- */
+table {
+ td.printcontent {
+ background-color: var(--dark-gray-color-5);
+ text-align: left;
+ }
+
+ td.printcontent:hover {
+ background-color: var(--dark-gray-color-5);
+ }
+
+ td.printhead2 {
+ background-image: url("#{$image-path}/content_object_arr-right.png");
+ border-top: 1px solid var(--brand-color-lighter);
+ padding: 0;
+ }
+
+ td.printhead3 {
+ background-image: url("#{$image-path}/content_object_arr-down.png");
+ border-top: 1px solid var(--brand-color-lighter);
+ padding: 0;
+ }
+}
+
+/* classes for sortable table headers --------------------------------------- */
+tr.sortable {
+ th.sortasc,
+ th.sortdesc {
+ .tablesorter-header-inner {
+ display: inline-block;
+ }
+ }
+
+ th.sortasc {
+ @include icon('after', 'arr_1up', 'clickable');
+ }
+
+ th.sortdesc {
+ @include icon('after', 'arr_1down', 'clickable');
+ }
+}
+
+.tablesorter .filtered {
+ display: none;
+}
+
+.tablesorter .tablesorter-errorRow td {
+ text-align: center;
+ cursor: pointer;
+}
+
+/* styles for settings tables */
+.settings {
+ border-collapse: collapse;
+ margin-bottom: 2em;
+ width: 100%;
+
+ thead th, tbody th {
+ @extend .table_header_bold;
+ text-align: center;
+ }
+
+ td, th {
+ padding: 8px;
+ vertical-align: top;
+ }
+
+ tbody {
+ &.maxed {
+ input[type=email], input[type=password], input[type=tel], input[type=text], input[type=url], select, textarea {
+ &:first-child {
+ box-sizing: border-box;
+ width: 100%;
+ }
+ }
+
+ td[colspan]:first-child {
+ input[type=email], input[type=password], input[type=tel], input[type=text], input[type=url], select, textarea {
+ width: 200px;
+ }
+ }
+ }
+
+ &.privacy td:first-child ~ td {
+ font-style: italic;
+ text-align: center;
+ }
+
+ td:first-child label {
+ display: block;
+ font-weight: bold;
+ }
+ }
+
+ td:first-child[colspan], .divider > th, .divider > td {
+ background-color: lighten($brand-color-lighter, 20%);
+ border-bottom: 1px solid var(--base-gray);
+ border-top: 1px solid var(--base-gray);
+ color: var(--black);
+ font-weight: bold;
+ text-align: center;
+ }
+
+ dfn, small {
+ display: block;
+ font-weight: normal;
+ }
+
+ dfn {
+ font-size: 0.8em;
+ font-style: italic;
+ padding-top: 0.5em;
+ }
+
+ tfoot {
+ td {
+ background: var(--table-footer-color);
+ text-align: center;
+ }
+
+ tr:first-child td {
+ border-top: 1px solid var(--dark-gray-color-80);
+ }
+ }
+
+ label.required:after {
+ color: var(--red);
+ content: '*';
+ font-size: 1.5em;
+ padding-left: 5px;
+ vertical-align: middle;
+ }
+
+ &.notification tbody td {
+ text-align: center;
+
+ &:first-child:not([colspan]) {
+ padding-left: 0;
+ padding-right: 0;
+ font-size: small;
+ }
+
+ &:nth-child(-n+2) {
+ text-align: left;
+ }
+ }
+
+ .bordered {
+ &.left {
+ border-left: 1px solid var(--brand-color-lighter);
+ }
+
+ &.right {
+ border-right: 1px solid var(--brand-color-lighter);
+ }
+ }
+}
+
+table.tree {
+ .header > td {
+ @include gradient-bar();
+
+ a.link {
+ padding-left: 5px;
+
+ &.open {
+ @include background-icon(arr_1down);
+ background-position: left center;
+ background-repeat: no-repeat;
+ padding-left: 20px;
+ }
+
+ &.closed {
+ @include background-icon(arr_1right);
+ background-position: left center;
+ background-repeat: no-repeat;
+ padding-left: 20px;
+ }
+ }
+ }
+
+ td.blank {
+ background: var(--white);
+ border: 0;
+ }
+
+ td.in-between {
+ background: var(--white) url("#{$image-path}/tree-line.gif") center repeat-y;
+ border: 0;
+ }
+
+ td.leaf {
+ background: var(--white) url("#{$image-path}/tree-leaf.gif") center no-repeat;
+ border: 0;
+ }
+
+ td.end {
+ background: var(--white) url("#{$image-path}/tree-end.gif") center no-repeat;
+ border: 0;
+ }
+
+ .centered {
+ text-align: center;
+
+ table {
+ margin: auto;
+ text-align: left;
+ }
+ }
+}
+
+.table_footer, .table_footer td {
+ background-color: var(--dark-gray-color-10);
+ border-top: 1px solid var(--dark-gray-color-30);
+}
+
+// New table definition
table.default {
+ border-collapse: collapse;
+ margin-bottom: 1em;
+ width: 100%;
+
+ .wrap-content {
+ word-break: break-all;
+ }
+
+ .font-size-adjusted {
+ font-size: 1.1em;
+ }
+
+ th, td, caption {
+ &.nowrap {
+ white-space: nowrap;
+ }
+
+ padding: 5px;
+ text-align: left;
+ }
+
+ > caption {
+ background-color: transparent;
+ padding-top: 0;
+ color: var(--headings-color);
+ font-size: 1.4em;
+ text-align: left;
+
+ header {
+ > h2 {
+ border: 0;
+ font-size: inherit;
+ font-weight: normal;
+ margin: 0;
+ padding: 0;
+ }
+
+ > p {
+ font-size: 0.7em;
+ font-weight: normal;
+ margin: 0;
+ padding: 0;
+ }
+ }
+ }
+
+ > thead {
+ > tr > th {
+ background-color: var(--content-color-20);
+ border-bottom: 1px solid fadeout($brand-color-lighter, 80%);
+ border-top: 1px solid var(--brand-color-darker);
+ font-size: 1.0em;
+ }
+ }
+
+ > tbody {
+ > tr {
+ > th {
+ background-color: var(--content-color-20);
+ border-top: 1px solid var(--brand-color-darker);
+ border-bottom: 1px solid fadeout($brand-color-lighter, 80%);
+ text-align: left;
+ }
+
+ > td {
+ border-bottom: 1px solid var(--table-header-color);
+ transition: background-color 0.3s;
+ }
+
+ &.dragover > td {
+ background-color: var(--yellow-20);
+ }
+ }
+ }
+
+ > tbody > tr.selected > td {
+ background-color: var(--yellow-20);
+
+ &:first-child {
+ position: relative;
+
+ &::before {
+ display: block;
+ content: '';
+ position: absolute;
+
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 2px;
+ background-color: var(--light-gray-color);
+ }
+ }
+ }
+
+ > tbody > tr.new > td {
+ font-weight: bold;
+
+ &:first-child {
+ position: relative;
+
+ &::before {
+ display: block;
+ content: '';
+ position: absolute;
+
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 2px;
+ background-color: var(--red);
+ }
+ }
+
+ .action-menu {
+ font-weight: normal;
+ }
+ }
+
+ > tbody:last-of-type > tr:last-child > td {
+ border-bottom: 1px solid var(--brand-color-darker);
+ }
+
+ // Hover effect
+ &:not(.nohover) > tbody:not(.nohover) > tr:not(.nohover):hover > td:not(.nohover) {
+ background-color: fadeout($light-gray-color, 80%);
+ }
+
+ &:not(.nohover) > tbody:not(.nohover) > tr.selected:not(.nohover):hover > td:not(.nohover) {
+ background-color: var(--yellow-40);
+ }
+
+ > tfoot {
+ > tr > td {
+ background-color: var(--content-color-20);
+ border-top: 1px solid var(--brand-color-darker);
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+ }
+
+ td.avatar, th.avatar {
+ padding: 5px;
+ }
+
+ .actions {
+ float: right;
+ text-align: right;
+ white-space: nowrap;
+
+ img, svg, input[type="image"] {
+ vertical-align: middle;
+ }
+ }
+
+ > caption .actions {
+ font-size: $font-size-base;
+ border-left: 1px solid var(--brand-color-darker);
+ margin-bottom: -5px;
+ min-height: 26px;
+ padding-bottom: 3px;
+ padding-left: 0.5em;
+ padding-top: 4px;
+ }
+
+ td.actions, th.actions {
+ float: none;
+ }
+
+ > caption {
+ .caption-container {
+ display: flex;
+ align-items: stretch;
+ justify-content: space-between;
+ margin-bottom: -5px;
+ }
+
+ .caption-content {
+ flex-grow: 1;
+ border-right: 1px solid var(--brand-color-darker);
+ padding-bottom: 5px;
+ padding-right: 0.5em;
+ margin-right: 0.5em;
+ }
+
+ .caption-actions {
+ align-self: flex-end;
+ }
+ }
+
+ > tbody.toggleable {
+ &.toggled {
+ .toggle-switch {
+ @include background-icon(arr_1right);
+ }
+
+ tr:not(:first-child) {
+ display: none;
+ }
+ }
+
+ .toggle-switch {
+ @include hide-text();
+ @include background-icon(arr_1down);
+ display: inline-block;
+ height: 16px;
+ text-align: center;
+ vertical-align: top;
+ width: 16px;
+ }
+ }
+
+ dfn, small {
+ display: block;
+ font-weight: normal;
+ }
+
+ dfn {
+ font-size: 0.8em;
+ font-style: italic;
+ padding-top: 0.5em;
+ }
+
+ label.required:after {
+ color: red;
+ content: '*';
+ font-size: 1.5em;
+ padding-left: 5px;
+ vertical-align: middle;
+ }
+
+ &.has-form {
+ input[type=text], textarea {
+ box-sizing: border-box;
+ min-width: 200px;
+ width: 100%;
+ }
+
+ textarea {
+ min-height: 100px;
+ }
+ }
+
+ tfoot {
+ // Fix button and select alignment
+ select {
+ vertical-align: middle;
+ }
+
+ // Adjust button margins
+ .button {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+ }
+
colgroup {
col.checkbox {
- width: 30px;
+ width: 24px;
+ }
+ }
+}
+
+
+// Remove trailing border and margin in content boxes if table is last element
+article.studip > section > table.default:last-child {
+ margin-bottom: 0;
+
+ > tbody:last-child > tr:last-child > td {
+ border-bottom: 0;
+ }
+}
+
+table.withdetails {
+ > tbody > tr:not(.details) > td:first-child {
+ @include background-icon(arr_1right);
+ background-repeat: no-repeat;
+ background-position: 2px center;
+ padding-left: 20px;
+
+ > a {
+ margin-left: -20px;
+ padding-left: 20px;
+ }
+ }
+
+ > tbody > tr.open > td {
+ background-color: fadeout($light-gray-color, 80%);
+ }
+
+ > tbody > tr.open > td:first-child {
+ @include background-icon(arr_1down);
+ }
+
+ tr.details {
+ display: none;
+ max-height: 0px;
+ overflow: hidden;
+ transition: max-height 0.8s;
+ }
+
+ tr.open + tr.details {
+ display: table-row;
+ max-height: 200px;
+ overflow: hidden;
+ transition: max-height 0.8s;
+ background-color: transparent !important;
+
+ > td {
+ padding-top: 0px;
+ padding-bottom: 10px;
+
+ > .detailscontainer {
+ padding: 5px;
+ border: 1px solid var(--table-header-color);
+ margin-top: -1px;
+ border-top-color: var(--white);
+ }
+ }
+ }
+}
+
+.no-js table.withdetails tr.details {
+ display: table-row;
+}
+
+@mixin sortable-dreieck($direction) {
+ &::after {
+ background-repeat: no-repeat;
+ content: ' ';
+ display: inline-block;
+ height: 16px;
+ margin-left: 0;
+ @include background-icon('arr_1#{$direction}');
+ vertical-align: text-bottom;
+ width: 16px;
+ }
+}
+
+.sortable-table {
+ .header,
+ .tablesorter-header:not(.sorter-false) {
+ white-space: nowrap;
+
+ color: var(--base-color);
+
+ &:hover {
+ color: var(--active-color);
+ cursor: pointer;
+ }
+
+ &.tablesorter-headerDesc:hover .tablesorter-header-inner::after {
+ @include background-icon(arr_1down, status-red);
+ }
+
+ &.tablesorter-headerAsc:hover .tablesorter-header-inner::after {
+ @include background-icon(arr_1up, status-red);
+ }
+ }
+
+ .headerSortUp,
+ .tablesorter-headerDesc .tablesorter-header-inner {
+ @include sortable-dreieck('down');
+ }
+
+ .headerSortDown,
+ .tablesorter-headerAsc .tablesorter-header-inner {
+ @include sortable-dreieck('up');
+ }
+
+ .tablesorter-headerUnSorted:not(.sorter-false) .tablesorter-header-inner {
+ margin-right: 15px;
+ }
+}
+
+// Schedule table
+table#schedule_data {
+ width: 100%;
+ table-layout: fixed;
+
+ thead {
+ tr {
+ td {
+ text-align: center;
+ vertical-align: top;
+ background-color: var(--content-color-20);
+ padding: 0;
+
+ &:first-child {
+ width: 40px;
+ }
+ }
+
+ &:first-child {
+ td:first-child {
+ background-color: inherit;
+ }
+ }
+ }
+ }
+
+ tbody {
+ td:first-child {
+ text-align: right;
+ vertical-align: top;
+ background-color: var(--content-color-20);
+ padding: 0px;
+ }
+ }
+}
+
+// Responsive helper
+.table-scrollbox-horizontal {
+ @include scrollbox-horizontal();
+}
+
+//New table form for Course Search
+table.course-search {
+ $max-width-s: 8em;
+ $max-width-m: 48em;
+ $max-width-l: 100%;
+ border: 1px solid var(--content-color-40);
+ padding: 0;
+ border-top: 0;
+
+ caption.legend {
+ box-sizing: border-box;
+ background-color: $fieldset-header;
+ border: 1px solid var(--content-color-40);
+ border-bottom: 0;
+ color: var(--brand-color-dark);
+ font-size: 12pt;
+ font-weight: bold;
+ line-height: 2em;
+ padding: 0;
+ text-align: left;
+ text-indent: 15px;
+ }
+}
+
+//Show Tree Table
+table.show-tree {
+ width: 100%;
+ padding: 0 10px 10px 10px;
+
+ td.b-top-va-center {
+ border-top: 1px solid var(--content-color-40);
+ padding-top: 10px;
+ vertical-align: middle;
+ }
+
+ img[role=root-icon] {
+ position: relative;
+ top: 1px;
+ }
+
+ div.sem-root-icon {
+ display: inline-block;
+ vertical-align: top;
+ }
+
+ div.sem-path {
+ display: inline-block;
+ padding-left: 5px;
+ div.sem_path_info {
+ padding-top: 10px;
+
+ div.sem_path_title {
+ font-weight: bold;
+ font-size: 1.4em;
+ margin: 3px 0 5px 0;
+ }
+
+ div.sem_path_text {
+ padding-top: 2px;
+ }
+ }
+ }
+
+ table.show-tree-kids {
+ width: 100%;
+
+ td.kids-tree-row {
+ width: 50%;
+ }
+
+ ul.semtree {
+ padding-left: 0 !important;
+
+ a {
+ padding-top: 5px !important;
+ padding-bottom: 3px !important;
+ padding-left: 14px !important;
+ margin-left: -4px !important;
+ display: block;
+ }
+
+ a:hover {
+ background-color: $fieldset-header !important;
+ color: var(--base-color) !important;
+ }
}
+
}
}
diff --git a/resources/assets/stylesheets/scss/visibility.scss b/resources/assets/stylesheets/scss/visibility.scss
index df56df15602..7201ef8362a 100644
--- a/resources/assets/stylesheets/scss/visibility.scss
+++ b/resources/assets/stylesheets/scss/visibility.scss
@@ -1,57 +1,67 @@
@mixin media-breakpoint-xxlarge-down() {
@content;
}
+
@mixin media-breakpoint-xlarge-down() {
- @media (max-width: ($major-breakpoint-xxlarge - 1px)) {
- @content;
- }
+ @media (max-width: ($major-breakpoint-xxlarge - 1px)) {
+ @content;
+ }
}
+
@mixin media-breakpoint-large-down() {
- @media (max-width: ($major-breakpoint-xlarge - 1px)) {
- @content;
- }
+ @media (max-width: ($major-breakpoint-xlarge - 1px)) {
+ @content;
+ }
}
+
@mixin media-breakpoint-medium-down() {
- @media (max-width: ($major-breakpoint-large - 1px)) {
- @content;
- }
+ @media (max-width: ($major-breakpoint-large - 1px)) {
+ @content;
+ }
}
+
@mixin media-breakpoint-small-down() {
- @media (max-width: ($major-breakpoint-medium - 1px)) {
- @content;
- }
+ @media (max-width: ($major-breakpoint-medium - 1px)) {
+ @content;
+ }
}
+
@mixin media-breakpoint-tiny-down() {
- @media (max-width: ($major-breakpoint-small - 1px)) {
- @content;
- }
+ @media (max-width: ($major-breakpoint-small - 1px)) {
+ @content;
+ }
}
@mixin media-breakpoint-xxlarge-up() {
- @media (min-width: ($major-breakpoint-xxlarge)) {
- @content;
- }
+ @media (min-width: ($major-breakpoint-xxlarge)) {
+ @content;
+ }
}
+
@mixin media-breakpoint-xlarge-up() {
- @media (min-width: ($major-breakpoint-xlarge)) {
- @content;
- }
+ @media (min-width: ($major-breakpoint-xlarge)) {
+ @content;
+ }
}
+
@mixin media-breakpoint-large-up() {
- @media (min-width: ($major-breakpoint-large)) {
- @content;
- }
+ @media (min-width: ($major-breakpoint-large)) {
+ @content;
+ }
}
+
@mixin media-breakpoint-medium-up() {
- @media (min-width: ($major-breakpoint-medium)) {
- @content;
- }
+ @media (min-width: ($major-breakpoint-medium)) {
+ @content;
+ }
}
+
@mixin media-breakpoint-small-up() {
- @media (min-width: ($major-breakpoint-small)) {
- @content;
- }
+ @media (min-width: ($major-breakpoint-small)) {
+ @content;
+ }
}
+
@mixin media-breakpoint-tiny-up() {
@content;
}
@@ -67,6 +77,7 @@
display: none !important;
}
}
+
@mixin hidden-xxlarge-up {
@include media-breakpoint-xxlarge-up() {
display: none !important;
@@ -78,6 +89,7 @@
display: none !important;
}
}
+
@mixin hidden-xlarge-up {
@include media-breakpoint-xlarge-up() {
display: none !important;
@@ -89,6 +101,7 @@
display: none !important;
}
}
+
@mixin hidden-large-up {
@include media-breakpoint-large-up() {
display: none !important;
@@ -100,6 +113,7 @@
display: none !important;
}
}
+
@mixin hidden-medium-up {
@include media-breakpoint-medium-up() {
display: none !important;
@@ -111,6 +125,7 @@
display: none !important;
}
}
+
@mixin hidden-small-up {
@include media-breakpoint-small-up() {
display: none !important;
@@ -122,8 +137,83 @@
display: none !important;
}
}
+
@mixin hidden-tiny-up {
@include media-breakpoint-tiny-up() {
display: none !important;
}
}
+
+
+.hidden-xxlarge-down {
+ @include media-breakpoint-xxlarge-down() {
+ display: none !important;
+ }
+}
+
+.hidden-xxlarge-up {
+ @include media-breakpoint-xxlarge-up() {
+ display: none !important;
+ }
+;
+}
+
+.hidden-xlarge-down {
+ @include media-breakpoint-xlarge-down() {
+ display: none !important;
+ }
+}
+
+.hidden-xxlarge-up {
+ @include media-breakpoint-large-up() {
+ display: none !important;
+ }
+}
+
+.hidden-large-down {
+ @include media-breakpoint-large-down() {
+ display: none !important;
+ }
+}
+
+.hidden-large-up {
+ @include media-breakpoint-large-up() {
+ display: none !important;
+ }
+}
+
+.hidden-medium-down {
+ @include media-breakpoint-medium-down() {
+ display: none !important;
+ }
+}
+
+.hidden-medium-up {
+ @include media-breakpoint-medium-up() {
+ display: none !important;
+ }
+}
+
+.hidden-small-down {
+ @include media-breakpoint-small-down() {
+ display: none !important;
+ }
+}
+
+.hidden-small-up {
+ @include media-breakpoint-small-up() {
+ display: none !important;
+ }
+}
+
+.hidden-tiny-down {
+ @include media-breakpoint-tiny-down() {
+ display: none !important;
+ }
+}
+
+.hidden-tiny-up {
+ @include media-breakpoint-tiny-up() {
+ display: none !important;
+ }
+}
diff --git a/resources/assets/stylesheets/statusgroups.less b/resources/assets/stylesheets/statusgroups.scss
similarity index 70%
rename from resources/assets/stylesheets/statusgroups.less
rename to resources/assets/stylesheets/statusgroups.scss
index 5ae6c782088..dc82127495a 100644
--- a/resources/assets/stylesheets/statusgroups.less
+++ b/resources/assets/stylesheets/statusgroups.scss
@@ -1,5 +1,5 @@
-@import "mixins.less";
-@import (less) "vendor/jquery-nestable.css";
+@import "mixins.scss";
+@import "vendor/jquery-nestable.css";
.tree-seperator {
list-style-type: none;
diff --git a/resources/assets/stylesheets/studip-jquery-ui.less b/resources/assets/stylesheets/studip-jquery-ui.scss
similarity index 76%
rename from resources/assets/stylesheets/studip-jquery-ui.less
rename to resources/assets/stylesheets/studip-jquery-ui.scss
index 4da59c9cbf4..f6ed9bb7ead 100644
--- a/resources/assets/stylesheets/studip-jquery-ui.less
+++ b/resources/assets/stylesheets/studip-jquery-ui.scss
@@ -1,19 +1,19 @@
-@z-index: 1001;
+$z-index: 1001;
-@import "mixins.less";
+@import "mixins";
-@import (less) "jquery-ui.structure.css";
-@import "less/jquery-ui/custom.less";
-@import "less/jquery-ui/studip.less";
+@import "jquery-ui.structure.css";
+@import "scss/jquery-ui/custom";
+@import "scss/jquery-ui/studip";
@import "~jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.css";
@import "~multiselect/css/multi-select.css";
// Tweaks/adjustments for multi-select
.ms-container {
- @avatar-size: 32px;
- @avatar-border: 2px;
- @element-padding: 2px;
- @icon-size: 16px;
+ $avatar-size: 32px;
+ $avatar-border: 2px;
+ $element-padding: 2px;
+ $icon-size: 16px;
background: none;
width: 100%;
@@ -28,7 +28,7 @@
background: var(--white);
border-bottom-color: var(--content-color-20);
color: var(--dark-gray-color);
- padding: @element-padding;
+ padding: $element-padding;
}
li {
display: flex;
@@ -47,22 +47,22 @@
cursor: not-allowed;
}
&[style*="background-image"] {
- min-height: (2 * @element-padding + @avatar-size + 2 * @avatar-border);
+ min-height: (2 * $element-padding + $avatar-size + 2 * $avatar-border);
background-repeat: no-repeat;
- background-size: @avatar-size;
- background-position: (@element-padding + @avatar-border) center;
- padding-left: (@element-padding + @avatar-size + 2 * @avatar-border);
+ background-size: $avatar-size;
+ background-position: ($element-padding + $avatar-border) center;
+ padding-left: ($element-padding + $avatar-size + 2 * $avatar-border);
&.ms-elem-selection {
- background-position: (@element-padding + @avatar-border + @icon-size) center;
+ background-position: ($element-padding + $avatar-border + $icon-size) center;
}
}
}
}
.ms-selectable li:not(.disabled) {
- .icon('after', "arr_1right", 'info_alt', @icon-size);
+ @include icon('after', "arr_1right", 'info_alt', $icon-size);
&::after {
flex: 0 1 auto;
visibility: hidden;
@@ -77,16 +77,16 @@
.ms-selection li {
&[style*="background-image"] {
- padding-left: (@element-padding + @icon-size + @element-padding + @avatar-size + 2 * @avatar-border)
+ padding-left: ($element-padding + $icon-size + $element-padding + $avatar-size + 2 * $avatar-border)
}
position: relative;
- .icon('before', 'arr_1left', 'info_alt', @icon-size);
+ @include icon('before', 'arr_1left', 'info_alt', $icon-size);
&::before {
flex: 0 1 auto;
position: absolute;
- left: @element-padding;
+ left: $element-padding;
top: 50%;
transform: translate(0, -50%);
visibility: hidden;
@@ -159,7 +159,7 @@
display: none;
}
li {
- .icon('before', 'arr_2left', 'info_alt', @icon-size);
+ @include icon('before', 'arr_2left', 'info_alt', $icon-size);
}
}
@@ -167,7 +167,7 @@
order: 1;
li {
padding-left: 20px;
- .icon('before', 'arr_2right', 'info_alt', @icon-size);
+ @include icon('before', 'arr_2right', 'info_alt', $icon-size);
}
}
}
diff --git a/resources/assets/stylesheets/studip.less b/resources/assets/stylesheets/studip.less
deleted file mode 100644
index aee6779a5c1..00000000000
--- a/resources/assets/stylesheets/studip.less
+++ /dev/null
@@ -1,540 +0,0 @@
-/*******************************************************************************
- Standard-Stylesheet für Stud.IP im Safire-Design
- - use http://www.colorzilla.com/gradient-editor/ for gradients
-*******************************************************************************/
-@import "mixins.less";
-
-@import "less/font-face-lato.less";
-@import "less/variables.less";
-@import "less/breakpoints.less";
-@import "less/visibility.less";
-
-@import "less/tables.less";
-@import "less/buttons.less";
-@import "less/messagebox.less";
-@import "less/schedule.less";
-@import "less/files.less";
-
-
-/* --- Standardvorgaben ----------------------------------------------------- */
-//TODO: the Body-Background color should be similar to A:link.toolbar and A:visited.toolbar for best effect!!
-body {
- background-color: var(--dark-gray-color-20);
- background-repeat: repeat-x;
- margin: 0;
-}
-
-ul + br, table + br {
- display: none;
-}
-
-
-
-dd { margin-left: 1.5em; }
-
-input.placeholder { opacity: 0.7; }
-::placeholder {
- color: rgba(0, 0, 0, 0.7);
-}
-
-table.content {
- border-collapse: collapse;
-
- td {
- border: thin solid var(--dark-gray-color-80);
- padding: 3px;
- }
-
- /* for CKE5 Table Border Colors */
- &[style*='border-color'] {
- border-width: thin;
- border-style: solid;
- }
-
- td:first-child {
- border-inline-start: unset;
- }
-
- td:last-child {
- border-inline-end: unset;
- }
-
- tr:first-child td {
- border-block-start: unset;
- }
-
- tr:last-child td {
- border-block-end: unset;
- }
-}
-
-
-
-
-ul.clean, ol.clean {
- list-style-type: none;
- padding: 0px;
- margin: 0px;
- > li {
- margin-top: 2px;
- margin-bottom: 2px;
- padding: 0px;
- }
-}
-
-.hidden {
- display: none;
-}
-
-/* for defining flex rows quickly: */
-.flex-row {
- display: flex;
- flex-direction: row;
-}
-
-/* --- media preview -------------------------------------------------------- */
-.preview {
- img, audio, video {
- max-height: 500px;
- max-width: 750px;
- }
-}
-
-.mainmenu {
- margin-top: 7px;
- text-align: left;
- font-size: 16px;
- padding: 5px;
-}
-
-
-
-.minor {
- color: black;
- font-size: 0.75em;
-}
-.quiet {
- color: var(--dark-gray-color-60);
-}
-
-.middle { vertical-align: middle; }
-.text-bottom { vertical-align: text-bottom; }
-.text-top { vertical-align: text-top !important; }
-.center { text-align: center; }
-.nodisplay { display: none; }
-
-.bordered {
- border: 1px solid var(--content-color-40);
- padding: 10px;
-}
-.bordered + .bordered {
- border-top: none;
-}
-
-/* --- index.php anpassungen an den boxen zur vereinheitlichung ------------- */
-table.index_box {
- border-collapse: collapse;
- margin-bottom: 1em;
- width: 100%;
-}
-
-td.index_box_cell {
- background-color: var(--content-color-20);
- padding: 4px;
-}
-
-/* overdiv */
-div.overdiv {
- background-color: var(--content-color-20);
- margin: 0;
- padding: 0;
- position: absolute;
- width: 600px;
- z-index: 2;
-
- .title { margin: 0; }
- a.title {
- padding: 2px;
- float: right;
- }
- div.title {
- background: var(--brand-color-lighter);
- height: 1.4em;
- padding: 0;
- }
- h4.title {
- color: var(--white);
- float: left;
- font-size: 1em;
- overflow: hidden;
- padding: 2px;
- width: 90%;
- }
-
- div.content {
- background-color: var(--content-color-20);
- clear: both;
- margin: 0;
- overflow: hidden;
- padding: 2px;
- }
-}
-
-/* --- Editor Toolbar ------------------------------------------------------- */
-.add_toolbar {
- box-sizing: border-box;
-}
-.editor_toolbar {
- display: inline-block;
-
- .buttons {
- font-size: 0.75em;
-
- .clearfix();
- margin: 0 !important; // Locked since .buttons is pretty generic
- padding: 0 !important; // and other styles could easily interfere
-
- border-spacing: 0; // Chrome needs this
-
- .left { float: left; }
- .right { float: right; }
-
- .ui-button {
- background: var(--dark-gray-color-15);
- display: inline-block;
- height: 1.4em;
- line-height: 1.4;
- padding-top: 6px;
- padding-bottom: 6px;
-
- &:hover {
- background-color: var(--base-color-60);
- color: var(--contrast-content-white);
- }
- }
- }
-}
-
-/* --- Plugin Administration ------------------------------------------------ */
-
-
-/* --- User Administration -------------------------------------------------- */
-
-
-.times-rooms-grid {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- margin: 0 -0.5em;
- section {
- flex: 1;
- min-width: 23em;
- max-width: 100%;
- padding: 0 0.5em;
-
- &:empty {
- height: 0;
- }
-
- section {
- padding: 0;
- }
- }
-}
-
-
-.resources-grid {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- margin: 0 -0.5em;
- > section, div {
- flex: 1;
- display:block;
- margin: 0 0.5em 1.5ex;
- }
-}
-/* --- Veranstaltungsverwaltung --------------------------------------------- */
-.boxed-grid {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
-
- margin: 0 -0.5em;
-
- &, li {
- list-style: none;
- margin: 0;
- padding: 0;
- }
-
- li {
- flex: 1 1 23em;
- display: block;
- min-width: 23em;
- max-width: 100%;
- padding: 0 0.5em;
-
- &:empty {
- height: 0;
- }
- }
-
- a {
- box-sizing: border-box;
- background-color: var(--content-color-20);
- border: 1px solid var(--dark-gray-color-30);
- display: block;
- height: 11em;
- margin: 0 0 1em;
- overflow: hidden;
- padding: 1em;
- position: relative;
-
- &:hover {
- background-color: var(--content-color-10);
- border-color: var(--dark-gray-color-45);
-
- p {
- color: var(--black);
- }
- }
- }
- img {
- height: calc(100% - 20px);
- position: absolute;
- top: 10px;
- right: 10px;
- bottom: 10px;
- opacity: 0.1;
- }
-
-
- h3 {
- color: inherit;
- font-size: 2em;
- font-weight: normal;
- margin: 0;
- padding: 0;
- }
- p {
- color: var(--dark-gray-color-80);
- }
-}
-
-/* --- general style classes ------------------------------------------------ */
-.arrow_down {
- background: transparent top left no-repeat !important;
- .background-icon('arr_1down', 'clickable') !important;
-}
-.arrow_right {
- background: transparent top left no-repeat !important;
- .background-icon('arr_1right', 'clickable') !important;
-}
-h1:hover, h2:hover, h3:hover, h4:hover {
- .arrow_down {
- .background-icon('arr_1down', 'attention');
- }
- .arrow_right {
- .background-icon('arr_1right', 'attention');
- }
-}
-
-.invalid { border: 2px dotted red; } // an invalid form entry
-.invalid_message {
- display: none;
- font-weight: bold;
- color: red;
-}
-.invisible { display: none; }
-.no-break { white-space: nowrap; }
-
-/* classes for the news modules in Stud.IP ---------------------------------- */
-.news_item { margin: 3px; }
-
-/* error message */
-.error {
- background-color: var(--red-20);
- border: 1px solid var(--red-20);
- color: var(--black);
- display: none;
- font-size: 11px;
- padding: 4px 10px;
-
- p { margin: 0; }
- div.arrow {
- border: 10px solid;
- border-color: transparent transparent var(--red-20) transparent;
- height: 0;
- left: 60px;
- position: absolute;
- top: -18px;
- width: 0;
- }
-}
-
-.setting_info {
- font-size: 0.9em;
- font-style: italic;
- text-align: right;
- color: var(--base-gray);
-}
-
-pre.usercode {
- padding: 5px;
- background-color: rgba(255, 255, 255, 0.5);
- border: hsla(0, 0%, 0%, 0.1) 5px solid;
-}
-
-
-.semtree li {
- font-weight: bold;
- list-style: none;
- padding-bottom: 5px;
-}
-
-/* descriptional texts */
-p.info {
- padding: 10px;
- margin: 0;
-}
-
-.draggable { margin-top: 4px; }
-.draggable_folder { margin-bottom: 3px; }
-
-/* --- institute administration ------------------------------------------- */
-.admin-institute {
- input[type=text], input[type=tel], input[type=url], input[type=email], select:first-child {
- box-sizing: border-box;
- width: 98%;
- }
-}
-
-/* --- info text neu lecture --------------------------------------------- */
-div.info { padding-left: 1%; }
-
-/* --- rating --- */
-.printhead .rating img { padding: 0; }
-
-/* --- online list --- */
-.online-list {
- display: flex;
- flex-wrap: wrap;
- > div {
- flex: 1;
- flex-basis: 300px;
- margin-left: 10px;
- &:first-child {
- margin-left: 0px;
- }
- }
-}
-
-/* Simple Content Module */
-.scm {
- // Workaround for :last-child which is not supported by IE8
- .content_title {
- td {
- text-align: right;
- white-space: nowrap;
- &:first-child {
- text-align: left;
- white-space: normal;
- }
- }
- input[type=text] {
- width: 200px;
- }
- }
- .content_body {
- td {
- padding: 22px;
- }
- textarea {
- height: 200px;
- width: 100%;
- resize: vertical;
- }
- }
- .table_footer td {
- text-align: center;
- }
-}
-
-.no-js .hidden-no-js{
- display:none;
-}
-.js .hidden-js{
- display: none;
-}
-.no-js #enrollment ul{
- cursor: auto;
-}
-
-.svg-input {
- input {
- display: none;
- }
- svg, img {
- cursor: pointer;
- }
-}
-
-// course members
-a.new-member {
- .icon('after', 'star', 'attention', 8px);
-}
-
-// calculate difference in images and apply filter
-.recolor() {
- filter:
- hue-rotate(unit((hsvhue(@base-color) - hsvhue(#28497c)), deg))
- saturate((100 + hsvsaturation(@base-color) - hsvsaturation(#28497c)))
- brightness((100 + hsvvalue(@base-color) - hsvvalue(#28497c)));
-}
-
-.recolor-reset() {
- filter:
- hue-rotate(unit(hsvhue(#28497c) - hsvhue(@base-color), deg))
- saturate(100% - hsvsaturation(@base-color) + hsvsaturation(#28497c))
- brightness(100% - hsvvalue(@base-color) + hsvvalue(#28497c));
-}
-
-#sidebar .sidebar-image > img {
- .recolor;
-}
-
-.recolor {
- .recolor();
-}
-
-/**
- * Style the details tag according to stud.ip
- */
-details.studip {
- summary {
- .icon('before', 'arr_1right', 'clickable');
- cursor: pointer;
-
- &::before {
- vertical-align: text-bottom;
- }
-
- // Hide default icon
- list-style: none;
- &::-webkit-details-marker {
- display: none;
- }
- }
-
- &[open] {
- summary {
- .icon('before', 'arr_1down', 'clickable');
- }
- }
-
-}
-
-mark {
- background-color: var(--activity-color-60);
-}
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 606fa0738d1..d19621a586e 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -4,6 +4,7 @@
*******************************************************************************/
@import "mixins";
+@import "scss/font-face-lato";
@import "scss/variables";
@import "scss/breakpoints";
@import "scss/visibility";
@@ -60,6 +61,7 @@
@import "scss/lists";
@import "scss/loading-skeleton.scss";
@import "scss/messages";
+@import "scss/messagebox";
@import "scss/my_courses";
@import "scss/mvv";
@import "scss/navigation";
@@ -87,6 +89,7 @@
@import "scss/selects";
@import "scss/search";
@import "scss/skiplinks";
+@import "scss/schedule";
@import "scss/start";
@import "scss/scroll-to-top";
@import "scss/statusgroups";
@@ -95,6 +98,7 @@
@import "scss/studip-overlay";
@import "scss/studip-selection";
@import "scss/table_of_contents";
+@import "scss/tables";
@import "scss/tabs";
@import "scss/talk-bubble";
@import "scss/tooltip";
@@ -147,3 +151,464 @@ body#accessibility-forms-report_barrier {
@extend .sr-only;
}
}
+
+body {
+ background-repeat: repeat-x;
+ margin: 0;
+}
+
+
+ul + br, table + br {
+ display: none;
+}
+
+
+
+dd { margin-left: 1.5em; }
+
+input.placeholder { opacity: 0.7; }
+::placeholder {
+ color: rgba(0, 0, 0, 0.7);
+}
+
+table.content {
+ border-collapse: collapse;
+
+ td {
+ border: thin solid var(--dark-gray-color-80);
+ padding: 3px;
+ }
+
+ /* for CKE5 Table Border Colors */
+ &[style*='border-color'] {
+ border-width: thin;
+ border-style: solid;
+ }
+
+ td:first-child {
+ border-inline-start: unset;
+ }
+
+ td:last-child {
+ border-inline-end: unset;
+ }
+
+ tr:first-child td {
+ border-block-start: unset;
+ }
+
+ tr:last-child td {
+ border-block-end: unset;
+ }
+}
+
+
+
+
+ul.clean,
+ol.clean {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ > li {
+ margin-top: 2px;
+ margin-bottom: 2px;
+ padding: 0;
+ }
+}
+
+.hidden {
+ display: none;
+}
+
+/* for defining flex rows quickly: */
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
+
+/* --- media preview -------------------------------------------------------- */
+.preview {
+ img,
+ audio,
+ video {
+ max-height: 500px;
+ max-width: 750px;
+ }
+}
+
+.mainmenu {
+ margin-top: 7px;
+ text-align: left;
+ font-size: 16px;
+ padding: 5px;
+}
+
+
+
+.minor {
+ color: var(--black);
+ font-size: 0.75em;
+}
+.quiet {
+ color: var(--dark-gray-color-60);
+}
+
+.middle { vertical-align: middle; }
+.text-bottom { vertical-align: text-bottom; }
+.text-top { vertical-align: text-top !important; }
+.center { text-align: center; }
+.nodisplay { display: none; }
+
+.bordered {
+ border: 1px solid var(--content-color-40);
+ padding: 10px;
+}
+.bordered + .bordered {
+ border-top: none;
+}
+
+/* --- index.php anpassungen an den boxen zur vereinheitlichung ------------- */
+table.index_box {
+ border-collapse: collapse;
+ margin-bottom: 1em;
+ width: 100%;
+}
+
+td.index_box_cell {
+ background-color: var(--content-color-20);
+ padding: 4px;
+}
+
+/* --- Editor Toolbar ------------------------------------------------------- */
+.add_toolbar {
+ box-sizing: border-box;
+}
+.editor_toolbar {
+ display: inline-block;
+
+ .buttons {
+ font-size: 0.75em;
+
+ @include clearfix();
+ margin: 0 !important; // Locked since .buttons is pretty generic
+ padding: 0 !important; // and other styles could easily interfere
+
+ border-spacing: 0; // Chrome needs this
+
+ .left { float: left; }
+ .right { float: right; }
+
+ .ui-button {
+ background: var(--dark-gray-color-15);
+ display: inline-block;
+ height: 1.4em;
+ line-height: 1.4;
+ padding-top: 6px;
+ padding-bottom: 6px;
+
+ &:hover {
+ background-color: var(--base-color-60);
+ color: var(--contrast-content-white);
+ }
+ }
+ }
+}
+
+/* --- User Administration -------------------------------------------------- */
+
+
+.times-rooms-grid {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ margin: 0 -0.5em;
+ section {
+ flex: 1;
+ min-width: 23em;
+ max-width: 100%;
+ padding: 0 0.5em;
+
+ &:empty {
+ height: 0;
+ }
+
+ section {
+ padding: 0;
+ }
+ }
+}
+
+
+.resources-grid {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ margin: 0 -0.5em;
+ > section, div {
+ flex: 1;
+ display:block;
+ margin: 0 0.5em 1.5ex;
+ }
+}
+/* --- Veranstaltungsverwaltung --------------------------------------------- */
+.boxed-grid {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ margin: 0 -0.5em;
+
+ &, li {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ li {
+ flex: 1 1 23em;
+ display: block;
+ min-width: 23em;
+ max-width: 100%;
+ padding: 0 0.5em;
+
+ &:empty {
+ height: 0;
+ }
+ }
+
+ a {
+ box-sizing: border-box;
+ background-color: var(--content-color-20);
+ border: 1px solid var(--dark-gray-color-30);
+ display: block;
+ height: 11em;
+ margin: 0 0 1em;
+ overflow: hidden;
+ padding: 1em;
+ position: relative;
+
+ &:hover {
+ background-color: var(--content-color-10);
+ border-color: var(--dark-gray-color-45);
+
+ p {
+ color: var(--black);
+ }
+ }
+ }
+ img {
+ height: calc(100% - 20px);
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ bottom: 10px;
+ opacity: 0.1;
+ }
+
+
+ h3 {
+ color: inherit;
+ font-size: 2em;
+ font-weight: normal;
+ margin: 0;
+ padding: 0;
+ }
+ p {
+ color: var(--dark-gray-color-80);
+ }
+}
+
+/* --- general style classes ------------------------------------------------ */
+.arrow_down {
+ background: transparent top left no-repeat !important;
+ @include background-icon(arr_1down);
+}
+.arrow_right {
+ background: transparent top left no-repeat !important;
+ @include background-icon(arr_1right);
+}
+h1:hover, h2:hover, h3:hover, h4:hover {
+ .arrow_down {
+ @include background-icon(arr_1down, attention);
+ }
+ .arrow_right {
+ @include background-icon(arr_1right, attention);
+ }
+}
+
+.invalid { border: 2px dotted var(--red); } // an invalid form entry
+.invalid_message {
+ display: none;
+ font-weight: bold;
+ color: red;
+}
+.invisible { display: none; }
+.no-break { white-space: nowrap; }
+
+/* classes for the news modules in Stud.IP ---------------------------------- */
+.news_item { margin: 3px; }
+
+/* error message */
+.error {
+ background-color: var(--red-20);
+ border: 1px solid var(--red-20);
+ color: var(--black);
+ display: none;
+ font-size: 11px;
+ padding: 4px 10px;
+
+ p { margin: 0; }
+ div.arrow {
+ border: 10px solid;
+ border-color: transparent transparent var(--red-20) transparent;
+ height: 0;
+ left: 60px;
+ position: absolute;
+ top: -18px;
+ width: 0;
+ }
+}
+
+.setting_info {
+ font-size: 0.9em;
+ font-style: italic;
+ text-align: right;
+ color: var(--base-gray);
+}
+
+pre.usercode {
+ padding: 5px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border: hsla(0, 0%, 0%, 0.1) 5px solid;
+}
+
+
+.semtree li {
+ font-weight: bold;
+ list-style: none;
+ padding-bottom: 5px;
+}
+
+/* descriptional texts */
+p.info {
+ padding: 10px;
+ margin: 0;
+}
+
+.draggable { margin-top: 4px; }
+.draggable_folder { margin-bottom: 3px; }
+
+/* --- institute administration ------------------------------------------- */
+.admin-institute {
+ input[type=text], input[type=tel], input[type=url], input[type=email], select:first-child {
+ box-sizing: border-box;
+ width: 98%;
+ }
+}
+
+/* --- info text neu lecture --------------------------------------------- */
+div.info { padding-left: 1%; }
+
+/* --- rating --- */
+.printhead .rating img { padding: 0; }
+
+/* --- online list --- */
+.online-list {
+ display: flex;
+ flex-wrap: wrap;
+ > div {
+ flex: 1;
+ flex-basis: 300px;
+ margin-left: 10px;
+ &:first-child {
+ margin-left: 0px;
+ }
+ }
+}
+
+/* Simple Content Module */
+.scm {
+ // Workaround for :last-child which is not supported by IE8
+ .content_title {
+ td {
+ text-align: right;
+ white-space: nowrap;
+ &:first-child {
+ text-align: left;
+ white-space: normal;
+ }
+ }
+ input[type=text] {
+ width: 200px;
+ }
+ }
+ .content_body {
+ td {
+ padding: 22px;
+ }
+ textarea {
+ height: 200px;
+ width: 100%;
+ resize: vertical;
+ }
+ }
+ .table_footer td {
+ text-align: center;
+ }
+}
+
+.no-js .hidden-no-js{
+ display:none;
+}
+.js .hidden-js{
+ display: none;
+}
+.no-js #enrollment ul{
+ cursor: auto;
+}
+
+.svg-input {
+ input {
+ display: none;
+ }
+ svg, img {
+ cursor: pointer;
+ }
+}
+
+// course members
+a.new-member {
+ @include icon(after, star, attention, 8px);
+}
+
+/**
+ * Style the details tag according to stud.ip
+ */
+details.studip {
+ summary {
+ @include icon(before, arr_1right, clickable);
+ cursor: pointer;
+
+ &::before {
+ vertical-align: text-bottom;
+ }
+
+ // Hide default icon
+ list-style: none;
+ &::-webkit-details-marker {
+ display: none;
+ }
+ }
+
+ &[open] {
+ summary {
+ @include icon(before, arr_1down, clickable);
+ }
+ }
+
+}
+
+mark {
+ background-color: var(--activity-color-60);
+}
diff --git a/webpack.common.js b/webpack.common.js
index 8edc9c6b150..702a5b6531c 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -16,7 +16,7 @@ module.exports = {
"studip-statusgroups": assetsPath + "/entry-statusgroups.js",
"studip-wysiwyg": assetsPath + "/entry-wysiwyg.js",
"studip-installer": assetsPath + "/entry-installer.js",
- "print": path.resolve(__dirname, "resources/assets/stylesheets") + "/print.less",
+ "print": path.resolve(__dirname, "resources/assets/stylesheets") + "/print.scss",
"webservices": path.resolve(__dirname, "resources/assets/stylesheets") + "/webservices.scss",
"accessibility": path.resolve(__dirname, "resources/assets/stylesheets") + "/highcontrast.scss"
},
--
GitLab