From ad931d27d5b5a95f6230d9ab39d7fd331a603dcb Mon Sep 17 00:00:00 2001
From: Steffen Gebert <steffen.gebert@typo3.org>
Date: Thu, 20 Jan 2011 18:51:19 +0000
Subject: [PATCH] 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 | 1 +
.../t3skin/images/shadows/docheader1.png | Bin 0 -> 81 bytes
.../t3skin/images/shadows/docheader2.png | Bin 0 -> 81 bytes
.../images/shadows/navigation-container.png | Bin 0 -> 81 bytes
.../stylesheets/visual/element_pagetree.css | 51 +++++++++-------
.../stylesheets/visual/element_tree.css | 55 +++++++++++-------
.../t3skin/stylesheets/visual/module_menu.css | 35 ++++++-----
7 files changed, 82 insertions(+), 60 deletions(-)
create mode 100644 typo3/sysext/t3skin/images/shadows/docheader1.png
create mode 100644 typo3/sysext/t3skin/images/shadows/docheader2.png
create mode 100644 typo3/sysext/t3skin/images/shadows/navigation-container.png
diff --git a/ChangeLog b/ChangeLog
index cfbdca3763a2..678535413d56 100755
--- 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
index 0000000000000000000000000000000000000000..3afab0aad04f4d7851108b57561880f3e904a2eb
GIT binary patch
literal 81
zcmeAS@N?(olHy`uVBq!ia0vp^%s|Y@!3HFyABb!LQWBmnjv*Dd7<m~!{bz7+aPR@*
b%|QHL>^qA+lZ<c)Pz{5ptDnm{r-UW|clZ)x
literal 0
HcmV?d00001
diff --git a/typo3/sysext/t3skin/images/shadows/docheader2.png b/typo3/sysext/t3skin/images/shadows/docheader2.png
new file mode 100644
index 0000000000000000000000000000000000000000..97a21da577e7d26336356b21d1ef515f17202b78
GIT binary patch
literal 81
zcmeAS@N?(olHy`uVBq!ia0vp^%s|Y@!3HFyABb!LQWBmnjv*Dd7<m~!{b$&*V}}nA
bZvo=}CM_Hli<dKllrng_`njxgN@xNA^OzSh
literal 0
HcmV?d00001
diff --git a/typo3/sysext/t3skin/images/shadows/navigation-container.png b/typo3/sysext/t3skin/images/shadows/navigation-container.png
new file mode 100644
index 0000000000000000000000000000000000000000..2a05ead36208e56854559ff34e9c884b92fb45cc
GIT binary patch
literal 81
zcmeAS@N?(olHy`uVBq!ia0vp^%s|Y@!3HFyABb!LQWBmnjv*Dd7<m~!{bx9F;)D+n
cZwBK37Wtg)OEZek1Jy8iy85}Sb4q9e00z_;JOBUy
literal 0
HcmV?d00001
diff --git a/typo3/sysext/t3skin/stylesheets/visual/element_pagetree.css b/typo3/sysext/t3skin/stylesheets/visual/element_pagetree.css
index 348b520029f8..627cd80fe2dd 100644
--- a/typo3/sysext/t3skin/stylesheets/visual/element_pagetree.css
+++ b/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);
}
diff --git a/typo3/sysext/t3skin/stylesheets/visual/element_tree.css b/typo3/sysext/t3skin/stylesheets/visual/element_tree.css
index cdc8026d2293..15a828b98716 100644
--- a/typo3/sysext/t3skin/stylesheets/visual/element_tree.css
+++ b/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;
}
diff --git a/typo3/sysext/t3skin/stylesheets/visual/module_menu.css b/typo3/sysext/t3skin/stylesheets/visual/module_menu.css
index 942f74d0174e..f27bfca86104 100644
--- a/typo3/sysext/t3skin/stylesheets/visual/module_menu.css
+++ b/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;
--
GitLab