Fixed bug #17155: Active and hover states are hard to distinguish

git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@10168 709f56b5-9817-0410-a4d7-c38de5d9e867

ChangeLog

@@ -26,6 +26,7 @@
 2011-01-20  Steffen Gebert  <steffen@steffen-gebert.de>
 	* Fixed bug #17044: Styling of TCEforms with renderMode=checkbox
+	* Fixed bug #17155: Active and hover states are hard to distinguish
 2011-01-20  Ernesto Baschny  <ernst@cron-it.de>

typo3/sysext/t3skin/stylesheets/visual/element_pagetree.css

@@ -20,12 +20,37 @@ $Id: $
 
 #typo3-pagetree .x-tree-node .x-tree-node-over,
 #typo3-pagetree .x-tree-node .x-tree-selected {
-	background-color: #f8f8f8;
 	border-bottom: 1px solid #d7d7d7;
 	border-top: 1px solid #d7d7d7;
 	border-left: 1px solid #d7d7d7;
 }
 
+#typo3-pagetree .x-tree-node .x-tree-node-over {
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGElEQVR42gENAPL/AMjIyEzIyMizyMjI/zhvCQelaHPPAAAAAElFTkSuQmCC");
+	/* star-hack targets IE6+7 */
+	*background-image: url("../../images/shadows/navigation-container.png");
+	background-position: right;
+	background-repeat: repeat-y;
+	background-color: #f2f2f2;
+	-moz-border-radius-topright: 3px;
+	-moz-border-radius-bottomright: 3px;
+	-webkit-border-top-right-radius: 3px;
+	-webkit-border-bottom-right-radius: 3px;
+	border-top-right-radius: 3px;
+	border-bottom-right-radius: 3px;
+}
+
+#typo3-pagetree .x-tree-node .x-tree-selected {
+	background-color: #f8f8f8;
+}
+
+#typo3-pagetree .x-tree-node .x-tree-selected.x-tree-node-over {
+	background-image: none;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+	border-radius: 0;
+}
+
 #typo3-pagetree .x-panel-tbar {
 	background-color: #585858;
 	border: none;
@@ -164,9 +189,9 @@ $Id: $
 
 #typo3-pagetree-topPanel-filter {
 	border: 1px solid #aeaeae;
-	-moz-box-shadow: inset 0 1px 4px #aeaeae;
-	-ms-box-shadow: inset 0 1px 4px #aeaeae;
-	-webkit-box-shadow: inset 0 1px 4px #aeaeae;
+	-moz-box-shadow: inset 0 1px 1px #aeaeae;
+	-ms-box-shadow: inset 0 1px 1px #aeaeae;
+	-webkit-box-shadow: inset 0 1px 1px #aeaeae;
 	box-shadow: inset 0 2px 1px #aeaeae;
 }
 
@@ -174,16 +199,6 @@ $Id: $
 	color: gray;
 }
 
-#typo3-pagetree-topPanelItems,
-.typo3-pagetree-indicatorBar-item,
-#typo3-pagetree-topPanel .typo3-pagetree-topPanel-item,
-#typo3-pagetree-treeContainer {
-	-moz-box-shadow: inset -2px 0 0px #c4c4c4;
-	-ms-box-shadow: inset -2px 0 0px #c4c4c4;
-	-webkit-box-shadow: inset -2px 0 0px #c4c4c4;
-	box-shadow: inset -2px 0 0px #c4c4c4;
-}
-
 #typo3-pagetree .typo3-pagetree-topPanel-button {
 	border: none;
 	border-radius: 0;
@@ -317,14 +332,6 @@ $Id: $
 	background: transparent url('../../images/spinner/d5d5d5.gif') no-repeat 0 3px;
 }
 
-#typo3-pagetree .x-panel-tbar,
-#typo3-pagetree-deletionDropZone .x-panel-body {
-	-moz-box-shadow: inset -2px 0 1px #414141;
-	-ms-box-shadow: inset -2px 0 1px #414141;
-	-webkit-box-shadow: inset -2px 0 1px #414141;
-	box-shadow: inset -2px 0 1px #414141;
-}
-
 .typo3-pagetree-deletionDropZone-proxyOver .x-dd-drop-icon {
 	background-image: url(../../images/icons/actions/edit-delete.png);
 }

typo3/sysext/t3skin/stylesheets/visual/element_tree.css

@@ -9,32 +9,43 @@ body#typo3-alt-file-navframe-php {
 	background: #ebebeb;
 }
 
