Skip to content

Instantly share code, notes, and snippets.

@woloski
Last active Dec 19, 2015
Embed
What would you like to do?
Auth0 Login Widget customization
/* ------------------ GENERAL --------------- */
/* change default fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,800,400);
.popup {
font-family: 'Open Sans', sans-serif;
}
/* login widget width and centered position */
.popup .overlay .onestep {
width: 660px;
margin: 0 0 0 -330px; /* half of width */
}
.popup .panel form {
margin: 0;
}
/* login widget background color and border */
.popup .panel {
/*background: rgb(205, 227, 245); */
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
/* ------------- END GENERAL --------------- */
/* ------------------ HEADER --------------- */
/* login widget header background */
.popup .panel header {
/*background: rgb(205, 227, 245);*/
}
/* login widget header shadow effect */
.popup .panel header:after {
/*display: none;*/
}
/* login widget header shadow effect */
.popup .panel header:before {
/*display: none;*/
}
/* -------------- END HEADER --------------- */
/* --------------- EMAIL/PASSWORD --------------- */
/* login widget email/password section */
.popup .panel .emailPassword {
/* float left is used when you want to show email on the left and social on the right */
float: left;
width: 300px;
margin-top: 30px;
margin-bottom: 30px;
margin-left: 30px;
/* the line that separates email and social */
border-right: 1px solid rgb(164, 168, 159);
padding-right: 29px;
}
/* input textboxes flat style */
.popup .panel .emailPassword input {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
/* sign in button */
.popup .panel .emailPassword .zocial.primary {
background-color: #4d90fe;
}
/* sign in button spinner */
.popup .panel .emailPassword .action .spinner {
background-color: #4d90fe;
}
/* --------------- END EMAIL/PASSWORD ------------ */
/* --------------- SOCIAL ICONS --------------- */
.popup .panel .iconList {
float: right;
width: 300;
}
.popup .panel .iconList p {
display: block !important;
margin: 1em 0;
font-size: 13px;
color: rgb(109, 109, 109);
text-shadow: 0 1px 0 white;
}
/* buttons flat style */
.popup .panel .zocial {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
/* sign in facebook button */
.popup .panel .zocial.facebook {
background-color: #fbfbfb;
color: #050505;
text-shadow: 0 0 0;
}
.popup .panel .zocial.twitter {
background-color: #fbfbfb;
color: #050505;
text-shadow: 0 0 0;
}
.popup .panel .zocial.googleplus {
background-color: #fbfbfb;
color: #050505;
text-shadow: 0 0 0;
}
.popup .panel .zocial.github {
background-color: #fbfbfb;
color: #050505;
text-shadow: 0 0 0;
}
/* --------------- END SOCIAL ICONS --------------- */
/* --------------- DEFAULT SEPARATOR (---or---) ------------- */
/* separator line and text */
.popup .panel .separator {
display: none;
}
/* separator "or" color */
.popup .panel .separator span {
background: rgb(209, 240, 238);
}
/* ---------- END DEFAULT SEPARATOR (---or---) ------------- */
<script src="https://youraccount.auth0.com/auth0.js#css=https://yoursite.com/custom-widget.css&amp;client=...client_id...."></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment