Resolve "Forum: Refactoring CSS"

Closes #6045

Merge request studip/studip!4603

3 files changed, 26 insertions, 28 deletions

diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss
index 415adde..e42fe7d 100644
--- a/resources/assets/stylesheets/scss/forum.scss
+++ b/resources/assets/stylesheets/scss/forum.scss
@@ -107,8 +107,8 @@ $card-max-width: 300px;
 
     .unread-items-badge {
         padding: 1px 4px;
-        background: $red;
-        color: $white;
+        background: var(--red);
+        color: var(--white);
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -119,7 +119,7 @@ $card-max-width: 300px;
     .text-highlight {
         &::selection,
         *::selection {
-            background-color: $yellow;
+            background-color: var(--yellow);
             color: var(--color--font-primary);
         }
     }
@@ -482,7 +482,7 @@ $card-max-width: 300px;
         transition: background-color 1s ease;
 
         &.--highlight {
-            background-color: $content-color-10;
+            background-color: var(--content-color-10);
         }
 
         &__body {
@@ -494,7 +494,7 @@ $card-max-width: 300px;
 
         &__unread {
             width: 5px;
-            background-color: $red;
+            background-color: var(--red);
         }
 
         &__content {
@@ -644,13 +644,13 @@ $card-max-width: 300px;
                 transition: 0.3s;
 
                 &.--active {
-                    background-color: $base-color-20;
+                    background-color: var(--base-color-20);
                 }
             }
 
             button:hover {
                 cursor: pointer;
-                background-color: $content-color-10;
+                background-color: var(--content-color-10);
             }
         }
     }
@@ -701,7 +701,7 @@ $card-max-width: 300px;
         display: grid;
         grid-template-columns: repeat(1, minmax(0, 1fr));
 
-        hr {
+        hr:not(.user-avatar hr) {
             width: 100%;
             margin: 0;
         }
@@ -865,7 +865,7 @@ $card-max-width: 300px;
                 transition: background-color 0.2s ease;
 
                 &:hover {
-                    background-color: $content-color-10;
+                    background-color: var(--content-color-10);
                 }
             }
         }
@@ -955,7 +955,7 @@ $card-max-width: 300px;
 
             &:hover {
                 cursor: pointer;
-                background-color: $content-color-10;
+                background-color: var(--content-color-10);
             }
         }
     }
@@ -1062,17 +1062,17 @@ $card-max-width: 300px;
 
         .post-reaction {
             padding: 4px 6px;
-            background: $color--gray-7;
+            background: var(--color--gray-7);
             border-radius: 6px;
-            border: thin solid $color--gray-5;
+            border: thin solid var(--color--gray-5);
             display: flex;
             align-items: center;
             gap: 5px;
             cursor: pointer;
 
             &.--active {
-                background-color: $base-color-20;
-                border-color: $base-color-60;
+                background-color: var(--base-color-20);
+                border-color: var(--base-color-60);
             }
         }
     }
@@ -1122,22 +1122,22 @@ $card-max-width: 300px;
                     }
 
                     &.all {
-                        background-color: $green-20;
+                        background-color: var(--green-20);
                         cursor: default;
                     }
 
                     &.replies_only {
-                        background-color: $activity-color-20;
+                        background-color: var(--activity-color-20);
                         cursor: default;
                     }
 
                     &.none {
-                        background-color: $dark-gray-color-20;
+                        background-color: var(--dark-gray-color-20);
                         cursor: default;
                     }
 
                     &.active {
-                        background-color: $dark-gray-color-10;
+                        background-color: var(--dark-gray-color-10);
                         cursor: default;
                     }
                 }
@@ -1236,7 +1236,7 @@ $card-max-width: 300px;
         }
 
         .bg-light-gray {
-            background-color: $light-gray-color-40;
+            background-color: var(--light-gray-color-40);
         }
 
         .line-clamp-1 {
@@ -1366,7 +1366,7 @@ $card-max-width: 300px;
 
         hr {
             margin: 20px 0;
-            border-color: $color--gray-5;
+            border-color: var(--color--gray-5);
         }
 
         .search-controls {
@@ -1403,7 +1403,7 @@ $card-max-width: 300px;
         }
 
         .badge {
-            border-color: $color--gray-5;
+            border-color: var(--color--gray-5);
         }
 
         .toggle-filter-button {
@@ -1428,10 +1428,6 @@ $card-max-width: 300px;
                 align-items: start;
             }
 
-            .vs__dropdown-toggle {
-                max-height: fit-content;
-            }
-
             label {
                 margin: 0;
             }
diff --git a/resources/assets/stylesheets/scss/select.scss b/resources/assets/stylesheets/scss/select.scss
index b20d52e..93c6a55 100644
--- a/resources/assets/stylesheets/scss/select.scss
+++ b/resources/assets/stylesheets/scss/select.scss
@@ -85,7 +85,7 @@ form.default .studip-v-select .vs__selected {
     }
 
     &__dropdown-toggle {
-        max-height: fit-content;
+        max-height: fit-content !important;
     }
 
     &__open-indicator {
diff --git a/resources/vue/components/forum/ForumMembers.vue b/resources/vue/components/forum/ForumMembers.vue
index 7e0e385..65bace7 100644
--- a/resources/vue/components/forum/ForumMembers.vue
+++ b/resources/vue/components/forum/ForumMembers.vue
@@ -74,19 +74,21 @@ const isModerator = role => role === 'moderator';
                                             <p>{{ user.name }}</p>
                                         </div>
                                         <button
+                                            type="button"
                                             @click="activeUserAvatar = user.id"
                                             :title="$gettext('Aufklappen')"
                                             :aria-label="$gettext('Aufklappen')"
-                                            class="show-avatar">
+                                            class="show-avatar button-base">
                                             <StudipIcon shape="arr_1down" :size="15" aria-hidden="true" />
                                         </button>
                                     </div>
                                     <button
                                         v-else
+                                        type="button"
                                         @click="activeUserAvatar = ''"
                                         :title="$gettext('Zuklappen')"
                                         :aria-label="$gettext('Zuklappen')"
-                                        class="hide-avatar">
+                                        class="hide-avatar button-base">
                                         <StudipIcon shape="arr_1up" :size="15" aria-hidden="true" />
                                     </button>
                                     <UserAvatar v-if="activeUserAvatar === user.id" :user="user" />