From 4590593d735aee4ab292eed5e4c2012885193652 Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Mon, 30 Sep 2024 16:11:01 +0200 Subject: [PATCH] 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%;