{#key $location}
replace('/')}/>
{/key}
diff --git a/src/app.scss b/src/app.scss
index b56616a..b69f35d 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,3 +1,81 @@
+html {
+ /* Scrollbar */
+ --scrollbarBG: transparent;
+ --thumbBG: hsl(0, 0%, 60%); /* scollbar color light */
+ /* Back-ground */
+ --BgColorDark: hsl(228, 10%, 10%);
+ --BgColorLight: hsl(0, 0%, 100%);
+ // --BgColorSidebarDark: rgb(28, 30, 36);
+ --BgColorSidebarDark: rgb(16, 17, 22);
+ --BgColorSidebarLight: hsla(0, 0%, 93%, 0.354);
+
+ /* Sizes */
+ --sidebarTop: 0px;
+ --sidebarWidth: max(300px, 20%);
+ --mainContentWidth: calc(100% - var(--sidebarWidth));
+
+ --sectionPaddingTop: 0px;
+
+ --chatContentPaddingTop: 20px;
+ --chatContentPaddingRight: 40px;
+ --chatContentPaddingBottom: 120px;
+ --chatContentPaddingLeft: 40px;
+
+ --chatInputPaddingTop: 0px;
+ --chatInputPaddingRight: 60px;
+ --chatInputPaddingBottom: 10px;
+ --chatInputPaddingLeft: 60px;
+}
+
+.navbar {
+ display: none !important;
+}
+
+@media (prefers-color-scheme: dark) {
+ html {
+ --thumbBG: #3f3f3f; /* scrollbar color dark */
+ }
+}
+
+@media only screen and (max-width: 900px) {
+ html {
+ --sidebarWidth: max(250px, 20%);
+
+ --chatContentPaddingTop: 50px;
+ --chatContentPaddingRight: 20px;
+ --chatContentPaddingLeft: 20px;
+
+ --chatInputPaddingRight: 30px;
+ --chatInputPaddingLeft: 30px;
+ }
+
+}
+
+@media only screen and (max-width: 768px) {
+ .navbar {
+ display: block !important;
+ }
+ html {
+ --BgColorSidebarLight: hsl(210, 12%, 97%);
+ // --BgColorSidebarDark: rgb(22, 24, 30);
+ --sidebarWidth: max(300px, 20%);
+ --mainContentWidth: calc(100%);
+ --sidebarTop: 56px;
+ --chatInputPaddingRight: 20px;
+ --chatInputPaddingLeft: 20px;
+ }
+ .main-menu .gpt-logo {
+ display: none;
+ }
+ .main-menu .level-right {
+ display: flex;
+ }
+ .main-menu .level-item {
+ margin-bottom: inherit !important;
+ }
+}
+
+
@keyframes rotating {
from {
transform: rotate(0deg);
@@ -155,8 +233,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
.dropdown.is-fullwidth {
display: flex;
- .dropdown-trigger,
- .dropdown-menu {
+.dropdown-trigger, .dropdown-menu {
width: 100%;
}
}
@@ -182,6 +259,18 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
overflow-y: auto;
}
+@media only screen and (max-width: 768px) {
+ .main-menu .dropdown-menu .dropdown-content {
+ max-height: calc(100vh - 112px);
+ }
+ .main-menu {
+ display: none;
+ }
+ .main-menu.pinned {
+ display: block;
+ }
+}
+
.chat-menu-item {
position: relative;
}
@@ -200,15 +289,25 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
/* Overrides for main layout */
+.column.side-bar-column {
+ width: var(--sidebarWidth);
+}
+
+.column.main-content-column {
+ width: var(--mainContentWidth)
+}
+
section.section {
padding: 0px;
+ padding-top: var(--sectionPaddingTop);
}
aside.menu.main-menu {
+ z-index:1;
position: fixed;
- width: 20%;
+ width: var(--sidebarWidth);
padding-right: 20px;
- top: 0px;
+ top: var(--sidebarTop);
bottom:0px;
}
@@ -216,8 +315,8 @@ aside.menu.main-menu .menu-expanse {
display: flex;
flex-flow: column;
height: 100%;
- background-color: hsla(0, 0%, 60%, 0.208);
- box-shadow: 5px 0px 1px hsla(0, 0%, 60%, 0.208);
+ background-color: var(--BgColorSidebarLight);
+ box-shadow: 5px 0px 0px var(--BgColorSidebarLight);
}
.menu-expanse
@@ -236,34 +335,26 @@ aside.menu.main-menu .menu-expanse {
color: hsl(0, 0%, 21%) !important;
}
-html {
- --scrollbarBG: $body-background-color;
- --thumbBG: #999999;
-}
-
.lower-mask {
display: block;
position: fixed;
bottom: 0px;
height: 100px;
width: 100%;
- background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 13.94%,#fff 54.73%);
+ background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 13.94%, var(--BgColorLight) 54.73%);
}
@media (prefers-color-scheme: dark) {
- html {
- --thumbBG: #3f3f3f;
- }
.default-text {
color: rgb(181, 181, 181) !important;
}
.lower-mask {
- background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 13.94%,#17181c 54.73%);
+ background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 13.94%, var(--BgColorDark) 54.73%);
}
aside.menu.main-menu .menu-expanse {
- background-color: hsla(0, 0%, 19%, 0.371);
- box-shadow: 5px 0px 1px hsla(0, 0%, 19%, 0.371);
+ background-color: var(--BgColorSidebarDark);
+ box-shadow: 5px 0px 0px var(--BgColorSidebarDark);
}
}
*::-webkit-scrollbar {
@@ -283,23 +374,32 @@ html {
}
.chat-content {
- padding-left: 20px;
- padding-top: 40px;
- padding-right: 40px;
- padding-bottom: 120px;
+ padding:
+ var(--chatContentPaddingTop)
+ var(--chatContentPaddingRight)
+ var(--chatContentPaddingBottom)
+ var(--chatContentPaddingLeft) ;
}
.chat-focus-point {
- width:100%;
+ width: 100%;
height: 1px;
- margin-bottom: -.75rem;;
+ /* Bulma does something strange where scrolling to the end of the body
+ or html doesn't actually scroll to the bottom of the page
+ this -.75rem, then scroll to the bottom of this works, but I don't like it.*/
+ margin-bottom: -.75rem;
}
.prompt-input-container {
position: fixed;
bottom: 0px;
- width: 80%;
- padding: 0px 40px 10px 40px;
+ width: var(--mainContentWidth);
+
+ padding:
+ var(--chatInputPaddingTop)
+ var(--chatInputPaddingRight)
+ var(--chatInputPaddingBottom)
+ var(--chatInputPaddingLeft);
}
.running-total-container {
@@ -319,3 +419,5 @@ html {
margin-left: 8px;
}
+
+
diff --git a/src/lib/ChatOptionMenu.svelte b/src/lib/ChatOptionMenu.svelte
index 9cf13dd..1ee605c 100644
--- a/src/lib/ChatOptionMenu.svelte
+++ b/src/lib/ChatOptionMenu.svelte
@@ -131,7 +131,7 @@
-
-