Compare commits

...

No commits in common. "v3" and "main" have entirely different histories.
v3 ... main

30 changed files with 999 additions and 769 deletions

4
.gitignore vendored
View file

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

View file

@ -1,31 +0,0 @@
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 -co $@ $<

31
btfl.less Normal file
View file

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

30
js/bg.js Normal file
View file

@ -0,0 +1,30 @@
/** DisKort
* (c) Er2 2022
* Zlib License
*/
// Disable CSP
chrome.webRequest.onHeadersReceived.addListener(
function(det) {
for (let head of det.responseHeaders) {
let n = head.name.toLowerCase();
if (n == 'content-security-policy' || n == 'content-security-policy-report-only'
) head.value = '';
}
return { responseHeaders: det.responseHeaders };
},
{urls: ['<all_urls>']}, ['blocking', 'responseHeaders']
);
chrome.webRequest.onBeforeSendHeaders.addListener(
function(det) {
for (let head of det.requestHeaders) {
let n = head.name.toLowerCase();
if (n == 'user-agent')
head.value = 'DisKort/1.0 (Linux) Firefox/99.0';
}
return { requestHeaders: det.requestHeaders };
},
{urls: ['<all_urls>']}, ['blocking', 'requestHeaders']
);

17
js/inj.js Normal file
View file

@ -0,0 +1,17 @@
/** DisKort
* (c) Er2 2022
* Zlib License
*/
const base = "https://raw.githubusercontent.com/Er2ch/diskort/main/";
async function inject() {
try {
var resp = await fetch(base + 'btfl.css');
var text = await resp.text();
var s = document.createElement("style");
s.innerHTML = text;
document.head.appendChild(s);
} catch(e) { console.error(e); }
}
inject();

5
makeext.sh Executable file
View file

@ -0,0 +1,5 @@
#!/bin/sh
zip -r diskort.xpi js/ ext.png manifest.json license
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"

View file

@ -1,10 +1,14 @@
{
"manifest_version": 2,
"name": "DisKort",
"version": "3.0.0",
"version": "2.0.1",
"description": "Custom theme for Discord",
"icons": {
"48": "ext.png"
},
"permissions": [
"https://raw.githubusercontent.com/Er2ch/diskort/*",
"*://discord.com/",
@ -17,7 +21,6 @@
"persistent": true
},
"web_accessible_resources": ["js/webpack.js"],
"content_scripts": [{
"matches": ["*://discord.com/*"],
"js": ["js/inj.js"]

View file

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

View file

@ -9,7 +9,8 @@ Currently it's in beta, more of design was merged into css.
** Firefox
Highly recommend to enable backdrop-filter for acrylic.
Firefox < 103: 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.

81
src/bd.less Normal file
View file

@ -0,0 +1,81 @@
// BetterDiscord specific things
.bd-button, .bd-search-wrapper,
.bd-changlelog-button, .bd-select-options,
#bd-pub-button,
{ &:extend(.round); }
.bd-notice, .bd-toast,
{ &:extend(.rounder); }
.bd-toasts {
align-items: flex-end;
width: calc(100% - @roundest) !important;
left: 0 !important;
}
.bd-select-options {
max-width: max-content !important;
}
.bd-search-wrapper,
.bd-changelog-button {
align-self: center;
margin: 0;
margin-right: 8px;
}
div.bd-controls {
column-gap: (@round / 2);
}
.butn(@norm, @hov) {
svg { background: @norm; }
&:hover svg { background: @hov; }
}
.floating-window {
max-width: 100% !important;
max-height: 100% !important;
.floating-window-buttons {
.button {
&:hover {
background: none;
}
svg {
color: #000;
&:extend(.round);
}
&.maximize-button {
.butn(#aaaa00, #eeee00);
}
&.close-button {
.butn(#aa0000, #ee0000);
}
}
}
&:extend(.round);
}
div.standardSidebarView-E9Pc3j {
// PluginRepo and ThemeRepo
div.repoList-9JnAPs > div {
position: absolute;
width: 100%;
div.repoHeader-2KfNvH {
& > * {
max-width: unset;
}
div.tabBar-2hXqzU {
height: 48px;
}
}
#pluginrepo-tab,
#themerepo-tab {
max-width: unset;
}
}
}

View file

@ -16,7 +16,7 @@
--input-background: #1e1e1e;
color: var(--header-primary);
& [class*="close-"] {
& .close-1mLglB {
color: var(--interactive-normal);
&:hover
@ -24,24 +24,22 @@
}
}
div[class^="layer-"] div.theme-light,
div[class^="downloadApps-"] {
div.layer-1Ixpg3 div.theme-light,
div.downloadApps-14IgKV {
&:extend(.theme-dimmer all);
div[class*="root-"] {
div.root-g14mjS {
background-color: var(--background-secondary);
}
div[class*="footer-"] {
div.footer-31IekZ {
background-color: var(--background-primary);
}
}
div[class^="downloadApps"] {
& {
background-color: var(--background-secondary) !important;
}
h3, div[class*="footer-"] {
div.downloadApps-14IgKV {
background-color: var(--background-secondary) !important;
h3, div.footer-2TRYcZ {
color: var(--header-primary);
}
}

View file

@ -1,5 +1,5 @@
// fix guild selector at left part
ul[data-list-id="guildsnav"] div[class^="scroller-"] {
ul[data-list-id="guildsnav"] div.scroller-3X7KbA {
display: flex;
flex-direction: column;
overflow: hidden !important;
@ -10,6 +10,11 @@ ul[data-list-id="guildsnav"] div[class^="scroller-"] {
scrollbar-width: none;
flex-grow: 1;
// Chrome, ugh..
&::-webkit-scrollbar {
display: none;
}
// add button
& + div {
margin-top: 4px;
@ -20,30 +25,35 @@ ul[data-list-id="guildsnav"] div[class^="scroller-"] {
}
}
div[class^="messagesWrapper-"] div {
#channels ul {
height: unset !important;
margin-bottom: 8px;
}
div.messagesWrapper-RpOMA3 > div {
scrollbar-width: thin;
}
#emoji-picker-tab-panel {
z-index: 0;
&:not([role="dialog"]) {
// if add reaction (role=dialog), it breaks
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
div[class^="wrapper-"] {
div.wrapper-22rqw6 {
top: 0;
border-radius: 5px 0 0 5px; // for add reaction
border-radius: 8px;
}
}
div[class*="fullscreenOnMobile"] div[class^="flex"] * {
div.fullscreenOnMobile-ixj0e3 div.flex-3BkGQD * {
// fix overflow
overflow: hidden;
}
div[class*="templatesList-"] {
div.templatesList-uohY49 {
// fix tempates list (it was removed)
height: 128px;
}
@ -70,3 +80,20 @@ div[class^="contentContainer-"] div[class*="stickyHeader-"] {
padding-right: 0;
margin: 0;
}
// media embed fixes
div.inlineMediaEmbed-1m3ApS {
width: max-content;
}
// in profile
.warningCircleIcon-mFju_m {
position: fixed;
}
div.container-YkUktl div.avatarWrapper-1B9FTW {
margin-right: auto; // make some space after avatar (sidebar at bottom)
min-width: unset;
padding: unset;
}

70
src/func.less Normal file
View file

@ -0,0 +1,70 @@
.left-border(@r: 0) {
border-top-left-radius: @r;
border-bottom-left-radius: @r;
}
.right-border(@r: 0) {
border-top-right-radius: @r;
border-bottom-right-radius: @r;
}
.bottom-border(@r: 0) {
border-bottom-left-radius: @r;
border-bottom-right-radius: @r;
}
.top-border(@r: 0) {
border-top-left-radius: @r;
border-top-right-radius: @r;
}
.radius(@r: 0) {
border-radius: @r;
}
.hide {
all: unset !important;
display: none !important;
width: 0 !important;
height: 0 !important;
}
.bot(@text: 'BOT', @height: 16px) {
@offset: (@height / 4);
display: inline-block;
content: @text;
height: @height;
padding: 0 @offset;
margin: @offset 0 0 @offset;
border-radius: @offset;
background: var(--brand-experiment);
color: #fff;
font-size: (@height - @offset);
line-height: ($font-size * 1.25);
vertical-align: top;
}
.horiz-tab(@cols: 2, @div: ~'.divider-_0um2u') {
@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}:empty {
&:extend(.hide);
}
}
.verify(@id) {
div.message-2CShn3 img.avatar-2e8lTP[src*="/@{id}/"] + .header-2jRmjb > .headerText-2z4IhQ::after
{ .bot('✓', 16px); }
// Replies
div.repliedMessage-3Z6XBG img.replyAvatar-sHd2sU[src*="/@{id}/"] + span::after
{ .bot('✓', 12px); }
}

View file

@ -11,21 +11,16 @@
{ &:extend(.hide); }
}
// Nicks
.username-1g6Iq1
{ &: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-"],
@ -37,7 +32,10 @@ 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
.divider-IqmEqJ .content-3spvdd, // date in divider
.spine-29OFwR, // threads svg
.mainContent-20q_Hp .subtitle-3PyFgf, // forum subtitle
.scrollerInner-2PPAp2 div.box-2iMsQm, // start the conversation in forum
div[class^="channelNotice-"], // sh** at bottom of server name like invite people, server boost etc.
h2[class^="privateChannelsHeaderContainer"], // direct messages label
@ -62,8 +60,8 @@ div[class^="toolbar-3_"] > :nth-child(3)
{ &:extend(.hide); }
// Text area
div[class^="channelTextArea-"] {
div div > div[class^="buttons-"] { // button
div.channelTextArea-1FufC0 {
div.buttons-uaqb-5 { // buttons
& > button // gift button, f you
{ &:extend(.hide); }
@ -72,8 +70,8 @@ div[class^="channelTextArea-"] {
{ &:extend(.hide); }
}
}
& > div[class^="scrollableContainer-"]
div[class^="divider-"] // breaks redesigned text area
div.scrollableContainer-15eg7h
div.divider-2rZFJK // breaks redesigned text area
{ &:extend(.hide); }
}
@ -84,12 +82,14 @@ div[class^="overviewSidebar-"], // at community creation, not needed
form::before, // message input shadow
div[class^="children-"]::after, // shadow at title
// banners are more buggy every day so it is disabled since now
.bannerSVGWrapper-qc0szY,
[class^="bannerContainer-"],
[class*="banner-"],
{ &:extend(.hide); }
div[class^="base-"] div[class^="children-"] {
// channel title
div[class^="divider-"] {
&, & ~ div:not([class^="tabBar-"]),
{ &:extend(.hide); }
}
.container-3wLKDe {
background: unset !important;
}

View file

@ -70,7 +70,7 @@ div[class^="chat-"]
}
&::before, &::after {
border-radius: inherit;
.radius(inherit);
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;

View file

@ -8,6 +8,7 @@
[class*="perks-"],
[class*="nitro"],
[class^="upsell"],
[class*="Upsell"],
[class^="availabilityIndicator-"],
div[class^="serverBoostTabItem-"],
div[class*="hero"],
@ -21,24 +22,31 @@ 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"],
#account-style-your-profile,
{ &:extend(.nitro); }
#channels > ul {
& > div[aria-hidden="true"],
div[class^="container-"] {
// boosts
&:extend(.nitro);
}
div[class^="container-"] + li {
// space
& + li {
padding-top: 0;
}
padding-top: 0;
}
}
nav div[class^="animatedContainer-"] {
background: unset;
div[class^="bannerImage-"]::before {
background: unset !important;
}
[class^="bannerImg-"]
{ &:extend(.nitro); }
}
.nitroblock() when (@no-banner = true) {
[class^="bannerContainer-"],
[class*="banner-"]
{ &:extend(.hide); }
}
.nitroblock();

23
src/people.less Normal file
View file

@ -0,0 +1,23 @@
.membersGroup-2eiWxl // groups (roles)
{ &:extend(.hide); }
.membersWrap-3NUR2t {
// make it shorter
&, div.members-3WRCEx {
min-width: 48px;
width: 0;
padding-bottom: 0;
}
// remove fixed height
div.content-2a4AW9 {
height: unset !important;
margin-bottom: 64px; // omg I love discock
}
div.member-2gU6Ar {
padding: 0;
margin-left: 0;
}
}

216
src/profile.less Normal file
View file

@ -0,0 +1,216 @@
.profile() when (@no-nitro = true) {
[class^="botTagVerified-"],
[class^="badgeList-"], // modal profile page
{ &:extend(.nitro); }
}
.profile() {
div[class^="listItemContents-"] div[class^="userInfo"] {
padding-top: 0;
div[class^="avatar-"] {
top: 0;
}
}
div.customStatus-3Bvsdb,
div.memberSinceContainer-3biwiY {
display: flex;
justify-content: center;
}
// fixes
div.section-3FmfOT.section--1D3ev {
padding: 12px;
}
div.overlayBackground-1KgwVi {
margin: 24px 0 0 0;
// padding-right: 8px;
background: none;
& > div.section-3FmfOT:first-child {
// nick
margin: 0 auto;
padding: 4px 0;
}
div.scroller-1jBQYo {
display: grid;
h3
{ &:extend(.hide); }
& > .section-3FmfOT:nth-child(2) {
order: -1;
}
}
.customizationSection-IGy2fS .userPopoutInner-1hXSeY & {
// in settings
padding-right: 0;
margin-top: -8px;
}
}
div.status-b9jLr4 {
position: relative;
top: -24px;
left: 56px;
}
.profileBadges-31rDHI {
background: unset;
justify-content: left;
position: absolute;
right: 0;
left: 8px;
}
div.avatarWrapper-3y0KZ1,
div.avatarUploader-CHGwK7 {
position: relative;
left: 0;
margin: 0 auto;
}
div.imageUploaderInner-IIRaFr {
background-color: unset;
}
div.avatarPositionPremiumBanner-2nq2Fy {
top: 24px;
}
}
.profile();
div[class^="pencilContainer-"] {
z-index: 1; // fix edit button in profile
}
// Profile card in settings
div.accountProfileCard-lbN7n- {
div.field-21XZwa:first-child {
height: 0;
div.constrainedRow-3y91Xf
{ &:extend(.hide); }
button {
position: absolute;
right: 16px;
top: 16px;
}
}
div.userInfo-regn9W {
justify-content: left;
padding-top: 24px;
height: 56px;
button {
margin-left: 32px;
margin-top: -8px;
}
}
div.avatar-3mTjvZ {
background-color: var(--background-tertiary) !important;
.radius();
border-bottom-right-radius: 16px;
top: 0;
}
div.container-1gYwHN {
width: max-content;
margin-top: 8px;
margin-left: -22px;
background-color: var(--background-tertiary);
.radius() !important;
border-bottom-right-radius: 16px !important;
height: 32px;
padding-top: 4px;
padding-right: 4px;
}
}
// Redesigned profile page
div.root-8LYsGj {
flex-direction: row;
div.topSection-13QKHs {
width: 260px;
margin: 24px;
div.avatar-3QF_VA {
top: 0; left: 0;
position: relative;
}
div.headerTop-1PNKck {
position: unset;
justify-content: left;
margin-top: 8px;
}
div.nameTag-H6kSJ0 {
width: 64px;
position: absolute;
margin-top: -64px;
margin-left: 130px;
}
div.customStatus-kFfkj5 {
margin-top: 16px;
padding: 0;
}
}
.connectedAccountsColumn-1zdyyx + .connectedAccountsColumn-1zdyyx
{ margin: 0; }
.connectedAccounts-2R5M4w {
flex-direction: column;
}
div.body-1Ukv50 {
border: none;
height: 370px;
max-width: 100%;
& > *
{ padding: 0 !important; }
}
div.tabBarContainer-sCZC4w {
border: none;
padding: 0;
}
div.tabBar-2hXqzU {
flex-direction: column;
height: unset;
margin: 8px;
}
div.tabBarItem-30Te4- {
margin-right: 0;
border-bottom: unset;
&:hover, &.selected-g-kMVV {
border-right: 2px solid var(--interactive-active) !important;
}
.radius((@round / 4)) !important;
.left-border(@round) !important;
}
}
#account {
max-width: unset;
width: 100%;
}
#account-info {
div.headerTop-3GPUSF {
padding-top: 108px;
}
div.profileBadges-2pItdR {
width: max-content;
.radius(@round);
padding: 2px;
}
}
#account-avatar div.avatarWrapperNormal-ahVUaC {
left: 35%;
}

View file

@ -1,28 +0,0 @@
### 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']
)

View file

@ -1,30 +0,0 @@
### 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 = ->
# inject webpack reader
s = document.createElement 'script'
s.setAttribute 'type', 'text/javascript'
s.setAttribute 'src', chrome.extension.getURL 'js/webpack.js'
document.head.appendChild s
# inject style
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()

View file

@ -1,63 +0,0 @@
### DisKort
# (c) Er2 2022
# Zlib License
###
# Find and use Discord obfuscated webpack modules
window.webpack = {}
# Helper functions
window.ModGetsAll = =>
Object.values webpack.cache
.filter (m) => m.exports
window.ModGet = (filt, first = true) =>
if Array.isArray filt
key = filt
filt = (m) => key.every (k) => m.hasOwnProperty(k) or (m.__proto__ and m.__proto__.hasOwnProperty k)
mods = ModGetsAll()
m = []
for i of mods
continue if not mods.hasOwnProperty i
mod = mods[i]
{exports} = mod
continue if not exports
exports = exports.default if exports.default
continue if not filt exports
return exports if first
m.push exports
first or m.length is 0 and null or m
window.ModGets = (filt) =>
ModGet filt, false
window.ModGetName = (name, ret, forev) =>
ModGet (m) => m.displayName?.toLowerCase() is name.toLowerCase()
window.WinProps = =>
platform: window.platform
GLOBAL_ENV: window.GLOBAL_ENV
DiscordSentry: window.DiscordSentry
__SENTRY__: window.__SENTRY__
console.log 'Welcome to DisKort!'
init = =>
while not window.webpackChunkdiscord_app or not window._
await new Promise (res) => setTimeout res, 100
console.log 'Ready to inject'
webpackChunkdiscord_app.push [
[[ 'diskort' ]]
{}
(r) =>
webpack.cache = r.c
webpack.require = (m) => r m
return
]
return
init()

View file

@ -1,20 +1,19 @@
div[class^="keybind-"], // true must know it!
[class*="socialLink-"], // in change log
div[class^="socialLinks-"], // in settings at bottom
div.keybind-13vtq8, // true must know it!
div.socialLinks-3ywLUf, // in settings at end
{ &:extend(.hide); }
// New sidebar in settings
div[class^="standardSidebarView-"] {
div.standardSidebarView-E9Pc3j {
flex-direction: column;
div[class^="sidebarRegion-"] {
div.sidebarRegion-1VBisG {
overflow: hidden;
flex-basis: unset; // bugfix to normalize height
flex-grow: 0; // fix scaling
div[class^="header-"],
div[class^="separator-"]
div.header-2Kx1US,
div.separator-2wx7h6
{ display: none; }
& > div {
@ -37,7 +36,7 @@ div[class^="standardSidebarView-"] {
}
}
div[class^="contentRegion-"] {
div.contentRegion-3HkfJJ {
overflow-y: auto;
scrollbar-width: thin;
@ -47,88 +46,91 @@ div[class^="standardSidebarView-"] {
}
}
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;
min-width: 512px;
}
}
// TrY AnImAtEd AvAtAr, eh... f you
[class^="optionBox-"]:nth-child(2)
div.optionBox-1UOevl: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
#profile-customization-tab {
div.baseLayout-8AMrwn {
& > div:not([class]) {
width: 100%;
div.customizationSection-IGy2fS {
&:nth-child(2), &:nth-child(3)
{ &:extend(.nitro); }
}
}
}
div[class^="connectionList-"] {
width: 100%;
div.bioTextArea-dDGOeC {
height: 30vh;
}
}
#appearance-tab div[class^="children-"] {
#privacy-\&-safety-tab {
.marginBottom40-fvAlAV {
&:first-child div[role=radiogroup],
{ .horiz-tab(3); }
&:nth-child(2)
{ .horiz-tab(); }
&:nth-child(2) > h5
{ min-width: 100%; }
&:last-child
{ &:extend(.hide); }
}
}
#connections-tab div.children-1xdcWE {
flex-direction: row;
flex-flow: row wrap;
div.connectionsContainer-3wRUc6 {
row-gap: 8px;
}
div.connectContainer-1hylYM,
div.accountList-Wii_T5 {
margin-right: @div-width;
width: 33%;
// auto detect
& + div.container-1zDvAE {
order: -1;
width: 100%;
}
}
div.connectionList-11Q_X- {
flex-grow: 1;
}
div.connection-YOVI9j {
height: max-content;
}
}
#appearance-tab div.children-1xdcWE {
.horiz-tab();
& > div:first-child {
width: 100%;
}
div[class^="marginTop20-"] > div[class^="slider-"] {
div.marginTop20-2T8ZJx > div.slider-1NC-Gf {
margin-top: 28px;
}
}
#accessibility-tab div div[class^="children-"] {
#accessibility-tab div.children-1xdcWE {
& > div {
&:nth-child(2),
&:nth-child(3),
@ -142,30 +144,30 @@ div[class^="baseLayout-"] {
}
}
#notifications-tab div[class^="children"] {
#notifications-tab div.children-1xdcWE {
div:nth-child(6)
{ &:extend(.hide); }
}
#language-tab div[class^="children-"] {
#language-tab div.children-1xdcWE {
div div > div[role="radiogroup"] {
.horiz-tab(3);
}
}
#streamer-mode-tab div[class^="children-"] {
#streamer-mode-tab div.children-1xdcWE {
.horiz-tab();
& > * {
&:nth-child(1),
&:nth-child(2)
{ width: 100%; }
&:nth-child(3)
{ display: none; }
}
h5
{ display: none; }
}
// Server settings
#overview-tab div[class^="children-"] > div {
#overview-tab > div > div.children-1xdcWE > div {
// system messages
&:nth-child(3) {
.horiz-tab();
@ -186,17 +188,49 @@ div[class^="baseLayout-"] {
// nitro features
&:nth-child(5) > div > div:last-child {
.horiz-tab(3);
& > * {
div.divider--oiTeJ {
padding: 0;
margin: 0;
border: none;
}
& > div:first-child div[class^="flexChild-"]
{ display: none; }
& > div:first-child div.flexChild-3PzYmX
{ &:extend(.hide); }
}
}
#moderation-tab div[class^="children-"] {
#integrations-tab > div:nth-child(2) {
.horiz-tab();
img.iconWrapper-1sOtkE {
width: unset;
}
button[class^="createButton-"],
[class^="sectionHeader-"],
& > div:first-child {
width: 100%;
margin-bottom: @div-width * 3;
}
}
#widget-tab div.children-1xdcWE {
&, & > div.infoWrapper-1HtsGy {
.horiz-tab();
row-gap: @gap * 2;
}
img.infoItem-Q4HWUe
{ &:extend(.hide); }
div.infoItem-Q4HWUe,
& > div:first-child,
& > div:last-child {
width: 100%;
flex-basis: unset;
}
}
#moderation-tab > div > div.children-1xdcWE {
div[role="radiogroup"] {
.horiz-tab();
}
@ -209,45 +243,9 @@ div[data-list-id="audit-log"] {
}
}
#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-"] {
#discovery-tab > div.container-26RXEg {
.horiz-tab();
// disabledButtonWrapper-2Oz3aY
span[class*="Button"] {
align-self: start;
}

284
src/style.less Normal file
View file

@ -0,0 +1,284 @@
.round { .radius(@round) !important; }
.rounder { .radius(@rounder) !important; }
// Space between sidebar and chat
div[class^="sidebar-"] {
margin-right: @div-width;
}
// Old-school
div[class^="repliedMessage-"] {
&::before {
margin: 0;
border: none;
width: 4px;
.radius(2px);
background: var(--interactive-muted);
left: 0; right: 100%;
top: 0; bottom: 0;
}
& > :first-child {
margin-left: 16px;
}
}
div.role-2TIOKu {
&:extend(.rounder);
padding: 0;
// TODO: fix this because roles looks sadly
// border-width: 2px;
// border-style: solid;
}
article[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^="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^="chat-"] > div[class^="content-"],
div.focusLock-2tveLW .wrapper-2bCXfR,
div.avatarWrapper-1B9FTW,
{ &:extend(.rounder); }
div[class^="auditLog"] {
div[class^="headerExpanded-"]
{ .bottom-border(); }
div[class^="changeDetails-"]
{ .top-border(); }
}
div.content-2a4AW9
div.message-2CShn3.mentioned-Tre-dv
{ .left-border(4px) !important; }
// 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.channelTextArea-1VQBuV {
&.channelTextAreaDisabled-1p2fQv
.attachButton-1ijpt9
{ &:extend(.hide); }
div.scrollableContainer-15eg7h {
background-color: unset;
opacity: 1;
}
.attachButton-1ijpt9,
.textArea-2CLwUE,
.buttons-uaqb-5 {
background-color: var(--background-secondary);
.radius(@roundest) !important;
margin: 0;
}
div.inner-NQg18Y {
padding: 0;
}
.attachButton-1ijpt9 {
padding: 8px;
width: auto;
height: 24px;
box-sizing: content-box;
margin-right: 8px;
.icon-2P5yLI {
padding: 0;
}
}
.textArea-2CLwUE {
&:not(.textAreaDisabled-10ObTX)
{ .right-border() !important; }
div > * {
left: (@roundest / 2);
}
}
.buttons-uaqb-5 {
height: auto; // to match input height
.left-border() !important;
& > * {
align-items: center; // center buttons
}
}
}
[role="menu"],
[role="dialog"]:not(.focusLock-2tveLW):not(#emoji-picker-tab-panel),
div[class^="focusLock-"] > div:not(.carouselModal-1eUFoq),
div.focusLock-2tveLW .wrapper-2bCXfR,
div[class^="channelHeader-"],
div[class^="layers-"] > div[class^="layer-"] div[class*="View-"],
div[class*="stickyHeader-"],
div.emojiPicker-6YCk8a,
div.header-1XpmZs,
div.popoutContainer-2wbmiM,
div.userPopoutOuter-3AVBmJ,
{
&:extend(.acrylic all);
}
.wrapper-1NNaWG::after {
display: none;
}
// status picker
#account-status-picker + div.layer-2aCOJ3 {
div.submenu-1apzyU {
top: -8px;
}
div.scroller-1bVxF5 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
.separator-1So4YB
{ &:extend(.hide); }
& > div.item-1OdjEX {
padding: 8px;
margin: 0;
& > div {
padding: 0;
& > div.status-qmUf7L,
& > div.description-22_U3B,
{ &:extend(.hide); }
}
}
svg {
width: 16px;
height: 16px;
margin-left: 2px;
}
}
}
// new invite with splash style
div[id^="message-accessories-"] {
& > div[class^="messageAttachment-"] {
width: 100%;
}
& > div[class^="wrapper-"] {
position: relative;
div[class^="inviteSplash-"] {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
filter: brightness(50%);
& ~ * {
position: relative;
z-index: 1;
}
}
}
}
div.saveNoticeContainer-3t-pI1 {
width: calc(100% - 60pt);
}
#channels ul {
& > li.containerDefault-YUSmu3,
& > li.container-1Bj0eq {
margin-left: @round;
}
div.content-1gYQeQ {
margin: 0;
}
.unread-36eUEm {
left: -@round;
}
}
.spoilerText-27bIiA {
&.hidden-3B-Rum {
&:extend(.acrylic all);
position: relative;
background: unset !important;
user-select: none;
}
.inlineContent-2YnoDy {
opacity: 1 !important;
margin: 0 (@round / 2);
z-index: -2;
position: relative;
}
}

View file

@ -1,32 +0,0 @@
/** 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";

View file

@ -1,31 +0,0 @@
.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;
}

View file

@ -1,53 +0,0 @@
// 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-"] {