Merge pull request 'main' (#71) from YasinOnm08/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/71
This commit is contained in:
Patrick 2024-09-30 16:11:39 +02:00
commit 5c92ce07b9
12 changed files with 48 additions and 48 deletions

View file

@ -2,8 +2,8 @@
.container{
display: flex;
width: 100vw;
height: 100vh;
padding-top: 12vh;
height: 90dvh;
padding-top: 1dvh;
}
.left-panel {
@ -13,13 +13,13 @@
border-radius: 0 1em 0 0;
margin-left: 0;
padding-right: 1em;
height: 100%;
}
.left-panel.hidden {
opacity: 0; /* Fade out when hidden */
width: 0; /* Collapse width to 0 */
visibility: hidden; /* Hide visibility while collapsing */
}
.conversation-container {
@ -27,15 +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%;
}
/* 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;
}

View file

@ -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;

View file

@ -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;

View file

@ -1,14 +1,10 @@
html,
body {
height: 100vh;
height: 100dvh;
overflow: hidden;
position: relative;
}
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 {

View file

@ -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;

View file

@ -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; */
}

View file

@ -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;

View file

@ -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 {

View file

@ -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 {

View file

@ -2,4 +2,6 @@
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
transition: all 0.2s ease-in-out;
}

View file

@ -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 {

View file

@ -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%;