[TASK] Adjust module icons and app-icon viewport 90/34690/10
authorBenjamin Kott <benjamin.kott@outlook.com>
Wed, 26 Nov 2014 23:24:21 +0000 (00:24 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Sat, 29 Nov 2014 17:52:52 +0000 (18:52 +0100)
* create crisp icons
* full tone color schema
* streamline icons
* enhance module menu styling
* remove focus outline
* make focus visible for keyboard navigation

Resolves: #63193
Resolves: #63192
Releases: master

Kudos: Benjamin Kott, Mathias Schreiber, Dirk Lipjes,
Frank Nägler, Felix Kopp

Change-Id: I10e718c5e6107f8552770f1727bd6f95f8b994f2
Reviewed-on: http://review.typo3.org/34690
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
Reviewed-by: Frank Nägler <typo3@naegler.net>
Tested-by: Frank Nägler <typo3@naegler.net>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
32 files changed:
typo3/sysext/about/Resources/Public/Icons/module-about.png [changed mode: 0644->0755]
typo3/sysext/aboutmodules/Resources/Public/Icons/module-aboutmodules.png [changed mode: 0644->0755]
typo3/sysext/belog/Resources/Public/Icons/module-belog.png [changed mode: 0755->0644]
typo3/sysext/beuser/Resources/Public/Icons/module-beuser.png [changed mode: 0755->0644]
typo3/sysext/beuser/Resources/Public/Icons/module-permission.png [changed mode: 0755->0644]
typo3/sysext/cms/Resources/Public/Icons/module-page.png [changed mode: 0755->0644]
typo3/sysext/cshmanual/Resources/Public/Icons/module-cshmanual.png [changed mode: 0644->0755]
typo3/sysext/dbal/Resources/Public/Icons/module-dbal.png [changed mode: 0644->0755]
typo3/sysext/documentation/Resources/Public/Icons/module-documentation.png
typo3/sysext/extensionmanager/Resources/Public/Icons/module-extensionmanager.png [changed mode: 0755->0644]
typo3/sysext/filelist/Resources/Public/Icons/module-filelist.png [changed mode: 0755->0644]
typo3/sysext/func/Resources/Public/Icons/module-func.png
typo3/sysext/indexed_search/Resources/Public/Icons/module-indexed_search.png [changed mode: 0755->0644]
typo3/sysext/info/Resources/Public/Icons/module-info.png [changed mode: 0755->0644]
typo3/sysext/install/Resources/Public/Icons/module-install.png
typo3/sysext/lang/Resources/Public/Icons/module-lang.png [changed mode: 0755->0644]
typo3/sysext/lowlevel/Resources/Public/Icons/module-config.png
typo3/sysext/lowlevel/Resources/Public/Icons/module-dbint.png
typo3/sysext/recordlist/Resources/Public/Icons/module-list.png [changed mode: 0755->0644]
typo3/sysext/recycler/Resources/Public/Icons/module-recycler.png [changed mode: 0755->0644]
typo3/sysext/reports/Resources/Public/Icons/module-reports.png [changed mode: 0755->0644]
typo3/sysext/scheduler/Resources/Public/Icons/module-scheduler.png [changed mode: 0755->0644]
typo3/sysext/setup/Resources/Public/Icons/module-setup.png
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_docheader.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_menu.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
typo3/sysext/t3skin/extjs/xtheme-t3skin.css
typo3/sysext/taskcenter/Resources/Public/Icons/module-taskcenter.png
typo3/sysext/tstemplate/Resources/Public/Icons/module-tstemplate.png [changed mode: 0755->0644]
typo3/sysext/version/Resources/Public/Icons/module-version.png [changed mode: 0644->0755]
typo3/sysext/viewpage/Resources/Public/Icons/module-viewpage.png [changed mode: 0755->0644]
typo3/sysext/workspaces/Resources/Public/Icons/module-workspaces.png [changed mode: 0755->0644]

old mode 100644 (file)
new mode 100755 (executable)
index 02b0c86..21caa47
Binary files a/typo3/sysext/about/Resources/Public/Icons/module-about.png and b/typo3/sysext/about/Resources/Public/Icons/module-about.png differ
old mode 100644 (file)
new mode 100755 (executable)
index 7a3c49c..9dfe83a
Binary files a/typo3/sysext/aboutmodules/Resources/Public/Icons/module-aboutmodules.png and b/typo3/sysext/aboutmodules/Resources/Public/Icons/module-aboutmodules.png differ
old mode 100755 (executable)
new mode 100644 (file)
index 96a40a5..9d7f52c
Binary files a/typo3/sysext/belog/Resources/Public/Icons/module-belog.png and b/typo3/sysext/belog/Resources/Public/Icons/module-belog.png differ
old mode 100755 (executable)
new mode 100644 (file)
index 3bff67b..643abe2
Binary files a/typo3/sysext/beuser/Resources/Public/Icons/module-beuser.png and b/typo3/sysext/beuser/Resources/Public/Icons/module-beuser.png differ
old mode 100755 (executable)
new mode 100644 (file)
index e3dda2f..9104133
Binary files a/typo3/sysext/beuser/Resources/Public/Icons/module-permission.png and b/typo3/sysext/beuser/Resources/Public/Icons/module-permission.png differ
old mode 100755 (executable)
new mode 100644 (file)
index d4f020f..6ee0a99
Binary files a/typo3/sysext/cms/Resources/Public/Icons/module-page.png and b/typo3/sysext/cms/Resources/Public/Icons/module-page.png differ
old mode 100644 (file)
new mode 100755 (executable)
index 78746fd..cc6caa3
Binary files a/typo3/sysext/cshmanual/Resources/Public/Icons/module-cshmanual.png and b/typo3/sysext/cshmanual/Resources/Public/Icons/module-cshmanual.png differ
old mode 100644 (file)
new mode 100755 (executable)
index b1bbf3e..06a40cc
Binary files a/typo3/sysext/dbal/Resources/Public/Icons/module-dbal.png and b/typo3/sysext/dbal/Resources/Public/Icons/module-dbal.png differ
index 34beff4..26f623a 100755 (executable)
Binary files a/typo3/sysext/documentation/Resources/Public/Icons/module-documentation.png and b/typo3/sysext/documentation/Resources/Public/Icons/module-documentation.png differ
old mode 100755 (executable)
new mode 100644 (file)
index 5dbb664..1fb17fa
Binary files a/typo3/sysext/extensionmanager/Resources/Public/Icons/module-extensionmanager.png and b/typo3/sysext/extensionmanager/Resources/Public/Icons/module-extensionmanager.png differ
old mode 100755 (executable)
new mode 100644 (file)
index 6103801..db946a8
Binary files a/typo3/sysext/filelist/Resources/Public/Icons/module-filelist.png and b/typo3/sysext/filelist/Resources/Public/Icons/module-filelist.png differ
index 15d92ea..3e29ca9 100644 (file)
Binary files a/typo3/sysext/func/Resources/Public/Icons/module-func.png and b/typo3/sysext/func/Resources/Public/Icons/module-func.png differ
old mode 100755 (executable)
new mode 100644 (file)
index fbb809d..db6fc34
Binary files a/typo3/sysext/indexed_search/Resources/Public/Icons/module-indexed_search.png and b/typo3/sysext/indexed_search/Resources/Public/Icons/module-indexed_search.png differ
old mode 100755 (executable)
new mode 100644 (file)
index 07a23f6..f2a7f00
Binary files a/typo3/sysext/info/Resources/Public/Icons/module-info.png and b/typo3/sysext/info/Resources/Public/Icons/module-info.png differ
index 21cb31b..232691a 100644 (file)
Binary files a/typo3/sysext/install/Resources/Public/Icons/module-install.png and b/typo3/sysext/install/Resources/Public/Icons/module-install.png differ
old mode 100755 (executable)
new mode 100644 (file)
index 4f13624..50d8d86
Binary files a/typo3/sysext/lang/Resources/Public/Icons/module-lang.png and b/typo3/sysext/lang/Resources/Public/Icons/module-lang.png differ
index 20d2cd9..843feb5 100755 (executable)
Binary files a/typo3/sysext/lowlevel/Resources/Public/Icons/module-config.png and b/typo3/sysext/lowlevel/Resources/Public/Icons/module-config.png differ
index ca60dd4..4888917 100755 (executable)
Binary files a/typo3/sysext/lowlevel/Resources/Public/Icons/module-dbint.png and b/typo3/sysext/lowlevel/Resources/Public/Icons/module-dbint.png differ
old mode 100755 (executable)
new mode 100644 (file)
index f81d98f..30b9ead
Binary files a/typo3/sysext/recordlist/Resources/Public/Icons/module-list.png and b/typo3/sysext/recordlist/Resources/Public/Icons/module-list.png differ
old mode 100755 (executable)
new mode 100644 (file)
index 3f08323..e7ba016
Binary files a/typo3/sysext/recycler/Resources/Public/Icons/module-recycler.png and b/typo3/sysext/recycler/Resources/Public/Icons/module-recycler.png differ
old mode 100755 (executable)
new mode 100644 (file)
index 0b137f4..ef21fc2
Binary files a/typo3/sysext/reports/Resources/Public/Icons/module-reports.png and b/typo3/sysext/reports/Resources/Public/Icons/module-reports.png differ
old mode 100755 (executable)
new mode 100644 (file)
index 156279f..9dc0ae2
Binary files a/typo3/sysext/scheduler/Resources/Public/Icons/module-scheduler.png and b/typo3/sysext/scheduler/Resources/Public/Icons/module-scheduler.png differ
index c9e2c08..cafb83e 100755 (executable)
Binary files a/typo3/sysext/setup/Resources/Public/Icons/module-setup.png and b/typo3/sysext/setup/Resources/Public/Icons/module-setup.png differ
index 81300b1..6a2fd80 100644 (file)
@@ -107,7 +107,6 @@ DocHeader
 /* Collapsed tree frame is not invisible, but 5px wide.
    If no tree frame is in use, an empty container is shown instead */
 
-#typo3-module-menu-xsplit,
 #typo3-navigationContainer-xsplit,
 #typo3-navigationContainer-xcollapsed,
 #typo3-navigationDummy {
index 64a4128..da0d983 100644 (file)
 Module menu
 - - - - - - - - - - - - - - - - - - - - - */
 
-// Module icons
-@module-menu-icon-border-radius: @border-radius-small;
-@module-menu-icon-height: 28px;
-@module-menu-icon-width: 28px;
-@module-menu-icon-font-size: 21px;
-
 // Module base
 @module-menu-color: #ddd;
 @module-menu-bg: #222;
@@ -38,25 +32,40 @@ Module menu
 @module-menu-link-hover-bg: lighten(@module-menu-bg,3%);
 @module-menu-link-active-color: #fff;
 @module-menu-link-active-bg: lighten(@module-menu-bg,15%);
-@module-menu-item-padding-vertical: 5px;
-@module-menu-item-padding-horizontal: 10px;
+@module-menu-item-padding-vertical: 4px;
+@module-menu-item-padding-horizontal: 8px;
 
+// Module icons
+@module-menu-icon-border-radius: @border-radius-small;
+@module-menu-icon-height: 32px;
+@module-menu-icon-width: 32px;
+@module-menu-icon-font-size: 21px;
+@module-menu-icon-bg: @module-menu-link-active-bg;
 
+// Module menu container
 [id="typo3-module-menu"] {
        background: @module-menu-bg;
        color: @module-menu-color;
 }
+
+// Invisible module menu drag handler
+[id="typo3-module-menu-xsplit"] {
+       z-index: 10;
+       width: 1px;
+       background-color: @module-menu-border-color;
+       .box-shadow(2px 0px 3px rgba(0,0,0,0.5));
+       &:hover {
+               .box-shadow(2px 0px 3px rgba(0,0,0,0.9));
+       }
+       .x-layout-mini-wrapper {
+               left: -7px;
+               width: 15px;
+       }
+}
+
+// Module menu styling
 [id="typo3-menu"] {
        .list-unstyled();
-       &:after {
-               content: '';
-               position: absolute;
-               top: 0;
-               right: 0;
-               height: 100%;
-               width: 1px;
-               background-color: darken(@module-menu-group-bg,10%);
-       }
 
        /// Module menu group
        .typo3-module-menu-group-container {
@@ -69,6 +78,7 @@ Module menu
                position: relative;
                color: @module-menu-group-color;
                background-color: @module-menu-group-bg;
+               border-top: 1px solid lighten(@module-menu-border-color,10%);
                border-bottom: 1px solid @module-menu-border-color;
                padding: 5px 0;
        }
@@ -99,7 +109,9 @@ Module menu
                color: @module-menu-link-color;
                border-radius: @module-menu-link-border-radius;
                text-decoration: none;
+               &:focus,
                &:hover {
+                       outline: none;
                        color: @module-menu-link-hover-color;
                        background-color: @module-menu-link-hover-bg;
                }
@@ -142,13 +154,27 @@ Module menu
                        vertical-align: middle;
                }
        }
