Tab-buttons: add some user-feedback (#20632).

* Hover color
* Enable/disable buttons (visually at least) when no more change is possible
* Width calculation with jQuery only, no longer hard-coded
* Remove ugly outline in Chrome (at least on Mac)

Patch by Daniel Ritz.

git-svn-id: http://svn.redmine.org/redmine/trunk@15249 e93f8b46-1217-0410-a6f0-8f06a7374b81

1 files changed, 12 insertions, 1 deletions

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index f7963dd33..9122f90c8 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -901,7 +901,7 @@ p.progress-info {clear: left; font-size: 80%; margin-top:-4px; color:#777;}
 
 #content .tabs ul li a.selected:hover {background-color: #fff;}
 
-div.tabs-buttons { position:absolute; right: 0; width: 48px; height: 24px; background: white; bottom: 0; border-bottom: 1px solid #bbbbbb; }
+div.tabs-buttons { position:absolute; right: 0; width: 54px; height: 24px; background: white; bottom: 0; border-bottom: 1px solid #bbbbbb; }
 
 button.tab-left, button.tab-right {
   font-size: 0.9em;
@@ -914,6 +914,12 @@ button.tab-left, button.tab-right {
   width: 20px;
   bottom: -1px;
 }
+button.tab-left:hover, button.tab-right:hover {
+  background-color: #f5f5f5;
+}
+button.tab-left:focus, button.tab-right:focus {
+  outline: 0;
+}
 
 button.tab-left {
   right: 20px;
@@ -927,6 +933,11 @@ button.tab-right {
   border-top-right-radius:3px;
 }
 
+button.tab-left.disabled, button.tab-right.disabled {
+  background-color: #ccc;
+  cursor: unset;
+}
+
 /***** Diff *****/
 .diff_out { background: #fcc; }
 .diff_out span { background: #faa; }