React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

css progress done

Browse source
This commit is contained in:
YasinOnm08 2024-09-30 16:11:01 +02:00
parent 9bee0d7774
commit 4590593d73
12 changed files with 48 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/styles/container.css
View file

@ -2,8 +2,8 @@
.container{ .container{
display: flex; display: flex;
width: 100vw; width: 100vw;
height: 100vh; height: 90dvh;
padding-top: 12vh; padding-top: 1dvh;
} }
.left-panel { .left-panel {
@ -19,6 +19,7 @@
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 {
@ -26,10 +27,10 @@
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%;
} }
.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: 80vh; height: 80dvh;
margin: 0 auto; margin: 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: 2rem; font-size: calc(var(--font-size)*2);
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: 1.5rem; font-size: calc(var(--font-size)*1.5);
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: 1rem; font-size: calc(var(--font-size));
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: 80vh; height: 80dvh;
margin: 0 auto; margin: 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: 2rem; font-size: calc(var(--font-size)*2);
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: 1.5rem; font-size: calc(var(--font-size)*1.5);
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: 1.25rem; font-size: calc(var(--font-size)*1.25);
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: 1rem; font-size: calc(var(--font-size));
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;

2
app/styles/global.css
View file

@ -1,5 +1,5 @@
body { body {
height: 100vh; height: 100dvh;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }

6
app/styles/header.css
View file

@ -1,10 +1,8 @@
header{ header{
position: absolute; position: relative;
padding: 0 20px; padding: 0 20px;
top: 0;
left: 0;
width: 100%; width: 100%;
height: 10vh; height: 10dvh;
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: 45%; height: 40dvh;
overflow: hidden; overflow: hidden;
background-color: var(--history-background-color); background-color: var(--history-background-color);
padding: 1em; padding: 1em;
@ -39,5 +39,7 @@
} }
.history-models{ .history-models{
height: 100%; position: relative;
height: 90dvh;
/* padding-bottom: 3dvh; */
} }

13
app/styles/input.css
View file

@ -1,7 +1,5 @@
/* 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;
@ -13,7 +11,12 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: auto; 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 { .input input {
@ -44,8 +47,8 @@
border-radius: 8px; border-radius: 8px;
font-size: 1.5em; font-size: 1.5em;
cursor: pointer; cursor: pointer;
height: 50px; height: 8dvh;
width: 75px; width: 8vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

10
app/styles/models.css
View file

@ -1,13 +1,18 @@
.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;
height: 45%; padding-bottom: 1px;
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 {
@ -69,6 +74,7 @@
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,13 +4,14 @@
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: 70vh; height: 90dvh;
} }
#conversation { #conversation {

1
app/styles/reset.css
View file

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

8
app/styles/responsive.css
View file

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