new branch

This commit is contained in:
Er2 2022-04-12 21:36:18 +03:00
commit 8eac634cb8
22 changed files with 1329 additions and 0 deletions

6
.gitignore vendored Normal file
View file

@ -0,0 +1,6 @@
out
node_modules
package-lock.json
diskort.xpi
btfl.css

31
Makefile Normal file
View file

@ -0,0 +1,31 @@
OSTYLES = $(wildcard src/style/*.less)
OSCRIPTS= $(wildcard src/script/*.coffee)
STYLES = $(OSTYLES:src/style/%.less=out/css/%.css)
SCRIPTS = $(OSCRIPTS:src/script/%.coffee=out/js/%.js)
all: prepare build
build: style script
dist: xpi
style: out/css/base.css
script: $(SCRIPTS)
prepare:
npm i lessc coffeescript
mkdir -p out
mkdir -p out/css
mkdir -p out/js
diskort.xpi xpi firefox: build
cp manifest.json out/
cd out; zip -r diskort.xpi manifest.json css js
@echo "goto about:config and set xpinstall.signatures.required to false"
@echo "then goto about:addons -> settings icon below search -> install add-on from file"
out/css/base.css: src/style/base.less $(OSTYLES)
npx lessc $< > $@
out/js/%.js: src/script/%.coffee
npx coffee --no-header -bco $@ $<

BIN
ext.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 544 B

19
license Normal file
View file

@ -0,0 +1,19 @@
Zlib License
Copyright (c) 2022 Er2 <er2@dismail.de>
This software is provided 'as-is', without any express or implied
warranty. In no event will the authors be held liable for any damages
arising from the use of this software.
Permission is granted to anyone to use this software for any purpose,
including commercial applications, and to alter it and redistribute it
freely, subject to the following restrictions:
1. The origin of this software must not be misrepresented; you must not
claim that you wrote the original software. If you use this software
in a product, an acknowledgement in the product documentation would be
appreciated but is not required.
2. Altered source versions must be plainly marked as such, and must not be
misrepresented as being the original software.
3. This notice may not be removed or altered from any source distribution.

34
manifest.json Normal file
View file

@ -0,0 +1,34 @@
{
"manifest_version": 2,
"name": "DisKort",
"version": "3.0.0",
"description": "Custom theme for Discord",
"icons": {
"48": "ext.png"
},
"permissions": [
"https://raw.githubusercontent.com/Er2ch/diskort/*",
"*://discord.com/",
"webRequest",
"webRequestBlocking"
],
"background": {
"scripts": ["js/bg.js"],
"persistent": true
},
"content_scripts": [{
"matches": ["*://discord.com/*"],
"js": ["js/inj.js"]
}],
"browser_specific_settings": {
"gecko": {
"id": "{7e79557e-5773-4be8-b0e2-9e35b34b692c}"
}
}
}

9
package.json Normal file
View file

@ -0,0 +1,9 @@
{
"name": "diskort",
"version": "3.0.0",
"description": "Custom script and style engine for Discord",
"dependencies": {
"coffeescript": "^2.6.1",
"lessc": "^1.0.2"
}
}

40
readme.org Normal file
View file

@ -0,0 +1,40 @@
*DisKort* - extension for browser which decreases Discord elements.
Currently it's in beta, more of design was merged into css.
[[https://addons.mozilla.org/en-US/firefox/addon/diskort/][Add to Firefox]]
* Installation
** Firefox
Highly recommend to enable backdrop-filter for acrylic.
1. Go to ~about:config~
2. Set ~layout.css.backdrop-filter.enabled~ and ~gfx.webrender.all~ to true.
3. Reload Discord.
Debug mode:
1. Download [[https://gitdab.com/er2/diskort/archive/dev.zip][dev tag archive]] and unpack it.
2. Copy btfl.css from [[https://raw.githubusercontent.com/Er2ch/diskort/main/btfl.css][GitHub]] or compile own.
3. Go to ~about:debugging#/runtime/this-firefox~
3. Click on *Load Temponary Add-on...*
4. Choose any file in extension folder.
** Chrome, etc.
Release mode:
1. Go to ~chrome://extensions/~
2. Enable ~Developer mode~.
3. Create own (~Pack extension~) or download [[https://gitdab.com/er2/diskort/releases][from releases]].
4. Drag and drop ~diskort.crx~ to browser.
Debug mode:
1. Download [[https://gitdab.com/er2/diskort/archive/dev.zip][dev tag archive]] and unpack it.
2. Copy btfl.css from [[https://raw.githubusercontent.com/Er2ch/diskort/main/btfl.css][GitHub]] or compile own.
3. Go to ~chrome://extensions/~
3. Enable ~Developer mode~.
4. Click on ~Load unpacked~ and choose extension folder.

28
src/script/bg.coffee Normal file
View file

@ -0,0 +1,28 @@
### DisKort
# (c) Er2 2022
# Zlib License
###
# Disable CSP
chrome.webRequest.onHeadersReceived.addListener(
(det) ->
for head from det.responseHeaders
n = head.name.toLowerCase()
head.value = '' if n is 'content-security-policy' or n == 'content-security-policy-report-only'
{ responseHeaders: det.responseHeaders }
, urls: ['<all_urls>']
, ['blocking', 'responseHeaders']
)
# Simulate user-agent
chrome.webRequest.onBeforeSendHeaders.addListener(
(det) ->
for head from det.requestHeaders
n = head.name.toLowerCase()
head.value = 'DisKort/3.0 (Linux) Firefox/99.0' if n is 'user-agent'
{ requestHeaders: det.requestHeaders }
, urls: ['<all_urls>']
, ['blocking', 'requestHeaders']
)

23
src/script/inj.coffee Normal file
View file

@ -0,0 +1,23 @@
### DisKort
# (c) Er2 2022
# Zlib License
###
### Base URL
# Source code is here: https://gitdab.com/er2/diskort
# / at end is required
###
base = 'https://raw.githubusercontent.com/Er2ch/diskort/main/'
inject = ->
try
resp = await fetch base + 'btfl.css'
text = await resp.text()
s = document.createElement 'style'
s.innerHTML = text
document.head.appendChild s
catch e
console.error e
# Call it!
inject()

32
src/style/base.less Normal file
View file

@ -0,0 +1,32 @@
/** DisKort
* (c) Er2 2022 <er2@dismail.de>
* Zlib License
*/
@no-nitro: true;
@no-banner: false;
@round: 8px;
@rounder: 16px;
@roundest: 24px; // text area
@div-width: (@rounder / 2);
@tab-height: 40px;
// Required
@import "func";
@import "fixes";
// Optional
@import "hide";
@import "mobile";
@import "nitro";
// Style
@import "materials";
@import "style";
@import "ui";
@import "dimmer";
@import "profile";
@import "people";
@import "settings";

47
src/style/dimmer.less Normal file
View file

@ -0,0 +1,47 @@
.theme-dimmer {
--header-primary: #dedede;
--header-secondary: #cacaca;
--text-normal: #dcddde;
--text-muted: #cbcccd;
--interactive-normal: #cacaca;
--interactive-hover: #dedede;
--interactive-active: #dcddde;
--interactive-muted: #bebebe;
--background-primary: #3e3e3e;
--background-secondary: #2e2e2e;
--background-secondary-alt: #2e2e2e;
--background-accent: #4f545c;
--background-floating: #18191c;
--background-tertiary: #1e1e1e;
--input-background: #1e1e1e;
color: var(--header-primary);
& [class*="close-"] {
color: var(--interactive-normal);
&:hover
{ color: var(--interactive-hover); }
}
}
div[class^="layer-"] div.theme-light,
div[class^="downloadApps-"] {
&:extend(.theme-dimmer all);
div[class*="root-"] {
background-color: var(--background-secondary);
}
div[class*="footer-"] {
background-color: var(--background-primary);
}
}
div[class^="downloadApps"] {
& {
background-color: var(--background-secondary) !important;
}
h3, div[class*="footer-"] {
color: var(--header-primary);
}
}

72
src/style/fixes.less Normal file
View file

@ -0,0 +1,72 @@
// fix guild selector at left part
ul[data-list-id="guildsnav"] div[class^="scroller-"] {
display: flex;
flex-direction: column;
overflow: hidden !important;
// servers
& > div[aria-label] {
overflow: hidden scroll;
scrollbar-width: none;
flex-grow: 1;
// add button
& + div {
margin-top: 4px;
// all others
& ~ div
{ &:extend(.hide); }
}
}
}
div[class^="messagesWrapper-"] div {
scrollbar-width: thin;
}
#emoji-picker-tab-panel {
&:not([role="dialog"]) {
// if add reaction (role=dialog), it breaks
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
div[class^="wrapper-"] {
top: 0;
border-radius: 5px 0 0 5px; // for add reaction
}
}
div[class*="fullscreenOnMobile"] div[class^="flex"] * {
// fix overflow
overflow: hidden;
}
div[class*="templatesList-"] {
// fix tempates list (it was removed)
height: 128px;
}
// Fix positioning
div[class^="toolsContainer-"] { // in settings
position: fixed !important;
right: 21px;
padding: 0;
margin-top: 60px;
border-radius: 16px;
& > div {
position: unset !important;
div[class^="container"] > * {
background-color: var(--background-nested-floating);
}
}
}
div[class^="contentContainer-"] div[class*="stickyHeader-"] {
padding-left: 0;
padding-right: 0;
margin: 0;
}

31
src/style/func.less Normal file
View file

@ -0,0 +1,31 @@
.left-border(@r: 0) {
border-top-left-radius: @r !important;
border-bottom-left-radius: @r !important;
}
.right-border(@r: 0) {
border-top-right-radius: @r !important;
border-bottom-right-radius: @r !important;
}
.bottom-border(@r: 0) {
border-bottom-left-radius: @r !important;
border-bottom-right-radius: @r !important;
}
.top-border(@r: 0) {
border-top-left-radius: @r !important;
border-top-right-radius: @r !important;
}
.radius(@r: 0) {
border-radius: @r !important;
}
.hide {
all: unset !important;
display: none !important;
width: 0 !important;
height: 0 !important;
}

95
src/style/hide.less Normal file
View file

@ -0,0 +1,95 @@
// Site
[class*="perksContainer-"],
[class^="DocSearch"], // Algolia, f you
{ &:extend(.hide); }
#app-mount div:not([class]) div[class=""] {
div:not([class]), // main page content
div div[class*="background-"], // nitro animation at top
div[class^="grid-"] div[class^="animation-"], // nitro animation at bottom
{ &:extend(.hide); }
}
// Remove background (invite, login)
[class*="artwork-"],
div[class^="characterBackground-"] [class*="rightSplit-"],
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); }
// Suggestions
button[class*="followButton-"], // at top in channels
[class^="nowPlaying"], // in friends tab
div[class^="threadSuggestionBar-"], // create thread because many replies
div[class^="welcomeCTA-"], // wave to say hi on server
div[role="separator"]:not([id$="new-messages-bar"]), // aren't needed
div[class^="channelNotice-"], // sh** at bottom of server name like invite people, server boost etc.
h2[class^="privateChannelsHeaderContainer"], // direct messages label
div[class*="templatesList-"] button[class^="container-"] ~ *, // templates are really useless
{ &:extend(.hide); }
// Emoji picker
#gif-picker-tab, #sticker-picker-tab,
#emoji-picker-tab-panel
div[class^="emojiPicker-"]
> div[class^="header-"],
nav[class^="nav-"], // breaks emoji panel, fixed at fixes.less
{ &:extend(.hide); }
// Search
nav > [class^="searchBar-"], // in dm
[role^="tab"] > [class^="searchBar-"], // in tabs
div[class^="toolbar-3_"] > :nth-child(3)
~ *:not([class^="search-"]), // remove after 3 elements except search
{ &:extend(.hide); }
// Text area
div[class^="channelTextArea-"] {
div div > div[class^="buttons-"] { // button
& > button // gift button, f you
{ &:extend(.hide); }
& > div.expression-picker-chat-input-button {
&:not(:nth-child(4)) // except emoji (and send button, if exists)
{ &:extend(.hide); }
}
}
& > div[class^="scrollableContainer-"]
div[class^="divider-"] // breaks redesigned text area
{ &:extend(.hide); }
}
// Other
div[class^="autocompleteShadow-"], // bugged
[class^="unreadPill-"], // NEW at right, not needed
div[class^="overviewSidebar-"], // at community creation, not needed
form::before, // message input shadow
div[class^="children-"]::after, // shadow at title
{ &:extend(.hide); }
div[class^="base-"] div[class^="children-"] {
// channel title
div[class^="divider-"] {
&, & ~ div:not([class^="tabBar-"]),
{ &:extend(.hide); }
}
}

