Mercurial > libervia-templates
diff default/static/login.css @ 54:a5dc14675d5e
login: login, logged and registration pages
author | Goffi <goffi@goffi.org> |
---|---|
date | Fri, 27 Oct 2017 18:56:21 +0200 |
parents | |
children | f76ec90e0e1e |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/static/login.css Fri Oct 27 18:56:21 2017 +0200 @@ -0,0 +1,197 @@ +body { + background: #111; +} + +footer { + color: #999; +} + +#login_container { + display: flex; + height: 100%; + align-items: center; + justify-content: center; +} + +#login_box { + display: flex; + background: #111; + color: #aaa; + width: 600px; + margin: auto; +} + +#login_left { + display: none; +} + +#login_right { + width: 100%; + position: relative; +} + +#login_form { + margin-top: 60px; +} + +#login_form label { + font-weight: bold; + display: block; + text-align: center; +} + +#login_form input:not(.form_submit) { + display: block; + margin: 0 auto; + height: 25px; + line-height: 25px; + width: 200px; + text-indent: 11px; + background: #000; + color: #ccc; + border: 1px solid #555; + border-radius: 15px 15px 15px 15px; +} + +#login_form input:hover { + background-color: #222; +} + +#login_form input:focus { + border: 1px solid #999; +} + +#login_box .form_input { + display: block; + margin-bottom: 1em; +} + +#login_form .form_submit, +#logged .form_submit { + /* FIXME: as above /media is not good. + * url should be replaced by real gradient */ + color: #fff; + background: #222 url('/media/libervia/gradient.png') repeat-x; + font-weight: bold; + line-height: 1; + text-shadow: 0 -1px 1px rgba(0,0,0,0.25); + padding: 7px 10px 8px; + border: 0; + border-radius: 6px 6px 6px 6px; + cursor: pointer; + margin-top: 30px; +} + +#login_form .form_submit:hover, +#logged .form_submit:hover { + background-color: #bc0000; +} + +#login_error { + position: absolute; + margin: -90px 0 0; + width: 100%; + height: 150px; + overflow: auto; + font-size: 0.9em; + font-weight: bold; + color: lightcoral; + text-align: center; +} + +#login_error p { + position: absolute; + bottom: 0; + margin-left: 46px; + margin-right: 46px; +} + +#create_account_link { + width: 100%; + margin-top: 3em; +} + +#login_link { + margin-top: 1em; +} + +#create_account_link a, +#login_link a { + text-decoration: none; + text-align: center; + font-size: 0.8em; + cursor: pointer; + color: #fff; + display: block; + text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.2); +} + +.logged_box { + margin: 3em; + padding: 1em; + text-align: center; + font-style: italic; +} + +.logged_profile { + font-style: normal; + font-weight: bold; +} + +#login_form form.register input[type=submit] { + margin-top: 0.5em; +} + +@media (min-width: 600px) { + body { + background: transparent; + } + + footer { + color: black; + } + + #login_left { + display: inline; + } + + #login_right { + /* FIXME: there is not way to correctly select images from + * media path at the moment */ + background: url('/media/libervia/register_right.png'); + } + + #login_error { + width: auto; + max-height: 50px; + margin: 10px 46px 0; + } + + #login_error p { + position: static; + margin: 0; + } + + #login_form label { + text-align: initial; + position: relative; + left: 50px; + } + + #login_form label::after { + content: ':' + } + + #login_form input:not(.form_submit) { + display: inline; + margin: 0; + position: relative; + left: 50px; + } + + #create_account_link { + margin-top: 0; + bottom: 0; + position: absolute; + } +}