Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit fc3e24a4 authored by Dhruv Puri's avatar Dhruv Puri
Browse files

Merge branch 'fix/loginflowv2-dark-mode-contrast' into 'main' 

fix(login): theme-aware contrast on loginflowv2 picker + decouple .update from .success

See merge request !245
parents fdd7371e bd8d5fa8

core/css/guest.css

+46 −2
Original line number Diff line number Diff line
@@ -1329,7 +1329,6 @@ a.legal { 
    border: 1px solid;

}



#body-login .update,

#body-login .success {

    color: var(--color-success);

    background-color: var(--color-main-background);
@@ -1340,6 +1339,22 @@ a.legal { 
    border: 1px solid;

}



/* NC core renders "Access forbidden" / "token expired" pages as

   `<div class="body-login-container update">`. These are error contexts,

   not success/upgrade states, so paint them with the error palette. */

#body-login .update {

    color: var(--color-main-text);

    background-color: var(--color-main-background);

    justify-content: center !important;

    width: 92%;

    margin-left: 0;

    margin-right: 0;

    border: 1px solid var(--color-error);

}

#body-login .update h2 {

    color: var(--color-error);

}



/* #body-login #user:hover,

#body-login #user:focus,

#body-login #password:hover,
@@ -1752,7 +1767,7 @@ a.legal { 
    color: var(--color-main-text);

}

#body-login .picker-window p.info{

    color: #222222;

    color: var(--color-main-text);

}

#body-login .picker-window {

	display: inline-block;
@@ -1791,7 +1806,36 @@ a.legal { 
#body-login .guest-box.login-box .lost-password-container .notecard.notecard--success{

    color: var(--color-main-text) !important;

}

/* Primary action buttons on the body-login error pages need white text

   regardless of theme. Theming's --color-primary-element-text resolves to

   black in both light and dark, leaving the button text unreadable on the

   blue background. */

#body-login a.button.primary,

#body-login .body-login-container a.button.primary {

    color: #ffffff;

}



/* Center the "Grant access" submit button on the loginflowv2 grant page.

   Make the parent paragraph + form text-align center, and switch the

   submit wrapper to inline-flex so it shrinks to button width and gets

   centered by the text-align rule. */

#body-login .picker-window #redirect-link,

#body-login .picker-window #redirect-link form {

    text-align: center !important;

}

#body-login .picker-window #submit-wrapper {

    display: inline-flex !important;

    margin: 0 auto !important;

}



@media(prefers-color-scheme: dark){

    /* loginflowv2 (authpicker.php) instruction text. Theming dark.css can

       resolve --color-main-text to a dimmed value, so pin a high-contrast

       light color here. */

    #body-login .picker-window h2,

    #body-login .picker-window p.info {

        color: #EBEBEB;

    }

    #body-login .not_alt_login .picker-window h2 ,#body-login .not_alt_login .picker-window p.info {

        color:var(--color-main-text);

    }