118
src/style/materials.less Normal file
View file

@ -0,0 +1,118 @@
// Mica-like material from Windows 11
[class^="sidebar-"] {
&, & > nav {
background-color: transparent;
}
& > nav,
div[class*="scroller"] {
.top-border(@rounder);
}
div[class*="scroller"] {
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);
}
}
section { // bottom panel
.bottom-border(@rounder);
}
}
div[class^="base-"] > div[class^="content-"] > div[class^="container"],
div[class^="chat-"]
{
background-color: unset;
& > div {
background-color: var(--background-primary);
}
}
[class^="sidebar"] header,
[class^="chat"] > section:not([class^="chat"]),
[class^="container-"] > section {
background-color: var(--background-tertiary) !important;
}
@keyframes glow {
from { box-shadow: 0 0 2px 4px var(--interactive-normal); }
to { box-shadow: 0 0 1px 2px var(--interactive-muted); }
}
[class^="item-"] {
&[class*="focused-"] {
background-color: var(--text-muted);
color: var(--interactive-active);
animation: glow 0.7s linear infinite alternate;
}
}
// Acrylic
.acrylic {
--acrylic-blur: @round;
--acrylic-color: var(--background-secondary-alt);
--acrylic-opacity: 50%;
&, & > *, div[class^="body"] {
background: unset;
}
&::before, &::after {
border-radius: inherit;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
content: "";
z-index: -1;
}
&::before {
backdrop-filter: blur(var(--acrylic-blur)) saturate(125%);
}
&::after {
background-color: var(--acrylic-color);
background-image: url(data:image/png;base64,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);
opacity: var(--acrylic-opacity);
}
}
// Acrylic patches
div[class^="layers-"] {
& > div[class*="baseLayer"] {
opacity: 1 !important;
}
& > div[class^="layer"]:not([class*="baseLayer"]) {
div[class*="View-"] {
--acrylic-color: var(--background-primary);
--acrylic-opacity: 80%;
}
&, & > div[class*="View-"], div[class*="scroller"] {
background: unset;
}
}
}
div[class^="header-"],
div[class^="title"],
div[class^="channelTextArea-"],
div[class^="quickswitcher-"] div[class^="scroll"],
div[class^="focusLock-"] > div,
div[class^="avatar-"],
{
background: unset !important;
border-color: transparent;
scrollbar-color: var(--scrollbar-auto-scrollbar-color-track) transparent;
}

