remco/Atomcms-edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve text visibility in atom and dusk themes

Browse Source 
- Add CSS variable support to dusk theme components for dynamic text colors
- Fix low-contrast preset color combinations (cyberpunk, neon, magma, forest, obsidian, space)
- Add text-shadow utility classes and apply to site header and backgrounds
- Style logout buttons as proper buttons matching other button styles
- Fix hardcoded text colors in atom theme components
This commit is contained in:
root
2026-06-24 16:03:21 +02:00
parent 391458ce49
commit 3d5f94f9b9
28 changed files with 250 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Filament/Pages/General/ThemeSettings.php
+7 -7
View File
@@ -500,8 +500,8 @@ final class ThemeSettings extends Page implements HasForms
'cyberpunk' => [ 'cyberpunk' => [
'color_primary' => '#f0f', 'color_background' => '#0a0a0f', 'color_primary' => '#f0f', 'color_background' => '#0a0a0f',
'color_surface' => '#1a1a2e', 'color_dropdown' => '#1a1a2e', 'color_surface' => '#1a1a2e', 'color_dropdown' => '#1a1a2e',
'color_navbar' => '#0a0a0f', 'color_navbar_text' => '#0ff', 'color_text' => '#b3e0e0', 'color_navbar' => '#0a0a0f', 'color_navbar_text' => '#0ff', 'color_text' => '#e0e0e0',
'color_text_muted' => '#f0f', 'color_accent' => '#ff0', 'color_text_muted' => '#a855f7', 'color_accent' => '#ff0',
'input_text_color' => '#b3e0e0', 'input_placeholder_color' => '#806080', 'input_text_color' => '#b3e0e0', 'input_placeholder_color' => '#806080',
'input_border_color' => '#ec4899', 'input_background' => '#1a1a2e', 'input_focus_color' => '#f0f', 'input_border_color' => '#ec4899', 'input_background' => '#1a1a2e', 'input_focus_color' => '#f0f',
'button_primary_color' => '#f0f', 'button_text_color' => '#000', 'button_primary_color' => '#f0f', 'button_text_color' => '#000',
@@ -599,7 +599,7 @@ final class ThemeSettings extends Page implements HasForms
'color_primary' => '#ff00ff', 'color_background' => '#0f0f23', 'color_primary' => '#ff00ff', 'color_background' => '#0f0f23',
'color_surface' => '#1a1a3e', 'color_dropdown' => '#1a1a3e', 'color_surface' => '#1a1a3e', 'color_dropdown' => '#1a1a3e',
'color_navbar' => '#0f0f23', 'color_navbar_text' => '#00ffff', 'color_text' => '#e0b0e0', 'color_navbar' => '#0f0f23', 'color_navbar_text' => '#00ffff', 'color_text' => '#e0b0e0',
'color_text_muted' => '#9400d3', 'color_accent' => '#00ffff', 'color_text_muted' => '#c084fc', 'color_accent' => '#00ffff',
'input_text_color' => '#e0b0e0', 'input_placeholder_color' => '#b366b3', 'input_text_color' => '#e0b0e0', 'input_placeholder_color' => '#b366b3',
'input_border_color' => '#4c1d95', 'input_background' => '#1a1a3e', 'input_focus_color' => '#ff00ff', 'input_border_color' => '#4c1d95', 'input_background' => '#1a1a3e', 'input_focus_color' => '#ff00ff',
'button_primary_color' => '#ff00ff', 'button_text_color' => '#000000', 'button_primary_color' => '#ff00ff', 'button_text_color' => '#000000',
@@ -716,7 +716,7 @@ final class ThemeSettings extends Page implements HasForms
'color_primary' => '#ef4444', 'color_background' => '#1c1917', 'color_primary' => '#ef4444', 'color_background' => '#1c1917',
'color_surface' => '#292524', 'color_dropdown' => '#44403c', 'color_surface' => '#292524', 'color_dropdown' => '#44403c',
'color_navbar' => '#1c1917', 'color_navbar_text' => '#fca5a5', 'color_text' => '#fecaca', 'color_navbar' => '#1c1917', 'color_navbar_text' => '#fca5a5', 'color_text' => '#fecaca',
'color_text_muted' => '#b91c1c', 'color_accent' => '#f87171', 'color_text_muted' => '#f87171', 'color_accent' => '#f87171',
'input_text_color' => '#fecaca', 'input_placeholder_color' => '#b91c1c', 'input_text_color' => '#fecaca', 'input_placeholder_color' => '#b91c1c',
'input_border_color' => '#57534e', 'input_background' => '#292524', 'input_border_color' => '#57534e', 'input_background' => '#292524',
'button_primary_color' => '#ef4444', 'button_text_color' => '#ffffff', 'button_primary_color' => '#ef4444', 'button_text_color' => '#ffffff',
@@ -732,7 +732,7 @@ final class ThemeSettings extends Page implements HasForms
'color_primary' => '#16a34a', 'color_background' => '#052e16', 'color_primary' => '#16a34a', 'color_background' => '#052e16',
'color_surface' => '#14532d', 'color_dropdown' => '#166534', 'color_surface' => '#14532d', 'color_dropdown' => '#166534',
'color_navbar' => '#052e16', 'color_navbar_text' => '#86efac', 'color_text' => '#bbf7d0', 'color_navbar' => '#052e16', 'color_navbar_text' => '#86efac', 'color_text' => '#bbf7d0',
'color_text_muted' => '#15803d', 'color_accent' => '#4ade80', 'color_text_muted' => '#4ade80', 'color_accent' => '#4ade80',
'input_text_color' => '#bbf7d0', 'input_placeholder_color' => '#15803d', 'input_text_color' => '#bbf7d0', 'input_placeholder_color' => '#15803d',
'input_border_color' => '#166534', 'input_background' => '#14532d', 'input_border_color' => '#166534', 'input_background' => '#14532d',
'button_primary_color' => '#16a34a', 'button_text_color' => '#ffffff', 'button_primary_color' => '#16a34a', 'button_text_color' => '#ffffff',
@@ -764,7 +764,7 @@ final class ThemeSettings extends Page implements HasForms
'color_primary' => '#a855f7', 'color_background' => '#0f0518', 'color_primary' => '#a855f7', 'color_background' => '#0f0518',
'color_surface' => '#1e0b33', 'color_dropdown' => '#2d1654', 'color_surface' => '#1e0b33', 'color_dropdown' => '#2d1654',
'color_navbar' => '#0f0518', 'color_navbar_text' => '#e9d5ff', 'color_text' => '#f3e8ff', 'color_navbar' => '#0f0518', 'color_navbar_text' => '#e9d5ff', 'color_text' => '#f3e8ff',
'color_text_muted' => '#9333ea', 'color_accent' => '#c084fc', 'color_text_muted' => '#c084fc', 'color_accent' => '#c084fc',
'input_text_color' => '#f3e8ff', 'input_placeholder_color' => '#9333ea', 'input_text_color' => '#f3e8ff', 'input_placeholder_color' => '#9333ea',
'input_border_color' => '#581c87', 'input_background' => '#1e0b33', 'input_border_color' => '#581c87', 'input_background' => '#1e0b33',
'button_primary_color' => '#a855f7', 'button_text_color' => '#ffffff', 'button_primary_color' => '#a855f7', 'button_text_color' => '#ffffff',
@@ -797,7 +797,7 @@ final class ThemeSettings extends Page implements HasForms
'color_primary' => '#71717a', 'color_background' => '#09090b', 'color_primary' => '#71717a', 'color_background' => '#09090b',
'color_surface' => '#18181b', 'color_dropdown' => '#27272a', 'color_surface' => '#18181b', 'color_dropdown' => '#27272a',
'color_navbar' => '#000000', 'color_navbar_text' => '#a1a1aa', 'color_text' => '#d4d4d8', 'color_navbar' => '#000000', 'color_navbar_text' => '#a1a1aa', 'color_text' => '#d4d4d8',
'color_text_muted' => '#52525b', 'color_accent' => '#a1a1aa', 'color_text_muted' => '#a1a1aa', 'color_accent' => '#a1a1aa',
'input_text_color' => '#d4d4d8', 'input_placeholder_color' => '#52525b', 'input_text_color' => '#d4d4d8', 'input_placeholder_color' => '#52525b',
'input_border_color' => '#3f3f46', 'input_background' => '#18181b', 'input_border_color' => '#3f3f46', 'input_background' => '#18181b',
'button_primary_color' => '#52525b', 'button_text_color' => '#fafafa', 'button_primary_color' => '#52525b', 'button_text_color' => '#fafafa',
resources/css/global.css
+21 -3
View File
@@ -19,12 +19,16 @@
@layer components { @layer components {
.nav-item { .nav-item {
@apply flex h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4! md:border-transparent! md:hover:border-b-[#eeb425]!; @apply flex h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4! md:border-transparent! md:hover:border-b-[#eeb425]!;
@apply text-gray-700 dark:text-gray-100; color: var(--color-navbar-text, #1e293b);
} }
.dropdown-item { .dropdown-item {
@apply block py-2 px-4 font-semibold transition duration-200; @apply block py-2 px-4 font-semibold transition duration-200;
@apply text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700; color: var(--color-text);
}
.dropdown-item:hover {
background-color: var(--color-primary, #eeb425);
color: var(--button-text-color, #1a1a2e);
} }
} }
@@ -60,6 +64,10 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body {
color: var(--color-text, #0f172a);
}
.drop-shadow { .drop-shadow {
-webkit-filter: drop-shadow(2px 1px 0 #fff) drop-shadow(-2px 1px 0 #fff) -webkit-filter: drop-shadow(2px 1px 0 #fff) drop-shadow(-2px 1px 0 #fff)
drop-shadow(0 -2px 0 #fff); drop-shadow(0 -2px 0 #fff);
@@ -305,7 +313,7 @@ html.dark .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
} }
#article-content a { #article-content a {
color: #53b2f8; color: var(--link-color, #53b2f8);
} }
.cursor-grab { .cursor-grab {
@@ -314,3 +322,13 @@ html.dark .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
.cursor-grab:active { .cursor-grab:active {
cursor: grabbing !important; cursor: grabbing !important;
} }
/* Text utility classes using CSS variables */
.text-body { color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }
.text-nav { color: var(--color-navbar-text); }
/* Text shadow for readability on images/dark backgrounds */
.text-shadow { text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.text-shadow-lg { text-shadow: 0 2px 8px rgba(0,0,0,0.9); }
resources/themes/atom/css/app.css
+10
View File
@@ -400,3 +400,13 @@ html.dark .badge-drawer-button .toggled {
background-color: #fff; background-color: #fff;
opacity: 0.1; opacity: 0.1;
} }
/* Text utility classes using CSS variables */
.text-body { color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }
.text-nav { color: var(--color-navbar-text); }
/* Text shadow for readability */
.text-shadow { text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.text-shadow-lg { text-shadow: 0 2px 8px rgba(0,0,0,0.9); }
resources/themes/atom/views/components/content/guest-content-card.blade.php
+2 -2
View File
@@ -7,10 +7,10 @@
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<p class="font-semibold text-black dark:text-gray-200">{{ $title }}</p> <p class="font-semibold text-body">{{ $title }}</p>
@if(isset($underTitle)) @if(isset($underTitle))
<p class="dark:text-gray-500">{{ $underTitle }}</p> <p class="text-muted">{{ $underTitle }}</p>
@endif @endif
</div> </div>
</div> </div>
resources/themes/atom/views/components/form/input.blade.php
+1 -1
View File
@@ -11,7 +11,7 @@
onblur="this.style.borderColor='var(--input-border-color, var(--color-text-muted))'"> onblur="this.style.borderColor='var(--input-border-color, var(--color-text-muted))'">
@error($name, $errorBag) @error($name, $errorBag)
<p class="mt-1 text-xs italic" style="color: #ef4444;"> <p class="mt-1 text-xs italic" style="color: var(--button-danger-color, #ef4444);">
{{ $message }} {{ $message }}
</p> </p>
@enderror @enderror
resources/themes/atom/views/components/navigation/user-dropdown.blade.php
+2 -2
View File
@@ -26,8 +26,8 @@
<form action="{{ route('logout') }}" method="POST" class="block"> <form action="{{ route('logout') }}" method="POST" class="block">
@csrf @csrf
<button type="submit" <button type="submit"
class="dropdown-item flex items-center gap-2 w-full text-left hover:!bg-red-500/20" class="dropdown-item flex items-center gap-2 justify-center w-full py-2 px-4 rounded-md font-semibold transition duration-200 ease-in-out"
style="color: var(--button-danger-color)"> style="background-color: var(--button-danger-color, #ef4444); color: var(--button-danger-text-color, #ffffff);">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /> <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg> </svg>
resources/themes/atom/views/components/site-header.blade.php
+4 -4
View File
@@ -52,8 +52,8 @@
@guest @guest
<x-modals.modal-wrapper> <x-modals.modal-wrapper>
<div class="flex justify-center"> <div class="flex justify-center">
<div class="font-semibold flex-col md:w-[600px] " style="color: var(--color-text)"> <div class="font-semibold flex-col md:w-[600px]" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">
<p class="hidden text-center text-xl md:block " style="color: var(--color-text)"> <p class="hidden text-center text-xl md:block" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">
{{ __('An online virtual world where you can create your own avatar, make friends, chat, create rooms and much more!') }} {{ __('An online virtual world where you can create your own avatar, make friends, chat, create rooms and much more!') }}
</p> </p>
@@ -64,12 +64,12 @@
{{ __('Login') }} {{ __('Login') }}
</button> </button>
<p class="text-sm uppercase " style="color: var(--color-text-muted)">{{ __('Or') }}</p> <p class="text-sm uppercase" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">{{ __('Or') }}</p>
<a data-turbolinks="false" href="{{ route('register') }}"> <a data-turbolinks="false" href="{{ route('register') }}">
<button <button
class="uppercase px-8! py-2.5! rounded-full transition! ease-in-out! duration-200!" class="uppercase px-8! py-2.5! rounded-full transition! ease-in-out! duration-200!"
style="background-color: var(--color-accent); color: #ffffff;"> style="background-color: var(--color-accent); color: var(--button-text-color, #ffffff);">
{{ __('Create an account') }} {{ __('Create an account') }}
</button> </button>
</a> </a>
resources/themes/atom/views/components/top-header.blade.php
+1 -1
View File
@@ -66,7 +66,7 @@
<form action="{{ route('logout') }}" method="POST" class="block"> <form action="{{ route('logout') }}" method="POST" class="block">
@csrf @csrf
<button type="submit" class="dropdown-item w-full text-left hover:!bg-red-500/20" style="color: var(--button-danger-color);"> <button type="submit" class="dropdown-item w-full text-center py-2 px-4 rounded-md font-semibold transition duration-200 ease-in-out" style="background-color: var(--button-danger-color, #ef4444); color: var(--button-danger-text-color, #ffffff);">
{{ __('Logout') }} {{ __('Logout') }}
</button> </button>
</form> </form>
resources/themes/atom/views/layouts/app.blade.php
+12
View File
@@ -109,6 +109,18 @@
--navbar-height: {{ setting('navbar_height', '64') }}px; --navbar-height: {{ setting('navbar_height', '64') }}px;
} }
/* Text shadow for readability on the site background */
.site-bg {
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.site-bg [class*="bg-"],
.site-bg [class*="rounded"],
.site-bg [style*="background"],
.site-bg .swiper-slide,
.site-bg img {
text-shadow: none;
}
/* Button Effects */ /* Button Effects */
@keyframes sparkle { @keyframes sparkle {
0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
resources/themes/dusk/css/app.css
+56 -4
View File
@@ -14,7 +14,12 @@
@layer components { @layer components {
.dropdown-item { .dropdown-item {
@apply w-full text-left px-2 py-1 transition duration-200 ease-in-out text-sm hover:bg-[#8770b2]; @apply w-full text-left px-2 py-1 transition duration-200 ease-in-out text-sm;
color: var(--color-text);
}
.dropdown-item:hover {
background-color: var(--color-primary, #8770b2);
color: var(--button-text-color, #ffffff);
} }
} }
@@ -25,8 +30,48 @@
body { body {
overflow-x: hidden; overflow-x: hidden;
color: var(--color-text, #ffffff);
} }
/* Base text utility classes using CSS variables */
.text-body { color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }
.text-nav { color: var(--color-navbar-text); }
.text-primary { color: var(--color-primary); }
.text-on-primary { color: var(--button-text-color); }
/* Settings navigation */
.settings-nav:hover,
.settings-nav.active {
background-color: var(--color-primary) !important;
color: var(--button-text-color) !important;
}
/* Dropdown panel */
.dropdown-children {
background-color: var(--color-dropdown, #ac93da);
box-shadow: var(--dropdown-shadow, 0 4px 16px rgba(0,0,0,0.25));
}
/* Footer hover */
.site-footer:hover {
color: var(--color-text) !important;
}
/* Navigation link hover states using CSS variables */
.nav-link {
color: var(--color-navbar-text);
transition: color 200ms ease-in-out;
}
.nav-link:hover {
color: var(--color-primary);
}
/* Text shadow for readability on images/dark backgrounds */
.text-shadow { text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.text-shadow-lg { text-shadow: 0 2px 8px rgba(0,0,0,0.9); }
#app { #app {
min-height: calc(100vh - 3.5rem); min-height: calc(100vh - 3.5rem);
} }
@@ -40,6 +85,12 @@ img {
pointer-events: none; pointer-events: none;
} }
input::placeholder,
textarea::placeholder {
color: var(--input-placeholder-color, var(--color-text-muted));
opacity: 1;
}
.site-bg { .site-bg {
position: absolute; position: absolute;
width: 100%; width: 100%;
@@ -62,7 +113,7 @@ img {
} }
.nav-header { .nav-header {
background-color: #171a23; background-color: var(--color-navbar, #171a23);
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -112,7 +163,7 @@ img {
} }
.sub-header { .sub-header {
color: #FFF; color: var(--color-text, #FFF);
height: 40px; height: 40px;
width: 100%; width: 100%;
display: flex; display: flex;
@@ -138,8 +189,9 @@ img {
} }
.read-more-link { .read-more-link {
z-index: 99999; /* Adjust as needed */ z-index: 99999;
position: relative; position: relative;
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
} }
.swiper-button-prev { .swiper-button-prev {
resources/themes/dusk/views/components/article-card.blade.php
+1 -1
View File
@@ -1,7 +1,7 @@
@props(['article']) @props(['article'])
<div class="swiper-slide relative article-image rounded-lg overflow-hidden" style="background-image: url({{ asset('storage/' . $article->image) }})"> <div class="swiper-slide relative article-image rounded-lg overflow-hidden" style="background-image: url({{ asset('storage/' . $article->image) }})">
<div class="absolute h-[90px] w-full left-0 bottom-0 bg-[#171a23]/95 text-white py-2 px-4"> <div class="absolute h-[90px] w-full left-0 bottom-0 py-2 px-4 text-shadow" style="background-color: var(--color-surface); color: var(--color-text);">
<h2 class="text-xl font-bold truncate"> <h2 class="text-xl font-bold truncate">
{{ $article->title }} {{ $article->title }}
</h2> </h2>
resources/themes/dusk/views/components/content/content-card.blade.php
+3 -3
View File
@@ -1,17 +1,17 @@
@props(['icon' => '', 'classes' => '']) @props(['icon' => '', 'classes' => ''])
<div class="w-full flex flex-col gap-y-4 rounded-lg overflow-hidden bg-[#2b303c] pb-4 shadow-sm text-gray-100 {{ $classes }}"> <div class="w-full flex flex-col gap-y-4 rounded-lg overflow-hidden bg-[#2b303c] pb-4 shadow-sm {{ $classes }}" style="color: var(--color-text);">
<div class="flex gap-x-2 bg-[#21242e] p-3"> <div class="flex gap-x-2 bg-[#21242e] p-3">
@if (!empty($icon)) @if (!empty($icon))
<div class="max-w-12.5 max-h-12.5 min-w-12.5 min-h-12.5 rounded-full relative flex items-center justify-center {{ $icon }}"></div> <div class="max-w-12.5 max-h-12.5 min-w-12.5 min-h-12.5 rounded-full relative flex items-center justify-center {{ $icon }}"></div>
@endif @endif
<div class="flex flex-col justify-center text-sm"> <div class="flex flex-col justify-center text-sm">
<p class="font-semibold text-gray-100">{{ $title }}</p> <p class="font-semibold">{{ $title }}</p>
@if(isset($underTitle)) @if(isset($underTitle))
<p class="text-gray-300">{{ $underTitle }}</p> <p class="text-muted">{{ $underTitle }}</p>
@endif @endif
</div> </div>
</div> </div>
resources/themes/dusk/views/components/content/shop-card.blade.php
+4 -4
View File
@@ -1,17 +1,17 @@
@props(['iconUrl' => '', 'color' => '', 'classes' => '']) @props(['iconUrl' => '', 'color' => '', 'classes' => ''])
<div class="w-full flex flex-col gap-y-4 rounded overflow-hidden bg-[#2b303c] pb-3 shadow-sm text-gray-100 {{ $classes }}"> <div class="w-full flex flex-col gap-y-4 rounded overflow-hidden bg-[#2b303c] pb-3 shadow-sm {{ $classes }}" style="color: var(--color-text);">
<div class="flex gap-x-2 bg-[#21242e] p-3 text-gray-100"> <div class="flex gap-x-2 bg-[#21242e] p-3">
@if (!empty($iconUrl)) @if (!empty($iconUrl))
<div style="background-image: url({{ $iconUrl }}); background-color: {{ $color }}; background-repeat: no-repeat; background-position: center;" class="max-w-[50px] max-h-[50px] min-w-[50px] min-h-[50px] rounded-full relative flex items-center justify-center "></div> <div style="background-image: url({{ $iconUrl }}); background-color: {{ $color }}; background-repeat: no-repeat; background-position: center;" class="max-w-[50px] max-h-[50px] min-w-[50px] min-h-[50px] rounded-full relative flex items-center justify-center "></div>
@endif @endif
<div class="flex flex-col justify-center text-sm w-full"> <div class="flex flex-col justify-center text-sm w-full">
<div class="w-full text-[16px]">{{ $title }}</div> <div class="w-full" style="font-size: var(--size-body-text, 16px);">{{ $title }}</div>
@if(isset($underTitle)) @if(isset($underTitle))
<p class="text-gray-300">{{ $underTitle }}</p> <p class="text-muted">{{ $underTitle }}</p>
@endif @endif
</div> </div>
</div> </div>
resources/themes/dusk/views/components/content/staff-content-section.blade.php
+3 -3
View File
@@ -1,6 +1,6 @@
@props(['badge' => '', 'color' => '#327fa8']) @props(['badge' => '', 'color' => '#327fa8'])
<div class="w-full flex flex-col gap-y-4 rounded-lg overflow-hidden bg-[#2b303c] pb-4 shadow-sm text-gray-100"> <div class="w-full flex flex-col gap-y-4 rounded-lg overflow-hidden bg-[#2b303c] pb-4 shadow-sm" style="color: var(--color-text);">
<div class="flex gap-x-2 bg-[#21242e] p-3"> <div class="flex gap-x-2 bg-[#21242e] p-3">
<div class="max-w-12.5 max-h-12.5 min-w-12.5 min-h-12.5 rounded-full relative flex items-center justify-center" <div class="max-w-12.5 max-h-12.5 min-w-12.5 min-h-12.5 rounded-full relative flex items-center justify-center"
style="background-color: {{ $color }}"> style="background-color: {{ $color }}">
@@ -8,10 +8,10 @@
</div> </div>
<div class="flex flex-col justify-center text-sm"> <div class="flex flex-col justify-center text-sm">
<p class="font-semibold text-gray-300">{{ $title }}</p> <p class="font-semibold text-nav">{{ $title }}</p>
@if(isset($underTitle)) @if(isset($underTitle))
<p class="text-gray-500">{{ $underTitle }}</p> <p class="text-muted">{{ $underTitle }}</p>
@endif @endif
</div> </div>
</div> </div>
resources/themes/dusk/views/components/currency.blade.php
+2 -2
View File
@@ -3,8 +3,8 @@
<div class="gap-x-3 flex"> <div class="gap-x-3 flex">
<div class="h-[25px] w-[25px] rounded-full {{ $icon }} outline-offset-[3px]"></div> <div class="h-[25px] w-[25px] rounded-full {{ $icon }} outline-offset-[3px]"></div>
<div class="dark:text-gray-400 flex gap-x-2"> <div class="flex gap-x-2 text-muted">
<span class="font-semibold dark:text-white"> <span class="font-semibold" style="color: var(--color-text);">
{{ $currency }} {{ $currency }}
</span> </span>
resources/themes/dusk/views/components/filler-article-card.blade.php
+4 -4
View File
@@ -1,19 +1,19 @@
<div class="h-[210px] dark:bg-gray-900 rounded w-full bg-white shadow-sm relative overflow-hidden transition ease-in-out duration-200"> <div class="h-[210px] rounded w-full shadow-sm relative overflow-hidden transition ease-in-out duration-200" style="background-color: var(--color-surface);">
<div style="background: url('https://i.imgur.com/uGLDOUu.png');" class="article-image"> <div style="background: url('https://i.imgur.com/uGLDOUu.png');" class="article-image">
</div> </div>
<div class="mt-4 px-4"> <div class="mt-4 px-4">
<p class="font-semibold text-lg truncate dark:text-gray-200"> <p class="font-semibold text-lg truncate text-body">
{{ __('No published articles') }} {{ __('No published articles') }}
</p> </p>
<div class="flex items-center gap-x-2"> <div class="flex items-center gap-x-2">
<div <div
class="mt-3 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800"> class="mt-3 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full" style="background-color: var(--color-background);">
<img src="{{ setting('avatar_imager') }}&headonly=1" alt=""> <img src="{{ setting('avatar_imager') }}&headonly=1" alt="">
</div> </div>
<p class="mt-4 font-semibold dark:text-gray-400"> <p class="mt-4 font-semibold text-muted">
{{ setting('hotel_name') }} {{ setting('hotel_name') }}
</p> </p>
</div> </div>
resources/themes/dusk/views/components/footer.blade.php
+1 -1
View File
@@ -1,4 +1,4 @@
<footer class="w-full h-14 flex items-center justify-center bg-gray-900 text-gray-500 font-bold cursor-pointer transition duration-200 ease-in-out hover:text-gray-400" onclick="showFooter()"> <footer class="w-full h-14 flex items-center justify-center font-bold cursor-pointer transition duration-200 ease-in-out site-footer" style="color: var(--color-text-muted); background-color: var(--color-surface);" onclick="showFooter()">
&copy {{ date('Y') }} {{ setting('hotel_name') }} is a not for profit educational project & is in no way affiliated with Sulake Corporation Oy. &copy {{ date('Y') }} {{ setting('hotel_name') }} is a not for profit educational project & is in no way affiliated with Sulake Corporation Oy.
</footer> </footer>
resources/themes/dusk/views/components/form/input.blade.php
+2 -2
View File
@@ -1,14 +1,14 @@
@props(['errorBag' => '', 'classes' => '', 'name', 'type' => 'text', 'value' => '', 'placeholder' => '', 'required' => true, 'autofocus' => false, 'readonly' => false]) @props(['errorBag' => '', 'classes' => '', 'name', 'type' => 'text', 'value' => '', 'placeholder' => '', 'required' => true, 'autofocus' => false, 'readonly' => false])
<input <input
class="{{ $classes }} focus:ring-0 border-2 border-gray-700 rounded bg-[#21242e] focus:border-[#eeb425] w-full text-gray-200 @error($name, $errorBag) border-red-600 ring-red-500 @enderror" class="{{ $classes }} focus:ring-0 border-2 rounded w-full @error($name, $errorBag) !border-red-600 ring-red-500 @enderror" style="border-color: var(--input-border-color, #4b5563); background-color: var(--input-background, #21242e); color: var(--input-text-color, #e2e8f0);"
id="{{ $name }}" type="{{ $type }}" name="{{ $name }}" value="{{ $value }}" id="{{ $name }}" type="{{ $type }}" name="{{ $name }}" value="{{ $value }}"
autocomplete="{{ $name }}" placeholder="{{ $placeholder }}" @if ($readonly) required @endif autocomplete="{{ $name }}" placeholder="{{ $placeholder }}" @if ($readonly) required @endif
@if ($autofocus) autofocus="{{ $name }}" @endif @if ($autofocus) autofocus="{{ $name }}" @endif
@if ($readonly) readonly @endif> @if ($readonly) readonly @endif>
@error($name, $errorBag) @error($name, $errorBag)
<p class="mt-1 text-xs italic text-red-500"> <p class="mt-1 text-xs italic" style="color: var(--button-danger-color, #ef4444);">
{{ $message }} {{ $message }}
</p> </p>
@enderror @enderror
resources/themes/dusk/views/components/form/label.blade.php
+2 -2
View File
@@ -1,11 +1,11 @@
@props(['for', 'info' => '']) @props(['for', 'info' => ''])
<div class="mb-2"> <div class="mb-2">
<label class="block font-semibold text-gray-700 dark:text-gray-200" for="{{ $for }}"> <label class="block font-semibold" for="{{ $for }}" style="color: var(--color-text);">
{{ $slot }} {{ $slot }}
</label> </label>
<p class="text-gray-500 dark:text-gray-400 text-[14px]"> <p class="text-muted" style="font-size: var(--size-small-text, 14px);">
{{ $info }} {{ $info }}
</p> </p>
</div> </div>
resources/themes/dusk/views/components/form/primary-button.blade.php
+1 -1
View File
@@ -1,6 +1,6 @@
@props(['classes' => '', 'type' => 'submit']) @props(['classes' => '', 'type' => 'submit'])
<button type="{{ $type }}" <button type="{{ $type }}"
class="{{ $classes }} w-full rounded bg-[#eeb425] text-white p-2 border-2 border-yellow-400 transition ease-in-out duration-200 hover:bg-[#d49f1c] font-semibold"> class="{{ $classes }} w-full rounded p-2 border-2 transition ease-in-out duration-200 font-semibold" style="background-color: var(--button-color); color: var(--button-text-color); border-color: var(--button-color);">
{{ $slot }} {{ $slot }}
</button> </button>
resources/themes/dusk/views/components/leaderboard-card.blade.php
+3 -3
View File
@@ -9,7 +9,7 @@
]) ])
<div class="flex flex-col gap-y-3"> <div class="flex flex-col gap-y-3">
<div class="flex gap-2 rounded-md py-2 px-4 bg-[#21242e]/90 text-gray-100 font-bold"> <div class="flex gap-2 rounded-md py-2 px-4 bg-[#21242e]/90 font-bold" style="color: var(--color-text);">
<div class="flex items-center"> <div class="flex items-center">
<img src="{{ asset('/assets/images/icons/' . $icon) }}" alt="" class="w-4" style="image-rendering: pixelated;"> <img src="{{ asset('/assets/images/icons/' . $icon) }}" alt="" class="w-4" style="image-rendering: pixelated;">
</div> </div>
@@ -27,10 +27,10 @@
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<p class="font-bold text-gray-100"> <p class="font-bold">
{{ $relationship ? $entry->{$relationship}?->username : $entry->username }} {{ $relationship ? $entry->{$relationship}?->username : $entry->username }}
</p> </p>
<p class="text-gray-200 text-sm"> <p class="text-muted text-sm">
{{ $formatValue ? $formatValue($entry->{$valueKey}) : $entry->{$valueKey} }} {{ $valueType }} {{ $formatValue ? $formatValue($entry->{$valueKey}) : $entry->{$valueKey} }} {{ $valueType }}
</p> </p>
</div> </div>
resources/themes/dusk/views/components/navigation/dropdown.blade.php
+3 -3
View File
@@ -40,7 +40,7 @@
:aria-controls="$id('dropdown-button')" :aria-controls="$id('dropdown-button')"
type="button" type="button"
@class([ @class([
'flex gap-1 items-center transition ease-in-out hover:text-[#ac93da] dropdown-parent', 'flex gap-1 items-center transition ease-in-out dropdown-parent nav-link',
'flex-col' => $flexCol, 'flex-col' => $flexCol,
]) ])
> >
@@ -51,7 +51,7 @@
{{ $slot }} {{ $slot }}
@if($showChevron) @if($showChevron)
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" style="color: var(--color-text-muted);" viewBox="0 0 20 20"
fill="currentColor"> fill="currentColor">
<path fill-rule="evenodd" <path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
@@ -68,7 +68,7 @@
x-on:click.outside="close($refs.button)" x-on:click.outside="close($refs.button)"
:id="$id('dropdown-button')" :id="$id('dropdown-button')"
style="display: none;" style="display: none;"
@class(['absolute left-0 rounded bg-[#ac93da] shadow-sm whitespace-nowrap overflow-hidden z-[100] flex flex-col py-2 items-center gap-2 dropdown-children mt-1', $childClasses]) @class(['absolute left-0 rounded shadow-sm whitespace-nowrap overflow-hidden z-[100] flex flex-col py-2 items-center gap-2 dropdown-children mt-1', $childClasses])
> >
{{ $children }} {{ $children }}
</div> </div>
resources/themes/dusk/views/components/navigation/mobile-navigation-menu.blade.php
+7 -7
View File
@@ -1,7 +1,7 @@
<nav class="nav-header" x-data="{ <nav class="nav-header" x-data="{
open: false, open: false,
}" x-on:keydown.escape="open = false" x-effect="document.body.classList.toggle('menu-open', open)"> }" x-on:keydown.escape="open = false" x-effect="document.body.classList.toggle('menu-open', open)">
<div class="w-full min-h-[60px] text-white px-5 relative"> <div class="w-full min-h-[60px] px-5 relative" style="color: var(--color-navbar-text);">
<button @click="open = !open" class="absolute right-5 top-5 z-50 p-2 rounded-lg transition-all duration-200 hover:bg-white/10" aria-controls="dusk-mobile-menu" :aria-expanded="open"> <button @click="open = !open" class="absolute right-5 top-5 z-50 p-2 rounded-lg transition-all duration-200 hover:bg-white/10" aria-controls="dusk-mobile-menu" :aria-expanded="open">
<span class="sr-only">{{ __('Open main menu') }}</span> <span class="sr-only">{{ __('Open main menu') }}</span>
<svg x-show="!open" x-cloak xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7"> <svg x-show="!open" x-cloak xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
@@ -19,7 +19,7 @@
x-transition:leave="transition ease-in duration-200" x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-4" x-transition:leave-end="opacity-0 -translate-y-4"
class="flex flex-col text-white gap-x-14 p-4 space-y-3"> class="flex flex-col gap-x-14 p-4 space-y-3" style="color: var(--color-navbar-text);">
<x-navigation.dropdown route-group="help-center*" :show-chevron="true" :flex-col="false"> <x-navigation.dropdown route-group="help-center*" :show-chevron="true" :flex-col="false">
{{ __('Community') }} {{ __('Community') }}
@@ -51,19 +51,19 @@
</x-slot:children> </x-slot:children>
</x-navigation.dropdown> </x-navigation.dropdown>
<a href="{{ route('leaderboard.index') }}" class="transition ease-in-out hover:text-[#ac93da]" @click="open = false"> <a href="{{ route('leaderboard.index') }}" class="transition ease-in-out nav-link" @click="open = false">
{{ __('Leaderboards') }} {{ __('Leaderboards') }}
</a> </a>
<a href="{{ route('article.index') }}" class="transition ease-in-out hover:text-[#ac93da]" @click="open = false"> <a href="{{ route('article.index') }}" class="transition ease-in-out nav-link" @click="open = false">
{{ __('News') }} {{ __('News') }}
</a> </a>
<a href="{{ route('welcome') }}" class="transition ease-in-out hover:text-[#ac93da]" @click="open = false"> <a href="{{ route('welcome') }}" class="transition ease-in-out nav-link" @click="open = false">
{{ __('Events') }} {{ __('Events') }}
</a> </a>
<a href="{{ route('shop.index') }}" class="transition ease-in-out hover:text-[#ac93da]" @click="open = false"> <a href="{{ route('shop.index') }}" class="transition ease-in-out nav-link" @click="open = false">
{{ __('Store') }} {{ __('Store') }}
</a> </a>
@@ -83,7 +83,7 @@
<form action="{{ route('logout') }}" method="POST"> <form action="{{ route('logout') }}" method="POST">
@csrf @csrf
<button type="submit" class="dropdown-item dark:text-gray-200 dark:hover:bg-gray-700 w-full text-left flex items-center gap-2 text-red-400 hover:text-red-300"> <button type="submit" class="dropdown-item flex items-center gap-2 justify-center w-full py-2 px-4 rounded-md font-semibold transition duration-200 ease-in-out" style="background-color: var(--button-danger-color, #ef4444); color: var(--button-danger-text-color, #ffffff);">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /> <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg> </svg>
resources/themes/dusk/views/components/navigation/navigation-menu.blade.php
+5 -5
View File
@@ -4,7 +4,7 @@
<img src="{{ setting('cms_logo') }}" alt=""> <img src="{{ setting('cms_logo') }}" alt="">
</a> </a>
<div class="flex text-white gap-x-14"> <div class="flex gap-x-14" style="color: var(--color-navbar-text);">
<x-navigation.dropdown icon="community_icon.png" route-group="help-center*" :uppercase="true"> <x-navigation.dropdown icon="community_icon.png" route-group="help-center*" :uppercase="true">
{{ __('Community') }} {{ __('Community') }}
@@ -39,12 +39,12 @@
</x-slot:children> </x-slot:children>
</x-navigation.dropdown> </x-navigation.dropdown>
<a href="{{ route('leaderboard.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out hover:text-[#ac93da]"> <a href="{{ route('leaderboard.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out nav-link">
<img class="icon" src="{{ asset('/assets/images/dusk/leaderboard_icon.png') }}" alt="community icon"> <img class="icon" src="{{ asset('/assets/images/dusk/leaderboard_icon.png') }}" alt="community icon">
Leaderboards Leaderboards
</a> </a>
<a href="{{ route('article.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out hover:text-[#ac93da]"> <a href="{{ route('article.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out nav-link">
<img class="icon" src="{{ asset('/assets/images/dusk/news_icon.png') }}" alt="community icon"> <img class="icon" src="{{ asset('/assets/images/dusk/news_icon.png') }}" alt="community icon">
News News
</a> </a>
@@ -57,7 +57,7 @@
--}} --}}
<a href="{{ route('shop.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out hover:text-[#ac93da]"> <a href="{{ route('shop.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out nav-link">
<img class="icon" src="{{ asset('/assets/images/dusk/store_icon.png') }}" alt="community icon"> <img class="icon" src="{{ asset('/assets/images/dusk/store_icon.png') }}" alt="community icon">
Store Store
</a> </a>
@@ -81,7 +81,7 @@
<form action="{{ route('logout') }}" method="POST"> <form action="{{ route('logout') }}" method="POST">
@csrf @csrf
<button type="submit" class="dropdown-item text-red-400 hover:text-red-300 flex items-center gap-2"> <button type="submit" class="dropdown-item flex items-center gap-2 justify-center w-full py-2 px-4 rounded-md font-semibold transition duration-200 ease-in-out" style="background-color: var(--button-danger-color, #ef4444); color: var(--button-danger-text-color, #ffffff);">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /> <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg> </svg>
resources/themes/dusk/views/components/page-header.blade.php
+2 -2
View File
@@ -6,12 +6,12 @@
@endif @endif
<div class="flex-col px-2"> <div class="flex-col px-2">
<div class="text-lg font-bold text-gray-100 flex items-center"> <div class="text-lg font-bold flex items-center" style="color: var(--color-text);">
{{ $slot }} {{ $slot }}
</div> </div>
@if(isset($subHeader)) @if(isset($subHeader))
<p class="text-gray-500">{{ $subHeader }}</p> <p class="text-muted">{{ $subHeader }}</p>
@endif @endif
</div> </div>
</div> </div>
resources/themes/dusk/views/components/user/settings/settings-navigation.blade.php
+4 -4
View File
@@ -1,5 +1,5 @@
<a href="{{ route('settings.account.show') }}" <a href="{{ route('settings.account.show') }}"
class="{{ request()->routeIs('settings.account.show') ? 'bg-[#eeb425] text-white' : 'bg-[#21242e]' }} text-gray-100 flex gap-x-2 justify-center items-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out hover:bg-[#eeb425] hover:text-white"> class="{{ request()->routeIs('settings.account.show') ? 'bg-[#eeb425]' : 'bg-[#21242e]' }} flex gap-x-2 justify-center items-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out settings-nav" style="color: var(--color-text);">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2"> stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" <path stroke-linecap="round" stroke-linejoin="round"
@@ -11,7 +11,7 @@
</a> </a>
<a href="{{ route('settings.password.show') }}" <a href="{{ route('settings.password.show') }}"
class="{{ request()->routeIs('settings.password.show') ? 'bg-[#eeb425] text-white' : 'bg-[#21242e]' }} text-gray-100 flex gap-x-2 justify-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out hover:bg-[#eeb425] hover:text-white"> class="{{ request()->routeIs('settings.password.show') ? 'bg-[#eeb425]' : 'bg-[#21242e]' }} flex gap-x-2 justify-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out settings-nav" style="color: var(--color-text);">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2"> stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" <path stroke-linecap="round" stroke-linejoin="round"
@@ -22,7 +22,7 @@
</a> </a>
<a href="{{ route('settings.two-factor') }}" <a href="{{ route('settings.two-factor') }}"
class="{{ request()->routeIs('settings.two-factor') ? 'bg-[#eeb425] text-white' : 'bg-[#21242e]' }} text-gray-100 flex gap-x-2 justify-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out hover:bg-[#eeb425] hover:text-white"> class="{{ request()->routeIs('settings.two-factor') ? 'bg-[#eeb425]' : 'bg-[#21242e]' }} flex gap-x-2 justify-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out settings-nav" style="color: var(--color-text);">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="h-6 w-6"> class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" <path stroke-linecap="round" stroke-linejoin="round"
@@ -33,7 +33,7 @@
</a> </a>
<a href="{{ route('settings.session-logs') }}" <a href="{{ route('settings.session-logs') }}"
class="{{ request()->routeIs('settings.session-logs') ? 'bg-[#eeb425] text-white' : 'bg-[#21242e]' }} text-gray-100 flex gap-x-2 justify-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out hover:bg-[#eeb425] hover:text-white"> class="{{ request()->routeIs('settings.session-logs') ? 'bg-[#eeb425]' : 'bg-[#21242e]' }} flex gap-x-2 justify-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out settings-nav" style="color: var(--color-text);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
resources/themes/dusk/views/index.blade.php
+4 -4
View File
@@ -2,7 +2,7 @@
@push('title', __('Welcome to the best hotel on the web!')) @push('title', __('Welcome to the best hotel on the web!'))
<div class="col-span-12 md:col-span-6 min-h-[250px] bg-gray-900/50 rounded-xl flex flex-col py-6 px-8 text-white"> <div class="col-span-12 md:col-span-6 min-h-[250px] rounded-xl flex flex-col py-6 px-8" style="color: var(--color-text); background-color: var(--color-surface);">
<h2 class="text-2xl">{{ __('Login') }}</h2> <h2 class="text-2xl">{{ __('Login') }}</h2>
<form action="{{ route('login') }}" method="POST"> <form action="{{ route('login') }}" method="POST">
@@ -19,10 +19,10 @@
<x-site-captchas /> <x-site-captchas />
<div class="mt-4 flex gap-4"> <div class="mt-4 flex gap-4">
<button type="submit" class="py-2 px-4 text-white bg-yellow-500 border-2 border-yellow-300 w-full rounded-md transition duration-300 ease-in-out hover:scale-[102%]">{{ __('Login') }}</button> <button type="submit" class="py-2 px-4 w-full rounded-md transition duration-300 ease-in-out hover:scale-[102%]" style="background-color: var(--color-primary); color: var(--button-text-color); border: 2px solid var(--color-primary);">{{ __('Login') }}</button>
<a href="{{ route('register') }}" class="w-full"> <a href="{{ route('register') }}" class="w-full">
<button type="button" class="py-2 px-4 text-white bg-gray-700 border-2 border-gray-600 w-full rounded-md transition duration-300 ease-in-out hover:scale-[102%]">{{ __('Register') }}</button> <button type="button" class="py-2 px-4 w-full rounded-md transition duration-300 ease-in-out hover:scale-[102%]" style="background-color: var(--color-surface); color: var(--color-text); border: 2px solid var(--color-text-muted);">{{ __('Register') }}</button>
</a> </a>
</div> </div>
</form> </form>
@@ -56,7 +56,7 @@
<div class="photo-overlay"></div> <div class="photo-overlay"></div>
<img class="h-[250px] w-full object-cover object-center rounded-md custom-shadow" src="{{ $photo->url }}" alt=""> <img class="h-[250px] w-full object-cover object-center rounded-md custom-shadow" src="{{ $photo->url }}" alt="">
<div class="absolute right-2 bottom-2 bg-black/70 p-2 rounded-md text-white flex gap-x-2 z-[5]"> <div class="absolute right-2 bottom-2 p-2 rounded-md flex gap-x-2 z-[5] text-shadow-sm" style="background-color: var(--color-surface); color: var(--color-text);">
<img class="self-center" src="{{ asset('/assets/images/dusk/author_camera_icon.png') }}" alt=""> <img class="self-center" src="{{ asset('/assets/images/dusk/author_camera_icon.png') }}" alt="">
<small> <small>
{{ $photo->user->username }} {{ $photo->user->username }}
resources/themes/dusk/views/layouts/app.blade.php
+69 -4
View File
@@ -37,10 +37,75 @@
--button-outline-text-color: {{ setting('button_outline_text_color', '#1a1a2e') }}; --button-outline-text-color: {{ setting('button_outline_text_color', '#1a1a2e') }};
--button-outline-hover-color: {{ setting('button_outline_hover_color', '#cf9d15') }}; --button-outline-hover-color: {{ setting('button_outline_hover_color', '#cf9d15') }};
--border-radius: {{ setting('border_radius', '12') }}px; --border-radius: {{ setting('border_radius', '12') }}px;
--border-color: {{ setting('border_color', '#eeb425') }};
--font-family: '{{ setting('font_family', 'Nunito') }}', sans-serif; --font-family: '{{ setting('font_family', 'Nunito') }}', sans-serif;
--dropdown-radius: {{ setting('dropdown_style', 'rounded') === 'square' ? '0px' : (setting('dropdown_style', 'rounded') === 'pill' ? '20px' : '8px') }}; --dropdown-radius: {{ setting('dropdown_style', 'rounded') === 'square' ? '0px' : (setting('dropdown_style', 'rounded') === 'pill' ? '20px' : '8px') }};
--dropdown-border: {{ setting('dropdown_border', '1') === '1' ? '1px solid var(--color-primary)' : 'none' }}; --dropdown-border: {{ setting('dropdown_border', '1') === '1' ? '1px solid var(--color-primary)' : 'none' }};
--dropdown-shadow: {{ setting('dropdown_shadow', 'medium') === 'none' ? 'none' : (setting('dropdown_shadow', 'medium') === 'small' ? '0 2px 8px rgba(0,0,0,0.15)' : (setting('dropdown_shadow', 'medium') === 'large' ? '0 8px 32px rgba(0,0,0,0.4)' : '0 4px 16px rgba(0,0,0,0.25)')) }}; --dropdown-shadow: {{ setting('dropdown_shadow', 'medium') === 'none' ? 'none' : (setting('dropdown_shadow', 'medium') === 'small' ? '0 2px 8px rgba(0,0,0,0.15)' : (setting('dropdown_shadow', 'medium') === 'large' ? '0 8px 32px rgba(0,0,0,0.4)' : '0 4px 16px rgba(0,0,0,0.25)')) }};
/* Sizing */
--size-navigation-font: {{ setting('size_navigation_font', '14') }}px;
--size-navigation-padding: {{ setting('size_navigation_padding', '16') }}px;
--size-navigation-height: {{ setting('size_navigation_height', '60') }}px;
--size-heading-h1: {{ setting('size_heading_h1', '32') }}px;
--size-heading-h2: {{ setting('size_heading_h2', '24') }}px;
--size-heading-h3: {{ setting('size_heading_h3', '20') }}px;
--size-body-text: {{ setting('size_body_text', '16') }}px;
--size-small-text: {{ setting('size_small_text', '14') }}px;
--size-button-text: {{ setting('size_button_text', '14') }}px;
--size-card-padding: {{ setting('size_card_padding', '24') }}px;
/* Avatar */
--avatar-border-radius: {{ setting('avatar_border_radius', '8') }}px;
--avatar-border-color: {{ setting('avatar_border_color', '#eeb425') }};
/* Badge */
--badge-background: {{ setting('badge_background', '#eeb425') }};
--badge-text-color: {{ setting('badge_text_color', '#000000') }};
--badge-border-radius: {{ setting('badge_border_radius', '4') }}px;
/* Card */
--card-border-width: {{ setting('card_border_width', '1') }}px;
--card-border-radius: {{ setting('card_border_radius', '12') }}px;
/* Link */
--link-color: {{ setting('link_color', '#eeb425') }};
--link-hover-color: {{ setting('link_hover_color', '#cf9d15') }};
/* Input */
--input-border-color: {{ setting('input_border_color', '#4b5563') }};
--input-text-color: {{ setting('input_text_color', '#ffffff') }};
--input-placeholder-color: {{ setting('input_placeholder_color', '#9ca3af') }};
--input-focus-color: {{ setting('input_focus_color', '#eeb425') }};
--input-background: {{ setting('input_background', '#1f2937') }};
/* Shadow */
--shadow-color: {{ setting('shadow_color', '#000000') }};
--shadow-opacity: {{ setting('shadow_opacity', '20') }};
/* Spinner */
--spinner-color: {{ setting('spinner_color', '#eeb425') }};
/* Navbar */
--navbar-height: {{ setting('navbar_height', '64') }}px;
}
/* Apply base text color */
body, .sub-header, .main-content, .nav-header a, .nav-header button {
color: var(--color-text);
}
/* Text shadow for readability on the site background image */
.main-content {
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* Remove text shadow inside cards and surfaced elements for crisp text */
.main-content [class*="bg-"],
.main-content [class*="rounded"],
.main-content [style*="background"],
.nav-header, .sub-header, footer, [class*="nav-"] {
text-shadow: none;
} }
</style> </style>
@@ -48,8 +113,8 @@
<script src="{{ asset('/assets/js/dusk.js') }}"></script> <script src="{{ asset('/assets/js/dusk.js') }}"></script>
</head> </head>
<body class="font-sans antialiased select-none"> <body class="font-sans antialiased select-none" style="color: var(--color-text); background-color: var(--color-background, #262a35);">
<div id="app" class="min-h-screen bg-[#262a35] relative"> <div id="app" class="min-h-screen relative" style="background-color: var(--color-surface, #262a35);">
<x-messages.flash-messages /> <x-messages.flash-messages />
{{-- Desktop navigation --}} {{-- Desktop navigation --}}
@@ -64,7 +129,7 @@
</div> </div>
{{-- Sub header --}} {{-- Sub header --}}
<div class="sub-header px-5 xl:px-0"> <div class="sub-header px-5 xl:px-0" style="color: var(--color-text); background-color: var(--color-navbar);">
<div class="max-w-7xl w-full h-[40px] flex items-center justify-between"> <div class="max-w-7xl w-full h-[40px] flex items-center justify-between">
<div class="flex gap-4 items-center z-20 relative"> <div class="flex gap-4 items-center z-20 relative">
<div> <div>
@@ -74,7 +139,7 @@
</x-navigation.language-selector> </x-navigation.language-selector>
</div> </div>
<a href="{{ is_array(setting('discord_invitation_link')) ? '' : setting('discord_invitation_link') }}" target="_blank" class="transition duration-300 ease-in-out hover:text-gray-300"> <a href="{{ is_array(setting('discord_invitation_link')) ? '' : setting('discord_invitation_link') }}" target="_blank" class="transition duration-300 ease-in-out nav-link">
Discord Discord
</a> </a>
</div> </div>