You've already forked Atomcms-edit
Improve text visibility in atom and dusk themes
- 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
@@ -37,10 +37,75 @@
|
||||
--button-outline-text-color: {{ setting('button_outline_text_color', '#1a1a2e') }};
|
||||
--button-outline-hover-color: {{ setting('button_outline_hover_color', '#cf9d15') }};
|
||||
--border-radius: {{ setting('border_radius', '12') }}px;
|
||||
--border-color: {{ setting('border_color', '#eeb425') }};
|
||||
--font-family: '{{ setting('font_family', 'Nunito') }}', sans-serif;
|
||||
--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-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>
|
||||
|
||||
@@ -48,8 +113,8 @@
|
||||
|
||||
<script src="{{ asset('/assets/js/dusk.js') }}"></script>
|
||||
</head>
|
||||
<body class="font-sans antialiased select-none">
|
||||
<div id="app" class="min-h-screen bg-[#262a35] relative">
|
||||
<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 relative" style="background-color: var(--color-surface, #262a35);">
|
||||
<x-messages.flash-messages />
|
||||
|
||||
{{-- Desktop navigation --}}
|
||||
@@ -64,7 +129,7 @@
|
||||
</div>
|
||||
|
||||
{{-- 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="flex gap-4 items-center z-20 relative">
|
||||
<div>
|
||||
@@ -74,7 +139,7 @@
|
||||
</x-navigation.language-selector>
|
||||
</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
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user