From 2fb1e156edee95a8c3d3a52d09352e6c2b98d188 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 14 Jul 2016 15:41:23 +0100 Subject: [PATCH 1/6] Modal background restyled --- src/skins/vector/css/common.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index c22a7def04..6d5b102d26 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -161,8 +161,8 @@ input[type=text]:focus, textarea:focus { left: 0; width: 100%; height: 100%; - background-color: #000; - opacity: 0.2; + background-color: #e9e9e9; + opacity: 0.8; } .mx_Dialog_lightbox .mx_Dialog_background { From 579f210cfc112d89237f72e1766e0fa096e08ddf Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 14 Jul 2016 16:55:41 +0100 Subject: [PATCH 2/6] Initial Modal dialog restyling --- src/skins/vector/css/common.css | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 6d5b102d26..9abf6f9139 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -146,13 +146,14 @@ input[type=text]:focus, textarea:focus { .mx_Dialog { background-color: #fff; color: #747474; - text-align: center; z-index: 4010; font-weight: 300; font-size: 15px; position: relative; - border-radius: 8px; - max-width: 80%; + padding-left: 58px; + width: 60%; + max-width: 704px; + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); } .mx_Dialog_background { @@ -180,11 +181,14 @@ input[type=text]:focus, textarea:focus { } .mx_Dialog_content { - margin: 24px; + margin: 24px 58px 68px 0; + font-size: 14px; + color: #4a4a4a; + word-wrap: break-word; } .mx_Dialog_buttons { - padding-bottom: 24px; + padding-bottom: 36px; } .mx_Dialog button, .mx_Dialog input[type="submit"] { @@ -195,19 +199,20 @@ input[type=text]:focus, textarea:focus { font-size: 15px; color: #fff; background-color: #76cfa6; - margin-left: 8px; + margin-left: 0px; margin-right: 8px; - padding-left: 1em; - padding-right: 1em; + padding-left: 1.5em; + padding-right: 1.5em; + outline: none; } .mx_Dialog_title { min-height: 16px; - padding: 12px; - border-bottom: 1px solid #a4a4a4; + padding-top: 40px; font-weight: bold; - font-size: 18px; + font-size: 22px; line-height: 1.4; + color: #454545; } .mx_TextInputDialog_label { From adbad509f4454fabb4fd62722b633211630f6194 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 14 Jul 2016 17:59:06 +0100 Subject: [PATCH 3/6] Updated to highlight the primary button in the dialog, i.e. the first one --- src/skins/vector/css/common.css | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 9abf6f9139..be8d7cfa09 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -194,15 +194,35 @@ input[type=text]:focus, textarea:focus { .mx_Dialog button, .mx_Dialog input[type="submit"] { border: 0px; height: 36px; - border-radius: 36px; + border-radius: 40px; + border: solid 1px #76cfa6; font-weight: 400; font-size: 15px; - color: #fff; - background-color: #76cfa6; margin-left: 0px; margin-right: 8px; padding-left: 1.5em; padding-right: 1.5em; + + color: #76cfa6; + background-color: #fff; + outline: none; +} + +/* The first button in a dialog is the primary */ +.mx_Dialog button:first-child, .mx_Dialog input[type="submit"]:first-child { + border: 0px; + height: 36px; + border-radius: 40px; + border: solid 1px #76cfa6; + font-weight: 400; + font-size: 15px; + margin-left: 0px; + margin-right: 8px; + padding-left: 1.5em; + padding-right: 1.5em; + + color: #fff; + background-color: #76cfa6; outline: none; } From 040ef7388695ebc5d229f1ab22e40d553d90a8c8 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 15 Jul 2016 11:22:10 +0100 Subject: [PATCH 4/6] Simple refactor of the primary indicator, now it's a class. Also added a global selector to remove the ugly firefox dotted line highlight --- src/skins/vector/css/common.css | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index be8d7cfa09..74005a3549 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -58,6 +58,11 @@ input[type=text]:focus, textarea:focus { box-shadow: none; } +/* Prevent ugly dotted highlight around selected elements in Firefox */ +::-moz-focus-inner { + border: 0; +} + /* applied to side-panels and messagepanel when in RoomSettings */ .mx_fadable { opacity: 1; @@ -202,28 +207,15 @@ input[type=text]:focus, textarea:focus { margin-right: 8px; padding-left: 1.5em; padding-right: 1.5em; + outline: none; color: #76cfa6; background-color: #fff; - outline: none; } -/* The first button in a dialog is the primary */ -.mx_Dialog button:first-child, .mx_Dialog input[type="submit"]:first-child { - border: 0px; - height: 36px; - border-radius: 40px; - border: solid 1px #76cfa6; - font-weight: 400; - font-size: 15px; - margin-left: 0px; - margin-right: 8px; - padding-left: 1.5em; - padding-right: 1.5em; - +.mx_Dialog .mx_Dialog_primary { color: #fff; background-color: #76cfa6; - outline: none; } .mx_Dialog_title { From 3a89a5af0bdeae6f9b42b2ecd6aac5fad2457bca Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 15 Jul 2016 12:33:56 +0100 Subject: [PATCH 5/6] Increasing the specificity of the CSS so that primary input submit buttons are styled correctly --- src/skins/vector/css/common.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 74005a3549..2acc7ae472 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -213,7 +213,7 @@ input[type=text]:focus, textarea:focus { background-color: #fff; } -.mx_Dialog .mx_Dialog_primary { +.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary { color: #fff; background-color: #76cfa6; } From e668d7685de9de767db945fb60c69453234d4c77 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 15 Jul 2016 14:54:15 +0100 Subject: [PATCH 6/6] Fixed light box colour, reset back to black. --- src/skins/vector/css/common.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 2acc7ae472..726484462c 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -173,6 +173,7 @@ input[type=text]:focus, textarea:focus { .mx_Dialog_lightbox .mx_Dialog_background { opacity: 0.85; + background-color: #000; } .mx_Dialog_lightbox .mx_Dialog {