Bug 1433662 - Make the calview tabs look like the main tabs. r=philipp
authorRichard Marti <richard.marti@gmail.com>
Sat, 27 Jan 2018 17:37:46 +0100
changeset 30988 cb1a7edd2c666af08036c83ee0b54409f12e6d7d
parent 30987 5b4e2690adcb38c0396f46b3102299d15d6ea8da
child 30989 8e9463f5d78ab718cead4ef4d023e635dda7bfaa
push id383
push userclokep@gmail.com
push dateMon, 07 May 2018 21:52:48 +0000
reviewersphilipp
bugs1433662
Bug 1433662 - Make the calview tabs look like the main tabs. r=philipp
calendar/base/themes/common/calendar-views.css
calendar/base/themes/linux/calendar-views.css
calendar/base/themes/osx/calendar-views.css
calendar/base/themes/windows/calendar-views.css
--- a/calendar/base/themes/common/calendar-views.css
+++ b/calendar/base/themes/common/calendar-views.css
@@ -860,28 +860,53 @@ agenda-richlist-item[status="CANCELLED"]
     text-decoration: line-through;
 }
 
 /* Navigation controls for the views */
 #view-deck {
     border: solid ThreeDShadow;
 }
 
+.navigation-inner-box {
+    border-bottom: 1px solid var(--calview-border-bottom-color);
+}
+
+.navigation-spacer-box {
+    min-width: 15px;
+    border-bottom: 1px solid var(--calview-border-bottom-color);
+}
+
 tab[calview] {
     -moz-appearance: none;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    margin-top: 0px;
+    border-left: 1px solid var(--calview-border-color);
+    border-right: 1px solid var(--calview-border-color);
+    border-bottom: 1px solid var(--calview-border-bottom-color);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    margin-top: 0;
+    padding: 3px 6px;
     -moz-user-focus: normal;
+    background-color: transparent;
+    font-size: 14px;
 }
 
-tab[calview][selected="true"],
-tab[calview][selected="true"]:hover {
-    margin-bottom: 0px;
-    border-bottom: none;
+tab[calview]:not(:first-child) {
+    margin-inline-start: -1px;
+}
+
+
+tab[calview][selected="true"] {
+    background-image: linear-gradient(to bottom,
+                      var(--calview-tabline-color) 2px, transparent 2px);
+    border-bottom-width: 0;
+    padding-bottom: 4px;
+}
+
+tab[calview]:not([selected=true]):hover {
+    background-color: rgba(0,0,0,.1);
 }
 
 tab[calview] > .tab-middle {
     text-align: center;
 }
 
 .view-header {
     font-weight: normal;
--- a/calendar/base/themes/linux/calendar-views.css
+++ b/calendar/base/themes/linux/calendar-views.css
@@ -2,59 +2,48 @@
  * 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/. */
 
 @import url(chrome://calendar-common/skin/calendar-views.css);
 
 /* Navigation controls for the views */
 #calendar-nav-control {
     background-color: AppWorkspace;
-    border-inline-start: 1px solid ThreeDShadow;
-    padding-top: 1px;
+    --calview-tabline-color: highlight;
+    --calview-border-color: ThreeDShadow;
+    --calview-border-bottom-color: ThreeDShadow;
 }
 
 #view-deck {
     background-color: -moz-Field;
     border-width: 0 0 1px 1px;
 }
 
-tab[calview] {
-    background-color: rgba(0, 0, 0, .1);
-    color: ButtonText;
-    border: 1px solid ThreeDShadow;
-    font-size: 14px;
+.navigation-inner-box {
+    padding-top: 1px;
 }
 
-tab[calview][selected="true"],
-tab[calview][selected="true"]:hover {
+tab[calview] {
+    color: ButtonText;
+    margin-bottom: 0;
+}
+
+tab[calview][selected="true"] {
     background-color: -moz-Field;
 }
 
-tab[calview]:hover {
-    background-color: ButtonHighlight;    
-}
-
-#calendarWeek {
-    margin-top: 4px;
-    margin-bottom: 0px;
-}
-
-.navigation-inner-box {
-    border-bottom: 1px solid ThreeDShadow;
+tab[calview] > .tab-middle {
+    margin-top: 3px;
+    margin-bottom: 3px;
 }
 
 .navigation-bottombox {
     background-color: -moz-Field;
 }
 
-.navigation-spacer-box {
-    min-width: 4px;
-    border-bottom: 1px solid ThreeDShadow;
-}
-
 .view-navigation-button {
     margin-inline-start: 2px;
     margin-inline-end: 2px;
 }
 
 .today-navigation-button {
     padding-top: 0px !important; /* a workaround to center the label vertically on Windows */
 }
--- a/calendar/base/themes/osx/calendar-views.css
+++ b/calendar/base/themes/osx/calendar-views.css
@@ -44,104 +44,76 @@ calendar-month-day-box-item[status="CANC
 calendar-event-box[status="CANCELLED"] .calendar-color-box,
 calendar-editable-item[status="CANCELLED"] .calendar-color-box,
 agenda-richlist-item[status="CANCELLED"] .agenda-container-box {
     text-decoration: line-through;
 }
 
 /* Navigation controls for the views */
 #calendar-nav-control {
-    background-color: #E8E8E8;
-    border: solid ThreeDShadow;
-    border-width: 1px 0 0 1px;
+    background-color: #e8e8e8;
+    --calview-tabline-color: #0a84ff;
+    --calview-border-color: #bdbdbd;
+    --calview-border-bottom-color: #d2d2d2;
 }
 
 #view-deck {
     background-color: white;
     border-width: 0 0 0 1px;
 }
 
-#view-tabs {
-    padding-right: 20px;
-}
-
 #view-tabbox {
     margin: 0;
 }
 
 .calview-tabs {
     margin-bottom: 0;
     padding: 0;
 }
 
 tab[calview] {
-    background-color: #CCCCCC;
-    color: #2E4E73;
-    border: 1px solid #BDBDBD;
-    border-bottom: 1px solid #D2D2D2;
+    color: #2e4e73;
+    padding-top: 4px;
 }
 