-/**
- * Shadow on the right side of the tree frame.
- */
-#typo3-pagetree #typo3-docbody,
-#typo3-alt-file-navframe-php #typo3-docbody {
-	-moz-box-shadow: inset -2px 0 1px #c4c4c4;
-	-ms-box-shadow: inset -2px 0 1px #c4c4c4;
-	-webkit-box-shadow: inset -2px 0 1px #c4c4c4;
-	box-shadow: inset -2px 0 1px #c4c4c4;
-}
-
-/**
- * Shadow on the right side of the tree frame,
- * fallback for missing box-shadow support.
- *
- * @see modernizr.js
- */
-.no-boxshadow #typo3-pagetree #typo3-docbody,
-.no-boxshadow #typo3-alt-file-navframe-php #typo3-docbody {
-	background-image: url("data:image/png;base64,R0lGODlhAgABAIAAAMjIyLOzsyH5BAAAAAAALAAAAAACAAEAAAICRAoAOw==");
-	/* star-hack targets IE6+7 */
-	*background-image: url("../../images/backgrounds/module-menu-right.png");
+#typo3-alt-file-navframe-php #typo3-docbody,
+#typo3-alt-file-navframe-php #typo3-docheader-row1,
+#typo3-alt-file-navframe-php #typo3-docheader-row2,
+.typo3-pagetree-indicatorBar-item,
+#typo3-pagetree-topPanelItems,
+#typo3-pagetree-topPanel .typo3-pagetree-topPanel-item,
+#typo3-pagetree-treeContainer,
+#typo3-pagetree .x-panel-tbar,
+#typo3-pagetree-deletionDropZone .x-panel-body {
 	background-position: right;
 	background-repeat: repeat-y;
 }
 
+#typo3-alt-file-navframe-php #typo3-docbody,
+#typo3-pagetree-treeContainer {
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGElEQVR42gENAPL/AMjIyEzIyMizyMjI/zhvCQelaHPPAAAAAElFTkSuQmCC");
+	/* star-hack targets IE6+7 */
+	*background-image: url("../../images/shadows/navigation-container.png");
+}
+
+#typo3-alt-file-navframe-php #typo3-docheader-row1,
+#typo3-pagetree-topPanelItems,
+#typo3-pagetree .x-panel-tbar,
+#typo3-pagetree-deletionDropZone .x-panel-body {
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGElEQVR42gENAPL/AEBAQExAQECzQEBA/xb3BD8CHBN0AAAAAElFTkSuQmCC");
+	/* star-hack targets IE6+7 */
+	*background-image: url("../../images/shadows/docheader1.png");
+}
+
+#typo3-alt-file-navframe-php #typo3-docheader-row2,
+.typo3-pagetree-indicatorBar-item,
+#typo3-pagetree-topPanel .typo3-pagetree-topPanel-item {
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGElEQVR42gENAPL/ALi4uEy4uLi0uLi4/zSECHijpwMGAAAAAElFTkSuQmCC");
+	/* star-hack targets IE6+7 */
+	*background-image: url("../../images/shadows/docheader2.png");
+}
+
 table#typo3-tree a {
 	text-decoration: none;
 }

typo3/sysext/t3skin/stylesheets/visual/module_menu.css

@@ -14,20 +14,8 @@ $Id$
 /**
  * Shadow on the right side of the module menu.
  */
-#typo3-module-menu {
-	-moz-box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15);
-	-ms-box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15);
-	-webkit-box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15);
-	box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15);
-}
-
-/**
- * Shadow on the right side of the module menu,
- * fallback for missing box-shadow support.
- *
- * @see modernizr.js
- */
-.no-boxshadow #typo3-module-menu {
+#typo3-module-menu,
+#typo3-menu li.menuSection li a:hover {
 	background-image: url("data:image/png;base64,R0lGODlhAgABAIAAAMjIyLOzsyH5BAAAAAAALAAAAAACAAEAAAICRAoAOw==");
 	/* star-hack targets IE6+7 */
 	*background-image: url("../../images/backgrounds/module-menu-right.png");
@@ -60,18 +48,33 @@ $Id$
 	border-bottom: none;
 }
 
+/* hovered menu item */
 #typo3-menu li.menuSection li a:hover,
-#typo3-menu li.menuSection li.hover a,
 #typo3-menu li.highlighted a {
-	background-color: #ebebeb;
 	border-top: 1px solid #b8b8b8;
 	border-bottom: 1px solid #b8b8b8;
 }
 
+#typo3-menu li.menuSection li a:hover {
+	background-color: #e8e8e8;
+}
+
+/* active menu item */
 #typo3-menu li.highlighted {
 	font-weight: bold;
 }
 
+#typo3-menu li.highlighted a,
+#typo3-menu li.menuSection li.highlighted a:hover,
+.no-boxshadow #typo3-menu li.menuSection li.highlighted a:hover {
+	background-color: #ebebeb;
+	background-image: none;
+	-moz-box-shadow: none;
+	-ms-box-shadow: none;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+}
+
 #typo3-menu li div.modgroup {
 	color: #252524;
 	cursor: pointer;