From de1c3f368b3108ba29b9433fb6b79c8d24390626 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Fri, 18 Oct 2024 09:48:41 +0000
Subject: [PATCH] Design: ContentBoxen, FieldSets und Co. sind noch nicht
 konsistent

Closes #4669, #4668, and #4679

Merge request studip/studip!3520
---
 .../assets/stylesheets/mixins/colors.scss     |  8 ++++----
 .../assets/stylesheets/scss/article.scss      |  7 ++++---
 .../assets/stylesheets/scss/content_box.scss  | 20 +++++++++----------
 resources/assets/stylesheets/scss/files.scss  |  3 +--
 resources/assets/stylesheets/scss/forms.scss  |  2 +-
 resources/assets/stylesheets/scss/search.scss | 10 +++++-----
 6 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index d464752e379..dc64b72b13b 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/resources/assets/stylesheets/mixins/colors.scss
@@ -258,18 +258,18 @@ $color--tile-background: $color--gray-7;
 $color--tile-background-focus: $color--gray-6;
 $color--tile-background-hover: $color--gray-6;
 
-$color--content-box-border: $color--gray-5;
+$color--content-box-border: $color--gray-6;
 $color--content-box-header: $color--gray-6;
 $color--content-box-background: $color--white;
 
+$color--fieldset-header: $color--gray-6;
+$color--fieldset-border: $color--gray-6;
+
 $color--table-header: $color--gray-6;
 $color--table-border: $color--gray-6;
 $color--table-focus: $color--gray-6;
 $color--table-hover: $color--gray-6;
 
-$color--fieldset-header: $color--gray-6;
-$color--fieldset-border: $color--gray-5;
-
 $color--button-background: $color--white;
 $color--button-border: $color--blue-1;
 $color--button-focus: $color--blue-1;
diff --git a/resources/assets/stylesheets/scss/article.scss b/resources/assets/stylesheets/scss/article.scss
index 1694475092f..bdf4575fc26 100644
--- a/resources/assets/stylesheets/scss/article.scss
+++ b/resources/assets/stylesheets/scss/article.scss
@@ -1,7 +1,8 @@
 $article-padding: 10px;
 
 article.studip {
-    margin-bottom: 30px;
+    border: 1px solid var(--color--content-box-border);
+    margin-bottom: 15px;
     padding: $article-padding;
     transition: all var(--transition-duration) ease 0s;
 
@@ -120,8 +121,8 @@ article.studip {
     > footer {
         text-align: center;
         border-top: 1px solid var(--color--content-box-border);
-        margin: -$article-padding;
-        margin-top: $article-padding;
+        padding: $article-padding;
+        margin: $article-padding (-$article-padding) (-$article-padding) (-$article-padding);
 
         &:empty {
             display: none !important;
diff --git a/resources/assets/stylesheets/scss/content_box.scss b/resources/assets/stylesheets/scss/content_box.scss
index a7728f77c2a..df86c3a5280 100644
--- a/resources/assets/stylesheets/scss/content_box.scss
+++ b/resources/assets/stylesheets/scss/content_box.scss
@@ -1,5 +1,9 @@
 section.contentbox {
-    margin-bottom: 30px;
+    border-color: var(--color--content-box-border);
+    border-style: solid;
+    border-width: 1px;
+    margin-bottom: 15px;
+
     transition: all var(--transition-duration) ease 0s;
 
     header {
@@ -9,7 +13,7 @@ section.contentbox {
         justify-content: space-between;
 
         padding: 2px;
-        background-color: var(--dark-gray-color-10);
+        background-color: var(--color--content-box-header);
 
         span.title {
             font-size: medium;
@@ -72,7 +76,7 @@ section.contentbox {
 
     footer {
         text-align: center;
-        border-color: var(--content-color-40);
+        border-color: var(--color--content-box-border);
         border-top-style: solid;
         border-width: 1px;
         background-color: var(--white);
@@ -92,7 +96,7 @@ section.contentbox {
     }
 
     > article {
-        border-color: var(--content-color-40);
+        border-color: var(--color--content-box-border);
         border-style: solid;
         border-width: 1px;
         margin: 10px;
@@ -135,7 +139,7 @@ section.contentbox {
                 }
             }
 
-            > article {
+            > article, > table, > form {
                 padding: 5px;
             }
 
@@ -186,7 +190,7 @@ section.contentbox {
 
         footer {
             text-align: center;
-            border-color: var(--content-color-40);
+            border-color: var(--color--content-box-border);
             border-top-style: none;
             border-width: 1px;
             background-color: var(--white);
@@ -248,10 +252,6 @@ section.contentbox {
 
         &.indented {
             margin-left: calc(10px + 1em);
-
-            > header {
-                background-color: mix($content-color, $white, 10%);
-            }
         }
     }
 }
diff --git a/resources/assets/stylesheets/scss/files.scss b/resources/assets/stylesheets/scss/files.scss
index dabd2f99067..03c062116c3 100644
--- a/resources/assets/stylesheets/scss/files.scss
+++ b/resources/assets/stylesheets/scss/files.scss
@@ -389,8 +389,7 @@ form.default {
         }
         border: none;
         padding: 0;
-        margin-left: 0;
-        margin-right: 0;
+        margin: 10px;
 
         > :not(legend) {
             margin: 0;
diff --git a/resources/assets/stylesheets/scss/forms.scss b/resources/assets/stylesheets/scss/forms.scss
index 7b81dca3708..199b0c068d4 100644
--- a/resources/assets/stylesheets/scss/forms.scss
+++ b/resources/assets/stylesheets/scss/forms.scss
@@ -200,7 +200,6 @@ form.default {
 
     fieldset {
         box-sizing: border-box;
-        border: none;
         border: solid 1px var(--color--fieldset-border);
         margin: 0 0 15px;
         min-width: auto;
@@ -228,6 +227,7 @@ form.default {
         > :not(legend) {
             margin-left: 10px;
             margin-right: 10px;
+            max-width: calc(100% - 20px);
         }
     }
 
diff --git a/resources/assets/stylesheets/scss/search.scss b/resources/assets/stylesheets/scss/search.scss
index e8df176131b..d5a269159cd 100644
--- a/resources/assets/stylesheets/scss/search.scss
+++ b/resources/assets/stylesheets/scss/search.scss
@@ -71,11 +71,11 @@ label.inactive-settings-category {
                 }
 
                 &:not(:first-child) {
-                    border-top: 1px solid var(--content-color-40);
+                    border-top: 1px solid var(--color--content-box-border);
                 }
 
                 &:hover {
-                    background-color: var(--light-gray-color-20);
+                    background-color: var(--color--tile-background-hover);
                 }
 
                 &.search-extended-result {
@@ -117,7 +117,7 @@ label.inactive-settings-category {
                     }
 
                     .search-result-details {
-                        color: var(--black);
+                        color: var(--color--font-primary);
                         font-size: $font-size-small;
                     }
                 }
@@ -131,7 +131,7 @@ label.inactive-settings-category {
 
 
                     .search-result-time {
-                        color: var(--dark-gray-color-80);
+                        color: var(--color--font-secondary);
                         flex: 1;
                         font-size: $font-size-small;
                         text-align: right;
@@ -139,7 +139,7 @@ label.inactive-settings-category {
                     }
 
                     .search-result-additional {
-                        color: var(--dark-gray-color-80);
+                        color: var(--color--font-secondary);
                         font-size: $font-size-small;
                         text-align: right;
                     }
-- 
GitLab