diff --git a/app/styles/container.css b/app/styles/container.css index 854c997..53c90a0 100644 --- a/app/styles/container.css +++ b/app/styles/container.css @@ -9,7 +9,7 @@ } .left-panel { - margin-top: 10vh; + margin-top: 5em; width: 25vw; /* Adjust as needed */ transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */ background-color: var(--left-panel-background-color); /* Use variable for background color */ @@ -25,7 +25,7 @@ } .conversation-container { - margin-top: 10vh; + margin-top: 5em; flex: 1; transition: margin-left 0.3s ease; /* Smooth margin adjustment */ background-color: var(--conversation-background-color); /* Use variable for background color */ diff --git a/app/styles/global.css b/app/styles/global.css index 1db5ccb..00a246b 100644 --- a/app/styles/global.css +++ b/app/styles/global.css @@ -3,7 +3,6 @@ body { height: 100vh; overflow: hidden; position: relative; - top: 1vh; } body { diff --git a/app/styles/header.css b/app/styles/header.css index d085746..b830147 100644 --- a/app/styles/header.css +++ b/app/styles/header.css @@ -1,13 +1,13 @@ header{ position: absolute; padding: 0 20px; - top: 0; + top: 2em; left: 0; width: 100%; - height: 10vh; + height: 5em; display: flex; align-items: center; - margin: 1.5vh 0; + font-size: 1em; } .hamburger{ @@ -40,14 +40,16 @@ header{ .nav-links{ position: absolute; display: flex; - gap: 15px; - width: 25vw; - height: 5vh; + top: 1em; + gap: 1em; + width: 25em; + height: 3em; } .nav-btn{ background-color: transparent; border: none; + font-size: 0.9em; } .header-logo{ @@ -63,8 +65,9 @@ header{ } .login-button .header-login-button{ + font-size: 1em; position: absolute; - top: 2.5vh; + top: 1.5em; right: 1vw; padding: 10px 20px; background-color: var(--input-button-color); diff --git a/app/styles/models.css b/app/styles/models.css index 2c2d91e..e2d01ec 100644 --- a/app/styles/models.css +++ b/app/styles/models.css @@ -61,11 +61,11 @@ width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); - color: var(--text-color); /* Use variable for overlay text color */ + color: var(--overlay-text-color); /* Use variable for overlay text color */ display: flex; justify-content: center; align-items: center; - font-size: x-large; + font-size: large; transition: opacity 0.5s ease; pointer-events: none; opacity: 0; @@ -176,11 +176,10 @@ color: var(--text-color); /* Text color */ font-size: medium; /* Font size for dropdown */ cursor: pointer; /* Cursor change on hover */ - transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transition */ + transition: all 0.3s ease-in-out, border 0.3s ease; /* Smooth transition */ +} +#model-select option:hover{ + background-color: gray; } -#model-select:hover { - background-color: var(--button-hover-background-color); /* Change background on hover */ - border-color: var(--button-background-color); /* Change border color on hover */ -} diff --git a/app/styles/variables.css b/app/styles/variables.css index 50847a8..7b54ab3 100644 --- a/app/styles/variables.css +++ b/app/styles/variables.css @@ -19,7 +19,8 @@ --conversation-background-color: #79832e; /* Background color for conversation container */ --doc-background-color: #ffffff; /* Background color for documents */ --close-button-color: red; - --burger-menu-background-color: #79832e; + --burger-menu-background-color: #79832e; /*NEW*/ + --overlay-text-color:white; /*NEW*/ /* FAQ Colors */ --faq-background-color: #474D22; /* Background color for FAQ section */