xmc/modular/base.css

:root,
.theme-dark,
.theme-light {
  --titlebar-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 2px rgba(0, 0, 0, 0.27),
    0 0 0 1px var(--tertiary, var(--background-tertiary)),
    0 0 0 2px var(--secondary, var(--background-secondary)),
    0 0 0 3px var(--primary, var(--background-primary));

  --_font-titlebars: var(--font-primary);

  --titlebar-color: var(--accent);
}

/* i have no idea what half of these are for anymore */
/* most of them are probably now-redundant color fixes */
/* others are things i dont feel like need a toggle at the current moment */

[class^="container_"] > [class^="slider_"] > svg {
  display: none;
}

[class*="unreadBar_"] {
  margin: 4px;
  border-radius: 4px !important;
}

[class^="modalTextContainer_"] {
  overflow: scroll !important;
}

[class^="content_"] > [class^="sidebar_"] {
  border-radius: 0;
}

.platform-osx [class*="guilds_"] > ul > [class^="scroller_"] {
  padding-top: 4px;
}

[class^="slider_"] {
  padding-top: 0 !important;
}

.platform-win
  nav[class*="guilds_"]
  > ul[class^="tree_"]
  > [class^="scroller_"] {
  padding-top: 12px !important;
}

[class*="timestampVisibleOnHover_"] {
  opacity: 1 !important;
}

[class^="message_"][class*="compact_"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

[class*="progressBarHeader_"] > [class^="container_"],
[class^="control_"] > [class^="container_"] {
  transition: background-color 0.75s linear;
}

[class*="barBase_"] {
  padding-bottom: 0 !important;
  border-radius: 8px;
  margin: 0 4px;
}

[class^="markdown_"] code {
  border-radius: 5%;
}
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
}

[id^="message-username-"]
  [class^="badge_"]:has(> [class^="badgeVerifiedIcon_"]) {
  display: none;
}

/* remove "dead space"/padding from vc users */
[class*="containerDefault_"] [class*="listDefault_"] {
  padding-left: 8px !important;
}
[class*="containerDefault_"]
  [class*="listDefault_"]
  [class^="avatarContainer_"] {
  margin-left: 6px !important;
}
[class*="containerDefault_"] [class*="listDefault_"] > [class^="clickable_"] {
  padding-left: 0 !important;
}
[class*="containerDefault_"]
  [class*="listDefault_"]
  > [class^="clickable_"]
  > [class^="content_"] {
  margin-left: 0 !important;
}
[class*="containerDefault_"] [class*="listDefault_"] > [class^="separator_"] {
  width: 100% !important;
  margin: 3px !important;
}

/* Change Nickname Modal */
[class^="focusLock_"][aria-modal="true"]
  > [class*="root_"]:not([class*="carouselModal_"]) {
  background-color: var(--background-primary);
}
[class^="focusLock_"][aria-modal="true"]
  > [class*="root_"]
  > form
  > [class^="flex_"]:nth-child(3),
[class^="focusLock_"][aria-modal="true"]
  > [class*="root_"]
  > [class^="flex_"]:nth-child(3) {
  background: var(--background-secondary);
}

/* Delete Modal */
[class^="focusLock_"][aria-modal="true"]
  > [class*="root_"]
  > [class^="content_"]
  > [class^="message_"] {
  background-color: var(--background-primary);
}

/* dropdown menus */
[class^="css_"][class$="-menu"] {
  z-index: 9999;
  background-color: var(--background-secondary);
  border-color: var(--background-primary);
}

/* listen along */
[id^="popout_"] [class^="userList_"] {
  border-color: var(--background-primary) !important;
}
[id^="popout_"] [class^="userList_"] [class^="header_"] {
  background-color: var(--background-secondary) !important;
  color: var(--header-primary) !important;
}
[id^="popout_"] [class^="userList_"] [class^="content_"] {
  background-color: var(--background-primary) !important;
}

[class*="moreUsers_"] {
  background-color: var(--background-tertiary) !important;
}

/* autocomplete */
[class^="autocomplete_"] {
  border: none !important;
  background-color: var(--background-floating) !important;
  box-shadow: 0 2px 5px 0 var(--background-secondary) !important;
}

[class^="autocomplete_"] [class*="selectorSelected_"],
[class^="autocomplete_"] [class*="autocompleteRow_"] [class*="selected_"] {
  background-color: var(--background-secondary) !important;
}

[class^="autocomplete_"] [class*="categoryHeader_"] {
  background-color: var(--background-floating) !important;
}

/* misc color fixes */
[class^="peopleColumn_"] {
  background: var(--background-primary);
}

[class^="itemCard_"] [class*="inset_"] {
  background-color: var(--background-primary) !important;
}

[class*="outer_"][class*="interactive_"]:hover {
  background-color: var(--background-modifier-hover) !important;
}

[class^="base_"] > [class^="content_"] > [class^="container_"] {
  background: var(--background-primary);
}

[class*="modal_"][class*="root_"] {
  background-color: var(--background-primary);
  box-shadow:
    var(--deprecated-card-bg) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.2) 0px 2px 10px 0px;
}

[class^="perksModal_"] {
  background-color: var(--background-primary) !important;
}
[class^="directoryModal_"] {
  background-color: var(--background-primary) !important;
}

[class^="layerContainer_"] > [class^="layer_"] > [class^="container_"] {
  background: var(--background-floating);
}
[class^="layerContainer_"]
  > [class^="layer_"]
  > [class^="container_"]
  [class^="option_"]:after {
  background: transparent;
}

[class^="layerContainer_"]
  > [class^="layer_"]
  > [class^="container_"]
  [class^="option_"][class*="selected_"] {
  background: var(--background-modifier-hover);
}

[class^="chat_"][class*="background_"],
[class^="title_"][class*="background_"],
[class^="chat_"] > [class^="content_"] > [class^="container_"] {
  background-color: var(--background-tertiary) !important;
}

[class*="headerBarInner_"]:after {
  background: transparent !important;
}

[class^="streamPreview_"] {
  background-color: var(--background-secondary) !important;
}
[class^="streamPreview_"] > [class^="previewContainer_"] {
  background-color: var(--background-primary) !important;
}

[class*="messageContent_"].deleted-message {
  color: var(--status-red-500) !important;
}

[class^="layerContainer_"]
  [class^="layer_"]
  [class^="focusLock_"]
  [class^="container_"]
  [class*="footer_"],
[class^="layerContainer_"]
  [class^="layer_"]
  [class^="focusLock_"]
  [class*="modalSize_"],
[class^="layerContainer_"]
  [class^="layer_"]
  [class^="focusLock_"]
  [class*="modalSize_"]
  [class*="footer_"],
[class^="layerContainer_"]
  [class^="layer_"]
  [class^="focusLock_"]
  [class*="modalRoot_"],
[class^="layerContainer_"]
  [class^="layer_"]
  [class^="focusLock_"]
  [class*="modalRoot_"]
  [class*="footer_"] {
  background-color: var(--background-primary) !important;
}

[class^="layerContainer_"]
  [class^="layer_"]
  [class^="focusLock_"]
  [class^="container_"]
  [class*="footer_"] {
  box-shadow: none;
}

[class^="focusLock_"][aria-modal="true"]
  > [class*="root_"]
  > [class^="scroller_"] {
  background: var(--background-secondary);
}

[class^="focusLock_"][aria-modal="true"]
  > [class*="root_"]
  [class^="reactors_"] {
  background-color: var(--background-primary);
}

[class^="focusLock_"][aria-modal="true"]
  > [class*="root_"]
  > [class^="scroller_"]
  > [class^="reactionSelected_"] {
  background-color: var(--background-modifier-active);
}

[class^="focusLock_"][aria-modal="true"]
  > [class*="root_"]
  > [class^="scroller_"]
  > [class^="reactionDefault_"]:hover {
  background-color: var(--background-modifier-hover);
}

[class^="contentWarningPopout_"] {
  background: var(--background-primary) !important;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3) !important;
}

[class^="customColorPicker_"] {
  background: var(--background-primary) !important;
}

/* jane's steam border ext */
/*.steam-border-message > #border {
    width: 20px !important;
    height: 20px !important;
    left: 0 !important;
  }

  .steam-border-popout > #border {
    left: 0 !important;
    top: 0 !important;
  }

  .steam-border-modal > #border {
    left: 1em !important;
    top: -4.25em !important;
  }

  .steam-border-modal {
    position: absolute;
  }

  .steam-border-user > .avatarWrapper {
    top: -7.3em !important;
    left: -6.1em !important;
  }*/

/* font fixes */
[class^="markdown_"] [class^="codeInline_"],
[class^="codeLine_"],
[class^="codeBlockText_"],
[class^="durationTimeDisplay_"],
[class^="durationTimeSeparator_"],
[class*="after_inlineCode_"],
[class*="before_inlineCode_"],
[class^="inlineCode_"],
code.inline,
code,
.hljs {
  font-family: var(--font-code) !important;
}

.hljs.ansi {
  line-height: normal !important;
}
.hljs.ansi .bcb-lines {
  grid-template-columns: auto;
}
.hljs.ansi .bcb-number {
  display: none;
  min-height: unset;
}

/* unbreak resizing webms :^) */
/*[class^="mediaAttachmentsContainer_"] [class^="imageWrapper_"] {
    min-width: 10px;
    min-height: 10px;
    max-width: unset;
    max-height: unset !important;
    width: unset !important;
    height: unset !important;
    object-fit: none !important;
    aspect-ratio: unset !important;
  }
  [class^="mediaAttachmentsContainer_"] [class^="messageAttachment_"] {
    height: unset;
  }
  [class^="mediaAttachmentsContainer_"] [class^="oneByOneGrid_"],
  [class^="mediaAttachmentsContainer_"] [class^="oneByTwoGrid_"] {
    max-height: unset !important;
  }*/