manager/templates/default/css/login.css
/*
*
* Copyright (C) 2024 MODX LLC
*
* This file is part of MODX Revolution and was compiled using Grunt.
*
* MODX Revolution is free software: you can redistribute it and/or modify it under the terms of the
* GNU General Public License as published by the Free Software Foundation, either version 2 of the
* License, or (at your option) any later version.
*
* MODX Revolution is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*
* See the GNU General Public License for more details. You should have received a copy of the GNU
* General Public License along with MODX Revolution. If not, see <http://www.gnu.org/licenses/>.
*
*/
html {
color: #111;
/* http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ */
font-family: "Lucida Grande", Helvetica, Arial, sans-serif !important;
/* IE ignores this and renders Arial better */
font-family: Arial, Tahoma, Helvetica, sans-serif;
font-size: 100.01%;
height: 100%;
/* avoids obscure font-size bug */
line-height: 1.5;
width: 100%;
}
body {
background: #f2f2f2;
font-size: 75%;
/* 12px 62.5% for 10px*/
height: 100%;
width: 100%;
}
.warning {
color: #821517;
font-weight: bold;
}
.success {
color: #090;
font-weight: bold;
}
#container {
margin: 70px auto 0;
width: 460px;
}
#modx-login-logo {
margin: 0 0 12px 24px;
}
#modx-login-logo img {
width: 180px;
}
#modx-panel-login-div {
border: 0;
background: #fff;
border-radius: 0;
box-shadow: 0 0 7px 1px #d9d9d9;
padding: 26px;
}
img.loginCaptcha {
border: 1px solid #039;
height: 60px;
width: 148px;
}
.loginLicense {
color: #555;
font-size: 90%;
margin: 1em auto;
padding-left: 20px;
width: 460px;
}
h2 {
color: #4e4e4e;
font-weight: bold;
}
#modx-login-btn {
float: right;
font-size: 12px;
}
#modx-login-btn:active {
margin: 3px 2px 1px;
}
.modx-forgot-login {
float: left;
}
#modx-forgot-login-form {
margin-top: 24px;
}
#modx-forgot-login-form button {
margin-top: 24px;
font-size: 12px;
}
a {
color: #bbb;
text-decoration: none;
}
a :hover {
text-decoration: underline;
}
#modx-login-email {
width: 200px;
}
.login-form-item {
margin: 0;
}
.login-form-item label {
cursor: pointer;
font-size: 120%;
color: #4e4e4e;
margin: 0 0 3px 3px;
display: block;
}
.login-form-item-first {
margin: 0 0 17px;
}
.login-form-element .x-form-text {
padding: 8px;
line-height: 32px;
width: 390px;
background: #f2f2f2;
border-color: #e9e9e9;
}
.login-cb-row {
padding: 24px 0 10px 0;
}
.x-form-check-wrap {
float: left;
}
.x-form-check-wrap .x-form-cb-label {
margin: 11px 0 0;
color: #888;
}
.x-form-check-wrap.modx-login-rm-cb {
float: left;
}
.login-cb-col {
float: left;
width: 50%;
}
.modx-login-fl-link {
cursor: pointer;
height: auto !important;
line-height: 18px;
margin: 10px 0 0 2px;
white-space: nowrap;
}
#modx-fl-link:focus {
color: #BE0000;
}
#modx-login-language-select-div {
bottom: 0;
color: #888;
left: 0;
padding: 4px;
position: absolute;
}
#modx-login-language-select {
background: #eee;
border: 1px solid #aaa;
position: relative;
}
@media (max-width: 640px) {
#container {
margin: 50px auto 0;
width: calc(100% - 30px);
}
#modx-login-logo {
margin: 0 auto 20px;
}
#modx-login-logo img {
margin: 0 auto;
display: block;
}
#modx-panel-login-div {
padding: 25px;
}
.login-form-element .x-form-text {
width: -webkit-fill-available;
}
.login-cb-col {
float: none;
width: 100%;
}
#modx-login-btn {
float: none;
margin: 20px auto 0;
display: block;
}
#modx-login-btn:active {
margin: 20px auto 0;
}
.x-form-check-wrap.modx-login-rm-cb {
float: none;
}
.loginLicense {
width: calc(100% - 30px);
}
}