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
diff --git a/gm/rebaseline_server/static/view.css b/gm/rebaseline_server/static/view.css
index 6520611..82eda61 100644
--- a/gm/rebaseline_server/static/view.css
+++ b/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 {
diff --git a/gm/rebaseline_server/static/view.html b/gm/rebaseline_server/static/view.html
index 37ed4fa..0b2476c 100644
--- a/gm/rebaseline_server/static/view.html
+++ b/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)">
{{tab}} ({{numResultsPerTab[tab]}})
</div>