53
src/style/mobile.less Normal file
View file

@ -0,0 +1,53 @@
// TODO: comment this
@media screen and (max-device-width: 800px) {
/* FIXME: add close buttons to emoji panel */
[class^="channel-"] { max-width: unset; margin: 0 8px; }
[class^="layer-"] { padding: 0; margin: auto; }
[class^="layer-"] > [class^="container-"],
[class^="standardSidebarView-"] { overflow-x: scroll; }
[class^="content-"] [class^="sidebar"] { width: calc(50% - 8px - 72px); }
[class^="chat-"] { width: 100%; }
[class^="tools"] { position: unset !important; }
[class*="positionLayer-"],
[class*="fullscreenOnMobile"] {
overflow: auto;
width: 100%; min-width: 100%;
}
[class^="positionLayer-"] {
position: absolute;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
}
[class*="fullscreenOnMobile"] [class^="body"] {
width: 100%; height: 100%;
}
[class^="side-"] > [class^="item-"] {
margin-top: 4px !important;
padding: 6px 10px !important;
}
[class^="side-"] > [class^="item-"],
:not([class*="pill"]):not([class*="Pill"]) > [class*="item-"],
:not([class*="pill"]):not([class*="Pill"]) > [role="tab"],
[class^="member-"],
#channels li,
div[class^="tabBarItem-"] {
margin-top: 8px;
padding: 8px;
font-size: 11pt;
}
[class^="base-"],
[class^="contentRegion-"],
div[class^="sidebarRegion-"], // all in settings
{
width: 200%;
min-width: 200%;
}
}

