Fixed bug #17155: Active and hover states are hard to distinguish
authorSteffen Gebert <steffen.gebert@typo3.org>
Thu, 20 Jan 2011 18:51:19 +0000 (18:51 +0000)
committerSteffen Gebert <steffen.gebert@typo3.org>
Thu, 20 Jan 2011 18:51:19 +0000 (18:51 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@10168 709f56b5-9817-0410-a4d7-c38de5d9e867

ChangeLog
typo3/sysext/t3skin/images/shadows/docheader1.png [new file with mode: 0644]
typo3/sysext/t3skin/images/shadows/docheader2.png [new file with mode: 0644]
typo3/sysext/t3skin/images/shadows/navigation-container.png [new file with mode: 0644]
typo3/sysext/t3skin/stylesheets/visual/element_pagetree.css
typo3/sysext/t3skin/stylesheets/visual/element_tree.css
typo3/sysext/t3skin/stylesheets/visual/module_menu.css

index cfbdca3..6785354 100755 (executable)
--- a/ChangeLog
+++ b/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>
 
diff --git a/typo3/sysext/t3skin/images/shadows/docheader1.png b/typo3/sysext/t3skin/images/shadows/docheader1.png
new file mode 100644 (file)
index 0000000..3afab0a
Binary files /dev/null and b/typo3/sysext/t3skin/images/shadows/docheader1.png differ
diff --git a/typo3/sysext/t3skin/images/shadows/docheader2.png b/typo3/sysext/t3skin/images/shadows/docheader2.png
new file mode 100644 (file)
index 0000000..97a21da
Binary files /dev/null and b/typo3/sysext/t3skin/images/shadows/docheader2.png differ
diff --git a/typo3/sysext/t3skin/images/shadows/navigation-container.png b/typo3/sysext/t3skin/images/shadows/navigation-container.png
new file mode 100644 (file)
index 0000000..2a05ead
Binary files /dev/null and b/typo3/sysext/t3skin/images/shadows/navigation-container.png differ
index 348b520..627cd80 100644 (file)
@@ -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);
 }
index cdc8026..15a828b 100644 (file)
@@ -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;
 }
index 942f74d..f27bfca 100644 (file)
@@ -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;