Free CSS: Really cool login screen (floating transparent door)

  • 10 August 2022
  • 5 replies
  • 122 views
lrodman
Rank
Userlevel 7
Badge +4 


/*transparent sign-in popup*/
div.external-simple-signin {
	opacity: 0.8;
	background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/login-screen-glass-door.png) no-repeat center;
	background-color: transparent;
    background-size: contain;
}
/* transparent background password input */
input#ui-input-password-0.ui-typography-body {
	background-color: transparent;
}
div.form-button.login-button button.ui-ripple.ui-typography-button {
	background-color: transparent;
	color: black
}
div.sso-buttons button.ui-ripple.ui-typography-button {
	background-color: transparent;
}

/*compactify cookie popup*/
gdpr-policy-banner.bg-white.open {
	padding-top: 5px;
	padding-bottom: 5px;
    opacity: 0.8;
}

https://easyupload.io/7dhv9a video

 

5 replies

Bfarkas
Rank
Userlevel 7
Badge +2

How does that hold up to accessibility standards for visibility? I’d be concerned for users with vision issues on reading and navigating those fields. Like it overall, but you might want to try to make the central areas less translucent. While it is easy to ignore accessibility items, overall if you keep them in mind it ends up being better experiences for most users.

lrodman
Rank
Userlevel 7
Badge +4

Yes I do plan to work on that. 
 

The platform definitely has accessibility issues for me with a minor hand tremor - some buttons are hard AF to click because they use actual icons for hit boxes not a large clickable square hitbox. The “…” on the user management screen and the next and previous page carats on the same screen are very frustrating for me. 
 

And a lot of pages don’t resize well - most of the default text is quite small. If I had poor vision, I’d be sad. The platform really should have normal, large and very large platform-wide text options, like an iPhone (or, less well done, like windows or macOS)

Bfarkas
Rank
Userlevel 7
Badge +2

Right, so some of your examples there are admin impacting only (not that it makes it ok, but at least smaller impact) I just find it curious that instead of making changes to improve accessibility especially on pages for all users, this seems to be a step backwards?

lrodman
Rank
Userlevel 7
Badge +4

I agree I need to do an accessibility audit after I finish with art. Appreciated!

 

when I hide an image like 404 and replace it, am I hiding the aria tag (and need to make a new one)?

Bfarkas
Rank
Userlevel 7
Badge +2

I agree I need to do an accessibility audit after I finish with art. Appreciated!

 

when I hide an image like 404 and replace it, am I hiding the aria tag (and need to make a new one)?

Depends on method used, but potentially yes. 

Reply


Terms & ConditionsCookie settings