44
src/style/nitro.less Normal file
View file

@ -0,0 +1,44 @@
.nitroblock() when (@no-nitro = true) {
.nitro { &:extend(.hide); }
[class^="marketing"],
[class*="tier"],
[class*="perks-"],
[class*="nitro"],
[class^="upsell"],
[class^="availabilityIndicator-"],
div[class^="serverBoostTabItem-"],
div[class*="hero"],
div[class*="premium"],
div[id*="premium"],
div[class*="goal"],
button[class^="shinyButton"],
[class*="giftButton"],
span[class^="questionMark-"], // at tag change
div[class^="characterCount-"] div[class^="root-"], // at many characters
[class^="clickableSticker-"], // stickers
nav[class^="privateChannels-"] div div // Nitro tab at DM
[data-list-item-id$="nitro"],
{ &:extend(.nitro); }
#channels > ul {
div[class^="container-"] {
// boosts
&:extend(.nitro);
// space
& + li {
padding-top: 0;
}
}
}
}
.nitroblock() when (@no-banner = true) {
[class^="bannerContainer-"],
[class*="banner-"]
{ &:extend(.hide); }
}
.nitroblock();

22
src/style/people.less Normal file
View file

@ -0,0 +1,22 @@
[class^="membersGroup-"] // groups (roles)
{ &:extend(.hide); }
[class^="membersWrap-"] {
// make it shorter
&, div[class^="members-"] {
min-width: 48px;
width: 0;
}
// remove fixed height
div[class^="content-"] {
height: unset !important;
flex-grow: 0;
}
div[class^="member-"] {
padding: 0;
margin-left: 0;
}
}

