diff --git a/layouts/client.vue b/layouts/client.vue index f76b285..8aeaf9c 100644 --- a/layouts/client.vue +++ b/layouts/client.vue @@ -8,29 +8,27 @@ -
+
-
+
+
+ + + + +
- -
- - - - -
- -
+
-
- - + +
@@ -44,7 +42,6 @@ import { ModalBase } from '#components'; import { render } from 'vue'; import GuildDropdown from '~/components/Guild/GuildDropdown.vue'; import Button from '~/components/UserInterface/Button.vue'; -import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue'; import type { GuildResponse } from '~/types/interfaces'; const loading = useState("loading", () => false); @@ -246,29 +243,68 @@ function createDropdown() { #left-column { display: flex; flex-direction: column; - + justify-content: space-between; + align-items: center; + gap: .75em; padding-left: .25em; padding-right: .25em; padding-top: .5em; - + border-right: 1px solid var(--padding-color); background: var(--optional-sidebar-background); background-color: var(--sidebar-background-color); } -.left-column-segment { +#left-column-top, #left-column-bottom { display: flex; flex-direction: column; - + justify-content: center; + align-items: center; + gap: 1.5dvh; + overflow-y: scroll; scrollbar-width: none; + -ms-overflow-style: none; } -.left-column-segment::-webkit-scrollbar { +#left-column-top::-webkit-scrollbar, #left-column-bottom::-webkit-scrollbar { display: none; } -#left-column-middle { - overflow-y: scroll; - flex-grow: 1; +#left-column-bottom { + padding-top: 1dvh; + border-top: 1px solid var(--padding-color); +} + +#middle-left-column { + padding-left: 1dvw; + padding-right: 1dvw; + border-right: 1px solid var(--padding-color); +} + +#home-button { + border-bottom: 1px solid var(--padding-color); + padding-bottom: 1dvh; +} + +#servers-list { + display: flex; + flex-direction: column; + gap: 1em; + width: 3.2rem; + padding-top: .5em; +} + +#create-button { + color: var(--primary-color); + background-color: transparent; + border: none; + cursor: pointer; + font-size: 2rem; + padding: 0; + display: inline-block; +} + +#create-icon { + float: left; } #middle-left-column { @@ -281,27 +317,24 @@ function createDropdown() { overflow-x: hidden; } -#home-button { - height: var(--sidebar-width); -} - .sidebar-icon { - width: var(--sidebar-width); - height: var(--sidebar-width); + width: 3rem; + height: 3rem; + overflow-y: scroll; + overflow-x: hidden; } -.sidebar-bottom-buttons { - color: var(--primary-color); - background-color: transparent; - border: none; - cursor: pointer; - font-size: 2.4rem; - padding: 0; - display: inline-block; +#home-button { + border-bottom: 1px solid var(--padding-color); + padding-bottom: .375em; } -.sidebar-bottom-buttons:hover { - color: var(--primary-highlighted-color); +#settings-menu { + color: var(--primary-color) +} + +#settings-menu:hover { + color: var(--primary-highlighted-color) } diff --git a/public/themes/ash.css b/public/themes/ash.css index d1f09c8..63aaa53 100644 --- a/public/themes/ash.css +++ b/public/themes/ash.css @@ -11,11 +11,6 @@ --chatbox-background-color: #3a3733; --padding-color: #e0e0e0; - - --sidebar-width: 2.5em; - --standard-radius: .5em; - --button-radius: .6em; - --pfp-radius: 100%; --primary-color: #f07028; --primary-highlighted-color: #f28f4b; diff --git a/public/themes/dark.css b/public/themes/dark.css index 6160194..3673d4c 100644 --- a/public/themes/dark.css +++ b/public/themes/dark.css @@ -18,9 +18,4 @@ --secondary-highlighted-color: #8f5b2c; --accent-color: #b35719; --accent-highlighted-color: #c76a2e; - - --sidebar-width: 2.5em; - --standard-radius: .5em; - --button-radius: .6em; - --pfp-radius: 100%; } \ No newline at end of file diff --git a/public/themes/description.css b/public/themes/description.css index f3738a5..209fb36 100644 --- a/public/themes/description.css +++ b/public/themes/description.css @@ -20,11 +20,6 @@ --accent-color: #ff218c80; --accent-highlighted-color: #df1b6f80; - --sidebar-width: 2.5em; - --standard-radius: .5em; - --button-radius: .6em; - --pfp-radius: 100%; - --optional-body-background: ; /* background element for the body */ --optional-chat-background: ; /* background element for the chat box */ --optional-topbar-background: ; /* background element for the topbar */ diff --git a/public/themes/light.css b/public/themes/light.css index d11f5f5..fdd4756 100644 --- a/public/themes/light.css +++ b/public/themes/light.css @@ -11,11 +11,6 @@ --chatbox-background-color: #dfdbd6; --padding-color: #484848; - - --sidebar-width: 2.5em; - --standard-radius: .5em; - --button-radius: .6em; - --pfp-radius: 100%; --primary-color: #df5f0b; --primary-highlighted-color: #ef6812; diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css index 1a5197b..0e146d9 100644 --- a/public/themes/rainbow-capitalism.css +++ b/public/themes/rainbow-capitalism.css @@ -19,11 +19,6 @@ --accent-color: #ff218c80; --accent-highlighted-color: #df1b6f80; - --sidebar-width: 2.5em; - --standard-radius: .5em; - --button-radius: .6em; - --pfp-radius: 100%; - /* --optional-body-background: background */ --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80); --optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);