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
resources/themes/dusk/views/components/article-card.blade.php
+1 -1
View File
@@ -1,7 +1,7 @@
@props(['article'])
<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">
{{ $article->title }}
</h2>
resources/themes/dusk/views/components/content/content-card.blade.php
+3 -3
View File
@@ -1,17 +1,17 @@
@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">
@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>
@endif
<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))
<p class="text-gray-300">{{ $underTitle }}</p>
<p class="text-muted">{{ $underTitle }}</p>
@endif
</div>
</div>
resources/themes/dusk/views/components/content/shop-card.blade.php
+4 -4
View File
@@ -1,17 +1,17 @@
@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="flex gap-x-2 bg-[#21242e] p-3 text-gray-100">
<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">
@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>
@endif
<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))
<p class="text-gray-300">{{ $underTitle }}</p>
<p class="text-muted">{{ $underTitle }}</p>
@endif
</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'])
<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="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 }}">
@@ -8,10 +8,10 @@
</div>
<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))
<p class="text-gray-500">{{ $underTitle }}</p>
<p class="text-muted">{{ $underTitle }}</p>
@endif
</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="h-[25px] w-[25px] rounded-full {{ $icon }} outline-offset-[3px]"></div>
<div class="dark:text-gray-400 flex gap-x-2">
<span class="font-semibold dark:text-white">
<div class="flex gap-x-2 text-muted">
<span class="font-semibold" style="color: var(--color-text);">
{{ $currency }}
</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>
<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') }}
</p>
<div class="flex items-center gap-x-2">
<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="">
</div>
<p class="mt-4 font-semibold dark:text-gray-400">
<p class="mt-4 font-semibold text-muted">
{{ setting('hotel_name') }}
</p>
</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.
</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])
<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 }}"
autocomplete="{{ $name }}" placeholder="{{ $placeholder }}" @if ($readonly) required @endif
@if ($autofocus) autofocus="{{ $name }}" @endif
@if ($readonly) readonly @endif>
@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 }}
</p>
@enderror
resources/themes/dusk/views/components/form/label.blade.php
+2 -2
View File
@@ -1,11 +1,11 @@
@props(['for', 'info' => ''])
<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 }}
</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 }}
</p>
</div>
resources/themes/dusk/views/components/form/primary-button.blade.php
+1 -1
View File
@@ -1,6 +1,6 @@
@props(['classes' => '', 'type' => 'submit'])
<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 }}
</button>
resources/themes/dusk/views/components/leaderboard-card.blade.php
+5 -5
View File
@@ -9,7 +9,7 @@
])
<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">
<img src="{{ asset('/assets/images/icons/' . $icon) }}" alt="" class="w-4" style="image-rendering: pixelated;">
</div>
@@ -27,10 +27,10 @@
</div>
<div class="flex flex-col">
<p class="font-bold text-gray-100">
{{ $relationship ? $entry->{$relationship}?->username : $entry->username }}
</p>
<p class="text-gray-200 text-sm">
<p class="font-bold">
{{ $relationship ? $entry->{$relationship}?->username : $entry->username }}
</p>
<p class="text-muted text-sm">
{{ $formatValue ? $formatValue($entry->{$valueKey}) : $entry->{$valueKey} }} {{ $valueType }}
</p>
</div>
resources/themes/dusk/views/components/navigation/dropdown.blade.php
+3 -3
View File
@@ -40,7 +40,7 @@
:aria-controls="$id('dropdown-button')"
type="button"
@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,
])
>
@@ -51,7 +51,7 @@
{{ $slot }}
@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">
<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"
@@ -68,7 +68,7 @@
x-on:click.outside="close($refs.button)"
:id="$id('dropdown-button')"
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 }}
</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="{
open: false,
}" 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">
<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">
@@ -19,7 +19,7 @@
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0"
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">
{{ __('Community') }}
@@ -51,19 +51,19 @@
</x-slot:children>
</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') }}
</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') }}
</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') }}
</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') }}
</a>
@@ -83,7 +83,7 @@
<form action="{{ route('logout') }}" method="POST">
@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">
<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>
resources/themes/dusk/views/components/navigation/navigation-menu.blade.php
+5 -5
View File
@@ -4,7 +4,7 @@
<img src="{{ setting('cms_logo') }}" alt="">
</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">
{{ __('Community') }}
@@ -39,12 +39,12 @@
</x-slot:children>
</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">
Leaderboards
</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">
News
</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">
Store
</a>
@@ -81,7 +81,7 @@
<form action="{{ route('logout') }}" method="POST">
@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">
<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>
resources/themes/dusk/views/components/page-header.blade.php
+2 -2
View File
@@ -6,12 +6,12 @@
@endif
<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 }}
</div>
@if(isset($subHeader))
<p class="text-gray-500">{{ $subHeader }}</p>
<p class="text-muted">{{ $subHeader }}</p>
@endif
</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') }}"
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"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
@@ -11,7 +11,7 @@
</a>
<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"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
@@ -22,7 +22,7 @@
</a>
<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"
class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round"
@@ -33,7 +33,7 @@
</a>
<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"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />