From 613508a48895724c02724e9134a09f564f97df5f Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Mon, 30 Sep 2024 13:46:58 +0200
Subject: [PATCH 1/2] css progress 3
---
app/styles/container.css | 6 ------
app/styles/global.css | 9 ---------
app/styles/reset.css | 1 +
3 files changed, 1 insertion(+), 15 deletions(-)
diff --git a/app/styles/container.css b/app/styles/container.css
index 3f094b2..f6d9c07 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -13,7 +13,6 @@
border-radius: 0 1em 0 0;
margin-left: 0;
padding-right: 1em;
- height: 100%;
}
.left-panel.hidden {
@@ -30,11 +29,6 @@
height: 100%;
}
-/* Adjust margin-left when panel is shown or hidden */
-.conversation-container.expanded {
- margin-left: 1vw;
-}
-
.conversation-container.collapsed {
margin-left: 1vw; /* Space for the left panel */
bottom: 0;
diff --git a/app/styles/global.css b/app/styles/global.css
index c9754e3..cf792c3 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,4 +1,3 @@
-html,
body {
height: 100vh;
overflow: hidden;
@@ -6,9 +5,6 @@ body {
}
body {
- display: flex;
- justify-content: center;
- align-items: center;
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
@@ -19,11 +15,6 @@ body {
header {
background-color: var(--header-background-color);
color: var(--header-text-color);
- padding: 1rem; /* Adjust padding as needed */
-}
-
-main{
- height: 100%;
}
button {
diff --git a/app/styles/reset.css b/app/styles/reset.css
index 23d8732..a77192e 100644
--- a/app/styles/reset.css
+++ b/app/styles/reset.css
@@ -2,4 +2,5 @@
margin: 0;
padding: 0;
box-sizing: border-box;
+ scroll-behavior: smooth;
}
From 4590593d735aee4ab292eed5e4c2012885193652 Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Mon, 30 Sep 2024 16:11:01 +0200
Subject: [PATCH 2/2] css progress done
---
app/styles/container.css | 9 +++++----
app/styles/credit.css | 10 +++++-----
app/styles/doc.css | 12 ++++++------
app/styles/global.css | 2 +-
app/styles/header.css | 6 ++----
app/styles/history.css | 6 ++++--
app/styles/input.css | 13 ++++++++-----
app/styles/models.css | 10 ++++++++--
app/styles/output.css | 3 ++-
app/styles/reset.css | 1 +
app/styles/responsive.css | 8 ++++----
app/styles/user-ai-messages.css | 2 ++
12 files changed, 48 insertions(+), 34 deletions(-)
diff --git a/app/styles/container.css b/app/styles/container.css
index f6d9c07..40c97cc 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -2,8 +2,8 @@
.container{
display: flex;
width: 100vw;
- height: 100vh;
- padding-top: 12vh;
+ height: 90dvh;
+ padding-top: 1dvh;
}
.left-panel {
@@ -19,6 +19,7 @@
opacity: 0; /* Fade out when hidden */
width: 0; /* Collapse width to 0 */
visibility: hidden; /* Hide visibility while collapsing */
+
}
.conversation-container {
@@ -26,10 +27,10 @@
transition: margin-left 0.3s ease; /* Smooth margin adjustment */
background-color: var(--conversation-background-color); /* Use variable for background color */
border-radius: 1em 0 0 0;
- height: 100%;
}
+
+
.conversation-container.collapsed {
margin-left: 1vw; /* Space for the left panel */
- bottom: 0;
}
diff --git a/app/styles/credit.css b/app/styles/credit.css
index fb28dc3..1d6b206 100644
--- a/app/styles/credit.css
+++ b/app/styles/credit.css
@@ -5,8 +5,8 @@
.credits-section {
max-width: 900px;
- height: 80vh;
- margin: 0 auto;
+ height: 80dvh;
+ margin: auto;
background: var(--doc-background-color); /* Use variable for background */
padding: 2rem;
border-radius: 8px;
@@ -15,20 +15,20 @@
}
.title {
- font-size: 2rem;
+ font-size: calc(var(--font-size)*2);
color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem;
}
.subtitle {
- font-size: 1.5rem;
+ font-size: calc(var(--font-size)*1.5);
color: var(--doc-subtitle-color); /* Use variable for subtitle color */
margin-top: 2rem;
margin-bottom: 1rem;
}
.paragraph {
- font-size: 1rem;
+ font-size: calc(var(--font-size));
color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem;
line-height: 1.6;
diff --git a/app/styles/doc.css b/app/styles/doc.css
index eb06945..5b2988d 100644
--- a/app/styles/doc.css
+++ b/app/styles/doc.css
@@ -7,8 +7,8 @@
.documentation-section {
max-width: 900px;
- height: 80vh;
- margin: 0 auto;
+ height: 80dvh;
+ margin: auto;
background: var(--doc-background-color); /* Use variable for background */
padding: 2rem;
border-radius: 8px;
@@ -17,27 +17,27 @@
}
.title {
- font-size: 2rem;
+ font-size: calc(var(--font-size)*2);
color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem;
}
.subtitle {
- font-size: 1.5rem;
+ font-size: calc(var(--font-size)*1.5);
color: var(--doc-subtitle-color); /* Use variable for subtitle color */
margin-top: 2rem;
margin-bottom: 1rem;
}
.subsection-title {
- font-size: 1.25rem;
+ font-size: calc(var(--font-size)*1.25);
color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.paragraph {
- font-size: 1rem;
+ font-size: calc(var(--font-size));
color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem;
line-height: 1.6;
diff --git a/app/styles/global.css b/app/styles/global.css
index cf792c3..0acb073 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,5 +1,5 @@
body {
- height: 100vh;
+ height: 100dvh;
overflow: hidden;
position: relative;
}
diff --git a/app/styles/header.css b/app/styles/header.css
index 282beaa..a540ad3 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -1,10 +1,8 @@
header{
- position: absolute;
+ position: relative;
padding: 0 20px;
- top: 0;
- left: 0;
width: 100%;
- height: 10vh;
+ height: 10dvh;
display: flex;
align-items: center;
justify-content: center;
diff --git a/app/styles/history.css b/app/styles/history.css
index 7537d3a..8133955 100644
--- a/app/styles/history.css
+++ b/app/styles/history.css
@@ -1,7 +1,7 @@
.history-background {
grid-column: 1/2;
grid-row: 1/2;
- height: 45%;
+ height: 40dvh;
overflow: hidden;
background-color: var(--history-background-color);
padding: 1em;
@@ -39,5 +39,7 @@
}
.history-models{
- height: 100%;
+ position: relative;
+ height: 90dvh;
+ /* padding-bottom: 3dvh; */
}
diff --git a/app/styles/input.css b/app/styles/input.css
index af821e8..3233b14 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -1,7 +1,5 @@
/* Input Section */
.input {
- grid-column: 2/3;
- grid-row: 4/5;
border-radius: 8px;
background-color: var(--input-background-color);
padding: 1em;
@@ -13,7 +11,12 @@
justify-content: space-between;
align-items: center;
height: auto;
- height: 10vh;
+ height: 10dvh;
+ position: absolute;
+ left: 0.25vw;
+ bottom: 3dvh;
+ right: 0.25vw;
+ box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
}
.input input {
@@ -44,8 +47,8 @@
border-radius: 8px;
font-size: 1.5em;
cursor: pointer;
- height: 50px;
- width: 75px;
+ height: 8dvh;
+ width: 8vw;
display: flex;
justify-content: center;
align-items: center;
diff --git a/app/styles/models.css b/app/styles/models.css
index 7369e40..cb00319 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -1,13 +1,18 @@
.model-background {
+ position: absolute;
+ left: 1em;
+ bottom: 4dvh;
+ right: 0;
grid-column: 1/2;
grid-row: 1/2;
- height: 45%;
+ padding-bottom: 1px;
+ overflow: scroll;
overflow: hidden;
background-color: var(--history-background-color);
padding: 1em;
- margin: 0 1em;
margin-right: 0;
border-radius: 1em;
+ height: 45dvh;
}
.models {
@@ -69,6 +74,7 @@
transition: opacity 0.5s ease;
pointer-events: none;
opacity: 0;
+ border-radius: 5%;
}
.overlay img {
diff --git a/app/styles/output.css b/app/styles/output.css
index 19507cd..0f9ed42 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -4,13 +4,14 @@
grid-row: 1 / 4;
background-color: var(--output-background-color);
margin: 1em;
+ padding-bottom: 14dvh;
display: flex;
flex-direction: column;
justify-content: flex-start;
font-size: 1em;
overflow-y: auto;
width: calc(100% - 2em); /* Corrected calculation for width */
- height: 70vh;
+ height: 90dvh;
}
#conversation {
diff --git a/app/styles/reset.css b/app/styles/reset.css
index a77192e..6df5af5 100644
--- a/app/styles/reset.css
+++ b/app/styles/reset.css
@@ -3,4 +3,5 @@
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
+ transition: all 0.2s ease-in-out;
}
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index 422725c..57ec871 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -8,7 +8,6 @@
/* Header styles */
header {
- position: fixed;
top: 0;
left: 0;
margin-top: 0px;
@@ -20,11 +19,10 @@
.container {
display: flex;
flex-direction: column;
- align-items: center;
width: 100vw;
- overflow: scroll;
+ overflow: hidden;
margin: 0;
- padding: 7em 0 0 0 ;
+ padding: 1dvh 0 0 0 ;
}
/* Left panel styles */
@@ -58,6 +56,7 @@
min-width: 100%;
margin-left: 0;
border-radius: none;
+ height: 10vh;
}
/* Grid styles */
@@ -79,6 +78,7 @@
margin: 0 auto;
align-items: center;
width: 90%;
+ bottom: 10dvh
}
.input input {
diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css
index c79b71c..3dd4461 100644
--- a/app/styles/user-ai-messages.css
+++ b/app/styles/user-ai-messages.css
@@ -16,6 +16,7 @@
border-bottom-right-radius: 0;
margin-left: auto;
text-align: left;
+ margin-right: 1.5vw;
}
.ai-message {
@@ -27,6 +28,7 @@
}
.ai-container{
+ position: relative;
height: min-content;
bottom: 0;
width: 100%;