146
src/style/profile.less Normal file
View file

@ -0,0 +1,146 @@
div[class^="accountProfileCard-"] div[class^="userInfo-"] {
// settings
justify-content: left;
padding-top: 24px;
height: 56px;
button {
margin-left: 32px;
margin-top: -8px;
}
div[class^="avatar-"] {
background-color: var(--background-tertiary) !important;
top: 0;
border-radius: 0 !important;
border-bottom-right-radius: 50% !important;
}
}
.profile() when (@no-nitro = true) {
[class^="botTagVerified-"],
[class^="badgeList-"],
[class^="profileBadges-"],
{ &:extend(.nitro); }
}
.profile() when (@no-banner = true) {
div[class^="listItemContents-"] div[class^="userInfo"] {
padding-top: 0;
div[class^="avatar-"] {
top: 0;
}
}
div[class^="userPopout-"],
div[class^="profileBannerPreview-"] {
div[class^="avatarWrapper"] {
top: 8px; // fix divider bug
}
div[class^="headerTop-"] {
padding-top: 72px; // also fix divider bug
div[class^="headerText"] {
margin-left: 96px; // fix nickname
}
}
}
div[class^="profileBanner"] div[class*="avatar"]:not([class^="imageUploaderInner"]) {
margin-left: -8px;
margin-top: -8px;
}
}
.profile();
// Profile card in settings
div[class^="accountProfileCard-"] {
div[class^="field-"]:nth-child(1) {
height: 0;
div[class^="constrainedRow-"] {
display: none;
}
button {
top: -48pt;
left: 300pt;
}
}
}
div[class^="banner-"] {
position: absolute;
width: inherit;
max-height: 84px;
&:extend(.rounder);
&[class*="popoutBanner"] {
position: relative;
max-height: 128px;
.bottom-border();
}
}
div[class^="avatarWrapper-"] {
margin-right: auto; // make some space after avatar (sidebar at bottom)
}
// Redesigned profile page
header div[class^="nameTagWithCustomStatus-"],
header div[class^="nameTagNoCustomStatus-"] {
margin-bottom: 48px; // some space under avatar
margin-left: 160px; // after avatar, not before
}
div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"][class*="small-"] {
flex-direction: row;
header {
width: 260px;
margin: 24px;
div[class^="avatar-"] {
top: 0; left: 0;
position: relative;
}
div[class^="headerTop-"] {
position: unset;
justify-content: left;
}
div[class^="nameTag"] {
width: 64px;
position: absolute;
margin-top: -84px;
margin-left: 130px;
}
div[class^="customStatus"] {
margin-top: 16px;
padding: 0;
}
}
div[class^="body-"] {
border: none;
margin-left: 16px;
height: 370px;
& > *
{ padding: 0 !important; }
}
div[class^="tabBarContainer"]
{ border: none; }
div[class^="tabBar-"] {
flex-direction: column;
height: unset;
margin: 8px;
}
div[class^="tabBarItem-"] {
margin-right: 0;
border-bottom: unset;
&:hover, &[class*="selected-"] {
border-right: 2px solid var(--interactive-active) !important;
}
.top-border();
.left-border(@round);
}
}

254
src/style/settings.less Normal file
View file

@ -0,0 +1,254 @@
div[class^="keybind-"], // true must know it!
[class*="socialLink-"], // in change log
div[class^="socialLinks-"], // in settings at bottom
{ &:extend(.hide); }
// New sidebar in settings
div[class^="standardSidebarView-"] {
flex-direction: column;
div[class^="sidebarRegion-"] {
overflow: hidden;
flex-basis: unset; // bugfix to normalize height
flex-grow: 0; // fix scaling
div[class^="header-"],
div[class^="separator-"]
{ display: none; }
& > div {
background: var(--background-primary);
scrollbar-width: thin;
overflow: auto hidden !important;
justify-content: left;
max-width: 100%;
& > nav {
padding: 0;
width: unset; // to increase size
background: var(--background-secondary); // bugfix
& > div {
padding-left: @rounder;
flex-direction: row;
height: @tab-height;
}
}
}
}
div[class^="contentRegion-"] {
overflow-y: auto;
scrollbar-width: thin;
* {
max-width: 100%;
}
}
}
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[aria-controls="stickers-tab"],
{ &:extend(.nitro); }
div[aria-controls="keybinds-tab"],
div[aria-controls="game-activity-tab"],
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 {
width: 50%;
}
}
#profile-customization-tab div[class^="children"]
div[class^="baseLayout-"] {
& > div:not([class]) {
width: 100%;
div[class^="customizationSection-"] {
&:nth-child(2), &:nth-child(3) {
&:extend(.nitro);
}
}
}
div[class^="bioTextArea-"] {
height: 30vh;
}
}
// TrY AnImAtEd AvAtAr, eh... f you
[class^="optionBox-"]:nth-child(2)
{ &:extend(.nitro); }
#connections-tab div[class^="children-"] {
flex-direction: row;
div[class^="accountList-"] {
margin-right: @div-width;
height: 100%; // decreases height? 0_0
}
div[class^="connectionList-"] {
width: 100%;
}
}
#appearance-tab div[class^="children-"] {
.horiz-tab();
& > div:first-child {
width: 100%;
}
div[class^="marginTop20-"] > div[class^="slider-"] {
margin-top: 28px;
}
}
#accessibility-tab div div[class^="children-"] {
& > div {
&:nth-child(2),
&:nth-child(3),
&:nth-child(6),
&:nth-child(7)
{ &:extend(.hide); }
&:nth-child(4) {
margin-top: @div-width * 2;
}
}
}
#notifications-tab div[class^="children"] {
div:nth-child(6)
{ &:extend(.hide); }
}
#language-tab div[class^="children-"] {
div div > div[role="radiogroup"] {
.horiz-tab(3);
}
}
#streamer-mode-tab div[class^="children-"] {
.horiz-tab();
& > * {
&:nth-child(1),
&:nth-child(2)
{ width: 100%; }
&:nth-child(3)
{ display: none; }
}
}
// Server settings
#overview-tab div[class^="children-"] > div {
// system messages
&:nth-child(3) {
.horiz-tab();
& > :nth-child(1),
& > :nth-child(2)
{ width: 100%; }
& > :nth-child(3) // description
{ display: none; }
}
// notification settings
&:nth-child(4) > div > div:last-child {
.horiz-tab();
}
// nitro features
&:nth-child(5) > div > div:last-child {
.horiz-tab(3);
& > * {
padding: 0;
margin: 0;
border: none;
}
& > div:first-child div[class^="flexChild-"]
{ display: none; }
}
}
#moderation-tab div[class^="children-"] {
div[role="radiogroup"] {
.horiz-tab();
}
}
div[data-list-id="audit-log"] {
.horiz-tab();
& > * {
height: min-content;
}
}
#integrations-tab > div:nth-child(2) {
.horiz-tab();
img[class^="iconWrapper-"] {
width: unset;
}
button[class^="createButton-"],
[class^="sectionHeader-"],
& > div:first-child {
width: 100%;
margin-bottom: @div-width * 3;
}
}
#widget-tab div[class^="children-"] {
&, & > div[class^="infoWrapper-"] {
.horiz-tab();
row-gap: @gap * 2;
}
img[class^="infoItem-"]
{ display: none; }
div[class^="infoItem-"],
& > div:first-child,
& > div:last-child {
width: 100%;
flex-basis: unset;
}
}
#community-tab > div[class^="container-"] {
& > div[class^="banner-"]
{ &:extend(.hide); }
}
#discovery-tab > div[class^="container-"] {
.horiz-tab();
span[class*="Button"] {
align-self: start;
}
}

