From 96d41aa26e49109f165bbbf61d8e16698af9233b Mon Sep 17 00:00:00 2001 From: delta Date: Sat, 12 Feb 2022 22:38:30 +0200 Subject: [PATCH] We're reaching the nonsense commit message state --- .gitignore | 2 +- Syrup.scss | 7 +++ assets/avatarMask.svg | 2 +- credits.md | 7 ++- src/_chat.scss | 71 +++++++++++++++++--------- src/_header.scss | 5 +- src/_settings.scss | 21 ++++++++ src/_sidebar.scss | 18 +++++-- src/_userPopouts.scss | 69 +++++++++++++------------ src/_vars.scss | 3 +- src/settings/accountCustomization.scss | 0 11 files changed, 139 insertions(+), 66 deletions(-) create mode 100644 src/_settings.scss delete mode 100644 src/settings/accountCustomization.scss diff --git a/.gitignore b/.gitignore index 8286dea..5c7c5ef 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1 @@ -replace.js \ No newline at end of file +r.py \ No newline at end of file diff --git a/Syrup.scss b/Syrup.scss index c7684ef..b6aa66f 100644 --- a/Syrup.scss +++ b/Syrup.scss @@ -1,3 +1,5 @@ +@charset "UTF-8"; + @use "src/header"; @use "src/colors"; @use "src/chat"; @@ -7,4 +9,9 @@ @use "src/headache"; @use "src/dmList"; @use "src/serverList"; +@use "src/settings"; + +* { + font-family: "JetBrains Mono" !important; +} \ No newline at end of file diff --git a/assets/avatarMask.svg b/assets/avatarMask.svg index c8cf121..8ba125c 100644 --- a/assets/avatarMask.svg +++ b/assets/avatarMask.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/credits.md b/credits.md index e952315..34b6b25 100644 --- a/credits.md +++ b/credits.md @@ -3,4 +3,9 @@ ## BLZxRsBEAST#0453 - Fix for the avatar being locked in a circle (https://discord.com/channels/86004744966914048/123136820409139200/939528668529709076) - > Used in src/_userPopouts.scss line 8 and line 36 \ No newline at end of file + > Used in src/_userPopouts.scss line 50 to line 52 and src/_headache.scss + +## [Obscure.#4719](https://github.com/Obscure-Git) +- Code used as a basis for vertical user panel (https://github.com/Obscure-Git/Lavender/blob/main/src/components/panel.css, https://github.com/Obscure-Git/Lavender/blob/main/src/components/serverList.css) + + > Used in src/_serverList line ? and src/_sidebar line ? \ No newline at end of file diff --git a/src/_chat.scss b/src/_chat.scss index c4046f8..08041fe 100644 --- a/src/_chat.scss +++ b/src/_chat.scss @@ -1,31 +1,56 @@ @use "_vars"; -.username-h_Y3Us { /* Usernames in chat*/ - padding-left: 0.5ch; - - &::before { - content: ""; - position: absolute; - width: 100%; - height: 100%; - opacity: 10%; - border-radius: 5px; - padding: 0 0.5ch 0 0; - transform: translateX(-0.5ch); - background-color: currentColor; +.chatContent-3KubbW { + .username-h_Y3Us { /* Usernames in chat*/ + padding-left: 0.5ch; + + &::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + opacity: 10%; + border-radius: 5px; + padding: 0 0.5ch 0 0; + transform: translateX(-0.5ch); + background-color: currentColor; + } + } + + .avatar-2e8lTP { + border-radius: vars.$avatar-roundness; + } + + .embedFull-1HGV2S { /* Embeds */ + border-top: 7px solid #fff; + border-left: none; + border-radius: 0; + } + + .container-2sjPya { /* Attachments */ + } -} -.avatar-2e8lTP { - border-radius: vars.$avatar-roundness; -} + .form-3gdLxP { + display: flex; + flex-direction: column-reverse; -.embedFull-1HGV2S { /* Embeds */ - border-top: 7px solid #fff; - border-left: none; - border-radius: 0; -} + &:before { + background: none; + } -.container-2sjPya { /* Attachments */ + .base-3bcbY3 { + position: static; + bottom: auto; + + } + .channelTextArea-1FufC0 { + margin-bottom: 8px; + + .scrollableContainer-15eg7h { + border-radius: vars.$avatar-roundness; + } + } + } } \ No newline at end of file diff --git a/src/_header.scss b/src/_header.scss index 554f34a..0405fbb 100644 --- a/src/_header.scss +++ b/src/_header.scss @@ -7,4 +7,7 @@ * @version 0.1.0 */ -// Have to do this in order to make the header first thing in the file \ No newline at end of file +// Have to do this in order to make the header first thing in the file + +// @import url("https://fonts.googleapis.com/css2?family=DM+Mono&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap'); \ No newline at end of file diff --git a/src/_settings.scss b/src/_settings.scss new file mode 100644 index 0000000..96aa8af --- /dev/null +++ b/src/_settings.scss @@ -0,0 +1,21 @@ +.layer-86YKbF { + .info-1sUqUG::after { + content: "Syrup made with by Delta"; + background: url(https://discord.com/assets/0483f2b648dcc986d01385062052ae1c.svg) 13em center no-repeat; + color: var(--text-muted); + font-size: 12px; + line-height: 16px; + } + + .contentRegion-3HkfJJ { + background-color: 0; + + .contentColumn-1C7as6 { + max-width: unset; + } + } + + .sidebarRegion-1VBisG { + max-width: 218px; + } +} \ No newline at end of file diff --git a/src/_sidebar.scss b/src/_sidebar.scss index f365f4b..a1b3296 100644 --- a/src/_sidebar.scss +++ b/src/_sidebar.scss @@ -2,7 +2,6 @@ .sidebar-1tnWFu { > .container-1NXEtd { - #channels { .containerDefault-YUSmu3 { .unread-36eUEm { @@ -13,11 +12,16 @@ transform: translateY(-50%); } - .content-1gYQeQ > a > .name-28HaxV { - transition: transform 0.2s ease-in-out; + .content-1gYQeQ { + + + > a > .name-28HaxV { + transition: transform 0.2s ease-in-out; + } } - &:hover .content-1gYQeQ > a > .name-28HaxV { + &:hover .content-1gYQeQ > a > .name-28HaxV, + > modeSelected-3DmyhH > .content-1gYQeQ > a > .name-28HaxV { transform: translateX(5px); } } @@ -27,6 +31,9 @@ } > .panels-3wFtMD { + // width: 48px; + // height: 92px; + > .container-YkUktl { .avatar-b5OQ1N { border-radius: vars.$avatar-roundness; @@ -98,4 +105,5 @@ 100% { transform: rotate(360deg); } -} \ No newline at end of file +} + diff --git a/src/_userPopouts.scss b/src/_userPopouts.scss index 13391c2..4985600 100644 --- a/src/_userPopouts.scss +++ b/src/_userPopouts.scss @@ -1,4 +1,5 @@ @use "_vars"; +@use "sass:list"; .userPopout-2j1gM4 { width: 550px !important; @@ -9,7 +10,7 @@ "messagebox messagebox body" "banner banner body"; grid-template-columns: 92px auto 250px; - grid-template-rows: calc(16px + 92px + 8px /*+ 20px*/) 40px auto; + grid-template-rows: calc(16px + 92px + 8px + 24px) 40px auto; background-color: #18191c99; backdrop-filter: blur(vars.$blur-level); @@ -20,7 +21,7 @@ &::before { content: ""; - height: 92px; + height: calc(92px); width: calc(100% - 32px - 250px); margin: 16px; background-color: #18191c99; @@ -73,8 +74,15 @@ } .pointerEvents-9SZWKj { - x: 71; - y: 71; + x: 0; + y: 0; + + width: 80px; + height: 80px; + + r: 5; + + mask: none; } } @@ -97,33 +105,27 @@ width: calc(100% - 32px); z-index: 2; - - //backdrop-filter: blur(5px); - - // &::after { - // content: ""; - // height: 92px; - // width: 92px; - // position: absolute; - // top: 0; - // right: 0; - // border-top-right-radius: vars.$avatar-roundness; - // border-bottom-right-radius: vars.$avatar-roundness; - // background-color: /*var(--background-floating)*/ #18191ce6; - // z-index: -1; - - // //backdrop-filter: blur(5px); - // } + overflow: visible; > .profileBadges-2pItdR { - left: 14px; + left: -80px; right: auto; top: auto; bottom: 6px; + padding: 0px 6px; + + transform: translateY(8px); + + justify-content: start; + min-width: 255px; + + border-radius: vars.$avatar-roundness; + background-color: #18191c99; + backdrop-filter: blur(vars.$blur-level); } > .headerText-1-WmDq { - width: 159.762px; + width: 156px; margin-left: 8px; > h3 { @@ -147,22 +149,23 @@ padding: 36px 0 0 0; + .divider-1wtgZ3 { - background-color: var(--background-modifier-accent);; + background-color: var(--background-modifier-accent); margin-bottom: 12px; height: 1px; } - &::before { + &::after { content: "CUSTOM STATUS"; position: absolute; - top: 0; - left: 0; - width: calc(100% - 10px); + padding-top: 12px; + width: 100%; + font-size: 12px; font-weight: 700; color: var(--header-secondary); - padding-top: 12px; - line-height: 16px + + top: 0; + left: 0; } } @@ -246,16 +249,16 @@ margin-top: 0; background-color: transparent; - border-radius: vars.$avatar-roundness; + .input-2z42oC { background-color: #13161899; border: none; backdrop-filter: blur(vars.$blur-level); + + border-radius: vars.$avatar-roundness; } - - } } diff --git a/src/_vars.scss b/src/_vars.scss index 002ad2d..b43cad4 100644 --- a/src/_vars.scss +++ b/src/_vars.scss @@ -1,3 +1,4 @@ -$avatar-roundness: 5%; +// $avatar-roundness: 5%; +$avatar-roundness: 4px; $blur-level: 10px; $opacity-level: 0.6; \ No newline at end of file diff --git a/src/settings/accountCustomization.scss b/src/settings/accountCustomization.scss deleted file mode 100644 index e69de29..0000000