WordPress.org
Get WordPress

Plugin Directory

Changeset 3372020


Ignore:
Timestamp:
10/02/2025 09:26:53 PM (5 months ago)
Author:
chrmrtns
Message:

Version 2.6.0: Enhanced form styling and comprehensive dark mode support

Location:
keyless-auth/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • keyless-auth/trunk/assets/css/2fa-frontend.css

    r3367966 r3372020  
    44 *
    55 * @since 2.4.0
     6 * @updated 2.6.0 - Added dark mode support
    67 */
     8
     9/* CSS Custom Properties for theming */
     10:root {
     11    --2fa-bg-primary: #ffffff;
     12    --2fa-bg-secondary: #f9f9f9;
     13    --2fa-bg-tertiary: #f0f0f0;
     14    --2fa-bg-info: #f0f6fc;
     15    --2fa-text-primary: #23282d;
     16    --2fa-text-secondary: #666;
     17    --2fa-text-light: #555;
     18    --2fa-border-primary: #e1e1e1;
     19    --2fa-border-secondary: #ddd;
     20    --2fa-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     21}
    722
    823/* Main container */
    … …  
    1025    width: 100%;
    1126    max-width: 1400px;
    12     background: #ffffff;
    13     border: 1px solid #e1e1e1;
     27    background: var(--2fa-bg-primary);
     28    border: 1px solid var(--2fa-border-primary);
    1429    border-radius: 8px;
    1530    padding: 30px;
    16     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     31    box-shadow: var(--2fa-shadow);
    1732    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    1833    box-sizing: border-box;
    … …  
    2338    text-align: center;
    2439    margin-bottom: 30px;
    25     border-bottom: 1px solid #e1e1e1;
     40    border-bottom: 1px solid var(--2fa-border-primary);
    2641    padding-bottom: 20px;
    2742}
    … …  
    2944.chrmrtns-2fa-header h3 {
    3045    margin: 0 0 10px 0;
    31     color: #23282d;
     46    color: var(--2fa-text-primary);
    3247    font-size: 24px;
    3348}
    3449
    3550.chrmrtns-2fa-header p {
    36     color: #666;
     51    color: var(--2fa-text-secondary);
    3752    margin: 10px 0;
    3853}
    … …  
    7792    margin-bottom: 30px;
    7893    padding: 20px;
    79     background: #f9f9f9;
     94    background: var(--2fa-bg-secondary);
    8095    border-radius: 5px;
    8196    border-left: 4px solid #0073aa;
    … …  
    89104
    90105.chrmrtns-2fa-step h5 {
    91     color: #23282d;
     106    color: var(--2fa-text-primary);
    92107    margin-bottom: 10px;
    93108}
    … …  
    103118
    104119.chrmrtns-2fa-apps li {
    105     background: white;
     120    background: var(--2fa-bg-primary);
    106121    padding: 10px;
    107122    border-radius: 5px;
    108     border: 1px solid #e1e1e1;
     123    border: 1px solid var(--2fa-border-primary);
    109124    text-align: center;
     125    color: var(--2fa-text-primary);
    110126}
    111127
    … …  
    125141.chrmrtns-2fa-qr #chrmrtns-2fa-qrcode {
    126142    display: inline-block;
    127     border: 1px solid #e1e1e1;
     143    border: 1px solid var(--2fa-border-primary);
    128144    border-radius: 5px;
    129145    padding: 10px;
    130     background: #ffffff;
     146    background: var(--2fa-bg-primary);
    131147}
    132148
    … …  
    137153    width: 200px;
    138154    height: 200px;
    139     color: #666;
     155    color: var(--2fa-text-secondary);
    140156    font-style: italic;
    141157}
    … …  
    168184    margin: 10px 0;
    169185    padding: 10px;
    170     background: #f0f0f0;
     186    background: var(--2fa-bg-tertiary);
    171187    border-radius: 5px;
    172188    flex-wrap: wrap;
    … …  
    174190
    175191.chrmrtns-2fa-secret code {
    176     background: #ffffff;
     192    background: var(--2fa-bg-primary);
    177193    padding: 8px 12px;
    178194    border-radius: 3px;
    179     border: 1px solid #e1e1e1;
     195    border: 1px solid var(--2fa-border-primary);
    180196    font-family: 'Courier New', monospace;
    181197    font-size: 14px;
    … …  
    183199    flex: 1;
    184200    min-width: 200px;
     201    color: var(--2fa-text-primary);
    185202}
    186203
    … …  
    222239    text-align: center;
    223240    letter-spacing: 2px;
    224     border: 2px solid #e1e1e1;
     241    border: 2px solid var(--2fa-border-primary);
    225242    border-radius: 5px;
    226243    font-family: 'Courier New', monospace;
     244    background: var(--2fa-bg-primary);
     245    color: var(--2fa-text-primary);
    227246}
    228247
    … …  
    258277    margin-top: 30px;
    259278    padding: 20px;
    260     background: #f0f6fc;
     279    background: var(--2fa-bg-info);
    261280    border-left: 4px solid #0073aa;
    262281    border-radius: 5px;
    … …  
    277296
    278297.chrmrtns-2fa-info-item {
    279     background: #f9f9f9;
     298    background: var(--2fa-bg-secondary);
    280299    padding: 15px;
    281300    border-radius: 5px;
    … …  
    285304.chrmrtns-2fa-info-item h4 {
    286305    margin: 0 0 10px 0;
    287     color: #666;
     306    color: var(--2fa-text-secondary);
    288307    font-size: 14px;
    289308    text-transform: uppercase;
    … …  
    295314    font-size: 18px;
    296315    font-weight: 600;
    297     color: #23282d;
     316    color: var(--2fa-text-primary);
    298317}
    299318
    … …  
    305324.chrmrtns-2fa-actions > h4 {
    306325    margin-bottom: 20px;
    307     color: #23282d;
    308     border-bottom: 1px solid #e1e1e1;
     326    color: var(--2fa-text-primary);
     327    border-bottom: 1px solid var(--2fa-border-primary);
    309328    padding-bottom: 10px;
    310329}
    … …  
    313332    margin-bottom: 30px;
    314333    padding: 20px;
    315     background: #f9f9f9;
     334    background: var(--2fa-bg-secondary);
    316335    border-radius: 5px;
    317336}
    … …  
    319338.chrmrtns-2fa-action h5 {
    320339    margin: 0 0 10px 0;
    321     color: #23282d;
     340    color: var(--2fa-text-primary);
    322341}
    323342
    324343.chrmrtns-2fa-action p {
    325344    margin: 10px 0;
    326     color: #666;
     345    color: var(--2fa-text-secondary);
    327346}
    328347
    … …  
    336355    margin: 15px 0;
    337356    padding: 15px;
    338     background: white;
    339     border: 1px solid #e1e1e1;
     357    background: var(--2fa-bg-primary);
     358    border: 1px solid var(--2fa-border-primary);
    340359    border-radius: 5px;
    341360}
    … …  
    349368
    350369.chrmrtns-backup-code {
    351     background: #f0f0f0;
     370    background: var(--2fa-bg-tertiary);
    352371    padding: 8px;
    353372    text-align: center;
    … …  
    355374    font-family: 'Courier New', monospace;
    356375    font-weight: bold;
     376    color: var(--2fa-text-primary);
    357377}
    358378
    … …  
    397417
    398418.chrmrtns-modal-content {
    399     background: white;
     419    background: var(--2fa-bg-primary);
    400420    border-radius: 8px;
    401421    max-width: 600px;
    … …  
    411431    align-items: center;
    412432    padding: 20px 30px;
    413     border-bottom: 1px solid #e1e1e1;
     433    border-bottom: 1px solid var(--2fa-border-primary);
    414434}
    415435
    416436.chrmrtns-modal-header h3 {
    417437    margin: 0;
    418     color: #23282d;
     438    color: var(--2fa-text-primary);
    419439}
    420440
    … …  
    424444    font-size: 24px;
    425445    cursor: pointer;
    426     color: #666;
     446    color: var(--2fa-text-secondary);
    427447    padding: 0;
    428448    width: 30px;
    … …  
    434454
    435455.chrmrtns-modal-close:hover {
    436     color: #000;
     456    color: var(--2fa-text-primary);
    437457}
    438458
    … …  
    462482
    463483.chrmrtns-backup-codes-grid .chrmrtns-backup-code {
    464     background: #f8f9fa;
    465     border: 1px solid #e1e1e1;
     484    background: var(--2fa-bg-secondary);
     485    border: 1px solid var(--2fa-border-primary);
    466486    padding: 12px 8px;
    467487    font-size: 14px;
     488    color: var(--2fa-text-primary);
    468489}
    469490
    … …  
    659680    border-color: #46b450;
    660681}
     682
     683/* ========================================
     684   DARK MODE SUPPORT
     685   ======================================== */
     686
     687/* System dark mode preference */
     688@media (prefers-color-scheme: dark) {
     689    :root {
     690        --2fa-bg-primary: #1e1e1e;
     691        --2fa-bg-secondary: #2c3338;
     692        --2fa-bg-tertiary: #3c434a;
     693        --2fa-bg-info: #2c3338;
     694        --2fa-text-primary: #f0f0f1;
     695        --2fa-text-secondary: #c3c4c7;
     696        --2fa-text-light: #a7aaad;
     697        --2fa-border-primary: #646970;
     698        --2fa-border-secondary: #3c434a;
     699        --2fa-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     700    }
     701}
     702
     703/* Custom dark mode classes - HTML element */
     704html.cf-theme-dark,
     705html.dark-mode,
     706html.dark,
     707html.theme-dark,
     708html.is-dark-theme,
     709html[data-theme="dark"],
     710html[data-color-scheme="dark"],
     711html[data-mode="dark"],
     712/* Body element */
     713body.cf-theme-dark,
     714body.dark-mode,
     715body.dark,
     716body.theme-dark,
     717body.is-dark-theme,
     718body[data-theme="dark"],
     719body[data-color-scheme="dark"],
     720body[data-mode="dark"] {
     721    --2fa-bg-primary: #1e1e1e;
     722    --2fa-bg-secondary: #2c3338;
     723    --2fa-bg-tertiary: #3c434a;
     724    --2fa-bg-info: #2c3338;
     725    --2fa-text-primary: #f0f0f1;
     726    --2fa-text-secondary: #c3c4c7;
     727    --2fa-text-light: #a7aaad;
     728    --2fa-border-primary: #646970;
     729    --2fa-border-secondary: #3c434a;
     730    --2fa-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     731}
     732
     733/* Container-level dark mode classes */
     734.cf-theme-dark .chrmrtns-2fa-container,
     735.dark-mode .chrmrtns-2fa-container,
     736.dark .chrmrtns-2fa-container,
     737.theme-dark .chrmrtns-2fa-container,
     738.is-dark-theme .chrmrtns-2fa-container,
     739[data-theme="dark"] .chrmrtns-2fa-container,
     740[data-color-scheme="dark"] .chrmrtns-2fa-container,
     741[data-mode="dark"] .chrmrtns-2fa-container {
     742    --2fa-bg-primary: #1e1e1e;
     743    --2fa-bg-secondary: #2c3338;
     744    --2fa-bg-tertiary: #3c434a;
     745    --2fa-bg-info: #2c3338;
     746    --2fa-text-primary: #f0f0f1;
     747    --2fa-text-secondary: #c3c4c7;
     748    --2fa-text-light: #a7aaad;
     749    --2fa-border-primary: #646970;
     750    --2fa-border-secondary: #3c434a;
     751    --2fa-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     752}

  • keyless-auth/trunk/includes/class-chrmrtns-kla-2fa-frontend.php

    r3368068 r3372020  
    127127            CHRMRTNS_KLA_PLUGIN_URL . 'assets/css/2fa-frontend.css',
    128128            array(),
    129             CHRMRTNS_KLA_VERSION
     129            CHRMRTNS_KLA_VERSION . '.1' // Added .1 to force cache bust for dark mode
    130130        );
    131131    }

  • keyless-auth/trunk/includes/class-chrmrtns-kla-core.php

    r3369805 r3372020  
    120120       
    121121        ?>
    122         <form method="post" class="chrmrtns-form">
    123             <p>
    124                 <label for="user_email_username"><?php echo esc_html(apply_filters('chrmrtns_kla_change_form_label', $login_label)); ?></label><br>
    125                 <input type="text" name="user_email_username" id="user_email_username" class="input" value="" size="20" required />
    126             </p>
    127             <?php wp_nonce_field('chrmrtns_kla_keyless_login_request', 'nonce', false); ?>
    128             <input type="hidden" name="chrmrtns_kla_magic_form" value="1" />
    129             <?php if (!empty($atts['redirect'])): ?>
    130                 <input type="hidden" name="chrmrtns_kla_redirect" value="<?php echo esc_url($atts['redirect']); ?>" />
    131             <?php endif; ?>
    132             <p class="submit">
    133                 <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="<?php esc_html_e('Send me the link', 'keyless-auth'); ?>" />
    134             </p>
    135         </form>
     122        <div class="chrmrtns-kla-form-wrapper">
     123            <form method="post" class="chrmrtns-form">
     124                <p>
     125                    <label for="user_email_username"><?php echo esc_html(apply_filters('chrmrtns_kla_change_form_label', $login_label)); ?></label><br>
     126                    <input type="text" name="user_email_username" id="user_email_username" class="input" value="" size="20" required />
     127                </p>
     128                <?php wp_nonce_field('chrmrtns_kla_keyless_login_request', 'nonce', false); ?>
     129                <input type="hidden" name="chrmrtns_kla_magic_form" value="1" />
     130                <?php if (!empty($atts['redirect'])): ?>
     131                    <input type="hidden" name="chrmrtns_kla_redirect" value="<?php echo esc_url($atts['redirect']); ?>" />
     132                <?php endif; ?>
     133                <p class="submit">
     134                    <input type="submit" name="wp-submit" id="chrmrtns-submit" class="button-primary" value="<?php esc_html_e('Send me the link', 'keyless-auth'); ?>" />
     135                </p>
     136            </form>
     137        </div>
    136138        <?php
    137139    }
    … …  
    213215        $redirect_to = !empty($atts['redirect']) ? esc_url($atts['redirect']) : $this->get_current_page_url();
    214216        ?>
     217        <div class="chrmrtns-kla-form-wrapper">
    215218        <div class="chrmrtns-full-login-container">
    216219            <!-- Standard WordPress Login Form -->
    217             <div class="chrmrtns-standard-login">
     220            <div class="chrmrtns-standard-login" data-form-type="password">
    218221                <h4><?php esc_html_e('Login with Password', 'keyless-auth'); ?></h4>
    219222                <?php
    … …  
    244247
    245248            <!-- Magic Link Login Form -->
    246             <div class="chrmrtns-magic-login">
     249            <div class="chrmrtns-magic-login" data-form-type="magic">
    247250                <h4><?php esc_html_e('Magic Link Login', 'keyless-auth'); ?></h4>
    248251                <p class="chrmrtns-magic-description"><?php esc_html_e('No password required - we\'ll send you a secure login link via email.', 'keyless-auth'); ?></p>
    … …  
    324327        }
    325328        </style>
     329        </div><!-- .chrmrtns-kla-form-wrapper -->
    326330        <?php
    327331    }
    … …  
    723727     */
    724728    public function enqueue_frontend_scripts() {
     729        // Enqueue legacy styles for backward compatibility
    725730        if (file_exists(CHRMRTNS_KLA_PLUGIN_DIR . '/assets/css/style-front-end.css')) {
    726731            wp_register_style('chrmrtns_frontend_stylesheet', CHRMRTNS_KLA_PLUGIN_URL . 'assets/css/style-front-end.css', array(), CHRMRTNS_KLA_VERSION);
    727732            wp_enqueue_style('chrmrtns_frontend_stylesheet');
     733        }
     734
     735        // Enqueue enhanced forms stylesheet with higher priority
     736        if (file_exists(CHRMRTNS_KLA_PLUGIN_DIR . '/assets/css/forms-enhanced.css')) {
     737            wp_enqueue_style(
     738                'chrmrtns_kla_forms_enhanced',
     739                CHRMRTNS_KLA_PLUGIN_URL . 'assets/css/forms-enhanced.css',
     740                array('chrmrtns_frontend_stylesheet'), // Load after the base stylesheet
     741                CHRMRTNS_KLA_VERSION . '.3', // Added .3 to force cache bust for enhanced dark mode
     742                'all'
     743            );
    728744        }
    729745    }

  • keyless-auth/trunk/keyless-auth.php

    r3369805 r3372020  
    44* Plugin URI: https://github.com/chrmrtns/keyless-auth
    55* Description: Enhanced passwordless authentication allowing users to login securely without passwords via email magic links. Fork of Passwordless Login by Cozmoslabs with additional security features.
    6 * Version: 2.5.0
     6* Version: 2.6.0
    77* Author: Chris Martens
    88* Author URI: https://github.com/chrmrtns
    … …  
    3838
    3939// Define plugin constants
    40 define('CHRMRTNS_KLA_VERSION', '2.5.0');
     40define('CHRMRTNS_KLA_VERSION', '2.6.0');
    4141define('CHRMRTNS_KLA_PLUGIN_DIR', plugin_dir_path(__FILE__));
    4242define('CHRMRTNS_KLA_PLUGIN_URL', plugin_dir_url(__FILE__));

  • keyless-auth/trunk/readme.txt

    r3369805 r3372020  
    66Requires at least: 3.9
    77Tested up to: 6.8
    8 Stable tag: 2.5.0
     8Stable tag: 2.6.0
    99License: GPLv2 or later
    1010License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    271271
    272272== Changelog ==
     273= 2.6.0 =
     274* NEW: Enhanced CSS system using CSS custom properties for consistent theming across all forms
     275* NEW: Block theme compatibility - forms now work perfectly with Twenty Twenty-Five and other block themes
     276* NEW: Professional blue color scheme (#0073aa) aligned with WordPress admin UI standards
     277* NEW: Dark mode support with automatic color adjustments based on system preferences
     278* NEW: High contrast mode support for improved accessibility
     279* NEW: Reduced motion support for users with motion sensitivity
     280* IMPROVEMENT: Higher CSS specificity without using !important rules for better maintainability
     281* IMPROVEMENT: Responsive mobile-first design with proper touch targets (16px minimum on mobile)
     282* IMPROVEMENT: Enhanced accessibility with proper focus states, ARIA support, and keyboard navigation
     283* IMPROVEMENT: Added wrapper classes (chrmrtns-kla-form-wrapper) for better style isolation
     284* FIX: Form styling conflicts with block themes completely resolved
     285* FIX: Input field styling now consistent across all WordPress themes
     286* FIX: Button hover, active, and focus states properly styled with visual feedback
     287* FIX: Checkbox styling enhanced with custom SVG checkmark
     288* COMPATIBILITY: Full responsive design optimized for mobile devices
     289* ACCESSIBILITY: Comprehensive accessibility improvements including focus indicators and screen reader support
     290
    273291= 2.5.0 =
    274292* NEW: Added redirect parameter support to [keyless-auth] shortcode - now supports custom redirects like [keyless-auth-full]
Note: See TracChangeset for help on using the changeset viewer.