149
src/style/style.less Normal file
View file

@ -0,0 +1,149 @@
.round { .radius(@round); }
.rounder { .radius(@rounder); }
// Space between sidebar and chat
div[class^="sidebar-"] {
margin-right: @div-width;
}
// Old-school embed
[class*="embed"] {
.left-border(3px);
max-width: unset;
background: unset;
}
// Round
// UI parts
li[class^="channel-"],
[class^="avatar-"],
[role="dialog"],
div[class^="menu-"] [role="menuitem"],
div[class^="role-"],
div[class^="colorPicker"] div div[class^="saturation"] div,
#channels ul li div > div[class^="content-"],
// Input
div[class^="searchBox-"],
[class*="input"],
input[class^="inputDefault-"],
div[class*="TextArea"],
textarea,
{ &:extend(.round); }
// Rounder
// Popouts
[class^="authBox"], // login
[role="menu"],
div[class*="popout"],
div[class*="Popout"],
div[class*="fullscreenOnMobile"],
div[class*="root"] div[class^="flex-"],
// UI parts
div[class^="chat-"],
div[class^="noticeRegion"] > div, // you have unsaved changes bottom bar
[class^="resultsGroup-"], // search
div[class^="auditLog-"],
div[class^="auditLog-"] > div,
div[class^="connectedAccount-"], // in profile
div[class^="profileBanner"],
div[class^="accountProfile"],
div[class^="quickswitcher-"] input,
div[class^="autocomplete-"], // input
div[class^="pictureInPicture-"],
div[class^="select-"],
div[class^="messagesWrapper-"] div:not([class*="Inner"]):not([class^="filename"]),
div[class^="layer-"] > div[class^="container-"],
div[class^="base-"] div[class^="content-"] > div:nth-child(2),
div[class^="guildList-"] div[class^="container-"],
div[class^="container"] > div,
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); }
// no shadows
section, header,
div[class^="content-"]::before,
div[class^="tabBody-"]::before
{ box-shadow: unset !important; }
// Pins
div[class^="messageGroupWrapper-"] {
border: none;
background: unset;
}
// Redesigned text input
div[class^="attachedBars-"],
div[class^="messagesWrapper-"] div[class*="Bar-"]:not([class^="newMessagesBar-"]) {
bottom: 16px;
padding: 0;
}
div[class^="attachedBars-"]
{ position: relative; }
div[class^="channelTextArea-"] {
& > div[class^="scrollableContainer-"] {
background-color: unset;
button[class^="attachButton-"],
div[class^="textArea-"],
div[class^="buttons-"] {
background-color: var(--background-secondary);
border-radius: @roundest !important;
margin: 0;
}
& > div[class^="inner-"]
{ padding: 0; }
button[class^="attachButton-"] {
padding: 8px;
width: auto;
height: auto;
}
div[class^="textArea-"] {
margin-left: 8px;
.right-border();
div > * { left: (@roundest / 2); }
}
div[class^="buttons-"] {
height: auto; // to match input height
& > * {
align-items: center; // center buttons
}
.left-border();
}
}
}
[role="menu"],
[role="dialog"]:not([class^="focusLock-"]),
div[class^="focusLock-"] > div,
div[class^="channelHeader-"],
div[class^="layers-"] > div[class^="layer-"] div[class*="View-"],
div[class*="stickyHeader-"],
{
&:extend(.acrylic all);
}