+       .typo3-module-menu-item-icon {
+               background-color: @module-menu-icon-bg;
+               &:after {
+                       position: absolute;
+                       content: '';
+                       display: block;
+                       top: 0;
+                       left: 0;
+                       right: 0;
+                       bottom: 0;
+                       border: 1px solid rgba(255,255,255,0.1);
+                       border-radius: @module-menu-icon-border-radius;
+               }
+       }
 
        // Module menu group and item titles
        .typo3-module-menu-group-title,
        .typo3-module-menu-item-title {
                white-space: nowrap;
                text-overflow: ellipsis;
-               padding-top: 6px;
+               padding-top: 7px;
                display: block;
                overflow: hidden;
                *zoom: 1;
@@ -179,6 +205,9 @@ Module menu
        .typo3-module-menu-group-container {
                padding-right: 0;
        }
+       .typo3-module-menu-item-link {
+               border-radius: 0;
+       }
        .typo3-module-menu-group-title,
        .typo3-module-menu-item-title {
                display: none;
index 395a998..cee5678 100644 (file)
@@ -7148,7 +7148,6 @@ DocHeader
  */
 /* Collapsed tree frame is not invisible, but 5px wide.
    If no tree frame is in use, an empty container is shown instead */
-#typo3-module-menu-xsplit,
 #typo3-navigationContainer-xsplit,
 #typo3-navigationContainer-xcollapsed,
 #typo3-navigationDummy {
@@ -11208,19 +11207,25 @@ Module menu
   background: #222222;
   color: #dddddd;
 }
+[id="typo3-module-menu-xsplit"] {
+  z-index: 10;
+  width: 1px;
+  background-color: #111111;
+  -webkit-box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5);
+}
+[id="typo3-module-menu-xsplit"]:hover {
+  -webkit-box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.9);
+  box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.9);
+}
+[id="typo3-module-menu-xsplit"] .x-layout-mini-wrapper {
+  left: -7px;
+  width: 15px;
+}
 [id="typo3-menu"] {
   padding-left: 0;
   list-style: none;
 }
