Refactoring Forums CSS

3 files changed, 23 insertions, 27 deletions

diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss
index 2ffb2f9..fc53e9c 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);
             }
         }
     }
@@ -786,7 +786,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;
         }
@@ -950,7 +950,7 @@ $card-max-width: 300px;
                 transition: background-color 0.2s ease;
 
                 &:hover {
-                    background-color: $content-color-10;
+                    background-color: var(--content-color-10);
                 }
             }
         }
@@ -1040,7 +1040,7 @@ $card-max-width: 300px;
 
             &:hover {
                 cursor: pointer;
-                background-color: $content-color-10;
+                background-color: var(--content-color-10);
             }
         }
     }
@@ -1110,17 +1110,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);
             }
         }
     }
@@ -1170,22 +1170,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;
                     }
                 }
@@ -1284,7 +1284,7 @@ $card-max-width: 300px;
         }
 
         .bg-light-gray {
-            background-color: $light-gray-color-40;
+            background-color: var(--light-gray-color-40);
         }
 
         .line-clamp-1 {
@@ -1414,7 +1414,7 @@ $card-max-width: 300px;
 
         hr {
             margin: 20px 0;
-            border-color: $color--gray-5;
+            border-color: var(--color--gray-5);
         }
 
         .search-controls {
@@ -1451,7 +1451,7 @@ $card-max-width: 300px;
         }
 
         .badge {
-            border-color: $color--gray-5;
+            border-color: var(--color--gray-5);
         }
 
         .toggle-filter-button {
@@ -1476,10 +1476,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 e9c3ddf..05ce8f1 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;
     }
 }
 
diff --git a/resources/vue/components/forum/ForumMembers.vue b/resources/vue/components/forum/ForumMembers.vue
index 3258bff..06ed488 100644
--- a/resources/vue/components/forum/ForumMembers.vue
+++ b/resources/vue/components/forum/ForumMembers.vue
@@ -77,7 +77,7 @@ const isModerator = role => role === 'moderator';
                                             @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>