How to style Fluent Auth Security plugin

Here is a list of examples on how to style Fluent Auth Security plugin.

I am using Fluent Snippets plugin and the CSS option to style. It is somewhat tricky to style Fluent Auth login and signup forms as it needs to be done with a PHP code snippet. Here is a nicely styled login and register screen.

Fluent Auth (Security) Login form adjusted with CSS

Fluent Auth Security plugin CSS style login screen.

Fluent Auth (Security) Register form adjusted with CSS

Fluent Auth Security plugin CSS style register screen.

The Code I used to style the above forms

add_action('login_enqueue_scripts', function () {

    if ( ! wp_style_is('fls-login-customizer', 'enqueued') && defined('FLUENT_AUTH_PLUGIN_URL') ) {
        wp_enqueue_style(
            'fls-login-customizer',
            FLUENT_AUTH_PLUGIN_URL . 'dist/public/login_customizer.css',
            [],
            defined('FLUENT_AUTH_VERSION') ? FLUENT_AUTH_VERSION : null
        );
    }

    $extra_css = '

/* Fade-in animation for the entire form */
        #loginform, #registerform
        {
            animation: fadeIn 1s ease forwards !important;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }



/* login form. */
    #loginform {
        background: linear-gradient(135deg, #667eea, #764ba2);
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
        color: whitesmoke !important;
}
   
/* Log in button */
    .button-primary {
        background: linear-gradient(135deg, #f7971e, #ffd200) !important;
        color: #fff;
        border-radius: 10px !important;
        font-weight: 700 !important;
        width: 100% !important;  
        height: 40px !important;
        box-shadow: 0 6px 12px rgba(247, 151, 30, 0.6) !important;
     transition: background 0.4s ease, box-shadow 0.4s ease !important;
        text-decoration: none;
        text-shadow: none;
}

.button-primary:hover {
       background: linear-gradient(135deg, #ffd200, #f7971e) !important;
       box-shadow: 0 10px 20px rgba(255, 210, 0, 0.8) !important;
}

/* Magic login button */
    .magic_btn_secondary {
        color: white !important;
        width: 100% !important;  /* Set same width on both */
        height: 40px !important;
        text-decoration: none;
        text-shadow: none;
}

/* OR text between Log in and Magic login buttons. */
.fls_magic-or span {
    color: whitesmoke !important;
}

/* Register form */
    #registerform {
        background: linear-gradient(135deg, #667eea, #764ba2);
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
        color: whitesmoke !important;
}

.notice.notice-info.message.register {
        border-left: 4px solid green;
}
    ';

    wp_add_inline_style('fls-login-customizer', $extra_css);
});

Here are some examples where I went wild with colors just to demonstrate the code.

add_action('login_enqueue_scripts', function () {

    if ( ! wp_style_is('fls-login-customizer', 'enqueued') && defined('FLUENT_AUTH_PLUGIN_URL') ) {
        wp_enqueue_style(
            'fls-login-customizer',
            FLUENT_AUTH_PLUGIN_URL . 'dist/public/login_customizer.css',
            [],
            defined('FLUENT_AUTH_VERSION') ? FLUENT_AUTH_VERSION : null
        );
    }

    $extra_css = '

/* login form. */
    #loginform {
        background-color: green;
        padding: 7px;
}

    
/* Log in button */
    .button-primary {
        background-color: red !important;
        border-color: red !important;
        color: #fff;
        text-decoration: none;
        text-shadow: none;
}

.button-primary:hover {
        background-color: pink !important;
        border-color: pink !important;
        color: black !important;
        text-decoration: none;
        text-shadow: none;
}

/* Magic login button */
    .magic_btn_secondary {
        background-color: yellow !important;
        border-color: yellow !important;
        color: black !important;
        text-decoration: none;
        text-shadow: none;
}

/* Register form */
    #registerform {
        background-color: blue;
        padding: 15px;
        color: white;
        border-radius: 9px;
}

/* Register form button */
#registerform #wp-submit.button-primary {
        background-color: green !important;
        border-color: green !important;
        color: #fff;
        text-decoration: none;
        text-shadow: none;
}

.notice.notice-info.message.register {
        border-left: 4px solid green;
}
    ';

    wp_add_inline_style('fls-login-customizer', $extra_css);
});