root/cleargame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark/light mode

Browse Source
This commit is contained in:
Doar Mihai
2026-02-28 14:08:30 +02:00
parent 90f492808c
commit 8ab2d5048b
3 changed files with 697 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+149 -46
View File
@@ -3,16 +3,52 @@
:root {
--primary: #7F00FF;
--accent: #00C9FF;
--background: #121212;
--text: #EAEAEA;
--gradient-start: #4f46e5;
--gradient-end: #7c3aed;
}
/* Dark Theme (Default) */
[data-theme="dark"] {
--background: #0f172a;
--background-alt: #1e293b;
--background-elevated: rgba(30, 30, 30, 0.8);
--text: #e2e8f0;
--text-muted: #94a3b8;
--border-color: rgba(255, 255, 255, 0.1);
--card-bg: rgba(30, 30, 30, 0.6);
--card-hover: rgba(127, 0, 255, 0.05);
--input-bg: #1a1a1a;
--dropdown-bg: #1e293b;
--shadow: rgba(0, 0, 0, 0.3);
}
/* Light Theme */
[data-theme="light"] {
--background: #f8fafc;
--background-alt: #ffffff;
--background-elevated: rgba(255, 255, 255, 0.95);
--text: #1e293b;
--text-muted: #64748b;
--border-color: rgba(0, 0, 0, 0.1);
--card-bg: rgba(255, 255, 255, 0.8);
--card-hover: rgba(127, 0, 255, 0.08);
--input-bg: #ffffff;
--dropdown-bg: #ffffff;
--shadow: rgba(0, 0, 0, 0.1);
}
body {
background-color: #0f172a!important;
color: #e2e8f0;
background: url('../../img/top_bg_transparency_4.png') repeat-x #0f172a;
background-color: var(--background) !important;
color: var(--text);
transition: background-color 0.3s ease, color 0.3s ease;
}
[data-theme="dark"] body {
background: url('../../img/top_bg_transparency_4.png') repeat-x var(--background);
}
[data-theme="light"] body {
background: linear-gradient(180deg, #e0e7ff 0%, var(--background) 100%);
}
.gradient-text {
@@ -52,21 +88,22 @@ body {
/* Form Styles */
.form-control {
background-color: var(--background) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
background-color: var(--input-bg) !important;
border-color: var(--border-color) !important;
color: var(--text) !important;
transition: all 0.3s ease;
}
.form-control:focus {
background-color: var(--background) !important;
background-color: var(--input-bg) !important;
border-color: var(--primary) !important;
box-shadow: 0 0 0 0.25rem rgba(127, 0, 255, 0.25) !important;
color: var(--text) !important;
}
.form-check-input {
background-color: var(--background) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
background-color: var(--input-bg) !important;
border-color: var(--border-color) !important;
}
.form-check-input:checked {
@@ -81,8 +118,8 @@ body {
/* Alert Styles */
.alert {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: var(--card-bg);
border: 1px solid var(--border-color);
color: var(--text);
}
@@ -92,29 +129,37 @@ body {
color: #28a745;
}
[data-theme="light"] .alert-success {
background-color: rgba(40, 167, 69, 0.15);
}
.alert-danger {
background-color: rgba(220, 53, 69, 0.1);
border-color: rgba(220, 53, 69, 0.2);
color: #dc3545;
}
[data-theme="light"] .alert-danger {
background-color: rgba(220, 53, 69, 0.15);
}
/* Custom Pagination Styles */
.pagination {
--bs-pagination-color: var(--text);
--bs-pagination-bg: var(--background);
--bs-pagination-border-color: transparent;
--bs-pagination-bg: var(--card-bg);
--bs-pagination-border-color: var(--border-color);
--bs-pagination-hover-color: var(--text);
--bs-pagination-hover-bg: rgba(255, 255, 255, 0.1);
--bs-pagination-hover-border-color: transparent;
--bs-pagination-hover-bg: var(--card-hover);
--bs-pagination-hover-border-color: var(--border-color);
--bs-pagination-focus-color: var(--text);
--bs-pagination-focus-bg: rgba(255, 255, 255, 0.1);
--bs-pagination-focus-bg: var(--card-hover);
--bs-pagination-focus-box-shadow: none;
--bs-pagination-active-color: white;
--bs-pagination-active-bg: linear-gradient(90deg, var(--primary), var(--accent));
--bs-pagination-active-border-color: transparent;
--bs-pagination-disabled-color: #6c757d;
--bs-pagination-disabled-bg: var(--background);
--bs-pagination-disabled-border-color: transparent;
--bs-pagination-disabled-color: var(--text-muted);
--bs-pagination-disabled-bg: var(--card-bg);
--bs-pagination-disabled-border-color: var(--border-color);
}
.page-link {
@@ -140,8 +185,9 @@ body {
/* Custom dropdown styles */
.dropdown-menu {
background-color: var(--background);
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: var(--dropdown-bg);
border: 1px solid var(--border-color);
box-shadow: 0 4px 15px var(--shadow);
}
.dropdown-item {
@@ -149,7 +195,7 @@ body {
}
.dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.1);
background-color: var(--card-hover);
color: var(--text);
}
@@ -203,30 +249,18 @@ body {
}
.navbar {
background-color: rgba(15, 23, 42, 0.8);
background-color: var(--background-elevated);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
transition: background-color 0.3s ease;
}
.navbar a {
color: white!important;
}
.dropdown-menu {
background-color: #1e293b;
border: 1px solid #334155;
}
.dropdown-item {
color: #e2e8f0;
}
.dropdown-item:hover {
background-color: #334155;
color: #e2e8f0;
color: var(--text) !important;
}
.dropdown-divider {
border-top: 1px solid #334155;
border-top: 1px solid var(--border-color);
}
.cover-container{
@@ -312,9 +346,10 @@ body {
/* Card View Styles */
.game-card-enhanced {
background-color: rgba(30, 30, 30, 0.8);
background-color: var(--card-bg);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
overflow: hidden;
border: 1px solid var(--border-color);
}
.game-card-enhanced:hover {
@@ -323,13 +358,14 @@ body {
}
.game-card-enhanced .card-body {
background-color: rgba(18, 18, 18, 0.9);
background-color: var(--card-bg);
}
/* List View Styles */
.game-card-list {
background-color: rgba(30, 30, 30, 0.8);
background-color: var(--card-bg);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
border: 1px solid var(--border-color);
}
.game-card-list:hover {
@@ -338,7 +374,7 @@ body {
}
.game-card-list .card-body {
background-color: rgba(18, 18, 18, 0.9);
background-color: var(--card-bg);
}
/* View Mode Button Styles */
@@ -350,11 +386,78 @@ body {
.view-mode-btn.active {
background: linear-gradient(90deg, var(--primary), var(--accent));
border-color: transparent;
color: white;
color: white !important;
}
.view-mode-btn:not(.active):hover {
background-color: rgba(127, 0, 255, 0.1);
background-color: var(--card-hover);
}
/* Theme Toggle Button */
.theme-toggle-btn {
padding: 0.5rem;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: var(--text);
}
.theme-toggle-btn:hover {
background: var(--card-hover);
transform: scale(1.1);
}
.theme-toggle-btn i {
font-size: 1.2rem;
}
/* Text color overrides for light theme */
[data-theme="light"] .text-white {
color: var(--text) !important;
}
[data-theme="light"] .text-muted {
color: var(--text-muted) !important;
}
[data-theme="light"] .text-gray-400 {
color: var(--text-muted) !important;
}
[data-theme="light"] .bg-dark {
background-color: var(--card-bg) !important;
}
[data-theme="light"] .border-secondary {
border-color: var(--border-color) !important;
}
[data-theme="light"] .border-dark {
border-color: var(--border-color) !important;
}
/* Button styles for light theme */
[data-theme="light"] .btn-outline-light {
border-color: var(--border-color);
color: var(--text);
}
[data-theme="light"] .btn-outline-light:hover {
background-color: var(--card-hover);
color: var(--text);
}
/* Footer */
footer {
background-color: var(--background-alt);
border-top-color: var(--border-color) !important;
}
/* Responsive adjustments */