diskort/btfl.css

/** DisKort
 * (c) Er2 2022 <er2@dismail.de>
 * Zlib License
 */

/* to hide */
[class^="username-"],
[class^="discrimBase-"],
[class*="banner-"],
[class*="perks"],
[class*="socialLink-"],
[class^="usernameInnerRow-"],
[class^="membersGroup-"],
[class^="searchBar-"],
[class^="nowPlaying"],
[class^="marketing"],
[class^="clickableSticker-"],
[class^="unreadPill-"],
[class^="applicationInstall"],
[class*="nitro"],
[class*="artwork-"],
div[class^="art-"],
div[class^="threadSuggestionBar-"],
div[class^="nameTag-"],
div[class*="hero"],
/*div[class^="button"] button[class^="button-"],*/
button[class^="shinyButton"], [class*="giftButton"],
button[class*="followButton-"],
/*button[class*="emojiItemDisabled-"],*/
div[class*="premium"],
div[id*="premium"],
div[role="separator"]:not([id$="new-messages-bar"]),
div[class*="goal"],
div[class^="welcomeCTA-"],
h2[class^="privateChannelsHeaderContainer"],
nav[class^="nav-"],
span[class^="questionMark-"],

/* Settings */
div[aria-controls*="nitro"],
div[aria-controls="library-inventory-tab"],
div[aria-controls="subscriptions-tab"],
div[aria-controls="billing-tab"],
div[aria-controls^="hypesquad"],
div[class^="socialLinks-"],

/* buttons on chat area */
div[class^="channelTextArea-"] div div > div button:not([class^="emojiButton"]):not([class^="attachButton-"]),
[class^="stickerIcon-"],

div[class^="toolbar-3_"] > :not([aria-label="Close"]),

#emoji-picker-tab-panel
div[class^="emojiPicker-"]
> div[class^="header-"],

section div[class^="children-"] div[class^="spacer-"],

nav[class^="privateChannels-"] div div
*[data-list-item-id$="nitro"],

#gif-picker-tab, #sticker-picker-tab,
#private-channels-0, #private-channels-1, #private-channels-2,

/* main page */
#app-mount div:not([class]) div[class=""] div:not([class]),
#app-mount div:not([class]) div[class=""] div div[class*="background-"],
#app-mount div:not([class]) div[class=""] div[class^="grid-"] div[class^="animation-"]
{
  all: unset !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
div[aria-label="Servers"] ~ div
{
  /* FIXME: Localized string and bottom is broken */
  position: absolute;
  bottom: 0;
  display: none;
}

/* to show */
div[class^="scroller-"] div[class^="tutorialContainer-"]
{
  /* FIXME: goto FIXME above */
  display: unset;
  margin: 0;
}

:not([class^="listItemContents-"]) > div[class^="userInfo-"] {
  padding-top: 48px;
  justify-content: left;
}
div[class^="userInfo-"] button {
  margin-left: 32px;
  margin-top: -8px;
}
div[class^="userInfo-"] div[class^="avatar-"] {
  top: 32px;
}

div[class^="headerTop-"] div[class^="headerText"]
{ margin-left: 84px; }
div[class^="profileBanner"] div[class*="avatar"]:not([class^="imageUploaderInner"]) {
  margin-left: -8px;
  margin-top: -8px;
}

div[class^="peopleListItem-"]
div
div[class^="userInfo-"] div[class^="avatar-"] {
  top: 0;
}

div[class^="messagesWrapper-"] div {
  scrollbar-width: thin;
}

#emoji-picker-tab-panel:not([role="dialog"]) {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
}

#emoji-picker-tab-panel
div[class^="wrapper-"] {
  top: 0;
  border-radius: 5px 0 0 5px;
}

div[class^="avatarWrapper-"] {
  margin-right: auto;
}

div[class^="radioBar-"] {
  border: none;
}

