Files
Jellystat/src/pages/css/libraryOverview.css
Thegan Govender 550e1d3f7c v1.0.4.10 Beta
2023-06-18 21:02:18 +02:00

111 lines
1.7 KiB
CSS

.overview-container
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(auto, 520px));
grid-auto-rows: 200px;/* max-width+offset so 215 + 20*/
background-color: var(--secondary-background-color);
border-radius: 8px;
padding: 20px;
}
.library-stat-card
{
width: 500px;
height: 180px;
display: flex;
color: white;
/* box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.5); */
background: linear-gradient(to right, #00A4DC, #AA5CC3);
background-size: cover;
}
.library-icons
{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.library-header {
display: flex;
justify-content: space-between;
color: white;
font-weight: 500;
}
.library-header-count {
color: lightgray;
font-weight: 300;
}
.library-item {
display: flex;
justify-content: space-between;
width: 100%;
height: 20px;
margin-bottom: 5px;
}
.library-item-index {
padding-top: 3px;
font-size: 0.8em;
padding-right: 2px;
color: grey;
text-align: right;
}
.library-item-name {
width: 35%;
}
.library-item-count {
width: 60%;
text-align: right;
color: #00A4DC;
font-weight: 500;
font-size: 1.1em;
}
.library-image
{
display: flex;
justify-content: center;
align-items: center;
height: 180px;
width: 180px;
background-color: rgb(0, 0, 0, 0.6);
}
.library-banner-image
{
height: 180px;
width: 120px;
}
.library-user-image
{
border-radius: 50%;
width: 80%;
object-fit: cover;
}
.library{
width: 100%;
padding: 5px 20px;
backdrop-filter: blur(8px);
background-color: rgb(0, 0, 0, 0.6);
}