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

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

124
app/styles/models.css Normal file
View file

@ -0,0 +1,124 @@
.model-background {
grid-column: 1/2;
grid-row: 2/5;
overflow-y: auto;
background-color: var(--models-background-color);
border-radius: 2em;
padding: 1em;
margin: 1em;
height: 50vh;
box-sizing: border-box;
overflow: hidden;
}
.models {
grid-column: 1/2;
grid-row: 2/5;
overflow-y: auto;
background-color: var(--models-background-color);
border-radius: 2em;
padding: 1em;
height: 100%;
box-sizing: border-box;
overflow: hidden;
overflow-y: scroll;
}
.models form {
padding-right: 10px;
padding-left: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.models .titel {
padding-bottom: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5vh;
width: fit-content;
}
.grid h3 {
font-size: x-large;
}
.model-box {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 5%;
overflow: hidden;
position: relative;
height: 18vh;
width: 18vh;
}
.overlay {
z-index: 900;
position: absolute;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 300%;
transition: opacity 0.5s ease;
pointer-events: none;
opacity: 0;
font-size: xx-large;
}
.overlay img {
align-self: flex-end;
justify-self: end;
height: 3vh;
width: 3vh;
position: absolute;
right: 15px;
bottom: 15px;
}
.model-box:hover .overlay {
opacity: 1;
}
.code-model {
background-image: url(/img/code.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.math-model {
background-image: url(/img/math.jpg);
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.language-model {
background-image: url(/img/language.jpg);
background-color: #72cce4;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.default-model {
background-image: url(/img/default.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}