/* rounder */
[class^="authBox"],
div[class^="item-"],
div[class^="select-"],
div[class^="popout"],
div[class^="userPopout-"],
div[class^="accountProfile"],
div[class^="profileBanner"],
div[class^="connectedAccount"],
div[class*="fullscreenOnMobile"],
div[class*="root"] div[class^="flex-"],
[class*="embed"],
div[class^="menu"],
div[class^="messagesWrapper-"] div,
div[class^="markup-"] pre code,
div[class^="sidebar-"],
div[class^="container-"],
div[class^="chat-"]
{
  border-radius: 16px !important;
}

div[class^="sidebar-"]
{
  margin-right: 8px;
}

/* sharper */
li[class^="channel-"],
#channels ul li div > div[class^="content-"],
button[class*="button"],
[role="dialog"],
div[class^="colorPicker"] div div[class^="saturation"] div,
[class*="Text"], [class*="text"],
div[class*="input"],
input[class^="inputDefault-"],
[class^="avatar-"],
div[class^="role-"],
div[class^="menu-"] div
{
  border-radius: 8px !important;
}

[class*="embed-"],
div[class^="messagesWrapper-"]
div[class*="mentioned"]
{
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}

/* no banners */
  /* user popup */
  div[class^="userPopout-"] div[class^="headerTop-"] { padding-top: 72px; }
  div[class^="userPopout-"] div[class^="avatarWrapper"] { left: 8px; top: 16px; }

  /* profile */
  header div[class^="nameTagWithCustomStatus-"],
  header div[class^="nameTagNoCustomStatus-"] {
    margin-bottom: 48px;
    margin-left:  160px;
  }

/* member list */
aside[class^="membersWrap-"]
{
  min-width: 48px;
  width: 0;
}

div[class^="children-"] div[class^="nicknames-"],
div[class^="children-"] div[class^="topic-"]
{
  width: unset !important;
  flex-grow: 0;
}

aside[class^="membersWrap-"] div[class^="content-"],
nav[class^="privateChannels-"] div ul[class^="content-"]:only-child,
ul[class^="emojiListRow-"]
{
  height: unset !important;
  flex-grow: 0;
}

div[class^="members-"],
div[class^="member-"],
div[class*="root"] div[class^="flex-"] div[class^="header"]
{
  padding: 0;
  flex: 0 0 100%;
  margin-left: 0;
}

section, header,
div[class^="content-"]::before,
div[class^="tabBody-"]::before
{
  box-shadow: unset !important;
}

section div[class^="children-"]
{
  justify-content: center;
}

/* mobile mode */
@media screen and (max-device-width: 600px) {
  /* FIXME: add close buttons to emoji panel, profile */

  [class^="channel-"] { max-width: unset; margin: 0 8px; }
  [class^="layer-"] { padding: 0; margin: auto; }
  [class^="layer-"] > [class^="container-"],
  [class^="standardSidebarView-"] { overflow-x: scroll; }
  [class^="base-"], [class^="contentRegion-"] { min-width: 200%; }
  [class^="content-"] [class^="sidebar"] { width: calc(50% - 8px - 72px); }
  [class^="chat-"] { width: 100%; }
  [class^="tools"] { position: unset !important; }

  [class*="positionLayer-"],
  [class*="fullscreenOnMobile"] {
    overflow: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
  [class*="fullscreenOnMobile"] [class^="body"] {
    width: 100%; height: 100%;
  }

  [class^="side-"] > [class^="item-"] {
    margin-top: 4px !important;
    padding: 6px 10px !important;
  }

  [class^="side-"] > [class^="item-"],
  :not([class*="pill"]):not([class*="Pill"]) > [class*="item-"],
  :not([class*="pill"]):not([class*="Pill"]) > [role="tab"],
  [class^="member-"],
  #channels li,
  div[class^="tabBarItem-"] {
    margin-top: 16px;
    padding: 0 8px;
    font-size: 11pt;
  }
}

div[class^="tabBarItem-"] {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-right: 16px;
  padding: 0 8px;
  margin-top: 16px;
}

[role="tab"][class*="selected-"],
[role="tab"]:hover
{
  background-color: var(--background-modifier-hover);
}

div[class^="jumpToPresentBar-"] {
  bottom: 16px;
  padding: 0;
}