-[id="typo3-menu"]:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  width: 1px;
-  background-color: #080808;
-}
 [id="typo3-menu"] .typo3-module-menu-group-container {
   clear: both;
   padding-left: 0;
@@ -11234,6 +11239,7 @@ Module menu
   position: relative;
   color: #dddddd;
   background-color: #222222;
+  border-top: 1px solid #2b2b2b;
   border-bottom: 1px solid #111111;
   padding: 5px 0;
 }
@@ -11244,7 +11250,7 @@ Module menu
   position: relative;
   cursor: pointer;
   display: block;
-  padding: 5px 10px;
+  padding: 4px 8px;
   text-transform: uppercase;
 }
 [id="typo3-menu"] .typo3-module-menu-group-header:before,
@@ -11270,7 +11276,7 @@ Module menu
   position: relative;
   cursor: pointer;
   display: block;
-  padding: 5px 10px;
+  padding: 4px 8px;
   color: #666666;
   border-radius: 0 2px 2px 0;
   text-decoration: none;
@@ -11291,7 +11297,9 @@ Module menu
 [id="typo3-menu"] .typo3-module-menu-item-link:after {
   clear: both;
 }
+[id="typo3-menu"] .typo3-module-menu-item-link:focus,
 [id="typo3-menu"] .typo3-module-menu-item-link:hover {
+  outline: none;
   color: #dddddd;
   background-color: #2a2a2a;
 }
