Frostyy22

Steam BG

Apr 19th, 2024
7
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 463.35 KB | None | 0 0
  1. @import url(https://maendisease.github.io/BetterDiscordStuff/css/ProfileBannerSkins.css);
  2. @import url(https://maendisease.github.io/BetterDiscordStuff/css/bdAddonMini.css);
  3. @import url(https://maendisease.github.io/BetterDiscordStuff/css/bearableInbox.css);
  4. @import url(https://discordstyles.github.io/RadialStatus/dist/RadialStatus.css);
  5. @import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/SettingsModal/SettingsModal.css);
  6. @import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/_res/SettingsIcons.css);
  7. @import url(https://discordstyles.github.io/HorizontalServerList/resizablelist.css);
  8. :root {
  9. --hue-shift: 0;
  10. --content-width: 940px;
  11. --message-width: 640px;
  12. --custom-font: "gg sans";
  13. --custom-font-code: monospace;
  14. }
  15.  
  16. :root {
  17. --accent-hue: calc(205 + var(--hue-shift));
  18. --accent-saturation: 100%;
  19. --accent-brightness: 55%;
  20. --app-gutter: 24px;
  21. --content-gutter: 16px;
  22. --content-inner-width: calc(var(--content-width) - 284px);
  23. --font-primary: var(--custom-font), "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  24. --font-display: var(--custom-font), "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  25. --font-code: var(--custom-font-code), monospace, Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  26. }
  27.  
  28. .theme-dark,
  29. .theme-light {
  30. --modal-background: radial-gradient(circle at top left, hsl(calc(var(--accent-hue) + 12) calc(var(--saturation-factor, 1)*10.8%) 32.5%/0.4) 0%, hsl(calc(var(--accent-hue) + 14) calc(var(--saturation-factor, 1)*10.2%) 32.7%/0) 60%), hsl(calc(var(--accent-hue) + 15) calc(var(--saturation-factor, 1)*10.8%) 16.3%);
  31. --text-muted: hsl(calc(var(--accent-hue) + 7) calc(var(--saturation-factor, 1)*6.9%) 57.5%);
  32. --header-secondary: hsl(calc(var(--accent-hue) + 1) calc(var(--saturation-factor, 1)*5.2%) 73.5%);
  33. }
  34.  
  35. .theme-dark {
  36. --titlebar-height: 36px;
  37. --store-sidebar-background: linear-gradient(to right, rgb(0 0 0/.2) 0%, rgb(0 0 0/.5) 100%);
  38. --code-background: hsl(calc(var(--accent-hue) - 2) calc(var(--saturation-factor, 1)*27.6%) 11.4%);
  39. --contextmenu-background: var(--background-accent);
  40. --contextmenu-shadow: 3px 3px 5px -3px #000;
  41. --contextmenu-text: hsl(calc(var(--accent-hue) - 5) calc(var(--saturation-factor, 1)*4.5%) 86.9%);
  42. --contextmenu-text-hover: hsl(calc(var(--accent-hue) + 17) calc(var(--saturation-factor, 1)*17.9%) 11%);
  43. --contextmenu-gradient:
  44. linear-gradient(90deg,
  45. hsl(var(--accent-hue) calc(var(--saturation-factor, 1)*100%) 56.5%/.1) 1.89%,
  46. hsl(calc(var(--accent-hue) + 35) calc(var(--saturation-factor, 1)*1%) 19.8%/0) 50%),
  47. linear-gradient(180deg,
  48. hsl(calc(var(--accent-hue) + 28) calc(var(--saturation-factor, 1)*4.9%) 35.9%) 11.6%,
  49. hsl(var(--accent-hue) calc(var(--saturation-factor, 1)*17.1%) 27.5%) 54.73%,
  50. hsl(calc(var(--accent-hue) + 27) calc(var(--saturation-factor, 1)*8.3%) 18.8%) 100%);
  51. --quote-color: hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*19.2%) 41.8%);
  52. --store-divider: linear-gradient(to right, hsl(calc(var(--accent-hue) - 4), calc(var(--saturation-factor, 1)*41.1%), 38.6%) 0%, transparent 100%);
  53. --text-linkHi: hsl(calc(var(--accent-hue) - 8) calc(var(--saturation-factor, 1)*88%) 70%);
  54. --text-linkHi-hover: hsl(calc(var(--accent-hue) - 8) calc(var(--saturation-factor, 1)*100%) 85%);
  55. --app-bg: hsl(213 35% 16%);
  56. --banner-lightblue: linear-gradient(135deg, hsl(calc(var(--accent-hue) - 10) calc(var(--saturation-factor, 1)*2%) 38.8%/.3) 0%, hsl(calc(var(--accent-hue) - 2) calc(var(--saturation-factor, 1)*100%) 94.3%/.3) 100%);
  57. --banner-lightblue-hover: hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*40.9%) 43.1%);
  58. --banner-lightblue-input: hsl(calc(var(--accent-hue) + 7) calc(var(--saturation-factor, 1)*21.8%) 17.1%);
  59. --banner-blue: linear-gradient(135deg, hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*40.7%) 42.4%/.4) 10%, hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*86.6%) 67.8%/.4) 100%);
  60. --banner-blue-child: linear-gradient(135deg, hsl(calc(var(--accent-hue) - 2) calc(var(--saturation-factor, 1)*41.2%) 10%/.4) 10%, rgb(0 0 0/.4) 100%);
  61. --banner-shadow: 2px 2px 15px rgb(0 0 0/.4);
  62. --banner-green: linear-gradient(60deg, rgb(117 176 34/.7) 5%, rgb(88 138 27/.6) 95%);
  63. --banner-yellow: linear-gradient(135deg, rgb(130 114 81/.5) 0%, rgb(226 197 139/.5) 100%);
  64. --banner-red: linear-gradient(135deg, hsl(0 67.3% 22.4%/.6) 5%, hsl(0 67.8% 51.4%/.7) 95%);
  65. }
  66.  
  67. :root,
  68. .theme-dark {
  69. --modal-popout-message: hsl(calc(var(--accent-hue) + 18) calc(var(--saturation-factor, 1)*12.3%) 22.4%);
  70. --background-secondary: hsl(calc(var(--accent-hue) + 17) calc(var(--saturation-factor, 1)*10.6%) 18.4%);
  71. --background-tertiary: hsl(calc(var(--accent-hue) + 9) calc(var(--saturation-factor, 1)*23.3%) 11.8%);
  72. --interactive-normal: hsl(calc(var(--accent-hue) + 7) calc(var(--saturation-factor, 1)*7%) 57%);
  73. --interactive-hover: hsl(calc(var(--accent-hue) + 1) calc(var(--saturation-factor, 1)*5%) 74%);
  74. --background-modifier-hover: hsl(var(--accent-hue) calc(var(--saturation-factor, 1)*24%) 68%/0.3);
  75. --background-modifier-active: var(--background-modifier-hover);
  76. --message-background-gradient-blue: linear-gradient(135deg, hsl(var(--accent-hue) 23.2% 41.4%/.5) 0%, hsl(var(--accent-hue) 60% 71.6%/.5) 100%);
  77. --darker-grey: hsl(calc(var(--accent-hue) + 15) calc(var(--saturation-factor, 1)*8.6%) 13.7%);
  78. --modal-footer-background: none;
  79. --modal-shadow: 1px 3px 14px rgb(0 0 0/.65);
  80. --background-accent-25: hsl(calc(var(--accent-hue) + 13) calc(var(--saturation-factor, 1)*13.5%) 27.6%/.25);
  81. --background-accent-75: hsl(calc(var(--accent-hue) + 13) calc(var(--saturation-factor, 1)*13.5%) 27.6%/.75);
  82. --background-accent: hsl(calc(var(--accent-hue) + 13) calc(var(--saturation-factor, 1)*13.5%) 27.6%);
  83. --background-accent-hover: hsl(calc(var(--accent-hue) + 8) calc(var(--saturation-factor, 1)*8.8%) 44.3%);
  84. --background-modifier-accent: hsl(calc(var(--accent-hue) + 8) calc(var(--saturation-factor, 1)*8.8%) 44.3%/.3);
  85. --background-modifier-accent-compat: hsl(calc(var(--accent-hue) + 8) calc(var(--saturation-factor, 1)*8.8%) 44.3%/.3);
  86. --background-modifier-accent-dark: hsl(calc(var(--accent-hue) + 19) calc(var(--saturation-factor, 1)*13.6%) 15.9%);
  87. --header-primary: #fff;
  88. --scroller-color: hsl(calc(var(--accent-hue) + 13) calc(var(--saturation-factor, 1)*10.7%) 29.4%);
  89. --scroller-hover-color: hsl(calc(var(--accent-hue) + 15) calc(var(--saturation-factor, 1)*5.5%) 32.4%);
  90. --channels-category: hsl(calc(var(--accent-hue) + 2) calc(var(--saturation-factor, 1)*23.5%) 42.5%);
  91. --channels-default: hsl(calc(var(--accent-hue) - 1) calc(var(--saturation-factor, 1)*18.7%) 52.7%);
  92. --channels-default-hover: hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*88.6%) 67.8%);
  93. --channel-icon: var(--channels-category);
  94. --channel-selected: radial-gradient(circle at 0%, hsl(calc(var(--accent-hue) + 2) calc(var(--saturation-factor, 1)*23.5%) 42.5%/0) 20%, hsl(calc(var(--accent-hue) + 2) calc(var(--saturation-factor, 1)*23.5%) 42.5%/.25) 100%);
  95. --tooltip-background: hsl(calc(var(--accent-hue) + 45) calc(var(--saturation-factor, 1)*5.5%) 42.7%);
  96. --tooltip-text: hsl(calc(var(--accent-hue) + 25) calc(var(--saturation-factor, 1)*10.7%) 89%);
  97. --text-lighter: hsl(calc(var(--accent-hue) + 1) calc(var(--saturation-factor, 1)*12.3%) 88.8%);
  98. --header-button-background: hsl(calc(var(--accent-hue) + 8) calc(var(--saturation-factor, 1)*8.8%) 44.3%/.2);
  99. --sidebar-btn-brand: hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*87.7%) 68.2%/.1);
  100. --btn-brand: hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*87.7%) 68.2%/.2);
  101. --btn-brand-border: hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*87.7%) 68.2%/.15);
  102. --btn-brand-text: hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*87.7%) 68.2%);
  103. --btn-brand-hover: linear-gradient(-60deg, hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*40.9%) 43.1%) 5%, var(--btn-brand-text) 95%);
  104. --btn-grey: hsl(calc(var(--accent-hue) + 17) calc(var(--saturation-factor, 1)*9.9%) 25.7%/.5);
  105. --btn-grey-hover: hsl(calc(var(--accent-hue) + 12) calc(var(--saturation-factor, 1)*11.4%) 31.0%);
  106. --btn-grey-hover-light: hsl(calc(var(--accent-hue) + 13) calc(var(--saturation-factor, 1)*10.7%) 29.4%/.6);
  107. --btn-grey-boxshadow: 0 8px 16px 0 rgb(0 0 0/.3);
  108. --btn-dark: rgb(0 0 0/.2);
  109. --btn-dark-text: hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*86.6%) 67.8%);
  110. --btn-dark-hover: hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*86.6%) 67.8%/.4);
  111. --button-positive-background: var(--gpColor-Green);
  112. --button-positive-background-hover: hsl(96 58% 30%);
  113. --store-tablist-btn: linear-gradient(135deg, hsl(var(--accent-hue) calc(var(--saturation-factor, 1)*39.6%) 39.6%) 0%, hsl(var(--accent-hue) calc(var(--saturation-factor, 1)*41.8%) 31%) 100%);
  114. --dropdown-popout-background: hsl(calc(var(--accent-hue) + 12) calc(var(--saturation-factor, 1)*10.6%) 24.1%);
  115. --dropdown-popout-shadow: 0 8px 26px 2px rgb(0 0 0/.2);
  116. --dropdown-popout-hover: hsl(calc(var(--accent-hue) + 11) calc(var(--saturation-factor, 1)*10.8%) 27.3%);
  117. --store-search-border: hsl(calc(var(--accent-hue) + 8) calc(var(--saturation-factor, 1)*37.8%) 53.3%/.2);
  118. --topbar-item-hover: linear-gradient(90deg, hsl(var(--accent-hue) calc(var(--saturation-factor, 1)*100%) 56.5%/.25) 0%, hsl(var(--accent-hue) calc(var(--saturation-factor, 1)*100%) 56.5%/.15) 50%, rgb(50 50 51/0) 100%);
  119. --topbar-item-selected: hsl(calc(var(--accent-hue) + 6) calc(var(--saturation-factor, 1)*100%) 56.1%);
  120. --app-background: hsl(calc(var(--accent-hue) + 8) calc(var(--saturation-factor, 1)*35%) 16%);
  121. --store-body-header: hsl(calc(var(--accent-hue) - 9) calc(var(--saturation-factor, 1)*98.4%) 25.3%);
  122. --mention-background: var(--btn-brand);
  123. --mention-foreground: var(--btn-brand-text);
  124. --info-warning-foreground: var(--gpColor-Yellow);
  125. --info-positive-foreground: var(--gpColor-Green);
  126. --info-danger-foreground: var(--gpColor-Red);
  127. --text-positive: var(--gpColor-Green);
  128. --gpColor-Green: #5ba32b;
  129. --gpColor-GreenHi: #59BF40;
  130. --gpColor-GreenHi-hsl: 108 49.8% 50.0%;
  131. --gpColor-Red: #D94126;
  132. --gpColor-Yellow: #FFC82C;
  133. --gpColor-Grey: #4f5159;
  134. }
  135.  
  136. #app-mount:has(.themeEditor__6df21) {
  137. --theme-preview-width: 260px;
  138. }
  139.  
  140. :root {
  141. --use-settingsicons: calc(var(--settingsicons, 1) / (var(--settingsicons, 1) + 0.00000000000000000000001));
  142. --settingsicons-size: 20px;
  143. --settingsicons-default: url(https://maendisease.github.io/Steam/illustrations/icns/developer.svg);
  144. --settingsicons-myaccount: url(https://maendisease.github.io/Steam/illustrations/icns/account.svg);
  145. --settingsicons-profile: url(https://maendisease.github.io/Steam/illustrations/icns/pencil.svg);
  146. --settingsicons-privacy: url(https://maendisease.github.io/Steam/illustrations/icns/security.svg);
  147. --settingsicons-family: url(https://maendisease.github.io/Steam/illustrations/icns/family.svg);
  148. --settingsicons-sessions: url(https://maendisease.github.io/Steam/illustrations/icns/remoteplay.svg);
  149. --settingsicons-friendrequests: url(https://maendisease.github.io/Steam/illustrations/icns/friends&chat.svg);
  150. --settingsicons-subscriptions: url(https://maendisease.github.io/Steam/illustrations/icns/star.svg);
  151. --settingsicons-billing: url(https://maendisease.github.io/Steam/illustrations/icns/funds.svg);
  152. --settingsicons-voice: url(https://maendisease.github.io/Steam/illustrations/icns/voice.svg);
  153. --settingsicons-text: url(https://maendisease.github.io/Steam/illustrations/icns/textbubble.svg);
  154. --settingsicons-notifications: url(https://maendisease.github.io/Steam/illustrations/icns/notifications.svg);
  155. --settingsicons-windows: url(https://maendisease.github.io/Steam/illustrations/icns/library.svg);
  156. --settingsicons-streamermode: url(https://maendisease.github.io/Steam/illustrations/icns/broadcast.svg);
  157. --settingsicons-advanced: url(https://maendisease.github.io/Steam/illustrations/icns/developer.svg);
  158. --settingsicons-games: url(https://maendisease.github.io/Steam/illustrations/icns/controller.svg);
  159. --settingsicons-overlay: url(https://maendisease.github.io/Steam/illustrations/icns/ingame.svg);
  160. --settingsicons-bd-settings: url(https://maendisease.github.io/Steam/illustrations/icns/settings.svg);
  161. --settingsicons-bd-changelog: url(https://maendisease.github.io/Steam/illustrations/icns/cloud.svg);
  162. --settingsicons-changelog: url(https://maendisease.github.io/Steam/illustrations/icns/clock.svg);
  163. --settingsicons-developer: url(https://maendisease.github.io/Steam/illustrations/icns/developer.svg);
  164. }
  165.  
  166. .standardSidebarView__1129a:has(.socialLinks_c1fc99) .contentColumnDefault_c66386:not(.repoScroller_9JnAPs) div:first-child > div:first-child > .sectionTitle_e32631:first-child .title__3e421::before, .standardSidebarView__1129a:has(.socialLinks_c1fc99) .contentColumnDefault_c66386:not(.repoScroller_9JnAPs) div:first-child > div:first-child > h2.title__3e421::before, .standardSidebarView__1129a:has(.socialLinks_c1fc99) .contentColumnDefault_c66386:not(.repoScroller_9JnAPs) div:first-child > .sectionTitle__1605a::before, .standardSidebarView__1129a:has(.socialLinks_c1fc99) .contentColumnDefault_c66386.repoHeader_2KfNvH .title__3e421::before, .standardSidebarView__1129a:has(.socialLinks_c1fc99) .contentColumnDefault_c66386:not(.repoScroller_9JnAPs) > h2:first-child::before, .standardSidebarView__1129a:has(.socialLinks_c1fc99) .contentColumnWide_f71d35:not(.repoScroller_9JnAPs) > h2:first-child::before, .standardSidebarView__1129a:has(.socialLinks_c1fc99) .contentColumnDefault_c66386:not(.repoScroller_9JnAPs) > .settingsTabBar__17e8a:first-child::before, .standardSidebarView__1129a:has(.socialLinks_c1fc99) .contentColumnDefault_c66386:not(.repoScroller_9JnAPs) > *:first-child > .settingsTabBar__19aa3::before {
  167. display: none;
  168. }
  169.  
  170. :root {
  171. --settingsmodalbackground: transparent;
  172. --settingswidth: 850;
  173. --settingsheight: 80;
  174. }
  175.  
  176. #app-mount .contentRegion__0bec1 {
  177. flex: 1 1 100%;
  178. }
  179.  
  180. :root {
  181. --server-size: 28px;
  182. --HSL-server-spacing: 10px;
  183. --HSL-server-direction: column;
  184. }
  185.  
  186. :root {
  187. --rs-small-spacing: 0;
  188. --rs-medium-spacing: 0;
  189. --rs-large-spacing: 0;
  190. --rs-small-width: 2px;
  191. --rs-medium-width: 2px;
  192. --rs-large-width: 2px;
  193. --rs-avatar-shape: 0%;
  194. --rs-online-color: var(--gpColor-Green);
  195. --rs-idle-color: var(--gpColor-Yellow);
  196. --rs-dnd-color: var(--gpColor-Red);
  197. --rs-offline-color: var(--gpColor-Grey);
  198. --rs-streaming-color: #643da7;
  199. --rs-invisible-color: var(--gpColor-Grey);
  200. --rs-phone-color: var(--rs-online-color);
  201. --rs-phone-visible: none;
  202. }
  203.  
  204. :root {
  205. --brand-experiment: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness));
  206. --brand-experiment-100: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), 98%);
  207. --brand-experiment-130: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), 93.2%);
  208. --brand-experiment-160: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), 88.3%);
  209. --brand-experiment-200: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), 83.5%);
  210. --brand-experiment-230: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), 78.7%);
  211. --brand-experiment-260: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), 73.8%);
  212. --brand-experiment-300: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), 69%);
  213. --brand-experiment-330: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), 64.2%);
  214. --brand-experiment-360: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), 59.3%);
  215. --brand-experiment-400: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), 54.5%);
  216. --brand-experiment-430: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), 49.7%);
  217. --brand-experiment-460: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), 44.8%);
  218. --brand-experiment-500: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness));
  219. --brand-experiment-530: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*63.8%), 36.9%);
  220. --brand-experiment-560: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*51%), 33.8%);
  221. --brand-experiment-600: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*46.6%), 30.8%);
  222. --brand-experiment-630: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*46.6%), 27.7%);
  223. --brand-experiment-660: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*46.6%), 24.6%);
  224. --brand-experiment-680: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*81%), 30%);
  225. --brand-experiment-700: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*46.6%), 21.5%);
  226. --brand-experiment-730: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*46.6%), 18.4%);
  227. --brand-experiment-760: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*46.6%), 15.3%);
  228. --brand-experiment-800: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*46.6%), 12.3%);
  229. --brand-experiment-830: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*46.6%), 9.2%);
  230. --brand-experiment-860: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*46.6%), 6.1%);
  231. --brand-experiment-900: hsl(var(--accent-hue), calc(var(--saturation-factor, 1)*46.6%), 3%);
  232. --brand-experiment-05a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.05);
  233. --brand-experiment-10a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.1);
  234. --brand-experiment-15a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.15);
  235. --brand-experiment-20a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.2);
  236. --brand-experiment-25a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.25);
  237. --brand-experiment-30a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.3);
  238. --brand-experiment-35a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.35);
  239. --brand-experiment-40a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.4);
  240. --brand-experiment-45a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.45);
  241. --brand-experiment-50a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.5);
  242. --brand-experiment-55a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.55);
  243. --brand-experiment-60a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.6);
  244. --brand-experiment-65a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.65);
  245. --brand-experiment-70a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.7);
  246. --brand-experiment-75a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.75);
  247. --brand-experiment-80a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.8);
  248. --brand-experiment-85a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.85);
  249. --brand-experiment-90a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.9);
  250. --brand-experiment-95a: hsla(var(--accent-hue), calc(var(--saturation-factor, 1)*var(--accent-saturation)), var(--accent-brightness), 0.95);
  251. --brand-100: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 77.8%), 98.2%);
  252. --brand-130: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 87.5%), 96.9%);
  253. --brand-160: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 84.6%), 94.9%);
  254. --brand-200: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 83.3%), 92.9%);
  255. --brand-230: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 87%), 91%);
  256. --brand-260: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 86.2%), 88.6%);
  257. --brand-300: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 86.1%), 85.9%);
  258. --brand-330: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 85.1%), 81.6%);
  259. --brand-345: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 85.2%), 78.8%);
  260. --brand-360: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 86.1%), 77.5%);
  261. --brand-400: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 86.1%), 71.8%);
  262. --brand-430: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 85.7%), 69.8%);
  263. --brand-460: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 85.5%), 67.5%);
  264. --brand-500: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 85.6%), 64.7%);
  265. --brand-530: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 66.7%), 58.8%);
  266. --brand-560: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 51.4%), 52.4%);
  267. --brand-600: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 46.7%), 44.1%);
  268. --brand-630: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 46.7%), 38.2%);
  269. --brand-660: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  270. --brand-700: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 47%), 25.9%);
  271. --brand-730: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 46.8%), 24.3%);
  272. --brand-760: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 46.9%), 22.2%);
  273. --brand-800: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 47.5%), 19.4%);
  274. --brand-830: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 47.4%), 14.9%);
  275. --brand-860: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 46.9%), 9.6%);
  276. --brand-900: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 50%), 3.1%);
  277. --brand-new-100: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 77.8%), 98.2%);
  278. --brand-new-130: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 87.5%), 96.9%);
  279. --brand-new-160: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 84.6%), 94.9%);
  280. --brand-new-200: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 83.3%), 92.9%);
  281. --brand-new-230: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 87%), 91%);
  282. --brand-new-260: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 86.2%), 88.6%);
  283. --brand-new-300: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 86.1%), 85.9%);
  284. --brand-new-330: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 85.1%), 81.6%);
  285. --brand-new-345: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 85.2%), 78.8%);
  286. --brand-new-360: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 86.1%), 77.5%);
  287. --brand-new-400: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 86.1%), 71.8%);
  288. --brand-new-430: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 85.7%), 69.8%);
  289. --brand-new-460: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 85.5%), 67.5%);
  290. --brand-new-500: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 85.6%), 64.7%);
  291. --brand-new-530: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 66.7%), 58.8%);
  292. --brand-new-560: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 51.4%), 52.4%);
  293. --brand-new-600: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 46.7%), 44.1%);
  294. --brand-new-630: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 46.7%), 38.2%);
  295. --brand-new-660: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  296. --brand-new-700: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 47%), 25.9%);
  297. --brand-new-730: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 46.8%), 24.3%);
  298. --brand-new-760: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 46.9%), 22.2%);
  299. --brand-new-800: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 47.5%), 19.4%);
  300. --brand-new-830: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 47.4%), 14.9%);
  301. --brand-new-860: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 46.9%), 9.6%);
  302. --brand-new-900: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 50%), 3.1%);
  303. }
  304.  
  305. [class^=appMount],
  306. body,
  307. [class^=app]:has(> [class^=bg]) {
  308. background: none;
  309. }
  310.  
  311. [class^=app] > [class^=bg] {
  312. background: url(data:image/avif;base64,AAAAHGZ0eXBtaWYxAAAAAG1pZjFhdmlmbWlhZgAAAPRtZXRhAAAAAAAAACFoZGxyAAAAAAAAAABwaWN0AAAAAAAAAAAAAAAAAAAAAA5waXRtAAAAAAABAAAAHmlsb2MAAAAABEAAAQABAAAAAAEYAAEAAAcQAAAAKGlpbmYAAAAAAAEAAAAaaW5mZQIAAAAAAQAAYXYwMUltYWdlAAAAAHNpcHJwAAAAVGlwY28AAAAUaXNwZQAAAAAAAAfQAAADIAAAABBwYXNwAAAAAQAAAAEAAAAYYXYxQ4EoAAAKCjoqfn4/0gIaAEAAAAAQcGl4aQAAAAADCAgIAAAAF2lwbWEAAAAAAAAAAQABBAECg4QAAAcYbWRhdAoKOip+fj/SAhoAQDKBDkRkAEEEEEl1kN7z3JlHjTBI2xENnm+pZu6ljfJeoXHFuhRuDLU8w+zRdn4msPR7pc9gUlwYCWIqTGGhj1xcI5YS5Va5q08NqNvGSpyssEWteMIBb0bnQ0ZJ185ymk3COWZmPGTNKWR0s3eiZa6QcVgOsXwAJKcdu70SQY8i9Ccv4/y3ejUQKtcQuEEukHj1D/xjRpoGi4RjoNYMRSa2LqjST0i1LoDM/RN9GhvqD1ENGLPSOfO/96vaHZ87q/pjutzbL2Mo1i3pYOYuShfawRmZ5fO3ibIpizJsQyaX26CaPLb0ycFCnJ2PprO+owM30W3QLarBHKKGw1B/I0Q6rw/uEhOlj2qZfBBjy+xp2cr9/FEgGsbNAz0jkcK2WDrx4DrmTsZudYHxppuv+XAQDLUvqcVqTHfWs2lgqIybbhUB4l/EatDb/GKUzHUv4D0OHUBnal8wkd+BSzkbWEZ8wl2oMnON1B1VCgOW7LKy2eAiQw/X+DXEu93buh8LikmhX19JQi/r749nLxKUXPvcwxD+1n/MT0ud1HjpFXyDZxp3tJkNsrUwKgHzwXvrsRbAHuCt7/7bUUZmne34IAyQr9XWq1GnATZL6MmOmwF7mZroGvRW3sbmvZOd/v0mwOWrRvV3X+AV9BPAkes7lql1mjJWExBo9T8GN+GBxvwa44iDbz+L9I0+rqh+nAK1ASRVm+dgDqabAikLFBqw6keUIBQWmndOWQcql+hiyp293Y02PRO82T/dqCbZ1GBW3nr/biBY49CJhbfpSLvSWrilrCmqM4Q84eLjIq5O59TgqGmE3WKyD2BTZAjQuU/c4X7Tm5KInBm8WgfdGidQfox1TMGDecTpxyJoyyrlp6inyUgU8Qd65jVKAlCD6V0VfzI2MwuRYPi6chARNy07fls1nH60Qg4SG3gTLXd8nsjJE1QxA4Dm5gmJgSd7US0Yp+e5S+KxVCTVI4P2R1THs+PpgS7QI/zffTo5R8fIG18Bpo3x16AxQfIPKFBH9wkz0fKPITM0qPRRKBfE1fnNVeQXtBt0X+kFAxnIUZPrn8Q61HbRvZT5JmoeNWGh8OdLxn1x2xeJSB+GY99g2BaRFlp82OuRSeVLXLW0FuHYj4muS0TnYmkp1F/OJMV0CwrBFE+HgNISqs2WABKiPgvNYzZ9vDsR2YFz5dgNowblti+/vMW8TKi4SgGiFe6r/HgIZ06NYhOVxDe6zBFaj4IpRkax4q11lzuj25kNDnOPnPz7/6jMFifKcpyWhA92vWreIRfsAkjC3Sk0S2gTHcDTaVw5I5ZNvEJzkmStExZnw84iE2FOUgwFGD2nE3jNAwFG7rHCtiDXX+ILmVMwWTX5xV8CzJwolUkNS5wbKRRepLA57cyJmFOkvCT8akJpSKn4t5BHCCz6736UL9SnrdEWYluhqP3eChZSguNloOiGNreRhQp/qT/T64WNEJoc7961hDq5+Ri0tG/dTLQ1Q9TTjVnqLIOXsBbFB3wWPbd790HJyKD77c6BpSiNWgmG5eLHAPu2TFuXdKsJ2MMsrq2ZXIUqd4KP9q97z/3kmL28PVaELPzdiJP3UtSK58e5j78SgaXFv4dzwhZYS31JZbfP3pWGrD38OfCZAse1BGMZu5yf/pCNjESThVh+GlJjSyHU4mkuiTmJxTE/6hZayk2FFcaOx23RNCMHz7lIoC92XT4e1UWoCF9SQpY3BizeYkPcxpvrbbPr+6cWYUQJUvfbn87JOMEBntY8aqZXFZXWZwLjHdjeKfWi800/lfPbT5AD+Uw/6SWpIv1sLl1fzL6RI25NUxopYadYhk/o9BOGAVTEcVWapnxlKm2XaTJMcgcIjVaowzXoTFjoRmcKEcVWQn/qVw7d6KXS4QjzfWyWNoLUNRkI9XdUcTszw8iaiJMzQ/h/AAZ7tsWOHe62kJJKu2iWAq0r4AoUT4R70cBjTmSvz1sF6FwmXXF9JkKQlvYpLOpjnEQQp4q7iMChz6JAbaVOKuKli8WlFRa8SGqw9krJaMRFhQh6IWNikNstmN30OXSutTDuIQqxCBRodapHKmJDUwuG4v6B4UgLmRzrQOZdY1rWgBUCvWVgqsU/Ra3zUkZ10LT/MbLmvffx67oD/e78I6+uygf88phwOnzkhHs9rNgXVeH+LojvKstdUVfdPMS2RbAWW2rlv6/CLZvERL+sKInvQDJEtfljmWd8jAnXRg+WTVISA4YbYrYQrEEMFrzbXIknVYaiLamoJYo+rMgwLyApc+tiWrHfL0ssE2Ns2znHgbV318TSott2hQldpj29wpYrxLo8NNipMwwcDeYpNgyi2heIiBYUjcKXCvAoZg4dLhStqEAjP9YufsU+OynsWKJyh/brCBUvFh74AqUSBYnx) center top no-repeat var(--app-bg);
  313. filter: hue-rotate(calc(var(--hue-shift) * 1deg)) saturate(var(--saturation-factor, 1));
  314. }
  315.  
  316. nav + [class^=base] > [class^=content] {
  317. justify-content: center;
  318. }
  319.  
  320. [class^=notice] {
  321. border-radius: 0;
  322. }
  323.  
  324. #app-mount ::-webkit-scrollbar-track {
  325. background: none;
  326. }
  327. #app-mount ::-webkit-scrollbar-thumb {
  328. background-color: var(--scroller-color);
  329. }
  330. #app-mount ::-webkit-scrollbar-thumb:hover {
  331. background-color: var(--scroller-hover-color);
  332. }
  333.  
  334. .auto_a48086::-webkit-scrollbar {
  335. width: 14px;
  336. height: 14px;
  337. }
  338.  
  339. .backdrop__7e89b.withLayer__1fe9d[style="opacity: 0.85; background: var(--black-500);"] {
  340. opacity: 0.8 !important;
  341. }
  342.  
  343. #app-mount .root_a28985 {
  344. background: var(--modal-background);
  345. box-shadow: none;
  346. }
  347.  
  348. .root_a28985 {
  349. border-radius: 0;
  350. --text-link: var(--text-linkHi);
  351. }
  352. .root_a28985::before {
  353. content: "";
  354. display: block;
  355. height: 1px;
  356. width: 100%;
  357. background: linear-gradient(to right, hsl(calc(var(--accent-hue) - 13), calc(var(--saturation-factor, 1) * 100%), 50%) 0%, hsl(calc(var(--accent-hue) + 20), calc(var(--saturation-factor, 1) * 100%), 60%) 100%);
  358. position: absolute;
  359. z-index: 102;
  360. top: 0;
  361. }
  362. .root_a28985 a:hover {
  363. text-decoration: none;
  364. --text-link: var(--text-linkHi-hover);
  365. }
  366. .root_a28985 .close__1080c {
  367. position: absolute;
  368. top: 9px;
  369. right: 9px;
  370. height: 16px;
  371. width: 16px;
  372. margin: 0;
  373. padding: 0;
  374. }
  375. .root_a28985 .close__1080c .contents_fb6220 {
  376. height: 16px;
  377. }
  378. .root_a28985 .close__1080c svg {
  379. height: 16px !important;
  380. width: 16px !important;
  381. }
  382. .root_a28985 .artContainer__56b19 {
  383. z-index: 102;
  384. }
  385. .root_a28985 [class*=modalHeader] {
  386. background-color: transparent;
  387. }
  388. .root_a28985 .header__6d5ea {
  389. box-shadow: none;
  390. border-radius: 0;
  391. padding: 32px;
  392. }
  393. .root_a28985 .header__6d5ea [data-text-variant="heading-lg/semibold"] {
  394. font-size: 22px;
  395. font-weight: 700;
  396. line-height: 24px;
  397. }
  398. .root_a28985 .footer__89240:has(> .lookLink__93965) {
  399. gap: 4px;
  400. }
  401. .root_a28985 .footer__89240,
  402. .root_a28985 .footer_ceda43 {
  403. padding: 32px;
  404. border-radius: 0;
  405. box-shadow: none;
  406. background: none;
  407. }
  408. .root_a28985 .content__764ce {
  409. padding-left: 32px;
  410. padding-right: 32px;
  411. border-radius: 0;
  412. }
  413. .root_a28985 .text-md-normal__6a4eb {
  414. font-size: 14px;
  415. line-height: 18px;
  416. }
  417. .root_a28985 .defaultColor__77578.text-md-normal__6a4eb {
  418. --text-normal: hsl(calc(var(--accent-hue) + 5) calc(var(--saturation-factor, 1)*7.8%) 69.8%);
  419. }
  420.  
  421. .medium__408de {
  422. width: 500px;
  423. }
  424. .medium__408de:has([class*=overviewSidebar], .guildSidebar__8763f) {
  425. width: 692px;
  426. }
  427.  
  428. .largeSpacing_ac1945 {
  429. margin-bottom: 32px;
  430. margin-top: 10px;
  431. }
  432.  
  433. .spacing_ce91c7 {
  434. margin: 0;
  435. }
  436.  
  437. .overrideList__3236e .flex_f5fbb7:has(> .header__995b4) {
  438. padding-top: 8px;
  439. padding-left: 8px;
  440. }
  441. .overrideList__3236e .header__995b4 {
  442. margin-bottom: 0;
  443. }
  444. .overrideList__3236e [class*=headerName] {
  445. margin-left: 0;
  446. }
  447. .overrideList__3236e [class*=headerOption] {
  448. align-self: flex-end;
  449. }
  450.  
  451. #app-mount .wrapper_edb6e0::before {
  452. content: "";
  453. position: absolute;
  454. inset: 0;
  455. outline: 1px solid rgba(0, 0, 0, 0.3);
  456. outline-offset: -1px;
  457. z-index: 1;
  458. }
  459.  
  460. .app_b1f720:has(> .container__4bde3)::before {
  461. content: "";
  462. display: block;
  463. position: absolute;
  464. inset: 0;
  465. background: rgba(0, 0, 0, 0.8);
  466. z-index: 2999;
  467. }
  468.  
  469. .container__4bde3 {
  470. background: var(--modal-background);
  471. max-width: 600px;
  472. max-height: 300px;
  473. width: -moz-fit-content;
  474. width: fit-content;
  475. height: -moz-fit-content;
  476. height: fit-content;
  477. border: 0.5px solid black;
  478. padding: 32px;
  479. margin: auto;
  480. position: absolute;
  481. display: flex;
  482. flex-flow: column wrap;
  483. }
  484. .container__4bde3::before {
  485. content: "";
  486. display: block;
  487. height: 1px;
  488. width: 100%;
  489. background: linear-gradient(to right, hsl(calc(var(--accent-hue) - 13), calc(var(--saturation-factor, 1) * 100%), 50%) 0%, hsl(calc(var(--accent-hue) + 20), calc(var(--saturation-factor, 1) * 100%), 60%) 100%);
  490. position: absolute;
  491. z-index: 102;
  492. top: 0;
  493. }
  494.  
  495. .ready__61f2f {
  496. display: none;
  497. }
  498.  
  499. .content__0e954 {
  500. position: relative;
  501. }
  502. .content__0e954:has(.ready__61f2f)::before {
  503. content: "";
  504. display: block;
  505. position: absolute;
  506. inset: 0;
  507. margin: auto;
  508. z-index: 999;
  509. height: 100%;
  510. width: 100%;
  511. max-height: 142px;
  512. max-width: 142px;
  513. -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M18 34.32C9 34.32 1.68 27 1.68 18S9 1.68 18 1.68 34.32 9 34.32 18 27 34.32 18 34.32Zm0-31.63c-8.44 0-15.32 6.87-15.32 15.32S9.55 33.33 18 33.33s15.32-6.87 15.32-15.32S26.45 2.68 18 2.68Zm7.98 7.95c-1.51-.71-3.11-1.2-4.74-1.48-.22.41-.43.83-.61 1.25-1.74-.26-3.51-.26-5.26 0-.19-.43-.39-.85-.61-1.25-1.64.28-3.24.78-4.75 1.48C7 15.15 6.19 19.55 6.6 23.88c1.76 1.32 3.73 2.32 5.82 2.96.47-.64.89-1.33 1.24-2.04-.68-.26-1.34-.57-1.96-.95.17-.12.33-.24.48-.38 3.69 1.76 7.95 1.76 11.63 0 .16.13.32.26.48.38-.63.37-1.29.7-1.96.95.36.72.77 1.4 1.24 2.04 2.09-.64 4.06-1.64 5.82-2.96.48-5.02-.82-9.38-3.42-13.24Zm-11.8 10.58c-1.13 0-2.07-1.06-2.07-2.34 0-1.28.91-2.34 2.07-2.34 1.16 0 2.09 1.06 2.07 2.34 0 1.28-.92 2.34-2.07 2.34zm7.64 0c-1.13 0-2.07-1.06-2.07-2.34 0-1.28.92-2.34 2.07-2.34s2.09 1.06 2.07 2.34c0 1.28-.92 2.34-2.07 2.34z"/></svg>') center/contain no-repeat;
  514. mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M18 34.32C9 34.32 1.68 27 1.68 18S9 1.68 18 1.68 34.32 9 34.32 18 27 34.32 18 34.32Zm0-31.63c-8.44 0-15.32 6.87-15.32 15.32S9.55 33.33 18 33.33s15.32-6.87 15.32-15.32S26.45 2.68 18 2.68Zm7.98 7.95c-1.51-.71-3.11-1.2-4.74-1.48-.22.41-.43.83-.61 1.25-1.74-.26-3.51-.26-5.26 0-.19-.43-.39-.85-.61-1.25-1.64.28-3.24.78-4.75 1.48C7 15.15 6.19 19.55 6.6 23.88c1.76 1.32 3.73 2.32 5.82 2.96.47-.64.89-1.33 1.24-2.04-.68-.26-1.34-.57-1.96-.95.17-.12.33-.24.48-.38 3.69 1.76 7.95 1.76 11.63 0 .16.13.32.26.48.38-.63.37-1.29.7-1.96.95.36.72.77 1.4 1.24 2.04 2.09-.64 4.06-1.64 5.82-2.96.48-5.02-.82-9.38-3.42-13.24Zm-11.8 10.58c-1.13 0-2.07-1.06-2.07-2.34 0-1.28.91-2.34 2.07-2.34 1.16 0 2.09 1.06 2.07 2.34 0 1.28-.92 2.34-2.07 2.34zm7.64 0c-1.13 0-2.07-1.06-2.07-2.34 0-1.28.92-2.34 2.07-2.34s2.09 1.06 2.07 2.34c0 1.28-.92 2.34-2.07 2.34z"/></svg>') center/contain no-repeat;
  515. background: #fff;
  516. animation: discordSpinnerScale 1.44s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite;
  517. }
  518. .content__0e954:has(.ready__61f2f)::after {
  519. content: "";
  520. display: block;
  521. position: absolute;
  522. inset: 0;
  523. margin: auto;
  524. z-index: 999;
  525. height: 100%;
  526. max-height: 142px;
  527. max-width: 142px;
  528. border-radius: 50%;
  529. aspect-ratio: 1;
  530. background: radial-gradient(farthest-side, var(--brand-experiment) 94%, rgba(0, 0, 0, 0)) top/40% 20% no-repeat, conic-gradient(rgba(0, 0, 0, 0) 20%, var(--brand-experiment));
  531. -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 0);
  532. mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 0);
  533. animation: discordSpinnerRotate 2.88s cubic-bezier(0.5, 0, 0.5, 1) infinite, discordSpinnerFade 1.44s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite;
  534. }
  535. @keyframes discordSpinnerScale {
  536. 0% {
  537. transform: scale(0.9);
  538. }
  539. 100% {
  540. transform: scale(0.82);
  541. }
  542. }
  543. @keyframes discordSpinnerRotate {
  544. 100% {
  545. transform: rotate(3turn);
  546. }
  547. }
  548. @keyframes discordSpinnerFade {
  549. 0% {
  550. opacity: 0;
  551. }
  552. 50% {
  553. opacity: 1;
  554. }
  555. }
  556. .content__0e954:has(.ready__61f2f)::before {
  557. position: relative;
  558. height: 100px;
  559. width: 100px;
  560. }
  561. .content__0e954:has(.ready__61f2f)::after {
  562. bottom: unset;
  563. height: 100px;
  564. width: 100px;
  565. }
  566. .content__0e954:has(.ready__61f2f) .ready__61f2f {
  567. display: none;
  568. }
  569. .content__0e954:has(.ready__61f2f) .text__32559 {
  570. margin-top: 32px;
  571. top: 0;
  572. }
  573. .content__0e954:has(.ready__61f2f) .tipTitle_a7615c {
  574. color: var(--text-muted);
  575. font-size: 14px;
  576. letter-spacing: 0.5px;
  577. line-height: 36px;
  578. margin-bottom: 0;
  579. }
  580. .content__0e954:has(.ready__61f2f) .tip__6e299 {
  581. color: var(--text-muted);
  582. font-size: 14px;
  583. line-height: 18px;
  584. }
  585.  
  586. [class^=problems] {
  587. position: relative;
  588. inset: unset;
  589. padding: 10px 0 0 0;
  590. transform: none;
  591. --text-link: var(--text-linkHi);
  592. }
  593. [class^=problems] a {
  594. font-weight: 400;
  595. font-size: 14px;
  596. line-height: 18px;
  597. text-decoration: none;
  598. }
  599. [class^=problems] a:hover {
  600. text-decoration: none;
  601. --text-link: var(--text-linkHi-hover);
  602. }
  603.  
  604. [d="M10.81 2.86c.38-1.15 2-1.15 2.38 0l1.89 5.83h6.12c1.2 0 1.71 1.54.73 2.25l-4.95 3.6 1.9 5.82a1.25 1.25 0 0 1-1.93 1.4L12 18.16l-4.95 3.6c-.98.7-2.3-.25-1.92-1.4l1.89-5.82-4.95-3.6a1.25 1.25 0 0 1 .73-2.25h6.12l1.9-5.83Z"] {
  605. d: path("m12 2.001 3.18 6.686 7.332.953-5.36 5.1 1.347 7.259L12 18.479 5.5 22l1.354-7.26L1.488 9.64l7.332-.953Z");
  606. }
  607.  
  608. [d="M12 2a1 1 0 0 1 1 1v10.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42l3.3 3.3V3a1 1 0 0 1 1-1ZM3 20a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2H3Z"] {
  609. d: path("m13.25 9.607 2.866-2.866 1.768 1.768L12 14.393 6.116 8.509 7.884 6.74l2.866 2.866V2h2.5z M18.875 15.125v2.5H5.125v-2.5H2v5.625h20v-5.625z");
  610. }
  611.  
  612. [d="M10.56 1.1c-.46.05-.7.53-.64.98.18 1.16-.19 2.2-.98 2.53-.8.33-1.79-.15-2.49-1.1-.27-.36-.78-.52-1.14-.24-.77.59-1.45 1.27-2.04 2.04-.28.36-.12.87.24 1.14.96.7 1.43 1.7 1.1 2.49-.33.8-1.37 1.16-2.53.98-.45-.07-.93.18-.99.64a11.1 11.1 0 0 0 0 2.88c.06.46.54.7.99.64 1.16-.18 2.2.19 2.53.98.33.8-.14 1.79-1.1 2.49-.36.27-.52.78-.24 1.14.59.77 1.27 1.45 2.04 2.04.36.28.87.12 1.14-.24.7-.95 1.7-1.43 2.49-1.1.8.33 1.16 1.37.98 2.53-.07.45.18.93.64.99a11.1 11.1 0 0 0 2.88 0c.46-.06.7-.54.64-.99-.18-1.16.19-2.2.98-2.53.8-.33 1.79.14 2.49 1.1.27.36.78.52 1.14.24.77-.59 1.45-1.27 2.04-2.04.28-.36.12-.87-.24-1.14-.96-.7-1.43-1.7-1.1-2.49.33-.8 1.37-1.16 2.53-.98.45.07.93-.18.99-.64a11.1 11.1 0 0 0 0-2.88c-.06-.46-.54-.7-.99-.64-1.16.18-2.2-.19-2.53-.98-.33-.8.14-1.79 1.1-2.49.36-.27.52-.78.24-1.14a11.07 11.07 0 0 0-2.04-2.04c-.36-.28-.87-.12-1.14.24-.7.96-1.7 1.43-2.49 1.1-.8-.33-1.16-1.37-.98-2.53.07-.45-.18-.93-.64-.99a11.1 11.1 0 0 0-2.88 0ZM16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"] {
  613. d: path("m 22,13.586667 v -3.173334 l -2.62,-0.48 C 19.208067,9.343333 18.968667,8.7752 18.666667,8.24 L 20.18,6.0533333 17.946667,3.8066667 15.76,5.3333333 C 15.2248,5.0313067 14.656667,4.7919533 14.066667,4.62 l -0.48,-2.62 h -3.173334 l -0.48,2.62 C 9.343333,4.7919533 8.7752,5.0313067 8.24,5.3333333 L 6.0533333,3.8066667 3.8066667,6.0533333 5.3333333,8.24 C 5.0313067,8.7752 4.7919533,9.343333 4.62,9.933333 l -2.62,0.48 v 3.173334 l 2.62,0.48 c 0.1719533,0.59 0.4113067,1.158133 0.7133333,1.693333 L 3.8066667,17.946667 6.0533333,20.193333 8.24,18.666667 c 0.5358,0.2974 1.103933,0.532266 1.693333,0.7 L 10.413333,22 h 3.173334 l 0.48,-2.62 c 0.59,-0.171933 1.158133,-0.411333 1.693333,-0.713333 L 17.946667,20.18 20.193333,17.933333 18.666667,15.76 c 0.2974,-0.5358 0.532266,-1.103933 0.7,-1.693333 z m -10,1.746666 c -0.659267,0 -1.303733,-0.195466 -1.851933,-0.5618 C 9.599933,14.405267 9.172667,13.884667 8.9204,13.2756 8.6681333,12.666533 8.6020667,11.996333 8.7307333,11.349667 8.8593333,10.703067 9.1768,10.109133 9.643,9.643 10.109133,9.1768 10.703067,8.8593333 11.349667,8.7307333 11.996333,8.6020667 12.666533,8.6681333 13.2756,8.9204 c 0.609067,0.252267 1.129667,0.679533 1.495933,1.227667 0.366334,0.5482 0.5618,1.192666 0.5618,1.851933 0,0.437733 -0.0862,0.8712 -0.253733,1.2756 -0.167533,0.4044 -0.413067,0.771867 -0.7226,1.0814 -0.309533,0.309533 -0.677,0.555067 -1.0814,0.7226 -0.4044,0.167533 -0.837867,0.253733 -1.2756,0.253733 z");
  614. }
  615.  
  616. [d="m13.96 5.46 4.58 4.58a1 1 0 0 0 1.42 0l1.38-1.38a2 2 0 0 0 0-2.82l-3.18-3.18a2 2 0 0 0-2.82 0l-1.38 1.38a1 1 0 0 0 0 1.42ZM2.11 20.16l.73-4.22a3 3 0 0 1 .83-1.61l7.87-7.87a1 1 0 0 1 1.42 0l4.58 4.58a1 1 0 0 1 0 1.42l-7.87 7.87a3 3 0 0 1-1.6.83l-4.23.73a1.5 1.5 0 0 1-1.73-1.73Z"] {
  617. d: path("M 18.585979,2.164 15.816391,4.9336003 19.230412,8.3476032 22,5.5779908 Z M 14.114902,6.6455053 5.0078692,15.746509 4,20.170271 l 4.423761,-1.00787 9.100998,-9.107033 z");
  618. }
  619.  
  620. [d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7v-5z"] {
  621. d: path("M 3.549792,3.346952 H 5.52844 v 0.966176 c 0,0.855616 0.694032,1.549656 1.549656,1.549656 0.855616,0 1.549176,-0.69404 1.549176,-1.549656 V 3.346952 h 6.693288 v 0.966176 c 0,0.855616 0.694,1.549656 1.54968,1.549656 0.8556,0 1.54912,-0.69404 1.54912,-1.549656 V 3.346952 h 1.97776 c 0.86744,0 1.57656,0.70916 1.57656,1.576592 v 13.405944 c 0,0.86744 -0.70912,1.57656 -1.57656,1.57656 H 3.550264 c -0.867428,0 -1.576584,-0.70912 -1.576584,-1.57656 V 4.923544 c 0,-0.867432 0.709156,-1.576592 1.576584,-1.576592 z M 20.77408,7.721896 v 10.607592 c 0,0.20696 -0.17008,0.37704 -0.37696,0.37704 H 3.550264 c -0.206936,0 -0.377016,-0.16968 -0.377016,-0.37704 V 7.721896 Z M 6.20836,2 c 0,-0.4804888 0.389304,-0.869792 0.869792,-0.869792 0.480016,0 0.86932,0.3893032 0.86932,0.869792 v 2.313144 c 0,0.480488 -0.389304,0.869792 -0.86932,0.869792 -0.480488,0 -0.869792,-0.389304 -0.869792,-0.869792 z M 16,2 c 0,-0.4804888 0.38928,-0.869792 0.86976,-0.869792 0.48,0 0.86936,0.3893032 0.86936,0.869792 v 2.313144 c 0,0.480488 -0.38936,0.869792 -0.86936,0.869792 C 16.38928,5.182936 16,4.793632 16,4.313144 Z");
  622. }
  623.  
  624. svg:not(.icon-2xnN2Y) [d="M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006Z"],
  625. svg:not(.icon-2xnN2Y) [d="M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006Z"] ~ path:not(:last-child) {
  626. display: none;
  627. }
  628.  
  629. svg:not(.icon-2xnN2Y) [d="M14.5 8a3 3 0 1 0-2.7-4.3c-.2.4.06.86.44 1.12a5 5 0 0 1 2.14 3.08c.01.06.06.1.12.1ZM18.44 17.27c.15.43.54.73 1 .73h1.06c.83 0 1.5-.67 1.5-1.5a7.5 7.5 0 0 0-6.5-7.43c-.55-.08-.99.38-1.1.92-.06.3-.15.6-.26.87-.23.58-.05 1.3.47 1.63a9.53 9.53 0 0 1 3.83 4.78ZM12.5 9a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM2 20.5a7.5 7.5 0 0 1 15 0c0 .83-.67 1.5-1.5 1.5a.2.2 0 0 1-.2-.16c-.2-.96-.56-1.87-.88-2.54-.1-.23-.42-.15-.42.1v2.1a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2.1c0-.25-.31-.33-.42-.1-.32.67-.67 1.58-.88 2.54a.2.2 0 0 1-.2.16A1.5 1.5 0 0 1 2 20.5Z"] {
  630. d: path("M 8.0812147,15.093736 C 6.5952108,16.121667 5.5736354,17.693346 5.2374811,19.46871 H 1.9999997 v -4.374974 c 0,-1.160306 0.4609348,-2.273112 1.2813989,-3.093608 0.8204703,-0.820432 1.9332576,-1.281367 3.0935759,-1.281367 0.2577548,6.25e-4 0.5149721,0.02362 0.7687456,0.06875 -0.098374,0.39656 -0.1466366,0.803933 -0.1437491,1.212493 0.00262,1.123431 0.3834977,2.213238 1.0812437,3.093733 z M 6.3749745,8.8750217 c 0.5562593,0 1.0999937,-0.1649366 1.5625536,-0.4739973 C 8.4000254,8.0919637 8.7605233,7.6527162 8.9733971,7.1388441 9.1862709,6.6249096 9.2419581,6.0594129 9.1333962,5.513841 9.0248968,4.9682754 8.7570233,4.4671408 8.3637131,4.0738055 7.9703404,3.6804703 7.4692183,3.4126093 6.9236651,3.3040912 6.3780933,3.1955668 5.8125965,3.2512665 5.2986807,3.464134 4.7847712,3.6770078 4.3455175,4.037487 4.0364817,4.4999968 3.7274398,4.9625129 3.5624907,5.5062723 3.5624907,6.0625316 c -8.25e-4,0.3695729 0.071362,0.7356645 0.2124113,1.07725 0.1410492,0.3416231 0.3481792,0.6519963 0.609509,0.9133073 0.2613297,0.261311 0.571703,0.4684973 0.913301,0.6094965 0.341598,0.1410617 0.7076897,0.2132488 1.0772625,0.2124363 z m 11.2499355,0 c 0.556247,0 1.099994,-0.1649366 1.562554,-0.4739973 C 19.649961,8.0919637 20.010459,7.6527162 20.223333,7.1388441 20.436206,6.6249096 20.491894,6.0594129 20.383332,5.513841 20.274832,4.9682754 20.006959,4.4671408 19.613649,4.0738055 19.220276,3.6804703 18.719154,3.4126093 18.173595,3.3040912 17.628035,3.1955668 17.062538,3.2512662 16.548604,3.464134 c -0.513872,0.2128738 -0.95312,0.573353 -1.26218,1.0358628 -0.309061,0.4625161 -0.473998,1.0062755 -0.473998,1.5625348 -8.12e-4,0.3695729 0.07137,0.7356645 0.212437,1.07725 0.140999,0.3416231 0.348185,0.6519963 0.609496,0.9133073 0.261311,0.261311 0.571684,0.4684973 0.913307,0.6094965 0.341561,0.1410617 0.707684,0.2132488 1.077244,0.2124363 z m 3.124982,3.1562313 c -0.409997,-0.409998 -0.89737,-0.734371 -1.433867,-0.954369 -0.536496,-0.219937 -1.111306,-0.331061 -1.691115,-0.326874 -0.257748,6.25e-4 -0.514997,0.02363 -0.768745,0.06875 0.09581,0.386435 0.144061,0.783121 0.143749,1.181243 0.0044,1.134119 -0.376811,2.236112 -1.081244,3.124982 1.485991,1.027932 2.507548,2.59961 2.843734,4.374975 h 3.237481 v -4.374975 c 0.0084,-1.155868 -0.440997,-2.268112 -1.249993,-3.093732 z m -8.749949,2.468736 c 0.494434,0 0.977806,-0.146624 1.388929,-0.42131 0.411123,-0.274749 0.731558,-0.665184 0.920745,-1.121994 0.189249,-0.45681 0.238748,-0.959432 0.142249,-1.444429 -0.09644,-0.484935 -0.334561,-0.93037 -0.684184,-1.279993 -0.349623,-0.3496226 -0.795058,-0.5877456 -1.279992,-0.6842456 -0.484998,-0.09644 -0.98762,-0.04694 -1.444429,0.142312 -0.45681,0.189186 -0.847308,0.5096216 -1.1219943,0.9207446 -0.274686,0.411122 -0.4213101,0.894495 -0.4213101,1.388929 0,0.663059 0.2633735,1.29893 0.7322464,1.76774 0.468809,0.468872 1.104681,0.732246 1.76774,0.732246 z m 0,1.874989 c -1.160306,0 -2.2731127,0.460935 -3.0935455,1.281368 -0.8204953,0.820495 -1.2814301,1.933301 -1.2814301,3.093607 h 8.7499496 c 0,-1.160306 -0.460935,-2.273112 -1.28143,-3.093607 -0.820433,-0.820433 -1.933239,-1.281368 -3.093544,-1.281368 z");
  631. }
  632.  
  633. [d="M13 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"]:has(+ [d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z"]) {
  634. display: none;
  635. }
  636.  
  637. [d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z"] {
  638. d: path("M 11.999999,17.3125 v 3.125 H 1.9999998 v -3.125 c 0,-1.326062 0.5267812,-2.597874 1.4644686,-3.535562 0.9376812,-0.937625 2.2094499,-1.464437 3.535531,-1.464437 1.3260624,0 2.5978748,0.526812 3.5355626,1.464437 0.937625,0.937688 1.464437,2.2095 1.464437,3.535562 z M 6.9999994,10.437501 c 0.55625,0 1.1,-0.164938 1.5625624,-0.4740001 0.4625,-0.309063 0.823,-0.7483125 1.0358749,-1.2621875 0.212875,-0.5139375 0.2685625,-1.0794374 0.16,-1.6249999 C 9.6499367,6.5307385 9.3820618,6.0296011 8.9887493,5.6362636 8.5953743,5.2429261 8.0942494,4.9750637 7.5486869,4.8665449 7.0031244,4.7580199 6.4376182,4.8137199 5.9236995,5.0265887 5.4097871,5.2394636 4.9705308,5.5999449 4.6614934,6.0624636 4.3524496,6.524976 4.1874996,7.0687448 4.1874996,7.625001 c -8.25e-4,0.3695624 0.071362,0.7356874 0.2124125,1.0772499 0.14105,0.341625 0.3481813,0.6519999 0.6095125,0.913312 0.2613312,0.261313 0.5717062,0.4685001 0.9133062,0.6095001 0.3415999,0.141063 0.7076937,0.21325 1.0772686,0.212438 z m 13.5374996,2.0875 c -0.497313,-0.497875 -1.094125,-0.885125 -1.751375,-1.1365 -0.65725,-0.251375 -1.360188,-0.361188 -2.06275,-0.32225 -0.702625,0.03894 -1.389125,0.22575 -2.014562,0.548187 -0.625438,0.322438 -1.175813,0.773313 -1.615063,1.323063 0.918813,1.273312 1.411063,2.804812 1.40625,4.374999 v 1.875 h 7.5 v -3.125 c 5e-4,-0.656812 -0.128375,-1.307249 -0.379313,-1.914249 -0.250937,-0.607 -0.619,-1.158563 -1.083187,-1.62325 z m -3.5375,-3.3375001 c 0.55625,0 1.1,-0.1649375 1.562562,-0.474 0.4625,-0.3090625 0.823,-0.7483125 1.035875,-1.2621874 0.212875,-0.5139312 0.268563,-1.0794312 0.16,-1.6249999 -0.1085,-0.545575 -0.376375,-1.0467124 -0.769687,-1.4400499 -0.393375,-0.3933375 -0.8945,-0.6612 -1.440063,-0.7697187 -0.545562,-0.108525 -1.111062,-0.052825 -1.625,0.1600437 -0.513874,0.212875 -0.953124,0.5733563 -1.262187,1.035875 -0.309062,0.4625124 -0.474,1.0062811 -0.474,1.5625374 -8.12e-4,0.3695749 0.07137,0.7356749 0.212438,1.0772499 0.141,0.341625 0.348187,0.6519999 0.6095,0.9133124 0.261312,0.2613125 0.571687,0.4685 0.913312,0.6095 0.341562,0.1410625 0.707687,0.21325 1.07725,0.2124375 z");
  639. transform: none;
  640. }
  641.  
  642. path[d="M12 23a11 11 0 1 0 0-22 11 11 0 0 0 0 22Zm1-18a1 1 0 1 0-2 0v7c0 .27.1.52.3.7l3 3a1 1 0 0 0 1.4-1.4L13 11.58V5Z"] {
  643. d: path("M 12.06 22.11 C 17.6105 22.11 22.11 17.6105 22.11 12.06 C 22.11 6.5095 17.6105 2.01 12.06 2.01 C 6.5095 2.01 2.01 6.5095 2.01 12.06 C 2.01 17.6105 6.5095 22.11 12.06 22.11 Z M 13.5402 7.3638 H 9.9222 V 12.9372 L 14.07 17.085 L 16.6283 14.5267 L 13.5402 11.4385 V 7.3638 Z");
  644. fill-rule: evenodd;
  645. clip-rule: evenodd;
  646. }
  647.  
  648. path[d="M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V5Z"],
  649. path[d="M13 6a1 1 0 1 0-2 0v5H6a1 1 0 1 0 0 2h5v5a1 1 0 1 0 2 0v-5h5a1 1 0 1 0 0-2h-5V6Z"] {
  650. d: path("M 19 10 H 14 V 5 H 10 V 10 H 5 V 14 H 10 V 19 H 14 V 14 H 19 V 10 Z");
  651. }
  652.  
  653. ::-moz-selection {
  654. background: hsl(calc(var(--accent-hue) - 3), calc(var(--saturation-factor, 1) * 59.8%), 58%);
  655. text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6666666667);
  656. color: #fff;
  657. }
  658.  
  659. ::selection {
  660. background: hsl(calc(var(--accent-hue) - 3), calc(var(--saturation-factor, 1) * 59.8%), 58%);
  661. text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6666666667);
  662. color: #fff;
  663. }
  664.  
  665. .hljs {
  666. padding: 10px;
  667. border-radius: 0;
  668. background: var(--code-background);
  669. }
  670.  
  671. .markup_a7e664 code {
  672. font-size: 0.8125rem;
  673. line-height: 1.0625rem;
  674. font-weight: lighter;
  675. -webkit-font-smoothing: antialiased;
  676. background: var(--code-background);
  677. border: none;
  678. }
  679. .markup_a7e664 code.inline {
  680. background: hsl(calc(var(--accent-hue) + 11), calc(var(--saturation-factor, 1) * 9.1%), 21.6%);
  681. padding: 0.2em 5px;
  682. }
  683. .markup_a7e664 h1,
  684. .markup_a7e664 h2,
  685. .markup_a7e664 h3,
  686. .markup_a7e664 h4,
  687. .markup_a7e664 h5,
  688. .markup_a7e664 h6 {
  689. font-family: var(--font-display);
  690. font-weight: 700;
  691. color: var(--header-primary);
  692. line-height: 1.375em;
  693. margin: 16px 0 4px;
  694. }
  695. .markup_a7e664 h1,
  696. .markup_a7e664 h2,
  697. .markup_a7e664 h3 {
  698. color: var(--channels-default-hover);
  699. font-weight: 500;
  700. }
  701.  
  702. .textBadge__45d79 {
  703. border-radius: 0;
  704. font-size: 10px;
  705. font-weight: 500;
  706. line-height: 15px;
  707. align-self: center;
  708. }
  709. .textBadge__45d79[style="background-color: var(--brand-500);"] {
  710. background-color: hsl(calc(var(--accent-hue) + 5), calc(var(--saturation-factor, 1) * 29%), 42%) !important;
  711. border: 1px solid hsl(calc(var(--accent-hue) + 5), calc(var(--saturation-factor, 1) * 34%), 60%);
  712. color: hsl(calc(var(--accent-hue) + 5), calc(var(--saturation-factor, 1) * 79%), 78%);
  713. }
  714.  
  715. .bogoTrialBadge__245f4 {
  716. border-radius: 2px;
  717. font-weight: 400;
  718. padding: 4px;
  719. text-transform: capitalize;
  720. }
  721.  
  722. .freeTrialPillInlineBlock__5839a {
  723. border-radius: 2px;
  724. padding: 4px;
  725. text-transform: capitalize;
  726. }
  727.  
  728. .withFrame__485f4 {
  729. height: 36px;
  730. margin-top: 0;
  731. width: 96px;
  732. align-self: flex-end;
  733. }
  734.  
  735. .typeMacOS__496b0.titleBar__01af6 {
  736. display: none;
  737. }
  738.  
  739. .winButton__88672 {
  740. top: 0;
  741. width: 32px;
  742. height: 32px;
  743. --winbutton-svg: hsl(calc(var(--accent-hue) - 7) calc(var(--saturation-factor, 1)*10.7%) 52.2%);
  744. color: var(--winbutton-svg);
  745. }
  746. .winButton__88672:hover, .winButton__88672:active {
  747. color: #fff;
  748. --winbutton-svg: #fff;
  749. transition: background 0.15s ease-out;
  750. }
  751. .winButton__88672 svg {
  752. height: 16px;
  753. width: 16px;
  754. }
  755. .winButton__88672 svg > * {
  756. display: none;
  757. }
  758. .winButton__88672:has(rect[height="1"]) svg {
  759. -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 256 256"><line fill="none" stroke="currentColor" stroke-width="18" stroke-miterlimit="10" x1="24" y1="209.01" x2="232" y2="209.01"></line></svg>') center/contain no-repeat;
  760. mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 256 256"><line fill="none" stroke="currentColor" stroke-width="18" stroke-miterlimit="10" x1="24" y1="209.01" x2="232" y2="209.01"></line></svg>') center/contain no-repeat;
  761. background: var(--winbutton-svg);
  762. transform: translateY(-4px);
  763. }
  764. .winButton__88672:has(rect[width="9"]) svg {
  765. -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 256 256"><rect x="24" y="42.167" fill="none" stroke="currentColor" stroke-width="18" stroke-miterlimit="10" width="208" height="171.667"></rect><line fill="none" stroke="currentColor" stroke-width="42" stroke-miterlimit="10" x1="24" y1="54.01" x2="232" y2="54.01"></line></svg>') center/contain no-repeat;
  766. mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 256 256"><rect x="24" y="42.167" fill="none" stroke="currentColor" stroke-width="18" stroke-miterlimit="10" width="208" height="171.667"></rect><line fill="none" stroke="currentColor" stroke-width="42" stroke-miterlimit="10" x1="24" y1="54.01" x2="232" y2="54.01"></line></svg>') center/contain no-repeat;
  767. background: var(--winbutton-svg);
  768. }
  769. .winButton__88672:has(polygon) svg {
  770. -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256px" height="256px" viewBox="0 0 256 256"><line fill="none" stroke="currentColor" stroke-width="24" stroke-miterlimit="10" x1="212" y1="212" x2="44" y2="44"></line><line fill="none" stroke="currentColor" stroke-width="24" stroke-miterlimit="10" x1="44" y1="212" x2="212" y2="44"></line></svg>') center/contain no-repeat;
  771. mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256px" height="256px" viewBox="0 0 256 256"><line fill="none" stroke="currentColor" stroke-width="24" stroke-miterlimit="10" x1="212" y1="212" x2="44" y2="44"></line><line fill="none" stroke="currentColor" stroke-width="24" stroke-miterlimit="10" x1="44" y1="212" x2="212" y2="44"></line></svg>') center/contain no-repeat;
  772. background: var(--winbutton-svg);
  773. }
  774.  
  775. .winButtonMinMax__72f36:hover, .winButtonMinMax__72f36:active {
  776. background: var(--background-accent);
  777. }
  778.  
  779. .winButtonClose__73489:hover, .winButtonClose__73489:active {
  780. background: #e22a27;
  781. }
  782.  
  783. .wordmarkWindows__05c46 {
  784. display: flex;
  785. flex-flow: row nowrap;
  786. align-items: center;
  787. gap: 4px;
  788. height: var(--titlebar-height);
  789. padding: 6px 4px;
  790. margin-left: 9px;
  791. box-sizing: border-box;
  792. -webkit-app-region: drag;
  793. }
  794. .wordmarkWindows__05c46 svg {
  795. display: none;
  796. }
  797. .wordmarkWindows__05c46::before {
  798. content: "";
  799. display: block;
  800. height: 16px;
  801. width: 16px;
  802. background: var(--text-muted);
  803. -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 28 20"><path fill="currentColor" d="M23.0212 1.67671C21.3107 0.879656 19.5079 0.318797 17.6584 0C17.4062 0.461742 17.1749 0.934541 16.9708 1.4184C15.003 1.12145 12.9974 1.12145 11.0283 1.4184C10.819 0.934541 10.589 0.461744 10.3368 0.00546311C8.48074 0.324393 6.67795 0.885118 4.96746 1.68231C1.56727 6.77853 0.649666 11.7538 1.11108 16.652C3.10102 18.1418 5.3262 19.2743 7.69177 20C8.22338 19.2743 8.69519 18.4993 9.09812 17.691C8.32996 17.3997 7.58522 17.0424 6.87684 16.6135C7.06531 16.4762 7.24726 16.3387 7.42403 16.1847C11.5911 18.1749 16.408 18.1749 20.5763 16.1847C20.7531 16.3332 20.9351 16.4762 21.1171 16.6135C20.41 17.0369 19.6639 17.3997 18.897 17.691C19.3052 18.4993 19.7718 19.2689 20.3021 19.9945C22.6677 19.2689 24.8929 18.1364 26.8828 16.6466H26.8893C27.43 10.9731 25.9665 6.04728 23.0212 1.67671ZM9.68041 13.6383C8.39754 13.6383 7.34085 12.4453 7.34085 10.994C7.34085 9.54272 8.37155 8.34973 9.68041 8.34973C10.9893 8.34973 12.0395 9.54272 12.0187 10.994C12.0187 12.4453 10.9828 13.6383 9.68041 13.6383ZM18.3161 13.6383C17.0332 13.6383 15.9765 12.4453 15.9765 10.994C15.9765 9.54272 17.0124 8.34973 18.3161 8.34973C19.6184 8.34973 20.6751 9.54272 20.6543 10.994C20.6543 12.4453 19.6184 13.6383 18.3161 13.6383Z"></path></svg>') center/contain no-repeat;
  804. mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 28 20"><path fill="currentColor" d="M23.0212 1.67671C21.3107 0.879656 19.5079 0.318797 17.6584 0C17.4062 0.461742 17.1749 0.934541 16.9708 1.4184C15.003 1.12145 12.9974 1.12145 11.0283 1.4184C10.819 0.934541 10.589 0.461744 10.3368 0.00546311C8.48074 0.324393 6.67795 0.885118 4.96746 1.68231C1.56727 6.77853 0.649666 11.7538 1.11108 16.652C3.10102 18.1418 5.3262 19.2743 7.69177 20C8.22338 19.2743 8.69519 18.4993 9.09812 17.691C8.32996 17.3997 7.58522 17.0424 6.87684 16.6135C7.06531 16.4762 7.24726 16.3387 7.42403 16.1847C11.5911 18.1749 16.408 18.1749 20.5763 16.1847C20.7531 16.3332 20.9351 16.4762 21.1171 16.6135C20.41 17.0369 19.6639 17.3997 18.897 17.691C19.3052 18.4993 19.7718 19.2689 20.3021 19.9945C22.6677 19.2689 24.8929 18.1364 26.8828 16.6466H26.8893C27.43 10.9731 25.9665 6.04728 23.0212 1.67671ZM9.68041 13.6383C8.39754 13.6383 7.34085 12.4453 7.34085 10.994C7.34085 9.54272 8.37155 8.34973 9.68041 8.34973C10.9893 8.34973 12.0395 9.54272 12.0187 10.994C12.0187 12.4453 10.9828 13.6383 9.68041 13.6383ZM18.3161 13.6383C17.0332 13.6383 15.9765 12.4453 15.9765 10.994C15.9765 9.54272 17.0124 8.34973 18.3161 8.34973C19.6184 8.34973 20.6751 9.54272 20.6543 10.994C20.6543 12.4453 19.6184 13.6383 18.3161 13.6383Z"></path></svg>') center/contain no-repeat;
  805. }
  806. .wordmarkWindows__05c46::after {
  807. content: "Discord";
  808. font-weight: 500;
  809. font-size: 12px;
  810. color: var(--text-muted);
  811. }
  812.  
  813. html.app-focused #app-mount::before {
  814. content: "";
  815. display: block;
  816. height: 1px;
  817. width: 100%;
  818. background: linear-gradient(to right, transparent 10%, hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 100%), 55.1%, 0.325) 50%, transparent 90%);
  819. position: absolute;
  820. z-index: 9999;
  821. top: 0;
  822. }
  823.  
  824. #app-mount .tooltip__01384 {
  825. border-radius: 2px;
  826. font-size: 13px;
  827. font-weight: 400;
  828. color: var(--tooltip-text);
  829. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3333333333), 2px 2px 16px 1px rgba(0, 0, 0, 0.3333333333);
  830. }
  831. #app-mount .tooltipPrimary_e5c00d {
  832. background: var(--tooltip-background);
  833. }
  834. #app-mount .tooltipPointer_a79354 {
  835. display: none;
  836. }
  837. #app-mount .tooltipContent__79a2d {
  838. padding: 6px 8px;
  839. }
  840. #app-mount .tooltipBlack__90eaa {
  841. background: var(--tooltip-background);
  842. color: var(--tooltip-text);
  843. }
  844.  
  845. .tooltipPremiumFooterContainer__6fefb {
  846. border-radius: 0;
  847. }
  848. .tooltipPremiumFooterContainer__6fefb .tooltipPremiumFooterTierSegment__11c7e {
  849. border-left-color: var(--tooltip-background);
  850. border-bottom-color: var(--tooltip-background);
  851. border-right-color: var(--tooltip-background);
  852. border-top-color: var(--tooltip-background);
  853. }
  854.  
  855. .wrapper_a7e7a8 {
  856. box-shadow: inset hsl(calc(var(--accent-hue) + 13), calc(var(--saturation-factor, 1) * 13.5%), 27.6%, 0.65) -1px -1px 0 0, inset hsl(calc(var(--accent-hue) + 13), calc(var(--saturation-factor, 1) * 13.5%), 27.6%, 0.45) 1px 1px 0 0;
  857. }
  858. .platform-osx .wrapper_a7e7a8, .platform-linux .wrapper_a7e7a8, .platform-web .wrapper_a7e7a8 {
  859. margin-top: var(--titlebar-height);
  860. }
  861.  
  862. html.platform-osx #app-mount .base__3e6af, html.platform-linux #app-mount .base__3e6af, html.platform-web #app-mount .base__3e6af {
  863. top: 0 !important;
  864. margin-top: var(--titlebar-height) !important;
  865. }
  866.  
  867. body #app-mount:-webkit-full-screen .app_b1f720 .base__3e6af {
  868. bottom: 0 !important;
  869. }
  870.  
  871. .bar_edc096 {
  872. text-transform: capitalize;
  873. height: unset;
  874. border-radius: 3px;
  875. box-shadow: 0 0 3px #000;
  876. }
  877. .bar_edc096[aria-hidden=true][style="transform: translateY(180%);"] {
  878. transform: translateY(calc(180% + 24px)) !important;
  879. }
  880.  
  881. .mention__1afd3 {
  882. opacity: 1;
  883. }
  884.  
  885. .wrapper__3af0b foreignObject {
  886. -webkit-mask: none;
  887. mask: none;
  888. }
  889.  
  890. .wrapper__3af0b,
  891. .childWrapper__01b9c {
  892. border-radius: 0;
  893. }
  894.  
  895. .tutorialContainer__890ea foreignObject, .tutorialContainer__890ea + .listItem_fa7b36 foreignObject, .tutorialContainer_dc6fde foreignObject, .tutorialContainer_dc6fde + .listItem_fa7b36 foreignObject {
  896. -webkit-mask: none;
  897. mask: none;
  898. border-radius: 2px;
  899. }
  900.  
  901. #app-mount .circleIconButton_d8df29 {
  902. background: none;
  903. }
  904. .circleIconButton_d8df29.selected__5250e svg {
  905. background: var(--interactive-active);
  906. }
  907. .circleIconButton_d8df29 svg {
  908. color: var(--background-tertiary);
  909. background: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 9%), 44%);
  910. border-radius: 2px;
  911. height: 28px;
  912. width: 28px;
  913. }
  914. .circleIconButton_d8df29 path {
  915. scale: 0.8;
  916. transform-origin: center;
  917. }
  918.  
  919. .wrapper_d281dd.selected_f5ec8e .childWrapper__01b9c, .wrapper_d281dd:hover .childWrapper__01b9c {
  920. color: var(--background-tertiary);
  921. background-color: transparent;
  922. }
  923. .wrapper_d281dd:has(.childWrapper__01b9c):hover .childWrapper__01b9c::before {
  924. background: var(--interactive-active);
  925. }
  926. .wrapper_d281dd:has(.childWrapper__01b9c).selected_f5ec8e:not(:hover) {
  927. pointer-events: none;
  928. }
  929. .wrapper_d281dd:has(.childWrapper__01b9c).selected_f5ec8e:not(:hover) .childWrapper__01b9c::before {
  930. background: var(--brand-experiment);
  931. }
  932.  
  933. .childWrapper__01b9c {
  934. color: var(--background-tertiary);
  935. background: none;
  936. }
  937. .childWrapper__01b9c svg {
  938. width: 18px;
  939. }
  940. .childWrapper__01b9c .favoriteIcon__91c06 {
  941. width: 20px;
  942. margin-bottom: 1px;
  943. }
  944. .childWrapper__01b9c::before {
  945. content: "";
  946. display: block;
  947. position: absolute;
  948. height: 28px;
  949. width: 28px;
  950. background: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 9%), 44%);
  951. z-index: -1;
  952. border-radius: 2px;
  953. }
  954.  
  955. .item_f9d377 {
  956. display: none;
  957. }
  958.  
  959. .lowerBadge__669e7 {
  960. z-index: 3;
  961. }
  962.  
  963. .baseShapeRound__95d0f,
  964. .numberBadge__50328 {
  965. border-radius: 0;
  966. }
  967.  
  968. .blobContainer__5ee50 {
  969. position: relative;
  970. }
  971. .blobContainer__5ee50::before {
  972. content: "";
  973. position: absolute;
  974. inset: 0;
  975. pointer-events: none;
  976. border-radius: 0;
  977. box-shadow: 0 0 0 1px var(--gpColor-Grey), inset 0 0 0 1px var(--background-tertiary);
  978. transition: box-shadow 0.15s ease;
  979. z-index: 1;
  980. }
  981. .blobContainer__5ee50.selected__98d51:before {
  982. --gpColor-Grey: var(--brand-experiment);
  983. }
  984. .listItem_fa7b36:has(.item_f9d377) .blobContainer__5ee50:not(.selected__98d51):before {
  985. --gpColor-Grey: var(--header-primary);
  986. }
  987. .blobContainer__5ee50:not(.selected__98d51):has(.numberBadge__50328[style^="background-color: var(--status-danger);"]):before {
  988. --gpColor-Grey: var(--status-danger);
  989. }
  990.  
  991. .placeholderMask__94802 foreignObject[mask="url(#svg-mask-squircle)"] {
  992. -webkit-mask: none;
  993. mask: none;
  994. }
  995.  
  996. .dragInner_a23293 {
  997. background-color: var(--header-button-background);
  998. }
  999.  
  1000. #app-mount .wrapper_a7e7a8.guilds__2b93a [class*=expandedFolderBackground] {
  1001. border-radius: 2px;
  1002. }
  1003.  
  1004. #app-mount .folder__17546 {
  1005. background: none;
  1006. }
  1007.  
  1008. .expandedFolderBackground__1bec6 {
  1009. bottom: 0;
  1010. background-color: var(--brand-experiment-700);
  1011. }
  1012. .expandedFolderBackground__1bec6.collapsed__0a270 {
  1013. background-color: var(--header-button-background);
  1014. height: var(--server-size);
  1015. }
  1016. .expandedFolderBackground__1bec6.collapsed__0a270.hover__043de {
  1017. background-color: var(--brand-experiment-700);
  1018. }
  1019. .expandedFolderBackground__1bec6.collapsed__0a270:before {
  1020. content: "";
  1021. position: absolute;
  1022. inset: 0;
  1023. pointer-events: none;
  1024. border-radius: 0;
  1025. box-shadow: 0 0 0 1px var(--gpColor-Grey), inset 0 0 0 1px var(--background-tertiary);
  1026. transition: box-shadow 0.15s ease;
  1027. z-index: 1;
  1028. }
  1029. .expandedFolderBackground__1bec6.collapsed__0a270:has(+ .listItem_fa7b36 .item_f9d377[style="opacity: 1; height: 40px; transform: none;"]):before {
  1030. --gpColor-Grey: var(--brand-experiment);
  1031. }
  1032. .expandedFolderBackground__1bec6.collapsed__0a270:has(+ .listItem_fa7b36 .item_f9d377):before {
  1033. --gpColor-Grey: var(--header-primary);
  1034. }
  1035.  
  1036. [class^=folderIconWrapper] {
  1037. border-radius: 2px;
  1038. background-color: transparent !important;
  1039. }
  1040.  
  1041. .expandedFolderIconWrapper__458cf svg {
  1042. color: var(--brand-experiment-300) !important;
  1043. }
  1044.  
  1045. .sidebar_ded4b5,
  1046. #app-mount .container__590e2 {
  1047. background: none;
  1048. }
  1049.  
  1050. .sidebar_ded4b5 {
  1051. width: 210px;
  1052. margin-right: var(--app-gutter);
  1053. }
  1054.  
  1055. .bar__004d9 {
  1056. background: #e5e5e5;
  1057. box-shadow: 0 0 3px #000;
  1058. padding: 0 6px;
  1059. border-radius: 3px;
  1060. opacity: 1;
  1061. }
  1062. .bar__004d9:hover {
  1063. background: var(--btn-dark-text);
  1064. --interactive-normal: #fff;
  1065. }
  1066.  
  1067. .mentionsBar__4b47a {
  1068. --status-danger-text: #fff;
  1069. background: var(--status-danger);
  1070. }
  1071. .mentionsBar__4b47a:hover {
  1072. background: var(--status-danger);
  1073. }
  1074.  
  1075. .barText__1a44f {
  1076. text-transform: capitalize;
  1077. }
  1078.  
  1079. .numberBadge__50328 {
  1080. border-radius: 2px;
  1081. min-width: unset;
  1082. width: unset !important;
  1083. padding-left: 4px;
  1084. padding-right: 4px !important;
  1085. font-size: 11px;
  1086. font-weight: 400;
  1087. letter-spacing: 0;
  1088. }
  1089. .listItem_fa7b36 .numberBadge__50328 {
  1090. border-radius: 0;
  1091. }
  1092.  
  1093. .header__104ca {
  1094. position: fixed;
  1095. top: 0;
  1096. left: 76px;
  1097. -webkit-app-region: drag;
  1098. padding: 6px 4px 6px 10px;
  1099. box-shadow: none;
  1100. width: 189px;
  1101. }
  1102. .platform-linux .header__104ca, .platform-web .header__104ca {
  1103. left: 9px;
  1104. }
  1105. .header__104ca .headerContent_ee8727 {
  1106. -webkit-app-region: no-drag;
  1107. width: -moz-fit-content;
  1108. width: fit-content;
  1109. }
  1110. .header__104ca .name_c08dbc {
  1111. font-family: var(--font-display);
  1112. font-size: 12px;
  1113. line-height: 20px;
  1114. font-weight: 500;
  1115. cursor: pointer;
  1116. }
  1117. .header__104ca .dropdownButton__3f3df {
  1118. display: none;
  1119. }
  1120.  
  1121. .clickable__2d589 .header__104ca:hover,
  1122. .selected__0b1ad .header__104ca {
  1123. background-color: transparent;
  1124. }
  1125.  
  1126. #app-mount .clickable__2d589 .header__104ca:hover .headerContent_ee8727,
  1127. #app-mount .selected__0b1ad .header__104ca .headerContent_ee8727 {
  1128. color: var(--interactive-active);
  1129. }
  1130.  
  1131. #app-mount .headerContent_ee8727 {
  1132. color: var(--interactive-normal);
  1133. transition: color 0.15s ease;
  1134. filter: none;
  1135. }
  1136.  
  1137. .guildIconV2Container__53cdb {
  1138. margin-right: 4px;
  1139. }
  1140.  
  1141. .panels__58331 {
  1142. background: none;
  1143. }
  1144. .panels__58331:not(:has(.wrapper__0ed4a:empty + .container_ca50b9:nth-child(2))) {
  1145. position: relative;
  1146. padding: 15px 0 15px 0;
  1147. background: radial-gradient(50% 16px at top, hsla(var(--rtc-hsl, 207, 34%, 43%), 0.25) 0%, hsla(var(--rtc-hsl, 207, 24%, 43%), 0) 100%);
  1148. }
  1149. .panels__58331:not(:has(.wrapper__0ed4a:empty + .container_ca50b9:nth-child(2))):has([class*=rtcConnectionStatus]) {
  1150. --rtc-opacity: 1;
  1151. }
  1152. .panels__58331:not(:has(.wrapper__0ed4a:empty + .container_ca50b9:nth-child(2))):has(.rtcConnectionStatusConnected__1d5b0) {
  1153. --rtc-hsl: 93, 50%, 50%;
  1154. }
  1155. .panels__58331:not(:has(.wrapper__0ed4a:empty + .container_ca50b9:nth-child(2))):has(.rtcConnectionStatusConnecting__7b83a) {
  1156. --rtc-hsl: 58, 70%, 47%;
  1157. }
  1158. .panels__58331:not(:has(.wrapper__0ed4a:empty + .container_ca50b9:nth-child(2))):has(.rtcConnectionStatusError_f91509) {
  1159. --rtc-hsl: 0, 85%, 57%;
  1160. }
  1161. .panels__58331:not(:has(.wrapper__0ed4a:empty + .container_ca50b9:nth-child(2)))::before {
  1162. content: "";
  1163. display: block;
  1164. height: 0.5px;
  1165. width: 100%;
  1166. background: linear-gradient(to right, hsla(var(--rtc-hsl, 225, 100%, 60%), 0) 0%, hsla(var(--rtc-hsl, 192, 100%, 50%), var(--rtc-opacity, 0.4)) 50%, hsla(var(--rtc-hsl, 225, 100%, 60%), 0) 100%);
  1167. position: absolute;
  1168. top: 0;
  1169. }
  1170. .panels__58331 > div:not(.container_ca50b9) button.enabled__470f0 {
  1171. background: rgba(0, 0, 0, 0.2);
  1172. }
  1173. .panels__58331 > div:not(.container_ca50b9) button.enabled__470f0:hover {
  1174. background: var(--btn-dark-hover);
  1175. }
  1176. .panels__58331 .connection__5bb32 .flex_f5fbb7 {
  1177. margin-left: 6px;
  1178. }
  1179. .panels__58331 .connection__5bb32 .flex_f5fbb7:has(> button) {
  1180. gap: 4px;
  1181. }
  1182. .panels__58331 .connection__5bb32 button.enabled__470f0:has([d*="M21.1169 1.11603L22.8839 2.88403L19.7679 6.00003L22.8839"]):hover {
  1183. background: var(--status-danger);
  1184. color: #fff;
  1185. }
  1186. .panels__58331 .rtcConnectionStatusLabel__7029b {
  1187. font-size: 12px;
  1188. }
  1189. .panels__58331 .actionButtons_b58cbb {
  1190. grid-gap: 4px;
  1191. }
  1192. .panels__58331 .actionButtons_b58cbb .button__66e8c.buttonColor_a6eb73 {
  1193. color: var(--btn-brand-text);
  1194. background: var(--btn-brand);
  1195. box-shadow: none;
  1196. transition: none;
  1197. }
  1198. .panels__58331 .actionButtons_b58cbb .button__66e8c.buttonColor_a6eb73:hover {
  1199. background: var(--btn-brand-hover);
  1200. color: #fff;
  1201. }
  1202.  
  1203. #app-mount .panel_bd8c76 {
  1204. background: none;
  1205. }
  1206.  
  1207. .activityPanel__22355:has(+ .wrapper__0ed4a:empty) {
  1208. border-bottom: none;
  1209. }
  1210.  
  1211. .container_d667ff {
  1212. background: none;
  1213. border: none;
  1214. }
  1215.  
  1216. .container_ca50b9 {
  1217. position: fixed;
  1218. top: 0;
  1219. right: 96px;
  1220. height: var(--titlebar-height);
  1221. width: calc(100% - 96px - 265px);
  1222. padding: 0 6px 0 0;
  1223. justify-content: right;
  1224. -webkit-app-region: drag;
  1225. box-sizing: border-box;
  1226. }
  1227. #app-mount .container_ca50b9 {
  1228. background: var(--background-tertiary);
  1229. }
  1230. .platform-osx .container_ca50b9 {
  1231. right: 0;
  1232. width: 100%;
  1233. }
  1234. .platform-osx .container_ca50b9::before {
  1235. left: 0;
  1236. }
  1237. .platform-linux .container_ca50b9, .platform-web .container_ca50b9 {
  1238. right: 0;
  1239. width: 100%;
  1240. }
  1241. .platform-linux .container_ca50b9::before, .platform-web .container_ca50b9::before {
  1242. left: 0;
  1243. }
  1244. .container_ca50b9::before {
  1245. content: "";
  1246. display: block;
  1247. position: absolute;
  1248. top: 0;
  1249. left: -265px;
  1250. height: 100%;
  1251. width: 100vw;
  1252. pointer-events: none;
  1253. z-index: -1;
  1254. background: var(--background-tertiary);
  1255. box-shadow: inset hsl(calc(var(--accent-hue) + 13), calc(var(--saturation-factor, 1) * 13.5%), 27.6%, 0.75) 1px 1px 1px 0, inset hsl(calc(var(--accent-hue) + 13), calc(var(--saturation-factor, 1) * 13.5%), 27.6%, 0.25) -1px -1px 0 0;
  1256. }
  1257. .container_ca50b9 > * {
  1258. -webkit-app-region: no-drag;
  1259. }
  1260. .container_ca50b9 > .flex_f5fbb7 {
  1261. gap: 8px;
  1262. }
  1263. .container_ca50b9 > .flex_f5fbb7 > button {
  1264. height: var(--titlebar-height);
  1265. height: 24px;
  1266. min-width: 48px;
  1267. border-radius: 2px;
  1268. background: var(--header-button-background);
  1269. transition: background 0.15s ease-out, color 0.15s ease-out;
  1270. }
  1271. .container_ca50b9 > .flex_f5fbb7 > button:hover {
  1272. background: var(--background-accent);
  1273. color: var(--interactive-active);
  1274. }
  1275. .container_ca50b9 > .flex_f5fbb7 > button svg {
  1276. height: 16px;
  1277. width: 16px;
  1278. }
  1279.  
  1280. #app-mount .disabledButtonWrapper__69c70 {
  1281. padding: 0;
  1282. background: none;
  1283. }
  1284.  
  1285. .withTagAsButton_cc125f:hover,
  1286. .withTagless__98b7d:hover {
  1287. background-color: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 100%), 64.9%, 0.2);
  1288. border-radius: 2px;
  1289. }
  1290.  
  1291. .avatarWrapper_ba5175 {
  1292. order: 1;
  1293. height: 24px;
  1294. margin-left: 8px;
  1295. margin-right: 0;
  1296. padding-left: 3px;
  1297. justify-content: center;
  1298. background: var(--header-button-background);
  1299. border-radius: 2px;
  1300. transition: background 0.15s ease-out;
  1301. overflow: hidden;
  1302. }
  1303. .avatarWrapper_ba5175 .avatar_f8541f {
  1304. height: 23px !important;
  1305. width: 23px !important;
  1306. }
  1307. .avatarWrapper_ba5175 svg {
  1308. height: 27px;
  1309. width: 27px;
  1310. }
  1311.  
  1312. .nameTag__0e320 {
  1313. display: flex;
  1314. flex-wrap: nowrap;
  1315. align-items: center;
  1316. gap: 8px;
  1317. }
  1318. .nameTag__0e320 > div {
  1319. display: flex;
  1320. }
  1321. .withTagAsButton_cc125f .nameTag__0e320, .withTagless__98b7d .nameTag__0e320 {
  1322. padding-left: 5px;
  1323. }
  1324. .nameTag__0e320 .subtext__8f869 {
  1325. line-height: 13px;
  1326. }
  1327.  
  1328. .title__10613 {
  1329. color: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 100%), 64.9%);
  1330. font-weight: 400;
  1331. font-size: 12px;
  1332. }
  1333.  
  1334. .hoverRoll__041cb {
  1335. cursor: unset;
  1336. }
  1337.  
  1338. .hovered__243e5 {
  1339. margin-top: 2px;
  1340. }
  1341.  
  1342. .animatedContainer__341f6 {
  1343. scale: 0.86;
  1344. border-radius: 4px;
  1345. z-index: 2;
  1346. margin-bottom: 30px;
  1347. }
  1348. .animatedContainer__341f6[style*="opacity: 0;"] {
  1349. pointer-events: none;
  1350. }
  1351.  
  1352. .bannerImage__39c51 {
  1353. width: 210px;
  1354. }
  1355.  
  1356. .bannerImg_c85b7f {
  1357. width: 210px !important;
  1358. }
  1359.  
  1360. .content__23cab > div[style="height: 84px;"] ~ .container__4f639 .progressBarContainer__9b571 {
  1361. position: absolute;
  1362. top: -90px;
  1363. left: 11px;
  1364. width: 188px;
  1365. height: 124px;
  1366. margin: 0;
  1367. }
  1368. .content__23cab > div[style="height: 84px;"] ~ .container__4f639 .progressBar_db0972 {
  1369. height: 100%;
  1370. }
  1371. .content__23cab > div[style="height: 84px;"] ~ .container__4f639 .textArea_f2029c {
  1372. margin-top: 32px;
  1373. }
  1374.  
  1375. .link__95dc0 {
  1376. border-radius: 0;
  1377. }
  1378.  
  1379. .modeSelected__487d6:hover .link__95dc0,
  1380. .modeSelected__487d6 .link__95dc0 {
  1381. background: var(--channel-selected);
  1382. }
  1383.  
  1384. .wrapper__7bcde:not(.modeSelected__487d6):hover .link__95dc0 {
  1385. background: none;
  1386. }
  1387.  
  1388. .container-q97qHp {
  1389. font-size: 14px;
  1390. font-weight: 700;
  1391. color: var(--channels-category);
  1392. }
  1393.  
  1394. .wrapper__9c483:hover .icon_ef4486 {
  1395. color: var(--channels-category);
  1396. }
  1397. .wrapper__9c483:hover .name__590d6 {
  1398. color: var(--channels-default-hover);
  1399. }
  1400. .wrapper__9c483.muted_de6e6e:hover .icon_ef4486 {
  1401. color: var(--channels-category);
  1402. }
  1403. .wrapper__9c483.muted_de6e6e:hover .name__590d6 {
  1404. color: var(--channels-default-hover);
  1405. }
  1406.  
  1407. .name__8d1ec {
  1408. font-size: 12px;
  1409. font-weight: 700;
  1410. }
  1411.  
  1412. .modeMuted__0aeea:hover .name__8d1ec,
  1413. .wrapper__7bcde:not(.modeSelected__487d6):hover .name__8d1ec {
  1414. color: var(--channels-default-hover);
  1415. }
  1416.  
  1417. .modeConnected__1c02e .name__8d1ec,
  1418. .modeConnected__1c02e:hover .name__8d1ec,
  1419. .modeSelected__487d6 .name__8d1ec,
  1420. .modeSelected__487d6:hover .name__8d1ec,
  1421. .modeUnread_f74c03 .name__8d1ec,
  1422. .modeUnread_f74c03:hover .name__8d1ec,
  1423. .notInteractive_a7d9fb.modeConnected__1c02e .name__8d1ec,
  1424. .notInteractive_a7d9fb.modeSelected__487d6 .name__8d1ec {
  1425. font-weight: 700;
  1426. }
  1427.  
  1428. .icon_eff5d4 {
  1429. width: 16px;
  1430. height: 16px;
  1431. }
  1432.  
  1433. .iconContainer__3f9b0 {
  1434. display: flex;
  1435. align-self: center;
  1436. }
  1437.  
  1438. .wrapper__9c483:not(:hover) .arrow_cb03b8 {
  1439. opacity: 0;
  1440. }
  1441.  
  1442. .spineBorder_bdec8b {
  1443. background: var(--channels-category);
  1444. }
  1445.  
  1446. .spine__88e6d {
  1447. color: var(--channels-category);
  1448. }
  1449.  
  1450. .unread__48cf4 {
  1451. position: absolute;
  1452. height: 16px;
  1453. width: 2px;
  1454. border-radius: 0;
  1455. top: 50%;
  1456. left: 2px;
  1457. margin-top: -8px;
  1458. }
  1459.  
  1460. .listDefault__205d0 .clickable__137bc:hover .content_b60865 {
  1461. background: none;
  1462. }
  1463. .listDefault__205d0 .clickable__137bc:hover .username__73ce9 {
  1464. color: var(--channels-default-hover);
  1465. }
  1466. .listDefault__205d0 .clickable__137bc.selected__471ca .content_b60865 {
  1467. background: var(--channel-selected);
  1468. }
  1469.  
  1470. .content_b60865 {
  1471. border-radius: 0;
  1472. }
  1473.  
  1474. .wrapper__5848b {
  1475. line-height: 16px;
  1476. font-weight: 700;
  1477. height: 16px;
  1478. border-radius: 2px;
  1479. overflow: hidden;
  1480. color: var(--channels-default);
  1481. }
  1482. .wrapper__5848b .users__65981 {
  1483. width: 28px;
  1484. background-color: var(--btn-brand);
  1485. }
  1486.  
  1487. .privateChannels__93473 {
  1488. background: none;
  1489. padding-top: 16px;
  1490. }
  1491. .privateChannels__93473 .searchBar_e4ea2a {
  1492. height: unset;
  1493. box-shadow: none;
  1494. }
  1495. .privateChannels__93473 .searchBar_e4ea2a .searchBarComponent__22760 {
  1496. height: unset;
  1497. border-radius: 2px;
  1498. font-size: 14px;
  1499. font-weight: 400;
  1500. line-height: 24px;
  1501. text-align: center;
  1502. color: var(--btn-brand-text);
  1503. background: var(--btn-brand);
  1504. }
  1505. .privateChannels__93473 .searchBar_e4ea2a .searchBarComponent__22760:hover {
  1506. background: var(--btn-brand-hover);
  1507. color: #fff;
  1508. }
  1509. .privateChannels__93473 .scroller__4b984 {
  1510. background: none;
  1511. }
  1512.  
  1513. .channel_c21703 {
  1514. border-radius: 0;
  1515. }
  1516.  
  1517. .interactive__776ee:focus-within, .interactive__776ee:hover {
  1518. color: var(--channels-default-hover);
  1519. background: none;
  1520. }
  1521. .interactive__776ee.selected_d94cf9 {
  1522. color: var(--interactive-active);
  1523. background: var(--channel-selected);
  1524. }
  1525. .interactive__776ee .highlighted__7bba7:hover {
  1526. color: var(--channels-default-hover);
  1527. }
  1528.  
  1529. #app-mount .name__02dbd {
  1530. font-size: 12px;
  1531. font-weight: 700;
  1532. }
  1533.  
  1534. #app-mount .container__10dc7,
  1535. #app-mount .container__7590f {
  1536. background: none;
  1537. }
  1538.  
  1539. .pageBody_db54f5 {
  1540. padding: var(--content-gutter) 0 0 0;
  1541. }
  1542. .pageBody_db54f5 .header_d02e62 {
  1543. margin: 0;
  1544. max-width: var(--content-inner-width);
  1545. }
  1546. .pageBody_db54f5 .search__4a09e {
  1547. background: rgba(0, 0, 0, 0.2);
  1548. border: 1px solid #000;
  1549. box-shadow: 1px 1px 0 0 var(--store-search-border);
  1550. border-radius: 3px;
  1551. }
  1552.  
  1553. .browser_c50ce0 .scrollerInner__55d07 {
  1554. padding: 0;
  1555. }
  1556. .browser_c50ce0 .separator__3cfd2 {
  1557. display: none;
  1558. }
  1559. .browser_c50ce0 .categoryRow_df4323 {
  1560. max-width: calc(var(--content-inner-width) - 40px);
  1561. background-color: var(--store-body-header);
  1562. padding: 10px 20px 10px 20px;
  1563. margin-top: var(--content-gutter);
  1564. }
  1565. .browser_c50ce0 .categoryRow_df4323 .selectAll_a87487 [data-text-variant="text-xs/medium"] {
  1566. display: flex;
  1567. align-items: center;
  1568. --text-muted: #fff;
  1569. }
  1570. .browser_c50ce0 .categoryText__3348f {
  1571. font-weight: normal;
  1572. font-size: 14px;
  1573. line-height: 16px;
  1574. letter-spacing: 0.03em;
  1575. text-transform: uppercase;
  1576. --text-muted: #fff;
  1577. }
  1578. .browser_c50ce0 .channelRow__96673 {
  1579. max-width: calc(var(--content-inner-width) - 16px - 40px);
  1580. background: rgba(0, 0, 0, 0.4);
  1581. position: relative;
  1582. padding: 6px 28px;
  1583. height: 46px;
  1584. }
  1585. .browser_c50ce0 .channelRow__96673.firstChannel__94f31 {
  1586. border-top-left-radius: 0;
  1587. border-top-right-radius: 0;
  1588. padding-top: 26px;
  1589. }
  1590. .browser_c50ce0 .channelRow__96673.firstChannel__94f31 .iconContainer__3f9b0 {
  1591. top: 20px;
  1592. }
  1593. .browser_c50ce0 .channelRow__96673.firstChannel__94f31:before {
  1594. top: 20px;
  1595. }
  1596. .browser_c50ce0 .channelRow__96673.lastChannel__129f1 {
  1597. border-bottom-left-radius: 0;
  1598. border-bottom-right-radius: 0;
  1599. padding-bottom: 26px;
  1600. }
  1601. .browser_c50ce0 .channelRow__96673.lastChannel__129f1 .iconContainer__3f9b0 {
  1602. bottom: 20px;
  1603. }
  1604. .browser_c50ce0 .channelRow__96673.lastChannel__129f1:before {
  1605. bottom: 20px;
  1606. }
  1607. .browser_c50ce0 .channelRow__96673:hover:not(.disabled__583e7) {
  1608. background: rgba(0, 0, 0, 0.4);
  1609. }
  1610. .browser_c50ce0 .channelRow__96673:hover:not(.disabled__583e7):before {
  1611. background: var(--background-accent);
  1612. transition: background 0.2s linear;
  1613. }
  1614. .browser_c50ce0 .channelRow__96673:hover:not(.disabled__583e7) .viewChannelButton_ee7ff6 {
  1615. background-color: var(--background-accent-hover);
  1616. transition: background 0.2s linear, box-shadow 0.2s ease-in-out;
  1617. }
  1618. .browser_c50ce0 .channelRow__96673:hover:not(:has(.checked__24ad6)) .iconContainer__3f9b0 {
  1619. background-color: var(--background-accent-hover);
  1620. transition: background 0.2s linear;
  1621. }
  1622. .browser_c50ce0 .channelRow__96673:before {
  1623. content: "";
  1624. display: block;
  1625. position: absolute;
  1626. inset: 0 0 0 20px;
  1627. height: 58px;
  1628. width: calc(100% - 40px);
  1629. z-index: 0;
  1630. }
  1631. .browser_c50ce0 .channelRow__96673 .channelInfo__698ae {
  1632. z-index: 1;
  1633. }
  1634. .browser_c50ce0 .channelRow__96673 .iconContainer__3f9b0 {
  1635. width: 98px;
  1636. height: 45px;
  1637. background: var(--background-accent);
  1638. align-items: center;
  1639. justify-content: center;
  1640. position: absolute;
  1641. top: 0;
  1642. bottom: 0;
  1643. margin: auto 0;
  1644. }
  1645. .browser_c50ce0 .channelRow__96673 .iconContainer__3f9b0 svg {
  1646. color: #fff;
  1647. height: 18px;
  1648. width: 18px;
  1649. }
  1650. .browser_c50ce0 .channelRow__96673:has(.checked__24ad6) .iconContainer__3f9b0 {
  1651. background: var(--brand-experiment);
  1652. }
  1653. .browser_c50ce0 .channelRow__96673 .channelName__36642 .overflow__87fe8,
  1654. .browser_c50ce0 .channelRow__96673 .channelSubtitles__5521e {
  1655. margin-left: 110px;
  1656. }
  1657. .browser_c50ce0 .channelRow__96673 .channelText_de4e73 {
  1658. color: #fff;
  1659. line-height: 20px;
  1660. font-size: 16px;
  1661. font-weight: 400;
  1662. }
  1663. .browser_c50ce0 .channelRow__96673 .channelSubtitles__5521e .channelSubtitle__671b9 {
  1664. color: var(--text-muted);
  1665. font-size: 12px;
  1666. line-height: 22px;
  1667. letter-spacing: 0.5px;
  1668. text-transform: uppercase;
  1669. font-weight: 700;
  1670. }
  1671. .browser_c50ce0 .channelRow__96673 .channelSubtitles__5521e .subtitleSeparator__7ee0b ~ .channelSubtitle__671b9 {
  1672. color: var(--background-accent-hover);
  1673. }
  1674. .browser_c50ce0 .channelRow__96673 .channelSubtitles__5521e .topic__42290 {
  1675. font-size: 12px;
  1676. line-height: 22px;
  1677. color: var(--background-accent-hover);
  1678. }
  1679. .browser_c50ce0 .channelRow__96673 .subtitleSeparator__7ee0b {
  1680. opacity: 0;
  1681. width: 4px;
  1682. margin: 0;
  1683. }
  1684. .browser_c50ce0 .channelRow__96673 .viewChannelButton_ee7ff6 {
  1685. margin-right: 0;
  1686. border: none;
  1687. color: var(--text-lighter);
  1688. background: var(--btn-grey);
  1689. }
  1690. .browser_c50ce0 .channelRow__96673 .viewChannelButton_ee7ff6:hover {
  1691. background: var(--btn-grey-hover);
  1692. color: #fff;
  1693. box-shadow: var(--btn-grey-boxshadow);
  1694. }
  1695. .browser_c50ce0 .channelRow__96673 .checkboxWrapper__02583 {
  1696. display: none;
  1697. }
  1698.  
  1699. #app-mount .emptyPage__3e15d,
  1700. #app-mount .scrollerContainer_bf5dbd {
  1701. background: none;
  1702. }
  1703.  
  1704. .chat__52833 .container__10dc7 .tabBar_d4764b {
  1705. padding: 0;
  1706. margin: 10px 0 10px 0;
  1707. gap: 0;
  1708. display: flex;
  1709. flex-direction: row;
  1710. position: relative;
  1711. border-radius: 3px;
  1712. background: rgba(0, 0, 0, 0.2);
  1713. border: 1px solid #000;
  1714. box-shadow: 1px 1px 0 0 var(--store-search-border);
  1715. }
  1716. .chat__52833 .container__10dc7 .tabBar_d4764b:has(.item__48dda:nth-child(1):last-child) {
  1717. --btn-count: 1;
  1718. }
  1719. .chat__52833 .container__10dc7 .tabBar_d4764b:has(.item__48dda:nth-child(2):last-child) {
  1720. --btn-count: 2;
  1721. }
  1722. .chat__52833 .container__10dc7 .tabBar_d4764b:has([aria-selected=true]:nth-child(2)):before {
  1723. translate: 100%;
  1724. }
  1725. .chat__52833 .container__10dc7 .tabBar_d4764b .item__48dda {
  1726. background: none;
  1727. margin: 0;
  1728. display: flex;
  1729. flex: 0 1 calc(100% / var(--btn-count));
  1730. justify-content: center;
  1731. border-bottom: none;
  1732. padding: 0;
  1733. height: 34px;
  1734. padding: 8px 14px;
  1735. font-size: 14px;
  1736. font-weight: 400;
  1737. box-sizing: border-box;
  1738. }
  1739. .chat__52833 .container__10dc7 .tabBar_d4764b .item__48dda:not([aria-selected=true]):hover {
  1740. background: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 40%), 23%, 0.4);
  1741. }
  1742. .chat__52833 .container__10dc7 .tabBar_d4764b::before {
  1743. content: "";
  1744. position: absolute;
  1745. height: 100%;
  1746. width: calc(100% / var(--btn-count));
  1747. background: var(--store-tablist-btn);
  1748. transition: translate 0.2s ease;
  1749. border-radius: 3px;
  1750. }
  1751.  
  1752. .chat__52833.scrollerContainer_bf5dbd .scroller__81266 {
  1753. padding: 0 !important;
  1754. box-sizing: content-box;
  1755. }
  1756. .chat__52833.scrollerContainer_bf5dbd .scroller__81266 .pageBody_bfae74 {
  1757. padding-right: 0;
  1758. gap: 0;
  1759. }
  1760. .chat__52833.scrollerContainer_bf5dbd .scroller__81266 .pageBody_bfae74 > div:first-child:not([class]) {
  1761. background: rgba(0, 0, 0, 0.4);
  1762. padding: 20px;
  1763. }
  1764. .chat__52833.scrollerContainer_bf5dbd .scroller__81266 .pageBody_bfae74 > div:first-child:not([class]) h2 {
  1765. font-weight: 400;
  1766. }
  1767. .chat__52833.scrollerContainer_bf5dbd .profile_b28ef9 > h2,
  1768. .chat__52833.scrollerContainer_bf5dbd .profile_b28ef9 > [data-text-variant="text-xs/normal"] {
  1769. background: var(--store-sidebar-background);
  1770. background-color: rgba(0, 0, 0, 0.2);
  1771. padding-left: 18px;
  1772. padding-right: 18px;
  1773. }
  1774. .chat__52833.scrollerContainer_bf5dbd .profile_b28ef9 > h2 {
  1775. padding-top: 10px;
  1776. font-weight: 400;
  1777. }
  1778. .chat__52833.scrollerContainer_bf5dbd .profile_b28ef9 > [data-text-variant="text-xs/normal"] {
  1779. padding-bottom: 10px;
  1780. }
  1781. .chat__52833.scrollerContainer_bf5dbd .profileCard_bd55ee {
  1782. margin-top: 0;
  1783. width: 308px;
  1784. background: var(--store-sidebar-background);
  1785. border-radius: 0;
  1786. box-sizing: border-box;
  1787. }
  1788. .chat__52833.scrollerContainer_bf5dbd .profileCard_bd55ee .role__65ab8 {
  1789. background: rgba(0, 0, 0, 0.3);
  1790. border-radius: 3px;
  1791. }
  1792.  
  1793. .prompt__1b100 {
  1794. gap: 0;
  1795. padding: 0;
  1796. border-radius: 0;
  1797. background: none;
  1798. margin-top: var(--content-gutter);
  1799. }
  1800. .prompt__1b100 .promptTitle__514bc {
  1801. background-color: var(--store-body-header);
  1802. padding: 10px 20px 10px 20px;
  1803. font-weight: normal;
  1804. font-size: 14px;
  1805. line-height: 16px;
  1806. letter-spacing: 0.03em;
  1807. text-transform: uppercase;
  1808. }
  1809. .prompt__1b100 .promptOptions__8e373 {
  1810. background: rgba(0, 0, 0, 0.4);
  1811. padding: 20px;
  1812. }
  1813.  
  1814. #app-mount .page__0b66e,
  1815. #app-mount .container_df3aa0 {
  1816. background: none;
  1817. }
  1818.  
  1819. .container_df3aa0 {
  1820. padding: var(--content-gutter) 0 0 0;
  1821. }
  1822.  
  1823. .mainTableContainer__5ffe0 {
  1824. background: none;
  1825. border-radius: 0;
  1826. box-shadow: none;
  1827. min-width: unset;
  1828. background: rgba(0, 0, 0, 0.4);
  1829. }
  1830. .mainTableContainer__5ffe0 .searchHeaderContainer_c4c100 {
  1831. background-color: var(--store-body-header);
  1832. padding: 10px 20px 10px 20px;
  1833. }
  1834. .mainTableContainer__5ffe0 .searchHeaderContainer_c4c100 .heading-md-medium_bfad58 {
  1835. font-size: 14px;
  1836. font-weight: normal;
  1837. line-height: 16px;
  1838. letter-spacing: 0.03em;
  1839. text-transform: uppercase;
  1840. }
  1841. .mainTableContainer__5ffe0 .searchHeaderContainer_c4c100 .searchBar__63890 {
  1842. background: rgba(0, 0, 0, 0.2);
  1843. border: 1px solid #000;
  1844. box-shadow: 1px 1px 0 0 var(--store-search-border);
  1845. border-radius: 3px;
  1846. }
  1847. .mainTableContainer__5ffe0 .table_a843c4 {
  1848. padding: 0 20px 20px;
  1849. border-top: none;
  1850. }
  1851. .mainTableContainer__5ffe0 .tableHeaderRow__89a36:first-child:after {
  1852. width: calc(100% + 40px);
  1853. height: 1px;
  1854. left: -20px;
  1855. right: -20px;
  1856. background: var(--background-modifier-accent);
  1857. box-shadow: none;
  1858. opacity: 1;
  1859. bottom: 20px;
  1860. }
  1861. .mainTableContainer__5ffe0 .newMembersNotice__282a0 {
  1862. position: relative;
  1863. top: -20px;
  1864. background: var(--btn-brand);
  1865. border-radius: 0 0 3px 3px;
  1866. transition: none;
  1867. }
  1868. .mainTableContainer__5ffe0 .newMembersNotice__282a0:hover {
  1869. background: var(--btn-brand-hover);
  1870. }
  1871. .mainTableContainer__5ffe0 .newMembersNotice__282a0:hover .text-sm-normal_e612c7 {
  1872. color: #fff !important;
  1873. }
  1874. .mainTableContainer__5ffe0 .newMembersNotice__282a0 td:first-child {
  1875. border-bottom-left-radius: 3px;
  1876. }
  1877. .mainTableContainer__5ffe0 .newMembersNotice__282a0 td:last-child {
  1878. border-bottom-right-radius: 3px;
  1879. }
  1880. .mainTableContainer__5ffe0 .newMembersNotice__282a0 .text-sm-normal_e612c7 {
  1881. color: var(--btn-brand-text) !important;
  1882. }
  1883. .mainTableContainer__5ffe0 .tableHeaderCellContainer__6a919 {
  1884. padding: 8px 8px 28px;
  1885. }
  1886. .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5 {
  1887. background: none !important;
  1888. }
  1889. .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5 td::after {
  1890. display: none;
  1891. }
  1892. .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5.roundedRow_b6c2e1 td:first-child, .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5.roundedRow_b6c2e1 td:last-child {
  1893. border-radius: 0;
  1894. }
  1895. .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5 .button_fb10b9 {
  1896. color: var(--brand-experiment);
  1897. border-radius: 2px;
  1898. background: var(--btn-grey);
  1899. transition-property: background, box-shadow, color;
  1900. transition-duration: 0.2s;
  1901. transition-timing-function: ease-out;
  1902. }
  1903. .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5 .button_fb10b9 svg {
  1904. color: var(--brand-experiment);
  1905. }
  1906. .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5:hover td {
  1907. background: none;
  1908. }
  1909. .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5:hover, .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5:active {
  1910. background: var(--background-accent) !important;
  1911. transition: background 0.2s linear;
  1912. }
  1913. .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5:hover .button_fb10b9, .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5:active .button_fb10b9 {
  1914. background-color: var(--background-accent-hover);
  1915. transition: background 0.2s linear, box-shadow 0.2s ease-in-out;
  1916. }
  1917. .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5:hover .button_fb10b9:hover, .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5:active .button_fb10b9:hover {
  1918. background: var(--btn-grey-hover);
  1919. box-shadow: var(--btn-grey-boxshadow);
  1920. }
  1921. .mainTableContainer__5ffe0 .memberRowContainer_f0d0e5 .smallCol__893bd .text-sm-medium_bc6ffc {
  1922. color: var(--text-muted) !important;
  1923. font-size: 12px;
  1924. line-height: 22px;
  1925. letter-spacing: 0.5px;
  1926. text-transform: uppercase;
  1927. font-weight: 700;
  1928. display: flex;
  1929. align-items: center;
  1930. overflow: hidden;
  1931. white-space: nowrap;
  1932. text-overflow: ellipsis;
  1933. }
  1934.  
  1935. .otherRoles_a19529 {
  1936. background: rgba(0, 0, 0, 0.3);
  1937. }
  1938.  
  1939. .pageSizeSelection__9dcee .text-md-normal__6a4eb {
  1940. font-size: 14px;
  1941. line-height: 18px;
  1942. }
  1943.  
  1944. .wrapper_bd2abe.chatSidebarOpen_dfaa6a .callContainer_cbde45 {
  1945. border-radius: 0;
  1946. }
  1947.  
  1948. .wrapper_bd2abe {
  1949. background: #000;
  1950. }
  1951.  
  1952. .chat__52833:has(.wrapper_bd2abe.video__85ac2) {
  1953. max-width: 100%;
  1954. }
  1955.  
  1956. #app-mount:-webkit-full-screen {
  1957. --app-gutter: 0;
  1958. --content-gutter: 0;
  1959. }
  1960.  
  1961. .root__649bb {
  1962. background: var(--background-tertiary);
  1963. }
  1964.  
  1965. .tile_a411a4 {
  1966. border-radius: 4px;
  1967. }
  1968.  
  1969. .overlayTitle_a9f7c6 {
  1970. border-radius: 4px;
  1971. }
  1972.  
  1973. .container-3a5mk- {
  1974. background: var(--modal-background);
  1975. border-radius: 0;
  1976. box-shadow: 1px 3px 14px rgba(0, 0, 0, 0.65);
  1977. }
  1978. .container-3a5mk- .emojiPickerHeader-2mWh2T {
  1979. background: none;
  1980. }
  1981. .container-3a5mk- .animatedPicker-IdiG5I {
  1982. background: none;
  1983. }
  1984. .container-3a5mk- .dropDown-3dfe_z {
  1985. color: var(--brand-experiment);
  1986. }
  1987. .container-3a5mk- .label__8e2ef {
  1988. border-radius: 3px;
  1989. }
  1990.  
  1991. .container_c344de {
  1992. background: var(--modal-background);
  1993. border-radius: 0;
  1994. box-shadow: 1px 3px 14px rgba(0, 0, 0, 0.65);
  1995. }
  1996. .container_c344de .titleRight_dca5f0[role=button] {
  1997. border-radius: 2px;
  1998. height: 34px;
  1999. padding: 8px 14px;
  2000. box-sizing: border-box;
  2001. background: var(--btn-brand);
  2002. --text-normal: var(--btn-brand-text);
  2003. --interactive-active: var(--brand-experiment);
  2004. }
  2005. .container_c344de .titleRight_dca5f0[role=button]:hover {
  2006. background: var(--btn-brand-hover);
  2007. --text-normal: #fff;
  2008. --interactive-active: #fff;
  2009. }
  2010. .container_c344de .titleRight_dca5f0[role=button] .defaultColor__77578 {
  2011. font-weight: 400;
  2012. }
  2013.  
  2014. .activityItem_a6e176 {
  2015. border-radius: 3px;
  2016. }
  2017.  
  2018. .content__1a4fe:before {
  2019. display: none;
  2020. }
  2021.  
  2022. .container__11d72.themed_b152d4 {
  2023. background: linear-gradient(90deg, hsl(calc(var(--accent-hue) + 7), calc(var(--saturation-factor, 1) * 41.5%), 41.6%, 0.919) 11.38%, hsl(calc(var(--accent-hue) + 4), calc(var(--saturation-factor, 1) * 51%), 46%, 0.8) 25.23%, hsl(calc(var(--accent-hue) + 24), calc(var(--saturation-factor, 1) * 76%), 24.5%) 100%);
  2024. box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  2025. min-height: 36px;
  2026. margin-top: var(--content-gutter);
  2027. padding: 0 5px 0 4px;
  2028. overflow: hidden;
  2029. }
  2030. .container__11d72.themed_b152d4 .children__32014:after {
  2031. display: none;
  2032. }
  2033. .container__11d72.themed_b152d4 .divider_c09b64 {
  2034. display: none;
  2035. }
  2036. .container__11d72.themed_b152d4 .title__9e2b0 {
  2037. text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  2038. font-size: 14px;
  2039. text-transform: capitalize;
  2040. }
  2041. .container__11d72.themed_b152d4 .icon__4cb88 {
  2042. color: var(--header-primary);
  2043. width: 16px;
  2044. height: 16px;
  2045. filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3));
  2046. }
  2047. .container__11d72.themed_b152d4 .count__03d4d {
  2048. color: var(--header-primary) !important;
  2049. font-size: 14px;
  2050. }
  2051. .container__11d72.themed_b152d4 .iconWrapper_af9215 {
  2052. justify-content: center;
  2053. align-items: center;
  2054. display: flex;
  2055. height: 36px;
  2056. }
  2057. .container__11d72.themed_b152d4 .toolbar__88c63 .returnButton_c34965 {
  2058. background: var(--btn-brand);
  2059. color: var(--btn-brand-text);
  2060. transition: none;
  2061. min-height: 24px;
  2062. height: 24px;
  2063. }
  2064. .container__11d72.themed_b152d4 .toolbar__88c63 .returnButton_c34965:hover {
  2065. background: var(--btn-brand-hover);
  2066. color: #fff;
  2067. }
  2068. .container__11d72.themed_b152d4 .toolbar__88c63 .returnButton_c34965:hover svg {
  2069. color: #fff;
  2070. }
  2071. .container__11d72.themed_b152d4 .toolbar__88c63 .returnButton_c34965 svg {
  2072. color: var(--btn-brand-text);
  2073. }
  2074. .container__11d72.themed_b152d4 .toolbar__88c63 .iconWrapper_af9215[aria-label] {
  2075. margin: 0;
  2076. padding: 0 14px;
  2077. }
  2078. .container__11d72.themed_b152d4 .toolbar__88c63 .iconWrapper_af9215:where(:hover, [aria-expanded=true]) {
  2079. background: var(--topbar-item-hover);
  2080. }
  2081. .container__11d72.themed_b152d4 .iconWrapper_af9215[aria-label]:has(.iconBadge_cc5031) .svg__7900e {
  2082. height: 16px !important;
  2083. width: 16px !important;
  2084. }
  2085. .container__11d72.themed_b152d4 .iconWrapper_af9215[aria-label]:has(.iconBadge_cc5031) .icon__4cb88 {
  2086. height: 24px;
  2087. width: 24px;
  2088. color: var(--status-danger);
  2089. }
  2090. .container__11d72.themed_b152d4 .iconBadge_cc5031 {
  2091. display: none;
  2092. }
  2093. .container__11d72.themed_b152d4 .topic__16ae3 {
  2094. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  2095. }
  2096. .container__11d72.themed_b152d4 .search__07df0 {
  2097. order: 1;
  2098. margin: 0;
  2099. }
  2100. .container__11d72.themed_b152d4 .searchBar_e0c60b {
  2101. min-width: 200px;
  2102. height: 28px;
  2103. border-radius: 3px;
  2104. border: 1px solid rgba(0, 0, 0, 0.3);
  2105. box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
  2106. padding: 1px 1px 1px 4px;
  2107. background: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 45%), 35%);
  2108. }
  2109. .container__11d72.themed_b152d4 .search_ac353c .DraftEditor-root .public-DraftEditorPlaceholder-root {
  2110. color: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 45%), 10%);
  2111. font-size: 14px;
  2112. font-style: italic;
  2113. text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
  2114. }
  2115. .container__11d72.themed_b152d4 .search_ac353c .DraftEditor-root .DraftEditor-editorContainer {
  2116. padding: 0 2px;
  2117. }
  2118. .container__11d72.themed_b152d4 .icon__46425 {
  2119. background: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 73%), 65%);
  2120. border-radius: 2px;
  2121. }
  2122. .container__11d72.themed_b152d4 .icon__46425:not(:hover) {
  2123. opacity: 0.76;
  2124. }
  2125. .container__11d72.themed_b152d4 .icon_f50f05,
  2126. .container__11d72.themed_b152d4 .clear_e3e382.iconLayout__9fbb1:hover .icon_f50f05 {
  2127. color: var(--background-accent);
  2128. }
  2129.  
  2130. .chat__52833.threadSidebarOpen_fa231dL:not(.threadSidebarFloating_b980c7) {
  2131. max-width: calc(var(--content-width) - 400px);
  2132. }
  2133.  
  2134. .resizeHandle_f1a098 {
  2135. width: var(--app-gutter);
  2136. background: none;
  2137. position: relative;
  2138. }
  2139.  
  2140. .container_def45c {
  2141. border-radius: unset;
  2142. background: none;
  2143. max-width: var(--content-width);
  2144. }
  2145. .container_def45c.floating_f021e2 {
  2146. border-left: 1px solid #000;
  2147. top: 16px;
  2148. background: var(--app-background);
  2149. }
  2150. .container_def45c.floating_f021e2 .container__11d72.themed_b152d4 {
  2151. margin-top: 0;
  2152. }
  2153.  
  2154. .box_dd6d91 {
  2155. background: var(--banner-blue);
  2156. border-radius: 4px;
  2157. box-shadow: var(--banner-shadow);
  2158. margin: 12px 16px 12px 16px;
  2159. padding: 16px 24px;
  2160. width: -moz-fit-content;
  2161. width: fit-content;
  2162. max-width: 448px;
  2163. }
  2164. .box_dd6d91 h3 {
  2165. font-size: 14px;
  2166. font-weight: 400;
  2167. }
  2168. .box_dd6d91 [data-text-variant="text-sm/normal"] {
  2169. font-size: 12px;
  2170. }
  2171.  
  2172. .box_dd6d91:after, .box_dd6d91:before {
  2173. display: none;
  2174. }
  2175.  
  2176. .iconWrapper__85630 {
  2177. margin-top: 0;
  2178. border-radius: 0;
  2179. background: none;
  2180. }
  2181.  
  2182. .chat__52833 {
  2183. background: none;
  2184. overflow: visible;
  2185. max-width: var(--content-width);
  2186. }
  2187.  
  2188. .chatContent__5dca8 {
  2189. background: none;
  2190. }
  2191.  
  2192. .scrollerContent_c73942 {
  2193. justify-content: flex-start;
  2194. }
  2195.  
  2196. .wrapper__3d460,
  2197. .wrapper_b8c724,
  2198. .wrapper__5c5cd {
  2199. background: none;
  2200. }
  2201.  
  2202. .emptyChannelIcon__1a1ba {
  2203. display: none;
  2204. }
  2205.  
  2206. .attachment__7a2d0,
  2207. .avatar_eb6eba,
  2208. .blob__8d5bd {
  2209. border-radius: 2px;
  2210. }
  2211.  
  2212. .memberGroupsPlaceholder_d0ae46,
  2213. .mulitplePlaceholderUsername__5bd27,
  2214. .placeholderAvatar__21e48,
  2215. .placeholderUsername__7fd2c {
  2216. border-radius: 2px;
  2217. background: var(--text-normal);
  2218. opacity: 0.08;
  2219. }
  2220.  
  2221. .popoutLoadingForeground_f61095 {
  2222. background: var(--text-normal);
  2223. opacity: 0.08;
  2224. }
  2225.  
  2226. @keyframes loading_LoadAmin_2z54o {
  2227. 0% {
  2228. transform: rotate(0deg);
  2229. }
  2230. 100% {
  2231. transform: rotate(360deg);
  2232. }
  2233. }
  2234. .spinningCircleInner__958da.inner_ea0cea {
  2235. transform: none;
  2236. }
  2237. .spinningCircleInner__958da.inner_ea0cea svg {
  2238. display: none;
  2239. }
  2240.  
  2241. .inner_ea0cea.wanderingCubes_ce37c6 span {
  2242. display: none;
  2243. }
  2244.  
  2245. .spinningCircleInner__958da.inner_ea0cea::before,
  2246. .inner_ea0cea.wanderingCubes_ce37c6::before {
  2247. content: "";
  2248. display: block;
  2249. position: absolute;
  2250. left: 0;
  2251. right: 0;
  2252. top: 0;
  2253. bottom: 0;
  2254. margin: auto;
  2255. border-radius: 50%;
  2256. height: calc(100% - 8px);
  2257. width: calc(100% - 8px);
  2258. border-top: 4px solid rgba(255, 255, 255, 0.2);
  2259. border-right: 4px solid rgba(255, 255, 255, 0.2);
  2260. border-bottom: 4px solid rgba(255, 255, 255, 0.2);
  2261. border-left: 4px solid #fff;
  2262. transform: translateZ(0);
  2263. animation: loading_LoadAmin_2z54o 1.1s infinite linear;
  2264. }
  2265.  
  2266. .inner_ea0cea {
  2267. min-width: 32px;
  2268. min-height: 32px;
  2269. align-items: center;
  2270. }
  2271.  
  2272. .scroller__244e5 .inner_ea0cea {
  2273. height: 60px;
  2274. width: 60px;
  2275. }
  2276.  
  2277. .loadingPopout__5f0e8 {
  2278. box-shadow: 3px 3px 5px -3px #000;
  2279. background: var(--background-accent);
  2280. }
  2281.  
  2282. .wrapper_dd4697:has(> .gatedContent_ba8306) {
  2283. align-items: center;
  2284. display: flex;
  2285. }
  2286.  
  2287. .gatedContent_ba8306 {
  2288. border: 1px solid rgba(255, 255, 255, 0.2);
  2289. border-radius: 5px;
  2290. padding: 0;
  2291. height: -moz-fit-content;
  2292. height: fit-content;
  2293. margin-left: 24px;
  2294. margin-right: 24px;
  2295. max-width: var(--content-width);
  2296. }
  2297. .gatedContent_ba8306 .image__0cdbe {
  2298. margin: -45px 0 15px 0;
  2299. padding: 0;
  2300. height: 129px;
  2301. width: 275px;
  2302. background-color: var(--background-accent);
  2303. box-shadow: 0 0 5px 0 #000000;
  2304. }
  2305. .gatedContent_ba8306 .title__5e888 {
  2306. font-size: 14px;
  2307. line-height: 18px;
  2308. font-weight: 200;
  2309. max-width: 640px;
  2310. padding: 2px 0 0 0;
  2311. text-align: center;
  2312. margin: 0 0 10px;
  2313. letter-spacing: 0.03em;
  2314. text-transform: uppercase;
  2315. }
  2316. .gatedContent_ba8306 .description__0818b {
  2317. margin-top: 20px;
  2318. font-size: 14px;
  2319. line-height: 18px;
  2320. font-weight: 200;
  2321. color: hsl(calc(var(--accent-hue) + 3), calc(var(--saturation-factor, 1) * 29.4%), 90%);
  2322. }
  2323. .gatedContent_ba8306 .description__0818b + .flex_f5fbb7:has(> button) {
  2324. margin-bottom: 35px;
  2325. gap: 3px;
  2326. }
  2327. .gatedContent_ba8306 .action_caa81f {
  2328. margin: 0;
  2329. }
  2330.  
  2331. .wrapper_fbbb73 {
  2332. border-radius: 4px;
  2333. margin-bottom: var(--content-gutter);
  2334. padding: 4px;
  2335. box-sizing: content-box;
  2336. height: unset;
  2337. background: #000;
  2338. box-shadow: var(--banner-shadow);
  2339. }
  2340. .wrapper_fbbb73 h3 {
  2341. font-size: 14px;
  2342. font-weight: 400;
  2343. --header-primary: var(--text-muted);
  2344. }
  2345. .wrapper_fbbb73 .buttonContainer__1c00c {
  2346. margin-right: 0;
  2347. }
  2348.  
  2349. .container_b181b6 {
  2350. background: none;
  2351. }
  2352.  
  2353. .list-3FIpnh.scrollerBase_dc3aa9 {
  2354. overflow: hidden overlay !important;
  2355. }
  2356. .list-3FIpnh.scrollerBase_dc3aa9 > div:first-child {
  2357. box-sizing: border-box;
  2358. padding-left: 0;
  2359. }
  2360.  
  2361. .grid-21dB-S > div:first-child,
  2362. .headerRow-1MKoR-,
  2363. .list-3FIpnh > div:first-child {
  2364. min-width: unset;
  2365. }
  2366.  
  2367. .loadingCard-3pIp9h {
  2368. background: rgba(0, 0, 0, 0.2);
  2369. border-radius: 2px;
  2370. }
  2371.  
  2372. .container_b181b6 .list-3FIpnh > div:first-child {
  2373. padding-right: 48px;
  2374. }
  2375.  
  2376. #app-mount .mainCard__8a660.header_c01fde {
  2377. background: var(--banner-lightblue);
  2378. }
  2379. #app-mount .mainCard__8a660.header_c01fde .container-JhuCwn {
  2380. padding-top: 16px;
  2381. padding-bottom: 16px;
  2382. }
  2383. #app-mount .mainCard__8a660.header_c01fde .formContainer__8f0e4,
  2384. #app-mount .mainCard__8a660.header_c01fde .horizontalPadding-3WQsQ9 {
  2385. padding-left: 16px;
  2386. padding-right: 16px;
  2387. }
  2388. #app-mount .mainCard__8a660.header_c01fde .formContainer__8f0e4 .form_c73970 {
  2389. border: 1px solid hsl(calc(var(--accent-hue) + 2), calc(var(--saturation-factor, 1) * 39.7%), 22.7%);
  2390. background-color: var(--banner-lightblue-input);
  2391. border-radius: 3px;
  2392. padding: 10px 11px;
  2393. box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.5);
  2394. }
  2395. #app-mount .mainCard__8a660.header_c01fde textarea {
  2396. color: var(--channels-default-hover);
  2397. font-weight: 400;
  2398. background: none;
  2399. box-shadow: none;
  2400. font-size: 20px;
  2401. }
  2402. #app-mount .mainCard__8a660.header_c01fde textarea::-moz-placeholder {
  2403. font-weight: 400;
  2404. font-style: italic;
  2405. }
  2406. #app-mount .mainCard__8a660.header_c01fde textarea::placeholder {
  2407. font-weight: 400;
  2408. font-style: italic;
  2409. }
  2410. #app-mount .mainCard__8a660.header_c01fde .contentContainer-2xwoXK {
  2411. padding-left: 0;
  2412. }
  2413. #app-mount .mainCard__8a660.header_c01fde .scrollableContainer__33e06 {
  2414. border: none;
  2415. box-shadow: none;
  2416. margin-top: 6px;
  2417. padding-top: 6px;
  2418. border-top: 1px solid rgba(255, 255, 255, 0.2);
  2419. border-radius: 0;
  2420. }
  2421. #app-mount .mainCard__8a660.header_c01fde .container__4f0d0 {
  2422. margin: 2px 2px 0 16px;
  2423. width: 92px;
  2424. height: 92px;
  2425. box-shadow: 0 0 0 1px hsl(0, 0%, 29%), 0 0 0 2px hsl(0, 0%, 36%);
  2426. }
  2427. #app-mount .mainCard__8a660.header_c01fde .container__4f0d0 .uploadInput_bbab2f {
  2428. width: 92px;
  2429. height: 92px;
  2430. border-radius: 0;
  2431. background-color: hsl(calc(var(--accent-hue) + 7), calc(var(--saturation-factor, 1) * 21.8%), 17.1%);
  2432. box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.5);
  2433. }
  2434. #app-mount .mainCard__8a660.header_c01fde .container__4f0d0 .imageSmall__59845 {
  2435. height: 92px;
  2436. border-radius: 0;
  2437. }
  2438. #app-mount .mainCard__8a660.header_c01fde .container__4f0d0 .popoutContainer__97400 {
  2439. position: absolute;
  2440. padding: 0;
  2441. top: 0;
  2442. right: 0;
  2443. }
  2444. #app-mount .mainCard__8a660.header_c01fde .container__4f0d0 .popout__6ba23 {
  2445. padding: 0;
  2446. border-radius: 0;
  2447. background-color: var(--banner-lightblue-input);
  2448. box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.5), 0 0 0 1px hsl(0, 0%, 29%), 0 0 0 2px hsl(0, 0%, 36%);
  2449. }
  2450. #app-mount .mainCard__8a660.header_c01fde .container__4f0d0 .uploads__5ea19 {
  2451. padding-right: 0;
  2452. gap: 2px;
  2453. }
  2454. #app-mount .mainCard__8a660.header_c01fde .container__4f0d0 .spoilerContainer_b653f1 {
  2455. border-radius: 0;
  2456. background-color: transparent;
  2457. }
  2458. #app-mount .mainCard__8a660.header_c01fde .container__4f0d0 .attachmentItemSmall__2cb8c {
  2459. min-width: 92px;
  2460. min-height: 92px;
  2461. max-width: 92px;
  2462. max-height: 92px;
  2463. }
  2464. #app-mount .mainCard__8a660.header_c01fde .tagsContainer_e0ece5 {
  2465. background-color: rgba(0, 0, 0, 0.2);
  2466. padding: 8px;
  2467. margin: 6px 110px 6px 0;
  2468. }
  2469. #app-mount .mainCard__8a660.header_c01fde .tagsContainer_e0ece5 .tagList__142bd {
  2470. height: unset;
  2471. }
  2472. #app-mount .mainCard__8a660.header_c01fde .tagsContainer_e0ece5 .tagListInner__6097c {
  2473. gap: 2px;
  2474. }
  2475. #app-mount .mainCard__8a660.header_c01fde .tagsContainer_e0ece5 .tagsButton_e96762 {
  2476. position: relative;
  2477. left: unset !important;
  2478. min-width: unset;
  2479. min-height: unset;
  2480. width: 20px;
  2481. height: 20px;
  2482. margin-left: 0;
  2483. font-size: 0;
  2484. justify-content: center;
  2485. border-radius: 2px;
  2486. background-color: var(--btn-brand);
  2487. --text-brand: var(--btn-brand-text);
  2488. }
  2489. #app-mount .mainCard__8a660.header_c01fde .tagsContainer_e0ece5 .tagsButton_e96762:hover {
  2490. background: var(--btn-brand-hover);
  2491. --text-brand: var(--white-500);
  2492. }
  2493. #app-mount .mainCard__8a660.header_c01fde .tagsContainer_e0ece5 .tagsButton_e96762 .tagsButtonInner_a70c04 {
  2494. gap: 0;
  2495. }
  2496. #app-mount .mainCard__8a660.header_c01fde .tagsContainer_e0ece5 .tagsButton_e96762 .tagsButtonInner_a70c04::before {
  2497. content: "+";
  2498. font-size: 11px;
  2499. }
  2500. #app-mount .mainCard__8a660.header_c01fde .tagsContainer_e0ece5 .tagsButton_e96762 svg {
  2501. display: none;
  2502. }
  2503. #app-mount .mainCard__8a660.header_c01fde .tagsDivider_a1443e {
  2504. height: 1px;
  2505. width: 100%;
  2506. position: relative;
  2507. left: 0;
  2508. background-color: hsl(calc(var(--accent-hue) + 11), calc(var(--saturation-factor, 1) * 29.8%), 18.4%);
  2509. }
  2510. #app-mount .mainCard__8a660.header_c01fde .form_c73970 .submitButton__6a7c5 {
  2511. color: hsl(var(--accent-hue), 41%, 28%);
  2512. background: linear-gradient(to bottom, hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 82%), 87%) 5%, hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 34%), 69%) 95%);
  2513. border-radius: 4px;
  2514. border: 2px solid hsl(var(--accent-hue), 34%, 14%);
  2515. transition: none;
  2516. }
  2517. #app-mount .mainCard__8a660.header_c01fde .form_c73970 .submitButton__6a7c5:hover {
  2518. color: var(--white-500);
  2519. background: linear-gradient(to bottom, hsl(calc(var(--accent-hue) - 3), calc(var(--saturation-factor, 1) * 86.6%), 67.8%) 5%, hsl(calc(var(--accent-hue) - 3), calc(var(--saturation-factor, 1) * 60%), 46.1%) 95%);
  2520. }
  2521. #app-mount .mainCard__8a660.header_c01fde .form_c73970 .submitButton__6a7c5 [data-text-variant="text-md/semibold"] {
  2522. font-weight: 500;
  2523. }
  2524.  
  2525. .matchingPostsRow__510be {
  2526. background: linear-gradient(to right, hsla(40, 49.1%, 54.5%, 0.6) 0%, transparent 60%);
  2527. height: unset;
  2528. border-radius: 0;
  2529. padding: 6px;
  2530. --text-normal: #ffcc6a;
  2531. }
  2532.  
  2533. .text-xs-normal_ccc5fb {
  2534. line-height: unset;
  2535. align-self: center;
  2536. }
  2537.  
  2538. .combo__57290,
  2539. .key__06fe6 {
  2540. height: unset;
  2541. }
  2542.  
  2543. .combo__57290 {
  2544. text-transform: capitalize;
  2545. font-weight: 500;
  2546. }
  2547.  
  2548. #app-mount .matchingPostsRow__510be .key__06fe6 {
  2549. background: none;
  2550. border: none;
  2551. padding: 0 2px;
  2552. box-shadow: none;
  2553. min-height: unset;
  2554. }
  2555.  
  2556. .tagsSpacer-38ovAE:first-child {
  2557. order: 1;
  2558. margin-left: auto;
  2559. margin-right: 0;
  2560. }
  2561.  
  2562. .container__1b27a {
  2563. background: var(--banner-yellow);
  2564. border: none;
  2565. border-radius: 0;
  2566. padding: 16px;
  2567. margin-top: 1px;
  2568. }
  2569. .container__1b27a [class*=descriptionContainer] {
  2570. margin-top: 0;
  2571. background: none;
  2572. padding: 16px;
  2573. border-radius: 0;
  2574. }
  2575. .container__1b27a [class*=descriptionContainer]:has(.showMore-orAmWF) {
  2576. -webkit-mask-image: linear-gradient(180deg, rgb(0, 0, 0) calc(100% - 53px - 21px), transparent calc(100% - 21px), rgb(0, 0, 0) calc(100% - 21px));
  2577. mask-image: linear-gradient(180deg, rgb(0, 0, 0) calc(100% - 53px - 21px), transparent calc(100% - 21px), rgb(0, 0, 0) calc(100% - 21px));
  2578. }
  2579. .container__1b27a [class*=descriptionContainer] .guidelines-jQLwyH {
  2580. color: #e1c48a !important;
  2581. }
  2582. .container__1b27a [class*=showMore] {
  2583. height: 20px;
  2584. border-top: 1px solid hsla(40, 59%, 71%, 0.5);
  2585. }
  2586. .container__1b27a [class*=showMore] [class*=gradient] {
  2587. display: none;
  2588. }
  2589. .container__1b27a [class*=showMore] [class*=linkContainer] {
  2590. background: none;
  2591. }
  2592. .container__1b27a [class*=showMore] [class*=showMoreLink] {
  2593. padding: 0;
  2594. }
  2595. .container__1b27a [class*=showMore] [class*=showMoreText] {
  2596. font-size: 10px;
  2597. font-weight: 500;
  2598. text-transform: uppercase;
  2599. }
  2600. .container__1b27a [class*=showMore] svg {
  2601. margin-left: 4px;
  2602. height: 10px;
  2603. width: 10px;
  2604. }
  2605.  
  2606. .tagsContainer_e0ece5 {
  2607. background: hsl(calc(var(--accent-hue) + 8), calc(var(--saturation-factor, 1) * 36%), 19%);
  2608. margin-top: 32px;
  2609. margin-bottom: 24px;
  2610. padding: 0;
  2611. flex-wrap: wrap;
  2612. --taglist-bg: hsl(calc(var(--accent-hue) + 2) calc(var(--saturation-factor, 1)*38%) 27%);
  2613. }
  2614. .tagsContainer_e0ece5 > [class*=tagList] {
  2615. height: unset;
  2616. order: -1;
  2617. width: 100%;
  2618. flex-basis: 100%;
  2619. padding: 10px;
  2620. background: var(--taglist-bg);
  2621. box-shadow: 0 0 5px #000;
  2622. }
  2623. .tagsContainer_e0ece5 > [class*=tagList] [class*=pill] {
  2624. height: 20px;
  2625. padding: 0 6px;
  2626. }
  2627. .tagsContainer_e0ece5 > [class*=tagList] [data-text-variant="text-sm/semibold"] {
  2628. font-size: 12px;
  2629. line-height: 16px;
  2630. }
  2631. .tagsContainer_e0ece5 > button {
  2632. border-left: 1px solid var(--taglist-bg);
  2633. box-shadow: none !important;
  2634. }
  2635. .tagsContainer_e0ece5 [class*=divider] {
  2636. width: 0;
  2637. height: 26px;
  2638. border-radius: 0;
  2639. background: none;
  2640. margin: 0 4px 0 0;
  2641. border-left: 1px solid var(--taglist-bg);
  2642. }
  2643. .tagsContainer_e0ece5 [class*=sortDropdown] {
  2644. margin-bottom: 0;
  2645. height: unset;
  2646. background: none;
  2647. border-radius: 0;
  2648. }
  2649. .tagsContainer_e0ece5 [class*=sortDropdown] [class*=sortDropdownText] {
  2650. font-size: 10px;
  2651. line-height: 10px;
  2652. text-transform: uppercase;
  2653. margin-left: 0;
  2654. --interactive-normal: hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*41%) 45.9%);
  2655. }
  2656. .tagsContainer_e0ece5 [class*=sortDropdown] svg {
  2657. height: 16px;
  2658. width: 16px;
  2659. color: var(--btn-brand-text);
  2660. }
  2661. .tagsContainer_e0ece5 [class*=sortDropdown] svg:has([d^="M16.3 21.7a1 1 0 0 0 1.4 0l4-4a1 1 0 0 0-1.4-1.4L18 18.58V3a1 1 0 1 0-2 0v15.59l-2.3-2.3a1 1 0 0 0-1.4 1.42l4 4ZM6.3 2.3a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L8 5.42V21a1 1 0 1 1-2 0V5.41l-2.3 2.3a1 1 0 0 1-1.4-1.42l4-4Z"]) {
  2662. display: none;
  2663. }
  2664. .tagsContainer_e0ece5 [class*=tagsButton] {
  2665. display: none;
  2666. }
  2667.  
  2668. .tagListInner-35MqcW {
  2669. gap: 4px;
  2670. }
  2671.  
  2672. .card-2JNtco {
  2673. padding-bottom: 6px;
  2674. }
  2675.  
  2676. #app-mount .mainCard__8a660 {
  2677. transform: none;
  2678. transition: none;
  2679. box-shadow: none;
  2680. }
  2681.  
  2682. .mainCard__8a660 {
  2683. border: none;
  2684. border-radius: 0;
  2685. background: rgba(0, 0, 0, 0.2);
  2686. }
  2687. .mainCard__8a660:has(.notice-2tOLuo) {
  2688. padding-left: 14px;
  2689. padding-right: 14px;
  2690. padding-top: 8px;
  2691. padding-bottom: 8px;
  2692. height: -moz-fit-content;
  2693. height: fit-content;
  2694. }
  2695. .mainCard__8a660:has(.notice-2tOLuo) .inline-1Al0JA {
  2696. gap: 0;
  2697. }
  2698. .mainCard__8a660:has(.notice-2tOLuo) .inline-1Al0JA .author-2kHvde [data-text-variant="text-sm/semibold"],
  2699. .mainCard__8a660:has(.notice-2tOLuo) .inline-1Al0JA .author-2kHvde [data-text-variant="text-sm/normal"] {
  2700. font-size: 12px;
  2701. }
  2702. .mainCard__8a660:has(.notice-2tOLuo) .separator-3PdcLL {
  2703. display: none;
  2704. }
  2705. .mainCard__8a660:has(.notice-2tOLuo) .title-Kuc4iQ {
  2706. font-size: 16px;
  2707. font-weight: 400;
  2708. line-height: unset;
  2709. display: block;
  2710. overflow: hidden;
  2711. white-space: nowrap;
  2712. text-overflow: ellipsis;
  2713. margin-bottom: 0;
  2714. }
  2715. .mainCard__8a660:has(.notice-2tOLuo) img {
  2716. border-radius: 2px;
  2717. right: 0;
  2718. top: 0;
  2719. background: #5765F2;
  2720. }
  2721.  
  2722. .container__99b06 {
  2723. height: 72px;
  2724. padding: 0;
  2725. z-index: 0;
  2726. }
  2727.  
  2728. .container__99b06 .left__6764d {
  2729. padding-left: 14px;
  2730. padding-right: 14px;
  2731. padding-top: 8px;
  2732. }
  2733.  
  2734. .mainCard__8a660:not(.header_c01fde) {
  2735. --title-text: hsl(calc(var(--accent-hue) + 1) calc(var(--saturation-factor, 1)*29%) 83%);
  2736. --body-text: hsl(var(--accent-hue) calc(var(--saturation-factor, 1)*23%) 28%);
  2737. --text-normal: var(--body-text);
  2738. --text-muted: var(--body-text);
  2739. --header-secondary: var(--body-text);
  2740. --background-modifier-accent: var(--body-text);
  2741. }
  2742.  
  2743. .mainCard__8a660 h3 {
  2744. --text-muted: var(--title-text);
  2745. --header-primary: var(--title-text);
  2746. }
  2747.  
  2748. .mainCard__8a660:hover {
  2749. background: rgba(0, 0, 0, 0.4);
  2750. }
  2751.  
  2752. #app-mount .mainCard__8a660:not(.isOpen__8593d, .header_c01fde):hover {
  2753. outline: 1px solid hsl(calc(var(--accent-hue) - 2), calc(var(--saturation-factor, 1) * 39%), 41%);
  2754. outline-offset: -1px;
  2755. }
  2756.  
  2757. .container__99b06:not(.isOpen__8593d):hover .bodyMedia__43618 {
  2758. -webkit-clip-path: inset(1px 1px 1px 0);
  2759. clip-path: inset(1px 1px 1px 0);
  2760. }
  2761.  
  2762. #app-mount .mainCard__8a660:has(.newMessageCount_f45ea7),
  2763. #app-mount .mainCard__8a660:has([class*=newBadge]),
  2764. #app-mount .mainCard__8a660:has(.hasUnreads_bbeda4) {
  2765. background: linear-gradient(-45deg, hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 41%), 43%) 5%, hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 36%), 26%) 95%);
  2766. --title-text: var(--white-500);
  2767. --body-text: hsl(30 1% 55%);
  2768. }
  2769.  
  2770. #app-mount .mainCard__8a660:has(.pinIcon__39b6e) {
  2771. background: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 35%), 8%);
  2772. --title-text: var(--white-500);
  2773. --body-text: hsl(30 1% 55%);
  2774. }
  2775. #app-mount .mainCard__8a660:has(.pinIcon__39b6e) .left__6764d,
  2776. #app-mount .mainCard__8a660:has(.pinIcon__39b6e) .header-AZ_4Uz {
  2777. z-index: 1;
  2778. }
  2779.  
  2780. .mainCard__8a660:has(.pinIcon__39b6e):not([class*=isOpen])::before {
  2781. content: "";
  2782. display: block;
  2783. width: 305px;
  2784. height: 101px;
  2785. position: absolute;
  2786. top: 0;
  2787. left: -1px;
  2788. background-image: url(https://maendisease.github.io/Steam/illustrations/bg_announcement.avif);
  2789. background-repeat: no-repeat;
  2790. z-index: 0;
  2791. -webkit-clip-path: inset(1px 0 0 2px);
  2792. clip-path: inset(1px 0 0 2px);
  2793. filter: hue-rotate(calc(var(--hue-shift) * 1deg)) saturate(var(--saturation-factor, 1));
  2794. }
  2795.  
  2796. .mainCard__8a660:has(.pinIcon__39b6e):not([class*=isOpen]):hover::before {
  2797. -webkit-clip-path: inset(0);
  2798. clip-path: inset(0);
  2799. }
  2800.  
  2801. .mainCard__8a660 .pinIcon__39b6e,
  2802. .mainCard__8a660 .newBadgeWrapper__052a9 {
  2803. display: none;
  2804. }
  2805. .mainCard__8a660:has(.pinIcon__39b6e, [class*=newBadge]) .postTitleText__11fd1::before,
  2806. .mainCard__8a660:has(.pinIcon__39b6e, [class*=newBadge]) .title-2qfNnd::before {
  2807. white-space: nowrap;
  2808. text-overflow: ellipsis;
  2809. font-size: 14px;
  2810. overflow: hidden;
  2811. font-weight: 700;
  2812. margin-right: 4px;
  2813. }
  2814. .mainCard__8a660:has(.pinIcon__39b6e) h3::before {
  2815. content: "PINNED:";
  2816. }
  2817. .mainCard__8a660:has([class*=newBadge]) h3::before {
  2818. content: "NEW:";
  2819. }
  2820. .mainCard__8a660:not(.isOpen__8593d) h3::before {
  2821. color: #AEDD08;
  2822. }
  2823.  
  2824. #app-mount .mainCard__8a660[class*=isOpen] {
  2825. background: linear-gradient(to right, hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 78%), 87%) 5%, hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 41%), 71%) 95%);
  2826. overflow: visible;
  2827. --title-text: hsl(var(--accent-hue) calc(var(--saturation-factor, 1)*26%) 8%);
  2828. --body-text: hsl(var(--accent-hue) calc(var(--saturation-factor, 1)*23%) 28%);
  2829. }
  2830.  
  2831. .container__99b06.isOpen__8593d:after {
  2832. content: " ";
  2833. display: block;
  2834. width: 50px;
  2835. height: 50px;
  2836. top: 11px;
  2837. right: -25px;
  2838. position: absolute;
  2839. transform: rotate(45deg) scale(1);
  2840. backface-visibility: hidden;
  2841. background: linear-gradient(45deg, hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 42%), 71%) 50%, hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 41%), 70%) 95%);
  2842. z-index: -1;
  2843. }
  2844.  
  2845. .container__99b06.isOpen__8593d .bodyMedia__43618 {
  2846. -webkit-clip-path: inset(2px);
  2847. clip-path: inset(2px);
  2848. }
  2849.  
  2850. .container__99b06 .header__961ee {
  2851. padding-bottom: 4px;
  2852. }
  2853.  
  2854. .mainCard__8a660 h3 {
  2855. font-size: 16px;
  2856. font-weight: 400;
  2857. line-height: unset;
  2858. display: block;
  2859. overflow: hidden;
  2860. white-space: nowrap;
  2861. text-overflow: ellipsis;
  2862. }
  2863.  
  2864. .container__99b06 .body__376f3 {
  2865. padding-bottom: 3px;
  2866. }
  2867.  
  2868. .mainCard__8a660 .tags_e6c42a {
  2869. gap: 2px;
  2870. }
  2871.  
  2872. .container__99b06 .tags_e6c42a {
  2873. position: absolute;
  2874. bottom: 6px;
  2875. left: 14px;
  2876. gap: 0;
  2877. height: unset;
  2878. margin-bottom: 0;
  2879. }
  2880.  
  2881. .container__99b06 .pill_f055c3.small_d2f964 {
  2882. background: none;
  2883. padding: 0 4px 0 0;
  2884. height: unset;
  2885. }
  2886.  
  2887. .container__99b06 .pill_f055c3 .emoji__1d40e {
  2888. margin-right: 2px;
  2889. display: none;
  2890. }
  2891.  
  2892. .container__99b06 .pill_f055c3:not(:last-child)::after {
  2893. content: ",";
  2894. font-size: 12px;
  2895. color: var(--text-muted);
  2896. }
  2897.  
  2898. .tags_e6c42a,
  2899. .footer__7cd26 {
  2900. overflow: hidden;
  2901. }
  2902.  
  2903. .container__99b06 .pill_f055c3 {
  2904. translate: 0 24px;
  2905. transition: translate 0.15s ease;
  2906. }
  2907.  
  2908. .container__99b06:hover .pill_f055c3 {
  2909. translate: 0;
  2910. }
  2911.  
  2912. .container__99b06 .footer__7cd26 > * {
  2913. transition: translate 0.15s ease;
  2914. }
  2915.  
  2916. .container__99b06:has(.pill_f055c3):hover .footer__7cd26 > * {
  2917. translate: 0 -24px;
  2918. }
  2919.  
  2920. .footer__7cd26 {
  2921. height: unset;
  2922. font-size: 12px;
  2923. }
  2924. .footer__7cd26 .messageCountText__13680,
  2925. .footer__7cd26 .text-sm-normal_e612c7,
  2926. .footer__7cd26 .newMessageCount-MJLPv {
  2927. font-size: 12px;
  2928. }
  2929. .footer__7cd26 .reaction_b90ab0 {
  2930. border-radius: 2px;
  2931. margin-right: 0;
  2932. margin-bottom: 0;
  2933. }
  2934. .footer__7cd26 .reaction_b90ab0 .reactionInner__00d5f {
  2935. height: 20px;
  2936. padding: 0 6px;
  2937. }
  2938. .footer__7cd26 .reaction_b90ab0 .emoji {
  2939. height: 14px;
  2940. width: 14px;
  2941. }
  2942. .footer__7cd26 .reactionCount__60448 {
  2943. font-size: 12px;
  2944. }
  2945.  
  2946. .messageCountBox_c71016 {
  2947. height: unset;
  2948. padding-top: 0;
  2949. }
  2950.  
  2951. .messageCountIcon__73000 {
  2952. height: unset;
  2953. margin-top: 0;
  2954. }
  2955.  
  2956. .footer__7cd26 .typing__68fbe .avatarContainer__7b330 {
  2957. -webkit-clip-path: inset(0 4px 0 0);
  2958. clip-path: inset(0 4px 0 0);
  2959. }
  2960. .footer__7cd26 .typing__68fbe .avatarContainer__7b330 .clickableAvatar_e26163,
  2961. .footer__7cd26 .typing__68fbe .avatarContainer__7b330 .avatar__777a6 {
  2962. border-radius: 0;
  2963. }
  2964. .footer__7cd26 .typing__68fbe .base__512ed {
  2965. height: unset;
  2966. font-size: 12px;
  2967. line-height: unset;
  2968. }
  2969. .footer__7cd26 .typing__68fbe .dots__44c48 {
  2970. background-color: rgba(0, 0, 0, 0.2);
  2971. border: none;
  2972. border-radius: 0;
  2973. height: 16px;
  2974. margin-left: -3px;
  2975. margin-right: 0;
  2976. width: 24px;
  2977. }
  2978.  
  2979. .reactionInner__4135b {
  2980. padding: 0 6px;
  2981. }
  2982.  
  2983. .updateReactionButton__5db81 > div {
  2984. padding-bottom: 0;
  2985. padding-top: 0;
  2986. }
  2987.  
  2988. .bodyMedia__43618 {
  2989. height: 72px;
  2990. margin-left: 0;
  2991. border-radius: 0;
  2992. }
  2993. .bodyMedia__43618 .thumbnailContainer_f53f40 {
  2994. max-height: 100%;
  2995. }
  2996. .bodyMedia__43618 .imageWrapper_fd6587 {
  2997. border-radius: 0;
  2998. }
  2999.  
  3000. .pill_f055c3 {
  3001. border-radius: 2px;
  3002. border: none;
  3003. background-color: hsla(0, 0%, 100%, 0.2);
  3004. }
  3005. .pill_f055c3 .text-xs-semibold__2181c,
  3006. .pill_f055c3 .text-sm-semibold_a5824d {
  3007. font-weight: 400;
  3008. }
  3009. .pill_f055c3.small_d2f964 {
  3010. height: 20px;
  3011. padding: 0 6px;
  3012. }
  3013. .pill_f055c3.clickable__8b375 {
  3014. background-color: var(--btn-brand);
  3015. --text-normal: var(--btn-brand-text);
  3016. }
  3017. .pill_f055c3.clickable__8b375:not(.disabled__70fda):hover, .pill_f055c3.clickable__8b375:not(.disabled__70fda).selected_dc72d1 {
  3018. background: var(--btn-brand-hover);
  3019. --text-normal: #fff;
  3020. }
  3021.  
  3022. .messagesWrapper_ea2b0b .scrollerInner__059a5[data-list-id=chat-messages]:not(:has(.wrapper_b8c724)) {
  3023. display: grid;
  3024. position: relative;
  3025. grid-template-columns: minmax(0, 1fr);
  3026. }
  3027.  
  3028. .messagesWrapper_ea2b0b .scrollerInner__059a5[data-list-id=chat-messages]:not(:has(.wrapper_b8c724)):before {
  3029. content: "";
  3030. grid-row: 1/3;
  3031. position: absolute;
  3032. top: 16px;
  3033. left: 16px;
  3034. right: 16px;
  3035. bottom: 2px;
  3036. z-index: -1;
  3037. max-width: 758px;
  3038. background: linear-gradient(170deg, hsl(calc(var(--accent-hue) + 11), calc(var(--saturation-factor, 1) * 34%), 34%) 0%, hsl(calc(var(--accent-hue) + 10), calc(var(--saturation-factor, 1) * 37%), 19%) 300px);
  3039. border: 1px solid hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 35%), 23%);
  3040. box-shadow: 0 0 5px #000;
  3041. }
  3042.  
  3043. .container__404b9.container_b03b4b .iconWrapper__3e4a9 {
  3044. display: none;
  3045. }
  3046.  
  3047. .container_b03b4b h3 {
  3048. font-size: 30px;
  3049. line-height: 36px;
  3050. margin-top: 7px;
  3051. margin-bottom: 12px;
  3052. }
  3053.  
  3054. .container__404b9.container_b03b4b:not(:has(.text-md-normal__6a4eb)) + .divider__8cf56 {
  3055. display: none;
  3056. }
  3057.  
  3058. .container_b03b4b {
  3059. margin-left: 16px;
  3060. margin-right: 16px;
  3061. margin-bottom: 2px;
  3062. max-width: 640px;
  3063. padding: 12px 16px 20px 16px;
  3064. }
  3065.  
  3066. #app-mount .container__404b9 + div + li .message__80c10 {
  3067. background: none;
  3068. box-shadow: none;
  3069. border: none;
  3070. }
  3071. #app-mount .container__404b9 + div + li .message__80c10 .header__39b23 {
  3072. opacity: 1;
  3073. }
  3074.  
  3075. .container__8ee50 {
  3076. background: var(--banner-lightblue);
  3077. border-top: unset;
  3078. margin-top: unset;
  3079. padding: 8px;
  3080. margin: 0 16px;
  3081. max-width: 744px;
  3082. }
  3083. .container__8ee50:has(.buttonInner__2771e.active_f1266e) {
  3084. background: var(--banner-green);
  3085. }
  3086. .container__8ee50 + .divider_ffec75 {
  3087. opacity: 0;
  3088. }
  3089.  
  3090. .reaction_fef95b {
  3091. border-radius: 2px;
  3092. border: unset;
  3093. font-size: 12px;
  3094. font-weight: 500;
  3095. margin-left: 2px;
  3096. text-align: center;
  3097. background-color: var(--btn-brand);
  3098. }
  3099. .reaction_fef95b:hover, .reaction_fef95b.reactionMe__98f57 {
  3100. background: var(--btn-brand-hover);
  3101. }
  3102. .reaction_fef95b:hover .reactionCount_b49901, .reaction_fef95b.reactionMe__98f57 .reactionCount_b49901 {
  3103. color: #fff;
  3104. }
  3105. .reaction_fef95b .reactionCount_b49901 {
  3106. font-size: 12px;
  3107. font-weight: 500;
  3108. color: var(--btn-brand-text);
  3109. }
  3110.  
  3111. .addReactButton__59750 {
  3112. gap: 2px;
  3113. background: none;
  3114. height: 20px;
  3115. border-radius: 2px;
  3116. border: none;
  3117. color: var(--interactive-hover);
  3118. }
  3119. .addReactButton__59750:hover {
  3120. background: var(--btn-brand-hover);
  3121. }
  3122. .addReactButton__59750:hover .icon__9ea62 {
  3123. color: #fff;
  3124. }
  3125.  
  3126. .buttons__1995d {
  3127. background-color: #000000;
  3128. padding: 3px;
  3129. border-radius: 2px;
  3130. height: 32px;
  3131. }
  3132. .buttons__1995d button {
  3133. padding: 0;
  3134. }
  3135. .buttons__1995d button:first-child {
  3136. order: 1;
  3137. }
  3138. .buttons__1995d button:first-child .buttonInner__2771e {
  3139. background: linear-gradient(to right, #75b022 5%, #588a1b 95%);
  3140. padding: 0 16px;
  3141. height: 32px;
  3142. border-radius: 2px;
  3143. border: 0;
  3144. color: #d2efa9;
  3145. text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  3146. }
  3147. .buttons__1995d button:first-child .buttonInner__2771e:hover {
  3148. background: linear-gradient(to right, #8ed629 5%, #6aa621 95%);
  3149. color: #fff;
  3150. }
  3151. .buttons__1995d button:first-child .buttonInner__2771e.active_f1266e {
  3152. background: linear-gradient(to bottom, rgb(193, 228, 249) 5%, rgb(148, 183, 202) 95%);
  3153. color: #2B5066;
  3154. text-shadow: none;
  3155. }
  3156. .buttons__1995d button:first-child .buttonInner__2771e.active_f1266e:hover {
  3157. background: linear-gradient(to bottom, rgb(102, 192, 244) 5%, rgb(47, 137, 188) 95%);
  3158. color: #fff;
  3159. }
  3160. .buttons__1995d button:last-child .buttonInner__2771e {
  3161. background: none;
  3162. border: none;
  3163. height: 100%;
  3164. }
  3165.  
  3166. .profilePanel__12596 {
  3167. margin-left: var(--content-gutter);
  3168. }
  3169. .profilePanel__12596 .bannerSVGWrapper__3e7b0:not(:has([style*=image])) {
  3170. position: absolute;
  3171. top: 0;
  3172. left: 0;
  3173. z-index: unset;
  3174. }
  3175. .profilePanel__12596:not(:has(svg div[style*=image])) .overlayBackground__86b78 {
  3176. --header-height: 112px;
  3177. margin-top: var(--header-height);
  3178. }
  3179. .profilePanel__12596 .avatarPositionPanel__87e08 {
  3180. top: 16px;
  3181. }
  3182. .profilePanel__12596 .userPanelInner_eddf4c:before {
  3183. height: 100%;
  3184. width: 100%;
  3185. }
  3186. .profilePanel__12596 .badgelistGroup__53eaa {
  3187. position: absolute;
  3188. top: calc(var(--banner-height, 108px) + 2px + 16px);
  3189. left: 0;
  3190. width: 100%;
  3191. min-height: unset;
  3192. margin: 0;
  3193. }
  3194. .profilePanel__12596 .badgeList_ef4131 {
  3195. width: 100%;
  3196. padding: 0;
  3197. gap: 4px;
  3198. z-index: 2;
  3199. background: none;
  3200. box-shadow: none;
  3201. justify-content: center;
  3202. min-height: unset;
  3203. margin: 0;
  3204. }
  3205. .profilePanel__12596 .overlayBackground__86b78 ~ .overlayBackground__86b78:not(:empty, :has(.activity__20c1e)) {
  3206. margin: 12px;
  3207. background: rgba(0, 0, 0, 0.3);
  3208. border-radius: 3px;
  3209. padding: 20px 10px 11px 10px;
  3210. }
  3211. .profilePanel__12596 .profilePanelConnections__3c232 {
  3212. gap: 7px;
  3213. }
  3214. .profilePanel__12596 .profilePanelConnections__3c232 > div {
  3215. box-sizing: border-box;
  3216. background: rgba(0, 0, 0, 0.3);
  3217. border-radius: 5px;
  3218. }
  3219. .profilePanel__12596 .profilePanelConnections__3c232 button svg {
  3220. color: var(--brand-experiment);
  3221. }
  3222. .profilePanel__12596 .mutualFriendsDivider_c21dfe {
  3223. border-top: none;
  3224. }
  3225. .profilePanel__12596:has(.containerWithContent__7e98f) .overlayBackground__86b78:has(.memberSinceContainer__0a28b) {
  3226. padding-top: 38px;
  3227. }
  3228. .profilePanel__12596:has(.containerWithContent__7e98f) .overlayBackground__86b78:has(.memberSinceContainer__0a28b):not(:has(.customStatusSection_ce6c27)) {
  3229. padding-top: 54px;
  3230. }
  3231. .profilePanel__12596 .divider_ed0c1d {
  3232. display: none;
  3233. }
  3234. .profilePanel__12596 .section__6f61e:has(.activity__20c1e) {
  3235. background: rgba(0, 0, 0, 0.2);
  3236. margin: 0 -12px -12px;
  3237. padding: 12px;
  3238. }
  3239.  
  3240. .container_b2ce9c,
  3241. .member_b44d5d,
  3242. .members__9f47b {
  3243. background: none;
  3244. }
  3245.  
  3246. .container_b2ce9c .scrollerBase_dc3aa9 {
  3247. overflow: hidden overlay !important;
  3248. }
  3249.  
  3250. .members__9f47b[style^="overflow: hidden scroll"] {
  3251. overflow: hidden overlay !important;
  3252. }
  3253.  
  3254. .members__9f47b {
  3255. width: 308px;
  3256. padding-bottom: var(--content-gutter);
  3257. }
  3258.  
  3259. .membersWrap__90226 {
  3260. margin-left: var(--content-gutter);
  3261. height: -moz-fit-content;
  3262. height: fit-content;
  3263. max-height: 100%;
  3264. }
  3265. .membersWrap__90226 .content__23cab {
  3266. margin-top: var(--content-gutter);
  3267. padding-bottom: 16px;
  3268. background: var(--store-sidebar-background);
  3269. }
  3270.  
  3271. .layout_bb8e67 {
  3272. border-radius: 1px;
  3273. padding: 0 8px;
  3274. background: var(--sidebar-btn-brand);
  3275. }
  3276.  
  3277. .clickable__17ccb:hover .layout_bb8e67,
  3278. .clickable__17ccb:active .layout_bb8e67,
  3279. .selected__9800b .layout_bb8e67 {
  3280. background: var(--btn-brand-hover);
  3281. }
  3282. .clickable__17ccb:hover .layout_bb8e67:has([mask="url(#svg-mask-avatar-status-mobile-32)"]),
  3283. .clickable__17ccb:active .layout_bb8e67:has([mask="url(#svg-mask-avatar-status-mobile-32)"]),
  3284. .selected__9800b .layout_bb8e67:has([mask="url(#svg-mask-avatar-status-mobile-32)"]) {
  3285. --rs-online-color: #fff;
  3286. }
  3287. .clickable__17ccb:hover .username_d272d6,
  3288. .clickable__17ccb:active .username_d272d6,
  3289. .selected__9800b .username_d272d6 {
  3290. color: #fff !important;
  3291. }
  3292. .clickable__17ccb:hover .activity__3cbac,
  3293. .clickable__17ccb:active .activity__3cbac,
  3294. .selected__9800b .activity__3cbac {
  3295. color: #fff;
  3296. }
  3297. .clickable__17ccb:hover .layout_bb8e67:has([mask="url(#svg-mask-avatar-status-mobile-32)"]),
  3298. .clickable__17ccb:active .layout_bb8e67:has([mask="url(#svg-mask-avatar-status-mobile-32)"]),
  3299. .selected__9800b .layout_bb8e67:has([mask="url(#svg-mask-avatar-status-mobile-32)"]) {
  3300. --rs-online-color: #fff;
  3301. }
  3302.  
  3303. .membersGroup__85843.container-q97qHp {
  3304. font-size: 12px;
  3305. font-weight: 500;
  3306. color: var(--text-muted);
  3307. text-transform: capitalize;
  3308. padding-top: 16px;
  3309. }
  3310.  
  3311. .member_aa4760 {
  3312. margin-left: 16px;
  3313. margin-right: 16px;
  3314. max-width: unset;
  3315. }
  3316.  
  3317. .avatar__6337f {
  3318. width: 32px;
  3319. height: 32px;
  3320. margin-right: 8px;
  3321. }
  3322.  
  3323. .name__16feb {
  3324. font-size: 14px;
  3325. line-height: 20px;
  3326. font-weight: 600;
  3327. }
  3328.  
  3329. .layout_bb8e67:has([mask="url(#svg-mask-avatar-status-mobile-32)"]) .username__11d8c {
  3330. display: flex;
  3331. flex-flow: row nowrap;
  3332. align-items: center;
  3333. }
  3334. .layout_bb8e67:has([mask="url(#svg-mask-avatar-status-mobile-32)"]) .username__11d8c span {
  3335. max-width: calc(100% - 2px - 16px);
  3336. overflow: hidden;
  3337. white-space: nowrap;
  3338. text-overflow: ellipsis;
  3339. }
  3340. .layout_bb8e67:has([mask="url(#svg-mask-avatar-status-mobile-32)"]) .username__11d8c::after {
  3341. content: "";
  3342. display: block;
  3343. width: 16px;
  3344. height: 16px;
  3345. -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="none"><path d="m23.9557 3H12.0343C10.6158 3 9.47 4.1458 9.47 5.5643v24.8657c0 1.4186 1.1458 2.5643 2.5643 2.5643h11.9077c1.4186 0 2.5643-1.1458 2.5643-2.5643V5.5643c0-1.4186-1.1458-2.5643-2.5643-2.5643Zm-8.8933 1.2003h5.8788c.3819 0 .682.3001.682.682s-.3001.682-.682.682h-5.8788c-.3819 0-.682-.3001-.682-.682s.3001-.682.682-.682Zm2.9462 26.5844c-.7502 0-1.364-.6138-1.364-1.364s.6138-1.364 1.364-1.364 1.364.6138 1.364 1.364-.6138 1.364-1.364 1.364Zm6.7927-4.433H11.2568V7.2693h13.5172v19.096Z" fill="currentColor"></path></svg>') center/contain no-repeat;
  3346. mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="none"><path d="m23.9557 3H12.0343C10.6158 3 9.47 4.1458 9.47 5.5643v24.8657c0 1.4186 1.1458 2.5643 2.5643 2.5643h11.9077c1.4186 0 2.5643-1.1458 2.5643-2.5643V5.5643c0-1.4186-1.1458-2.5643-2.5643-2.5643Zm-8.8933 1.2003h5.8788c.3819 0 .682.3001.682.682s-.3001.682-.682.682h-5.8788c-.3819 0-.682-.3001-.682-.682s.3001-.682.682-.682Zm2.9462 26.5844c-.7502 0-1.364-.6138-1.364-1.364s.6138-1.364 1.364-1.364 1.364.6138 1.364 1.364-.6138 1.364-1.364 1.364Zm6.7927-4.433H11.2568V7.2693h13.5172v19.096Z" fill="currentColor"></path></svg>') center/contain no-repeat;
  3347. background: var(--rs-online-color);
  3348. margin-left: 2px;
  3349. }
  3350.  
  3351. .interactive:hover {
  3352. color: #fff;
  3353. background: var(--btn-brand-hover);
  3354. }
  3355.  
  3356. .wrapper__2d9b1 {
  3357. border-radius: 2px;
  3358. font-weight: 400;
  3359. }
  3360.  
  3361. .avatar__08316 {
  3362. position: absolute;
  3363. left: 14px;
  3364. border-radius: 0;
  3365. box-shadow: 0 0 0 1px hsl(0, 0%, 29%), 0 0 0 2px hsl(0, 0%, 36%);
  3366. }
  3367.  
  3368. .header__39b23 {
  3369. opacity: 0.25;
  3370. }
  3371.  
  3372. .username_d30d99 {
  3373. font-weight: 600;
  3374. }
  3375.  
  3376. .automodMessage__410f7:before,
  3377. .ephemeral_c26b64:before,
  3378. .highlighted__5f454:before,
  3379. .mentioned__58017:before,
  3380. .replying_d7b6ad:before {
  3381. display: none;
  3382. }
  3383.  
  3384. #app-mount .botTagRegular_c89c9a {
  3385. background-color: hsl(calc(var(--accent-hue) + 5), calc(var(--saturation-factor, 1) * 28.7%), 42.4%);
  3386. border: 1px solid hsl(calc(var(--accent-hue) + 5), calc(var(--saturation-factor, 1) * 34%), 60.2%);
  3387. color: hsl(calc(var(--accent-hue) + 5), calc(var(--saturation-factor, 1) * 78.8%), 77.8%);
  3388. border-radius: 0;
  3389. }
  3390.  
  3391. #app-mount .message__80c10 {
  3392. background: hsl(calc(var(--accent-hue) + 9), calc(var(--saturation-factor, 1) * 35.4%), 19.4%, 0.8);
  3393. border: 1px solid hsl(calc(var(--accent-hue) + 9), calc(var(--saturation-factor, 1) * 35%), 22.9%);
  3394. box-shadow: 0 0 5px #000;
  3395. margin: 0 16px;
  3396. margin-bottom: 2px;
  3397. max-width: var(--message-width);
  3398. }
  3399. #app-mount .message__80c10.mentioned__58017 {
  3400. background: rgb(94, 141, 156);
  3401. }
  3402. #app-mount .message__80c10.replying_d7b6ad {
  3403. background: var(--message-background-gradient-blue);
  3404. }
  3405. #app-mount .message__80c10.automodMessage__410f7, #app-mount .message__80c10:has(.communicationDisabled__74899) {
  3406. background: var(--banner-red);
  3407. }
  3408. #app-mount .message__80c10:has(.button_d553e5.dangerous_b60ec0:hover), #app-mount .message__80c10:has(.button_d553e5.dangerous_b60ec0:active) {
  3409. background: var(--banner-red);
  3410. }
  3411. #app-mount .message__80c10:hover .header__39b23 {
  3412. opacity: 1;
  3413. }
  3414. #app-mount .message__80c10 .mediaAttachmentsContainer_edba75,
  3415. #app-mount .message__80c10 .messageAttachmentMediaMosaic__65bfc,
  3416. #app-mount .message__80c10 .oneByOneGridSingle__01756,
  3417. #app-mount .message__80c10 .imageWrapper_fd6587,
  3418. #app-mount .message__80c10 .video__4c052,
  3419. #app-mount .message__80c10 .wrapper__3a7a0 {
  3420. border-radius: 4px;
  3421. }
  3422.  
  3423. #app-mount .messageListItem__6a4fb:has(.communicationDisabled__74899) + .messageListItem__6a4fb .message__80c10:not(.groupStart__56db5) {
  3424. background: var(--banner-red);
  3425. }
  3426.  
  3427. .hoverButtonGroup__5b423 {
  3428. border-radius: 3px;
  3429. }
  3430.  
  3431. #app-mount .groupStart__56db5 {
  3432. margin-top: 0;
  3433. }
  3434.  
  3435. .compact__54ecc.wrapper__09ecc,
  3436. .cozy_f5c119.wrapper__09ecc {
  3437. padding-top: 12px;
  3438. padding-bottom: 20px;
  3439. padding-left: 70px;
  3440. }
  3441.  
  3442. #app-mount .compact__54ecc .repliedMessage_e2bf4a {
  3443. top: 12px;
  3444. }
  3445.  
  3446. .compact__54ecc .repliedMessage_e2bf4a + .contents_f41bb2 {
  3447. margin-top: 58px;
  3448. }
  3449.  
  3450. #app-mount .repliedMessage_e2bf4a {
  3451. position: absolute;
  3452. top: 56px;
  3453. left: 86px;
  3454. border: 1px solid var(--quote-color);
  3455. margin-left: -5px;
  3456. padding: 12px;
  3457. border-radius: 3px;
  3458. box-sizing: border-box;
  3459. max-width: calc(100% - 97px);
  3460. }
  3461. #app-mount .repliedMessage_e2bf4a > div {
  3462. position: relative;
  3463. z-index: 1;
  3464. }
  3465. #app-mount .repliedMessage_e2bf4a::before {
  3466. content: none;
  3467. }
  3468. #app-mount .repliedMessage_e2bf4a + .contents_f41bb2 .header__39b23 {
  3469. margin-bottom: 92px;
  3470. }
  3471. #app-mount .repliedMessage_e2bf4a img.emoji {
  3472. display: inline;
  3473. }
  3474. #app-mount .repliedMessage_e2bf4a .username_d30d99 {
  3475. margin-right: 5px;
  3476. }
  3477.  
  3478. .blockquoteDivider__96157 {
  3479. background-color: var(--quote-color);
  3480. }
  3481.  
  3482. .container__9d616 {
  3483. top: 14px;
  3484. padding-right: 8px;
  3485. }
  3486.  
  3487. .wrapper_c727b6 {
  3488. background: none;
  3489. height: 28px;
  3490. border-radius: unset;
  3491. box-shadow: unset;
  3492. transition: unset;
  3493. }
  3494.  
  3495. .full-motion .wrapper_c727b6:hover {
  3496. box-shadow: none;
  3497. }
  3498.  
  3499. .button_d553e5 {
  3500. height: 28px;
  3501. padding: 0;
  3502. min-width: 34px;
  3503. margin-left: 2px;
  3504. background-color: var(--btn-dark);
  3505. border-radius: 3px;
  3506. }
  3507. .button_d553e5:hover {
  3508. background-color: var(--btn-dark-hover);
  3509. }
  3510. .button_d553e5:active {
  3511. padding: 0;
  3512. }
  3513. .button_d553e5.selected__63428 {
  3514. background-color: var(--btn-dark-hover);
  3515. }
  3516. .button_d553e5.dangerous_b60ec0:hover {
  3517. background: var(--status-danger);
  3518. color: #fff;
  3519. }
  3520.  
  3521. .embedFull__8dc21 {
  3522. overflow: hidden;
  3523. border-left: none;
  3524. z-index: 0;
  3525. box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  3526. }
  3527. .embedFull__8dc21::before {
  3528. content: "";
  3529. position: absolute;
  3530. display: block;
  3531. height: 100%;
  3532. border-right: 100vw solid transparent;
  3533. border-color: inherit;
  3534. opacity: 0.4;
  3535. z-index: -1;
  3536. }
  3537. .embedFull__8dc21::after {
  3538. content: "";
  3539. position: absolute;
  3540. display: block;
  3541. height: 100%;
  3542. width: 100%;
  3543. background: linear-gradient(-45deg, transparent, rgba(0, 0, 0, 0.6) 95%);
  3544. opacity: 0.6;
  3545. z-index: -1;
  3546. }
  3547. .embedFull__8dc21 .embedSuppressButton_df9a75 {
  3548. display: flex;
  3549. align-items: center;
  3550. justify-content: center;
  3551. margin: 6px 4px 0 0;
  3552. height: 20px;
  3553. width: 20px;
  3554. right: 0;
  3555. z-index: 2;
  3556. }
  3557. .embedFull__8dc21 .embedSuppressButton_df9a75:hover {
  3558. background: var(--button-danger-background);
  3559. color: var(--white-500);
  3560. }
  3561. .embedFull__8dc21 .embedAuthorIcon__6b055 {
  3562. border-radius: 4px;
  3563. }
  3564.  
  3565. .newMosaicStyle__8d3be .codeView__8b1ff {
  3566. margin: 2px 2px 0;
  3567. border-radius: 4px;
  3568. font-size: 0.8125rem;
  3569. line-height: 1.0625rem;
  3570. font-weight: lighter;
  3571. -webkit-font-smoothing: antialiased;
  3572. }
  3573. .newMosaicStyle__8d3be .textContainer__709ff {
  3574. background: linear-gradient(-90deg, hsl(calc(var(--accent-hue) - 2), calc(var(--saturation-factor, 1) * 100%), 94.3%, 0.3) 5%, hsl(calc(var(--accent-hue) - 10), calc(var(--saturation-factor, 1) * 15.6%), 39%, 0.3) 95%);
  3575. border: none;
  3576. border-radius: 4px 4px 0 0;
  3577. min-height: 116px;
  3578. }
  3579. .newMosaicStyle__8d3be .footer__06f4b {
  3580. background: linear-gradient(-60deg, hsl(calc(var(--accent-hue) - 2), calc(var(--saturation-factor, 1) * 100%), 94.3%, 0.3) 5%, hsl(calc(var(--accent-hue) - 10), calc(var(--saturation-factor, 1) * 15.6%), 39%, 0.3) 95%);
  3581. border: none;
  3582. border-radius: 0 0 4px 4px;
  3583. gap: 4px;
  3584. }
  3585. .newMosaicStyle__8d3be .footer__06f4b .attachmentName_b33bf1 {
  3586. color: var(--header-secondary);
  3587. }
  3588. .newMosaicStyle__8d3be .footer__06f4b .formattedSize__07da1 {
  3589. color: var(--text-muted);
  3590. }
  3591. .newMosaicStyle__8d3be .footer__06f4b .downloadSection_a31362 + a {
  3592. align-items: center;
  3593. display: flex;
  3594. }
  3595. .newMosaicStyle__8d3be .footer__06f4b svg {
  3596. color: var(--brand-experiment);
  3597. }
  3598. .newMosaicStyle__8d3be .footer__06f4b .codeIcon__14a76 {
  3599. padding-bottom: 0;
  3600. }
  3601.  
  3602. .tile_ebc93b {
  3603. transform: none;
  3604. transition: none;
  3605. min-height: unset;
  3606. position: relative;
  3607. border-radius: 4px;
  3608. }
  3609. #app-mount .tile_ebc93b {
  3610. background: var(--banner-lightblue);
  3611. }
  3612. .tile_ebc93b .invalidPoop__03aa3 {
  3613. background-color: transparent;
  3614. background-size: 64%;
  3615. }
  3616. .tile_ebc93b .title__701c1 {
  3617. font-size: 21px;
  3618. font-weight: 400;
  3619. }
  3620. .tile_ebc93b .tagline__3427c {
  3621. font-size: 14px;
  3622. line-height: 18px;
  3623. color: var(--header-secondary);
  3624. margin-top: 0;
  3625. }
  3626. .tile_ebc93b .actions_e6e0f0 {
  3627. margin-top: 10px;
  3628. display: flex;
  3629. margin-left: auto;
  3630. align-items: center;
  3631. width: -moz-fit-content;
  3632. width: fit-content;
  3633. background: #000;
  3634. padding: 3px;
  3635. border-radius: 2px;
  3636. }
  3637.  
  3638. .wrapperAudio__555ce {
  3639. border: none;
  3640. }
  3641. #app-mount .wrapperAudio__555ce {
  3642. background: var(--banner-lightblue);
  3643. }
  3644. .wrapperAudio__555ce .volumeButtonSlider__05188 {
  3645. position: absolute;
  3646. bottom: 10px;
  3647. left: -54px;
  3648. right: 0;
  3649. }
  3650.  
  3651. .audioControls__9fbe9 {
  3652. border-radius: 2px;
  3653. }
  3654.  
  3655. .videoControls__96149 {
  3656. background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 60%, hsl(calc(var(--accent-hue) + 25), calc(var(--saturation-factor, 1) * 9.4%), 12.5%, 0) 100%);
  3657. }
  3658. .videoControls__96149 .mediaBarWrapper_f312bd {
  3659. background: hsl(calc(var(--accent-hue) - 13), calc(var(--saturation-factor, 1) * 15.8%), 29.8%);
  3660. }
  3661.  
  3662. .fakeEdges__17ee5::before, .fakeEdges__17ee5::after {
  3663. display: none;
  3664. }
  3665.  
  3666. .durationTimeDisplay_acef46,
  3667. .durationTimeSeparator__8b5d8 {
  3668. font-weight: 400;
  3669. font-family: var(--font-primary);
  3670. }
  3671.  
  3672. .controlIcon__11f8e {
  3673. opacity: 0.4;
  3674. }
  3675.  
  3676. .videoButton__1a553 svg {
  3677. color: #fff;
  3678. height: 20px;
  3679. width: 20px;
  3680. padding: 2px;
  3681. }
  3682. .videoButton__1a553 svg:not(:hover) {
  3683. opacity: 0.4;
  3684. }
  3685.  
  3686. .volumeButton__3a6bf:has([d^="M12 3a1 1 0 0 0-1-1h-.06a1 1 0 0 0-.74.32L5.92 7H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.92l4.28 4.68a1 1 0 0 0 .74.32H11a1 1 0 0 0 1-1V3ZM15.1 20.75c-.58.14-1.1-.33-1.1-.92v-.03c0-.5.37-.92.85-1.05a7 7 0 0 0 0-13.5A1.11 1.11 0 0 1 14 4.2v-.03c0-.6.52-1.06 1.1-.92a9 9 0 0 1 0 17.5Z"]) {
  3687. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/volume.svg) center/contain no-repeat;
  3688. mask: url(https://maendisease.github.io/Steam/illustrations/icns/volume.svg) center/contain no-repeat;
  3689. -webkit-mask-size: 20px;
  3690. mask-size: 20px;
  3691. }
  3692. .volumeButton__3a6bf:has([d^="M12 3a1 1 0 0 0-1-1h-.06a1 1 0 0 0-.74.32L5.92 7H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.92l4.28 4.68a1 1 0 0 0 .74.32H11a1 1 0 0 0 1-1V3ZM15.18 15.36c-.55.35-1.18-.12-1.18-.78v-.27c0-.36.2-.67.45-.93a2 2 0 0 0 0-2.76c-.24-.26-.45-.57-.45-.93v-.27c0-.66.63-1.13 1.18-.78a4 4 0 0 1 0 6.72Z"]) {
  3693. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/volumehalf.svg) center/contain no-repeat;
  3694. mask: url(https://maendisease.github.io/Steam/illustrations/icns/volumehalf.svg) center/contain no-repeat;
  3695. -webkit-mask-size: 20px;
  3696. mask-size: 20px;
  3697. }
  3698. .volumeButton__3a6bf:has([d^="M12 3a1 1 0 0 0-1-1h-.06a1 1 0 0 0-.74.32L5.92 7H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.92l4.28 4.68a1 1 0 0 0 .74.32H11a1 1 0 0 0 1-1V3ZM22.7 8.3a1 1 0 0 0-1.4 0L19 10.58l-2.3-2.3a1 1 0 1 0-1.4 1.42L17.58 12l-2.3 2.3a1 1 0 0 0 1.42 1.4L19 13.42l2.3 2.3a1 1 0 0 0 1.4-1.42L20.42 12l2.3-2.3a1 1 0 0 0 0-1.4Z"]) {
  3699. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/volumemuted.svg) center/contain no-repeat;
  3700. mask: url(https://maendisease.github.io/Steam/illustrations/icns/volumemuted.svg) center/contain no-repeat;
  3701. -webkit-mask-size: 20px;
  3702. mask-size: 20px;
  3703. }
  3704. .volumeButton__3a6bf svg {
  3705. background: #fff;
  3706. }
  3707. .volumeButton__3a6bf path {
  3708. display: none;
  3709. }
  3710.  
  3711. .mediaBarInteractionVolume_f4c833 {
  3712. border-radius: 0;
  3713. padding: 0;
  3714. }
  3715.  
  3716. .mediaBarGrabber_c64ff9 {
  3717. width: 6px;
  3718. height: 24px;
  3719. border-radius: 50px;
  3720. margin-top: -16px;
  3721. transition: none;
  3722. box-shadow: 0 0 1px 1px #000;
  3723. }
  3724. .mediaBarInteraction__0633c:hover .mediaBarGrabber_c64ff9 {
  3725. background-color: var(--brand-experiment);
  3726. }
  3727. .mediaBarInteraction__0633c:hover .mediaBarGrabber_c64ff9:hover {
  3728. background-color: #fff;
  3729. }
  3730.  
  3731. .bubble_f48089 {
  3732. top: -34px;
  3733. border-radius: 2px;
  3734. height: unset;
  3735. line-height: 17px;
  3736. font-size: 13px;
  3737. font-weight: 400;
  3738. color: var(--tooltip-text);
  3739. background: var(--tooltip-background);
  3740. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3333333333), 2px 2px 16px 1px rgba(0, 0, 0, 0.3333333333);
  3741. }
  3742. .bubble_f48089::before {
  3743. display: none;
  3744. }
  3745.  
  3746. .bumpBox_cfd81a {
  3747. background: rgba(0, 0, 0, 0.2);
  3748. border-radius: 5px;
  3749. padding: 5px 8px;
  3750. margin-right: 4px;
  3751. }
  3752.  
  3753. .wrapper_efe67f {
  3754. background: var(--background-tertiary);
  3755. border-radius: 0;
  3756. padding: 0;
  3757. max-width: 432px;
  3758. min-width: 160px;
  3759. width: 100%;
  3760. box-sizing: content-box;
  3761. position: relative;
  3762. border-top: 1px solid rgba(201, 201, 201, 0.06);
  3763. border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  3764. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
  3765. transform-style: preserve-3d;
  3766. perspective: 300px;
  3767. perspective-origin: 50%;
  3768. overflow: hidden;
  3769. }
  3770. .wrapper_efe67f:has(.inviteSplash_f4eb93) {
  3771. height: 222px;
  3772. }
  3773. .wrapper_efe67f:hover .inviteSplash_f4eb93 {
  3774. transform: scale(1.06);
  3775. filter: brightness(1.1) contrast(0.95) saturate(1);
  3776. }
  3777. .wrapper_efe67f:hover .inviteSplash_f4eb93::before {
  3778. opacity: 0.2;
  3779. transform: rotateZ(210deg) translateX(12%) translateY(32%);
  3780. }
  3781. .wrapper_efe67f .inviteSplash_f4eb93 {
  3782. position: absolute;
  3783. inset: 0;
  3784. background-color: var(--background-modifier-accent);
  3785. border-radius: 0;
  3786. height: 100%;
  3787. margin: 0;
  3788. z-index: -1;
  3789. transition-property: transform;
  3790. transition-duration: 0.6s;
  3791. transition-timing-function: cubic-bezier(0, 0.73, 0.48, 1);
  3792. }
  3793. .wrapper_efe67f .inviteSplash_f4eb93::before {
  3794. content: "";
  3795. display: block;
  3796. opacity: 0.1;
  3797. width: 220%;
  3798. height: 100%;
  3799. background: linear-gradient(to bottom, hsl(calc(var(--accent-hue) + 5), calc(var(--saturation-factor, 1) * 100%), 96.1%, 0) 0%, hsl(calc(var(--accent-hue) + 5), calc(var(--saturation-factor, 1) * 100%), 96.1%, 0.85) 12px, hsl(calc(var(--accent-hue) + 5), calc(var(--saturation-factor, 1) * 100%), 96.1%, 0.75) 20%, rgba(210, 210, 210, 0) 60%, rgba(10, 10, 10, 0) 85%, rgba(10, 10, 10, 0.8) 100%);
  3800. position: absolute;
  3801. top: 0;
  3802. left: 0;
  3803. transform: rotateZ(212deg) translateX(12%) translateY(59%);
  3804. pointer-events: none;
  3805. z-index: 10;
  3806. transition-property: transform, opacity;
  3807. transition-duration: 0.6s;
  3808. transition-timing-function: cubic-bezier(0, 0.73, 0.48, 1);
  3809. }
  3810. .wrapper_efe67f .h5__884a2.eyebrow_b7df6b {
  3811. display: none;
  3812. }
  3813. .wrapper_efe67f .content_cd557a {
  3814. min-height: 76px;
  3815. padding: 8px;
  3816. margin-top: auto;
  3817. position: relative;
  3818. overflow: hidden;
  3819. box-sizing: border-box;
  3820. }
  3821. .wrapper_efe67f .content_cd557a::before {
  3822. content: "";
  3823. display: block;
  3824. position: absolute;
  3825. inset: 0;
  3826. box-shadow: inset 0 0 16px 16px #686868;
  3827. filter: blur(16px);
  3828. -webkit-backdrop-filter: blur(16px);
  3829. backdrop-filter: blur(16px);
  3830. overflow: hidden;
  3831. z-index: -1;
  3832. }
  3833. .wrapper_efe67f .headerLine__7d71c {
  3834. gap: 12px;
  3835. }
  3836. .wrapper_efe67f .inviteDestination_bd24e2 {
  3837. font-weight: 400;
  3838. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  3839. }
  3840. .wrapper_efe67f .guildDetail__0b882 {
  3841. font-size: 12px;
  3842. line-height: 16px;
  3843. }
  3844. .wrapper_efe67f .count__72c4c {
  3845. color: var(--header-secondary);
  3846. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  3847. }
  3848. #app-mount .wrapper_efe67f button {
  3849. padding: 2px;
  3850. background-image: radial-gradient(ellipse farthest-corner at 50% 40%, #75b022 0%, #588a1b 100%);
  3851. box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);
  3852. transition-property: background;
  3853. transition-duration: 0.21s;
  3854. transition-timing-function: ease-in-out;
  3855. }
  3856. #app-mount .wrapper_efe67f button:hover {
  3857. background-image: radial-gradient(ellipse farthest-corner at 50% 40%, #8ed629 0%, #6aa621 100%);
  3858. }
  3859. #app-mount .wrapper_efe67f button:active {
  3860. background-image: radial-gradient(ellipse farthest-corner at 50% 40%, rgb(193, 228, 249) 0%, rgb(148, 183, 202) 100%);
  3861. }
  3862. #app-mount .wrapper_efe67f button.buttonSize_b01b54 {
  3863. height: 60px;
  3864. width: 60px;
  3865. }
  3866. #app-mount .wrapper_efe67f:has(.inviteDestinationJoined_c0a563) button {
  3867. background-image: radial-gradient(ellipse farthest-corner at 50% 40%, #35b2ec 0%, #11668a 100%);
  3868. }
  3869.  
  3870. .iconActiveLarge__8985a {
  3871. border-radius: 3px;
  3872. }
  3873.  
  3874. #app-mount .guildIconImage__93ae7 {
  3875. background-color: transparent;
  3876. }
  3877.  
  3878. .status__5b71e {
  3879. height: 6px;
  3880. width: 6px;
  3881. margin-right: 8px;
  3882. }
  3883.  
  3884. .statusOffline__84b14 {
  3885. background: var(--gpColor-Grey);
  3886. }
  3887.  
  3888. .statusOnline__13c7b {
  3889. background: var(--gpColor-GreenHi);
  3890. filter: drop-shadow(0 0 4px hsl(var(--gpColor-GreenHi-hsl)/0.8));
  3891. }
  3892.  
  3893. #app-mount .divider__8cf56.beforeGroup__1e5e5 {
  3894. top: 0;
  3895. }
  3896.  
  3897. #app-mount .divider_b9338f[role=separator] {
  3898. border-top: none;
  3899. justify-content: flex-start;
  3900. height: 1px;
  3901. max-width: calc(var(--message-width) - 70px);
  3902. background: var(--store-divider);
  3903. margin-top: 2rem;
  3904. margin-bottom: -1px;
  3905. }
  3906. #app-mount .divider_b9338f[role=separator]#---new-messages-bar {
  3907. background: linear-gradient(to right, var(--status-danger) 0%, transparent 100%);
  3908. }
  3909.  
  3910. .content_d67847 {
  3911. padding: 0;
  3912. color: var(--quote-color);
  3913. background: none;
  3914. line-height: auto;
  3915. font-size: 14px;
  3916. margin-top: -30px;
  3917. font-weight: 400;
  3918. letter-spacing: 2px;
  3919. border-radius: 0;
  3920. text-transform: uppercase;
  3921. }
  3922.  
  3923. .unreadPill__715fc {
  3924. top: unset;
  3925. right: unset;
  3926. bottom: 0;
  3927. border-radius: 0;
  3928. padding: 0;
  3929. height: unset;
  3930. font-size: 14px;
  3931. font-weight: 400;
  3932. line-height: auto;
  3933. padding-bottom: 11px;
  3934. letter-spacing: 2px;
  3935. background: none;
  3936. }
  3937.  
  3938. .unreadPillCap__96b8d {
  3939. display: none;
  3940. }
  3941.  
  3942. .content_d67847 + .unreadPill__715fc {
  3943. right: 0;
  3944. }
  3945.  
  3946. .reaction_b90ab0 {
  3947. border-radius: 5px;
  3948. margin-right: 2px;
  3949. margin-bottom: 2px;
  3950. transition: none;
  3951. background: var(--btn-dark);
  3952. border: none;
  3953. }
  3954. .reaction_b90ab0:hover {
  3955. background: rgba(255, 255, 255, 0.2);
  3956. border-color: unset;
  3957. }
  3958. .reaction_b90ab0 .reactionInner__00d5f {
  3959. padding: 5px 8px;
  3960. }
  3961. .reaction_b90ab0 .reactionInner__00d5f .reactionCount__60448 {
  3962. color: var(--btn-dark-text);
  3963. }
  3964. .reaction_b90ab0.reactionMe_bf6909 {
  3965. background: var(--btn-dark-hover);
  3966. }
  3967. .reaction_b90ab0.reactionMe_bf6909 .reactionCount__60448 {
  3968. color: #fff;
  3969. }
  3970.  
  3971. .wrapper__09ecc:has(.blockedMessageText__57d64) {
  3972. padding: 0 0 0 16px;
  3973. }
  3974. .wrapper__09ecc:has(.blockedMessageText__57d64).compact__54ecc {
  3975. padding: 0 0 0 108px;
  3976. }
  3977.  
  3978. #app-mount .groupStart__56db5:has(.blockedMessageText__57d64) {
  3979. margin: 0;
  3980. }
  3981. #app-mount .groupStart__56db5:has(.blockedMessageText__57d64).expanded_be53d7 {
  3982. background: none;
  3983. }
  3984. #app-mount .groupStart__56db5:has(.blockedMessageText__57d64) .messageListItem__6a4fb {
  3985. opacity: 0.5;
  3986. }
  3987. #app-mount .groupStart__56db5:has(.blockedMessageText__57d64) .message__80c10 {
  3988. background: var(--info-danger-background);
  3989. border: 1px solid var(--info-danger-foreground);
  3990. }
  3991.  
  3992. .blockedSystemMessage_e58a4c .iconContainer_dfc268 {
  3993. display: none;
  3994. }
  3995.  
  3996. .blockedMessageText__57d64 {
  3997. position: relative;
  3998. font-size: 12px;
  3999. line-height: 16px;
  4000. color: var(--interactive-muted);
  4001. }
  4002. .blockedMessageText__57d64:hover {
  4003. text-decoration: underline;
  4004. color: var(--info-danger-foreground);
  4005. }
  4006. .blockedMessageText__57d64:after {
  4007. content: "";
  4008. position: absolute;
  4009. right: 0;
  4010. height: 100%;
  4011. width: 14px;
  4012. pointer-events: none;
  4013. background-color: currentColor;
  4014. -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 18 24" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 3.999V2H9V3.999H3V5.999H21V3.999H15Z M5 6.99902V18.999C5 20.101 5.897 20.999 7 20.999H17C18.103 20.999 19 20.101 19 18.999V6.99902H5ZM11 17H9V11H11V17ZM15 17H13V11H15V17Z" ></path></svg>') center/contain no-repeat;
  4015. mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 18 24" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 3.999V2H9V3.999H3V5.999H21V3.999H15Z M5 6.99902V18.999C5 20.101 5.897 20.999 7 20.999H17C18.103 20.999 19 20.101 19 18.999V6.99902H5ZM11 17H9V11H11V17ZM15 17H13V11H15V17Z" ></path></svg>') center/contain no-repeat;
  4016. }
  4017.  
  4018. .groupStart__56db5.expanded_be53d7 .blockedMessageText__57d64 {
  4019. color: var(--info-danger-foreground);
  4020. }
  4021.  
  4022. .blockedAction__27053 {
  4023. position: absolute;
  4024. inset: 0;
  4025. width: 100%;
  4026. opacity: 0;
  4027. }
  4028.  
  4029. .spamBanner_adb1b9 {
  4030. background: var(--banner-red);
  4031. box-shadow: var(--banner-shadow);
  4032. border-radius: 4px;
  4033. }
  4034.  
  4035. .attachment_f3cf2c {
  4036. border-color: transparent;
  4037. background: rgba(0, 0, 0, 0.2);
  4038. }
  4039.  
  4040. .container__767d1 {
  4041. background: var(--btn-brand);
  4042. border-radius: 2px;
  4043. }
  4044. .container__767d1 .cta__52756,
  4045. .container__767d1 .name__35e6f {
  4046. font-weight: 400;
  4047. }
  4048.  
  4049. .executedCommandAvatar__939bc,
  4050. .replyAvatar_cea07c,
  4051. .replyBadge__3d01e,
  4052. .threadMessageAccessoryAvatar__4ccbb {
  4053. border-radius: 3px;
  4054. }
  4055.  
  4056. .artwork__04b4e[viewBox="0 0 1700 1200"] {
  4057. -webkit-mask: radial-gradient(circle at top, #000 0%, transparent 80%);
  4058. mask: radial-gradient(circle at top, #000 0%, transparent 80%);
  4059. }
  4060. .artwork__04b4e[viewBox="0 0 1700 1200"] + .gradient__582ae {
  4061. background: rgba(0, 0, 0, 0.8);
  4062. }
  4063.  
  4064. .prompt__671aa {
  4065. width: 548px;
  4066. min-height: 400px;
  4067. height: unset;
  4068. background: var(--modal-background);
  4069. z-index: 1;
  4070. border-radius: 0;
  4071. box-shadow: var(--modal-shadow);
  4072. }
  4073. .prompt__671aa::before {
  4074. content: "";
  4075. display: block;
  4076. height: 1px;
  4077. width: 100%;
  4078. background: linear-gradient(to right, hsl(calc(var(--accent-hue) - 13), calc(var(--saturation-factor, 1) * 100%), 50%) 0%, hsl(calc(var(--accent-hue) + 20), calc(var(--saturation-factor, 1) * 100%), 60%) 100%);
  4079. position: absolute;
  4080. z-index: 102;
  4081. top: 0;
  4082. }
  4083. .prompt__671aa [data-text-variant="heading-xl/semibold"] {
  4084. margin-top: 0;
  4085. margin-bottom: 32px;
  4086. font-size: 22px;
  4087. font-weight: 700;
  4088. line-height: 24px;
  4089. }
  4090. .prompt__671aa .overlay_ef4f80 {
  4091. display: none;
  4092. }
  4093. .prompt__671aa .navButtons__484bf {
  4094. background: none;
  4095. padding: 32px;
  4096. border-bottom-left-radius: 0;
  4097. border-bottom-right-radius: 0;
  4098. }
  4099.  
  4100. .scrollerContent__41b47 {
  4101. padding: 32px;
  4102. }
  4103.  
  4104. .promptOptions_df4f4d {
  4105. gap: 4px;
  4106. }
  4107.  
  4108. .optionButtonWrapper__4072c {
  4109. border: 0;
  4110. border-radius: 2px;
  4111. background: var(--background-accent);
  4112. }
  4113. .optionButtonWrapper__4072c:not(:hover, .pressed__03c1e, .selected__90dd8) [data-text-variant="text-md/medium"] {
  4114. --header-primary: var(--contextmenu-text);
  4115. }
  4116. .optionButtonWrapper__4072c:hover {
  4117. background: var(--background-accent-hover);
  4118. }
  4119. .optionButtonWrapper__4072c.pressed__03c1e {
  4120. transform: none;
  4121. }
  4122. .optionButtonWrapper__4072c.selected__90dd8 {
  4123. background: var(--brand-experiment);
  4124. --header-secondary: #fff;
  4125. }
  4126. .optionButtonWrapper__4072c .checkIcon__5aa1f {
  4127. display: none;
  4128. }
  4129. .optionButtonWrapper__4072c .memberCount_b5b6d4 {
  4130. z-index: 1;
  4131. border-radius: 3px;
  4132. }
  4133.  
  4134. .termsRow_f10fb0 [style="color: var(--text-muted);"] {
  4135. --text-muted: var(--brand-experiment);
  4136. font-weight: 700;
  4137. font-size: 18px;
  4138. }
  4139.  
  4140. .termsFieldBody__96dcb {
  4141. border-radius: 3px;
  4142. background-color: rgba(0, 0, 0, 0.2);
  4143. border: 1px solid #000;
  4144. box-shadow: 1px 1px 0 0 var(--store-search-border);
  4145. overflow: hidden overlay;
  4146. max-height: 400px;
  4147. box-sizing: border-box;
  4148. }
  4149. .termsFieldBody__96dcb::-webkit-scrollbar {
  4150. width: 8px;
  4151. height: 8px;
  4152. }
  4153. .termsFieldBody__96dcb::-webkit-scrollbar-track {
  4154. border-color: transparent;
  4155. background-color: transparent;
  4156. border: 2px solid transparent;
  4157. }
  4158. .termsFieldBody__96dcb::-webkit-scrollbar-thumb {
  4159. background-clip: padding-box;
  4160. border: 2px solid transparent;
  4161. border-radius: 4px;
  4162. background-color: var(--scroller-color);
  4163. min-height: 40px;
  4164. }
  4165. .termsFieldBody__96dcb::-webkit-scrollbar-corner {
  4166. background-color: transparent;
  4167. }
  4168.  
  4169. .searchResultsWrap__9f374 {
  4170. background: var(--store-sidebar-background);
  4171. margin-top: 16px;
  4172. margin-left: 16px;
  4173. max-height: calc(100% - 16px);
  4174. }
  4175.  
  4176. .searchHeader__19d87 {
  4177. background-color: rgba(0, 0, 0, 0.2);
  4178. height: 56px;
  4179. padding: 16px;
  4180. }
  4181.  
  4182. .searchResult_dcd237 {
  4183. background: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 88%), 68%, 0.1);
  4184. border-radius: 0;
  4185. }
  4186.  
  4187. .container__7db35:hover .header__39b23 {
  4188. opacity: 1;
  4189. }
  4190.  
  4191. .highlight {
  4192. color: hsl(86, 100%, 79%);
  4193. background-color: hsl(86, 52%, 38%);
  4194. }
  4195.  
  4196. .totalResults__695d3 {
  4197. flex-grow: 0;
  4198. margin-right: 16px;
  4199. }
  4200.  
  4201. .searchHeaderTabList__78b98 {
  4202. --btn-count: 3;
  4203. background: rgba(0, 0, 0, 0.2);
  4204. border-radius: 3px;
  4205. margin-left: auto;
  4206. max-width: 250px;
  4207. gap: 0;
  4208. display: flex;
  4209. flex-direction: row;
  4210. position: relative;
  4211. }
  4212.  
  4213. #app-mount .searchHeaderTabList__78b98 .item__48dda {
  4214. background: none;
  4215. margin: 0;
  4216. display: flex;
  4217. flex: 0 1 calc(100% / var(--btn-count));
  4218. justify-content: center;
  4219. }
  4220. #app-mount .searchHeaderTabList__78b98 .item__48dda:not(.selected__5711d):hover {
  4221. background: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 40%), 23%, 0.4);
  4222. }
  4223.  
  4224. .searchHeaderTabList__78b98::before {
  4225. content: "";
  4226. position: absolute;
  4227. height: 100%;
  4228. width: calc(100% / var(--btn-count));
  4229. background: var(--store-tablist-btn);
  4230. transition: translate 0.2s ease;
  4231. border-radius: 3px;
  4232. }
  4233. .searchHeaderTabList__78b98:has(.selected__5711d:nth-child(2)):before {
  4234. translate: 100%;
  4235. }
  4236. .searchHeaderTabList__78b98:has(.selected__5711d:nth-child(3)):before {
  4237. translate: 200%;
  4238. }
  4239.  
  4240. .pageButton_bcd673 {
  4241. min-height: 32px;
  4242. }
  4243.  
  4244. .pageButton_bcd673.button_afdfd9:disabled,
  4245. .pageButton_bcd673.button_afdfd9[aria-disabled=true] {
  4246. opacity: 0.2;
  4247. pointer-events: none;
  4248. }
  4249.  
  4250. .pageButton_bcd673.button_afdfd9 {
  4251. background-color: var(--btn-brand);
  4252. color: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 87%), 68%);
  4253. font-weight: 400;
  4254. }
  4255. .pageButton_bcd673.button_afdfd9:hover {
  4256. background-color: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 87%), 68%);
  4257. color: #fff;
  4258. }
  4259.  
  4260. .roundButton__9e83c.pageButton_bcd673 {
  4261. background: none;
  4262. font-weight: 400;
  4263. }
  4264. .roundButton__9e83c.pageButton_bcd673:hover {
  4265. text-decoration: underline;
  4266. color: #fff;
  4267. }
  4268. .roundButton__9e83c.pageButton_bcd673.activeButton__7a550 {
  4269. color: hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 19%), 42%);
  4270. cursor: default;
  4271. background: none;
  4272. }
  4273. .roundButton__9e83c.pageButton_bcd673.gap__94f25 {
  4274. cursor: text;
  4275. }
  4276.  
  4277. .pageControlContainer_b111b0 {
  4278. margin: 0 0 4px 0;
  4279. }
  4280.  
  4281. .homeContainer_a4aa0a {
  4282. margin-top: var(--content-gutter);
  4283. padding: 0 0 32px 0;
  4284. position: relative;
  4285. }
  4286. .homeContainer_a4aa0a .maxWidthWrapper_c95aa8 {
  4287. max-width: unset;
  4288. }
  4289. .homeContainer_a4aa0a .header__35687 {
  4290. margin-top: 52px;
  4291. padding-bottom: 12px;
  4292. background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
  4293. display: grid;
  4294. grid-template-columns: 1fr auto;
  4295. gap: 16px;
  4296. }
  4297. .homeContainer_a4aa0a .headerArtWrapper__5d8d9 {
  4298. margin-left: unset;
  4299. margin-right: unset;
  4300. border-radius: 0;
  4301. width: 100%;
  4302. }
  4303. .homeContainer_a4aa0a .headerArt_e3ee19 {
  4304. border-radius: 0;
  4305. background-position: center;
  4306. }
  4307. .homeContainer_a4aa0a .headerIcon__8b099 {
  4308. margin: 16px 16px 16px 0;
  4309. border: none;
  4310. background-color: transparent;
  4311. }
  4312. .homeContainer_a4aa0a div.headerName__72ee0 {
  4313. position: absolute;
  4314. top: 0;
  4315. left: 0;
  4316. width: 100%;
  4317. }
  4318. .homeContainer_a4aa0a div.headerName__72ee0 h3 {
  4319. display: block;
  4320. font-size: 26px;
  4321. line-height: 32px;
  4322. font-weight: 400;
  4323. max-width: calc(100% - 324px - 16px);
  4324. overflow: hidden;
  4325. white-space: nowrap;
  4326. text-overflow: ellipsis;
  4327. }
  4328. .homeContainer_a4aa0a .container_c7a926,
  4329. .homeContainer_a4aa0a .container_ec1a33 {
  4330. padding-top: 30px;
  4331. gap: 2px;
  4332. }
  4333. .homeContainer_a4aa0a .container_c7a926 h2,
  4334. .homeContainer_a4aa0a .container_ec1a33 h2 {
  4335. font-size: 14px;
  4336. line-height: 26px;
  4337. text-transform: uppercase;
  4338. letter-spacing: 0.03em;
  4339. font-weight: 400;
  4340. padding-top: 2px;
  4341. margin-bottom: 6px;
  4342. position: relative;
  4343. }
  4344. .homeContainer_a4aa0a .container_c7a926 h2::before,
  4345. .homeContainer_a4aa0a .container_ec1a33 h2::before {
  4346. content: "";
  4347. display: block;
  4348. position: absolute;
  4349. left: 0;
  4350. bottom: 0;
  4351. width: 100%;
  4352. height: 1px;
  4353. background: var(--store-divider);
  4354. }
  4355. .homeContainer_a4aa0a .container_c7a926 .action_c957d9 {
  4356. padding: 4px 8px;
  4357. background: var(--banner-lightblue);
  4358. transition: none;
  4359. border-radius: 0;
  4360. }
  4361. .homeContainer_a4aa0a .container_c7a926 .action_c957d9:hover {
  4362. background-color: var(--banner-lightblue-hover);
  4363. }
  4364. .homeContainer_a4aa0a .container_c7a926 .action_c957d9:hover .checkCircle__28cd5 {
  4365. color: #fff;
  4366. }
  4367. .homeContainer_a4aa0a .container_c7a926 .action_c957d9:hover .channelIconContainer__5df13 svg,
  4368. .homeContainer_a4aa0a .container_c7a926 .action_c957d9:hover .rulesIconContainer__2a9f3 svg, .homeContainer_a4aa0a .container_c7a926 .action_c957d9:has(.checkCircleCompleted_c66388) .channelIconContainer__5df13 svg,
  4369. .homeContainer_a4aa0a .container_c7a926 .action_c957d9:has(.checkCircleCompleted_c66388) .rulesIconContainer__2a9f3 svg {
  4370. color: #fff;
  4371. }
  4372. .homeContainer_a4aa0a .container_c7a926 .action_c957d9:has(.checkCircleCompleted_c66388) {
  4373. background: linear-gradient(60deg, rgba(117, 176, 34, 0.7) 5%, rgba(88, 138, 27, 0.6) 95%);
  4374. }
  4375. .homeContainer_a4aa0a .container_c7a926 .action_c957d9 .large_cbd54d {
  4376. width: 16px;
  4377. height: 16px;
  4378. }
  4379. .homeContainer_a4aa0a .container_c7a926 .action_c957d9 .channelIconContainer__5df13,
  4380. .homeContainer_a4aa0a .container_c7a926 .action_c957d9 .rulesIconContainer__2a9f3 {
  4381. width: 18px;
  4382. height: 18px;
  4383. border-radius: 0;
  4384. background: none;
  4385. }
  4386. .homeContainer_a4aa0a .container_c7a926 .action_c957d9 .channelIconContainer__5df13 svg,
  4387. .homeContainer_a4aa0a .container_c7a926 .action_c957d9 .rulesIconContainer__2a9f3 svg {
  4388. width: 16px;
  4389. height: 16px;
  4390. }
  4391. .homeContainer_a4aa0a .container_c7a926 .action_c957d9 .checkCircle__28cd5 {
  4392. height: 18px;
  4393. width: 18px;
  4394. }
  4395. .homeContainer_a4aa0a .container_c7a926 .action_c957d9 .checkCircleCompleted_c66388 {
  4396. height: 18px;
  4397. width: 18px;
  4398. color: #fff;
  4399. }
  4400. .homeContainer_a4aa0a .container_c7a926 .action_c957d9 .checkCircleCompleted_c66388 circle {
  4401. fill: none;
  4402. }
  4403. .homeContainer_a4aa0a .container_c7a926 .action_c957d9:not(:hover, :has(.checkCircleCompleted_c66388)) {
  4404. --header-primary: hsl(calc(var(--accent-hue) + 2) calc(var(--saturation-factor, 1)*11.5%) 69.4%);
  4405. }
  4406. .homeContainer_a4aa0a .container_c7a926 .action_c957d9:hover:not(:has(.checkCircleCompleted_c66388)) {
  4407. --text-muted: #fff;
  4408. }
  4409. .homeContainer_a4aa0a .container_c7a926 .action_c957d9 .actionInfo_ca1ce8 {
  4410. display: flex;
  4411. flex-direction: row;
  4412. }
  4413. .homeContainer_a4aa0a .container_c7a926 .action_c957d9 [data-text-variant="text-md/semibold"] {
  4414. font-size: 12px;
  4415. line-height: unset;
  4416. font-weight: 400;
  4417. }
  4418. .homeContainer_a4aa0a .container_ec1a33 {
  4419. margin-top: 0;
  4420. }
  4421. .homeContainer_a4aa0a .container_ec1a33 .row__70f4c {
  4422. padding: 8px;
  4423. background: var(--banner-lightblue);
  4424. transition: none;
  4425. border-radius: 0;
  4426. }
  4427. .homeContainer_a4aa0a .container_ec1a33 .row__70f4c:hover {
  4428. background-color: var(--banner-lightblue-hover);
  4429. }
  4430. .homeContainer_a4aa0a .container_ec1a33 .row__70f4c .title_ba7ffc {
  4431. margin-bottom: 0;
  4432. font-size: 12px;
  4433. line-height: unset;
  4434. font-weight: 400;
  4435. }
  4436. .homeContainer_a4aa0a .container_ec1a33 .row__70f4c [data-text-variant="text-sm/normal"] {
  4437. margin-top: 4px;
  4438. font-size: 12px;
  4439. line-height: unset;
  4440. font-weight: 400;
  4441. }
  4442. .homeContainer_a4aa0a .container_ec1a33 .row__70f4c .media_c4f903 {
  4443. border-radius: 3px;
  4444. }
  4445.  
  4446. @media (min-width: 1300px) {
  4447. .homeContainer_a4aa0a .headerArt_e3ee19 {
  4448. height: 338px;
  4449. padding-top: 0;
  4450. }
  4451. .homeContainer_a4aa0a .header__35687 {
  4452. grid-template-columns: 1fr 324px;
  4453. }
  4454. }
  4455. .iconActiveXLarge_f0b973 {
  4456. border-radius: 3px;
  4457. }
  4458.  
  4459. .homeContent__049a1 {
  4460. margin-top: 0;
  4461. gap: var(--content-gutter);
  4462. }
  4463.  
  4464. @media (max-width: 1300px) {
  4465. .homeContent__049a1 {
  4466. max-width: var(--content-inner-width);
  4467. margin-left: 0;
  4468. }
  4469. }
  4470. .sidebarCardWrapper__2c840:has(.guildDescription_d4bc5b) {
  4471. position: absolute;
  4472. top: 176px;
  4473. width: 324px;
  4474. right: 0;
  4475. box-sizing: border-box;
  4476. padding: 0 16px 0 0;
  4477. background: none;
  4478. border-radius: 0;
  4479. height: 214px;
  4480. }
  4481. .sidebarCardWrapper__2c840:has(.guildDescription_d4bc5b) h2 {
  4482. display: none;
  4483. }
  4484. .sidebarCardWrapper__2c840:has(.guildDescription_d4bc5b) .guildDescription_d4bc5b {
  4485. --text-normal: hsl(calc(var(--accent-hue) + 1) calc(var(--saturation-factor, 1)*28.1%) 82.5%);
  4486. font-size: 14px;
  4487. line-height: 18px;
  4488. }
  4489. .sidebarCardWrapper__2c840:has(.guildDescription_d4bc5b) .guildInfoText__8ad0c {
  4490. line-height: 20px;
  4491. }
  4492.  
  4493. .sidebar_a22042 {
  4494. width: 308px;
  4495. min-width: 308px;
  4496. }
  4497.  
  4498. .sidebarCardWrapper__2c840:not(:has(.guildDescription_d4bc5b)) {
  4499. background: var(--store-sidebar-background);
  4500. border-radius: 0;
  4501. }
  4502. .sidebarCardWrapper__2c840:not(:has(.guildDescription_d4bc5b)) h2 {
  4503. font-size: 12px;
  4504. line-height: unset;
  4505. font-weight: 400;
  4506. margin-bottom: 2px;
  4507. --header-primary: hsl(calc(var(--accent-hue) + 3) calc(var(--saturation-factor, 1)*8.2%) 59.4%);
  4508. }
  4509.  
  4510. .resourceChannelsList_ab112a {
  4511. margin: 0;
  4512. gap: 2px;
  4513. }
  4514.  
  4515. .resourceChannel__79493 {
  4516. color: var(--btn-brand-text);
  4517. border-radius: 1px;
  4518. padding: 4px 0 4px 8px;
  4519. background: var(--sidebar-btn-brand);
  4520. }
  4521. .resourceChannel__79493:hover {
  4522. background: var(--btn-brand-hover);
  4523. color: #fff;
  4524. }
  4525. .resourceChannel__79493 .resourceImageBase_c9b174 {
  4526. border-radius: 2px;
  4527. }
  4528. .resourceChannel__79493 [data-text-variant="text-sm/semibold"] {
  4529. font-size: 12px;
  4530. font-weight: 400;
  4531. }
  4532.  
  4533. .welcomeMessageContainer__3d907 .welcomeMessageContent_c19bb5 {
  4534. padding: 4px 16px 16px;
  4535. z-index: 1;
  4536. }
  4537. .welcomeMessageContainer__3d907 .userProfileOuter__46bb7,
  4538. .welcomeMessageContainer__3d907 .userProfileInner__8065b {
  4539. border-radius: 4px;
  4540. }
  4541. .welcomeMessageContainer__3d907 .userCardInner_d6aa46 {
  4542. border-radius: 4px;
  4543. background: none;
  4544. }
  4545. #app-mount .welcomeMessageContainer__3d907 .wrapper_edb6e0 {
  4546. border-radius: 4px;
  4547. overflow: hidden;
  4548. }
  4549. .welcomeMessageContainer__3d907 .avatarBackground__9cf9d,
  4550. .welcomeMessageContainer__3d907 .avatarBorder_d9ba14 {
  4551. border-radius: 4px;
  4552. }
  4553. .welcomeMessageContainer__3d907 [data-text-variant="text-md/medium"] {
  4554. font-size: 14px;
  4555. line-height: 18px;
  4556. font-weight: 400;
  4557. }
  4558.  
  4559. #app-mount .messagesWrapper_ea2b0b .scrollerInner__059a5[data-list-id=chat-messages]:not(:has(.wrapper_b8c724)) .navigationDescription__203e4:first-child + .divider__8cf56 + .messageListItem__6a4fb .message__80c10 {
  4560. background: none;
  4561. border: none;
  4562. box-shadow: none;
  4563. }
  4564. .messagesWrapper_ea2b0b .scrollerInner__059a5[data-list-id=chat-messages]:not(:has(.wrapper_b8c724)):has(.navigationDescription__203e4:first-child + .divider__8cf56 + .messageListItem__6a4fb)::before {
  4565. top: 32px;
  4566. }
  4567.  
  4568. .container__42489 {
  4569. max-width: var(--content-width);
  4570. }
  4571. .container__42489 .scroller__5e182 {
  4572. background: none;
  4573. }
  4574. .container__42489 .container__7beb8 {
  4575. margin-top: var(--content-gutter);
  4576. padding-bottom: 12px;
  4577. background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
  4578. display: grid;
  4579. grid-template-areas: "banner icon" "banner title" "banner sub";
  4580. -moz-column-gap: 16px;
  4581. column-gap: 16px;
  4582. align-items: start;
  4583. grid-template-columns: 1fr 324px;
  4584. position: relative;
  4585. }
  4586. .container__42489 .coverImageContainer__814bf {
  4587. grid-area: banner;
  4588. padding-bottom: 0;
  4589. height: 100%;
  4590. max-height: 338px;
  4591. }
  4592. .container__42489 .guildIconContainer__88c9b {
  4593. grid-area: icon;
  4594. padding: 0;
  4595. background: none;
  4596. border-radius: 3px;
  4597. margin-top: 16px;
  4598. margin-bottom: 8px;
  4599. box-shadow: 0 0 3px #000000;
  4600. width: 100px;
  4601. }
  4602. .container__42489 .iconInactive__90d40 {
  4603. border-radius: 3px;
  4604. }
  4605. .container__42489 .ctaTitle__7b351 {
  4606. grid-area: title;
  4607. font-size: 14px;
  4608. line-height: 18px;
  4609. font-weight: 400;
  4610. text-align: left;
  4611. margin: 0 0 10px 0;
  4612. padding-right: 16px;
  4613. color: hsl(calc(var(--accent-hue) + 1), calc(var(--saturation-factor, 1) * 28.1%), 82.5%);
  4614. }
  4615. .container__42489 .ctaSubtitle_e20642 {
  4616. grid-area: sub;
  4617. --header-secondary: hsl(calc(var(--accent-hue) + 1) calc(var(--saturation-factor, 1)*28.1%) 82.5%);
  4618. font-size: 14px;
  4619. line-height: 18px;
  4620. text-align: left;
  4621. margin: 0;
  4622. padding-right: 16px;
  4623. }
  4624. .container__42489 .container_e2a91b {
  4625. flex: 1 1 320px;
  4626. border-radius: 4px 4px 0 0;
  4627. }
  4628. .container__42489 .roleMessagePreview__8088a {
  4629. padding: 0;
  4630. background: none;
  4631. border-radius: 0;
  4632. border: none;
  4633. }
  4634. .container__42489 .benefitsList_a5c11d {
  4635. gap: 10px;
  4636. }
  4637. .container__42489 .container_e337ba {
  4638. padding: 8px 24px 10px 16px;
  4639. background: var(--btn-grey);
  4640. border-radius: 2px;
  4641. }
  4642.  
  4643. .tierPreviewsContainer__7683f {
  4644. padding: 0;
  4645. }
  4646.  
  4647. .cardContainerWithoutTopIndicator_d7edfe {
  4648. border-radius: 4px 4px 0 0;
  4649. }
  4650. .cardContainerWithoutTopIndicator_d7edfe .tierInfoContainer__80b01 {
  4651. background: var(--banner-lightblue);
  4652. padding: 32px 16px 16px;
  4653. }
  4654.  
  4655. .subscriptionPerks__2f4e5 {
  4656. background: rgba(0, 0, 0, 0.4);
  4657. }
  4658.  
  4659. .infoContainer_f82778 .name_b4c1cb {
  4660. font-weight: 400;
  4661. }
  4662.  
  4663. .form__13a2c {
  4664. margin-top: 0;
  4665. }
  4666.  
  4667. .scrollableContainer__33e06 {
  4668. border-radius: 3px;
  4669. background-color: rgba(0, 0, 0, 0.2);
  4670. border: 1px solid #000;
  4671. box-shadow: 1px 1px 0 0 var(--store-search-border);
  4672. }
  4673.  
  4674. .channelTextArea__2e60f {
  4675. margin-bottom: 24px;
  4676. background: none;
  4677. }
  4678.  
  4679. #app-mount .form__13a2c:before {
  4680. display: none;
  4681. }
  4682.  
  4683. .replyBar_b64d74, .threadSuggestionBar_b633f7 {
  4684. background: rgba(0, 0, 0, 0.2);
  4685. margin-bottom: 1px;
  4686. border-radius: 3px;
  4687. border: 1px solid hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 35%), 23%);
  4688. }
  4689.  
  4690. .attachedBars_da3c74 {
  4691. background: none;
  4692. border-radius: 0;
  4693. }
  4694.  
  4695. .replyBar_b64d74 [aria-checked=true] .mentionButton_a470c4 {
  4696. background: linear-gradient(90deg, hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 100%), 51%) 0%, hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 100%), 59%) 100%);
  4697. color: #fff !important;
  4698. }
  4699.  
  4700. .barBase__4e0ba {
  4701. z-index: 3;
  4702. }
  4703. .barBase__4e0ba .inner_ea0cea {
  4704. min-height: 24px;
  4705. align-items: center;
  4706. }
  4707.  
  4708. .jumpToPresentBar__0ff7f {
  4709. bottom: 1px;
  4710. border-radius: 3px;
  4711. background: var(--banner-lightblue) var(--app-bg);
  4712. border: none;
  4713. opacity: 1;
  4714. padding-bottom: unset;
  4715. }
  4716.  
  4717. .newMessagesBar__8b6d7 {
  4718. border-radius: 0 0 3px 3px;
  4719. background: linear-gradient(135deg, hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 23.2%), 41.4%, 0.5) 0%, hsl(var(--accent-hue), calc(var(--saturation-factor, 1) * 60%), 71.6%, 0.5) 100%), var(--background-tertiary);
  4720. opacity: 1;
  4721. }
  4722.  
  4723. .upload_c98ecb {
  4724. background: rgba(0, 0, 0, 0.3);
  4725. padding: 8px;
  4726. border-radius: 5px;
  4727. }
  4728. .upload_c98ecb .actionBar__3cdab {
  4729. transform: none;
  4730. }
  4731.  
  4732. .altTag__3fced {
  4733. border-radius: 2px;
  4734. }
  4735.  
  4736. #app-mount .errorPage_da3c8d {
  4737. background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(https://maendisease.github.io/Steam/illustrations/colored_body_top.avif) center left/cover no-repeat, linear-gradient(to right, var(--background-tertiary), var(--background-tertiary));
  4738. }
  4739. #app-mount .image_dabcb8 {
  4740. background: none;
  4741. }
  4742.  
  4743. .errorPage_da3c8d {
  4744. display: flex;
  4745. align-items: center;
  4746. justify-content: center;
  4747. }
  4748. .errorPage_da3c8d > .flex_f5fbb7 {
  4749. background: var(--modal-background);
  4750. max-width: 600px;
  4751. max-height: 300px;
  4752. width: -moz-fit-content;
  4753. width: fit-content;
  4754. height: -moz-fit-content;
  4755. height: fit-content;
  4756. border: 0.5px solid black;
  4757. position: relative;
  4758. flex-grow: 0;
  4759. padding: 32px;
  4760. overflow: hidden;
  4761. }
  4762. .errorPage_da3c8d > .flex_f5fbb7::before {
  4763. content: "";
  4764. display: block;
  4765. height: 1px;
  4766. width: 100%;
  4767. background: linear-gradient(to right, hsl(calc(var(--accent-hue) - 13), calc(var(--saturation-factor, 1) * 100%), 50%) 0%, hsl(calc(var(--accent-hue) + 20), calc(var(--saturation-factor, 1) * 100%), 60%) 100%);
  4768. position: absolute;
  4769. z-index: 102;
  4770. top: 0;
  4771. }
  4772. .errorPage_da3c8d .title__73f9a {
  4773. font-size: 22px;
  4774. font-weight: 700;
  4775. line-height: 24px;
  4776. margin-bottom: 0;
  4777. }
  4778. .errorPage_da3c8d .note__35490 {
  4779. font-size: 14px;
  4780. margin-top: 10px;
  4781. }
  4782. .errorPage_da3c8d .note__35490 p {
  4783. margin: 0;
  4784. line-height: 18px;
  4785. }
  4786.  
  4787. .image_dabcb8 {
  4788. position: relative;
  4789. background: none;
  4790. height: 100px;
  4791. width: 100px;
  4792. margin-bottom: 32px;
  4793. }
  4794. .image_dabcb8::before {
  4795. content: "";
  4796. display: block;
  4797. position: absolute;
  4798. inset: 0;
  4799. margin: auto;
  4800. z-index: 999;
  4801. height: 100%;
  4802. width: 100%;
  4803. max-height: 142px;
  4804. max-width: 142px;
  4805. -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M18 34.32C9 34.32 1.68 27 1.68 18S9 1.68 18 1.68 34.32 9 34.32 18 27 34.32 18 34.32Zm0-31.63c-8.44 0-15.32 6.87-15.32 15.32S9.55 33.33 18 33.33s15.32-6.87 15.32-15.32S26.45 2.68 18 2.68Zm7.98 7.95c-1.51-.71-3.11-1.2-4.74-1.48-.22.41-.43.83-.61 1.25-1.74-.26-3.51-.26-5.26 0-.19-.43-.39-.85-.61-1.25-1.64.28-3.24.78-4.75 1.48C7 15.15 6.19 19.55 6.6 23.88c1.76 1.32 3.73 2.32 5.82 2.96.47-.64.89-1.33 1.24-2.04-.68-.26-1.34-.57-1.96-.95.17-.12.33-.24.48-.38 3.69 1.76 7.95 1.76 11.63 0 .16.13.32.26.48.38-.63.37-1.29.7-1.96.95.36.72.77 1.4 1.24 2.04 2.09-.64 4.06-1.64 5.82-2.96.48-5.02-.82-9.38-3.42-13.24Zm-11.8 10.58c-1.13 0-2.07-1.06-2.07-2.34 0-1.28.91-2.34 2.07-2.34 1.16 0 2.09 1.06 2.07 2.34 0 1.28-.92 2.34-2.07 2.34zm7.64 0c-1.13 0-2.07-1.06-2.07-2.34 0-1.28.92-2.34 2.07-2.34s2.09 1.06 2.07 2.34c0 1.28-.92 2.34-2.07 2.34z"/></svg>') center/contain no-repeat;
  4806. mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M18 34.32C9 34.32 1.68 27 1.68 18S9 1.68 18 1.68 34.32 9 34.32 18 27 34.32 18 34.32Zm0-31.63c-8.44 0-15.32 6.87-15.32 15.32S9.55 33.33 18 33.33s15.32-6.87 15.32-15.32S26.45 2.68 18 2.68Zm7.98 7.95c-1.51-.71-3.11-1.2-4.74-1.48-.22.41-.43.83-.61 1.25-1.74-.26-3.51-.26-5.26 0-.19-.43-.39-.85-.61-1.25-1.64.28-3.24.78-4.75 1.48C7 15.15 6.19 19.55 6.6 23.88c1.76 1.32 3.73 2.32 5.82 2.96.47-.64.89-1.33 1.24-2.04-.68-.26-1.34-.57-1.96-.95.17-.12.33-.24.48-.38 3.69 1.76 7.95 1.76 11.63 0 .16.13.32.26.48.38-.63.37-1.29.7-1.96.95.36.72.77 1.4 1.24 2.04 2.09-.64 4.06-1.64 5.82-2.96.48-5.02-.82-9.38-3.42-13.24Zm-11.8 10.58c-1.13 0-2.07-1.06-2.07-2.34 0-1.28.91-2.34 2.07-2.34 1.16 0 2.09 1.06 2.07 2.34 0 1.28-.92 2.34-2.07 2.34zm7.64 0c-1.13 0-2.07-1.06-2.07-2.34 0-1.28.92-2.34 2.07-2.34s2.09 1.06 2.07 2.34c0 1.28-.92 2.34-2.07 2.34z"/></svg>') center/contain no-repeat;
  4807. background: #fff;
  4808. animation: discordSpinnerScale 1.44s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite;
  4809. }
  4810. .image_dabcb8::after {
  4811. content: "";
  4812. display: block;
  4813. position: absolute;
  4814. inset: 0;
  4815. margin: auto;
  4816. z-index: 999;
  4817. height: 100%;
  4818. max-height: 142px;
  4819. max-width: 142px;
  4820. border-radius: 50%;
  4821. aspect-ratio: 1;
  4822. background: radial-gradient(farthest-side, var(--brand-experiment) 94%, rgba(0, 0, 0, 0)) top/40% 20% no-repeat, conic-gradient(rgba(0, 0, 0, 0) 20%, var(--brand-experiment));
  4823. -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 0);
  4824. mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 0);
  4825. animation: discordSpinnerRotate 2.88s cubic-bezier(0.5, 0, 0.5, 1) infinite, discordSpinnerFade 1.44s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite;
  4826. }
  4827. @keyframes discordSpinnerScale {
  4828. 0% {
  4829. transform: scale(0.9);
  4830. }
  4831. 100% {
  4832. transform: scale(0.82);
  4833. }
  4834. }
  4835. @keyframes discordSpinnerRotate {
  4836. 100% {
  4837. transform: rotate(3turn);
  4838. }
  4839. }
  4840. @keyframes discordSpinnerFade {
  4841. 0% {
  4842. opacity: 0;
  4843. }
  4844. 50% {
  4845. opacity: 1;
  4846. }
  4847. }
  4848. .image_dabcb8::after {
  4849. background: radial-gradient(farthest-side, var(--status-danger) 94%, rgba(0, 0, 0, 0)) top/40% 20% no-repeat, conic-gradient(rgba(0, 0, 0, 0) var(--percent), var(--status-danger));
  4850. animation: discordSpinnerRotateError 1.44s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite, discordSpinnerTailError 2.88s cubic-bezier(0.5, 0, 0.5, 1) infinite, discordSpinnerFade 1.44s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite;
  4851. }
  4852.  
  4853. @property --percent {
  4854. syntax: "<percentage>";
  4855. inherits: false;
  4856. initial-value: 20%;
  4857. }
  4858. @keyframes discordSpinnerTailError {
  4859. 25% {
  4860. --percent: 20%;
  4861. }
  4862. 100% {
  4863. --percent: 100%;
  4864. }
  4865. }
  4866. @keyframes discordSpinnerRotateError {
  4867. 100% {
  4868. transform: rotate(0.5turn);
  4869. }
  4870. }
  4871. .containerSidenav__2623a {
  4872. max-width: var(--content-width);
  4873. }
  4874. #app-mount .containerSidenav__2623a {
  4875. background: none;
  4876. }
  4877.  
  4878. #activity-tab::-webkit-scrollbar,
  4879. #requests-tab::-webkit-scrollbar {
  4880. width: 14px;
  4881. height: 14px;
  4882. }
  4883. #activity-tab::-webkit-scrollbar-thumb,
  4884. #requests-tab::-webkit-scrollbar-thumb {
  4885. background-color: var(--scroller-color);
  4886. min-height: 40px;
  4887. }
  4888. #activity-tab::-webkit-scrollbar-track,
  4889. #requests-tab::-webkit-scrollbar-track {
  4890. margin-bottom: 8px;
  4891. }
  4892. #activity-tab::-webkit-scrollbar-thumb, #activity-tab::-webkit-scrollbar-track,
  4893. #requests-tab::-webkit-scrollbar-thumb,
  4894. #requests-tab::-webkit-scrollbar-track {
  4895. border: 4px solid transparent;
  4896. background-clip: padding-box;
  4897. border-radius: 8px;
  4898. }
  4899. #activity-tab::-webkit-scrollbar-corner,
  4900. #requests-tab::-webkit-scrollbar-corner {
  4901. background-color: transparent;
  4902. }
  4903.  
  4904. .applicationStore_fc7d76 {
  4905. background: none;
  4906. max-width: var(--content-width);
  4907. }
  4908. .applicationStore_fc7d76 .scroller__244e5 {
  4909. background: #000;
  4910. overflow-y: overlay !important;
  4911. }
  4912. .applicationStore_fc7d76 svg.root-1F1IKT {
  4913. display: none;
  4914. }
  4915.  
  4916. .fullscreenHero-1r47nN {
  4917. padding: 0;
  4918. margin: 0;
  4919. height: 395px;
  4920. }
  4921. .fullscreenHero-1r47nN::after {
  4922. content: "";
  4923. z-index: -1;
  4924. position: absolute;
  4925. inset: 0;
  4926. width: 100%;
  4927. height: 100%;
  4928. background: linear-gradient(135deg, hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%) 48%, hsl(269, calc(var(--saturation-factor, 1) * 52.7%), 52.7%) 55%);
  4929. -webkit-mask: radial-gradient(circle at center, black 0%, transparent 45%);
  4930. mask: radial-gradient(circle at center, black 0%, transparent 45%);
  4931. }
  4932.  
  4933. .premiumContainer__2ebd0 .containerPadding-2Et74V {
  4934. padding: 0;
  4935. }
  4936.  
  4937. .container__5c7e7,
  4938. .containerSidenav__2623a {
  4939. background: none;
  4940. }
  4941.  
  4942. .container__5c7e7 {
  4943. max-width: var(--content-width);
  4944. }
  4945.  
  4946. .sideNavContent_fdff7b {
  4947. min-width: unset;
  4948. max-width: var(--content-inner-width);
  4949. padding: var(--content-gutter) 0 0 0;
  4950. }
  4951.  
  4952. .topPill__0cdf1 .item__48dda.themed_b957e8 {
  4953. border-radius: 0;
  4954. margin: 0;
  4955. padding: 0 14px;
  4956. height: 36px;
  4957. text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  4958. color: #e5e5e5;
  4959. font-size: 14px;
  4960. display: flex;
  4961. align-items: center;
  4962. }
  4963. .topPill__0cdf1 .item__48dda.themed_b957e8:hover:not(.disabled__85bca) {
  4964. background: var(--topbar-item-hover);
  4965. }
  4966. .topPill__0cdf1 .item__48dda.themed_b957e8.selected__5711d, .topPill__0cdf1 .item__48dda.themed_b957e8.selected__5711d:hover {
  4967. background: none;
  4968. color: var(--white-500);
  4969. }
  4970. .topPill__0cdf1 .item__48dda.themed_b957e8.addFriend__80542 {
  4971. margin-top: 3px;
  4972. height: 30px;
  4973. background: linear-gradient(to right, #75b022 5%, #588a1b 95%);
  4974. padding: 0 16px;
  4975. border-radius: 2px;
  4976. color: #d2efa9;
  4977. text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  4978. box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  4979. }
  4980. .topPill__0cdf1 .item__48dda.themed_b957e8.addFriend__80542:hover {
  4981. background: linear-gradient(to right, #8ed629 5%, #6aa621 95%);
  4982. color: var(--white-500);
  4983. }
  4984. .topPill__0cdf1 .item__48dda.themed_b957e8.addFriend__80542.selected__5711d {
  4985. background: linear-gradient(to bottom, rgb(193, 228, 249) 5%, rgb(148, 183, 202) 95%);
  4986. color: #2B5066;
  4987. text-shadow: none;
  4988. }
  4989.  
  4990. .searchBar_ff8800 {
  4991. background-color: rgba(0, 0, 0, 0.2);
  4992. border: 1px solid #000;
  4993. box-shadow: 1px 1px 0 0 var(--store-search-border);
  4994. border-radius: 3px;
  4995. margin: 0;
  4996. }
  4997.  
  4998. .searchBar_ff8800 input::-moz-placeholder {
  4999. font-style: italic;
  5000. }
  5001.  
  5002. .searchBar_ff8800 input::placeholder {
  5003. font-style: italic;
  5004. }
  5005.  
  5006. .title_dc625c {
  5007. margin: 10px 0 0 0;
  5008. }
  5009.  
  5010. .peopleColumn__51df3 {
  5011. margin-top: var(--content-gutter);
  5012. max-width: var(--content-inner-width);
  5013. }
  5014. .peopleColumn__51df3 .sectionTitle__69d2d {
  5015. max-width: var(--content-inner-width);
  5016. background-color: var(--store-body-header);
  5017. padding: 10px 20px 10px 20px;
  5018. margin-top: var(--content-gutter);
  5019. }
  5020. .peopleColumn__51df3 .title_dc625c {
  5021. margin: 0;
  5022. font-weight: normal;
  5023. font-size: 14px;
  5024. line-height: 16px;
  5025. letter-spacing: 0.03em;
  5026. text-transform: uppercase;
  5027. color: #fff;
  5028. }
  5029.  
  5030. .peopleList__2379e {
  5031. margin-top: 0;
  5032. padding: 0 !important;
  5033. overflow: hidden overlay !important;
  5034. }
  5035. .peopleList__2379e > div:not([class], [aria-hidden=true]) {
  5036. padding-right: 2px;
  5037. background: rgba(0, 0, 0, 0.4);
  5038. padding: 20px;
  5039. }
  5040.  
  5041. .peopleListItem_d14722 {
  5042. border: none !important;
  5043. margin: 0 !important;
  5044. padding: 6px 8px !important;
  5045. border-radius: 0 !important;
  5046. height: 58px !important;
  5047. font-size: unset;
  5048. line-height: unset;
  5049. }
  5050. .peopleListItem_d14722:hover, .peopleListItem_d14722.active__6b8ff {
  5051. border-radius: 0;
  5052. background: var(--background-accent);
  5053. transition: background 0.2s linear;
  5054. }
  5055. .peopleListItem_d14722:hover .actionButton__23182, .peopleListItem_d14722.active__6b8ff .actionButton__23182 {
  5056. background-color: var(--background-accent-hover);
  5057. transition: background 0.2s linear, box-shadow 0.2s ease-in-out;
  5058. }
  5059. .peopleListItem_d14722:hover .actionButton__23182.actionDeny_d304eb:hover, .peopleListItem_d14722.active__6b8ff .actionButton__23182.actionDeny_d304eb:hover {
  5060. color: #fff;
  5061. background: var(--status-danger);
  5062. }
  5063. .peopleListItem_d14722:hover .actionButton__23182:hover, .peopleListItem_d14722.active__6b8ff .actionButton__23182:hover {
  5064. background: var(--btn-grey-hover);
  5065. box-shadow: var(--btn-grey-boxshadow);
  5066. }
  5067. .peopleListItem_d14722 .userInfo__18240 .wrapper_edb6e0 {
  5068. margin-top: 0;
  5069. }
  5070. .peopleListItem_d14722 .username__81ee6 {
  5071. line-height: 20px;
  5072. font-size: 16px;
  5073. font-weight: 400;
  5074. color: var(--header-primary);
  5075. }
  5076. .peopleListItem_d14722 .discriminator_aef524 {
  5077. font-weight: 400;
  5078. }
  5079. .peopleListItem_d14722 .text__1dddb {
  5080. color: var(--text-muted);
  5081. font-size: 12px;
  5082. line-height: 22px;
  5083. letter-spacing: 0.5px;
  5084. text-transform: uppercase;
  5085. font-weight: 700;
  5086. }
  5087. .peopleListItem_d14722 .actionButton__23182 {
  5088. color: var(--brand-experiment);
  5089. border-radius: 2px;
  5090. background: var(--btn-grey);
  5091. transition-property: background, box-shadow, color;
  5092. transition-duration: 0.2s;
  5093. transition-timing-function: ease-out;
  5094. }
  5095. .peopleListItem_d14722 .actionButton__23182.actionDeny_d304eb {
  5096. color: var(--status-danger);
  5097. }
  5098. .peopleListItem_d14722 .actionButton__23182 svg {
  5099. height: 18px;
  5100. width: 18px;
  5101. }
  5102.  
  5103. #app-mount .peopleListItem_d14722 .userInfo__18240 .wrapper_edb6e0 {
  5104. margin-top: 0;
  5105. margin-left: 1px;
  5106. }
  5107.  
  5108. .userInfo__18240 {
  5109. position: relative;
  5110. height: 100%;
  5111. align-items: center;
  5112. overflow: visible;
  5113. }
  5114. .userInfo__18240:has([mask="url(#svg-mask-status-online)"]) .username__81ee6, .userInfo__18240:has([mask="url(#svg-mask-avatar-status-mobile-32)"]) .username__81ee6 {
  5115. color: var(--rs-online-color);
  5116. }
  5117. .userInfo__18240:has([mask="url(#svg-mask-status-idle)"]) .username__81ee6 {
  5118. color: var(--rs-idle-color);
  5119. }
  5120. .userInfo__18240:has([mask="url(#svg-mask-status-dnd)"]) .username__81ee6 {
  5121. color: var(--rs-dnd-color);
  5122. }
  5123.  
  5124. .header__6113c {
  5125. padding: 0;
  5126. border-bottom: 0;
  5127. }
  5128.  
  5129. .title_c627bb {
  5130. font-weight: normal;
  5131. font-size: 14px;
  5132. line-height: 16px;
  5133. letter-spacing: 0.03em;
  5134. text-transform: uppercase;
  5135. color: #fff;
  5136. background-color: var(--store-body-header);
  5137. padding: 10px 20px 10px 20px;
  5138. margin-bottom: 0;
  5139. }
  5140.  
  5141. .header__6113c form {
  5142. background-color: rgba(0, 0, 0, 0.4);
  5143. padding: 20px;
  5144. }
  5145.  
  5146. .description__7af71 {
  5147. font-size: 14px;
  5148. line-height: 18px;
  5149. font-weight: normal;
  5150. color: hsl(calc(var(--accent-hue) + 3), calc(var(--saturation-factor, 1) * 8.2%), 59.4%);
  5151. letter-spacing: 0.02em;
  5152. }
  5153.  
  5154. .addFriendInputWrapper__4bf8e {
  5155. background-color: rgba(0, 0, 0, 0.2);
  5156. border: 1px solid #000;
  5157. border-radius: 3px;
  5158. padding: 0 4px 0 0;
  5159. }
  5160. .addFriendInputWrapper__4bf8e .addFriendInput__568d8 {
  5161. padding: 0;
  5162. }
  5163. .addFriendInputWrapper__4bf8e .inputDefault__80165 {
  5164. padding: 10px;
  5165. height: unset;
  5166. background: none !important;
  5167. box-shadow: none !important;
  5168. }
  5169.  
  5170. .inputText__81d8a {
  5171. font-size: 14px;
  5172. font-weight: 400;
  5173. }
  5174.  
  5175. .nowPlayingColumn_f5023f {
  5176. background: none;
  5177. margin-top: var(--content-gutter);
  5178. margin-left: var(--content-gutter);
  5179. }
  5180. .nowPlayingColumn_f5023f .container__0a6a9 {
  5181. background: none;
  5182. }
  5183. .nowPlayingColumn_f5023f .scroller__00e7e {
  5184. background: var(--store-sidebar-background);
  5185. height: -moz-fit-content;
  5186. height: fit-content;
  5187. max-height: 100%;
  5188. border-left: none;
  5189. margin-left: 0;
  5190. }
  5191. .nowPlayingColumn_f5023f .header__123bf {
  5192. font-weight: 400;
  5193. font-size: 12px;
  5194. line-height: 16px;
  5195. letter-spacing: 0.02em;
  5196. color: var(--text-muted);
  5197. margin: 0 0 2px 0;
  5198. }
  5199. .nowPlayingColumn_f5023f .wrapper__6e669 {
  5200. background: var(--sidebar-btn-brand);
  5201. border: none;
  5202. border-radius: 0;
  5203. }
  5204. .nowPlayingColumn_f5023f .wrapper__6e669:hover {
  5205. background: var(--btn-brand-hover);
  5206. }
  5207. .nowPlayingColumn_f5023f .wrapper__6e669 .inset__0bfb3 {
  5208. background: rgba(0, 0, 0, 0.2);
  5209. border-radius: 0;
  5210. }
  5211. .nowPlayingColumn_f5023f .wrapper__6e669 .section_efc22d {
  5212. padding: 10px;
  5213. background: none;
  5214. border-radius: 0;
  5215. }
  5216.  
  5217. .emptyCard_f82dde {
  5218. background: rgba(0, 0, 0, 0.2);
  5219. border-radius: 0;
  5220. }
  5221. .emptyCard_f82dde .emptyHeader_eeafcc {
  5222. font-weight: 400;
  5223. }
  5224.  
  5225. #add_friend-tab .header_afb7fc {
  5226. background-color: rgba(0, 0, 0, 0.2);
  5227. padding: 20px 20px 0;
  5228. }
  5229. #add_friend-tab .header_afb7fc .h2_f0b768 {
  5230. font-size: 18px;
  5231. font-weight: 400;
  5232. line-height: 22px;
  5233. text-transform: unset;
  5234. }
  5235. #add_friend-tab .grid__5ef55 {
  5236. background-color: rgba(0, 0, 0, 0.2);
  5237. padding: 10px 20px 20px;
  5238. width: 100%;
  5239. }
  5240. #add_friend-tab .container_a308ae {
  5241. border-radius: 2px;
  5242. border: none;
  5243. padding: 6px 8px;
  5244. background: var(--btn-brand);
  5245. color: var(--btn-brand-text);
  5246. }
  5247. #add_friend-tab .container_a308ae:hover {
  5248. background: var(--btn-brand-hover);
  5249. color: #fff;
  5250. }
  5251. #add_friend-tab .container_a308ae:hover svg {
  5252. color: #fff;
  5253. }
  5254. #add_friend-tab .container_a308ae .icon__28d6c {
  5255. margin: 0 12px 0 0;
  5256. border-radius: 2px;
  5257. }
  5258. #add_friend-tab .container_a308ae .text__21b87 {
  5259. text-align: left;
  5260. font-size: 14px;
  5261. line-height: 18px;
  5262. font-weight: 400;
  5263. color: inherit;
  5264. }
  5265. #add_friend-tab .container_a308ae svg {
  5266. color: var(--brand-experiment);
  5267. height: 18px;
  5268. width: 18px;
  5269. margin: 8px;
  5270. }
  5271.  
  5272. [data-list-id=message-requests-list] {
  5273. padding: 0 !important;
  5274. }
  5275. [data-list-id=message-requests-list] .content__23cab {
  5276. max-width: var(--content-inner-width);
  5277. z-index: 0;
  5278. }
  5279. [data-list-id=message-requests-list] .content__23cab:after {
  5280. content: "";
  5281. display: block;
  5282. position: absolute;
  5283. inset: 20px 0 0 0;
  5284. z-index: -1;
  5285. background: rgba(0, 0, 0, 0.4);
  5286. }
  5287. [data-list-id=message-requests-list] .sectionTitle__3a086 {
  5288. background-color: var(--store-body-header);
  5289. padding: 10px 20px 10px 20px;
  5290. margin: -8px 0 0 0;
  5291. font-weight: normal;
  5292. font-size: 14px;
  5293. line-height: 16px;
  5294. letter-spacing: 0.03em;
  5295. text-transform: uppercase;
  5296. color: #fff;
  5297. }
  5298. [data-list-id=message-requests-list] .sectionTitle__3a086 + .messageRequestItem__3b951 {
  5299. margin-top: 20px;
  5300. }
  5301. [data-list-id=message-requests-list] .messageRequestItem__3b951 {
  5302. font-weight: 500;
  5303. font-size: 16px;
  5304. line-height: 20px;
  5305. border: none !important;
  5306. border-radius: 0;
  5307. margin-left: 20px;
  5308. margin-right: 20px;
  5309. padding: 6px 8px;
  5310. height: 46px;
  5311. box-sizing: content-box;
  5312. }
  5313. [data-list-id=message-requests-list] .messageRequestItem__3b951:hover, [data-list-id=message-requests-list] .messageRequestItem__3b951.selected_ee2dc5 {
  5314. background: var(--background-accent);
  5315. transition: background 0.2s linear;
  5316. }
  5317. [data-list-id=message-requests-list] .timestampWithPreview_e9d53a {
  5318. margin-top: 2px;
  5319. }
  5320. [data-list-id=message-requests-list] .actions__7db60 {
  5321. gap: 4px;
  5322. }
  5323. [data-list-id=message-requests-list] .actions__7db60 .button_dc5086:not(:last-child) {
  5324. margin-right: 0;
  5325. }
  5326.  
  5327. .containerCompact_a8a449 {
  5328. margin: 16px 16px 0;
  5329. }
  5330.  
  5331. .compactButton__0f247,
  5332. .compactButtonDisabled_f3bf7b {
  5333. padding: 8px 14px;
  5334. background: var(--btn-brand);
  5335. border-radius: 2px;
  5336. }
  5337. .compactButton__0f247 .text__1a674,
  5338. .compactButtonDisabled_f3bf7b .text__1a674 {
  5339. font-size: 14px;
  5340. line-height: 18px;
  5341. font-weight: 400;
  5342. color: var(--btn-brand-text);
  5343. }
  5344.  
  5345. .compactButton__0f247:hover {
  5346. background: var(--btn-brand-hover);
  5347. }
  5348. .compactButton__0f247:hover .text__1a674 {
  5349. color: #fff;
  5350. }
  5351.  
  5352. .sidebar_ded4b5:has([class*=discoverHeader]) [class*=discoverHeader] {
  5353. font-size: 14px;
  5354. font-weight: 700;
  5355. line-height: 16px;
  5356. text-transform: uppercase;
  5357. color: var(--channels-category);
  5358. padding: 16px 16px 0 8px;
  5359. margin-left: 0;
  5360. margin-right: 0;
  5361. margin-bottom: 0;
  5362. }
  5363. .sidebar_ded4b5:has([class*=discoverHeader]) [class*=categoryItem] {
  5364. --header-secondary: var(--channels-default);
  5365. }
  5366. .sidebar_ded4b5:has([class*=discoverHeader]) [class*=categoryItem]:hover:not(.selected__9800b) {
  5367. --channels-default: var(--channels-default-hover);
  5368. }
  5369. .sidebar_ded4b5:has([class*=discoverHeader]) [class*=categoryItem]:hover:not(.selected__9800b) svg {
  5370. color: var(--channels-default);
  5371. }
  5372. .sidebar_ded4b5:has([class*=discoverHeader]) [class*=categoryItem][class*=selected] {
  5373. --channels-default: #fff;
  5374. }
  5375. .sidebar_ded4b5:has([class*=discoverHeader]) [class*=categoryItem][class*=selected] .layout_bb8e67 {
  5376. background: var(--channel-selected);
  5377. }
  5378. .sidebar_ded4b5:has([class*=discoverHeader]) .layout_bb8e67 {
  5379. border-radius: 0;
  5380. background: none;
  5381. padding: 6px 8px;
  5382. }
  5383. .sidebar_ded4b5:has([class*=discoverHeader]) .avatar__6337f {
  5384. width: 16px;
  5385. height: 16px;
  5386. margin-right: 6px;
  5387. }
  5388. .sidebar_ded4b5:has([class*=discoverHeader]) .name__16feb {
  5389. font-size: 12px;
  5390. font-weight: 700;
  5391. line-height: 20px;
  5392. color: var(--channels-default);
  5393. }
  5394.  
  5395. #app-mount .pageWrapper_fef757 {
  5396. background: none;
  5397. }
  5398.  
  5399. .pageWrapper_fef757 {
  5400. max-width: var(--content-width);
  5401. }
  5402. .pageWrapper_fef757 .scroller-3j5xK2 {
  5403. padding: 0;
  5404. }
  5405.  
  5406. .searchHeader-3ZIh2x {
  5407. padding: 32px;
  5408. margin: 0;
  5409. }
  5410. .searchHeader-3ZIh2x .search-25t1e9 .searchBox-31Zv9h {
  5411. background: var(--btn-grey);
  5412. }
  5413. .searchHeader-3ZIh2x .search-25t1e9:hover .searchBox-31Zv9h {
  5414. background: var(--btn-grey-hover);
  5415. }
  5416. .searchHeader-3ZIh2x .search-25t1e9 .searchBoxInput-3h4etz {
  5417. color: #fff;
  5418. font-weight: 400;
  5419. }
  5420. .searchHeader-3ZIh2x .search-25t1e9 .searchBoxInput-3h4etz::-moz-placeholder {
  5421. color: var(--text-lighter);
  5422. font-weight: 400;
  5423. }
  5424. .searchHeader-3ZIh2x .search-25t1e9 .searchBoxInput-3h4etz::placeholder {
  5425. color: var(--text-lighter);
  5426. font-weight: 400;
  5427. }
  5428. .searchHeader-3ZIh2x .search-25t1e9 .input_d266e7:focus, .searchHeader-3ZIh2x .search-25t1e9 .input_d266e7:focus-within {
  5429. background: none;
  5430. box-shadow: none;
  5431. }
  5432. .searchHeader-3ZIh2x .search-25t1e9 .closeIcon-BMGxx0,
  5433. .searchHeader-3ZIh2x .search-25t1e9 .searchIcon-3X4BYL {
  5434. color: var(--brand-experiment);
  5435. height: 18px;
  5436. width: 18px;
  5437. }
  5438. .searchHeader-3ZIh2x .search-25t1e9 .closeIcon-BMGxx0:hover {
  5439. color: var(--status-danger);
  5440. }
  5441.  
  5442. .headerImage-2D5D-v {
  5443. box-shadow: 0 0 5px 0 #000000;
  5444. }
  5445.  
  5446. #app-mount .card__86773 {
  5447. background: linear-gradient(-45deg, hsl(calc(var(--accent-hue) - 3), calc(var(--saturation-factor, 1) * 41%), 42.5%) 5%, hsl(calc(var(--accent-hue) + 9), calc(var(--saturation-factor, 1) * 35.9%), 25.7%) 95%);
  5448. }
  5449. #app-mount .card__86773:hover {
  5450. background: linear-gradient(to right, hsl(calc(var(--accent-hue) - 4), calc(var(--saturation-factor, 1) * 41.4%), 37.5%) 5%, hsl(calc(var(--accent-hue) - 4), calc(var(--saturation-factor, 1) * 41.1%), 45.3%) 95%);
  5451. }
  5452. #app-mount .card__86773 .iconMask__1aff7 {
  5453. background: none;
  5454. }
  5455.  
  5456. .card__86773 {
  5457. height: 170px;
  5458. border-radius: 0;
  5459. border-top: 1px solid rgba(201, 201, 201, 0.06);
  5460. border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  5461. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
  5462. box-sizing: content-box;
  5463. filter: brightness(1) contrast(1);
  5464. transition-property: filter, box-shadow, transform, background;
  5465. transition-duration: 0.6s;
  5466. transition-timing-function: cubic-bezier(0, 0.73, 0.48, 1);
  5467. transform-origin: 50% 50%;
  5468. transform-style: preserve-3d;
  5469. perspective: 300px;
  5470. perspective-origin: 50%;
  5471. }
  5472. .card__86773:hover {
  5473. transform: rotateX(3deg) translateZ(15px);
  5474. filter: brightness(1.1) contrast(0.95) saturate(1);
  5475. box-shadow: 0 14px 12px 0 rgba(0, 0, 0, 0.3);
  5476. }
  5477. .card__86773:hover::before {
  5478. opacity: 0.2;
  5479. transform: rotateZ(210deg) translateX(12%) translateY(32%);
  5480. }
  5481. .card__86773::before {
  5482. content: "";
  5483. display: block;
  5484. opacity: 0.1;
  5485. width: 220%;
  5486. height: 100%;
  5487. background: linear-gradient(to bottom, hsl(calc(var(--accent-hue) + 5), 100%, 96.1%, 0) 0%, hsl(calc(var(--accent-hue) + 5), 100%, 96.1%, 0.85) 12px, hsl(calc(var(--accent-hue) + 5), 100%, 96.1%, 0.75) 20%, rgba(210, 210, 210, 0) 60%, rgba(10, 10, 10, 0) 85%, rgba(10, 10, 10, 0.8) 100%);
  5488. position: absolute;
  5489. top: 0;
  5490. left: 0;
  5491. transform: rotateZ(212deg) translateX(12%) translateY(59%);
  5492. pointer-events: none;
  5493. z-index: 10;
  5494. transition-property: transform, opacity;
  5495. transition-duration: 0.6s;
  5496. transition-timing-function: cubic-bezier(0, 0.73, 0.48, 1);
  5497. }
  5498. .card__86773:focus .splash_c32fae, .card__86773:hover .splash_c32fae {
  5499. transform: none;
  5500. }
  5501. .card__86773 .splashImage_d48ade,
  5502. .card__86773 .description__62490,
  5503. .card__86773 .memberInfo_d96ddb {
  5504. transition-property: filter, opacity;
  5505. transition-duration: 0.6s;
  5506. transition-timing-function: cubic-bezier(0, 0.73, 0.48, 1);
  5507. }
  5508. .card__86773:has(.title__17a17:hover) .splashImage_d48ade {
  5509. filter: blur(16px);
  5510. }
  5511. .card__86773:has(.title__17a17:hover) .description__62490,
  5512. .card__86773:has(.title__17a17:hover) .memberInfo_d96ddb {
  5513. opacity: 1;
  5514. }
  5515. .card__86773 .cardHeader__889e1 {
  5516. width: 100%;
  5517. height: 100%;
  5518. margin-bottom: 0;
  5519. }
  5520. .card__86773 .splash_c32fae {
  5521. position: relative;
  5522. }
  5523. .card__86773 .guildIcon__597aa {
  5524. bottom: 0;
  5525. }
  5526. .card__86773 .guildIcon__597aa foreignObject {
  5527. -webkit-mask: none;
  5528. mask: none;
  5529. }
  5530. .card__86773 .guildIcon__597aa .iconMask__1aff7 {
  5531. padding: 0;
  5532. }
  5533. .card__86773 .guildIcon__597aa .iconMask__1aff7 .svg__7900e {
  5534. box-shadow: 0 0 5px 0 #000000;
  5535. background: #fff;
  5536. }
  5537. .card__86773 .guildInfo_ef4f03 {
  5538. position: absolute;
  5539. top: 0;
  5540. bottom: 0;
  5541. padding: 16px 16px 10px 16px;
  5542. }
  5543. .card__86773 .title__17a17 {
  5544. order: 1;
  5545. padding-left: 44px;
  5546. height: 40px;
  5547. }
  5548. .card__86773 .title__17a17 .guildBadge__53c1d {
  5549. filter: drop-shadow(0 0 5px #000000);
  5550. }
  5551. .card__86773 .title__17a17 .guildName__802c6 {
  5552. text-shadow: 0 0 5px #000000;
  5553. overflow: visible;
  5554. }
  5555. .card__86773 .memberInfo_d96ddb {
  5556. margin-bottom: 10px;
  5557. }
  5558. .card__86773 .description__62490,
  5559. .card__86773 .memberInfo_d96ddb {
  5560. opacity: 0;
  5561. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  5562. --header-secondary: #fff;
  5563. }
  5564. .card__86773 .actionButtons__481c3 {
  5565. z-index: 1;
  5566. }
  5567. .card__86773 .wrapper_c727b6 {
  5568. overflow: visible;
  5569. }
  5570. .card__86773 .button_d553e5 {
  5571. height: 15px;
  5572. width: 15px;
  5573. background: #e5e5e5;
  5574. border-radius: 3px;
  5575. box-shadow: 0 0 3px #000;
  5576. }
  5577. .card__86773 .button_d553e5:hover {
  5578. background: var(--btn-dark-text);
  5579. color: #fff;
  5580. }
  5581.  
  5582. .pageWrapper_fef757 .container__56ed5 {
  5583. flex-flow: row wrap;
  5584. display: grid;
  5585. grid-template-areas: "search search" "found categories" "results categories";
  5586. }
  5587. .pageWrapper_fef757 [class*=searchPage] {
  5588. grid-area: search;
  5589. }
  5590. .pageWrapper_fef757 [class*=searchHeader] {
  5591. grid-area: found;
  5592. background: rgba(0, 0, 0, 0.2);
  5593. margin-bottom: 0;
  5594. padding: 10px;
  5595. }
  5596. .pageWrapper_fef757 [class*=searchHeader] .arrow__3dfcd {
  5597. position: absolute;
  5598. top: calc(var(--content-gutter) + 6px);
  5599. left: 6px;
  5600. height: 40px;
  5601. width: 40px;
  5602. color: var(--brand-experiment);
  5603. display: flex;
  5604. align-items: center;
  5605. justify-content: center;
  5606. background: var(--btn-brand);
  5607. border-radius: 2px;
  5608. }
  5609. .pageWrapper_fef757 [class*=searchHeader] .arrow__3dfcd:hover {
  5610. background: var(--btn-brand-hover);
  5611. color: #fff;
  5612. }
  5613. .pageWrapper_fef757 [class*=searchHeader] .header__809e1 {
  5614. font-size: 12px;
  5615. color: var(--text-normal);
  5616. font-weight: 500;
  5617. margin: 0;
  5618. line-height: 18px;
  5619. }
  5620. .pageWrapper_fef757 .results__9b201 {
  5621. grid-area: results;
  5622. max-width: unset;
  5623. width: 100%;
  5624. }
  5625. .pageWrapper_fef757 [class*=categories] {
  5626. grid-area: categories;
  5627. align-items: flex-start;
  5628. height: -moz-fit-content;
  5629. height: fit-content;
  5630. border: 1px solid rgba(255, 255, 255, 0.1);
  5631. border-top: none;
  5632. border-radius: 2px;
  5633. flex-direction: column;
  5634. width: 238px;
  5635. margin-left: var(--content-gutter);
  5636. margin-bottom: 0;
  5637. }
  5638. .pageWrapper_fef757 [class*=categories]::before {
  5639. content: "Categories";
  5640. background: rgba(255, 255, 255, 0.1);
  5641. padding: 4px 4px 4px 6px;
  5642. width: 100%;
  5643. box-sizing: border-box;
  5644. font-size: 12px;
  5645. color: hsl(calc(var(--accent-hue) + 1), calc(var(--saturation-factor, 1) * 28.7%), 82.9%);
  5646. border-top-left-radius: 1px;
  5647. border-top-right-radius: 1px;
  5648. }
  5649. .pageWrapper_fef757 [class*=categories] [class*=categoryPill] {
  5650. padding: 6px 8px;
  5651. text-align: left;
  5652. border-radius: 0;
  5653. margin: 0 2px 0 4px;
  5654. width: calc(100% - 22px);
  5655. --text-muted: hsl(calc(var(--accent-hue) - 3) calc(var(--saturation-factor, 1)*29.7%) 71%);
  5656. }
  5657. .pageWrapper_fef757 [class*=categories] [class*=categoryPill]:first-child {
  5658. margin-top: 4px;
  5659. }
  5660. .pageWrapper_fef757 [class*=categories] [class*=categoryPill]:last-child {
  5661. margin-bottom: 4px;
  5662. }
  5663. .pageWrapper_fef757 [class*=categories] [class*=categoryPill]:hover {
  5664. --text-muted: #fff;
  5665. background: rgba(255, 255, 255, 0.1);
  5666. }
  5667. .pageWrapper_fef757 [class*=categories] [class*=categoryPill][class*=selected] {
  5668. background: var(--btn-brand-hover);
  5669. }
  5670. .pageWrapper_fef757 [class*=categories] [class*=categoryPill] .categoryLabel-2m4AT- {
  5671. font-size: 13px;
  5672. font-weight: 500;
  5673. }
  5674. .pageWrapper_fef757 .searchPage-3tt6dh {
  5675. background: rgba(0, 0, 0, 0.4);
  5676. padding: 6px 6px 6px 52px;
  5677. margin-top: var(--content-gutter);
  5678. margin-bottom: var(--content-gutter);
  5679. align-items: center;
  5680. }
  5681. .pageWrapper_fef757 .searchPage-3tt6dh .search_e47903 {
  5682. width: 300px;
  5683. max-width: calc(100% - 80px - 2px);
  5684. flex-grow: 0;
  5685. }
  5686. .pageWrapper_fef757 .searchPage-3tt6dh [class*=searchBox] {
  5687. background: var(--btn-brand);
  5688. border: 1px solid #000;
  5689. border-radius: 3px;
  5690. box-shadow: 1px 1px 0 var(--btn-brand-border);
  5691. padding: 5px;
  5692. font-size: 12px;
  5693. }
  5694. .pageWrapper_fef757 .searchPage-3tt6dh [class*=searchBox] input {
  5695. padding: 0;
  5696. font-size: 12px;
  5697. font-weight: 500;
  5698. color: #fff;
  5699. }
  5700. .pageWrapper_fef757 .searchPage-3tt6dh [class*=searchBox] input:hover {
  5701. background: none;
  5702. }
  5703. .pageWrapper_fef757 .searchPage-3tt6dh [class*=searchBox] input:focus, .pageWrapper_fef757 .searchPage-3tt6dh [class*=searchBox] input:focus-within {
  5704. background: none;
  5705. box-shadow: none;
  5706. }
  5707. .pageWrapper_fef757 .guildList-QjZKeK {
  5708. max-width: unset;
  5709. grid-gap: 5px;
  5710. }
  5711. .pageWrapper_fef757 .card__33bd0 {
  5712. background: rgba(0, 0, 0, 0.2);
  5713. border: 1px solid transparent;
  5714. }
  5715. .pageWrapper_fef757 .card__33bd0:hover {
  5716. background: rgba(0, 0, 0, 0.4);
  5717. border-color: hsl(calc(var(--accent-hue) - 2), calc(var(--saturation-factor, 1) * 39%), 41%);
  5718. }
  5719. .pageWrapper_fef757 .card__33bd0 .splashContainer__5cb35 {
  5720. border-radius: 0;
  5721. margin-right: 12px;
  5722. }
  5723. .pageWrapper_fef757 .card__33bd0 .svg__7900e {
  5724. position: absolute;
  5725. top: 8px;
  5726. margin-left: -52px;
  5727. border-radius: 2px;
  5728. box-shadow: 0 0 5px 0 #000000;
  5729. }
  5730. .pageWrapper_fef757 .card__33bd0 .svg__7900e foreignObject {
  5731. -webkit-mask: none;
  5732. mask: none;
  5733. }
  5734. .pageWrapper_fef757 .card__33bd0 .content_f124d7 {
  5735. margin-top: 12px;
  5736. height: 103px;
  5737. }
  5738. .pageWrapper_fef757 .card__33bd0 .headerName__3905d {
  5739. margin-top: 0;
  5740. }
  5741. .pageWrapper_fef757 .card__33bd0 .headerName__3905d h2 {
  5742. color: var(--header-primary);
  5743. font-weight: 400;
  5744. }
  5745. .pageWrapper_fef757 .card__33bd0 .description__91e03 {
  5746. margin-top: 10px;
  5747. margin-bottom: auto;
  5748. color: var(--header-secondary);
  5749. }
  5750. .pageWrapper_fef757 .card__33bd0 .memberInfo_e30901 {
  5751. --header-secondary: var(--text-muted);
  5752. margin-top: 10px;
  5753. }
  5754. .pageWrapper_fef757 .card__33bd0 .dotSeparator__44bc0 {
  5755. margin: 0 4px;
  5756. background-color: var(--text-muted);
  5757. }
  5758. .pageWrapper_fef757 .card__33bd0 .actionButtons__24f78 {
  5759. margin: 6px 6px 0 0;
  5760. }
  5761. .pageWrapper_fef757 .separator_f527c9 {
  5762. display: none;
  5763. }
  5764.  
  5765. .placeholder__278ac {
  5766. border-radius: 2px;
  5767. }
  5768.  
  5769. .scroller_e9501c {
  5770. background: none;
  5771. padding: 0 !important;
  5772. max-width: var(--content-width);
  5773. }
  5774. .scroller_e9501c .headerContainer_e815c8 {
  5775. padding: 32px;
  5776. }
  5777. .scroller_e9501c .headerImage_d4505b {
  5778. box-shadow: 0 0 5px 0 #000000;
  5779. margin-bottom: 0;
  5780. }
  5781. .scroller_e9501c .guildListSection__7daf6 {
  5782. min-width: unset;
  5783. }
  5784. .scroller_e9501c .guildList__5e642 {
  5785. margin: 0;
  5786. }
  5787. .scroller_e9501c .guildList__5e642 .container__8877d {
  5788. background: rgba(0, 0, 0, 0.3);
  5789. padding: 8px 16px 10px 16px;
  5790. border-radius: 2px;
  5791. display: flex;
  5792. align-items: center;
  5793. height: unset;
  5794. }
  5795. .scroller_e9501c .guildList__5e642 .container__8877d .iconContainer__004ce {
  5796. border-radius: 2px;
  5797. margin: 6px 6px 16px 6px;
  5798. }
  5799. .scroller_e9501c .guildList__5e642 .container__8877d .header_ffc801 {
  5800. text-align: center;
  5801. font-size: 16px;
  5802. font-weight: 400;
  5803. line-height: 20px;
  5804. margin-bottom: 0;
  5805. }
  5806. .scroller_e9501c .guildList__5e642 .container__8877d [data-text-variant="text-sm/normal"] {
  5807. font-size: 13px;
  5808. line-height: 18px;
  5809. font-weight: 400;
  5810. text-align: center;
  5811. margin-bottom: 16px;
  5812. }
  5813. .scroller_e9501c .footerDescription__7d0c6 {
  5814. --header-secondary: var(--text-muted);
  5815. font-size: 14px;
  5816. line-height: 18px;
  5817. font-weight: 400;
  5818. padding-bottom: 24px;
  5819. }
  5820.  
  5821. .shop_b31ed2 {
  5822. background: none;
  5823. min-width: unset;
  5824. max-width: var(--content-width);
  5825. }
  5826.  
  5827. .shopScrollBackgroundPrimary_bb1f42,
  5828. .pageWrapperBackgroundPrimary__74f14 {
  5829. background: none;
  5830. }
  5831.  
  5832. .heroBanner_d3ffc9 {
  5833. min-width: unset;
  5834. margin-top: 0;
  5835. }
  5836.  
  5837. .shop_b31ed2 .pageWrapper__582b9 {
  5838. justify-content: left;
  5839. }
  5840. .shop_b31ed2 .page_be1421 {
  5841. max-width: var(--content-inner-width);
  5842. padding: var(--content-gutter) 0 0 0;
  5843. margin-top: 0;
  5844. }
  5845.  
  5846. .shopCard_f7822b {
  5847. border-radius: 2px;
  5848. border: 2px solid transparent !important;
  5849. background: rgba(0, 0, 0, 0.3) !important;
  5850. }
  5851. .shopCard_f7822b .darkCardBackground__82a32 {
  5852. background-color: transparent;
  5853. }
  5854.  
  5855. .layers__1c917 > .layer__2efaa .animating__27211 *,
  5856. .layers__1c917 > .layer__2efaa .animating__27211 {
  5857. pointer-events: auto !important;
  5858. will-change: unset;
  5859. }
  5860.  
  5861. #app-mount .layer__2efaa ~ .layer__2efaa {
  5862. border-radius: 0 !important;
  5863. border: 0.5px solid black;
  5864. --text-link: var(--text-linkHi);
  5865. }
  5866. #app-mount .layer__2efaa ~ .layer__2efaa a:hover {
  5867. text-decoration: none;
  5868. --text-link: var(--text-linkHi-hover);
  5869. }
  5870. #app-mount .layer__2efaa ~ .layer__2efaa .lookFilled__19298.colorBrand_b2253e {
  5871. color: var(--text-lighter);
  5872. background: var(--btn-grey);
  5873. }
  5874. #app-mount .layer__2efaa ~ .layer__2efaa .lookFilled__19298.colorBrand_b2253e:hover {
  5875. background: var(--btn-grey-hover);
  5876. color: #fff;
  5877. box-shadow: var(--btn-grey-boxshadow);
  5878. }
  5879.  
  5880. html.app-focused .layer__2efaa ~ .layer__2efaa::before {
  5881. content: "";
  5882. display: block;
  5883. height: 1px;
  5884. width: 100%;
  5885. background: linear-gradient(to right, hsl(calc(var(--accent-hue) - 13), calc(var(--saturation-factor, 1) * 100%), 50%) 0%, hsl(calc(var(--accent-hue) + 20), calc(var(--saturation-factor, 1) * 100%), 60%) 100%);
  5886. position: absolute;
  5887. z-index: 102;
  5888. top: 0;
  5889. }
  5890.  
  5891. #app-mount .layer__2efaa.stop-animations:first-child::after {
  5892. opacity: 0 !important;
  5893. }
  5894.  
  5895. #app-mount .layer__2efaa ~ .layer__2efaa .sidebar__9e3e2 {
  5896. padding: 12px 0 24px 0 !important;
  5897. }
  5898.  
  5899. .sidebarRegionScroller__1fa7e {
  5900. overflow: auto !important;
  5901. }
  5902.  
  5903. body #app-mount .sidebar__9e3e2:has(.socialLinks_c1fc99),
  5904. body #app-mount .layer__2efaa ~ .layer__2efaa .sidebar__9e3e2:has(.socialLinks_c1fc99) {
  5905. width: 188px !important;
  5906. }
  5907.  
  5908. .contentRegion__0bec1,
  5909. .contentRegionScroller__86c79 {
  5910. background: var(--background-tertiary);
  5911. --background-modifier-accent: var(--background-modifier-accent-dark);
  5912. }
  5913.  
  5914. .sidebar__9e3e2:has(.socialLinks_c1fc99) .side_b4b3f6 .item__48dda::before {
  5915. margin-right: 16px;
  5916. }
  5917.  
  5918. .sidebar__9e3e2 .header_f72511 {
  5919. color: var(--brand-experiment);
  5920. }
  5921. .sidebar__9e3e2 .header_f72511,
  5922. .sidebar__9e3e2 .header_f72511:first-child {
  5923. padding: 24px 16px 20px 24px;
  5924. }
  5925. .sidebar__9e3e2 .headerText__94c22 {
  5926. font-size: 17px;
  5927. line-height: 20px;
  5928. text-align: center;
  5929. overflow: hidden;
  5930. }
  5931. .sidebar__9e3e2 .separator_fdbcfd {
  5932. margin: 0 12px;
  5933. background: var(--background-accent);
  5934. }
  5935.  
  5936. #app-mount .sidebar__9e3e2 .item__48dda {
  5937. padding: 10px 16px 10px 24px;
  5938. border-radius: 0;
  5939. font-size: 14px;
  5940. margin-bottom: 0;
  5941. --interactive-normal: var(--header-secondary);
  5942. --interactive-hover: var(--background-accent);
  5943. --background-modifier-hover: var(--contextmenu-text);
  5944. --background-modifier-selected: var(--background-accent);
  5945. }
  5946. #app-mount .sidebar__9e3e2 .item__48dda:active {
  5947. background: var(--contextmenu-text);
  5948. color: var(--background-accent);
  5949. }
  5950. #app-mount .sidebar__9e3e2 .item__48dda.selected__5711d {
  5951. background: var(--background-accent);
  5952. color: white;
  5953. }
  5954. #app-mount .sidebar__9e3e2 .item__48dda:hover + .separator_fdbcfd, #app-mount .sidebar__9e3e2 .item__48dda:active + .separator_fdbcfd, #app-mount .sidebar__9e3e2 .item__48dda.selected__5711d + .separator_fdbcfd {
  5955. opacity: 0;
  5956. }
  5957. #app-mount .sidebar__9e3e2 .item__48dda [data-text-variant="text-md/normal"] {
  5958. font-size: 14px;
  5959. line-height: 18px;
  5960. }
  5961.  
  5962. .socialLinks_c1fc99 {
  5963. padding: 24px 0 24px 24px;
  5964. }
  5965.  
  5966. .info__755e1 {
  5967. padding: 0 24px 24px 24px;
  5968. }
  5969. .info__755e1 .line__75801 {
  5970. line-height: 16px;
  5971. }
  5972.  
  5973. #app-mount .contentRegion__0bec1 .contentRegionScroller__86c79 {
  5974. --header-padding: 32px;
  5975. padding-top: 6px;
  5976. overflow-y: overlay !important;
  5977. max-width: calc(var(--settingsmodalwidth) - 196px);
  5978. }
  5979. #app-mount .contentRegion__0bec1 .contentRegionScroller__86c79::-webkit-scrollbar-track {
  5980. margin-top: 88px;
  5981. }
  5982.  
  5983. .contentRegion__0bec1 {
  5984. flex: 1 1 calc(var(--settingsmodalwidth) - 196px);
  5985. }
  5986.  
  5987. .contentColumn_dc7d36,
  5988. .customColumn_e22a6e {
  5989. min-width: unset;
  5990. }
  5991.  
  5992. .customScroller_f72801 > div {
  5993. margin-left: 24px;
  5994. margin-right: 24px;
  5995. max-width: 100%;
  5996. min-width: unset;
  5997. }
  5998.  
  5999. [aria-controls=discord-nitro-tab] .background__584e7 {
  6000. border-radius: 0;
  6001. }
  6002.  
  6003. #app-mount .layer__2efaa ~ .layer__2efaa .contentColumnDefault_c66386 {
  6004. padding: 0 24px 24px 24px !important;
  6005. }
  6006.  
  6007. .contentColumn_dc7d36 > div:first-child > .sectionTitle_e32631,
  6008. .contentColumn_dc7d36 > div:not([class]):first-child > div:not([class]):first-child > .sectionTitle_e32631,
  6009. #profile-customization-tab h2,
  6010. #billing-tab > div:not([class]):first-child > div:not([class]):first-child h2,
  6011. #roles-tab div:not([class]) > h2,
  6012. #emoji-tab .sectionTitle_e32631,
  6013. #integrations-tab > .flex_f5fbb7:first-child,
  6014. #guild_templates-tab h2,
  6015. #vanity_url-tab h2.title__3e421 {
  6016. position: sticky;
  6017. display: flex;
  6018. align-items: center;
  6019. top: 0;
  6020. padding: 32px 24px;
  6021. margin-left: -24px;
  6022. z-index: 10;
  6023. transform: translateY(calc(var(--header-padding) * -1 + 8.5px + 18px));
  6024. background: linear-gradient(to bottom, var(--background-tertiary) calc(100% - 24px), transparent 100%);
  6025. }
  6026.  
  6027. .contentColumn_dc7d36 > div:first-child > .sectionTitle_e32631 h2,
  6028. .contentColumn_dc7d36 > div:not([class]):first-child > div:not([class]):first-child > .sectionTitle_e32631 h2,
  6029. #profile-customization-tab h2,
  6030. #billing-tab > div:not([class]):first-child > div:not([class]):first-child h2,
  6031. #roles-tab div:not([class]) > h2,
  6032. #emoji-tab .sectionTitle_e32631 h2,
  6033. #integrations-tab > .flex_f5fbb7:first-child h2,
  6034. #guild_templates-tab h2,
  6035. #vanity_url-tab h2.title__3e421 {
  6036. font-size: 22px;
  6037. line-height: 24px;
  6038. font-weight: 700;
  6039. margin-bottom: 0;
  6040. }
  6041.  
  6042. .marginTop40__2b1fe,
  6043. .marginTop20_d88ee7,
  6044. .dividerDefault__1e52f {
  6045. margin-top: 10px;
  6046. }
  6047.  
  6048. .container_c52416 {
  6049. margin-bottom: 10px;
  6050. }
  6051.  
  6052. .container_c52416[class*=marginTop][class*=marginBottom]:has(+ .container_c52416[class*=marginTop][class*=marginBottom]) {
  6053. margin-bottom: 0;
  6054. }
  6055.  
  6056. .title__28a65,
  6057. .h3_de2650.title__3e421.defaultColor_d757c2 {
  6058. color: var(--contextmenu-text);
  6059. font-size: 14px;
  6060. line-height: 18px;
  6061. font-weight: 400;
  6062. }
  6063.  
  6064. .h3_de2650.title__3e421.defaultColor_d757c2.defaultMarginh3__18bdb {
  6065. margin-bottom: 10px;
  6066. }
  6067.  
  6068. .marginTop40__2b1fe .h1__90460.title__3e421,
  6069. .h1__90460.title__3e421.marginBottom20__64605 {
  6070. margin-bottom: 10px;
  6071. font-size: 24px;
  6072. line-height: 36px;
  6073. font-weight: 300;
  6074. letter-spacing: 2px;
  6075. color: #fff;
  6076. text-transform: uppercase;
  6077. }
  6078.  
  6079. .h5__884a2.eyebrow_b7df6b {
  6080. color: var(--text-muted);
  6081. font-size: 14px;
  6082. letter-spacing: 0.5px;
  6083. line-height: 36px;
  6084. margin-bottom: 0;
  6085. }
  6086.  
  6087. .note__24c83 .description__7af71 {
  6088. margin-bottom: 0;
  6089. }
  6090.  
  6091. .formNotice__8622e {
  6092. padding: 0;
  6093. background: none;
  6094. border: none;
  6095. }
  6096.  
  6097. .sectionDescription__93f73,
  6098. .description__7af71 {
  6099. font-size: 13px;
  6100. line-height: 18px;
  6101. font-weight: 400;
  6102. color: var(--text-muted);
  6103. letter-spacing: 0;
  6104. margin-bottom: 10px;
  6105. }
  6106.  
  6107. .formText_e4d957 {
  6108. font-size: 13px;
  6109. line-height: 18px;
  6110. font-weight: 400;
  6111. color: var(--text-muted);
  6112. letter-spacing: 0;
  6113. }
  6114.  
  6115. .modeDisabled__67f00.description__7af71 {
  6116. opacity: 1;
  6117. color: var(--background-accent-hover);
  6118. }
  6119.  
  6120. .children_b15c64 > .marginBottom40__9109c:last-child:has(.formText_e4d957) {
  6121. margin-bottom: 0;
  6122. }
  6123.  
  6124. .container_de00a3 {
  6125. border-radius: 2px;
  6126. padding: 10px;
  6127. font-weight: 400;
  6128. }
  6129.  
  6130. .descriptionBox_cca0c3 {
  6131. background: none;
  6132. border-radius: 0;
  6133. margin-top: 0;
  6134. padding: 0;
  6135. gap: 10px;
  6136. }
  6137. .descriptionBox_cca0c3 .descriptionSection_d8976f {
  6138. padding: 8px 24px 10px 16px;
  6139. background: var(--btn-grey);
  6140. border-radius: 2px;
  6141. flex: 1 1 calc(50% - 10px);
  6142. }
  6143. .descriptionBox_cca0c3 .descriptionSection_d8976f .descriptionIcon__2e291 {
  6144. height: 20px;
  6145. width: 20px;
  6146. margin-right: 10px;
  6147. vertical-align: middle;
  6148. }
  6149. .descriptionBox_cca0c3 .descriptionSection_d8976f .descriptionIcon__2e291 circle {
  6150. display: none;
  6151. }
  6152. .descriptionBox_cca0c3 .descriptionSection_d8976f h3 {
  6153. font-size: 16px;
  6154. font-weight: 400;
  6155. line-height: 20px;
  6156. color: var(--header-primary);
  6157. letter-spacing: 0;
  6158. text-transform: capitalize;
  6159. text-align: center;
  6160. }
  6161. .descriptionBox_cca0c3 .descriptionRow__5d784 {
  6162. margin-top: 10px;
  6163. vertical-align: middle;
  6164. font-size: 13px;
  6165. font-weight: 400;
  6166. line-height: 20px;
  6167. color: var(--header-secondary);
  6168. }
  6169.  
  6170. .container__467eb {
  6171. border-radius: 4px;
  6172. }
  6173.  
  6174. #app-mount .layer__2efaa ~ .layer__2efaa .accountProfileCard__22589 {
  6175. max-width: 100% !important;
  6176. }
  6177.  
  6178. #app-mount .accountProfileCard__22589 {
  6179. box-shadow: none;
  6180. border-radius: 0;
  6181. overflow: visible;
  6182. }
  6183. #app-mount .accountProfileCard__22589 .bannerSVGWrapper__3e7b0:not(:has([style*="/banners/"])) {
  6184. min-height: 1px !important;
  6185. min-width: 100% !important;
  6186. }
  6187. #app-mount .accountProfileCard__22589 .banner__6d414:not([style^=background-image]) {
  6188. height: 1px;
  6189. min-height: 1px;
  6190. border-radius: 0;
  6191. -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0), transparent 75%);
  6192. mask-image: linear-gradient(to right, rgb(0, 0, 0), transparent 75%);
  6193. }
  6194. #app-mount .accountProfileCard__22589 .userInfo__8f826 {
  6195. height: 72px;
  6196. align-items: center;
  6197. padding: 10px 0 0 87px;
  6198. }
  6199. #app-mount .accountProfileCard__22589 .avatar__6c108 {
  6200. padding: 0;
  6201. top: unset;
  6202. margin: auto 0;
  6203. box-shadow: none;
  6204. height: 60px !important;
  6205. width: 60px !important;
  6206. }
  6207. #app-mount .accountProfileCard__22589 .avatar__6c108 svg {
  6208. height: 70px !important;
  6209. width: 70px !important;
  6210. }
  6211. #app-mount .accountProfileCard__22589 .userTag__4ca14 {
  6212. margin: 0;
  6213. padding-left: 0;
  6214. font-size: 16px;
  6215. line-height: 20px;
  6216. font-weight: 400;
  6217. }
  6218. #app-mount .accountProfileCard__22589 .overflowMenuButton__70c20 {
  6219. margin-left: 0;
  6220. height: 100%;
  6221. position: absolute;
  6222. inset: 0;
  6223. opacity: 0;
  6224. }
  6225. #app-mount .accountProfileCard__22589 .profileCardUsernameRow__4cbd8,
  6226. #app-mount .accountProfileCard__22589 .containerWithContent__7e98f {
  6227. background: none;
  6228. box-shadow: none;
  6229. border-radius: 0;
  6230. width: -moz-fit-content;
  6231. width: fit-content;
  6232. padding: 0;
  6233. position: relative;
  6234. }
  6235. #app-mount .accountProfileCard__22589 .containerWithContent__7e98f {
  6236. margin-top: 0;
  6237. }
  6238. #app-mount .accountProfileCard__22589 .container__5bda1 {
  6239. min-height: unset;
  6240. }
  6241. #app-mount .accountProfileCard__22589 .profileBadge22__3c451 {
  6242. width: 18px;
  6243. height: 18px;
  6244. }
  6245. #app-mount .accountProfileCard__22589 .background_b61fcc {
  6246. background: none !important;
  6247. box-shadow: none;
  6248. margin: 10px 0 0 0;
  6249. border-radius: 0;
  6250. padding: 10px 0;
  6251. border-top: thin solid var(--background-modifier-accent-dark);
  6252. }
  6253.  
  6254. .fieldList_aab0de {
  6255. display: grid;
  6256. grid-template-columns: repeat(3, minmax(0, 1fr));
  6257. grid-gap: 20px;
  6258. background: none;
  6259. }
  6260.  
  6261. .field__9e8e2 {
  6262. flex-direction: column;
  6263. background: var(--btn-grey);
  6264. margin: 0;
  6265. padding: 6px;
  6266. border-radius: 2px;
  6267. align-items: center;
  6268. justify-content: center;
  6269. height: 100px;
  6270. position: relative;
  6271. transition-property: background, box-shadow;
  6272. transition-duration: 0.2s;
  6273. transition-timing-function: ease-out;
  6274. }
  6275. .field__9e8e2 .constrainedRow_b9e8cf {
  6276. margin-right: 0;
  6277. flex-grow: 0;
  6278. }
  6279. .field__9e8e2 .constrainedRow_b9e8cf .fieldTitle__47b24 + div {
  6280. text-align: center;
  6281. }
  6282. .field__9e8e2 .constrainedRow_b9e8cf .fieldTitle__47b24 {
  6283. font-size: 16px;
  6284. font-weight: 400;
  6285. line-height: 20px;
  6286. text-align: center;
  6287. text-transform: capitalize;
  6288. color: #fff;
  6289. margin-bottom: 0;
  6290. }
  6291. .field__9e8e2 .constrainedRow_b9e8cf .fieldTitle__47b24 + div {
  6292. text-align: center;
  6293. }
  6294. .field__9e8e2 .constrainedRow_b9e8cf .fieldTitle__47b24 + div span {
  6295. font-size: 14px;
  6296. line-height: 20px;
  6297. --header-primary: var(--header-secondary);
  6298. }
  6299. .field__9e8e2:has(button.lookFilled__19298:hover) {
  6300. background: var(--btn-grey-hover);
  6301. box-shadow: var(--btn-grey-boxshadow);
  6302. }
  6303. .field__9e8e2 .fieldButtonList__7db82 {
  6304. position: absolute;
  6305. inset: 0;
  6306. align-items: end;
  6307. justify-content: center;
  6308. }
  6309. .field__9e8e2 button {
  6310. margin: 0;
  6311. }
  6312. .field__9e8e2 button.lookFilled__19298 {
  6313. position: absolute;
  6314. width: 100%;
  6315. height: 100%;
  6316. opacity: 0;
  6317. z-index: 0;
  6318. }
  6319. .field__9e8e2 button.lookLink__93965 {
  6320. z-index: 1;
  6321. }
  6322.  
  6323. #my-account-tab .flex_f5fbb7:has(> button) {
  6324. gap: 4px;
  6325. }
  6326.  
  6327. .horizontal__992f6 > .flexChild__6e093 {
  6328. margin-left: 2px;
  6329. margin-right: 2px;
  6330. }
  6331.  
  6332. .disableButton__61514 {
  6333. margin-right: 4px;
  6334. }
  6335.  
  6336. #app-mount .layer__2efaa ~ .layer__2efaa .profileCustomizationSection__88eff .baseLayout_b00434 .preview__0c5fe .userPopoutOuter_d739b2,
  6337. #app-mount .layer__2efaa ~ .layer__2efaa .baseLayout_b00434.tryItOutLayout__6026d .preview__0c5fe .userPopoutOuter_d739b2 {
  6338. min-width: unset !important;
  6339. width: 340px !important;
  6340. max-width: 340px !important;
  6341. }
  6342.  
  6343. #app-mount .layer__2efaa ~ .layer__2efaa .baseLayout_b00434.tryItOutLayout__6026d .preview__0c5fe .userPopoutOuter_d739b2 {
  6344. width: 340px !important;
  6345. }
  6346.  
  6347. @keyframes spinningAvatarHue {
  6348. 0% {
  6349. filter: hue-rotate(0deg);
  6350. }
  6351. 100% {
  6352. filter: hue-rotate(360deg);
  6353. }
  6354. }
  6355. #profile-customization-tab {
  6356. padding: 0 24px 24px 24px;
  6357. }
  6358. #profile-customization-tab .top__592a7 {
  6359. --btn-count: 2;
  6360. background: var(--darker-grey);
  6361. border-radius: 2px;
  6362. padding: 0;
  6363. margin: 0 0 10px 0;
  6364. gap: 0;
  6365. display: flex;
  6366. flex-direction: row;
  6367. position: relative;
  6368. box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.6666666667);
  6369. border-bottom: none;
  6370. }
  6371. #profile-customization-tab .top__592a7 .item__48dda {
  6372. background: none;
  6373. margin: 0;
  6374. display: flex;
  6375. flex: 0 1 calc(100% / var(--btn-count));
  6376. justify-content: center;
  6377. border-bottom: none;
  6378. padding: 0;
  6379. height: 34px;
  6380. padding: 8px 14px;
  6381. font-size: 14px;
  6382. font-weight: 400;
  6383. }
  6384. #profile-customization-tab .top__592a7 .item__48dda:not(.selected__5711d):hover {
  6385. background: var(--btn-grey);
  6386. }
  6387. #profile-customization-tab .top__592a7::before {
  6388. content: "";
  6389. position: absolute;
  6390. height: 100%;
  6391. width: calc(100% / var(--btn-count));
  6392. background: var(--btn-grey-hover);
  6393. transition: translate 0.2s ease;
  6394. border-radius: 2px;
  6395. }
  6396. #profile-customization-tab .top__592a7:has(.selected__5711d:nth-child(2)):before {
  6397. translate: 100%;
  6398. }
  6399. #profile-customization-tab .imageUploaderIconWrapper__4efff {
  6400. padding: 0;
  6401. border-radius: 0;
  6402. box-shadow: 1px 3px 14px rgba(0, 0, 0, 0.65);
  6403. }
  6404. #profile-customization-tab .avatarUploader__18c3f {
  6405. z-index: 2;
  6406. }
  6407. #profile-customization-tab .imageUploaderIcon__0c13b {
  6408. pointer-events: none;
  6409. }
  6410. #profile-customization-tab .section__6f61e:has(.customStatus__3aa7f) {
  6411. order: -2;
  6412. padding-top: 0;
  6413. padding-bottom: 16px;
  6414. }
  6415. #profile-customization-tab .section__6f61e:has(.fakeActivityTitle__79378) {
  6416. background: rgba(0, 0, 0, 0.2);
  6417. margin: 0 -16px;
  6418. padding: 16px;
  6419. order: -1;
  6420. }
  6421. #profile-customization-tab .section__6f61e:has(.fakeActivityTitle__79378) .button__890f5 {
  6422. max-width: unset;
  6423. }
  6424. #profile-customization-tab .body_aa2c19 {
  6425. padding-left: 16px;
  6426. padding-right: 16px;
  6427. padding-bottom: 16px;
  6428. }
  6429. #profile-customization-tab .divider_ed0c1d {
  6430. display: none;
  6431. }
  6432. #profile-customization-tab .avatarUploaderPremium_bbc93c {
  6433. top: 16px;
  6434. }
  6435. #profile-customization-tab .avatarUploaderPremium_bbc93c + .profileBadges__7a7cb {
  6436. padding-top: 16px;
  6437. }
  6438. #profile-customization-tab .spinningAvatar__012e4 {
  6439. overflow: hidden;
  6440. animation: spinningAvatarHue 5s ease infinite;
  6441. }
  6442. #profile-customization-tab .tryItOutSection__0f9fb {
  6443. margin: 10px 0 0 0;
  6444. border-radius: 2px;
  6445. border-width: 1px;
  6446. width: 100%;
  6447. height: 1px;
  6448. border-radius: 0;
  6449. position: relative;
  6450. }
  6451. #profile-customization-tab .tryItOutSection__0f9fb .premiumBackground__4ce97 {
  6452. padding: 10px 0 24px 0;
  6453. position: absolute;
  6454. top: 1px;
  6455. left: 0;
  6456. background: var(--background-tertiary);
  6457. }
  6458.  
  6459. #app-mount .layer__2efaa ~ .layer__2efaa .profileCustomizationSection__88eff .baseLayout_b00434 .sectionsContainer_a37883,
  6460. #app-mount .layer__2efaa ~ .layer__2efaa .profileCustomizationSection__88eff .baseLayout_b00434 .editor_bca4e3,
  6461. #app-mount .layer__2efaa ~ .layer__2efaa .profileCustomizationSection__88eff .baseLayout_b00434 .preview__0c5fe {
  6462. min-width: unset !important;
  6463. max-width: unset !important;
  6464. }
  6465.  
  6466. .swatch__96672 {
  6467. border-radius: 2px;
  6468. }
  6469.  
  6470. #app-mount .layer__2efaa ~ .layer__2efaa #family-center-tab.contentColumnDefault_c66386 {
  6471. padding-top: 24px !important;
  6472. }
  6473.  
  6474. #family-center-tab [data-text-variant="heading-xl/medium"],
  6475. #activity-tab [data-text-variant="heading-xl/medium"],
  6476. #requests-tab [data-text-variant="heading-xl/medium"] {
  6477. margin-bottom: 10px;
  6478. font-size: 24px;
  6479. line-height: 36px;
  6480. font-weight: 300;
  6481. letter-spacing: 2px;
  6482. text-transform: uppercase;
  6483. }
  6484. #family-center-tab [data-text-variant="text-sm/medium"],
  6485. #activity-tab [data-text-variant="text-sm/medium"],
  6486. #requests-tab [data-text-variant="text-sm/medium"] {
  6487. font-size: 13px;
  6488. line-height: 18px;
  6489. font-weight: 400;
  6490. margin-bottom: 10px;
  6491. }
  6492. #family-center-tab [data-text-variant="text-xs/medium"],
  6493. #activity-tab [data-text-variant="text-xs/medium"],
  6494. #requests-tab [data-text-variant="text-xs/medium"] {
  6495. font-size: 13px;
  6496. line-height: 18px;
  6497. font-weight: 400;
  6498. }
  6499. #family-center-tab .container__6968f,
  6500. #family-center-tab .box__6431e,
  6501. #activity-tab .container__6968f,
  6502. #activity-tab .box__6431e,
  6503. #requests-tab .container__6968f,
  6504. #requests-tab .box__6431e {
  6505. border-radius: 0;
  6506. box-shadow: none;
  6507. }
  6508. #family-center-tab .container__9c82e,
  6509. #activity-tab .container__9c82e,
  6510. #requests-tab .container__9c82e {
  6511. padding: 8px 16px 10px 16px;
  6512. border-radius: 2px;
  6513. box-shadow: none;
  6514. display: flex;
  6515. align-items: center;
  6516. }
  6517. #family-center-tab .container__9c82e .circle__7dd22,
  6518. #activity-tab .container__9c82e .circle__7dd22,
  6519. #requests-tab .container__9c82e .circle__7dd22 {
  6520. background: none;
  6521. border-radius: 0;
  6522. margin: 6px;
  6523. height: 30px;
  6524. width: 30px;
  6525. }
  6526. #family-center-tab .container__9c82e .circle__7dd22 svg,
  6527. #activity-tab .container__9c82e .circle__7dd22 svg,
  6528. #requests-tab .container__9c82e .circle__7dd22 svg {
  6529. color: var(--gpColor-Yellow);
  6530. margin: 0;
  6531. height: 30px;
  6532. width: 30px;
  6533. }
  6534. #family-center-tab .container__9c82e .header__5b1ca,
  6535. #activity-tab .container__9c82e .header__5b1ca,
  6536. #requests-tab .container__9c82e .header__5b1ca {
  6537. text-align: center;
  6538. font-size: 16px;
  6539. font-weight: 400;
  6540. line-height: 20px;
  6541. margin-bottom: 0;
  6542. }
  6543. #family-center-tab .container__9c82e [data-text-variant="text-sm/medium"],
  6544. #activity-tab .container__9c82e [data-text-variant="text-sm/medium"],
  6545. #requests-tab .container__9c82e [data-text-variant="text-sm/medium"] {
  6546. text-align: center;
  6547. --text-muted: var(--header-secondary);
  6548. }
  6549. #family-center-tab .container__9c82e [data-text-variant="text-sm/medium"],
  6550. #activity-tab .container__9c82e [data-text-variant="text-sm/medium"],
  6551. #requests-tab .container__9c82e [data-text-variant="text-sm/medium"] {
  6552. margin-bottom: 0;
  6553. }
  6554. #family-center-tab .container__9f90c,
  6555. #activity-tab .container__9f90c,
  6556. #requests-tab .container__9f90c {
  6557. border-radius: 0;
  6558. box-shadow: none;
  6559. }
  6560. #family-center-tab .container__9f90c .header__8a01b,
  6561. #activity-tab .container__9f90c .header__8a01b,
  6562. #requests-tab .container__9f90c .header__8a01b {
  6563. color: var(--text-muted);
  6564. font-size: 14px;
  6565. letter-spacing: 0.5px;
  6566. line-height: 36px;
  6567. margin-bottom: 0;
  6568. text-transform: uppercase;
  6569. }
  6570. #family-center-tab .container__9f90c .groupHeader__076cf,
  6571. #activity-tab .container__9f90c .groupHeader__076cf,
  6572. #requests-tab .container__9f90c .groupHeader__076cf {
  6573. display: none;
  6574. }
  6575. #family-center-tab .container__9f90c .row_c1b980,
  6576. #activity-tab .container__9f90c .row_c1b980,
  6577. #requests-tab .container__9f90c .row_c1b980 {
  6578. padding: 8px 24px 10px 16px;
  6579. background: var(--btn-grey);
  6580. border-radius: 2px;
  6581. margin-bottom: 10px;
  6582. }
  6583. #family-center-tab .container__9f90c .row_c1b980 .iconContainer__82920,
  6584. #activity-tab .container__9f90c .row_c1b980 .iconContainer__82920,
  6585. #requests-tab .container__9f90c .row_c1b980 .iconContainer__82920 {
  6586. width: 30px;
  6587. height: 30px;
  6588. background: none;
  6589. border-radius: 0;
  6590. margin-right: 10px;
  6591. }
  6592. #family-center-tab .container__9f90c .row_c1b980 .header__74e4a,
  6593. #activity-tab .container__9f90c .row_c1b980 .header__74e4a,
  6594. #requests-tab .container__9f90c .row_c1b980 .header__74e4a {
  6595. font-size: 16px;
  6596. font-weight: 400;
  6597. line-height: 20px;
  6598. margin-bottom: 0;
  6599. }
  6600. #family-center-tab .container__9f90c .artContainer_aa6b1f,
  6601. #activity-tab .container__9f90c .artContainer_aa6b1f,
  6602. #requests-tab .container__9f90c .artContainer_aa6b1f {
  6603. margin: 0;
  6604. }
  6605. #family-center-tab .steps__1b85a,
  6606. #activity-tab .steps__1b85a,
  6607. #requests-tab .steps__1b85a {
  6608. position: relative;
  6609. width: 100%;
  6610. }
  6611. #family-center-tab .step_bd5604,
  6612. #activity-tab .step_bd5604,
  6613. #requests-tab .step_bd5604 {
  6614. padding: 8px 24px 10px 16px;
  6615. background: var(--btn-grey);
  6616. border-radius: 2px;
  6617. margin-bottom: 10px;
  6618. width: 100%;
  6619. justify-content: left;
  6620. }
  6621. #family-center-tab .step_bd5604 [data-text-variant="heading-sm/bold"],
  6622. #activity-tab .step_bd5604 [data-text-variant="heading-sm/bold"],
  6623. #requests-tab .step_bd5604 [data-text-variant="heading-sm/bold"] {
  6624. font-size: 16px;
  6625. font-weight: 400;
  6626. line-height: 20px;
  6627. margin-bottom: 0;
  6628. }
  6629. #family-center-tab .step_bd5604 [data-text-variant="text-sm/medium"],
  6630. #activity-tab .step_bd5604 [data-text-variant="text-sm/medium"],
  6631. #requests-tab .step_bd5604 [data-text-variant="text-sm/medium"] {
  6632. margin-bottom: 0;
  6633. --text-muted: var(--header-secondary);
  6634. }
  6635. #family-center-tab .step_bd5604 .stepNumber_f429db,
  6636. #activity-tab .step_bd5604 .stepNumber_f429db,
  6637. #requests-tab .step_bd5604 .stepNumber_f429db {
  6638. width: 30px;
  6639. height: 30px;
  6640. background: none;
  6641. border-radius: 0;
  6642. margin-right: 10px;
  6643. }
  6644. #family-center-tab .step_bd5604 .stepNumber_f429db h2,
  6645. #activity-tab .step_bd5604 .stepNumber_f429db h2,
  6646. #requests-tab .step_bd5604 .stepNumber_f429db h2 {
  6647. color: var(--brand-experiment) !important;
  6648. font-size: 20px;
  6649. }
  6650. #family-center-tab .section_a99562 .eyebrow_e5a66c.marginBottom8_f4aae3,
  6651. #activity-tab .section_a99562 .eyebrow_e5a66c.marginBottom8_f4aae3,
  6652. #requests-tab .section_a99562 .eyebrow_e5a66c.marginBottom8_f4aae3 {
  6653. text-transform: capitalize;
  6654. color: #fff !important;
  6655. font-size: 16px;
  6656. line-height: 20px;
  6657. font-weight: 600;
  6658. padding-top: 8px;
  6659. padding-left: 8px;
  6660. }
  6661.  
  6662. #app-mount #family-center-tab .top__592a7 {
  6663. --btn-count: 3;
  6664. background: var(--darker-grey);
  6665. border-radius: 2px;
  6666. padding: 0;
  6667. margin: 0 0 10px 0;
  6668. gap: 0;
  6669. display: flex;
  6670. flex-direction: row;
  6671. position: relative;
  6672. box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.6666666667);
  6673. border-bottom: none;
  6674. }
  6675. #app-mount #family-center-tab .top__592a7 .item__48dda {
  6676. background: none;
  6677. margin: 0;
  6678. display: flex;
  6679. flex: 0 1 calc(100% / var(--btn-count));
  6680. justify-content: center;
  6681. border-bottom: none;
  6682. padding: 0;
  6683. height: 34px;
  6684. padding: 8px 14px;
  6685. font-size: 14px;
  6686. font-weight: 400;
  6687. }
  6688. #app-mount #family-center-tab .top__592a7 .item__48dda:not(.selected__5711d):hover {
  6689. background: var(--btn-grey);
  6690. }
  6691. #app-mount #family-center-tab .top__592a7::before {
  6692. content: "";
  6693. position: absolute;
  6694. height: 100%;
  6695. width: calc(100% / var(--btn-count));
  6696. background: var(--btn-grey-hover);
  6697. transition: translate 0.2s ease;
  6698. border-radius: 2px;
  6699. }
  6700. #app-mount #family-center-tab .top__592a7:has(.selected__5711d:nth-child(2)):before {
  6701. translate: 100%;
  6702. }
  6703. #app-mount #family-center-tab .top__592a7:has(.selected__5711d:nth-child(3)):before {
  6704. translate: 200%;
  6705. }
  6706. #app-mount #family-center-tab .container__6968f,
  6707. #app-mount #family-center-tab .box__6431e {
  6708. background: none;
  6709. padding: 0 0 10px 0;
  6710. border-bottom: thin solid var(--background-modifier-accent-dark);
  6711. }
  6712. #app-mount #family-center-tab .container__9c82e {
  6713. background: var(--btn-grey);
  6714. }
  6715. #app-mount #family-center-tab .container__9f90c {
  6716. background: none;
  6717. padding: 10px 0 0 0;
  6718. border-top: thin solid var(--background-modifier-accent-dark);
  6719. }
  6720. #app-mount #family-center-tab .card__4dc22 {
  6721. border-radius: 0;
  6722. padding: 0;
  6723. border: none;
  6724. background: none;
  6725. }
  6726. #app-mount #family-center-tab .card__4dc22 [data-text-variant="text-sm/semibold"] {
  6727. font-size: 13px;
  6728. line-height: 18px;
  6729. font-weight: 400;
  6730. --text-normal: var(--text-muted);
  6731. letter-spacing: 0;
  6732. }
  6733. #app-mount #family-center-tab .card__4dc22 a {
  6734. font-size: 13px;
  6735. line-height: 18px;
  6736. font-weight: 400;
  6737. }
  6738. #app-mount #family-center-tab .card__4dc22 .iconBadge__2abac {
  6739. height: 18px;
  6740. width: 18px;
  6741. margin-left: 4px;
  6742. color: var(--brand-experiment);
  6743. }
  6744.  
  6745. #activity-tab .container__6968f,
  6746. #activity-tab .box__6431e,
  6747. #requests-tab .container__6968f,
  6748. #requests-tab .box__6431e {
  6749. background: rgba(0, 0, 0, 0.3);
  6750. padding: 25px;
  6751. }
  6752. #activity-tab .container__9c82e,
  6753. #requests-tab .container__9c82e {
  6754. background: rgba(0, 0, 0, 0.3);
  6755. }
  6756. #activity-tab .container__9f90c,
  6757. #requests-tab .container__9f90c {
  6758. background: rgba(0, 0, 0, 0.3);
  6759. padding: 25px;
  6760. }
  6761. #activity-tab .steps__1b85a,
  6762. #requests-tab .steps__1b85a {
  6763. position: relative;
  6764. width: 100%;
  6765. }
  6766. #activity-tab .step_bd5604,
  6767. #requests-tab .step_bd5604 {
  6768. width: calc(100% - 40px);
  6769. }
  6770.  
  6771. #authorized-apps-tab .formNotice__8622e {
  6772. padding: 0;
  6773. margin-bottom: 10px;
  6774. background: none;
  6775. border: none;
  6776. }
  6777. #authorized-apps-tab .authedApp__51b26 {
  6778. padding: 6px 8px;
  6779. margin-bottom: 10px;
  6780. border: none;
  6781. border-radius: 0;
  6782. background: none;
  6783. }
  6784. #authorized-apps-tab .authedApp__51b26:hover {
  6785. background: var(--background-accent);
  6786. transition: background 0.2s linear;
  6787. }
  6788. #authorized-apps-tab .authedApp__51b26 .marginBottom20__64605 {
  6789. margin-bottom: 10px;
  6790. }
  6791. #authorized-apps-tab .authedApp__51b26 .headerInfo__2d6b1 [data-text-variant="text-sm/semibold"] {
  6792. margin-left: 12px;
  6793. }
  6794. #authorized-apps-tab .authedApp__51b26 .twoWayWarning_d1f465 {
  6795. margin-top: 10px;
  6796. }
  6797. #authorized-apps-tab .authedApp__51b26 .twoWayWarning_d1f465 .twoWayWarningIcon_de3272 {
  6798. height: 18px;
  6799. width: 18px;
  6800. color: var(--gpColor-Yellow);
  6801. margin-right: 4px;
  6802. }
  6803. #authorized-apps-tab .authedApp__51b26 .twoWayWarning_d1f465 [data-text-variant="text-sm/medium"] {
  6804. font-size: 13px;
  6805. line-height: 18px;
  6806. font-weight: 400;
  6807. color: var(--text-muted) !important;
  6808. }
  6809. #authorized-apps-tab .authedApp__51b26 .permission_b5be39 {
  6810. margin-top: 0;
  6811. }
  6812. #authorized-apps-tab .authedApp__51b26 .permission_b5be39 .formText_e4d957 {
  6813. margin-bottom: 0;
  6814. }
  6815. #authorized-apps-tab .appAvatar_dc107b {
  6816. width: 98px;
  6817. height: 45px;
  6818. border-radius: 0;
  6819. -o-object-fit: cover;
  6820. object-fit: cover;
  6821. background: var(--background-accent);
  6822. }
  6823. #authorized-apps-tab .appAvatar_dc107b[src*="755600276941176913/4e"], #authorized-apps-tab .appAvatar_dc107b[src*="880218394199220334/ec"], #authorized-apps-tab .appAvatar_dc107b[src*="207646673902501888/a3"], #authorized-apps-tab .appAvatar_dc107b[src*="1070087967294631976/9a"] {
  6824. -o-object-fit: scale-down;
  6825. object-fit: scale-down;
  6826. background: #fff;
  6827. }
  6828. #authorized-apps-tab .appAvatar_dc107b[src*="622174530214821906/38"] {
  6829. -o-object-fit: scale-down;
  6830. object-fit: scale-down;
  6831. background: #0F7C10;
  6832. }
  6833. #authorized-apps-tab .appAvatar_dc107b[src*="162469056312639488/de"] {
  6834. -o-object-fit: scale-down;
  6835. object-fit: scale-down;
  6836. background: var(--background-accent);
  6837. }
  6838. #authorized-apps-tab .appAvatar_dc107b[src*="777264613867257857/65"] {
  6839. -o-object-fit: scale-down;
  6840. object-fit: scale-down;
  6841. background: #0C0D10;
  6842. }
  6843. #authorized-apps-tab :root {
  6844. counter-reset: authappsCount;
  6845. }
  6846. #authorized-apps-tab .children_b15c64 {
  6847. display: flex;
  6848. flex-flow: row wrap;
  6849. }
  6850. #authorized-apps-tab .children_b15c64:before {
  6851. content: "Authorized Apps";
  6852. color: #fff;
  6853. font-size: 16px;
  6854. line-height: 20px;
  6855. font-weight: 600;
  6856. letter-spacing: 0;
  6857. padding-top: 8px;
  6858. padding-left: 8px;
  6859. order: -2;
  6860. }
  6861. #authorized-apps-tab .children_b15c64:after {
  6862. content: counter(authappsCount);
  6863. animation: authorized-apps-tabCounter 1s linear infinite forwards;
  6864. color: var(--text-muted);
  6865. font-size: 16px;
  6866. line-height: 20px;
  6867. margin-left: 8px;
  6868. font-weight: 600;
  6869. order: -1;
  6870. padding-top: 8px;
  6871. }
  6872. #authorized-apps-tab .formNotice__8622e {
  6873. order: -3;
  6874. }
  6875. #authorized-apps-tab .authedApp__51b26 {
  6876. counter-increment: authappsCount;
  6877. flex-basis: 100%;
  6878. }
  6879. @keyframes authorized-apps-tabCounter {
  6880. to {
  6881. content: counter(authappsCount);
  6882. }
  6883. }
  6884.  
  6885. .sessions__3ce76 {
  6886. margin: 10px 0;
  6887. }
  6888. .sessions__3ce76 .otherSessions_aad582 {
  6889. margin-top: 10px;
  6890. }
  6891.  
  6892. .logOutAllButton__88677 {
  6893. margin-top: 0;
  6894. }
  6895.  
  6896. .session_f56359 {
  6897. border-bottom: none;
  6898. gap: 12px;
  6899. padding: 6px 8px;
  6900. height: 58px;
  6901. }
  6902. .session_f56359:hover {
  6903. background: var(--background-accent);
  6904. transition: background 0.2s linear;
  6905. }
  6906. .session_f56359:hover .sessionIcon__540be,
  6907. .session_f56359:hover .sessionMoreButton__055f9 {
  6908. background: var(--background-accent-hover);
  6909. transition: background 0.2s linear;
  6910. }
  6911. .session_f56359 .sessionInfo__9bc47 {
  6912. gap: 0;
  6913. }
  6914. .session_f56359 .eyebrow_e5a66c {
  6915. color: #fff;
  6916. font-weight: 400;
  6917. font-size: 16px;
  6918. line-height: 20px;
  6919. text-transform: unset;
  6920. }
  6921. .session_f56359 [data-text-variant="text-sm/medium"] {
  6922. color: var(--text-muted);
  6923. font-size: 12px;
  6924. line-height: 22px;
  6925. letter-spacing: 0.5px;
  6926. text-transform: uppercase;
  6927. font-weight: 700;
  6928. display: flex;
  6929. align-items: center;
  6930. }
  6931. .session_f56359 [data-text-variant="text-sm/medium"] span:nth-child(2) {
  6932. display: none;
  6933. }
  6934. .session_f56359 [data-text-variant="text-sm/medium"] span:nth-child(3) {
  6935. color: var(--background-accent-hover);
  6936. font-weight: 700;
  6937. }
  6938. .session_f56359:has(.sessionMoreButton__055f9:hover) .sessionIcon__540be {
  6939. background: var(--status-danger);
  6940. }
  6941.  
  6942. .sessionMoreButton__055f9 {
  6943. background-color: var(--background-accent);
  6944. border-radius: 2px;
  6945. margin: 8px 8px 8px auto;
  6946. height: 24px;
  6947. width: 24px;
  6948. display: flex;
  6949. align-items: center;
  6950. justify-content: center;
  6951. color: var(--status-danger);
  6952. }
  6953. .sessionMoreButton__055f9:hover {
  6954. background: var(--status-danger);
  6955. color: #fff;
  6956. }
  6957. .sessionMoreButton__055f9 svg {
  6958. height: 18px;
  6959. width: 18px;
  6960. }
  6961.  
  6962. .sessionIcon__540be {
  6963. width: 98px;
  6964. height: 45px;
  6965. border-radius: 0;
  6966. background: var(--background-accent);
  6967. color: #fff;
  6968. }
  6969. .sessionIcon__540be svg {
  6970. height: 18px;
  6971. width: 18px;
  6972. }
  6973.  
  6974. .connectContainer__8050b {
  6975. margin-bottom: 10px;
  6976. background: none;
  6977. border-radius: 0;
  6978. padding: 0;
  6979. }
  6980. .connectContainer__8050b .connectHeader__04762 {
  6981. color: var(--text-muted) !important;
  6982. font-size: 14px;
  6983. letter-spacing: 0.5px;
  6984. line-height: 36px;
  6985. text-transform: uppercase;
  6986. margin-bottom: 0;
  6987. }
  6988. .connectContainer__8050b [data-text-variant="text-xs/normal"] {
  6989. font-size: 13px;
  6990. line-height: 18px;
  6991. font-weight: 400;
  6992. color: var(--text-muted) !important;
  6993. margin-bottom: 10px;
  6994. }
  6995. .connectContainer__8050b button {
  6996. background-color: var(--btn-grey);
  6997. transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  6998. border-radius: 2px;
  6999. width: -moz-fit-content;
  7000. width: fit-content;
  7001. background-position: left;
  7002. background-origin: content-box;
  7003. padding: 8px 14px;
  7004. color: var(--text-lighter);
  7005. display: flex;
  7006. justify-content: center;
  7007. align-items: center;
  7008. }
  7009. .connectContainer__8050b button:hover {
  7010. background-color: var(--btn-grey-hover);
  7011. color: #fff;
  7012. box-shadow: var(--btn-grey-boxshadow);
  7013. }
  7014. .connectContainer__8050b button[aria-label]::after {
  7015. content: attr(aria-label);
  7016. font-size: 14px;
  7017. font-weight: 400;
  7018. margin-left: 48px;
  7019. }
  7020. .connectContainer__8050b button.accountAddInner_d34c25[aria-label]::after {
  7021. margin-left: 10px;
  7022. }
  7023. .connectContainer__8050b button.accountAddInner_d34c25 svg {
  7024. color: var(--brand-experiment);
  7025. }
  7026.  
  7027. .connectionList__7b310 {
  7028. gap: 10px;
  7029. padding-top: 10px;
  7030. border-top: thin solid var(--background-modifier-accent-dark);
  7031. }
  7032.  
  7033. .connection_fff5f6 {
  7034. margin-bottom: 0;
  7035. border-radius: 0;
  7036. background: none;
  7037. }
  7038.  
  7039. .connectionHeader__3c82d {
  7040. padding: 8px;
  7041. background: var(--btn-grey);
  7042. border-radius: 0;
  7043. }
  7044. .connectionHeader__3c82d .connectionAccountLabelContainer__9eea3 {
  7045. color: #fff;
  7046. font-size: 16px;
  7047. font-weight: 400;
  7048. line-height: 20px;
  7049. }
  7050. .connectionHeader__3c82d .connectionAccountLabel_a71192 {
  7051. --header-secondary: var(--text-muted);
  7052. font-size: 12px;
  7053. line-height: 22px;
  7054. letter-spacing: 0.5px;
  7055. text-transform: uppercase;
  7056. font-weight: 700;
  7057. }
  7058. .connectionHeader__3c82d .connectionDelete__988b5 {
  7059. background: var(--background-accent);
  7060. border-radius: 2px;
  7061. height: 24px;
  7062. width: 24px;
  7063. display: flex;
  7064. align-items: center;
  7065. justify-content: center;
  7066. color: var(--status-danger);
  7067. margin-right: 0;
  7068. }
  7069. .connectionHeader__3c82d .connectionDelete__988b5:hover {
  7070. background: var(--status-danger);
  7071. color: #fff;
  7072. }
  7073. .connectionHeader__3c82d .connectionDelete__988b5 svg {
  7074. height: 18px;
  7075. width: 18px;
  7076. }
  7077.  
  7078. .connectionOptionsWrapper_abe849 {
  7079. background: var(--background-modifier-accent-dark);
  7080. padding: 8px;
  7081. box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
  7082. }
  7083.  
  7084. .connectionOptions_d1a598 {
  7085. flex-flow: row wrap;
  7086. }
  7087.  
  7088. .connectionOptionSwitch_b4c979 {
  7089. margin-bottom: 0;
  7090. width: 50%;
  7091. max-width: 50%;
  7092. flex: 1 1 50%;
  7093. padding: 0;
  7094. align-items: center;
  7095. }
  7096. .connectionOptionSwitch_b4c979 .labelRow__523f2 {
  7097. width: -moz-fit-content;
  7098. width: fit-content;
  7099. }
  7100. .connectionOptionSwitch_b4c979 .labelRow__523f2 [data-text-variant="text-sm/semibold"] {
  7101. font-size: 13px;
  7102. font-weight: 300;
  7103. }
  7104. .connectionOptionSwitch_b4c979 .control_f6cce7 {
  7105. order: -1;
  7106. margin-right: 4px;
  7107. }
  7108.  
  7109. @keyframes nitroGradient {
  7110. 0% {
  7111. background-position: 0% 50%;
  7112. }
  7113. 50% {
  7114. background-position: 100% 50%;
  7115. }
  7116. 100% {
  7117. background-position: 0% 50%;
  7118. }
  7119. }
  7120. .contentRegionScroller__86c79:has(#discord-nitro-tab) {
  7121. background: #000;
  7122. }
  7123.  
  7124. #app-mount .layer__2efaa ~ .layer__2efaa .contentColumnDefault_c66386#discord-nitro-tab, #app-mount .layer__2efaa ~ .layer__2efaa .contentColumnDefault_c66386#nitro-server-boost-tab {
  7125. padding: 0 !important;
  7126. }
  7127.  
  7128. .premiumContainer__2ebd0 .root__3594f {
  7129. display: none;
  7130. }
  7131.  
  7132. [data-testid=v2-marketing-page-hero-header] {
  7133. width: 100%;
  7134. border-radius: 0;
  7135. background: none;
  7136. margin-bottom: 0;
  7137. }
  7138. [data-testid=v2-marketing-page-hero-header] > * {
  7139. z-index: 1;
  7140. }
  7141. [data-testid=v2-marketing-page-hero-header]::after {
  7142. content: "";
  7143. z-index: 0;
  7144. position: absolute;
  7145. inset: 0;
  7146. width: 100%;
  7147. height: 100%;
  7148. background: linear-gradient(135deg, hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%) 48%, hsl(269, calc(var(--saturation-factor, 1) * 52.7%), 52.7%) 55%);
  7149. -webkit-mask: radial-gradient(circle at center, black 0%, transparent 45%);
  7150. mask: radial-gradient(circle at center, black 0%, transparent 45%);
  7151. }
  7152. [data-testid=v2-marketing-page-hero-header] [data-text-variant="text-lg/normal"] {
  7153. font-size: 16px;
  7154. line-height: 20px;
  7155. }
  7156.  
  7157. .premiumTierCardsContainer_e3c13b {
  7158. background: linear-gradient(137.42deg, #00d5ff 0%, #d0266f 40%, #b9b500 100%);
  7159. background-size: 300% 300%;
  7160. animation: nitroGradient 20s ease infinite;
  7161. max-width: unset;
  7162. margin-bottom: 0;
  7163. padding-bottom: 4em;
  7164. padding-top: 4em;
  7165. }
  7166. .premiumTierCardsContainer_e3c13b:has(.banner__4cbda) {
  7167. padding-top: 0;
  7168. }
  7169.  
  7170. .banner__4cbda {
  7171. border-radius: 0;
  7172. max-width: unset;
  7173. }
  7174.  
  7175. .premiumCards__1b3a9 {
  7176. display: flex;
  7177. justify-content: center;
  7178. }
  7179.  
  7180. .card__48184 {
  7181. max-width: 300px;
  7182. background: rgba(255, 255, 255, 0.0588235294);
  7183. border-radius: 3px;
  7184. padding: 20px;
  7185. margin: 10px;
  7186. }
  7187. .card__48184 svg.title__223b8 {
  7188. color: #1b1b1b;
  7189. position: absolute;
  7190. right: 20px;
  7191. }
  7192. .card__48184 .price__12d41 {
  7193. margin: 8px 0 24px 0;
  7194. line-height: 33px;
  7195. }
  7196. .card__48184 .price__300d9 {
  7197. font-size: 24px;
  7198. line-height: 28px;
  7199. font-weight: 600;
  7200. }
  7201. .card__48184 .item__4b324 {
  7202. margin-left: 28px;
  7203. margin-bottom: 5px;
  7204. }
  7205. .card__48184 .item__4b324 .icon_c4178d {
  7206. height: 18px;
  7207. width: 18px;
  7208. }
  7209. .card__48184 .item__4b324 [data-text-variant="text-md/normal"] {
  7210. font-size: 12px;
  7211. }
  7212. .card__48184 .wumpusImageContainer__5990c {
  7213. position: absolute;
  7214. width: 30%;
  7215. top: 50px;
  7216. right: 0;
  7217. border-top-right-radius: 16px;
  7218. overflow: hidden;
  7219. }
  7220. .card__48184 .shinyButton_fc8363 {
  7221. color: #fff;
  7222. background: #1b1b1b;
  7223. border-radius: 50px;
  7224. height: 36px;
  7225. font-size: 12px;
  7226. font-weight: 600;
  7227. border: none;
  7228. transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  7229. }
  7230. .card__48184 .shinyButton_fc8363:hover {
  7231. color: #1b1b1b;
  7232. background: #fff;
  7233. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  7234. }
  7235.  
  7236. .whatsNewSection_e83a8d {
  7237. position: relative;
  7238. gap: 64px;
  7239. padding-top: 64px;
  7240. padding-bottom: 64px;
  7241. margin-bottom: 0;
  7242. background-image: var(--custom-premium-colors-premium-gradient-tier-2-transparent);
  7243. border-radius: 0;
  7244. }
  7245.  
  7246. #app-mount .card_e97590 {
  7247. transform: none;
  7248. transition: filter 0.2s ease;
  7249. border-radius: 3px;
  7250. padding: 20px;
  7251. background: linear-gradient(137.42deg, #163bba 0%, #ae4d4d 100%);
  7252. overflow: hidden;
  7253. }
  7254. #app-mount .card_e97590:hover .cardImage__9da5b {
  7255. margin: 50px;
  7256. width: calc(100% - 100px);
  7257. border-radius: 0;
  7258. }
  7259.  
  7260. #app-mount .cardContainer__912d9 .noFlipCardContainer_e2d2c1:nth-child(2n) .card_e97590 {
  7261. background: linear-gradient(137.42deg, #ce158b 0%, #e36d23 100%);
  7262. }
  7263. #app-mount .cardContainer__912d9 .noFlipCardContainer_e2d2c1:nth-child(2n) .card_e97590 .cardDescription__46c9d {
  7264. background: linear-gradient(137.42deg, #ce158b 0%, #e36d23 100%);
  7265. }
  7266.  
  7267. .cardDescription__46c9d {
  7268. padding: 20px;
  7269. border-radius: 3px;
  7270. background: linear-gradient(137.42deg, #163bba 0%, #ae4d4d 100%);
  7271. filter: hue-rotate(30deg);
  7272. }
  7273.  
  7274. #app-mount .cardImage__9da5b {
  7275. z-index: 21;
  7276. border-radius: 0;
  7277. }
  7278.  
  7279. .perksContainer_e3fd5b {
  7280. background: #fff;
  7281. margin: 0;
  7282. max-width: 100%;
  7283. display: block;
  7284. padding-top: 4em;
  7285. }
  7286. .perksContainer_e3fd5b .defaultColor__87d87 {
  7287. color: #1b1b1b;
  7288. }
  7289.  
  7290. .perkCard__6fe60 {
  7291. background: none;
  7292. border-radius: 0;
  7293. padding: 8px 16px 10px 16px;
  7294. justify-content: flex-start;
  7295. }
  7296. .perkCard__6fe60 img {
  7297. margin-bottom: 10px;
  7298. order: -1;
  7299. -o-object-fit: scale-down;
  7300. object-fit: scale-down;
  7301. height: 150px;
  7302. width: 100%;
  7303. }
  7304. .perkCard__6fe60 h2 {
  7305. margin: 0;
  7306. font-size: 18px;
  7307. font-weight: 700;
  7308. line-height: 20px;
  7309. color: #1b1b1b;
  7310. }
  7311. .perkCard__6fe60 [data-text-variant="text-sm/normal"] {
  7312. padding: 0;
  7313. font-size: 13px;
  7314. line-height: 18px;
  7315. font-weight: 700;
  7316. color: #1b1b1b;
  7317. }
  7318.  
  7319. .planComparisonTableContainer__5e152 {
  7320. padding: 24px;
  7321. max-width: unset;
  7322. width: 100%;
  7323. padding: 5em;
  7324. background: linear-gradient(137.42deg, #3209d9 0%, #0b5f42 60%, #b0d909 100%);
  7325. background-size: 300% 300%;
  7326. animation: nitroGradient 20s ease infinite;
  7327. }
  7328. .planComparisonTableContainer__5e152 [class*=titleText] {
  7329. font-size: 30px;
  7330. line-height: 34px;
  7331. font-weight: 800;
  7332. letter-spacing: 0;
  7333. margin-bottom: 6px;
  7334. margin-top: 8px;
  7335. text-transform: capitalize;
  7336. text-align: start;
  7337. }
  7338. .planComparisonTableContainer__5e152 [class*=headerRow] h2 {
  7339. font-size: 16px;
  7340. line-height: 20px;
  7341. font-weight: 600;
  7342. }
  7343. .planComparisonTableContainer__5e152 [class*=headerRow] th {
  7344. display: flex;
  7345. align-items: start;
  7346. justify-content: center;
  7347. }
  7348. .planComparisonTableContainer__5e152 [class*=headerRow] [class*=headerLabelCell] {
  7349. align-items: center;
  7350. justify-content: left;
  7351. width: 25%;
  7352. max-width: 25%;
  7353. }
  7354. .planComparisonTableContainer__5e152 [class*=headerRow] [class*=headerCell] {
  7355. width: 37.5%;
  7356. }
  7357. .planComparisonTableContainer__5e152 [class*=labelCell] [data-text-variant="text-sm/normal"] {
  7358. font-size: 16px;
  7359. line-height: 20px;
  7360. font-weight: 600;
  7361. --text-normal: #ffffff7a;
  7362. }
  7363. .planComparisonTableContainer__5e152 [class^=row] {
  7364. height: unset;
  7365. min-height: 48px;
  7366. }
  7367. .planComparisonTableContainer__5e152 th[scope=row] {
  7368. padding: 4px;
  7369. width: 25%;
  7370. max-width: 25%;
  7371. }
  7372. .planComparisonTableContainer__5e152 td {
  7373. align-items: start;
  7374. width: 37.5%;
  7375. }
  7376. .planComparisonTableContainer__5e152 [class*=rowBottomBorder] {
  7377. width: 100%;
  7378. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  7379. }
  7380. .planComparisonTableContainer__5e152 [class*=tier2ColumnOuter] {
  7381. display: none;
  7382. }
  7383. .planComparisonTableContainer__5e152 [class*=closeIcon] {
  7384. color: rgba(255, 255, 255, 0.2);
  7385. }
  7386.  
  7387. .innerWrapper_c80bad {
  7388. background-image: linear-gradient(45deg, var(--guild-boosting-blue), var(--guild-boosting-purple));
  7389. border-radius: 4px;
  7390. box-shadow: var(--banner-shadow);
  7391. padding: 16px;
  7392. width: unset;
  7393. max-width: 438px;
  7394. }
  7395.  
  7396. #app-mount .contentRegion__0bec1 .contentRegionScroller__86c79:has(#nitro-server-boost-tab) {
  7397. padding-top: 0;
  7398. background: #000;
  7399. }
  7400.  
  7401. #nitro-server-boost-tab .background__0be22::after {
  7402. content: "";
  7403. z-index: 0;
  7404. position: absolute;
  7405. inset: 0 0 0 0;
  7406. margin: 0 auto;
  7407. width: 500px;
  7408. height: 250px;
  7409. background: linear-gradient(135deg, hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%) 48%, hsl(269, calc(var(--saturation-factor, 1) * 52.7%), 52.7%) 55%);
  7410. -webkit-mask: radial-gradient(circle at center, black 0%, transparent 45%);
  7411. mask: radial-gradient(circle at center, black 0%, transparent 45%);
  7412. }
  7413. #nitro-server-boost-tab .guildBoostGemWrapper__975b2 {
  7414. display: none;
  7415. }
  7416. #nitro-server-boost-tab .gradient_e94761 {
  7417. border-radius: 0;
  7418. background: none;
  7419. }
  7420. #nitro-server-boost-tab .gradient_e94761 .guildBoostGemWrapper__975b2,
  7421. #nitro-server-boost-tab .gradient_e94761 svg {
  7422. display: none;
  7423. }
  7424. #nitro-server-boost-tab .wrapper__18a49:has(.guildContainer__9d362) {
  7425. background: linear-gradient(137.42deg, #00d5ff 0%, #d0266f 40%, #b9b500 100%);
  7426. background-size: 300% 300%;
  7427. animation: nitroGradient 20s ease infinite;
  7428. max-width: unset;
  7429. margin-bottom: 0;
  7430. padding: 5em;
  7431. }
  7432. #nitro-server-boost-tab .guildContainer__9d362 {
  7433. background: rgba(255, 255, 255, 0.0588235294);
  7434. border-radius: 3px;
  7435. padding: 20px;
  7436. }
  7437. #nitro-server-boost-tab .guildContainer__9d362::before, #nitro-server-boost-tab .guildContainer__9d362::after {
  7438. display: none;
  7439. }
  7440. #nitro-server-boost-tab .guildContainer__9d362 .iconInactive__90d40 {
  7441. border-radius: 3px;
  7442. }
  7443. #nitro-server-boost-tab .guildContainer__9d362 [data-text-variant="text-lg/bold"] {
  7444. color: #fff;
  7445. font-size: 16px;
  7446. line-height: 20px;
  7447. font-weight: 600;
  7448. }
  7449. #nitro-server-boost-tab .guildContainer__9d362 [data-text-variant="text-sm/bold"] {
  7450. font-size: 12px;
  7451. font-weight: 400;
  7452. --text-muted: #fff;
  7453. }
  7454. #nitro-server-boost-tab .guildContainer__9d362 .separator_f8e077 {
  7455. --text-muted: #fff;
  7456. }
  7457. #nitro-server-boost-tab .guildContainer__9d362 .shinyButton_fc8363 {
  7458. color: #fff;
  7459. background: #1b1b1b;
  7460. border-radius: 50px;
  7461. height: 36px;
  7462. font-size: 12px;
  7463. font-weight: 600;
  7464. border: none;
  7465. transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  7466. }
  7467. #nitro-server-boost-tab .guildContainer__9d362 .shinyButton_fc8363:hover {
  7468. background: #fff;
  7469. color: #1b1b1b;
  7470. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  7471. }
  7472. #nitro-server-boost-tab .guildContainer__9d362 + .wrapper__0df00 {
  7473. background: none;
  7474. border: none;
  7475. justify-content: center;
  7476. }
  7477. #nitro-server-boost-tab .guildContainer__9d362 + .wrapper__0df00 [data-text-variant="text-sm/medium"] {
  7478. font-style: italic;
  7479. font-size: 12px;
  7480. font-weight: 500;
  7481. color: rgba(255, 255, 255, 0.5294117647);
  7482. }
  7483.  
  7484. .tierComparisonTable__3126f,
  7485. .tierComparisonTable_b4d962 {
  7486. padding: 24px;
  7487. margin-bottom: 0;
  7488. max-width: unset;
  7489. width: 100%;
  7490. padding: 5em;
  7491. background: linear-gradient(137.42deg, #3209d9 0%, #0b5f42 60%, #b0d909 100%);
  7492. background-size: 300% 300%;
  7493. animation: nitroGradient 20s ease infinite;
  7494. }
  7495. .tierComparisonTable__3126f .columnHeading__7e90b,
  7496. .tierComparisonTable_b4d962 .columnHeading__7e90b {
  7497. padding-bottom: 0;
  7498. }
  7499. .tierComparisonTable__3126f thead .tableRowHeading__2b8b8 h2,
  7500. .tierComparisonTable_b4d962 thead .tableRowHeading__2b8b8 h2 {
  7501. translate: 0 8px;
  7502. font-size: 16px;
  7503. line-height: 20px;
  7504. font-weight: 600;
  7505. }
  7506. .tierComparisonTable__3126f thead th,
  7507. .tierComparisonTable_b4d962 thead th {
  7508. justify-content: center;
  7509. text-align: left;
  7510. }
  7511. .tierComparisonTable__3126f tbody th,
  7512. .tierComparisonTable_b4d962 tbody th {
  7513. padding: 4px;
  7514. }
  7515. .tierComparisonTable__3126f .tableCellInner__3f5bb,
  7516. .tierComparisonTable_b4d962 .tableCellInner__3f5bb {
  7517. min-height: 48px;
  7518. }
  7519. .tierComparisonTable__3126f th .defaultColor__77578,
  7520. .tierComparisonTable_b4d962 th .defaultColor__77578 {
  7521. font-size: 16px;
  7522. line-height: 20px;
  7523. font-weight: 600;
  7524. color: rgba(255, 255, 255, 0.4784313725);
  7525. }
  7526. .tierComparisonTable__3126f td.tableCell__77206,
  7527. .tierComparisonTable_b4d962 td.tableCell__77206 {
  7528. text-align: left;
  7529. padding: 4px;
  7530. }
  7531. .tierComparisonTable__3126f .tableCell__77206,
  7532. .tierComparisonTable_b4d962 .tableCell__77206 {
  7533. padding-top: 0;
  7534. padding-bottom: 0;
  7535. position: relative;
  7536. }
  7537. .tierComparisonTable__3126f .booleanValueIcon__864e1,
  7538. .tierComparisonTable_b4d962 .booleanValueIcon__864e1 {
  7539. margin-left: 0;
  7540. }
  7541. .tierComparisonTable__3126f .booleanValueIcon__864e1:has([d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z"]),
  7542. .tierComparisonTable_b4d962 .booleanValueIcon__864e1:has([d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z"]) {
  7543. color: rgba(255, 255, 255, 0.4784313725);
  7544. }
  7545.  
  7546. .wrapper__26ed7 {
  7547. border-radius: 0;
  7548. margin-bottom: 0;
  7549. padding: 4em 5em;
  7550. }
  7551.  
  7552. .card__67edb {
  7553. background: rgba(255, 255, 255, 0.0588235294);
  7554. border-radius: 3px;
  7555. padding: 20px;
  7556. --text-normal: #fff;
  7557. }
  7558.  
  7559. .wrapper_cf13f4 {
  7560. border-radius: 0;
  7561. background: none;
  7562. padding: 4em 5em;
  7563. }
  7564.  
  7565. .list__80e1b {
  7566. border-top: none;
  7567. }
  7568.  
  7569. .listItem_df7f03 {
  7570. border-bottom: thin solid var(--background-modifier-accent-dark);
  7571. }
  7572.  
  7573. .question_b59602 {
  7574. font-size: 16px;
  7575. line-height: 20px;
  7576. font-weight: 700;
  7577. }
  7578.  
  7579. .answer_a88bb8 {
  7580. font-size: 13px;
  7581. line-height: 18px;
  7582. font-weight: 400;
  7583. --text-normal: var(--text-muted);
  7584. }
  7585.  
  7586. .perkPreviewImage__0a7e2 {
  7587. background: var(--contextmenu-gradient);
  7588. padding: 8px 5px 8px 5px;
  7589. border-radius: 0;
  7590. box-shadow: 3px 3px 5px -3px #000;
  7591. }
  7592.  
  7593. #subscriptions-tab .h1__90460.title__3e421.defaultColor_d757c2.sectionTitle__1605a {
  7594. position: sticky;
  7595. display: flex;
  7596. align-items: center;
  7597. top: 0;
  7598. padding: 32px 24px;
  7599. margin-left: -24px;
  7600. z-index: 10;
  7601. transform: translateY(calc(var(--header-padding) * -1 + 8.5px + 18px));
  7602. background: linear-gradient(to bottom, var(--background-tertiary) calc(100% - 24px), transparent 100%);
  7603. font-size: 22px;
  7604. line-height: 24px;
  7605. font-weight: 700;
  7606. margin-bottom: 0;
  7607. }
  7608. #subscriptions-tab .card__4dc22 {
  7609. padding: 8px 24px 10px 16px;
  7610. margin-top: 0;
  7611. margin-right: 8px;
  7612. border-radius: 2px;
  7613. }
  7614. #subscriptions-tab .card__4dc22[class*=noItemsCard] {
  7615. background: var(--background-accent);
  7616. width: -moz-fit-content;
  7617. width: fit-content;
  7618. }
  7619. #subscriptions-tab .card__4dc22 [class*=noItemsIcon] {
  7620. background: #fff;
  7621. }
  7622. #subscriptions-tab .card__4dc22 [class*=noItemsIcon].small__52213 {
  7623. width: 20px;
  7624. height: 20px;
  7625. }
  7626. #subscriptions-tab .card__4dc22 .gameIcon__90c32 {
  7627. color: var(--background-accent);
  7628. }
  7629. #subscriptions-tab .card__4dc22 [class*=cardText] {
  7630. font-size: 14px;
  7631. font-weight: 600;
  7632. color: #fff;
  7633. line-height: 20px;
  7634. }
  7635. #subscriptions-tab .sectionAccountCredit__8ffc1,
  7636. #subscriptions-tab .subscriptionDetails_f73fb4 {
  7637. padding-bottom: 10px;
  7638. margin-bottom: 10px;
  7639. border-bottom: thin solid var(--background-modifier-accent-dark);
  7640. }
  7641.  
  7642. .accountCreditTitle__51351 {
  7643. color: var(--text-muted);
  7644. font-size: 14px;
  7645. letter-spacing: 0.5px;
  7646. line-height: 36px;
  7647. margin-bottom: 0;
  7648. text-transform: uppercase;
  7649. }
  7650.  
  7651. .accountCreditDescription__59ab8 {
  7652. font-size: 13px;
  7653. line-height: 18px;
  7654. font-weight: 400;
  7655. color: var(--text-muted);
  7656. letter-spacing: 0;
  7657. margin-bottom: 10px;
  7658. }
  7659.  
  7660. #library-inventory-tab form .flex_f5fbb7 {
  7661. align-items: center;
  7662. }
  7663. #library-inventory-tab .inputWrapper__934f5 {
  7664. margin-right: 10px;
  7665. }
  7666. #library-inventory-tab .divider_a2339a {
  7667. margin: 10px 0;
  7668. }
  7669. #library-inventory-tab [data-text-variant="heading-md/semibold"] {
  7670. text-transform: capitalize;
  7671. color: #fff;
  7672. font-size: 16px;
  7673. line-height: 20px;
  7674. font-weight: 600;
  7675. letter-spacing: 0;
  7676. padding-left: 8px;
  7677. }
  7678. #library-inventory-tab .emptyStateImage__3e0a5 {
  7679. margin-top: 0;
  7680. }
  7681.  
  7682. #billing-tab h2.title__3e421 + .footer_bfb4b9 {
  7683. margin-top: 0;
  7684. }
  7685. #billing-tab .subText__70c8d {
  7686. margin-top: 10px;
  7687. }
  7688. #billing-tab .paymentHistory__889da {
  7689. margin-top: 24px;
  7690. }
  7691. #billing-tab .paymentHistory__889da h2.title__3e421 {
  7692. margin-bottom: 0;
  7693. text-transform: capitalize;
  7694. color: #fff;
  7695. font-size: 16px;
  7696. line-height: 20px;
  7697. font-weight: 600;
  7698. letter-spacing: 0;
  7699. padding-top: 8px;
  7700. padding-left: 8px;
  7701. display: flex;
  7702. align-items: center;
  7703. }
  7704. #billing-tab .paymentHistory__889da h2.title__3e421::after {
  7705. content: "";
  7706. height: 2px;
  7707. margin: 0 10px 0 10px;
  7708. background: var(--background-modifier-accent-compat);
  7709. display: flex;
  7710. flex-grow: 1;
  7711. }
  7712. #billing-tab .paymentHistory__889da .paymentRowHeader__930f3 {
  7713. display: none;
  7714. }
  7715. #billing-tab .paymentHistory__889da .paymentPane__9cf01 {
  7716. background: none;
  7717. border-radius: 0;
  7718. }
  7719. #billing-tab .paymentHistory__889da .paymentRow__1bb7a {
  7720. border: none;
  7721. }
  7722. #billing-tab .paymentHistory__889da .paginator_e620d3 {
  7723. background: none;
  7724. }
  7725. #billing-tab .paymentHistory__889da .scrollerBase_dc3aa9 {
  7726. overflow: auto !important;
  7727. border: none;
  7728. }
  7729. #billing-tab .paymentHistory__889da .payment__7d702 {
  7730. background: none;
  7731. border: none;
  7732. padding: 6px 8px;
  7733. min-height: 58px;
  7734. }
  7735. #billing-tab .paymentHistory__889da .payment__7d702.hoverablePayment__3ea24:hover, #billing-tab .paymentHistory__889da .payment__7d702:has(.expandedInfo__47bad) {
  7736. background: var(--background-accent);
  7737. transition: background 0.2s linear;
  7738. }
  7739. #billing-tab .paymentHistory__889da .payment__7d702 .summaryInfo_b57acb {
  7740. padding: 0;
  7741. }
  7742. #billing-tab .paymentHistory__889da .payment__7d702 .date_ad0cb9 {
  7743. position: absolute;
  7744. left: 122px;
  7745. margin-top: 20px;
  7746. display: flex;
  7747. color: var(--text-muted);
  7748. font-size: 12px;
  7749. line-height: 22px;
  7750. letter-spacing: 0.5px;
  7751. text-transform: uppercase;
  7752. font-weight: 700;
  7753. display: flex;
  7754. align-items: center;
  7755. }
  7756. #billing-tab .paymentHistory__889da .payment__7d702 .date_ad0cb9::before {
  7757. content: "";
  7758. display: block;
  7759. width: 16px;
  7760. height: 16px;
  7761. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/clock.svg);
  7762. mask: url(https://maendisease.github.io/Steam/illustrations/icns/clock.svg);
  7763. background: var(--text-muted);
  7764. margin-right: 4px;
  7765. }
  7766. #billing-tab .paymentHistory__889da .gameIcon__90c32 {
  7767. border-radius: 0;
  7768. margin-right: 16px;
  7769. }
  7770. #billing-tab .paymentHistory__889da .xsmall_b118ce {
  7771. height: 45px;
  7772. width: 98px;
  7773. }
  7774. #billing-tab .paymentHistory__889da .description_be3171 {
  7775. color: #fff;
  7776. font-weight: 400;
  7777. line-height: 20px;
  7778. }
  7779. #billing-tab .paymentHistory__889da .description_be3171 > div:not(.gameIcon__90c32),
  7780. #billing-tab .paymentHistory__889da .description_be3171 > svg {
  7781. margin-top: -19px;
  7782. }
  7783. #billing-tab .paymentHistory__889da .giftIcon__9d0ce {
  7784. height: 14px;
  7785. width: 14px;
  7786. color: var(--gpColor-Yellow);
  7787. opacity: 1;
  7788. margin-left: 4px;
  7789. }
  7790. #billing-tab .paymentHistory__889da svg.expand__12c96 {
  7791. margin: 8px;
  7792. color: var(--brand-experiment);
  7793. }
  7794. #billing-tab .codeRedemptionRedirect_bc7f36 {
  7795. padding: 0;
  7796. background: none;
  7797. border: none;
  7798. font-size: 13px;
  7799. line-height: 18px;
  7800. font-weight: 400;
  7801. color: var(--text-muted);
  7802. letter-spacing: 0;
  7803. }
  7804. #billing-tab .expandedInfo__47bad {
  7805. background: var(--background-tertiary);
  7806. padding: 24px;
  7807. margin: 6px 0 0 0;
  7808. padding-top: 24px;
  7809. border-radius: 0;
  7810. }
  7811. #billing-tab .paymentText_deeaf4 {
  7812. color: #fff;
  7813. }
  7814. #billing-tab .paymentDetail_c96709 {
  7815. margin: 0;
  7816. padding: 10px 0;
  7817. border-bottom: thin solid var(--background-modifier-accent-dark);
  7818. }
  7819. #billing-tab .paymentDetail_c96709:first-child {
  7820. margin-top: 10px;
  7821. border-top: thin solid var(--background-modifier-accent-dark);
  7822. }
  7823. #billing-tab .paymentDetail_c96709 > div {
  7824. gap: 10px;
  7825. justify-content: left;
  7826. }
  7827. #billing-tab .paymentDetail_c96709 > div div:first-child {
  7828. font-size: 14px;
  7829. line-height: 18px;
  7830. color: var(--contextmenu-text);
  7831. }
  7832. #billing-tab .paymentDetail_c96709 > div div:last-child {
  7833. font-size: 12px;
  7834. line-height: 19px;
  7835. font-weight: 400;
  7836. color: var(--text-muted);
  7837. }
  7838. #billing-tab .paymentHeader__50c05 {
  7839. border: none;
  7840. padding: 0;
  7841. margin: 0;
  7842. color: var(--text-muted);
  7843. font-size: 14px;
  7844. letter-spacing: 0.5px;
  7845. line-height: 36px;
  7846. margin-bottom: 0;
  7847. text-transform: uppercase;
  7848. }
  7849. #billing-tab .paymentText_deeaf4 > div:not([class]) {
  7850. font-size: 13px;
  7851. line-height: 18px;
  7852. font-weight: 400;
  7853. color: var(--text-muted);
  7854. letter-spacing: 0;
  7855. margin-bottom: 10px;
  7856. }
  7857. #billing-tab .refundSubHeader__3623a {
  7858. color: var(--text-muted);
  7859. font-size: 14px;
  7860. letter-spacing: 0.5px;
  7861. line-height: 36px;
  7862. margin: 0;
  7863. text-transform: uppercase;
  7864. }
  7865. #billing-tab .refundIconContainer__28442 {
  7866. font-size: 13px;
  7867. line-height: 18px;
  7868. font-weight: 400;
  7869. color: var(--text-muted);
  7870. letter-spacing: 0;
  7871. }
  7872. #billing-tab .refundActions_bdaec5 {
  7873. font-size: 13px;
  7874. line-height: 18px;
  7875. font-weight: 400;
  7876. letter-spacing: 0;
  7877. }
  7878.  
  7879. #appearance-tab .children_b15c64 > [data-text-variant="text-md/normal"]:last-child {
  7880. padding: 0;
  7881. background: none;
  7882. border: none;
  7883. font-size: 13px;
  7884. line-height: 18px;
  7885. font-weight: 400;
  7886. color: var(--text-muted);
  7887. letter-spacing: 0;
  7888. margin-top: 40px;
  7889. }
  7890.  
  7891. .presets__14d08.basicThemeSelectors_f6c054 {
  7892. padding: 6px;
  7893. background: var(--darker-grey);
  7894. box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.6666666667);
  7895. border-radius: 2px;
  7896. margin-bottom: 10px;
  7897. display: grid;
  7898. grid-template-columns: repeat(3, minmax(0, 1fr));
  7899. grid-gap: 6px;
  7900. }
  7901. .presets__14d08.basicThemeSelectors_f6c054 .themeSelectionContainer__575f5 {
  7902. height: -moz-fit-content;
  7903. height: fit-content;
  7904. width: 100%;
  7905. }
  7906. .presets__14d08.basicThemeSelectors_f6c054 .themeSelectionContainer__575f5 .selectionCircle_f4288e,
  7907. .presets__14d08.basicThemeSelectors_f6c054 .themeSelectionContainer__575f5 .iconWrapper__1fbd0 {
  7908. display: none;
  7909. }
  7910. .presets__14d08.basicThemeSelectors_f6c054 .themeSelectionContainer__575f5 .themeSelection__6014a {
  7911. padding: 6px;
  7912. box-shadow: none;
  7913. background: none;
  7914. justify-content: center;
  7915. display: flex;
  7916. transition: background 0.18s ease-in-out;
  7917. }
  7918. .presets__14d08.basicThemeSelectors_f6c054 .themeSelectionContainer__575f5 .themeSelection__6014a[aria-label]::after {
  7919. content: attr(aria-label);
  7920. font-size: 14px;
  7921. line-height: 18px;
  7922. font-weight: 400;
  7923. color: var(--text-lighter);
  7924. }
  7925. .presets__14d08.basicThemeSelectors_f6c054 .themeSelectionContainer__575f5 .themeSelection__6014a:hover {
  7926. background: hsl(calc(var(--accent-hue) + 19), calc(var(--saturation-factor, 1) * 9.7%), 22.2%);
  7927. }
  7928. .presets__14d08.basicThemeSelectors_f6c054 .themeSelectionContainer__575f5 .themeSelection__6014a.selected_e5f907 {
  7929. background: var(--topbar-item-selected);
  7930. }
  7931. .presets__14d08.basicThemeSelectors_f6c054 .themeSelectionContainer__575f5 .themeSelection__6014a.selected_e5f907[aria-label]::after {
  7932. color: #fff;
  7933. }
  7934.  
  7935. .featureBorder_a44f20 {
  7936. border-radius: 0;
  7937. margin: 0;
  7938. }
  7939. .featureBorder_a44f20 .background__097ec {
  7940. padding: 10px 0 0 0;
  7941. margin: 0 -2px -2px -2px;
  7942. background: var(--background-tertiary);
  7943. }
  7944. .featureBorder_a44f20 .background__097ec .header_a6f6dd .headings__6a24e {
  7945. gap: 0;
  7946. }
  7947. .featureBorder_a44f20 .background__097ec .header_a6f6dd [data-text-variant="text-md/medium"] {
  7948. color: var(--text-muted);
  7949. font-size: 14px;
  7950. font-weight: 700;
  7951. letter-spacing: 0.5px;
  7952. line-height: 36px;
  7953. margin-bottom: 0;
  7954. text-transform: uppercase;
  7955. }
  7956. .featureBorder_a44f20 .background__097ec .header_a6f6dd [data-text-variant="text-sm/normal"] {
  7957. font-size: 13px;
  7958. line-height: 18px;
  7959. font-weight: 400;
  7960. color: var(--text-muted);
  7961. letter-spacing: 0;
  7962. }
  7963.  
  7964. .presets__14d08 {
  7965. margin-top: 10px;
  7966. gap: 10px;
  7967. }
  7968.  
  7969. .themeSelection__6014a {
  7970. border-radius: 2px;
  7971. }
  7972.  
  7973. #accessibility-tab .preview_a8dd8d {
  7974. padding: 0;
  7975. border-radius: 0;
  7976. border: none;
  7977. }
  7978. #accessibility-tab .previewMessage__1075c {
  7979. padding: 8px;
  7980. border-radius: 0;
  7981. margin-top: 16px;
  7982. background: none;
  7983. }
  7984. #accessibility-tab .children_b15c64 > .divider__2bbbc.marginBottom20__64605:nth-last-child(2) {
  7985. margin-bottom: 0;
  7986. }
  7987. #accessibility-tab .children_b15c64 > [data-text-variant="text-md/normal"]:last-child {
  7988. padding: 0;
  7989. background: none;
  7990. border: none;
  7991. font-size: 13px;
  7992. line-height: 18px;
  7993. font-weight: 400;
  7994. color: var(--text-muted);
  7995. letter-spacing: 0;
  7996. margin-top: 40px;
  7997. }
  7998.  
  7999. #voice-\&-video-tab .micTest__30846 {
  8000. margin-top: 0;
  8001. gap: 10px;
  8002. }
  8003. #voice-\&-video-tab .micTest__30846 button {
  8004. order: 1;
  8005. margin: 0;
  8006. }
  8007. #voice-\&-video-tab .micTest__30846 .wrapper__61220 {
  8008. border-radius: 50px;
  8009. overflow: hidden;
  8010. height: 8px;
  8011. }
  8012. #voice-\&-video-tab .micTest__30846 .progress__2cc1d {
  8013. background: var(--background-modifier-accent-dark);
  8014. }
  8015. #voice-\&-video-tab .micTest__30846 .notches__065e9 {
  8016. display: none;
  8017. }
  8018. #voice-\&-video-tab .micTest__30846 .micTestCaption__6f94a {
  8019. left: 0;
  8020. }
  8021. #voice-\&-video-tab [role=radiogroup]:has(.item_b7fb7e)[aria-orientation=vertical] {
  8022. flex-direction: row;
  8023. }
  8024. #voice-\&-video-tab [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e {
  8025. width: 100%;
  8026. }
  8027. #voice-\&-video-tab [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e [data-text-variant="text-md/medium"] {
  8028. text-align: center;
  8029. }
  8030.  
  8031. .newTextBadge_da2cca {
  8032. border: 3px solid var(--background-tertiary);
  8033. }
  8034.  
  8035. #text-\&-images-tab [role=radiogroup]:has(.item_b7fb7e)[aria-orientation=vertical] {
  8036. flex-direction: row;
  8037. }
  8038. #text-\&-images-tab [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e {
  8039. width: 100%;
  8040. }
  8041. #text-\&-images-tab [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e [data-text-variant="text-md/medium"] {
  8042. text-align: center;
  8043. }
  8044.  
  8045. #notifications-tab [role=radiogroup]:has(.item_b7fb7e)[aria-orientation=vertical] {
  8046. flex-direction: row;
  8047. }
  8048. #notifications-tab [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e {
  8049. width: 100%;
  8050. }
  8051. #notifications-tab [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e [data-text-variant="text-md/medium"] {
  8052. text-align: center;
  8053. }
  8054. #notifications-tab .container_c52416:has(+ .container_c52416.soundRow__20a10) {
  8055. margin-bottom: 7px;
  8056. }
  8057. #notifications-tab .container_c52416.soundRow__20a10 {
  8058. margin-bottom: 7px;
  8059. }
  8060. #notifications-tab .container_c52416.soundRow__20a10 .divider__2bbbc {
  8061. margin-top: 6px;
  8062. }
  8063. #notifications-tab .container_c52416.soundRow__20a10 .title__28a65 {
  8064. overflow: visible;
  8065. }
  8066. #notifications-tab .container_c52416.soundRow__20a10 .control_f6cce7 {
  8067. order: -1;
  8068. margin-right: 6px;
  8069. }
  8070. #notifications-tab .container_c52416.soundRow__20a10 .soundName__48bd4 {
  8071. margin-right: auto;
  8072. }
  8073. #notifications-tab .container_c52416.soundRow__20a10 .soundIcon_ab332f {
  8074. opacity: 1;
  8075. background: var(--btn-grey);
  8076. margin-right: 4px;
  8077. height: 36px;
  8078. width: 36px;
  8079. border-radius: 2px;
  8080. color: var(--brand-experiment);
  8081. justify-content: center;
  8082. align-items: center;
  8083. display: flex;
  8084. transition-property: background, box-shadow;
  8085. transition-duration: 0.2s;
  8086. transition-timing-function: ease-out;
  8087. }
  8088. #notifications-tab .container_c52416.soundRow__20a10 .soundIcon_ab332f:hover {
  8089. background: var(--btn-grey-hover);
  8090. box-shadow: var(--btn-grey-boxshadow);
  8091. }
  8092. #notifications-tab .container_c52416.soundRow__20a10 .soundIcon_ab332f .icon_dfe65c {
  8093. width: 18px;
  8094. height: 18px;
  8095. }
  8096.  
  8097. .keybindGroup__80beb .switch_bc40ac {
  8098. margin-top: 46px;
  8099. margin-left: 0;
  8100. padding-top: 0;
  8101. }
  8102.  
  8103. .removeKeybind_f86f75 {
  8104. opacity: 1;
  8105. top: 10px;
  8106. right: 4px;
  8107. border-radius: 2px;
  8108. }
  8109.  
  8110. #game-activity-tab .children_b15c64 {
  8111. display: flex;
  8112. flex-wrap: wrap;
  8113. flex-direction: row;
  8114. }
  8115. #game-activity-tab .children_b15c64 > .marginTop40__2b1fe {
  8116. flex-basis: 100%;
  8117. }
  8118. #game-activity-tab .activeGame__99516 {
  8119. padding: 8px 24px 10px 16px;
  8120. margin-right: 8px;
  8121. border-radius: 2px;
  8122. width: -moz-fit-content;
  8123. width: fit-content;
  8124. max-width: calc(100% - 8px - 20px - 12px);
  8125. }
  8126. #game-activity-tab .activeGame__99516.notDetected__2a0c9 {
  8127. background: var(--background-accent);
  8128. width: -moz-fit-content;
  8129. width: fit-content;
  8130. }
  8131. #game-activity-tab .activeGame__99516::before {
  8132. content: "";
  8133. display: block;
  8134. width: 20px;
  8135. height: 20px;
  8136. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/storage.svg);
  8137. mask: url(https://maendisease.github.io/Steam/illustrations/icns/storage.svg);
  8138. background: #fff;
  8139. margin-right: 12px;
  8140. }
  8141. #game-activity-tab .activeGame__99516 .gameNameLastPlayed__1f167 {
  8142. max-width: calc(var(--settingsmodalwidth) - 196px - 200px);
  8143. }
  8144. #game-activity-tab .activeGame__99516 .gameName_aeeab5,
  8145. #game-activity-tab .activeGame__99516 .lastPlayed_accc56 {
  8146. font-size: 14px;
  8147. font-weight: 600;
  8148. color: #fff;
  8149. line-height: 20px;
  8150. }
  8151. #game-activity-tab .activeGame__99516 .lastPlayed_accc56 {
  8152. height: 20px;
  8153. overflow: hidden;
  8154. }
  8155. #game-activity-tab .activeGame__99516 .default_cae228 {
  8156. transform: translateY(-107%);
  8157. }
  8158. #game-activity-tab .activeGame__99516 .lastPlayed_accc56,
  8159. #game-activity-tab .activeGame__99516 .hoverRoll__041cb,
  8160. #game-activity-tab .activeGame__99516 .hovered__243e5,
  8161. #game-activity-tab .activeGame__99516 .default_cae228 {
  8162. width: -moz-fit-content;
  8163. width: fit-content;
  8164. }
  8165. #game-activity-tab .activeGame__99516 .hovered__243e5 {
  8166. position: relative;
  8167. max-width: calc(var(--settingsmodalwidth) - 196px - 200px);
  8168. }
  8169. #game-activity-tab .nowPlayingAdd__7caf1 {
  8170. margin: 0;
  8171. font-size: 0;
  8172. }
  8173. #game-activity-tab .nowPlayingAdd__7caf1 button {
  8174. padding: 0;
  8175. }
  8176. #game-activity-tab .nowPlayingAdd__7caf1 button .contents_fb6220 {
  8177. display: none;
  8178. }
  8179. #game-activity-tab .nowPlayingAdd__7caf1 button::before {
  8180. content: "";
  8181. display: block;
  8182. width: 20px;
  8183. height: 20px;
  8184. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/circleplus.svg);
  8185. mask: url(https://maendisease.github.io/Steam/illustrations/icns/circleplus.svg);
  8186. background: var(--background-accent-hover);
  8187. margin: 4px;
  8188. }
  8189. #game-activity-tab .nowPlayingAdd__7caf1 button:hover::before {
  8190. background: #fff;
  8191. }
  8192. #game-activity-tab :root {
  8193. counter-reset: gamesCount;
  8194. }
  8195. #game-activity-tab .marginTop40__2b1fe {
  8196. display: flex;
  8197. flex-flow: row wrap;
  8198. margin-top: 24px;
  8199. }
  8200. #game-activity-tab .marginTop40__2b1fe h3 {
  8201. order: -2;
  8202. text-transform: capitalize;
  8203. color: #fff;
  8204. font-size: 16px;
  8205. line-height: 20px;
  8206. font-weight: 600;
  8207. letter-spacing: 0;
  8208. padding-top: 8px;
  8209. padding-left: 8px;
  8210. }
  8211. #game-activity-tab .marginTop40__2b1fe:before {
  8212. content: "";
  8213. height: 2px;
  8214. margin: 16px 10px 0 10px;
  8215. background: var(--background-modifier-accent-compat);
  8216. display: flex;
  8217. flex-grow: 1;
  8218. }
  8219. #game-activity-tab .marginTop40__2b1fe:after {
  8220. content: counter(gamesCount);
  8221. animation: game-activity-tabCounter 1s linear infinite forwards;
  8222. color: var(--text-muted);
  8223. font-size: 16px;
  8224. line-height: 20px;
  8225. margin-left: 8px;
  8226. font-weight: 600;
  8227. order: -1;
  8228. padding-top: 8px;
  8229. }
  8230. #game-activity-tab .marginTop40__2b1fe .game__19f4b {
  8231. counter-increment: gamesCount;
  8232. flex-basis: 100%;
  8233. padding: 6px 8px;
  8234. height: 58px;
  8235. box-shadow: none;
  8236. }
  8237. #game-activity-tab .marginTop40__2b1fe .game__19f4b.card_dc88cd:before {
  8238. display: none;
  8239. }
  8240. #game-activity-tab .marginTop40__2b1fe .game__19f4b:hover {
  8241. background: var(--background-accent);
  8242. transition: background 0.2s linear;
  8243. }
  8244. #game-activity-tab .marginTop40__2b1fe .game__19f4b:hover .gameNameLastPlayed__1f167::after,
  8245. #game-activity-tab .marginTop40__2b1fe .game__19f4b:hover .removeGame_aa12f1 {
  8246. background-color: var(--background-accent-hover);
  8247. transition: background 0.2s linear;
  8248. }
  8249. #game-activity-tab .marginTop40__2b1fe .game__19f4b:hover:has(.removeGame_aa12f1:hover) .gameNameLastPlayed__1f167::after {
  8250. transition: background 0.2s linear;
  8251. background-color: var(--status-danger);
  8252. }
  8253. #game-activity-tab .marginTop40__2b1fe .game__19f4b .gameVerifiedIcon_bcd5fc {
  8254. height: 14px !important;
  8255. width: 14px !important;
  8256. margin-left: 4px;
  8257. }
  8258. #game-activity-tab .marginTop40__2b1fe .game__19f4b .gameNameLastPlayed__1f167::before {
  8259. content: "";
  8260. display: block;
  8261. position: absolute;
  8262. width: 98px;
  8263. height: 45px;
  8264. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/storage.svg);
  8265. mask: url(https://maendisease.github.io/Steam/illustrations/icns/storage.svg);
  8266. background-color: #fff;
  8267. -webkit-mask-repeat: no-repeat;
  8268. mask-repeat: no-repeat;
  8269. -webkit-mask-position: center;
  8270. mask-position: center;
  8271. -webkit-mask-size: 18px;
  8272. mask-size: 18px;
  8273. margin-right: 12px;
  8274. z-index: 1;
  8275. top: 0;
  8276. bottom: 0;
  8277. margin-top: auto;
  8278. margin-bottom: auto;
  8279. }
  8280. #game-activity-tab .marginTop40__2b1fe .game__19f4b .gameNameLastPlayed__1f167::after {
  8281. content: "";
  8282. display: block;
  8283. position: absolute;
  8284. height: 45px;
  8285. width: 98px;
  8286. background: var(--background-accent);
  8287. top: 0;
  8288. bottom: 0;
  8289. margin-top: auto;
  8290. margin-bottom: auto;
  8291. }
  8292. #game-activity-tab .marginTop40__2b1fe .game__19f4b .gameNameLastPlayed__1f167 > div {
  8293. margin-left: 114px;
  8294. }
  8295. #game-activity-tab .marginTop40__2b1fe .game__19f4b .gameNameLastPlayed__1f167 .gameNameInput_e25dd8 {
  8296. margin-left: 110px;
  8297. border: none;
  8298. border-radius: 2px;
  8299. }
  8300. #game-activity-tab .marginTop40__2b1fe .game__19f4b .gameNameLastPlayed__1f167 .gameNameInput_e25dd8:hover {
  8301. background: var(--background-accent-hover);
  8302. }
  8303. #game-activity-tab .marginTop40__2b1fe .game__19f4b .gameNameLastPlayed__1f167 .gameNameInput_e25dd8:focus, #game-activity-tab .marginTop40__2b1fe .game__19f4b .gameNameLastPlayed__1f167 .gameNameInput_e25dd8:focus-within {
  8304. background: var(--background-modifier-accent-dark);
  8305. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  8306. }
  8307. #game-activity-tab .marginTop40__2b1fe .game__19f4b .gameNameLastPlayed__1f167 .gameName_aeeab5 {
  8308. color: #fff;
  8309. font-weight: 400;
  8310. line-height: 20px;
  8311. }
  8312. #game-activity-tab .marginTop40__2b1fe .game__19f4b .gameNameLastPlayed__1f167 .lastPlayed_accc56 {
  8313. color: var(--text-muted);
  8314. font-size: 12px;
  8315. line-height: 22px;
  8316. letter-spacing: 0.5px;
  8317. text-transform: uppercase;
  8318. font-weight: 700;
  8319. display: flex;
  8320. align-items: center;
  8321. }
  8322. #game-activity-tab .marginTop40__2b1fe .game__19f4b .gameNameLastPlayed__1f167 .lastPlayed_accc56 strong {
  8323. color: var(--background-accent-hover);
  8324. font-weight: 700;
  8325. }
  8326. #game-activity-tab .marginTop40__2b1fe .game__19f4b .gameNameLastPlayed__1f167 .lastPlayed_accc56::before {
  8327. content: "";
  8328. display: block;
  8329. width: 16px;
  8330. height: 16px;
  8331. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/clock.svg);
  8332. mask: url(https://maendisease.github.io/Steam/illustrations/icns/clock.svg);
  8333. background: var(--text-muted);
  8334. margin-right: 4px;
  8335. }
  8336. @keyframes game-activity-tabCounter {
  8337. to {
  8338. content: counter(gamesCount);
  8339. }
  8340. }
  8341. #game-activity-tab .removeGame_aa12f1 {
  8342. opacity: 1;
  8343. position: relative;
  8344. top: unset;
  8345. right: unset;
  8346. box-shadow: none;
  8347. background-color: var(--background-accent);
  8348. border-radius: 2px;
  8349. margin: 8px;
  8350. flex-shrink: 0;
  8351. }
  8352.  
  8353. #app-mount .layer__2efaa ~ .layer__2efaa .contentColumnDefault_c66386#hypesquad-online-tab {
  8354. padding: 0 !important;
  8355. }
  8356.  
  8357. #app-mount .contentRegion__0bec1 .contentRegionScroller__86c79:has(#hypesquad-online-tab) {
  8358. padding-top: 0;
  8359. }
  8360.  
  8361. .contentRegionScroller__86c79:has(#hypesquad-online-tab) {
  8362. background: #000;
  8363. }
  8364.  
  8365. #hypesquad-online-tab .intro__5a71e {
  8366. z-index: 0;
  8367. position: relative;
  8368. margin-bottom: 0;
  8369. padding: 5em;
  8370. }
  8371. #hypesquad-online-tab .intro__5a71e [data-text-variant="text-lg/normal"] {
  8372. font-size: 16px;
  8373. line-height: 20px;
  8374. }
  8375. #hypesquad-online-tab .intro__5a71e::after {
  8376. --house-calc: calc(var(--house) + 54);
  8377. content: "";
  8378. z-index: -1;
  8379. position: absolute;
  8380. inset: 0;
  8381. width: 100%;
  8382. height: 100%;
  8383. background: linear-gradient(135deg, hsl(var(--house, 235), calc(var(--saturation-factor, 1) * 85.6%), 64.7%) 38%, hsl(var(--house-calc, 269), calc(var(--saturation-factor, 1) * 52.7%), 52.7%) 65%);
  8384. -webkit-mask: radial-gradient(circle at center, black 0%, transparent 35%);
  8385. mask: radial-gradient(circle at center, black 0%, transparent 35%);
  8386. }
  8387. #hypesquad-online-tab:has([class*=membershipDialogHouse3]) {
  8388. --house: 169;
  8389. }
  8390. #hypesquad-online-tab:has([class*=membershipDialogHouse2]) {
  8391. --house: 7;
  8392. }
  8393. #hypesquad-online-tab:has([class*=membershipDialogHouse1]) {
  8394. --house: 254;
  8395. }
  8396. #hypesquad-online-tab .membershipDialog-2wAdpQ {
  8397. border-radius: 0;
  8398. padding: 4em 5em;
  8399. margin-bottom: 0;
  8400. }
  8401. #hypesquad-online-tab .features-6z-RVS {
  8402. background: linear-gradient(137.42deg, #00d5ff 0%, #d0266f 40%, #b9b500 100%);
  8403. background-size: 300% 300%;
  8404. animation: nitroGradient 20s ease infinite;
  8405. max-width: unset;
  8406. margin: 0;
  8407. padding: 0 0 4em 0;
  8408. display: flex;
  8409. flex-wrap: wrap;
  8410. }
  8411. #hypesquad-online-tab .perksHeading-3fBj-Y {
  8412. display: none;
  8413. }
  8414. #hypesquad-online-tab .video-293uMj {
  8415. border-radius: 0;
  8416. flex-basis: 100%;
  8417. }
  8418. #hypesquad-online-tab .feature__78cce {
  8419. width: 100%;
  8420. background: rgba(255, 255, 255, 0.0588235294);
  8421. border-radius: 3px;
  8422. padding: 20px;
  8423. margin: 10px;
  8424. flex-direction: column;
  8425. flex: 0 1 calc(33.3% - 10px - 10px) !important;
  8426. display: flex;
  8427. border: none;
  8428. flex-wrap: nowrap;
  8429. }
  8430. #hypesquad-online-tab .feature__78cce .icon_f28e38 {
  8431. margin: 0;
  8432. }
  8433. #hypesquad-online-tab .title_d8b71c {
  8434. font-size: 24px;
  8435. line-height: 28px;
  8436. font-weight: 600;
  8437. margin-bottom: 10px;
  8438. text-align: center;
  8439. }
  8440. #hypesquad-online-tab .description__2f445 {
  8441. font-size: 12px;
  8442. line-height: 16px;
  8443. text-align: center;
  8444. }
  8445.  
  8446. #overview-tab [role=radiogroup]:has(.item_b7fb7e)[aria-orientation=vertical] {
  8447. flex-direction: row;
  8448. }
  8449. #overview-tab [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e {
  8450. width: 100%;
  8451. }
  8452. #overview-tab [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e [data-text-variant="text-md/medium"] {
  8453. text-align: center;
  8454. }
  8455.  
  8456. .clickable__8d5ac {
  8457. display: flex;
  8458. align-items: center;
  8459. }
  8460. .clickable__8d5ac .availabilityIndicator__32891 {
  8461. margin-top: 0;
  8462. border-radius: 0;
  8463. background: none;
  8464. box-shadow: 0 0 1px var(--text-muted);
  8465. align-items: center;
  8466. }
  8467. .clickable__8d5ac .availabilityIndicator__32891 .icon__0c3d6 {
  8468. height: 12px;
  8469. width: 12px;
  8470. top: unset;
  8471. }
  8472. .clickable__8d5ac .availabilityIndicator__32891 .description_c7a3e9 {
  8473. font-weight: 600;
  8474. }
  8475.  
  8476. .imageUploaderInner_da8332 {
  8477. border-radius: 0;
  8478. }
  8479.  
  8480. .avatarUploaderInnerSquareDisabled__3cfd1 {
  8481. background: var(--btn-grey);
  8482. }
  8483.  
  8484. .imageUploaderIcon__0c13b {
  8485. border-radius: 0;
  8486. }
  8487.  
  8488. .select__0eb48 .title__7dcdc,
  8489. .option_be8b2e .title__7dcdc {
  8490. font-size: 14px;
  8491. }
  8492.  
  8493. #app-mount .divider__12403 {
  8494. border-color: var(--background-modifier-accent-dark);
  8495. }
  8496.  
  8497. .divider__12403 {
  8498. margin-top: 10px;
  8499. padding-top: 10px;
  8500. border-top: thin solid transparent;
  8501. }
  8502.  
  8503. #app-mount .contentRegion__0bec1 .contentRegionScroller__86c79:has(#roles-tab) {
  8504. padding-top: 0;
  8505. }
  8506.  
  8507. .rolesTable__568ca .memberSpacing_f6f902 {
  8508. display: none;
  8509. }
  8510.  
  8511. .roleRow_c357d5 {
  8512. margin-left: 0;
  8513. margin-right: 0;
  8514. border-radius: 0;
  8515. }
  8516. .roleRow_c357d5::before, .roleRow_c357d5::after {
  8517. opacity: 0;
  8518. }
  8519. .roleRow_c357d5:hover:not(.roleRowDisableHover__9fe35) {
  8520. background: var(--background-accent);
  8521. transition: background 0.2s linear;
  8522. }
  8523. .roleRow_c357d5 .dragIcon__003d3 {
  8524. color: var(--brand-experiment);
  8525. }
  8526. .roleRow_c357d5 .roleIcon__2553c:has(path[d="M3.47 5.18c.27-.4.64-.74 1.1-.96l6.09-3.05a3 3 0 0 1 2.68 0l6.1 3.05A2.83 2.83 0 0 1 21 6.75v3.5a14.17 14.17 0 0 1-8.42 12.5c-.37.16-.79.16-1.16 0A14.18 14.18 0 0 1 3 9.77V6.75c0-.57.17-1.11.47-1.57Zm2.95 10.3A12.18 12.18 0 0 0 12 20.82a12.18 12.18 0 0 0 5.58-5.32A9.49 9.49 0 0 0 12.47 14h-.94c-1.88 0-3.63.55-5.11 1.49ZM12 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"]) {
  8527. height: 47px;
  8528. width: 49px;
  8529. margin-top: 1px;
  8530. margin-right: 12px;
  8531. }
  8532. .roleRow_c357d5 .roleIcon__2553c:has(path[d="M3.47 5.18c.27-.4.64-.74 1.1-.96l6.09-3.05a3 3 0 0 1 2.68 0l6.1 3.05A2.83 2.83 0 0 1 21 6.75v3.5a14.17 14.17 0 0 1-8.42 12.5c-.37.16-.79.16-1.16 0A14.18 14.18 0 0 1 3 9.77V6.75c0-.57.17-1.11.47-1.57Zm2.95 10.3A12.18 12.18 0 0 0 12 20.82a12.18 12.18 0 0 0 5.58-5.32A9.49 9.49 0 0 0 12.47 14h-.94c-1.88 0-3.63.55-5.11 1.49ZM12 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"]) path {
  8533. d: path("M 22 0 L 0 0 L 0 22 L 22 22 Z M 11.001 5.999 C 12.382 5.999 13.501 7.118 13.501 8.499 C 13.501 9.88 12.382 10.999 11.001 10.999 C 9.62 10.999 8.501 9.88 8.501 8.499 C 8.501 7.118 9.62 5.999 11.001 5.999 Z M 7.251 16 C 7.251 13.699 8.7 12.25 11.001 12.25 C 13.302 12.25 14.751 13.699 14.751 16 H 7.251 Z");
  8534. }
  8535. .roleRow_c357d5 .roleName_adcb89 {
  8536. font-weight: 400;
  8537. margin-bottom: 20px;
  8538. }
  8539. .roleRow_c357d5 .memberCountContainer__9c91b {
  8540. position: absolute;
  8541. left: 0;
  8542. margin-top: 22px;
  8543. margin-left: 93px;
  8544. color: var(--text-muted);
  8545. }
  8546. .roleRow_c357d5 .memberCountContainer__9c91b .text-md-normal__6a4eb {
  8547. color: var(--text-muted);
  8548. font-size: 12px;
  8549. line-height: 22px;
  8550. letter-spacing: 0.5px;
  8551. text-transform: uppercase;
  8552. font-weight: 700;
  8553. }
  8554. .roleRow_c357d5 .person__42ce2 {
  8555. order: -1;
  8556. margin-left: 0;
  8557. margin-right: 4px;
  8558. width: 16px;
  8559. height: 16px;
  8560. }
  8561. .roleRow_c357d5:hover:not(.roleRowDisableHover__9fe35) .circleButton__29ce2 {
  8562. background-color: var(--background-accent-hover);
  8563. }
  8564. .roleRow_c357d5 .circleButton__29ce2 {
  8565. background: var(--btn-grey);
  8566. color: var(--brand-experiment);
  8567. transition: background 0.2s linear, box-shadow 0.2s ease-in-out;
  8568. border-radius: 2px;
  8569. }
  8570. .roleRow_c357d5 .circleButton__29ce2:hover {
  8571. background: var(--btn-grey-hover);
  8572. box-shadow: var(--btn-grey-boxshadow);
  8573. }
  8574.  
  8575. #roles-tab .customScroller_f72801 > div {
  8576. margin-left: 24px;
  8577. margin-right: 24px;
  8578. max-width: unset;
  8579. min-width: unset;
  8580. }
  8581. #roles-tab .container_d5f6d0 {
  8582. width: -moz-fit-content;
  8583. width: fit-content;
  8584. background: var(--background-accent);
  8585. color: #fff;
  8586. border-radius: 2px;
  8587. padding: 16px 24px 16px 16px;
  8588. }
  8589. #roles-tab .container_d5f6d0 .icon__4c736 {
  8590. background: none;
  8591. }
  8592. #roles-tab .container_d5f6d0 .description_ea43fc {
  8593. margin-left: 12px;
  8594. }
  8595. #roles-tab .container_d5f6d0 .label_b37ab9,
  8596. #roles-tab .container_d5f6d0 .text-xs-normal_ccc5fb {
  8597. margin-bottom: 0;
  8598. font-size: 14px;
  8599. font-weight: 600;
  8600. color: #fff;
  8601. line-height: 18px;
  8602. }
  8603. #roles-tab .container_d5f6d0 .arrow_a1ef64 {
  8604. margin-left: 12px;
  8605. color: var(--brand-experiment);
  8606. }
  8607. #roles-tab .page__9db5c {
  8608. min-width: unset;
  8609. }
  8610. #roles-tab .sidebar_bdf6b7 {
  8611. margin-left: 24px;
  8612. padding-top: 24px;
  8613. flex: 0 0 208px !important;
  8614. border-right: thin solid var(--background-modifier-accent-dark);
  8615. }
  8616. #roles-tab .sidebar_bdf6b7 .titleContainer_e558ff {
  8617. padding: 0 0 10px 0;
  8618. margin: 0;
  8619. z-index: 2;
  8620. background: none;
  8621. }
  8622. #roles-tab .sidebar_bdf6b7 .title__0cedc {
  8623. height: 34px;
  8624. padding: 8px 14px;
  8625. border-radius: 2px;
  8626. color: var(--text-lighter);
  8627. background: var(--btn-grey);
  8628. transition-property: background, box-shadow, color;
  8629. transition-duration: 0.2s;
  8630. transition-timing-function: ease-out;
  8631. }
  8632. #roles-tab .sidebar_bdf6b7 .title__0cedc:hover {
  8633. background: var(--btn-grey-hover);
  8634. color: #fff;
  8635. box-shadow: var(--btn-grey-boxshadow);
  8636. }
  8637. #roles-tab .sidebar_bdf6b7 .title__0cedc svg {
  8638. height: 18px;
  8639. width: 18px;
  8640. color: var(--brand-experiment);
  8641. }
  8642. #roles-tab .sidebar_bdf6b7 .title__0cedc .titleText__2ee04 {
  8643. font-size: 14px;
  8644. font-weight: 400;
  8645. text-transform: capitalize;
  8646. }
  8647. #roles-tab .sidebar_bdf6b7 .addRole__15998 {
  8648. display: flex;
  8649. align-items: center;
  8650. justify-content: center;
  8651. width: 34px;
  8652. height: 34px;
  8653. border-radius: 2px;
  8654. margin-right: 10px;
  8655. color: var(--brand-experiment);
  8656. background: var(--btn-grey);
  8657. transition-property: background, box-shadow;
  8658. transition-duration: 0.2s;
  8659. transition-timing-function: ease-out;
  8660. }
  8661. #roles-tab .sidebar_bdf6b7 .addRole__15998:hover {
  8662. background: var(--btn-grey-hover);
  8663. box-shadow: var(--btn-grey-boxshadow);
  8664. }
  8665. #roles-tab .sidebar_bdf6b7 .list__41249 {
  8666. padding: 0;
  8667. overflow: scroll auto !important;
  8668. }
  8669. #roles-tab .sidebar_bdf6b7 .row__5f051 {
  8670. margin: 0;
  8671. border-radius: 0;
  8672. --interactive-active: var(--header-secondary);
  8673. }
  8674. #roles-tab .sidebar_bdf6b7 .row__5f051:hover:not(.selected__5711d) {
  8675. background: var(--contextmenu-text);
  8676. --interactive-hover: var(--background-accent);
  8677. --interactive-active: var(--background-accent);
  8678. --header-primary: var(--background-accent);
  8679. }
  8680. #roles-tab .sidebar_bdf6b7 .row__5f051.selected__5711d {
  8681. background: var(--background-accent);
  8682. color: #fff;
  8683. --header-primary: #fff;
  8684. --interactive-active: #fff;
  8685. }
  8686. #roles-tab .contentWidth_b55791 {
  8687. margin-right: 0;
  8688. max-width: unset;
  8689. width: 100%;
  8690. padding-right: 24px;
  8691. }
  8692. #roles-tab .header__63c59 {
  8693. margin-left: 0;
  8694. padding: 24px 0 0 0;
  8695. margin-right: 0;
  8696. background: var(--background-tertiary);
  8697. }
  8698. #roles-tab .titleContainer__2370f {
  8699. margin-bottom: 10px;
  8700. }
  8701. #roles-tab .titleContainer__2370f .titleText_c58c2c {
  8702. text-transform: capitalize;
  8703. }
  8704. #roles-tab .warning__9db16 {
  8705. margin-bottom: 10px;
  8706. }
  8707. #roles-tab .warning__9db16 .text-sm-medium_bc6ffc {
  8708. font-weight: 400;
  8709. }
  8710. #roles-tab .container_de00a3 {
  8711. border-radius: 2px;
  8712. padding: 10px;
  8713. font-weight: 400;
  8714. }
  8715. #roles-tab .top__592a7 {
  8716. --btn-count: 4;
  8717. background: var(--darker-grey);
  8718. border-radius: 2px;
  8719. padding: 0;
  8720. margin: 0;
  8721. gap: 0;
  8722. display: flex;
  8723. flex-direction: row;
  8724. position: relative;
  8725. box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.6666666667);
  8726. border-bottom: none;
  8727. }
  8728. #roles-tab .top__592a7 .item__48dda {
  8729. background: none;
  8730. margin: 0;
  8731. display: flex;
  8732. flex: 0 1 calc(100% / var(--btn-count));
  8733. justify-content: center;
  8734. border-bottom: none;
  8735. padding: 0;
  8736. height: 34px;
  8737. padding: 8px 14px;
  8738. font-size: 14px;
  8739. font-weight: 400;
  8740. }
  8741. #roles-tab .top__592a7 .item__48dda:not(.selected__5711d):hover {
  8742. background: var(--btn-grey);
  8743. }
  8744. #roles-tab .top__592a7::before {
  8745. content: "";
  8746. position: absolute;
  8747. height: 100%;
  8748. width: calc(100% / var(--btn-count));
  8749. background: var(--btn-grey-hover);
  8750. transition: translate 0.2s ease;
  8751. border-radius: 2px;
  8752. }
  8753. #roles-tab .top__592a7:has(.selected__5711d:nth-child(2)):before {
  8754. translate: 100%;
  8755. }
  8756. #roles-tab .top__592a7:has(.selected__5711d:nth-child(3)):before {
  8757. translate: 200%;
  8758. }
  8759. #roles-tab .top__592a7:has(.selected__5711d:nth-child(4)):before {
  8760. translate: 300%;
  8761. }
  8762. #roles-tab .notice_d6d405 {
  8763. padding: 0;
  8764. border-radius: 0;
  8765. background: none;
  8766. }
  8767. #roles-tab .notice_d6d405 .noticeIcon__7069b {
  8768. height: 18px;
  8769. width: 18px;
  8770. margin-right: 4px;
  8771. color: var(--info-warning-foreground);
  8772. }
  8773. #roles-tab .notice_d6d405 [data-text-variant="text-sm/normal"] {
  8774. font-size: 13px;
  8775. line-height: 18px;
  8776. font-weight: 400;
  8777. }
  8778. #roles-tab .notice_d6d405 .defaultColor__77578 {
  8779. color: var(--text-muted);
  8780. }
  8781. #roles-tab .searchContainer_bdd25a {
  8782. margin-top: 10px;
  8783. }
  8784. #roles-tab .searchContainer_bdd25a .container__7712a {
  8785. padding: 0 8px;
  8786. border-radius: 2px;
  8787. overflow: hidden;
  8788. background: none;
  8789. transition-property: background, box-shadow;
  8790. transition-duration: 0.2s;
  8791. transition-timing-function: ease-out;
  8792. }
  8793. #roles-tab .searchContainer_bdd25a .container__7712a input::-moz-placeholder {
  8794. color: #fff;
  8795. font-size: 16px;
  8796. line-height: 20px;
  8797. font-weight: 600;
  8798. }
  8799. #roles-tab .searchContainer_bdd25a .container__7712a input,
  8800. #roles-tab .searchContainer_bdd25a .container__7712a input::placeholder {
  8801. color: #fff;
  8802. font-size: 16px;
  8803. line-height: 20px;
  8804. font-weight: 600;
  8805. }
  8806. #roles-tab .searchContainer_bdd25a .container__7712a:hover:not(:focus, :focus-within) {
  8807. background: var(--btn-grey-hover);
  8808. box-shadow: var(--btn-grey-boxshadow);
  8809. }
  8810. #roles-tab .searchContainer_bdd25a .container__7712a:focus, #roles-tab .searchContainer_bdd25a .container__7712a:focus-within {
  8811. background: var(--btn-grey);
  8812. }
  8813. #roles-tab .searchContainer_bdd25a .container__7712a .iconLayout__6d744.medium__0fb5d,
  8814. #roles-tab .searchContainer_bdd25a .container__7712a .medium__0fb5d .iconContainer__3af05 {
  8815. height: 18px;
  8816. width: 18px;
  8817. }
  8818. #roles-tab .searchContainer_bdd25a .container__7712a svg {
  8819. color: var(--brand-experiment);
  8820. }
  8821. #roles-tab .clearButtonWrapper__72a1c {
  8822. position: relative;
  8823. top: unset;
  8824. }
  8825.  
  8826. #emoji-tab .title__9bb94 {
  8827. margin-bottom: 0;
  8828. padding-top: 8px;
  8829. padding-left: 8px;
  8830. display: flex;
  8831. align-items: center;
  8832. gap: 4px;
  8833. }
  8834. #emoji-tab .title__9bb94 span {
  8835. color: var(--text-muted);
  8836. }
  8837. #emoji-tab .title__9bb94::after {
  8838. content: "";
  8839. height: 2px;
  8840. margin: 0 10px 0 10px;
  8841. background: var(--background-modifier-accent-compat);
  8842. display: flex;
  8843. flex-grow: 1;
  8844. }
  8845.  
  8846. .emojiTable_dd50d1 {
  8847. padding-top: 8px;
  8848. padding-left: 8px;
  8849. margin-bottom: 0;
  8850. }
  8851. .emojiTable_dd50d1 .description__7af71 {
  8852. margin-bottom: 0;
  8853. }
  8854. .emojiTable_dd50d1 .columnLabel_bb8404 {
  8855. flex-basis: 40%;
  8856. }
  8857.  
  8858. .emojiRow__4661c {
  8859. padding: 6px 8px;
  8860. height: 58px;
  8861. box-shadow: none;
  8862. }
  8863. .emojiRow__4661c:hover {
  8864. background: var(--background-accent);
  8865. transition: background 0.2s linear;
  8866. }
  8867. .emojiRow__4661c:hover .emojiInput__4fe54:not(:focus, :focus-within),
  8868. .emojiRow__4661c:hover .emojiRemove_b299a6 {
  8869. background-color: var(--background-accent-hover);
  8870. transition: background 0.2s linear;
  8871. }
  8872. .emojiRow__4661c .emojiColumn_c4b43c {
  8873. flex-basis: unset;
  8874. }
  8875. .emojiRow__4661c .emojiImage__841ea {
  8876. height: 45px;
  8877. width: 45px;
  8878. margin-right: 12px;
  8879. }
  8880. .emojiRow__4661c .emojiAliasInput_dd55f7 .emojiInput__4fe54 {
  8881. opacity: 1;
  8882. }
  8883. .emojiRow__4661c .emojiAliasPlaceholder__71733 {
  8884. display: none;
  8885. }
  8886. .emojiRow__4661c:not(:hover) .input_d266e7 {
  8887. background: none;
  8888. }
  8889. .emojiRow__4661c .avatar__970c7 {
  8890. bottom: 2px;
  8891. }
  8892. .emojiRow__4661c .wrapper_edb6e0::before {
  8893. display: none;
  8894. }
  8895. .emojiRow__4661c .emojiRowText__5e305 {
  8896. font-size: 12px;
  8897. line-height: 22px;
  8898. letter-spacing: 0.5px;
  8899. text-transform: uppercase;
  8900. font-weight: 700;
  8901. }
  8902. .emojiRow__4661c .emojiRemove_b299a6 {
  8903. position: relative;
  8904. top: unset;
  8905. right: unset;
  8906. opacity: 1;
  8907. margin: 8px;
  8908. border-radius: 2px;
  8909. box-shadow: none;
  8910. background-color: var(--background-accent);
  8911. flex-shrink: 0;
  8912. }
  8913. .emojiRow__4661c:has(.emojiRemove_b299a6:hover) {
  8914. background: var(--status-danger);
  8915. }
  8916. .emojiRow__4661c:has(.emojiRemove_b299a6:hover) .emojiInput__4fe54 {
  8917. background: none;
  8918. }
  8919.  
  8920. #app-mount .background__3dd67 {
  8921. color: var(--btn-grey);
  8922. }
  8923. #app-mount .tierInProgress_f08e8b {
  8924. background-color: var(--brand-experiment);
  8925. }
  8926. #app-mount .tierBody__615a1 {
  8927. background: none;
  8928. }
  8929. #app-mount .tierHeaderLocked__4d099,
  8930. #app-mount .tierHeaderUnlocked_cc60fa {
  8931. background: none;
  8932. }
  8933.  
  8934. #stickers-tab .upsellContainer__12e24 {
  8935. display: none;
  8936. }
  8937. #stickers-tab .divider__2bbbc {
  8938. display: none;
  8939. }
  8940. #stickers-tab .tiers__13b89 {
  8941. margin-left: 38px;
  8942. width: calc(100% - 96px - 20px);
  8943. }
  8944.  
  8945. .tierHeaderContent__27033 {
  8946. padding: 16px 0 16px 0;
  8947. }
  8948. .tierHeaderContent__27033::after {
  8949. content: "";
  8950. height: 2px;
  8951. margin: 0 10px 0 10px;
  8952. background: var(--background-modifier-accent-compat);
  8953. display: flex;
  8954. flex-grow: 1;
  8955. order: -1;
  8956. }
  8957.  
  8958. .tierHeader__5bf89 {
  8959. background: none;
  8960. }
  8961.  
  8962. .tierTitle__25723 {
  8963. width: -moz-fit-content;
  8964. width: fit-content;
  8965. flex-grow: 0;
  8966. order: -3;
  8967. white-space: nowrap;
  8968. color: var(--header-primary);
  8969. }
  8970. .tierTitle__25723 h3,
  8971. .tierTitle__25723 [data-text-variant="text-xs/normal"] {
  8972. white-space: nowrap;
  8973. }
  8974. .tierTitle__25723 [data-text-variant="text-xs/normal"] {
  8975. color: var(--header-secondary);
  8976. }
  8977.  
  8978. .tierIcon__2ac8f {
  8979. height: 24px;
  8980. width: 24px;
  8981. margin: 4px 4px 4px 0;
  8982. order: -4;
  8983. }
  8984.  
  8985. .tierIconLocked_c2f292 {
  8986. color: var(--brand-experiment);
  8987. }
  8988.  
  8989. .tierRequirement_c03194 {
  8990. font-size: 16px;
  8991. font-weight: 600;
  8992. line-height: 20px;
  8993. color: var(--text-muted);
  8994. margin-left: 8px;
  8995. order: -2;
  8996. }
  8997.  
  8998. .tierLock__3e43d {
  8999. width: 24px;
  9000. height: 24px;
  9001. margin-left: 0;
  9002. color: var(--info-warning-foreground);
  9003. }
  9004.  
  9005. #integrations-tab .breadcrumbs__97f80 {
  9006. margin-bottom: 0;
  9007. }
  9008. #integrations-tab .divider__5825b {
  9009. margin: 10px 0;
  9010. }
  9011. #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1) {
  9012. border-radius: 0;
  9013. margin: 0;
  9014. border: none;
  9015. padding: 6px 8px;
  9016. min-height: 58px;
  9017. }
  9018. #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1):hover, #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1):has(.body_f9f4de) {
  9019. background: var(--background-accent);
  9020. transition: background 0.2s linear;
  9021. }
  9022. #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1):hover .iconWrapper__8fbb1, #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1):has(.body_f9f4de) .iconWrapper__8fbb1 {
  9023. background-color: var(--background-accent-hover);
  9024. transition: background 0.2s linear;
  9025. }
  9026. #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1):hover .button_afdfd9.lookFilled__19298.colorBrand_b2253e.sizeSmall__71a98.grow__4c8a4, #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1):has(.body_f9f4de) .button_afdfd9.lookFilled__19298.colorBrand_b2253e.sizeSmall__71a98.grow__4c8a4 {
  9027. background-color: var(--background-accent-hover);
  9028. transition: background 0.2s linear, box-shadow 0.2s ease-in-out;
  9029. }
  9030. #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1) .header_ffa8f0 {
  9031. padding: 0;
  9032. }
  9033. #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1) .iconWrapper__8fbb1 {
  9034. border-radius: 0;
  9035. height: 45px;
  9036. width: 98px;
  9037. -o-object-fit: scale-down;
  9038. object-fit: scale-down;
  9039. background: var(--background-accent);
  9040. }
  9041. #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1) .iconWrapper__8fbb1 svg {
  9042. height: 18px;
  9043. width: 18px;
  9044. color: #fff;
  9045. }
  9046. #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1) .secondaryHeader_d4649b {
  9047. font-weight: 400;
  9048. }
  9049. #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1) .detailsWrapper__55091 {
  9050. margin-top: 0;
  9051. align-items: center;
  9052. --header-secondary: var(--text-muted);
  9053. }
  9054. #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1) .detailsWrapper__55091 .detailsIcon_a2b4b5 + [data-text-variant="text-xs/normal"] {
  9055. color: var(--text-muted);
  9056. font-size: 12px;
  9057. line-height: 22px;
  9058. letter-spacing: 0.5px;
  9059. text-transform: uppercase;
  9060. font-weight: 700;
  9061. }
  9062. #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1) .detailsIcon_a2b4b5 {
  9063. color: var(--text-muted);
  9064. }
  9065. #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1) .feature_fc2be4 {
  9066. margin-right: 8px;
  9067. }
  9068. #integrations-tab .cardPrimary_cb7a0e:has(.iconWrapper__8fbb1) .featureIcon_c000e2 {
  9069. color: var(--brand-experiment);
  9070. }
  9071. #integrations-tab .sectionHeader__77d13 {
  9072. margin-bottom: 0;
  9073. padding-top: 8px;
  9074. padding-left: 8px;
  9075. }
  9076. #integrations-tab .headerDivider_fe7595 {
  9077. margin: 0 0 10px 0;
  9078. }
  9079. #integrations-tab .groupHeader__78162 {
  9080. text-transform: capitalize;
  9081. font-size: 16px;
  9082. line-height: 20px;
  9083. font-weight: 600;
  9084. letter-spacing: 0;
  9085. }
  9086. #integrations-tab .expandIcon__23ec9 {
  9087. color: var(--brand-experiment);
  9088. margin: 8px;
  9089. }
  9090. #integrations-tab .body_f9f4de {
  9091. margin-top: 6px;
  9092. background: var(--background-tertiary);
  9093. padding: 24px;
  9094. }
  9095. #integrations-tab .topDivider_fc535d {
  9096. display: none;
  9097. }
  9098. #integrations-tab .bottomDivider_a9003f {
  9099. margin: 10px 0;
  9100. }
  9101. #integrations-tab .iconWrapper__8fbb1 {
  9102. background: none;
  9103. width: 48px;
  9104. height: 48px;
  9105. border-radius: 0;
  9106. }
  9107.  
  9108. .applicationPermissions__86558 .card__10f25 {
  9109. margin-bottom: 10px;
  9110. padding: 8px 24px 10px 16px;
  9111. background: var(--btn-grey);
  9112. border-radius: 2px;
  9113. }
  9114. .applicationPermissions__86558 .cardHeader__27283 {
  9115. background: none;
  9116. padding: 0;
  9117. }
  9118. .applicationPermissions__86558 .cardHeader__27283 .title__0731c {
  9119. font-size: 16px;
  9120. font-weight: 400;
  9121. line-height: 20px;
  9122. margin-bottom: 10px;
  9123. }
  9124. .applicationPermissions__86558 .entryItem__209af .listContainer__2ae72 {
  9125. padding: 0;
  9126. }
  9127. .applicationPermissions__86558 .entryItem__209af [data-text-variant="text-md/normal"] {
  9128. font-size: 13px;
  9129. line-height: 18px;
  9130. font-weight: 400;
  9131. --header-primary: var(--header-secondary);
  9132. }
  9133. .applicationPermissions__86558 .entryItem__209af .channelIcon__1a6f7 {
  9134. color: var(--header-secondary);
  9135. }
  9136. .applicationPermissions__86558 .entryItem__209af .image_cd9606 {
  9137. height: 18px;
  9138. width: 18px;
  9139. margin-right: 4px;
  9140. min-width: unset;
  9141. }
  9142. .applicationPermissions__86558 .entryActions__6391b {
  9143. order: -1;
  9144. margin-right: 10px;
  9145. }
  9146. .applicationPermissions__86558 .entryActions__6391b .deny_c46df5 {
  9147. border-top-left-radius: 2px;
  9148. border-bottom-left-radius: 2px;
  9149. }
  9150. .applicationPermissions__86558 .entryActions__6391b .allow__6f2d0 {
  9151. border-top-right-radius: 2px;
  9152. border-bottom-right-radius: 2px;
  9153. }
  9154.  
  9155. .changelog__6d46d {
  9156. background: none;
  9157. border-radius: 0;
  9158. margin-top: 0;
  9159. padding: 0;
  9160. }
  9161. .changelog__6d46d .updatesHeader__80871 {
  9162. margin-bottom: 10px;
  9163. font-size: 24px;
  9164. line-height: 36px;
  9165. font-weight: 300;
  9166. letter-spacing: 2px;
  9167. text-transform: uppercase;
  9168. }
  9169. .changelog__6d46d [data-text-variant="text-sm/medium"] {
  9170. font-size: 13px;
  9171. line-height: 18px;
  9172. font-weight: 400;
  9173. margin-bottom: 10px;
  9174. --header-secondary: var(--text-muted);
  9175. }
  9176.  
  9177. .safetyChecklist__826c8 {
  9178. background: none;
  9179. }
  9180. .safetyChecklist__826c8 .divider__150fc {
  9181. display: none;
  9182. }
  9183. .safetyChecklist__826c8 .safetyStepRow__3a1e7 {
  9184. padding: 8px 24px 10px 16px;
  9185. background: var(--btn-grey);
  9186. border-radius: 2px;
  9187. margin-bottom: 10px;
  9188. }
  9189. .safetyChecklist__826c8 .wrapper_edb6e0::before {
  9190. display: none;
  9191. }
  9192. .safetyChecklist__826c8 [data-text-variant="heading-md/semibold"] {
  9193. font-size: 16px;
  9194. font-weight: 400;
  9195. line-height: 20px;
  9196. }
  9197. .safetyChecklist__826c8 [data-text-variant="text-xs/medium"] {
  9198. font-size: 13px;
  9199. line-height: 18px;
  9200. font-weight: 400;
  9201. }
  9202.  
  9203. #safety-tab .header_a82409 {
  9204. position: sticky;
  9205. display: flex;
  9206. align-items: center;
  9207. top: 0;
  9208. padding: 32px 24px;
  9209. margin-left: -24px;
  9210. z-index: 10;
  9211. transform: translateY(calc(var(--header-padding) * -1 + 8.5px + 18px));
  9212. background: linear-gradient(to bottom, var(--background-tertiary) calc(100% - 24px), transparent 100%);
  9213. font-size: 22px;
  9214. line-height: 24px;
  9215. font-weight: 700;
  9216. margin-bottom: 0;
  9217. }
  9218.  
  9219. #safety-tab .back__04432,
  9220. #onboarding-tab .back__04432 {
  9221. margin-top: 19px;
  9222. padding: 8px 14px;
  9223. border-radius: 2px;
  9224. --interactive-normal: var(--text-lighter);
  9225. background: var(--btn-grey);
  9226. transition-property: background, box-shadow;
  9227. transition-duration: 0.2s;
  9228. transition-timing-function: ease-out;
  9229. }
  9230. #safety-tab .back__04432:hover,
  9231. #onboarding-tab .back__04432:hover {
  9232. background: var(--btn-grey-hover);
  9233. --interactive-normal: #fff;
  9234. box-shadow: var(--btn-grey-boxshadow);
  9235. }
  9236. #safety-tab .back__04432 .backButton__54768:hover,
  9237. #onboarding-tab .back__04432 .backButton__54768:hover {
  9238. text-decoration: none;
  9239. }
  9240. #safety-tab .back__04432 svg,
  9241. #onboarding-tab .back__04432 svg {
  9242. color: var(--brand-experiment);
  9243. }
  9244. #safety-tab .back__04432 [data-text-variant="text-sm/semibold"],
  9245. #onboarding-tab .back__04432 [data-text-variant="text-sm/semibold"] {
  9246. font-size: 16px;
  9247. line-height: 20px;
  9248. font-weight: 700;
  9249. }
  9250. #safety-tab .back__04432 + div > [data-text-variant="heading-lg/semibold"],
  9251. #onboarding-tab .back__04432 + div > [data-text-variant="heading-lg/semibold"] {
  9252. margin-bottom: 10px;
  9253. font-size: 24px;
  9254. line-height: 36px;
  9255. font-weight: 300;
  9256. letter-spacing: 2px;
  9257. color: #fff;
  9258. text-transform: uppercase;
  9259. }
  9260. #safety-tab .simpleItemWrapper__2a0a0,
  9261. #onboarding-tab .simpleItemWrapper__2a0a0 {
  9262. padding: 8px 24px 10px 16px;
  9263. background: var(--btn-grey);
  9264. border-radius: 2px;
  9265. margin-bottom: 10px;
  9266. }
  9267. #safety-tab .itemContent_e64b49 [data-text-variant="text-md/semibold"],
  9268. #onboarding-tab .itemContent_e64b49 [data-text-variant="text-md/semibold"] {
  9269. font-size: 16px;
  9270. font-weight: 400;
  9271. line-height: 20px;
  9272. }
  9273. #safety-tab .itemContent_e64b49 [data-text-variant="text-sm/medium"],
  9274. #onboarding-tab .itemContent_e64b49 [data-text-variant="text-sm/medium"] {
  9275. font-weight: 400;
  9276. }
  9277. #safety-tab .editCard_dfa091,
  9278. #onboarding-tab .editCard_dfa091 {
  9279. padding: 8px 24px 10px 16px;
  9280. background: var(--btn-grey);
  9281. border-radius: 2px;
  9282. }
  9283. #safety-tab .editCard_dfa091:hover, #safety-tab .editCard_dfa091.toggled_bf7bde,
  9284. #onboarding-tab .editCard_dfa091:hover,
  9285. #onboarding-tab .editCard_dfa091.toggled_bf7bde {
  9286. background: var(--background-accent);
  9287. transition: background 0.2s linear;
  9288. }
  9289. #safety-tab .editCard_dfa091:hover .innerHeader_cec666 .container__871ba:not(.checked__6bdb0), #safety-tab .editCard_dfa091.toggled_bf7bde .innerHeader_cec666 .container__871ba:not(.checked__6bdb0),
  9290. #onboarding-tab .editCard_dfa091:hover .innerHeader_cec666 .container__871ba:not(.checked__6bdb0),
  9291. #onboarding-tab .editCard_dfa091.toggled_bf7bde .innerHeader_cec666 .container__871ba:not(.checked__6bdb0) {
  9292. background-color: var(--background-accent-hover) !important;
  9293. transition: background-color 0.2s linear;
  9294. }
  9295. #safety-tab .editCard_dfa091:hover .innerHeader_cec666 .input_d266e7:not(:focus, .input_d266e7:focus-within), #safety-tab .editCard_dfa091.toggled_bf7bde .innerHeader_cec666 .input_d266e7:not(:focus, .input_d266e7:focus-within),
  9296. #onboarding-tab .editCard_dfa091:hover .innerHeader_cec666 .input_d266e7:not(:focus, .input_d266e7:focus-within),
  9297. #onboarding-tab .editCard_dfa091.toggled_bf7bde .innerHeader_cec666 .input_d266e7:not(:focus, .input_d266e7:focus-within) {
  9298. background: var(--background-accent-hover);
  9299. transition: background-color 0.2s linear;
  9300. }
  9301. #safety-tab .editCard_dfa091:hover .innerHeader_cec666 .lookFilled__19298.colorBrand_b2253e, #safety-tab .editCard_dfa091.toggled_bf7bde .innerHeader_cec666 .lookFilled__19298.colorBrand_b2253e,
  9302. #onboarding-tab .editCard_dfa091:hover .innerHeader_cec666 .lookFilled__19298.colorBrand_b2253e,
  9303. #onboarding-tab .editCard_dfa091.toggled_bf7bde .innerHeader_cec666 .lookFilled__19298.colorBrand_b2253e {
  9304. background: var(--background-accent-hover);
  9305. transition: background-color 0.2s linear;
  9306. }
  9307. #safety-tab .editCard_dfa091:not(:last-child),
  9308. #onboarding-tab .editCard_dfa091:not(:last-child) {
  9309. margin-bottom: 10px;
  9310. }
  9311. #safety-tab .editCard_dfa091:before,
  9312. #onboarding-tab .editCard_dfa091:before {
  9313. display: none;
  9314. }
  9315. #safety-tab .editCard_dfa091 .ruleIconContainer_baf164,
  9316. #onboarding-tab .editCard_dfa091 .ruleIconContainer_baf164 {
  9317. border-radius: 0;
  9318. background: none;
  9319. }
  9320. #safety-tab .editCard_dfa091 .ruleIconContainer_baf164 .ruleIcon__44d2b,
  9321. #onboarding-tab .editCard_dfa091 .ruleIconContainer_baf164 .ruleIcon__44d2b {
  9322. color: var(--brand-experiment);
  9323. }
  9324. #safety-tab .editCard_dfa091 .ruleTextHeader_e604c5,
  9325. #onboarding-tab .editCard_dfa091 .ruleTextHeader_e604c5 {
  9326. font-size: 16px;
  9327. font-weight: 400;
  9328. line-height: 20px;
  9329. }
  9330. #safety-tab .editCard_dfa091 .ruleTextDescription_ee2a28,
  9331. #onboarding-tab .editCard_dfa091 .ruleTextDescription_ee2a28 {
  9332. line-height: 18px;
  9333. }
  9334. #safety-tab .editCard_dfa091 .actionContainer_d21d10,
  9335. #onboarding-tab .editCard_dfa091 .actionContainer_d21d10 {
  9336. background: rgba(0, 0, 0, 0.2);
  9337. border-radius: 2px;
  9338. padding: 0 6px;
  9339. height: 20px;
  9340. }
  9341. #safety-tab .editCard_dfa091 .actionIconContainer__24323,
  9342. #onboarding-tab .editCard_dfa091 .actionIconContainer__24323 {
  9343. height: 12px;
  9344. width: 12px;
  9345. margin-right: 4px;
  9346. }
  9347. #safety-tab .editCard_dfa091 .actionTextContainer__798bc,
  9348. #onboarding-tab .editCard_dfa091 .actionTextContainer__798bc {
  9349. font-weight: 400;
  9350. }
  9351. #safety-tab .editCard_dfa091 .valuePill__9d21a,
  9352. #onboarding-tab .editCard_dfa091 .valuePill__9d21a {
  9353. background: rgba(0, 0, 0, 0.2);
  9354. border-radius: 2px;
  9355. padding: 0 6px;
  9356. height: 20px;
  9357. font-weight: 400;
  9358. }
  9359. #safety-tab .editCard_dfa091 .mainContainer_e09640,
  9360. #onboarding-tab .editCard_dfa091 .mainContainer_e09640 {
  9361. padding: 0;
  9362. }
  9363. #safety-tab .editCard_dfa091 .itemWrapper__75865,
  9364. #onboarding-tab .editCard_dfa091 .itemWrapper__75865 {
  9365. padding: 0;
  9366. }
  9367. #safety-tab .editCard_dfa091 .itemBodyContainer__5350a,
  9368. #onboarding-tab .editCard_dfa091 .itemBodyContainer__5350a {
  9369. padding: 6px 0 0 0;
  9370. }
  9371. #safety-tab .editCard_dfa091 .itemBodyInner__9d69d,
  9372. #onboarding-tab .editCard_dfa091 .itemBodyInner__9d69d {
  9373. border: none;
  9374. border-radius: 0;
  9375. background: var(--background-tertiary);
  9376. padding: 24px;
  9377. gap: 10px;
  9378. }
  9379. #safety-tab .editCard_dfa091 .fieldBackground_b79764:not(textarea),
  9380. #onboarding-tab .editCard_dfa091 .fieldBackground_b79764:not(textarea) {
  9381. padding: 8px 24px 10px 16px;
  9382. background: var(--btn-grey);
  9383. border-radius: 2px;
  9384. border: none;
  9385. }
  9386. #safety-tab .editCard_dfa091 .containerFooter_c8da8a,
  9387. #onboarding-tab .editCard_dfa091 .containerFooter_c8da8a {
  9388. background: none;
  9389. padding: 0 24px 24px 24px;
  9390. border-bottom-left-radius: 0;
  9391. border-bottom-right-radius: 0;
  9392. }
  9393. #safety-tab .editCard_dfa091 .backgroundContainer__06189,
  9394. #onboarding-tab .editCard_dfa091 .backgroundContainer__06189 {
  9395. background: var(--background-tertiary);
  9396. border-radius: 0;
  9397. }
  9398. #safety-tab .editCard_dfa091 .rulesScreeningItems__0ba16 > div,
  9399. #onboarding-tab .editCard_dfa091 .rulesScreeningItems__0ba16 > div {
  9400. border: none;
  9401. }
  9402. #safety-tab .editCard_dfa091 .containerPadding_cfd5a0,
  9403. #onboarding-tab .editCard_dfa091 .containerPadding_cfd5a0 {
  9404. padding: 24px;
  9405. }
  9406. #safety-tab .editCard_dfa091 .spacingContainer__99218 + .spacingContainer__99218,
  9407. #onboarding-tab .editCard_dfa091 .spacingContainer__99218 + .spacingContainer__99218 {
  9408. margin-top: 10px;
  9409. }
  9410. #safety-tab .editCard_dfa091 .cardContentsContainer__7b57a,
  9411. #safety-tab .editCard_dfa091 .cardContentsContainer__6d2b5,
  9412. #onboarding-tab .editCard_dfa091 .cardContentsContainer__7b57a,
  9413. #onboarding-tab .editCard_dfa091 .cardContentsContainer__6d2b5 {
  9414. margin: 6px 0 0 0;
  9415. padding: 0;
  9416. }
  9417. #safety-tab .editCard_dfa091 .triggerContainer__72e17,
  9418. #onboarding-tab .editCard_dfa091 .triggerContainer__72e17 {
  9419. background: var(--background-tertiary);
  9420. padding: 24px;
  9421. }
  9422. #safety-tab .editCard_dfa091 .triggerCounterContainer__4bd32,
  9423. #onboarding-tab .editCard_dfa091 .triggerCounterContainer__4bd32 {
  9424. margin: 0 10px 0 0;
  9425. }
  9426. #safety-tab .editCard_dfa091 .stepCountIcon_a27a70,
  9427. #onboarding-tab .editCard_dfa091 .stepCountIcon_a27a70 {
  9428. border-radius: 0;
  9429. background: none;
  9430. height: 30px;
  9431. width: 30px;
  9432. }
  9433. #safety-tab .editCard_dfa091 .stepCount__6c08c,
  9434. #onboarding-tab .editCard_dfa091 .stepCount__6c08c {
  9435. font-size: 18px;
  9436. font-weight: 700;
  9437. color: var(--brand-experiment);
  9438. }
  9439. #safety-tab .editCard_dfa091 .triggerMainContainer_c5139b,
  9440. #onboarding-tab .editCard_dfa091 .triggerMainContainer_c5139b {
  9441. border-radius: 0;
  9442. border: none;
  9443. padding: 0;
  9444. }
  9445. #safety-tab .input_f4043f,
  9446. #onboarding-tab .input_f4043f {
  9447. font-size: 14px;
  9448. font-weight: 300;
  9449. line-height: 22px;
  9450. border-radius: 2px;
  9451. background: var(--btn-grey);
  9452. border: none;
  9453. transition: none;
  9454. }
  9455. #safety-tab .input_f4043f:hover,
  9456. #onboarding-tab .input_f4043f:hover {
  9457. background: var(--btn-grey-hover-light);
  9458. }
  9459. #safety-tab .input_f4043f:focus, #safety-tab .input_f4043f:focus-within,
  9460. #onboarding-tab .input_f4043f:focus,
  9461. #onboarding-tab .input_f4043f:focus-within {
  9462. background: var(--background-modifier-accent-dark);
  9463. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  9464. }
  9465.  
  9466. .keywordsTextArea_d5eadb,
  9467. .textArea__3f404 {
  9468. font-size: 14px;
  9469. font-weight: 300;
  9470. line-height: 22px;
  9471. border-radius: 2px;
  9472. background: var(--btn-grey);
  9473. border: none;
  9474. transition: none;
  9475. }
  9476. .keywordsTextArea_d5eadb:hover,
  9477. .textArea__3f404:hover {
  9478. background: var(--btn-grey-hover-light);
  9479. }
  9480. .keywordsTextArea_d5eadb:focus, .keywordsTextArea_d5eadb:focus-within,
  9481. .textArea__3f404:focus,
  9482. .textArea__3f404:focus-within {
  9483. background: var(--background-modifier-accent-dark);
  9484. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  9485. }
  9486.  
  9487. .collapseable__71e46 {
  9488. background: none;
  9489. border-radius: 0;
  9490. padding: 10px 0 0 0;
  9491. border-top: thin solid var(--background-modifier-accent-dark);
  9492. }
  9493. .collapseable__71e46::before {
  9494. display: none;
  9495. }
  9496. .collapseable__71e46:active, .collapseable__71e46.toggled_bb1607:active {
  9497. background: none;
  9498. }
  9499. .collapseable__71e46 .arrow__23c57,
  9500. .collapseable__71e46 .arrow_ad7862 {
  9501. color: var(--brand-experiment);
  9502. }
  9503.  
  9504. .collapseable_ffe038 {
  9505. margin-top: 10px;
  9506. }
  9507.  
  9508. .collapseable__71e46:not(:last-child) {
  9509. margin-bottom: 10px;
  9510. }
  9511.  
  9512. .collapseable__0c992 {
  9513. margin-top: 0;
  9514. }
  9515.  
  9516. .dividierIcon__05be9 {
  9517. color: var(--brand-experiment);
  9518. }
  9519.  
  9520. .actionContainer__51bd9,
  9521. .keywordListContainer_fdf41c {
  9522. padding: 8px 24px 10px 16px;
  9523. background: var(--btn-grey);
  9524. border-radius: 2px;
  9525. }
  9526. .actionContainer__51bd9:not(:last-child),
  9527. .keywordListContainer_fdf41c:not(:last-child) {
  9528. margin-bottom: 10px;
  9529. }
  9530.  
  9531. .sidebarRegion__60457:has(.selected__5711d[aria-controls=audit_log-tab]) + .contentRegion__0bec1 {
  9532. overflow: hidden overlay !important;
  9533. }
  9534. .sidebarRegion__60457:has(.selected__5711d[aria-controls=audit_log-tab]) + .contentRegion__0bec1 .scroller__502b1 {
  9535. overflow: hidden overlay !important;
  9536. }
  9537. .sidebarRegion__60457:has(.selected__5711d[aria-controls=audit_log-tab]) + .contentRegion__0bec1 .customHeader__11c0b {
  9538. position: sticky;
  9539. display: flex;
  9540. align-items: center;
  9541. top: 0;
  9542. padding: 32px 24px;
  9543. margin-left: -24px;
  9544. z-index: 10;
  9545. transform: translateY(calc(var(--header-padding) * -1 + 8.5px + 18px));
  9546. background: linear-gradient(to bottom, var(--background-tertiary) calc(100% - 24px), transparent 100%);
  9547. justify-content: left;
  9548. }
  9549. .sidebarRegion__60457:has(.selected__5711d[aria-controls=audit_log-tab]) + .contentRegion__0bec1 .customHeader__11c0b h2 {
  9550. font-size: 22px;
  9551. line-height: 24px;
  9552. font-weight: 700;
  9553. margin-bottom: 0;
  9554. flex-grow: 0;
  9555. white-space: nowrap;
  9556. margin-right: 10px;
  9557. }
  9558. .sidebarRegion__60457:has(.selected__5711d[aria-controls=audit_log-tab]) + .contentRegion__0bec1 .divider_a26031 {
  9559. display: none;
  9560. }
  9561.  
  9562. .auditLog__6c805 {
  9563. border: none;
  9564. border-radius: 0;
  9565. }
  9566. .auditLog__6c805:hover, .auditLog__6c805:has(.headerExpanded__03c29) {
  9567. background: var(--background-accent);
  9568. transition: background 0.2s linear;
  9569. }
  9570. .auditLog__6c805:has(.typeDelete__1e939) .title_cbda04 {
  9571. color: var(--status-danger);
  9572. }
  9573. .auditLog__6c805:has(.typeUpdate__7c320) .title_cbda04 {
  9574. color: var(--info-warning-foreground);
  9575. }
  9576. .auditLog__6c805:has(.typeCreate__18a1f) .title_cbda04 {
  9577. color: var(--status-online);
  9578. }
  9579. .auditLog__6c805 .header_e08fd2 {
  9580. padding: 6px 8px;
  9581. height: 58px;
  9582. background: none;
  9583. }
  9584. .auditLog__6c805 .headerClickable_c4d7a9 {
  9585. color: var(--text-muted);
  9586. }
  9587. .auditLog__6c805 .timeWrap__554d7 {
  9588. margin: 0 0 0 12px;
  9589. }
  9590. .auditLog__6c805 .userHook_b1bf70 .defaultColor__77578 {
  9591. color: var(--header-primary);
  9592. }
  9593. .auditLog__6c805 .timestamp__2f935 {
  9594. color: var(--text-muted);
  9595. font-size: 12px;
  9596. line-height: 22px;
  9597. letter-spacing: 0.5px;
  9598. text-transform: uppercase;
  9599. font-weight: 700;
  9600. display: flex;
  9601. align-items: center;
  9602. }
  9603. .auditLog__6c805 .timestamp__2f935::before {
  9604. content: "";
  9605. display: block;
  9606. width: 16px;
  9607. height: 16px;
  9608. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/clock.svg);
  9609. mask: url(https://maendisease.github.io/Steam/illustrations/icns/clock.svg);
  9610. background: var(--text-muted);
  9611. margin-right: 4px;
  9612. }
  9613. .auditLog__6c805 .expand__7369a {
  9614. margin: 8px;
  9615. }
  9616. .auditLog__6c805 .expand__7369a .expandForeground_c53c75 {
  9617. stroke: var(--brand-experiment) !important;
  9618. }
  9619. .auditLog__6c805 .divider__1505d {
  9620. display: none;
  9621. }
  9622.  
  9623. #app-mount .headerExpanded__03c29 {
  9624. color: var(--header-secondary);
  9625. }
  9626. #app-mount .changeDetails_ecd760 {
  9627. background: var(--background-tertiary);
  9628. margin: 0 8px 6px 8px;
  9629. padding: 24px;
  9630. }
  9631. #app-mount .changeDetails_ecd760 .detail__8b8e8:first-child {
  9632. margin-top: 0;
  9633. }
  9634. #app-mount .changeDetails_ecd760 .detail__8b8e8 {
  9635. margin: 10px 0 0 0;
  9636. }
  9637. #app-mount .changeDetails_ecd760 .change_e04e1b {
  9638. font-size: 14px;
  9639. line-height: 18px;
  9640. color: var(--header-secondary);
  9641. }
  9642. #app-mount .changeDetails_ecd760 .subListItem__6cf39 {
  9643. margin: 0;
  9644. color: var(--header-primary);
  9645. }
  9646.  
  9647. .container__7b3c6 {
  9648. gap: 0;
  9649. padding: 0 24px 24px 24px;
  9650. width: unset;
  9651. }
  9652. .container__7b3c6 .sectionTitle_e32631 .title__3e421 {
  9653. position: sticky;
  9654. display: flex;
  9655. align-items: center;
  9656. top: 0;
  9657. padding: 32px 24px;
  9658. margin-left: -24px;
  9659. z-index: 10;
  9660. transform: translateY(calc(var(--header-padding) * -1 + 8.5px + 18px));
  9661. background: linear-gradient(to bottom, var(--background-tertiary) calc(100% - 24px), transparent 100%);
  9662. font-size: 22px;
  9663. line-height: 24px;
  9664. font-weight: 700;
  9665. margin-bottom: 0;
  9666. }
  9667.  
  9668. .bansSearchContainer_c0a0ae {
  9669. gap: 16px;
  9670. }
  9671. .bansSearchContainer_c0a0ae .searchBar_b46f4f {
  9672. border-radius: 2px;
  9673. transition-property: background, box-shadow;
  9674. transition-duration: 0.2s;
  9675. transition-timing-function: ease-out;
  9676. }
  9677. .bansSearchContainer_c0a0ae .searchBar_b46f4f .icon__37cc1 {
  9678. color: var(--brand-experiment);
  9679. }
  9680. .bansSearchContainer_c0a0ae .searchBar_b46f4f input::-moz-placeholder {
  9681. color: #fff;
  9682. font-size: 16px;
  9683. line-height: 20px;
  9684. font-weight: 600;
  9685. }
  9686. .bansSearchContainer_c0a0ae .searchBar_b46f4f input,
  9687. .bansSearchContainer_c0a0ae .searchBar_b46f4f input::placeholder {
  9688. color: #fff;
  9689. font-size: 16px;
  9690. line-height: 20px;
  9691. font-weight: 600;
  9692. }
  9693. .bansSearchContainer_c0a0ae .searchBar_b46f4f:hover:not(:focus, :focus-within) {
  9694. background: var(--btn-grey-hover);
  9695. box-shadow: var(--btn-grey-boxshadow);
  9696. }
  9697. .bansSearchContainer_c0a0ae .searchBar_b46f4f:focus, .bansSearchContainer_c0a0ae .searchBar_b46f4f:focus-within {
  9698. background: var(--btn-grey);
  9699. }
  9700.  
  9701. .scrollerContainer_c3503a {
  9702. height: 100%;
  9703. padding: 0;
  9704. border-radius: 0;
  9705. background: none;
  9706. box-shadow: none;
  9707. margin-top: 10px;
  9708. }
  9709. .scrollerContainer_c3503a .listItems__699d1 {
  9710. inset: 0 !important;
  9711. }
  9712.  
  9713. .bannedUser__38b44 {
  9714. cursor: pointer;
  9715. border-radius: 0;
  9716. background: none;
  9717. transition: none;
  9718. }
  9719. #app-mount .bannedUser__38b44 {
  9720. box-shadow: none;
  9721. }
  9722. .bannedUser__38b44:hover {
  9723. background: var(--background-accent);
  9724. transition: background 0.2s linear;
  9725. }
  9726.  
  9727. #community-tab .upsellContainer__978df {
  9728. padding: 8px 24px 10px 16px;
  9729. background: var(--btn-grey);
  9730. border-radius: 2px;
  9731. }
  9732. #community-tab .upsellContainer__978df .upsellFooter__63475 {
  9733. background: none;
  9734. padding: 0;
  9735. }
  9736.  
  9737. .contentRegionScroller__86c79:has(#onboarding-tab .upsellContainer__7de10) {
  9738. background: #000;
  9739. }
  9740.  
  9741. #app-mount .layer__2efaa ~ .layer__2efaa .contentColumnDefault_c66386#onboarding-tab {
  9742. padding: 0 !important;
  9743. }
  9744.  
  9745. #onboarding-tab .upsellContainer__7de10 {
  9746. gap: 0;
  9747. }
  9748. #onboarding-tab .upsellHeader__70021 {
  9749. position: relative;
  9750. }
  9751. #onboarding-tab .upsellHeader__70021 > * {
  9752. z-index: 1;
  9753. }
  9754. #onboarding-tab .upsellHeader__70021::after {
  9755. content: "";
  9756. z-index: 0;
  9757. position: absolute;
  9758. inset: 0;
  9759. width: 100%;
  9760. height: 100%;
  9761. background: linear-gradient(135deg, hsl(36, calc(var(--saturation-factor, 1) * 95.6%), 64.7%) 48%, hsl(40, calc(var(--saturation-factor, 1) * 52.7%), 52.7%) 55%);
  9762. -webkit-mask: radial-gradient(circle at center, black 0%, transparent 45%);
  9763. mask: radial-gradient(circle at center, black 0%, transparent 45%);
  9764. }
  9765. #onboarding-tab .upsellHeader__70021 .upsellHeaderText__3a94b {
  9766. padding-left: 5em;
  9767. padding-right: 5em;
  9768. }
  9769. #onboarding-tab .divider__2bbbc {
  9770. display: none;
  9771. }
  9772. #onboarding-tab .testimonialHeroContainer__4a355 {
  9773. background: linear-gradient(137.42deg, #00d5ff 0%, #d0266f 40%, #b9b500 100%);
  9774. background-size: 300% 300%;
  9775. animation: nitroGradient 20s ease infinite;
  9776. max-width: unset;
  9777. margin-top: 5em;
  9778. margin-bottom: 0;
  9779. padding-bottom: 4em;
  9780. padding-top: 4em;
  9781. border-radius: 0;
  9782. }
  9783. #onboarding-tab .testimonialHeroContainer__4a355 .animatedContainer__889a5 {
  9784. background: rgba(255, 255, 255, 0.0588235294);
  9785. border-radius: 3px;
  9786. padding: 20px;
  9787. }
  9788. #onboarding-tab .testimonialHeroContainer__4a355 .testimonial__1b63f {
  9789. padding: 0;
  9790. min-height: unset;
  9791. --header-secondary: var(--header-primary);
  9792. --interactive-normal: var(--header-primary);
  9793. }
  9794. #onboarding-tab .testimonialHeroContainer__4a355 .testimonial__1b63f [data-text-variant="text-sm/medium"] {
  9795. font-weight: 400;
  9796. }
  9797. #onboarding-tab .testimonialHeroContainer__4a355 .testimonialControlIcon_ed1b83,
  9798. #onboarding-tab .testimonialHeroContainer__4a355 .testimonialControlInner__30b9d {
  9799. height: 24px;
  9800. width: 24px;
  9801. }
  9802. #onboarding-tab .valuesContainer_bede97 {
  9803. background: #fff;
  9804. padding: 4em 24px;
  9805. }
  9806. #onboarding-tab .valuesContainer_bede97 .valueText__44bea [data-text-variant="heading-md/semibold"] {
  9807. font-size: 18px;
  9808. font-weight: 700;
  9809. line-height: 20px;
  9810. color: #1b1b1b;
  9811. }
  9812. #onboarding-tab .valuesContainer_bede97 .valueText__44bea [data-text-variant="text-sm/normal"] {
  9813. font-size: 13px;
  9814. line-height: 18px;
  9815. font-weight: 700;
  9816. color: #1b1b1b;
  9817. }
  9818.  
  9819. .onboardingContainer__86f3a {
  9820. padding: 24px;
  9821. gap: 0;
  9822. }
  9823. .onboardingContainer__86f3a:has(.upsellContainer__7de10) {
  9824. padding: 0;
  9825. }
  9826. .onboardingContainer__86f3a .channelBrowser__4d723 {
  9827. width: 50%;
  9828. }
  9829. .onboardingContainer__86f3a .container__52fd4 {
  9830. width: 50%;
  9831. margin-left: 16px;
  9832. }
  9833. .onboardingContainer__86f3a .container__52fd4 .header__8e9c1 {
  9834. width: 100%;
  9835. }
  9836.  
  9837. .educationUpsell_ee1637 {
  9838. background: var(--background-accent);
  9839. border-radius: 0;
  9840. }
  9841. .educationUpsell_ee1637 .container__2e9ff {
  9842. box-shadow: 3px 3px 5px -3px #000;
  9843. border-radius: 0;
  9844. }
  9845. .educationUpsell_ee1637 .container__2e9ff .header_e9e239 {
  9846. line-height: 22px;
  9847. margin-bottom: 10px;
  9848. }
  9849. .educationUpsell_ee1637 .lookFilled__19298.colorBrand_b2253e {
  9850. box-shadow: var(--btn-grey-boxshadow);
  9851. }
  9852.  
  9853. .error_f5f3e1 {
  9854. border-radius: 3px;
  9855. font-size: 14px;
  9856. line-height: 18px;
  9857. font-weight: 400;
  9858. }
  9859.  
  9860. .developerPortalCtaWrapper__21172 {
  9861. background: var(--btn-grey);
  9862. border-radius: 2px;
  9863. }
  9864.  
  9865. .checklistContainer-12xGp5,
  9866. .checklist__88646 {
  9867. display: flex;
  9868. flex-direction: column;
  9869. background: none;
  9870. border-radius: 0;
  9871. margin: 0 32px;
  9872. }
  9873. .checklistContainer-12xGp5 .separator__26ad8,
  9874. .checklist__88646 .separator__26ad8 {
  9875. display: none;
  9876. }
  9877.  
  9878. .checklistItem__9f80c {
  9879. padding: 8px 24px 10px 16px;
  9880. background: var(--btn-grey);
  9881. border-radius: 2px;
  9882. margin-bottom: 10px;
  9883. }
  9884. .checklistItem__9f80c:has([d*="M10 0C4.486 0 0 4.486 0 10C0"]) {
  9885. order: 1;
  9886. }
  9887. .checklistItem__9f80c:has(.checked__24ad6) {
  9888. order: 2;
  9889. }
  9890.  
  9891. .featureCard__0a441 {
  9892. padding: 8px 16px 10px 16px;
  9893. border-radius: 2px;
  9894. text-align: center;
  9895. background: var(--btn-grey);
  9896. }
  9897.  
  9898. .featureIcon__48a2c {
  9899. background: none;
  9900. border-radius: 0;
  9901. margin: 6px auto;
  9902. height: 30px;
  9903. width: 30px;
  9904. }
  9905. .featureIcon__48a2c svg {
  9906. height: 30px;
  9907. width: 30px;
  9908. }
  9909.  
  9910. .featureHeader_f6953f {
  9911. font-size: 16px;
  9912. font-weight: 400;
  9913. line-height: 20px;
  9914. margin-bottom: 0;
  9915. }
  9916.  
  9917. .discoverPreview_bfdd96 {
  9918. margin-top: 24px;
  9919. }
  9920. .discoverPreview_bfdd96 .card__81c50 {
  9921. width: 33.3333333333%;
  9922. background: var(--btn-grey);
  9923. border-radius: 2px;
  9924. }
  9925.  
  9926. #app-mount .sidebarRegion__60457:has(.selected__5711d[aria-controls=role_subscriptions-tab]) + .contentRegion__0bec1 .contentColumnDefault_c66386 {
  9927. padding: 0 !important;
  9928. }
  9929. #app-mount .sidebarRegion__60457:has(.selected__5711d[aria-controls=role_subscriptions-tab]) + .contentRegion__0bec1 .contentRegionScroller__86c79 {
  9930. padding-top: 0;
  9931. }
  9932.  
  9933. .contentRegionScroller__86c79:has(.howItWorksContainer_ef4386) {
  9934. background: #000;
  9935. }
  9936. .contentRegionScroller__86c79:has(.howItWorksContainer_ef4386) .settingsContent__75a7e {
  9937. margin-right: 0;
  9938. }
  9939. .contentRegionScroller__86c79:has(.howItWorksContainer_ef4386) .card_bc6ee2 {
  9940. background: none;
  9941. border-radius: 0;
  9942. }
  9943. .contentRegionScroller__86c79:has(.howItWorksContainer_ef4386) .divider__2bbbc {
  9944. display: none;
  9945. }
  9946. .contentRegionScroller__86c79:has(.howItWorksContainer_ef4386) .container__9547a > div:has(.howItWorksContainer_ef4386) {
  9947. background: linear-gradient(137.42deg, #00d5ff 0%, #d0266f 40%, #b9b500 100%);
  9948. background-size: 300% 300%;
  9949. animation: nitroGradient 20s ease infinite;
  9950. max-width: unset;
  9951. margin-bottom: 0;
  9952. padding-bottom: 4em;
  9953. padding-top: 4em;
  9954. }
  9955. .contentRegionScroller__86c79:has(.howItWorksContainer_ef4386) .container__9547a > div:has(> .creatorBenefitsContainer__2e05e) {
  9956. background: #fff;
  9957. padding-top: 4em;
  9958. padding-bottom: 4em;
  9959. --header-primary: #1b1b1b;
  9960. --header-secondary: #1b1b1b;
  9961. }
  9962. .contentRegionScroller__86c79:has(.howItWorksContainer_ef4386) .container__9547a > div:has(> .creatorBenefitsContainer__2e05e) .earningsPreviewContainer__775cb {
  9963. background: rgba(0, 0, 0, 0.2) !important;
  9964. }
  9965. .contentRegionScroller__86c79:has(.howItWorksContainer_ef4386) .container__9547a > div:has(> .creatorBenefitsContainer__2e05e) .avatarCard_edc99c {
  9966. background: rgba(0, 0, 0, 0.2);
  9967. }
  9968. .contentRegionScroller__86c79:has(.howItWorksContainer_ef4386) .container__9547a > div:has(> .creatorBenefitsContainer__2e05e) .revenueSharePercentageDark__68593 {
  9969. text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  9970. }
  9971. .contentRegionScroller__86c79:has(.howItWorksContainer_ef4386) .container__9547a > div:last-child {
  9972. padding: 4em 5em;
  9973. }
  9974. .contentRegionScroller__86c79:has(.howItWorksContainer_ef4386) .container__9547a > div:last-child .guildCardHeaderAvatar__47b9e {
  9975. border-radius: 2px;
  9976. }
  9977. .contentRegionScroller__86c79:has(.howItWorksContainer_ef4386) .container__9547a > div:last-child .guildCardQuote_b4f165 [data-text-variant="text-lg/normal"] {
  9978. font-size: 16px;
  9979. line-height: 20px;
  9980. font-weight: 400;
  9981. }
  9982. .contentRegionScroller__86c79:has(.howItWorksContainer_ef4386) .container__9547a > div:last-child .guildCardQuote_b4f165 [data-text-variant="text-md/normal"] {
  9983. --interactive-active: var(--text-muted);
  9984. font-size: 14px;
  9985. line-height: 18px;
  9986. font-weight: 400;
  9987. }
  9988.  
  9989. .howItWorksContainer_ef4386 {
  9990. background: none;
  9991. border-radius: 0;
  9992. gap: 20px;
  9993. }
  9994.  
  9995. #app-mount .howItWorksCard__6ff71 {
  9996. background: rgba(255, 255, 255, 0.0588235294);
  9997. border-radius: 3px;
  9998. padding: 20px;
  9999. }
  10000.  
  10001. .howItWorksImageContainer__91f71 {
  10002. background: none;
  10003. padding: 0;
  10004. }
  10005.  
  10006. .howItWorksContainer_ef4386 + span {
  10007. display: none !important;
  10008. }
  10009. .howItWorksContainer_ef4386 + span + [data-text-variant="text-sm/normal"] {
  10010. font-style: italic;
  10011. font-size: 12px;
  10012. font-weight: 500;
  10013. }
  10014.  
  10015. .sidebarRegion__60457:has(.selected__5711d[aria-controls=members-tab]) + .contentRegion__0bec1 .membersCount-1G86bs {
  10016. margin-bottom: 0;
  10017. }
  10018. .sidebarRegion__60457:has(.selected__5711d[aria-controls=members-tab]) + .contentRegion__0bec1 .quickSelect_ae48d2 {
  10019. padding-top: 0;
  10020. padding-bottom: 0;
  10021. }
  10022. .sidebarRegion__60457:has(.selected__5711d[aria-controls=members-tab]) + .contentRegion__0bec1 .searchBar-3joS_I {
  10023. border-radius: 2px;
  10024. transition: padding 0.3s cubic-bezier(0.16, 0.86, 0.43, 0.99);
  10025. }
  10026. .sidebarRegion__60457:has(.selected__5711d[aria-controls=members-tab]) + .contentRegion__0bec1 .searchBar-3joS_I:hover {
  10027. padding-left: 8px;
  10028. padding-right: 8px;
  10029. background: var(--btn-grey-hover);
  10030. box-shadow: var(--btn-grey-boxshadow);
  10031. }
  10032. .sidebarRegion__60457:has(.selected__5711d[aria-controls=members-tab]) + .contentRegion__0bec1 .searchBar-3joS_I .icon__37cc1 {
  10033. color: var(--brand-experiment);
  10034. }
  10035.  
  10036. #app-mount .member-2cj2PI {
  10037. box-shadow: none;
  10038. }
  10039. #app-mount .member-2cj2PI .overflowIconFg-29oz-o {
  10040. fill: var(--brand-experiment);
  10041. }
  10042.  
  10043. .member-2cj2PI {
  10044. padding-left: 8px;
  10045. padding-right: 8px;
  10046. }
  10047. .member-2cj2PI:hover {
  10048. background: var(--background-accent);
  10049. transition: background 0.2s linear;
  10050. }
  10051. .member-2cj2PI:hover .overflowIcon-863s2Z {
  10052. opacity: 1;
  10053. }
  10054. .member-2cj2PI:hover .role__631a3,
  10055. .member-2cj2PI:hover .addButton_c648bf {
  10056. background-color: var(--background-accent-hover);
  10057. transition: background 0.2s linear;
  10058. }
  10059. .member-2cj2PI .name-3IqW9M {
  10060. font-size: 16px;
  10061. line-height: 20px;
  10062. }
  10063. .member-2cj2PI .role__631a3 {
  10064. background: var(--btn-grey);
  10065. border-radius: 3px;
  10066. }
  10067. .member-2cj2PI .addButton_c648bf {
  10068. border-radius: 2px;
  10069. background: var(--btn-grey);
  10070. color: var(--brand-experiment);
  10071. transition-property: background, box-shadow;
  10072. transition-duration: 0.2s;
  10073. transition-timing-function: ease-out;
  10074. }
  10075. .member-2cj2PI .addButton_c648bf:hover {
  10076. background: var(--btn-grey-hover);
  10077. box-shadow: var(--btn-grey-boxshadow);
  10078. }
  10079.  
  10080. #app-mount .inviteSettingsInviteRow__0d747 {
  10081. box-shadow: none;
  10082. }
  10083.  
  10084. .inviteSettingsInviteRow__0d747 {
  10085. padding-left: 8px;
  10086. padding-right: 8px;
  10087. }
  10088. .inviteSettingsInviteRow__0d747:hover {
  10089. background: var(--background-accent);
  10090. transition: background 0.2s linear;
  10091. }
  10092. .inviteSettingsInviteRow__0d747 .wrapper_edb6e0 {
  10093. top: 8px;
  10094. }
  10095. .inviteSettingsInviteRow__0d747 .wrapper_edb6e0::before {
  10096. display: none;
  10097. }
  10098. .inviteSettingsInviteRow__0d747 .username__92ef4 {
  10099. margin-left: 15px;
  10100. }
  10101. .inviteSettingsInviteRow__0d747 [data-text-variant="text-xs/normal"] {
  10102. margin-left: 36px;
  10103. --header-secondary: var(--text-muted);
  10104. font-size: 12px;
  10105. letter-spacing: 0.5px;
  10106. text-transform: uppercase;
  10107. font-weight: 700;
  10108. }
  10109.  
  10110. .settingCard-xZSDjS {
  10111. background: var(--btn-grey);
  10112. border-radius: 2px;
  10113. padding: 8px 24px 10px 16px;
  10114. }
  10115. .settingCard-xZSDjS .cardContent-1-5hym {
  10116. padding: unset;
  10117. }
  10118. .settingCard-xZSDjS.active-3EK-ed {
  10119. background: var(--background-accent);
  10120. transition: background 0.2s linear;
  10121. }
  10122. .settingCard-xZSDjS .cardIcon-2nTUq4 {
  10123. color: var(--gpColor-Yellow);
  10124. margin-right: 6px;
  10125. }
  10126. .settingCard-xZSDjS [data-text-variant="text-md/semibold"] {
  10127. color: var(--header-primary);
  10128. font-weight: 400;
  10129. margin: 0;
  10130. }
  10131. .settingCard-xZSDjS .cardDescription-28p4PG {
  10132. color: var(--header-secondary) !important;
  10133. padding: 0;
  10134. font-size: 13px;
  10135. line-height: 18px;
  10136. }
  10137. .settingCard-xZSDjS .cardFolder-3H4uH4 {
  10138. margin-top: 10px;
  10139. background: var(--background-tertiary);
  10140. border-radius: 0;
  10141. }
  10142.  
  10143. .sidebarScrollable__4aad1 .scroller__52680 {
  10144. background: none;
  10145. }
  10146. .sidebarScrollable__4aad1 .scroller__52680 .header_f72511 {
  10147. padding: 0 10px 10px 10px;
  10148. color: var(--text-muted);
  10149. transition-property: color;
  10150. transition-duration: 0.2s;
  10151. transition-timing-function: ease-out;
  10152. }
  10153. .sidebarScrollable__4aad1 .scroller__52680 .header_f72511:hover {
  10154. color: #fff;
  10155. }
  10156. .sidebarScrollable__4aad1 .scroller__52680 .header_f72511 .sidebarHeader-1rstuK {
  10157. opacity: 1;
  10158. transition: none;
  10159. }
  10160. .sidebarScrollable__4aad1 .scroller__52680 .header_f72511 .headerText__94c22 {
  10161. font-size: 14px;
  10162. line-height: 18px;
  10163. }
  10164. .sidebarScrollable__4aad1 .scroller__52680 .item__48dda {
  10165. padding-top: 6px;
  10166. padding-bottom: 6px;
  10167. margin-bottom: 2px;
  10168. border-radius: 0;
  10169. font-size: 14px;
  10170. line-height: 18px;
  10171. --interactive-active: var(--header-secondary);
  10172. }
  10173. #app-mount .sidebarScrollable__4aad1 .scroller__52680 .item__48dda:hover:not(.selected__5711d) {
  10174. background: var(--contextmenu-text);
  10175. --interactive-hover: var(--background-accent);
  10176. --interactive-active: var(--background-accent);
  10177. --header-primary: var(--background-accent);
  10178. }
  10179. #app-mount .sidebarScrollable__4aad1 .scroller__52680 .item__48dda.selected__5711d {
  10180. background: var(--background-accent);
  10181. color: #fff;
  10182. --header-primary: #fff;
  10183. --interactive-active: #fff;
  10184. }
  10185.  
  10186. .group__6ae8b {
  10187. display: grid;
  10188. grid-auto-flow: column;
  10189. border: none;
  10190. border-radius: 2px;
  10191. --btn-count: 3;
  10192. background: var(--darker-grey);
  10193. box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.6666666667);
  10194. position: relative;
  10195. }
  10196. .group__6ae8b::before {
  10197. content: "";
  10198. position: absolute;
  10199. height: 100%;
  10200. width: calc(100% / var(--btn-count));
  10201. background: var(--status-danger);
  10202. transition: translate 0.2s ease, background 0.2s ease;
  10203. border-radius: 2px;
  10204. z-index: 0;
  10205. }
  10206. .group__6ae8b:has(.passthrough__7cd54.selected__47401):before {
  10207. translate: 100%;
  10208. background: var(--btn-grey-hover);
  10209. }
  10210. .group__6ae8b:has(.allow_bbc621.selected__47401):before {
  10211. translate: 200%;
  10212. background: var(--gpColor-Green);
  10213. }
  10214. .group__6ae8b .item_f48d11 {
  10215. background: none;
  10216. z-index: 1;
  10217. transition: color 0.2s ease;
  10218. }
  10219. .group__6ae8b .item_f48d11.passthrough__7cd54 {
  10220. color: var(--btn-grey-hover);
  10221. }
  10222. .group__6ae8b .item_f48d11.passthrough__7cd54.selected__47401 {
  10223. color: #fff;
  10224. }
  10225.  
  10226. .theme-dark #app-mount .theme-light .root_a28985 {
  10227. --text-normal: hsl(calc(var(--accent-hue) + 11) calc(var(--saturation-factor, 1)*7.7%) 87.3%);
  10228. }
  10229. .theme-dark #app-mount .theme-light .root_a28985 .header__6d5ea [data-text-variant="heading-xl/semibold"] {
  10230. color: #fff;
  10231. font-size: 22px;
  10232. font-weight: 700;
  10233. line-height: 24px;
  10234. width: 100%;
  10235. text-align: left;
  10236. }
  10237. .theme-dark #app-mount .theme-light .root_a28985 .header__6d5ea [data-text-variant="text-md/normal"] {
  10238. margin-top: 10px;
  10239. text-align: left;
  10240. width: 100%;
  10241. }
  10242. .theme-dark #app-mount .theme-light .root_a28985 .header-oub2Vc .title-1LqMUp {
  10243. margin: 0;
  10244. }
  10245. .theme-dark #app-mount .theme-light .root_a28985 .header-oub2Vc [data-text-variant="text-sm/normal"] {
  10246. margin-top: 10px;
  10247. text-align: left;
  10248. width: 100%;
  10249. }
  10250. .theme-dark #app-mount .theme-light .root_a28985 form .input-m1-Y7Q {
  10251. background: none;
  10252. border-radius: 0;
  10253. }
  10254. .theme-dark #app-mount .theme-light .root_a28985 form .input-m1-Y7Q input::-moz-placeholder {
  10255. color: var(--text-muted);
  10256. }
  10257. .theme-dark #app-mount .theme-light .root_a28985 form .input-m1-Y7Q input::placeholder {
  10258. color: var(--text-muted);
  10259. }
  10260. .theme-dark #app-mount .theme-light .root_a28985 .sampleLink-5BWNy9 {
  10261. color: var(--text-muted);
  10262. }
  10263. .theme-dark #app-mount .theme-light .root_a28985 .rowContainer-3t7486 {
  10264. border-radius: 2px;
  10265. padding: 6px 8px;
  10266. background: var(--btn-brand);
  10267. color: var(--btn-brand-text);
  10268. margin-bottom: 10px;
  10269. }
  10270. .theme-dark #app-mount .theme-light .root_a28985 .rowContainer-3t7486:hover {
  10271. background: var(--btn-brand-hover);
  10272. color: #fff;
  10273. }
  10274. .theme-dark #app-mount .theme-light .root_a28985 .rowContainer-3t7486 .rowIcon-1mRvtM {
  10275. background: var(--green-360);
  10276. border-radius: 2px;
  10277. }
  10278. .theme-dark #app-mount .theme-light .root_a28985 .rowContainer-3t7486 h2 {
  10279. color: inherit;
  10280. font-weight: 400;
  10281. }
  10282. .theme-dark #app-mount .theme-light .root_a28985 .rowContainer-3t7486 .rowText-3MQqQi {
  10283. color: inherit;
  10284. line-height: 12px;
  10285. margin-top: 4px;
  10286. }
  10287. .theme-dark #app-mount .theme-light .root_a28985 .rowContainer-3t7486 .rowArrow-TIwwIc {
  10288. height: 18px;
  10289. width: 18px;
  10290. margin: 8px;
  10291. }
  10292. .theme-dark #app-mount .theme-light .root_a28985 .footer__89240 {
  10293. position: absolute;
  10294. bottom: 0;
  10295. justify-content: right;
  10296. width: 100%;
  10297. box-sizing: border-box;
  10298. gap: 10px;
  10299. flex-flow: row nowrap;
  10300. }
  10301. .theme-dark #app-mount .theme-light .root_a28985 .footer__89240 .footerTitle-3Bslxi {
  10302. margin-bottom: 0;
  10303. font-size: 13px;
  10304. line-height: 18px;
  10305. font-weight: 400;
  10306. color: var(--text-muted);
  10307. letter-spacing: 0;
  10308. }
  10309. .theme-dark #app-mount .theme-light .root_a28985 .content__764ce {
  10310. margin-bottom: 102px;
  10311. }
  10312. .theme-dark #app-mount .theme-light .root_a28985 .templatesList-uohY49 {
  10313. margin-top: 0;
  10314. }
  10315. .theme-dark #app-mount .theme-light .root_a28985 .optionHeader-27AHfD {
  10316. color: var(--text-muted) !important;
  10317. font-size: 12px;
  10318. line-height: 22px;
  10319. letter-spacing: 0.5px;
  10320. text-transform: uppercase;
  10321. font-weight: 700;
  10322. }
  10323. .theme-dark #app-mount .theme-light .root_a28985 .container-x8Y1ix {
  10324. border-radius: 2px;
  10325. border: none;
  10326. background: var(--btn-grey);
  10327. margin-bottom: 10px;
  10328. transition-property: background, box-shadow, color;
  10329. transition-duration: 0.2s;
  10330. transition-timing-function: ease-out;
  10331. }
  10332. .theme-dark #app-mount .theme-light .root_a28985 .container-x8Y1ix [data-text-variant="text-md/bold"] {
  10333. color: var(--text-lighter);
  10334. font-weight: 400;
  10335. transition: color 0.2s ease-in-out;
  10336. }
  10337. .theme-dark #app-mount .theme-light .root_a28985 .container-x8Y1ix:hover {
  10338. background: var(--btn-grey-hover);
  10339. box-shadow: var(--btn-grey-boxshadow);
  10340. }
  10341. .theme-dark #app-mount .theme-light .root_a28985 .container-x8Y1ix:hover [data-text-variant="text-md/bold"] {
  10342. color: #fff;
  10343. }
  10344. .theme-dark #app-mount .theme-light .root_a28985 .container-x8Y1ix:has(.arrow-2yY1Tm)::after {
  10345. content: "";
  10346. display: block;
  10347. width: 24px;
  10348. height: 24px;
  10349. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/discordrightarrow.svg);
  10350. mask: url(https://maendisease.github.io/Steam/illustrations/icns/discordrightarrow.svg);
  10351. background: var(--brand-experiment);
  10352. margin: 16px 16px 16px auto;
  10353. }
  10354. .theme-dark #app-mount .theme-light .root_a28985 .container-x8Y1ix:has(.arrow-2yY1Tm) .arrow-2yY1Tm {
  10355. display: none;
  10356. }
  10357. .theme-dark #app-mount .theme-light .root_a28985 .button_afdfd9:not(.close__1080c) {
  10358. height: 34px;
  10359. min-height: 34px;
  10360. padding: 8px 14px;
  10361. }
  10362. .theme-dark #app-mount .theme-light .root_a28985 .button_afdfd9:not(.close__1080c).lookBlank__7ca0a {
  10363. color: var(--text-lighter);
  10364. background: var(--btn-grey);
  10365. transition-property: background, box-shadow, color;
  10366. transition-duration: 0.2s;
  10367. transition-timing-function: ease-out;
  10368. box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  10369. }
  10370. .theme-dark #app-mount .theme-light .root_a28985 .button_afdfd9:not(.close__1080c).lookBlank__7ca0a:hover {
  10371. background: var(--btn-grey-hover);
  10372. color: #fff;
  10373. box-shadow: var(--btn-grey-boxshadow);
  10374. }
  10375.  
  10376. .root_a28985:has([src="/assets/b6508869eb1b93a8e54729ac86985599.png"]) .header__6d5ea h1 {
  10377. font-size: 22px;
  10378. font-weight: 700;
  10379. line-height: 24px;
  10380. }
  10381.  
  10382. video:has([src="/assets/b6508869eb1b93a8e54729ac86985599.png"]) {
  10383. width: 100%;
  10384. height: 120px;
  10385. margin-bottom: 10px;
  10386. }
  10387.  
  10388. .banReasonOtherClickable-8EKPlQ {
  10389. color: var(--text-lighter);
  10390. background: var(--btn-grey);
  10391. transition-property: background, box-shadow, color;
  10392. transition-duration: 0.2s;
  10393. transition-timing-function: ease-out;
  10394. border-radius: 2px;
  10395. padding: 8px 14px;
  10396. margin-top: 10px;
  10397. }
  10398. .banReasonOtherClickable-8EKPlQ:hover {
  10399. background: var(--btn-grey-hover);
  10400. color: #fff;
  10401. }
  10402. .banReasonOtherClickable-8EKPlQ [data-text-variant="text-md/medium"] {
  10403. font-size: 14px;
  10404. font-weight: 400;
  10405. }
  10406. .banReasonOtherClickable-8EKPlQ svg {
  10407. color: var(--brand-experiment);
  10408. }
  10409.  
  10410. .image-ZPv20Y {
  10411. border-radius: 2px;
  10412. }
  10413.  
  10414. .root_a28985:has(.overviewSteps-eGJA8e) .sequencer-3ojOk0 {
  10415. padding: 32px 0 0 0;
  10416. }
  10417. .root_a28985:has(.overviewSteps-eGJA8e) .content--gAC_W img {
  10418. position: absolute;
  10419. top: 0;
  10420. right: 0;
  10421. }
  10422. .root_a28985:has(.overviewSteps-eGJA8e) .content--gAC_W .header-3h1Ldm,
  10423. .root_a28985:has(.overviewSteps-eGJA8e) .content--gAC_W .headerCaption-3Tw9SO,
  10424. .root_a28985:has(.overviewSteps-eGJA8e) .content--gAC_W .updatedHeader-W47DUA {
  10425. margin-right: 100px;
  10426. text-align: left;
  10427. }
  10428. .root_a28985:has(.overviewSteps-eGJA8e) .header-3h1Ldm,
  10429. .root_a28985:has(.overviewSteps-eGJA8e) .updatedHeader-W47DUA {
  10430. margin-top: 0;
  10431. margin-bottom: 0;
  10432. }
  10433. .root_a28985:has(.overviewSteps-eGJA8e) .button_afdfd9 {
  10434. height: 34px;
  10435. min-height: 34px;
  10436. padding: 8px 14px;
  10437. }
  10438. .root_a28985:has(.overviewSteps-eGJA8e) .roleRow-3AipPg {
  10439. border-radius: 2px;
  10440. background: var(--btn-grey);
  10441. }
  10442. .root_a28985:has(.overviewSteps-eGJA8e) .tableContainer-ElCMnk {
  10443. padding: 8px 24px 10px 16px;
  10444. background: var(--btn-grey);
  10445. border-radius: 2px;
  10446. }
  10447.  
  10448. .checkboxWrapper__02583.row_f4c450,
  10449. .checkboxWrapper__02583.row_f4c450.checked__24ad6 {
  10450. background: var(--btn-grey);
  10451. border-radius: 2px;
  10452. transition-property: background, box-shadow, color;
  10453. transition-duration: 0.2s;
  10454. transition-timing-function: ease-out;
  10455. }
  10456. .checkboxWrapper__02583.row_f4c450:hover,
  10457. .checkboxWrapper__02583.row_f4c450.checked__24ad6:hover {
  10458. background: var(--btn-grey-hover);
  10459. color: #fff;
  10460. box-shadow: var(--btn-grey-boxshadow);
  10461. }
  10462.  
  10463. #app-mount .message__04d9f {
  10464. background: var(--banner-red);
  10465. box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
  10466. border-radius: 2px;
  10467. }
  10468. #app-mount .message__04d9f .header__39b23 {
  10469. opacity: 1;
  10470. }
  10471.  
  10472. .uploadModal_eae2a0 .inner__7afe9 {
  10473. margin: 32px 32px 0 32px;
  10474. z-index: 102;
  10475. }
  10476. .uploadModal_eae2a0 .inner__7afe9 .file_f309f6 .description__4ba40 .filename__06077 {
  10477. padding: 0;
  10478. }
  10479. .uploadModal_eae2a0 .inner__7afe9 .comment__3f7b9 {
  10480. margin: 0 32px;
  10481. }
  10482. .uploadModal_eae2a0 .inner__7afe9 .comment__3f7b9 .label__7d3d6 {
  10483. color: var(--text-muted);
  10484. font-size: 14px;
  10485. letter-spacing: 0.5px;
  10486. line-height: 36px;
  10487. font-weight: 700;
  10488. }
  10489. .uploadModal_eae2a0 .inner__7afe9 .channelTextAreaUpload__5c0be {
  10490. margin: 0 0 10px 0;
  10491. }
  10492. .uploadModal_eae2a0 .icon__25b13 {
  10493. filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
  10494. }
  10495. .uploadModal_eae2a0 .footerRightAlign__1a6b5 {
  10496. gap: 4px;
  10497. }
  10498.  
  10499. .root_a28985 .contentWrapper__85d37 {
  10500. background: var(--modal-background);
  10501. border-radius: 0;
  10502. }
  10503. .root_a28985 .contentWrapper__85d37 .guildIcon_c65171 {
  10504. background-color: var(--background-accent);
  10505. box-shadow: 0 0 5px 0 #000000;
  10506. margin-bottom: 15px;
  10507. }
  10508. .root_a28985 .contentWrapper__85d37 .guildIcon_c65171 .icon_c48348 {
  10509. border-radius: 0;
  10510. }
  10511. .root_a28985 .contentWrapper__85d37 .title__0a681 {
  10512. font-size: 22px;
  10513. font-weight: 700;
  10514. margin-top: 10px;
  10515. }
  10516. .root_a28985 .contentWrapper__85d37 .activityCount__4b9d0 {
  10517. margin-top: 10px;
  10518. }
  10519. .root_a28985 .contentWrapper__85d37 .pillMessage__48334 {
  10520. font-size: 14px;
  10521. line-height: 18px;
  10522. }
  10523. .root_a28985 .contentWrapper__85d37 .noThanksButton__67b42 {
  10524. width: 100%;
  10525. }
  10526. .root_a28985 .contentWrapper__85d37 .button_afdfd9 {
  10527. height: 34px;
  10528. min-height: 34px;
  10529. padding: 8px 14px;
  10530. }
  10531. .root_a28985 .contentWrapper__85d37 .button_afdfd9.lookLink__93965 {
  10532. background: var(--btn-grey);
  10533. transition-property: background, box-shadow, color;
  10534. transition-duration: 0.2s;
  10535. transition-timing-function: ease-out;
  10536. }
  10537. .root_a28985 .contentWrapper__85d37 .button_afdfd9.lookLink__93965:hover {
  10538. background: var(--btn-grey-hover);
  10539. color: #fff;
  10540. box-shadow: var(--btn-grey-boxshadow);
  10541. }
  10542.  
  10543. #app-mount .keyboardShortcutsModal__74c71 {
  10544. background: var(--modal-background);
  10545. }
  10546. #app-mount .modalSubtitle__40325 {
  10547. border-bottom: none;
  10548. }
  10549.  
  10550. .keyboardShortcutsModal__74c71 .modalTitle_cf2de1 {
  10551. margin: 0;
  10552. padding: 32px 32px 0 32px;
  10553. font-size: 22px;
  10554. font-weight: 700;
  10555. line-height: 24px;
  10556. }
  10557. .keyboardShortcutsModal__74c71 .modalSubtitle__40325 {
  10558. padding: 0 32px 32px 32px;
  10559. font-size: 14px;
  10560. line-height: 18px;
  10561. color: var(--header-secondary);
  10562. }
  10563. .keyboardShortcutsModal__74c71 .keyboardShortcutList__1f357 {
  10564. -moz-column-count: unset;
  10565. column-count: unset;
  10566. -moz-column-gap: unset;
  10567. column-gap: unset;
  10568. display: flex;
  10569. flex-flow: row wrap;
  10570. gap: var(--gap);
  10571. --gap: 20px;
  10572. --columns: 3;
  10573. }
  10574. .keyboardShortcutsModal__74c71 .keyboardShortcutListGroup__9bf22 {
  10575. background: var(--btn-grey);
  10576. border-radius: 2px;
  10577. padding: 8px 24px 10px 16px;
  10578. margin: 0;
  10579. height: -moz-fit-content;
  10580. height: fit-content;
  10581. flex-grow: 1;
  10582. width: calc(100% / var(--columns) - var(--gap) + var(--gap) / var(--columns));
  10583. }
  10584. .keyboardShortcutsModal__74c71 .keybindGroup_bd18f5 [data-text-variant="heading-md/semibold"] {
  10585. font-size: 16px;
  10586. font-weight: 400;
  10587. line-height: 20px;
  10588. }
  10589. .keyboardShortcutsModal__74c71 .keybindGroup_bd18f5 .keybindGroupDescription__8172e {
  10590. font-size: 13px;
  10591. line-height: 18px;
  10592. font-weight: 400;
  10593. color: var(--text-muted);
  10594. margin: 0;
  10595. }
  10596. .keyboardShortcutsModal__74c71 .divider__2bbbc {
  10597. display: none;
  10598. }
  10599.  
  10600. #app-mount .key__06fe6 {
  10601. background: var(--btn-brand);
  10602. border: none;
  10603. padding: 3px 6px 4px;
  10604. border-radius: 2px;
  10605. box-shadow: inset 0 -1px 0 var(--brand-experiment);
  10606. }
  10607.  
  10608. #app-mount .combo__57290 {
  10609. color: var(--btn-brand-text);
  10610. font-weight: 400;
  10611. }
  10612. #app-mount .combo__57290 .key__06fe6:active {
  10613. height: unset;
  10614. color: #fff;
  10615. background: var(--btn-brand-hover);
  10616. }
  10617.  
  10618. .root_a28985 .header-1LSUD5 {
  10619. padding: 0;
  10620. align-items: flex-start;
  10621. }
  10622. .root_a28985 .header-1LSUD5 [data-text-variant="heading-xl/semibold"] {
  10623. font-size: 22px;
  10624. font-weight: 700;
  10625. line-height: 24px;
  10626. }
  10627. .root_a28985 .header-1LSUD5 .subheaderText-2Slnoc {
  10628. margin: 0;
  10629. }
  10630. .root_a28985 .list-3-WAYB {
  10631. background: none;
  10632. border-radius: 0;
  10633. }
  10634. .root_a28985 .list-3-WAYB .separator-3pyJLj {
  10635. display: none;
  10636. }
  10637. .root_a28985 .list-3-WAYB .accountCard-2lki2x {
  10638. padding: 8px 24px 10px 16px;
  10639. background: var(--btn-grey);
  10640. border-radius: 2px;
  10641. }
  10642. .root_a28985 .list-3-WAYB .accountCard-2lki2x:not(:last-child) {
  10643. margin-bottom: 10px;
  10644. }
  10645. .root_a28985 .list-3-WAYB .accountCard-2lki2x [data-text-variant="text-md/semibold"] {
  10646. font-weight: 400;
  10647. }
  10648. .root_a28985 .list-3-WAYB .accountCard-2lki2x .hintText-1gwhJG {
  10649. font-size: 12px;
  10650. letter-spacing: 0.5px;
  10651. text-transform: uppercase;
  10652. font-weight: 700;
  10653. }
  10654. .root_a28985 .actions-1qEPMo {
  10655. margin: 32px 0;
  10656. }
  10657.  
  10658. #app-mount .authBox__7196a {
  10659. background: none;
  10660. box-shadow: none;
  10661. padding: 32px 32px 0 32px;
  10662. }
  10663. #app-mount .authBox__7196a + .navRow-dG-XX8 {
  10664. background: none;
  10665. padding: 32px;
  10666. }
  10667. #app-mount .authBox__7196a + .navRow-dG-XX8 .button_afdfd9 {
  10668. margin: 0;
  10669. }
  10670.  
  10671. .mainLoginContainer-psZnyz h1 {
  10672. text-align: left;
  10673. font-size: 22px;
  10674. font-weight: 700;
  10675. line-height: 24px;
  10676. margin-bottom: 0;
  10677. }
  10678. .mainLoginContainer-psZnyz .subtitle-N87Vzb {
  10679. text-align: left;
  10680. padding: 0;
  10681. margin-bottom: 32px;
  10682. }
  10683.  
  10684. .root_a28985:has(.tier2HeaderBackground-2XINxm) {
  10685. --text-muted: #ffffff7a;
  10686. }
  10687. .root_a28985:has(.tier2HeaderBackground-2XINxm) .header__6d5ea:has(.headerBackground-131uxy) {
  10688. box-shadow: none;
  10689. border-radius: 0;
  10690. padding: 0;
  10691. position: absolute;
  10692. inset: 0;
  10693. height: 100%;
  10694. z-index: -1;
  10695. }
  10696. .root_a28985:has(.tier2HeaderBackground-2XINxm) .header__6d5ea:has(.headerBackground-131uxy) + div {
  10697. margin-top: 87px;
  10698. }
  10699. .root_a28985:has(.tier2HeaderBackground-2XINxm) .header__6d5ea:has(.headerBackground-131uxy) .headerBackground-131uxy {
  10700. inset: 0;
  10701. height: 100%;
  10702. padding: 32px;
  10703. box-sizing: border-box;
  10704. }
  10705. .root_a28985:has(.tier2HeaderBackground-2XINxm) .header__6d5ea:has(.headerBackground-131uxy) .headerAnimation-3DVb6i {
  10706. position: absolute;
  10707. inset: 0;
  10708. min-width: unset;
  10709. transform: none;
  10710. }
  10711. .root_a28985:has(.tier2HeaderBackground-2XINxm) .header__6d5ea:has(.headerBackground-131uxy) .headerAnimation-3DVb6i .panningAnimation-1pMfvn {
  10712. position: absolute;
  10713. inset: 0;
  10714. overflow: hidden;
  10715. max-height: 100px;
  10716. margin-top: auto;
  10717. }
  10718. .root_a28985:has(.tier2HeaderBackground-2XINxm) .header__6d5ea:has(.headerBackground-131uxy) .headerAnimation-3DVb6i .sequencedAnimation-f_FX_M {
  10719. position: absolute;
  10720. inset: 0;
  10721. max-height: 100px;
  10722. }
  10723. .root_a28985:has(.tier2HeaderBackground-2XINxm) .paymentNote-3dcb-Z {
  10724. padding: 0 32px 0 32px;
  10725. }
  10726. .root_a28985:has(.tier2HeaderBackground-2XINxm) .breadcrumb.wrapper-wOVKdL {
  10727. padding: 10px 32px 0 32px;
  10728. }
  10729. .root_a28985:has(.tier2HeaderBackground-2XINxm) .breadcrumb.wrapper-wOVKdL::after {
  10730. display: none;
  10731. }
  10732. .root_a28985:has(.tier2HeaderBackground-2XINxm) .content__764ce > [style^="position: relative; width:"] {
  10733. width: 100% !important;
  10734. }
  10735. .root_a28985:has(.tier2HeaderBackground-2XINxm) .content__764ce > [style^="position: relative; width:"] > [style^="position: absolute;"] {
  10736. position: relative !important;
  10737. left: unset !important;
  10738. right: unset !important;
  10739. }
  10740. .root_a28985:has(.tier2HeaderBackground-2XINxm) .sliderBody__54a36 {
  10741. width: 100%;
  10742. }
  10743. .root_a28985:has(.tier2HeaderBackground-2XINxm) [role=radiogroup] {
  10744. display: flex;
  10745. flex-direction: row;
  10746. gap: 10px;
  10747. }
  10748. .root_a28985:has(.tier2HeaderBackground-2XINxm) .planOptionClickableContainer-O-50CZ {
  10749. background: rgba(255, 255, 255, 0.0588235294);
  10750. border-radius: 3px;
  10751. padding: 20px;
  10752. flex-basis: calc(50% - 20px);
  10753. position: relative;
  10754. transition-property: background, box-shadow;
  10755. transition-duration: 0.2s;
  10756. transition-timing-function: ease-out;
  10757. }
  10758. .root_a28985:has(.tier2HeaderBackground-2XINxm) .planOptionClickableContainer-O-50CZ:hover {
  10759. background: rgba(255, 255, 255, 0.2);
  10760. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  10761. }
  10762. .root_a28985:has(.tier2HeaderBackground-2XINxm) .planOptionClickableContainer-O-50CZ[aria-checked=true] {
  10763. background: #fff;
  10764. box-shadow: none;
  10765. }
  10766. .root_a28985:has(.tier2HeaderBackground-2XINxm) .planOptionClickableContainer-O-50CZ[aria-checked=true] .optionSelected-2AMHHJ {
  10767. color: #1b1b1b;
  10768. }
  10769. .root_a28985:has(.tier2HeaderBackground-2XINxm) .planOptionClickableContainer-O-50CZ[aria-checked=true] .planOptionDiscount-2nex9n {
  10770. color: #1b1b1b !important;
  10771. }
  10772. .root_a28985:has(.tier2HeaderBackground-2XINxm) .checkboxWrapper__02583 {
  10773. position: absolute;
  10774. inset: 0;
  10775. height: 100%;
  10776. width: 100%;
  10777. opacity: 0;
  10778. margin: 0;
  10779. }
  10780. .root_a28985:has(.tier2HeaderBackground-2XINxm) .planOptionInterval-3QyrC0 {
  10781. color: #1b1b1b;
  10782. font-weight: 400;
  10783. font-size: 20px;
  10784. position: absolute;
  10785. top: 0;
  10786. right: 0;
  10787. }
  10788. .root_a28985:has(.tier2HeaderBackground-2XINxm) .planOption-187LtR {
  10789. flex-direction: column-reverse;
  10790. position: relative;
  10791. padding: 0;
  10792. align-items: start;
  10793. color: rgba(255, 255, 255, 0.4784313725);
  10794. font-size: 20px !important;
  10795. }
  10796. .root_a28985:has(.tier2HeaderBackground-2XINxm) .planOptionDiscount-2nex9n {
  10797. background: none;
  10798. border-radius: 0;
  10799. padding: 0;
  10800. margin: 0;
  10801. }
  10802. .root_a28985:has(.tier2HeaderBackground-2XINxm) .totalLabel-2RGUEh {
  10803. color: rgba(255, 255, 255, 0.4784313725);
  10804. }
  10805. .root_a28985:has(.tier2HeaderBackground-2XINxm) .wrap_e504b7:has(.cardIcon__3476e) button {
  10806. background: rgba(255, 255, 255, 0.0588235294);
  10807. border-radius: 3px;
  10808. }
  10809. .root_a28985:has(.tier2HeaderBackground-2XINxm) .wrap_e504b7:has(.cardIcon__3476e) button:hover {
  10810. color: #1b1b1b;
  10811. background: #fff;
  10812. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  10813. }
  10814.  
  10815. .override_f2098b {
  10816. border-radius: 0;
  10817. border: none;
  10818. margin-bottom: 0;
  10819. background: none;
  10820. transition: none;
  10821. padding: 6px 0 6px 8px;
  10822. height: 46px;
  10823. }
  10824. .override_f2098b:hover {
  10825. background: var(--background-accent);
  10826. transition: background 0.2s linear;
  10827. }
  10828. .override_f2098b:hover .checkbox_c7f690 {
  10829. background-color: var(--background-accent-hover);
  10830. transition: background 0.2s linear;
  10831. }
  10832. .override_f2098b .icon__9a542 {
  10833. width: 16px;
  10834. }
  10835. .override_f2098b .channelNameContainer__2e09f {
  10836. display: flex;
  10837. justify-content: center;
  10838. flex-direction: column;
  10839. }
  10840. .override_f2098b .channelName_a1ccf5 {
  10841. color: #fff;
  10842. font-weight: 400;
  10843. line-height: 20px;
  10844. }
  10845. .override_f2098b .channelNameByline__574ef {
  10846. color: var(--text-muted);
  10847. font-size: 12px;
  10848. line-height: 22px;
  10849. letter-spacing: 0.5px;
  10850. text-transform: uppercase;
  10851. font-weight: 700;
  10852. }
  10853. .override_f2098b .checkboxMute__6e269::before {
  10854. display: none;
  10855. }
  10856.  
  10857. #app-mount .override_f2098b:hover {
  10858. background: var(--background-accent);
  10859. transition: background 0.2s linear;
  10860. }
  10861. #app-mount .override_f2098b .checkboxContainer__5a761:before {
  10862. background-color: var(--background-modifier-accent-dark);
  10863. }
  10864.  
  10865. .button__71a0f {
  10866. border-radius: 2px;
  10867. }
  10868.  
  10869. .wrap_e504b7:has(.cardIcon__3476e) {
  10870. display: grid;
  10871. grid-template-columns: repeat(3, minmax(0, 1fr));
  10872. grid-gap: 10px;
  10873. }
  10874. .wrap_e504b7:has(.cardIcon__3476e) button {
  10875. margin: 0;
  10876. width: unset;
  10877. height: unset;
  10878. background: var(--btn-grey);
  10879. border-radius: 2px;
  10880. padding: 20px;
  10881. font-size: 16px;
  10882. line-height: 20px;
  10883. font-weight: 400;
  10884. }
  10885. .wrap_e504b7:has(.cardIcon__3476e) button:hover {
  10886. color: #fff;
  10887. background: var(--btn-grey-hover);
  10888. box-shadow: var(--btn-grey-boxshadow);
  10889. }
  10890. .wrap_e504b7:has(.cardIcon__3476e) button .flex__909d4 {
  10891. flex-direction: column;
  10892. }
  10893. .wrap_e504b7:has(.cardIcon__3476e) button .flex__909d4 .buttonIcon-3rUffx {
  10894. margin: 0 0 10px 0;
  10895. }
  10896.  
  10897. .root_a28985 > form:first-child > .modalTitle-nz51Yi:first-child {
  10898. padding: 32px;
  10899. }
  10900. .root_a28985 > form:first-child > .modalTitle-nz51Yi:first-child h1.title__3e421 {
  10901. font-size: 22px;
  10902. font-weight: 700;
  10903. text-transform: capitalize;
  10904. letter-spacing: 0;
  10905. line-height: 24px;
  10906. }
  10907.  
  10908. .phoneVerificationModal__68f4b {
  10909. margin: 0;
  10910. padding: 0;
  10911. transform: none !important;
  10912. }
  10913. .phoneVerificationModal__68f4b .animationContainer_a3f705 {
  10914. position: absolute;
  10915. top: 0 !important;
  10916. right: 0 !important;
  10917. left: unset !important;
  10918. bottom: unset !important;
  10919. height: 72px;
  10920. width: 124px;
  10921. }
  10922. .phoneVerificationModal__68f4b .title_eb9a91 {
  10923. font-size: 22px;
  10924. font-weight: 700;
  10925. line-height: 24px;
  10926. margin: 0;
  10927. padding: 32px;
  10928. width: 100%;
  10929. box-sizing: border-box;
  10930. }
  10931. .phoneVerificationModal__68f4b .description_d4765f {
  10932. width: 100%;
  10933. box-sizing: border-box;
  10934. padding: 0 32px;
  10935. margin-bottom: 10px;
  10936. text-align: left;
  10937. --text-normal: hsl(calc(var(--accent-hue) + 5) calc(var(--saturation-factor, 1)*7.8%) 69.8%);
  10938. font-size: 14px;
  10939. line-height: 18px;
  10940. }
  10941. .phoneVerificationModal__68f4b .description_d4765f strong {
  10942. color: #fff;
  10943. }
  10944. .phoneVerificationModal__68f4b .phoneField__65729 {
  10945. margin: 32px;
  10946. }
  10947.  
  10948. .quickswitcher_a3d29a {
  10949. border-radius: 0;
  10950. padding: 32px;
  10951. box-shadow: none;
  10952. background: var(--modal-background);
  10953. }
  10954. .quickswitcher_a3d29a .content_ad5076:has(.header_a2a437) {
  10955. padding: 0;
  10956. height: unset;
  10957. line-height: unset;
  10958. }
  10959. .quickswitcher_a3d29a .header_a2a437 {
  10960. color: var(--text-muted);
  10961. font-size: 14px;
  10962. letter-spacing: 0.5px;
  10963. line-height: 36px;
  10964. margin: 0;
  10965. }
  10966. .quickswitcher_a3d29a .scroller__52ae7 {
  10967. z-index: 0;
  10968. margin-top: 24px;
  10969. background: none;
  10970. --background-secondary-alt: transparent;
  10971. }
  10972. .quickswitcher_a3d29a .scroller__52ae7:-webkit-scrollbar {
  10973. background: none;
  10974. }
  10975. .quickswitcher_a3d29a .result__25f11 {
  10976. font-size: 14px;
  10977. font-weight: 400;
  10978. }
  10979. .quickswitcher_a3d29a .result__25f11[aria-selected=true] {
  10980. background: var(--btn-grey-hover);
  10981. border-radius: 2px;
  10982. }
  10983. .quickswitcher_a3d29a .result__25f11[aria-selected=true] .contentDefault_f2e62d {
  10984. color: #fff;
  10985. }
  10986.  
  10987. .scroller__5fda0 {
  10988. background: none;
  10989. border-top-left-radius: 0;
  10990. border-bottom-left-radius: 0;
  10991. padding: 0;
  10992. }
  10993.  
  10994. .reactors__20ab0 {
  10995. background: none;
  10996. border-radius: 0;
  10997. }
  10998.  
  10999. .reactionDefault__792ef, .reactionSelected__249a7 {
  11000. margin-bottom: 0;
  11001. border-radius: 0;
  11002. padding: 5px 8px;
  11003. }
  11004.  
  11005. .reactionDefault__792ef:hover {
  11006. background: rgba(255, 255, 255, 0.2);
  11007. }
  11008.  
  11009. .reactionSelected__249a7 {
  11010. background: var(--btn-dark-hover);
  11011. }
  11012. .reactionSelected__249a7 [data-text-variant="text-sm/bold"] {
  11013. color: #fff;
  11014. }
  11015.  
  11016. .messagePreviewContainer_b47f3f {
  11017. border-radius: 3px;
  11018. background-color: rgba(0, 0, 0, 0.2);
  11019. border: 1px solid #000;
  11020. box-shadow: 1px 1px 0 0 var(--store-search-border);
  11021. }
  11022.  
  11023. .childButton__832dc {
  11024. border-radius: 2px;
  11025. background: var(--btn-grey);
  11026. margin-bottom: 10px;
  11027. transition-property: background, box-shadow, color;
  11028. transition-duration: 0.2s;
  11029. transition-timing-function: ease-out;
  11030. --text-normal: var(--text-lighter);
  11031. }
  11032. .childButton__832dc:hover {
  11033. background: var(--btn-grey-hover);
  11034. box-shadow: var(--btn-grey-boxshadow);
  11035. --text-normal: #fff;
  11036. }
  11037. .childButton__832dc .text-md-semibold__79164 {
  11038. font-weight: 400;
  11039. }
  11040. .childButton__832dc svg {
  11041. color: var(--brand-experiment);
  11042. }
  11043.  
  11044. .art-1TvEXv {
  11045. margin: 0;
  11046. width: 140px;
  11047. position: absolute;
  11048. top: 32px;
  11049. right: 32px;
  11050. }
  11051.  
  11052. .header__6d5ea .header-12ZEIU {
  11053. display: flex;
  11054. align-items: flex-start;
  11055. }
  11056. .header__6d5ea .header-12ZEIU .headerText-27nUQU {
  11057. margin-bottom: 0;
  11058. }
  11059. .header__6d5ea .header-12ZEIU .headerDescription-yFPU-Q {
  11060. padding: 0 140px 0 0;
  11061. text-align: left;
  11062. font-size: 14px;
  11063. line-height: 18px;
  11064. --text-normal: var(--header-secondary);
  11065. }
  11066.  
  11067. .segmentContainer-358IfE {
  11068. padding: 0 32px;
  11069. }
  11070.  
  11071. .segmentControl-3edJKN {
  11072. --btn-count: 2;
  11073. background: var(--darker-grey);
  11074. border-radius: 2px;
  11075. padding: 0;
  11076. gap: 0;
  11077. display: flex;
  11078. flex-direction: row;
  11079. position: relative;
  11080. box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.6666666667);
  11081. border-bottom: none;
  11082. }
  11083.  
  11084. .segmentControl-3edJKN .segmentControlOption-3MnJdT {
  11085. background: none;
  11086. margin: 0;
  11087. display: flex;
  11088. flex: 0 1 calc(100% / var(--btn-count));
  11089. justify-content: center;
  11090. z-index: 1;
  11091. border-bottom: none;
  11092. padding: 8px 14px;
  11093. }
  11094. .segmentControl-3edJKN .segmentControlOption-3MnJdT:not(.tabItemSelected__3dfe7):hover {
  11095. background: var(--btn-grey);
  11096. }
  11097. .segmentControl-3edJKN .segmentControlOption-3MnJdT [data-text-variant="text-sm/medium"] {
  11098. font-weight: 400;
  11099. }
  11100.  
  11101. .segmentControl-3edJKN::before {
  11102. content: "";
  11103. position: absolute;
  11104. height: 100%;
  11105. width: calc(100% / var(--btn-count));
  11106. background: var(--btn-grey-hover);
  11107. transition: translate 0.2s ease;
  11108. border-radius: 2px;
  11109. }
  11110. .segmentControl-3edJKN:has(.tabItemSelected__3dfe7:nth-child(2)):before {
  11111. translate: 100%;
  11112. }
  11113.  
  11114. .sourceContainer-1uqUbz {
  11115. padding: 10px 24px 0 32px;
  11116. gap: 10px;
  11117. }
  11118.  
  11119. .tile-3POX2m {
  11120. background: var(--btn-grey);
  11121. padding: 6px;
  11122. border-radius: 2px;
  11123. flex: 0 1 calc(50% - 5px) !important;
  11124. max-width: calc(50% - 5px);
  11125. transition-property: background, box-shadow;
  11126. transition-duration: 0.2s;
  11127. transition-timing-function: ease-out;
  11128. }
  11129. .tile-3POX2m:hover {
  11130. background: var(--btn-grey-hover);
  11131. box-shadow: var(--btn-grey-boxshadow);
  11132. }
  11133. .tile-3POX2m .sourceThumbnail-ERDcZE {
  11134. border-radius: 2px;
  11135. box-shadow: inset 0 0 0 1px transparent;
  11136. }
  11137. .tile-3POX2m .sourceName-3Wf8QG {
  11138. margin-top: 10px;
  11139. width: 100%;
  11140. font-size: 14px;
  11141. font-weight: 400;
  11142. line-height: 18px;
  11143. color: var(--header-secondary);
  11144. }
  11145.  
  11146. .modalSize-3WSXDU:has(.modalContent-2y3sGW) form {
  11147. height: 100%;
  11148. }
  11149. .modalSize-3WSXDU:has(.modalContent-2y3sGW) form > [style^="position: relative;"] {
  11150. height: calc(100% - 94px - 98px) !important;
  11151. }
  11152. .modalSize-3WSXDU:has(.modalContent-2y3sGW) form > [style^="position: relative;"] > [style^="position: absolute;"] {
  11153. position: relative !important;
  11154. top: unset !important;
  11155. left: unset !important;
  11156. right: unset !important;
  11157. transform: none !important;
  11158. width: 100% !important;
  11159. height: 100%;
  11160. }
  11161. .modalSize-3WSXDU:has(.modalContent-2y3sGW) form > [style^="position: relative;"] .modalSize-3WSXDU {
  11162. width: 100%;
  11163. height: 100%;
  11164. overflow: hidden overlay;
  11165. padding: 0 32px;
  11166. box-sizing: border-box;
  11167. }
  11168. .modalSize-3WSXDU:has(.modalContent-2y3sGW) form > [style^="position: relative;"] .modalSize-3WSXDU::-webkit-scrollbar {
  11169. width: 8px;
  11170. height: 8px;
  11171. }
  11172. .modalSize-3WSXDU:has(.modalContent-2y3sGW) form > [style^="position: relative;"] .modalSize-3WSXDU::-webkit-scrollbar-track {
  11173. border-color: transparent;
  11174. background-color: transparent;
  11175. border: 2px solid transparent;
  11176. }
  11177. .modalSize-3WSXDU:has(.modalContent-2y3sGW) form > [style^="position: relative;"] .modalSize-3WSXDU::-webkit-scrollbar-thumb {
  11178. background-clip: padding-box;
  11179. border: 2px solid transparent;
  11180. border-radius: 4px;
  11181. background-color: var(--scroller-color);
  11182. min-height: 40px;
  11183. }
  11184. .modalSize-3WSXDU:has(.modalContent-2y3sGW) form > [style^="position: relative;"] .modalSize-3WSXDU::-webkit-scrollbar-corner {
  11185. background-color: transparent;
  11186. }
  11187.  
  11188. .modalContent-2y3sGW {
  11189. padding: 0 0;
  11190. }
  11191.  
  11192. .warning-1ALdC6 {
  11193. padding: 10px 0 0 0;
  11194. }
  11195.  
  11196. .warningIcon-3vNf04 {
  11197. color: var(--gpColor-Yellow);
  11198. }
  11199.  
  11200. .card-m7VgZ8 {
  11201. padding: 8px 14px;
  11202. border-radius: 2px;
  11203. border: none;
  11204. background: var(--btn-grey);
  11205. }
  11206. .card-m7VgZ8 .selectedIcon-277z4I,
  11207. .card-m7VgZ8 .channelIcon-1BydE- {
  11208. color: var(--brand-experiment);
  11209. }
  11210.  
  11211. .qualitySettingsContainer-2LjkfM {
  11212. border: none;
  11213. border-radius: 0;
  11214. padding: 0;
  11215. }
  11216. .qualitySettingsContainer-2LjkfM .settingsGroup-VNJxZ8:nth-child(1) {
  11217. --btn-count: 4;
  11218. }
  11219. .qualitySettingsContainer-2LjkfM .settingsGroup-VNJxZ8:nth-child(2) {
  11220. --btn-count: 3;
  11221. }
  11222. .qualitySettingsContainer-2LjkfM .settingsGroup-VNJxZ8 [role=group].group-1_ptLP {
  11223. background: var(--darker-grey);
  11224. border-radius: 2px;
  11225. padding: 0;
  11226. gap: 0;
  11227. display: flex;
  11228. flex-direction: row;
  11229. position: relative;
  11230. box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.6666666667);
  11231. border-bottom: none;
  11232. }
  11233. .qualitySettingsContainer-2LjkfM .settingsGroup-VNJxZ8 [role=group].group-1_ptLP::before {
  11234. content: "";
  11235. position: absolute;
  11236. height: 100%;
  11237. width: calc(100% / var(--btn-count));
  11238. background: var(--btn-grey-hover);
  11239. transition: translate 0.2s ease;
  11240. border-radius: 2px;
  11241. }
  11242. .qualitySettingsContainer-2LjkfM .settingsGroup-VNJxZ8 [role=group].group-1_ptLP:has(.selectorButtonSelected-3cQUnj:nth-child(2)):before {
  11243. translate: 100%;
  11244. }
  11245. .qualitySettingsContainer-2LjkfM .settingsGroup-VNJxZ8 [role=group].group-1_ptLP:has(.selectorButtonSelected-3cQUnj:nth-child(3)):before {
  11246. translate: 200%;
  11247. }
  11248. .qualitySettingsContainer-2LjkfM .settingsGroup-VNJxZ8 [role=group].group-1_ptLP .item-2OyinQ {
  11249. background: none;
  11250. margin: 0;
  11251. display: flex;
  11252. flex: 0 1 calc(100% / var(--btn-count));
  11253. justify-content: center;
  11254. z-index: 1;
  11255. border-bottom: none;
  11256. padding: 8px 14px;
  11257. }
  11258. .qualitySettingsContainer-2LjkfM .settingsGroup-VNJxZ8 [role=group].group-1_ptLP .item-2OyinQ:not(.selectorButtonSelected-3cQUnj):hover {
  11259. background: var(--btn-grey);
  11260. }
  11261. .qualitySettingsContainer-2LjkfM .settingsGroup-VNJxZ8 [role=group].group-1_ptLP .item-2OyinQ [data-text-variant="text-sm/medium"] {
  11262. font-weight: 400;
  11263. }
  11264.  
  11265. #app-mount .qualitySettingsContainer-2LjkfM .item-2OyinQ {
  11266. border: none;
  11267. }
  11268.  
  11269. .upsellBanner-1tVKtW {
  11270. margin-top: 10px;
  11271. padding: 16px;
  11272. border-radius: 4px;
  11273. box-shadow: var(--banner-shadow);
  11274. }
  11275.  
  11276. .root_a28985:has(img[alt="characters playing a game"]) .shelfTopBackground-R55ED9 {
  11277. position: absolute;
  11278. top: 16px;
  11279. right: 40px;
  11280. left: unset;
  11281. margin: 0;
  11282. width: 120px;
  11283. }
  11284. .root_a28985:has(img[alt="characters playing a game"]) .header__6d5ea .headerTextContainer-16tB2v {
  11285. align-items: start;
  11286. width: calc(100% - 140px);
  11287. }
  11288. .root_a28985:has(img[alt="characters playing a game"]) .header__6d5ea .headerTextContainer-16tB2v .activityShelfTitle-1rkbSI {
  11289. justify-content: left;
  11290. margin-top: 0;
  11291. }
  11292. .root_a28985:has(img[alt="characters playing a game"]) .header__6d5ea .headerTextContainer-16tB2v h1 {
  11293. font-size: 22px;
  11294. font-weight: 700;
  11295. line-height: 24px;
  11296. }
  11297. .root_a28985:has(img[alt="characters playing a game"]) .header__6d5ea .headerTextContainer-16tB2v [data-text-variant="text-sm/normal"] {
  11298. font-size: 14px;
  11299. line-height: 18px;
  11300. color: var(--header-secondary);
  11301. }
  11302. .root_a28985:has(img[alt="characters playing a game"]) .modalDivider-MtZbPb {
  11303. display: none;
  11304. }
  11305. .root_a28985:has(img[alt="characters playing a game"]) .scrollBackgroundContainer-1gy1Hx {
  11306. display: none;
  11307. }
  11308. .root_a28985:has(img[alt="characters playing a game"]) .scroller-3oxliS {
  11309. overflow: overlay !important;
  11310. }
  11311. .root_a28985:has(img[alt="characters playing a game"]) .scrollSection-HnJkHK {
  11312. padding-left: 32px;
  11313. padding-right: 32px;
  11314. padding-bottom: 32px;
  11315. }
  11316. .root_a28985:has(img[alt="characters playing a game"]) .shelf-3D6g4D {
  11317. display: grid;
  11318. margin-top: 1em;
  11319. margin-bottom: 1em;
  11320. grid-template-columns: repeat(2, 1fr);
  11321. gap: 10px;
  11322. }
  11323. .root_a28985:has(img[alt="characters playing a game"]) .activityItem-1Z9CTr {
  11324. width: unset;
  11325. height: -moz-fit-content;
  11326. height: fit-content;
  11327. border-radius: 2px;
  11328. background: var(--btn-grey);
  11329. padding: 6px;
  11330. box-shadow: none;
  11331. transition-property: background, box-shadow;
  11332. transition-duration: 0.2s;
  11333. transition-timing-function: ease-out;
  11334. }
  11335. .root_a28985:has(img[alt="characters playing a game"]) .activityItem-1Z9CTr:hover {
  11336. background: var(--btn-grey-hover);
  11337. box-shadow: var(--btn-grey-boxshadow);
  11338. }
  11339. .root_a28985:has(img[alt="characters playing a game"]) .activityItem-1Z9CTr .activityImageContainer-3FIpli {
  11340. border-radius: 2px;
  11341. margin-bottom: 10px;
  11342. }
  11343. .root_a28985:has(img[alt="characters playing a game"]) .activityItem-1Z9CTr .activityTextContainer-2l4Dnr {
  11344. padding: 0;
  11345. }
  11346. .root_a28985:has(img[alt="characters playing a game"]) .activityItem-1Z9CTr .activityName-16mAQo {
  11347. width: 100%;
  11348. justify-content: center;
  11349. }
  11350. .root_a28985:has(img[alt="characters playing a game"]) .activityItem-1Z9CTr .activityTitleText-3LZ9o5 {
  11351. font-size: 16px;
  11352. font-weight: 400;
  11353. line-height: 20px;
  11354. }
  11355. .root_a28985:has(img[alt="characters playing a game"]) .activityItem-1Z9CTr .activitySubtitleText-r0WHTk {
  11356. max-height: unset;
  11357. margin-bottom: 10px;
  11358. font-size: 14px;
  11359. font-weight: 400;
  11360. line-height: 18px;
  11361. color: var(--header-secondary);
  11362. }
  11363. .root_a28985:has(img[alt="characters playing a game"]) .activityItem-1Z9CTr .activityTagsContainer-2tHK0W {
  11364. width: 100%;
  11365. justify-content: center;
  11366. }
  11367. .root_a28985:has(img[alt="characters playing a game"]) .activityItem-1Z9CTr .activityTag-3C3YK5 {
  11368. background-color: rgba(0, 0, 0, 0.2);
  11369. border-radius: 2px;
  11370. height: 20px;
  11371. padding: 0 6px;
  11372. font-size: 12px;
  11373. line-height: 20px;
  11374. font-weight: 400;
  11375. }
  11376.  
  11377. .paymentModalContent .scroller-2M3eAB {
  11378. height: 100%;
  11379. padding: 0 32px 16px 32px !important;
  11380. overflow: hidden overlay !important;
  11381. }
  11382.  
  11383. .perks-2IIbWQ {
  11384. background: none;
  11385. border-radius: 0;
  11386. }
  11387. .perks-2IIbWQ .perkRow-10K6XE {
  11388. padding: 8px 24px 10px 16px;
  11389. margin: 0;
  11390. background: var(--btn-grey);
  11391. border-radius: 2px;
  11392. margin-bottom: 10px;
  11393. }
  11394. .perks-2IIbWQ .perkDescription-3e1T_w {
  11395. font-weight: 400;
  11396. }
  11397.  
  11398. #app-mount .root__6d24f {
  11399. background: var(--modal-background) !important;
  11400. border-radius: 0 !important;
  11401. box-shadow: none !important;
  11402. border: 0.5px solid black;
  11403. }
  11404. #app-mount .root__6d24f::before {
  11405. content: "";
  11406. display: block;
  11407. height: 1px;
  11408. width: 100%;
  11409. background: linear-gradient(to right, hsl(calc(var(--accent-hue) - 13), calc(var(--saturation-factor, 1) * 100%), 50%) 0%, hsl(calc(var(--accent-hue) + 20), calc(var(--saturation-factor, 1) * 100%), 60%) 100%);
  11410. position: absolute;
  11411. z-index: 102;
  11412. top: 0;
  11413. }
  11414. #app-mount .root__6d24f .innerWrapper__8cde3 {
  11415. background-image: linear-gradient(45deg, var(--guild-boosting-blue), var(--guild-boosting-purple));
  11416. border-radius: 4px;
  11417. box-shadow: var(--banner-shadow);
  11418. margin-bottom: 12px;
  11419. padding: 16px;
  11420. width: unset;
  11421. max-width: 438px;
  11422. }
  11423. #app-mount .root__6d24f .innerWrapper__8cde3::before {
  11424. display: none;
  11425. }
  11426. #app-mount .root__6d24f .innerWrapper__8cde3 .iconSizeLarger__57b8e {
  11427. height: 48px;
  11428. width: 48px;
  11429. border-radius: 2px;
  11430. }
  11431. #app-mount .root__6d24f .headerWave_e4fdee {
  11432. display: none;
  11433. }
  11434. #app-mount .root__6d24f .display-lg__30a2f {
  11435. font-size: 34px;
  11436. line-height: 38px;
  11437. }
  11438. #app-mount .root__6d24f .headerContentWrapper__30c3e {
  11439. padding: 4em 5em;
  11440. }
  11441. #app-mount .root__6d24f .tierCards__109a2 {
  11442. gap: 20px;
  11443. }
  11444. #app-mount .root__6d24f .tierCards__109a2 .tierCard_f6953a {
  11445. width: calc(33.3333333333% - 20px);
  11446. border-radius: 3px;
  11447. padding: 20px;
  11448. }
  11449. #app-mount .root__6d24f .tierCards__109a2 .tierCard_f6953a:has(.tierCardCurrentTier_df8c32) {
  11450. --guild-boosting-blue-hsl: 85 calc(var(--saturation-factor, 1)*45%) 45.5%;
  11451. --guild-boosting-purple-hsl: 87 calc(var(--saturation-factor, 1)*45%) 32.5%;
  11452. --guild-boosting-blue: hsl(var(--guild-boosting-blue-hsl)/1);
  11453. --guild-boosting-purple: hsl(var(--guild-boosting-purple-hsl)/1);
  11454. background-image: linear-gradient(45deg, var(--guild-boosting-blue), var(--guild-boosting-purple));
  11455. }
  11456. #app-mount .root__6d24f .tierCards__109a2 .tierCard_f6953a .tierCardCurrentTier_df8c32 {
  11457. border-radius: 2px;
  11458. }
  11459. #app-mount .root__6d24f .tierCards__109a2 .tierCard_f6953a .tierCardHeading_aa6988 {
  11460. position: absolute;
  11461. right: 20px;
  11462. top: 20px;
  11463. font-size: 20px;
  11464. line-height: 24px;
  11465. }
  11466. #app-mount .root__6d24f .tierCards__109a2 .tierCard_f6953a .tierCardBoostRequirement__2ae47 {
  11467. font-size: 20px;
  11468. line-height: 24px;
  11469. font-weight: 600;
  11470. }
  11471. #app-mount .root__6d24f .tierCards__109a2 .tierCard_f6953a .tierCardListIcon_c601ae {
  11472. height: 18px;
  11473. width: 18px;
  11474. }
  11475. #app-mount .root__6d24f .tierCards__109a2 .tierCard_f6953a .tierCardListItem_c78d02 {
  11476. font-size: 12px;
  11477. line-height: 16px;
  11478. }
  11479. #app-mount .root__6d24f .tierCards__109a2 .tierCard_f6953a .tierCardSparkle3__36e56 {
  11480. display: none;
  11481. }
  11482. #app-mount .root__6d24f .tierCards__109a2 .tierCard_f6953a .tierCardBorderHighlight__9ca79 {
  11483. border-radius: 3px;
  11484. }
  11485. #app-mount .root__6d24f .scroller__439a2 {
  11486. overflow-y: overlay !important;
  11487. background: #000;
  11488. }
  11489. #app-mount .root__6d24f .middleBodyContentWrapper_fdfda8 {
  11490. padding: 4em 0;
  11491. background: #fff;
  11492. --header-primary: #1b1b1b;
  11493. --header-secondary: #1b1b1b;
  11494. }
  11495. #app-mount .root__6d24f .topPerksCards_aa1faf {
  11496. display: flex;
  11497. align-items: center;
  11498. flex-flow: column wrap;
  11499. }
  11500. #app-mount .root__6d24f .topPerksCard__9fc01 {
  11501. background: none;
  11502. border-radius: 0;
  11503. margin-bottom: 20px;
  11504. min-width: 100%;
  11505. max-width: 100%;
  11506. padding: 0;
  11507. display: grid;
  11508. grid-template-columns: 1fr 1fr 1fr;
  11509. grid-template-rows: 1fr 1fr;
  11510. gap: 0 20px;
  11511. grid-auto-flow: row;
  11512. grid-template-areas: "image heading heading" "image empty empty";
  11513. }
  11514. #app-mount .root__6d24f .topPerksCard__9fc01:nth-child(2) {
  11515. grid-template-areas: "heading heading image" "empty empty image";
  11516. }
  11517. #app-mount .root__6d24f .topPerksCard__9fc01:nth-child(2) img {
  11518. margin: 0 auto 0 0;
  11519. }
  11520. #app-mount .root__6d24f .topPerksCard__9fc01:nth-child(2) .topPerksCardHeading__27bed,
  11521. #app-mount .root__6d24f .topPerksCard__9fc01:nth-child(2) .topPerksCardDescription_d09380 {
  11522. text-align: right;
  11523. }
  11524. #app-mount .root__6d24f .topPerksCard__9fc01 img {
  11525. -o-object-fit: scale-down;
  11526. object-fit: scale-down;
  11527. margin: 0 0 0 auto;
  11528. grid-area: image;
  11529. }
  11530. #app-mount .root__6d24f .topPerksCard__9fc01 .topPerksCardHeading__27bed {
  11531. grid-area: heading;
  11532. text-align: left;
  11533. align-self: end;
  11534. font-size: 18px;
  11535. line-height: 22px;
  11536. font-weight: 900;
  11537. }
  11538. #app-mount .root__6d24f .topPerksCard__9fc01 .topPerksCardDescription_d09380 {
  11539. grid-area: empty;
  11540. text-align: left;
  11541. font-weight: 600;
  11542. }
  11543. #app-mount .root__6d24f .tierComparisonTable_b4d962 {
  11544. padding: 4em 32px;
  11545. max-width: calc(100% - 64px);
  11546. }
  11547. #app-mount .root__6d24f .lowerBodyContentWrapper__3be85 {
  11548. padding: 0;
  11549. }
  11550.  
  11551. .root_a28985 .guildSidebar__8763f {
  11552. border-top-left-radius: 0;
  11553. border-bottom-left-radius: 0;
  11554. background: var(--background-tertiary);
  11555. padding: 32px;
  11556. }
  11557. .root_a28985 .guildSidebar__8763f .guildIcon__31e46 {
  11558. border-radius: 2px;
  11559. }
  11560. .root_a28985 .modal_b38209 {
  11561. border-top-right-radius: 0;
  11562. border-bottom-right-radius: 0;
  11563. background: var(--modal-background);
  11564. }
  11565.  
  11566. .root_a28985:has(.modal_b38209 .requirementContainer__45cb0) .content__3020d {
  11567. padding-left: 0;
  11568. padding-right: 0;
  11569. }
  11570. .root_a28985:has(.modal_b38209 .requirementContainer__45cb0) .animationAndSparklesContainer_f5565f {
  11571. position: absolute;
  11572. right: 0;
  11573. top: 16px;
  11574. }
  11575. .root_a28985:has(.modal_b38209 .requirementContainer__45cb0) .header__14708 {
  11576. margin: 0 100px 0 0;
  11577. text-align: left;
  11578. font-size: 22px;
  11579. font-weight: 700;
  11580. line-height: 24px;
  11581. }
  11582. .root_a28985:has(.modal_b38209 .requirementContainer__45cb0) .subheader_b02893 {
  11583. margin: 0 100px 32px 0;
  11584. text-align: left;
  11585. }
  11586. .root_a28985:has(.modal_b38209 .requirementContainer__45cb0) .divider_e8e5fa {
  11587. margin: 10px 0;
  11588. }
  11589. .root_a28985:has(.modal_b38209 .requirementContainer__45cb0) .requirementContainer__45cb0 {
  11590. margin-top: 0;
  11591. border: none;
  11592. padding: 8px 14px;
  11593. background: var(--btn-grey);
  11594. border-radius: 2px;
  11595. }
  11596. .root_a28985:has(.modal_b38209 .requirementContainer__45cb0) .requirementContainer__45cb0 .sizeSmall__71a98 {
  11597. padding: 0;
  11598. }
  11599.  
  11600. .termsRow_a03d1d [style="color: var(--text-muted);"] {
  11601. --text-muted: var(--brand-experiment);
  11602. font-weight: 700;
  11603. font-size: 18px;
  11604. }
  11605.  
  11606. .termsRowContent__82e2f[data-text-variant="text-md/normal"] {
  11607. font-size: 14px;
  11608. font-weight: 400;
  11609. }
  11610.  
  11611. .fieldBackground_d6edfa,
  11612. .fieldBackground_d6edfa:hover:not(:focus) {
  11613. background: var(--btn-grey);
  11614. border: none;
  11615. border-radius: 2px;
  11616. }
  11617.  
  11618. .fieldBackground_d6edfa {
  11619. padding: 8px 14px;
  11620. }
  11621.  
  11622. .root_a28985 .content__764ce.modalContent__9558d {
  11623. padding-left: 0;
  11624. }
  11625. .root_a28985 .sidebarContainer__5583d {
  11626. width: 256px;
  11627. padding: 32px;
  11628. background: var(--background-tertiary);
  11629. }
  11630. .root_a28985 .sidebarContainer__5583d .iconContainer__4f05c {
  11631. border-radius: 2px;
  11632. }
  11633. .root_a28985 .contentContainer__7dbc6 {
  11634. background: var(--modal-background);
  11635. align-items: start;
  11636. }
  11637. .root_a28985 .contentContainer__7dbc6 .header__921a4 {
  11638. margin-right: 140px;
  11639. margin-bottom: 0;
  11640. text-align: left;
  11641. font-size: 22px;
  11642. font-weight: 700;
  11643. line-height: 24px;
  11644. }
  11645. .root_a28985 .contentContainer__7dbc6 .descriptionWidth__3f16f {
  11646. width: 100%;
  11647. box-sizing: border-box;
  11648. padding: 0 140px 32px 0;
  11649. margin: 0;
  11650. }
  11651. .root_a28985 .contentContainer__7dbc6 .descriptionWidth__3f16f .centerText_f669d1 {
  11652. text-align: left;
  11653. }
  11654. .root_a28985 .contentContainer__7dbc6 .container__3478c {
  11655. padding: 32px;
  11656. }
  11657. .root_a28985 .contentContainer__7dbc6 .topImage__6730c {
  11658. position: absolute;
  11659. top: 0;
  11660. right: 32px;
  11661. width: 140px;
  11662. }
  11663.  
  11664. .root_a28985:has(.linkCalloutContainer-1CixBe) .title-1xObkH {
  11665. margin-top: 32px;
  11666. margin-bottom: 32px;
  11667. text-align: left;
  11668. }
  11669. .root_a28985:has(.linkCalloutContainer-1CixBe) .warningText-26ASyQ {
  11670. text-align: left;
  11671. margin-bottom: 10px;
  11672. }
  11673. .root_a28985:has(.linkCalloutContainer-1CixBe) .linkCalloutContainer-1CixBe {
  11674. margin-bottom: 10px;
  11675. border-radius: 3px;
  11676. }
  11677. .root_a28985:has(.linkCalloutContainer-1CixBe) .checkbox-1O3Aey {
  11678. margin-bottom: 0;
  11679. }
  11680.  
  11681. .root_a28985:has(.userProfileModalOuter__3fe6b)::before {
  11682. display: none;
  11683. }
  11684.  
  11685. .userProfileModalOuter__3fe6b.profileColors__2e2f0 {
  11686. --profile-gradient-secondary-color: rgb(0 0 0/.4);
  11687. --profile-gradient-primary-color: rgb(0 0 0/.2);
  11688. }
  11689. .userProfileModalOuter__3fe6b .topSection_dfb73b {
  11690. position: relative;
  11691. margin-bottom: 0;
  11692. z-index: unset;
  11693. box-sizing: border-box;
  11694. width: 100%;
  11695. }
  11696. .userProfileModalOuter__3fe6b .header__7da4f {
  11697. position: absolute;
  11698. bottom: -144px;
  11699. left: 0;
  11700. padding: 0 24px;
  11701. width: 100%;
  11702. box-sizing: border-box;
  11703. display: flex;
  11704. flex-flow: row nowrap;
  11705. justify-content: space-between;
  11706. z-index: 2;
  11707. }
  11708. .userProfileModalOuter__3fe6b .header__7da4f .avatar__445f3 {
  11709. position: relative;
  11710. inset: unset;
  11711. display: flex;
  11712. }
  11713. .userProfileModalOuter__3fe6b .header__7da4f .headerTop__6628b {
  11714. position: relative;
  11715. inset: unset;
  11716. width: 200px;
  11717. flex-flow: column wrap;
  11718. }
  11719. .userProfileModalOuter__3fe6b .badgeList_c193e3 {
  11720. display: flex;
  11721. flex-flow: row wrap;
  11722. background: rgba(0, 0, 0, 0.3);
  11723. border-radius: 3px;
  11724. padding: 10px;
  11725. box-shadow: none;
  11726. width: -moz-fit-content;
  11727. width: fit-content;
  11728. box-sizing: border-box;
  11729. margin-right: 0;
  11730. gap: 6px 10px;
  11731. }
  11732. .userProfileModalOuter__3fe6b .relationshipButtons__5efdd {
  11733. width: 100%;
  11734. gap: 4px;
  11735. margin-top: 12px;
  11736. }
  11737. .userProfileModalOuter__3fe6b .relationshipButtons__5efdd button {
  11738. box-shadow: none;
  11739. background: rgba(0, 0, 0, 0.3);
  11740. color: var(--gpColor-Green);
  11741. }
  11742. .userProfileModalOuter__3fe6b .relationshipButtons__5efdd button:hover {
  11743. color: #fff;
  11744. background: var(--gpColor-Green);
  11745. }
  11746. .userProfileModalOuter__3fe6b .relationshipButtons__5efdd [role=button] {
  11747. background: rgba(0, 0, 0, 0.3);
  11748. height: 34px;
  11749. width: 34px;
  11750. display: flex;
  11751. align-items: center;
  11752. justify-content: center;
  11753. border-radius: 2px;
  11754. }
  11755. .userProfileModalOuter__3fe6b .relationshipButtons__5efdd [role=button] svg {
  11756. height: 18px;
  11757. width: 18px;
  11758. margin: 0;
  11759. padding: 8px;
  11760. rotate: 90deg;
  11761. }
  11762. .userProfileModalOuter__3fe6b .body_ea740e {
  11763. padding-top: 168px;
  11764. position: relative;
  11765. }
  11766. .userProfileModalOuter__3fe6b .container_b6b15b {
  11767. position: absolute;
  11768. top: 24px;
  11769. left: 0;
  11770. padding: 0 240px 0 160px;
  11771. width: 100%;
  11772. box-sizing: border-box;
  11773. overflow: hidden;
  11774. }
  11775. .userProfileModalOuter__3fe6b .container_b6b15b [data-text-variant="text-lg/semibold"] {
  11776. font-size: 24px;
  11777. line-height: 40px;
  11778. font-weight: 200;
  11779. color: #fff;
  11780. margin-right: 0 !important;
  11781. overflow: hidden;
  11782. }
  11783. .userProfileModalOuter__3fe6b .userProfileModalInner__7c87d {
  11784. overflow: hidden overlay;
  11785. box-sizing: border-box;
  11786. max-height: calc(100vh - 84px);
  11787. }
  11788. .userProfileModalOuter__3fe6b .userProfileModalInner__7c87d::-webkit-scrollbar {
  11789. width: 8px;
  11790. height: 8px;
  11791. }
  11792. .userProfileModalOuter__3fe6b .userProfileModalInner__7c87d::-webkit-scrollbar-track {
  11793. border-color: transparent;
  11794. background-color: transparent;
  11795. border: 2px solid transparent;
  11796. margin-top: 212px;
  11797. }
  11798. .userProfileModalOuter__3fe6b .userProfileModalInner__7c87d::-webkit-scrollbar-thumb {
  11799. background-clip: padding-box;
  11800. border: 2px solid transparent;
  11801. border-radius: 4px;
  11802. background-color: var(--scroller-color);
  11803. min-height: 40px;
  11804. }
  11805. .userProfileModalOuter__3fe6b .userProfileModalInner__7c87d::-webkit-scrollbar-corner {
  11806. background-color: transparent;
  11807. }
  11808. .userProfileModalOuter__3fe6b .overlayBackground__86b78,
  11809. .userProfileModalOuter__3fe6b .body_ea740e {
  11810. overflow: visible;
  11811. }
  11812. .userProfileModalOuter__3fe6b.userProfileOuterUnthemed__48723 .bannerSVGWrapper__3e7b0 {
  11813. position: absolute;
  11814. inset: 0;
  11815. }
  11816. .userProfileModalOuter__3fe6b.userProfileOuterUnthemed__48723 .pencilContainer_d4ce8d {
  11817. display: none;
  11818. }
  11819. .userProfileModalOuter__3fe6b.userProfileOuterUnthemed__48723 .overlayBackground__86b78 {
  11820. margin-top: 0;
  11821. }
  11822. .userProfileModalOuter__3fe6b .top__592a7 {
  11823. padding: 0;
  11824. gap: 0;
  11825. display: flex;
  11826. flex-direction: row;
  11827. position: relative;
  11828. border-bottom: none;
  11829. }
  11830. .userProfileModalOuter__3fe6b .top__592a7:has(.item__48dda:nth-child(1):last-child) {
  11831. --btn-count: 1;
  11832. }
  11833. .userProfileModalOuter__3fe6b .top__592a7:has(.item__48dda:nth-child(2):last-child) {
  11834. --btn-count: 2;
  11835. }
  11836. .userProfileModalOuter__3fe6b .top__592a7:has(.item__48dda:nth-child(3):last-child) {
  11837. --btn-count: 3;
  11838. }
  11839. .userProfileModalOuter__3fe6b .top__592a7:has(.item__48dda:nth-child(4):last-child) {
  11840. --btn-count: 4;
  11841. }
  11842. .userProfileModalOuter__3fe6b .top__592a7:has(.item__48dda:nth-child(5):last-child) {
  11843. --btn-count: 5;
  11844. }
  11845. .userProfileModalOuter__3fe6b .top__592a7 .item__48dda {
  11846. background: none;
  11847. margin: 0;
  11848. display: flex;
  11849. flex: 0 1 calc(100% / var(--btn-count));
  11850. justify-content: center;
  11851. border-bottom: none;
  11852. height: unset;
  11853. padding: 8px 14px;
  11854. font-size: 14px;
  11855. font-weight: 700;
  11856. text-transform: uppercase;
  11857. }
  11858. .userProfileModalOuter__3fe6b .top__592a7 .item__48dda:not(.selected__5711d):hover {
  11859. color: var(--interactive-hover);
  11860. }
  11861. .userProfileModalOuter__3fe6b .top__592a7::before {
  11862. content: "";
  11863. position: absolute;
  11864. height: 4px;
  11865. bottom: 0;
  11866. width: calc(100% / var(--btn-count));
  11867. background: var(--profile-gradient-secondary-color);
  11868. transition: translate 0.2s ease;
  11869. }
  11870. .userProfileModalOuter__3fe6b .top__592a7:has(.selected__5711d:nth-child(2)):before {
  11871. translate: 100%;
  11872. }
  11873. .userProfileModalOuter__3fe6b .top__592a7:has(.selected__5711d:nth-child(3)):before {
  11874. translate: 200%;
  11875. }
  11876. .userProfileModalOuter__3fe6b .top__592a7:has(.selected__5711d:nth-child(4)):before {
  11877. translate: 300%;
  11878. }
  11879. .userProfileModalOuter__3fe6b .top__592a7:has(.selected__5711d:nth-child(5)):before {
  11880. translate: 400%;
  11881. }
  11882. .userProfileModalOuter__3fe6b .scrollerBase_dc3aa9 {
  11883. overflow: hidden overlay !important;
  11884. padding: 0 !important;
  11885. margin: 16px 12px 12px 12px;
  11886. }
  11887. .userProfileModalOuter__3fe6b .userInfoText__5f822 {
  11888. margin-bottom: 0;
  11889. }
  11890. .userProfileModalOuter__3fe6b .userInfoText__5f822 .lineClamp2Plus_d4306b {
  11891. -webkit-line-clamp: 20 !important;
  11892. }
  11893. .userProfileModalOuter__3fe6b .userInfoSection__1daf8 {
  11894. padding: 0;
  11895. }
  11896. .userProfileModalOuter__3fe6b .userInfoSection__1daf8 h1 {
  11897. background: linear-gradient(90deg, var(--profile-gradient-secondary-color) 0%, var(--profile-gradient-primary-color) 90%);
  11898. padding: 5px 10px 5px 10px;
  11899. color: #ffffff;
  11900. font-size: 16px;
  11901. font-weight: 200;
  11902. line-height: 30px;
  11903. border-radius: 3px 3px 0 0;
  11904. margin-bottom: 0;
  11905. -webkit-user-select: text;
  11906. -moz-user-select: text;
  11907. user-select: text;
  11908. }
  11909. .userProfileModalOuter__3fe6b .userInfoSection__1daf8 h1 + div {
  11910. background: rgba(0, 0, 0, 0.3);
  11911. border-radius: 0 0 3px 3px;
  11912. padding: 20px 10px 11px 10px;
  11913. margin-bottom: 12px;
  11914. }
  11915. .userProfileModalOuter__3fe6b .note__7a4f4 {
  11916. margin: 0 0 12px 0;
  11917. }
  11918. .userProfileModalOuter__3fe6b .userInfoText__5f822 [data-text-variant="text-sm/normal"] {
  11919. background: rgba(0, 0, 0, 0.3);
  11920. padding: 8px;
  11921. border-radius: 5px;
  11922. }
  11923. .userProfileModalOuter__3fe6b .tabBarContainer__63f55 {
  11924. border-bottom: 0;
  11925. margin: 0 12px;
  11926. }
  11927. .userProfileModalOuter__3fe6b:has(.connectedAccountsColumn_fd2c41) .infoScroller__6ec79 {
  11928. flex-flow: row wrap;
  11929. display: grid;
  11930. grid-template-columns: 1fr 200px;
  11931. grid-gap: 12px;
  11932. grid-template-areas: "info accounts" "hidden hidden";
  11933. }
  11934. .userProfileModalOuter__3fe6b .userInfoSection__1daf8 + .userInfoSection__1daf8 {
  11935. border-top: none;
  11936. }
  11937. .userProfileModalOuter__3fe6b .memberSinceContainer__0a28b .userInfoText__5f822 {
  11938. font-size: 34px;
  11939. line-height: 38px;
  11940. font-weight: 200;
  11941. color: #fff;
  11942. background: rgba(0, 0, 0, 0.3);
  11943. padding: 8px;
  11944. border-radius: 5px;
  11945. width: 100%;
  11946. -webkit-user-select: text;
  11947. -moz-user-select: text;
  11948. user-select: text;
  11949. }
  11950. .userProfileModalOuter__3fe6b .infoScroller__6ec79 .userInfoSection__1daf8:not(.connectedAccounts_dc0a56) {
  11951. grid-area: info;
  11952. }
  11953. .userProfileModalOuter__3fe6b .infoScroller__6ec79 .connectedAccounts_dc0a56 {
  11954. grid-area: accounts;
  11955. flex-direction: column;
  11956. background: rgba(0, 0, 0, 0.3);
  11957. border-radius: 3px;
  11958. padding: 10px;
  11959. height: -moz-fit-content;
  11960. height: fit-content;
  11961. box-sizing: border-box;
  11962. }
  11963. .userProfileModalOuter__3fe6b .infoScroller__6ec79 > [aria-hidden=true] {
  11964. grid-area: hidden;
  11965. }
  11966. .userProfileModalOuter__3fe6b .connectedAccountsColumn_fd2c41 {
  11967. width: 100%;
  11968. }
  11969. .userProfileModalOuter__3fe6b .connectedAccountsColumn_fd2c41 + .connectedAccountsColumn_fd2c41 {
  11970. margin-left: 0;
  11971. }
  11972. .userProfileModalOuter__3fe6b .connectedAccountContainer__23f00 {
  11973. margin: 0 0 4px 0;
  11974. padding: 4px 0 4px 4px;
  11975. border-radius: 0;
  11976. border: none;
  11977. min-height: 36px;
  11978. position: relative;
  11979. }
  11980. .userProfileModalOuter__3fe6b .connectedAccount__28fb0 {
  11981. gap: 7px;
  11982. }
  11983. .userProfileModalOuter__3fe6b .connectedAccountIcon__6bc30 {
  11984. height: 34px;
  11985. width: 34px;
  11986. }
  11987. .userProfileModalOuter__3fe6b .connectedAccountNameText__00810 {
  11988. font-size: 13px;
  11989. line-height: 17px;
  11990. font-weight: 400;
  11991. }
  11992. .userProfileModalOuter__3fe6b .connectedAccountChildren__21b60 {
  11993. margin-left: 41px;
  11994. }
  11995. .userProfileModalOuter__3fe6b .connectedAccountVerifiedIcon_db6dbd {
  11996. display: none;
  11997. }
  11998. .userProfileModalOuter__3fe6b .anchor_c8ddc0:has(.connectedAccountOpenIcon_df549d):hover {
  11999. background: var(--btn-brand-hover);
  12000. border-radius: 2px;
  12001. }
  12002. .userProfileModalOuter__3fe6b .anchor_c8ddc0:has(.connectedAccountOpenIcon_df549d):hover svg {
  12003. color: #fff;
  12004. }
  12005. .userProfileModalOuter__3fe6b .anchor_c8ddc0:has(.connectedAccountOpenIcon_df549d) svg {
  12006. color: var(--btn-brand-text);
  12007. height: 18px;
  12008. width: 18px;
  12009. }
  12010. .userProfileModalOuter__3fe6b .listScroller__92e1a {
  12011. display: grid;
  12012. grid-template-columns: repeat(2, minmax(0, 1fr));
  12013. grid-gap: 7px;
  12014. background: rgba(0, 0, 0, 0.3);
  12015. border-radius: 3px;
  12016. padding: 20px 10px 11px 10px !important;
  12017. width: calc(100% - 12px - 10px);
  12018. }
  12019. .userProfileModalOuter__3fe6b .listRow__60937 {
  12020. background: rgba(0, 0, 0, 0.3);
  12021. padding: 8px;
  12022. border-radius: 5px;
  12023. margin: 0;
  12024. height: -moz-fit-content;
  12025. height: fit-content;
  12026. }
  12027. .userProfileModalOuter__3fe6b .listName_dbd44a {
  12028. font-size: 14px;
  12029. line-height: 18px;
  12030. }
  12031. .userProfileModalOuter__3fe6b .guildNick__01069 {
  12032. font-size: 13px;
  12033. line-height: 17px;
  12034. }
  12035. .userProfileModalOuter__3fe6b .userProfileActivity__68b33 {
  12036. grid-column: span 2;
  12037. background: rgba(0, 0, 0, 0.3);
  12038. padding: 8px;
  12039. border-radius: 5px;
  12040. }
  12041. .userProfileModalOuter__3fe6b .empty__18e40 {
  12042. grid-column: span 2;
  12043. }
  12044.  
  12045. .assetsLargeImage_b88a59,
  12046. .iconActiveMedium_d5475f {
  12047. border-radius: 0;
  12048. }
  12049.  
  12050. .modal_d2e7a7 {
  12051. background: var(--modal-background) !important;
  12052. }
  12053.  
  12054. .carouselModal_c0d5b7 {
  12055. width: -moz-fit-content;
  12056. width: fit-content;
  12057. height: -moz-fit-content;
  12058. height: fit-content;
  12059. }
  12060.  
  12061. .wrapper__76d8d {
  12062. inset: unset;
  12063. position: relative;
  12064. }
  12065.  
  12066. .wrapper__8e1d7 {
  12067. padding: 32px;
  12068. }
  12069.  
  12070. .arrowContainer__94160 {
  12071. top: unset;
  12072. bottom: 8px;
  12073. transform: none;
  12074. color: var(--brand-experiment);
  12075. width: 34px;
  12076. height: 34px;
  12077. opacity: 1;
  12078. border-radius: 2px;
  12079. background: var(--btn-grey);
  12080. box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  12081. transition-property: background, box-shadow, color;
  12082. transition-duration: 0.2s;
  12083. transition-timing-function: ease-out;
  12084. }
  12085. .arrowContainer__94160:hover {
  12086. background: var(--btn-grey-hover);
  12087. box-shadow: var(--btn-grey-boxshadow);
  12088. }
  12089. .arrowContainer__94160.navPrev_d8d242 {
  12090. margin-left: 4px;
  12091. }
  12092. .arrowContainer__94160.navNext_ec1363 {
  12093. margin-right: 4px;
  12094. }
  12095. .arrowContainer__94160 svg {
  12096. height: 18px;
  12097. width: 18px;
  12098. }
  12099.  
  12100. /* Header */
  12101. .detailsWrapper-TE1mu5 {
  12102. width: 100%;
  12103. position: relative;
  12104. inset: 0;
  12105. order: -1;
  12106. border-radius: 8px 8px 0 0;
  12107. box-shadow: var(--elevation-low);
  12108. background: var(--background-accent);
  12109. padding: 6px 0;
  12110. text-align: center;
  12111. }
  12112.  
  12113. .detailsWrapper-TE1mu5 .details-9dkFPc {
  12114. padding: 0 6px;
  12115. color: var(--text-normal);
  12116. }
  12117.  
  12118. .detailsWrapper-TE1mu5 .details-9dkFPc:first-child {
  12119. margin-top: 0;
  12120. font-family: var(--font-display);
  12121. color: var(--header-primary);
  12122. font-weight: 600;
  12123. }
  12124.  
  12125. .detailsWrapper-TE1mu5 .details-9dkFPc:not(:last-child) .label-mrlccN {
  12126. display: none;
  12127. }
  12128.  
  12129. .detailsWrapper-TE1mu5 .details-9dkFPc .label-mrlccN {
  12130. width: unset;
  12131. margin-right: 8px;
  12132. }
  12133.  
  12134. /* Bottom Controls */
  12135. .wrapper__8e1d7 > .downloadLink_e5ebe9,
  12136. .operations__07224 {
  12137. position: relative;
  12138. display: flex;
  12139. width: 100%;
  12140. justify-content: center;
  12141. }
  12142.  
  12143. .wrapper__8e1d7 .downloadLink_e5ebe9 {
  12144. top: unset;
  12145. opacity: 1;
  12146. color: var(--text-link) !important;
  12147. }
  12148.  
  12149. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) {
  12150. background: var(--modal-background);
  12151. box-shadow: inset var(--background-accent-75) 1px 1px 1px 0, inset var(--background-accent-25) -1px -1px 1px 0;
  12152. border-radius: 0;
  12153. border: 1px solid #000;
  12154. padding: 1px;
  12155. width: 300px;
  12156. max-width: 300px;
  12157. min-width: 300px;
  12158. max-height: 78vh !important;
  12159. }
  12160. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) > [class*=header] {
  12161. position: relative;
  12162. padding: 5px 15px 10px 15px;
  12163. background: none;
  12164. box-shadow: none;
  12165. height: unset;
  12166. min-height: unset;
  12167. }
  12168. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) > [class*=header] h1 {
  12169. font-size: 16px;
  12170. font-weight: 700;
  12171. }
  12172. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) > [class*=header] .size32_eadcb9 {
  12173. width: 30px;
  12174. min-width: 30px;
  12175. height: 30px;
  12176. min-height: 30px;
  12177. transition: none;
  12178. background: var(--btn-grey-hover);
  12179. border-radius: 2px;
  12180. }
  12181. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) > [class*=header] .size32_eadcb9.secondary_c96c46:hover:not(.disabled__8e315) {
  12182. background: var(--background-accent-hover);
  12183. }
  12184. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) .scrollerBase_dc3aa9 {
  12185. padding: 4px 0 0 4px;
  12186. }
  12187. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) .scrollerBase_dc3aa9::-webkit-scrollbar {
  12188. width: 4px;
  12189. }
  12190. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) .scrollerBase_dc3aa9 .wrapper__09ecc {
  12191. padding: 10px 10px 10px 14px;
  12192. }
  12193. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) .scrollerBase_dc3aa9 .avatar__08316 {
  12194. left: 16px;
  12195. }
  12196. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) .scrollerBase_dc3aa9 .header__39b23 {
  12197. opacity: 1;
  12198. display: flex;
  12199. flex-direction: column-reverse;
  12200. padding-left: 58px;
  12201. margin-bottom: 10px;
  12202. }
  12203. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) .scrollerBase_dc3aa9 .username_d30d99 {
  12204. font-size: 0.75rem;
  12205. line-height: 1.125rem;
  12206. }
  12207. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) .scrollerBase_dc3aa9 .timestamp_cdbd93 {
  12208. font-size: 0.6875rem;
  12209. }
  12210. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) .scrollerBase_dc3aa9 .timestampInline__470e0 {
  12211. margin-left: 0;
  12212. }
  12213. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) .scrollerBase_dc3aa9 .markup_a7e664 {
  12214. font-size: 0.875rem;
  12215. line-height: 1.25rem;
  12216. }
  12217. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) .scrollerBase_dc3aa9 .markup_a7e664 pre {
  12218. max-width: 100%;
  12219. }
  12220. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) .scrollerBase_dc3aa9 .markup_a7e664 code {
  12221. font-size: 0.875rem;
  12222. line-height: 1.25rem;
  12223. }
  12224. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) .scrollerBase_dc3aa9 .repliedMessage_e2bf4a {
  12225. top: 64px;
  12226. left: 19px;
  12227. padding: 4px;
  12228. font-size: 0.8125rem;
  12229. line-height: 1.0625rem;
  12230. }
  12231. #app-mount [id^=popout] > [aria-modal=true] > div:only-child:not(.spinner_f931ee) .scrollerBase_dc3aa9 .repliedMessage_e2bf4a + .contents_f41bb2 .header__39b23 {
  12232. margin-bottom: 45px;
  12233. }
  12234.  
  12235. .popout__24e32 {
  12236. background: var(--contextmenu-gradient);
  12237. padding: 8px 5px 8px 5px;
  12238. border-radius: 0;
  12239. box-shadow: 3px 3px 5px -3px #000;
  12240. }
  12241. .popout__24e32 .row__4daf2 {
  12242. margin: 0 -5px;
  12243. border-radius: 0;
  12244. padding: 6px 15px;
  12245. font-size: 12px;
  12246. min-height: 21px;
  12247. color: var(--contextmenu-text);
  12248. }
  12249. .popout__24e32 .row__4daf2:hover {
  12250. background: var(--contextmenu-text);
  12251. color: var(--contextmenu-text-hover);
  12252. }
  12253. .popout__24e32 .row__4daf2:hover .timestamp_e48059 {
  12254. color: var(--contextmenu-text-hover);
  12255. }
  12256.  
  12257. #app-mount .addGamePopout_e4ca8f {
  12258. background: var(--modal-background);
  12259. box-shadow: var(--modal-shadow);
  12260. border-radius: 0;
  12261. }
  12262.  
  12263. .addGamePopout_e4ca8f {
  12264. padding: 16px;
  12265. }
  12266. .addGamePopout_e4ca8f .divider__2bbbc {
  12267. margin: 10px 0 16px 0;
  12268. }
  12269. .addGamePopout_e4ca8f .actions__0d917 {
  12270. gap: 4px;
  12271. }
  12272.  
  12273. .container_d27846 {
  12274. border-radius: 0;
  12275. border: none;
  12276. background: var(--contextmenu-background);
  12277. box-shadow: var(--contextmenu-shadow);
  12278. padding: 0;
  12279. }
  12280. .container_d27846 .container__7712a {
  12281. background: rgba(0, 0, 0, 0.2);
  12282. border: 1px solid #000;
  12283. box-shadow: 1px 1px 0 0 var(--store-search-border);
  12284. font-size: 20px;
  12285. border-radius: 2px;
  12286. margin: 8px 8px 0;
  12287. }
  12288. .container_d27846 .container__7712a:hover {
  12289. background: rgba(0, 0, 0, 0.3);
  12290. }
  12291. .container_d27846 .container__7712a:focus, .container_d27846 .container__7712a:focus-within {
  12292. background: var(--background-modifier-accent-dark);
  12293. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  12294. }
  12295. .container_d27846 .container__7712a input {
  12296. font-size: 14px;
  12297. font-weight: 300;
  12298. line-height: 22px;
  12299. }
  12300. .container_d27846 .container__7712a input::-moz-placeholder {
  12301. font-style: italic;
  12302. }
  12303. .container_d27846 .container__7712a input::placeholder {
  12304. font-style: italic;
  12305. }
  12306. .container_d27846 .container__7712a svg {
  12307. color: var(--brand-experiment);
  12308. }
  12309. .container_d27846 .item__287de {
  12310. font-weight: 400;
  12311. font-size: 14px;
  12312. line-height: 18px;
  12313. height: 36px;
  12314. box-sizing: border-box;
  12315. border-radius: 0;
  12316. color: var(--contextmenu-text);
  12317. }
  12318. .container_d27846 .item__287de:hover:not(.disabled__1c6ff) {
  12319. background: var(--contextmenu-text);
  12320. color: var(--contextmenu-text-hover);
  12321. }
  12322. .container_d27846 .item__287de:hover:not(.disabled__1c6ff) .roleName_d19d33 .defaultColor__77578 {
  12323. color: var(--contextmenu-text-hover);
  12324. }
  12325. .container_d27846 .item__287de .roleCircle_bae511 {
  12326. box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  12327. }
  12328.  
  12329. #app-mount .contentWarningPopout__7d8c2 {
  12330. background: var(--modal-background);
  12331. border-radius: 0;
  12332. box-shadow: var(--modal-shadow);
  12333. }
  12334. #app-mount .contentWarningPopout__7d8c2 .body_fa303f {
  12335. background: none;
  12336. }
  12337. #app-mount .contentWarningPopout__7d8c2 .footer__36118 {
  12338. background: none;
  12339. }
  12340.  
  12341. #app-mount .autocomplete_df266d {
  12342. background: var(--modal-background);
  12343. }
  12344.  
  12345. .autocomplete_df266d .section_e983c1 {
  12346. border-radius: 3px;
  12347. }
  12348. .autocomplete_df266d .wrapper__19c60 {
  12349. border-radius: 3px;
  12350. transition: none;
  12351. }
  12352. .autocomplete_df266d .wrapper__9ae30 {
  12353. border-radius: 3px;
  12354. }
  12355. .autocomplete_df266d .wrapper__9ae30 svg {
  12356. border-radius: 3px;
  12357. }
  12358. .autocomplete_df266d .wrapper__9ae30 foreignObject {
  12359. -webkit-mask: none;
  12360. mask: none;
  12361. }
  12362. .autocomplete_df266d .rail_ad1aea .wrapper__9ae30,
  12363. .autocomplete_df266d .rail_ad1aea .wrapper__19c60 {
  12364. transition: none;
  12365. height: 32px;
  12366. width: 32px;
  12367. }
  12368. .autocomplete_df266d .rail_ad1aea .wrapper__9ae30:hover,
  12369. .autocomplete_df266d .rail_ad1aea .wrapper__19c60:hover {
  12370. box-shadow: 0 0 0 1px var(--header-primary);
  12371. }
  12372. .autocomplete_df266d .rail_ad1aea .wrapper__9ae30:hover svg,
  12373. .autocomplete_df266d .rail_ad1aea .wrapper__19c60:hover svg {
  12374. -webkit-clip-path: inset(1px round 3px);
  12375. clip-path: inset(1px round 3px);
  12376. }
  12377. .autocomplete_df266d .selected__608f1,
  12378. .autocomplete_df266d .selected__608f1:hover {
  12379. background: none;
  12380. }
  12381. .autocomplete_df266d .clickable_f8437d[aria-disabled=false] > .base__76a71:hover {
  12382. background-color: var(--background-accent);
  12383. }
  12384. .autocomplete_df266d .base__76a71 {
  12385. border-radius: 0;
  12386. }
  12387. .autocomplete_df266d [data-text-variant="text-md/normal"] {
  12388. font-size: 14px;
  12389. line-height: 18px;
  12390. font-weight: 400;
  12391. }
  12392.  
  12393. .outerWrapper__08924,
  12394. .autocomplete__0c75a {
  12395. border-radius: 0;
  12396. box-shadow: var(--modal-shadow);
  12397. }
  12398.  
  12399. .autocomplete_df266d .wrapper__4e8f1 {
  12400. background: none;
  12401. }
  12402. .autocomplete_df266d .autocompleteInner_a0e6a1:has(.list__0870a)::before {
  12403. content: "";
  12404. position: absolute;
  12405. top: 16px;
  12406. right: 16px;
  12407. height: calc(100% - 32px);
  12408. width: calc(100% - 56px - 16px);
  12409. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  12410. z-index: 2;
  12411. pointer-events: none;
  12412. border-radius: 2px;
  12413. }
  12414. .autocomplete_df266d .list__0870a {
  12415. background: var(--background-modifier-accent-dark);
  12416. margin: 16px 16px 0 0;
  12417. height: calc(100% - 32px);
  12418. border-radius: 2px;
  12419. }
  12420. .autocomplete_df266d .categoryHeader_f97a5f {
  12421. background: var(--background-modifier-accent-dark);
  12422. }
  12423. .autocomplete_df266d .categoryHeader_f97a5f .headerLabel_e9f74f {
  12424. text-transform: capitalize;
  12425. }
  12426.  
  12427. #app-mount .customColorPicker__3cb6a {
  12428. background: var(--contextmenu-background);
  12429. }
  12430.  
  12431. .customColorPicker__3cb6a {
  12432. padding: 16px;
  12433. gap: 10px;
  12434. border: none;
  12435. border-radius: 0;
  12436. box-shadow: var(--contextmenu-shadow);
  12437. }
  12438. .customColorPicker__3cb6a .customColorPickerEyeDropper_d9828d {
  12439. height: 34px;
  12440. width: 34px;
  12441. border-radius: 2px;
  12442. background: rgba(0, 0, 0, 0.2);
  12443. transition-property: background, box-shadow;
  12444. transition-duration: 0.2s;
  12445. transition-timing-function: ease-out;
  12446. }
  12447. .customColorPicker__3cb6a .customColorPickerEyeDropper_d9828d:hover {
  12448. background: rgba(0, 0, 0, 0.3);
  12449. box-shadow: var(--btn-grey-boxshadow);
  12450. }
  12451. .customColorPicker__3cb6a .customColorPickerEyeDropper_d9828d:hover svg {
  12452. color: var(--brand-experiment);
  12453. }
  12454. .customColorPicker__3cb6a .customColorPickerEyeDropper_d9828d svg {
  12455. color: var(--brand-experiment);
  12456. height: 18px;
  12457. width: 18px;
  12458. }
  12459. .customColorPicker__3cb6a .input_d266e7 {
  12460. background: rgba(0, 0, 0, 0.2);
  12461. border: 1px solid #000;
  12462. box-shadow: 1px 1px 0 0 var(--store-search-border);
  12463. }
  12464. .customColorPicker__3cb6a .input_d266e7:hover:not(:focus, :focus-within) {
  12465. background: rgba(0, 0, 0, 0.3);
  12466. }
  12467. .customColorPicker__3cb6a .suggestedColor__34249 {
  12468. width: 34px;
  12469. height: 34px;
  12470. border-radius: 2px;
  12471. border: none;
  12472. transition-property: box-shadow;
  12473. transition-duration: 0.2s;
  12474. transition-timing-function: ease-out;
  12475. }
  12476. .customColorPicker__3cb6a .suggestedColor__34249:hover {
  12477. box-shadow: var(--btn-grey-boxshadow);
  12478. }
  12479.  
  12480. .hue__687e2 {
  12481. height: 8px;
  12482. margin: 10px 0;
  12483. }
  12484. .hue__687e2 > div > div {
  12485. border-radius: 50px;
  12486. }
  12487.  
  12488. .menu_dc52c6 {
  12489. box-shadow: var(--contextmenu-shadow);
  12490. background: var(--contextmenu-background);
  12491. border-radius: 0;
  12492. }
  12493. .menu_dc52c6 .button__3ecb4 {
  12494. width: 30px;
  12495. height: 30px;
  12496. padding: unset;
  12497. border-radius: 2px;
  12498. background: none;
  12499. }
  12500. .menu_dc52c6 .button__3ecb4.focused__47631 {
  12501. background: var(--contextmenu-text);
  12502. }
  12503. .menu_dc52c6 .scroller__750f5 {
  12504. padding: 0;
  12505. overflow-y: auto !important;
  12506. }
  12507.  
  12508. .submenuPaddingContainer__12a9d {
  12509. margin: 0 -4px;
  12510. }
  12511.  
  12512. .item__183e8.colorDefault__0b482 {
  12513. border-radius: 0;
  12514. margin: 0;
  12515. padding: 6px 15px;
  12516. font-size: 12px;
  12517. min-height: 21px;
  12518. }
  12519. .item__183e8.colorDefault__0b482:not(.colorDanger_eec36d) {
  12520. color: var(--contextmenu-text);
  12521. }
  12522. .item__183e8.colorDefault__0b482:not(.colorDanger_eec36d).focused__27621, .item__183e8.colorDefault__0b482:not(.colorDanger_eec36d):active {
  12523. background: var(--contextmenu-text);
  12524. color: var(--contextmenu-text-hover);
  12525. }
  12526. .item__183e8.colorDefault__0b482:not(.colorDanger_eec36d).focused__27621 .subtext__8a015,
  12527. .item__183e8.colorDefault__0b482:not(.colorDanger_eec36d).focused__27621 .caret_ce50ce,
  12528. .item__183e8.colorDefault__0b482:not(.colorDanger_eec36d).focused__27621 .radioSelection__5ed39,
  12529. .item__183e8.colorDefault__0b482:not(.colorDanger_eec36d).focused__27621 .checkbox__45366, .item__183e8.colorDefault__0b482:not(.colorDanger_eec36d):active .subtext__8a015,
  12530. .item__183e8.colorDefault__0b482:not(.colorDanger_eec36d):active .caret_ce50ce,
  12531. .item__183e8.colorDefault__0b482:not(.colorDanger_eec36d):active .radioSelection__5ed39,
  12532. .item__183e8.colorDefault__0b482:not(.colorDanger_eec36d):active .checkbox__45366 {
  12533. color: var(--contextmenu-text-hover);
  12534. }
  12535. .item__183e8.colorDefault__0b482:not(.colorDanger_eec36d).focused__27621 .check__8d1bd, .item__183e8.colorDefault__0b482:not(.colorDanger_eec36d):active .check__8d1bd {
  12536. color: var(--contextmenu-text);
  12537. }
  12538.  
  12539. .item__183e8 .iconContainer__829e7 {
  12540. justify-content: center;
  12541. align-items: center;
  12542. display: flex;
  12543. }
  12544. .item__183e8 .icon_f09dde {
  12545. width: 16px;
  12546. }
  12547.  
  12548. .focused_f6efd9 .userMenuUsername_f6de35 .userMenuDiscriminator_b70e1b, .focused_f6efd9 .userMenuUsername_f6de35 .userMenuText_a180af {
  12549. color: var(--contextmenu-text-hover);
  12550. }
  12551.  
  12552. .popoutContainer__7b9a3 {
  12553. border: 2px solid #3A3A3A;
  12554. padding: 16px;
  12555. background-color: #1d1d1d;
  12556. box-shadow: 0 0 12px #000000;
  12557. border-radius: 0;
  12558. }
  12559. .popoutContainer__7b9a3 .emojiSection_a65b54 {
  12560. padding: 0;
  12561. }
  12562. .popoutContainer__7b9a3 [data-text-variant="text-md/semibold"] {
  12563. color: #b4b4b4;
  12564. font-weight: 400;
  12565. font-size: 24px;
  12566. line-height: 28px;
  12567. margin-bottom: 5px;
  12568. }
  12569. .popoutContainer__7b9a3 [data-text-variant="text-sm/normal"] {
  12570. color: #767676;
  12571. font-weight: 500;
  12572. }
  12573. .popoutContainer__7b9a3 button {
  12574. width: -moz-fit-content;
  12575. width: fit-content;
  12576. }
  12577. .popoutContainer__7b9a3 .guildSection_ebda04 {
  12578. padding: 0;
  12579. background: none;
  12580. position: relative;
  12581. margin-top: 24px;
  12582. padding-top: 24px;
  12583. }
  12584. .popoutContainer__7b9a3 .guildSection_ebda04::before {
  12585. content: "";
  12586. display: block;
  12587. height: 2px;
  12588. width: 100%;
  12589. background: linear-gradient(to right, transparent, #3A3A3A, transparent);
  12590. position: absolute;
  12591. top: 0;
  12592. }
  12593. .popoutContainer__7b9a3 .guildSection_ebda04 .guildTitle_a1388f {
  12594. display: none;
  12595. }
  12596. .popoutContainer__7b9a3 .guildSection_ebda04 svg {
  12597. border-radius: 3px;
  12598. }
  12599. .popoutContainer__7b9a3 .guildSection_ebda04 svg foreignObject {
  12600. -webkit-mask: none;
  12601. mask: none;
  12602. }
  12603. .popoutContainer__7b9a3 .guildSection_ebda04 .guildName__6b418 {
  12604. font-weight: 500;
  12605. color: #767676;
  12606. }
  12607. .popoutContainer__7b9a3 .guildSection_ebda04 [data-text-variant="text-xs/normal"] {
  12608. --header-secondary: #767676;
  12609. font-size: 14px;
  12610. line-height: 18px;
  12611. font-weight: 500;
  12612. }
  12613.  
  12614. .contentWrapper_eab878.isBurstReactionPicker_b9ca03 {
  12615. border-radius: 0;
  12616. }
  12617.  
  12618. .layer_ec16dd > #emoji-picker-tab-panel .emojiPicker_b65ce9 {
  12619. background: none;
  12620. box-shadow: none;
  12621. border-radius: 0;
  12622. }
  12623.  
  12624. .contentWrapper__321ed,
  12625. .contentWrapper_eab878,
  12626. .layer_ec16dd > #emoji-picker-tab-panel {
  12627. background: var(--modal-background);
  12628. border-radius: 0;
  12629. box-shadow: 1px 3px 14px rgba(0, 0, 0, 0.65);
  12630. grid-template-rows: 34px auto;
  12631. grid-row-gap: 10px;
  12632. }
  12633. .contentWrapper__321ed [class*=navList],
  12634. .contentWrapper_eab878 [class*=navList],
  12635. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList] {
  12636. background: var(--darker-grey);
  12637. border-radius: 2px;
  12638. padding: 0;
  12639. margin: 0 0 10px 0;
  12640. gap: 0;
  12641. display: flex;
  12642. flex-direction: row;
  12643. position: relative;
  12644. box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.6666666667);
  12645. border-bottom: none;
  12646. }
  12647. .contentWrapper__321ed [class*=navList]:has(button:nth-child(1):last-child),
  12648. .contentWrapper_eab878 [class*=navList]:has(button:nth-child(1):last-child),
  12649. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]:has(button:nth-child(1):last-child) {
  12650. --btn-count: 1;
  12651. }
  12652. .contentWrapper__321ed [class*=navList]:has(button:nth-child(2):last-child),
  12653. .contentWrapper_eab878 [class*=navList]:has(button:nth-child(2):last-child),
  12654. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]:has(button:nth-child(2):last-child) {
  12655. --btn-count: 2;
  12656. }
  12657. .contentWrapper__321ed [class*=navList]:has(button:nth-child(3):last-child),
  12658. .contentWrapper_eab878 [class*=navList]:has(button:nth-child(3):last-child),
  12659. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]:has(button:nth-child(3):last-child) {
  12660. --btn-count: 3;
  12661. }
  12662. .contentWrapper__321ed [class*=navList]:has(button:nth-child(4):last-child),
  12663. .contentWrapper_eab878 [class*=navList]:has(button:nth-child(4):last-child),
  12664. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]:has(button:nth-child(4):last-child) {
  12665. --btn-count: 4;
  12666. }
  12667. .contentWrapper__321ed [class*=navList]:has(button:nth-child(5):last-child),
  12668. .contentWrapper_eab878 [class*=navList]:has(button:nth-child(5):last-child),
  12669. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]:has(button:nth-child(5):last-child) {
  12670. --btn-count: 5;
  12671. }
  12672. .contentWrapper__321ed [class*=navList]:has(button:nth-child(6):last-child),
  12673. .contentWrapper_eab878 [class*=navList]:has(button:nth-child(6):last-child),
  12674. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]:has(button:nth-child(6):last-child) {
  12675. --btn-count: 6;
  12676. }
  12677. .contentWrapper__321ed [class*=navList]:has([aria-selected=true]:nth-child(2)):before,
  12678. .contentWrapper_eab878 [class*=navList]:has([aria-selected=true]:nth-child(2)):before,
  12679. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]:has([aria-selected=true]:nth-child(2)):before {
  12680. translate: 100%;
  12681. }
  12682. .contentWrapper__321ed [class*=navList]:has([aria-selected=true]:nth-child(3)):before,
  12683. .contentWrapper_eab878 [class*=navList]:has([aria-selected=true]:nth-child(3)):before,
  12684. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]:has([aria-selected=true]:nth-child(3)):before {
  12685. translate: 200%;
  12686. }
  12687. .contentWrapper__321ed [class*=navList]:has([aria-selected=true]:nth-child(4)):before,
  12688. .contentWrapper_eab878 [class*=navList]:has([aria-selected=true]:nth-child(4)):before,
  12689. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]:has([aria-selected=true]:nth-child(4)):before {
  12690. translate: 300%;
  12691. }
  12692. .contentWrapper__321ed [class*=navList]:has([aria-selected=true]:nth-child(5)):before,
  12693. .contentWrapper_eab878 [class*=navList]:has([aria-selected=true]:nth-child(5)):before,
  12694. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]:has([aria-selected=true]:nth-child(5)):before {
  12695. translate: 400%;
  12696. }
  12697. .contentWrapper__321ed [class*=navList]:has([aria-selected=true]:nth-child(6)):before,
  12698. .contentWrapper_eab878 [class*=navList]:has([aria-selected=true]:nth-child(6)):before,
  12699. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]:has([aria-selected=true]:nth-child(6)):before {
  12700. translate: 500%;
  12701. }
  12702. .contentWrapper__321ed [class*=navList] button,
  12703. .contentWrapper_eab878 [class*=navList] button,
  12704. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList] button {
  12705. background: none;
  12706. margin: 0;
  12707. display: flex;
  12708. flex: 0 1 calc(100% / var(--btn-count));
  12709. justify-content: center;
  12710. border-bottom: none;
  12711. padding: 0;
  12712. height: 34px;
  12713. padding: 8px 14px;
  12714. font-size: 14px;
  12715. font-weight: 400;
  12716. }
  12717. .contentWrapper__321ed [class*=navList] button:not([aria-selected=true]):hover,
  12718. .contentWrapper_eab878 [class*=navList] button:not([aria-selected=true]):hover,
  12719. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList] button:not([aria-selected=true]):hover {
  12720. background: var(--btn-grey);
  12721. }
  12722. .contentWrapper__321ed [class*=navList]::before,
  12723. .contentWrapper_eab878 [class*=navList]::before,
  12724. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]::before {
  12725. content: "";
  12726. position: absolute;
  12727. height: 100%;
  12728. width: calc(100% / var(--btn-count));
  12729. background: var(--btn-grey-hover);
  12730. transition: translate 0.2s ease;
  12731. border-radius: 2px;
  12732. }
  12733. .contentWrapper__321ed [class*=navList]:has(#reaction-picker-tab),
  12734. .contentWrapper_eab878 [class*=navList]:has(#reaction-picker-tab),
  12735. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]:has(#reaction-picker-tab) {
  12736. --btn-count: 2;
  12737. }
  12738. .contentWrapper__321ed [class*=navList] > *:not(.betaTag__403f6),
  12739. .contentWrapper_eab878 [class*=navList] > *:not(.betaTag__403f6),
  12740. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList] > *:not(.betaTag__403f6) {
  12741. background: none;
  12742. margin: 0;
  12743. display: flex;
  12744. flex: 0 1 calc(100% / var(--btn-count));
  12745. justify-content: center;
  12746. box-sizing: border-box;
  12747. border-bottom: none;
  12748. height: 34px;
  12749. padding: 8px 14px;
  12750. font-size: 14px;
  12751. font-weight: 400;
  12752. }
  12753. .contentWrapper__321ed [class*=navList] > *:not(.betaTag__403f6):not([aria-selected=true], div:has(> #super-reaction-picker-tab[aria-selected=true])):hover,
  12754. .contentWrapper_eab878 [class*=navList] > *:not(.betaTag__403f6):not([aria-selected=true], div:has(> #super-reaction-picker-tab[aria-selected=true])):hover,
  12755. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList] > *:not(.betaTag__403f6):not([aria-selected=true], div:has(> #super-reaction-picker-tab[aria-selected=true])):hover {
  12756. background: var(--btn-grey);
  12757. }
  12758. .contentWrapper__321ed [class*=navList]:has(#super-reaction-picker-tab[aria-selected=true]):before,
  12759. .contentWrapper_eab878 [class*=navList]:has(#super-reaction-picker-tab[aria-selected=true]):before,
  12760. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList]:has(#super-reaction-picker-tab[aria-selected=true]):before {
  12761. translate: 100%;
  12762. background: linear-gradient(270deg, var(--premium-tier-2-pink-for-gradients), var(--premium-tier-2-pink-for-gradients-2) 33.63%, var(--premium-tier-2-purple-for-gradients));
  12763. }
  12764. .contentWrapper__321ed [class*=navList] div:has(> #super-reaction-picker-tab),
  12765. .contentWrapper_eab878 [class*=navList] div:has(> #super-reaction-picker-tab),
  12766. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList] div:has(> #super-reaction-picker-tab) {
  12767. position: relative;
  12768. }
  12769. .contentWrapper__321ed [class*=navList] #super-reaction-picker-tab,
  12770. .contentWrapper_eab878 [class*=navList] #super-reaction-picker-tab,
  12771. .layer_ec16dd > #emoji-picker-tab-panel [class*=navList] #super-reaction-picker-tab {
  12772. position: absolute;
  12773. inset: 0;
  12774. width: 100%;
  12775. height: 100%;
  12776. padding: 0;
  12777. background: none;
  12778. }
  12779. .contentWrapper__321ed [class*=header_]:not(.wrapper__7a35f),
  12780. .contentWrapper_eab878 [class*=header_]:not(.wrapper__7a35f),
  12781. .layer_ec16dd > #emoji-picker-tab-panel [class*=header_]:not(.wrapper__7a35f) {
  12782. box-shadow: none;
  12783. border-radius: 0;
  12784. background: none;
  12785. }
  12786. .contentWrapper__321ed [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input),
  12787. .contentWrapper_eab878 [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input),
  12788. .layer_ec16dd > #emoji-picker-tab-panel [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input) {
  12789. border-radius: 2px;
  12790. background: var(--btn-grey);
  12791. }
  12792. .contentWrapper__321ed [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input) input::-moz-placeholder, .contentWrapper_eab878 [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input) input::-moz-placeholder, .layer_ec16dd > #emoji-picker-tab-panel [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input) input::-moz-placeholder {
  12793. font-style: italic;
  12794. }
  12795. .contentWrapper__321ed [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input) input::placeholder,
  12796. .contentWrapper_eab878 [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input) input::placeholder,
  12797. .layer_ec16dd > #emoji-picker-tab-panel [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input) input::placeholder {
  12798. font-style: italic;
  12799. }
  12800. .contentWrapper__321ed [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input):hover,
  12801. .contentWrapper_eab878 [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input):hover,
  12802. .layer_ec16dd > #emoji-picker-tab-panel [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input):hover {
  12803. background: var(--btn-grey-hover-light);
  12804. }
  12805. .contentWrapper__321ed [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input):focus, .contentWrapper__321ed [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input):focus-within,
  12806. .contentWrapper_eab878 [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input):focus,
  12807. .contentWrapper_eab878 [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input):focus-within,
  12808. .layer_ec16dd > #emoji-picker-tab-panel [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input):focus,
  12809. .layer_ec16dd > #emoji-picker-tab-panel [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input):focus-within {
  12810. background: var(--background-modifier-accent-dark);
  12811. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  12812. }
  12813. .contentWrapper__321ed [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input) .iconContainer__8fa9c,
  12814. .contentWrapper_eab878 [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input) .iconContainer__8fa9c,
  12815. .layer_ec16dd > #emoji-picker-tab-panel [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input) .iconContainer__8fa9c {
  12816. height: 18px;
  12817. width: 18px;
  12818. }
  12819. .contentWrapper__321ed [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input) svg,
  12820. .contentWrapper_eab878 [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input) svg,
  12821. .layer_ec16dd > #emoji-picker-tab-panel [class*=header_]:not(.wrapper__7a35f) [class*=container_]:has(input) svg {
  12822. color: var(--brand-experiment);
  12823. }
  12824. .contentWrapper__321ed .premiumUpsell_e1bfd9,
  12825. .contentWrapper_eab878 .premiumUpsell_e1bfd9,
  12826. .layer_ec16dd > #emoji-picker-tab-panel .premiumUpsell_e1bfd9 {
  12827. background: none;
  12828. margin: 10px 0 0 0;
  12829. }
  12830. .contentWrapper__321ed .wrapper_e3070a::before,
  12831. .contentWrapper_eab878 .wrapper_e3070a::before,
  12832. .layer_ec16dd > #emoji-picker-tab-panel .wrapper_e3070a::before {
  12833. content: "";
  12834. position: absolute;
  12835. top: 0;
  12836. left: 0;
  12837. right: 0;
  12838. height: calc(100% - 48px);
  12839. width: 100%;
  12840. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  12841. z-index: 2;
  12842. pointer-events: none;
  12843. border-radius: 2px 0 0 2px;
  12844. }
  12845. .contentWrapper__321ed .wrapper_e3070a .scroller_e89578,
  12846. .contentWrapper_eab878 .wrapper_e3070a .scroller_e89578,
  12847. .layer_ec16dd > #emoji-picker-tab-panel .wrapper_e3070a .scroller_e89578 {
  12848. background: var(--background-tertiary);
  12849. border-radius: 2px 0 0 2px;
  12850. background: var(--background-modifier-accent-dark);
  12851. }
  12852. .contentWrapper__321ed .inspectedIndicator_f00108,
  12853. .contentWrapper_eab878 .inspectedIndicator_f00108,
  12854. .layer_ec16dd > #emoji-picker-tab-panel .inspectedIndicator_f00108 {
  12855. -webkit-mask: none;
  12856. mask: none;
  12857. transition: none;
  12858. }
  12859. .contentWrapper__321ed .assetWrapperMasked__20115,
  12860. .contentWrapper_eab878 .assetWrapperMasked__20115,
  12861. .layer_ec16dd > #emoji-picker-tab-panel .assetWrapperMasked__20115 {
  12862. -webkit-mask: none;
  12863. mask: none;
  12864. }
  12865. .contentWrapper__321ed .loadingIndicator__6b1b4,
  12866. .contentWrapper_eab878 .loadingIndicator__6b1b4,
  12867. .layer_ec16dd > #emoji-picker-tab-panel .loadingIndicator__6b1b4 {
  12868. display: none;
  12869. }
  12870. .contentWrapper__321ed .result_e1fc74,
  12871. .contentWrapper__321ed .result_e1fc74::after,
  12872. .contentWrapper__321ed .categoryFade_f9c843,
  12873. .contentWrapper__321ed .categoryFadeBlurple_e73c11,
  12874. .contentWrapper__321ed video,
  12875. .contentWrapper__321ed img,
  12876. .contentWrapper_eab878 .result_e1fc74,
  12877. .contentWrapper_eab878 .result_e1fc74::after,
  12878. .contentWrapper_eab878 .categoryFade_f9c843,
  12879. .contentWrapper_eab878 .categoryFadeBlurple_e73c11,
  12880. .contentWrapper_eab878 video,
  12881. .contentWrapper_eab878 img,
  12882. .layer_ec16dd > #emoji-picker-tab-panel .result_e1fc74,
  12883. .layer_ec16dd > #emoji-picker-tab-panel .result_e1fc74::after,
  12884. .layer_ec16dd > #emoji-picker-tab-panel .categoryFade_f9c843,
  12885. .layer_ec16dd > #emoji-picker-tab-panel .categoryFadeBlurple_e73c11,
  12886. .layer_ec16dd > #emoji-picker-tab-panel video,
  12887. .layer_ec16dd > #emoji-picker-tab-panel img {
  12888. border-radius: 0;
  12889. }
  12890.  
  12891. .categoryItem__39904,
  12892. .stickerCategory__4891e {
  12893. border-radius: 3px;
  12894. transition: none;
  12895. }
  12896. .categoryItem__39904:hover,
  12897. .stickerCategory__4891e:hover {
  12898. box-shadow: 0 0 0 1px var(--header-primary);
  12899. }
  12900. .categoryItem__39904:hover svg,
  12901. .stickerCategory__4891e:hover svg {
  12902. -webkit-clip-path: inset(1px round 3px);
  12903. clip-path: inset(1px round 3px);
  12904. }
  12905. .categoryItem__39904.categoryItemDefaultCategorySelected__8245a,
  12906. .stickerCategory__4891e.categoryItemDefaultCategorySelected__8245a {
  12907. background: none;
  12908. }
  12909. .categoryItem__39904 svg,
  12910. .stickerCategory__4891e svg {
  12911. border-radius: 3px;
  12912. }
  12913. .categoryItem__39904 foreignObject,
  12914. .stickerCategory__4891e foreignObject {
  12915. -webkit-mask: none;
  12916. mask: none;
  12917. }
  12918.  
  12919. .categoryList_f8c48f:has(.unicodeShortcut__1dd6b[aria-hidden=false]) .scroller_e89578 {
  12920. -webkit-clip-path: inset(0 0 48px 0);
  12921. clip-path: inset(0 0 48px 0);
  12922. }
  12923.  
  12924. .unicodeShortcut__1dd6b[aria-hidden=false] {
  12925. height: 32px;
  12926. width: 32px;
  12927. left: 8px;
  12928. bottom: 8px;
  12929. }
  12930. .unicodeShortcut__1dd6b[aria-hidden=false]:hover {
  12931. background: var(--background-modifier-accent-dark);
  12932. box-shadow: 0 0 0 1px var(--header-primary);
  12933. border-radius: 3px;
  12934. }
  12935.  
  12936. .wrapper__7a35f {
  12937. background: var(--background-modifier-accent-dark);
  12938. box-shadow: none;
  12939. border-radius: 0;
  12940. }
  12941. .wrapper__7a35f .header__9f6dc {
  12942. width: 100%;
  12943. }
  12944. .wrapper__7a35f .header__9f6dc .headerLabel_e9f74f {
  12945. margin-left: 4px;
  12946. margin-right: 0;
  12947. text-transform: capitalize;
  12948. }
  12949. .wrapper__7a35f .header__9f6dc::after {
  12950. content: "";
  12951. height: 2px;
  12952. margin: 0 10px 0 10px;
  12953. background: var(--background-modifier-accent-compat);
  12954. display: flex;
  12955. flex-grow: 1;
  12956. width: 20px;
  12957. }
  12958. .wrapper__7a35f .header__9f6dc > svg:last-of-type {
  12959. order: 1;
  12960. color: var(--brand-experiment);
  12961. }
  12962.  
  12963. .emojiItem_b15dee {
  12964. border-radius: 0;
  12965. }
  12966. .emojiItem_b15dee.emojiItemSelected__1a09a {
  12967. background: var(--background-accent);
  12968. }
  12969. .emojiItem_b15dee .imageLoading__37d01 {
  12970. display: none;
  12971. }
  12972. .emojiItem_b15dee:has(.icon_e6e189[d="M12 23a11 11 0 1 0 0-22 11 11 0 0 0 0 22Zm0-17a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2h-4v4a1 1 0 1 1-2 0v-4H7a1 1 0 1 1 0-2h4V7a1 1 0 0 1 1-1Z"]) {
  12973. display: flex;
  12974. align-items: center;
  12975. justify-content: center;
  12976. background: var(--text-muted);
  12977. height: 20px;
  12978. width: 20px;
  12979. margin-top: 14px;
  12980. margin-left: 14px;
  12981. border-radius: 1px;
  12982. }
  12983. .emojiItem_b15dee:has(.icon_e6e189[d="M12 23a11 11 0 1 0 0-22 11 11 0 0 0 0 22Zm0-17a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2h-4v4a1 1 0 1 1-2 0v-4H7a1 1 0 1 1 0-2h4V7a1 1 0 0 1 1-1Z"]):hover {
  12984. background: #fff;
  12985. }
  12986. .emojiItem_b15dee .icon_e6e189 {
  12987. width: 24px;
  12988. height: 24px;
  12989. fill: var(--background-modifier-accent-dark);
  12990. }
  12991. .emojiItem_b15dee .icon_e6e189 path[d="M12 23a11 11 0 1 0 0-22 11 11 0 0 0 0 22Zm0-17a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2h-4v4a1 1 0 1 1-2 0v-4H7a1 1 0 1 1 0-2h4V7a1 1 0 0 1 1-1Z"] {
  12992. d: path("M 19 10 H 14 V 5 H 10 V 10 H 5 V 14 H 10 V 19 H 14 V 14 H 19 V 10 Z");
  12993. fill: var(--background-modifier-accent-dark);
  12994. }
  12995.  
  12996. .theme-dark .theme-light .contentWrapper__321ed {
  12997. background: var(--modal-background);
  12998. }
  12999.  
  13000. .wrapper__4f229,
  13001. .wrapper_cd625e {
  13002. border-radius: 0;
  13003. background: none;
  13004. }
  13005.  
  13006. .bodyWrapper_cc3635 {
  13007. border-radius: 2px 0 0 2px;
  13008. background: var(--background-modifier-accent-dark);
  13009. }
  13010. .bodyWrapper_cc3635::before {
  13011. content: "";
  13012. position: absolute;
  13013. inset: 0;
  13014. height: 100%;
  13015. width: 100%;
  13016. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  13017. z-index: 2;
  13018. pointer-events: none;
  13019. border-radius: inherit;
  13020. }
  13021.  
  13022. .inspector__993e1 {
  13023. background: none;
  13024. }
  13025. .inspector__993e1 [class*=titlePrimary] {
  13026. color: var(--header-primary);
  13027. font-weight: 400;
  13028. }
  13029. .inspector__993e1 [class*=titleSecondary] {
  13030. color: var(--background-accent-hover);
  13031. font-weight: 700;
  13032. }
  13033. .inspector__993e1 [class*=titleSecondary] strong {
  13034. font-weight: 700;
  13035. color: var(--text-muted);
  13036. text-transform: uppercase;
  13037. }
  13038. .inspector__993e1 [class*=graphicSecondary] svg {
  13039. border-radius: 3px;
  13040. }
  13041. .inspector__993e1 [class*=graphicSecondary] foreignObject {
  13042. -webkit-mask: none;
  13043. mask: none;
  13044. }
  13045.  
  13046. .badgeLabel__7c5a4 {
  13047. border-radius: 2px;
  13048. text-transform: capitalize;
  13049. }
  13050.  
  13051. #slate-toolbar {
  13052. background: var(--contextmenu-background);
  13053. border-radius: 0;
  13054. box-shadow: var(--contextmenu-shadow);
  13055. }
  13056.  
  13057. .toolbar_c7b525:before {
  13058. display: none;
  13059. }
  13060.  
  13061. .buttons_bee06d {
  13062. border-radius: 0;
  13063. }
  13064. .buttons_bee06d .button_afdfd9 {
  13065. border-radius: 0;
  13066. font-size: 12px;
  13067. transition: none;
  13068. }
  13069. .buttons_bee06d .button_afdfd9 .buttonInner__1dbe5 {
  13070. display: flex;
  13071. align-items: center;
  13072. justify-content: center;
  13073. }
  13074. .buttons_bee06d .button_afdfd9 svg {
  13075. color: var(--contextmenu-text);
  13076. height: 18px;
  13077. width: 18px;
  13078. }
  13079. .buttons_bee06d .button_afdfd9.hover_d0ebf2:hover {
  13080. background: var(--contextmenu-text);
  13081. }
  13082. .buttons_bee06d .button_afdfd9.hover_d0ebf2:hover svg {
  13083. color: var(--contextmenu-text-hover);
  13084. }
  13085.  
  13086. .recentMentionsPopout__826a9 .container__56e52,
  13087. .recentMentionsPopout__826a9 .channel_d48f2d {
  13088. background-color: var(--modal-popout-message);
  13089. border-radius: 0;
  13090. }
  13091. .recentMentionsPopout__826a9 .container__56e52 {
  13092. margin-bottom: 4px;
  13093. }
  13094. .recentMentionsPopout__826a9 .channelHeader__5d30c {
  13095. background: var(--modal-popout-message);
  13096. padding: 10px 10px 0 10px;
  13097. border-bottom: none;
  13098. }
  13099. .recentMentionsPopout__826a9 .messageContainer_aa7d14 {
  13100. padding: 0;
  13101. }
  13102.  
  13103. #app-mount .recentMentionsPopout__826a9 .tab_a8a066 {
  13104. border-radius: 2px;
  13105. padding: 5px 10px;
  13106. font-size: 12px;
  13107. font-weight: 400;
  13108. height: 30px;
  13109. margin-top: 0;
  13110. margin-left: 0;
  13111. margin-right: 2px;
  13112. }
  13113. #app-mount .recentMentionsPopout__826a9 .tab_a8a066:hover {
  13114. background: var(--background-modifier-accent);
  13115. }
  13116. #app-mount .recentMentionsPopout__826a9 .tab_a8a066.active__7e7af {
  13117. background: var(--background-accent-hover);
  13118. }
  13119.  
  13120. .recentMentionsPopout__826a9 .channel_d48f2d {
  13121. margin: 0 0 4px 0;
  13122. }
  13123. .recentMentionsPopout__826a9 .channel_d48f2d .messages_f7999e {
  13124. padding: 0;
  13125. }
  13126. .recentMentionsPopout__826a9 .iconActiveMedium_d5475f {
  13127. border-radius: 0;
  13128. }
  13129.  
  13130. #app-mount .channelHeader__5d30c + [class^=message] .wrapper__09ecc {
  13131. padding: 10px !important;
  13132. }
  13133. #app-mount .channelHeader__5d30c + [class^=message] .repliedMessage_e2bf4a {
  13134. left: 15px !important;
  13135. max-width: calc(100% - 20px);
  13136. }
  13137. #app-mount .channelHeader__5d30c + [class^=message] .repliedMessage_e2bf4a .repliedTextContent__75526 {
  13138. display: flex;
  13139. align-items: center;
  13140. }
  13141. #app-mount .channelHeader__5d30c + [class^=message] .avatar__08316 {
  13142. left: 12px !important;
  13143. }
  13144. #app-mount .channelHeader__5d30c + [class^=message] .header__39b23 {
  13145. padding-left: 54px !important;
  13146. }
  13147. #app-mount .channelHeader__5d30c + [class^=message] .jumpButton__24ca6 {
  13148. right: 10px;
  13149. }
  13150.  
  13151. .recentMentionsPopout__826a9 .channelHeader__5d30c {
  13152. background: none;
  13153. }
  13154. .recentMentionsPopout__826a9 .channelHeader__5d30c .channelNameHeader_bfaee3 {
  13155. font-size: 12px;
  13156. }
  13157. .recentMentionsPopout__826a9 .channelHeader__5d30c .closeButton_ba6c7d {
  13158. margin-left: 0;
  13159. }
  13160.  
  13161. .container__56e52:has([class^=jumpButton]:hover),
  13162. .channel_d48f2d:has([class^=jumpButton]:hover) {
  13163. background: var(--background-accent);
  13164. }
  13165.  
  13166. .container__56e52 [class^=jumpButton],
  13167. .channel_d48f2d [class^=jumpButton] {
  13168. margin: 0;
  13169. border-radius: 0;
  13170. background: var(--btn-grey-hover);
  13171. height: 14px;
  13172. padding: 2px 8px;
  13173. display: flex;
  13174. top: 10px;
  13175. right: 10px;
  13176. }
  13177. .container__56e52 [class^=jumpButton] .text__6b9e7,
  13178. .channel_d48f2d [class^=jumpButton] .text__6b9e7 {
  13179. line-height: 14px;
  13180. font-size: 11px;
  13181. }
  13182. .container__56e52 [class^=jumpButton]:hover,
  13183. .channel_d48f2d [class^=jumpButton]:hover {
  13184. background: var(--background-accent-hover);
  13185. }
  13186.  
  13187. .noiseCancellationPopout__06ec4 {
  13188. padding: 16px;
  13189. border-radius: 0;
  13190. box-shadow: 3px 3px 5px -3px #000;
  13191. background: var(--contextmenu-gradient);
  13192. }
  13193.  
  13194. .messageGroupWrapper_f8c6e9 {
  13195. background: var(--modal-popout-message);
  13196. border-radius: 0;
  13197. border: none;
  13198. margin: 0 0 4px;
  13199. }
  13200.  
  13201. .jumpButton__0329d {
  13202. margin: 0;
  13203. border-radius: 0;
  13204. background: var(--btn-grey-hover);
  13205. }
  13206.  
  13207. .jumpButton__0329d:hover {
  13208. background: var(--background-accent-hover);
  13209. }
  13210.  
  13211. .messageGroupWrapper_f8c6e9:has(.jumpButton__0329d:hover) {
  13212. background: var(--background-accent);
  13213. }
  13214.  
  13215. .body__13cde {
  13216. margin-top: 10px;
  13217. font-size: 14px;
  13218. line-height: 18px;
  13219. font-weight: 400;
  13220. color: var(--text-muted);
  13221. }
  13222.  
  13223. .footer_a3029c {
  13224. background: none;
  13225. }
  13226.  
  13227. .root__46d4f {
  13228. border-radius: 0;
  13229. padding: 32px;
  13230. background: var(--modal-background);
  13231. box-shadow: var(--modal-shadow);
  13232. }
  13233. .root__46d4f::before {
  13234. content: "";
  13235. display: block;
  13236. height: 1px;
  13237. width: 100%;
  13238. background: linear-gradient(to right, hsl(calc(var(--accent-hue) - 13), calc(var(--saturation-factor, 1) * 100%), 50%) 0%, hsl(calc(var(--accent-hue) + 20), calc(var(--saturation-factor, 1) * 100%), 60%) 100%);
  13239. position: absolute;
  13240. z-index: 102;
  13241. top: 0;
  13242. }
  13243. .root__46d4f [data-text-variant="text-lg/semibold"] {
  13244. font-size: 22px;
  13245. font-weight: 700;
  13246. line-height: 24px;
  13247. margin-bottom: 10px;
  13248. }
  13249. .root__46d4f [data-text-variant="text-md/normal"] {
  13250. font-size: 14px;
  13251. line-height: 18px;
  13252. margin-bottom: 32px;
  13253. }
  13254. .root__46d4f .colorable_c84c4c.green__7e4a1 {
  13255. background: var(--button-positive-background);
  13256. }
  13257. .root__46d4f .colorable_c84c4c.green__7e4a1:hover {
  13258. background: var(--button-positive-background-hover);
  13259. }
  13260.  
  13261. .container__0810b {
  13262. width: 290px;
  13263. border-radius: 0;
  13264. box-shadow: 3px 3px 5px -3px #000;
  13265. background: var(--contextmenu-gradient);
  13266. }
  13267.  
  13268. .graphContainer_ee4dc1 {
  13269. margin-bottom: 10px;
  13270. }
  13271.  
  13272. .container_d6dad3 {
  13273. border-radius: 0;
  13274. background: var(--contextmenu-background);
  13275. }
  13276. #app-mount .container_d6dad3 {
  13277. box-shadow: 0 0 12px #000000;
  13278. }
  13279. .container_d6dad3 .focused_f9cf2c {
  13280. background: var(--contextmenu-background);
  13281. }
  13282. .container_d6dad3 .queryContainer_c359fe {
  13283. border: none;
  13284. }
  13285. .container_d6dad3 .datePicker__94673 .datePickerHint__7cc9b {
  13286. border-top: none;
  13287. }
  13288. .container_d6dad3 .datePicker__94673 .hint__460f1 {
  13289. color: var(--contextmenu-text);
  13290. font-size: 14px;
  13291. }
  13292. .container_d6dad3 .datePicker__94673 .hintValue_c2ce1f {
  13293. background: var(--background-accent-hover);
  13294. font-weight: 400;
  13295. }
  13296. .container_d6dad3 .datePicker__94673 .hintValue_c2ce1f:hover {
  13297. background: var(--background-accent-hover);
  13298. }
  13299. #app-mount .container_d6dad3 .react-datepicker,
  13300. #app-mount .container_d6dad3 .react-datepicker__header {
  13301. background: none;
  13302. }
  13303. #app-mount .container_d6dad3 .react-datepicker__day {
  13304. border-radius: 0;
  13305. border: none;
  13306. }
  13307. #app-mount .container_d6dad3 .react-datepicker__day--outside-month,
  13308. #app-mount .container_d6dad3 .react-datepicker__day--disabled {
  13309. background: rgba(0, 0, 0, 0.2);
  13310. color: var(--text-muted);
  13311. }
  13312. #app-mount .container_d6dad3 .react-datepicker__navigation {
  13313. height: 34px;
  13314. width: 34px;
  13315. transition-property: background, box-shadow, color;
  13316. transition-duration: 0.2s;
  13317. transition-timing-function: ease-out;
  13318. border: none;
  13319. }
  13320. #app-mount .container_d6dad3 .react-datepicker__navigation:hover {
  13321. background-color: var(--background-accent-hover);
  13322. }
  13323. .container_d6dad3 .react-datepicker__month {
  13324. border-radius: 3px;
  13325. background-color: rgba(0, 0, 0, 0.2);
  13326. border: 1px solid #000;
  13327. box-shadow: 1px 1px 0 0 var(--store-search-border);
  13328. }
  13329.  
  13330. .resultsGroup_ea9b64 .header_b24bd1 {
  13331. font-weight: 700;
  13332. letter-spacing: 0.5px;
  13333. }
  13334.  
  13335. .option_b5597b {
  13336. font-size: 16px;
  13337. margin: 0 1px;
  13338. border-radius: 0;
  13339. box-sizing: content-box;
  13340. --search-popout-option-fade: linear-gradient(90deg, transparent, var(--contextmenu-background) 80%);
  13341. --search-popout-option-fade-hover: linear-gradient(90deg, transparent, var(--contextmenu-text) 50%);
  13342. }
  13343. .option_b5597b:hover, .option_b5597b[aria-selected=true] {
  13344. background: var(--contextmenu-text);
  13345. --text-muted: var(--contextmenu-text-hover);
  13346. --interactive-normal: var(--contextmenu-text-hover);
  13347. --interactive-hover: var(--contextmenu-text-hover);
  13348. --interactive-active: var(--contextmenu-text-hover);
  13349. --search-popout-option-user-nickname: var(--contextmenu-text-hover);
  13350. --search-popout-option-user-username: var(--contextmenu-text-hover);
  13351. --search-popout-option-filter-text: var(--contextmenu-text-hover);
  13352. --search-popout-option-non-text-color: var(--contextmenu-text-hover);
  13353. --search-popout-option-filter-color: var(--contextmenu-text-hover);
  13354. --search-popout-option-answer-color: var(--contextmenu-text-hover);
  13355. }
  13356. .option_b5597b:hover .filter_bd5fe7, .option_b5597b[aria-selected=true] .filter_bd5fe7 {
  13357. color: var(--contextmenu-text-hover);
  13358. }
  13359. .option_b5597b:hover .answer__9ff92, .option_b5597b[aria-selected=true] .answer__9ff92 {
  13360. color: var(--contextmenu-text-hover);
  13361. }
  13362. .option_b5597b:hover .nonText_cbb69b, .option_b5597b[aria-selected=true] .nonText_cbb69b {
  13363. color: var(--contextmenu-text-hover);
  13364. }
  13365. .option_b5597b:hover span, .option_b5597b[aria-selected=true] span {
  13366. text-shadow: unset;
  13367. }
  13368. .option_b5597b:hover strong, .option_b5597b[aria-selected=true] strong {
  13369. text-shadow: unset;
  13370. color: var(--contextmenu-text-hover);
  13371. }
  13372. .option_b5597b .filter_bd5fe7 {
  13373. color: var(--contextmenu-text);
  13374. font-weight: 500;
  13375. }
  13376. .option_b5597b .answer__9ff92 {
  13377. color: var(--text-muted);
  13378. font-size: 14px;
  13379. font-weight: 400;
  13380. }
  13381. .option_b5597b .nonText_cbb69b {
  13382. color: var(--contextmenu-text);
  13383. }
  13384. .option_b5597b span {
  13385. text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  13386. }
  13387. .option_b5597b strong {
  13388. color: var(--contextmenu-text);
  13389. text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  13390. }
  13391. .option_b5597b.user__97b4c .displayAvatar__98be9 {
  13392. border-radius: 2px;
  13393. }
  13394.  
  13395. #app-mount .searchAnswer_b452e7,
  13396. #app-mount .searchFilter__118cb {
  13397. background: var(--background-accent);
  13398. font-weight: 400;
  13399. text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  13400. }
  13401.  
  13402. .picker__6dca7 {
  13403. background: var(--modal-background);
  13404. border-radius: 0;
  13405. box-shadow: var(--modal-shadow);
  13406. }
  13407. .picker__6dca7 [class*=header-] {
  13408. box-shadow: none;
  13409. border-radius: 0;
  13410. }
  13411. .picker__6dca7 [class*=header-] [class*=container-]:has(input) {
  13412. border-radius: 2px;
  13413. background: var(--btn-grey);
  13414. }
  13415. .picker__6dca7 [class*=header-] [class*=container-]:has(input) input::-moz-placeholder {
  13416. font-style: italic;
  13417. }
  13418. .picker__6dca7 [class*=header-] [class*=container-]:has(input) input::placeholder {
  13419. font-style: italic;
  13420. }
  13421. .picker__6dca7 [class*=header-] [class*=container-]:has(input):hover {
  13422. background: var(--btn-grey-hover-light);
  13423. }
  13424. .picker__6dca7 [class*=header-] [class*=container-]:has(input):focus, .picker__6dca7 [class*=header-] [class*=container-]:has(input):focus-within {
  13425. background: var(--background-modifier-accent-dark);
  13426. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  13427. }
  13428. .picker__6dca7 [class*=header-] [class*=container-]:has(input) .iconContainer__8fa9c {
  13429. height: 18px;
  13430. width: 18px;
  13431. }
  13432. .picker__6dca7 [class*=header-] [class*=container-]:has(input) svg {
  13433. color: var(--brand-experiment);
  13434. }
  13435. .picker__6dca7 .category_f1b389 {
  13436. border-radius: 3px;
  13437. transition: none;
  13438. }
  13439. .picker__6dca7 .category_f1b389:hover {
  13440. box-shadow: 0 0 0 1px var(--header-primary);
  13441. }
  13442. .picker__6dca7 .category_f1b389:hover svg {
  13443. -webkit-clip-path: inset(1px round 3px);
  13444. clip-path: inset(1px round 3px);
  13445. }
  13446. .picker__6dca7 .category_f1b389.categoryItemDefaultCategorySelected__8245a {
  13447. background: none;
  13448. }
  13449. .picker__6dca7 .category_f1b389 svg {
  13450. border-radius: 3px;
  13451. }
  13452. .picker__6dca7 .category_f1b389 foreignObject {
  13453. -webkit-mask: none;
  13454. mask: none;
  13455. }
  13456. .picker__6dca7 .sectionHeader_c664ae {
  13457. width: 100%;
  13458. display: flex;
  13459. align-items: center;
  13460. }
  13461. .picker__6dca7 .sectionHeader_c664ae .sectionTitle__8df35 {
  13462. margin-left: 4px;
  13463. margin-right: 0;
  13464. text-transform: capitalize;
  13465. }
  13466. .picker__6dca7 .sectionHeader_c664ae::after {
  13467. content: "";
  13468. height: 2px;
  13469. margin: 0 10px 0 10px;
  13470. background: var(--background-modifier-accent-compat);
  13471. display: flex;
  13472. flex-grow: 1;
  13473. width: 20px;
  13474. }
  13475. .picker__6dca7 .sectionHeader_c664ae > svg:last-of-type {
  13476. order: 1;
  13477. color: var(--brand-experiment);
  13478. }
  13479. .picker__6dca7 .soundButton__5ad7b {
  13480. border-radius: 2px;
  13481. background: var(--btn-grey);
  13482. transition-property: background, box-shadow;
  13483. transition-duration: 0.2s;
  13484. transition-timing-function: ease-out;
  13485. }
  13486. .picker__6dca7 .soundButton__5ad7b [data-text-variant="text-xs/medium"] {
  13487. font-weight: 400;
  13488. --header-primary: var(--text-lighter);
  13489. }
  13490. .picker__6dca7 .soundButton__5ad7b:hover {
  13491. background: var(--btn-grey-hover);
  13492. box-shadow: var(--btn-grey-boxshadow);
  13493. }
  13494. .picker__6dca7 .soundButton__5ad7b:hover [data-text-variant="text-xs/medium"] {
  13495. --header-primary: #fff;
  13496. }
  13497. .picker__6dca7 .soundButton__5ad7b .buttonOverlay__76d7d {
  13498. transition: opacity 0.2s ease-in-out;
  13499. }
  13500. .picker__6dca7 .soundButton__5ad7b .buttonOverlayBackground_ec646a {
  13501. display: none;
  13502. }
  13503. .picker__6dca7 .soundButton__5ad7b .playIcon__68d2d {
  13504. display: none;
  13505. }
  13506.  
  13507. .accountProfilePopoutWrapper_af829a .overlayBackground__86b78 .divider__06972 {
  13508. display: none;
  13509. }
  13510. .accountProfilePopoutWrapper_af829a .overlayBackground__86b78 .scroller__83262 {
  13511. max-height: 200px;
  13512. padding-bottom: 16px;
  13513. }
  13514. .accountProfilePopoutWrapper_af829a .overlayBackground__86b78 > .menu_dc52c6 {
  13515. box-shadow: none;
  13516. background: rgba(0, 0, 0, 0.3);
  13517. padding: 8px;
  13518. border-radius: 5px;
  13519. width: calc(100% - 24px - 16px);
  13520. max-width: unset;
  13521. min-width: unset;
  13522. margin-left: 12px;
  13523. margin-bottom: 12px;
  13524. box-sizing: content-box;
  13525. }
  13526. .accountProfilePopoutWrapper_af829a .overlayBackground__86b78 .section__6f61e:has(.memberSinceContainer__0a28b) {
  13527. padding-bottom: 12px;
  13528. }
  13529. .accountProfilePopoutWrapper_af829a [aria-activedescendant*=account-status-picker] {
  13530. max-width: 200px;
  13531. }
  13532. .accountProfilePopoutWrapper_af829a .statusItem__72404 {
  13533. padding: 0;
  13534. min-height: unset;
  13535. }
  13536. .accountProfilePopoutWrapper_af829a .statusItem__72404 .description_ea6680 {
  13537. margin-bottom: 0;
  13538. color: var(--text-muted);
  13539. }
  13540.  
  13541. .themeEditor__6df21 {
  13542. background: var(--background-tertiary);
  13543. border-left: 0.5px solid black;
  13544. }
  13545.  
  13546. .browser_fece63 .title__47111 {
  13547. margin-right: 8px;
  13548. }
  13549. .browser_fece63 .divider_dec9ac {
  13550. display: none;
  13551. }
  13552. .browser_fece63 .sectionHeader_a94dc1 {
  13553. color: var(--text-muted) !important;
  13554. letter-spacing: 0.5px;
  13555. line-height: 36px;
  13556. margin-bottom: 0;
  13557. }
  13558. .browser_fece63 .searchBox_ff53b2 {
  13559. padding: 4px 8px;
  13560. margin-right: 8px;
  13561. border-radius: 2px;
  13562. background: none;
  13563. transition-property: background, box-shadow;
  13564. transition-duration: 0.2s;
  13565. transition-timing-function: ease-out;
  13566. }
  13567. .browser_fece63 .searchBox_ff53b2:hover {
  13568. background: var(--btn-grey-hover);
  13569. box-shadow: var(--btn-grey-boxshadow);
  13570. }
  13571. .browser_fece63 .searchBox_ff53b2 svg {
  13572. color: var(--brand-experiment);
  13573. }
  13574. .browser_fece63 .createButton_c8864c {
  13575. margin-right: 0;
  13576. height: 30px;
  13577. }
  13578. .browser_fece63 .closeIcon__15ae7 {
  13579. display: none;
  13580. }
  13581.  
  13582. .container__6604b {
  13583. background: var(--modal-popout-message);
  13584. border-radius: 0;
  13585. border: none;
  13586. margin: 0 0 4px;
  13587. padding: 10px;
  13588. height: unset;
  13589. }
  13590. .container__6604b:hover {
  13591. background: var(--background-accent);
  13592. }
  13593. .container__6604b .avatar_eb9431,
  13594. .container__6604b .noAvatarIcon__92d39 {
  13595. margin-right: 4px;
  13596. }
  13597. .container__6604b .threadNameLine__5046f {
  13598. font-size: 12px;
  13599. font-weight: 600;
  13600. }
  13601. .container__6604b .subtext_f83288 {
  13602. font-size: 11px;
  13603. font-weight: 500;
  13604. }
  13605. .container__6604b .messageContentIcon__09152 {
  13606. height: 18px;
  13607. width: 18px;
  13608. }
  13609.  
  13610. /*
  13611. userProfileOuter__46bb7: popout, modal
  13612. userPopoutOuter_d739b2: popout
  13613. userProfileModalOuter__3fe6b: modal
  13614. */
  13615. .userProfileOuter__46bb7 {
  13616. border-radius: 0;
  13617. }
  13618. .userProfileOuter__46bb7.userProfileOuterThemed__6eb84 {
  13619. padding: 2px;
  13620. }
  13621. .userProfileOuter__46bb7 .userProfileInnerThemedWithBanner_d5f991 .wrapper_edb6e0 {
  13622. -webkit-backdrop-filter: blur(8px);
  13623. backdrop-filter: blur(8px);
  13624. }
  13625.  
  13626. .userPopoutOuter_d739b2 {
  13627. box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.6705882353);
  13628. }
  13629.  
  13630. .userProfileInner__8065b {
  13631. border-radius: 0;
  13632. }
  13633. .userProfileInner__8065b:before {
  13634. border-radius: 0;
  13635. height: calc(100% - 4px);
  13636. width: calc(100% - 4px);
  13637. }
  13638.  
  13639. .avatarWrapper_f77579 {
  13640. border-radius: 0;
  13641. left: 16px;
  13642. box-shadow: 1px 3px 14px rgba(0, 0, 0, 0.65);
  13643. z-index: 2;
  13644. }
  13645.  
  13646. .avatarPositionPremiumBanner__1e83d,
  13647. .avatarPositionPremiumNoBanner__8bf3b {
  13648. top: 16px;
  13649. }
  13650.  
  13651. #app-mount .avatarHoverTarget__3a360,
  13652. #app-mount .avatarHint__8e5b9,
  13653. #app-mount .avatar__445f3 {
  13654. padding: 0;
  13655. }
  13656.  
  13657. .avatarHoverTarget__3a360 {
  13658. border-radius: 0;
  13659. }
  13660.  
  13661. .avatarHint__8e5b9 foreignObject {
  13662. -webkit-mask: none;
  13663. mask: none;
  13664. }
  13665.  
  13666. .bannerSVGWrapper__3e7b0 foreignObject {
  13667. -webkit-mask: none;
  13668. mask: none;
  13669. }
  13670.  
  13671. .roundedBanner__9fa0a {
  13672. border-radius: 0;
  13673. }
  13674.  
  13675. .pencilContainer_d4ce8d {
  13676. border-radius: 2px;
  13677. transition: none;
  13678. }
  13679. .pencilContainer_d4ce8d:hover {
  13680. background: rgba(0, 0, 0, 0.6);
  13681. }
  13682. .pencilContainer_d4ce8d svg {
  13683. height: 18px;
  13684. width: 18px;
  13685. }
  13686.  
  13687. .overlayBackground__86b78:has(.userText__3e8b7) {
  13688. overflow: visible;
  13689. }
  13690.  
  13691. .section__6f61e:has(.userText__3e8b7) {
  13692. position: absolute;
  13693. top: calc(var(--header-height) * -1 + 16px);
  13694. left: 0;
  13695. padding: 0 0 0 114px;
  13696. height: 82px;
  13697. display: flex;
  13698. align-items: center;
  13699. text-shadow: 1px 1px 4px #000;
  13700. width: 100%;
  13701. box-sizing: border-box;
  13702. --header-primary: #fff;
  13703. --text-normal: #bbb;
  13704. pointer-events: none;
  13705. }
  13706. .section__6f61e:has(.userText__3e8b7) [data-text-variant="heading-lg/semibold"] {
  13707. font-weight: 300;
  13708. letter-spacing: 1px;
  13709. pointer-events: auto;
  13710. width: -moz-fit-content;
  13711. width: fit-content;
  13712. }
  13713. .section__6f61e:has(.userText__3e8b7) .userTagUsernameBase__75fb1 {
  13714. pointer-events: auto;
  13715. }
  13716. .section__6f61e:has(.userText__3e8b7) .userTag_cf17d3 {
  13717. font-weight: 300;
  13718. width: 100%;
  13719. }
  13720. .section__6f61e:has(.userText__3e8b7) .nameTag__693ff {
  13721. overflow: unset;
  13722. pointer-events: auto;
  13723. }
  13724. .section__6f61e:has(.userText__3e8b7) .info__40462 {
  13725. overflow: unset;
  13726. }
  13727. .section__6f61e:has(.userText__3e8b7) .pronouns__8bcdb {
  13728. font-size: 12px;
  13729. pointer-events: auto;
  13730. }
  13731. .section__6f61e:has(.userText__3e8b7) + .divider_ed0c1d {
  13732. display: none;
  13733. }
  13734.  
  13735. .profileBadges__7a7cb {
  13736. position: absolute;
  13737. top: calc(var(--header-height) + 16px);
  13738. width: calc(100% - 32px);
  13739. max-width: calc(100% - 32px);
  13740. padding: 0;
  13741. gap: 4px;
  13742. z-index: 2;
  13743. background: none;
  13744. box-shadow: none;
  13745. justify-content: center;
  13746. }
  13747.  
  13748. .profileBadge22__3c451 {
  13749. filter: drop-shadow(1px 1px 2px #000);
  13750. }
  13751.  
  13752. .profileColors__2e2f0 {
  13753. --header-height: 112px;
  13754. }
  13755. .profileColors__2e2f0:has(svg[viewBox$="60"]) {
  13756. --banner-height: 60px;
  13757. }
  13758. .profileColors__2e2f0:has(svg[viewBox$="90"]) {
  13759. --banner-height: 90px;
  13760. }
  13761. .profileColors__2e2f0:has(svg[viewBox$="120"]) {
  13762. --banner-height: 120px;
  13763. --header-height: 120px;
  13764. }
  13765.  
  13766. .overlayBackground__86b78 {
  13767. margin-top: calc(var(--banner-height) * -1 + var(--header-height));
  13768. margin-left: 0;
  13769. margin-right: 0;
  13770. margin-bottom: 0;
  13771. }
  13772.  
  13773. .userPopoutOuter_d739b2:has(.containerWithContent__7e98f) .overlayBackground__86b78 {
  13774. padding-top: 38px;
  13775. }
  13776. .userPopoutOuter_d739b2:has(.containerWithContent__7e98f) .overlayBackground__86b78:not(:has(.customStatusSection_ce6c27)) {
  13777. padding-top: 54px;
  13778. }
  13779.  
  13780. .theme-light .overlayBackground__86b78 {
  13781. background: linear-gradient(to bottom, hsl(calc(var(--accent-hue) + 15), calc(var(--saturation-factor, 1) * 11.1%), 39%, 0.7) 5%, hsl(calc(var(--accent-hue) + 15), calc(var(--saturation-factor, 1) * 11.1%), 89%, 0.4) 95%);
  13782. }
  13783.  
  13784. .profileColors__2e2f0 .overlayBackground__86b78 {
  13785. box-shadow: none;
  13786. }
  13787.  
  13788. .customStatus__3aa7f {
  13789. display: flex;
  13790. justify-content: center;
  13791. }
  13792.  
  13793. .overlayBackground__86b78 {
  13794. border-radius: 0;
  13795. background: linear-gradient(to bottom, hsl(calc(var(--accent-hue) + 15), calc(var(--saturation-factor, 1) * 11.1%), 10.6%, 0.7) 5%, hsl(calc(var(--accent-hue) + 15), calc(var(--saturation-factor, 1) * 11.1%), 10.6%, 0.4) 95%);
  13796. }
  13797. .overlayBackground__86b78 .customStatusSection_ce6c27 {
  13798. padding-top: 16px;
  13799. padding-right: 16px;
  13800. padding-left: 16px;
  13801. }
  13802. .overlayBackground__86b78 .scroller__83262 {
  13803. padding: 0 16px !important;
  13804. overflow: hidden overlay !important;
  13805. display: flex;
  13806. flex-direction: column;
  13807. max-height: calc(100vh - 200px);
  13808. }
  13809. .overlayBackground__86b78 .title_ef4a6d {
  13810. letter-spacing: 0.5px;
  13811. }
  13812. .overlayBackground__86b78 .text-sm-medium_bc6ffc,
  13813. .overlayBackground__86b78 .text-sm-normal_e612c7,
  13814. .overlayBackground__86b78 .text-sm-bold_ad6d44,
  13815. .overlayBackground__86b78 .text-sm-semibold_a5824d,
  13816. .overlayBackground__86b78 .textRow__4750e {
  13817. font-size: 13px;
  13818. line-height: 17px;
  13819. }
  13820. .overlayBackground__86b78 .note_ba0c31 textarea {
  13821. height: -moz-fit-content !important;
  13822. height: fit-content !important;
  13823. max-height: -moz-fit-content;
  13824. max-height: fit-content;
  13825. background: none;
  13826. }
  13827. .overlayBackground__86b78 .note_ba0c31 textarea:focus, .overlayBackground__86b78 .note_ba0c31 textarea:focus-within {
  13828. background: var(--background-modifier-accent-dark);
  13829. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.67);
  13830. }
  13831. .overlayBackground__86b78 .lastSection__37b97 {
  13832. padding-bottom: 16px;
  13833. }
  13834. .overlayBackground__86b78:has(.activity__20c1e) .divider_ed0c1d {
  13835. opacity: 0;
  13836. }
  13837.  
  13838. .section__6f61e:has(.activity__20c1e) {
  13839. background: rgba(0, 0, 0, 0.2);
  13840. margin: 0 -16px;
  13841. padding: 16px;
  13842. order: -1;
  13843. }
  13844.  
  13845. .role__631a3 {
  13846. background: rgba(0, 0, 0, 0.3);
  13847. border-radius: 3px;
  13848. }
  13849.  
  13850. .container__56cd1 {
  13851. border-radius: 0;
  13852. box-shadow: 3px 3px 5px -3px #000;
  13853. background: var(--contextmenu-gradient);
  13854. }
  13855. .container__56cd1 .channelName__41380 {
  13856. --interactive-normal: var(--header-primary);
  13857. }
  13858. .container__56cd1 .avatar_b95265 {
  13859. border-radius: 3px;
  13860. }
  13861.  
  13862. .container__60a4a {
  13863. border-radius: 0;
  13864. background: none;
  13865. }
  13866.  
  13867. .streamPreview__1846c {
  13868. border-radius: 0;
  13869. box-shadow: 3px 3px 5px -3px #000;
  13870. }
  13871. #app-mount .streamPreview__1846c {
  13872. background: var(--contextmenu-gradient);
  13873. }
  13874. #app-mount .streamPreview__1846c .previewContainer_bb1924 {
  13875. background: none;
  13876. }
  13877.  
  13878. .button_afdfd9 {
  13879. border-radius: 2px;
  13880. font-size: 14px;
  13881. font-weight: 400;
  13882. }
  13883.  
  13884. .sizeSmall__71a98 {
  13885. height: 34px;
  13886. min-height: 34px;
  13887. padding: 8px 14px;
  13888. }
  13889.  
  13890. .button__66e8c.buttonColor_a6eb73,
  13891. .button__66e8c .buttonColor_a6eb73,
  13892. .button_afdfd9.lookOutlined__46d54,
  13893. .button_afdfd9.lookLink__93965.lowSaturationUnderline-Z6CW6z.colorPrimary__6ed40:not(.fieldButton_a93f59) {
  13894. color: var(--text-lighter);
  13895. background: var(--btn-grey);
  13896. transition-property: background, box-shadow, color;
  13897. transition-duration: 0.2s;
  13898. transition-timing-function: ease-out;
  13899. }
  13900. .root_a28985 .button__66e8c.buttonColor_a6eb73:not(:hover), .prompt__671aa .button__66e8c.buttonColor_a6eb73:not(:hover),
  13901. .root_a28985 .button__66e8c .buttonColor_a6eb73:not(:hover),
  13902. .prompt__671aa .button__66e8c .buttonColor_a6eb73:not(:hover),
  13903. .root_a28985 .button_afdfd9.lookOutlined__46d54:not(:hover),
  13904. .prompt__671aa .button_afdfd9.lookOutlined__46d54:not(:hover),
  13905. .root_a28985 .button_afdfd9.lookLink__93965.lowSaturationUnderline-Z6CW6z.colorPrimary__6ed40:not(.fieldButton_a93f59):not(:hover),
  13906. .prompt__671aa .button_afdfd9.lookLink__93965.lowSaturationUnderline-Z6CW6z.colorPrimary__6ed40:not(.fieldButton_a93f59):not(:hover) {
  13907. box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  13908. }
  13909. .button__66e8c.buttonColor_a6eb73:hover,
  13910. .button__66e8c .buttonColor_a6eb73:hover,
  13911. .button_afdfd9.lookOutlined__46d54:hover,
  13912. .button_afdfd9.lookLink__93965.lowSaturationUnderline-Z6CW6z.colorPrimary__6ed40:not(.fieldButton_a93f59):hover {
  13913. background: var(--btn-grey-hover);
  13914. color: #fff;
  13915. box-shadow: var(--btn-grey-boxshadow);
  13916. }
  13917.  
  13918. .lookOutlined__46d54 {
  13919. border: none;
  13920. }
  13921.  
  13922. .lookFilled__19298 {
  13923. --button-danger-background: linear-gradient(to right, #ff4747 0%, #c21a1a 60%);
  13924. --button-danger-background-hover: var(--button-danger-background);
  13925. color: var(--text-lighter);
  13926. transition-property: background, box-shadow, color;
  13927. transition-duration: 0.2s;
  13928. transition-timing-function: ease-out;
  13929. background-position: 25%;
  13930. background-size: 330% 100%;
  13931. }
  13932. .lookFilled__19298.colorBrand_b2253e {
  13933. background-image: linear-gradient(to right, hsl(calc(var(--accent-hue) - 4), calc(var(--saturation-factor, 1) * 100%), 63.9%) 0%, hsl(calc(var(--accent-hue) + 20), calc(var(--saturation-factor, 1) * 76.4%), 43.1%) 60%);
  13934. }
  13935. .lookFilled__19298.colorBrand_b2253e:hover {
  13936. background-image: linear-gradient(to right, hsl(calc(var(--accent-hue) - 4), calc(var(--saturation-factor, 1) * 100%), 63.9%) 0%, hsl(calc(var(--accent-hue) + 20), calc(var(--saturation-factor, 1) * 76.4%), 43.1%) 60%);
  13937. }
  13938. .lookFilled__19298.colorRed_d6b062 {
  13939. background-image: var(--button-danger-background);
  13940. }
  13941. .lookFilled__19298.colorRed_d6b062:hover {
  13942. background-image: var(--button-danger-background);
  13943. }
  13944. .lookFilled__19298:hover {
  13945. background-position: 0%;
  13946. background-size: 330% 100%;
  13947. color: #fff;
  13948. box-shadow: var(--btn-grey-boxshadow);
  13949. }
  13950. .root_a28985 .lookFilled__19298:not(:hover), .prompt__671aa .lookFilled__19298:not(:hover) {
  13951. box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  13952. }
  13953.  
  13954. #app-mount .lookLink__93965.colorTransparent__4c280:hover .contents_fb6220 {
  13955. --button--underline-color: none;
  13956. }
  13957. #app-mount .lookLink__93965.colorPrimary__6ed40:hover .contents_fb6220 {
  13958. --button--underline-color: none;
  13959. }
  13960.  
  13961. .lookFilled__19298.colorPrimary__6ed40 {
  13962. background: var(--btn-brand);
  13963. color: var(--btn-brand-text);
  13964. transition: none;
  13965. }
  13966. .lookFilled__19298.colorPrimary__6ed40:hover {
  13967. background: var(--btn-brand-hover);
  13968. color: #fff;
  13969. }
  13970. .lookFilled__19298.colorPrimary__6ed40.sizeLarge__9049d {
  13971. height: 32px;
  13972. min-height: 32px;
  13973. padding: 0 15px;
  13974. font-size: 15px;
  13975. line-height: 30px;
  13976. min-width: unset;
  13977. }
  13978.  
  13979. .sizeLarge__9049d {
  13980. height: 32px;
  13981. min-height: 32px;
  13982. padding: 0 15px;
  13983. font-size: 15px;
  13984. line-height: 30px;
  13985. min-width: unset;
  13986. }
  13987.  
  13988. .copyButton__25267 {
  13989. margin-right: 2px;
  13990. }
  13991.  
  13992. .submitButton__1ba94 {
  13993. margin-left: 2px;
  13994. }
  13995.  
  13996. .container__871ba {
  13997. width: 38px;
  13998. height: 22px;
  13999. background-color: var(--background-accent) !important;
  14000. margin-right: 4px;
  14001. }
  14002. .container__871ba.checked__6bdb0 {
  14003. background: var(--brand-experiment) !important;
  14004. }
  14005. .container__871ba .slider__41d94 {
  14006. transform: scale(1.2) translateY(-1px);
  14007. filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
  14008. }
  14009. .container__871ba .slider__41d94 svg {
  14010. display: none;
  14011. }
  14012. .container__871ba:not(.checked__6bdb0) svg {
  14013. left: -4px !important;
  14014. }
  14015. .container__871ba.disabled_eac369 {
  14016. opacity: 1 !important;
  14017. background: var(--background-accent-hover) !important;
  14018. cursor: default;
  14019. }
  14020. .container__871ba.disabled_eac369 rect {
  14021. fill: var(--text-muted);
  14022. }
  14023.  
  14024. .checkboxWrapper__02583 input[type=checkbox] {
  14025. height: 22px !important;
  14026. width: 22px !important;
  14027. }
  14028. .checkboxWrapper__02583 input[type=checkbox]:hover + .checkbox_c7f690 {
  14029. background: var(--background-accent-hover);
  14030. }
  14031.  
  14032. .checkbox_c7f690 {
  14033. border-radius: 2px;
  14034. border: none;
  14035. background: var(--background-accent);
  14036. height: 22px !important;
  14037. width: 22px !important;
  14038. }
  14039.  
  14040. .lookFilled__3dba3.select__0eb48 {
  14041. background: var(--btn-grey);
  14042. border: none;
  14043. font-size: 14px;
  14044. line-height: 18px;
  14045. font-weight: 400;
  14046. transition-property: background, box-shadow, color;
  14047. transition-duration: 0.2s;
  14048. transition-timing-function: ease-out;
  14049. }
  14050. .lookFilled__3dba3.select__0eb48:hover {
  14051. background: var(--btn-grey-hover);
  14052. color: #fff;
  14053. box-shadow: var(--btn-grey-boxshadow);
  14054. }
  14055. .lookFilled__3dba3.select__0eb48.open_cd27aa {
  14056. background: var(--btn-grey);
  14057. color: var(--text-normal);
  14058. box-shadow: none;
  14059. cursor: default;
  14060. }
  14061.  
  14062. .select__0eb48 {
  14063. padding: 8px 14px;
  14064. border-radius: 2px;
  14065. }
  14066. .select__0eb48 svg:has([d="M5.3 9.3a1 1 0 0 1 1.4 0l5.3 5.29 5.3-5.3a1 1 0 1 1 1.4 1.42l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.42Z"],
  14067. [d="M5.3 14.7a1 1 0 0 0 1.4 0L12 9.42l5.3 5.3a1 1 0 0 0 1.4-1.42l-6-6a1 1 0 0 0-1.4 0l-6 6a1 1 0 0 0 0 1.42Z"]) {
  14068. color: var(--brand-experiment);
  14069. }
  14070. .select__0eb48 + .icons__374b3 .dropdownIcon_d3bbbc {
  14071. color: var(--brand-experiment);
  14072. }
  14073. .select__0eb48.searchable__01c88 .searchInput_e1c8d3 {
  14074. font-size: 14px;
  14075. }
  14076. .select__0eb48.searchable__01c88 input {
  14077. cursor: text;
  14078. }
  14079.  
  14080. .popout_a6e77f {
  14081. border: none;
  14082. background: var(--dropdown-popout-background);
  14083. border-radius: 3px;
  14084. margin-top: 2px;
  14085. margin-bottom: 2px;
  14086. box-shadow: var(--dropdown-popout-shadow);
  14087. padding: 12px !important;
  14088. max-height: 200px !important;
  14089. overflow: overlay !important;
  14090. }
  14091. .popout_a6e77f.searchableSelect__52dee::-webkit-scrollbar {
  14092. width: 12px;
  14093. }
  14094.  
  14095. .option_be8b2e {
  14096. padding: 10px 15px;
  14097. font-weight: 400;
  14098. font-size: 14px;
  14099. line-height: 18px;
  14100. }
  14101. .option_be8b2e:hover {
  14102. background: var(--dropdown-popout-hover);
  14103. }
  14104.  
  14105. .quickSelect_d5838c {
  14106. gap: 10px;
  14107. }
  14108.  
  14109. .quickSelect_ae48d2 {
  14110. font-size: 14px;
  14111. font-weight: 400;
  14112. border-radius: 2px;
  14113. padding: 4px 0;
  14114. color: var(--text-normal);
  14115. transition: padding 0.3s cubic-bezier(0.16, 0.86, 0.43, 0.99);
  14116. }
  14117. .quickSelect_ae48d2:hover {
  14118. padding-left: 8px;
  14119. padding-right: 8px;
  14120. cursor: pointer;
  14121. background: var(--btn-grey-hover);
  14122. color: #fff;
  14123. box-shadow: var(--btn-grey-boxshadow);
  14124. }
  14125. .quickSelect_ae48d2 .quickSelectValue__3d726 {
  14126. margin-left: 0;
  14127. }
  14128. .quickSelect_ae48d2 .quickSelectArrow__9853b {
  14129. background: none !important;
  14130. height: 24px;
  14131. width: 24px;
  14132. display: flex;
  14133. flex-wrap: nowrap;
  14134. margin-left: 10px;
  14135. }
  14136. .quickSelect_ae48d2 .quickSelectArrow__9853b::before {
  14137. content: "";
  14138. display: block;
  14139. width: 24px;
  14140. height: 24px;
  14141. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/discordrightarrow.svg);
  14142. mask: url(https://maendisease.github.io/Steam/illustrations/icns/discordrightarrow.svg);
  14143. background-color: var(--brand-experiment);
  14144. -webkit-mask-repeat: no-repeat;
  14145. mask-repeat: no-repeat;
  14146. -webkit-mask-position: center;
  14147. mask-position: center;
  14148. }
  14149.  
  14150. [role=radiogroup]:has(.item_b7fb7e) {
  14151. padding: 6px;
  14152. background: var(--darker-grey);
  14153. box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.6666666667);
  14154. border-radius: 2px;
  14155. gap: 6px;
  14156. display: flex;
  14157. flex-direction: column;
  14158. }
  14159. [role=radiogroup]:has(.item_b7fb7e)[aria-orientation=vertical] {
  14160. flex-direction: column;
  14161. }
  14162. [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e {
  14163. margin: 0;
  14164. background: none;
  14165. color: var(--text-lighter);
  14166. transition: background 0.18s ease-in-out;
  14167. }
  14168. [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e [data-text-variant="text-md/medium"] {
  14169. font-size: 14px;
  14170. line-height: 18px;
  14171. font-weight: 400;
  14172. }
  14173. [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e [data-text-variant="text-sm/normal"] {
  14174. font-size: 12px;
  14175. line-height: 18px;
  14176. }
  14177. [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e:hover:not([aria-checked=true]):not(.disabled_af801d) {
  14178. background: hsl(calc(var(--accent-hue) + 19), calc(var(--saturation-factor, 1) * 9.7%), 22.2%);
  14179. color: var(--text-lighter);
  14180. }
  14181. [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e[aria-checked=true] {
  14182. background: var(--topbar-item-selected);
  14183. color: #fff;
  14184. --text-normal: #fff;
  14185. --header-secondary: #fff;
  14186. }
  14187. [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e:not([aria-checked=true]) .radioBar__40e1b[style*="--radio-bar-accent-color:var(--green"] [data-text-variant="text-md/medium"] {
  14188. color: var(--status-online);
  14189. }
  14190. [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e:not([aria-checked=true]) .radioBar__40e1b[style*="--radio-bar-accent-color:var(--yellow"] [data-text-variant="text-md/medium"] {
  14191. color: var(--status-idle);
  14192. }
  14193. [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e:not([aria-checked=true]) .radioBar__40e1b[style*="--radio-bar-accent-color:var(--red"] [data-text-variant="text-md/medium"] {
  14194. color: var(--status-dnd);
  14195. }
  14196. [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e .radioBar__40e1b {
  14197. border-left: none;
  14198. border-radius: 2px;
  14199. grid-gap: 0;
  14200. padding: 6px !important;
  14201. }
  14202. [role=radiogroup]:has(.item_b7fb7e) .item_b7fb7e .radioBar__40e1b svg {
  14203. display: none;
  14204. }
  14205.  
  14206. .slider__22e99 .bar_e58961 {
  14207. height: 6px;
  14208. border-radius: 3px;
  14209. background: var(--background-modifier-accent-dark);
  14210. }
  14211. .slider__22e99 .markDash_dc3ae9 {
  14212. background: var(--background-modifier-accent-dark);
  14213. }
  14214.  
  14215. .input__848cd {
  14216. font-size: 20px;
  14217. border-radius: 2px;
  14218. background: var(--btn-grey);
  14219. }
  14220. .input__848cd:hover {
  14221. background: var(--btn-grey-hover-light);
  14222. }
  14223. .input__848cd:focus, .input__848cd:focus-within {
  14224. background: var(--background-modifier-accent-dark);
  14225. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  14226. }
  14227.  
  14228. .input_d266e7 {
  14229. font-size: 14px;
  14230. font-weight: 300;
  14231. line-height: 22px;
  14232. border-radius: 2px;
  14233. background: var(--btn-grey);
  14234. border: none;
  14235. transition: none;
  14236. }
  14237. .input_d266e7:hover {
  14238. background: var(--btn-grey-hover-light);
  14239. }
  14240. .input_d266e7:focus, .input_d266e7:focus-within {
  14241. background: var(--background-modifier-accent-dark);
  14242. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  14243. }
  14244. .input_d266e7::-moz-placeholder {
  14245. font-style: italic;
  14246. }
  14247. .input_d266e7::placeholder {
  14248. font-style: italic;
  14249. }
  14250.  
  14251. .inputDefault__80165 {
  14252. height: 42px;
  14253. }
  14254.  
  14255. #app-mount .bioTextArea_a108c9 {
  14256. background: var(--btn-grey);
  14257. border: none;
  14258. box-shadow: none;
  14259. border-radius: 2px;
  14260. }
  14261. #app-mount .bioTextArea_a108c9:focus, #app-mount .bioTextArea_a108c9:focus-within {
  14262. background: var(--background-modifier-accent-dark);
  14263. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  14264. }
  14265. #app-mount .bioTextArea_a108c9 .textArea__74543,
  14266. #app-mount .bioTextArea_a108c9 .markup_a7e664 {
  14267. font-size: 14px;
  14268. font-weight: 300;
  14269. line-height: 22px;
  14270. }
  14271.  
  14272. .cardInput-33x7OF {
  14273. border-radius: 2px;
  14274. background: var(--btn-grey);
  14275. }
  14276. .cardInput-33x7OF:hover {
  14277. background: var(--btn-grey-hover-light);
  14278. }
  14279. .cardInput-33x7OF:focus, .cardInput-33x7OF:focus-within {
  14280. background: var(--background-modifier-accent-dark);
  14281. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  14282. }
  14283.  
  14284. .phoneField__65729 {
  14285. border-radius: 2px;
  14286. padding: 2px;
  14287. position: relative;
  14288. background: var(--btn-grey);
  14289. border: none;
  14290. }
  14291. .phoneField__65729:hover {
  14292. background: var(--btn-grey-hover-light);
  14293. }
  14294. .phoneField__65729:focus, .phoneField__65729:focus-within {
  14295. background: var(--background-modifier-accent-dark);
  14296. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  14297. }
  14298. .phoneField__65729:not(:focus, :focus-within) {
  14299. box-shadow: none;
  14300. }
  14301. .phoneField__65729 .inputField__3008c {
  14302. background: none;
  14303. font-size: 14px;
  14304. font-weight: 300;
  14305. line-height: 22px;
  14306. }
  14307.  
  14308. .copyInput_c1c679 {
  14309. background: var(--btn-grey);
  14310. border: none;
  14311. border-radius: 2px;
  14312. }
  14313. .copyInput_c1c679 input {
  14314. font-size: 14px;
  14315. }
  14316. .copyInput_c1c679:hover {
  14317. background: var(--btn-grey-hover-light);
  14318. }
  14319.  
  14320. .bd-sidebar-header h2 {
  14321. color: var(--brand-experiment);
  14322. font-size: 16px;
  14323. line-height: 20px;
  14324. padding: 42px 24px 24px 24px;
  14325. }
  14326.  
  14327. .bd-changelog-button {
  14328. position: absolute;
  14329. right: 8px;
  14330. margin-top: 18px;
  14331. }
  14332.  
  14333. .bd-settings-title:not(.bd-settings-group-title) {
  14334. position: sticky;
  14335. display: flex;
  14336. align-items: center;
  14337. top: 0;
  14338. padding: 32px 24px;
  14339. margin-left: -24px;
  14340. z-index: 10;
  14341. transform: translateY(calc(var(--header-padding) * -1 + 8.5px + 18px));
  14342. background: linear-gradient(to bottom, var(--background-tertiary) calc(100% - 24px), transparent 100%);
  14343. font-size: 22px;
  14344. line-height: 24px;
  14345. font-weight: 700;
  14346. margin-bottom: 0;
  14347. }
  14348.  
  14349. .bd-button {
  14350. border-radius: 2px;
  14351. font-size: 14px;
  14352. font-weight: 400;
  14353. padding: 8px 14px;
  14354. height: 34px;
  14355. transition-property: background, box-shadow, color;
  14356. transition-duration: 0.2s;
  14357. transition-timing-function: ease-out;
  14358. }
  14359. .bd-button:hover {
  14360. box-shadow: var(--btn-grey-boxshadow);
  14361. }
  14362.  
  14363. .bd-settings-title.bd-settings-group-title {
  14364. margin-bottom: 10px;
  14365. text-transform: capitalize;
  14366. color: #fff;
  14367. font-size: 16px;
  14368. line-height: 20px;
  14369. font-weight: 600;
  14370. letter-spacing: 0;
  14371. padding-top: 8px;
  14372. padding-left: 8px;
  14373. }
  14374.  
  14375. .bd-settings-group ~ .bd-settings-group .bd-settings-title {
  14376. margin-top: 24px;
  14377. }
  14378.  
  14379. .bd-settings-group.collapsible .bd-settings-title::before {
  14380. background: var(--background-modifier-accent-compat);
  14381. height: 2px;
  14382. margin: 0 10px 0 10px;
  14383. }
  14384.  
  14385. .bd-settings-group.collapsible .bd-settings-title::after {
  14386. content: "";
  14387. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/triangledown.svg) center/contain no-repeat;
  14388. mask: url(https://maendisease.github.io/Steam/illustrations/icns/triangledown.svg) center/contain no-repeat;
  14389. background: #fff;
  14390. height: 16px;
  14391. width: 16px;
  14392. }
  14393.  
  14394. .bd-setting-item {
  14395. margin-bottom: 10px;
  14396. }
  14397.  
  14398. .bd-setting-divider {
  14399. margin-top: 10px;
  14400. border-bottom: thin solid var(--background-modifier-accent);
  14401. }
  14402.  
  14403. .bd-setting-header label {
  14404. color: var(--contextmenu-text);
  14405. font-size: 14px;
  14406. line-height: 18px;
  14407. font-weight: 400;
  14408. }
  14409.  
  14410. .bd-setting-note {
  14411. font-size: 13px;
  14412. line-height: 18px;
  14413. font-weight: 400;
  14414. color: var(--text-muted);
  14415. letter-spacing: 0;
  14416. margin-top: 8px;
  14417. }
  14418.  
  14419. .bd-switch {
  14420. margin-right: 4px;
  14421. }
  14422.  
  14423. .bd-switch-body {
  14424. --switch-color: var(--background-accent);
  14425. --symbol1path: none;
  14426. --symbol2path: none;
  14427. width: 38px;
  14428. height: 22px;
  14429. }
  14430.  
  14431. .bd-switch input:checked + .bd-switch-body {
  14432. --switch-color: var(--brand-experiment);
  14433. --symbol1path: none;
  14434. --symbol2path: none;
  14435. }
  14436.  
  14437. .full-motion .bd-switch input:checked:active + .bd-switch-body {
  14438. --symbol1path: none;
  14439. --symbol2path: none;
  14440. }
  14441.  
  14442. .bd-switch input:checked:active + .bd-switch-body {
  14443. --switch-color: var(--brand-experiment);
  14444. }
  14445.  
  14446. .bd-switch-body .bd-switch-slider {
  14447. transform: scale(1.2) translateY(-1px);
  14448. transition: 250ms cubic-bezier(0, 0.3, 0.7, 1);
  14449. filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
  14450. }
  14451.  
  14452. .bd-switch input:checked + .bd-switch-body .bd-switch-slider {
  14453. left: 14px;
  14454. }
  14455.  
  14456. .bd-select {
  14457. background: var(--btn-grey);
  14458. border: none;
  14459. font-size: 14px;
  14460. font-weight: 400;
  14461. padding: 8px 14px;
  14462. border-radius: 2px;
  14463. transition-property: background, box-shadow, color;
  14464. transition-duration: 0.2s;
  14465. transition-timing-function: ease-out;
  14466. }
  14467. .bd-select:hover {
  14468. background: var(--btn-grey-hover);
  14469. color: #fff;
  14470. box-shadow: var(--btn-grey-boxshadow);
  14471. }
  14472. .bd-select.menu-open {
  14473. background: var(--btn-grey);
  14474. color: var(--text-normal);
  14475. box-shadow: none;
  14476. cursor: default;
  14477. }
  14478. .bd-select .bd-select-arrow {
  14479. margin-left: 10px;
  14480. fill: var(--brand-experiment);
  14481. height: 24px !important;
  14482. width: 24px !important;
  14483. }
  14484. .bd-select .bd-select-arrow path {
  14485. d: path("M 16.59 8.59003 L 12 13.17 L 7.41 8.59003 L 6 10 L 12 16 L 18 10 L 16.59 8.59003 Z");
  14486. }
  14487. .bd-select .bd-select-options {
  14488. right: 0;
  14489. border: none;
  14490. background: var(--dropdown-popout-background);
  14491. border-radius: 3px;
  14492. margin: 2px 0;
  14493. padding: 12px;
  14494. min-width: 100%;
  14495. box-shadow: var(--dropdown-popout-shadow);
  14496. z-index: 1002;
  14497. }
  14498. .bd-select .bd-select-option {
  14499. padding: 10px 15px;
  14500. font-weight: 400;
  14501. font-size: 14px;
  14502. line-height: 18px;
  14503. }
  14504. .bd-select .bd-select-option:hover {
  14505. background: var(--dropdown-popout-hover);
  14506. }
  14507. .bd-select .bd-select-option.selected {
  14508. color: var(--interactive-active);
  14509. background: var(--background-modifier-active);
  14510. }
  14511.  
  14512. .bd-number-input {
  14513. padding: 10px;
  14514. height: 42px;
  14515. font-size: 14px;
  14516. font-weight: 300;
  14517. line-height: 22px;
  14518. border-radius: 2px;
  14519. background: var(--btn-grey);
  14520. border: none;
  14521. transition: none;
  14522. }
  14523. .bd-number-input:hover {
  14524. background: var(--btn-grey-hover-light);
  14525. }
  14526. .bd-number-input:focus, .bd-number-input:focus-within {
  14527. background: var(--background-modifier-accent-dark);
  14528. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  14529. }
  14530.  
  14531. #updates-tab .bd-setting-item:has([for=core-updater]) {
  14532. padding: 8px 24px 10px 16px;
  14533. margin-right: 8px;
  14534. margin-bottom: 0;
  14535. border-radius: 2px;
  14536. width: -moz-fit-content;
  14537. width: fit-content;
  14538. background: var(--background-accent);
  14539. position: relative;
  14540. }
  14541. #updates-tab .bd-setting-item:has([for=core-updater]) .bd-filled-checkmark {
  14542. position: absolute;
  14543. margin: auto 0;
  14544. top: 0;
  14545. bottom: 0;
  14546. border-radius: 0;
  14547. padding: 0;
  14548. height: 20px;
  14549. width: 20px;
  14550. background: none;
  14551. }
  14552. #updates-tab .bd-setting-item:has([for=core-updater]) .bd-filled-checkmark svg {
  14553. height: 20px !important;
  14554. width: 20px !important;
  14555. fill: var(--status-online);
  14556. }
  14557. #updates-tab .bd-setting-item:has([for=core-updater]) .bd-setting-title,
  14558. #updates-tab .bd-setting-item:has([for=core-updater]) .bd-setting-note {
  14559. font-size: 14px;
  14560. font-weight: 600;
  14561. color: #fff;
  14562. line-height: 20px;
  14563. margin: 0 0 0 32px;
  14564. }
  14565. #updates-tab .bd-setting-item:has([for=core-updater]) .bd-setting-divider {
  14566. display: none;
  14567. }
  14568. #updates-tab .bd-setting-item:not(:has([for=core-updater])) {
  14569. position: relative;
  14570. margin-bottom: 0;
  14571. display: flex;
  14572. padding: 6px 8px;
  14573. height: 58px;
  14574. }
  14575. #updates-tab .bd-setting-item:not(:has([for=core-updater])):hover {
  14576. background: var(--background-accent);
  14577. transition: background 0.2s linear;
  14578. }
  14579. #updates-tab .bd-setting-item:not(:has([for=core-updater])):hover::after {
  14580. background-color: var(--background-accent-hover);
  14581. transition: background 0.2s linear;
  14582. }
  14583. #updates-tab .bd-setting-item:not(:has([for=core-updater]))::before {
  14584. content: "";
  14585. display: block;
  14586. position: absolute;
  14587. width: 98px;
  14588. height: 45px;
  14589. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/storage.svg);
  14590. mask: url(https://maendisease.github.io/Steam/illustrations/icns/storage.svg);
  14591. background-color: #fff;
  14592. -webkit-mask-repeat: no-repeat;
  14593. mask-repeat: no-repeat;
  14594. -webkit-mask-position: center;
  14595. mask-position: center;
  14596. -webkit-mask-size: 18px;
  14597. mask-size: 18px;
  14598. margin-right: 12px;
  14599. z-index: 1;
  14600. top: 0;
  14601. bottom: 0;
  14602. margin-top: auto;
  14603. margin-bottom: auto;
  14604. }
  14605. #updates-tab .bd-setting-item:not(:has([for=core-updater]))::after {
  14606. content: "";
  14607. display: block;
  14608. position: absolute;
  14609. height: 45px;
  14610. width: 98px;
  14611. background: var(--background-accent);
  14612. top: 0;
  14613. bottom: 0;
  14614. margin-top: auto;
  14615. margin-bottom: auto;
  14616. }
  14617. #updates-tab .bd-setting-item:not(:has([for=core-updater])) .bd-setting-title {
  14618. color: #fff;
  14619. line-height: 20px;
  14620. font-size: 16px;
  14621. margin-left: 114px;
  14622. max-width: calc(100% - 212px);
  14623. }
  14624. #updates-tab .bd-setting-item:not(:has([for=core-updater])) .bd-setting-note {
  14625. margin-left: 114px;
  14626. color: var(--text-muted);
  14627. font-size: 12px;
  14628. line-height: 22px;
  14629. letter-spacing: 0.5px;
  14630. text-transform: uppercase;
  14631. font-weight: 700;
  14632. display: flex;
  14633. align-items: center;
  14634. margin-top: 0;
  14635. max-width: calc(100% - 212px);
  14636. }
  14637. #updates-tab .bd-setting-item:not(:has([for=core-updater])) .bd-setting-note::before {
  14638. content: "";
  14639. display: block;
  14640. width: 16px;
  14641. height: 16px;
  14642. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/downloads.svg);
  14643. mask: url(https://maendisease.github.io/Steam/illustrations/icns/downloads.svg);
  14644. background: var(--text-muted);
  14645. margin-right: 4px;
  14646. }
  14647. #updates-tab .bd-setting-item:not(:has([for=core-updater])) button {
  14648. position: absolute;
  14649. right: 18px;
  14650. margin: auto 0;
  14651. top: 0;
  14652. bottom: 0;
  14653. }
  14654. #updates-tab .bd-setting-item:not(:has([for=core-updater])) .bd-setting-divider {
  14655. display: none;
  14656. }
  14657. #updates-tab .bd-settings-group:nth-child(3) .bd-setting-item:not(:has([for=core-updater]))::before {
  14658. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/plugins.svg);
  14659. mask: url(https://maendisease.github.io/Steam/illustrations/icns/plugins.svg);
  14660. -webkit-mask-repeat: no-repeat;
  14661. mask-repeat: no-repeat;
  14662. -webkit-mask-position: center;
  14663. mask-position: center;
  14664. -webkit-mask-size: 24px;
  14665. mask-size: 24px;
  14666. }
  14667. #updates-tab .bd-settings-group:nth-child(4) .bd-setting-item:not(:has([for=core-updater]))::before {
  14668. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/themes.svg);
  14669. mask: url(https://maendisease.github.io/Steam/illustrations/icns/themes.svg);
  14670. -webkit-mask-repeat: no-repeat;
  14671. mask-repeat: no-repeat;
  14672. -webkit-mask-position: center;
  14673. mask-position: center;
  14674. -webkit-mask-size: 28px;
  14675. mask-size: 28px;
  14676. }
  14677. #updates-tab .bd-empty-updates {
  14678. font-size: 13px;
  14679. line-height: 18px;
  14680. font-weight: 400;
  14681. color: var(--text-muted);
  14682. }
  14683. #updates-tab .bd-empty-updates svg {
  14684. fill: var(--status-online);
  14685. margin-bottom: 4px;
  14686. }
  14687.  
  14688. #floating-editor-window:has(.monaco-editor.focused)::before {
  14689. content: "";
  14690. display: block;
  14691. height: 1px;
  14692. width: 100%;
  14693. background: linear-gradient(to right, hsl(calc(var(--accent-hue) - 13), calc(var(--saturation-factor, 1) * 100%), 50%) 0%, hsl(calc(var(--accent-hue) + 20), calc(var(--saturation-factor, 1) * 100%), 60%) 100%);
  14694. position: absolute;
  14695. z-index: 102;
  14696. top: 0;
  14697. }
  14698.  
  14699. [d="M4 18h17v-6H4v6zM4 5v6h17V5H4z"] {
  14700. d: path("M 20,4 H 4 v 7 h 16 z M 20,13 H 4 v 7 h 16 z");
  14701. }
  14702.  
  14703. [d="M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z"] {
  14704. d: path("M 8.31743,4 H 3.999968 V 8.317462 H 8.31743 Z M 8.31743,9.756612 H 3.999968 v 4.31742 H 8.31743 Z M 14.074,4 H 9.75658 V 8.317462 H 14.074 Z M 14.074,9.756612 H 9.75658 v 4.31742 H 14.074 Z M 20,4 H 15.6825 V 8.317462 H 20 Z M 20,9.756612 h -4.3175 v 4.31742 H 20 Z M 8.31743,15.682532 H 3.999968 v 4.3175 H 8.31743 Z M 14.074,15.682532 H 9.75658 v 4.3175 H 14.074 Z M 20,15.682532 h -4.3175 v 4.3175 H 20 Z");
  14705. }
  14706.  
  14707. .bd-search-wrapper {
  14708. padding: 4px 8px;
  14709. transition-property: background, box-shadow, color;
  14710. transition-duration: 0.2s;
  14711. transition-timing-function: ease-out;
  14712. }
  14713. .bd-search-wrapper:hover {
  14714. background: var(--btn-grey-hover);
  14715. color: #fff;
  14716. box-shadow: var(--btn-grey-boxshadow);
  14717. }
  14718. .bd-search-wrapper:focus, .bd-search-wrapper:focus-within {
  14719. background: var(--btn-grey);
  14720. color: var(--text-normal);
  14721. box-shadow: none;
  14722. cursor: default;
  14723. }
  14724. .bd-search-wrapper svg {
  14725. height: 18px !important;
  14726. width: 18px !important;
  14727. fill: var(--brand-experiment);
  14728. }
  14729.  
  14730. .bd-addon-controls .bd-search::-moz-placeholder {
  14731. color: #fff;
  14732. font-size: 16px;
  14733. line-height: 20px;
  14734. font-weight: 600;
  14735. letter-spacing: 0;
  14736. }
  14737.  
  14738. .bd-addon-controls .bd-search,
  14739. .bd-addon-controls .bd-search::placeholder {
  14740. color: #fff;
  14741. font-size: 16px;
  14742. line-height: 20px;
  14743. font-weight: 600;
  14744. letter-spacing: 0;
  14745. }
  14746.  
  14747. .bd-addon-controls .bd-search::after {
  14748. content: attr(aria-label);
  14749. font-size: 14px;
  14750. line-height: 18px;
  14751. font-weight: 400;
  14752. color: var(--text-lighter);
  14753. }
  14754.  
  14755. .bd-select-wrapper label {
  14756. display: none;
  14757. }
  14758.  
  14759. .bd-select.bd-select-transparent {
  14760. align-items: center;
  14761. padding: 4px 0;
  14762. transition: padding 0.3s cubic-bezier(0.16, 0.86, 0.43, 0.99);
  14763. }
  14764. .bd-select.bd-select-transparent:hover, .bd-select.bd-select-transparent.menu-open {
  14765. padding-left: 8px;
  14766. padding-right: 8px;
  14767. }
  14768.  
  14769. /* Placement */
  14770. #themes-tab,
  14771. #plugins-tab {
  14772. display: grid;
  14773. grid-template-areas: "title title title title" "search counter divider controls" "addons addons addons addons";
  14774. min-height: unset;
  14775. }
  14776.  
  14777. #themes-tab::after,
  14778. #plugins-tab::after {
  14779. grid-area: counter;
  14780. }
  14781. #themes-tab::before,
  14782. #plugins-tab::before {
  14783. grid-area: divider;
  14784. }
  14785.  
  14786. .bd-addon-controls:not(#a) {
  14787. display: contents;
  14788. }
  14789.  
  14790. .bd-settings-title {
  14791. grid-area: title;
  14792. }
  14793.  
  14794. .bd-search-wrapper {
  14795. grid-area: search;
  14796. }
  14797.  
  14798. .bd-controls-advanced {
  14799. grid-area: controls;
  14800. justify-self: flex-end;
  14801. }
  14802.  
  14803. .bd-addon-list {
  14804. grid-area: addons;
  14805. }
  14806.  
  14807. .bd-empty-image-container,
  14808. .bd-empty-results {
  14809. grid-column: 1/-1;
  14810. }
  14811.  
  14812. /* Cosmetics*/
  14813. #themes-tab::after,
  14814. #plugins-tab::after {
  14815. white-space: nowrap;
  14816. color: var(--text-muted);
  14817. font-weight: 600;
  14818. font-size: 16px;
  14819. line-height: 20px;
  14820. margin-left: 8px;
  14821. align-items: center;
  14822. display: flex;
  14823. }
  14824.  
  14825. /* Counter Styles */
  14826. :root {
  14827. counter-reset: addonCount;
  14828. }
  14829.  
  14830. .bd-addon-card {
  14831. counter-increment: addonCount;
  14832. }
  14833.  
  14834. #themes-tab::after,
  14835. #plugins-tab::after {
  14836. content: counter(addonCount);
  14837. animation: f 1s linear infinite forwards;
  14838. }
  14839.  
  14840. @keyframes f {
  14841. to {
  14842. content: counter(addonCount);
  14843. }
  14844. }
  14845. .bd-addon-list.bd-grid-view {
  14846. gap: 0;
  14847. }
  14848. .bd-addon-list.bd-grid-view .bd-addon-card .bd-addon-header .bd-icon {
  14849. width: 45px !important;
  14850. }
  14851. .bd-addon-list .bd-addon-card {
  14852. margin-bottom: 0;
  14853. }
  14854. .bd-addon-list .bd-addon-card:hover {
  14855. background: var(--background-accent);
  14856. transition: background 0.2s linear;
  14857. }
  14858.  
  14859. .bd-addon-list .bd-addon-card {
  14860. margin-bottom: 0;
  14861. background: none;
  14862. border-radius: 0;
  14863. height: 58px;
  14864. }
  14865. .bd-addon-list .bd-addon-card:not(:has(.bd-switch-checked), .bd-addon-card-disabled):hover .bd-icon {
  14866. background-color: var(--background-accent-hover);
  14867. transition: background 0.2s linear;
  14868. }
  14869. .bd-addon-list .bd-addon-card:has(.bd-switch-checked) .bd-addon-header .bd-icon {
  14870. background: var(--brand-experiment);
  14871. }
  14872. .bd-addon-list .bd-addon-card.bd-addon-card-disabled {
  14873. background: none;
  14874. border: none;
  14875. }
  14876. .bd-addon-list .bd-addon-card.bd-addon-card-disabled:hover {
  14877. background: var(--info-danger-background);
  14878. }
  14879. .bd-addon-list .bd-addon-card.bd-addon-card-disabled .bd-addon-header .bd-icon {
  14880. background: var(--status-danger);
  14881. }
  14882. .bd-addon-list .bd-addon-card.bd-addon-card-disabled .bd-name {
  14883. color: var(--status-danger);
  14884. }
  14885. .bd-addon-list .bd-addon-card .bd-addon-header {
  14886. padding: 6.5px 8px 5.5px 8px;
  14887. }
  14888. .bd-addon-list .bd-addon-card .bd-addon-header .bd-icon {
  14889. display: block;
  14890. background: var(--background-accent);
  14891. height: 45px !important;
  14892. width: 98px !important;
  14893. padding: 13px;
  14894. margin-right: 0;
  14895. }
  14896. .bd-addon-list .bd-addon-card .bd-switch-body {
  14897. display: none;
  14898. }
  14899. .bd-addon-list .bd-addon-card .bd-title {
  14900. margin-left: 12px;
  14901. flex-wrap: wrap;
  14902. }
  14903. .bd-addon-list .bd-addon-card .bd-title .bd-name,
  14904. .bd-addon-list .bd-addon-card .bd-title .bd-meta {
  14905. display: flex;
  14906. }
  14907. .bd-addon-list .bd-addon-card .bd-name {
  14908. color: #fff;
  14909. line-height: 20px;
  14910. font-size: 16px;
  14911. font-weight: 400;
  14912. }
  14913. .bd-addon-list .bd-addon-card .bd-meta {
  14914. color: var(--text-muted);
  14915. line-height: 22px;
  14916. letter-spacing: 0.5px;
  14917. text-transform: uppercase;
  14918. font-weight: 700;
  14919. gap: 1px;
  14920. font-size: 0;
  14921. }
  14922. .bd-addon-list .bd-addon-card .bd-meta .bd-version,
  14923. .bd-addon-list .bd-addon-card .bd-meta a,
  14924. .bd-addon-list .bd-addon-card .bd-meta .bd-author {
  14925. font-size: 12px;
  14926. }
  14927. .bd-addon-list .bd-addon-card .bd-meta .bd-author {
  14928. color: var(--background-accent-hover);
  14929. }
  14930. .bd-addon-list .bd-addon-card .bd-description-wrap {
  14931. margin-left: 0;
  14932. background: var(--contextmenu-gradient);
  14933. border-radius: 0;
  14934. box-shadow: 3px 3px 5px -3px #000;
  14935. }
  14936. .bd-addon-list .bd-addon-card .bd-description-wrap .banner {
  14937. border-radius: 0;
  14938. }
  14939. .bd-addon-list .bd-addon-card .bd-description {
  14940. color: var(--contextmenu-text);
  14941. font-weight: 400;
  14942. }
  14943.  
  14944. #app-mount .bd-addon-card .bd-button {
  14945. border-radius: 2px;
  14946. }
  14947. #app-mount .bd-addon-header {
  14948. opacity: 1;
  14949. }
  14950.  
  14951. .bd-notice:first-child {
  14952. border-radius: 0;
  14953. }
  14954.  
  14955. .bd-modal-root {
  14956. background: var(--modal-background);
  14957. border-radius: 0;
  14958. --text-link: var(--text-linkHi);
  14959. }
  14960. .bd-modal-root::before {
  14961. content: "";
  14962. display: block;
  14963. height: 1px;
  14964. width: 100%;
  14965. background: linear-gradient(to right, hsl(calc(var(--accent-hue) - 13), calc(var(--saturation-factor, 1) * 100%), 50%) 0%, hsl(calc(var(--accent-hue) + 20), calc(var(--saturation-factor, 1) * 100%), 60%) 100%);
  14966. position: absolute;
  14967. z-index: 102;
  14968. top: 0;
  14969. }
  14970. .bd-modal-root a:hover {
  14971. text-decoration: none;
  14972. --text-link: var(--text-linkHi-hover);
  14973. }
  14974.  
  14975. .bd-button.bd-close-button {
  14976. position: absolute;
  14977. top: 9px;
  14978. right: 9px;
  14979. height: 16px;
  14980. width: 16px;
  14981. padding: 0;
  14982. box-shadow: none;
  14983. }
  14984. .bd-button.bd-close-button svg {
  14985. height: 16px !important;
  14986. width: 16px !important;
  14987. }
  14988.  
  14989. .bd-modal-medium {
  14990. width: 500px;
  14991. }
  14992.  
  14993. .bd-modal-header h1 {
  14994. font-size: 22px;
  14995. font-weight: 700;
  14996. line-height: 24px;
  14997. text-transform: unset !important;
  14998. margin-bottom: 0 !important;
  14999. color: var(--header-primary);
  15000. }
  15001.  
  15002. .bd-modal-header,
  15003. .bd-modal-footer {
  15004. padding: 32px;
  15005. }
  15006.  
  15007. .bd-modal-content {
  15008. border-radius: 0;
  15009. padding-left: 32px;
  15010. padding-bottom: 0;
  15011. padding-right: 32px;
  15012. overflow: hidden overlay;
  15013. }
  15014.  
  15015. .bd-modal-footer {
  15016. border-radius: 0;
  15017. background: none;
  15018. box-shadow: none;
  15019. }
  15020.  
  15021. .bd-text-input {
  15022. padding: 10px;
  15023. height: 42px;
  15024. font-size: 14px;
  15025. font-weight: 300;
  15026. line-height: 22px;
  15027. border-radius: 2px;
  15028. background: var(--btn-grey);
  15029. border: none;
  15030. transition: none;
  15031. }
  15032. .bd-text-input:hover {
  15033. background: var(--btn-grey-hover-light);
  15034. }
  15035. .bd-text-input:focus, .bd-text-input:focus-within {
  15036. background: var(--background-modifier-accent-dark);
  15037. box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.6666666667);
  15038. }
  15039.  
  15040. .bd-slider-wrap {
  15041. color: #fff;
  15042. }
  15043.  
  15044. .bd-slider-label {
  15045. border-radius: 3px;
  15046. }
  15047.  
  15048. .bd-slider-input {
  15049. height: 6px;
  15050. border-radius: 3px;
  15051. }
  15052.  
  15053. .bd-error-modal .header-1ffhsl .title-lXcL8p {
  15054. text-transform: capitalize;
  15055. font-size: 22px;
  15056. font-weight: 700;
  15057. line-height: 24px;
  15058. letter-spacing: 0;
  15059. margin-bottom: 0;
  15060. }
  15061. .bd-error-modal .bd-tab-item {
  15062. min-width: 40px;
  15063. height: 34px;
  15064. min-height: 34px;
  15065. padding: 0 14px;
  15066. margin-right: 16px;
  15067. font-size: 14px;
  15068. line-height: 16px;
  15069. font-weight: 400;
  15070. border-radius: 2px;
  15071. color: var(--text-lighter);
  15072. background: var(--btn-grey);
  15073. transition-property: background, box-shadow, color;
  15074. transition-duration: 0.2s;
  15075. transition-timing-function: ease-out;
  15076. }
  15077. .bd-error-modal .bd-tab-item:hover {
  15078. background: var(--btn-grey-hover);
  15079. color: #fff;
  15080. box-shadow: var(--btn-grey-boxshadow);
  15081. }
  15082. .bd-error-modal .bd-addon-errors {
  15083. margin-top: 0;
  15084. }
  15085. .bd-error-modal .bd-addon-error {
  15086. border-radius: 0;
  15087. margin-bottom: 0;
  15088. background: none;
  15089. border: none;
  15090. }
  15091. .bd-error-modal .bd-addon-error:hover, .bd-error-modal .bd-addon-error.expanded {
  15092. background: var(--background-accent);
  15093. transition: background 0.2s linear;
  15094. }
  15095. .bd-error-modal .bd-addon-error:hover .bd-addon-error-expander, .bd-error-modal .bd-addon-error.expanded .bd-addon-error-expander {
  15096. background-color: var(--background-accent-hover);
  15097. transition: background 0.2s linear;
  15098. }
  15099. .bd-error-modal .bd-addon-error-header {
  15100. padding: 6px 8px;
  15101. height: 58px;
  15102. }
  15103. .bd-error-modal .bd-addon-error-icon {
  15104. background: var(--status-danger);
  15105. width: 45px;
  15106. height: 45px;
  15107. border-radius: 0;
  15108. margin-right: 12px;
  15109. align-self: center;
  15110. }
  15111. .bd-error-modal .bd-addon-error-icon svg {
  15112. fill: #fff;
  15113. width: 18px !important;
  15114. height: 18px !important;
  15115. }
  15116. .bd-error-modal .bd-addon-error-header-inner h3 {
  15117. color: var(--status-danger);
  15118. line-height: 20px;
  15119. font-size: 16px;
  15120. font-weight: 400;
  15121. }
  15122. .bd-error-modal .detailsIcon-2NtTO9 {
  15123. color: var(--text-muted);
  15124. }
  15125. .bd-error-modal .bd-addon-error-details {
  15126. color: var(--text-muted);
  15127. line-height: 22px;
  15128. letter-spacing: 0.5px;
  15129. text-transform: uppercase;
  15130. font-weight: 700;
  15131. font-size: 12px;
  15132. }
  15133. .bd-error-modal .bd-addon-error-expander {
  15134. height: 24px;
  15135. width: 24px;
  15136. padding: 6px;
  15137. border-radius: 2px;
  15138. color: var(--brand-experiment);
  15139. background: var(--btn-grey);
  15140. transition-property: background, box-shadow;
  15141. transition-duration: 0.2s;
  15142. transition-timing-function: ease-out;
  15143. }
  15144. .bd-error-modal .bd-addon-error-expander:hover {
  15145. background: var(--btn-grey-hover);
  15146. box-shadow: var(--btn-grey-boxshadow);
  15147. }
  15148. .bd-error-modal .bd-addon-error-body .bd-divider {
  15149. display: none;
  15150. }
  15151. .bd-error-modal .bd-addon-error-body {
  15152. padding: 0 8px 8px 8px;
  15153. }
  15154.  
  15155. .bd-addon-error-stack code {
  15156. font-size: 13px;
  15157. line-height: 17px;
  15158. background: var(--code-background);
  15159. border: none;
  15160. border-radius: 0;
  15161. -webkit-font-smoothing: antialiased;
  15162. }
  15163.  
  15164. .markdown-19oyJN {
  15165. font-size: 14px;
  15166. }
  15167.  
  15168. .bd-addon-modal .bd-addon-modal-header .size20-2yAqwX {
  15169. font-size: 22px;
  15170. font-weight: 700;
  15171. line-height: 24px;
  15172. color: var(--header-primary);
  15173. }
  15174.  
  15175. #channelTabs-container {
  15176. box-shadow: inset hsl(calc(var(--accent-hue) + 13), calc(var(--saturation-factor, 1) * 13.5%), 27.6%, 0.75) 1px 0 0 0, inset hsl(calc(var(--accent-hue) + 13), calc(var(--saturation-factor, 1) * 13.5%), 27.6%, 0.25) -1px -1px 0 0;
  15177. }
  15178. #app-mount #channelTabs-container {
  15179. background: var(--background-tertiary);
  15180. }
  15181. #app-mount #channelTabs-container > :not(#channelTabs-settingsMenu) + div {
  15182. padding-top: 4px;
  15183. border-top: none;
  15184. }
  15185. .platform-linux #channelTabs-container, .platform-web #channelTabs-container {
  15186. margin-top: var(--titlebar-height);
  15187. }
  15188. #channelTabs-container ~ .layers__1c917 .container_ca50b9::before {
  15189. box-shadow: inset hsl(calc(var(--accent-hue) + 13), calc(var(--saturation-factor, 1) * 13.5%), 27.6%, 0.75) 1px 1px 1px 0, inset hsl(calc(var(--accent-hue) + 13), calc(var(--saturation-factor, 1) * 13.5%), 27.6%, 0.25) -1px 0 1px 0;
  15190. }
  15191. #channelTabs-container .channelTabs-tab {
  15192. border-radius: 0;
  15193. --background-modifier-hover: var(--background-accent-25);
  15194. --background-modifier-active: var(--background-accent-25);
  15195. --background-modifier-selected: var(--background-accent);
  15196. transition-property: background, box-shadow, color;
  15197. transition-duration: 0.15s;
  15198. transition-timing-function: ease-out;
  15199. }
  15200. #channelTabs-container .channelTabs-mentionBadge,
  15201. #channelTabs-container .channelTabs-unreadBadge {
  15202. border-radius: 0;
  15203. }
  15204. #channelTabs-container .channelTabs-closeTab {
  15205. border-radius: 0;
  15206. }
  15207. #channelTabs-container .channelTabs-newTab {
  15208. border-radius: 0;
  15209. }
  15210. #channelTabs-container .channelTabs-noFavNotice {
  15211. color: var(--background-accent-hover);
  15212. font-size: 12px;
  15213. line-height: 16px;
  15214. padding: 0;
  15215. }
  15216. #channelTabs-container .channelTabs-fav {
  15217. --background-modifier-hover: var(--background-accent-25);
  15218. --background-modifier-active: var(--background-accent-25);
  15219. transition-property: background, color;
  15220. transition-duration: 0.15s;
  15221. transition-timing-function: ease-out;
  15222. border-radius: 50px;
  15223. padding-left: 4px;
  15224. padding-right: 4px;
  15225. }
  15226. #channelTabs-container .channelTabs-fav .channelTabs-noMention,
  15227. #channelTabs-container .channelTabs-fav .channelTabs-noUnread {
  15228. background-color: transparent;
  15229. }
  15230.  
  15231. .gameActivityToggleAdded-Yd-YxC .withTagAsButton_cc125f,
  15232. .gameActivityToggleAdded-Yd-YxC .withTagAsButton_cc125f {
  15233. flex: initial;
  15234. min-width: initial;
  15235. }
  15236.  
  15237. .container-6sXIoE {
  15238. margin-bottom: 0;
  15239. border-bottom: 0;
  15240. padding: 8px;
  15241. }
  15242.  
  15243. #app-mount .layer__2efaa ~ .layer__2efaa .repoHeader-2KfNvH.contentColumnDefault_c66386 {
  15244. padding: 32px 24px 0 !important;
  15245. }
  15246. #app-mount .layer__2efaa ~ .layer__2efaa .repo-k8F4Sd {
  15247. max-width: 100% !important;
  15248. }
  15249.  
  15250. .repoHeader-2KfNvH::after {
  15251. content: "";
  15252. display: block;
  15253. position: absolute;
  15254. bottom: -24px;
  15255. left: 0;
  15256. height: 24px;
  15257. width: 100%;
  15258. background: linear-gradient(to bottom, var(--background-tertiary) 0%, transparent 100%);
  15259. pointer-events: none;
  15260. z-index: 1;
  15261. }
  15262. .repoHeader-2KfNvH h2 {
  15263. font-size: 22px;
  15264. line-height: 24px;
  15265. font-weight: 700;
  15266. margin-bottom: 0;
  15267. }
  15268. .repoHeader-2KfNvH .inner__999f6 {
  15269. border-radius: 2px;
  15270. transition: padding 0.3s cubic-bezier(0.16, 0.86, 0.43, 0.99);
  15271. }
  15272. .repoHeader-2KfNvH .inner__999f6:hover {
  15273. padding-left: 8px;
  15274. padding-right: 8px;
  15275. background: var(--btn-grey-hover);
  15276. box-shadow: var(--btn-grey-boxshadow);
  15277. }
  15278. .repoHeader-2KfNvH .inner__999f6 svg {
  15279. color: var(--brand-experiment);
  15280. }
  15281. .repoHeader-2KfNvH .tabBarContainer-sCZC4w {
  15282. border: none;
  15283. margin: 10px 0 0 0;
  15284. }
  15285. .repoHeader-2KfNvH .tabBar-2hXqzU {
  15286. gap: 4px;
  15287. }
  15288. .repoHeader-2KfNvH .tabBar-2hXqzU .selected__5711d {
  15289. display: none;
  15290. }
  15291. .repoHeader-2KfNvH .tabBar-2hXqzU .item__48dda {
  15292. font-size: 0;
  15293. height: 34px;
  15294. width: 34px;
  15295. border-radius: 2px;
  15296. background: var(--btn-grey);
  15297. transition-property: background, box-shadow, color;
  15298. transition-duration: 0.2s;
  15299. transition-timing-function: ease-out;
  15300. border: none;
  15301. }
  15302. .repoHeader-2KfNvH .tabBar-2hXqzU .item__48dda:nth-child(2):not(:last-child) {
  15303. width: -moz-fit-content;
  15304. width: fit-content;
  15305. font-size: 14px;
  15306. line-height: 18px;
  15307. font-weight: 400;
  15308. color: var(--text-lighter);
  15309. padding: 8px 14px;
  15310. }
  15311. .repoHeader-2KfNvH .tabBar-2hXqzU .item__48dda:hover {
  15312. background: var(--btn-grey-hover);
  15313. color: #fff;
  15314. box-shadow: var(--btn-grey-boxshadow);
  15315. }
  15316. .repoHeader-2KfNvH .tabBar-2hXqzU .item__48dda:first-child::before {
  15317. content: "";
  15318. display: block;
  15319. position: absolute;
  15320. inset: 0;
  15321. height: 100%;
  15322. width: 100%;
  15323. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/discordrightarrow.svg) center/contain no-repeat;
  15324. mask: url(https://maendisease.github.io/Steam/illustrations/icns/discordrightarrow.svg) center/contain no-repeat;
  15325. -webkit-mask-size: 20px;
  15326. mask-size: 20px;
  15327. background: var(--brand-experiment);
  15328. scale: -1;
  15329. }
  15330. .repoHeader-2KfNvH .tabBar-2hXqzU .item__48dda:last-child::before {
  15331. content: "";
  15332. display: block;
  15333. position: absolute;
  15334. inset: 0;
  15335. height: 100%;
  15336. width: 100%;
  15337. -webkit-mask: url(https://maendisease.github.io/Steam/illustrations/icns/settings.svg) center/contain no-repeat;
  15338. mask: url(https://maendisease.github.io/Steam/illustrations/icns/settings.svg) center/contain no-repeat;
  15339. -webkit-mask-size: 18px;
  15340. mask-size: 18px;
  15341. background: var(--brand-experiment);
  15342. }
  15343.  
  15344. .repoScroller-9JnAPs {
  15345. overflow: hidden overlay !important;
  15346. }
  15347. .repoScroller-9JnAPs .tabContent-nZ-1U5 {
  15348. margin-top: 14px;
  15349. }
  15350. .repoScroller-9JnAPs .card-x5zW6z {
  15351. background: var(--btn-grey);
  15352. border: none;
  15353. border-radius: 2px;
  15354. box-shadow: none;
  15355. transform: none;
  15356. transition: none;
  15357. }
  15358. .repoScroller-9JnAPs .card-x5zW6z .header-4hHJgv {
  15359. margin-bottom: 16px;
  15360. }
  15361. .repoScroller-9JnAPs .card-x5zW6z .iconWrapper-eK7GO6 {
  15362. display: none;
  15363. }
  15364. .repoScroller-9JnAPs .button-coQXfM {
  15365. border-radius: 2px;
  15366. font-size: 14px;
  15367. font-weight: 400;
  15368. height: 34px;
  15369. padding: 8px 14px;
  15370. transition-property: background, box-shadow, color;
  15371. transition-duration: 0.2s;
  15372. transition-timing-function: ease-out;
  15373. background-image: linear-gradient(to right, hsl(calc(var(--accent-hue) - 4), calc(var(--saturation-factor, 1) * 100%), 63.9%) 0%, hsl(calc(var(--accent-hue) + 20), calc(var(--saturation-factor, 1) * 76.4%), 43.1%) 60%);
  15374. background-position: 25%;
  15375. background-size: 330% 100%;
  15376. }
  15377. .repoScroller-9JnAPs .button-coQXfM:hover {
  15378. background-position: 0%;
  15379. background-size: 330% 100%;
  15380. background-image: linear-gradient(to right, hsl(calc(var(--accent-hue) - 4), calc(var(--saturation-factor, 1) * 100%), 63.9%) 0%, hsl(calc(var(--accent-hue) + 20), calc(var(--saturation-factor, 1) * 76.4%), 43.1%) 60%);
  15381. box-shadow: var(--btn-grey-boxshadow);
  15382. }
  15383.  
  15384. #permissions-modal-wrapper #permissions-modal {
  15385. border: none;
  15386. border-radius: 0;
  15387. box-shadow: none;
  15388. }
  15389. #permissions-modal-wrapper .header {
  15390. background: none;
  15391. box-shadow: none;
  15392. padding: 16px;
  15393. color: var(--header-secondary);
  15394. font-size: 14px;
  15395. font-weight: 400;
  15396. line-height: 18px;
  15397. }
  15398. #permissions-modal-wrapper .modal-body {
  15399. background: none;
  15400. }
  15401. #permissions-modal-wrapper .role-side {
  15402. background: none;
  15403. padding: 0;
  15404. }
  15405. #permissions-modal-wrapper .perm-side {
  15406. background: none;
  15407. padding: 0;
  15408. }
  15409. #permissions-modal-wrapper .role-item {
  15410. margin-bottom: 0;
  15411. border-radius: 0;
  15412. padding: 5px 8px;
  15413. font-size: 14px;
  15414. font-weight: 600;
  15415. line-height: 18px;
  15416. height: 32px;
  15417. box-sizing: border-box;
  15418. align-items: center;
  15419. }
  15420. #permissions-modal-wrapper .role-item:hover {
  15421. background: rgba(255, 255, 255, 0.2);
  15422. }
  15423. #permissions-modal-wrapper .role-item.selected {
  15424. background: var(--btn-dark-hover);
  15425. }
  15426. #permissions-modal-wrapper .perm-item {
  15427. box-shadow: inset 0 -1px 0 hsl(var(--primary-500-hsl)/0.3);
  15428. height: 44px;
  15429. padding: 6px 8px;
  15430. }
  15431. #permissions-modal-wrapper .perm-item svg {
  15432. height: 18px;
  15433. width: 18px;
  15434. }
  15435. #permissions-modal-wrapper .perm-item.allowed svg {
  15436. fill: var(--gpColor-Green);
  15437. }
  15438. #permissions-modal-wrapper .perm-item.denied {
  15439. box-shadow: none;
  15440. background: var(--info-danger-background);
  15441. }
  15442. #permissions-modal-wrapper .perm-item.denied .perm-name {
  15443. color: var(--status-danger);
  15444. font-weight: 700;
  15445. }
  15446. #permissions-modal-wrapper .perm-item.denied svg {
  15447. fill: var(--gpColor-Red);
  15448. }
  15449. #permissions-modal-wrapper .perm-name {
  15450. font-size: 14px;
  15451. font-weight: 400;
  15452. line-height: 18px;
  15453. color: hsl(calc(var(--accent-hue) + 5), calc(var(--saturation-factor, 1) * 7.8%), 69.8%);
  15454. }
  15455.  
  15456. .PI-indicatorContainer [style="color: #3BA55D;"] {
  15457. color: var(--rs-online-color) !important;
  15458. }
  15459. .PI-indicatorContainer [style="color: #FAA81A;"] {
  15460. color: var(--rs-idle-color) !important;
  15461. }
  15462. .PI-indicatorContainer [style="color: #ED4245;"] {
  15463. color: var(--rs-dnd-color) !important;
  15464. }
  15465. .PI-indicatorContainer path[d^="M4 2.5C2.897 2.5 2 3.397"] {
  15466. d: path("M 23,6.125 H 5 V 18.5 h 4.8375 l -0.9,3.375 h 10.125 l -0.9,-3.375 H 23 Z M 20.75,16.25 H 7.25 V 8.375 h 13.5 z");
  15467. }
  15468. .PI-indicatorContainer .PI-icon_mobile {
  15469. transform: none !important;
  15470. }
  15471. .PI-indicatorContainer path[d^="M 2.882812 0.246094 C 1.941406"] {
  15472. d: path("M 22.963465,4.4999999 H 9.0525229 c -1.6552314,0 -2.9922529,1.3370206 -2.9922529,2.992252 V 36.50775 c 0,1.655345 1.3370215,2.99225 2.9922529,2.99225 H 22.947477 c 1.655349,10e-7 2.992253,-1.337021 2.992253,-2.99225 V 7.4922519 c 0,-1.655348 -1.337019,-2.992252 -2.992253,-2.992252 z M 12.58598,5.9006161 h 6.859901 c 0.445634,0 0.795818,0.3501833 0.795818,0.7958178 0,0.4456349 -0.350184,0.795818 -0.795818,0.795818 H 12.58598 c -0.445637,0 -0.795821,-0.3501831 -0.795821,-0.795818 0,-0.4456345 0.350184,-0.7958178 0.795821,-0.7958178 z m 3.437885,31.0210259 c -0.875401,0 -1.591638,-0.716236 -1.591638,-1.591632 0,-0.8754 0.716237,-1.591636 1.591638,-1.591636 0.875399,0 1.591634,0.716236 1.591634,1.591636 0,0.875399 -0.716235,1.591632 -1.591634,1.591632 z m 7.92632,-5.172812 H 8.1452671 V 9.4817966 H 23.918329 V 31.764696 Z");
  15473. }
  15474.  
  15475. .layout_bb8e67:has([mask="url(#svg-mask-avatar-status-mobile-32)"]) .nameAndDecorators_e34d47:has(.PI-indicatorContainer) .username__11d8c span {
  15476. max-width: unset;
  15477. }
  15478. .layout_bb8e67:has([mask="url(#svg-mask-avatar-status-mobile-32)"]) .nameAndDecorators_e34d47:has(.PI-indicatorContainer) .username__11d8c::after {
  15479. display: none;
  15480. }
  15481.  
  15482. .VPP-Button {
  15483. background: rgba(0, 0, 0, 0.3);
  15484. border-radius: 2px;
  15485. }
  15486. .VPP-Button:hover {
  15487. background: rgba(0, 0, 0, 0.6);
  15488. }
  15489.  
  15490. .VPP-carousel.carouselModal-1eUFoq:not(#idontthinkso) {
  15491. height: -moz-fit-content;
  15492. height: fit-content;
  15493. width: -moz-fit-content;
  15494. width: fit-content;
  15495. position: relative;
  15496. background: var(--modal-background);
  15497. }
  15498.  
  15499. .VPP-carousel .arrowContainer__94160 {
  15500. opacity: 1;
  15501. background: var(--btn-grey);
  15502. border-radius: 2px;
  15503. }
  15504. .VPP-carousel .arrowContainer__94160:hover {
  15505. background: var(--btn-grey-hover);
  15506. }
  15507.  
  15508. .container-OnlineFriendCount {
  15509. height: -moz-fit-content;
  15510. height: fit-content;
  15511. margin: 12px 0;
  15512. }
  15513.  
  15514. .item-OnlineFriendCount {
  15515. text-transform: capitalize;
  15516. }
Add Comment
Please, Sign In to add comment