Bug 1433662 - Make the calview tabs look like the main tabs. r=philipp

calendar/base/themes/common/calendar-views.css

@@ -865,18 +865,43 @@ agenda-richlist-item[status="CANCELLED"] .agenda-container-box {
     border: solid ThreeDShadow;
 }
 
-tab[calview] {
-    -moz-appearance: none;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    margin-top: 0px;
-    -moz-user-focus: normal;
+.navigation-inner-box {
+    border-bottom: 1px solid var(--calview-border-bottom-color);
 }
 
-tab[calview][selected="true"],
-tab[calview][selected="true"]:hover {
-    margin-bottom: 0px;
-    border-bottom: none;
+.navigation-spacer-box {
+    min-width: 15px;
+    border-bottom: 1px solid var(--calview-border-bottom-color);
+}
+
+tab[calview] {
+    -moz-appearance: none;
+    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]: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 {

calendar/base/themes/linux/calendar-views.css

@@ -7,8 +7,9 @@
 /* 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 {
@@ -16,40 +17,28 @@
     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;

calendar/base/themes/osx/calendar-views.css

@@ -49,9 +49,10 @@ agenda-richlist-item[status="CANCELLED"] .agenda-container-box {
 
 /* 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 {
@@ -59,10 +60,6 @@ agenda-richlist-item[status="CANCELLED"] .agenda-container-box {
     border-width: 0 0 0 1px;
 }
 
-#view-tabs {
-    padding-right: 20px;
-}
-
 #view-tabbox {
     margin: 0;
 }
@@ -73,42 +70,23 @@ agenda-richlist-item[status="CANCELLED"] .agenda-container-box {
 }
 
 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;
 }
@@ -116,16 +94,17 @@ tab[calview] > .tab-middle {
 .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 {
@@ -135,13 +114,6 @@ tab[calview] > .tab-middle {
 @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%);
     }
 }

calendar/base/themes/windows/calendar-views.css

@@ -8,8 +8,9 @@
 #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 {
@@ -18,52 +19,38 @@
     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;