Skip to content

Instantly share code, notes, and snippets.

@MisterMike
Created August 26, 2022 12:12
Show Gist options
  • Save MisterMike/e8f6cd3d8cfadb84c69c6979ca74d401 to your computer and use it in GitHub Desktop.
Save MisterMike/e8f6cd3d8cfadb84c69c6979ca74d401 to your computer and use it in GitHub Desktop.
Craft Site Module Loginpage Custom CSS
/**
* Simple Site Module module for Craft CMS
*
* Simple Site Module CSS
*
* @author Mischa Sprecher
* @copyright Copyright (c) 2019 Mischa Sprecher
* @link https://www.marukka.ch
* @package SimpleSiteModule
* @since 1.1.1
*/
body.login {
overflow: hidden;
background: #7ea788;
}
body.login::after {
content: "";
background: url(/assets/template/install-bg-1920.png) no-repeat 50% 40%;
background-size: cover;
opacity: 0.07;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 0;
}
body.login main {
z-index: 1;
}
body.login main div#login,
body.login > form#login-form{
outline: 18px solid rgba(255,255, 255, 0.15);
padding: 10px 30px;
background: #fff;
background-image: url('/assets/logos/logo-positive.svg');
background-position: center 60px;
background-size: 200px 140px;
padding-top: 240px;
margin-left: 20px;
margin-right: 20px;
background-repeat: no-repeat;
z-index: 1;
}
body.login > form#login-form input:focus {
outline-style: solid;
outline-color: #f5e17a;
}
body.login h1{
display: none;
}
body.login #login-form #password-field .passwordwrapper {
border-radius: 0 ;
box-shadow: none;
}
body.login #login-form #password-field .passwordwrapper .password-toggle {
font-size: 0.7rem;
color: #567864;
}
body.login #login-form #loginName,
body.login #login-form #password{
border-radius: 0;
}
body.login #login-form .passwordwrapper.focus,
body.login #login-form input:focus{
border-color: #f5e17a;
box-shadow: none;
}
body.login #login-form .buttons .submit {
border-radius: 0;
}
body.login #login-form .btn.submit {
background-color: #9dc085 !important;
}
body.login #login-form .btn.submit:not(.disabled):not(.inactive):hover,
body.login #login-form .btn.submit:not(.disabled):not(.inactive).hover {
background-color: #567864 !important;
}
body.login #poweredby {
margin-top: 40px;
margin-bottom: 0;
}
body.login #login-form #login-fields:after {
content:'';
box-shadow: none;
}
/* ButtonBox Plugin fixes (icons) */
.buttonbox-buttons img, .buttonbox-buttons__label {
position: relative;
top: 2px;
height: 27px;
}
.buttonbox-buttons .buttonbox-buttons--graphical img {
height: 42px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment