From 8d42ec624f7567ee87572b1bea1ac642eb276494 Mon Sep 17 00:00:00 2001 From: delta Date: Tue, 24 Jan 2023 04:35:59 +0100 Subject: [PATCH] init --- manifest.json | 32 ++--- scripts/build.ts | 2 +- src/_colors.scss | 21 +++ src/_vars.scss | 11 ++ src/main.css | 216 ----------------------------- src/main.scss | 2 + src/popups/_index.scss | 1 + src/popups/_menu.scss | 7 + src/views/_index.scss | 4 + src/views/chat/_index.scss | 1 + src/views/chat/_message_box.scss | 14 ++ src/views/global/_colors.scss | 150 ++++++++++++++++++++ src/views/global/_index.scss | 3 + src/views/global/_view.scss | 11 ++ src/views/global/_wildcard.scss | 3 + src/views/servers/_index.scss | 1 + src/views/servers/_view.scss | 9 ++ src/views/sidebar/_index.scss | 1 + src/views/sidebar/_user_panel.scss | 91 ++++++++++++ 19 files changed, 347 insertions(+), 233 deletions(-) create mode 100644 src/_colors.scss create mode 100644 src/_vars.scss delete mode 100644 src/main.css create mode 100644 src/main.scss create mode 100644 src/popups/_index.scss create mode 100644 src/popups/_menu.scss create mode 100644 src/views/_index.scss create mode 100644 src/views/chat/_index.scss create mode 100644 src/views/chat/_message_box.scss create mode 100644 src/views/global/_colors.scss create mode 100644 src/views/global/_index.scss create mode 100644 src/views/global/_view.scss create mode 100644 src/views/global/_wildcard.scss create mode 100644 src/views/servers/_index.scss create mode 100644 src/views/servers/_view.scss create mode 100644 src/views/sidebar/_index.scss create mode 100644 src/views/sidebar/_user_panel.scss diff --git a/manifest.json b/manifest.json index e275d75..ee51e2a 100644 --- a/manifest.json +++ b/manifest.json @@ -1,18 +1,18 @@ { - "id": "dev.replugged.ThemeTemplate", - "name": "Theme Template", - "description": "A theme template", - "author": { - "name": "replugged", - "discordID": "1000992611840049192", - "github": "replugged-org" - }, - "version": "1.0.2", - "updater": { - "type": "github", - "id": "replugged-org/theme-template" - }, - "license": "MIT", - "type": "replugged-theme", - "main": "src/main.css" + "id": "dev.delta.Prismite", + "name": "Prismite", + "description": "A minimalistic theme made to be easy on the eyes", + "author": { + "name": "Delta", + "discordID": "1000992611840049192", + "github": "replugged-org" + }, + "version": "1.0.2", + "updater": { + "type": "github", + "id": "replugged-org/theme-template" + }, + "license": "MIT", + "type": "replugged-theme", + "main": "src/main.scss" } diff --git a/scripts/build.ts b/scripts/build.ts index 8c475d8..71278f3 100644 --- a/scripts/build.ts +++ b/scripts/build.ts @@ -6,7 +6,7 @@ import { join } from "path"; const manifest: Theme = _manifest; -const main = manifest.main || "src/main.css"; +const main = manifest.main; const splash = manifest.splash || (existsSync("src/splash.css") ? "src/splash.css" : undefined); const mainBundler = new Parcel({ diff --git a/src/_colors.scss b/src/_colors.scss new file mode 100644 index 0000000..2c2fc4f --- /dev/null +++ b/src/_colors.scss @@ -0,0 +1,21 @@ +$bg-dark: #1e232b; +$bg: #222831; +$bg-bright: #242a34; +$bg-brighter: #2c3440; + +$fg-dark: #8893a5; +$fg: #dfe2e7; +$fg-bright: #e2e4e9; + +$red: #db504a; +$red-bright: #de615c; +$green: #47e2b1; +$green-bright: #59e4b8; +$yellow: #f5ad44; +$yellow-bright: #f6b556; +$blue: #448bf5; +$blue-bright: #5696f6; +$pink: #f786aa; +$pink-bright: #f792b2; +$cyan: #45e1df; +$cyan-bright: #57e3e2; diff --git a/src/_vars.scss b/src/_vars.scss new file mode 100644 index 0000000..834bf40 --- /dev/null +++ b/src/_vars.scss @@ -0,0 +1,11 @@ +@use "sass:math"; + +// tldr as to why this exists: i wanna use the same values as in my awesome config so i want to have a dpi function +$dpi: 120; +@function dpi($power) { + @return math.round(math.div($power, 96) * 120); +} + +$roundness: dpi(8px); +$border-width: dpi(1.5px); +$padding: dpi(4px); diff --git a/src/main.css b/src/main.css deleted file mode 100644 index 4e21d1a..0000000 --- a/src/main.css +++ /dev/null @@ -1,216 +0,0 @@ -/* Credit to https://github.com/Overimagine1/old-discord-font */ - -@font-face { - font-family: Whitney; - font-style: normal; - font-weight: 300; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/46933da896ba96126074286056614542.woff2) - format("woff2"); -} -@font-face { - font-family: Whitney; - font-style: italic; - font-weight: 300; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/1651ce6325c0da043476ace0bec3971b.woff2) - format("woff2"); -} -@font-face { - font-family: Whitney; - font-style: normal; - font-weight: 400; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/24bda95d153a319704c33329f3ab84bb.woff2) - format("woff2"); -} -@font-face { - font-family: Whitney; - font-style: italic; - font-weight: 400; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/7f18f1d5ab6ded7cf71bbc1f907ee3d4.woff2) - format("woff2"); -} -@font-face { - font-family: Whitney; - font-style: normal; - font-weight: 500; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/cf4a8a10bbdf9b775fad41e0b9921c84.woff2) - format("woff2"); -} -@font-face { - font-family: Whitney; - font-style: italic; - font-weight: 500; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/9cfa747e897c772d25efd8e4a42a005e.woff2) - format("woff2"); -} -@font-face { - font-family: Whitney; - font-style: normal; - font-weight: 600; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/f9e7047f6447547781512ec4b977b2ab.woff2) - format("woff2"); -} -@font-face { - font-family: Whitney; - font-style: italic; - font-weight: 600; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/21070f52a8a6a61edef9785eaf303fb8.woff2) - format("woff2"); -} -@font-face { - font-family: Whitney; - font-style: normal; - font-weight: 700; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/f9c8fcfa7dcc5d6a291a6ebbe3bb847e.woff2) - format("woff2"); -} -@font-face { - font-family: Whitney; - font-style: italic; - font-weight: 700; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/5e1649183589023fb24667a369af585d.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Normal; - font-style: normal; - font-weight: 300; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/ab688947d482808a0b3347f84ebb17a9.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Normal; - font-style: italic; - font-weight: 300; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/0635f419b122d24f9f60ac4d1066cbc6.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Normal; - font-style: normal; - font-weight: 400; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/91dcabd038a2e07ea6fbe7ddb625ecfb.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Normal; - font-style: italic; - font-weight: 400; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/ea053183733605b24806f222b067b1e1.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Normal; - font-style: normal; - font-weight: 500; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/9491a199bd318f1fc38711fb5067f401.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Normal; - font-style: italic; - font-weight: 500; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/f0cf30536a7fa447f0c45fdb3b2a6f28.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Normal; - font-style: normal; - font-weight: 700; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/7d66dfcf8e39f27f163fba8d79577fd8.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Normal; - font-style: italic; - font-weight: 700; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/9a07cb5ae387a52309b7198543ae5e02.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Nord; - font-style: normal; - font-weight: 300; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/5e6f352adb4a6b55ed230f2f91769156.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Nord; - font-style: italic; - font-weight: 300; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/30b475dcfa1e8b74d815946e4c18ee09.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Nord; - font-style: normal; - font-weight: 400; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/1ace668db419a5014cf75bc116321af3.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Nord; - font-style: italic; - font-weight: 400; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/50510b66614a2f395530c61b7c9b6827.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Nord; - font-style: normal; - font-weight: 500; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/9e94673570e295b6fb5d4456c4211015.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Nord; - font-style: italic; - font-weight: 500; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/6603a2fb4d2bc997e023972a51938144.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Nord; - font-style: normal; - font-weight: 700; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/87c79174865938aedf188b7344fb0428.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Nord; - font-style: italic; - font-weight: 700; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/d93311938f51e8608a5d5cb2ea975157.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Nord; - font-style: normal; - font-weight: 800; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/bc5af8e71e27d363e2eeac75c9628922.woff2) - format("woff2"); -} -@font-face { - font-family: ABC Ginto Nord; - font-style: italic; - font-weight: 800; - src: url(https://cdn.jsdelivr.net/gh/Overimagine1/old-discord-font/fonts/dc407fd65057fce34a56bf7b6ebb0b9f.woff2) - format("woff2"); -} - -:root { - --font-primary: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif; - --font-display: "ABC Ginto Normal", "Helvetica Neue", Helvetica, Arial, sans-serif; - --font-headline: "ABC Ginto Nord", "Helvetica Neue", Helvetica, Arial, sans-serif; - --font-code: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", - "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, - "Courier New", Courier, monospace; - --font-korean: Whitney, "Apple SD Gothic Neo", NanumBarunGothic, "\B9D1\C740 \ACE0\B515", - "Malgun Gothic", Gulim, 굴림, Dotum, 돋움, "Helvetica Neue", Helvetica, Arial, sans-serif; - --font-japanese: Whitney, "Hiragino Sans", "\30D2\30E9\30AE\30CE\89D2\30B4 ProN W3", - "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Osaka, "MS PGothic", "Helvetica Neue", Helvetica, - Arial, sans-serif; - --font-chinese-simplified: Whitney, "Microsoft YaHei New", 微软雅黑, "Microsoft Yahei", - "Microsoft JhengHei", 宋体, SimSun, "Helvetica Neue", Helvetica, Arial, sans-serif; - --font-chinese-traditional: Whitney, "Microsoft JhengHei", 微軟正黑體, "Microsoft JhengHei UI", - "Microsoft YaHei", 微軟雅黑, 宋体, SimSun, "Helvetica Neue", Helvetica, Arial, sans-serif; -} diff --git a/src/main.scss b/src/main.scss new file mode 100644 index 0000000..8ce8ea3 --- /dev/null +++ b/src/main.scss @@ -0,0 +1,2 @@ +@use "views"; +@use "popups"; diff --git a/src/popups/_index.scss b/src/popups/_index.scss new file mode 100644 index 0000000..afe8ef6 --- /dev/null +++ b/src/popups/_index.scss @@ -0,0 +1 @@ +@forward "menu"; diff --git a/src/popups/_menu.scss b/src/popups/_menu.scss new file mode 100644 index 0000000..4e86a03 --- /dev/null +++ b/src/popups/_menu.scss @@ -0,0 +1,7 @@ +@use "../vars" as v; +@use "../colors" as c; + +.menu-1QACrS { + border-radius: v.$roundness; + border: v.$border-width solid c.$bg-brighter; +} diff --git a/src/views/_index.scss b/src/views/_index.scss new file mode 100644 index 0000000..0037d89 --- /dev/null +++ b/src/views/_index.scss @@ -0,0 +1,4 @@ +@forward "chat"; +@forward "global"; +@forward "servers"; +@forward "sidebar"; diff --git a/src/views/chat/_index.scss b/src/views/chat/_index.scss new file mode 100644 index 0000000..5fbba4f --- /dev/null +++ b/src/views/chat/_index.scss @@ -0,0 +1 @@ +@forward "message_box" diff --git a/src/views/chat/_message_box.scss b/src/views/chat/_message_box.scss new file mode 100644 index 0000000..a5b50ce --- /dev/null +++ b/src/views/chat/_message_box.scss @@ -0,0 +1,14 @@ +@use "../../vars" as v; +@use "../../colors" as c; + +.channelTextArea-1FufC0 { + margin-bottom: 8; + margin-top: 8; + border-radius: v.$roundness; + border: v.$border-width solid c.$bg-brighter; + box-sizing: border-box; + + .scrollableContainer-15eg7h { + + } +} diff --git a/src/views/global/_colors.scss b/src/views/global/_colors.scss new file mode 100644 index 0000000..67b39f5 --- /dev/null +++ b/src/views/global/_colors.scss @@ -0,0 +1,150 @@ +@use "../../colors" as c; + +:root { + --brand-experiment: #{c.$yellow}; +} + +.theme-dark { + --header-primary: #{c.$fg}; + --header-secondary: #{c.$fg-dark}; + --text-normal: #{c.$fg}; + --text-muted: #{c.$fg-dark}; + --text-link: #{c.$yellow}; + --text-link-low-saturation: var(--text-link); + --text-positive: #{c.$green}; + --text-warning: #{c.$yellow}; + --text-danger: #{c.$red}; + --text-brand: #{c.$yellow}; + --interactive-normal: #{c.$fg}; + --interactive-hover: #{c.$fg-bright}; + --interactive-active: #{c.$fg-bright}; + --interactive-muted: #{c.$fg-dark}; + --mention-foreground: #{c.$fg}; + --mention-background: #{c.$yellow}#{33}; + --background-primary: #{c.$bg}; + --background-secondary: #{c.$bg}; + --background-secondary-alt: #{c.$bg}; + --background-tertiary: #{c.$bg}; + --background-accent: #{c.$bg}; + --background-floating: #{c.$bg}; + --background-nested-floating: #{c.$bg}; + --background-mobile-primary: #{c.$bg}; + --background-mobile-secondary: #{c.$bg}; + --chat-background: #{c.$bg}; + --chat-border: #{c.$bg}; + --chat-input-container-background: #{c.$bg}; + --background-modifier-hover: #{c.$bg}; + --background-modifier-active: #{c.$bg}; + --background-modifier-selected: #{c.$bg}; + --background-modifier-accent: #{c.$bg}; + --info-positive-background: #{c.$green}#{33}; + --info-positive-foreground: #{c.$green}; + --info-positive-text: #{c.$fg}; + --info-warning-background: #{c.$yellow}#{33}; + --info-warning-foreground: #{c.$yellow}; + --info-warning-text: #{c.$fg}; + --info-danger-background: #{c.$red}#{33}; + --info-danger-foreground: #{c.$red}; + --info-danger-text: #{c.$fg}; + --info-help-background: #{c.$yellow}#{33}; + --info-help-foreground: #{c.$yellow}; + --info-help-text: #{c.$fg}; + --status-positive-background: #{c.$green}; + --status-positive-text: #{c.$fg}; + --status-warning-background: #{c.$yellow}; + --status-warning-text: #{c.$fg}; + --status-danger-background: #{c.$red}; + --status-danger-text: #{c.$fg}; + --status-positive: #{c.$green}; + --status-warning: #{c.$yellow}; + --status-danger: #{c.$red}; + --button-danger-background: #{c.$red}; + --button-danger-background-hover: #{c.$red-bright}; + --button-danger-background-active: #{c.$red-bright}; + --button-danger-background-disabled: #{c.$bg-dark}; + --button-positive-background: #{c.$green}; + --button-positive-background-hover: #{c.$green-bright}; + --button-positive-background-active: #{c.$green-bright}; + --button-positive-background-disabled: #{c.$bg-dark}; + --button-secondary-background: #{c.$bg}; + --button-secondary-background-hover: #{c.$bg-bright}; + --button-secondary-background-active: #{c.$bg-bright}; + --button-secondary-background-disabled: #{c.$bg-dark}; + --button-outline-danger-text: #{c.$fg}; + --button-outline-danger-border: #{c.$red}; + --button-outline-danger-background: #{c.$bg}#{00}; + --button-outline-danger-background-hover: #{c.$red-bright}; + --button-outline-danger-text-hover: #{c.$fg}; + --button-outline-danger-border-hover: #{c.$red-bright}; + --button-outline-danger-background-active: #{c.$red-bright}; + --button-outline-danger-text-active: #{c.$fg}; + --button-outline-danger-border-active: #{c.$red-bright}; + --button-outline-positive-text: #{c.$fg}; + --button-outline-positive-border: #{c.$green}; + --button-outline-positive-background: #{c.$bg}#{00}; + --button-outline-positive-background-hover: #{c.$green-bright}; + --button-outline-positive-text-hover: #{c.$fg}; + --button-outline-positive-border-hover: #{c.$green-bright}; + --button-outline-positive-background-active: #{c.$green-bright}; + --button-outline-positive-text-active: #{c.$fg}; + --button-outline-positive-border-active: #{c.$green-bright}; + --button-outline-brand-text: #{c.$fg}; + --button-outline-brand-border: #{c.$yellow}; + --button-outline-brand-background: #{c.$bg}#{00}; + --button-outline-brand-background-hover: #{c.$yellow-bright}; + --button-outline-brand-text-hover: #{c.$fg}; + --button-outline-brand-border-hover: #{c.$yellow-bright}; + --button-outline-brand-background-active: #{c.$yellow-bright}; + --button-outline-brand-text-active: #{c.$fg}; + --button-outline-brand-border-active: #{c.$yellow-bright}; + --button-outline-primary-text: #{c.$fg}; + --button-outline-primary-border: #{c.$bg-brighter}; + --button-outline-primary-background: #{c.$bg}#{00}; + --button-outline-primary-background-hover: #{c.$bg-bright}; + --button-outline-primary-text-hover: #{c.$fg}; + --button-outline-primary-border-hover: #{c.$bg-brighter}; + --button-outline-primary-background-active: #{c.$bg-bright}; + --button-outline-primary-text-active: #{c.$fg}; + --button-outline-primary-border-active: #{c.$bg-brighter}; + --modal-background: #{c.$bg}; + --modal-footer-background: #{c.$bg}; + --scrollbar-thin-thumb: #{c.$yellow}; + --scrollbar-thin-track: transparent; + --scrollbar-auto-thumb: #{c.$yellow}; + --scrollbar-auto-track: #{c.$bg}; + --scrollbar-auto-scrollbar-color-thumb: #{c.$yellow}; + --scrollbar-auto-scrollbar-color-track: #{c.$bg}; + --input-background: v#{c.$bg}; + --input-placeholder-text: #{c.$fg-dark}; + --logo-primary: #{c.$fg}; + --focus-primary: var(--focus-primary-500); + --control-brand-foreground: var(--brand-360); + --control-brand-foreground-new: var(--brand-new-360); + --background-mentioned: transparent; + --background-mentioned-hover: transparent; + --background-message-hover: transparent; + --background-message-automod: hsl(var(--status-red-500-hsl)/0.05); + --background-message-automod-hover: hsl(var(--status-red-500-hsl)/0.1); + --background-message-highlight: hsl(var(--brand-360-hsl)/0.08); + --background-message-highlight-hover: hsl(var(--brand-360-hsl)/0.06); + --channels-default: var(--primary-dark-345); + --channel-icon: var(--primary-dark-360); + --channel-text-area-placeholder: #{c.$fg-dark}; + --channeltextarea-background: #{c.$bg}; + --activity-card-background: #{c.$bg}; + --textbox-markdown-syntax: var(--primary-dark-360); + --spoiler-revealed-background: var(--primary-dark-660); + --spoiler-hidden-background: var(--primary-dark-700); + --android-navigation-bar-background: var(--primary-dark-830); + --android-ripple: hsl(var(--white-500-hsl)/0.07); + --deprecated-card-bg: hsl(var(--primary-dark-700-hsl)/0.6); + --deprecated-card-editable-bg: hsl(var(--primary-dark-700-hsl)/0.3); + --deprecated-store-bg: var(--primary-dark-600); + --deprecated-quickswitcher-input-background: var(--primary-dark-400); + --deprecated-quickswitcher-input-placeholder: hsl(var(--white-500-hsl)/0.3); + --deprecated-text-input-bg: var(--primary-dark-700); + --deprecated-text-input-border: hsl(var(--black-500-hsl)/0.3); + --deprecated-text-input-border-hover: var(--primary-dark-900); + --deprecated-text-input-border-disabled: var(--primary-dark-700); + --deprecated-text-input-prefix: var(--primary-dark-200); +} diff --git a/src/views/global/_index.scss b/src/views/global/_index.scss new file mode 100644 index 0000000..2b775a4 --- /dev/null +++ b/src/views/global/_index.scss @@ -0,0 +1,3 @@ +@forward "colors"; +@forward "wildcard"; +@forward "view"; diff --git a/src/views/global/_view.scss b/src/views/global/_view.scss new file mode 100644 index 0000000..0e573ee --- /dev/null +++ b/src/views/global/_view.scss @@ -0,0 +1,11 @@ +@use "../../vars" as v; +@use "../../colors" as c; + +.container-1eFtFS { + padding: v.$padding; +} + +.base-2jDfDU { + overflow: unset; + max-width: calc(100vw - 72px - v.$padding * 2); +} diff --git a/src/views/global/_wildcard.scss b/src/views/global/_wildcard.scss new file mode 100644 index 0000000..1070cac --- /dev/null +++ b/src/views/global/_wildcard.scss @@ -0,0 +1,3 @@ +* { + box-shadow: none !important; +} diff --git a/src/views/servers/_index.scss b/src/views/servers/_index.scss new file mode 100644 index 0000000..e74d537 --- /dev/null +++ b/src/views/servers/_index.scss @@ -0,0 +1 @@ +@forward "view"; diff --git a/src/views/servers/_view.scss b/src/views/servers/_view.scss new file mode 100644 index 0000000..9632bb2 --- /dev/null +++ b/src/views/servers/_view.scss @@ -0,0 +1,9 @@ +@use "../../vars" as v; +@use "../../colors" as c; + +.guilds-2JjMmN { + border-radius: v.$roundness; + border: v.$border-width solid c.$bg-brighter; + height: 75%; + box-sizing: border-box; +} diff --git a/src/views/sidebar/_index.scss b/src/views/sidebar/_index.scss new file mode 100644 index 0000000..93c7692 --- /dev/null +++ b/src/views/sidebar/_index.scss @@ -0,0 +1 @@ +@forward "user_panel"; diff --git a/src/views/sidebar/_user_panel.scss b/src/views/sidebar/_user_panel.scss new file mode 100644 index 0000000..f17c6ab --- /dev/null +++ b/src/views/sidebar/_user_panel.scss @@ -0,0 +1,91 @@ +@use "../../vars" as v; +@use "../../colors" as c; + +.panels-3wFtMD { + position: absolute; + bottom: 0; + left: -72px; + width: 72px; + // width: calc(32px + v.$padding * 2); + height: calc(25% - v.$padding); + box-sizing: border-box; + border-radius: v.$roundness; + border: v.$border-width solid c.$bg-brighter; + padding: v.$padding; + display: flex; + align-items: center; + justify-content: center; + + > .container-YkUktl { + height: fit-content; + margin-bottom: 0; + padding: 0; + flex-direction: column-reverse; + gap: v.$padding; + + > .avatarWrapper-1B9FTW { + min-width: unset; + padding: 0; + margin: 0; + height: 44px; + width: 44px; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + border-radius: v.$roundness; + border: v.$border-width solid c.$bg-brighter; + + > .nameTag-sc-gpq { + display: none; + } + + .avatar-1EWyVD { + // height: 44px !important; + // width: 44px !important; + // display: flex; + // justify-content: center; + // align-items: center; + + > svg { + // display: flex; + // justify-content: center; + // align-items: center; + // height: 52px; + // width: 52px; + + // > foreignObject { + // height: 44px !important; + // width: 44px !important; + // } + } + } + + // .avatar-1EWyVD { + // transform; + // } + + foreignObject { + mask: none; + + .avatar-b5OQ1N { + border-radius: v.$roundness; + } + } + } + + > :last-child { + flex-direction: column; + gap: v.$padding; + + > button { + box-sizing: border-box; + border-radius: v.$roundness; + border: v.$border-width solid c.$bg-brighter; + padding: v.$padding * 2; + height: unset; + width: unset; + } + } + } +}