Style forum posts in new look and feel

pradoslaw · Dec 5, 2024 · 82c1402 · 82c1402
1 parent 9bcc475
commit 82c1402
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 19 deletions.
diff --git a/resources/feature/lookAndFeel/lookAndFeel.scss b/resources/feature/lookAndFeel/lookAndFeel.scss
@@ -1,13 +1,32 @@
 @use "../theme/theme" as theme;
 
-.look-and-feel-legacy {
-  @include theme.property(--body-background, #fafafa, #252525);
-}
+$body-background: (light: #f0f2f5, dark: #121314);
+$post-background-body: (light: white, dark: #181a1b);
+$post-background-header: (light: none, dark: none);
 
 .look-and-feel-modern {
-  @include theme.property(--body-background, #f0f2f5, #121314);
+  @include theme.var(--body-background, $body-background);
+  @include theme.var(--post-background-body, $post-background-body);
+  @include theme.var(--post-background-header, $post-background-header);
 }
 
-body {
-  background: var(--body-background);
+.look-and-feel-legacy {
+  @include theme.var(--body-background, (light: #fafafa, dark: #252525));
+  @include theme.var(--post-background-body, (light: white, dark: rgb(26, 26, 26)));
+  @include theme.var(--post-background-header, (light: rgba(51, 51, 51, 0.03), dark: rgba(255, 255, 255, 0.03)));
+}
+
+@include theme.both {
+  body {
+    background: var(--body-background);
+  }
+
+  .neon-post {
+    background: var(--post-background-body);
+
+    .neon-post-header,
+    .neon-post-footer {
+      background: var(--post-background-header);
+    }
+  }
 }
diff --git a/resources/feature/theme/theme.scss b/resources/feature/theme/theme.scss
@@ -14,7 +14,7 @@
   }
 }
 
-@mixin theme {
+@mixin both {
   /**
    * The dark() and light() mixins increase selector specificity.
    * In some cases, it's necessary to apply a common style to both
@@ -30,12 +30,12 @@
 }
 
 @mixin property($property, $light, $dark) {
-  @include light {
-    #{$property}: $light;
-  }
-  @include dark {
-    #{$property}: $dark;
-  }
+  @include light {#{$property}: $light}
+  @include dark {#{$property}: $dark}
+}
+
+@mixin var($property, $themeMap) {
+  @include property($property, map-get($themeMap, 'light'), map-get($themeMap, 'dark'));
 }
 
 @mixin color-theme($light, $dark) {
@@ -50,3 +50,7 @@
 @mixin background-theme($light, $dark) {
   @include background($light, $dark)
 }
+
+@mixin theme {
+  @include both {@content}
+}
diff --git a/resources/js/components/forum/post.vue b/resources/js/components/forum/post.vue
@@ -9,7 +9,7 @@
   </div>
   <div v-else
        :id="anchor"
-       class="card card-post"
+       class="card card-post neon-post"
        :class="[
          {'is-deleted': hidden, 'not-read': !post.is_read, 'highlight-flash': highlight, 'post-deleted-collapsed': isCollapsed},
          postIndentCssClasses
@@ -29,7 +29,7 @@
       <vue-icon name="postAuthorBlocked"/>
       Treść posta została ukryta, ponieważ autorem jest zablokowany przez Ciebie użytkownik.
     </div>
-    <div :class="{'collapse': isCollapsed, 'd-lg-block': !isCollapsed}" class="card-header d-none">
+    <div :class="{'collapse': isCollapsed, 'd-lg-block': !isCollapsed}" class="card-header d-none neon-post-header">
       <div class="row">
         <div class="col-2">
           <h5 class="mb-0 post-author">
@@ -261,7 +261,7 @@
       </div>
     </div>
 
-    <div :class="{'collapse': isCollapsed}" class="card-footer" v-if="!hidden && is_mode_tree && scoreDescriptionVisible">
+    <div :class="{'collapse': isCollapsed}" class="card-footer neon-post-footer" v-if="!hidden && is_mode_tree && scoreDescriptionVisible">
       <div class="row">
         <div class="d-none d-lg-block col-lg-2"/>
         <div class="col-12 d-flex col-lg-10 py-1">
@@ -272,7 +272,7 @@
       </div>
     </div>
 
-    <div :class="{'collapse': isCollapsed}" class="card-footer" v-if="!authorBlocked">
+    <div :class="{'collapse': isCollapsed}" class="card-footer neon-post-footer" v-if="!authorBlocked">
       <div class="row">
         <div class="d-none d-lg-block col-lg-2"/>
         <div class="col-12 d-flex col-lg-10">

diff --git a/resources/sass/core/_dark_topic.scss b/resources/sass/core/_dark_topic.scss
@@ -56,7 +56,6 @@ body.theme-dark {
     border-color: #2f2f2f;
 
     .card-header {
-      background: rgb(255, 255, 255, 0.03);
       border-bottom: 1px solid #2f2f2f;
     }
   }
@@ -288,7 +287,6 @@ body.theme-dark {
         }
 
         .card-footer {
-          background: rgb(255, 255, 255, 0.03);
           border-top: 1px solid #2f2f2f;
 
           button,