@@ -11304,8 +11312,8 @@ Module menu
   position: relative;
   display: block;
   padding: 0px;
-  height: 28px;
-  width: 28px;
+  height: 32px;
+  width: 32px;
   margin-right: 10px;
   float: left;
   overflow: hidden;
@@ -11325,19 +11333,33 @@ Module menu
 }
 [id="typo3-menu"] .typo3-module-menu-group-icon img,
 [id="typo3-menu"] .typo3-module-menu-item-icon img {
-  max-height: 28px;
-  max-width: 28px;
+  max-height: 32px;
+  max-width: 32px;
 }
 [id="typo3-menu"] .typo3-module-menu-group-icon .fa,
 [id="typo3-menu"] .typo3-module-menu-item-icon .fa {
   font-size: 21px;
   vertical-align: middle;
 }
+[id="typo3-menu"] .typo3-module-menu-item-icon {
+  background-color: #484848;
+}
+[id="typo3-menu"] .typo3-module-menu-item-icon:after {
+  position: absolute;
+  content: '';
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+}
 [id="typo3-menu"] .typo3-module-menu-group-title,
 [id="typo3-menu"] .typo3-module-menu-item-title {
   white-space: nowrap;
   text-overflow: ellipsis;
-  padding-top: 6px;
+  padding-top: 7px;
   display: block;
   overflow: hidden;
   *zoom: 1;
@@ -11366,6 +11388,9 @@ Module menu
 .typo3-module-menu-snapped .typo3-module-menu-group-container {
   padding-right: 0;
 }
+.typo3-module-menu-snapped .typo3-module-menu-item-link {
+  border-radius: 0;
+}
 .typo3-module-menu-snapped .typo3-module-menu-group-title,
 .typo3-module-menu-snapped .typo3-module-menu-item-title {
   display: none;
index a054334..a81ff2d 100644 (file)
@@ -2148,33 +2148,21 @@ body.x-body-masked .x-window-plain .x-window-mc {
 }
 
 /* Tree frame split bar */
-#typo3-module-menu-xsplit,
 #typo3-navigationContainer-xsplit {
        width: 0;
 }
 
-/* Tree frame split bar fix for Google Chrome 14 in Ext JS 3.4, see #27660 */
-body.ext-chrome #typo3-module-menu-xsplit,
-body.ext-chrome #typo3-navigationContainer-xsplit {
-       width: 5px;
-}
-
 /* Collapse icon */
