diff options
Diffstat (limited to 'views/mods/mod_revocation')
| -rw-r--r-- | views/mods/mod_revocation/wp_footer.phtml | 2 | ||||
| -rw-r--r-- | views/mods/mod_revocation/wpsg_revocation.css | 6 |
2 files changed, 7 insertions, 1 deletions
diff --git a/views/mods/mod_revocation/wp_footer.phtml b/views/mods/mod_revocation/wp_footer.phtml index c210881..b535c0d 100644 --- a/views/mods/mod_revocation/wp_footer.phtml +++ b/views/mods/mod_revocation/wp_footer.phtml @@ -40,7 +40,7 @@ <button type="button" class="button button-primary wpsg_revocation_button_submit"><?php echo esc_html__('Widerruf bestätigen', 'wpsg'); ?></button> </div> <div class="loading"> - <img src="<?php echo esc_url(WPSG_URL.'views/gfx/ajax-loader.gif'); ?>" width="16" height="11" alt="<?php echo esc_attr__('Bitte warten ...', 'wpsg'); ?>" /> + <svg class="wpsg_revocation_loader" width="24" height="16" viewBox="0 0 24 16" role="img" aria-label="<?php echo esc_attr__('Bitte warten ...', 'wpsg'); ?>" focusable="false"><rect x="2" y="3" width="4" height="10" /><rect x="10" y="3" width="4" height="10" /><rect x="18" y="3" width="4" height="10" /></svg> </div> </div> </div> diff --git a/views/mods/mod_revocation/wpsg_revocation.css b/views/mods/mod_revocation/wpsg_revocation.css index 6238c19..ea7d833 100644 --- a/views/mods/mod_revocation/wpsg_revocation.css +++ b/views/mods/mod_revocation/wpsg_revocation.css @@ -43,6 +43,12 @@ #wpsg_revocation_dialog .inner > .footer { display:flex; flex:0 0 auto; align-items:center; justify-content:flex-end; gap:0.75em; padding-top:1em; border-top:1px solid var(--rv-line-soft); } #wpsg_revocation_dialog .inner > .loading { position:absolute; left:0; top:0; z-index:2; display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:var(--rv-radius); background-color:rgba(255, 255, 255, 0.7); opacity:0; pointer-events:none; transition:opacity 0.2s ease-out; } #wpsg_revocation_dialog.loading > .inner > .loading { opacity:1; pointer-events:all; } +/* Ladesymbol als SVG statt ajax-loader.gif: scharf auf jedem Display; Grau wie bisher, die Ladefläche ist immer hell */ +#wpsg_revocation_dialog .wpsg_revocation_loader rect { fill:#777777; opacity:0.35; animation:wpsg_rv_loader 0.9s ease-in-out infinite; } +#wpsg_revocation_dialog .wpsg_revocation_loader rect:nth-child(2) { animation-delay:0.15s; } +#wpsg_revocation_dialog .wpsg_revocation_loader rect:nth-child(3) { animation-delay:0.3s; } +@keyframes wpsg_rv_loader { 0%, 100% { opacity:0.35; } 50% { opacity:1; } } +@media (prefers-reduced-motion: reduce) { #wpsg_revocation_dialog .wpsg_revocation_loader rect { animation:none; } } /* Absende-Button im Dialog und auf der Formularseite */ #wpsg_revocation_dialog .wpsg_revocation_button_submit, .wpsg_revocation_page .wpsg_revocation_page_submit_wrap button, .wpsg_revocation_page .wpsg_revocation_page_submit_wrap input[type="submit"] { display:inline-flex; align-items:center; justify-content:center; min-height:0; margin:0; padding:0.65em 1.1em; border:1px solid currentColor; border-radius:var(--rv-radius); background:none; color:inherit; font:inherit; font-weight:600; line-height:1.2; text-shadow:none; box-shadow:none; cursor:pointer; transition:background-color 0.15s ease-out; } |