diff --git a/.gitignore b/.gitignore index ed2c1f0..50c74f4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,2 @@ -out -node_modules -package-lock.json - diskort.xpi btfl.css diff --git a/Makefile b/Makefile deleted file mode 100644 index 3739d46..0000000 --- a/Makefile +++ /dev/null @@ -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 $@ $< diff --git a/btfl.less b/btfl.less new file mode 100644 index 0000000..e5b2269 --- /dev/null +++ b/btfl.less @@ -0,0 +1,31 @@ +/** DisKort + * (c) Er2 2022 + * 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"; diff --git a/js/bg.js b/js/bg.js new file mode 100644 index 0000000..cc93929 --- /dev/null +++ b/js/bg.js @@ -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: ['']}, ['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: ['']}, ['blocking', 'requestHeaders'] +); + diff --git a/js/inj.js b/js/inj.js new file mode 100644 index 0000000..a98d84f --- /dev/null +++ b/js/inj.js @@ -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(); diff --git a/makeext.sh b/makeext.sh new file mode 100755 index 0000000..717ad56 --- /dev/null +++ b/makeext.sh @@ -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" diff --git a/manifest.json b/manifest.json index 79ef808..02301e1 100644 --- a/manifest.json +++ b/manifest.json @@ -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"] diff --git a/package.json b/package.json deleted file mode 100644 index d8c8d7a..0000000 --- a/package.json +++ /dev/null @@ -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" - } -} diff --git a/readme.org b/readme.org index 3373187..43f2eaf 100644 --- a/readme.org +++ b/readme.org @@ -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. diff --git a/src/bd.less b/src/bd.less new file mode 100644 index 0000000..bea3090 --- /dev/null +++ b/src/bd.less @@ -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; + } + } +} + diff --git a/src/style/dimmer.less b/src/dimmer.less similarity index 75% rename from src/style/dimmer.less rename to src/dimmer.less index 9721da8..ff46c3f 100644 --- a/src/style/dimmer.less +++ b/src/dimmer.less @@ -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); } } diff --git a/src/style/fixes.less b/src/fixes.less similarity index 62% rename from src/style/fixes.less rename to src/fixes.less index 0dfeea6..985d72c 100644 --- a/src/style/fixes.less +++ b/src/fixes.less @@ -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; +} + diff --git a/src/func.less b/src/func.less new file mode 100644 index 0000000..346d903 --- /dev/null +++ b/src/func.less @@ -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); } +} + diff --git a/src/style/hide.less b/src/hide.less similarity index 78% rename from src/style/hide.less rename to src/hide.less index c91986d..ddc67fc 100644 --- a/src/style/hide.less +++ b/src/hide.less @@ -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; } + diff --git a/src/style/materials.less b/src/materials.less similarity index 99% rename from src/style/materials.less rename to src/materials.less index 9735eaa..0c8fcbb 100644 --- a/src/style/materials.less +++ b/src/materials.less @@ -70,7 +70,7 @@ div[class^="chat-"] } &::before, &::after { - border-radius: inherit; + .radius(inherit); position: absolute; top: 0; bottom: 0; left: 0; right: 0; diff --git a/src/style/nitro.less b/src/nitro.less similarity index 70% rename from src/style/nitro.less rename to src/nitro.less index e168362..9182fab 100644 --- a/src/style/nitro.less +++ b/src/nitro.less @@ -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(); + diff --git a/src/people.less b/src/people.less new file mode 100644 index 0000000..23cfc85 --- /dev/null +++ b/src/people.less @@ -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; + } +} diff --git a/src/profile.less b/src/profile.less new file mode 100644 index 0000000..48005ff --- /dev/null +++ b/src/profile.less @@ -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%; +} + diff --git a/src/script/bg.coffee b/src/script/bg.coffee deleted file mode 100644 index fb503d8..0000000 --- a/src/script/bg.coffee +++ /dev/null @@ -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: [''] - , ['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: [''] - , ['blocking', 'requestHeaders'] -) diff --git a/src/script/inj.coffee b/src/script/inj.coffee deleted file mode 100644 index c58813d..0000000 --- a/src/script/inj.coffee +++ /dev/null @@ -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() diff --git a/src/script/webpack.coffee b/src/script/webpack.coffee deleted file mode 100644 index d8443a4..0000000 --- a/src/script/webpack.coffee +++ /dev/null @@ -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() diff --git a/src/style/settings.less b/src/settings.less similarity index 54% rename from src/style/settings.less rename to src/settings.less index e15330f..bcf5071 100644 --- a/src/style/settings.less +++ b/src/settings.less @@ -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; } diff --git a/src/style.less b/src/style.less new file mode 100644 index 0000000..8c25526 --- /dev/null +++ b/src/style.less @@ -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; + } +} + diff --git a/src/style/base.less b/src/style/base.less deleted file mode 100644 index 1b00924..0000000 --- a/src/style/base.less +++ /dev/null @@ -1,32 +0,0 @@ -/** DisKort - * (c) Er2 2022 - * 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"; diff --git a/src/style/func.less b/src/style/func.less deleted file mode 100644 index d3cef81..0000000 --- a/src/style/func.less +++ /dev/null @@ -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; -} - diff --git a/src/style/mobile.less b/src/style/mobile.less deleted file mode 100644 index 079e707..0000000 --- a/src/style/mobile.less +++ /dev/null @@ -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-"] { - 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%; - } -} diff --git a/src/style/people.less b/src/style/people.less deleted file mode 100644 index fa78fd3..0000000 --- a/src/style/people.less +++ /dev/null @@ -1,22 +0,0 @@ - -[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; - } -} diff --git a/src/style/profile.less b/src/style/profile.less deleted file mode 100644 index c8d3742..0000000 --- a/src/style/profile.less +++ /dev/null @@ -1,146 +0,0 @@ - -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); - } -} diff --git a/src/style/style.less b/src/style/style.less deleted file mode 100644 index ec7198b..0000000 --- a/src/style/style.less +++ /dev/null @@ -1,149 +0,0 @@ -.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); -} diff --git a/src/style/ui.less b/src/ui.less similarity index 58% rename from src/style/ui.less rename to src/ui.less index 37fde29..4b18525 100644 --- a/src/style/ui.less +++ b/src/ui.less @@ -9,7 +9,7 @@ div[class^="slider-"] { width: @rounder; height: @rounder; border: none; - border-radius: @half; + .radius(@half); top: @half * 1.5; margin-top: unset; margin-left: -@half; @@ -19,35 +19,43 @@ div[class^="slider-"] { // tabs div[role="tab"], -div[class^="tabBarItem-"] { - .bottom-border(); +div.tabBarItem-30Te4- { + .top-border(16px) !important; + .bottom-border(4px) !important; margin: 0; margin-top: 8px; margin-right: 16px; padding: 4px 8px; &:hover, - &[class*="selected-"] { + &.selected-g-kMVV { background-color: var(--interactive-muted) !important; color: var(--text-normal) !important; } + + div.textBadge-1fdDPJ { + margin-left: 4px; + } } // slider +div.bd-switch-body, div[class^="container-"] { - &[class*="disabled-"] { + &:extend(.rounder); + + &[class*="disabled"] { cursor: not-allowed; } - svg[class^="slider-"] { + & > svg[class*="slider"] { width: 16px !important; height: 16px !important; - border-radius: 50%; + .radius(50%); margin: 4px 8px; margin-right: 0; background-color: white; - > * { + & > * { display: none; } } @@ -57,17 +65,45 @@ div[class^="radioBar-"] { border: none; } +div[class^="card-"], +div.bd-server-card { + & > div[class*="header"], + & > div[class*="Header"] { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + + div[class^="coverWrapper"], + div[class^="splash"] { + filter: brightness(0.5); + } + .bd-server-icon, + & > div[class*="icon"], + & > div[class*="Icon"] { + position: relative; + width: 42px; + height: 42px; + overflow: hidden; + padding: 5px; + } + } + & > div[class*="info"], + & > div[class*="Info"] { + margin-top: 84px; + } +} + // Round div[class^="tabBarItem-"], div[class^="checkbox"], button[class*="button"], +code.inline, { &: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"],