diff --git a/btfl.less b/btfl.less index 373ba46..a52224e 100644 --- a/btfl.less +++ b/btfl.less @@ -3,6 +3,7 @@ * Zlib License */ +@macos-like: false; // for BD's window buttons @no-nitro: true; @no-banner: false; @@ -12,6 +13,7 @@ @div-width: (@rounder / 2); @tab-height: 40px; +@mem-width: 48px; // members side panel width (48px is recommend) // Required @import "src/func"; diff --git a/src/bd.less b/src/bd.less index a4fe3b4..2f95e75 100644 --- a/src/bd.less +++ b/src/bd.less @@ -3,6 +3,49 @@ div[class^="bd-"] { &:extend(.round); } +button.bd-addon-button { + margin: 4px; +} + +div.floating-window { + &:extend(.round); + box-shadow: none; + padding: 0 !important; + max-width: 100% !important; + max-height: 100% !important; + min-width: 256px !important; + min-height: 32px !important; +} + +div.floating-window-buttons { + & when (@macos-like = true) + { order: -1; } + + .button { + & > svg { + padding: 2px; + border-radius: 50%; + } + &:hover { + background-color: unset; + color: var(--background-tertiary); // icons color + } + } + + .maximize-button:hover > svg { + background-color: #3ba55d; + } + + .close-button { + & when (@macos-like = true) + { order: -1; } + + &:hover > svg { + background-color: #ed4245; + } + } +} + div.bd-search-wrapper, div.bd-changelog-button { align-self: center; @@ -35,3 +78,7 @@ div[class^="standardSidebarView-"] { div.bd-addon-list:not(.bd-grid-view) { .horiz-tab(); } + +div.ChannelDms-channelpopout-headerName { + font-size: 12pt !important; +} diff --git a/src/fixes.less b/src/fixes.less index ec9a949..f186fa8 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -75,6 +75,10 @@ div[class^="toolsContainer-"] { // in settings } } +div[class^="newMessagesBar-"] { + margin-top: 8px; +} + div[class^="contentContainer-"] div[class*="stickyHeader-"] { padding-left: 0; padding-right: 0; diff --git a/src/func.less b/src/func.less index d3cef81..54a790c 100644 --- a/src/func.less +++ b/src/func.less @@ -29,3 +29,18 @@ height: 0 !important; } +.horiz-tab(@cols: 2, @offset: 0) { + @gap: @div-width * 2; + @el-width: calc(unit((100% / @cols), %) - unit((@gap + @offset), px)); + display: flex; + flex-flow: row wrap; + column-gap: @gap; + row-gap: (@gap / 2); + & > * { + width: @el-width; + } + + div[class^="divider"]:empty { + display: none; + } +} diff --git a/src/hide.less b/src/hide.less index b8bc2b5..5d6d26d 100644 --- a/src/hide.less +++ b/src/hide.less @@ -18,16 +18,7 @@ div[class^="art-"], { &:extend(.hide); } // Nicks -[class^="username-"] { - li[class^="messageListItem-"] - [class*="cozyMessage-"] &, // inside message - :not([class^="headerText-"]) - > div[class*="nameTag-"] &, // outside message - { &:extend(.hide); } -} - [class^="discrimBase-"], -div[class^="discordTag-"] [class^="username-"], // friends tab div[class^="nameTag-"], [class^="usernameInnerRow-"], // at settings { &:extend(.hide); } @@ -67,8 +58,8 @@ div[class^="channelTextArea-"] { & > button // gift button, f you { &:extend(.hide); } - & > div.expression-picker-chat-input-button { - &:not(:nth-child(4)) // except emoji (and send button, if exists) + & > div.expression-picker-chat-input-button > button { + &:not([class^="emojiButton"]) // hide except emoji (and send button, if exists) { &:extend(.hide); } } } diff --git a/src/people.less b/src/people.less index fa78fd3..c974083 100644 --- a/src/people.less +++ b/src/people.less @@ -2,21 +2,35 @@ [class^="membersGroup-"] // groups (roles) { &:extend(.hide); } -[class^="membersWrap-"] { - // make it shorter - &, div[class^="members-"] { - min-width: 48px; - width: 0; +div[class^="content-"] > main ~ div { + &:not(.ChannelDms-channelmembers-wrap) { + // make it shorter + min-width: @mem-width; + width: @mem-width; } - // remove fixed height - div[class^="content-"] { - height: unset !important; - flex-grow: 0; + div[class^="members-"] { + height: 100%; } div[class^="member-"] { padding: 0; - margin-left: 0; + margin: 0; } } + +span[class^="username-"] { + font-weight: 500; +} + +// friends tab +div[class^="peopleList-"] > div { + @margin: 4px; + + & > *, & > *:hover { + border: none; + padding: 8px !important; + margin: @margin !important; + } + .horiz-tab(2, @margin * 2); +} diff --git a/src/profile.less b/src/profile.less index d44c36c..4d176ad 100644 --- a/src/profile.less +++ b/src/profile.less @@ -48,6 +48,10 @@ div[class^="accountProfileCard-"] div[class^="userInfo-"] { align-items: center; } + svg[class^="warningCircleIcon-"] { + position: fixed; + } + div[class^="profileBadges-"] { position: static; justify-content: center; @@ -68,6 +72,9 @@ div[class^="pencilContainer-"] { // Profile card in settings div[class^="accountProfileCard-"] { + span[class^="username-"] + { &:extend(.hide); } + div[class^="field-"]:nth-child(1) { height: 0; div[class^="constrainedRow-"] { @@ -106,6 +113,9 @@ header div[class^="nameTagNoCustomStatus-"] { div.root-8LYsGj { // I not love fixed classes, but this selects only modal page flex-direction: row; + span[class^="username-"] + { &:extend(.hide); } + header { width: 260px; margin: 24px; @@ -134,10 +144,13 @@ div.root-8LYsGj { // I not love fixed classes, but this selects only modal page } div[class^="body-"] { border: none; - margin-left: 16px; + margin: 0 16px; + width: 100%; height: 370px; - & > * - { padding: 0 !important; } + & > * { + padding: 0; + margin: 0; + } } div[class^="tabBarContainer"] { border: none; } diff --git a/src/settings.less b/src/settings.less index 3ec4f6b..c991faa 100644 --- a/src/settings.less +++ b/src/settings.less @@ -22,11 +22,12 @@ div[class^="standardSidebarView-"] { scrollbar-width: thin; overflow: auto hidden !important; justify-content: left; + width: max-content; max-width: 100%; & > nav { padding: 0; - width: unset; // to increase size + width: max-content; // to increase size background: var(--background-secondary); // bugfix & > div { padding-left: @rounder; @@ -61,22 +62,6 @@ div[aria-controls="analytics-tab"], div[aria-controls="partner-tab"], { &:extend(.hide); } -.horiz-tab(@cols: 2) { - @gap: @div-width * 2; - @el-width: calc(100% / @cols - @gap); - display: flex; - flex-flow: row wrap; - column-gap: @gap; - row-gap: (@gap / 2); - & > * { - width: @el-width; - } - - div[class^="divider"]:empty { - display: none; - } -} - #my-account-tab > div { .horiz-tab(); & > div:first-child { diff --git a/src/style.less b/src/style.less index 731fa54..98d74da 100644 --- a/src/style.less +++ b/src/style.less @@ -67,9 +67,11 @@ rect[class^="pointerEvents-"], div[class*="Popout"], div[class*="fullscreenOnMobile"], div[class*="root"] div[class^="flex-"], + div[class*="root"] div[class^="footer-"], // UI parts div[class^="chat-"], + div[class^="attachedBars-"], // like reply to *user* div[class^="noticeRegion"] > div, // you have unsaved changes bottom bar [class^="resultsGroup-"], // search div[class^="auditLog-"], @@ -235,3 +237,56 @@ div[id^="message-accessories-"] { } } } + +// new attachment area +ul[class^="channelAttachmentArea-"] { + position: absolute; + bottom: 100%; + height: 216px; + flex-flow: row wrap; + overflow: hidden auto; + + & > li + { &:extend(.rounder); } + + div[class^="actionBarContainer-"] { + position: static; + margin-top: 8px; + + & > div { + position: static; + display: inline; + + & > div { + margin: 0 auto; + width: max-content; + + &, & > * + { &:extend(.rounder); } + } + } + } +} + +div[class^="uploadModal-"] { + div[class^="file-"] { + display: flex; + flex-direction: column; + align-items: center; + + & > img { + position: relative; + &:extend(.rounder); + } + } +} + +// jump to present +div[class^="jumpToPresentBar-"] { + width: max-content; + margin-left: auto; + + & > button:first-child { + display: none; + } +} diff --git a/src/ui.less b/src/ui.less index d811525..0a5be4a 100644 --- a/src/ui.less +++ b/src/ui.less @@ -63,8 +63,9 @@ div[class^="radioBar-"] { div[class^="card-"], div.bd-server-card { - & > div[class*="header"], - & > div[class*="Header"] { + .bd-server-header, + & > div[class^="header-"], + & > div[class^="cardHeader"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; @@ -96,6 +97,7 @@ button[class*="button"], { &:extend(.round); } // Rounder +div[class*="navRow-"], // in account login switcher div[class^="markup-"] pre code, // ```code``` span[class^="spoiler"], span.mention, @@ -106,3 +108,7 @@ div[class*="card"], div[class^="categoryItem-"] > *, // in Discovery div[class^="content-"] img[class^="image-"], { &:extend(.rounder); } + +div[class*="navRow-"] { + background-color: unset !important; +}