Rahmen auf der Verwaltungsseite haben falsche Farbe

Closes #4895

Merge request studip/studip!3666

resources/assets/stylesheets/mixins/colors.scss

@@ -265,6 +265,10 @@ $color--tile-border: $color--gray-5;
 $color--tile-background: $color--gray-7;
 $color--tile-background-focus: $color--gray-6;
 $color--tile-background-hover: $color--gray-6;
+$color--tile-marker-inactive: $color--gray-4;
+$color--tile-marker-active: $color--green-1;
+$color--tile-marker-attention: $color--yellow-1;
+$color--tile-title-background: $color--gray-6;
 
 $color--content-box-border: $color--gray-6;
 $color--content-box-header: $color--gray-6;

resources/assets/stylesheets/scss/grid.scss

@@ -14,7 +14,7 @@ $grid-element-width: 270px;
 }
 
 .studip-grid-element {
-    border: 1px solid var(--light-gray-color);
+    border: 1px solid var(--color--tile-border);
 }
 
 // Responsive displays

resources/assets/stylesheets/scss/variables.scss

@@ -246,6 +246,10 @@ $grid-gap: 0;
     --color--tile-background: #{$color--tile-background};
     --color--tile-background-focus: #{$color--tile-background-focus};
     --color--tile-background-hover: #{$color--tile-background-hover};
+    --color--tile-marker-inactive: #{$color--tile-marker-inactive};
+    --color--tile-marker-active: #{$color--tile-marker-active};
+    --color--tile-marker-attention: #{$color--tile-marker-attention};
+    --color--tile-title-background: #{$color--tile-title-background};
 
     --color--content-box-border: #{$color--content-box-border};
     --color--content-box-header: #{$color--content-box-header};

resources/vue/components/ContentModulesEditTiles.vue

@@ -192,18 +192,18 @@ export default {
     display: flex;
     flex-direction: row;
     background-color: var(--white);
-    border-left: 1px solid var(--dark-gray-color-60);
+    border-left: 1px solid var(--color--tile-marker-inactive);
 
     &.visibility-visible {
-        border-left-color: var(--green);
+        border-left-color: var(--color--tile-marker-active);
         > div {
-            border-left-color: var(--green);
+            border-left-color: var(--color--tile-marker-active);
         }
     }
     &.visibility-invisible {
         border-left-color: var(--yellow);
         > div {
-            border-left-color: var(--yellow);
+            border-left-color: var(--color--tile-marker-attention);
         }
     }
 
@@ -243,7 +243,7 @@ export default {
         flex-direction: column;
         justify-content: space-between;
         transition: all var(--transition-duration) ease;
-        border-left: 10px solid var(--dark-gray-color-60);
+        border-left: 10px solid var(--color--tile-marker-inactive);
         min-height: 150px;
         width: 100%;
 
@@ -262,7 +262,7 @@ export default {
             }
         }
         > .down_part {
-            background-color: var(--content-color-20);
+            background-color: var(--color--tile-title-background);
             display: flex;
             justify-content: space-between;
             align-items: center;