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..129f23c 100644 --- a/src/fixes.less +++ b/src/fixes.less @@ -35,6 +35,7 @@ div[class^="messagesWrapper-"] div { } #emoji-picker-tab-panel { + position: sticky; &:not([role="dialog"]) { // if add reaction (role=dialog), it breaks position: absolute; @@ -42,12 +43,21 @@ div[class^="messagesWrapper-"] div { left: 0; right: 0; } - div[class^="wrapper-"] { + & > div[class^="wrapper-"] { + background-color: var(--background-tertiary); top: 0; border-radius: 5px 0 0 5px; // for add reaction } } +#emoji-picker-grid { + div[class^="wrapper-"] { + border-radius: 16px; + top: 4px; + &:extend(.acrylic all); + } +} + div[class*="fullscreenOnMobile"] div[class^="flex"] * { // fix overflow overflow: hidden; @@ -75,8 +85,30 @@ div[class^="toolsContainer-"] { // in settings } } +div[class^="newMessagesBar-"] { + margin-top: 8px; +} + div[class^="contentContainer-"] div[class*="stickyHeader-"] { padding-left: 0; padding-right: 0; margin: 0; } + +// fix border radius +div[class^="messageAttachment-"] div[class^="embedWrapper-"] { + div[class^="textContainer-"] { + .bottom-border(); + + & ~ div[class*="footer-"] { + .top-border(); + } + } +} + +div[class^="auditLog"] { + div[class^="headerExpanded-"] + { .bottom-border(); } + div[class^="changeDetails-"] + { .top-border(); } +} 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/materials.less b/src/materials.less index 9735eaa..17332be 100644 --- a/src/materials.less +++ b/src/materials.less @@ -1,5 +1,19 @@ // Mica-like material from Windows 11 +.mica-header(@name: "Discord") { + display: flex; + flex-direction: column; + &::before { + content: @name; + color: var(--header-primary); + padding: ((48px - 20px) / 2) 16px; // 20px is line-height + font-size: 15px; + line-height: 20px; + font-weight: 500; + font-family: var(--font-display); + } +} + [class^="sidebar-"] { &, & > nav { background-color: transparent; @@ -14,16 +28,14 @@ background-color: var(--background-secondary); } - nav[class^="private"] { - &::before { - content: "Discord"; - color: var(--header-primary); - margin: ((48px - 20px) / 2) 16px; // 20px is line-height - font-size: 15px; - line-height: 20px; - font-weight: 500; - font-family: var(--font-display); - } + nav[class^="private"] + { .mica-header(); } + + & > div[class*="scrollerBase-"] { + .mica-header("Discover"); + + & > h2[class^="discoverHeader-"] + { &:extend(.hide); } } section { // bottom panel @@ -46,6 +58,7 @@ div[class^="chat-"] background-color: var(--background-tertiary) !important; } +// Xbox-like glowing @keyframes glow { from { box-shadow: 0 0 2px 4px var(--interactive-normal); } to { box-shadow: 0 0 1px 2px var(--interactive-muted); } @@ -74,6 +87,7 @@ div[class^="chat-"] position: absolute; top: 0; bottom: 0; left: 0; right: 0; + width: 100%; height: 100%; content: ""; z-index: -1; } diff --git a/src/people.less b/src/people.less index fa78fd3..f759d38 100644 --- a/src/people.less +++ b/src/people.less @@ -2,21 +2,40 @@ [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; + aside { + width: 100%; + height: 100%; + } + + div[class^="members-"] { + width: inherit; } 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..8041605 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-"], @@ -94,13 +96,6 @@ rect[class^="pointerEvents-"], div[class^="chat-"] > div[class^="content-"], { &:extend(.rounder); } -div[class^="auditLog"] { - div[class^="headerExpanded-"] - { .bottom-border(); } - div[class^="changeDetails-"] - { .top-border(); } -} - div[class^="messagesWrapper-"] div[class^="message-"][class*="mentioned"] { .left-border(4px); } @@ -111,8 +106,9 @@ div[class^="content-"]::before, div[class^="tabBody-"]::before { box-shadow: unset !important; } -// Pins -div[class^="messageGroupWrapper-"] { +div[class^="contentWrapper-"], +div[class^="messageGroupWrapper-"], // Pins +{ border: none; background: unset; } @@ -173,6 +169,7 @@ div[class^="channelTextArea-"] { } } +div[class^="contentWrapper-"] > div, [role="menu"], [role="dialog"]:not([class^="focusLock-"]), div[class^="focusLock-"] > div, @@ -192,7 +189,9 @@ div[class*="stickyHeader-"], #status-picker-idle, #status-picker-dnd, #status-picker-invisible { - margin: 8px; + padding: 8px; + margin: 2px; + & > div { padding: 0; @@ -235,3 +234,57 @@ div[id^="message-accessories-"] { } } } + +// new attachment area +ul[class^="channelAttachmentArea-"] { + position: absolute; + bottom: 100%; + margin-bottom: 16px; + 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; +}