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

The first working Theme Settings

Browse source
This commit is contained in:
sageTheDM 2024-09-23 11:55:58 +02:00
parent 1718c9cf69
commit f5b1e80c6d
16 changed files with 517 additions and 250 deletions
Download patch file Download diff file Expand all files Collapse all files

39
app/styles/responsive.css
View file

@ -1,6 +1,6 @@
/* Responsive behavior - applies only on smaller screens */
@media (max-width: 1200px) {
*{
* {
margin: 0;
padding: 0;
}
@ -28,7 +28,7 @@
padding: 0;
}
header li{
header li {
display: flex;
flex-direction: column;
justify-content: center;
@ -47,46 +47,46 @@
}
/* Left panel styles */
.left-panel {
.left-panel {
display: none; /* Initially hidden */
min-width: 90%; /* Takes full width when visible */
margin: 0;
}
.left-panel.visible {
.left-panel.visible {
display: block;
}
/* Conversation container styles */
.conversation-container {
.conversation-container {
width: 90%;
height: 90%;
}
.conversation-container.collapsed {
.conversation-container.collapsed {
width: 0;
padding: 0;
border: none;
overflow: hidden;
}
.conversation-container.expanded {
.conversation-container.expanded {
width: 100%;
}
/* Grid styles */
.grid {
.grid {
grid-template-columns: 1fr; /* One item per line */
}
/* Model box styles */
.model-box {
.model-box {
max-width: none; /* Remove max-width */
margin: 0 auto; /* Center each model-box */
}
/* Input styles */
.input {
.input {
grid-column: 1 / -1;
gap: 10px;
padding: 0.5em;
@ -95,32 +95,35 @@
width: 90%;
}
.input input {
.input input {
font-size: 1em; /* Adjust font size */
max-width: 65%;
margin-right: 0;
border-color: var(--input-border-color); /* Use variable for input border */
color: var(--text-color); /* Use variable for text color */
}
.input button {
.input button {
height: 40px; /* Adjust button height */
width: 40px; /* Adjust button width */
font-size: 1.2em; /* Adjust button font size */
margin: auto;
background-color: var(--input-button-color); /* Use variable for button color */
color: var(--user-message-text-color); /* Use variable for button text color */
}
}
/* Responsive adjustments for the settings*/
/* Responsive adjustments for the settings */
@media (max-width: 768px) {
.settings-content {
flex-direction: column; /* Stack sidebar and main content on smaller screens */
flex-direction: column; /* Stack sidebar and main content on smaller screens */
}
.sidebar {
width: 100%; /* Full width for sidebar */
width: 100%; /* Full width for sidebar */
}
.settings-main {
width: 100%; /* Full width for main content */
width: 100%; /* Full width for main content */
}
}
}