Updated themes/redesign

lazuee · web-flow · commit 53eb9e6af22b · 2024-08-10T10:48:13.000+08:00
diff --git a/discord/themes/redesign/import.css b/discord/themes/redesign/import.css
@@ -125,7 +125,7 @@ html {
                 z-index: 4;
                 padding: 0;
 
-                >[class*="gradient_"] {
+                >[class^="gradient_"] {
                     display: none;
                 }
             }
@@ -257,7 +257,7 @@ html {
                         border: 1px solid var(--border-subtle);
                         border-radius: var(--border-radius);
 
-                        >[class*="chat_"]:before {
+                        >[class^="chat_"]:before {
                             box-shadow: none !important;
                         }
                     }
@@ -304,27 +304,31 @@ html {
                         z-index: 10;
                     }
 
-                    div[class*="channelBottomBarArea_"] {
+                    div[class^="channelBottomBarArea_"] {
                         background: var(--bg-overlay-3, var(--channeltextarea-background));
                         display: grid;
                         grid-template-rows: 1fr;
                         grid-template-columns: 1fr auto;
 
-                        >div[class*="channelAppLauncher_"] {
+                        >div[class^="channelAppLauncher_"] {
                             position: absolute;
                             top: -50px;
                             right: 16px;
                         }
 
-                        >div[class*="channelTextArea_"] {
+                        >div[class^="channelTextArea_"] {
                             position: relative;
                             margin: 0 !important;
                             width: 100%;
 
-                            div[class*="scrollableContainer_"] {
+                            div[class^="scrollableContainer_"] {
                                 border-radius: 0;
                                 min-height: 49px;
                                 padding-top: 4px;
+
+                                &:has(button[aria-label="Send Message"]) {
+                                    padding-right: 8px;
+                                }
                             }
                         }
                     }
@@ -370,10 +374,10 @@ html {
             }
 
             >main,
-            >[class*="shop_"],
-            >[class*="applicationStore_"],
+            >[class^="shop_"],
+            >[class^="applicationStore_"],
             >[class="pageWrapper_a3a4ce"],
-            >[class*="chat_"]:not(:has(.video_d880dc)),
+            >[class^="chat_"]:not(:has(.video_d880dc)),
             >.container_d1c246 {
                 border: 1px solid var(--border-subtle);
 
@@ -383,7 +387,7 @@ html {
                 }
             }
 
-            >[class*="chat_"]:has(.video_d880dc)>.wrapper_d880dc {
+            >[class^="chat_"]:has(.video_d880dc)>.wrapper_d880dc {
 
                 >*:first-child,
                 >*>.container_d1c246 {
@@ -399,7 +403,7 @@ html {
             }
 
             >main,
-            >[class*="chat_"] {
+            >[class^="chat_"] {
                 .peopleList_e0840f {
                     >div:first-child {
                         display: flex;
@@ -418,7 +422,7 @@ html {
                 }
 
                 [aria-label="Message Requests"] {
-                    [data-list-item-id*="message-requests-spam-list_"] {
+                    [data-list-item-id^="message-requests-spam-list_"] {
                         border: 1px solid var(--border-subtle);
                         border-radius: calc(var(--border-radius) - 4px);
                         padding: 16px 10px;
@@ -445,14 +449,14 @@ html {
                     }
                 }
 
-                >[class*="content_"] {
+                >[class^="content_"] {
                     .wrapper_a3747e {
                         max-width: 320px;
                     }
                 }
             }
 
-            >[class*="chat_"] {
+            >[class^="chat_"] {
 
                 .searchResultsWrap_c2b47d,
                 .membersWrap_cbd271,
@@ -493,9 +497,9 @@ html {
                 }
             }
 
-            >.container_d1c246>[class*="chat_"],
+            >.container_d1c246>[class^="chat_"],
             >* section.container_fc4f04,
-            >[class*="chat_"]>[class*="subtitleContainer_"]>[class*="title_"] {
+            >[class^="chat_"]>[class^="subtitleContainer_"]>[class^="title_"] {
                 padding: 0 8px;
                 min-height: 56px;
                 border-bottom: 1px solid var(--border-subtle);
@@ -508,8 +512,8 @@ html {
                     padding: 0;
                 }
 
-                [class*="tabBar_"]>*,
-                [class*="toolbar_"] button {
+                [class^="tabBar_"]>*,
+                [class^="toolbar_"] button {
                     height: 32px;
                     border-radius: calc(var(--border-radius) - 8px) !important;
                     overflow: hidden
@@ -620,7 +624,7 @@ html {
                         }
                     }
 
-                    >div:has([class*="channelNotice_"])>div {
+                    >div:has([class^="channelNotice_"])>div {
                         margin: 16px 0 0;
                         padding: 0 16px 16px;
                     }
@@ -646,6 +650,32 @@ html {
                     }
                 }
 
+                &:has([class*="discoverHeader_"]) {
+                    .sidebarContainer_a3a4ce {
+                        scrollbar-width: none;
+
+                        >h2 {
+                            margin: 0;
+                            min-height: 55px;
+                            padding: 0 16px;
+                            border-bottom: 1px solid var(--border-subtle);
+                            display: flex;
+                            align-items: center;
+                            font-size: 18px;
+                            line-height: 1.25;
+                            font-weight: 600;
+                            margin-bottom: 8px;
+                        }
+
+                        >div {
+                            height: 42px;
+                            margin: 1.5px 8px;
+                            border-radius: calc(var(--border-radius) - 4px) !important;
+                            overflow: hidden;
+                        }
+                    }
+                }
+
                 >div[class^="container_"] {
                     gap: 8px;
 
@@ -702,7 +732,7 @@ html {
                         }
                     }
 
-                    >[class*="wrapper_"] {
+                    >[class^="wrapper_"] {
                         width: 240px;
 
                         >div {
@@ -711,7 +741,7 @@ html {
                         }
                     }
 
-                    >[class*="container_"] {
+                    >[class^="container_"] {
                         background: var(--background-secondary);
                         border-radius: calc(var(--border-radius) - 4px);
                         border: 1px solid var(--border-subtle);
@@ -802,7 +832,7 @@ html {
     .layer_cd0de5:not(:has(.accountProfilePopoutWrapper_b2ca13)) {
         z-index: 10;
 
-        &:has(.statusItem_ad5fac, [id*="account-switch-account--"]) {
+        &:has(.statusItem_ad5fac, [id^="account-switch-account--"]) {
             margin-left: calc(12px + var(--space));
             margin-top: -10px;
         }
@@ -824,7 +854,7 @@ html {
     }
 }
 
-ol[aria-label*="Messages in"]>.divider_c2654d {
+ol[aria-label^="Messages in"]>.divider_c2654d {
     display: none;
 }
 
@@ -850,14 +880,14 @@ html:is(.is-mobile) {
 
                     >.sidebar_a4d4d9 {
                         >section {
-                            >[class*="container_"] {
+                            >[class^="container_"] {
                                 width: calc(100% + (55px - var(--space)));
                             }
                         }
                     }
                 }
 
-                >[class*="chat_"] {
+                >[class^="chat_"] {
 
                     .searchResultsWrap_c2b47d,
                     .membersWrap_cbd271,

Original file line number	Diff line number	Diff line change
`@@ -125,7 +125,7 @@ html {`
`125`	`125`	`z-index: 4;`
`126`	`126`	`padding: 0;`
`127`	`127`
`128`		`- >[class*="gradient_"] {`
	`128`	`+ >[class^="gradient_"] {`
`129`	`129`	`display: none;`
`130`	`130`	`}`
`131`	`131`	`}`
`@@ -257,7 +257,7 @@ html {`
`257`	`257`	`border: 1px solid var(--border-subtle);`
`258`	`258`	`border-radius: var(--border-radius);`
`259`	`259`
`260`		`- >[class*="chat_"]:before {`
	`260`	`+ >[class^="chat_"]:before {`
`261`	`261`	`box-shadow: none !important;`
`262`	`262`	`}`
`263`	`263`	`}`
`@@ -304,27 +304,31 @@ html {`
`304`	`304`	`z-index: 10;`
`305`	`305`	`}`
`306`	`306`
`307`		`- div[class*="channelBottomBarArea_"] {`
	`307`	`+ div[class^="channelBottomBarArea_"] {`
`308`	`308`	`background: var(--bg-overlay-3, var(--channeltextarea-background));`
`309`	`309`	`display: grid;`
`310`	`310`	`grid-template-rows: 1fr;`
`311`	`311`	`grid-template-columns: 1fr auto;`
`312`	`312`
`313`		`- >div[class*="channelAppLauncher_"] {`
	`313`	`+ >div[class^="channelAppLauncher_"] {`
`314`	`314`	`position: absolute;`
`315`	`315`	`top: -50px;`
`316`	`316`	`right: 16px;`
`317`	`317`	`}`
`318`	`318`
`319`		`- >div[class*="channelTextArea_"] {`
	`319`	`+ >div[class^="channelTextArea_"] {`
`320`	`320`	`position: relative;`
`321`	`321`	`margin: 0 !important;`
`322`	`322`	`width: 100%;`
`323`	`323`
`324`		`- div[class*="scrollableContainer_"] {`
	`324`	`+ div[class^="scrollableContainer_"] {`
`325`	`325`	`border-radius: 0;`
`326`	`326`	`min-height: 49px;`
`327`	`327`	`padding-top: 4px;`
	`328`	`+`
	`329`	`+ &:has(button[aria-label="Send Message"]) {`
	`330`	`+ padding-right: 8px;`
	`331`	`+ }`
`328`	`332`	`}`
`329`	`333`	`}`
`330`	`334`	`}`
`@@ -370,10 +374,10 @@ html {`
`370`	`374`	`}`
`371`	`375`
`372`	`376`	`>main,`
`373`		`- >[class*="shop_"],`
`374`		`- >[class*="applicationStore_"],`
	`377`	`+ >[class^="shop_"],`
	`378`	`+ >[class^="applicationStore_"],`
`375`	`379`	`>[class="pageWrapper_a3a4ce"],`
`376`		`- >[class*="chat_"]:not(:has(.video_d880dc)),`
	`380`	`+ >[class^="chat_"]:not(:has(.video_d880dc)),`
`377`	`381`	`>.container_d1c246 {`
`378`	`382`	`border: 1px solid var(--border-subtle);`
`379`	`383`
`@@ -383,7 +387,7 @@ html {`
`383`	`387`	`}`
`384`	`388`	`}`
`385`	`389`
`386`		`- >[class*="chat_"]:has(.video_d880dc)>.wrapper_d880dc {`
	`390`	`+ >[class^="chat_"]:has(.video_d880dc)>.wrapper_d880dc {`
`387`	`391`
`388`	`392`	`>*:first-child,`
`389`	`393`	`>*>.container_d1c246 {`
`@@ -399,7 +403,7 @@ html {`
`399`	`403`	`}`
`400`	`404`
`401`	`405`	`>main,`
`402`		`- >[class*="chat_"] {`
	`406`	`+ >[class^="chat_"] {`
`403`	`407`	`.peopleList_e0840f {`
`404`	`408`	`>div:first-child {`
`405`	`409`	`display: flex;`
`@@ -418,7 +422,7 @@ html {`
`418`	`422`	`}`
`419`	`423`
`420`	`424`	`[aria-label="Message Requests"] {`
`421`		`- [data-list-item-id*="message-requests-spam-list_"] {`
	`425`	`+ [data-list-item-id^="message-requests-spam-list_"] {`
`422`	`426`	`border: 1px solid var(--border-subtle);`
`423`	`427`	`border-radius: calc(var(--border-radius) - 4px);`
`424`	`428`	`padding: 16px 10px;`
`@@ -445,14 +449,14 @@ html {`
`445`	`449`	`}`
`446`	`450`	`}`
`447`	`451`
`448`		`- >[class*="content_"] {`
	`452`	`+ >[class^="content_"] {`
`449`	`453`	`.wrapper_a3747e {`
`450`	`454`	`max-width: 320px;`
`451`	`455`	`}`
`452`	`456`	`}`
`453`	`457`	`}`
`454`	`458`
`455`		`- >[class*="chat_"] {`
	`459`	`+ >[class^="chat_"] {`
`456`	`460`
`457`	`461`	`.searchResultsWrap_c2b47d,`
`458`	`462`	`.membersWrap_cbd271,`
`@@ -493,9 +497,9 @@ html {`
`493`	`497`	`}`
`494`	`498`	`}`
`495`	`499`
`496`		`- >.container_d1c246>[class*="chat_"],`
	`500`	`+ >.container_d1c246>[class^="chat_"],`
`497`	`501`	`>* section.container_fc4f04,`
`498`		`- >[class="chat_"]>[class="subtitleContainer_"]>[class*="title_"] {`
	`502`	`+ >[class^="chat_"]>[class^="subtitleContainer_"]>[class^="title_"] {`
`499`	`503`	`padding: 0 8px;`
`500`	`504`	`min-height: 56px;`
`501`	`505`	`border-bottom: 1px solid var(--border-subtle);`
`@@ -508,8 +512,8 @@ html {`
`508`	`512`	`padding: 0;`
`509`	`513`	`}`
`510`	`514`
`511`		`- [class="tabBar_"]>,`
`512`		`- [class*="toolbar_"] button {`
	`515`	`+ [class^="tabBar_"]>*,`
	`516`	`+ [class^="toolbar_"] button {`
`513`	`517`	`height: 32px;`
`514`	`518`	`border-radius: calc(var(--border-radius) - 8px) !important;`
`515`	`519`	`overflow: hidden`
`@@ -620,7 +624,7 @@ html {`
`620`	`624`	`}`
`621`	`625`	`}`
`622`	`626`
`623`		`- >div:has([class*="channelNotice_"])>div {`
	`627`	`+ >div:has([class^="channelNotice_"])>div {`
`624`	`628`	`margin: 16px 0 0;`
`625`	`629`	`padding: 0 16px 16px;`
`626`	`630`	`}`
`@@ -646,6 +650,32 @@ html {`
`646`	`650`	`}`
`647`	`651`	`}`
`648`	`652`
	`653`	`+ &:has([class*="discoverHeader_"]) {`
	`654`	`+ .sidebarContainer_a3a4ce {`
	`655`	`+ scrollbar-width: none;`
	`656`	`+`
	`657`	`+ >h2 {`
	`658`	`+ margin: 0;`
	`659`	`+ min-height: 55px;`
	`660`	`+ padding: 0 16px;`
	`661`	`+ border-bottom: 1px solid var(--border-subtle);`
	`662`	`+ display: flex;`
	`663`	`+ align-items: center;`
	`664`	`+ font-size: 18px;`
	`665`	`+ line-height: 1.25;`
	`666`	`+ font-weight: 600;`
	`667`	`+ margin-bottom: 8px;`
	`668`	`+ }`
	`669`	`+`
	`670`	`+ >div {`
	`671`	`+ height: 42px;`
	`672`	`+ margin: 1.5px 8px;`
	`673`	`+ border-radius: calc(var(--border-radius) - 4px) !important;`
	`674`	`+ overflow: hidden;`
	`675`	`+ }`
	`676`	`+ }`
	`677`	`+ }`
	`678`	`+`
`649`	`679`	`>div[class^="container_"] {`
`650`	`680`	`gap: 8px;`
`651`	`681`
`@@ -702,7 +732,7 @@ html {`
`702`	`732`	`}`
`703`	`733`	`}`
`704`	`734`
`705`		`- >[class*="wrapper_"] {`
	`735`	`+ >[class^="wrapper_"] {`
`706`	`736`	`width: 240px;`
`707`	`737`
`708`	`738`	`>div {`
`@@ -711,7 +741,7 @@ html {`
`711`	`741`	`}`
`712`	`742`	`}`
`713`	`743`
`714`		`- >[class*="container_"] {`
	`744`	`+ >[class^="container_"] {`
`715`	`745`	`background: var(--background-secondary);`
`716`	`746`	`border-radius: calc(var(--border-radius) - 4px);`
`717`	`747`	`border: 1px solid var(--border-subtle);`
`@@ -802,7 +832,7 @@ html {`
`802`	`832`	`.layer_cd0de5:not(:has(.accountProfilePopoutWrapper_b2ca13)) {`
`803`	`833`	`z-index: 10;`
`804`	`834`
`805`		`- &:has(.statusItem_ad5fac, [id*="account-switch-account--"]) {`
	`835`	`+ &:has(.statusItem_ad5fac, [id^="account-switch-account--"]) {`
`806`	`836`	`margin-left: calc(12px + var(--space));`
`807`	`837`	`margin-top: -10px;`
`808`	`838`	`}`
`@@ -824,7 +854,7 @@ html {`
`824`	`854`	`}`
`825`	`855`	`}`
`826`	`856`
`827`		`-ol[aria-label*="Messages in"]>.divider_c2654d {`
	`857`	`+ol[aria-label^="Messages in"]>.divider_c2654d {`
`828`	`858`	`display: none;`
`829`	`859`	`}`
`830`	`860`
`@@ -850,14 +880,14 @@ html:is(.is-mobile) {`
`850`	`880`
`851`	`881`	`>.sidebar_a4d4d9 {`
`852`	`882`	`>section {`
`853`		`- >[class*="container_"] {`
	`883`	`+ >[class^="container_"] {`
`854`	`884`	`width: calc(100% + (55px - var(--space)));`
`855`	`885`	`}`
`856`	`886`	`}`
`857`	`887`	`}`
`858`	`888`	`}`
`859`	`889`
`860`		`- >[class*="chat_"] {`
	`890`	`+ >[class^="chat_"] {`
`861`	`891`
`862`	`892`	`.searchResultsWrap_c2b47d,`
`863`	`893`	`.membersWrap_cbd271,`