diff --git a/resources/assets/stylesheets/less/inline-editing.less b/resources/assets/stylesheets/less/inline-editing.less
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/resources/assets/stylesheets/mixins/misc.scss b/resources/assets/stylesheets/mixins/misc.scss
index 98a1a96f97c9be41425835aad35677340fd27b76..626afd8c4d680690259246175d5f5bee7ade3e73 100644
--- a/resources/assets/stylesheets/mixins/misc.scss
+++ b/resources/assets/stylesheets/mixins/misc.scss
@@ -28,3 +28,8 @@
@mixin square($size) {
@include size($size, $size);
}
+
+// https://codepen.io/kennyglenn/pen/kxqWjP
+@function contrast($color, $dark, $light, $threshold: 50%) {
+ @return if(lightness($color) > $threshold, $light, $dark)
+}
diff --git a/resources/assets/stylesheets/mixins/studip.scss b/resources/assets/stylesheets/mixins/studip.scss
index 8e93f7f80003af82d72a4d600b414a70d312d7c5..b843a7e52803aedf9133cc5425108b0f2a5352ca 100644
--- a/resources/assets/stylesheets/mixins/studip.scss
+++ b/resources/assets/stylesheets/mixins/studip.scss
@@ -79,6 +79,15 @@
}
}
+@mixin 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;
+ }
+}
+
@mixin icon($position, $icon, $role, $size: 16px, $padding: 0) {
$position: unquote($position);
@@ -106,6 +115,21 @@
}
}
+// Mixin that replaces the navigation icon tags with css images
+@mixin navigation-icon($default-icon-name, $toggled-icon-name) {
+ img { display: none; }
+
+ display: inline-block;
+
+ @include background-icon($default-icon-name, clickable);
+ @include hide-text();
+ @include square(16px);
+
+ &.toggled {
+ @include background-icon($toggled-icon-name, clickable);
+ }
+}
+
@mixin empty-placeholder-image($icon, $background-color: $dark-gray-color-5) {
&::before,
&::after {
diff --git a/resources/assets/stylesheets/less/activityfeed.less b/resources/assets/stylesheets/scss/activityfeed.scss
similarity index 79%
rename from resources/assets/stylesheets/less/activityfeed.less
rename to resources/assets/stylesheets/scss/activityfeed.scss
index 75fe917216e7bfec2b3c0a8ce1377809e553109e..e1cb6aaf62b22f4b44085dc1233836a3b3ee85f5 100644
--- a/resources/assets/stylesheets/less/activityfeed.less
+++ b/resources/assets/stylesheets/scss/activityfeed.scss
@@ -5,14 +5,14 @@
overflow-y: auto;
.activity {
- border: 1px solid #d0d7e3;
+ border: 1px solid $content-color-40;
width: 95%;
margin: 30px auto;
}
.activity header {
- color: #28497c;
+ color: $base-color;
padding: 5px;
display: flex;
position: relative;
@@ -22,10 +22,10 @@
border-radius: 50%;
width: 42px;
height: 42px;
- background: @base-color;
+ background: $base-color;
position: absolute;
top: -20px;
- border: 3px solid white;
+ border: 3px solid $white;
cursor: pointer;
&.left {
@@ -38,7 +38,7 @@
img {
padding: 12px;
- .square(18px);
+ @include square(18px);
}
}
@@ -51,7 +51,7 @@
}
h3 {
display: inline;
- color: #28497c;
+ color: $base-color;
border-bottom: none;
font-size: 14px;
vertical-align: 6px;
@@ -62,7 +62,7 @@
max-width: 25px;
}
.activity-date{
- color: gray;
+ color: $base-gray;
font-size: 0.75em ;
margin: 0 0 0 30px;
display: block;
@@ -73,7 +73,7 @@
.activity-content{
padding: 5px;
- background-color: white;
+ background-color: $white;
margin-left: 30px;
display: none;
}
@@ -106,7 +106,7 @@
.activity-object-link ul {
- padding: 0px;
+ padding: 0;
}
.activity-object-link ul li {
@@ -117,7 +117,7 @@
.activity-day {
- color: gray;
+ color: $base-gray;
font-size: 0.75em ;
margin: 0 45%;
}
@@ -129,7 +129,7 @@
}
.loading-indicator span {
- background-color: #CCCCDD;
+ background-color: $light-gray-color;
border-radius: 50%;
height: 10px;
position: relative;
@@ -172,24 +172,11 @@
100% { transform: scale(1); }
}
-// Mixin that replaces the navigation icon tags with css images
-.navigation-icon(@default-icon-name, @toggled-icon-name) {
- img { display: none; }
- display: inline-block;
-
- .background-icon(@default-icon-name, 'clickable');
- .hide-text();
- .square(16px);
-
- &.toggled {
- .background-icon(@toggled-icon-name, 'clickable');
- }
-}
#toggle-all-activities {
- .navigation-icon('no-activity', 'activity');
+ @include navigation-icon(no-activity, activity);
}
#toggle-user-activities {
- .navigation-icon('visibility-invisible/headache', 'visibility-visible/headache');
+ @include navigation-icon(visibility-invisible/headache, visibility-visible/headache);
}
diff --git a/resources/assets/stylesheets/less/big-image-handler.less b/resources/assets/stylesheets/scss/big-image-handler.scss
similarity index 75%
rename from resources/assets/stylesheets/less/big-image-handler.less
rename to resources/assets/stylesheets/scss/big-image-handler.scss
index 1d913ea9e168a5a64159202b1730d42f6786544b..30504a36f89f0a7fbc190b6b33a3c064be8a8b64 100644
--- a/resources/assets/stylesheets/less/big-image-handler.less
+++ b/resources/assets/stylesheets/scss/big-image-handler.scss
@@ -1,6 +1,9 @@
+$bg-big-image-handler: mix($black, $white, 30%);
+
.oversized-image {
cursor: zoom-in;
}
+
.oversized-image-zoom {
position: fixed;
top: 0;
@@ -12,29 +15,29 @@
width: 100%;
z-index: 10000;
- background: fadeout(#000, 30%);
+ background: $bg-big-image-handler;
cursor: zoom-out;
display: flex;
justify-content: center;
align-items: center;
-
+
// The actual oversized image is loaded as a background image so we can
// use the background-size option "contain" which will ensure that the
// image will be visible even on small displays.
span {
- background-color: fadeout(#000, 30%);
+ background-color: $bg-big-image-handler;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
- border: 1px solid #fff;
- box-shadow: 0 0 20px fadeout(#fff, 50%);
+ border: 1px solid $white;
+ box-shadow: 0 0 20px mix($black, $white, 50%);
display: block;
max-width: 98%;
max-height: 98%;
-
+
img {
opacity: 0;
}
- }
-}
\ No newline at end of file
+ }
+}
diff --git a/resources/assets/stylesheets/less/consultation.less b/resources/assets/stylesheets/scss/consultation.scss
similarity index 65%
rename from resources/assets/stylesheets/less/consultation.less
rename to resources/assets/stylesheets/scss/consultation.scss
index 76e2468a6640de7ff4860ee28b3a81eca6ac9804..8c5bc37ae66c3c267e5eebe186b36e838dfb70d0 100644
--- a/resources/assets/stylesheets/less/consultation.less
+++ b/resources/assets/stylesheets/scss/consultation.scss
@@ -1,6 +1,6 @@
.consultation-note {
- border-bottom: 1px solid @light-gray-color-40;
- font-size: @font-size-small;
+ border-bottom: 1px solid $light-gray-color-40;
+ font-size: $font-size-small;
margin-bottom: 2px;
padding-bottom: 2px;
@@ -9,13 +9,13 @@
margin-bottom: 0;
padding-bottom: 0;
- border-top: 1px solid @light-gray-color-40;
+ border-top: 1px solid $light-gray-color-40;
margin-top: 2px;
padding-top: 2px;
}
&.shortened {
- .icon('before', 'info-circle', 'info', 12, 5px);
+ @include icon(before, info-circle, info, 12px, 5px);
transition: opacity 300ms;
&:not(:hover)::after {
opacity: 0.5;
@@ -23,10 +23,10 @@
}
}
.consultation-free {
- color: @green;
+ color: $green;
}
.consultation-occupied {
- color: @red;
+ color: $red;
}
.consultation-overview {
@@ -34,6 +34,6 @@
font-style: italic;
}
.slot-is-expired td {
- background-color: @dark-gray-color-10;
+ background-color: $dark-gray-color-10;
}
}
diff --git a/resources/assets/stylesheets/less/content.less b/resources/assets/stylesheets/scss/content.scss
similarity index 97%
rename from resources/assets/stylesheets/less/content.less
rename to resources/assets/stylesheets/scss/content.scss
index e27e8dbc0e0c8bfbf446e8c2267d609156673338..acfb03e19ecc3132778644cb4c655f204fef5215 100644
--- a/resources/assets/stylesheets/less/content.less
+++ b/resources/assets/stylesheets/scss/content.scss
@@ -2,7 +2,7 @@
background-color: #e3eaf6;
background-image: linear-gradient(#cdd9ed, #e3eaf6 40%, #e3eaf6);
background-repeat: no-repeat;
- border-top: 1px solid @content-color;
+ border-top: 1px solid $content-color;
line-height: 17pt;
height: 25px;
}
diff --git a/resources/assets/stylesheets/less/coursewizard.less b/resources/assets/stylesheets/scss/coursewizard.scss
similarity index 93%
rename from resources/assets/stylesheets/less/coursewizard.less
rename to resources/assets/stylesheets/scss/coursewizard.scss
index a6a00d29fd669ee328b338910b03e6d1200fa3af..12993f2f9c7374d188e16bb057dc34bcd3f8683d 100644
--- a/resources/assets/stylesheets/less/coursewizard.less
+++ b/resources/assets/stylesheets/scss/coursewizard.scss
@@ -18,13 +18,13 @@ div {
&#assigned {
float:left;
padding-right: 10px;
- width: ~"calc(50% - 10px)";
+ width: calc(50% - 10px);
}
&#studyareas {
- border-left: 1px solid #666666;
+ border-left: 1px solid $base-gray;
float: left;
padding-left: 10px;
- width: ~"calc(50% - 20px)";
+ width: calc(50% - 20px);
}
}
@@ -81,4 +81,4 @@ form.course-wizard-step-0 {
footer {
order: 100;
}
-}
\ No newline at end of file
+}
diff --git a/resources/assets/stylesheets/scss/dashboard.scss b/resources/assets/stylesheets/scss/dashboard.scss
index 9f2b547419ec360ea1fe573cc02bd874c1c56339..61c5c454369289f57030f698612c609a437f44a9 100644
--- a/resources/assets/stylesheets/scss/dashboard.scss
+++ b/resources/assets/stylesheets/scss/dashboard.scss
@@ -8,7 +8,7 @@
}
> li:nth-child(n+2) {
- border-top: 1px solid #d4dbe5;
+ border-top: 1px solid $content-color-40;
}
}
@@ -23,7 +23,7 @@
flex-wrap: wrap;
span {
- border-right: 1px solid #d4dbe5;
+ border-right: 1px solid $content-color-40;
margin-right: 0.3em;
padding-right: 0.4em;
}
diff --git a/resources/assets/stylesheets/less/dialog.less b/resources/assets/stylesheets/scss/dialog.scss
similarity index 76%
rename from resources/assets/stylesheets/less/dialog.less
rename to resources/assets/stylesheets/scss/dialog.scss
index 929620224af2a094cb49e2d29bf774bd1373bd62..36e666e58c2715a24969d956380becaa5f9447d6 100644
--- a/resources/assets/stylesheets/less/dialog.less
+++ b/resources/assets/stylesheets/scss/dialog.scss
@@ -1,5 +1,5 @@
.ui-widget-overlay {
- background: fadeout(mix(@base-gray, #fff, 85%), 21%);
+ background: transparentize($base-gray, .2);
opacity: 1;
position: fixed;
}
@@ -7,22 +7,22 @@
.ui-dialog.ui-widget.ui-widget-content {
border: 0;
padding: 3px;
- box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
+ box-shadow: 0 0 8px rgba(0,0,0,0.5);
.hide-in-dialog {
display: none;
}
.ui-dialog-titlebar {
- background: @brand-color-darker;
+ background: $brand-color-darker;
border: 0;
- color: @contrast-content-white;
+ color: $contrast-content-white;
font-size:1.3em;
font-weight: normal;
}
.ui-dialog-titlebar-close {
- .square(32px);
+ @include square(32px);
background: inherit;
border: 0;
line-height:32px;
@@ -31,15 +31,15 @@
text-align:center;
&:hover {
- .square(32px);
+ @include square(32px);
background: inherit;
border: 0;
margin-top:-16px;
padding: 0;
}
.ui-icon {
- .square(16px);
- .background-icon('decline', 'info_alt');
+ @include square(16px);
+ @include background-icon(decline, info_alt);
background-position: 0;
display:inline-block;
margin: 0;
@@ -49,7 +49,7 @@
transform: translate(-50%, -50%);
&:hover{
- .background-icon('decline', 'info_alt');
+ @include background-icon(decline, info_alt);
}
}
}
@@ -60,7 +60,7 @@
.ui-dialog-buttonpane {
padding: 0.5em 0.4em;
margin: 0 1em;
- border-color: @base-color-20;
+ border-color: $base-color-20;
.ui-dialog-buttonset {
text-align: center;
@@ -68,7 +68,7 @@
white-space: nowrap;
}
.ui-button {
- .button(); // Include button mixin
+ @include button(); // Include button mixin
font-weight: normal;
&.accept,
@@ -80,25 +80,25 @@
}
&.accept {
- .button-with-icon("accept", "clickable", "info_alt");
+ @include button-with-icon(accept, clickable, info_alt);
}
&.cancel {
- .button-with-icon("decline", "clickable", "info_alt");
+ @include button-with-icon(decline, clickable, info_alt);
}
&.download {
- .button-with-icon("download2", "clickable", "info_alt");
+ @include button-with-icon(download2, clickable, info_alt);
}
&.disabled,
&[disabled] {
- background: @light-gray-color-20;
+ background: $light-gray-color-20;
cursor: default;
opacity: 0.65;
&:hover {
- color: @base-color;
+ color: $base-color;
}
}
@@ -115,12 +115,12 @@
}
}
.ui-dialog-titlebar-wiki {
- .background-icon('question-circle', 'info_alt', 24);
+ @include background-icon(question-circle, info_alt, 24);
background-position: center;
background-repeat: no-repeat;
display: inline-block;
position: absolute;
- .square(32px);
+ @include square(32px);
margin-top: -16px;
top: 50%;
right: 34px; // This is ugly but hard to avoid since the close button's position on a dialog is also hardcoded
@@ -144,8 +144,8 @@
min-width: 30em;
.ui-dialog-titlebar {
- background-color: @yellow;
- color: black;
+ background-color: $yellow;
+ color: $contrast-content-white;
text-align: left;
}
.ui-dialog-titlebar-close {
@@ -153,14 +153,14 @@
border: 0;
.ui-icon, .ui-icon:hover {
- .background-icon('decline', 'clickable');
+ @include background-icon(decline, clickable);
background-position: 0;
}
}
.ui-dialog-content {
box-sizing: border-box;
- .background-icon('question-circle-full', 'status-yellow');
+ @include background-icon(question-circle-full, status-yellow);
background-position: 12px 8px;
background-repeat: no-repeat;
background-size: 32px;
@@ -181,9 +181,9 @@
}
.ui-dialog.studip-lightbox {
- @arrow-distance: 8px;
- @arrow-size: 32px;
- @arrow-zoom: 16px;
+ $arrow-distance: 8px;
+ $arrow-size: 32px;
+ $arrow-zoom: 16px;
.wrapper {
position: absolute;
top: 0;
@@ -217,24 +217,24 @@
left: 0;
right: 50%;
- .icon('before', 'arr_1left', 'clickable', @arrow-size);
+ @include icon(before, arr_1left, clickable, $arrow-size);
&::before {
position: absolute;
- left: @arrow-distance;
+ left: $arrow-distance;
top: 50%;
transform: translate(0, -50%);
z-index: 2;
}
&::after {
- .square((@arrow-size + @arrow-zoom));
+ @include square(($arrow-size + $arrow-zoom));
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
- background-color: @white;
+ background-color: $white;
content: '';
display: block;
@@ -245,24 +245,24 @@
right: 0;
left: 50%;
- .icon('before', 'arr_1right', 'clickable', @arrow-size);
+ @include icon(before, arr_1right, clickable, $arrow-size);
&::before {
position: absolute;
- right: @arrow-distance;
+ right: $arrow-distance;
top: 50%;
transform: translate(0, -50%);
z-index: 2;
}
&::after {
- .square((@arrow-size + @arrow-zoom));
+ @include square(($arrow-size + $arrow-zoom));
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
- background-color: @white;
+ background-color: $white;
content: '';
display: block;
@@ -282,16 +282,16 @@
white-space:normal;
html.responsive-display & {
- @gap: 10px;
+ $gap: 10px;
display: flex;
flex-wrap: wrap;
- justify-content: space-space-between;
- margin: -@gap 0 0 -@gap;
+ justify-content: space-between;
+ margin: -$gap 0 0 -$gap;
.ui-button {
flex: 1;
- margin: @gap 0 0 @gap;
+ margin: $gap 0 0 $gap;
overflow-x: hidden;
text-overflow: ellipsis;
}
diff --git a/resources/assets/stylesheets/less/documents.less b/resources/assets/stylesheets/scss/documents.scss
similarity index 77%
rename from resources/assets/stylesheets/less/documents.less
rename to resources/assets/stylesheets/scss/documents.scss
index c2b0a494dc35328565b7dac318de3fc87f27c24a..3d34fd414bb19447ad2bea459c4a5351a5a14fa1 100644
--- a/resources/assets/stylesheets/less/documents.less
+++ b/resources/assets/stylesheets/scss/documents.scss
@@ -12,7 +12,7 @@
z-index: 1;
> a, ul {
- background-color: #fff;
+ background-color: $white;
padding: 5px;
}
> a {
@@ -21,7 +21,7 @@
&.extendable:hover {
> a, > ul {
- box-shadow: 0 4px 3px #aaa;
+ box-shadow: 0 4px 3px $base-gray;
}
ul {
display: flex;
@@ -40,31 +40,31 @@
line-height: 1.5em;
a {
- .background-icon('folder-parent', 'clickable', 24);
+ @include background-icon(folder-parent, clickable, 24);
background-position: left center;
background-repeat: no-repeat;
padding-left: 30px;
}
&:first-child a {
- .background-icon('folder-empty', 'clickable', 24);
+ @include background-icon(folder-empty, clickable, 24);
}
}
}
}
.document-dialog {
- @info-width: 150px;
- .clearfix;
+ $info-width: 150px;
+ @include clearfix();
> aside {
float: left;
- width: @info-width;
+ width: $info-width;
}
.document-dialog-icon {
text-align: center;
}
> div {
- border-left: 1px dashed #888;
- margin-left: @info-width;
+ border-left: 1px dashed $dark-gray-color;
+ margin-left: $info-width;
min-height: 100%;
max-height: 100%;
overflow-y: auto;
@@ -85,18 +85,18 @@
.documents.dragging {
[data-file]:not([data-folder]) {
- background-color: @light-gray-color-40;
+ background-color: $light-gray-color-40;
opacity: 0.6;
}
}
.documents {
[data-folder].dropping {
- background-color: @red-40;
+ background-color: $red-40;
}
}
.document-draggable-helper {
- background-color: @activity-color-40 !important;
+ background-color: $activity-color-40 !important;
opacity: 1 !important;
td {
border-bottom: 0 !important;
diff --git a/resources/assets/stylesheets/less/evaluation.less b/resources/assets/stylesheets/scss/evaluation.scss
similarity index 85%
rename from resources/assets/stylesheets/less/evaluation.less
rename to resources/assets/stylesheets/scss/evaluation.scss
index 92d595d4b32955ab9593d168ac96fd686fd5073d..864b8cc96ca7d124927e6aa134cc8bdc3907fb26 100644
--- a/resources/assets/stylesheets/less/evaluation.less
+++ b/resources/assets/stylesheets/scss/evaluation.scss
@@ -2,15 +2,15 @@
.eval_title {
font-size: 1.2em;
font-weight: bold;
- color: #24437c;
+ color: $base-color;
}
.eval_error {
- color: #E00000;
+ color: $red;
}
.eval_success {
- color: #008000;
+ color: $green;
}
.eval_info {
@@ -35,6 +35,6 @@
h3.eval {
font-size: 1.3em;
- color: #000000;
+ color: $black;
font-weight: bold;
}
diff --git a/resources/assets/stylesheets/less/header.less b/resources/assets/stylesheets/scss/header.scss
similarity index 71%
rename from resources/assets/stylesheets/less/header.less
rename to resources/assets/stylesheets/scss/header.scss
index 118fd068acc54dc5eea764381026ff4c650d3903..95eba8f261ec0f477c2d67d04386988eb87e7982 100644
--- a/resources/assets/stylesheets/less/header.less
+++ b/resources/assets/stylesheets/scss/header.scss
@@ -1,14 +1,14 @@
/* --- header.css ----------------------------------------------------------- */
#layout_wrapper {
box-sizing: border-box;
- padding-top: @bar-bottom-container-height;
+ padding-top: $bar-bottom-container-height;
}
#barBottomContainer {
- background-color: @base-color;
- border: 1px @brand-color-darker;
- color: @contrast-content-white;
+ background-color: $base-color;
+ border: 1px $brand-color-darker;
+ color: $contrast-content-white;
border-bottom-style: solid;
- height: @bar-bottom-container-height;
+ height: $bar-bottom-container-height;
width: 100%;
display: flex;
@@ -18,27 +18,27 @@
transform: translate(0, 0) !important; // We need !important due to the horizontal scroll handler
position: fixed;
- top: 0px;
+ top: 0;
z-index: 10000;
}
#barBottomLeft,
#barTopFont {
flex: 0 0 auto;
- padding: 0px 15px;
+ padding: 0 15px;
z-index: 2;
}
// Fix header covering relevant other areas
-// @see https://gitlab.studip.de/studip/studip/-/issues/1019
+// $see https://gitlab.studip.de/studip/studip/-/issues/1019
html {
- scroll-padding-top: calc(@bar-bottom-container-height + 1em);
+ scroll-padding-top: calc($bar-bottom-container-height + 1em);
}
#layout_footer,
#barBottomright {
> ul > li > a {
- color: @contrast-content-white;
+ color: $contrast-content-white;
margin: 0 6px;
text-decoration: none;
&:hover {
@@ -55,7 +55,7 @@ html {
justify-content: space-between;
list-style-type: none;
min-height: 30px;
- padding: 0px;
+ padding: 0;
> li {
margin-left: 2px;
margin-right: 2px;
@@ -72,10 +72,10 @@ html {
justify-content: space-between;
list-style-type: none;
height: 40px;
- padding: 0px;
+ padding: 0;
> li {
margin: 2px;
- padding: 0px 10px;
+ padding: 0 10px;
}
}
}
@@ -91,10 +91,10 @@ html {
z-index: 1003;
.action-menu-icon {
- border: 1px solid @dark-gray-color-40;
- background-color: @dark-gray-color-5;
+ border: 1px solid $dark-gray-color-40;
+ background-color: $dark-gray-color-5;
height: 28px;
- margin: 0;
+ margin: 0 32px 0 0;
position: relative;
width: 28px;
z-index: 1;
@@ -105,8 +105,7 @@ html {
}
// Add arrow on the right
- margin-right: 32px;
- .icon('after', 'arr_1down', 'info_alt');
+ @include icon(after, arr_1down, info_alt);
&::after {
background-position: center;
@@ -122,7 +121,7 @@ html {
z-index: 1002;
.action-menu-title{
- margin: 0em 0 0.3em;
+ margin: 0 0 0.3em;
}
.action-menu-content {
@@ -131,22 +130,22 @@ html {
right: 0;
/*padding: 4px 28px 4px 8px;*/
- background: #fff;
- box-shadow: 1px 1px 1px @dark-gray-color-60;
+ background: $white;
+ box-shadow: 1px 1px 1px $dark-gray-color-60;
text-align: left;
white-space: nowrap;
a:link,
a:visited {
- color: @base-color;
+ color: $base-color;
}
a:hover,
a:active {
- color: @active-color;
+ color: $active-color;
}
div {
- color: #000;
+ color: $black;
}
}
}
@@ -157,19 +156,19 @@ html {
#barTopFont {
flex: 1;
- color: @white;
- margin-left: 0px;
+ color: $white;
+ margin-left: 0;
z-index: 1002;
- line-height: @bar-bottom-container-height;
+ line-height: $bar-bottom-container-height;
white-space: nowrap;
}
.studip-logo {
- .hide-text();
+ @include hide-text();
background-repeat: no-repeat;
- .retina-background-image('logos/studip4-logo.png', 'logos/studip4-logo@2x.png', 130px, 92px);
- background-image: none, url("@{image-path}/logos/studip4-logo.svg");
+ @include retina-background-image('logos/studip4-logo.png', 'logos/studip4-logo$2x.png', 130px, 92px);
+ background-image: none, url("#{$image-path}/logos/studip4-logo.svg");
background-size: 130px 92px;
display: block;
@@ -191,8 +190,8 @@ html {
#flex-header {
- height: @header-height;
- background-color: @dark-gray-color-5;
+ height: $header-height;
+ background-color: $dark-gray-color-5;
position: relative;
z-index: 3;
@@ -205,7 +204,7 @@ html {
padding: 0;
text-indent: -150px;
- @media not (prefers-reduced-motion) {
+ @media not prefers-reduced-motion {
transition: all 500ms;
}
}
diff --git a/resources/assets/stylesheets/scss/headings.scss b/resources/assets/stylesheets/scss/headings.scss
new file mode 100644
index 0000000000000000000000000000000000000000..58209d8a4ec8112f6247059dfb45ad9496b54259
--- /dev/null
+++ b/resources/assets/stylesheets/scss/headings.scss
@@ -0,0 +1,15 @@
+h1.topic, h2.topic, h3.topic {
+ font-weight: bold;
+ line-height: 1em;
+ margin-bottom: 0.1em;
+ margin-top: 0.1em;
+ padding: 0.1em;
+}
+
+h1.topic {
+ font-size: 1.6em;
+}
+
+h2.topic, h3.topic {
+ font-size: 1.2em;
+}
diff --git a/resources/assets/stylesheets/less/helpbar.less b/resources/assets/stylesheets/scss/helpbar.scss
similarity index 69%
rename from resources/assets/stylesheets/less/helpbar.less
rename to resources/assets/stylesheets/scss/helpbar.scss
index 95539db774007404619b84a3e49929979a368f80..14370d6e0515736266bfe78abd31eab4d407be18 100644
--- a/resources/assets/stylesheets/less/helpbar.less
+++ b/resources/assets/stylesheets/scss/helpbar.scss
@@ -1,4 +1,5 @@
-@helpbar-width: 250px;
+$helpbar-width: 250px;
+$border-width: 4px;
.helpbar-toggler {
width: 24px;
@@ -14,24 +15,25 @@
position: relative;
top: 1px;
min-width: 32px;
- /*width: 100%;*/
right: 12px;
float: right;
h2, h3 {
border-bottom: 0;
- color: @white;
+ color: $white;
font-size: 1em;
font-weight: normal;
margin: 0;
padding: 0;
}
+
h2 {
font-size: 1.2em;
}
+
h3 {
- border-bottom: 1px dotted @base-color-80;
+ border-bottom: 1px dotted $base-color-80;
font-size: 1.1em;
margin-bottom: 2px;
padding-bottom: 2px;
@@ -43,23 +45,20 @@
}
.helpbar {
- background-color: @base-color;
+ background-color: $base-color;
padding: 8px;
box-sizing: border-box;
-
- @border-width: 4px;
-
position: absolute;
right: -2px;
- top: 0px;
+ top: 0;
- width: @helpbar-width;
+ width: $helpbar-width;
z-index: 1000;
&::before {
- border-bottom: 2px solid @base-color-80;
- border-left: @border-width solid transparent;
- border-right: @border-width solid transparent;
+ border-bottom: 2px solid $base-color-80;
+ border-left: $border-width solid transparent;
+ border-right: $border-width solid transparent;
content: '';
display: none;
position: absolute;
@@ -79,55 +78,64 @@
}
.helpbar-widgets {
- color: @white;
+ color: $white;
list-style: none;
padding: 0;
a {
vertical-align: text-bottom;
}
+
a:link, a:visited {
- color: @white;
+ color: $white;
}
+
a:hover, a:active {
+ color: $white;
text-decoration: underline;
}
+
> li {
- border-top: 1px solid @content-color;
- padding: 3px 0px;
+ border-top: 1px solid $content-color;
+ padding: 3px 0;
margin: 0 .25em;
}
}
+
.help-tours {
list-style: none;
margin: 0;
padding: 0;
+
a {
- .background-icon('play', 'info_alt');
+ @include background-icon(play, info_alt);
background-position: left 2px;
background-repeat: no-repeat;
display: block;
padding-left: 20px;
+
&.tour-paused {
- .background-icon('pause', 'info_alt');
+ @include background-icon(pause, info_alt);
}
+
&.tour-completed {
- .background-icon('accept', 'info_alt');
+ @include background-icon(accept, info_alt);
}
}
}
a.link-extern {
- .icon('before', 'link-extern', 'info_alt');
+ @include icon(before, link-extern, info_alt);
}
+
a.link-intern {
- .icon('before', 'link-intern', 'info_alt');
+ @include icon(before, link-intern, info_alt);
}
}
section.big-help-box {
- background-color: #d4dbe5;
- border: 1px solid #7e92b0;
+ background-color: $content-color-40;
+ border: 1px solid $content-color-80;
padding: 0.5em;
margin-top: 0.5em;
text-align: center;
@@ -142,4 +150,3 @@ section.big-help-box {
flex-grow: 5;
}
}
-
diff --git a/resources/assets/stylesheets/less/ilias-interface.less b/resources/assets/stylesheets/scss/ilias-interface.scss
similarity index 66%
rename from resources/assets/stylesheets/less/ilias-interface.less
rename to resources/assets/stylesheets/scss/ilias-interface.scss
index a404ba8dc9dbd713bd9339f724e471fafd99bf5d..cafd77bacfb7c200571be852f38f519099f7da31 100644
--- a/resources/assets/stylesheets/less/ilias-interface.less
+++ b/resources/assets/stylesheets/scss/ilias-interface.scss
@@ -1,21 +1,28 @@
/* --- Styles for ilias interface ------------------------------------------- */
-//TODO: lessify
+
#ilias_module_details_window, #ilias_module_edit_window {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
}
+
#ilias_module_aside {
+ div {
+ &.ilias-module-icon {
+ img {
+ margin-left: 20%;
+ width: 60%;
+ max-height: 16em;
+ height: 100%;
+ }
+ }
+ }
+
width: calc(30% - 10px);
max-width: calc(30% - 10px);
}
-#ilias_module_aside div.ilias-module-icon img {
- margin-left: 20%;
- width: 60%;
- max-height: 16em;
- height: 100%;
-}
+
#ilias_module_preview {
width: calc(70% - 10px);
max-width: calc(70% - 10px);
diff --git a/resources/assets/stylesheets/scss/plugins.scss b/resources/assets/stylesheets/scss/plugins.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2bcc6fa4b1d94b27b561744c394f3d0e34ffe94b
--- /dev/null
+++ b/resources/assets/stylesheets/scss/plugins.scss
@@ -0,0 +1,56 @@
+.plugin_image {
+ text-align: center;
+ width: 88px;
+ vertical-align: top;
+}
+
+.plugin_score {
+ white-space: nowrap;
+}
+
+.plugin_install {
+ text-align: center;
+}
+
+.plugin_description {
+ a.read_more_link {
+ display: none;
+ }
+}
+
+.plugin_description.short {
+ div {
+ max-height: 15em;
+ overflow: hidden;
+ position: relative;
+
+ p.read_more {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 4em;
+ margin: 0;
+ background-image: linear-gradient(to bottom, rgba(255,0,0,0), $white)
+ }
+ }
+
+ .read_more_link {
+ @include icon(before, add, clickable);
+
+ span {
+ vertical-align: middle;
+ padding-top: 3px;
+ }
+ }
+
+ a {
+ display: inline-block;
+ }
+}
+
+
+img.plugin_preview {
+ height: 60px;
+ width: 80px;
+}
diff --git a/resources/assets/stylesheets/less/statusgroups.less b/resources/assets/stylesheets/scss/statusgroups.scss
similarity index 77%
rename from resources/assets/stylesheets/less/statusgroups.less
rename to resources/assets/stylesheets/scss/statusgroups.scss
index 278f632e6a1ed7012a6c66ca688b2b5acc4f71df..7e3776b744f88963ddb73815d3783de8344286d5 100644
--- a/resources/assets/stylesheets/less/statusgroups.less
+++ b/resources/assets/stylesheets/scss/statusgroups.scss
@@ -19,8 +19,8 @@ section.course-statusgroups {
}
section {
- border-left: 1px solid @content-color-20;
- border-right: 1px solid @content-color-20;
+ border-left: 1px solid $content-color-20;
+ border-right: 1px solid $content-color-20;
table {
td.memberactions {
@@ -29,7 +29,7 @@ section.course-statusgroups {
thead {
tr th {
- background-color: @content-color-20;
+ background-color: $content-color-20;
}
}
@@ -37,14 +37,14 @@ section.course-statusgroups {
tr td {
span.member-invisible {
font-style: italic;
- color: @light-gray-color;
+ color: $light-gray-color;
}
}
}
tfoot {
tr td {
- background-color: @content-color-20;
+ background-color: $content-color-20;
padding-left: 5px;
padding-right: 0;
}
@@ -58,14 +58,14 @@ section.course-statusgroups {
}
&.draggable.open {
- background-color: @white;
+ background-color: $white;
}
}
footer {
- background-color: @content-color-20;
- border-top: 1px solid @black;
+ background-color: $content-color-20;
+ border-top: 1px solid $black;
font-size: medium;
padding: 5px;
padding-left: 18px;
@@ -79,7 +79,7 @@ section.course-statusgroups {
.sg-sortable-handle {
cursor: move;
- background-image: url("@{image-path}/anfasser_24.png");
+ background-image: url("#{$image-path}/anfasser_24.png");
background-position: 3px center;
background-repeat: no-repeat;
width: 12px;
diff --git a/resources/assets/stylesheets/less/studip-overlay.less b/resources/assets/stylesheets/scss/studip-overlay.scss
similarity index 67%
rename from resources/assets/stylesheets/less/studip-overlay.less
rename to resources/assets/stylesheets/scss/studip-overlay.scss
index e36c11d7118081d3efec0d97fbf323fbbdec4652..a48bc72a571cf5c8a37ab5e35795ee48c342d7ca 100644
--- a/resources/assets/stylesheets/less/studip-overlay.less
+++ b/resources/assets/stylesheets/scss/studip-overlay.scss
@@ -1,5 +1,13 @@
+@mixin center()
+{
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
.modal-overlay {
- .ui-widget-overlay;
+ @extend .ui-widget-overlay;
position: fixed;
left: 0;
@@ -8,46 +16,42 @@
bottom: 0;
&-local {
- background-color: fadeout(@light-gray-color, 50%);
+ background-color: mix($light-gray-color, $white, 50%);
position: absolute;
}
+
&-ajax {
// Fallback to gif for browsers that don't support svg. Fortunately,
// the support for multiple background images and svg covers the same
// browsers (except for some old android versions that we can neglect).
// Thus said, if the loading animation looks ugly - update your
// browser ffs!
- background-image: url("@{image-path}/ajax_indicator_small.gif");
- background-image: none, url("@{image-path}/ajax-indicator-white.svg");
+ background-image: url("#{$image-path}/ajax_indicator_small.gif");
+ background-image: none, url("#{$image-path}/ajax-indicator-white.svg");
background-position: center;
background-repeat: no-repeat;
}
+
&-ajax.modal-overlay-dark {
- background-image: none, url("@{image-path}/ajax-indicator-black.svg");
+ background-image: none, url("#{$image-path}/ajax-indicator-black.svg");
}
// Progress
&.ui-front {
- .center() {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- }
-
cursor: wait;
h1 {
- .center();
+ @include center();
margin-bottom: 0;
padding-bottom: 100px;
- color: #fff;
+ color: $white;
border-bottom: 0;
}
+
progress {
- .center();
+ @include center();
margin-top: 45px;
width: 80%;
@@ -59,15 +63,16 @@
border: none;
border-radius: 2px;
- box-shadow: 0 0 3px @light-gray-color-20;
+ box-shadow: 0 0 3px $light-gray-color-20;
- background-color: @light-gray-color;
+ background-color: $light-gray-color;
&::-moz-progress-bar, &::-webkit-progress-value {
- background-color: @yellow-40;
+ background-color: $yellow-40;
transition: all 300ms;
}
}
+
ul.overlay-progress-log {
position: absolute;
top: 50%;
@@ -78,10 +83,9 @@
margin: 60px 0 0;
padding: 0;
text-align: center;
- color: white;
+ color: $white;
max-height: 120px;
overflow: hidden;
}
}
-
}
diff --git a/resources/assets/stylesheets/less/studip-selection.less b/resources/assets/stylesheets/scss/studip-selection.scss
similarity index 81%
rename from resources/assets/stylesheets/less/studip-selection.less
rename to resources/assets/stylesheets/scss/studip-selection.scss
index 24044cc811226a81c7cafb0a46621e8f24336da4..6985dffad117b0bf00ac53c6118a11df3566e469 100644
--- a/resources/assets/stylesheets/less/studip-selection.less
+++ b/resources/assets/stylesheets/scss/studip-selection.scss
@@ -6,6 +6,7 @@
> * {
flex: 1 0 100%;
}
+
> legend {
margin-bottom: 0 !important;
}
@@ -16,31 +17,34 @@
margin: 0;
padding: 0;
}
+
li {
display: inline-block;
vertical-align: top;
}
li:not(.empty-placeholder) {
- color: @base-color;
+ color: $base-color;
cursor: pointer;
margin: 1px 0;
padding-right: 0.5em;
}
li.empty-placeholder {
- color: fadeout(@text-color, 30%);
+ color: mix($text-color, $white, 30%);
+
&:not(:only-child) {
display: none;
}
}
.studip-selection-selectable li.empty-placeholder {
- color: @text-color;
+ color: $text-color;
padding-left: 20px;
position: relative;
- .icon('before', 'info-circle', 'info');
+ @include icon(before, info-circle, info);
+
&::before {
position: absolute;
left: 0;
@@ -54,10 +58,11 @@
}
.studip-selection-selected .studip-selection-label {
- .icon('before', 'radiobutton-checked', 'clickable');
+ @include icon(before, radiobutton-checked, clickable);
}
+
.studip-selection-selectable .studip-selection-label {
- .icon('before', 'radiobutton-unchecked', 'clickable');
+ @include icon(before, radiobutton-unchecked, clickable);
}
.studip-selection-image + .studip-selection-label {
@@ -69,13 +74,14 @@
.studip-selection-selected li:hover {
.studip-selection-image,
.studip-selection-label::before {
- .background-icon('remove-circle-full', 'clickable');
+ @include background-icon(remove-circle-full, clickable);
}
}
+
.studip-selection-selectable li:hover {
.studip-selection-image,
.studip-selection-label::before {
- .background-icon('add-circle-full', 'clickable');
+ @include background-icon(add-circle-full, clickable);
}
}
@@ -93,12 +99,14 @@
background-position: center;
background-repeat: no-repeat;
background-size: contain;
+
img {
opacity: 0;
}
}
+
.studip-selection-label {
- color: @active-color;
+ color: $active-color;
}
}
}
diff --git a/resources/assets/stylesheets/scss/user-administration.scss b/resources/assets/stylesheets/scss/user-administration.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ef648378de485339841f9461ad3120f5e71926e8
--- /dev/null
+++ b/resources/assets/stylesheets/scss/user-administration.scss
@@ -0,0 +1,4 @@
+
+.user_form {
+ width: 250px;
+}
diff --git a/resources/assets/stylesheets/studip.less b/resources/assets/stylesheets/studip.less
index 2a8024fa64a4ab4c5defe52a18424daae3799b4b..547b141e887d5a7019e56b22668e7888de4a3c9a 100644
--- a/resources/assets/stylesheets/studip.less
+++ b/resources/assets/stylesheets/studip.less
@@ -13,17 +13,13 @@
@import "less/tables.less";
@import "less/forms.less";
-@import "less/content.less";
@import "less/layouts.less";
-@import "less/header.less";
@import "less/personal-notifications.less";
@import "less/navigation.less";
@import "less/clipboard.less";
-@import "less/helpbar.less";
@import "less/content_box.less";
-@import "less/studip-selection.less";
@import "less/avatar.less";
@import "less/buttons.less";
@@ -34,24 +30,14 @@
@import "less/calendar.less";
@import "less/contacts.less";
@import "less/cronjobs.less";
-@import "less/documents.less";
@import "less/files.less";
-@import "less/evaluation.less";
@import "less/schedule.less";
@import "less/study-area-selection.less";
-@import "less/ilias-interface.less";
@import "less/opengraph.less";
-@import "less/statusgroups.less";
-@import "less/consultation.less";
-@import "less/activityfeed.less";
@import "less/mobile.less";
-@import "less/dialog.less";
-@import "less/studip-overlay.less";
@import "less/selects.less";
-@import "less/coursewizard.less";
@import "less/smileys.less";
-@import "less/big-image-handler.less";
@import "less/globalsearch.less";
@import "less/gradebook.less";
@@ -76,24 +62,7 @@ ul + br, table + br {
display: none;
}
-blockquote {
- border-left: 3px solid @brand-color-lighter;
- padding: 5px;
- margin: 8px;
- padding-left: 8px;
- margin-left: 0px;
- background-color: rgba(0,0,0,0.05);
- > .author {
- background-color: @brand-color-lighter;
- padding: 4px;
- margin-left: -10px;
- padding-left: 15px;
- margin-right: -5px;
- color: white;
- margin-top: -5px;
- margin-bottom: 5px;
- }
-}
+
dd { margin-left: 1.5em; }
@@ -111,17 +80,8 @@ table.content {
}
}
-div.indent { margin-left: 2em; }
-h1.topic, h2.topic, h3.topic {
- font-weight: bold;
- line-height: 1em;
- margin-bottom: 0.1em;
- margin-top: 0.1em;
- padding: 0.1em;
-}
-h1.topic { font-size: 1.6em; }
-h2.topic, h3.topic { font-size: 1.2em; }
+
ul.clean, ol.clean {
list-style-type: none;
@@ -265,62 +225,10 @@ div.overdiv {
}
/* --- Plugin Administration ------------------------------------------------ */
-.plugin_image {
- text-align: center;
- width: 88px;
- vertical-align: top;
-}
-.plugin_score { white-space: nowrap; }
-.plugin_install { text-align: center; }
-
-.plugin_description {
- a.read_more_link {
- display: none;
- }
-}
-
-.plugin_description.short {
- div {
- max-height: 15em;
- overflow: hidden;
- position: relative;
-
- p.read_more {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 4em;
- margin: 0;
- background-image: linear-gradient(to bottom, fadeout(@white, 100%), @white)
- }
- }
-
- .read_more_link {
- .icon('before', 'add', 'clickable');
-
- span {
- vertical-align: middle;
- padding-top: 3px;
- }
- }
-
- a {
- display: inline-block;
- }
-}
-
-
-
-img.plugin_preview {
- height: 60px;
- width: 80px;
-}
/* --- User Administration -------------------------------------------------- */
-.user_form { width: 250px; }
.times-rooms-grid {
display: flex;
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 86e324356c122eeecd7f1915746b3b0f87146cdf..dfa410cdf97170bfcda222597ee109a51c4eff1f 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -9,6 +9,7 @@
@import "scss/visibility";
@import "scss/actionmenu";
+@import "scss/activityfeed";
@import "scss/admin";
@import "scss/admin-courses";
@import "scss/admission";
@@ -16,21 +17,32 @@
@import "scss/ajax";
@import "scss/avatar";
@import "scss/badges";
+@import "scss/big-image-handler";
@import "scss/blubber";
@import "scss/buttons";
+@import "scss/consultation";
@import "scss/contentbar";
@import "scss/contents";
+@import "scss/content";
@import "scss/comments";
@import "scss/courseware";
+@import "scss/coursewizard";
@import "scss/css_tree";
@import "scss/dates";
@import "scss/dashboard";
+@import "scss/dialog";
+@import "scss/documents";
@import "scss/enrolment";
+@import "scss/evaluation";
@import "scss/files";
@import "scss/feedback";
@import "scss/forum";
@import "scss/grid";
+@import "scss/header";
+@import "scss/headings";
+@import "scss/helpbar";
@import "scss/i18n";
+@import "scss/ilias-interface";
@import "scss/index";
@import "scss/fullscreen";
@import "scss/links";
@@ -45,6 +57,7 @@
@import "scss/quicksearch";
@import "scss/oauth2";
@import "scss/pagination";
+@import "scss/plugins";
@import "scss/plus";
@import "scss/progress_indicator.scss";
@import "scss/profile";
@@ -57,11 +70,15 @@
@import "scss/skiplinks";
@import "scss/start";
@import "scss/scroll-to-top";
+@import "scss/statusgroups";
@import "scss/studygroup";
+@import "scss/studip-overlay";
+@import "scss/studip-selection";
@import "scss/table_of_contents";
@import "scss/tooltip";
@import "scss/tfa";
@import "scss/tour";
+@import "scss/user-administration";
@import "scss/wiki";
@@ -84,3 +101,19 @@
[v-cloak] {
display: none;
}
+
+blockquote {
+ border-left: 3px solid $brand-color-lighter;
+ padding: 5px 5px 5px 8px;
+ margin: 8px 8px 8px 0;
+
+ background-color: rgba(0,0,0,0.05);
+ > .author {
+ background-color: $brand-color-lighter;
+ color: $white;
+ padding: 4px 4px 4px 15px;
+ margin: -5px -5px 5px -10px;
+ }
+}
+
+div.indent { margin-left: 2em; }