Bug 1615839 - Improve salience of focused pill between multiple selected pills. r=Paenglab
authorAlessandro Castellani <alessandro@thunderbird.net>
Wed, 19 Feb 2020 10:21:22 -0800
changeset 37384 306ac4b77c679440f825d487a9147544591db953
parent 37383 1d6c19070bffe7689241ac8e0612736bca76d484
child 37385 a94a4098acb456ab8ad149007e9732fe6a9cd64e
push id2566
push userclokep@gmail.com
push dateMon, 09 Mar 2020 19:20:31 +0000
treeherdercomm-beta@a352facfa0a4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersPaenglab
bugs1615839
Bug 1615839 - Improve salience of focused pill between multiple selected pills. r=Paenglab
mail/themes/shared/mail/messengercompose.css
--- a/mail/themes/shared/mail/messengercompose.css
+++ b/mail/themes/shared/mail/messengercompose.css
@@ -533,47 +533,64 @@
 .address-pill {
   display: flex;
   align-items: center;
   border-radius: 4px;
   margin-inline-end: 3px;
   margin-block: 2px;
   padding-inline: 7px;
   background-color: rgba(0,0,0,0.1);
-  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
+  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease,
+    text-shadow .2s ease;
   -moz-user-focus: normal;
   cursor: default;
   box-shadow: inset 0 0 0 1px transparent;
 }
 
 .address-pill label {
   -moz-user-focus: none;
   cursor: default;
   margin-inline: 0;
 }
 
 .address-pill:hover:not(.editing),
 .address-pill:focus:not(.editing) {
-  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3),
+    inset 0 0 0 2em rgba(0, 0, 0, 0.1);
+}
+
+.address-pill[selected]:hover:not(.editing),
+.address-pill[selected]:focus:not(.editing) {
+  box-shadow: 0 1px 5px -2px Highlight, inset 0 0 0 1px rgba(0, 0, 0, 0.3),
+    inset 0 0 0 2em rgba(0, 0, 0, 0.15);
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
 }
 
 .address-pill.editing {
   flex: 1;
   background-color: transparent;
   box-shadow: inset 0 0 0 1px Highlight;
   min-height: calc(1.25em + 4px); /* needed to not shrink in edit mode */
 }
 
 #MsgHeadersToolbar[brighttext] .address-pill:not(.editing) {
   background-color: rgba(0,0,0,0.3);
 }
 
 #MsgHeadersToolbar[brighttext] .address-pill:hover:not(.editing),
 #MsgHeadersToolbar[brighttext] .address-pill:focus:not(.editing) {
-  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3),
+    inset 0 0 0 2em rgba(255, 255, 255, 0.1);
+}
+
+#MsgHeadersToolbar[brighttext] .address-pill[selected]:hover:not(.editing),
+#MsgHeadersToolbar[brighttext] .address-pill[selected]:focus:not(.editing) {
+  box-shadow: 0 1px 5px -2px Highlight, inset 0 0 0 1px rgba(255,255,255,0.3),
+    inset 0 0 0 2em rgba(0, 0, 0, 0.2);
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
 }
 
 .address-pill.error {
   color: #a4000f;
   background-color: #ffe5e5;
 }
 
 .address-pill.error:hover:not(.editing),