dark mdoe fixes

This commit is contained in:
Doar Mihai
2026-03-08 16:14:11 +02:00
parent a094c28567
commit 6c1d27b1d0
2 changed files with 140 additions and 14 deletions
+104
View File
@@ -855,6 +855,110 @@ $fa-font-path: "/fonts";
}
}
}
// Show page specific dark mode styles
.movie-page {
.card-header.bg-white,
.bg-white {
background-color: #333 !important;
color: #e0e0e0;
}
.border {
border-color: #444 !important;
}
.border-top-0 {
border-top: 0 !important;
}
.rounded-bottom {
border-bottom-left-radius: 0.25rem !important;
border-bottom-right-radius: 0.25rem !important;
}
// Review cards
.review-item {
background-color: #2a2a2a;
border-color: #444;
.card-body {
color: #e0e0e0;
}
}
// Seasons carousel
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: invert(1);
}
// Movie/show title
.movie-title {
color: #e0e0e0;
}
// Overview section
.overview {
h5 {
color: #e0e0e0;
}
p {
color: #a0a0a0;
}
}
// External links buttons
.btn-outline-secondary {
background-color: transparent;
border-color: #444;
color: #e0e0e0;
&:hover {
background-color: #444;
border-color: #555;
color: #fff;
}
}
// Watch providers
.watch-providers {
h6 {
color: #a0a0a0 !important;
}
}
// Tagline
.tagline {
color: #a0a0a0 !important;
}
// Livewire components (Similar, Recommended, etc.)
div[wire\:id] {
background-color: transparent !important;
.card {
background-color: #2a2a2a !important;
border-color: #444 !important;
}
.card-body {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
}
}
// Tab content area
.tab-content {
background-color: #2a2a2a;
border-color: #444 !important;
}
.tab-pane {
color: #e0e0e0;
}
}
}
body.light-mode{
+36 -14
View File
@@ -155,21 +155,43 @@
<div class="card-header bg-white">
<h5 class="mb-0">Seasons</h5>
</div>
<div class="card-body">
<div class="row">
@foreach($seasons as $season)
<div class="col-md-2 mb-3">
<a href="{{ route('show.season', ['slug' => $show->slug, 'seasonNumber' => $season->season_number]) }}" class="text-decoration-none">
<div class="card h-100 border-0 shadow-sm">
<img src="http://image.tmdb.org/t/p/w342/{{ $season->poster_path }}" alt="{{ $season->name }}" class="card-img-top">
<div class="card-body">
<h6 class="card-title">{{ $season->name }}</h6>
<p class="card-text"><small class="text-muted">{{ $season->episode_count }} episodes</small></p>
</div>
<div class="card-body position-relative">
<div id="seasonsCarousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
@php
$chunkedSeasons = $seasons->chunk(6);
@endphp
@foreach($chunkedSeasons as $index => $seasonChunk)
<div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
<div class="row">
@foreach($seasonChunk as $season)
<div class="col-md-2 mb-3">
<a href="{{ route('show.season', ['slug' => $show->slug, 'seasonNumber' => $season->season_number]) }}" class="text-decoration-none">
<div class="card h-100 border-0 shadow-sm">
<img src="http://image.tmdb.org/t/p/w342/{{ $season->poster_path }}" alt="{{ $season->name }}" class="card-img-top">
<div class="card-body">
<h6 class="card-title">{{ $season->name }}</h6>
<p class="card-text"><small class="text-muted">{{ $season->episode_count }} episodes</small></p>
</div>
</div>
</a>
</div>
@endforeach
</div>
</a>
</div>
@endforeach
</div>
@endforeach
</div>
@if($chunkedSeasons->count() > 1)
<button class="carousel-control-prev" type="button" data-bs-target="#seasonsCarousel" data-bs-slide="prev" style="width: 5%; left: -2.5%;">
<span class="carousel-control-prev-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#seasonsCarousel" data-bs-slide="next" style="width: 5%; right: -2.5%;">
<span class="carousel-control-next-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
@endif
</div>
</div>
</div>