diff options
Diffstat (limited to 'resources/views/layouts')
| -rw-r--r-- | resources/views/layouts/app.blade.php | 133 | ||||
| -rw-r--r-- | resources/views/layouts/footer.blade.php | 2 |
2 files changed, 128 insertions, 7 deletions
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index e185e25..95eede7 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -187,6 +187,127 @@ .nav-bar-divider { display: none; } } + .text-cinema-muted { + color: var(--cinema-text-muted); + } + +/** + * navbar glow + */ +.navbar { + background-color: rgba(26, 30, 35, 0.95) !important; + backdrop-filter: blur(10px); + border-bottom: 1px solid #2f363f; + position: relative; +} + +.navbar-brand { + color: var(--cinema-cyan) !important; + font-weight: 700; + letter-spacing: 0.5px; +} + +.navbar-dark .nav-link { + color: #94a3b8 !important; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + padding: 0.5rem 1rem; + transition: color 0.2s; + position: relative; +} + +.navbar-dark .nav-link:hover { + color: var(--cinema-cyan) !important; + text-decoration: none !important; +} + +/* .active */ + +.navbar-dark .nav-link.active, +.navbar-dark .nav-link:active, +.nav-item.active .nav-link +{ + color: var(--cinema-cyan) !important; +} + +/* the cyan bar */ +.navbar-dark .nav-link.active::after, +.nav-item.active .nav-link::after +{ + content: ''; + position: absolute; + bottom: -1px; + transform: translateX(-50%); + height: 3px; + background-color: var(--cinema-cyan); + border-radius: 2px 2px 0 0; +} + +/* glow effect */ +.navbar-dark .nav-link.active::before, +.navbar-dark .nav-link:active::before, +.nav-item.active .nav-link::before { + content: ''; + position: absolute; + bottom: 0; + transform: translateX(-50%); + background: radial-gradient( + ellipse at center, + rgba(0, 229, 212, 0.15) 0%, + rgba(0, 229, 212, 0.05) 40%, + transparent 70% + ); + pointer-events: none; + z-index: -1; + background: radial-gradient( + ellipse at center bottom, + rgba(0, 229, 212, 0.2) 0%, + rgba(0, 229, 212, 0.08) 30%, + rgba(0, 229, 212, 0.02) 50%, + transparent 70% + ); + filter: blur(8px); +} + +@media (min-width: 768px) { + /* the cyan bar */ + .navbar-dark .nav-link.active::after, + .nav-item.active .nav-link::after + { + left: 50%; + width: 80%; /* Etwas kürzer als der volle Link, wie im Bild */ + } + + /* glow effect */ + .navbar-dark .nav-link.active::before, + .navbar-dark .nav-link:active::before, + .nav-item.active .nav-link::before { + height: 60px; + width: 80%; + left: 50%; + } + +} +@media (max-width: 767.99px) { + /* the cyan bar on mobile */ + .navbar-dark .nav-link.active::after, + .nav-item.active .nav-link::after + { + left: 10%; + width: 10%; /* Etwas kürzer als der volle Link, wie im Bild */ + } + + /* glow effect on mobile */ + .navbar-dark .nav-link.active::before, + .navbar-dark .nav-link:active::before, + .nav-item.active .nav-link::before { + height: 40px; + width: 40%; + left: 10%; + } +} + /* Form inputs */ .form-control { background-color: var(--cinema-surface-light); @@ -279,25 +400,25 @@ </li> @endif <li class="nav-item"> - <a class="nav-link" href="{{ route('new') }}">{{ __('New') }}</a> + <a class="nav-link {{ Route::currentRouteNamed('new') ? 'active' : '' }}" href="{{ route('new') }}">{{ __('New') }}</a> </li> <li class="nav-item"> - <a class="nav-link" href="{{ route('popular') }}">{{ __('Popular') }}</a> + <a class="nav-link {{ Route::currentRouteNamed('popular') ? 'active' : '' }}" href="{{ route('popular') }}">{{ __('Popular') }}</a> </li> <li class="nav-item"> - <a class="nav-link" href="{{ route('popular_topics') }}">{{ __('Topics') }}</a> + <a class="nav-link {{ Route::currentRouteNamed('popular_topics') ? 'active' : '' }}" href="{{ route('popular_topics') }}">{{ __('Topics') }}</a> </li> <li class="nav-item"> - <a class="nav-link" href="{{ route('random') }}">{{ __('Random') }}</a> + <a class="nav-link {{ Route::currentRouteNamed('random') ? 'active' : '' }}" href="{{ route('random') }}">{{ __('Random') }}</a> </li> <li class="nav-item nav-bar-divider"> <span class="nav-link" style="pointer-events: none;">|</span> </li> <li class="nav-item"> - <a class="nav-link" href="{{ route('cinema.index') }}">{{ __('Movies') }}</a> + <a class="nav-link {{ Route::currentRouteNamed('cinema.index') ? 'active' : '' }}" href="{{ route('cinema.index') }}">{{ __('Movies') }}</a> </li> <li class="nav-item"> - <a class="nav-link" href="{{ route('cinema.genres') }}">{{ __('Genres') }}</a> + <a class="nav-link {{ Route::currentRouteNamed('cinema.genres') ? 'active' : '' }}" href="{{ route('cinema.genres') }}">{{ __('Genres') }}</a> </li> @else <li class="nav-item dropdown"> diff --git a/resources/views/layouts/footer.blade.php b/resources/views/layouts/footer.blade.php index b58ec88..2b1f2db 100644 --- a/resources/views/layouts/footer.blade.php +++ b/resources/views/layouts/footer.blade.php @@ -6,7 +6,7 @@ <footer class="footer"> <div class="container"> - <h3 class="text-white"> + <h3 class="text-cinema-muted"> Helpful Links </h3> <strong> |