diff --git a/src/modules/betterdiscord/_settings.scss b/src/modules/betterdiscord/_settings.scss index 70490f9c..1459b9ea 100644 --- a/src/modules/betterdiscord/_settings.scss +++ b/src/modules/betterdiscord/_settings.scss @@ -28,7 +28,7 @@ } // Version info in sidebar -.info__2debe .bd-text-muted{ +._2debea61131de3de-info .bd-text-muted{ color: $TextFillColorSecondary; } diff --git a/src/modules/betterdiscord/plugins/_Dastan21.FavoriteMedia.scss b/src/modules/betterdiscord/plugins/_Dastan21.FavoriteMedia.scss index dac8e36b..2768656c 100644 --- a/src/modules/betterdiscord/plugins/_Dastan21.FavoriteMedia.scss +++ b/src/modules/betterdiscord/plugins/_Dastan21.FavoriteMedia.scss @@ -1,12 +1,12 @@ // Chat box icons -.theme-dark .buttonContainer__74017.fm-buttonContainer{ +.theme-dark ._740174f3d6a2c8fe-buttonContainer.fm-buttonContainer{ align-items: flex-start; - .button__201d5{ + ._201d5e8a3c09670a-button{ width: 32px; height: 32px; margin-top: 6px; margin-right: 2px; - &.active__24af7, + &._24af7f4d0326ba4f-active, &:hover{ background-color: $ControlFillColorDefault; border: 1px solid $ControlStrokeColorDefault; diff --git a/src/modules/betterdiscord/plugins/_DevilBro.GameActivityToggle.scss b/src/modules/betterdiscord/plugins/_DevilBro.GameActivityToggle.scss index b0f1da6c..a9046961 100644 --- a/src/modules/betterdiscord/plugins/_DevilBro.GameActivityToggle.scss +++ b/src/modules/betterdiscord/plugins/_DevilBro.GameActivityToggle.scss @@ -1,4 +1,4 @@ -html[lang^="en-"].theme-dark .panels__5e434 .button__67645{ +html[lang^="en-"].theme-dark ._5e434347c823b592-panels ._67645e1530f1195d-button{ &[aria-label="Disable Game Activity"]::before{ content: "\E7FC"; // Game } diff --git a/src/modules/betterdiscord/plugins/_DevilBro.PersonalPins.scss b/src/modules/betterdiscord/plugins/_DevilBro.PersonalPins.scss index c7330680..079c9c2a 100644 --- a/src/modules/betterdiscord/plugins/_DevilBro.PersonalPins.scss +++ b/src/modules/betterdiscord/plugins/_DevilBro.PersonalPins.scss @@ -1,13 +1,13 @@ -html[lang^="en-"].theme-dark .toolbar__9293f .iconWrapper__9293f.cursorPointer_B3uwDA{ +html[lang^="en-"].theme-dark ._9293f6b2fc12398a-toolbar ._9293f6b2fc12398a-iconWrapper.cursorPointer_B3uwDA{ &::before{ // Annoyingly has no aria-label content: "\E70B"; // Note } } -.theme-dark .popout_xwjvsX.messagesPopoutWrap_e8b59c.themedPopout_1TrfdI{ +.theme-dark .popout_xwjvsX.e8b59c4b335dd2fc-messagesPopoutWrap.themedPopout_1TrfdI{ // Tabs - .tabBar_ab6641{ - .tab_ab6641{ + .ab66419eae73260f-tabBar{ + .ab66419eae73260f-tab{ padding-left: 0; padding-right: 0; margin-right: 16px; @@ -18,7 +18,7 @@ html[lang^="en-"].theme-dark .toolbar__9293f .iconWrapper__9293f.cursorPointer_B color: $TextFillColorSecondary; } - &.selected_aa8da2{ + &.aa8da23faa27393c-selected{ background-color: transparent; color: $AccentTextFillColorPrimary; &::before{ diff --git a/src/modules/betterdiscord/plugins/_DevilBro.ReadAllNotificationsButton.scss b/src/modules/betterdiscord/plugins/_DevilBro.ReadAllNotificationsButton.scss index d51b8b64..9d698eac 100644 --- a/src/modules/betterdiscord/plugins/_DevilBro.ReadAllNotificationsButton.scss +++ b/src/modules/betterdiscord/plugins/_DevilBro.ReadAllNotificationsButton.scss @@ -1,4 +1,4 @@ -.theme-dark .listItem__650eb.frame_oXWS21{ +.theme-dark ._650eb104245d257b-listItem.frame_oXWS21{ &:active{ transform: none; } diff --git a/src/modules/betterdiscord/plugins/_DevilBro.SpotifyControls.scss b/src/modules/betterdiscord/plugins/_DevilBro.SpotifyControls.scss index 473fe9a2..968b1c57 100644 --- a/src/modules/betterdiscord/plugins/_DevilBro.SpotifyControls.scss +++ b/src/modules/betterdiscord/plugins/_DevilBro.SpotifyControls.scss @@ -9,13 +9,13 @@ color: $TextFillColorSecondary; } // Can't detect if Spotify is playing or not, so just use default icons by plugin - .contents__201d5{ + ._201d5e8a3c09670a-contents{ display: block !important; // Override plugin CSS } } .theme-dark .container_6sXIoE.maximized_vv2Wr0.withTimeline_824fT_{ - .button__67645{ + ._67645e1530f1195d-button{ margin-left: 2px; &[style="margin-right: 4px;"]{ margin-right: 0 !important; // Override plugin CSS diff --git a/src/modules/betterdiscord/plugins/_DevilBro.StaffTag.scss b/src/modules/betterdiscord/plugins/_DevilBro.StaffTag.scss index cc3251bb..a1fbea47 100644 --- a/src/modules/betterdiscord/plugins/_DevilBro.StaffTag.scss +++ b/src/modules/betterdiscord/plugins/_DevilBro.StaffTag.scss @@ -1,5 +1,5 @@ -.theme-dark .botTag__5d473[style], -.theme-dark .botTag_c19a55[style]{ +.theme-dark ._5d473ecff348c314-botTag[style], +.theme-dark .c19a557985eb7793-botTag[style]{ padding: 0 4px !important; border-radius: 4px; text-transform: none; diff --git a/src/modules/betterdiscord/plugins/_DevilBro.Translator.scss b/src/modules/betterdiscord/plugins/_DevilBro.Translator.scss index 999824b1..ea7dac1d 100644 --- a/src/modules/betterdiscord/plugins/_DevilBro.Translator.scss +++ b/src/modules/betterdiscord/plugins/_DevilBro.Translator.scss @@ -10,7 +10,7 @@ } } -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="message-translator-translate-message"]::before{ content: "\F2B7"; // LocaleLanguage } diff --git a/src/modules/betterdiscord/plugins/_programmer2514.CollapsibleUI.scss b/src/modules/betterdiscord/plugins/_programmer2514.CollapsibleUI.scss index 9ad113d2..eb9a5bfb 100644 --- a/src/modules/betterdiscord/plugins/_programmer2514.CollapsibleUI.scss +++ b/src/modules/betterdiscord/plugins/_programmer2514.CollapsibleUI.scss @@ -1,6 +1,6 @@ .theme-dark #cui-toolbar-container{ - .iconWrapper__9293f{ - &.selected__9293f{ + ._9293f6b2fc12398a-iconWrapper{ + &._9293f6b2fc12398a-selected{ svg{ color: $TextOnAccentFillColorPrimary; } diff --git a/src/modules/betterdiscord/plugins/_sawahkitty.KeywordTracker.scss b/src/modules/betterdiscord/plugins/_sawahkitty.KeywordTracker.scss index 387c88bb..c7d9d627 100644 --- a/src/modules/betterdiscord/plugins/_sawahkitty.KeywordTracker.scss +++ b/src/modules/betterdiscord/plugins/_sawahkitty.KeywordTracker.scss @@ -1,8 +1,8 @@ // Show the default icon -html[lang^="en-"].theme-dark .toolbar__9293f{ - .iconWrapper__9293f{ +html[lang^="en-"].theme-dark ._9293f6b2fc12398a-toolbar{ + ._9293f6b2fc12398a-iconWrapper{ &[aria-label="Keyword Matches"]{ - .icon__9293f{ + ._9293f6b2fc12398a-icon{ display: block; } } diff --git a/src/modules/common/_bot_tag.scss b/src/modules/common/_bot_tag.scss index 95365e31..7fc769be 100644 --- a/src/modules/common/_bot_tag.scss +++ b/src/modules/common/_bot_tag.scss @@ -1,7 +1,7 @@ -.botTagRegular__82f07{ +._82f0793afa59e5dc-botTagRegular{ background-color: $SystemFillColorSolidAttentionBackground; text-transform: none; - .botText__82f07{ + ._82f0793afa59e5dc-botText{ font-weight: normal; text-transform: lowercase; &::first-letter{ diff --git a/src/modules/common/_mention.scss b/src/modules/common/_mention.scss index e430ab85..8cbc2696 100644 --- a/src/modules/common/_mention.scss +++ b/src/modules/common/_mention.scss @@ -1,6 +1,6 @@ .theme-dark{ // Mention - .wrapper_f61d60{ + .cdf8a9a2bbd98bd3-wrapper{ background-color: transparent; color: $AccentTextFillColorPrimary; font-weight: normal; diff --git a/src/modules/common/_tab_bar.scss b/src/modules/common/_tab_bar.scss index 7d6a0ec4..f97ac12f 100644 --- a/src/modules/common/_tab_bar.scss +++ b/src/modules/common/_tab_bar.scss @@ -1,14 +1,14 @@ .theme-dark{ - .tabBar__0b563, // A: Guild > Channels & Roles + ._0b56311ebc6682e2-tabBar, // A: Guild > Channels & Roles .tabBar_b9fccc, // B: User profile modal - .tabBar_d6f9e9, // C: User Settings > Profiles - .settingsTabBar_dc2e0e, // D: User Settings > Family Centre - .tabBar__4efb4, // E: Event information modal - .top_aa8da2{ // F: User Settings > Privacy & Safety + .d6f9e90c3456ac40-tabBar, // C: User Settings > Profiles + .dc2e0e7839a6713a-settingsTabBar, // D: User Settings > Family Centre + ._4efb4560fd616a25-tabBar, // E: Event information modal + .aa8da23faa27393c-top{ // F: User Settings > Privacy & Safety border-bottom: 0; // Items - .item_aa8da2{ + .aa8da23faa27393c-item{ @include TypeBody; color: $TextFillColorPrimary; border: 0; @@ -18,7 +18,7 @@ &::after{ display: none; } - &.selected_aa8da2{ + &.aa8da23faa27393c-selected{ border: 0; &::before{ content: ""; diff --git a/src/modules/common/_typography.scss b/src/modules/common/_typography.scss index f772dfeb..b8ea0fe8 100644 --- a/src/modules/common/_typography.scss +++ b/src/modules/common/_typography.scss @@ -1,5 +1,5 @@ // User settings section sub header -.theme-dark .eyebrow_b717a1{ +.theme-dark .b717a15017b82443-eyebrow{ @include TypeBodyStrong; color: $TextFillColorPrimary; text-transform: none; diff --git a/src/modules/core/_reset.scss b/src/modules/core/_reset.scss index a6357319..a127aaf2 100644 --- a/src/modules/core/_reset.scss +++ b/src/modules/core/_reset.scss @@ -23,12 +23,12 @@ } // Override nitro username fonts -.cherryBomb__89a31, -.chicle__89a31, -.museoModerno__89a31, -.neoCastel__89a31, -.pixelify__89a31, -.sinistre__89a31, -.zillaSlab__89a31{ +._89a318b9387eda06-cherryBomb, +._89a318b9387eda06-chicle, +._89a318b9387eda06-museoModerno, +._89a318b9387eda06-neoCastel, +._89a318b9387eda06-pixelify, +._89a318b9387eda06-sinistre, +._89a318b9387eda06-zillaSlab{ font-family: var(--font-primary); } diff --git a/src/modules/discover/_discovery.scss b/src/modules/discover/_discovery.scss index ab8a1489..5ea3d813 100644 --- a/src/modules/discover/_discovery.scss +++ b/src/modules/discover/_discovery.scss @@ -10,8 +10,8 @@ border-radius: 8px 0 0 0; } - .sidebar_c48ade{ - .container__91a9d{ + ._5e434347c823b592-sidebar{ + ._91a9d7f7e5248a56-container{ height: 32px; margin-bottom: 2px; position: relative; @@ -21,16 +21,16 @@ padding: 0 8px; } - .avatar__91a9d{ + ._91a9d7f7e5248a56-avatar{ width: 16px; height: 16px; } - .name__91a9d{ + ._91a9d7f7e5248a56-name{ @include TypeBody; color: $TextFillColorPrimary; } - &.selected__91a9d{ + &._91a9d7f7e5248a56-selected{ .itemInner_c72b37{ background-color: $SubtleFillColorSecondary; } diff --git a/src/modules/home/_activity.scss b/src/modules/home/_activity.scss index 5a50b8af..5a6f57ee 100644 --- a/src/modules/home/_activity.scss +++ b/src/modules/home/_activity.scss @@ -1,46 +1,46 @@ -.theme-dark .nowPlayingColumn__133bf{ +.theme-dark ._133bf5eea8e33a34-nowPlayingColumn{ background: transparent; - .container__7d20c{ + ._7d20cf18f8a2784c-container{ background-color: $LayerFillColorDefault; border-left: 1px solid $CardStrokeColorDefault; } - .scroller__7d20c{ + ._7d20cf18f8a2784c-scroller{ border: 0; } // Header - .header__7d20c{ + ._7d20cf18f8a2784c-header{ @include TypeSubtitle; } // User data consent card - .card__2eab1.outer_bf1984{ + .eafb9cc569d6dcbd-card.bf1984a18b3ec6f0-outer{ background-color: $LayerFillColorDefault; - .header__2eab1, + .eafb9cc569d6dcbd-header, .defaultColor__77578 { text-align: left; } } // Card - .wrapper__00943{ + ._00943886e1cf89d1-wrapper{ background-color: $LayerFillColorDefault; border: 1px solid $CardStrokeColorDefault; &:hover{ background-color: $LayerFillColorAlt; } } - .inset_bf1984{ + .bf1984a18b3ec6f0-inset{ background-color: $LayerFillColorDefault; border: 1px solid $CardStrokeColorDefault; border-radius: 4px; - .section__00943{ + ._00943886e1cf89d1-section{ background-color: transparent; } } // Empty - .emptyCard__7e549{ + ._7e549558f336cddb-emptyCard{ background-color: $LayerFillColorDefault; border: 1px solid $CardStrokeColorDefault; align-items: baseline; diff --git a/src/modules/home/_conversations.scss b/src/modules/home/_conversations.scss index 33682054..a3087bb2 100644 --- a/src/modules/home/_conversations.scss +++ b/src/modules/home/_conversations.scss @@ -1,10 +1,10 @@ -.theme-dark .privateChannels_e6b769{ - .scroller__99e7c{ +.theme-dark .e6b7699ce8339e1c-privateChannels{ + ._99e7cad8d4c55236-scroller{ margin-bottom: 64px; } - .link__972a0[href="/channels/@me"]{ - .avatar__20a53{ + ._972a0d22c8afa7f0-link[href="/channels/@me"]{ + ._20a53846fe2e8513-avatar{ &::before{ content: "\E13D"; // Contact @include FontIconFluent; @@ -16,14 +16,14 @@ } } // Remove the nitro button - .link__972a0[href="/store"]{ + ._972a0d22c8afa7f0-link[href="/store"]{ display: none; } // Remove badges from the shop button - .channel__972a0{ - .link__972a0[data-list-item-id*="___shop"]{ - .avatar__20a53{ + ._972a0d22c8afa7f0-channel{ + ._972a0d22c8afa7f0-link[data-list-item-id*="___shop"]{ + ._20a53846fe2e8513-avatar{ &::before{ content: "\E13D"; // Contact @include FontIconFluent; @@ -34,35 +34,35 @@ } } // Remove badges from the shop button - .newBadge__4ed1a{ + ._4ed1af9a212b8f4f-newBadge{ display: none; } } } - .sectionDivider_e6b769{ + .e6b7699ce8339e1c-sectionDivider{ display: none; } - .interactive__972a0{ + ._972a0d22c8afa7f0-interactive{ &:hover, &:focus-within{ background-color: $SubtleFillColorSecondary; box-shadow: inset 0 0 0 1px $SubtleFillColorSecondary; - .name__20a53{ + ._20a53846fe2e8513-name{ color: $TextFillColorPrimary; } } - &.selected_bf202d{ + &.bf202d63ad53e289-selected{ background-color: $SubtleFillColorSecondary; } - .layout__20a53{ + ._20a53846fe2e8513-layout{ padding: 0 8px; } // Name - .name__20a53{ + ._20a53846fe2e8513-name{ @include TypeBody; color: $TextFillColorSecondary; } @@ -74,7 +74,7 @@ } // DMs header - .privateChannelsHeaderContainer__99e7c { + ._99e7cad8d4c55236-privateChannelsHeaderContainer { height: auto; padding: 12px; color: $TextFillColorPrimary; diff --git a/src/modules/home/_dm_profile.scss b/src/modules/home/_dm_profile.scss index c401e9fa..3005c694 100644 --- a/src/modules/home/_dm_profile.scss +++ b/src/modules/home/_dm_profile.scss @@ -9,7 +9,7 @@ // Section title .title_c4a579, - .headerText__2ef49{ // 'Deprecated' spotify title + ._2ef4989efde1f4e4-headerText{ // 'Deprecated' spotify title @include TypeBodyStrong; text-transform: none; } diff --git a/src/modules/home/_home.scss b/src/modules/home/_home.scss index 9f614ef2..33d5ecc8 100644 --- a/src/modules/home/_home.scss +++ b/src/modules/home/_home.scss @@ -1,9 +1,9 @@ -.theme-dark .sidebar__5e434{ - .privateChannels_e6b769{ +.theme-dark ._5e434347c823b592-sidebar{ + .e6b7699ce8339e1c-privateChannels{ background-color: transparent; } - .searchBar_e6b769{ + .e6b7699ce8339e1c-searchBar{ box-shadow: none; border-bottom: 0; button{ @@ -17,7 +17,7 @@ } } - .scroller__99e7c{ + ._99e7cad8d4c55236-scroller{ background-color: transparent; } } diff --git a/src/modules/home/_main.scss b/src/modules/home/_main.scss index 9028f511..b82f645b 100644 --- a/src/modules/home/_main.scss +++ b/src/modules/home/_main.scss @@ -1,7 +1,7 @@ -.theme-dark .container__133bf{ +.theme-dark ._133bf5eea8e33a34-container{ border-top: 0; // Body - .tabBody__133bf{ + ._133bf5eea8e33a34-tabBody{ background-color: $LayerFillColorDefault; border-top: 1px solid $CardStrokeColorDefault; border-left: 1px solid $CardStrokeColorDefault; @@ -11,13 +11,13 @@ } // Search bar - .searchBar__5ec2f{ + ._5ec2fb8b5de26b21-searchBar{ margin: 18px 20px 8px 20px; background-color: transparent; } // Header - .title__1472a{ + ._1472a8142d02ea23-title{ @include TypeSubtitle; color: $TextFillColorPrimary; letter-spacing: normal; @@ -25,35 +25,35 @@ } // Item - .peopleListItem_cc6179.active_cc6179, - .peopleListItem_cc6179:hover{ + .cc61794aab086a2e-peopleListItem.cc61794aab086a2e-active, + .cc61794aab086a2e-peopleListItem:hover{ border-radius: 4px; } // Username - .username__0a06e{ + ._0a06ed6ea040aa1b-username{ @include TypeBodyStrong; } // User Status - .text__19b6d{ + ._19b6da809e654e70-text{ @include TypeCaption; } // Buttons - .actionButton_f8fa06{ + .f8fa068db52f043f-actionButton{ background-color: transparent; visibility: hidden; } // Show buttons when hovered - .peopleListItem_cc6179.active_cc6179 .actionButton_f8fa06, - .peopleListItem_cc6179:hover .actionButton_f8fa06{ + .cc61794aab086a2e-peopleListItem.cc61794aab086a2e-active .f8fa068db52f043f-actionButton, + .cc61794aab086a2e-peopleListItem:hover .f8fa068db52f043f-actionButton{ visibility: visible; } } // Empty - .friendsEmpty_c7ea19{ + .c7ea19a1be2e0a89-friendsEmpty{ .image__08515{ filter: brightness(200%) } @@ -64,27 +64,27 @@ } // Add friend - .header__94b08{ + ._94b083577c5dbbb3-header{ padding: 20px; } - .addFriendInputWrapper__72ba7{ + ._72ba79a5dfa2ce86-addFriendInputWrapper{ padding: 0; background-color: transparent; border: 0; - .input__0ed4f{ + ._0ed4fc708cdbac0d-input{ padding: 0 12px; letter-spacing: normal; } } // Remove hint text - .addFriendHint__72ba7{ + ._72ba79a5dfa2ce86-addFriendHint{ display: none; } } // Icon replacements -html[lang^="en-"].theme-dark .container__133bf{ - .actionButton_f8fa06{ +html[lang^="en-"].theme-dark ._133bf5eea8e33a34-container{ + .f8fa068db52f043f-actionButton{ &::before{ @include FontIconFluent; color: $TextFillColorSecondary; diff --git a/src/modules/home/_toolbar.scss b/src/modules/home/_toolbar.scss index c857929d..fde1f9d4 100644 --- a/src/modules/home/_toolbar.scss +++ b/src/modules/home/_toolbar.scss @@ -1,21 +1,21 @@ -.theme-dark .container__133bf{ +.theme-dark ._133bf5eea8e33a34-container{ background-color: transparent; // Toolbar - .container__9293f{ + ._9293f6b2fc12398a-container{ background-color: transparent; // Remove icon - .children__9293f > .iconWrapper__9293f{ + ._9293f6b2fc12398a-children > ._9293f6b2fc12398a-iconWrapper{ display: none; } // Remove additional padding from group DMs button - .inviteToolbar__133bf{ + ._133bf5eea8e33a34-inviteToolbar{ padding-right: 0; } // Tab bar - .item__133bf{ + ._133bf5eea8e33a34-item{ height: 36px; margin: 0 0 0 8px; border-radius: 0; @@ -25,7 +25,7 @@ background-color: transparent; color: $TextFillColorSecondary; } - &.selected_aa8da2{ + &.aa8da23faa27393c-selected{ background-color: transparent; &::before{ content: ""; @@ -38,15 +38,15 @@ } } // Add friend button - &.addFriend__133bf{ + &._133bf5eea8e33a34-addFriend{ background-color: transparent; - &.selected_aa8da2{ + &.aa8da23faa27393c-selected{ color: $TextFillColorPrimary; } } // Badge - .badge__133bf{ + ._133bf5eea8e33a34-badge{ background-color: $SystemFillColorCritical !important; // For some reason this is in line @include TypeCaption; color: $TextOnAccentFillColorPrimary; @@ -54,7 +54,7 @@ } // Remove gradient on right-side of tab bar - .children__9293f::after{ + ._9293f6b2fc12398a-children::after{ display: none; } // Remove divider between Group DM and Inbox diff --git a/src/modules/icons/_context_menu.scss b/src/modules/icons/_context_menu.scss index 422e2fdf..107f2f36 100644 --- a/src/modules/icons/_context_menu.scss +++ b/src/modules/icons/_context_menu.scss @@ -1,5 +1,5 @@ // User settings (User area > Settings) -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="user-settings-cog-My_Account"]::before{ content: "\E77B"; // Contact } @@ -105,7 +105,7 @@ } // User -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="user-context-user-profile"]::before{ content: "\E77B"; // Contact } @@ -224,7 +224,7 @@ } // Server -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="guild-header-popout-premium-subscribe"]::before{ content: "\EC4A"; // SpeedHigh } @@ -281,7 +281,7 @@ } // Channel -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="channel-context-mark-channel-read"]::before{ content: "\E166"; // Read } @@ -346,7 +346,7 @@ } // Group DM -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="gdm-context-mark-channel-read"]::before{ content: "\E166"; // Read } @@ -368,7 +368,7 @@ } // Guild -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="guild-context-mark-guild-read"]::before{ content: "\E166"; // Read } @@ -492,7 +492,7 @@ } // Message -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="message-add-reaction"]::before{ // Intentionally not displaying an icon as it is a submenu, and would also require icon reuse content: "\E9CE"; // Unknown @@ -574,7 +574,7 @@ } } // Message action -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="message-actions-add-reaction-0"]::before{ // Intentionally not displaying an icon as it is a submenu, and would also require icon reuse content: "\E9CE"; // Unknown @@ -624,7 +624,7 @@ } // Thread -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="thread-context-join-thread"]::before{ content: "\E13F"; } @@ -670,7 +670,7 @@ } // Chatbox -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="textarea-context-suggestions"]::before{ content: "\E1CE"; // OutlineStar } @@ -702,7 +702,7 @@ } // Attachment/upload -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="channel-attach-upload-file"]::before{ content: "\E11C"; // Upload } @@ -721,7 +721,7 @@ } // RTC -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="rtc-channel-VOICE_ACTIVITY"]::before{ content: "\F12E"; // MicrophoneListening } @@ -737,7 +737,7 @@ } // Mic -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="audio-device-context-VOICE_ACTIVITY"]::before{ content: "\F12E"; // MicrophoneListening } @@ -746,7 +746,7 @@ } } -.theme-dark .menu_c1e9c4 .item_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item{ &[id="account-status-picker"]::before{ content: "\F136"; // StatusCircleOuter } diff --git a/src/modules/icons/home/_main.scss b/src/modules/icons/home/_main.scss index 923947c7..147b2ac4 100644 --- a/src/modules/icons/home/_main.scss +++ b/src/modules/icons/home/_main.scss @@ -1,4 +1,4 @@ -html[lang^="en-"].theme-dark .peopleList__5ec2f { +html[lang^="en-"].theme-dark ._5ec2fb8b5de26b21-peopleList { [aria-label="Message"]::before{ content: "\e8bd"; // Message } diff --git a/src/modules/icons/main/_account.scss b/src/modules/icons/main/_account.scss index 06244c1a..479103b8 100644 --- a/src/modules/icons/main/_account.scss +++ b/src/modules/icons/main/_account.scss @@ -8,7 +8,7 @@ } // Also includes the RTC controls icons to save having another file -html[lang^="en-"].theme-dark .panels__5e434 .button__201d5{ +html[lang^="en-"].theme-dark ._5e434347c823b592-panels ._201d5e8a3c09670a-button{ &[aria-label="Deafen"][aria-checked=true]::before{ content: "\E74F"; // Mute } @@ -21,7 +21,7 @@ html[lang^="en-"].theme-dark .panels__5e434 .button__201d5{ &[aria-label="Mute"][aria-checked=false]::before{ content: "\E720"; // Microphone } - &.buttonChevron__37e49::before{ + &._37e49614b9f110a9-buttonChevron::before{ content: "\E70D"; font-size: 8px; } @@ -65,7 +65,7 @@ html[lang^="en-"].theme-dark .panels__5e434 .button__201d5{ } } -html[lang^="en-"].theme-dark .panels__5e434 .actionButtons_e131a9 button.button__201d5{ +html[lang^="en-"].theme-dark ._5e434347c823b592-panels .e131a99484292a19-actionButtons button._201d5e8a3c09670a-button{ &[aria-label*="camera" i]::before{ content: "\E156"; // WebCam } @@ -80,7 +80,7 @@ html[lang^="en-"].theme-dark .panels__5e434 .actionButtons_e131a9 button.button_ } } -html[lang^="en-"].theme-dark .popover_c97e55 .button_c97e55{ +html[lang^="en-"].theme-dark .c97e55feac203869-popover .c97e55feac203869-button{ &[aria-label^="Edit"]::before{ content: "\E70F" // Edit } diff --git a/src/modules/icons/main/_call.scss b/src/modules/icons/main/_call.scss index dd2c0b09..314d10da 100644 --- a/src/modules/icons/main/_call.scss +++ b/src/modules/icons/main/_call.scss @@ -1,4 +1,4 @@ -html[lang^="en-"].theme-dark .wrapper__1405b .button__201d5{ +html[lang^="en-"].theme-dark ._1405b3b8e8eb5fd0-wrapper ._201d5e8a3c09670a-button{ &[aria-label*="Camera"]::before, &[aria-label*="Join Video Call"]::before{ content: "\E156"; // WebCam diff --git a/src/modules/icons/main/_chat_menu.scss b/src/modules/icons/main/_chat_menu.scss index 1058b8de..3eebd95e 100644 --- a/src/modules/icons/main/_chat_menu.scss +++ b/src/modules/icons/main/_chat_menu.scss @@ -1,5 +1,5 @@ -html[lang^="en-"].theme-dark .wrapper_f7ecac{ - .button_f7ecac{ +html[lang^="en-"].theme-dark .f7ecaca5c80dbf3a-wrapper{ + .f7ecaca5c80dbf3a-button{ &[aria-label="Reply"]::before{ content: "\E97A"; // Reply } diff --git a/src/modules/icons/main/_toolbar.scss b/src/modules/icons/main/_toolbar.scss index e131b8cc..f7a51ae5 100644 --- a/src/modules/icons/main/_toolbar.scss +++ b/src/modules/icons/main/_toolbar.scss @@ -1,5 +1,5 @@ -html[lang^="en-"].theme-dark .toolbar__9293f{ - .iconWrapper__9293f{ +html[lang^="en-"].theme-dark ._9293f6b2fc12398a-toolbar{ + ._9293f6b2fc12398a-iconWrapper{ // Threads &[aria-label="Threads"]::before{ content: "\E8C4"; // ShowBcc @@ -104,7 +104,7 @@ html[lang^="en-"].theme-dark .toolbar__9293f{ content: "\E163"; // Calendar } } - .button__201d5{ + ._201d5e8a3c09670a-button{ // Call tiles // Invite &[aria-label="Invite"]::before{ @@ -122,7 +122,7 @@ html[lang^="en-"].theme-dark .toolbar__9293f{ } // Stage channel - .button__201d5{ + ._201d5e8a3c09670a-button{ // Show chat &[aria-label^="Show Chat"]::before{ content: "\E8A0"; // OpenPane diff --git a/src/modules/loadscreen/_loadscreen.scss b/src/modules/loadscreen/_loadscreen.scss index 9d07cf12..27191221 100644 --- a/src/modules/loadscreen/_loadscreen.scss +++ b/src/modules/loadscreen/_loadscreen.scss @@ -1,5 +1,5 @@ // Hide titlebar -.theme-dark .container_a2f514{ +.theme-dark .a2f5142ba8328dfd-container{ padding-top: 32px; top: -32px; } @@ -78,7 +78,7 @@ } -.theme-dark .container_a2f514{ +.theme-dark .a2f5142ba8328dfd-container{ background-color: #000; // Loading blob animations @@ -96,7 +96,7 @@ animation: fluent-loading-blob2-path 20s infinite, fluent-loading-blob-fade 1332ms ease-out; } } -.content_a2f514{ +.a2f5142ba8328dfd-content{ width: 64px; height: 64px; &::before{ @@ -108,7 +108,7 @@ } } -.content_a2f514{ +.a2f5142ba8328dfd-content{ video{ display: none; } @@ -123,12 +123,12 @@ } // Loading circle - .text_a2f514{ + .a2f5142ba8328dfd-text{ width: 64px; height: 64px; display: block; animation: fluent-loading-circle 1.5s linear infinite; - .body_a2f514{ + .a2f5142ba8328dfd-body{ line-height: unset; font-size: 0; @@ -154,17 +154,17 @@ } } - .tipTitle_a2f514, - .tip_a2f514{ + .a2f5142ba8328dfd-tipTitle, + .a2f5142ba8328dfd-tip{ display: none; } } } // Links -.problemsText_a2f514{ +.a2f5142ba8328dfd-problemsText{ color: $TextFillColorPrimary; } -.anchor_edefb8{ +.edefb8e22d63c542-anchor{ color: $AccentTextFillColorPrimary; } diff --git a/src/modules/main/_acrylic.scss b/src/modules/main/_acrylic.scss index fc728c48..422ae54c 100644 --- a/src/modules/main/_acrylic.scss +++ b/src/modules/main/_acrylic.scss @@ -1,16 +1,16 @@ // Main UI transparency .theme-dark{ - .sidebar__5e434, // channels - .container__2637a{ // channels + ._5e434347c823b592-sidebar, // channels + ._2637a2609f343032-container{ // channels background-color: transparent; } // Settings transparency - .layer__960e4, - .standardSidebarView__23e6b, - .sidebarRegionScroller__23e6b, - .contentRegion__23e6b, - .contentRegionScroller__23e6b{ + ._960e4207cea8323e-layer, + ._23e6b439306f125a-standardSidebarView, + ._23e6b439306f125a-sidebarRegionScroller, + ._23e6b439306f125a-contentRegion, + ._23e6b439306f125a-contentRegionScroller{ background: transparent; } @@ -21,7 +21,7 @@ // // NOTE: 2022-10-16 - Have to use the #{} trick because SASS and CSS saturate() functions collide and throw an error on compile when using a CSS var // See: https://github.com/sass/libsass/issues/151#issuecomment-54477631 - .bg__960e4{ + ._960e4207cea8323e-bg{ margin-top: -10px; // Hides the black bar at top of titlebar (ie. grabber) background: var(--fluent-acrylic-background); background-size: cover; diff --git a/src/modules/main/channels/_account.scss b/src/modules/main/channels/_account.scss index 0b944806..4cee511b 100644 --- a/src/modules/main/channels/_account.scss +++ b/src/modules/main/channels/_account.scss @@ -1,10 +1,10 @@ // Remove background from RTC/account -.theme-dark .panels__5e434{ +.theme-dark ._5e434347c823b592-panels{ background-color: $SolidBackgroundFillColorTertiary; border-radius: 4px; // Remove 1px margin from bottom of panel - .container__37e49{ + ._37e49614b9f110a9-container{ background-color: transparent; height: 48px; margin-bottom: 0; @@ -12,20 +12,20 @@ } // Remove margin on avatar/username wrapper - .avatarWrapper__37e49{ + ._37e49614b9f110a9-avatarWrapper{ margin-right: 0; &:hover{ background-color: transparent; } } - .buttons__37e49{ + ._37e49614b9f110a9-buttons{ gap: 4px; } .buttonSpace__37e49{ margin-right: 0; } - .button__67645{ + ._67645e1530f1195d-button{ background-color: $ControlFillColorDefault; border: 1px solid $ControlStrokeColorDefault; border-radius: 4px; @@ -36,8 +36,8 @@ &:active{ background-color: $ControlFillColorTertiary; } - .contents__201d5{ // Non-EN sizing fix - .lottieIcon__5eb9b{ + ._201d5e8a3c09670a-contents{ // Non-EN sizing fix + ._5eb9b3cc7c2b1ce8-lottieIcon{ position: absolute; top: 5px; left: 5px; @@ -48,10 +48,10 @@ } // Mic and speaker button with attached menu - &.micButtonWithMenu__37e49{ + &._37e49614b9f110a9-micButtonWithMenu{ border-radius: 4px 0 0 4px; } - &.buttonChevron__37e49{ + &._37e49614b9f110a9-buttonChevron{ margin-inline-start: 0; border-width: 1px 1px 1px 0; border-radius: 0 4px 4px 0; @@ -61,7 +61,7 @@ &[aria-checked=true]{ border-color: $SystemFillColorCritical; color: $SystemFillColorCritical; - & ~ .buttonChevron__37e49{ + & ~ ._37e49614b9f110a9-buttonChevron{ border-color: $SystemFillColorCritical; color: $SystemFillColorCritical; } diff --git a/src/modules/main/channels/_channels.scss b/src/modules/main/channels/_channels.scss index 4b8acca2..dcd72f57 100644 --- a/src/modules/main/channels/_channels.scss +++ b/src/modules/main/channels/_channels.scss @@ -1,21 +1,21 @@ .theme-dark{ - .sidebar__5e434{ + ._5e434347c823b592-sidebar{ &::after{ display: none; } } - .sidebarList__5e434{ + ._5e434347c823b592-sidebarList{ background-color: transparent; border: 0; border-radius: 0; } // Increase bottom margin of channels list so there is a consistent margin around the account box - .container__2637a{ + ._2637a2609f343032-container{ padding-bottom: calc(var(--custom-app-panels-height, 0) + 12px); } // Server header - .header_f37cb1{ + .f37cb1984c371ee5-header{ border: 0; &:hover{ background-color: transparent; @@ -26,8 +26,8 @@ } } // Removes background when hovered or when the popout menu is open - .header_f37cb1:hover, - .selected_f37cb1 .header_f37cb1{ + .f37cb1984c371ee5-header:hover, + .selected_f37cb1 .f37cb1984c371ee5-header{ background-color: transparent; text-decoration: underline; h2{ @@ -35,23 +35,23 @@ } } // Remove caret - .headerChildren_f37cb1{ + .f37cb1984c371ee5-headerChildren{ display: none; } // Remove server banner - .animatedContainer_f37cb1{ + .f37cb1984c371ee5-animatedContainer{ display: none; } - .animatedBannerHoverLayer_f37cb1{ + .f37cb1984c371ee5-animatedBannerHoverLayer{ display: none; } - .content_d125d2 > div[style="height: 84px;"]{ + .d125d22cdfd32cfe-content > div[style="height: 84px;"]{ display: none; } - .headerEllipseBackdrop_f37cb1, - .headerEllipseForeground_f37cb1, - .headerGlass_f37cb1{ + .f37cb1984c371ee5-headerEllipseBackdrop, + .f37cb1984c371ee5-headerEllipseForeground, + .f37cb1984c371ee5-headerGlass{ display: none; } @@ -61,30 +61,30 @@ } // Category - .containerDefault__29444{ - .wrapperCommon__29444{ + ._29444ba32c7fbeab-containerDefault{ + ._29444ba32c7fbeab-wrapperCommon{ margin: 0 0 0 8px; padding-left: 10px; border: 1px solid transparent; border-radius: 4px; color: $TextFillColorPrimary; &:hover{ - .name__29444{ + ._29444ba32c7fbeab-name{ color: $TextFillColorSecondary; } } // Wrapper types // Muted - &.muted__29444{ - .name__29444{ + &._29444ba32c7fbeab-muted{ + ._29444ba32c7fbeab-name{ color: $TextFillColorDisabled; } } // Colapse chevrons // Remove default chevron - .icon__29444{ + ._29444ba32c7fbeab-icon{ display: none; } // Chevron replacement @@ -94,7 +94,7 @@ @include FontIconFluent; font-size: 12px; } - &.collapsed__29444{ + &._29444ba32c7fbeab-collapsed{ &::after{ content: "\E70D"; // ChevronDown } @@ -102,18 +102,18 @@ } // Category name - .container__13cf1{ + ._13cf1aa56cd732d2-container{ color: $TextFillColorPrimary; @include TypeBody; text-transform: none; } // Hide 'Create Channel' buttons when not hovered - .children__29444{ + ._29444ba32c7fbeab-children{ visibility: hidden; } &:hover{ - .children__29444{ + ._29444ba32c7fbeab-children{ visibility: visible; } } @@ -121,37 +121,37 @@ // Channels // Indent channels - .containerDefault__29444 ~ .containerDefault_c69b6d .link__2ea32{ + ._29444ba32c7fbeab-containerDefault ~ .c69b6db0641110f6-containerDefault ._2ea32c412048f708-link{ padding-left: 23px; } - .containerDefault_c69b6d{ + .c69b6db0641110f6-containerDefault{ // The channel - &.wrapper__2ea32, // Required for Server guide, events, and channels & roles channels - .wrapper__2ea32{ + &._2ea32c412048f708-wrapper, // Required for Server guide, events, and channels & roles channels + ._2ea32c412048f708-wrapper{ // Channel name - .name__2ea32{ + ._2ea32c412048f708-name{ color: $TextFillColorSecondary; @include TypeBody; } // Icon - .icon__2ea32{ + ._2ea32c412048f708-icon{ width: 16px; } // Hide channel buttons when not hovered - .children__2ea32 .iconItem_c69b6d{ + ._2ea32c412048f708-children .c69b6db0641110f6-iconItem{ visibility: hidden; } &:hover{ - .link__2ea32{ + ._2ea32c412048f708-link{ background-color: $SubtleFillColorSecondary; box-shadow: inset 0 0 0 1px $SubtleFillColorSecondary; // Using box-shadow because borders cause the div to grow border-radius: 4px; } // Reveal channel buttons - .children__2ea32 .iconItem_c69b6d{ + ._2ea32c412048f708-children .c69b6db0641110f6-iconItem{ visibility: visible; } } @@ -175,7 +175,7 @@ // Channel types // Selected channel - &.modeSelected__2ea32{ + &._2ea32c412048f708-modeSelected{ // Pill &::before{ transform: scaleY(100%); @@ -183,20 +183,20 @@ transition: transform 250ms Cubic-bezier(0.55,0.55,0,1), opacity 250ms Cubic-bezier(0.55,0.55,0,1); } - .link__2ea32{ + ._2ea32c412048f708-link{ background-color: $SubtleFillColorSecondary; border-radius: 4px; } // Channel icon - .icon__2ea32{ + ._2ea32c412048f708-icon{ color: $TextFillColorPrimary; } - .name__2ea32{ + ._2ea32c412048f708-name{ color: $TextFillColorPrimary; } } // Unread channel - &.modeUnreadImportant__2ea32{ + &._2ea32c412048f708-modeUnreadImportant{ // Pill &::before{ background-color: $TextFillColorPrimary; @@ -206,25 +206,25 @@ opacity 250ms Cubic-bezier(0.55,0.55,0,1); } // Channel icon - .icon__2ea32{ + ._2ea32c412048f708-icon{ color: $TextFillColorSecondary; } - .name__2ea32{ + ._2ea32c412048f708-name{ color: $TextFillColorSecondary; } } // Muted channel - &.modeMuted__2ea32{ + &._2ea32c412048f708-modeMuted{ // Channel icon - .icon__2ea32{ + ._2ea32c412048f708-icon{ color: $TextFillColorDisabled; } - .name__2ea32{ + ._2ea32c412048f708-name{ color: $TextFillColorDisabled; } } // Connected channel - &.modeConnected__2ea32{ + &._2ea32c412048f708-modeConnected{ // Pill &::before{ background-color: $SystemFillColorSuccess; @@ -234,24 +234,24 @@ opacity 250ms Cubic-bezier(0.55,0.55,0,1); z-index: 1; } - .link__2ea32{ + ._2ea32c412048f708-link{ background-color: $SystemFillColorSuccesBackground; border-radius: 4px; } // Channel icon - .icon__2ea32{ + ._2ea32c412048f708-icon{ color: $SystemFillColorSuccess; } - .name__2ea32{ + ._2ea32c412048f708-name{ color: $SystemFillColorSuccess; } } } // The voice channel user - .list_c3cd7d{ + .c3cd7d38925bcd00-list{ padding-left: 8px; - .content__07f91{ + ._07f9193042954787-content{ padding-left: 32px; } // Change border to same green used on guild list @@ -259,22 +259,22 @@ box-shadow: 0 0 0 2px $SystemFillColorSuccess,inset 0 0 0 3px $FocusStrokeColorInner } // Change user speaking colour to green - .usernameSpeaking__07f91{ + ._07f9193042954787-usernameSpeaking{ color: $SystemFillColorSuccess; } } // Unread channel pill - .unread__2ea32{ + ._2ea32c412048f708-unread{ display: none; } // Threads // Thread channel - .typeThread__2ea32{ - &.wrapper__2ea32{ + ._2ea32c412048f708-typeThread{ + &._2ea32c412048f708-wrapper{ margin-left: 8px; } - .link__2ea32{ + ._2ea32c412048f708-link{ margin-left: 0; padding-left: 48px; } @@ -282,7 +282,7 @@ } // Voice - .listDefault__07f91 .clickable__07f91:hover .content__07f91{ + ._07f9193042954787-listDefault ._07f9193042954787-clickable:hover ._07f9193042954787-content{ background-color: $SubtleFillColorSecondary; box-shadow: inset 0 0 0 1px $SubtleFillColorSecondary; // Using box-shadow because borders cause the div to grow border-radius: 4px; @@ -306,25 +306,25 @@ // Threads // Active threads - .wrapper__2ea32{ + ._2ea32c412048f708-wrapper{ &:hover{ - .link__2ea32{ + ._2ea32c412048f708-link{ background-color: $SubtleFillColorSecondary; box-shadow: inset 0 0 0 1px $SubtleFillColorSecondary; // Using box-shadow because borders cause the div to grow } } - .name__2ea32{ + ._2ea32c412048f708-name{ @include TypeBody; color: $TextFillColorPrimary; } } // Channel tree spine - .spine__5b40b, .spineBorder__5b40b{ + ._5b40bdd67543ba35-spine, ._5b40bdd67543ba35-spineBorder{ left: 40px; } // Unread badge - .numberBadge__2b1f5 { + ._2b1f52e43a8f1c02-numberBadge { background-color: $SystemFillColorCritical !important; // For some reason this is in line @include TypeCaption; color: $TextOnAccentFillColorPrimary; @@ -332,8 +332,8 @@ } // Unread bars - .unread__629e4{ - .bar__3b95d{ + ._629e4c86564a4ee7-unread{ + ._3b95d7d910416e54-bar{ background-color: $SystemFillColorCriticalBackground; } span{ @@ -343,9 +343,9 @@ } // X in Voice bar - .bar__7aaec{ + ._7aaec78b97ff00f7-bar{ background-color: $MicaBackgroundFillColorAlt; - .barText__7aaec{ + ._7aaec78b97ff00f7-barText{ text-transform: none; } } diff --git a/src/modules/main/channels/_rtc.scss b/src/modules/main/channels/_rtc.scss index 85fb2916..ca100b28 100644 --- a/src/modules/main/channels/_rtc.scss +++ b/src/modules/main/channels/_rtc.scss @@ -1,52 +1,52 @@ -.theme-dark .container_e131a9{ +.theme-dark .e131a99484292a19-container{ background-color: transparent; border-top: 0; border-bottom: 0; padding-bottom: 0; // Connection status/disconnect - .connection_e131a9{ + .e131a99484292a19-connection{ height: 32px; } - .rtcConnectionStatus__06d62 { + ._06d6249a1f2584ac-rtcConnectionStatus { padding-bottom: 0; - .button__201d5{ + ._201d5e8a3c09670a-button{ line-height: 16px; } .text-md\/medium_cf4812{ @include TypeBody; } } - .subtext__339d0 .text-sm\/medium_cf4812{ + ._339d0fce6b76910a-subtext .text-sm\/medium_cf4812{ @include TypeBody; color: $TextFillColorPrimary !important; // Override inline } - .voiceUsers__68617{ + ._68617e68b7bb4785-voiceUsers{ padding-top: 4px; } // Connection status colours - .rtcConnectionQualityFine__06d62{ - .ping__06d62 path{ + ._06d6249a1f2584ac-rtcConnectionQualityFine{ + ._06d6249a1f2584ac-ping path{ fill: $SystemFillColorSuccess; } - .rtcConnectionStatusConnected__06d62{ + ._06d6249a1f2584ac-rtcConnectionStatusConnected{ color: $SystemFillColorSuccess; } } - .rtcConnectionQualityAverage__06d62{ - .ping__06d62 path{ + ._06d6249a1f2584ac-rtcConnectionQualityAverage{ + ._06d6249a1f2584ac-ping path{ fill: $SystemFillColorCaution; } - .rtcConnectionStatusConnected__06d62{ + ._06d6249a1f2584ac-rtcConnectionStatusConnected{ color: $SystemFillColorCaution; } } - .rtcConnectionQualityBad__06d62{ - .ping__06d62 path{ + ._06d6249a1f2584ac-rtcConnectionQualityBad{ + ._06d6249a1f2584ac-ping path{ fill: $SystemFillColorCritical; } - .rtcConnectionStatusConnected__06d62{ + ._06d6249a1f2584ac-rtcConnectionStatusConnected{ color: $SystemFillColorCritical; } } @@ -61,9 +61,9 @@ } // Video/screen share buttons - .actionButtons_e131a9{ + .e131a99484292a19-actionButtons{ grid-gap: 4px; - .button__201d5 { + ._201d5e8a3c09670a-button { min-width: unset; background-color: $ControlFillColorDefault; border: 1px solid $ControlStrokeColorDefault; @@ -75,13 +75,13 @@ &:active{ background-color: $ControlFillColorTertiary; } - &.buttonActive_e131a9{ + &.e131a99484292a19-buttonActive{ background-color: transparent; // background-color: $SystemFillColorCriticalBackground !important; animation: fluent-streaming-pulse 3s ease-in-out infinite; } - .contents__201d5{ + ._201d5e8a3c09670a-contents{ // Display: flex required to fix alignment of soundboard icon when using non-English - see #249 display: flex; font-size: 0; @@ -91,14 +91,14 @@ } } // Hide buttons when you don't have permission. This also hides the soundboard when you are muted - .disabledButtonWrapper__201d5{ + ._201d5e8a3c09670a-disabledButtonWrapper{ display: none; } } } // Streaming game/app -.theme-dark .activityPanel__5e434{ +.theme-dark ._5e434347c823b592-activityPanel{ background-color: transparent; padding-bottom: 0; border-top: 0; @@ -109,20 +109,20 @@ } // Icons -html[lang^="en-"].theme-dark .panels__5e434 .button__201d5[aria-label]{ +html[lang^="en-"].theme-dark ._5e434347c823b592-panels ._201d5e8a3c09670a-button[aria-label]{ &::before{ @include FontIconFluent; font-size: 16px; } - .contents__201d5{ + ._201d5e8a3c09670a-contents{ display: none; } } // Fix connection status text not appearing -.rtcConnectionStatus__06d62 .contents__201d5{ +._06d6249a1f2584ac-rtcConnectionStatus ._201d5e8a3c09670a-contents{ display: block !important; - .rtcConnectionStatusLabel__06d62{ + ._06d6249a1f2584ac-rtcConnectionStatusLabel{ font-weight: 500; } } diff --git a/src/modules/main/chat/_autocomplete.scss b/src/modules/main/chat/_autocomplete.scss index 1c5270f5..c7852f33 100644 --- a/src/modules/main/chat/_autocomplete.scss +++ b/src/modules/main/chat/_autocomplete.scss @@ -1,12 +1,12 @@ -.theme-dark .channelTextArea_f75fb0{ +.theme-dark .f75fb00fb7356cbe-channelTextArea{ &:focus-within{ - .autocomplete__13533{ + ._13533e3c5791980f-autocomplete{ border-color: $ControlStrokeColorDefault; } } } -.theme-dark .autocomplete__13533{ +.theme-dark ._13533e3c5791980f-autocomplete{ right: 0; bottom: calc(100% + 4px); left: 0; @@ -15,11 +15,11 @@ border: 1px solid $ControlStrokeColorDefault; border-radius: 4px; - .rail_d1405b{ + .d1405bf11dcfb07a-rail{ background-color: $CardStrokeColorDefault; } - .section_b1e4f3{ + .b1e4f3fb96801b99-section{ > div[role=button]{ width: 32px; height: 32px; @@ -37,16 +37,16 @@ height: 24px; margin: 4px; } - .wrapper_ca5f52{ + .ca5f52b68137f12b-wrapper{ padding: 0 !important; // Override inline } } } // Commands header - .categoryHeader_d1405b{ + .d1405bf11dcfb07a-categoryHeader{ background-color: $CardStrokeColorDefaultSolid; - .headerLabel__14245{ + ._14245bb948377a25-headerLabel{ @include TypeBody; color: $TextFillColorPrimary; text-transform: none; @@ -54,7 +54,7 @@ } // Commands matching: header - .contentTitle__13533{ + ._13533e3c5791980f-contentTitle{ @include TypeBody; color: $TextFillColorPrimary; text-transform: none; @@ -69,21 +69,21 @@ } // Command - .base__13533{ + ._13533e3c5791980f-base{ &.selected-3H3-RC{ background-color: $SubtleFillColorSecondary; box-shadow: inset 0 0 0 1px $SubtleFillColorSecondary; // Using box-shadow because borders cause the div to grow; } - .title__920ab{ + ._920abe02ba8772be-title{ @include FontMonospace; @include TypeBody; } - .usageWrapper__920ab{ - .optionalCount__920ab{ + ._920abe02ba8772be-usageWrapper{ + ._920abe02ba8772be-optionalCount{ @include TypeBody; color: $TextFillColorTertiary; } - .option__920ab{ + ._920abe02ba8772be-option{ padding: 0; margin-left: 1ch; background-color: transparent; @@ -99,7 +99,7 @@ } // Command description - .description__920ab{ + ._920abe02ba8772be-description{ @include TypeCaption; color: $TextFillColorTertiary; } diff --git a/src/modules/main/chat/_browse.scss b/src/modules/main/chat/_browse.scss index 73273f01..d95de57c 100644 --- a/src/modules/main/chat/_browse.scss +++ b/src/modules/main/chat/_browse.scss @@ -1,11 +1,11 @@ // Channels & Roles -.theme-dark .header__0b563{ +.theme-dark ._0b56311ebc6682e2-header{ background: transparent !important; // Override inline - .iconWrapper__9293f{ + ._9293f6b2fc12398a-iconWrapper{ display: none; } } -.theme-dark .content_f75fb0 { +.theme-dark .f75fb00fb7356cbe-content { height: calc(100% - 1px); padding: 0; background: $LayerFillColorDefault !important; // Override inline @@ -18,14 +18,14 @@ // Customise tab // Customisation questions - .prompt__5d7c9{ + ._5d7c9a81ac5dd074-prompt{ background-color: $LayerFillColorDefault; border-top: 1px solid $CardStrokeColorDefault; border-left: 1px solid $CardStrokeColorDefault; border-radius: 8px 0 0 0; } // My profile - .profileCard__5d7c9{ + ._5d7c9a81ac5dd074-profileCard{ background-color: $LayerFillColorDefault; border-top: 1px solid $CardStrokeColorDefault; border-left: 1px solid $CardStrokeColorDefault; @@ -33,32 +33,32 @@ } // Browse channels - .pageBody__41ed7{ + ._41ed70e52483df6d-pageBody{ background-color: transparent; } - .channelRow_e4503a { + .e4503acec53c64dd-channelRow { background-color: $CardBackgroundFillColorDefault; border-width: 1px 1px 0 1px; border-style: solid; border-color: $CardStrokeColorDefault; - &.firstChannel_e4503a{ + &.e4503acec53c64dd-firstChannel{ border-radius: 4px 4px 0 0; } - &.lastChannel_e4503a{ + &.e4503acec53c64dd-lastChannel{ border-radius: 0 0 4px 4px; } } - .separator_e4503a{ + .e4503acec53c64dd-separator{ display: none; } // Fix for channel checkboxes not displaying - .channelActions_e4503a .checkbox_f525d3{ + .e4503acec53c64dd-channelActions .checkbox_f525d3{ display: block; } // Category row has some issues - .categoryRow_e4503a{ + .e4503acec53c64dd-categoryRow{ .checkbox_f525d3{ display: block; } @@ -66,9 +66,9 @@ } // Members -.theme-dark .page_c791b2{ +.theme-dark .c791b281f2fedc32-page{ background-color: transparent !important; - .header_c791b2{ + .c791b281f2fedc32-header{ box-shadow: none; } .scroller_d20375{ @@ -78,11 +78,11 @@ border-radius: 8px 0 0 0; } - .content_f75fb0{ + .f75fb00fb7356cbe-content{ background-color: transparent !important; // border: 0; } - .mainTableContainer__09a38{ + ._09a38002c6c2466d-mainTableContainer{ background-color: transparent; box-shadow: none; } diff --git a/src/modules/main/chat/_chat.scss b/src/modules/main/chat/_chat.scss index f49b747e..723fc5e8 100644 --- a/src/modules/main/chat/_chat.scss +++ b/src/modules/main/chat/_chat.scss @@ -1,5 +1,5 @@ .theme-dark{ - .chat_f75fb0{ + .f75fb00fb7356cbe-chat{ background: transparent; border-top: 0; &[data-has-border=true]{ @@ -7,46 +7,46 @@ } } - .content_f75fb0{ + .f75fb00fb7356cbe-content{ background-color: $LayerFillColorAlt; border-left: 1px solid $CardStrokeColorDefault; border-radius: 8px 0 0 0; } - .chatContent_f75fb0{ + .f75fb00fb7356cbe-chatContent{ background-color: transparent; } // New/old messages bars - .barBase__0f481{ + ._0f481cbbd7530492-barBase{ margin: 0 auto; max-width: 598px; min-height: 32px; border: 1px solid $CardStrokeColorDefault; box-shadow: none; border-radius: 4px; - .barButtonMain__0f481{ + ._0f481cbbd7530492-barButtonMain{ @include TypeBody; } - .barButtonAlt__0f481{ + ._0f481cbbd7530492-barButtonAlt{ display: none; } } // New messages bar - .newMessagesBar__0f481{ + ._0f481cbbd7530492-newMessagesBar{ top: 8px; background-color: $AccentLight1; - .barButtonBase__0f481{ + ._0f481cbbd7530492-barButtonBase{ color: $TextOnAccentFillColorPrimary; } } // Old messages bar - .jumpToPresentBar__0f481{ + ._0f481cbbd7530492-jumpToPresentBar{ bottom: 8px; padding-bottom: 0; background-color: $CardStrokeColorDefaultSolid; } // Errored bar - .messagesErrorBar__0f481{ + ._0f481cbbd7530492-messagesErrorBar{ bottom: 8px; background-color: $SystemFillColorCriticalBackground; border-color: $CardStrokeColorDefault; @@ -54,7 +54,7 @@ } // Reactions - .reaction__23977,.reactionBtn__23977 { + ._23977d5b7cef7361-reaction,._23977d5b7cef7361-reactionBtn { background-color: $ControlFillColorDefault; border-width: 1px; border-style: outset; @@ -67,29 +67,29 @@ &:active{ background-color: $ControlFillColorTertiary; } - &.reactionMe__23977{ + &._23977d5b7cef7361-reactionMe{ border-color: $AccentBase; } - &.reactionMe__23977 .reactionCount__23977, - .reactionCount__23977{ + &._23977d5b7cef7361-reactionMe ._23977d5b7cef7361-reactionCount, + ._23977d5b7cef7361-reactionCount{ color: $TextFillColorPrimary; @include TypeBody; } - &.reactionReadOnly__23977{ + &._23977d5b7cef7361-reactionReadOnly{ background-color: $ControlFillColorDisabled; border: 1px solid $ControlStrokeColorDefault; - .reactionCount__23977{ + ._23977d5b7cef7361-reactionCount{ color: $TextFillColorDisabled; } - &:hover .reactionCount__23977{ + &:hover ._23977d5b7cef7361-reactionCount{ color: $TextFillColorDisabled; } } } // Mentioned - .message__5126c{ - &.mentioned__5126c{ + ._5126c0cd07f243a0-message{ + &._5126c0cd07f243a0-mentioned{ background-color: $SystemFillColorCautionBackground; &::before{ left: 4px; @@ -100,17 +100,17 @@ } // Divider - .divider__908e2{ + ._908e20001ad67812-divider{ justify-content: flex-end; border-color: $DividerStrokeColorDefault; - .content__908e2, - .unreadPill__908e2{ + ._908e20001ad67812-content, + ._908e20001ad67812-unreadPill{ padding: 2px 8px; background-color: $SystemFillColorSolidNeutralBackground; color: $TextFillColorPrimary; @include TypeCaption; } - .unreadPill__908e2{ + ._908e20001ad67812-unreadPill{ height: unset; top: -1px; background-color: $SystemFillColorCriticalBackground; @@ -121,13 +121,13 @@ display: none; } } - &.isUnread__908e2{ + &._908e20001ad67812-isUnread{ // NOTE: 2021-08-29 - The border should technically be SystemFillColorCriticalBackground, but is barely visisble, so using the text fill instead. border-color: $SystemFillColorCritical; - .content__908e2{ + ._908e20001ad67812-content{ border-radius: 8px 0 0 8px; } - .unreadPill__908e2{ + ._908e20001ad67812-unreadPill{ position: relative; } } @@ -138,20 +138,20 @@ } // inline code - .markup__75297 code{ + ._752971923a1e6683-markup code{ background-color: $LayerFillColorDefault; } // Remove avatar borders/decorations - .avatarDecoration_c19a55{ + .c19a557985eb7793-avatarDecoration{ display: var(--fluent-show-nitro-decorations); } // Start of server - .container__00de6{ + ._00de6f6c14b53606-container{ align-items: flex-start; padding: 0; - .titleName_aae012{ + .aae01227de06a74c-titleName{ text-align: left; @include TypeTitle; p{ @@ -159,7 +159,7 @@ display: inline-block; } } - .subtitle_aae012{ + .aae01227de06a74c-subtitle{ text-align: left; color: $TextFillColorPrimary; @include TypeBody; @@ -167,22 +167,22 @@ } // Start of channel - .container__00de6{ + ._00de6f6c14b53606-container{ padding: 16px; - .header__00de6{ + ._00de6f6c14b53606-header{ @include TypeTitle; } - .description__00de6{ + ._00de6f6c14b53606-description{ color: $TextFillColorPrimary; @include TypeBody; } } - .emptyChannelIcon__00de6{ + ._00de6f6c14b53606-emptyChannelIcon{ display: none; } // Thread - .container__9271d{ + ._9271d23503a01b50-container{ background-color: $CardBackgroundFillColorDefault; border: 1px solid $SurfaceStrokeColorFlyout; border-radius: 8px; @@ -190,23 +190,23 @@ // Embedded image // Remove AI slop buttons - .imageContainer__0f481{ - .hoverButton__06ab4[aria-label="Edit Image with Apps"]{ + ._0f481cbbd7530492-imageContainer{ + ._06ab41fd2ef7af3f-hoverButton[aria-label="Edit Image with Apps"]{ display: none; } } // Loading chat content - .wrapper_d852db, // Loading container - .wrapper_fc8177{ // Chat line item + ._6c79861fd96f56b1-wrapper, // Loading container + .fc817765600a960a-wrapper{ // Chat line item background: transparent; } // Remove gradient at bottom of chat - .chatGradientBase__36d07 { + ._36d072eab2b2e737-chatGradientBase { display: none; } - .scrollerSpacer__36d07{ + ._36d072eab2b2e737-scrollerSpacer{ height: 16px; } } diff --git a/src/modules/main/chat/_chat_menu.scss b/src/modules/main/chat/_chat_menu.scss index cff15a1b..37524c0f 100644 --- a/src/modules/main/chat/_chat_menu.scss +++ b/src/modules/main/chat/_chat_menu.scss @@ -1,10 +1,10 @@ -.theme-dark .wrapper_f7ecac{ +.theme-dark .f7ecaca5c80dbf3a-wrapper{ background-color: $ControlOnImageFillColorDefault; border: 1px solid $ControlStrokeColorDefault; } -html[lang^="en-"].theme-dark .wrapper_f7ecac{ - .button_f7ecac[aria-label]{ +html[lang^="en-"].theme-dark .f7ecaca5c80dbf3a-wrapper{ + .f7ecaca5c80dbf3a-button[aria-label]{ &::before{ @include FontIconFluent; } diff --git a/src/modules/main/chat/_chatbox.scss b/src/modules/main/chat/_chatbox.scss index c4d21597..a5ec5d7e 100644 --- a/src/modules/main/chat/_chatbox.scss +++ b/src/modules/main/chat/_chatbox.scss @@ -1,11 +1,11 @@ .theme-dark{ - .form_f75fb0{ + .f75fb00fb7356cbe-form{ margin-top: 0; padding-left: 17px; padding-right: 15px; } - .channelTextArea__74017{ + ._740174f3d6a2c8fe-channelTextArea{ margin-bottom: 8px; background: $ControlFillColorDefault; border: 1px solid $ControlStrokeColorDefault; @@ -19,40 +19,40 @@ border-color: $ControlStrokeColorDefault; border-bottom-color: $AccentBase; } - &.channelTextAreaDisabled__74017{ + &._740174f3d6a2c8fe-channelTextAreaDisabled{ background-color: $ControlFillColorDisabled; } } - .themedBackground__74017{ + ._740174f3d6a2c8fe-themedBackground{ background: transparent; } - .scrollableContainer__74017{ + ._740174f3d6a2c8fe-scrollableContainer{ border-radius: 4px; overflow-y: auto; } - .sansAttachButton__74017 { + ._740174f3d6a2c8fe-sansAttachButton { padding-left: 0; } // Text input - .textArea__74017{ + ._740174f3d6a2c8fe-textArea{ height: 48px; min-height: 48px; } - .slateTextArea_ec4baf{ + .ec4baf0360ff3578-slateTextArea{ min-height: 48px; padding: 14px 0; color: $TextFillColorPrimary; - &.placeholder__1b31f { + &._1b31f471f0bb10ab-placeholder { color: $TextFillColorSecondary; } } // Upload button - .attachWrapper__0923f{ + ._0923f156a0410684-attachWrapper{ padding: 0; } - .attachButton__74017 { + ._740174f3d6a2c8fe-attachButton { width: 32px; height: 32px; margin: 8px 0 8px 8px; @@ -72,29 +72,29 @@ color: $TextFillColorPrimary; } } - .attachButtonInner__0923f{ + ._0923f156a0410684-attachButtonInner{ display: none; } } // Command icon (eg. /tenor command) - .hasStackedBar__74017 .attachButton__74017{ + ._740174f3d6a2c8fe-hasStackedBar ._740174f3d6a2c8fe-attachButton{ &::before{ content: unset; } } - .icon__4d3a9{ + ._4d3a93bb8f6e0dd9-icon{ padding: 4px; } // Button group within chatbox - .buttons__74017{ + ._740174f3d6a2c8fe-buttons{ height: 48px; gap: 4px; // Remove the gift button // Nesting is updated *very* frequently, so try to catch as many configurations as possible - & > .button__74017, + & > ._740174f3d6a2c8fe-button, & > button, - .container_c0c49a{ + .c0c49a3e5c8626ac-container{ display: none; } @@ -102,7 +102,7 @@ & > div:last-of-type{ margin-right: 4px; } - .button__201d5{ + ._201d5e8a3c09670a-button{ height: 32px; width: 32px; border: 1px solid transparent; @@ -112,8 +112,8 @@ font-size: 16px; } &:hover, - &.active__24af7, - &.emojiButtonHovered__04eed{ + &._24af7f4d0326ba4f-active, + &._04eede68d145ae81-emojiButtonHovered{ background-color: $ControlFillColorDisabled; border-color: $ControlStrokeColorDefault; &::before{ @@ -124,11 +124,11 @@ // Button replacements // Common reuse - .button__74017[aria-label*="GIF"] .buttonWrapper__24af7, // GIF - .button__74017.stickerButton__74017, // Sticker - .emojiButton__04eed, // Emoji - .channelAppLauncher_e6e74f .button__201d5, // App Launcher - .container_aa63ab .button__201d5{ + ._740174f3d6a2c8fe-button[aria-label*="GIF"] ._24af7f4d0326ba4f-buttonWrapper, // GIF + ._740174f3d6a2c8fe-button._740174f3d6a2c8fe-stickerButton, // Sticker + ._04eede68d145ae81-emojiButton, // Emoji + .channelAppLauncher_e6e74f ._201d5e8a3c09670a-button, // App Launcher + .aa63abf63dbd9cce-container ._201d5e8a3c09670a-button{ &::before{ @include FontIconFluent; color: $TextFillColorSecondary; @@ -137,43 +137,43 @@ &:hover::before{ color: $TextFillColorPrimary; } - .lottieIcon__5eb9b{ + ._5eb9b3cc7c2b1ce8-lottieIcon{ display: none !important; // Override in-line } } // Replace GIF icon - .button__74017[aria-label*="GIF"] .buttonWrapper__24af7{ + ._740174f3d6a2c8fe-button[aria-label*="GIF"] ._24af7f4d0326ba4f-buttonWrapper{ &::before{ content: "\F4A9"; // GIF } } // Replace sticker icon - .button__74017.stickerButton__74017{ + ._740174f3d6a2c8fe-button._740174f3d6a2c8fe-stickerButton{ &::before{ content: "\F4AA"; // Sticker2 } } // Replace emoji button icon - .emojiButton__04eed{ + ._04eede68d145ae81-emojiButton{ &::before{ content: "\E76E"; // Emoji2 } - .spriteContainer__04eed{ + ._04eede68d145ae81-spriteContainer{ display: none; } } // Replace App Launcher button icon - .channelAppLauncher_e6e74f .button__201d5{ + .channelAppLauncher_e6e74f ._201d5e8a3c09670a-button{ &::before{ content: "\ED35"; // Apps } } // Replace Send button icon - .separator_aa63ab{ + .aa63abf63dbd9cce-separator{ display: none; } - .container_aa63ab .button__201d5{ + .aa63abf63dbd9cce-container ._201d5e8a3c09670a-button{ &::before{ content: "\E122"; color: $TextFillColorDisabled; @@ -184,18 +184,18 @@ &:enabled::before{ color: $TextFillColorSecondary; } - .contents__201d5{ + ._201d5e8a3c09670a-contents{ display: none; } } } // Is Typing - .inTextChannel_b88801.base_b88801{ + .b8880176888cc928-inTextChannel.b8880176888cc928-base{ right: 16px; left: unset; } - .typing_b88801{ + .b8880176888cc928-typing{ height: 20px; top: -24px; bottom: unset; @@ -204,36 +204,36 @@ align-items: flex-end; justify-content: flex-end; pointer-events: none; - .text_b88801{ + .b8880176888cc928-text{ margin-left: 8px; } - &.inTextChannel_b88801 .text_b88801>strong{ // Fighting specificity + &.b8880176888cc928-inTextChannel .b8880176888cc928-text>strong{ // Fighting specificity font-weight: normal; } svg{ display: none; } // Slowmode font-size - .cooldownText_b21699{ + .b216994de061a9e2-cooldownText{ @include TypeCaption; } } // Various chatbox states // No Permission - .textAreaDisabled__74017 { + ._740174f3d6a2c8fe-textAreaDisabled { overflow: hidden; - .placeholder__1b31f { + ._1b31f471f0bb10ab-placeholder { color: $TextFillColorSecondary; @include TypeBody; } // Fixes a scrollbar appearing - .slateTextArea_ec4baf{ + .ec4baf0360ff3578-slateTextArea{ padding: 15px 0; } } // Announce channel follow - .wrapper__44df5{ + ._44df51b030bd5ece-wrapper{ height: 40px; margin: 0 0 8px 0; padding: 0; @@ -241,27 +241,27 @@ border: 1px solid $ControlStrokeColorDefault; border-radius: 4px; // Remove image - .content__44df5{ + ._44df51b030bd5ece-content{ img{ display: none; } - .title__44df5{ + ._44df51b030bd5ece-title{ color: $TextFillColorDisabled !important; // Override inline @include TypeBody; } } - .buttonContainer__44df5{ + ._44df51b030bd5ece-buttonContainer{ margin-right: 4px; } } // Showing command help - .stackedBars__74017{ + ._740174f3d6a2c8fe-stackedBars{ background-color: $CardStrokeColorDefaultSolid; - .name__84522{ + ._8452288fe5be9b1d-name{ @include TypeBody; } - .option_a19535{ + .a195358c0257a1b0-option{ margin-left: 0; @include TypeBody; &::before{ @@ -271,13 +271,13 @@ content: "}"; } - &.active_a19535{ + &.a195358c0257a1b0-active{ background-color: transparent !important; } } } // Fixes the border radius of the background for the command help which has higher priority than the theme for some reason - .floatingBars__74017:empty+.stackedBars__74017:nth-child(2), .stackedBars__74017:first-child{ + ._740174f3d6a2c8fe-floatingBars:empty+._740174f3d6a2c8fe-stackedBars:nth-child(2), ._740174f3d6a2c8fe-stackedBars:first-child{ border-radius: 4px 4px 0 0; } } diff --git a/src/modules/main/chat/_forum.scss b/src/modules/main/chat/_forum.scss index 134ff46d..b032605b 100644 --- a/src/modules/main/chat/_forum.scss +++ b/src/modules/main/chat/_forum.scss @@ -1,31 +1,31 @@ -.theme-dark .chat_f75fb0{ +.theme-dark .f75fb00fb7356cbe-chat{ background-color: transparent; } -.theme-dark .container_f369db{ +.theme-dark .f369dba7416c67f0-container{ background-color: $LayerFillColorDefault; border-top: 1px solid $CardStrokeColorDefault; border-left: 1px solid $CardStrokeColorDefault; border-radius: 8px 0 0 0; // Threads - .mainCard_f369db{ + .f369dba7416c67f0-mainCard{ background-color: $LayerFillColorAlt; border: 1px solid $CardStrokeColorDefault; border-radius: 8px; - &.container_faa96b:active, - &.container_faa96b:hover{ + &.faa96b2163f6a142-container:active, + &.faa96b2163f6a142-container:hover{ transform: none; box-shadow: none; border-color: $CardStrokeColorDefaultSolid; } - .postTitleText_faa96b{ + .faa96b2163f6a142-postTitleText{ color: $TextFillColorPrimary !important; // Override inline @include TypeBodyStrong; } - .messageContent_faa96b{ + .faa96b2163f6a142-messageContent{ @include TypeBody; } } diff --git a/src/modules/main/chat/_home.scss b/src/modules/main/chat/_home.scss index 685774ae..337ae712 100644 --- a/src/modules/main/chat/_home.scss +++ b/src/modules/main/chat/_home.scss @@ -29,7 +29,7 @@ } } // Server icon - .icon_ac2d0d{ + ._2b1f52e43a8f1c02-icon{ margin-top: 0; background-color: transparent; border: 0; diff --git a/src/modules/main/chat/_search_results.scss b/src/modules/main/chat/_search_results.scss index 70a43d71..db0f9a9c 100644 --- a/src/modules/main/chat/_search_results.scss +++ b/src/modules/main/chat/_search_results.scss @@ -1,16 +1,16 @@ -.theme-dark .searchResultsWrap_a9e706{ +.theme-dark .a9e7064fdee8e9b0-searchResultsWrap{ background-color: $LayerFillColorDefault; border-left: 1px solid $CardStrokeColorDefault; - .searchHeader_f3b986{ + .f3b986a284a18c78-searchHeader{ background-color: transparent; - .totalResults_f3b986 > div{ + .f3b986a284a18c78-totalResults > div{ @include TypeBodyStrong; } } // Tabs (new/old/relevant) - .searchHeaderTabList_f3b986 { - .item_aa8da2 { + .f3b986a284a18c78-searchHeaderTabList { + .aa8da23faa27393c-item { padding-left: 0; padding-right: 0; margin-right: 16px; @@ -21,7 +21,7 @@ color: $TextFillColorSecondary; } - &.selected_aa8da2 { + &.aa8da23faa27393c-selected { background-color: transparent; color: $AccentTextFillColorPrimary; &::before{ @@ -41,7 +41,7 @@ } // Result - .searchResult__02a39{ + ._02a39cb2980ceaaf-searchResult{ background-color: $CardBackgroundFillColorDefault; border: 1px solid $CardStrokeColorDefault; border-radius: 4px; @@ -50,7 +50,7 @@ } } // Jump button - .button__02a39{ + ._02a39cb2980ceaaf-button{ padding: 4px 8px; background-color: $ControlFillColorDefault; border: 1px solid $ControlStrokeColorOnAccentDefault; diff --git a/src/modules/main/chat/_thread.scss b/src/modules/main/chat/_thread.scss index fde04c95..738547bd 100644 --- a/src/modules/main/chat/_thread.scss +++ b/src/modules/main/chat/_thread.scss @@ -1,37 +1,37 @@ -.theme-dark .container__01ae2{ +.theme-dark ._01ae244280823725-container{ background-color: transparent; border-radius: 0; // Toolbar - .container__9293f{ + ._9293f6b2fc12398a-container{ background-color: transparent; - .children__9293f{ + ._9293f6b2fc12398a-children{ // Removes small gradient &::after{ display: none; } - > .iconWrapper__9293f{ + > ._9293f6b2fc12398a-iconWrapper{ display: none; } - .title__9293f{ + ._9293f6b2fc12398a-title{ @include TypeBodyStrong; } } } // Archived header - .chatHeaderBar_a5700d{ + .a5700d36f7c29ded-chatHeaderBar{ margin: 8px; background-color: $SystemFillColorSolidNeutralBackground; border: 1px solid $CardStrokeColorDefault; border-radius: 8px; - .chatHeaderBarText_a5700d{ + .a5700d36f7c29ded-chatHeaderBarText{ color: $TextFillColorPrimary; } } // Forum thread - .container__34c2c{ + ._34c2c51cfce1632e-container{ margin: 16px; padding: 4px 8px; background: $MicaBackgroundFillColorBase; @@ -39,7 +39,7 @@ border-radius: 8px; // Only apply filter when stickied - &.header__34c2c{ + &._34c2c51cfce1632e-header{ backdrop-filter: blur(8px); @include Elevation32; } @@ -49,8 +49,8 @@ min-width: unset; } .buttonInner__34c2c, - .reactionInner_f8896c, - .addReactButton__34c2c{ + .f8896c4f6be18f59-reactionInner, + ._34c2c51cfce1632e-addReactButton{ background-color: $ControlFillColorDefault; border-width: 1px; border-style: outset; @@ -58,12 +58,12 @@ border-radius: 4px; } } - .divider_ee23ac{ + .ee23ac2acd215184-divider{ display: none; } } -.theme-dark .chat_a44415{ +.theme-dark .a44415a3320e67de-chat{ border-top: 1px solid $CardStrokeColorDefault; border-left: 1px solid $CardStrokeColorDefault; border-radius: 8px 0 0 0; @@ -71,18 +71,18 @@ display: none; } } -.theme-dark .chat_f75fb0.threadSidebarOpen_f75fb0{ +.theme-dark .f75fb00fb7356cbe-chat.f75fb00fb7356cbe-threadSidebarOpen{ border-radius: 0; - .content_f75fb0{ + .f75fb00fb7356cbe-content{ border-right: 1px solid $CardStrokeColorDefault; border-radius: 8px 8px 0 0; } - .chatContent_f75fb0{ + .f75fb00fb7356cbe-chatContent{ border-radius: 8px 8px 0 0; } } -.theme-dark .resizeHandle__01ae2{ +.theme-dark ._01ae244280823725-resizeHandle{ position: relative; background-color: transparent; &::before{ @@ -105,13 +105,13 @@ } // Narrow window -.theme-dark .chatLayerWrapper__01ae2{ - .container__01ae2 { +.theme-dark ._01ae244280823725-chatLayerWrapper{ + ._01ae244280823725-container { background-color: $SolidBackgroundFillColorBase; - &.floating__01ae2{ + &._01ae244280823725-floating{ border-left: 0; } - .chat_f02135{ + .f02135b221cc85a6-chat{ border-radius: 0; } } diff --git a/src/modules/main/chat/embeds/_file.scss b/src/modules/main/chat/embeds/_file.scss index 2b9e09e9..960e9b36 100644 --- a/src/modules/main/chat/embeds/_file.scss +++ b/src/modules/main/chat/embeds/_file.scss @@ -1,8 +1,8 @@ -.theme-dark .fileWrapper__0ccae{ +.theme-dark ._0ccaee68b77c7469-fileWrapper{ width: 400px; position: relative; - .file__0ccae{ + ._0ccaee68b77c7469-file{ background-color: $CardBackgroundFillColorDefault; border: 1px solid $SurfaceStrokeColorFlyout; border-color: $SurfaceStrokeColorFlyout; // Override Discord CSS @@ -10,7 +10,7 @@ img{ display: none; - & ~ .fileInner__0ccae{ + & ~ ._0ccaee68b77c7469-fileInner{ position: relative; padding-left: 40px; &::before{ @@ -21,36 +21,36 @@ @include FontIconFluent; font-size: 24px; } - .filenameLinkWrapper__0ccae a{ + ._0ccaee68b77c7469-filenameLinkWrapper a{ line-height: 20px; } } } - img[title="acrobat"] ~ .fileInner__0ccae::before{ + img[title="acrobat"] ~ ._0ccaee68b77c7469-fileInner::before{ content: "\ea90"; // PDF } - img[title="archive"] ~ .fileInner__0ccae::before{ + img[title="archive"] ~ ._0ccaee68b77c7469-fileInner::before{ content: "\f012"; // ZipFolder } - img[title="document"] ~ .fileInner__0ccae::before{ + img[title="document"] ~ ._0ccaee68b77c7469-fileInner::before{ content: "\f000"; // KnowledgeArticle } - img[title="spreadsheet"] ~ .fileInner__0ccae::before{ + img[title="spreadsheet"] ~ ._0ccaee68b77c7469-fileInner::before{ content: "\E9F9"; // ReportDocument } - img[title="unknown"] ~ .fileInner__0ccae::before{ + img[title="unknown"] ~ ._0ccaee68b77c7469-fileInner::before{ content: "\e9ce"; // Unknown } - img[title="ae"] ~ .fileInner__0ccae::before, - img[title="ai"] ~ .fileInner__0ccae::before, - img[title="sketch"] ~ .fileInner__0ccae::before{ + img[title="ae"] ~ ._0ccaee68b77c7469-fileInner::before, + img[title="ai"] ~ ._0ccaee68b77c7469-fileInner::before, + img[title="sketch"] ~ ._0ccaee68b77c7469-fileInner::before{ content: "\e8a5"; // Document } - .metadata__0ccae{ + ._0ccaee68b77c7469-metadata{ color: $TextFillColorSecondary; @include TypeCaption; font-weight: normal; diff --git a/src/modules/main/chat/embeds/_invite.scss b/src/modules/main/chat/embeds/_invite.scss index 1c0b02e1..c79ef105 100644 --- a/src/modules/main/chat/embeds/_invite.scss +++ b/src/modules/main/chat/embeds/_invite.scss @@ -1,11 +1,11 @@ -.theme-dark .wrapper_d5f3cd{ +.theme-dark .d5f3cd116f175f35-wrapper{ width: 400px; background-color: $CardBackgroundFillColorDefault; border: 1px solid $SurfaceStrokeColorFlyout; border-radius: 8px; // Header - .header_d5f3cd{ + .d5f3cd116f175f35-header{ color: $TextFillColorPrimary; @include FontNormal; @include TypeBodyStrong; @@ -13,12 +13,12 @@ } // Icon - .guildIcon_d5f3cd{ + .d5f3cd116f175f35-guildIcon{ border-radius: 50%; align-self: center; } // Expired icon - .guildIconExpired_d5f3cd{ + .d5f3cd116f175f35-guildIconExpired{ background-color: transparent; background-image: none; &::before{ @@ -33,22 +33,22 @@ } } - .statusCounts_d5f3cd{ + .d5f3cd116f175f35-statusCounts{ flex-direction: column; align-items: flex-start; } // Online users - i.status_d5f3cd{ + i.d5f3cd116f175f35-status{ display: none; } - .count_d5f3cd{ + .d5f3cd116f175f35-count{ padding-left: 12px; position: relative; @include TypeBody; flex-direction: row; } - i.statusOnline_d5f3cd ~ span{ + i.d5f3cd116f175f35-statusOnline ~ span{ &::before{ content: ""; width: 8px; @@ -60,14 +60,14 @@ border-radius: 4px; } } - i.statusOffline_d5f3cd ~ span{ + i.d5f3cd116f175f35-statusOffline ~ span{ &::before{ background-color: #8a8886; } } // Button - .button_d5f3cd.buttonSize_d5f3cd{ + .d5f3cd116f175f35-button.buttonSize_d5f3cd{ height: 32px; } } diff --git a/src/modules/main/chat/embeds/_site_preview.scss b/src/modules/main/chat/embeds/_site_preview.scss index 11446676..155b97e9 100644 --- a/src/modules/main/chat/embeds/_site_preview.scss +++ b/src/modules/main/chat/embeds/_site_preview.scss @@ -1,12 +1,12 @@ -.theme-dark .embedFull__623de{ +.theme-dark ._623de82e76ad7f82-embedFull{ background-color: $CardBackgroundFillColorDefault; - .embedProvider__623de{ + ._623de82e76ad7f82-embedProvider{ @include TypeCaption; } - .embedAuthor__623de{ + ._623de82e76ad7f82-embedAuthor{ @include TypeBody; } - .embedTitle__623de{ + ._623de82e76ad7f82-embedTitle{ @include TypeBody; } } diff --git a/src/modules/main/chat/embeds/_text.scss b/src/modules/main/chat/embeds/_text.scss index 9632792b..130c8e58 100644 --- a/src/modules/main/chat/embeds/_text.scss +++ b/src/modules/main/chat/embeds/_text.scss @@ -1,4 +1,4 @@ -.theme-dark .textContainer__4d95d{ +.theme-dark ._4d95d73152192cf9-textContainer{ background-color: $CardBackgroundFillColorDefault; border: 1px solid $SurfaceStrokeColorFlyout; border-radius: 8px 8px 0 0; @@ -8,7 +8,7 @@ } // Footer -.theme-dark .footer__4d95d{ +.theme-dark ._4d95d73152192cf9-footer{ background-color: $CardBackgroundFillColorDefault; border: 1px solid $SurfaceStrokeColorFlyout; border-top: 0; @@ -19,7 +19,7 @@ } // Codeblock -.theme-dark .markup__75297 code{ +.theme-dark ._752971923a1e6683-markup code{ background-color: $CardBackgroundFillColorDefault; border: 1px solid $SurfaceStrokeColorFlyout; border-radius: 8px; diff --git a/src/modules/main/guilds/_guilds.scss b/src/modules/main/guilds/_guilds.scss index 1105351c..cdd9d2ea 100644 --- a/src/modules/main/guilds/_guilds.scss +++ b/src/modules/main/guilds/_guilds.scss @@ -1,24 +1,24 @@ .theme-dark{ - .guilds__5e434{ + ._5e434347c823b592-guilds{ width: 60px; background-color: transparent; // box-shadow: inset 0 0 0 1px $Green; } // Increase bottom margin of guilds list so there is a consistent margin around the account box - .wrapper_ef3116 { + .ef3116c2da186559-wrapper { margin-bottom: calc(var(--custom-app-panels-height, 0) + 16px); } // Reduce gap between guilds - .stack_dbd263{ + .dbd2630aec71879b-stack{ gap: 4px !important; // Override inline } // Pill - .pill_e5445c, // Normal guild - .pill_ed9a5f, // DM - .pill__1f388{ // Home - .item__58105{ + .e5445cbd3ad226f2-pill, // Normal guild + .ed9a5f50013e19ac-pill, // DM + ._1f388bcaa446c0c8-pill{ // Home + ._581051df43c5ebb6-item{ width: 3px; height: 16px !important; // Override inline margin-left: 0; @@ -40,13 +40,13 @@ } // Guild icon - .listItem__650eb{ + ._650eb104245d257b-listItem{ width: 44px; // height: 44px; margin-left: 8px; // box-shadow: inset 0 0 0 1px $Red; } - .wrapper_cc5dd2{ + .cc5dd25190031396-wrapper{ width: 44px !important; // Override inline height: 44px !important; // Override inline border-radius: 4px; @@ -55,7 +55,7 @@ height: 44px; top: 0; left: 0; - .icon__6e9f8{ + ._6e9f8dce4cc18de3-icon{ width: 36px; height: auto; border-radius: 50%; @@ -63,61 +63,61 @@ } } // Guild with no icon - .childWrapper__6e9f8 { + ._6e9f8dce4cc18de3-childWrapper { background-color: transparent; &:hover{ background-color: transparent; } } - .wrapper__6e9f8.selected__6e9f8 .childWrapper__6e9f8{ + ._6e9f8dce4cc18de3-wrapper._6e9f8dce4cc18de3-selected ._6e9f8dce4cc18de3-childWrapper{ background-color: transparent; } // Guild interaction states // Guild is selected - .blobContainer_e5445c.selected_e5445c .wrapper_cc5dd2{ + .e5445cbd3ad226f2-blobContainer.e5445cbd3ad226f2-selected .cc5dd25190031396-wrapper{ background-color: $ControlFillColorSecondary; } // Guild is selected and hovered - .blobContainer_e5445c.selected_e5445c:hover .wrapper_cc5dd2{ + .e5445cbd3ad226f2-blobContainer.e5445cbd3ad226f2-selected:hover .cc5dd25190031396-wrapper{ box-shadow: inset 0 0 0 1px $SubtleFillColorSecondary; } // Guild is hovered - .blobContainer_e5445c:hover .wrapper_cc5dd2{ + .e5445cbd3ad226f2-blobContainer:hover .cc5dd25190031396-wrapper{ background-color: $ControlFillColorSecondary; } // Guild is clicked - .blobContainer_e5445c:active .wrapper_cc5dd2{ + .e5445cbd3ad226f2-blobContainer:active .cc5dd25190031396-wrapper{ background-color: $ControlFillColorTertiary; } // Guild badges - .iconBadge__650eb{ + ._650eb104245d257b-iconBadge{ background-color: $SystemFillColorSolidNeutral; svg{ width: 12px; height: 12px; color: $TextOnAccentFillColorPrimary; } - &.isCurrentUserConnected__650eb{ + &._650eb104245d257b-isCurrentUserConnected{ background-color: $SystemFillColorSuccess; } } - .upperBadge_cc5dd2, - .lowerBadge_cc5dd2{ + .cc5dd25190031396-upperBadge, + .cc5dd25190031396-lowerBadge{ right: 2px; } - .upperBadge_cc5dd2{ + .cc5dd25190031396-upperBadge{ top: 2px; } - .lowerBadge_cc5dd2{ + .cc5dd25190031396-lowerBadge{ bottom: 2px; } // Home - .wrapper__6e9f8{ + ._6e9f8dce4cc18de3-wrapper{ &[data-list-item-id="guildsnav___home"]{ - .childWrapper__6e9f8 { + ._6e9f8dce4cc18de3-childWrapper { background-color: transparent; &::before{ content: "\E80F"; // Home @@ -132,16 +132,16 @@ } } // Remove Home :active transform - .listItemWrapper__91816:active{ + ._918165dab2b1e10b-listItemWrapper:active{ transform: none; } // Separator - .guildSeparator__252b6{ + ._252b6afd49fda06f-guildSeparator{ display: none; } // Add server/Server Discovery icons - .circleIconButton__5bc7e { + ._5bc7ed9d4097f6b5-circleIconButton { background-color: transparent; color: #FFF; &:hover{ @@ -155,7 +155,7 @@ } } // Offline - .guildsError_e8d03f{ + .e8d03f772dd98c5d-guildsError{ background-color: $SystemFillColorCritical; border: 0; border-radius: 0; @@ -164,23 +164,23 @@ } // Folders - .folderGroup__48112{ + ._48112cbe77dc5022-folderGroup{ width: 52px; } - .folderGroupBackground__48112{ + ._48112cbe77dc5022-folderGroupBackground{ width: 44px; left: 8px; border-radius: 4px; border: 0; } - .hiddenVisually__27f77, .folderPreviewWrapper__48112{ + .b18fe29d6fe8dd82-hiddenVisually, ._48112cbe77dc5022-folderPreviewWrapper{ // width: 44px; // height: 44px; border-radius: 4px; } // Open folder - .folderIcon__48112{ + ._48112cbe77dc5022-folderIcon{ &::before{ content: "\E8B7"; // Folder Open @include FontIconFluent; @@ -198,9 +198,16 @@ } } + // Opened Folder + ._48112cbe77dc5022-isExpanded{ + ._48112cbe77dc5022-folderPreviewWrapper{ + display: none; + } + } + // Closed folder - .folderHeader__48112{ - .wrapper_cc5dd2{ + ._48112cbe77dc5022-folderHeader{ + .cc5dd25190031396-wrapper{ width: 44px !important; // Override inline height: 44px !important; // Override inline } @@ -213,39 +220,39 @@ // mask: none; } } - .folderPreviewWrapper__48112{ + ._48112cbe77dc5022-folderPreviewWrapper{ // width: 44px; // height: 44px; } - .folderPreview__48112{ + ._48112cbe77dc5022-folderPreview{ width: 44px; height: 44px; gap: 1px; } - .folderPreviewGuildIcon__48112{ + ._48112cbe77dc5022-folderPreviewGuildIcon{ width: 18px; height: 18px; border-radius: 50% !important; // Override inline } // Fix folder icon height when folder is expanded - .isExpanded__48112 .folderHeader__48112{ + ._48112cbe77dc5022-isExpanded ._48112cbe77dc5022-folderHeader{ margin-bottom: 0; - .wrapper_cc5dd2{ + .cc5dd25190031396-wrapper{ width: 44px !important; // Override inline height: 44px !important; // Override inline } } // Remove the background behind folder icon when hovering - .hiddenVisually__27f77.hover__48112 .expandedFolderIconWrapper__48112{ + .b18fe29d6fe8dd82-hiddenVisually.hover__48112 .expandedFolderIconWrapper__48112{ background-color: transparent; } // Unread notification bars - .unreadMentionsIndicatorBottom_ef3116, - .unreadMentionsIndicatorTop_ef3116{ + .ef3116c2da186559-unreadMentionsIndicatorBottom, + .ef3116c2da186559-unreadMentionsIndicatorTop{ width: 48px; - .bar__3b95d{ + ._3b95d7d910416e54-bar{ background-color: $SystemFillColorCriticalBackground; } span{ @@ -262,14 +269,14 @@ } } - .unreadMentionsIndicatorBottom_ef3116{ + .ef3116c2da186559-unreadMentionsIndicatorBottom{ span{ &::before{ content: "\EDDC"; // CaretDownSolid8 } } } - .unreadMentionsIndicatorTop_ef3116{ + .ef3116c2da186559-unreadMentionsIndicatorTop{ span{ &::before{ content: "\EDDB"; // CaretUpSolid8 diff --git a/src/modules/main/members/_members.scss b/src/modules/main/members/_members.scss index 14df0b39..12f898e3 100644 --- a/src/modules/main/members/_members.scss +++ b/src/modules/main/members/_members.scss @@ -1,13 +1,13 @@ -.theme-dark .container_c8ffbb{ +.theme-dark .c8ffbb79449f399c-container{ background: $LayerOnMicaBaseAltFillColor; border-left: 1px solid $CardStrokeColorDefault; - .members_c8ffbb{ + .c8ffbb79449f399c-members{ background-color: transparent; } // Group header - .membersGroup_c8ffbb{ + .c8ffbb79449f399c-membersGroup{ padding: 20px 8px 0 15px; color: $TextFillColorPrimary; @include TypeBodyStrong; @@ -15,7 +15,7 @@ } // Member - .container__91a9d{ + ._91a9d7f7e5248a56-container{ margin-left: 7px; background: transparent; border: 1px solid transparent; @@ -23,12 +23,12 @@ &:hover{ background-color: $SubtleFillColorSecondary; border-color: $SubtleFillColorSecondary; - .childContainer__91a9d{ + ._91a9d7f7e5248a56-childContainer{ background-color: transparent; } } // Selected (user popout open) - &.selected__91a9d{ + &._91a9d7f7e5248a56-selected{ background-color: $SubtleFillColorSecondary; border-color: $SubtleFillColorSecondary; &::before{ @@ -37,17 +37,17 @@ transition: transform 250ms Cubic-bezier(0.55,0.55,0,1), opacity 250ms Cubic-bezier(0.55,0.55,0,1); } - .childContainer__91a9d{ + ._91a9d7f7e5248a56-childContainer{ background-color: transparent; } } // Greyscale offline avatars - &.offline__5d473{ - .avatar__91a9d{ + &._5d473ecff348c314-offline{ + ._91a9d7f7e5248a56-avatar{ filter: grayscale(100%); } &:hover{ - .avatar__91a9d{ + ._91a9d7f7e5248a56-avatar{ filter: grayscale(0%); } } @@ -55,11 +55,11 @@ } // Username - .name__91a9d{ + ._91a9d7f7e5248a56-name{ @include TypeBody; } // Activity - .truncated_c9d15c{ + .c9d15c8a962de3c8-truncated{ @include TypeCaption; color: $TextFillColorSecondary; strong{ @@ -72,12 +72,12 @@ // Remove Nitro decorations // Avatar decorations // This also removes them from user profile popouts and modals, but not cozy chat. -.avatarDecoration__44b0c{ +._44b0c28be7879b7b-avatarDecoration{ display: var(--fluent-show-nitro-decorations); } // Member list background -.nameplated__91a9d{ - .container__4bbc6{ +._91a9d7f7e5248a56-nameplated{ + ._4bbc6dc06e75ad52-container{ display: var(--fluent-show-nitro-decorations); } } diff --git a/src/modules/main/toolbar/_search.scss b/src/modules/main/toolbar/_search.scss index 2514601f..f7a9021e 100644 --- a/src/modules/main/toolbar/_search.scss +++ b/src/modules/main/toolbar/_search.scss @@ -1,6 +1,6 @@ -.theme-dark .chat_f75fb0 .search__49676{ +.theme-dark .f75fb00fb7356cbe-chat ._496769951eb140fe-search{ margin: 0 4px 0 0; - .searchBar__97492{ + ._974928fe84ca9647-searchBar{ width: 60px; height: 32px; background-color: transparent; @@ -17,16 +17,16 @@ transition: background-color $AnimationFadeInOut; } .public-DraftEditorPlaceholder-root, - .icon__97492{ + ._974928fe84ca9647-icon{ display: none; } - .icon__97492{ + ._974928fe84ca9647-icon{ height: 24px; } } // Icon when not active - .search__97492:not(.focused__97492):not(.open__97492)::before{ + ._974928fe84ca9647-search:not(._974928fe84ca9647-focused):not(._974928fe84ca9647-open)::before{ content: "\e721"; // Search width: 60px; font-size: 16px; @@ -37,9 +37,9 @@ position: absolute; } - .search__97492.focused__97492 .searchBar__97492, - .search__97492.open__97492 .searchBar__97492, - .search__97492.popout-open .searchBar__97492{ + ._974928fe84ca9647-search._974928fe84ca9647-focused ._974928fe84ca9647-searchBar, + ._974928fe84ca9647-search._974928fe84ca9647-open ._974928fe84ca9647-searchBar, + ._974928fe84ca9647-search.popout-open ._974928fe84ca9647-searchBar{ width: 232px; height: 32px; margin: 0; @@ -51,27 +51,27 @@ border-radius: 4px; transition: width $AnimationSoftDismiss; } - .search__97492.focused__97492 .searchBar__97492{ + ._974928fe84ca9647-search._974928fe84ca9647-focused ._974928fe84ca9647-searchBar{ background-color: $ControlFillColorInputActiveBrush; border-color: $ControlStrokeColorDefault; border-bottom-color: $AccentBase; } - .search__97492.open__97492 .icon__97492, - .search__97492.focused__97492 .icon__97492{ + ._974928fe84ca9647-search._974928fe84ca9647-open ._974928fe84ca9647-icon, + ._974928fe84ca9647-search._974928fe84ca9647-focused ._974928fe84ca9647-icon{ width: 24px; height: 24px; display: block; padding: 4px 0 0 4px; } - .search__97492.open__97492 .searchBar__97492 .public-DraftEditorPlaceholder-root, - .search__97492.focused__97492 .searchBar__97492 .public-DraftEditorPlaceholder-root{ + ._974928fe84ca9647-search._974928fe84ca9647-open ._974928fe84ca9647-searchBar .public-DraftEditorPlaceholder-root, + ._974928fe84ca9647-search._974928fe84ca9647-focused ._974928fe84ca9647-searchBar .public-DraftEditorPlaceholder-root{ display: block; } - .search__97492 .DraftEditor-root .DraftEditor-editorContainer{ + ._974928fe84ca9647-search .DraftEditor-root .DraftEditor-editorContainer{ height: 26px; } - .search__97492 .searchBar__97492 .DraftEditor-root{ + ._974928fe84ca9647-search ._974928fe84ca9647-searchBar .DraftEditor-root{ width: 100%; color: $TextFillColorPrimary; @include TypeBody; @@ -85,7 +85,7 @@ } } // Add margin to textarea when open/focused so text doesn't appear over the search/clear icon - .seasearch__97492rch .searchBar__97492 .public-DraftEditorPlaceholder-root{ + .sea_974928fe84ca9647-searchrch ._974928fe84ca9647-searchBar .public-DraftEditorPlaceholder-root{ color: $TextFillColorSecondary; @include TypeBody; } diff --git a/src/modules/main/toolbar/_toolbar.scss b/src/modules/main/toolbar/_toolbar.scss index e1b98707..ce9de397 100644 --- a/src/modules/main/toolbar/_toolbar.scss +++ b/src/modules/main/toolbar/_toolbar.scss @@ -1,43 +1,43 @@ -.theme-dark .title_f75fb0, // Normal toolbar -.theme-dark .container__9293f{ // Browse channels toolbar +.theme-dark .f75fb00fb7356cbe-title, // Normal toolbar +.theme-dark ._9293f6b2fc12398a-container{ // Browse channels toolbar padding: 0 0 0 8px; - &.themed__9293f{ + &._9293f6b2fc12398a-themed{ background-color: transparent; border: 0; } // Channel & MOTD // Re-colour channel symbol - .children__9293f{ + ._9293f6b2fc12398a-children{ // Gradient at end of MOTD field &::after{ display: none; } - .iconWrapper__9293f svg{ + ._9293f6b2fc12398a-iconWrapper svg{ color: $TextFillColorPrimary; } } // Channel name - .title__9293f{ + ._9293f6b2fc12398a-title{ @include TypeBodyStrong } // MOTD - .dot__9293f{ + ._9293f6b2fc12398a-dot{ color: $TextFillColorDisabled; } - .topic__6ec1a{ + ._6ec1a06139ec3b27-topic{ color: $TextFillColorPrimary; @include TypeBody; } // Add some margin to the caret when in fullscreen thread view - .caret__9293f{ + ._9293f6b2fc12398a-caret{ margin-right: 8px; } } // Toolbar -.theme-dark .toolbar__9293f{ +.theme-dark ._9293f6b2fc12398a-toolbar{ gap: 4px; margin-right: 4px; // Using these selectors so there are fewer conflicts in the voice screen @@ -59,7 +59,7 @@ } // Selected - &.selected__9293f{ + &._9293f6b2fc12398a-selected{ background-color: $AccentFillColorSecondary; &::before{ color: $TextOnAccentFillColorPrimary; @@ -79,7 +79,7 @@ left: 38px; @include TypeCaption; } - .iconBadge__9293f{ + ._9293f6b2fc12398a-iconBadge{ width: 16px; height: 3px; right: 22px; @@ -91,8 +91,8 @@ } // Icon replacements -html[lang^="en-"].theme-dark .toolbar__9293f{ - .iconWrapper__9293f{ +html[lang^="en-"].theme-dark ._9293f6b2fc12398a-toolbar{ + ._9293f6b2fc12398a-iconWrapper{ &::before{ @include FontIconFluent; width: 60px; @@ -103,7 +103,7 @@ html[lang^="en-"].theme-dark .toolbar__9293f{ display: block; } // Remove default icon - .icon__9293f, + ._9293f6b2fc12398a-icon, .controlIcon-35oS15{ display: none; } diff --git a/src/modules/main/voice/_voice.scss b/src/modules/main/voice/_voice.scss index 2b8b38e8..95bd292f 100644 --- a/src/modules/main/voice/_voice.scss +++ b/src/modules/main/voice/_voice.scss @@ -1,11 +1,11 @@ // DEBUG: 2022-06-04 - Useful debug snippets to help with theming // Force display voice screen elements (toolbars) -// .root_bfe55a.idle_bfe55a *{ +// .bfe55a0aaaf62375-root.bfe55a0aaaf62375-idle *{ // opacity: 1 !important; // transform: unset !important; // } // Draw debug borders on top toolbar buttons -// .toolbar__9293f{ +// ._9293f6b2fc12398a-toolbar{ // border: 1px solid red; // div[role=button], // button[type=button]{ @@ -13,23 +13,23 @@ // } // } -.theme-dark .wrapper_cb9592{ +.theme-dark .cb9592ad77576717-wrapper{ background-color: #000; border-radius: 8px 0 0 0; // Attach borders in call - ~ .content_f75fb0{ + ~ .f75fb00fb7356cbe-content{ border-radius: 0; } // Round top-left corner - .callContainer_cb9592{ + .cb9592ad77576717-callContainer{ border-radius: 8px 0 0 0; } // Quality indicator - .liveQualityIndicator__30845{ - .liveLarge_a7acae{ + ._30845ecfafc292c8-liveQualityIndicator{ + .a7acaedd978a9637-liveLarge{ width: auto !important; // Override conflict height: 16px !important; // Override conflict font-weight: normal; @@ -37,11 +37,11 @@ } // Buttons bar - .buttonSection__1405b{ + ._1405b3b8e8eb5fd0-buttonSection{ border-radius: 4px; } - .attachedCaretButtonContainer_f1ceac{ - .button__201d5[aria-label="More Options"]{ + .f1ceaca61b18918e-attachedCaretButtonContainer{ + ._201d5e8a3c09670a-button[aria-label="More Options"]{ svg{ display: block !important; } @@ -49,20 +49,20 @@ } // User tiles - .tile__2f4f7{ + ._2f4f7eb58b61c328-tile{ background-color: $SubtleFillColorTertiary; border: 1px solid transparent; border-radius: 4px; // Only apply border colour to users - &.tile__2f4f7:hover{ + &._2f4f7eb58b61c328-tile:hover{ border-color: $ControlStrokeColorDefault; } - .overlayTitle__2f4f7{ + ._2f4f7eb58b61c328-overlayTitle{ background-color: $ControlOnImageFillColorDefault; border-radius: 4px; } // Status button - .status__2f4f7{ + ._2f4f7eb58b61c328-status{ background-color: $ControlOnImageFillColorDefault; border-radius: 4px; &:hover{ @@ -73,7 +73,7 @@ } } } - .participantsButton__211d1{ + ._211d1cc3f7e37d69-participantsButton{ background-color: $ControlOnImageFillColorDefault; border: 1px solid $ControlStrokeColorDefault; &:hover{ @@ -87,8 +87,8 @@ // Icon replacements // Top toolbar (excludes Inbox button) -html[lang^="en-"].theme-dark .toolbar__9293f{ - .button__201d5{ +html[lang^="en-"].theme-dark ._9293f6b2fc12398a-toolbar{ + ._201d5e8a3c09670a-button{ &::before{ @include FontIconFluent; width: 62px; @@ -106,7 +106,7 @@ html[lang^="en-"].theme-dark .toolbar__9293f{ } // Bottom toolbar (mic/speaker mute, leave, activity buttons) // NOTE - 2023-03-07: Discord removed aria-label from activity and react buttons, so only remove default icons from buttons WITH an aria-label set -html[lang^="en-"].theme-dark .wrapper__1405b .button__201d5[aria-label]{ +html[lang^="en-"].theme-dark ._1405b3b8e8eb5fd0-wrapper ._201d5e8a3c09670a-button[aria-label]{ &::before{ @include FontIconFluent; width: 62px; diff --git a/src/modules/misc/_loading.scss b/src/modules/misc/_loading.scss index 991c4c75..a85c7757 100644 --- a/src/modules/misc/_loading.scss +++ b/src/modules/misc/_loading.scss @@ -14,11 +14,11 @@ 100% { transform: rotate(140deg); } } -.spinner__46696{ - .inner__46696:not(.pulsingEllipsis__46696){ +._46696d17714f10ab-spinner{ + ._46696d17714f10ab-spinner:not(._46696d17714f10ab-pulsingEllipsis){ display: block; animation: fluent-loading-circle 1s linear infinite; - .item__46696:first-child{ + ._46696d17714f10ab-item:first-child{ width: 32px; height: 32px; position: absolute; @@ -40,7 +40,7 @@ box-sizing: border-box; } } - .item__46696:last-child{ + ._46696d17714f10ab-item:last-child{ display: none; } } diff --git a/src/modules/modals/_add_server.scss b/src/modules/modals/_add_server.scss index 0d498452..b4b2954d 100644 --- a/src/modules/modals/_add_server.scss +++ b/src/modules/modals/_add_server.scss @@ -1,6 +1,6 @@ // This file is courtesy of Discord's Department of Redundancy Depart at Discord // Add server modal has light theme manually applied to it for some reason. -.theme-light .root__49fc1{ +.theme-light ._49fc18ba07c5025f-root{ background: $SolidBackgroundFillColorBase; border: 1px solid $SurfaceStrokeColorDefault; border-radius: 8px; @@ -8,30 +8,30 @@ // Main page // Header (main page) - .header__49fc1{ + ._49fc18ba07c5025f-header{ padding: 24px 24px 0 24px; background-color: $CardBackgroundFillColorDefault; align-items: unset; - .title_c04f35, - .subtitle_c04f35{ + .c04f357ea00ccf57-title, + .subc04f357ea00ccf57-title{ text-align: left; color: $TextFillColorPrimary !important; // Override inline } - .title_c04f35{ + .c04f357ea00ccf57-title{ @include TypeSubtitle; } - .subtitle_c04f35{ + .subc04f357ea00ccf57-title{ @include TypeBody; } } // Content - .content__49fc1{ + ._49fc18ba07c5025f-content{ padding: 24px 24px 0 24px; background-color: $CardBackgroundFillColorDefault; } - .templatesList_c04f35, - .optionsList__78f69{ + .c04f357ea00ccf57-templatesList, + ._78f6989168778e7c-optionsList{ margin-top: 0; padding-top: 24px; .optionHeader-27AHfD{ @@ -39,21 +39,21 @@ @include TypeBodyStrong; text-transform: none; } - .container_eb2cd2{ + .eb2cd27996d667df-container{ height: 32px; margin-bottom: 4px; padding: 0 12px; background-color: transparent; border: 1px solid transparent; border-radius: 4px; - .icon_eb2cd2{ + .eb2cd27996d667df-icon{ display: none; } - .text_eb2cd2{ + .eb2cd27996d667df-text{ color: $TextFillColorPrimary; @include TypeBody; } - .arrow_eb2cd2{ + .eb2cd27996d667df-arrow{ margin-right: 0; filter: brightness(200%); } @@ -67,7 +67,7 @@ } // Server name .nameInput_b917ac{ - .label_b717a1{ + .b717a15017b82443-defaultMarginlabel{ color: $TextFillColorPrimary; @include TypeBody; text-transform: none; @@ -80,7 +80,7 @@ @include TypeCaption; } // Skip question - .skip__78f69{ + ._78f6989168778e7c-skip{ color: $TextFillColorSecondary !important; // Override inline @include TypeCaption; text-align: left; @@ -89,8 +89,8 @@ .input__991a0{ background-color: transparent; } - .input__0ed4f, - .input__0ed4f::placeholder{ + ._0ed4fc708cdbac0d-input, + ._0ed4fc708cdbac0d-input::placeholder{ font-weight: normal; } // Example links @@ -99,7 +99,7 @@ @include TypeBody; text-transform: none; } - .sampleLink__991a0{ + ._991a00423f3b43a4-sampleLink{ color: $AccentTextFillColorPrimary; &:hover{ color: $AccentTextFillColorSecondary; @@ -108,14 +108,14 @@ } } // Server discovery - .rowContainer__991a0{ + ._991a00423f3b43a4-rowContainer{ height: 32px; margin-bottom: 16px; padding: 0 12px; background-color: transparent; border: 1px solid transparent; border-radius: 4px; - .rowIcon__991a0{ + ._991a00423f3b43a4-rowIcon{ display: none; } .heading-md-semibold__76ba1{ @@ -125,7 +125,7 @@ color: $TextFillColorPrimary; @include TypeBody; } - .rowArrow__991a0{ + ._991a00423f3b43a4-rowArrow{ margin-right: 0; filter: brightness(200%); } @@ -138,10 +138,10 @@ } // Footer - .footer__49fc1{ + ._49fc18ba07c5025f-footer{ background-color: transparent; box-shadow: none; - .footerTitle_c04f35{ + .c04f357ea00ccf57-footerTitle{ @include TypeBodyStrong; color: $TextFillColorPrimary; } @@ -150,53 +150,53 @@ // Sub page (de ja vu?) // Header - .header__49fc1{ + ._49fc18ba07c5025f-header{ padding: 24px 24px 0 24px; background-color: $CardBackgroundFillColorDefault; align-items: unset; - .title__78f69, - .subtitle__78f69{ + ._78f6989168778e7c-title, + .sub_78f6989168778e7c-title{ text-align: left; color: $TextFillColorPrimary !important; // Override inline } - .title__78f69{ + ._78f6989168778e7c-title{ @include TypeSubtitle; } - .subtitle__78f69{ + .sub_78f6989168778e7c-title{ @include TypeBody; } } // Content - .content__49fc1{ + ._49fc18ba07c5025f-content{ background-color: $CardBackgroundFillColorDefault; } // Sub sub page (de ja vu?) // At least we don't have to do this again // Header - .header__49fc1{ + ._49fc18ba07c5025f-header{ padding: 24px 24px 0 24px; background-color: $CardBackgroundFillColorDefault; align-items: unset; - .title_b917ac, - .subtitle_b917ac{ + .b917acdaa252d89e-title, + .subb917acdaa252d89e-title{ text-align: left; color: $TextFillColorPrimary !important; // Override inline } - .title_b917ac{ + .b917acdaa252d89e-title{ @include TypeSubtitle; } - .subtitle_b917ac{ + .subb917acdaa252d89e-title{ @include TypeBody; } } // Content - .content__49fc1{ + ._49fc18ba07c5025f-content{ background-color: $CardBackgroundFillColorDefault; } - .createGuild_b917ac{ + .b917acdaa252d89e-createGuild{ margin-top: 0; padding-top: 24px; } @@ -204,16 +204,16 @@ // I lied just before // Join server by URL page // Header - .header__49fc1{ + ._49fc18ba07c5025f-header{ padding: 24px 24px 0 24px; background-color: $CardBackgroundFillColorDefault; align-items: unset; - .title__991a0, + ._991a00423f3b43a4-title, .text-sm-normal__95a78{ text-align: left; color: $TextFillColorPrimary; } - .title__991a0{ + ._991a00423f3b43a4-title{ margin: 0; @include TypeSubtitle; } @@ -222,11 +222,11 @@ color: $TextFillColorPrimary !important; // Override inline } } - .examplesForm__991a0 ~ .rowContainer__991a0{ + .examplesForm__991a0 ~ ._991a00423f3b43a4-rowContainer{ display: none; } // Content - .content__49fc1{ + ._49fc18ba07c5025f-content{ padding-top: 24px; border-radius: 0; } diff --git a/src/modules/modals/_incoming_call.scss b/src/modules/modals/_incoming_call.scss index e49d1044..54407ef9 100644 --- a/src/modules/modals/_incoming_call.scss +++ b/src/modules/modals/_incoming_call.scss @@ -1,29 +1,29 @@ -.theme-dark .root__2dbe1 { +.theme-dark ._2dbe1dc734ff26a5-root { min-height: auto !important; // Modal is longer than necessary background-color: $SolidBackgroundFillColorBase; border: 1px solid $SurfaceStrokeColorDefault; border-radius: 8px; justify-content: space-between; - .icon__2dbe1{ + ._2dbe1dc734ff26a5-icon{ margin: 0 0 16px 0; } - .titleGroup__2dbe1{ + ._2dbe1dc734ff26a5-titleGroup{ display: flex; flex-direction: column; justify-content: space-between; - .title__2dbe1{ + ._2dbe1dc734ff26a5-subtitle{ @include TypeSubtitle; } - .subtitle__2dbe1{ + ._2dbe1dc734ff26a5-subtitle{ margin-bottom: 16px; @include TypeBody; color: $TextFillColorPrimary; } } - .actionButton__2dbe1{ - .red_f1ceac{ + ._2dbe1dc734ff26a5-actionButton{ + .f1ceaca61b18918e-red{ padding: 16px 14px 14px 16px; // Hack to fix whatever the hell Discord has done here background-color: transparent; border: 1px solid $SystemFillColorCritical; @@ -35,7 +35,7 @@ } } } - .green_f1ceac{ + .f1ceaca61b18918e-green{ background-color: $AccentFillColorDefault; &:hover{ background-color: $AccentFillColorSecondary; diff --git a/src/modules/modals/_leave_server_feedback.scss b/src/modules/modals/_leave_server_feedback.scss index cc7a6e9a..33e94754 100644 --- a/src/modules/modals/_leave_server_feedback.scss +++ b/src/modules/modals/_leave_server_feedback.scss @@ -4,18 +4,18 @@ text-align: left; } - .problemInfo__6c12c{ - .root__66e7e{ + ._6c12c295172334d8-problemInfo{ + ._66e7e7f9b4da60b0-root{ background-color: $CardBackgroundFillColorDefault; border: 1px solid $CardStrokeColorDefault; border-radius: 4px; } - .option__66e7e{ + ._66e7e7f9b4da60b0-option{ &:hover{ background-color: $CardBackgroundFillColorSecondary; } } - .text__66e7e{ + ._66e7e7f9b4da60b0-text{ @include TypeBody; } } diff --git a/src/modules/modals/_lightbox.scss b/src/modules/modals/_lightbox.scss index c826cde3..b2413810 100644 --- a/src/modules/modals/_lightbox.scss +++ b/src/modules/modals/_lightbox.scss @@ -8,7 +8,7 @@ } } -.theme-dark .zoomedCarouselModalRoot_f74404.root__49fc1{ +.theme-dark .zoomedCarouselModalRoot_f74404._49fc18ba07c5025f-root{ background-color: transparent; border: 0; diff --git a/src/modules/modals/_link_gate.scss b/src/modules/modals/_link_gate.scss index 23858073..e0091410 100644 --- a/src/modules/modals/_link_gate.scss +++ b/src/modules/modals/_link_gate.scss @@ -1,10 +1,10 @@ -.theme-dark .modalContent__918e5{ +.theme-dark ._918e53296f179828-modalContent{ h2{ @include TypeSubtitle; text-align: left; text-transform: none; } - .body__918e5{ + ._918e53296f179828-body{ @include TypeBody; text-align: left; strong{ diff --git a/src/modules/modals/_modal.scss b/src/modules/modals/_modal.scss index 9d5a6990..57679419 100644 --- a/src/modules/modals/_modal.scss +++ b/src/modules/modals/_modal.scss @@ -6,15 +6,15 @@ } // Body - .root__49fc1{ + ._49fc18ba07c5025f-root{ background-color: $SolidBackgroundFillColorBase; border: 1px solid $SurfaceStrokeColorDefault; border-radius: 8px; } // Headers - .header__49fc1, // eg. notification settings - // .header__802af, // eg. change password + ._49fc18ba07c5025f-header, // eg. notification settings + // ._2aeb5b11ab8fdc77-header, // eg. change password // .header-1kWa4s, // eg. change username .header-1R3myj{ // eg. edit email padding: 24px; @@ -22,14 +22,14 @@ border-radius: 8px 8px 0 0; align-items: unset; .heading-lg-semibold__58a54, // eg. notification settings - .title__802af, // eg. change password + .title__88fd6, // eg. change password .title_b404ff, // eg. change username .title_ad198f{ // eg. edit email @include TypeSubtitle; text-align: left; } .text-md-normal__6e567, // eg. notification settings - .subtitle__802af, // eg. change password + .subtitle__88fd6, // eg. change password .subtitle_b404ff, // eg. change username .subtitle_ad198f{ // eg. edit email @include TypeBody; @@ -38,13 +38,13 @@ } // Remove divider line in notification settings - &.separator__49fc1{ + &._49fc18ba07c5025f-separator{ box-shadow: none; } } // Content - .content__49fc1{ + ._49fc18ba07c5025f-content{ padding-right: 24px !important; padding-left: 24px; background-color: $LayerFillColorAlt; @@ -57,17 +57,17 @@ } // Footer - .footer__49fc1{ + ._49fc18ba07c5025f-footer{ padding: 24px; background-color: transparent; // Remove divider line in notification settings - &.footerSeparator__49fc1{ + &._49fc18ba07c5025f-footerSeparator{ box-shadow: none; } // Add gap between buttons - .button__201d5{ + ._201d5e8a3c09670a-button{ margin-left: 8px; } } @@ -85,7 +85,7 @@ display: none; } // NOTE: 2023-06-13 - Style fix for the verify email modal which uses the wrong class for the actions div - .headerImage_a62824 ~ div .content__49fc1{ + .headerImage_a62824 ~ div ._49fc18ba07c5025f-content{ background-color: transparent; } .buttons_ce7406{ @@ -100,7 +100,7 @@ } } // Enter phone number - .phoneField_a0c54f{ + .a0c54f499c2e5848-phoneField{ .countryButton_a0c54f{ min-width: 64px; } @@ -116,7 +116,7 @@ } // Event info modal - .card__88264{ + ._8826425bb0684b12-card{ background-color: $LayerFillColorDefault; border: 1px solid $CardStrokeColorDefault; border-radius: 8px; diff --git a/src/modules/modals/_quality_rating.scss b/src/modules/modals/_quality_rating.scss index c79b08f2..0f268cf1 100644 --- a/src/modules/modals/_quality_rating.scss +++ b/src/modules/modals/_quality_rating.scss @@ -1,9 +1,9 @@ .theme-dark{ - .header__49fc1 .heading-xl-extrabold__8ed5c{ + ._49fc18ba07c5025f-header .heading-xl-extrabold__8ed5c{ @include TypeSubtitle; text-align: left; } - .ratingBody__6c12c{ + ._6c12c295172334d8-ratingBody{ @include TypeBody; color: $TextFillColorPrimary; text-align: left; diff --git a/src/modules/modals/_quickswitcher.scss b/src/modules/modals/_quickswitcher.scss index 98f69237..2f825cab 100644 --- a/src/modules/modals/_quickswitcher.scss +++ b/src/modules/modals/_quickswitcher.scss @@ -1,4 +1,4 @@ -.theme-dark .quickswitcher_ac6cb0{ +.theme-dark .ac6cb02cd15b4b3b-quickswitcher{ height: 100%; background-color: $SolidBackgroundFillColorBase; @@ -9,7 +9,7 @@ color: $TextFillColorPrimary; } - .input_ac6cb0{ + .ac6cb02cd15b4b3b-input{ height: 32px; background-color: transparent; border: 1px solid; @@ -34,7 +34,7 @@ } // Scroll content - .scroller_ac6cb0 { + .ac6cb02cd15b4b3b-scroller { max-height: unset; margin-top: 12px; margin-right: -4px; @@ -42,13 +42,13 @@ overflow-y: auto !important; // Override inline } - .header__71961{ + ._71961da99d37ac57-header{ @include TypeBodyStrong; color: $TextFillColorPrimary; text-transform: none; } - .result__71961{ + ._71961da99d37ac57-result{ &[aria-selected=true]{ background-color: $SubtleFillColorSecondary; &::before{ @@ -63,12 +63,12 @@ } } - .name__71961{ + ._71961da99d37ac57-name{ @include TypeBody; color: $TextFillColorPrimary; line-height: 32px; - .username__71961, - .note__71961{ + .user_71961da99d37ac57-name, + ._71961da99d37ac57-note{ margin: 0; opacity: 1; @include TypeCaption; @@ -76,7 +76,7 @@ text-transform: none; } } - .miscContainer_ac6cb0{ + .ac6cb02cd15b4b3b-miscContainer{ opacity: 1; @include TypeBody; color: $TextFillColorTertiary; @@ -84,23 +84,23 @@ } // Footer - .protip_ac6cb0{ - .pro__30cbe{ + .ac6cb02cd15b4b3b-protip{ + ._30cbe28ac3d3507e-pro{ display: none; } - .tip__30cbe{ + ._30cbe28ac3d3507e-tip{ @include TypeCaption; color: $TextFillColorSecondary; opacity: 1; } - .autocompleteQuerySymbol_ac6cb0{ + .ac6cb02cd15b4b3b-autocompleteQuerySymbol{ background-color: transparent; @include FontMonospace; } } // Remove 'tutorial' - .tutorial__73f2a{ + ._73f2a239bd174194-tutorial{ display: none; } } diff --git a/src/modules/modals/_reactors.scss b/src/modules/modals/_reactors.scss index eceb7e64..4dc617b9 100644 --- a/src/modules/modals/_reactors.scss +++ b/src/modules/modals/_reactors.scss @@ -1,14 +1,14 @@ -.theme-dark .container_b7f4b4{ - .scroller_b7f4b4{ +.theme-dark .b7f4b43fe1b6e285-container{ + .b7f4b43fe1b6e285-scroller{ background-color: $CardBackgroundFillColorDefault; } - .reactionDefault_b7f4b4{ + .b7f4b43fe1b6e285-reactionDefault{ &:hover{ background-color: $SubtleFillColorSecondary; } } - .reactionSelected_b7f4b4{ + .b7f4b43fe1b6e285-reactionSelected{ position: relative; background-color: $SubtleFillColorSecondary; &::before{ @@ -23,15 +23,15 @@ } } - .reactors_b7f4b4{ + .b7f4b43fe1b6e285-reactors{ background-color: transparent; } - .name_b7f4b4{ + .b7f4b43fe1b6e285-name{ @include TypeBody; color: $TextFillColorPrimary; } - .username_b7f4b4{ + .userb7f4b43fe1b6e285-name{ opacity: 1; @include TypeBody; color: $TextFillColorSecondary; diff --git a/src/modules/modals/_screen_share.scss b/src/modules/modals/_screen_share.scss index 09b3c2b9..6d3a9fb8 100644 --- a/src/modules/modals/_screen_share.scss +++ b/src/modules/modals/_screen_share.scss @@ -23,42 +23,42 @@ box-shadow: inset 0 0 0 2px $AccentBase; } } - .sourceName_a2de16{ + .a2de1626f02751e5-sourceName{ @include TypeBody; } // Stream settings - .card__4bb93{ + ._4bb93312e84f332e-card{ height: 32px; padding: 0 8px; background-color: $ControlFillColorDefault; border: 0; border-radius: 4px; color: $TextFillColorSecondary; - .channelInfo__248f3, - .ellipsisText__885c5{ + ._248f3d614c5ab7ad-channelInfo, + ._885c53313f188564-ellipsisText{ @include TypeBody; color: $TextFillColorPrimary; } - .changeButton__885c5{ + ._885c53313f188564-changeButton{ margin-right: -8px; } } - .qualitySettingsContainer_c6d3dc{ + .c6d3dc100d5624e2-qualitySettingsContainer{ padding: 0; border: 0; } .group_d76384{ - .selectorButton_c6d3dc{ + .c6d3dc100d5624e2-selectorButton{ background-color: transparent; border: 1px solid $ControlStrokeColorOnAccentDefault; &:hover{ background-color: $ControlFillColorSecondary; } - &.selectorButtonSelected_c6d3dc{ + &.c6d3dc100d5624e2-selectorButtonSelected{ background-color: $AccentFillColorDefault; color: $TextOnAccentFillColorPrimary; &:hover{ diff --git a/src/modules/modals/_server_terms.scss b/src/modules/modals/_server_terms.scss index 0410d0da..68cb2b6f 100644 --- a/src/modules/modals/_server_terms.scss +++ b/src/modules/modals/_server_terms.scss @@ -1,11 +1,11 @@ .theme-dark{ - .guildSidebar_b962dc{ + .b962dc319e969a3f-guildSidebar{ background: $SolidBackgroundFillColorBase; .guildDescription_b962dc{ color: $TextFillColorPrimary; } } - .modal_b962dc{ + .b962dc319e969a3f-modal{ background-color: $CardBackgroundFillColorDefault; border-radius: 0; // Remove waving hand GIF @@ -13,25 +13,25 @@ display: none; } // Headers - .header_b962dc{ + .b962dc319e969a3f-header{ @include TypeSubtitle; text-align: left; } - .subheader_b962dc{ + .subb962dc319e969a3f-header{ @include TypeBody; color: $TextFillColorPrimary; text-align: left; } - hr.divider_b962dc{ + hr.b962dc319e969a3f-divider{ display: none; } - .termsFieldBody_d48a51{ + .d48a5175a09205b7-termsFieldBody{ background-color: $CardBackgroundFillColorDefault; border: 1px solid $CardStrokeColorDefault; border-radius: 4px; } - .termsRowContent_d48a51{ + .d48a5175a09205b7-termsRowContent{ @include TypeBody; color: $TextFillColorPrimary; } diff --git a/src/modules/modals/_threads.scss b/src/modules/modals/_threads.scss index 3b1593df..9c874c89 100644 --- a/src/modules/modals/_threads.scss +++ b/src/modules/modals/_threads.scss @@ -4,43 +4,43 @@ background-color: $SolidBackgroundFillColorBase !important; // Override inline } - .container_d9c882{ + .d9c8822889d1d4a1-container{ background-color: transparent; } // Header - .header_d9c882{ + .d9c8822889d1d4a1-header{ height: unset; min-height: unset; padding: 24px 24px 0 24px; background-color: transparent; // Remove icon - .threadIcon_d9c882{ + .d9c8822889d1d4a1-threadIcon{ display: none; } // Remove divider - .divider_d9c882{ + .d9c8822889d1d4a1-divider{ display: none; } // Remove spacer - .spacer_d9c882{ + .d9c8822889d1d4a1-spacer{ display: none; } } // Thread list - .list_c441f0{ + .c441f0072c3e8827-list{ padding: 0 24px; padding-right: 24px !important; } // Sub headers - .sectionHeader_c441f0{ + .c441f0072c3e8827-sectionHeader{ @include TypeBodyStrong; text-transform: none; margin-top: 24px; } // List item - .container__6764b{ + ._6764bd76e0340219-container{ height: auto; padding: 12px; background-color: $SubtleFillColorSecondary; @@ -50,21 +50,21 @@ background-color: $SubtleFillColorTertiary; } &:active{ - .threadNameLine__6764b span{ + ._6764bd76e0340219-threadNameLine span{ color: $TextFillColorSecondary; } } // Thread title - .threadNameLine__6764b{ + ._6764bd76e0340219-threadNameLine{ @include TypeBodyStrong; span{ color: $TextFillColorPrimary; } } // Subtext - .subtext__6764b{ + ._6764bd76e0340219-subtext{ margin-top: 8px; @include TypeCaption; color: $TextFillColorSecondary !important; diff --git a/src/modules/modals/_user.scss b/src/modules/modals/_user.scss index a1bd4f1a..afa6d90c 100644 --- a/src/modules/modals/_user.scss +++ b/src/modules/modals/_user.scss @@ -2,7 +2,7 @@ .user-profile-modal-v2{ background-color: transparent; border: 0; - .inner_c0bea0{ + .c0bea05627c5dc35-inner{ padding: 24px 24px 0 24px; } } diff --git a/src/modules/popouts/_account.scss b/src/modules/popouts/_account.scss index b963364b..e0156ed4 100644 --- a/src/modules/popouts/_account.scss +++ b/src/modules/popouts/_account.scss @@ -1,6 +1,6 @@ .theme-dark .userPopoutOuter_c69a7b{ // Remove style from context menu in user popout - .menu_c1e9c4.menu_ad5fac{ + .c1e9c47c23f12ca3-menu.menu_ad5fac{ background-color: transparent; border: 0; box-shadow: none; @@ -8,13 +8,13 @@ content: unset; } - .separator_c1e9c4{ + .c1e9c47c23f12ca3-separator{ display: none; } - .item_c1e9c4{ + .c1e9c47c23f12ca3-item{ // Remove icon - .iconContainerLeft_c1e9c4{ + .c1e9c47c23f12ca3-iconContainerLeft{ display: none; } } diff --git a/src/modules/popouts/_app_launcher.scss b/src/modules/popouts/_app_launcher.scss index 98e36535..efc766e8 100644 --- a/src/modules/popouts/_app_launcher.scss +++ b/src/modules/popouts/_app_launcher.scss @@ -1,4 +1,4 @@ -.theme-dark .contentWrapper__9c62c{ +.theme-dark ._9c62c6ed231468c4-contentWrapper{ background: $MicaBackgroundFillColorBase; backdrop-filter: blur(16px); // Search @@ -45,7 +45,7 @@ } // Cards - .container_cb32c7{ + .cb32c78a53f54371-container{ background-color: $ControlFillColorDefault; border-width: 1px; border-style: outset; @@ -57,30 +57,30 @@ } // App "profile" - .container__7bdb0{ + ._7bdb06a4e863b838-container{ background-color: transparent; .profileAndVideoContainer_e80fe9{ padding: 0 8px; border: 0; } - .overviewContainerNoVideo__95856{ + ._958562d63bb1e99d-overviewContainerNoVideo{ background-color: transparent; padding: 0; } // List of commands - .contentContainer_c94584{ + .c94584907f9d5a22-contentContainer{ padding: 0 24px; } - .commandContainer_c94584{ + .c94584907f9d5a22-commandContainer{ background-color: $ControlFillColorDefault; border-width: 1px; border-style: outset; border-color: $ControlElevationBorder; border-radius: 4px; } - .command_c94584{ + .c94584907f9d5a22-command{ background-color: transparent; } } diff --git a/src/modules/popouts/_channel.scss b/src/modules/popouts/_channel.scss index cd8cfb08..22134403 100644 --- a/src/modules/popouts/_channel.scss +++ b/src/modules/popouts/_channel.scss @@ -15,68 +15,68 @@ color: $TextFillColorPrimary !important; // Override inline } // Channel user count - .container_b1bfd4{ + .b1bfd4bdd69b9a6d-container{ background-color: transparent; svg{ display: none; } - .userCountText_b1bfd4{ + .b1bfd4bdd69b9a6d-userCountText{ color: $TextFillColorSecondary; } } // Timebar - .bar_c8b06d { + .c8b06d02ca1314f9-bar { height: 3px; background-color: $ControlStrokeColorDefault; margin: 0 8px; } - .barInner_c8b06d{ + .c8b06d02ca1314f9-barInner{ height: 3px; background-color: $AccentBase; } // Timecode - .text_c8b06d{ + .c8b06d02ca1314f9-text{ @include TypeCaption; } } // Active thread -.popout__76f04{ +._76f047ded9fef6d4-popout{ background: $SolidBackgroundFillColorSecondary; backdrop-filter: blur(16px); border: 1px solid $SurfaceStrokeColorFlyout; border-radius: 8px; @include Elevation32; - .title__76f04{ + ._76f047ded9fef6d4-title{ @include TypeBodyStrong; color: $TextFillColorPrimary !important; // Override inline text-transform: none; } - .row__76f04:hover{ + ._76f047ded9fef6d4-row:hover{ background-color: $AccentBase; color: $TextOnAccentFillColorPrimary; - .timestamp__76f04{ + ._76f047ded9fef6d4-timestamp{ color: $TextOnAccentFillColorPrimary; } } } // Stream preview -.theme-dark .streamPreview__6da2d{ +.theme-dark ._6da2d8abf659f945-streamPreview{ background: $SolidBackgroundFillColorSecondary; backdrop-filter: blur(16px); border: 1px solid $SurfaceStrokeColorFlyout; border-radius: 8px; @include Elevation32; - .previewContainer__6da2d{ + ._6da2d8abf659f945-previewContainer{ background-color: transparent; } // Remove tip - .protip__6da2d{ + ._6da2d8abf659f945-protip{ display: none; } } diff --git a/src/modules/popouts/_emoji_picker.scss b/src/modules/popouts/_emoji_picker.scss index 49bb3294..4cf691aa 100644 --- a/src/modules/popouts/_emoji_picker.scss +++ b/src/modules/popouts/_emoji_picker.scss @@ -1,4 +1,4 @@ -.theme-dark .contentWrapper__08434, +.theme-dark ._084343c4f11eaaab-contentWrapper, .theme-dark #emoji-picker-tab-panel{ background: $MicaBackgroundFillColorBase; backdrop-filter: blur(16px); @@ -6,7 +6,7 @@ border-radius: 8px; } -.theme-dark .contentWrapper__08434 #emoji-picker-tab-panel{ +.theme-dark ._084343c4f11eaaab-contentWrapper #emoji-picker-tab-panel{ background: transparent; backdrop-filter: none; border: 0; @@ -15,8 +15,8 @@ .theme-dark{ // Navigation - .nav__08434{ - .navButton__08434 { + ._084343c4f11eaaab-nav{ + ._084343c4f11eaaab-navButton { padding-left: 0; padding-right: 0; margin-left: 0; @@ -29,7 +29,7 @@ } } - .navButtonActive__08434 { + ._084343c4f11eaaab-navButtonActive { background-color: transparent; color: $AccentTextFillColorPrimary; &::before{ @@ -48,12 +48,12 @@ } // Header - .emojiPickerHasTabWrapper_c0e32c .header_c0e32c{ + .c0e32c5cffed3d9f-emojiPickerHasTabWrapper .c0e32c5cffed3d9f-header{ padding: 0 12px 12px; } - .header_c0e32c, // Emoji - .header__8ef02, // Stickers - .header_fed6d3{ // GIFs + .c0e32c5cffed3d9f-header, // Emoji + ._8ef02eea17068b73-header, // Stickers + .fed6d32841cc2da2-header{ // GIFs background-color: transparent; box-shadow: none; } @@ -108,12 +108,12 @@ // Emoji // Sidebar - .categoryList_c0e32c{ + .c0e32c5cffed3d9f-categoryList{ background-color: $SolidBackgroundFillColorBase; } // Replace emoji icons - .categoryItemDefaultCategory_b9ee0c{ - &.categoryItem_b9ee0c{ + .b9ee0c229bc0b6bb-categoryItemDefaultCategory{ + &.b9ee0c229bc0b6bb-categoryItem{ svg{ display: none; } @@ -162,22 +162,22 @@ } } // Info bar - .inspector_aeaaeb { + .aeaaeb2a573807f0-inspector { background-color: $SolidBackgroundFillColorSecondary; } // "Popular" badge in info bar - .topGuildEmojiBadge_aeaaeb{ + .aeaaeb2a573807f0-topGuildEmojiBadge{ display: none; } // Emoji category header - .header_c656ac, - .wrapper__14245{ + .c656aca9a3db31a9-header, + ._14245bb948377a25-wrapper{ margin: 0 -8px; padding: 0 16px; background-color: $SolidBackgroundFillColorTertiary; border-radius: 4px; - .headerLabel__14245{ + ._14245bb948377a25-headerLabel{ @include TypeBodyStrong; color: $TextFillColorPrimary; text-transform: none; @@ -185,30 +185,30 @@ } // Colour change - .diversitySelectorButton_a45a2a{ + .a45a2a5d0f4caddc-diversitySelectorButton{ width: 30px; height: 30px; background-color: $ControlFillColorDefault; border: 1px solid $ControlStrokeColorDefault; border-radius: 4px; position: relative; - .diversityEmojiItemImage_a45a2a{ + .a45a2a5d0f4caddc-diversityEmojiItemImage{ margin: 3px; } } // Diversity selector in stand alone emoji popout (eg. reaction) - .diversitySelectorOptions_a45a2a { + .a45a2a5d0f4caddc-diversitySelectorOptions { // top: 0; right: 12px; } - .diversitySelectorOptions_a45a2a { + .a45a2a5d0f4caddc-diversitySelectorOptions { border: 1px solid $ControlStrokeColorDefault; - .diversityEmojiItem_a45a2a{ + .a45a2a5d0f4caddc-diversityEmojiItem{ width: 30px; height: 30px; padding: 0; } - .diversityEmojiItemImage_a45a2a{ + .a45a2a5d0f4caddc-diversityEmojiItemImage{ margin: 3px; } } diff --git a/src/modules/popouts/_inbox.scss b/src/modules/popouts/_inbox.scss index 11a5805c..e0d8dcf0 100644 --- a/src/modules/popouts/_inbox.scss +++ b/src/modules/popouts/_inbox.scss @@ -1,4 +1,4 @@ -.theme-dark .recentMentionsPopout__95796{ +.theme-dark ._957962c2bd49881b-recentMentionsPopout{ // NOTE - 2022-06-08: Calculation is based on: 100vh - titlebar - toolbar - (margin-top + margin-bottom) max-height: calc(100vh - 32px - 48px - 16px) !important; // Override inline margin: 8px; @@ -7,11 +7,11 @@ border: 1px solid $SurfaceStrokeColorDefault; border-radius: 8px; - .header_ab6641 { + .ab66419eae73260f-header { background-color: transparent; // Tabs - .topPill_aa8da2{ - .tab_ab6641 { + .aa8da23faa27393c-topPill{ + .ab66419eae73260f-tab { padding-left: 0; padding-right: 0; margin-right: 16px; @@ -43,10 +43,10 @@ } // No messages - .iconContainer_d404a3{ + .d404a36e7b59cdcf-iconContainer{ display: none; } - .header_d404a3{ + .d404a36e7b59cdcf-header{ margin-bottom: 24px; @include TypeBodyLarge; } @@ -54,25 +54,25 @@ // Results // Mentions // NOTE: 2023-01-04 - Mentions tab scroller uses a different class which doesn't have L/R padding - .scroller__95796 { + ._957962c2bd49881b-scroller { padding: 0 0 0 16px; } - .container__95796, // Mentions - .channel__427f0{ // Unreads + ._957962c2bd49881b-container, // Mentions + ._427f0273a157ab7a-channel{ // Unreads padding-bottom: 16px; - .channelHeader__35a7e{ + ._35a7ecf3aba351b2-channelHeader{ top: -1px; padding-right: 16px; // Fixes dismiss buttons butting up on right side background-color: $SolidBackgroundFillColorSecondary; border-radius: 4px 4px 0 0; - .guildIcon__35a7e { + ._35a7ecf3aba351b2-guildIcon { background-color: transparent; border-radius: 50%; } } - .messageContainer__95796, // Mentions - .messages__1ccd1{ // Unreads + ._957962c2bd49881b-messageContainer, // Mentions + ._1ccd1ba5cb2270c2-messages{ // Unreads margin-left: 0; background-color: $CardBackgroundFillColorDefault; border: 1px solid $CardStrokeColorDefault; @@ -81,8 +81,8 @@ } // Unread headers have a collapse button - .channel__427f0{ - .channelHeader__35a7e{ + ._427f0273a157ab7a-channel{ + ._35a7ecf3aba351b2-channelHeader{ padding-left: 48px; } .collapseButton__427f0{ diff --git a/src/modules/popouts/_noise_cancellation.scss b/src/modules/popouts/_noise_cancellation.scss index 88a91dcb..c8edef1e 100644 --- a/src/modules/popouts/_noise_cancellation.scss +++ b/src/modules/popouts/_noise_cancellation.scss @@ -1,4 +1,4 @@ -.theme-dark .noiseCancellationPopout_e131a9{ +.theme-dark .e131a99484292a19-noiseCancellationPopout{ background-color: $SolidBackgroundFillColorBase; border: 1px solid $SurfaceStrokeColorDefault; border-radius: 8px; diff --git a/src/modules/popouts/_pinned_messages.scss b/src/modules/popouts/_pinned_messages.scss index 8eb5da90..3e94e766 100644 --- a/src/modules/popouts/_pinned_messages.scss +++ b/src/modules/popouts/_pinned_messages.scss @@ -1,11 +1,11 @@ -.theme-dark .messagesPopoutWrap_e8b59c{ +.theme-dark .e8b59c4b335dd2fc-messagesPopoutWrap{ max-height: calc(100vh - 32px - 48px - 12px) !important; // Fixes window jumping when alt-tabbed background: $MicaBackgroundFillColorBase; backdrop-filter: blur(16px); border: 1px solid $SurfaceStrokeColorDefault; border-radius: 8px; - .header_e8b59c{ + .e8b59c4b335dd2fc-header{ background-color: transparent; box-shadow: none; h1{ @@ -13,30 +13,30 @@ } } - .messagesPopout_e8b59c { + .e8b59c4b335dd2fc-messagesPopout { padding-top: 0; } // Empty - .emptyPlaceholder_e8b59c{ - .image_e8b59c{ + .e8b59c4b335dd2fc-emptyPlaceholder{ + .e8b59c4b335dd2fc-image{ display: none; } - .body_e8b59c{ + .e8b59c4b335dd2fc-body{ white-space: unset; @include TypeBody; } } // Message - .messageGroupWrapper_e8b59c{ + .e8b59c4b335dd2fc-messageGroupWrapper{ background-color: $CardBackgroundFillColorDefault; border: 1px solid $CardStrokeColorDefault; border-radius: 4px; } // Footer - .footer_e8b59c{ + .e8b59c4b335dd2fc-footer{ display: none; } } diff --git a/src/modules/popouts/_quick_select.scss b/src/modules/popouts/_quick_select.scss index 5f9fac74..acbbade9 100644 --- a/src/modules/popouts/_quick_select.scss +++ b/src/modules/popouts/_quick_select.scss @@ -1,5 +1,5 @@ // Voice call > Region select -.theme-dark .quickSelectPopout_ebaca5 { +.theme-dark .ebaca56eb4bb23eb-quickSelectPopout { background: $MicaBackgroundFillColorBase; backdrop-filter: blur(16px); border: 1px solid $SurfaceStrokeColorDefault; @@ -17,7 +17,7 @@ } &.selected{ background-color: $SubtleFillColorSecondary; - .check__5621e{ + .check__8de63{ display: none; } &::before{ @@ -32,7 +32,7 @@ } } } - .regionSelectName__5621e{ + .regionSelectName__8de63{ height: auto; @include TypeBody; color: $TextFillColorPrimary; diff --git a/src/modules/popouts/_roles.scss b/src/modules/popouts/_roles.scss index 152cd4e4..07fcbf08 100644 --- a/src/modules/popouts/_roles.scss +++ b/src/modules/popouts/_roles.scss @@ -1,4 +1,4 @@ -.theme-dark .container__3dde2{ +.theme-dark ._3dde27fb71170aa9-container{ background-color: $SolidBackgroundFillColorBase; border: 1px solid $SurfaceStrokeColorDefault; border-radius: 8px; @@ -10,7 +10,7 @@ } // Items - .item__97e86{ + ._97e869e420e80b14-item{ &:hover{ background-color: $SubtleFillColorSecondary; box-shadow: inset 0 0 0 1px $SubtleFillColorSecondary; @@ -18,7 +18,7 @@ } // No results - .empty__97e86{ + ._97e869e420e80b14-empty{ &::before{ content: "\E25B"; @include FontIconFluent; diff --git a/src/modules/popouts/_search.scss b/src/modules/popouts/_search.scss index a37b0979..081bccf4 100644 --- a/src/modules/popouts/_search.scss +++ b/src/modules/popouts/_search.scss @@ -1,16 +1,16 @@ -.theme-dark .container__55c99{ +.theme-dark ._55c999adcf6db265-container{ background: $MicaBackgroundFillColorBase; backdrop-filter: blur(16px); border: 1px solid $SurfaceStrokeColorDefault; border-radius: 8px; - .header__56fec{ + ._56fec8e8b8048fe0-header{ @include TypeBodyStrong; color: $TextFillColorPrimary; text-transform: none; } - .option__56fec{ + ._56fec8e8b8048fe0-option{ margin: 1px 10px; height: 32px; border: 1px solid transparent; @@ -23,36 +23,36 @@ display: none; } - .filter__56fec, - .answer__56fec, - .displayedNick__56fec, - .displayUsername__56fec, - .nonText__56fec, + ._56fec8e8b8048fe0-filter, + ._56fec8e8b8048fe0-answer, + ._56fec8e8b8048fe0-displayedNick, + ._56fec8e8b8048fe0-displayUsername, + ._56fec8e8b8048fe0-nonText, strong{ @include TypeBody; } - .filter__56fec, - .displayedNick__56fec, + ._56fec8e8b8048fe0-filter, + ._56fec8e8b8048fe0-displayedNick, strong{ color: $TextFillColorPrimary; @include TypeBody; } - .answer__56fec, - .displayUsername__56fec{ + ._56fec8e8b8048fe0-answer, + ._56fec8e8b8048fe0-displayUsername{ color: $TextFillColorSecondary; @include TypeBody; } } - .resultsGroup__56fec .resultsGroup__56fec, - .resultsGroup__56fec .searchLearnMore__56fec{ + ._56fec8e8b8048fe0-resultsGroup ._56fec8e8b8048fe0-resultsGroup, + ._56fec8e8b8048fe0-resultsGroup ._56fec8e8b8048fe0-searchLearnMore{ top: 16px; } // "Search for..." header - .queryContainer__55c99{ + ._55c999adcf6db265-queryContainer{ background-color: $CardStrokeColorDefault; - queryText__55c99{ + _55c999adcf6db265-queryText{ @include TypeBody; color: $TextFillColorPrimary; text-transform: none; diff --git a/src/modules/popouts/_soundboard.scss b/src/modules/popouts/_soundboard.scss index 53460da6..248e79a8 100644 --- a/src/modules/popouts/_soundboard.scss +++ b/src/modules/popouts/_soundboard.scss @@ -1,15 +1,15 @@ -.theme-dark .picker__09f65{ +.theme-dark ._09f65b4b8a3f8d26-picker{ background: $MicaBackgroundFillColorBase; backdrop-filter: blur(16px); border: 1px solid $SurfaceStrokeColorDefault; border-radius: 8px; // Search box - .header__0856d{ + ._0856d03b83e324b0-header{ box-shadow: none; } // Volume control - .settingsClickArea__61424{ + ._614244fbcb264b94-settingsClickArea{ width: 32px; height: 32px; border-width: 1px; @@ -28,14 +28,14 @@ } // Servers - .categoryList_a1e0e0{ + .a1e0e01524490cf9-categoryList{ background-color: $SolidBackgroundFillColorBase; } // Sounds // Section header - .sectionHeader__61424{ - .sectionTitle__61424{ + ._614244fbcb264b94-sectionHeader{ + ._614244fbcb264b94-sectionTitle{ @include TypeBodyStrong; text-transform: none; color: $TextFillColorPrimary; @@ -43,7 +43,7 @@ } // Sound - .soundButton__9be63{ + ._9be63f0b86033228-soundButton{ background-color: $ControlFillColorDefault; border-width: 1px; border-style: outset; @@ -56,28 +56,28 @@ &:active{ background-color: $ControlFillColorTertiary; } - .ssoundName__9be63{ + .s_9be63f0b86033228-soundName{ @include TypeBody; } - .buttonOverlayBackground__9be63{ + ._9be63f0b86033228-buttonOverlayBackground{ background-color: $ControlFillColorInputActiveBrush; opacity: 1; } } // keybind reminder - .keybindHint__46002{ + ._46002dafa54b8395-keybindHint{ margin: 8px; padding: 8px 16px; background-color: $SystemFillColorAttentionBackground; border: 1px solid $CardStrokeColorDefault; border-radius: 4px; - .warningIcon__46002{ + ._46002dafa54b8395-warningIcon{ color: $SystemFillColorAttention; // Wrong icon used for this type of info bar, so rotate it 180deg to change it into an 'i' transform: rotate(180deg); } - .keybindHintText__46002{ + ._46002dafa54b8395-keybindHintText{ @include TypeBody; } } diff --git a/src/modules/popouts/_threads.scss b/src/modules/popouts/_threads.scss index 86456897..6abd4b1e 100644 --- a/src/modules/popouts/_threads.scss +++ b/src/modules/popouts/_threads.scss @@ -1,29 +1,29 @@ -.theme-dark .browser_d98031{ +.theme-dark .d98031d9a3e08b09-browser{ background: $MicaBackgroundFillColorBase; backdrop-filter: blur(16px); border: 1px solid $SurfaceStrokeColorDefault; border-radius: 8px; // header - .header_d9c882{ + .d9c8822889d1d4a1-header{ height: unset; min-height: unset; padding: 12px 24px; background-color: transparent; - .threadIcon_d9c882{ + .d9c8822889d1d4a1-threadIcon{ display: none; } - .title_d9c882{ + .d9c8822889d1d4a1-title{ @include TypeSubtitle; } } // Thread list - .list_c441f0{ + .c441f0072c3e8827-list{ padding: 0 24px !important; // Override inline - .sectionHeader_c441f0{ + .c441f0072c3e8827-sectionHeader{ @include TypeBodyStrong; color: $TextFillColorPrimary !important; // Override inline text-transform: capitalize; @@ -31,17 +31,17 @@ } // Thread - .container__6764b{ + ._6764bd76e0340219-container{ background-color: $CardBackgroundFillColorDefault; border-radius: 4px; - .threadNameLine__6764b{ + ._6764bd76e0340219-threadNameLine{ margin-bottom: 4px; @include TypeBody; - .threadName__6764b{ + ._6764bd76e0340219-threadName{ color: $TextFillColorPrimary; } } - .subtext__6764b{ + ._6764bd76e0340219-subtext{ @include TypeCaption; color: $TextFillColorSecondary; } diff --git a/src/modules/popouts/_user.scss b/src/modules/popouts/_user.scss index 62679a1c..a57249a1 100644 --- a/src/modules/popouts/_user.scss +++ b/src/modules/popouts/_user.scss @@ -29,19 +29,19 @@ // Section title .title_c4a579, - .headerText__2ef49{ // 'Deprecated' spotify title + ._2ef4989efde1f4e4-headerText{ // 'Deprecated' spotify title @include TypeBodyStrong; text-transform: none; } // Roles - .role__48c1c{ + ._48c1c0768f2a2421-role{ padding: 4px 4px 4px 0px; background-color: transparent; border: 1px solid $ControlStrokeColorDefault; border-radius: 12px; @include TypeCaption; - &.addButton__48c1c{ + &._48c1c0768f2a2421-addButton{ padding: 4px; } } @@ -52,27 +52,27 @@ } // Spotify/games - .assetsLargeImage__2ef49{ + ._2ef4989efde1f4e4-assetsLargeImage{ border-radius: 4px; } .timeBarUserPopoutV2_c1d9fd{ - .bar_c8b06d{ + .c8b06d02ca1314f9-bar{ height: 3px; background-color: $ControlStrokeColorDefault; } - .barInner_c8b06d{ + .c8b06d02ca1314f9-barInner{ height: 3px; background-color: $AccentBase; } // Timecode - .text_c8b06d{ + .c8b06d02ca1314f9-text{ @include TypeCaption; color: $TextFillColorTertiary; } } // Remove buttons we can't interact with - .disabledButtonWrapper__201d5{ + ._201d5e8a3c09670a-disabledButtonWrapper{ display: none; } } diff --git a/src/modules/settings/_channel_settings.scss b/src/modules/settings/_channel_settings.scss index d2cfb340..d883b17b 100644 --- a/src/modules/settings/_channel_settings.scss +++ b/src/modules/settings/_channel_settings.scss @@ -1,16 +1,16 @@ -.theme-dark .contentColumn__23e6b{ +.theme-dark ._23e6b439306f125a-contentColumn{ // Permissions // Fix header &#permissions-tab{ - .title_b717a1{ + .b717a15017b82443-title{ @include TypeTitle; } // Advanced permissions // Header - .advancedModeDivider__4914c ~ .button__201d5{ + ._4914c777b1fd0f99-advancedModeDivider ~ ._201d5e8a3c09670a-button{ margin-top: 32px; - .contents__201d5{ + ._201d5e8a3c09670a-contents{ h2{ @include TypeBodyStrong; } @@ -30,8 +30,8 @@ } // The permissions - .permissionsForm__0ab2c{ - .flex__7c0ba.vertical_abf706{ + ._0ab2c03be0b88164-permissionsForm{ + ._7c0bae9243151ddd-flex.abf7060e6f2beabe-vertical{ margin-bottom: 8px; padding: 8px 16px; background-color: $CardBackgroundFillColorDefault; @@ -41,7 +41,7 @@ @include TypeBody; line-height: 32px; } - .description_ddd181{ + .ddd1814f7cd3e6fd-description{ margin-right: 100px; @include TypeCaption; } diff --git a/src/modules/settings/_navigation.scss b/src/modules/settings/_navigation.scss index 7f314625..efcdfe33 100644 --- a/src/modules/settings/_navigation.scss +++ b/src/modules/settings/_navigation.scss @@ -1,22 +1,22 @@ -.theme-dark .sidebarRegion__23e6b{ +.theme-dark ._23e6b439306f125a-sidebarRegion{ flex: 0; } // Hide scrollbar when not required -.theme-dark .sidebarRegionScroller__23e6b { +.theme-dark ._23e6b439306f125a-sidebarRegionScroller { background-color: transparent; } -.theme-dark .sidebar__23e6b{ +.theme-dark ._23e6b439306f125a-sidebar{ // NOTE: 2023-06-13 - 6px to account for the scrollbar width: calc(320px - 6px); padding: 40px 4px; - .searchBar_c7e907 { + .c7e9071ee8df9113-searchBar { margin-left: 8px; } // Section header - .side_aa8da2 .eyebrow_cf4812{ + .aa8da23faa27393c-side .cf48127484dbde85-eyebrow{ padding: 0 0 0 8px; @include TypeBodyStrong; color: $TextFillColorPrimary; @@ -25,12 +25,12 @@ svg{ display: none; } - .category__3ddc0{ + ._3ddc0d8784daab3c-category{ @include TypeCaption; } } - .side_aa8da2 .item_aa8da2{ + .aa8da23faa27393c-side .aa8da23faa27393c-item{ padding: 0 12px 0 16px; margin-bottom: 4px; border: 1px solid transparent; @@ -58,7 +58,7 @@ transition: transform 167ms Cubic-bezier(0,0,0,1), opacity 167ms Cubic-bezier(0,0,0,1); } - &.selected_aa8da2{ + &.aa8da23faa27393c-selected{ background-color: $SubtleFillColorSecondary; &::before{ transform: scaleY(100%); @@ -69,26 +69,26 @@ } // Special cases // Remove right side Nitro icon (may differ in some regions) - .premiumLabel_e681d1 svg{ + .e681d139d22f277b-premiumLabel svg{ display: none; } // Remove background div from nitro option - .selectedBackground_e681d1{ + .e681d139d22f277b-selectedBackground{ display: none; } // Delete channel trash icon - .tabBarItemContainer_c7e907{ + .c7e9071ee8df9113-tabBarItemContainer{ svg{ display: none; } } } // Divider - .side_aa8da2 .separator_aa8da2{ + .aa8da23faa27393c-side .aa8da23faa27393c-separator{ margin: 0 -8px; } - .info__2debe{ + ._2debea61131de3de-info{ // Make all version info match colours span{ color: $TextFillColorSecondary !important; // Override inline diff --git a/src/modules/settings/_server_settings.scss b/src/modules/settings/_server_settings.scss index 560ef8fc..7309f2a8 100644 --- a/src/modules/settings/_server_settings.scss +++ b/src/modules/settings/_server_settings.scss @@ -1,39 +1,39 @@ -.theme-dark .contentColumn__23e6b{ +.theme-dark ._23e6b439306f125a-contentColumn{ // Roles // Fix header &#roles-tab{ - .title_b717a1{ + .b717a15017b82443-title{ @include TypeTitle; } // Advanced permissions - .contentContainer__91dc3{ + ._91dc3971e82843c1-contentContainer{ left: 256px; } - .contentWidth_c6bf1b{ + .c6bf1b7af480dfda-contentWidth{ max-width: calc(1000px - 232px); } // Left - .container_e29cd7{ - .titleContainer_e29cd7{ + .e29cd7b93c4f1266-container{ + .e29cd7b93c4f1266-titleContainer{ padding-top: 40px; background-color: transparent; - .titleText_e29cd7{ + .e29cd7b93c4f1266-titleText{ @include TypeSubtitle; text-transform: none; } } - .list_e29cd7{ + .e29cd7b93c4f1266-list{ padding: 0 16px 96px 16px; } } // Right - .header_c6bf1b{ + .c6bf1b7af480dfda-header{ padding-top: 40px; background-color: $CardStrokeColorDefaultSolid; - .titleText__81b3e{ + ._81b3e843d09e285a-titleText{ @include TypeSubtitle; text-transform: none; } @@ -44,7 +44,7 @@ // Server template // Fix header &#guild_templates-tab{ - .title_b717a1{ + .b717a15017b82443-title{ @include TypeTitle; } } @@ -52,50 +52,50 @@ // Custom invite link // Fix header &#vanity_url-tab{ - .title_b717a1{ + .b717a15017b82443-title{ @include TypeTitle; } } // Integrations &#integrations-tab{ - .title_b717a1{ + .b717a15017b82443-title{ @include TypeTitle; } } // Automod // Fix card background - .editCard_a25a68{ + .a25a68d7be1be409-editCard{ background-color: $CardBackgroundFillColorDefault; border: 1px solid $CardStrokeColorDefault; - .ruleIconContainer_c5e6a1{ + .c5e6a11cf27336f8-ruleIconContainer{ background-color: transparent; } // Pills - .actionContainer_bc4513{ + .bc45130a46a61b36-actionContainer{ padding: 4px 8px; background-color: $SystemFillColorSolidNeutral; - .actionIcon_bc4513{ + .bc45130a46a61b36-actionIcon{ color: $TextFillColorPrimary; } - .actionTextHeader_bc4513{ + .bc45130a46a61b36-actionTextHeader{ color: $TextFillColorPrimary !important; font-weight: normal; } } - .mentionLimitContainer_ed9c90, - .actionContainer__6446f{ + .ed9c90c31c2038a5-mentionLimitContainer, + ._6446fb2bd9a3c2e5-actionContainer{ background-color: $CardBackgroundFillColorDefault; } .keywordListContainer__09e76{ margin-bottom: 0; background-color: transparent; } - .collapseable__217b7{ + ._217b73c8e5e3ff6d-collapseable{ background-color: $CardBackgroundFillColorDefault; border: 1px solid $CardStrokeColorDefault; } @@ -104,14 +104,14 @@ .container_fea832{ background-color: $ControlFillColorDefault; } - .resultsList__6ae25{ + ._6ae2516745464775-resultsList{ background: $SolidbackgroundFillColorQuarternary; border: 1px solid $SurfaceStrokeColorFlyout; border-radius: 4px; } // Textarea - .keywordTextArea__4546e{ + ._4546e2b07bad4954-keywordTextArea{ background-color: $ControlFillColorDefault; border: 1px solid; border-bottom-width: 2px; @@ -135,7 +135,7 @@ // Server boot status // Fix title &#guild_premium-tab{ - .title_b717a1 { + .b717a15017b82443-title { @include TypeTitle; } } @@ -150,7 +150,7 @@ // Channel Settings - Overview // Fixes no spacing between channel name text box and Bitrate sections .channel-settings-overview{ - .marginBottom40_fd297e{ + .fd297e0eff2da25e-marginBottom40{ margin-bottom: 24px; } } diff --git a/src/modules/settings/_settings.scss b/src/modules/settings/_settings.scss index b80f4ac7..a549edfd 100644 --- a/src/modules/settings/_settings.scss +++ b/src/modules/settings/_settings.scss @@ -1,24 +1,24 @@ -.theme-dark .layer__960e4{ - .contentRegion__23e6b{ +.theme-dark ._960e4207cea8323e-layer{ + ._23e6b439306f125a-contentRegion{ background-color: $LayerFillColorDefault; border-top: 1px solid $CardStrokeColorDefault; border-left: 1px solid $CardStrokeColorDefault; border-radius: 7px 0 0 0; } - .contentColumnDefault__23e6b{ + ._23e6b439306f125a-contentColumnDefault{ padding: 32px; } - .contentRegionShownSidebar__23e6b{ + ._23e6b439306f125a-contentRegionShownSidebar{ // justify-content: center; } - .contentColumn__23e6b, - .customColumn__23e6b{ + ._23e6b439306f125a-contentColumn, + ._23e6b439306f125a-customColumn{ max-width: 1000px; padding: 44px 32px; } // Close button - .closeButton_c2b141{ + .c2b141c0f80863fb-closeButton{ width: 32px; height: 32px; flex: 0 0 32px; @@ -29,14 +29,14 @@ fill: $TextFillColorPrimary; } } - .keybind_c2b141{ + .c2b141c0f80863fb-keybind{ @include TypeBody; color: $TextFillColorPrimary; } // Title .sectionTitle__7bffb{ - .title_b717a1{ + .b717a15017b82443-title{ margin-bottom: 32px; @include TypeTitle; } @@ -56,12 +56,12 @@ .note__0d850{ margin-right: 64px; } - .description_ddd181, .labelDescriptor_ddd181{ + .ddd1814f7cd3e6fd-description, .ddd1814f7cd3e6fd-labelDescriptor{ @include TypeCaption; color: $TextFillColorSecondary; } - .divider__1de9c{ + ._44f7f7e71cbca2e4-divider{ display: none; } } @@ -77,7 +77,7 @@ opacity: 1; } } -.contentColumn__23e6b > *{ +._23e6b439306f125a-contentColumn > *{ animation: fluent-settings-pages-transition 250ms cubic-bezier(0, 0, 0, 1); } @@ -91,6 +91,6 @@ transform: translateY(0); } } -.animating__960e4{ +._960e4207cea8323e-animating{ animation: fluent-layer-transition 250ms cubic-bezier(0,0,0,1); } diff --git a/src/modules/settings/_user_settings.scss b/src/modules/settings/_user_settings.scss index 0bb6157a..c0a3ea63 100644 --- a/src/modules/settings/_user_settings.scss +++ b/src/modules/settings/_user_settings.scss @@ -1,4 +1,4 @@ -.theme-dark .contentColumn__23e6b{ +.theme-dark ._23e6b439306f125a-contentColumn{ // Misc .notice-1Qe0b_{ background-color: $SystemFillColorAttentionBackground; @@ -12,19 +12,19 @@ } } // Remove dividers - .divider__1de9c{ + ._44f7f7e71cbca2e4-divider{ display: none; } // My Account - .accountProfileCard__1fed1{ + ._1fed1dd06c7aabf7-accountProfileCard{ background-color: transparent; // Remove coloured banner - .mask__68edb{ + ._68edb95846a37624-mask{ display: none; } - .userInfo__1fed1{ + ._1fed1dd06c7aabf7-userInfo{ height: 68px; margin: 0 0 32px 0; padding: 0; @@ -32,7 +32,7 @@ gap: 16px; align-items: center; // Avatar - .avatar__1fed1{ + ._1fed1dd06c7aabf7-avatar{ width: 64px !important; // Override inline height: 64px !important; // Override inline position: relative; @@ -54,20 +54,20 @@ } } } - .button__201d5{ + ._201d5e8a3c09670a-button{ display: none; } } // Body - .background__1fed1{ + ._1fed1dd06c7aabf7-background{ margin: 0; padding: 0; background-color: transparent; } - .fieldList__1fed1{ + ._1fed1dd06c7aabf7-fieldList{ background-color: transparent; - .field__1fed1{ + ._1fed1dd06c7aabf7-field{ min-height: 64px; padding: 0 16px 0 48px; margin: 0 0 4px 0; @@ -75,11 +75,11 @@ border: 1px solid $CardStrokeColorDefault; border-radius: 4px; - .constrainedRow__1fed1{ + ._1fed1dd06c7aabf7-constrainedRow{ align-items: center; } - .fieldTitle__1fed1{ + ._1fed1dd06c7aabf7-fieldTitle{ margin-bottom: 0; @include TypeBody; } @@ -89,12 +89,12 @@ } // Override the reveal button - .button__201d5.lookLink__201d5{ + ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink{ min-width: unset; padding: 0 0 0 4px; background-color: unset; border: unset; - .contents__201d5{ + ._201d5e8a3c09670a-contents{ color: $AccentLight3; &:hover{ text-decoration: underline; @@ -104,7 +104,7 @@ } // Icons - .field__1fed1{ + ._1fed1dd06c7aabf7-field{ position: relative; &::before{ position: absolute; @@ -151,8 +151,8 @@ } } // About me - .channelTextArea__74017{ - .bioTextArea__6a919{ + ._740174f3d6a2c8fe-channelTextArea{ + ._6a919231d4bdfd4f-bioTextArea{ height: auto; background-color: $ControlFillColorDefault; border: 1px solid; @@ -160,7 +160,7 @@ border-color: $ControlStrokeColorDefault; border-radius: 4px; // Set a static emoji icon - .emojiButton__04eed{ + ._04eede68d145ae81-emojiButton{ margin: 0 4px 0 0; &::before{ content: "\E76E"; //Emoji2 @@ -168,15 +168,15 @@ @include FontIconFluent; font-size: 16px; } - &.emojiButtonHovered__04eed::before{ + &._04eede68d145ae81-emojiButtonHovered::before{ color: $TextFillColorPrimary; } - .contents__201d5{ + ._201d5e8a3c09670a-contents{ display: none; } } } - .characterCount__795fb{ + ._795fb60671d128c1-characterCount{ top: -24px; bottom: unset; } @@ -184,10 +184,10 @@ // Authorised apps // Banner - .formNotice_f43ba5{ + .f43ba5b23c68a68f-formNotice{ background-color: $SystemFillColorAttentionBackground; border: 1px solid $CardStrokeColorDefault; - .formText_ddd181{ + .ddd1814f7cd3e6fd-formText{ @include TypeBody; color: $TextFillColorPrimary; } @@ -196,8 +196,8 @@ .authedApp__50a54{ background-color: $SystemFillColorAttentionBackground; border: 1px solid $CardStrokeColorDefault; - .permission__50a54{ - .permissionCheckmark__50a54{ + ._50a5493e9d9cc496-permission{ + ._50a5493e9d9cc496-permissionCheckmark{ width: 16px; height: 16px; margin-right: 8px; @@ -230,7 +230,7 @@ @include TypeBodyStrong; } // Account button - .accountButtonInner_c7f964{ + .c7f964e7e0fc8b47-accountButtonInner{ background-color: $ControlFillColorDefault; border: 1px solid $ControlStrokeColorDefault; &:hover{ @@ -243,20 +243,20 @@ } // Connection - .connection_c7f964{ + .c7f964e7e0fc8b47-connection{ background-color: $SystemFillColorAttentionBackground; border: 1px solid $CardStrokeColorDefault; border-radius: 4px; - .connectionHeader_c7f964{ + .c7f964e7e0fc8b47-connectionHeader{ padding: 16px; background-color: $SystemFillColorAttentionBackground; border-bottom: 1px solid $CardStrokeColorDefault; border-radius: 4px 4px 0 0; - .connectionAccountValue_c7f964{ + .c7f964e7e0fc8b47-connectionAccountValue{ margin-left: 16px; @include TypeBodyStrong; } - .connectionAccountLabel_c7f964{ + .c7f964e7e0fc8b47-connectionAccountLabel{ margin-left: 16px; @include TypeCaption; } @@ -272,7 +272,7 @@ .title__0d850{ @include TypeBody; } - .integration_c7f964{ + .c7f964e7e0fc8b47-integration{ background-color: $SystemFillColorAttentionBackground; border: 1px solid $CardStrokeColorDefault; border-radius: 4px; @@ -291,7 +291,7 @@ .title__0d850{ @include TypeBody; } - .description_ddd181 { + .ddd1814f7cd3e6fd-description { @include TypeCaption; color: $TextFillColorSecondary; } @@ -304,37 +304,37 @@ // Family Centre &#family-center-tab{ // Activity tab boxes - .container__5dbf8, - .container__8cc9a, - .container__5b321, - .box_d9914b { + ._5dbf818b58a61b59-container, + ._8cc9a9c411c88ba2-container, + ._5b32177e89c63961-container, + .d9914bd9cd9c033f-box { background-color: $SystemFillColorAttentionBackground; border: 1px solid $CardStrokeColorDefault; border-radius: 4px; box-shadow: none; } // Make the layout full-width - .max-width__8e680, - .max-width__5b321{ + ._8e680ffe35110238-max-width, + ._5b32177e89c63961-max-width{ max-width: unset; } // My family tab boxes - .box_d9914b { + .d9914bd9cd9c033f-box { background-color: $SystemFillColorAttentionBackground; border: 1px solid $CardStrokeColorDefault; border-radius: 4px; box-shadow: none; } // Make the layout full-width - .container_d9914b{ + .d9914bd9cd9c033f-container{ max-width: unset; } } // Subscriptions &#subscriptions-tab{ - .sectionTitle_e335a7{ + .e335a78803b4d1df-sectionTitle{ margin-bottom: 32px; @include TypeTitle; } @@ -343,7 +343,7 @@ // Billing &#billing-tab{ // Only apply to the main header, not the secondary "Transaction History" header - .title_b717a1 .flex__7c0ba{ + .b717a15017b82443-title ._7c0bae9243151ddd-flex{ margin-bottom: 32px; @include TypeTitle; // Remove lock icon @@ -355,7 +355,7 @@ // Appearance // Chat preview - .preview__3e443{ + ._3e443c6b2569044a-preview{ background-color: $LayerFillColorDefault; border: 1px solid $CardStrokeColorDefault; } @@ -365,25 +365,25 @@ margin-bottom: 0; } - .basicThemeSelectors_fbfab6fbfab6fbfab6fbfab6::after{ + .fbfab602fa801e7a-basicThemeSelectorsfbfab6fbfab6fbfab6fbfab6::after{ content: "Fluent Discord - Select the \"Dark\" option"; padding-left: 4px; color: $SystemFillColorCritical; } // Nitro themes - .premiumFeatureBorder__65c15{ + ._65c15724a894a2e0-premiumFeatureBorder{ margin: 0; background: transparent; border: 0; - .headings__67a11{ - .title__67a11::after{ + ._67a117a74ffaf557-headings{ + ._67a117a74ffaf557-title::after{ content: "Fluent Discord - Colour themes are not supported"; padding-left: 4px; color: $SystemFillColorCritical; } } } - .presets_a00e6e:has(.appIconSelectionContainer__8a3d7){ + .presets_a00e6e:has(._8a3d71a4c4dc2512-appIconSelectionContainer){ &::after{ content: "Fluent Discord - In-app Icon is not supported. Select the \"Default\" option."; padding-left: 4px; @@ -393,10 +393,10 @@ // a11y // Custom colours preview - .preview__5d148{ + ._5d148ffac19e7fb1-preview{ background-color: $LayerFillColorDefault; border: 1px solid $CardStrokeColorDefault; - .previewMessage__5d148{ + ._5d148ffac19e7fb1-previewMessage{ background-color: $LayerFillColorDefault; } } @@ -404,7 +404,7 @@ // Voice & Video &#voice-\&-video-tab{ // Fixes no spacing between video background and advanced sections - .h1_b717a1.title_b717a1{ + .b717a15017b82443-h1.b717a15017b82443-title{ margin-top: 24px; } } @@ -439,12 +439,12 @@ } // Align the Add keybind button with middle of warning - ~.flexChild__7c0ba{ + ~._7c0bae9243151ddd-flexChild{ align-self: center; } } // Default keybinds - .defaultKeybindGroup__740f2{ + ._740f25428e5fa983-defaultKeybindGroup{ border: 1px solid $CardStrokeColorDefault; } .defaultKeybindGroupHeader__740f2 { @@ -463,7 +463,7 @@ @include TypeCaption; color: $TextFillColorSecondary; } - .defaultKeybind__740f2{ + ._740f25428e5fa983-defaultKeybind{ height: 64px; padding: 0 16px; background-color: $CardBackgroundFillColorSecondary; @@ -472,7 +472,7 @@ @include TypeBody; color: $TextFillColorPrimary; } - .defaultKeybindShortcutGroup__740f2 span{ + ._740f25428e5fa983-defaultKeybindShortcutGroup span{ background-color: transparent; border: 1px solid $ControlStrokeColorDefault; box-shadow: inset 0 -4px 0 $ControlStrokeColorDefault; @@ -480,7 +480,7 @@ } } // Catches the first keybind - .children__7bffb > .defaultKeybind__740f2{ + .children__7bffb > ._740f25428e5fa983-defaultKeybind{ border: 1px solid $CardStrokeColorDefault; border-radius: 4px; } @@ -488,18 +488,18 @@ // Registered games &#game-activity-tab{ // Active game - .activeGame_cc46f0{ - &.notDetected_cc46f0{ + .cc46f0f859f26200-activeGame{ + &.cc46f0f859f26200-notDetected{ background-color: $SystemFillColorAttentionBackground; border: 1px solid $CardStrokeColorDefault; border-radius: 4px; } - &.nowPlayingAdd_cc46f0{ + &.cc46f0f859f26200-nowPlayingAdd{ background-color: $SystemFillColorSuccesBackground; } } // Add new game - .nowPlayingAdd_cc46f0{ + .cc46f0f859f26200-nowPlayingAdd{ width: 100%; padding: 8px 16px; background-color: $CardBackgroundFillColorDefault; @@ -509,13 +509,13 @@ color: $TextFillColorPrimary; line-height: 32px; } - .button__201d5{ + ._201d5e8a3c09670a-button{ float: right; } } // The games list - .game_cc46f0{ + .cc46f0f859f26200-game{ padding: 12px 16px; background-color: $CardBackgroundFillColorDefault; border: 1px solid $CardStrokeColorDefault; @@ -534,28 +534,28 @@ } // App name - .gameName_cc46f0{ + .cc46f0f859f26200-gameName{ @include TypeBodyStrong; } // Last played - .lastPlayed_cc46f0{ + .cc46f0f859f26200-lastPlayed{ color: $TextFillColorSecondary; - .default__0263c{ + ._0263c8321829b3e8-default{ @include TypeCaption; strong{ font-weight: normal; } } - .hovered__0263c{ + ._0263c8321829b3e8-hovered{ @include FontMonospace; @include TypeCaption; } } - .toggleContainer_cc46f0{ + .cc46f0f859f26200-toggleContainer{ margin-right: 8px; } // Remove button - .removeGame_cc46f0{ + .cc46f0f859f26200-removeGame{ position: relative; top: unset; right: unset; diff --git a/src/modules/ui/_buttons.scss b/src/modules/ui/_buttons.scss index c69a9c68..2901ebb4 100644 --- a/src/modules/ui/_buttons.scss +++ b/src/modules/ui/_buttons.scss @@ -1,12 +1,12 @@ -.theme-dark .button__201d5{ +.theme-dark ._201d5e8a3c09670a-button{ border-radius: 4px; @include TypeBody; // Sizes - &.sizeMin__201d5, // eg. Add server 'back' buttons - &.sizeSmall__201d5, - &.sizeMedium__201d5, // eg. Create new server - &.sizeLarge__201d5, // eg. Add a keybind + &._201d5e8a3c09670a-sizeMin, // eg. Add server 'back' buttons + &._201d5e8a3c09670a-sizeSmall, + &._201d5e8a3c09670a-sizeMedium, // eg. Create new server + &._201d5e8a3c09670a-sizeLarge, // eg. Add a keybind &.sizeXlarge__6885c{ // eg. Untrusted link modal min-width: 120px; min-height: 32px; @@ -14,10 +14,10 @@ } // Filled buttons - &.lookFilled__201d5{ + &._201d5e8a3c09670a-lookFilled{ // Brand buttons - &.colorBrand__201d5, - &.colorGreen__201d5, // Join server terms modal + &._201d5e8a3c09670a-colorBrand, + &._201d5e8a3c09670a-colorGreen, // Join server terms modal &.colorBrandNew__8872c{ // eg. User Settings > Accessibility > TTS Rate background-color: $AccentFillColorDefault; border-width: 1px; @@ -32,7 +32,7 @@ } } // Grey - &.colorPrimary__201d5, + &._201d5e8a3c09670a-colorPrimary, &.buttonColor_dfbe6b, // "Example Button" in User Settings>Profile &.buttonColor__7b3e8{ // Voice screen invite button background-color: $ControlFillColorDefault; @@ -49,7 +49,7 @@ } // Red - &.colorRed__201d5{ + &._201d5e8a3c09670a-colorRed{ background-color: $SystemFillColorCriticalBackground; color: $SystemFillColorCritical; &:hover{ @@ -72,8 +72,8 @@ } // Outlined - &.lookOutlined__201d5{ - &.colorBrand__201d5{ // eg. Request Data + &._201d5e8a3c09670a-lookOutlined{ + &._201d5e8a3c09670a-colorBrand{ // eg. Request Data border-color: $ControlStrokeColorDefault; color: $TextFillColorPrimary; &:hover{ @@ -83,7 +83,7 @@ background-color: $ControlFillColorTertiary; } } - &.colorRed__201d5{ + &._201d5e8a3c09670a-colorRed{ border-color: $SystemFillColorCritical; color: $SystemFillColorCritical; &:hover{ @@ -98,9 +98,9 @@ } // Blank - &.lookBlank__201d5{ // eg. Add server 'back' buttons + &._201d5e8a3c09670a-lookBlank{ // eg. Add server 'back' buttons color: $TextFillColorPrimary; - &.backButton__78f69{ + &._78f6989168778e7c-backButton{ background-color: $ControlFillColorDefault; border-width: 1px; border-style: outset; @@ -116,7 +116,7 @@ } // Link button - &.lookLink__201d5{ // eg. Reveal email button + &._201d5e8a3c09670a-lookLink{ // eg. Reveal email button background-color: $ControlFillColorDefault; border-width: 1px; border-style: outset; @@ -124,7 +124,7 @@ color: $TextFillColorPrimary; &:hover{ background-color: $ControlFillColorSecondary; - .contents__201d5{ + ._201d5e8a3c09670a-contents{ background-image: none; } } @@ -149,14 +149,14 @@ // Time for redundancy! // New buttons // These appear on the My Account User Settings page -.theme-dark .button_a22cb0{ +.theme-dark .a22cb0c66246f5d3-button{ border-radius: 4px; span{ @include TypeBody; } // Primary - Blue - &.primary_a22cb0{ + &.a22cb0c66246f5d3-primary{ background-color: $AccentFillColorDefault; border-width: 1px; border-style: inset; @@ -170,7 +170,7 @@ } } // Secondary - Grey - &.secondary_a22cb0{ + &.a22cb0c66246f5d3-secondary{ background-color: $ControlFillColorDefault; border-width: 1px; border-style: outset; @@ -185,7 +185,7 @@ } // Primary critical - red - &.critical-primary_a22cb0{ + &.a22cb0c66246f5d3-critical-primary{ background-color: $SystemFillColorCriticalBackground; color: $SystemFillColorCritical; &:hover{ @@ -199,7 +199,7 @@ } // Secondary critical - red text, grey background - &.critical-secondary_a22cb0{ + &.a22cb0c66246f5d3-critical-secondary{ background-color: $ControlFillColorDefault; border-width: 1px; border-style: outset; diff --git a/src/modules/ui/_context_menu.scss b/src/modules/ui/_context_menu.scss index e05405e0..c44c1a6f 100644 --- a/src/modules/ui/_context_menu.scss +++ b/src/modules/ui/_context_menu.scss @@ -1,4 +1,4 @@ -.theme-dark .menu_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu{ min-width: 280px; background: $AcrylicBackgroundFillColorDefault; border: 1px solid $SurfaceStrokeColorDefault; @@ -17,19 +17,19 @@ border-radius: 8px; } - .scroller_c1e9c4{ + .c1e9c47c23f12ca3-scroller{ padding: 4px 8px; max-height: calc(100vh - 64px); } // Separators - .separator_c1e9c4{ + .c1e9c47c23f12ca3-separator{ margin: 10px 4px; border-bottom-color: $DividerStrokeColorDefault; } // Item - .item_c1e9c4{ + .c1e9c47c23f12ca3-item{ min-height: 34px; margin: 2px 0 2px -4px; padding: 4px 12px; @@ -37,14 +37,14 @@ @include TypeBody; color: $TextFillColorPrimary; transition: background-color $AnimationFadeInOut; - &.focused_c1e9c4{ + &.c1e9c47c23f12ca3-focused{ background-color: $SubtleFillColorSecondary; transition: background-color $AnimationFadeInOut; } - &.colorDanger_c1e9c4{ + &.c1e9c47c23f12ca3-colorDanger{ color: $SystemFillColorCritical; } - &.disabled_c1e9c4{ + &.c1e9c47c23f12ca3-disabled{ color: $TextFillColorDisabled; opacity: 1; } @@ -59,23 +59,23 @@ // Remove subtext on Spotify menu items &[id*="spotify"], &[id*="listen"]{ - .subtext_c1e9c4{ + .c1e9c47c23f12ca3-subtext{ display: none; } } // Remove left margin from 'Upload file' option - .optionName__77820{ + ._778207026e0e04d5-optionName{ margin: 0; } // Fix font size in upload menu - .optionLabel__77820{ + ._778207026e0e04d5-optionLabel{ @include TypeBody; } // Items with subtext - .subtext_c1e9c4{ + .c1e9c47c23f12ca3-subtext{ margin-top: 0; @include TypeCaption; color: $TextFillColorSecondary; @@ -86,26 +86,26 @@ // Remove Discord icons, unless it's a checkbox &:not([role="menuitemcheckbox"]):not([role="menuitemradio"]):not([id^="message-add-reaction"]){ - .icon_c1e9c4{ + .c1e9c47c23f12ca3-icon{ display: none; } } // Remove icons from upload/attach menu - .optionIcon__77820{ + ._778207026e0e04d5-optionIcon{ display: none; } } // Emoji items - .button_f563df{ + .f563df886a7377be-button{ width: 24px; height: 24px; background-color: transparent; - &.focused_f563df{ + &.f563df886a7377be-focused{ background-color: $SubtleFillColorSecondary; box-shadow: none; } - .icon_f563df{ + .f563df886a7377be-icon{ width: 18px; height: 18px; diff --git a/src/modules/ui/_form.scss b/src/modules/ui/_form.scss index 47ca8890..e5540234 100644 --- a/src/modules/ui/_form.scss +++ b/src/modules/ui/_form.scss @@ -3,11 +3,11 @@ background-color: $SystemFillColorAttentionBackground; border: 1px solid $CardStrokeColorDefault; border-radius: 4px; - .item__88a69{ + ._88a69141dd70013a-item{ margin-bottom: 0; border: 1px solid transparent; border-radius: 4px; - &.itemFilled__88a69{ + &._88a69141dd70013a-itemFilled{ background-color: transparent; } &[aria-checked=true]{ @@ -19,11 +19,11 @@ // Privacy & Safety // Remove coloured bars on left side - .radioBar__88a69{ + ._88a69141dd70013a-radioBar{ border: 0; } - .info__88a69{ + ._88a69141dd70013a-info{ grid-gap: 0; .text-md-medium_a84e09{ @include TypeBody; @@ -53,14 +53,14 @@ } // Toggle switch -.theme-dark .container__3f21e{ +.theme-dark ._3f21e80f8677ec40-container{ background-color: transparent !important; // Override inline border: 0; svg{ display: none; } } -.input__3f21e{ +._3f21e80f8677ec40-input{ width: 40px; height: 20px; margin: 0; @@ -140,8 +140,8 @@ } } // Checkbox (in context menu) -.theme-dark .menu_c1e9c4 .item_c1e9c4[role="menuitemcheckbox"]{ - .iconContainer_c1e9c4{ +.theme-dark .c1e9c47c23f12ca3-menu .c1e9c47c23f12ca3-item[role="menuitemcheckbox"]{ + .c1e9c47c23f12ca3-iconContainer{ width: 18px; height: 18px; position: relative; @@ -152,7 +152,7 @@ display: none; } } - &[aria-checked=true] .iconContainer_c1e9c4{ + &[aria-checked=true] .c1e9c47c23f12ca3-iconContainer{ background-color: $AccentTextFillColorPrimary; border-color: $AccentTextFillColorPrimary; color: $TextOnAccentFillColorPrimary; @@ -165,10 +165,10 @@ font-size: 16px; } } - &:hover .iconContainer_c1e9c4{ + &:hover .c1e9c47c23f12ca3-iconContainer{ background-color: $ControlAltFillColorTertiary; } - &[aria-checked=true]:hover .iconContainer_c1e9c4{ + &[aria-checked=true]:hover .c1e9c47c23f12ca3-iconContainer{ background-color: $AccentTextFillColorSecondary; } } @@ -178,8 +178,8 @@ .emojiButtonContainer__9b8f6{ right: 0; left: unset; - ~ .inputWrapper__0ed4f{ - .input__0ed4f{ + ~ ._0ed4fc708cdbac0d-inputWrapper{ + ._0ed4fc708cdbac0d-input{ padding-right: 40px; } } diff --git a/src/modules/ui/_input.scss b/src/modules/ui/_input.scss index 416bc38a..717bc830 100644 --- a/src/modules/ui/_input.scss +++ b/src/modules/ui/_input.scss @@ -1,11 +1,11 @@ -.theme-dark .title_ace4f5{ +.theme-dark .ace4f5a2d9b7fc28-title{ color: $TextFillColorPrimary; @include TypeBody; text-transform: none; } // NOTE: 2022-03-26 - hiddenDiv-2qTqSF is used in the credit card field. See #99 -.theme-dark .input__0ed4f:not(.hiddenDiv__8b579){ +.theme-dark ._0ed4fc708cdbac0d-input:not(._8b579725ff08eeaa-hiddenDiv){ height: 32px; background-color: $ControlFillColorDefault; border: 1px solid; @@ -35,22 +35,22 @@ } &.textarea_dde0a8, // eg. user popout note textarea - &.textArea__89a34{ // eg. channel MOTD textare + &._89a343a153c6f2ec-textArea{ // eg. channel MOTD textare padding: 4px 12px; } } // Create channel prefix .theme-dark .inputPrefix_b545d5{ top: 8px; - ~ .input__0ed4f{ + ~ ._0ed4fc708cdbac0d-input{ // TODO - 2022-06-08: Resolve this conflict - padding-left: 32px !important; // Conflicts with .theme-dark .input__0ed4f:not(.hiddenDiv-2qTqSF) + padding-left: 32px !important; // Conflicts with .theme-dark ._0ed4fc708cdbac0d-input:not(.hiddenDiv-2qTqSF) } } // Select .theme-dark{ - .select__3f413{ + .a16aea1526925c2c-select{ padding: 3px 8px 3px 12px; background-color: $ControlFillColorDefault; border: 1px solid $ControlStrokeColorDefault; @@ -61,10 +61,10 @@ } // Options popout - .popout__3f413{ + .a16aea1526925c2c-popout{ background: $SolidbackgroundFillColorQuarternary; border: 1px solid $SurfaceStrokeColorFlyout; - .option__3f413{ + .a16aea1526925c2c-option{ min-height: 32px; margin: 4px; padding: 8px; @@ -93,7 +93,7 @@ background-color: $SubtleFillColorSecondary; border-radius: 4px; } - .selectedIcon__3f413{ + .a16aea1526925c2c-selectedIcon{ display: none; } } @@ -102,12 +102,12 @@ } // Keybind -.theme-dark .container_f89b2c{ +.theme-dark .f89b2c40b824acaf-container{ height: 32px; background-color: $ControlFillColorDefault; border: 1px solid $ControlStrokeColorDefault; border-radius: 4px; - .button__201d5{ + ._201d5e8a3c09670a-button{ min-height: calc(32px - 6px); height: calc(32px - 6px); margin: 2px; @@ -115,20 +115,20 @@ } // Slider -.slider_a562c8{ - .bar_a562c8{ +.a562c840daab72a7-slider{ + .a562c840daab72a7-bar{ height: 3px; top: 10px; background-color: $ControlStrongStrokeColorDefault; border-radius: 2px; } - .barFill_a562c8{ + .a562c840daab72a7-barFill{ height: 3px; position: absolute; background-color: $AccentBase; border-radius: 2px; } - .grabber_a562c8{ + .a562c840daab72a7-grabber{ width: 18px; height: 18px; margin-top: -11px; @@ -148,11 +148,11 @@ border: 5px solid #454545; } } - &.hasMarks_a562c8{ - .bar_a562c8{ + &.a562c840daab72a7-hasMarks{ + .a562c840daab72a7-bar{ top: 34px; } - .grabber_a562c8{ + .a562c840daab72a7-grabber{ margin-top: 2px; } } @@ -160,7 +160,7 @@ // Text formatting toolbar // Highlight text in the chat box to open the formatting bar -.theme-dark .toolbar_bba883{ +.theme-dark .bba88350df28dff1-toolbar{ padding: 4px; background: $AcrylicBackgroundFillColorDefault; backdrop-filter: blur(10px); @@ -184,13 +184,13 @@ } &.active__05fbcF{ background-color: $AccentFillColorDefault; - .icon_bba883{ + .bba88350df28dff1-icon{ color: $TextOnAccentFillColorPrimary; } } .buttonInner__878f4, - .icon_bba883{ + .bba88350df28dff1-icon{ width: 16px; height: 16px; } @@ -199,7 +199,7 @@ } // Copy box -.copyInput_fffc15{ +.fffc15720e237bf1-copyInput{ height: 42px; margin-bottom: 8px; background-color: $ControlFillColorDefault; diff --git a/src/modules/ui/_scrollbar.scss b/src/modules/ui/_scrollbar.scss index e898cc1e..e396420e 100644 --- a/src/modules/ui/_scrollbar.scss +++ b/src/modules/ui/_scrollbar.scss @@ -1,6 +1,6 @@ // Channels, members, settings nav -.theme-dark .thin_d125d2, // Settings nav -.theme-dark .thin__99f8c{ // Channels +.theme-dark .d125d22cdfd32cfe-thin, // Settings nav +.theme-dark ._99f8cc7ad4790ce9-thin{ // Channels &::-webkit-scrollbar{ width: 6px; } @@ -10,7 +10,7 @@ } // Chat -.theme-dark .auto_d125d2{ +.theme-dark .d125d22cdfd32cfe-auto{ &::-webkit-scrollbar{ width: 12px; } @@ -26,14 +26,14 @@ } // Giphy/Tenor search popout -.theme-dark .scrollbarGhostHairline__506b3{ +.theme-dark ._506b39a96c2f8884-scrollbarGhostHairline{ &::-webkit-scrollbar-thumb{ background-color: $ControlStrongFillColorDefault; } } // Chatbox -.theme-dark .scrollableContainer__74017{ +.theme-dark ._740174f3d6a2c8fe-scrollableContainer{ &::-webkit-scrollbar{ width: 6px; } diff --git a/src/modules/ui/_titlebar.scss b/src/modules/ui/_titlebar.scss index a4d9c475..06dab698 100644 --- a/src/modules/ui/_titlebar.scss +++ b/src/modules/ui/_titlebar.scss @@ -1,12 +1,12 @@ -.theme-dark .bar_c38106{ - .title_c38106{ +.theme-dark .c38106a3f0c3ca76-bar{ + .c38106a3f0c3ca76-title{ justify-content: flex-start; left: 8px; &::before{ content: "Discord"; color: $TextFillColorSecondary; } - .title_edbb22{ + .edbb22df99c39831-title{ display: none; } } @@ -14,14 +14,14 @@ // Remove help button - .trailing_c38106{ + .c38106a3f0c3ca76-trailing{ gap: 0; - a.anchor_edefb8{ + a.edefb8e22d63c542-anchor{ display: none; } } // Inbox - .clickable_c99c29{ + .c99c29809d200a61-clickable{ width: 46px; height: 32px; margin: 0; @@ -42,20 +42,20 @@ } // window controls - .winButtons_c38106{ + .c38106a3f0c3ca76-winButtons{ gap: 0; - &.winButtonsWithDivider_c38106::before{ + &.c38106a3f0c3ca76-winButtonsWithDivider::before{ content: unset; } } - .winButton_c38106{ + .c38106a3f0c3ca76-winButton{ width: 46px; &:hover{ background-color: $ControlFillColorSecondary; } // Close button - &.winButtonClose_c38106{ + &.c38106a3f0c3ca76-winButtonClose{ &:hover{ background-color: #C42B1C; } @@ -70,13 +70,13 @@ // Change titlebar name and controls colour when app is focused html.theme-dark.app-focused{ - .title_c38106::before{ + .c38106a3f0c3ca76-title::before{ color: $TextFillColorPrimary; } - .winButton_c38106{ + .c38106a3f0c3ca76-winButton{ color: $TextFillColorPrimary; } - .clickable_c99c29::before{ + .c99c29809d200a61-clickable::before{ color: $TextFillColorPrimary; } } diff --git a/src/modules/ui/_tooltip.scss b/src/modules/ui/_tooltip.scss index f102db03..baa31ba6 100644 --- a/src/modules/ui/_tooltip.scss +++ b/src/modules/ui/_tooltip.scss @@ -1,4 +1,4 @@ -.theme-dark .tooltip_c36707{ +.theme-dark .c36707910f687430-tooltip{ padding: 8px 12px; background: $AcrylicBackgroundFillColorBase; border: 1px solid $SurfaceStrokeColorFlyout; @@ -7,10 +7,10 @@ @include Elevation16; // box-sizing: unset; @include TypeBody; - .tooltipPointer_c36707{ + .c36707910f687430-tooltipPointer{ display: none; } - .tooltipContent_c36707{ + .c36707910f687430-tooltipContent{ padding: 0; } } diff --git a/src/modules/vencord/_settings.scss b/src/modules/vencord/_settings.scss index 1bcea2b6..0402b065 100644 --- a/src/modules/vencord/_settings.scss +++ b/src/modules/vencord/_settings.scss @@ -23,7 +23,7 @@ background-color: $SystemFillColorNeutralBackground; border: 1px solid $ControlStrokeColorDefault; // Highlight enabled cards - &:has(.input__3f21e[checked]){ + &:has(._3f21e80f8677ec40-input[checked]){ background-color: $SystemFillColorSuccesBackground; } &:hover{ diff --git a/src/modules/vencord/plugins/_ReadAllNotificationsButton.scss b/src/modules/vencord/plugins/_ReadAllNotificationsButton.scss index f799b2d0..9937c6f7 100644 --- a/src/modules/vencord/plugins/_ReadAllNotificationsButton.scss +++ b/src/modules/vencord/plugins/_ReadAllNotificationsButton.scss @@ -1,8 +1,8 @@ .theme-dark{ - .vc-ranb-button.button__201d5{ + .vc-ranb-button._201d5e8a3c09670a-button{ min-width: unset; width: 60px; - .contents__201d5{ + ._201d5e8a3c09670a-contents{ padding: 2px; background-color: $ControlFillColorDefault; border-radius: 4px;