From 0de354ac6d0f60cbf3bdb1a13a69d8471a395b84 Mon Sep 17 00:00:00 2001 From: Get Date: Tue, 5 Apr 2022 22:14:24 +0700 Subject: [PATCH] Make OS version more flexible (use older targeting platform and allow minimum to Windows 7) CSS fix and improvements --- Mica Discord/MainWindow.xaml.cs | 256 ++---------------- Mica Discord/Mica Discord.csproj | 6 +- Mica Discord/Mica Discord.csproj.user | 2 +- .../PublishProfiles/ClickOnceProfile.pubxml | 8 +- .../ClickOnceProfile.pubxml.user | 2 +- Mica Discord/The CSS.css | 253 +++++++++++++++++ 6 files changed, 293 insertions(+), 234 deletions(-) create mode 100644 Mica Discord/The CSS.css diff --git a/Mica Discord/MainWindow.xaml.cs b/Mica Discord/MainWindow.xaml.cs index c98c1b9..e1da7a1 100644 --- a/Mica Discord/MainWindow.xaml.cs +++ b/Mica Discord/MainWindow.xaml.cs @@ -9,6 +9,7 @@ using System.Windows.Shell; using Windows.UI.ViewManagement; using AccentColorTypes = CustomPInvoke.UxTheme.AccentColorTypes; +using System.IO; //using WindowMessage = PInvoke.User32.WindowMessage; namespace MicaDiscord; @@ -17,8 +18,15 @@ public partial class MainWindow : Window { static UISettings UISettings { get; } = new(); static bool IsExcessiveAccentColorEnabled => Settings.Default.ExcessiveAccentColor; + static string DefinedCSS +#if DEBUG + => File.ReadAllText("../../../The CSS.css");// Read File Every time +#else + = File.ReadAllText("./The CSS.css"); // Read only once +#endif const string Radius = "0.5rem"; public static readonly bool NotSupportedBuild = Environment.OSVersion.Version.Build < 22523; + public static readonly bool SupportAccent = Environment.OSVersion.Version.Major >= 10; bool DiscordEffectApplied = false; bool _Dark = true; bool Dark @@ -141,11 +149,18 @@ static bool IsDarkBackground(Windows.UI.Color color) var Light = (await WebView.CoreWebView2.ExecuteScriptAsync("document.getElementsByTagName('html')[0].classList.contains('theme-light')")) == "true"; if (Dark is false && Light is false) Dark = this.Dark; // Don't change - var PrimaryColor = UISettings.GetColorValue(UIColorType.AccentLight3);//CustomPInvoke.GetAccentColor(Dark ? AccentColorTypes.ImmersiveSaturatedHighlight : AccentColorTypes.ImmersiveSaturatedSelectionBackground); - var DisabledColor = UISettings.GetColorValue(UIColorType.AccentLight2);//CustomPInvoke.GetAccentColor(AccentColorTypes.ImmersiveSaturatedCommandRowDisabled); - DisabledColor.A /= 2; - var HoverColor = UISettings.GetColorValue(UIColorType.AccentLight2); - var Accent = UISettings.GetColorValue(UIColorType.Accent); + Windows.UI.Color PrimaryColor = default, DisabledColor = default, HoverColor = default, Accent = default; + if (SupportAccent) + { +#pragma warning disable CA1416 // Validate platform compatibility + PrimaryColor = UISettings.GetColorValue(UIColorType.AccentLight3);//CustomPInvoke.GetAccentColor(Dark ? AccentColorTypes.ImmersiveSaturatedHighlight : AccentColorTypes.ImmersiveSaturatedSelectionBackground); + DisabledColor = UISettings.GetColorValue(UIColorType.AccentLight2);//CustomPInvoke.GetAccentColor(AccentColorTypes.ImmersiveSaturatedCommandRowDisabled); + DisabledColor.A /= 2; + HoverColor = UISettings.GetColorValue(UIColorType.AccentLight2); + Accent = UISettings.GetColorValue(UIColorType.Accent); +#pragma warning restore CA1416 // Validate platform compatibility + } + if (IsExcessiveAccentColorEnabled) (Resources["Color"] as SolidColorBrush ?? throw new NullReferenceException()).Color = System.Windows.Media.Color.FromArgb(PrimaryColor.A, PrimaryColor.R, PrimaryColor.G, PrimaryColor.B); /* @@ -178,11 +193,13 @@ static double GetHue(int red, int green, int blue) var regcgray = LightColorCSS ? 50 : 200; var floating = Dark ? 0 : 255; var ErrorAccentColor = CustomPInvoke.UxTheme.GetAccentColor(AccentColorTypes.ImmersiveSaturatedInlineErrorText); - await WebView.CoreWebView2.ExecuteScriptAsync($@" + await WebView.CoreWebView2.ExecuteScriptAsync(($@" (function () {{ let s = document.createElement('style'); s.innerHTML = ` -* {{ /* System Color */ +* {{ /* System Color */"+ +(SupportAccent ? +@$" --sys-accent-prop: {Accent.R}, {Accent.G}, {Accent.B}; --sys-accent-color: rgba({Accent.R}, {Accent.G}, {Accent.B}, {Accent.A}); --sys-accent-light-3-color: rgba({PrimaryColor.R}, {PrimaryColor.G}, {PrimaryColor.B}, {PrimaryColor.A}); @@ -190,43 +207,13 @@ await WebView.CoreWebView2.ExecuteScriptAsync($@" --sys-accent-disabled-color-half: rgba({DisabledColor.R}, {DisabledColor.G}, {DisabledColor.B}, {DisabledColor.A / 2}); --sys-error-accent-color: rgba({ErrorAccentColor.R}, {ErrorAccentColor.G}, {ErrorAccentColor.B}, {ErrorAccentColor.A}); --sys-hover-accent-color: rgba({HoverColor.R}, {HoverColor.G}, {HoverColor.B}, {HoverColor.A}); +" : "") + $@" --sys-light-color-bg: {(LightColorCSS ? 1 : 0)}; --sys-layering-strength: {invc}; --sys-floating-strength: {floating}; - --sys-non-tran-bg-gray-strength: {regcgray}; + --sys-normal-strength: {regcgray}; --sys-border-radius: {Radius}; }} -* {{ /* Predefined Theme Color */ - --theme-layering-prop: var(--sys-layering-strength), var(--sys-layering-strength), var(--sys-layering-strength); - --theme-layering-solid-color: rgb(--theme-layering-prop); - --theme-bg-layering-double: rgba(var(--theme-layering-prop),0.1); - --theme-bg-layering: rgba(var(--theme-layering-prop),0.05); - --theme-bg-layering-half: rgba(var(--theme-layering-prop),0.025); - --theme-floating-prop: var(--sys-floating-strength), var(--sys-floating-strength), var(--sys-floating-strength); - --theme-bg-floating: rgba(var(--theme-floating-prop),0.75); - --theme-scrollbar-color: rgba(var(--theme-layering-prop),0.25); -}} -* {{ - --background-primary: var(--theme-bg-layering); - --background-secondary: transparent; - --background-secondary-alt: rgba(var(--theme-layering-prop),0.075); - --background-tertiary: transparent; - --background-message-hover: rgba(var(--theme-layering-prop),0.07); - --background-floating: var(--theme-bg-floating); - - --activity-card-background: var(--theme-bg-layering); - --deprecated-store-bg: var(--background-primary); - --channeltextarea-background: var(--theme-bg-layering); - --input-background: var(--theme-bg-layering); - --scrollbar-auto-track: transparent; - --scrollbar-thin-track: #0000; - --scrollbar-thin-thumb: --theme-scrollbar-color; - --scrollbar-auto-thumb: --theme-scrollbar-color; - --background-modifier-hover: var(--theme-bg-layering-half); - --background-modifier-selected: var(--theme-bg-layering); - --background-mentioned-hover: hsla(38,calc(var(--saturation-factor, 1)*95.7%),54.1%,calc(0.08 + var(--sys-light-color-bg) * 0.1)); - --text-link: var(--sys-accent-light-3-color); -}} * {{ {( IsExcessiveAccentColorEnabled ? @" @@ -240,196 +227,11 @@ await WebView.CoreWebView2.ExecuteScriptAsync($@" )} }} -* {{ - --brand-experiment-100: var(--sys-accent-color); - --brand-experiment-130: var(--sys-accent-color); - --brand-experiment-160: var(--sys-accent-color); - --brand-experiment-200: var(--sys-accent-color); - --brand-experiment-230: var(--sys-accent-color); - --brand-experiment-260: var(--sys-accent-color); - --brand-experiment-300: var(--sys-accent-color); - --brand-experiment-330: var(--sys-accent-color); - --brand-experiment-360: var(--sys-accent-color); - --brand-experiment-400: var(--sys-accent-color); - --brand-experiment-430: var(--sys-accent-color); - --brand-experiment-460: var(--sys-accent-color); - --brand-experiment: var(--sys-accent-color); - --brand-experiment-500: var(--sys-accent-color); - --brand-experiment-530: var(--sys-accent-color); - --brand-experiment-560: var(--sys-accent-color); - --brand-experiment-600: var(--sys-accent-color); - --brand-experiment-630: var(--sys-accent-color); - --brand-experiment-660: var(--sys-accent-color); - --brand-experiment-700: var(--sys-accent-color); - --brand-experiment-730: var(--sys-accent-color); - --brand-experiment-760: var(--sys-accent-color); - --brand-experiment-800: var(--sys-accent-color); - --brand-experiment-830: var(--sys-accent-color); - --brand-experiment-860: var(--sys-accent-color); - --brand-experiment-900: var(--sys-accent-color); - --brand-experiment-05a: rgba(var(--sys-accent-prop),0.05); - --brand-experiment-10a: rgba(var(--sys-accent-prop),0.1); - --brand-experiment-15a: rgba(var(--sys-accent-prop),0.15); - --brand-experiment-20a: rgba(var(--sys-accent-prop),0.2); - --brand-experiment-25a: rgba(var(--sys-accent-prop),0.25); - --brand-experiment-30a: rgba(var(--sys-accent-prop),0.3); - --brand-experiment-35a: rgba(var(--sys-accent-prop),0.35); - --brand-experiment-40a: rgba(var(--sys-accent-prop),0.4); - --brand-experiment-45a: rgba(var(--sys-accent-prop),0.45); - --brand-experiment-50a: rgba(var(--sys-accent-prop),0.5); - --brand-experiment-55a: rgba(var(--sys-accent-prop),0.55); - --brand-experiment-60a: rgba(var(--sys-accent-prop),0.6); - --brand-experiment-65a: rgba(var(--sys-accent-prop),0.65); - --brand-experiment-70a: rgba(var(--sys-accent-prop),0.7); - --brand-experiment-75a: rgba(var(--sys-accent-prop),0.75); - --brand-experiment-80a: rgba(var(--sys-accent-prop),0.8); - --brand-experiment-85a: rgba(var(--sys-accent-prop),0.85); - --brand-experiment-90a: rgba(var(--sys-accent-prop),0.9); - --brand-experiment-95a: rgba(var(--sys-accent-prop),0.95); -}} -.appMount-2yBXZl /* Main application */ -{{ - border-radius: var(--sys-border-radius); -}} -.content-3spvdd {{ - --background-primary: rgb(var(--sys-non-tran-bg-gray-strength), var(--sys-non-tran-bg-gray-strength), var(--sys-non-tran-bg-gray-strength)); -}} -code, article {{ - --background-secondary: var(--theme-bg-layering); -}} -.lookFilled-yCfaCM.colorPrimary-2AuQVo, .lookFilled-yCfaCM.colorGrey-2iAG-B {{ - background-color: --theme-bg-layering !important; -}} -.content-2a4AW9 {{ - --background-secondary: var(--theme-bg-layering-half); - border-color: black; -}} - -.form-3gdLxP {{ - margin-top: 0px !important; - padding-top: 16px !important; -}} -.form-3gdLxP:before {{ - width: 0px !important; - height: 0px !important; -}} -.scroller-kQBbkU::-webkit-scrollbar-track {{ - margin-bottom: 0px !important; -}} -.scrollerSpacer-3AqkT9 {{ - display: none; -}} -.content-2a4AW9, .members-3WRCEx, .membersWrap-3NUR2t {{ - min-height: 100%; - padding: 0px !important; -}} -.content-FDHp32 a {{ - color: var(--text-link) !important; -}} -.chat-2ZfjoI, .container-2cd8Mz, .container-36u7Lw, .applicationStore-2nk7Lo {{ - border-radius: var(--sys-border-radius) 0px 0px 0px; -}} -.chatContent-3KubbW {{ - background-color: var(--theme-bg-layering-half) !important; - border-color: black; -}} -.container-2cd8Mz {{ - background-color: --theme-bg-layering !important; -}} - -.callContainer-HtHELf {{ - background-color: transparent; -}} - -.panels-3wFtMD {{ - border-radius: var(--sys-border-radius) 0px 0px 0px; -}} -.message-2CShn3 {{ - border-radius: var(--sys-border-radius); -}} -.sidebar-1tnWFu {{ -border-radius: var(--sys-border-radius) var(--sys-border-radius) 0px 0px; -}} -.popout-TdhJ6Z {{ - --background-tertiary: var(--theme-bg-floating); -}} -.popout-1KHNAq {{ - --background-secondary: var(--theme-bg-floating); -}} -.lookFilled-1GseHa.select-1Ia3hD {{ - --background-secondary: var(--theme-bg-layering); - --background-tertiary: rgba(var(--theme-layering-prop),0.75); -}} -.unread-36eUEm, .item-2LIpTv {{ - border-radius: 4px; -}} - -.item-2LIpTv {{ - margin: 0px 0px 0px 2px; - width: 4px; - background: var(--sys-accent-light-3-color); -}} -.gradientContainer-phMG8d /* In-Call Gradient effect on top and bottom */ -{{ - height: 40px; - background-image: linear-gradient(--theme-bg-layering,transparent); -}} -.unread-36eUEm /* Text Channel Unread */ -{{ - display: none; - background-color: var(--sys-accent-light-3-color); -}} -.wrapper-NhbLHG::before /* Text Channel (before) */ -{{ - content: """"; - position: absolute; - height: 0px; - width: 4px; - border-radius: 4px; - top: 50%; - left: 0; - margin-top: 0px; - background: var(--sys-accent-light-3-color); - transition: height 0.1s linear, margin-top 0.1s linear; -}} -.wrapper-NhbLHG:hover::before /* Text Channel (Hover, before) */ -{{ - height: 14px; - margin-top: -7px; -}} -.modeUnread-3Cxepe::before /* Text Channel Unread (before) */ -{{ - height: 8px; - margin-top: -4px; -}} -.modeSelected-3DmyhH::before /* Text Channel Selected */ -{{ - height: 18px !important; - margin-top: -9px !important; -}} -.modeUnread-3Cxepe .channelName-3KPsGw {{ - font-weight: 600; -}} -.hljs-comment {{ - color: seagreen !important; -}} -[id*=""popout""] /* Thread Menu and Pinned Message */ -{{ - background-color: var(--background-floating); - border-radius: var(--sys-border-radius); -}} -.outer-2JOHae.active-1W_Gl9, .outer-2JOHae.interactive-2zD88a:hover /* The card in Home -> Friend page background */ -{{ - background-color: var(--theme-bg-layering-double) !important; -}} -.inset-SbsSFp /* The card in Home -> Friend page -> Inner Card */ -{{ - background-color: var(--theme-bg-layering) !important; -}} +" + DefinedCSS + @" `.trim(); document.head.appendChild(s); -}})() -".Trim()); +})() +").Trim()); await WebView.CoreWebView2.ExecuteScriptAsync($@" (function () {{ diff --git a/Mica Discord/Mica Discord.csproj b/Mica Discord/Mica Discord.csproj index c3bb011..d9f95b6 100644 --- a/Mica Discord/Mica Discord.csproj +++ b/Mica Discord/Mica Discord.csproj @@ -2,7 +2,7 @@ WinExe - net6.0-windows10.0.22000.0 + net6.0-windows10.0.19041.0 enable true MicaDiscord @@ -12,6 +12,7 @@ Mica Discord.png Mica Discord.ico true + 7.0 @@ -84,6 +85,9 @@ SettingsSingleFileGenerator MicaDiscord + + Always + diff --git a/Mica Discord/Mica Discord.csproj.user b/Mica Discord/Mica Discord.csproj.user index 68a77b0..6740925 100644 --- a/Mica Discord/Mica Discord.csproj.user +++ b/Mica Discord/Mica Discord.csproj.user @@ -1,7 +1,7 @@  - <_LastSelectedProfileId>C:\Users\Get\source\repos\Mica Discord\Mica Discord\Properties\PublishProfiles\ClickOnceProfile.pubxml + <_LastSelectedProfileId>D:\Programming\VS\Mica Discord\Mica Discord\Properties\PublishProfiles\ClickOnceProfile.pubxml diff --git a/Mica Discord/Properties/PublishProfiles/ClickOnceProfile.pubxml b/Mica Discord/Properties/PublishProfiles/ClickOnceProfile.pubxml index e87bb68..76adb2f 100644 --- a/Mica Discord/Properties/PublishProfiles/ClickOnceProfile.pubxml +++ b/Mica Discord/Properties/PublishProfiles/ClickOnceProfile.pubxml @@ -4,7 +4,7 @@ https://go.microsoft.com/fwlink/?LinkID=208121. --> - 1 + 2 1.8.0.* True Release @@ -16,7 +16,7 @@ https://go.microsoft.com/fwlink/?LinkID=208121. False True False - Any CPU + ARM bin\publish\ bin\publish\ ClickOnce @@ -25,7 +25,7 @@ https://go.microsoft.com/fwlink/?LinkID=208121. False (none) False - net6.0-windows10.0.22000.0 + net6.0-windows10.0.19041.0 False Foreground False @@ -33,7 +33,7 @@ https://go.microsoft.com/fwlink/?LinkID=208121. - true + True .NET Desktop Runtime 6.0.3 (x64) diff --git a/Mica Discord/Properties/PublishProfiles/ClickOnceProfile.pubxml.user b/Mica Discord/Properties/PublishProfiles/ClickOnceProfile.pubxml.user index 95cb2a1..534e9f3 100644 --- a/Mica Discord/Properties/PublishProfiles/ClickOnceProfile.pubxml.user +++ b/Mica Discord/Properties/PublishProfiles/ClickOnceProfile.pubxml.user @@ -4,6 +4,6 @@ https://go.microsoft.com/fwlink/?LinkID=208121. --> - True|2022-04-05T08:23:33.7894101Z; + True|2022-04-05T15:08:46.6174154Z; \ No newline at end of file diff --git a/Mica Discord/The CSS.css b/Mica Discord/The CSS.css new file mode 100644 index 0000000..bc71495 --- /dev/null +++ b/Mica Discord/The CSS.css @@ -0,0 +1,253 @@ +/* System Colors +--sys-accent-prop +--sys-accent-color +--sys-accent-light-3-color +--sys-accent-disabled-color +--sys-accent-disabled-color-half +--sys-error-accent-color +--sys-hover-accent-color +--sys-light-color-bg +--sys-layering-strength +--sys-floating-strength +--sys-normal-strength +--sys-border-radius +*/ +* { /* Predefined Theme Color */ + --theme-layering-prop: var(--sys-layering-strength), var(--sys-layering-strength), var(--sys-layering-strength); + --theme-layering-solid-color: rgb(var(--theme-layering-prop)); + --theme-bg-layering-double: rgba(var(--theme-layering-prop),0.1); + --theme-bg-layering: rgba(var(--theme-layering-prop),0.05); + --theme-bg-layering-half: rgba(var(--theme-layering-prop),0.025); + --theme-floating-prop: var(--sys-floating-strength), var(--sys-floating-strength), var(--sys-floating-strength); + --theme-bg-floating: rgba(var(--theme-floating-prop),0.75); + --theme-scrollbar-color: rgba(var(--theme-layering-prop),0.25); + --theme-normal-prop: var(--sys-normal-strength),var(--sys-normal-strength),var(--sys-normal-strength); + --theme-border-color: rgba(var(--theme-layering-prop),0.5); +} +* { + --background-primary: var(--theme-bg-layering); + --background-secondary: transparent; + --background-secondary-alt: rgba(var(--theme-layering-prop),0.075); + --background-tertiary: transparent; + --background-message-hover: rgba(var(--theme-layering-prop),0.07); + --background-floating: var(--theme-bg-floating); + + --activity-card-background: var(--theme-bg-layering); + --deprecated-store-bg: var(--background-primary); + --channeltextarea-background: var(--theme-bg-layering); + --input-background: var(--theme-bg-layering); + --scrollbar-auto-track: transparent; + --scrollbar-thin-track: transparent; + --scrollbar-thin-thumb: var(--theme-scrollbar-color); + --scrollbar-auto-thumb: var(--theme-scrollbar-color); + --background-modifier-hover: var(--theme-bg-layering-half); + --background-modifier-selected: var(--theme-bg-layering); + --background-mentioned-hover: hsla(38,calc(var(--saturation-factor, 1)*95.7%),54.1%,calc(0.08 + var(--sys-light-color-bg) * 0.1)); + --text-link: var(--sys-accent-light-3-color); +} +* { + --brand-experiment-100: var(--sys-accent-color); + --brand-experiment-130: var(--sys-accent-color); + --brand-experiment-160: var(--sys-accent-color); + --brand-experiment-200: var(--sys-accent-color); + --brand-experiment-230: var(--sys-accent-color); + --brand-experiment-260: var(--sys-accent-color); + --brand-experiment-300: var(--sys-accent-color); + --brand-experiment-330: var(--sys-accent-color); + --brand-experiment-360: var(--sys-accent-color); + --brand-experiment-400: var(--sys-accent-color); + --brand-experiment-430: var(--sys-accent-color); + --brand-experiment-460: var(--sys-accent-color); + --brand-experiment: var(--sys-accent-color); + --brand-experiment-500: var(--sys-accent-color); + --brand-experiment-530: var(--sys-accent-color); + --brand-experiment-560: var(--sys-accent-color); + --brand-experiment-600: var(--sys-accent-color); + --brand-experiment-630: var(--sys-accent-color); + --brand-experiment-660: var(--sys-accent-color); + --brand-experiment-700: var(--sys-accent-color); + --brand-experiment-730: var(--sys-accent-color); + --brand-experiment-760: var(--sys-accent-color); + --brand-experiment-800: var(--sys-accent-color); + --brand-experiment-830: var(--sys-accent-color); + --brand-experiment-860: var(--sys-accent-color); + --brand-experiment-900: var(--sys-accent-color); + --brand-experiment-05a: rgba(var(--sys-accent-prop),0.05); + --brand-experiment-10a: rgba(var(--sys-accent-prop),0.1); + --brand-experiment-15a: rgba(var(--sys-accent-prop),0.15); + --brand-experiment-20a: rgba(var(--sys-accent-prop),0.2); + --brand-experiment-25a: rgba(var(--sys-accent-prop),0.25); + --brand-experiment-30a: rgba(var(--sys-accent-prop),0.3); + --brand-experiment-35a: rgba(var(--sys-accent-prop),0.35); + --brand-experiment-40a: rgba(var(--sys-accent-prop),0.4); + --brand-experiment-45a: rgba(var(--sys-accent-prop),0.45); + --brand-experiment-50a: rgba(var(--sys-accent-prop),0.5); + --brand-experiment-55a: rgba(var(--sys-accent-prop),0.55); + --brand-experiment-60a: rgba(var(--sys-accent-prop),0.6); + --brand-experiment-65a: rgba(var(--sys-accent-prop),0.65); + --brand-experiment-70a: rgba(var(--sys-accent-prop),0.7); + --brand-experiment-75a: rgba(var(--sys-accent-prop),0.75); + --brand-experiment-80a: rgba(var(--sys-accent-prop),0.8); + --brand-experiment-85a: rgba(var(--sys-accent-prop),0.85); + --brand-experiment-90a: rgba(var(--sys-accent-prop),0.9); + --brand-experiment-95a: rgba(var(--sys-accent-prop),0.95); +} +.appMount-2yBXZl /* Main application */ +{ + border-radius: var(--sys-border-radius); +} +.content-3spvdd /* Bubble saying the date */ +{ + --background-primary: rgb(var(--theme-normal-prop)); +} +code, /* Code blocks */ +article, /* Embeded */ +*[class*="lookFilled"], /* Any spcial controls in chat or somewhere else (combobox, etc.) */ +.container-2cd8Mz, +.inset-SbsSFp /* The card in Home -> Friend page -> Inner Card */ +{ + background-color: var(--theme-bg-layering) !important; +} +.chatContent-3KubbW, /* The chat messages content */ +div[aria-label="Members"] /* Members pane on the right of the chat */ +{ + background-color: var(--theme-bg-layering-half); +} +*[class*="lookFilled"]:hover /* Any spcial controls in chat or somewhere else (combobox, etc.) but hover */ +{ + border-color: var(--theme-border-color) !important; +} +/* [Typing message box: What Discord does with it] + +Have a textbox without top margin + +Instead, if we scroll down to the bottom, then there is the padding in the chat messages instead. + +No, I don't want that since it will be hard to style later. +*/ +.form-3gdLxP /* Typing message box */ +{ + margin-top: 0px !important; + padding-top: 16px !important; +} +.form-3gdLxP:before /* Typing message box */ +{ + width: 0px !important; + height: 0px !important; +} +.scroller-kQBbkU::-webkit-scrollbar-track /* Main scroll bar */ +{ + margin-bottom: 0px !important; +} +.scrollerSpacer-3AqkT9 /* The space reserved when scrolling the chat messages to the bottom. It's no longer needed since we add padding to the textbox instead. */ +{ + display: none; +} +/* End of [Typing message box: What Discord does with it] */ +.content-2a4AW9, .members-3WRCEx, .membersWrap-3NUR2t { + min-height: 100%; + padding: 0px !important; +} +.content-FDHp32 a /* inside the popup box when you click the text channel description */ +{ + color: var(--text-link) !important; +} +.chat-2ZfjoI, .container-2cd8Mz, .container-36u7Lw, .applicationStore-2nk7Lo { + border-radius: var(--sys-border-radius) 0px 0px 0px; +} + +.callContainer-HtHELf { + background-color: transparent; +} + +.panels-3wFtMD { + border-radius: var(--sys-border-radius) 0px 0px 0px; +} +.message-2CShn3 { + border-radius: var(--sys-border-radius); +} +.sidebar-1tnWFu { +border-radius: var(--sys-border-radius) var(--sys-border-radius) 0px 0px; +} + +.item-2LIpTv /* Server Unread tag in front */ +{ + margin: 0px 0px 0px 2px; + width: 4px; + background: var(--sys-accent-light-3-color); + border-radius: 4px; +} +.gradientContainer-phMG8d /* In-Call Gradient effect on top and bottom */ +{ + height: 40px; + background-image: linear-gradient(var(--theme-bg-layering),transparent); +} +.unread-36eUEm /* Text Channel Unread tag in front */ +{ + display: none; + background-color: var(--sys-accent-light-3-color); +} +.wrapper-NhbLHG::before /* Text Channel (before) */ +{ + content: ""; + position: absolute; + height: 0px; + width: 4px; + border-radius: 4px; + top: 50%; + left: 0; + margin-top: 0px; + background: var(--sys-accent-light-3-color); + transition: height 0.1s linear, margin-top 0.1s linear; +} +.wrapper-NhbLHG:hover::before /* Text Channel (Hover, before) */ +{ + height: 14px; + margin-top: -7px; +} +.modeUnread-3Cxepe::before /* Text Channel Unread (before) */ +{ + height: 8px; + margin-top: -4px; +} +.modeSelected-3DmyhH::before /* Text Channel Selected */ +{ + height: 18px !important; + margin-top: -9px !important; +} +.modeUnread-3Cxepe .channelName-3KPsGw /* Channel name that is unread */ +{ + font-weight: 600; +} +.hljs-comment { + color: seagreen !important; +} +*[class*="popout"] /* Popout (Class) */ +{ + border-width: 1px; + border-color: var(--theme-border-color); + background-color: rgba(var(--theme-normal-prop),0.75); +} +[id*="popout"] /* Thread Menu and Pinned Message */ +{ + background-color: var(--theme-bg-floating); + border-radius: var(--sys-border-radius); +} +.outer-2JOHae.active-1W_Gl9, +.outer-2JOHae.interactive-2zD88a:hover /* The card in Home -> Friend page background */ +{ + background-color: var(--theme-bg-layering-double) !important; +} +.container-2nx-BQ /* Settings Toggle */ +{ + background-color: hsl(218, calc(var(--saturation-factor, 1) * 4.6%), 46.9%) !important; + transition: background-color linear; +} +.container-2nx-BQ[class*="checked"] /* Settings Toggle */ +{ + background-color: var(--sys-accent-color) !important; +} +.divider-2rZFJK /* Unread Message Divider (NEW! tag) */ +{ + --divider-color: var(--sys-accent-color); /* Intentional setting variable instead of color */ +} \ No newline at end of file