-tab[calview][selected="true"],
-tab[calview][selected="true"]:hover {
-    background-color: #FFFFFF;
-    padding-bottom: 1px;
-}
-
-tab[calview]:hover {
-    background-color: #F6F6F6;
+tab[calview][selected="true"] {
+    background-color: #fff;
 }
 
 tab[calview] > .tab-middle {
-    font-size: 14px;
-    padding-top: 5px;
-    padding-bottom: 5px;
+    padding: 0;
 }
 
 .view-header {
-    padding-top: 5px;
-    margin-top: 3px;
-}
-
-#calendarWeek {
     margin-top: 3px;
     margin-bottom: 1px;
 }
 
-.navigation-inner-box {
-    border-bottom: 1px solid #D2D2D2;
-}
-
 .navigation-bottombox {
     background-color: white;
 }
 
 .view-navigation-button {
     -moz-user-focus: normal;
     -moz-appearance: toolbarbutton;
-    margin-top: 3px;
+    margin-top: 2px;
     margin-inline-start: 3px;
     margin-inline-end: 3px;
-    margin-bottom: 1px;
+    margin-bottom: 0;
     min-width: 22px;
 }
 
 .today-navigation-button {
     margin-top: 2px;
-    margin-bottom: 0px;
+    margin-bottom: 0;
+    padding-top: 2px;
 }
 
 .view-navigation-button > .toolbarbutton-icon {
     margin: 1px;
 }
 
 @media (-moz-mac-yosemite-theme) {
     #calendar-nav-control:-moz-window-inactive {
         background: -moz-mac-chrome-inactive;
-    }
-
-    .navigation-inner-box:-moz-window-inactive {
-        border-bottom-color: hsl(0, 0%, 85%);
-    }
-
-    tab[calview]:not([selected="true"]):-moz-window-inactive {
-        background-color: #EAEAEA;
+        --calview-border-bottom-color: hsl(0, 0%, 85%);
     }
 }
--- a/calendar/base/themes/windows/calendar-views.css
+++ b/calendar/base/themes/windows/calendar-views.css
@@ -3,71 +3,58 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url(chrome://calendar-common/skin/calendar-views.css);
 
 /* Navigation controls for the views */
 #calendar-nav-control {
     background-color: ButtonFace;
     border-top: 1px solid ThreeDShadow;
-    border-inline-start: 1px solid ThreeDShadow;
-    padding-top: 1px;
+    --calview-tabline-color: #0a84ff;
+    --calview-border-color: ThreeDShadow;
+    --calview-border-bottom-color: ThreeDShadow;
 }
 
 #view-deck {
     background-color: -moz-Field;
     border-width: 0;
     border-inline-start: 1px;
 }
 
-tab[calview] {
-    background-color: rgba(0, 0, 0, .1);
-    color: ButtonText;
-    border: 1px solid ThreeDShadow;
-    font-size: 14px;
+.view-header {
+    margin-bottom: 0;
 }
 
-tab[calview][selected="true"],
-tab[calview][selected="true"]:hover {
+tab[calview] {
+    color: ButtonText;
+}
+
+tab[calview][selected="true"] {
     background-color: -moz-Field;
 }
 
-tab[calview]:hover {
-    background-color: ButtonHighlight;
-}
-
-#calendarWeek {
-    margin-top: 4px;
-    margin-bottom: 0px;
-}
-
-.navigation-inner-box {
-    border-bottom: 1px solid ThreeDShadow;
+.navigation-inner-box > hbox {
+    padding-top: 1px;
 }
 
 .navigation-bottombox {
     background-color: -moz-Field;
 }
 
-.navigation-spacer-box {
-    min-width: 4px;
-    border-bottom: 1px solid ThreeDShadow;
-}
-
 .view-navigation-button {
     margin-inline-start: 2px;
     margin-inline-end: 2px;
 }
 
 .today-navigation-button {
-    padding-top: 0px !important; /* a workaround to center the label vertically on Windows */
+    padding-top: 0 !important; /* a workaround to center the label vertically on Windows */
 }
 
 #calendar-view-box #calendar-view-splitter {
     border: none;
-    border-bottom: 1px solid #A9B7C9;
+    border-bottom: 1px solid #a9b7c9;
     min-height: 0;
     height: 5px;
     background-color: transparent;
     margin-top: -5px;
     position: relative;
     z-index: 10;
 }