tweaks to tab CSS for rebaseline server page; moar pretty

BUG=skia:
R=epoger@google.com

Author: humper@google.com

Review URL: https://codereview.chromium.org/264853004

git-svn-id: http://skia.googlecode.com/svn/trunk@14512 2bbb7eff-a529-9590-31e7-b0007b416f81

gm/rebaseline_server/static/view.css

@@ -6,18 +6,36 @@
     background-color: #ffbb00;
 }
 
+.tab-wrapper {
+    margin-top: 10px;
+}
+
+.tab {
+    display: inline-block;
+    font-size: 20px;
+    padding: 5px;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    position: relative;
+}
+
 /* Tab which has been selected. */
 .tab-true {
     background-color: #ccccff;
-    display: inline-block;
-    font-size: 20px;
+    border: 1px solid black;
+    border-bottom-width: 0px;
+    bottom: -1px;
 }
 /* All other tabs. */
 .tab-false {
     background-color: #8888ff;
-    display: inline-block;
-    font-size: 20px;
+    cursor: pointer;
 }
+
+.tab-false:hover {
+    background-color: #aa88ff;
+}
+
 /* Spacers between tabs. */
 .tab-spacer {
     display: inline-block;
@@ -25,6 +43,7 @@
 /* The main working area (connected to the selected tab). */
 .tab-main {
     background-color: #ccccff;
+    border: 1px solid black;
 }
 
 .update-results-button {

gm/rebaseline_server/static/view.html

@@ -35,9 +35,9 @@
       Results from <a href="{{resultsToLoad}}">{{resultsToLoad}}</a> current as of {{localTimeString(header[constants.KEY__HEADER__TIME_UPDATED])}}
     </div>
 
-    <div><!-- tabs -->
+    <div class="tab-wrapper"><!-- tabs -->
       <div class="tab-spacer" ng-repeat="tab in tabs">
-        <div class="tab-{{tab == viewingTab}}"
+        <div class="tab tab-{{tab == viewingTab}}"
              ng-click="setViewingTab(tab)">
           &nbsp;{{tab}} ({{numResultsPerTab[tab]}})&nbsp;
         </div>