Merge branch 'scss' of github.com:joshuah345/Discord-Stuff

Themes/Orion/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

Themes/Orion/.github/workflows/compile.yml

@@ -0,0 +1,28 @@
+name: 'Compile SCSS'
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: 'Build CSS'
+    runs-on: 'ubuntu-latest'
+    steps:
+      - name: 'Checkout Repo'
+        uses: 'actions/checkout@v2'
+      - name: 'Setup NodeJS'
+        uses: 'actions/setup-node@v1'
+        with:
+          node-version: 16
+      - name: 'Clean install of dependencies'
+        run: 'npm ci'
+      - name: 'Run build script'
+        run: 'npm run build'
+      - name: 'Deploy'
+        uses: 'peaceiris/actions-gh-pages@v3'
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_branch: 'deploy'
+          publish_dir: './dist'

Themes/Orion/README.md

@@ -0,0 +1,3 @@
+# Orion
+
+an experimental theme.

Themes/Orion/bd-scss.config.js

@@ -0,0 +1,10 @@
+/** @type {import('bd-scss/lib/config').Config} */
+export default {
+	meta: {
+		name: "Orion",
+		author: "joshuah345",
+		version: "0.0.7",
+		description: "an experimental theme.",
+		source: "https://github.com/joshuah345/Discord-Stuff/Themes/Orion"
+	}
+}

Themes/Orion/package.json

@@ -0,0 +1,10 @@
+{
+	"type": "module",
+	"scripts": {
+		"dev": "bd-scss dev",
+		"build": "bd-scss build"
+	},
+	"dependencies": {
+		"bd-scss": "^2.0.14"
+	}
+}

Themes/Orion/src/base.scss

@@ -0,0 +1,4 @@
+// The "build" script will target this file.
+// Generating a "base" file. Example: FrostedGlass.css
+
+@use './theme';

Themes/Orion/src/core/_root.scss

@@ -0,0 +1,14 @@
+// The CSS to be included in your .theme.css file.
+// Addon @imports should be placed here.
+
+*[class*="theme"] {
+
+}
+
+*.theme-light {
+
+}
+
+*.theme-dark {
+
+}

Themes/Orion/src/dev.scss

@@ -0,0 +1,5 @@
+// The "dev" script will target this file.
+// Generating the full theme file.
+
+@use './core/root';
+@use './theme';

Themes/Orion/src/dist.scss

@@ -0,0 +1,4 @@
+// The "build" script will target this file.
+// Generating a theme file. Example: FrostedGlass.theme.css
+
+@use './core/root';

Themes/Orion/src/theme/_index.scss

@@ -0,0 +1,19 @@
+@use './vars';
+
+
+@use 'app';
+@use 'sidebar';
+@use 'guilds';
+@use 'chat';
+@use 'members';
+@use 'pages';
+@use 'popouts';
+@use 'settings';
+// @use 'bd';
+@use 'modals';
+@use 'inputs';
+// @use 'overlays';
+// @use '../addons';
+
+@use 'os';
+// @use 'plugins';

Themes/Orion/src/theme/_vars.scss

@@ -0,0 +1,3 @@
+:root {
+	--theme-version: '0.0.1';
+}

Themes/Orion/src/theme/app/_index.scss

@@ -0,0 +1,9 @@
+// This will be used for parts of Discord that aren't necessarily part of a section,
+// but rather the app as a whole.
+// Examples being: Tooltips, toolbar, scrollbars, ect...
+
+
+// HEADER TRICKS // 
+.title_b7d661 {
+    width: calc(100% - 240px);
+}

Themes/Orion/src/theme/chat/_index.scss

@@ -0,0 +1,2 @@
+// This will be used for chat section.
+// Examples being: Messages, chatbox, typing bar, new/old message bars, ect...

Themes/Orion/src/theme/guilds/_index.scss

@@ -0,0 +1,2 @@
+// This will be used for server list/guilds section.
+// Examples being: Server, folders, add/join server, discovery button.

Themes/Orion/src/theme/inputs/_index.scss

@@ -0,0 +1,2 @@
+// This will be used for any "inputs" that would require user interaction.
+// Examples being: Textboxes, buttons, checkboxes, ect...

Themes/Orion/src/theme/members/_index.scss

@@ -0,0 +1,2 @@
+// This will be used for members section.
+// Examples being: Messages, chatbox, typing bar, new/old message bars, ect...

Themes/Orion/src/theme/modals/_index.scss

@@ -0,0 +1,4 @@
+// This will be used for modals.
+// Examples being: User profile, notification settings, quick switch, ect...
+
+@use './quickswitcher';

Themes/Orion/src/theme/modals/_quickswitcher.scss

@@ -0,0 +1,121 @@
+[class*="layerContainer"] {
+    &:has(.quickswitcher_a3d29a) {
+        .backdrop__7e89b {
+            background: transparent !important;
+        }
+    }
+}
+
+@keyframes heightmax {
+    from {
+        max-height: 0;
+    }
+
+    to {
+        max-height: 600px;
+    }
+}
+
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+[role=dialog] {
+
+    &:has(.quickswitcher_a3d29a) {
+        margin-left: 150px;
+    }
+
+    .container_f03f1d {
+
+        .quickswitcher_a3d29a {
+            opacity: 0;
+            width: 660px;
+            animation: fadein 0.2s 350ms ease-out forwards;
+
+            .match_a540b5 {
+                opacity: 0;;
+            }
+
+
+            .scroller__52ae7>[role=listbox] {
+                transition: height 500ms cubic-bezier(0, 0.21, 0.05, 0.99);
+            }
+
+            >input {
+                animation: fadein 200ms ease forwards;
+            }
+        }
+    }
+}
+
+
+
+#app-mount {
+
+    .searchBar_e4ea2a {
+
+        button {
+            transition: color 200ms ease;
+
+            &::after {
+                content: "";
+                width: 100%;
+                height: 100%;
+                top: 0;
+                position: absolute;
+                border-radius: inherit;
+                display: block;
+            }
+        }
+
+        &:focus-within {
+            button {
+                color: transparent;
+            }
+        }
+    }
+
+    [role=dialog] .rootWithShadow__073a7:not(:has(.modal__6a96b))::after {
+        content: none;
+    }
+
+    @keyframes searchmagic {
+        from {
+            top: 0;
+        }
+
+        to {
+            top: calc(50vh - 180px);
+            height: 380px;
+            width: 660px;
+            border-radius: var(--unity-border-radius);
+        }
+    }
+
+    &:has(.quickswitcher_a3d29a) {
+        .searchBar_e4ea2a {
+
+            button {
+                color: transparent;
+
+                :root.full-motion & {
+                    &::after {
+                        animation: searchmagic 0.3s cubic-bezier(0, 0.21, 0.05, 0.99) forwards;
+                        background-color: var(--unity-background-floating);
+                        backdrop-filter: blur(var(--unity-floating-blur-radius));
+                        transition: background-color 0.1s ease, backdrop-filter 0.2s ease-out;
+                        left: calc(50vw - 660px);
+
+                    }
+                }
+            }
+        }
+    }
+}

Themes/Orion/src/theme/os/_index.scss

@@ -0,0 +1,7 @@
+// This will be for any specific operating system.
+// These have been generated since it's a very specific selection.
+
+@forward './browser';
+@forward './windows';
+@forward './mac';
+@forward './linux';

Themes/Orion/src/theme/pages/_friends.scss

@@ -0,0 +1,46 @@
+.sidebar_ded4b5 {
+  &:has(+ [aria-label="Friends"]) {
+    nav.privateChannels__93473 {
+      position: static;
+      .searchBar_e4ea2a {
+        box-shadow: none;
+        position: absolute;
+        left: 380px;
+        width: calc(100vw - 720px);
+        top:0;
+        height: 48px;
+        z-index: 6; 
+        button {
+            text-align: center;
+        }
+      }
+    }
+  }
+}
+
+main.container__5c7e7 {
+
+&[aria-label="Friends"] {
+    .tabBody_b3d268 {
+        [role=tabpanel] {
+        padding-top: 40px;
+        }
+    }
+
+    .upperContainer__993ba {
+        justify-content: flex-start;
+       .children__32014 {
+        position: absolute;
+        top: 60px;
+        left: 20px;
+        width: calc(45vw + 70px);
+        overflow-x: scroll;
+        &::-webkit-scrollbar  {
+          background-color: transparent;
+        }
+
+       }
+
+    }
+}
+}

Themes/Orion/src/theme/pages/_index.scss

@@ -0,0 +1,6 @@
+// This will be used for any "page".
+// Examples being: Friends list, nitro, discovery,
+
+@use './friends';
+
+

Themes/Orion/src/theme/popouts/_index.scss

@@ -0,0 +1,5 @@
+// This will be used for popouts.
+// Popouts being anything that the user can interact with, but
+// doesn't take away focus from the main app, like a modal.
+
+// Examples being: User popout, autocomplete, search suggestions, context menues, ect...

Themes/Orion/src/theme/profile/_index.scss

@@ -0,0 +1,5 @@
+// This will be used for any user profile.
+// These have been generated since it's a very specific selection.
+
+@forward './modal';
+@forward './popout';

Themes/Orion/src/theme/settings/_index.scss

@@ -0,0 +1 @@
+// This will be used for any settings page.

Themes/Orion/src/theme/sidebar/_index.scss

@@ -0,0 +1,4 @@
+// This will be the left sidebar.
+// This means: channel list, dms, user area, currently playing, ect...
+
+@use 'panels';