diff options
author | Anike Arni <aarni@thoughtworks.com> | 2017-02-17 09:57:19 -0200 |
---|---|---|
committer | Tulio Casagrande <tcasagra@thoughtworks.com> | 2017-02-21 13:32:05 -0300 |
commit | bfd85dff6b086abae1c16014e318c89cba929b66 (patch) | |
tree | 787e103d678bea48a4122d8e190be3a2c5e0e767 /web-ui/src/login/login.css | |
parent | 0c5bbc3a1e104512172221851262b81602a44df8 (diff) |
[#907] Makes login page responsive
Diffstat (limited to 'web-ui/src/login/login.css')
-rw-r--r-- | web-ui/src/login/login.css | 150 |
1 files changed, 47 insertions, 103 deletions
diff --git a/web-ui/src/login/login.css b/web-ui/src/login/login.css index 51ab2046..bbb37443 100644 --- a/web-ui/src/login/login.css +++ b/web-ui/src/login/login.css @@ -16,130 +16,74 @@ */ body { - font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif; - background-color: #EAEAEA; - height: 100vh; - color: #3E3A37; + font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif; + background-color: #EAEAEA; + height: 100vh; + color: #3E3A37; - background-image: url("/public/images/hive-bg.png"); - background-repeat: repeat; -} - -.content { - height: 100vh; - width: 100%; + background-image: url("/public/images/hive-bg.png"); + background-repeat: repeat; } .error { - color: #D72A25; - margin: 10px 0 0 0; -} - -.message-panel { - width: 100%; - margin: 10px auto; - z-index: 10000; - text-align: center; - } - -.message-panel span{ - background: #F7E8AF; - padding: 5px 60px; - border: 1px solid #f2db81; - color: #987b0f; - box-shadow: 1px 1px 3px #69560b; -} - -.message-panel.message-panel-small span{ - padding: 5px 0px; - display: inline-block; - width: 100%; + color: #D72A25; + margin: 10px 0 0 0; } .login { - display: block; - width: 240px; - margin: auto; - padding: 45px 40px 35px 40px; - background-color: #FFF; - margin-top: 2%; - margin-bottom: 2%; + display: block; + width: 90%; + margin: auto; + max-width: 400px; + padding: 2em 0; + margin-top: 3%; + margin-bottom: 3%; + background-color: #FFF; + display: flex; + flex-direction: column; + align-items: center; } -form#login_form { - padding: 10px 0; +#root { + width: 70%; } .disclaimer { - display: block; - margin-top: 10%; - width: 50%; - margin: auto; - background-color: #2BA6CB; - color: #FFFFFF; - font-weight: 300; - font-size: 0.8rem; - padding: 1em; - margin-bottom: 20px; -} - -.disclaimer li { - margin-top: 1em; + display: block; + width: 90%; + margin: auto; + max-width: 400px; + background-color: #2BA6CB; + color: #FFFFFF; + font-weight: 300; + font-size: 0.8rem; + margin-bottom: 20px; } -.logo { - width: 100%; - height: auto; -} - -input { - display: block; - margin: 10px 0; - padding-left: 5px; +.disclaimer-content { + padding: 1em; } -input.text-field { - width: 97%; -} - -button, .button, input[type=button] { - cursor: pointer; - margin: 0 0 1.25rem; - border: none; - position: relative; - text-decoration: none; - text-align: center; - -webkit-appearance: none; - display: inline-block; - padding: 0.4rem 1.1rem; - font-size: 0.9rem; - background-color: #2ba6cb; - border-color: #2285a2; - color: white; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - -ms-border-radius: 2px; - -o-border-radius: 2px; - border-radius: 2px; +.disclaimer li { + margin-top: 1em; } -button:hover, button:focus, .button:hover, .button:focus, input[type=button]:hover, input[type=button]:focus { - background-color: #2285a2; - outline: none; - color: white; +.logo { + width: 70%; } -ul.accounts { - margin-bottom: 5%; -} +@media only screen and (min-width : 500px) { + body { + font-size: 1.3em; + } -ul.accounts li { - display: inline-block; - list-style: none; - margin-right: 35px; - margin-top: 0px; + .login, .disclaimer { + width: 60%; + } } -ul.accounts li span { - font-weight: bold; +@media only screen and (min-width : 960px) { + .login, .disclaimer { + width: 40%; + } } |