Icons haben falsche Größen und Positionen

Closes #5997

Merge request studip/studip!4589

10 files changed, 43 insertions, 17 deletions

diff --git a/resources/assets/stylesheets/mixins/studip.scss b/resources/assets/stylesheets/mixins/studip.scss
index 87b26a3..e0339e8 100644
--- a/resources/assets/stylesheets/mixins/studip.scss
+++ b/resources/assets/stylesheets/mixins/studip.scss
@@ -121,6 +121,7 @@
             display: inline-block;
             height: icon-size($size);
             width: icon-size($size);
+            min-width: icon-size($size);
             background-color: currentColor;
             mask: url("#{$svg}") no-repeat center / contain;
             vertical-align: $align;
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/audio.scss b/resources/assets/stylesheets/scss/courseware/blocks/audio.scss
index 5b7dd64..3974de9 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/audio.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/audio.scss
@@ -55,6 +55,7 @@
                 padding: 0 8px;
                 background-color: transparent;
                 border: none;
+                color: var(--color--highlight);
             }
         }
 
@@ -143,6 +144,12 @@
                         cursor: pointer;
                         border: none;
                         background: transparent;
+                        color: var(--color--highlight);
+
+                        &:disabled {
+                            color: var(--color--font-inactive);
+                            cursor: default;
+                        }
                     }
                 }
             }
@@ -170,8 +177,8 @@
                     display: block;
                     padding: 1em 0;
                     margin: 0;
-                    img {
-                        vertical-align: middle;
+                    .studip-icon {
+                        vertical-align: top;
                     }
                 }
             }
@@ -201,5 +208,6 @@
         width: 16px;
         padding: 0 8px;
         cursor: pointer;
+        color: var(--color--highlight);
     }
 }
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss b/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss
index 8935c02..468462d 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss
@@ -25,7 +25,7 @@
         font-weight: 700;
         line-height: 2em;
         font-size: 1.1em;
