Style aside border and section divider

pradoslaw · Dec 5, 2024 · 3972daa · 3972daa
1 parent 5e2618f
commit 3972daa
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 11 deletions.
diff --git a/resources/feature/lookAndFeel/lookAndFeel.scss b/resources/feature/lookAndFeel/lookAndFeel.scss
@@ -4,6 +4,7 @@
 $body-background: (light: #f0f2f5, dark: #121314);
 $post-background-body: (light: white, dark: #181a1b);
 $post-background-header: (light: none, dark: none);
+$section-heading-divider-color: (light: #e9ecef, dark: #2a2e30);
 
 $post-radius: 8px;
 $forum-aside-radius: 8px;
@@ -12,12 +13,14 @@ $forum-aside-radius: 8px;
   @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);
+  @include theme.var(--section-heading-divider-color, $section-heading-divider-color);
 }
 
 .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.var(--section-heading-divider-color, (light: #dee2e6, dark: #2f2f2f));
 }
 
 @include theme.both {
@@ -38,7 +41,17 @@ $forum-aside-radius: 8px;
   background: var(--body-background);
   padding: 24px;
   border-radius: $forum-aside-radius;
+  border: 1px solid var(--section-heading-divider-color);
+
   @include size.size(xl) {
     padding: 0;
+    border: none;
+  }
+}
+
+@include theme.both {
+  .neon-section-heading {
+    border-bottom-width: 2px;
+    border-bottom-color: var(--section-heading-divider-color) !important; // !important for h4.section
   }
 }
diff --git a/resources/sass/core/_dark_topic.scss b/resources/sass/core/_dark_topic.scss
@@ -362,12 +362,6 @@ body.theme-dark {
   }
 
   aside {
-    &#sidebar {
-      border-color: #789b17;
-      border-width: 1px;
-      box-shadow: none;
-    }
-
     .btn.btn-secondary.btn-sm {
       border: 1px solid #404040;
 

diff --git a/resources/sass/pages/_forum.scss b/resources/sass/pages/_forum.scss
@@ -53,7 +53,6 @@
     z-index: 101;
     font-size: .9em;
     right: 25%;
-    border: 2px solid $card-border-color;
     padding: 6px 10px;
     width: 45%; // na urzadzeniach mobilnych rozszerzamy to okno aby cokolwiek bylo tam widac
     top: 48px !important; // funkcja sticky-aside zmieni {top}, myśląc że element jest sticky

diff --git a/resources/views/components/viewers.twig b/resources/views/components/viewers.twig
@@ -1,5 +1,5 @@
 <div class="box">
-  <h4 class="heading {{ isHomepageModern ? 'mb-3 py-0' }}">
+  <h4 class="heading {{ isHomepageModern ? 'mb-3 py-0' }} neon-section-heading">
     {% if iconVisible %}
       {% if local %}
         {{ icon('viewersOnlineLocal') }}

diff --git a/resources/views/forum/home.twig b/resources/views/forum/home.twig
@@ -36,7 +36,7 @@
     {% block side_menu %}
       {% include 'forum.partials.post_count' %}
       <div class="box mb-5">
-        <h4 class="heading">
+        <h4 class="heading neon-section-heading">
           {{ icon('forumActions') }}
           Akcje
         </h4>

diff --git a/resources/views/forum/topic.twig b/resources/views/forum/topic.twig
@@ -242,7 +242,7 @@
     {% block side_menu %}
       <div id="js-sidebar" class="box mb-5" v-cloak>
         <div class="box">
-          <h4 class="heading">
+          <h4 class="heading neon-section-heading">
             {{ icon('forumActions') }}
             Akcje
           </h4>

diff --git a/resources/views/microblog/aside.twig b/resources/views/microblog/aside.twig
@@ -30,7 +30,7 @@
 
     {% if tags.tech is not empty %}
       <div class="box mt-2">
-        <h4 class="heading">
+        <h4 class="heading neon-section-heading">
           {{ icon('tagsPopularLanguage') }}
           Technologie
         </h4>