From c9225e55381c0c194159558c65d2b1b4d76189f6 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Thu, 21 Nov 2024 12:43:00 +0000
Subject: [PATCH] Rahmen auf der Verwaltungsseite haben falsche Farbe
Closes #4895
Merge request studip/studip!3666
---
resources/assets/stylesheets/mixins/colors.scss | 4 ++++
resources/assets/stylesheets/scss/grid.scss | 2 +-
resources/assets/stylesheets/scss/variables.scss | 4 ++++
resources/vue/components/ContentModulesEditTiles.vue | 12 ++++++------
4 files changed, 15 insertions(+), 7 deletions(-)
diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index 5fd585b2d65..c3faffae1bb 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/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;
diff --git a/resources/assets/stylesheets/scss/grid.scss b/resources/assets/stylesheets/scss/grid.scss
index 21748639866..f8979b6976c 100644
--- a/resources/assets/stylesheets/scss/grid.scss
+++ b/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
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index 4735f73b885..6337c110ece 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/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};
diff --git a/resources/vue/components/ContentModulesEditTiles.vue b/resources/vue/components/ContentModulesEditTiles.vue
index 8a7d1d18098..c650f9eb633 100644
--- a/resources/vue/components/ContentModulesEditTiles.vue
+++ b/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;
--
GitLab