Compare commits

..

6 commits

Author SHA1 Message Date
Er2
d10626b18a update 2022-04-30 13:14:38 +03:00
Er2
6adb742e3f fix emoji panel 2022-04-30 13:00:02 +03:00
Er2
3b27ad10c9 update 2022-04-30 11:41:48 +03:00
Er2
5c5d88a681 bd improvements 2022-04-29 21:20:56 +03:00
Er2
e6bc17787e revert nicks in some places 2022-04-29 20:49:47 +03:00
Er2
5c08d7363d bugfixes 2022-04-29 19:30:58 +03:00
11 changed files with 211 additions and 53 deletions

View file

@ -3,6 +3,7 @@
* Zlib License * Zlib License
*/ */
@macos-like: false; // for BD's window buttons
@no-nitro: true; @no-nitro: true;
@no-banner: false; @no-banner: false;
@ -12,6 +13,7 @@
@div-width: (@rounder / 2); @div-width: (@rounder / 2);
@tab-height: 40px; @tab-height: 40px;
@mem-width: 48px; // members side panel width (48px is recommend)
// Required // Required
@import "src/func"; @import "src/func";

View file

@ -3,6 +3,49 @@
div[class^="bd-"] div[class^="bd-"]
{ &:extend(.round); } { &: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-search-wrapper,
div.bd-changelog-button { div.bd-changelog-button {
align-self: center; align-self: center;
@ -35,3 +78,7 @@ div[class^="standardSidebarView-"] {
div.bd-addon-list:not(.bd-grid-view) { div.bd-addon-list:not(.bd-grid-view) {
.horiz-tab(); .horiz-tab();
} }
div.ChannelDms-channelpopout-headerName {
font-size: 12pt !important;
}

View file

@ -35,6 +35,7 @@ div[class^="messagesWrapper-"] div {
} }
#emoji-picker-tab-panel { #emoji-picker-tab-panel {
position: sticky;
&:not([role="dialog"]) { &:not([role="dialog"]) {
// if add reaction (role=dialog), it breaks // if add reaction (role=dialog), it breaks
position: absolute; position: absolute;
@ -42,12 +43,21 @@ div[class^="messagesWrapper-"] div {
left: 0; right: 0; left: 0; right: 0;
} }
div[class^="wrapper-"] { & > div[class^="wrapper-"] {
background-color: var(--background-tertiary);
top: 0; top: 0;
border-radius: 5px 0 0 5px; // for add reaction 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"] * { div[class*="fullscreenOnMobile"] div[class^="flex"] * {
// fix overflow // fix overflow
overflow: hidden; overflow: hidden;
@ -75,8 +85,30 @@ div[class^="toolsContainer-"] { // in settings
} }
} }
div[class^="newMessagesBar-"] {
margin-top: 8px;
}
div[class^="contentContainer-"] div[class*="stickyHeader-"] { div[class^="contentContainer-"] div[class*="stickyHeader-"] {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
margin: 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(); }
}

View file

@ -29,3 +29,18 @@
height: 0 !important; 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;
}
}

View file

@ -18,16 +18,7 @@ div[class^="art-"],
{ &:extend(.hide); } { &:extend(.hide); }
// Nicks // Nicks
[class^="username-"] {
li[class^="messageListItem-"]
[class*="cozyMessage-"] &, // inside message
:not([class^="headerText-"])
> div[class*="nameTag-"] &, // outside message
{ &:extend(.hide); }
}
[class^="discrimBase-"], [class^="discrimBase-"],
div[class^="discordTag-"] [class^="username-"], // friends tab
div[class^="nameTag-"], div[class^="nameTag-"],
[class^="usernameInnerRow-"], // at settings [class^="usernameInnerRow-"], // at settings
{ &:extend(.hide); } { &:extend(.hide); }
@ -67,8 +58,8 @@ div[class^="channelTextArea-"] {
& > button // gift button, f you & > button // gift button, f you
{ &:extend(.hide); } { &:extend(.hide); }
& > div.expression-picker-chat-input-button { & > div.expression-picker-chat-input-button > button {
&:not(:nth-child(4)) // except emoji (and send button, if exists) &:not([class^="emojiButton"]) // hide except emoji (and send button, if exists)
{ &:extend(.hide); } { &:extend(.hide); }
} }
} }

View file

@ -46,6 +46,7 @@ div[class^="chat-"]
background-color: var(--background-tertiary) !important; background-color: var(--background-tertiary) !important;
} }
// Xbox-like glowing
@keyframes glow { @keyframes glow {
from { box-shadow: 0 0 2px 4px var(--interactive-normal); } from { box-shadow: 0 0 2px 4px var(--interactive-normal); }
to { box-shadow: 0 0 1px 2px var(--interactive-muted); } to { box-shadow: 0 0 1px 2px var(--interactive-muted); }
@ -74,6 +75,7 @@ div[class^="chat-"]
position: absolute; position: absolute;
top: 0; bottom: 0; top: 0; bottom: 0;
left: 0; right: 0; left: 0; right: 0;
width: 100%; height: 100%;
content: ""; content: "";
z-index: -1; z-index: -1;
} }

View file

@ -2,21 +2,35 @@
[class^="membersGroup-"] // groups (roles) [class^="membersGroup-"] // groups (roles)
{ &:extend(.hide); } { &:extend(.hide); }
[class^="membersWrap-"] { div[class^="content-"] > main ~ div {
// make it shorter &:not(.ChannelDms-channelmembers-wrap) {
&, div[class^="members-"] { // make it shorter
min-width: 48px; min-width: @mem-width;
width: 0; width: @mem-width;
} }
// remove fixed height aside {
div[class^="content-"] { height: 100%;
height: unset !important;
flex-grow: 0;
} }
div[class^="member-"] { div[class^="member-"] {
padding: 0; 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);
}

View file

@ -48,6 +48,10 @@ div[class^="accountProfileCard-"] div[class^="userInfo-"] {
align-items: center; align-items: center;
} }
svg[class^="warningCircleIcon-"] {
position: fixed;
}
div[class^="profileBadges-"] { div[class^="profileBadges-"] {
position: static; position: static;
justify-content: center; justify-content: center;
@ -68,6 +72,9 @@ div[class^="pencilContainer-"] {
// Profile card in settings // Profile card in settings
div[class^="accountProfileCard-"] { div[class^="accountProfileCard-"] {
span[class^="username-"]
{ &:extend(.hide); }
div[class^="field-"]:nth-child(1) { div[class^="field-"]:nth-child(1) {
height: 0; height: 0;
div[class^="constrainedRow-"] { 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 div.root-8LYsGj { // I not love fixed classes, but this selects only modal page
flex-direction: row; flex-direction: row;
span[class^="username-"]
{ &:extend(.hide); }
header { header {
width: 260px; width: 260px;
margin: 24px; margin: 24px;
@ -134,10 +144,13 @@ div.root-8LYsGj { // I not love fixed classes, but this selects only modal page
} }
div[class^="body-"] { div[class^="body-"] {
border: none; border: none;
margin-left: 16px; margin: 0 16px;
width: 100%;
height: 370px; height: 370px;
& > * & > * {
{ padding: 0 !important; } padding: 0;
margin: 0;
}
} }
div[class^="tabBarContainer"] div[class^="tabBarContainer"]
{ border: none; } { border: none; }

View file

@ -22,11 +22,12 @@ div[class^="standardSidebarView-"] {
scrollbar-width: thin; scrollbar-width: thin;
overflow: auto hidden !important; overflow: auto hidden !important;
justify-content: left; justify-content: left;
width: max-content;
max-width: 100%; max-width: 100%;
& > nav { & > nav {
padding: 0; padding: 0;
width: unset; // to increase size width: max-content; // to increase size
background: var(--background-secondary); // bugfix background: var(--background-secondary); // bugfix
& > div { & > div {
padding-left: @rounder; padding-left: @rounder;
@ -61,22 +62,6 @@ div[aria-controls="analytics-tab"],
div[aria-controls="partner-tab"], div[aria-controls="partner-tab"],
{ &:extend(.hide); } { &: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 { #my-account-tab > div {
.horiz-tab(); .horiz-tab();
& > div:first-child { & > div:first-child {

View file

@ -67,9 +67,11 @@ rect[class^="pointerEvents-"],
div[class*="Popout"], div[class*="Popout"],
div[class*="fullscreenOnMobile"], div[class*="fullscreenOnMobile"],
div[class*="root"] div[class^="flex-"], div[class*="root"] div[class^="flex-"],
div[class*="root"] div[class^="footer-"],
// UI parts // UI parts
div[class^="chat-"], div[class^="chat-"],
div[class^="attachedBars-"], // like reply to *user*
div[class^="noticeRegion"] > div, // you have unsaved changes bottom bar div[class^="noticeRegion"] > div, // you have unsaved changes bottom bar
[class^="resultsGroup-"], // search [class^="resultsGroup-"], // search
div[class^="auditLog-"], div[class^="auditLog-"],
@ -94,13 +96,6 @@ rect[class^="pointerEvents-"],
div[class^="chat-"] > div[class^="content-"], div[class^="chat-"] > div[class^="content-"],
{ &:extend(.rounder); } { &:extend(.rounder); }
div[class^="auditLog"] {
div[class^="headerExpanded-"]
{ .bottom-border(); }
div[class^="changeDetails-"]
{ .top-border(); }
}
div[class^="messagesWrapper-"] div[class^="messagesWrapper-"]
div[class^="message-"][class*="mentioned"] div[class^="message-"][class*="mentioned"]
{ .left-border(4px); } { .left-border(4px); }
@ -111,8 +106,9 @@ div[class^="content-"]::before,
div[class^="tabBody-"]::before div[class^="tabBody-"]::before
{ box-shadow: unset !important; } { box-shadow: unset !important; }
// Pins div[class^="contentWrapper-"],
div[class^="messageGroupWrapper-"] { div[class^="messageGroupWrapper-"], // Pins
{
border: none; border: none;
background: unset; background: unset;
} }
@ -173,6 +169,7 @@ div[class^="channelTextArea-"] {
} }
} }
div[class^="contentWrapper-"] > div,
[role="menu"], [role="menu"],
[role="dialog"]:not([class^="focusLock-"]), [role="dialog"]:not([class^="focusLock-"]),
div[class^="focusLock-"] > div, div[class^="focusLock-"] > div,
@ -235,3 +232,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;
}
}

View file

@ -63,8 +63,9 @@ div[class^="radioBar-"] {
div[class^="card-"], div[class^="card-"],
div.bd-server-card { div.bd-server-card {
& > div[class*="header"], .bd-server-header,
& > div[class*="Header"] { & > div[class^="header-"],
& > div[class^="cardHeader"] {
position: absolute; position: absolute;
top: 0; left: 0; top: 0; left: 0;
width: 100%; height: 100%; width: 100%; height: 100%;
@ -96,6 +97,7 @@ button[class*="button"],
{ &:extend(.round); } { &:extend(.round); }
// Rounder // Rounder
div[class*="navRow-"], // in account login switcher
div[class^="markup-"] pre code, // ```code``` div[class^="markup-"] pre code, // ```code```
span[class^="spoiler"], span[class^="spoiler"],
span.mention, span.mention,
@ -106,3 +108,7 @@ div[class*="card"],
div[class^="categoryItem-"] > *, // in Discovery div[class^="categoryItem-"] > *, // in Discovery
div[class^="content-"] img[class^="image-"], div[class^="content-"] img[class^="image-"],
{ &:extend(.rounder); } { &:extend(.rounder); }
div[class*="navRow-"] {
background-color: unset !important;
}