diff options
Diffstat (limited to 'resources')
| -rw-r--r-- | resources/sass/_background.scss | 28 | ||||
| -rw-r--r-- | resources/sass/_navbar.scss | 43 | ||||
| -rw-r--r-- | resources/sass/_variables.scss | 55 | ||||
| -rw-r--r-- | resources/views/layouts/app.blade.php | 134 |
4 files changed, 217 insertions, 43 deletions
diff --git a/resources/sass/_background.scss b/resources/sass/_background.scss index 4ef03bd..a848474 100644 --- a/resources/sass/_background.scss +++ b/resources/sass/_background.scss @@ -5,22 +5,26 @@ html { body { width: 100%; height: auto; - min-height:35rem; - background: linear-gradient(to bottom, rgba(1,1,1,.25) 0%, rgba(1,1,1,.45) 90%, rgba(2, 11, 26, 0.65) 100%), url("/img/world-bg.jpg"); - background-color: rgba(2, 11, 26, 0.65); - background-position: center; + min-height: 35rem; + background-color: #1a1e23; + background-image: linear-gradient(to bottom, rgba(1,1,1,.35) 0%, rgba(1,1,1,.55) 90%, rgba(26, 30, 35, 0.8) 100%), url("/img/world-bg.jpg"); + background-position: center top; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; + color: #e2e8f0; } -.cover-container { - color: white; - max-width: 42em; + +::-webkit-scrollbar { + width: 8px; +} +::-webkit-scrollbar-track { + background: #1a1e23; } -.cover { - padding: 0 1.5rem; +::-webkit-scrollbar-thumb { + background: #2b313b; + border-radius: 4px; } -.cover .btn-lg { - padding: .75rem 1.25rem; - font-weight: 700; +::-webkit-scrollbar-thumb:hover { + background: #2f363f; } diff --git a/resources/sass/_navbar.scss b/resources/sass/_navbar.scss index 7e3daa8..94d8a02 100644 --- a/resources/sass/_navbar.scss +++ b/resources/sass/_navbar.scss @@ -1,25 +1,40 @@ .navbar { - background-color: rgba(0,0,0,0) !important; + background-color: rgba(26, 30, 35, 0.95) !important; + backdrop-filter: blur(10px); + border-bottom: 1px solid #2f363f; } -.navbar-toggler { - border-color: #808080; + +.navbar-brand { + color: #00e5d4 !important; + font-weight: 700; + letter-spacing: 0.5px; } .navbar-dark .nav-link { - color: darken( #fff, 10% ) !important; + color: #94a3b8 !important; + font-weight: 600; + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.5px; + padding: 0.5rem 1rem; + transition: color 0.2s; } -@media( min-width: 768px ) { - .navbar-searchform { - margin-left: 0.5rem; - } +.navbar-dark .nav-link:hover { + color: #00e5d4 !important; + text-decoration: none !important; } -.nav-link:hover { - text-decoration: underline !important; -} .nav-bar-divider { - display: inline; - padding: 0 8px; - font-size: 0.9rem; + display: inline; + padding: 0 8px; + color: #94a3b8; + opacity: 0.5; + user-select: none; +} + +@media (min-width: 768px) { + .navbar-searchform { + margin-left: 0.5rem; + } } diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss index 0407ab5..7d3fa82 100644 --- a/resources/sass/_variables.scss +++ b/resources/sass/_variables.scss @@ -1,19 +1,58 @@ // Body -$body-bg: #f8fafc; +$body-bg: #1a1e23; +$body-color: #e2e8f0; // Typography -$font-family-sans-serif: 'Nunito', sans-serif; +$font-family-sans-serif: 'Inter', 'Nunito', sans-serif; $font-size-base: 0.9rem; $line-height-base: 1.6; -// Colors -$blue: #3490dc; +// Colors - Neon Gaming Theme +$primary: #00e5d4; +$secondary: #2b313b; +$blue: #00e5d4; $indigo: #6574cd; -$purple: #9561e2; -$pink: #f66d9b; +$purple: #a855f7; +$pink: #ff2e63; $red: #e3342f; $orange: #f6993f; $yellow: #ffed4a; $green: #38c172; -$teal: #4dc0b5; -$cyan: #6cb2eb; +$teal: #00e5d4; +$cyan: #00e5d4; + +// Surface colors +$dark: #232830; +$gray-dark: #2b313b; +$gray: #2f363f; +$light: #e2e8f0; + +// Bootstrap overrides +$card-bg: #232830; +$card-border-color: #2f363f; +$card-cap-bg: rgba(0,0,0,0.2); +$card-border-radius: 0.5rem; + +$input-bg: #2b313b; +$input-color: #e2e8f0; +$input-border-color: #2f363f; + +$pagination-color: #e2e8f0; +$pagination-bg: #232830; +$pagination-border-color: #2f363f; +$pagination-active-bg: #00e5d4; +$pagination-active-border-color: #00e5d4; +$pagination-active-color: #000; + +$navbar-dark-color: #94a3b8; +$navbar-dark-active-color: #00e5d4; + +$badge-font-size: 0.8rem; +$badge-padding-y: 0.3em; +$badge-padding-x: 0.6em; + +$border-color: #2f363f; + +// Button overrides +$btn-padding-y: 0.5rem; +$btn-padding-x: 1rem; diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index e3fe561..3ac93ed 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -72,21 +72,137 @@ <style> @yield('styles') + + /* Neon theme utilities */ + :root { + --cinema-bg: #1a1e23; + --cinema-surface: #232830; + --cinema-surface-light: #2b313b; + --cinema-border: #2f363f; + --cinema-cyan: #00e5d4; + --cinema-cyan-hover: #00cfc0; + --cinema-pink: #ff2e63; + --cinema-text: #e2e8f0; + --cinema-text-muted: #94a3b8; + } + + /* Custom scrollbar */ + ::-webkit-scrollbar { width: 8px; } + ::-webkit-scrollbar-track { background: var(--cinema-bg); } + ::-webkit-scrollbar-thumb { background: var(--cinema-surface-light); border-radius: 4px; } + ::-webkit-scrollbar-thumb:hover { background: var(--cinema-border); } + + /* Card overrides for neon theme */ + .card { + background-color: var(--cinema-surface); + border: 1px solid var(--cinema-border); + border-radius: 0.5rem; + box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2); + } + .card-header { + background-color: rgba(0,0,0,0.2); + border-bottom: 1px solid var(--cinema-border); + padding: 1rem; + font-weight: 600; + color: var(--cinema-text-muted); + text-transform: uppercase; + font-size: 0.8rem; + letter-spacing: 0.5px; + } + .card-body { color: var(--cinema-text); } + .card-text { color: var(--cinema-text-muted); } + .card-links { color: var(--cinema-cyan); } + .card-links:hover { color: var(--cinema-cyan-hover); } + + /* Button overrides */ + .btn-outline-primary { + color: var(--cinema-cyan); + border-color: var(--cinema-cyan); + } + .btn-outline-primary:hover, .btn-outline-primary:focus { + color: #000; + background-color: var(--cinema-cyan); + border-color: var(--cinema-cyan); + } + .btn-primary { + background-color: var(--cinema-cyan); + color: #000; + font-weight: 700; + border: none; + transition: all 0.2s; + } + .btn-primary:hover { + background-color: var(--cinema-cyan-hover); + color: #000; + box-shadow: 0 0 15px rgba(0, 229, 212, 0.3); + } + .btn-outline-secondary { + color: var(--cinema-text-muted); + border-color: var(--cinema-border); + } + .btn-outline-secondary:hover { + color: #000; + background-color: var(--cinema-surface-light); + border-color: var(--cinema-surface-light); + } + + /* Badge overrides */ + .badge-primary { + background-color: var(--cinema-cyan); + color: #000; + font-weight: 600; + } + .badge-secondary { + background-color: var(--cinema-surface-light); + color: var(--cinema-text-muted); + } + + /* Navbar divider */ .nav-bar-divider { display: inline; padding: 0 8px; - color: #fff; + color: var(--cinema-text-muted); opacity: 0.5; user-select: none; } - .btn-outline-secondary { - color: #868e96; - border-color: #868e96; + + /* Form inputs */ + .form-control { + background-color: var(--cinema-surface-light); + border-color: var(--cinema-border); + color: var(--cinema-text); } - .btn-outline-secondary:hover { - color: #fff; - background-color: #868e96; - border-color: #868e96; + .form-control:focus { + background-color: var(--cinema-surface-light); + border-color: var(--cinema-cyan); + color: var(--cinema-text); + box-shadow: 0 0 0 0.2rem rgba(0, 229, 212, 0.25); + } + .form-control::placeholder { + color: var(--cinema-text-muted); + opacity: 0.6; + } + + /* Pagination */ + .page-link { + background-color: var(--cinema-surface); + border-color: var(--cinema-border); + color: var(--cinema-text-muted); + } + .page-link:hover { + color: var(--cinema-cyan); + background-color: var(--cinema-surface-light); + border-color: var(--cinema-border); + } + .page-item.active .page-link { + background-color: var(--cinema-cyan); + border-color: var(--cinema-cyan); + color: #000; + } + + /* Footer */ + .footer { + background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(26,30,35,0.9) 100%); } </style> @if ( "new" == Request::route()->getName() || "popular" == Request::route()->getName() ) @@ -113,7 +229,7 @@ </head> <body class="d-flex flex-column h-100"> <div id="app"> - <nav class="navbar navbar-expand-md navbar-dark shadow-sm"> + <nav class="navbar navbar-expand-md navbar-dark hnimdb-navbar"> <div class="container"> <a class="navbar-brand" href="{{ url('/') }}"> {{ config('app.name', 'Laravel') }} |