76
src/style/ui.less Normal file
View file

@ -0,0 +1,76 @@
// UI element changes
// slider
div[class^="slider-"] {
div[class^="track-"] {
div[class^="grabber-"] {
@half: (@rounder / 2);
position: relative;
width: @rounder;
height: @rounder;
border: none;
border-radius: @half;
top: @half * 1.5;
margin-top: unset;
margin-left: -@half;
}
}
}
// tabs
div[role="tab"],
div[class^="tabBarItem-"] {
.bottom-border();
margin: 0;
margin-top: 8px;
margin-right: 16px;
padding: 4px 8px;
&:hover,
&[class*="selected-"] {
background-color: var(--interactive-muted) !important;
color: var(--text-normal) !important;
}
}
// slider
div[class^="container-"] {
&[class*="disabled-"] {
cursor: not-allowed;
}
svg[class^="slider-"] {
width: 16px !important;
height: 16px !important;
border-radius: 50%;
margin: 4px 8px;
margin-right: 0;
background-color: white;
> * {
display: none;
}
}
}
div[class^="radioBar-"] {
border: none;
}
// Round
div[class^="tabBarItem-"],
div[class^="checkbox"],
button[class*="button"],
{ &:extend(.round); }
// Rounder
div[class^="markup-"] pre code, // ```code```
span[class^="spoiler"],
span.mention,
code.inline,
[class^="item-"], // in settings
div[class^="group-"], // radiogroup
div[class*="card"],
div[class^="categoryItem-"] > *, // in Discovery
div[class^="content-"] img[class^="image-"],
{ &:extend(.rounder); }