Jelajahi Sumber

Artificer cover: white text, overlay on uploaded covers, calm default art (#5743)

Artificer's home hero and page covers put dark gray text straight on the
cover image. That works on the stock pale-blue art, but on an uploaded
photo the heading and subtitle get hard to read, which fails WCAG AA.

The .bx-cover-gradient div in cover_home.html and cover.html did nothing
in Artificer. Its relative/mx-auto classes left it 0px tall with no
background. It is now a full-bleed overlay. cover.css paints it 55% black
when a custom cover is set, the lowest value that keeps white text at
4.5:1 over a pure white pixel, and leaves it transparent over the default
art.

Cover text is white in both themes. The hero accent line moves from the
500 to the 200 tints so it stays above 3:1 over a darkened photo.

cover-default.svg and cover-default-dark.svg are new: a navy gradient
with a soft blue glow and two faint waves, drawn for white text. White
measures at least 7.3:1 on the light art and 11.8:1 on the dark one, and
the navy keeps the blue-600 primary button distinct from the background.

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Andrey Yasko 2 minggu lalu
induk
melakukan
2d010940f5

+ 2 - 2
modules/boonex/artificer/data/template/system/cover.html

@@ -8,7 +8,7 @@
 <div class="bx-menu-toolbar-padding pt-16">
     <div class="bx-cover-gap overflow-hidden">
         <div class="bx-cover-wrapper<bx_if:empty_cover_class> bx-cover-empty</bx_if:empty_cover_class> relative" <bx_if:bg>style="background-image:url(__image_url__)"</bx_if:bg>>
-            <div class="bx-cover-gradient bx-def-page-width relative mx-auto"></div>
+            <div class="bx-cover-gradient absolute inset-0 pointer-events-none"></div>
             <div class="relative mx-auto py-16 text-center">
                 <bx_if:image>
                     <div class="bx-cover-image">
@@ -17,7 +17,7 @@
                 </bx_if:image>
                 <div class="bx-cover-title flex justify-center items-center">
                     <bx_if:title>
-                    <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-50">
+                    <h1 class="text-4xl font-bold tracking-tight text-white">
                         <span class="block pb-1 relative">__title__</span>
                         <span class="block pb-1 bg-clip-text text-transparent bg-gradient-to-r from-green-500 to-blue-500"></span>
                     </h1>

+ 4 - 4
modules/boonex/artificer/data/template/system/cover_home.html

@@ -8,14 +8,14 @@
 <div class="bx-menu-toolbar-padding pt-16">
     <div class="bx-cover-gap overflow-hidden">
         <div class="bx-cover-wrapper<bx_if:empty_cover_class> bx-cover-empty</bx_if:empty_cover_class> relative" <bx_if:bg>style="background-image:url(__image_url__)"</bx_if:bg>>
-            <div class="bx-cover-gradient bx-def-page-width relative mx-auto"></div>
+            <div class="bx-cover-gradient absolute inset-0 pointer-events-none"></div>
             <div class="relative mx-auto py-16 text-center">
                 <div>
-                    <h1 class="text-4xl  sm:text-5xl xl:text-6xl tracking-tight  font-bold text-gray-800 dark:text-white ">
+                    <h1 class="text-4xl  sm:text-5xl xl:text-6xl tracking-tight  font-bold text-white">
                         <span class="block pb-1 relative"><bx_text:_bx_artificer_txt_splash_welcome_l1 /></span>
-                        <span class="block pb-1  bg-clip-text text-transparent bg-gradient-to-r from-green-500 to-blue-500"><bx_text:_bx_artificer_txt_splash_welcome_l2 /></span>
+                        <span class="block pb-1  bg-clip-text text-transparent bg-gradient-to-r from-green-200 to-blue-200"><bx_text:_bx_artificer_txt_splash_welcome_l2 /></span>
                     </h1>
-                    <p class="p-8  font-light text-gray-700 dark:text-gray-300 text-base  sm:text-lg xl:text-xl">
+                    <p class="p-8  font-light text-white text-base  sm:text-lg xl:text-xl">
                         <span class="block"><bx_text:_bx_artificer_txt_splash_welcome_l3 /></span>
                     </p>
                     <div class=" w-full flex justify-center items-center">

+ 8 - 0
modules/boonex/artificer/data/template/system/css/cover.css

@@ -14,6 +14,14 @@ import url(../../../../../../../template/css/cover.css);
 .dark .bx-cover-wrapper {
     background-image: url(../images/cover-default-dark.svg);
 }
+/* Scrim under the white cover text. At 55% black even a pure white pixel of an uploaded
+   image keeps the text at 4.5:1; the default art is dark enough without it. */
+.bx-cover-wrapper > .bx-cover-gradient {
+    background-color: rgba(0, 0, 0, 0.55);
+}
+.bx-cover-wrapper.bx-cover-empty > .bx-cover-gradient {
+    background-color: transparent;
+}
 .bx-image-edit-buttons{
     position: absolute;
     left:1rem;

File diff ditekan karena terlalu besar
+ 0 - 0
modules/boonex/artificer/data/template/system/images/cover-default-dark.svg


File diff ditekan karena terlalu besar
+ 0 - 0
modules/boonex/artificer/data/template/system/images/cover-default.svg


Beberapa file tidak ditampilkan karena terlalu banyak file yang berubah dalam diff ini