How do I change the appearance of the login pages?

[stigzler]

I'm guessing it has something to with the css files. I've managed to manipulate it with Inspect, and gotten some properties I need to change, but how do I do this properly to avoid overwrites on updates? I'm also guessing this has something to do with a pointer in config.inc.php and a custom css file? Also not sure how I'd reference the general .btn and input properties. Any help appreciated! The css properties from my Inspect tinkering:

Code: Select all

.light-login {
    background: none repeat scroll 0 0 #242424 !important;
}

.login-layout .widget-box .widget-main {
    padding: 16px 36px 36px;
    background: #161616;
    color: #ddd;
}

.forgot-box .back-to-login-link, .signup-box .back-to-login-link {
    color: #cdcdcd;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 1px 0 1px rgb(0 0 0 / 25%);
}

.btn {
    border: 1px solid #FFF; 
}

input[type=url], input[type=search], input[type=tel], input[type=color], input[type=text], input[type=password], input[type=datetime], input[type=datetime-local], input[type=date], input[type=month], input[type=time], input[type=week], input[type=number], input[type=email], textarea {
    color: #ebebeb;
    background-color: #1c1c1c;
    border: 1px solid #D5D5D5;
}