glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-06-12 14:57:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Style Manga-Display

Browse Source 
Fix Manga.GetMangaCoverUrl
This commit is contained in:
glax
2024-10-18 19:43:13 +02:00
parent 9d8dadc634
commit f27f11e7c2
3 changed files with 141 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
Website/styles/Manga.css Normal file
View File

@ -0,0 +1,119 @@
.pill {
flex-grow: 0;
height: 14pt;
font-size: 12pt;
border-radius: 9pt;
background-color: var(--primary-color);
padding: 2pt 17px;
color: black;
width: fit-content;
margin: 10px 0;
}
.Manga{
cursor: pointer;
background-color: var(--secondary-color);
width: 180px;
height: 300px;
border-radius: 5px;
margin: 10px 10px;
padding: 15px 19px;
position: relative;
flex-shrink: 0;
}
.Manga::after{
content: '';
position: absolute;
left: 0; top: 0;
border-radius: 5px;
width: 100%; height: 100%;
background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2));
z-index: 0;
}
.Manga-name{
width: fit-content;
font-size: 16pt;
font-weight: bold;
color: white;
}
.Manga-status {
display:block;
height: 10px;
width: 10px;
border-radius: 50%;
margin: 5px;
position: absolute;
top: 5px;
right: 5px;
z-index: 2;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
}
.Manga-status::after {
content: attr(release-status);
position: absolute;
top: 0;
right: 0;
visibility: hidden;
/*Text Properties*/
font-size:10pt;
font-weight:bold;
color:white;
text-align: center;
/*Size*/
padding: 3px 8px;
border-radius: 6px;
border: 0px;
background-color: inherit;
}
.Manga-status:hover::after{
visibility:visible;
}
.Manga-status[release-status="Ongoing"]{
background-color: limegreen;
}
.Manga-status[release-status="Completed"]{
background-color: blueviolet;
}
.Manga-status[release-status="On Hiatus"]{
background-color: darkorange;
}
.Manga-status[release-status="Cancelled"]{
background-color: firebrick;
}
.Manga-status[release-status="Upcoming"]{
background-color: aqua;
}
.Manga-status[release-status="Status Unavailable"]{
background-color: gray;
}
.Manga img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
z-index: 0;
}
.Manga > div {
position: absolute;
z-index: 1;
}