YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Compare commits

base: YasinOnm08:4590593d735aee4ab292eed5e4c2012885193652
Branches Tags
YasinOnm08:main
React-Group:main
..
compare: YasinOnm08:ec7dfd6f139def1b329c72db50db799ad7901802
Branches Tags
YasinOnm08:main
React-Group:main

No commits in common. "4590593d735aee4ab292eed5e4c2012885193652" and "ec7dfd6f139def1b329c72db50db799ad7901802" have entirely different histories.
4590593d73 ... ec7dfd6f13

12 changed files with 48 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

13
app/styles/container.css
View file

@ -2,8 +2,8 @@
.container{ .container{
display: flex; display: flex;
width: 100vw; width: 100vw;
height: 90dvh; height: 100vh;
padding-top: 1dvh; padding-top: 12vh;
} }
.left-panel { .left-panel {
@ -13,13 +13,13 @@
border-radius: 0 1em 0 0; border-radius: 0 1em 0 0;
margin-left: 0; margin-left: 0;
padding-right: 1em; padding-right: 1em;
height: 100%;
} }
.left-panel.hidden { .left-panel.hidden {
opacity: 0; /* Fade out when hidden */ opacity: 0; /* Fade out when hidden */
width: 0; /* Collapse width to 0 */ width: 0; /* Collapse width to 0 */
visibility: hidden; /* Hide visibility while collapsing */ visibility: hidden; /* Hide visibility while collapsing */
} }
.conversation-container { .conversation-container {
@ -27,10 +27,15 @@
transition: margin-left 0.3s ease; /* Smooth margin adjustment */ transition: margin-left 0.3s ease; /* Smooth margin adjustment */
background-color: var(--conversation-background-color); /* Use variable for background color */ background-color: var(--conversation-background-color); /* Use variable for background color */
border-radius: 1em 0 0 0; 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 { .conversation-container.collapsed {
margin-left: 1vw; /* Space for the left panel */ margin-left: 1vw; /* Space for the left panel */
bottom: 0;
} }

10
app/styles/credit.css
View file

@ -5,8 +5,8 @@
.credits-section { .credits-section {
max-width: 900px; max-width: 900px;
height: 80dvh; height: 80vh;
margin: auto; margin: 0 auto;
background: var(--doc-background-color); /* Use variable for background */ background: var(--doc-background-color); /* Use variable for background */
padding: 2rem; padding: 2rem;
border-radius: 8px; border-radius: 8px;
@ -15,20 +15,20 @@
} }
.title { .title {
font-size: calc(var(--font-size)*2); font-size: 2rem;
color: var(--doc-title-color); /* Use variable for title color */ color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.subtitle { .subtitle {
font-size: calc(var(--font-size)*1.5); font-size: 1.5rem;
color: var(--doc-subtitle-color); /* Use variable for subtitle color */ color: var(--doc-subtitle-color); /* Use variable for subtitle color */
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.paragraph { .paragraph {
font-size: calc(var(--font-size)); font-size: 1rem;
color: var(--doc-paragraph-color); /* Use variable for paragraph color */ color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
line-height: 1.6; line-height: 1.6;

12
app/styles/doc.css
View file

@ -7,8 +7,8 @@
.documentation-section { .documentation-section {
max-width: 900px; max-width: 900px;
height: 80dvh; height: 80vh;
margin: auto; margin: 0 auto;
background: var(--doc-background-color); /* Use variable for background */ background: var(--doc-background-color); /* Use variable for background */
padding: 2rem; padding: 2rem;
border-radius: 8px; border-radius: 8px;
@ -17,27 +17,27 @@
} }
.title { .title {
font-size: calc(var(--font-size)*2); font-size: 2rem;
color: var(--doc-title-color); /* Use variable for title color */ color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.subtitle { .subtitle {
font-size: calc(var(--font-size)*1.5); font-size: 1.5rem;
color: var(--doc-subtitle-color); /* Use variable for subtitle color */ color: var(--doc-subtitle-color); /* Use variable for subtitle color */
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.subsection-title { .subsection-title {
font-size: calc(var(--font-size)*1.25); font-size: 1.25rem;
color: var(--doc-subsection-title-color); /* Use variable for subsection title color */ color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
margin-top: 1.5rem; margin-top: 1.5rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.paragraph { .paragraph {
font-size: calc(var(--font-size)); font-size: 1rem;
color: var(--doc-paragraph-color); /* Use variable for paragraph color */ color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
line-height: 1.6; line-height: 1.6;

11
app/styles/global.css
View file

@ -1,10 +1,14 @@
html,
body { body {
height: 100dvh; height: 100vh;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
body { body {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--text-color); color: var(--text-color);
font-family: var(--font-family); font-family: var(--font-family);
@ -15,6 +19,11 @@ body {
header { header {
background-color: var(--header-background-color); background-color: var(--header-background-color);
color: var(--header-text-color); color: var(--header-text-color);
padding: 1rem; /* Adjust padding as needed */
}
main{
height: 100%;
} }
button { button {

6
app/styles/header.css
View file

@ -1,8 +1,10 @@
header{ header{
position: relative; position: absolute;
padding: 0 20px; padding: 0 20px;
top: 0;
left: 0;
width: 100%; width: 100%;
height: 10dvh; height: 10vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

6
app/styles/history.css
View file

@ -1,7 +1,7 @@
.history-background { .history-background {
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/2; grid-row: 1/2;
height: 40dvh; height: 45%;
overflow: hidden; overflow: hidden;
background-color: var(--history-background-color); background-color: var(--history-background-color);
padding: 1em; padding: 1em;
@ -39,7 +39,5 @@
} }
.history-models{ .history-models{
position: relative; height: 100%;
height: 90dvh;
/* padding-bottom: 3dvh; */
} }

13
app/styles/input.css
View file

@ -1,5 +1,7 @@
/* Input Section */ /* Input Section */
.input { .input {
grid-column: 2/3;
grid-row: 4/5;
border-radius: 8px; border-radius: 8px;
background-color: var(--input-background-color); background-color: var(--input-background-color);
padding: 1em; padding: 1em;
@ -11,12 +13,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: auto; height: auto;
height: 10dvh; height: 10vh;
position: absolute;
left: 0.25vw;
bottom: 3dvh;
right: 0.25vw;
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
} }
.input input { .input input {
@ -47,8 +44,8 @@
border-radius: 8px; border-radius: 8px;
font-size: 1.5em; font-size: 1.5em;
cursor: pointer; cursor: pointer;
height: 8dvh; height: 50px;
width: 8vw; width: 75px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

10
app/styles/models.css
View file

@ -1,18 +1,13 @@
.model-background { .model-background {
position: absolute;
left: 1em;
bottom: 4dvh;
right: 0;
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/2; grid-row: 1/2;
padding-bottom: 1px; height: 45%;
overflow: scroll;
overflow: hidden; overflow: hidden;
background-color: var(--history-background-color); background-color: var(--history-background-color);
padding: 1em; padding: 1em;
margin: 0 1em;
margin-right: 0; margin-right: 0;
border-radius: 1em; border-radius: 1em;
height: 45dvh;
} }
.models { .models {
@ -74,7 +69,6 @@
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
border-radius: 5%;
} }
.overlay img { .overlay img {

3
app/styles/output.css
View file

@ -4,14 +4,13 @@
grid-row: 1 / 4; grid-row: 1 / 4;
background-color: var(--output-background-color); background-color: var(--output-background-color);
margin: 1em; margin: 1em;
padding-bottom: 14dvh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
font-size: 1em; font-size: 1em;
overflow-y: auto; overflow-y: auto;
width: calc(100% - 2em); /* Corrected calculation for width */ width: calc(100% - 2em); /* Corrected calculation for width */
height: 90dvh; height: 70vh;
} }
#conversation { #conversation {

2
app/styles/reset.css
View file

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

8
app/styles/responsive.css
View file

@ -8,6 +8,7 @@
/* Header styles */ /* Header styles */
header { header {
position: fixed;
top: 0; top: 0;
left: 0; left: 0;
margin-top: 0px; margin-top: 0px;
@ -19,10 +20,11 @@
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
width: 100vw; width: 100vw;
overflow: hidden; overflow: scroll;
margin: 0; margin: 0;
padding: 1dvh 0 0 0 ; padding: 7em 0 0 0 ;
} }
/* Left panel styles */ /* Left panel styles */
@ -56,7 +58,6 @@
min-width: 100%; min-width: 100%;
margin-left: 0; margin-left: 0;
border-radius: none; border-radius: none;
height: 10vh;
} }
/* Grid styles */ /* Grid styles */
@ -78,7 +79,6 @@
margin: 0 auto; margin: 0 auto;
align-items: center; align-items: center;
width: 90%; width: 90%;
bottom: 10dvh
} }
.input input { .input input {

2
app/styles/user-ai-messages.css
View file

@ -16,7 +16,6 @@
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
margin-left: auto; margin-left: auto;
text-align: left; text-align: left;
margin-right: 1.5vw;
} }
.ai-message { .ai-message {
@ -28,7 +27,6 @@
} }
.ai-container{ .ai-container{
position: relative;
height: min-content; height: min-content;
bottom: 0; bottom: 0;
width: 100%; width: 100%;