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/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>