Compare commits
6 commits
90b5e13544
...
d10626b18a
Author | SHA1 | Date | |
---|---|---|---|
d10626b18a | |||
6adb742e3f | |||
3b27ad10c9 | |||
5c5d88a681 | |||
e6bc17787e | |||
5c08d7363d |
11 changed files with 211 additions and 53 deletions
|
@ -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";
|
||||||
|
|
47
src/bd.less
47
src/bd.less
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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(); }
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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); }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,21 +2,35 @@
|
||||||
[class^="membersGroup-"] // groups (roles)
|
[class^="membersGroup-"] // groups (roles)
|
||||||
{ &:extend(.hide); }
|
{ &:extend(.hide); }
|
||||||
|
|
||||||
[class^="membersWrap-"] {
|
div[class^="content-"] > main ~ div {
|
||||||
|
&:not(.ChannelDms-channelmembers-wrap) {
|
||||||
// make it shorter
|
// make it shorter
|
||||||
&, div[class^="members-"] {
|
min-width: @mem-width;
|
||||||
min-width: 48px;
|
width: @mem-width;
|
||||||
width: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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);
|
||||||
|
}
|
||||||
|
|
|
@ -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; }
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
10
src/ui.less
10
src/ui.less
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue