Modifyed Buttons, disabled elements, tables

All types of buttons now match the view of Large Buttons, some disabled
elements (buttons, action-images) now show a forbidden-cursor (does not
work in some browsers) - that will be implemented in the future on other
elements also.

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index b65f6ffe2d06a176cf817838ff818c809777c331..8b8e2821c57e52977b0f8e3844f37b7d5f83a043 100644 (file)
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -1,7 +1,7 @@
 /**
  * ACP Testing Styles  
  *
- * @author     Harald Szekely, Alexander Ebert, Marcel Werk 
+ * @author             Harald Szekely, Alexander Ebert, Marcel Werk 
  * @copyright  2011 WoltLab GmbH 
  */
 
@@ -1490,8 +1490,8 @@ input[type='submit']:active,
 /* Table */
 
 table {
-       width: 100% !important;
        border-spacing: 0;
+       width: 100% !important;
 }
 
 /* Table Header */
@@ -1601,7 +1601,7 @@ tbody td {
        background-color: #fcfdfe;
        border-right: 1px solid rgba(255, 255, 255, .3);
        padding: 5px;
-       /* this is experimental */
+       /* this is experimental - only works in combination with "table-layout: fixed;" */
        word-wrap: break-word;
 }
 
@@ -1623,6 +1623,10 @@ tbody tr .columnIcon img {
        width: 16px;
 }
 
+tbody tr .columnIcon img:not(.balloonTooltip):hover {
+       cursor: not-allowed;
+}
+
 /* ToDo: Table Specials */
 
 /*
@@ -1657,20 +1661,26 @@ tbody tr .columnIcon img {
 /* This is only experimental for the moment */
 
 .pageNavigation ul li:not(.children) {
-       border: 1px solid rgba(0, 0, 0, .2);
+       color: #999;
+       
+       border-width: 1px;
+       border-style: solid;
+       border-color: #ccc #bbb #aaa;
        border-radius: 3px;
        
-       background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
-       background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
-       background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
-       background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
-       background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
+       background-color: #fefefe;
+       background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+       background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+       background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+       background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+       background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
        
        display: inline-block;
        position: relative;
 }
 
 .pageNavigation ul li.disabled {
+       cursor: not-allowed;
        border: 1px solid rgba(0, 0, 0, .1);
        background-image: none;
 }
@@ -1687,10 +1697,17 @@ tbody tr .columnIcon img {
 }
 
 .pageNavigation ul li:not(.disabled):hover {
-       color: #333;
-       border: 1px solid rgba(0, 0, 0, .3);
-       background-color: rgba(255, 255, 255, 1);
-       background-image: none;
+       color: #666;
+       border-width: 1px;
+       border-style: solid;
+       border-color: #ffc053 #fa2 #fc9e07;
+       
+       background-color: #fff9f4;
+       background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
 }
 
 .pageNavigation ul li.skip {   
@@ -1705,14 +1722,38 @@ tbody tr .columnIcon img {
        display: inline-block;
 }
 
+.pageNavigation ul li:not(.disabled):hover a {
+       color: #666;
+}
+
 .pageNavigation ul li:not(.skip) a {
        padding: 3px 5px;
 }
 
-.pageNavigation ul li:active,
-.pageNavigation ul li:focus {
-       border: 1px solid rgba(0, 0, 0, .3);
-       background-color: rgba(0, 0, 0, .5) !important;
+.pageNavigation ul li:not(.disabled):active,
+.pageNavigation ul li:not(.disabled):focus {
+       color: #333;
+       border-width: 1px;
+       border-style: solid;
+       border-color: #fc9e07 #fa2 #ffc053;
+       
+       background-color: #fff9f4;
+       background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       
+       -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+       -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+       -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+       -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+       box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+}
+
+.pageNavigation ul li:active a,
+.pageNavigation ul li:focus a {
+       color: #333;
 }
 
 .pageNavigation ul li.active,
@@ -1731,12 +1772,6 @@ tbody tr .columnIcon img {
        padding: 3px 5px;
 }
 
-.pageNavigation ul li:active a,
-.pageNavigation ul li:focus a {
-       text-shadow: 0 1px 0 #000;
-       color: #fff;
-}
-
 .pageNavigation ul li.children,
 .pageNavigation ul li.children:hover,
 .pageNavigation ul li.children:active,
@@ -2022,14 +2057,18 @@ div.ui-widget-overlay {
        text-decoration: none !important;
        text-shadow: 0 1px 0 #fff;
        color: #999;
-       border: 1px solid #999;
        
-       background-color: #fff;
-       background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
-       background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
-       background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
-       background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
-       background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
+       border-width: 1px;
+       border-style: solid;
+       border-color: #ccc #bbb #aaa;
+       border-radius: 30px;
+       
+       background-color: #fefefe;
+       background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+       background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+       background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+       background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+       background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
        
        margin-right: 0;
        margin-left: 0;
@@ -2044,18 +2083,39 @@ div.ui-widget-overlay {
 
 .badgeButton:hover {
        color: #666;
-       border: 1px solid #666;
-       background-color: #fefefe;
+       
+       border-width: 1px;
+       border-style: solid;
+       border-color: #ffc053 #fa2 #fc9e07;
+       
+       background-color: #fff9f4;
+       background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
 }
 
-.badgeButton:active, .badgeButton:focus {
-       color: #666;
+.badgeButton:active,
+.badgeButton:focus {
+       color: #333;
        
-       background-image: -webkit-linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
-       background-image: -moz-linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
-       background-image: -o-linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
-       background-image: -ms-linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
-       background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
+       border-width: 1px;
+       border-style: solid;
+       border-color: #fc9e07 #fa2 #ffc053;
+       
+       background-color: #fff9f4;
+       background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       
+       -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+       -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+       -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+       -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+       box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
 }
 
 
@@ -2077,6 +2137,11 @@ div.ui-widget-overlay {
        box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
 }
 
+.balloonTooltip {
+       /* That could be wrong */
+       cursor: pointer;
+}
+
 /* Collapsible */
 
 .collapsible {