Opus changes
This commit is contained in:
@@ -41,55 +41,369 @@ a:hover {
|
||||
color: #e9ecef;
|
||||
}
|
||||
|
||||
/* --- Anime airing-soon cards --- */
|
||||
.anime-card {
|
||||
/* --- Airing-soon rows -------------------------------------------------
|
||||
Each show gets one full-width horizontal row: the TMDB backdrop (or the
|
||||
AniList banner as a fallback) fills the row behind a scrim, the season
|
||||
poster anchors the left edge, and the remaining artwork appears as a
|
||||
thumbnail strip in the footer. */
|
||||
.airing-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.airing-row {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
background-color: #1a1a1a;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.airing-row:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 0.9rem 1.8rem rgba(0, 0, 0, 0.55);
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.airing-row.is-upcoming {
|
||||
border-left: 4px solid #ff6b6b;
|
||||
}
|
||||
|
||||
.airing-row.is-aired {
|
||||
border-left: 4px solid rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.airing-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-size: cover;
|
||||
background-position: center 25%;
|
||||
opacity: 0.6;
|
||||
transform: scale(1.02);
|
||||
transition: opacity 0.3s ease, transform 0.4s ease;
|
||||
}
|
||||
|
||||
.airing-row:hover .airing-backdrop {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Keeps the text readable regardless of how bright the backdrop is. */
|
||||
.airing-scrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(18, 18, 18, 0.96) 0%, rgba(18, 18, 18, 0.86) 40%, rgba(18, 18, 18, 0.35) 100%),
|
||||
linear-gradient(0deg, rgba(18, 18, 18, 0.7) 0%, rgba(18, 18, 18, 0.2) 65%);
|
||||
}
|
||||
|
||||
.airing-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* --- Poster --- */
|
||||
.airing-poster {
|
||||
position: relative;
|
||||
flex: 0 0 170px;
|
||||
aspect-ratio: 2 / 3;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
background-color: #1e1e1e;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.anime-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.anime-poster-container {
|
||||
position: relative;
|
||||
height: 320px;
|
||||
background-color: #2a2a2a;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.anime-poster {
|
||||
.airing-poster img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.anime-card:hover .anime-poster {
|
||||
transform: scale(1.03);
|
||||
.airing-poster-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 3rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.show-overview {
|
||||
.airing-poster-tag {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0.3rem 0.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: #f8f9fa;
|
||||
background: rgba(0, 0, 0, 0.72);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
/* --- Body --- */
|
||||
.airing-body {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.airing-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.airing-titles {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.airing-title {
|
||||
margin: 0;
|
||||
font-size: clamp(1.35rem, 1.1rem + 0.9vw, 2.1rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.airing-alt-titles {
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 0.85rem;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.airing-scores {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.score-chip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 3.6rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 0.6rem;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.score-value {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.score-source {
|
||||
font-size: 0.62rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.score-tmdb .score-value {
|
||||
color: #ffd43b;
|
||||
}
|
||||
|
||||
.score-anilist .score-value {
|
||||
color: #02a9ff;
|
||||
}
|
||||
|
||||
/* --- Metadata --- */
|
||||
.airing-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.meta-chip {
|
||||
padding: 0.2rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
color: #e9ecef;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.meta-chip-finale {
|
||||
color: #ffd43b;
|
||||
border-color: rgba(255, 212, 59, 0.5);
|
||||
background: rgba(255, 212, 59, 0.12);
|
||||
}
|
||||
|
||||
.airing-progress {
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.airing-progress-bar {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #4dabf7, #02a9ff);
|
||||
}
|
||||
|
||||
.airing-overview {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.55;
|
||||
color: #dee2e6;
|
||||
/* Full-width rows fit most synopses; only the longest ones get clipped. */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.45;
|
||||
font-size: 0.875rem;
|
||||
min-height: 5.1em;
|
||||
margin-bottom: 0.5rem;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.overview-label {
|
||||
font-weight: 600;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.airing-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: auto;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.airing-gallery {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
margin-left: auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.gallery-thumb {
|
||||
display: block;
|
||||
height: 46px;
|
||||
border-radius: 0.35rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.gallery-thumb:hover {
|
||||
opacity: 1;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.gallery-thumb img {
|
||||
height: 46px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* --- Countdown --- */
|
||||
.airing-countdown {
|
||||
flex: 0 0 8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding-left: 1rem;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.countdown-number {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.is-upcoming .countdown-number {
|
||||
color: #ff8787;
|
||||
}
|
||||
|
||||
.is-aired .countdown-number {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.countdown-unit {
|
||||
font-size: 0.85rem;
|
||||
color: #ced4da;
|
||||
}
|
||||
|
||||
.countdown-date {
|
||||
margin-top: 0.35rem;
|
||||
font-size: 0.78rem;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
/* --- Narrower viewports --- */
|
||||
@media (max-width: 991.98px) {
|
||||
.airing-poster {
|
||||
flex-basis: 140px;
|
||||
}
|
||||
|
||||
.countdown-number {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.airing-content {
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.airing-poster {
|
||||
flex-basis: 110px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.airing-body {
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
/* The countdown drops below the row rather than squeezing the synopsis. */
|
||||
.airing-countdown {
|
||||
order: 3;
|
||||
flex: 0 0 100%;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding-left: 0;
|
||||
padding-top: 0.75rem;
|
||||
border-left: none;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.countdown-number {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.airing-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.airing-overview {
|
||||
-webkit-line-clamp: 10;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Wide / ultra-wide / 4K display support ---
|
||||
Bootstrap 5's ".container" tops out at max-width: 1320px starting at its
|
||||
largest built-in breakpoint (1400px) and never grows beyond that, so on
|
||||
|
||||
Reference in New Issue
Block a user