From 773738483fb07f6c9ad334d4a2f377f123eccfaf Mon Sep 17 00:00:00 2001 From: Luzifr Date: Thu, 8 Sep 2011 21:01:47 +0200 Subject: [PATCH] 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. --- wcfsetup/install/files/acp/style/testing.css | 143 ++++++++++++++----- 1 file changed, 104 insertions(+), 39 deletions(-) diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css index b65f6ffe2d..8b8e2821c5 100644 --- 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 { -- 2.20.1