-#typo3-module-menu-xsplit .x-layout-mini-west,
-#typo3-module-menu-xcollapsed .x-layout-mini-west,
 #typo3-navigationContainer-xsplit .x-layout-mini-west,
 #typo3-navigationContainer-xcollapsed .x-layout-mini-west {
        background-position: center;
        background-repeat: no-repeat;
-       display: none;
        left: 0px;
        padding: 5px 0;
        position: absolute;
 }
 
 /* Only show collapse icon, when user hovers the split bar */
-#typo3-module-menu-xsplit:hover .x-layout-mini-west,
-#typo3-module-menu-xcollapsed:hover .x-layout-mini-west,
 #typo3-navigationContainer-xsplit:hover .x-layout-mini-west,
 #typo3-navigationContainer-xcollapsed:hover .x-layout-mini-west {
        display: block;
@@ -2188,10 +2176,6 @@ body.ext-chrome #typo3-navigationContainer-xsplit {
        width: 10px !important;
 }
 
-#typo3-navigationContainer-xcollapsed:hover .x-layout-mini-west {
-       left: 10px;
-}
-
 /**
  * this is our invisible wrapper around the collapse button,
  * which enables us to have kind of invisible splitbar
index b1972f9..bb747a9 100755 (executable)
Binary files a/typo3/sysext/taskcenter/Resources/Public/Icons/module-taskcenter.png and b/typo3/sysext/taskcenter/Resources/Public/Icons/module-taskcenter.png differ
old mode 100755 (executable)
new mode 100644 (file)
index 29abf81..baa1d52
Binary files a/typo3/sysext/tstemplate/Resources/Public/Icons/module-tstemplate.png and b/typo3/sysext/tstemplate/Resources/Public/Icons/module-tstemplate.png differ
old mode 100644 (file)
new mode 100755 (executable)
index fef155f..4a95feb
Binary files a/typo3/sysext/version/Resources/Public/Icons/module-version.png and b/typo3/sysext/version/Resources/Public/Icons/module-version.png differ
old mode 100755 (executable)
new mode 100644 (file)
index 006e7fe..532fad7
Binary files a/typo3/sysext/viewpage/Resources/Public/Icons/module-viewpage.png and b/typo3/sysext/viewpage/Resources/Public/Icons/module-viewpage.png differ
old mode 100755 (executable)
new mode 100644 (file)
index 5976aa6..759ba94
Binary files a/typo3/sysext/workspaces/Resources/Public/Icons/module-workspaces.png and b/typo3/sysext/workspaces/Resources/Public/Icons/module-workspaces.png differ