channel header

ClearVision · Jul 28, 2023 · 8b76c80 · 8b76c80
1 parent f4cf87d
commit 8b76c80
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 21 deletions.
diff --git a/lib/selectors/selectorPlaceholders.scss b/lib/selectors/selectorPlaceholders.scss
@@ -1382,15 +1382,6 @@
 .disabled-2G98Nl {
   @extend %tabBarItemDisabled !optional;
 }
-.header-2F5_LB {
-  @extend %tabBarHeader !optional;
-}
-.separator-2N511j {
-  @extend %tabBarSeparator !optional;
-}
-.tabBar-3DfKkN {
-  @extend %headerBarTabBar !optional;
-}
 .premiumLabel-3HPvdB {
   @extend %premiumLabel !optional;
 }
@@ -3571,6 +3562,15 @@ pre {
 .selectedBackground-1t6xXq {
   @extend %settingsSidebarScrollerSelectedBackground !optional;
 }
+.header-2F5_LB {
+  @extend %settingsHeader !optional;
+}
+.headerText-10ez_d {
+  @extend %settingsHeaderText !optional;
+}
+.separator-2N511j {
+  @extend %settingsSeparator !optional;
+}
 .socialLinks-3ywLUf {
   @extend %settingsSocialLinks !optional;
 }

diff --git a/src/settings/channelSettings.scss b/src/settings/channelSettings.scss
@@ -1,5 +1,48 @@
 /* CHANNEL SETTINGS */
 
+// HEADER
+%settingsSidebar {
+  %settingsHeader {
+    &:has(.category-CysNYv) {
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      grid-template-rows: .5fr .5fr;
+      padding: 20px 0;
+    }
+    &::before {
+      grid-column: 1 / 2;
+	    grid-row: 2 / 3;
+    }
+    &:after {
+      grid-column: 3 / 4;
+      grid-row: 2 / 3;
+    }
+  }
+}
+%settingsHeaderText {
+  &:has(.category-CysNYv) {
+    grid-column: 2 / 3;
+    grid-row: 1 / 3;
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: 1.5fr 1fr;
+    column-gap: 2px;
+    justify-items: center;
+  }
+}
+.category-CysNYv {
+  color: $main-color !important;
+  margin: 0;
+  grid-column: 1 / 3;
+	grid-row: 1 / 2;
+  &::before {
+    content: '< ';
+  }
+  &:after {
+    content: ' >';
+  }
+}
+
 // PERMISSIONS
 .group-LWHoGI {
   border: 1px solid hsla(0, 0%, 100%, 0.07);

diff --git a/src/settings/sidebar.scss b/src/settings/sidebar.scss
@@ -22,16 +22,19 @@
 }
 %settingsSide {
   padding: 30px 0;
-  %tabBarHeader {
+  %settingsHeader {
     color: $main-color;
     font-weight: 700;
   }
-  %tabBarSeparator {
+  %settingsSeparator {
     background: hsla(0, 0%, 100%, 0.07);
+    &:has(+ %settingsHeader) {
+      display: none;
+    }
   }
 }
 %settingsSidebar {
-  %tabBarHeader {
+  %settingsHeader {
     padding-top: 20px;
     display: flex;
     align-items: center;
@@ -56,15 +59,6 @@
       text-overflow: ellipsis;
     }
   }
-  %tabBarItem {
-    &:nth-child(6),
-    &:nth-child(13),
-    &:nth-child(25) {
-      +%tabBarSeparator {
-        display: none;
-      }
-    }
-  }
 }
 %standardSidebarView {
   %settingsSidebar {