From d6f47aa5f07a11a8771ce95f156b5394e67285a8 Mon Sep 17 00:00:00 2001 From: Dylan William Hardison Date: Thu, 8 Oct 2015 08:28:46 -0400 Subject: Bug 1200765 - Make login UX mobile friendly to assist mobile authentication workflow --- skins/standard/global.css | 18 +++++++++++++ skins/standard/mobile.css | 66 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 84 insertions(+) create mode 100644 skins/standard/mobile.css (limited to 'skins') diff --git a/skins/standard/global.css b/skins/standard/global.css index 81736f052..3790539e6 100644 --- a/skins/standard/global.css +++ b/skins/standard/global.css @@ -724,3 +724,21 @@ input.required, select.required, span.required_explanation { background-repeat: no-repeat !important; background-position: right 8px center !important; } + +#login .field-login, #login .field-password { + line-height: 32px; + display: block; + padding-top: 2px; + padding-bottom: 2px; +} + +#login .field-login label, #login .field-password label { + clear: left; + width: 7em; + display: inline-block; + font-weight: bold; +} + +#login .field-restrict, #login .field-remember { + margin-left: 7em; +} diff --git a/skins/standard/mobile.css b/skins/standard/mobile.css new file mode 100644 index 000000000..61179e93d --- /dev/null +++ b/skins/standard/mobile.css @@ -0,0 +1,66 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * This Source Code Form is "Incompatible With Secondary Licenses", as + * defined by the Mozilla Public License, v. 2.0. + */ + +@media +only screen and (max-device-width : 720px) { + #header, #footer { + display: none; + } + .cookie-notify { + display: none; + } + + #login .field-login label, #login .field-password label { + display: block; + } + + #login .field-login, #login .field-password { + line-height: auto; + padding-top: 0px; + padding-bottom: 0px; + } + + #login .field-restrict, #login .field-remember { + margin-left: 0px; + } + #login .field-submit { + padding-top: 4px; + } + + h1 { + font-size: 1.5em; + } + + .verify-totp input[type="text"] { + font-size: 28px; + } + + .verify-totp input[type="submit"] { + font-size: 1em; + } +} + +@media +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and (min--moz-device-pixel-ratio: 2), +only screen and (-o-min-device-pixel-ratio: 2/1), +only screen and (min-device-pixel-ratio: 2), +only screen and (min-resolution: 192dpi), +only screen and (min-resolution: 2dppx) { + #privacy_policy { + font-size: small; + } + + body { + font-size: medium; + } + + label.checkbox-note { + font-size: small; + } +} -- cgit v1.2.3-24-g4f1b