From 46a789de5c8c4f7ff9717a9d45abc7cfe66b9b6a Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Tue, 28 Apr 2015 16:12:58 +0200 Subject: [ticket/12542] Add initial drag-n-drop animation PHPBB3-12542 --- phpBB/styles/prosilver/theme/colours.css | 4 ++++ phpBB/styles/prosilver/theme/forms.css | 3 +++ 2 files changed, 7 insertions(+) (limited to 'phpBB/styles/prosilver/theme') diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 4743b4b39b..0e16bff471 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -977,6 +977,10 @@ fieldset.quick-login input.inputbox { color: #333333; } +#message-box textarea.drag-n-drop { + outline-color: rgba(17, 163, 234, 0.7); +} + /* Input field styles ---------------------------------------- */ .inputbox { diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css index f08a8a9691..11e0583542 100644 --- a/phpBB/styles/prosilver/theme/forms.css +++ b/phpBB/styles/prosilver/theme/forms.css @@ -243,6 +243,9 @@ fieldset.submit-buttons input { max-width: 100%; font-size: 1.2em; resize: vertical; + outline: 3px dashed transparent; + outline-offset: -4px; + transition: .5s; } /* Emoticons panel */ -- cgit v1.2.1 From ae8129b69902959212594e83435081a4bf0b5412 Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Wed, 29 Apr 2015 00:12:55 +0200 Subject: [ticket/12542] Add different outline colors for body & textarea PHPBB3-12542 --- phpBB/styles/prosilver/theme/colours.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'phpBB/styles/prosilver/theme') diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 0e16bff471..29cf641df2 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -978,7 +978,11 @@ fieldset.quick-login input.inputbox { } #message-box textarea.drag-n-drop { - outline-color: rgba(17, 163, 234, 0.7); + outline-color: rgba(102, 102, 102, 0.5); +} + +#message-box textarea.drag-n-drop-highlight { + outline-color: rgba(17, 163, 234, 0.5); } /* Input field styles -- cgit v1.2.1 From 818df0ec684d15789e2c20dda88ea314725b818d Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Wed, 29 Apr 2015 12:30:35 +0200 Subject: [ticket/12542] Use extended CSS for all browsers PHPBB3-12542 --- phpBB/styles/prosilver/theme/colours.css | 8 ++++++++ phpBB/styles/prosilver/theme/forms.css | 14 +++++++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) (limited to 'phpBB/styles/prosilver/theme') diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 29cf641df2..8ea41ef95f 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -978,10 +978,18 @@ fieldset.quick-login input.inputbox { } #message-box textarea.drag-n-drop { + -webkit-outline-color: rgba(102, 102, 102, 0.5); + -moz-outline-color: rgba(102, 102, 102, 0.5); + -ms-outline-color: rgba(102, 102, 102, 0.5); + -o-outline-color: rgba(102, 102, 102, 0.5); outline-color: rgba(102, 102, 102, 0.5); } #message-box textarea.drag-n-drop-highlight { + -webkit-outline-color: rgba(17, 163, 234, 0.5); + -moz-outline-color: rgba(17, 163, 234, 0.5); + -ms-outline-color: rgba(17, 163, 234, 0.5); + -o-outline-color: rgba(17, 163, 234, 0.5); outline-color: rgba(17, 163, 234, 0.5); } diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css index 11e0583542..ed2c253cf1 100644 --- a/phpBB/styles/prosilver/theme/forms.css +++ b/phpBB/styles/prosilver/theme/forms.css @@ -243,9 +243,21 @@ fieldset.submit-buttons input { max-width: 100%; font-size: 1.2em; resize: vertical; + -webkit-outline: 3px dashed transparent; + -moz-outline: 3px dashed transparent; + -ms-outline: 3px dashed transparent; + -o-outline: 3px dashed transparent; outline: 3px dashed transparent; + -webkit-outline-offset: -4px; + -moz-outline-offset: -4px; + -ms-outline-offset: -4px; + -o-outline-offset: -4px; outline-offset: -4px; - transition: .5s; + -webkit-transition: all .5s ease; + -moz-transition: all .5s ease; + -ms-transition: all .5s ease; + -o-transition: all .5s ease; + transition: all .5s ease; } /* Emoticons panel */ -- cgit v1.2.1 From 622d5b264327f10c77e13576de83acd18392ea44 Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Sat, 23 May 2015 10:51:04 +0200 Subject: [ticket/12542] Do not use browser specific css for outline Also, the CSS selector for the drag'n'drop was simplified to only use the class. PHPBB3-12542 --- phpBB/styles/prosilver/theme/colours.css | 12 ++---------- phpBB/styles/prosilver/theme/forms.css | 8 -------- 2 files changed, 2 insertions(+), 18 deletions(-) (limited to 'phpBB/styles/prosilver/theme') diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 8ea41ef95f..a5a52fbe97 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -977,19 +977,11 @@ fieldset.quick-login input.inputbox { color: #333333; } -#message-box textarea.drag-n-drop { - -webkit-outline-color: rgba(102, 102, 102, 0.5); - -moz-outline-color: rgba(102, 102, 102, 0.5); - -ms-outline-color: rgba(102, 102, 102, 0.5); - -o-outline-color: rgba(102, 102, 102, 0.5); +.drag-n-drop { outline-color: rgba(102, 102, 102, 0.5); } -#message-box textarea.drag-n-drop-highlight { - -webkit-outline-color: rgba(17, 163, 234, 0.5); - -moz-outline-color: rgba(17, 163, 234, 0.5); - -ms-outline-color: rgba(17, 163, 234, 0.5); - -o-outline-color: rgba(17, 163, 234, 0.5); +.drag-n-drop-highlight { outline-color: rgba(17, 163, 234, 0.5); } diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css index ed2c253cf1..777f011c35 100644 --- a/phpBB/styles/prosilver/theme/forms.css +++ b/phpBB/styles/prosilver/theme/forms.css @@ -243,15 +243,7 @@ fieldset.submit-buttons input { max-width: 100%; font-size: 1.2em; resize: vertical; - -webkit-outline: 3px dashed transparent; - -moz-outline: 3px dashed transparent; - -ms-outline: 3px dashed transparent; - -o-outline: 3px dashed transparent; outline: 3px dashed transparent; - -webkit-outline-offset: -4px; - -moz-outline-offset: -4px; - -ms-outline-offset: -4px; - -o-outline-offset: -4px; outline-offset: -4px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -- cgit v1.2.1 From abef078ab970c7ddc7645bd3d698e541896972e9 Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Thu, 28 May 2015 11:04:22 +0200 Subject: [ticket/12542] Use more specific CSS for drag-n-drop Otherwise the CSS gets overwritten by other CSS rules. PHPBB3-12542 --- phpBB/styles/prosilver/theme/colours.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'phpBB/styles/prosilver/theme') diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index a5a52fbe97..29cf641df2 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -977,11 +977,11 @@ fieldset.quick-login input.inputbox { color: #333333; } -.drag-n-drop { +#message-box textarea.drag-n-drop { outline-color: rgba(102, 102, 102, 0.5); } -.drag-n-drop-highlight { +#message-box textarea.drag-n-drop-highlight { outline-color: rgba(17, 163, 234, 0.5); } -- cgit v1.2.1