adjusted class names to new Discord's standard

przemec · Oct 31, 2023 · 765152e · 765152e
1 parent 884634b
commit 765152e
Show file tree

Hide file tree

Showing 15 changed files with 227 additions and 223 deletions.
diff --git a/Novum.theme.css b/Novum.theme.css
@@ -2,7 +2,7 @@
 * @name Novum
 * @author Przemec & Net-Runner
 * @description Red galaxy theme enhanced with couple of addons and small features.
-* @version 5.7.1
+* @version 5.8.0
 * @source https://github.com/przemec/Novum
 * @website https://przemec.github.io/Novum/
 */

diff --git a/scss/components/basics.scss b/scss/components/basics.scss
@@ -4,42 +4,42 @@
 button {
   transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 }
-button[class*="lookFilled-"][class*="colorGrey"],
-button[class*="lookFilled-"][class*="colorPrimary-"] {
+button[class*="lookFilled_"][class*="colorGrey"],
+button[class*="lookFilled_"][class*="colorPrimary_"] {
   background: var(--accent-color-semitransparent) !important;
   color: var(--button-text) !important;
   &:hover {
     background: var(--accent-color-semitransparent) !important;
     color: var(--button-text-selected) !important;
   }
 }
-button[class*="colorBrand-"]:not([class*="lookBlank"], [class*="lookLink"]) {
+button[class*="colorBrand_"]:not([class*="lookBlank"], [class*="lookLink"]) {
   @include m.btred;
 }
-button[class*="colorBrand-"][class*="lookInverted"] {
+button[class*="colorBrand_"][class*="lookInverted"] {
   background: var(--button-text-selected);
   color: var(--main-color-selected);
   &:hover {
     background: var(--button-text);
     color: var(--main-color);
   }
 }
-button[class*="lookOutlined-"]:not([class*="lookBlank"]) {
+button[class*="lookOutlined_"]:not([class*="lookBlank"]) {
   color: var(--button-text);
   border-color: transparent !important;
 }
-button[class*="colorGreen-"],
-button[class*="colorRed-"] {
+button[class*="colorGreen_"],
+button[class*="colorRed_"] {
   @include m.btred_important;
 }
-button[class*="lookLink-"] {
+button[class*="lookLink_"] {
   color: var(--button-text);
   &:hover {
     text-decoration: none !important;
     color: var(--button-text-selected);
   }
 
-  &[class*="colorLink-"] {
+  &[class*="colorLink_"] {
     color: var(--accent-color);
     &:hover {
       color: var(--accent-saturated);
@@ -58,10 +58,10 @@ button[class*="lookLink-"] {
 }
 
 //Switches
-[class^="control-"] [class^="container-"] {
+[class^="control_"] [class^="container_"] {
   background: var(--accent-color-semitransparent) !important;
 }
-[class^="control-"] [class^="container-"][style*="rgb(35,"] {
+[class^="control_"] [class^="container_"][style*="rgb(35,"] {
   background: var(--main-color) !important;
   [class^="slider"] path {
     fill: var(--main-color);
@@ -102,15 +102,15 @@ input:focus {
 }
 
 //Bars
-[class^="slider-"] > [class^="bar-"] {
+[class^="slider_"] > [class^="bar_"] {
   background: var(--accent-color-semitransparent) !important;
-  [class^="barFill-"] {
+  [class^="barFill_"] {
     background: var(--main-color) !important;
   }
 }
 
 //Color primary
-[class^="colorPrimary-"] {
+[class^="colorPrimary_"] {
   background: var(--main-color) !important;
 }
 
@@ -127,7 +127,7 @@ input:focus {
     border-top-color: rgba(0, 0, 0, 1) !important;
   }
 }
-[class^="layerContainer-"] > [class*="toolbar"] {
+[class^="layerContainer_"] > [class*="toolbar"] {
   background: rgba(0, 0, 0, 0.95) !important;
   border: 2px solid rgba(0, 0, 0, 1);
 
@@ -142,7 +142,7 @@ input:focus {
 }
 
 //protips
-[class^="pro-"],
+[class^="pro_"],
 [class*="protip"] {
   color: var(--accent-saturated) !important;
 }
diff --git a/scss/components/call.scss b/scss/components/call.scss
@@ -5,8 +5,11 @@
   background: rgba(0, 0, 0, 0.1) !important;
 }
 
-//tile border while speaking
-[class^="tileChild-"] [class*="border-"][class*="speaking-"] {
+//avatar border while speaking
+// - private voice call
+[class*="voiceCallWrapper_"] [class*="border_"][class*="speaking_"],
+// - server channel call
+[class^="tileChild_"] [class*="border_"][class*="speaking_"] {
   box-shadow: inset 0 0 0 3px var(--accent-color),inset 0 0 0 4px #000;
 }
 
@@ -47,29 +50,29 @@ button[class*="participantsButton"] {
 }
 
 //"this stream has ended" channel view
-[class^="tileChild-"] button > [class*="button-"] {
+[class^="tileChild_"] button > [class*="button_"] {
   background: rgba(0, 0, 0, 0.95);
   color: var(--button-text);
   &:hover {
     color: var(--button-text-selected);
   }
 }
 //"this stream has ended" picture in picture modal
-[class^="pictureInPictureVideo-"] {
+[class^="pictureInPictureVideo_"] {
   background: rgba(0, 0, 0, 0.9) !important;
 }
-[class^="pictureInPictureVideo-"] > span button > [class*="button-"] {
+[class^="pictureInPictureVideo_"] > span button > [class*="button_"] {
   @include m.btred;
 }
 
 //live preview backgrounds
-[class^="emptyPreview-"] {
+[class^="emptyPreview_"] {
   background: rgba(0, 0, 0, 0.3) !important;
 }
-[class^="wanderingCubesItem-"] {
+[class^="wanderingCubesItem_"] {
   background: var(--accent-color) !important;
 }
-[class^="tile-"] {
+[class^="tile_"] {
   background: rgba(0, 0, 0, 0.3) !important;
   border-radius: 10px;
 }

diff --git a/scss/components/chat.scss b/scss/components/chat.scss
@@ -24,7 +24,7 @@
     background: var(--main-color-semitransparent-selected) !important;
   }
   //hidden tip container above the chat input
-  & > [class^="container-"] > [class^="containerBackground"] {
+  & > [class^="container_"] > [class^="containerBackground"] {
     background: rgba(0, 0, 0, 0.95) !important;
     border-color: transparent;
   }
@@ -54,14 +54,14 @@
 }
 
 // Emote, Gif, Sticker popout
-[class^="drawerSizingWrapper-"] > [class^="contentWrapper-"] {
+[class^="drawerSizingWrapper_"] > [class^="contentWrapper_"] {
   background: rgba(0, 0, 0, 0.9) !important;
 
-  [class^="navList-"] > [class^="navItem-"] > [class^="navButtonActive-"] {
+  [class^="navList_"] > [class^="navItem_"] > [class^="navButtonActive_"] {
     background: var(--main-color) !important;
   }
-  [class^="unicodeShortcut-"],
-  [class^="inspector-"] {
+  [class^="unicodeShortcut_"],
+  [class^="inspector_"] {
     background: #000;
   }
 }
@@ -93,7 +93,7 @@
 }
 
 //reaction below message
-[class*="reactions-"] [class*="reaction-"]:not([class^="reactionCount"], [class^="reactionBtn"]) {
+[class*="reactions_"] [class*="reaction_"]:not([class^="reactionCount"], [class^="reactionBtn"]) {
   background: rgba(0, 0, 0, 0.2) !important;
   transform: scale(1.07);
   display: flex;
@@ -113,14 +113,14 @@
     background: rgba(0, 0, 0, 0.4) !important;
   }
 }
-[class*="reactionCount-"] {
+[class*="reactionCount_"] {
   color: var(--accent-color) !important;
 }
 
 //Chat message popouts
-[class^="layerContainer-"] [class^="layer-"] {
+[class^="layerContainer_"] [class^="layer_"] {
   //See who reacted popout
-  [class*="reactors-"] {
+  [class*="reactors_"] {
     background: transparent !important;
 
     div:not([class*="contents"]) {
@@ -129,11 +129,11 @@
   }
 
   //Chat message right click popout
-  [class*="menu-"] {
+  [class*="menu_"] {
     background: rgba(0, 0, 0, 0.95) !important;
     box-shadow: none !important;
 
-    [class*="wrapper-"] img {
+    [class*="wrapper_"] img {
       width: 30px !important;
       height: 30px !important;
     }
@@ -356,23 +356,23 @@
 }
 
 //New messages bar
-[class^="newMessagesBar-"] {
+[class^="newMessagesBar_"] {
   background: var(--main-color) !important;
   padding: 3px 0;
   border-color: transparent !important;
 }
 //Old messages bar
-[class^="jumpToPresentBar-"] {
+[class^="jumpToPresentBar_"] {
   background: var(--accent-desaturated) !important;
   padding: 3px 0;
   border-color: transparent !important;
 }
 
 //Server invite field on chat
-[id^="message-accessories-"] > [class*="wrapper"] {
+[id^="message-accessories_"] > [class*="wrapper"] {
   background: rgba(0, 0, 0, 0.2);
 }
-[id^="message-accessories-"] > [class*="wrapper"] [class*="guildIconImage"] {
+[id^="message-accessories_"] > [class*="wrapper"] [class*="guildIconImage"] {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
@@ -619,7 +619,7 @@ code {
     border-left: 2px solid var(--accent-saturated);
   }
 }
-[class^="categoryFadeBlurple-"] {
+[class^="categoryFadeBlurple_"] {
   background: var(--main-color) !important;
 }
 

diff --git a/scss/components/find-stage.scss b/scss/components/find-stage.scss
@@ -1,20 +1,20 @@
 //Styling for new 'find stage' section in user homescreen
-[class^="stageSection-"] {
+[class^="stageSection_"] {
   background: transparent;
 }
 
-[class^="nowPlayingSidebar-"] > [class^="container-"] {
+[class^="nowPlayingSidebar_"] > [class^="container_"] {
   background: transparent !important;
 }
 
-[class^="stageSection-"] > [class^="container-"] > [class^="container-"] {
+[class^="stageSection_"] > [class^="container_"] > [class^="container_"] {
   background: rgba(0, 0, 0, 0.15);
 }
 
-[class^="stageSection-"] > [class^="container-"] > [class^="container-"]:nth-last-child(2) {
+[class^="stageSection_"] > [class^="container_"] > [class^="container_"]:nth-last-child(2) {
   background: transparent !important;
 }
 
-[class^="guildInfoContainer-"] > [class^="rightJustifiedContent-"] > div {
+[class^="guildInfoContainer_"] > [class^="rightJustifiedContent_"] > div {
   background: var(--main-color) !important;
 }
diff --git a/scss/components/nitro.scss b/scss/components/nitro.scss
@@ -17,7 +17,7 @@
 }
 
 //Server boost overlay
-[class^="perksModal-"] {
+[class^="perksModal_"] {
   background: transparent !important;
 }
 //progress line
@@ -32,7 +32,7 @@
   background: var(--main-color-selected) !important;
 }
 //tier panels
-[class^="carousel"] [class^="tier-"] {
+[class^="carousel"] [class^="tier_"] {
   background: var(--profile-background), rgba(0, 0, 0, 0.95) !important;
   [class*="tierHeader"] {
     background: rgba(0, 0, 0, 0.1) !important;
@@ -59,7 +59,7 @@
   background: var(--scroll-thumb-color);
 }
 //tier panels
-[class^="tiers"] > [class^="tier-"] {
+[class^="tiers"] > [class^="tier_"] {
   background: var(--profile-background), rgba(0, 0, 0, 0.95) !important;
   [class*="tierHeader"] {
     background: rgba(0, 0, 0, 0.1) !important;

diff --git a/scss/components/other.scss b/scss/components/other.scss
@@ -31,7 +31,7 @@
 }
 
 //problems with connection animated modal
-[class^="app-"] > [class*="fixClipping-"] {
+[class^="app_"] > [class*="fixClipping_"] {
   background: linear-gradient(#00000022, #000000ff) !important;
 }
 
@@ -76,7 +76,7 @@
 }
 
 //live indicator in server channel/Active Now section in home screen
-[class^="live-"][class*="textBadge"] {
+[class^="live_"][class*="textBadge"] {
   background: var(--main-color-selected) !important;
   color: var(--button-text) !important;
 }
@@ -104,15 +104,15 @@ div[class^="notice"] {
 }
 
 //FlowerStar aka Verified SVG ICON
-[class^="flowerStar-"] > path {
+[class^="flowerStar_"] > path {
   fill: var(--accent-saturated) !important;
 }
-[class^="flowerStar-"] + [class^="child"] path {
+[class^="flowerStar_"] + [class^="child"] path {
   fill: #ffffff !important;
 }
 
 //AKA badge
-[class^="akaBadge-"] {
+[class^="akaBadge_"] {
   background: var(--main-color) !important;
   color: var(--button-text) !important;
 }
@@ -197,11 +197,11 @@ div[class^="notice"] {
 
 //Cards in settings, servers discover page, etc.
 //[class*="justify"] - cards in keybinds and activity status settings
-[class*="card-"]:not([class*="justify"]) {
+[class*="card_"]:not([class*="justify"]) {
   background: rgba(0, 0, 0, 0.3) !important;
   border-color: #000000 !important;
 }
-[class*="card-"][class*="justify"] {
+[class*="card_"][class*="justify"] {
   box-shadow: none;
 }
 

diff --git a/scss/components/server-channel.scss b/scss/components/server-channel.scss
@@ -53,13 +53,13 @@ header h1[class^="name"] {
     color: rgba(255, 255, 255, 0.5);
   }
   //selected channel
-  & [class*="modeSelected"] [class*="link-"] {
+  & [class*="modeSelected"] [class*="link_"] {
     background: var(--main-color-semitransparent-selected) !important;
   }
-  & [class*="modeSelected"] [class*="name-"] {
+  & [class*="modeSelected"] [class*="name_"] {
     color: #ffffff !important;
   }
-  &:hover [class*="modeSelected"] [class*="link-"] {
+  &:hover [class*="modeSelected"] [class*="link_"] {
     background: var(--main-color-semitransparent-selected) !important;
   }
 

diff --git a/scss/components/server-list.scss b/scss/components/server-list.scss
@@ -1,7 +1,7 @@
 @use "../core/mixins" as m;
 
 //Server list scroller
-[class^="scroller-"] {
+[class^="scroller_"] {
   background: transparent !important;
 }