mirror of
https://github.com/C9Glax/tranga-website.git
synced 2025-06-12 14:57:53 +02:00
Single Style for Manga
This commit is contained in:
@ -1,142 +0,0 @@
|
||||
.SearchResult {
|
||||
background-color: var(--second-background-color);
|
||||
border-radius: 2px;
|
||||
padding: 5px 5px 9px 5px;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
width: fit-content;
|
||||
height: 328px;
|
||||
display: grid;
|
||||
grid-template-columns: 220px 300px 380px;
|
||||
grid-template-rows: 55px 55px 190px auto;
|
||||
column-gap: 10px;
|
||||
grid-template-areas:
|
||||
"cover header header"
|
||||
"cover alltags alltags"
|
||||
"cover description description"
|
||||
"cover footer button";
|
||||
}
|
||||
|
||||
.SearchResult p {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.SearchResult > img {
|
||||
grid-area: cover;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
border: 2px solid var(--primary-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.SearchResult > .connector-name {
|
||||
grid-area: cover;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
width: 100%;
|
||||
background-color: var(--accent-color);
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
text-align: center;
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.SearchResult > .Manga-status {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.SearchResult > .Manga-name {
|
||||
grid-area: header;
|
||||
color: black;
|
||||
padding: 0 30px 0 0;
|
||||
}
|
||||
|
||||
.SearchResult > .Manga-tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
grid-area: alltags;
|
||||
color: white;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
max-height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.SearchResult > .Manga-tags p {
|
||||
margin: 2px;
|
||||
padding: 5px;
|
||||
font-size: 10pt;
|
||||
height: fit-content;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.SearchResult > .Manga-tags p > * {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.SearchResult .Manga-author {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.SearchResult .Manga-tag {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.SearchResult .Manga-link{
|
||||
background-color: brown;
|
||||
}
|
||||
|
||||
.SearchResult .Manga-link > a, .Manga-link > a:visited {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.SearchResult > .Manga-description {
|
||||
grid-area: description;
|
||||
color: black;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.SearchResult > .Manga-actions button, .Manga-actions select {
|
||||
background-color: white;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 4px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.SearchResult > .Manga-actions {
|
||||
grid-area: button;
|
||||
padding: 0;
|
||||
margin: 5px 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.SearchResult > .Manga-AddButton:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.SearchResult a, .SearchResult a:visited {
|
||||
color: initial;
|
||||
}
|
||||
|
||||
.SearchResult a img {
|
||||
filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7480%) hue-rotate(141deg) brightness(111%) contrast(99%);
|
||||
position: relative;
|
||||
bottom: 7px;
|
||||
}
|
||||
|
||||
.startSearchEntry {
|
||||
position: relative;
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
.pill {
|
||||
.MangaItem-Connector {
|
||||
flex-grow: 0;
|
||||
height: 14pt;
|
||||
font-size: 12pt;
|
||||
@ -10,7 +10,7 @@
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.Manga{
|
||||
.MangaItem{
|
||||
cursor: pointer;
|
||||
background-color: var(--secondary-color);
|
||||
width: 180px;
|
||||
@ -22,7 +22,7 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.Manga::after{
|
||||
.MangaItem::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
@ -32,31 +32,46 @@
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.MangaItem > * {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.startSearchEntry::after{
|
||||
background: initial !important;
|
||||
}
|
||||
|
||||
.Manga-name{
|
||||
.MangaItem-Name{
|
||||
width: fit-content;
|
||||
font-size: 16pt;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin: 5px 0 !important;
|
||||
}
|
||||
|
||||
.Manga-status {
|
||||
display:block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
margin: 5px;
|
||||
.MangaItem-Website {
|
||||
display: block;
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
top: 12px;
|
||||
right: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.MangaItem-Status {
|
||||
display:block;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 35px;
|
||||
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 {
|
||||
.MangaItem-Status::after {
|
||||
content: attr(release-status);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -77,36 +92,35 @@
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.Manga-status:hover::after{
|
||||
.MangaItem-Status:hover::after{
|
||||
visibility:visible;
|
||||
}
|
||||
|
||||
|
||||
.Manga-status[release-status="Ongoing"]{
|
||||
.MangaItem-Status[release-status="Ongoing"]{
|
||||
background-color: limegreen;
|
||||
}
|
||||
|
||||
.Manga-status[release-status="Completed"]{
|
||||
.MangaItem-Status[release-status="Completed"]{
|
||||
background-color: blueviolet;
|
||||
}
|
||||
|
||||
.Manga-status[release-status="On Hiatus"]{
|
||||
.MangaItem-Status[release-status="On Hiatus"]{
|
||||
background-color: darkorange;
|
||||
}
|
||||
|
||||
.Manga-status[release-status="Cancelled"]{
|
||||
.MangaItem-Status[release-status="Cancelled"]{
|
||||
background-color: firebrick;
|
||||
}
|
||||
|
||||
.Manga-status[release-status="Upcoming"]{
|
||||
.MangaItem-Status[release-status="Upcoming"]{
|
||||
background-color: aqua;
|
||||
}
|
||||
|
||||
.Manga-status[release-status="Status Unavailable"]{
|
||||
.MangaItem-Status[release-status="Status Unavailable"]{
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.Manga > img {
|
||||
.MangaItem-Cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -117,27 +131,65 @@
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.Manga p {
|
||||
margin: 2px 0;
|
||||
.MangaItem p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.Manga > .SimpleCover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.MangaItem[is-clicked="not-clicked"] .MangaItem-Description, .MangaItem[is-clicked="not-clicked"] .MangaItem-Tags, .MangaItem[is-clicked="not-clicked"] .MangaItem-Props{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
div[extended-info="no"]{
|
||||
display: none;
|
||||
}
|
||||
|
||||
div[extended-info="yes"]{
|
||||
.MangaItem[is-clicked="clicked"] .MangaItem-Description, .MangaItem[is-clicked="clicked"] .MangaItem-Tags, .MangaItem[is-clicked="clicked"] .MangaItem-Props{
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
width: 80vw;
|
||||
background-color: white;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.MangaItem-Tags {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.MangaItem-Tags > * {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: max-content;
|
||||
margin: 2px 1px !important;
|
||||
white-space: nowrap;
|
||||
color: white;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.MangaItem-Tags > * > * {
|
||||
margin: 0 2px !important;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.MangaItem-Tags a, .MangaItem-Tags a:visited {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.MangaItem-Author {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.MangaItem-Tag {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.MangaItem-Link{
|
||||
background-color: brown;
|
||||
}
|
||||
|
||||
.MangaItem-Description {
|
||||
color: black;
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
||||
.MangaItem-Props {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
Reference in New Issue
Block a user