-        margin-right: 0.25em;
+        margin: 0 0.25em 0 0.5em;
 
         &.cw-default-block-invisible-info,
         &.cw-default-block-blocker-warning {
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss b/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss
index c0c532d..5312ac5 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss
@@ -92,6 +92,7 @@
         .card__face--back {
             background-color: var(--color--global-background);
             &::after {
+                color: var(--color--highlight);
                 position: absolute;
                 right: 25px;
                 bottom: 25px;
@@ -100,20 +101,25 @@
     }
 
     .cw-dialogcards-navbutton {
-        background-color: var(--color--highlight);
-        color: var(--color--highlight-contrast);
+        background-color: var(--color--highlight-contrast);
+        color: var(--color--highlight);
         width: 35px;
         height: 35px;
         border-radius: var(--border-radius-default);
-        border: none;
+        border: solid thin var(--color--highlight);
         display: block;
         z-index: 4;
         margin: auto 2px;
         padding: 0;
         cursor: pointer;
 
+        &:hover {
+            background-color: var(--color--highlight);
+            color: var(--color--highlight-contrast);
+        }
+
         &.cw-dialogcards-prev {
-            @include icon(before, arr_1left, $size: 24px, $align: middle, $padding: -2px);
+            @include icon(before, arr_1left, $size: 24px, $align: middle, $padding: 2px);
         }
 
         &.cw-dialogcards-next {
@@ -124,6 +130,7 @@
         &.cw-dialogcards-next-disabled {
             color: var(--color--button-inactive-background-contrast);
             background-color: var(--color--button-inactive-background);
+            border: none;
             cursor: not-allowed;
         }
     }
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/document.scss b/resources/assets/stylesheets/scss/courseware/blocks/document.scss
index ff6e916..abf3ebb 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/document.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/document.scss
@@ -22,6 +22,7 @@
             height: 100%;
             margin: 0 2px 0 0;
             padding: 4px;
+            color: var(--color--highlight);
 
             &.active {
                 background-color: var(--color--highlight);
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss b/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss
index 0781b87..3fa793a 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss
@@ -27,7 +27,7 @@
     cursor: pointer;
     position: absolute;
     background-color: fade-out($color--global-background, 0.6);
-    color: var(--color--font-primary);
+    color: var(--color--highlight);
     top: 50%;
     height: 36px;
     width: 36px;
diff --git a/resources/assets/stylesheets/scss/courseware/containers/default-container.scss b/resources/assets/stylesheets/scss/courseware/containers/default-container.scss
index 4860b9e..e605567 100644
--- a/resources/assets/stylesheets/scss/courseware/containers/default-container.scss
+++ b/resources/assets/stylesheets/scss/courseware/containers/default-container.scss
@@ -32,6 +32,7 @@
             font-weight: 700;
             line-height: 2em;
             font-size: 16px;
+            margin: 0 0.25em 0 0.5em;
 
             &.cw-default-container-blocker-warning {
                 font-weight: 400;
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss b/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss
index 15ffaed..27e1aa0 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss
@@ -4,8 +4,12 @@
     border: solid thin var(--color--content-box-border);
     margin-bottom: -1px;
 
+    a:hover {
+        text-decoration: none;
+    }
+
     .cw-collapsible-title {
-        @include icon(before, arr_1right, $align: middle, $padding: 4px);
+        @include icon(before, arr_1right, $align: top, $padding: 4px);
         background-color: var(--color--content-box-header);
         padding: 0.5em;
         margin: 0;
@@ -14,7 +18,7 @@
         cursor: pointer;
 
         &.cw-collapsible-open {
-            @include icon(before, arr_1down, $align: middle, $padding: 4px);
+            @include icon(before, arr_1down, $align: top, $padding: 4px);
 
             .cw-container-list-sort-mode {
                 margin-top: 8px;
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tree.scss b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss
index cff1e4e..dc12922 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/tree.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss
@@ -116,7 +116,7 @@
         .cw-tree-item-edit-button {
             opacity: 0;
             padding: 0 4px;
-            vertical-align: text-bottom;
+            vertical-align: middle;
             border: none;
             background-color: transparent;
             cursor: pointer;
@@ -127,6 +127,13 @@
             }
         }
 
+        .cw-tree-item-info {
+           display:inline-flex;
+           position: absolute;
+           right: 8px;
+           gap: 2px; 
+        }
+
         &:hover {
             background-color: var(--color--sidebar-hover);
             color: var(--color--content-link-hover);
@@ -156,7 +163,6 @@
                 width: var(--icon-size-inline);
                 height: var(--icon-size-inline);
                 vertical-align: top;
-                float: right;
                 @include icon(after, #{$icon}, $size: $icon-size-inline);
             }
 
@@ -172,8 +178,6 @@
 
     .cw-tree-item-sequential {
         display: inline-block;
-        position: absolute;
-        right: 8px;
 
         &.cw-tree-item-sequential-complete {
             width: var(--icon-size-inline);
diff --git a/resources/assets/stylesheets/scss/dialog.scss b/resources/assets/stylesheets/scss/dialog.scss
index efac89a..13df760 100644
--- a/resources/assets/stylesheets/scss/dialog.scss
+++ b/resources/assets/stylesheets/scss/dialog.scss
@@ -163,7 +163,7 @@
         box-sizing: border-box;
         padding: 15px;
         max-height: 60vh;
-        @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 8px);
+        @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 16px);
         &::before {
             color: var(--color--attention);
         }
@@ -393,7 +393,7 @@ v u e  d i a l o g
             }
         }
         .studip-dialog-content {
-            @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 8px);
+            @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 16px);
             &::before {
                 color: var(--color--warning);
             }
@@ -408,7 +408,7 @@ v u e  d i a l o g
             }
         }
         .studip-dialog-content {
-            @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 8px);
+            @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 16px);
             &::before {
                 color: var(--color--attention);
             }