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

Made the header button show/hide work

Browse source
This commit is contained in:
Sage The DM 2024-09-18 11:17:34 +02:00
parent 48668f7f6e
commit 284e70b841
20 changed files with 585 additions and 588 deletions
Download patch file Download diff file Expand all files Collapse all files

61
app/styles/input.css Normal file
View file

@ -0,0 +1,61 @@
/* Input Section */
.input {
grid-column: 2/3;
grid-row: 4/5;
border-radius: 20px;
background-color: var(--input-background-color);
padding: 1em;
margin: 1em;
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
gap: 10px;
height: 10vh;
}
.input input {
flex-grow: 1;
padding: 5px;
font-size: 1.2em;
border-radius: 8px;
border: 2px solid var(--input-button-color);
outline: none;
margin-right: 10px;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
transition: border-color 0.3s ease-in-out;
height: 7vh;
}
.input input:focus {
border-color: var(--input-button-hover-color);
}
.input button {
padding: 1em;
margin: 5px;
background-color: var(--input-button-color);
color: white;
border: none;
border-radius: 50%;
font-size: 1.5em;
cursor: pointer;
height: 50px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.input button img {
height: 1em;
}
.input button:hover {
background-color: var(--input-button-hover-color);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}