id/styles/settings.css

141 lines
2.2 KiB
CSS
Raw Normal View History

2024-03-18 20:11:01 +00:00
main {
display: flex;
}
2024-03-18 20:11:01 +00:00
#settings_split {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 1rem;
2024-03-18 20:11:01 +00:00
}
#mini_profile {
display: flex;
flex-direction: column;
border-radius: 1.5rem;
overflow: clip;
padding-bottom: 1.5rem;
background: var(--background);
2024-03-18 20:11:01 +00:00
}
#mini_profile .image_container {
display: flex;
background: linear-gradient(to bottom, white, var(--background) 95%);
2024-03-18 20:11:01 +00:00
}
#mini_profile .image_container img {
width: 50%;
margin: 0.5rem auto 0.5rem;
2024-03-18 20:11:01 +00:00
border-radius: 1rem;
}
#mini_profile .texts {
text-align: center;
display: flex;
flex-direction: column;
}
#mini_profile .texts .displayname {
font-size: 2rem;
font-weight: bold;
}
#settings_list {
list-style: none;
}
#settings_list > h1 {
margin: 0 0 1rem 0;
}
#settings_list li {
border-top: var(--foreground) 1px solid;
}
#settings_list li:first-child {
border-top: none;
}
#settings_list li > a {
display: block;
padding: 1rem 0;
color: var(--foreground);
text-decoration: none;
transition: color 0.2s ease-in-out;
}
#settings_list li > a:hover {
color: var(--flax)
}
.tiles {
display: grid;
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 150px;
grid-auto-flow: dense;
}
.tiles .tile {
background: #343a40;
text-align: center;
display: flex;
text-decoration: none;
font-size: 1.2rem;
font-weight: 500;
border-radius: 1.5rem;
transition: scale 0.2s ease-in-out;
}
.tiles .tile:hover {
scale: 1.05;
}
.tiles .tile div {
margin: auto;
}
.tiles .tile span {
display: block;
}
.tile.double-height {
grid-row: span 2;
}
@media screen and (max-width: 960px) {
#settings_split {
grid-template-columns: none;
}
#mini_profile {
flex-direction: row;
padding-bottom: 0;
}
#mini_profile .image_container {
width: 40%;
background: linear-gradient(to right, white, var(--chip-background) 95%);
}
#mini_profile .image_container img {
margin: 1rem;
border-radius: 1rem;
}
#mini_profile .texts {
flex: 1;
margin: auto auto auto 0;
text-align: left;
}
}