diff --git a/btfl.css b/btfl.css index 3f8add5..c3d83fb 100644 --- a/btfl.css +++ b/btfl.css @@ -7,19 +7,42 @@ [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"], +div[class^="art-"], +div[class^="threadSuggestionBar-"], +div[class^="newMessagesBar-"], 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"], +div[class*="goal"], +div[class^="pill"], h2[class^="privateChannelsHeaderContainer"], nav[class^="nav-"], +/* 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"]), [class^="stickerIcon-"], @@ -30,11 +53,16 @@ div[class^="toolbar-3_"], 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 +#private-channels-0, #private-channels-1, #private-channels-2, + +/* main page */ +#app-mount div:not([class]) div[class=""] div:not([class]) { all: unset; display: none; @@ -52,13 +80,28 @@ div[aria-label="Servers"] ~ div /* to show */ div[class^="scroller-"] div[class^="tutorialContainer-"] { - /* FIXME: Look above */ + /* 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: 25px; + 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-"] @@ -67,7 +110,11 @@ div[class^="userInfo-"] div[class^="avatar-"] { top: 0; } -#emoji-picker-tab-panel { +div[class^="messagesWrapper-"] div { + scrollbar-width: thin; +} + +#emoji-picker-tab-panel:not([role="dialog"]) { position: absolute; top: 0; bottom: 0; left: 0; right: 0; @@ -76,9 +123,30 @@ div[class^="userInfo-"] div[class^="avatar-"] { #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 */ +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-"], @@ -93,15 +161,30 @@ div[class^="sidebar-"] } /* sharper */ -[class^="avatar-"] +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^="menu-"] div { - border-radius: 5px; + border-radius: 8px !important; +} + +[class*="embed-"], +div[class^="messagesWrapper-"] +div[class*="mentioned"] +{ + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; } /* no banners */ /* user popup */ - div[class^="userPopout-"] div[class^="headerTop-"] { padding-top: 120px; } - div[class^="userPopout-"] div[class^="avatarWrapper"] { top: 16px; } + div[class^="userPopout-"] div[class^="headerTop-"] { padding-top: 72px; } + div[class^="userPopout-"] div[class^="avatarWrapper"] { left: 8px; top: 16px; } /* profile */ header div[class^="nameTagWithCustomStatus-"], @@ -117,15 +200,24 @@ aside[class^="membersWrap-"] 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[class^="content-"]:only-child +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^="member-"], +div[class*="root"] div[class^="flex-"] div[class^="header"] { padding: 0; flex: 0 0 100%; @@ -143,3 +235,58 @@ section div[class^="children-"] { justify-content: center; } + +/* mobile mode */ +/* +[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% - 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*="item-"], +[class^="member-"], +#channels li, +[role="tab"], +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; +}