From 47f7165b07e17721d6074e1464a42af1ef99afe3 Mon Sep 17 00:00:00 2001 From: jeroenpraat Date: Wed, 9 Dec 2015 23:41:37 +0100 Subject: Some work on the login, register and default home page. Mostly neatly centering things on different viewport widths. Bluegrid schema updated. --- view/css/mod_home.css | 15 +++++++++++++++ view/css/mod_login.css | 23 +++++++++++++++++++++++ view/css/mod_register.css | 28 ++++++++++++++++------------ view/theme/redbasic/css/style.css | 5 ----- view/theme/redbasic/schema/bluegrid.css | 10 +++++++--- 5 files changed, 61 insertions(+), 20 deletions(-) create mode 100644 view/css/mod_home.css create mode 100644 view/css/mod_login.css (limited to 'view') diff --git a/view/css/mod_home.css b/view/css/mod_home.css new file mode 100644 index 000000000..d4cf37253 --- /dev/null +++ b/view/css/mod_home.css @@ -0,0 +1,15 @@ +.home-welcome { + text-align: center; +} + +.generic-content-wrapper-styled { + margin-left: auto; + margin-right: auto; + max-width: 420px; + font-size: 1.1em; +} + +#login-main { + max-width: 400px; + margin-top: 50px; +} diff --git a/view/css/mod_login.css b/view/css/mod_login.css new file mode 100644 index 000000000..a086c50df --- /dev/null +++ b/view/css/mod_login.css @@ -0,0 +1,23 @@ +.generic-content-wrapper-styled { + margin-left: auto; + margin-right: auto; + max-width: 420px; + font-size: 1.1em; +} + +#login-main { + max-width: 400px; + margin-top: 50px; +} + +@media (min-width: 768px) and (max-width: 991px) { + #region_1 { + display: none !important; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + #region_3 { + display: table-cell !important; + } +} diff --git a/view/css/mod_register.css b/view/css/mod_register.css index b662610ae..618b7ce95 100644 --- a/view/css/mod_register.css +++ b/view/css/mod_register.css @@ -1,31 +1,35 @@ h2 { - margin-left: 5%; - margin-top: 5%; + margin: 20px 0 20px 5%; } -#register-form { - font-size: 1.4em; - margin-left: 10%; - margin-top: 5%; +.generic-content-wrapper-styled { + margin-left: auto; + margin-right: auto; + max-width: 820px; + font-size: 1.1em; } -#register-desc, #register-text, #register-sites { + +#register-desc, #register-invite-desc, #register-text, #register-sites { font-weight: bold; margin-bottom: 15px; padding: 8px; border: 1px solid #ccc; } -.register-label { +@media (min-width: 560px) { +.register-label, .register-input { float: left; - width: 275px; + width: 50%; +} } -.register-input { +@media (max-width: 559px) { +.register-label, .register-input { float: left; - width: 275px; - padding: 5px; + max-width: 400px; +} } .register-feedback { diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 16f7845e2..5fcf901fb 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -249,11 +249,6 @@ footer { color: $font_colour; } -#login-main { - max-width: 300px; - margin-top: 50px; -} - #cropimage-wrapper, #cropimage-preview-wrapper { float: left; padding: 30px; diff --git a/view/theme/redbasic/schema/bluegrid.css b/view/theme/redbasic/schema/bluegrid.css index 0eb3dab1f..820e84baa 100644 --- a/view/theme/redbasic/schema/bluegrid.css +++ b/view/theme/redbasic/schema/bluegrid.css @@ -284,8 +284,12 @@ input { border-radius: 0px; } +.home-welcome { + color: #FFF; + margin-bottom: 30px; +} + #login-main { - max-width: 100%; margin-top: 0; } @@ -341,7 +345,7 @@ input { background-color: #FFF; } -.btn-primary, input#event-submit, input#rmagic-submit-button, input#lostpass-submit-button, input#side-follow-submit, .profile-edit-submit-wrapper > input.profile-edit-submit-button, input#profile-photo-submit, form#chat-form > input, div#adminpage > form > div.submit > input, input.sources-submit, input.contact-edit-submit, input#dbtn-submit, input#newchannel-submit-button, input#contacts-search-submit { +.btn-primary, input#event-submit, input#rmagic-submit-button, input#lostpass-submit-button, input#side-follow-submit, .profile-edit-submit-wrapper > input.profile-edit-submit-button, input#profile-photo-submit, form#chat-form > input, div#adminpage > form > div.submit > input, input.sources-submit, input.contact-edit-submit, input#dbtn-submit, input#newchannel-submit-button, input#contacts-search-submit, input#register-submit-button { background-color: #FFF; color: #43488A; border-radius: 0px; @@ -350,7 +354,7 @@ input { transition: all .3s ease-in-out; } -.btn-primary:hover, .btn-primary:focus, input#event-submit:hover, input#event-submit:focus, input#rmagic-submit-button:hover, input#rmagic-submit-button:focus, input#lostpass-submit-button:hover, input#lostpass-submit-button:focus, input#side-follow-submit:hover, input#side-follow-submit:focus, .profile-edit-submit-wrapper > input.profile-edit-submit-button:hover, .profile-edit-submit-wrapper > input.profile-edit-submit-button:focus, input#profile-photo-submit:hover, input#profile-photo-submit:focus, form#chat-form > input:hover, form#chat-form > input:focus, div#adminpage > form > div.submit > input:hover, div#adminpage > form > div.submit > input:focus, input.sources-submit:hover, input.sources-submit:focus, input.contact-edit-submit:focus, input.contact-edit-submit:hover, input#dbtn-submit:hover, input#dbtn-submit:focus, input#newchannel-submit-button:hover, input#newchannel-submit-button:focus, input#contacts-search-submit:hover, input#contacts-search-submit:focus { +.btn-primary:hover, .btn-primary:focus, input#event-submit:hover, input#event-submit:focus, input#rmagic-submit-button:hover, input#rmagic-submit-button:focus, input#lostpass-submit-button:hover, input#lostpass-submit-button:focus, input#side-follow-submit:hover, input#side-follow-submit:focus, .profile-edit-submit-wrapper > input.profile-edit-submit-button:hover, .profile-edit-submit-wrapper > input.profile-edit-submit-button:focus, input#profile-photo-submit:hover, input#profile-photo-submit:focus, form#chat-form > input:hover, form#chat-form > input:focus, div#adminpage > form > div.submit > input:hover, div#adminpage > form > div.submit > input:focus, input.sources-submit:hover, input.sources-submit:focus, input.contact-edit-submit:focus, input.contact-edit-submit:hover, input#dbtn-submit:hover, input#dbtn-submit:focus, input#newchannel-submit-button:hover, input#newchannel-submit-button:focus, input#contacts-search-submit:hover, input#contacts-search-submit:focus, input#register-submit-button:hover, input#register-submit-button:focus { border-color: #FFF; background-color: #43488A; color: #FFF; -- cgit v1.2.3