Bug 1234060 - Adjust the attendee box in Event dialog. r=MakeMyDay
authorRichard Marti <richard.marti@gmail.com>
Sun, 20 Dec 2015 19:03:08 +0100
changeset 26622 2f6a5e35a314f75ab7f624240118431afd06e953
parent 26621 c436a14a110297b5bb4b97e4b89440f235384d5c
child 26623 b11593b6699c656cb8e9f61ceb1adeb67dacfd9b
push id1850
push userclokep@gmail.com
push dateWed, 08 Mar 2017 19:29:12 +0000
treeherdercomm-esr52@028df196b2d9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMakeMyDay
bugs1234060
Bug 1234060 - Adjust the attendee box in Event dialog. r=MakeMyDay
calendar/base/themes/common/calendar-attendees.css
calendar/base/themes/common/dialogs/calendar-event-dialog.css
--- a/calendar/base/themes/common/calendar-attendees.css
+++ b/calendar/base/themes/common/calendar-attendees.css
@@ -1,39 +1,35 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 
 /* this is for attendee and organizer decoration in summary and event dialog */
 
 #item-attendees-box {
-    margin: 0px 4px;
-    border: solid ThreeDShadow 1px;
-    background-color: -moz-field;
+    -moz-appearance: listbox;
+    margin: 2px 4px 0;
     overflow-y: auto;
     min-height: 23px; /*at least two rows - otherwise a scrollbar (if required) wouldn't appear*/
 }
 
 #calendar-summary-dialog #item-attendees-box {
     max-height: 92px; /* displays up to four rows of attendees*/
     margin: 0px 10px;
 }
 
-.item-attendees-row {
-    margin: 0px 3px;
-    padding: 0px 3px;
-}
-
 .item-attendees-cell {
     padding: 3px 0px;
 }
 
 #calendar-event-dialog .item-attendees-cell {
     -moz-user-focus: normal;
+    margin-bottom: 1px;
+    margin-inline-end: 1px;
 }
 
 #calendar-event-dialog .item-attendees-cell:focus {
     background-color: Highlight;
     color: Highlighttext;
 }
 
 .item-attendees-cell-label {
@@ -211,8 +207,58 @@
 }
 
 .usertype-icon[cutype="ROOM"] {
     -moz-image-region: rect(0px 64px 16px 48px);
 }
 .usertype-icon[cutype="ROOM"][disabled="true"] {
     -moz-image-region: rect(16px 64px 32px 48px);
 }
+
+@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
+       (-moz-windows-default-theme) and (-moz-os-version: windows-win7),
+       (-moz-windows-default-theme) and (-moz-os-version: windows-win8),
+       (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+    #calendar-event-dialog .item-attendees-cell {
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        --attendees-currentColor: rgb(125, 162, 206);
+    }
+
+    #calendar-event-dialog .item-attendees-cell:focus {
+        color: -moz-FieldText;
+        background-color: transparent;
+        -moz-border-top-colors: var(--attendees-focusBorder);
+        -moz-border-right-colors: var(--attendees-focusBorder);
+        -moz-border-left-colors: var(--attendees-focusBorder);
+        -moz-border-bottom-colors: var(--attendees-focusBottomBorder);
+        background-image: var(--attendees-focusImage);
+    }
+}
+
+@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
+       (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
+    .item-attendees-cell {
+        border: 2px solid transparent;
+        border-radius: 3px;
+        --attendees-2ndBorderColor: rgba(255, 255, 255, .4);
+        --attendees-2ndBottomBorderColor: rgba(255, 255, 255, .6);
+        --attendees-focusBorder: var(--attendees-currentColor)
+                                 var(--attendees-2ndBorderColor);
+        --attendees-focusBottomBorder: var(--attendees-currentColor)
+                                       var(--attendees-2ndBottomBorderColor);
+        --attendees-focusImage: linear-gradient(rgba(131, 183, 249, .28),
+                                                rgba(131, 183, 249, .5));
+    }
+}
+
+@media (-moz-windows-default-theme) and (-moz-os-version: windows-win8),
+       (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+    #calendar-event-dialog .item-attendees-cell {
+        padding: 1px;
+        border: 1px solid transparent;
+        --attendees-focusColor: rgb(123, 195, 255);
+        --attendees-focusBorder: var(--attendees-focusColor);
+        --attendees-focusBottomBorder: var(--attendees-focusColor);
+        --attendees-focusImage: linear-gradient(rgb(205, 232, 255),
+                                                rgb(205, 232, 255));
+    }
+}
--- a/calendar/base/themes/common/dialogs/calendar-event-dialog.css
+++ b/calendar/base/themes/common/dialogs/calendar-event-dialog.css
@@ -42,26 +42,16 @@ label.label {
 /*--------------------------------------------------------------------
  *   Event dialog tabbox section
  *-------------------------------------------------------------------*/
 
 #event-grid-tabbox {
     margin: 5px 0px;
 }
 
-#event-grid-tabpanels {
-    -moz-appearance: none;
-    background-color: -moz-dialog;
-    border: 1px solid ThreeDShadow;
-}
-
-#attachment-link {
-    border: 1px solid ThreeDShadow;
-}
-
 /*--------------------------------------------------------------------
  *   Event dialog keep duration button
  *-------------------------------------------------------------------*/
 
 #keepduration-button {
     list-style-image: url(chrome://calendar-common/skin/calendar-event-dialog.png);
     -moz-image-region: rect(0px 147px 24px 140px);
     padding-top: 3px;