Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Default login styles for WordPress along with color functions to easily change the theme
$base: #0085BA;
$tint: lighten(desaturate(adjust-hue($base, 1.6532), 27.2727), 6.6667);
$shade: darken(adjust-hue($base, 2.5111), 6.4706);
input:focus {
border-color: #5b9dd9; // @NOTE lighten(desaturate(adjust-hue($base, 11.4747), 37.6238), 23.9216)
box-shadow: 0 0 2px rgba(30,140,190,.8); // @NOTE transparentize($tint, 0.2)
}
input[type="checkbox"]:checked::before {
color: #1e8cbe; // @NOTE $tint
}
button {
background: #0085ba; // @NOTE $base
border-color: #0073aa #006799 #006799; // @NOTE darken(adjust-hue($base, 2.315), 3.1373) $shade $shade
box-shadow: 0 1px 0 #006799; // @NOTE $shade
text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799; // @NOTE $shade $shade $shade $shade
}
button:focus {
background: #008ec2; // @NOTE lighten(adjust-hue($base, -1.0143), 1.5686)
border-color: #006799; // @NOTE $shade
box-shadow: 0 1px 0 #0073aa,0 0 2px 1px #33b3db; // @NOTE darken(adjust-hue($base, 2.315), 3.1373) lighten(saturate(adjust-hue($base, -2.8111), 30), 16.4706)
}
button:hover {
background: #008ec2; // @NOTE lighten(adjust-hue($base, -1.0143), 1.5686)
border-color: #006799; // @NOTE $shade
}
a:focus {
box-shadow: 0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8); // @NOTE lighten(desaturate(adjust-hue($base, 11.4747), 37.6238), 23.9216) transparentize($tint, 0.2)
color: #124964; // @NOTE darken(desaturate(adjust-hue($base, 2.6593), 30.5085), 13.3333)
}
a:hover {
color: #00a0d2; // @NOTE lighten(adjust-hue($base, -2.8111), 4.7059)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.