[TASK] Optimize colors in modulemenu 62/52162/3
authorMarco Christian Krenn <krenn@webconsulting.at>
Sat, 25 Mar 2017 22:13:37 +0000 (23:13 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Sat, 25 Mar 2017 23:31:44 +0000 (00:31 +0100)
changes colors and use the base variables set in the file.
cleanup of pagetree svg icon and add class icon-color.

Resolves: #80023
Releases: master
Change-Id: I6809e7930c118d9e4cc55035f0cf687c02a5958b
Reviewed-on: https://review.typo3.org/52162
Reviewed-by: Frank Nägler <frank.naegler@typo3.org>
Tested-by: Frank Nägler <frank.naegler@typo3.org>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Build/Resources/Public/Less/Scaffold/scaffold.less
typo3/sysext/backend/Resources/Public/Css/backend.css
typo3/sysext/core/Resources/Public/Icons/T3Icons/apps/apps-pagetree-category-collapse-all.svg
typo3/sysext/install/Resources/Public/Css/install.css

index e946f2d..529b7cf 100644 (file)
 @scaffold-topbar-height: 45px;
 @scaffold-topbar-zindex: @zindex-navbar;
 
-@scaffold-topbar-toolbar-bg: #222;
-@scaffold-topbar-toolbar-color: #fff;
+@scaffold-topbar-toolbar-bg: @scaffold-secondary-bg;
+@scaffold-topbar-toolbar-color: @scaffold-secondary-color;
 
-@scaffold-modulemenu-bg: #424242;
-@scaffold-modulemenu-color: #fff;
+@scaffold-modulemenu-bg: lighten(@scaffold-secondary-bg,5);
+@scaffold-modulemenu-color: @scaffold-secondary-color;
 @scaffold-modulemenu-snapped-width: 40px;
 @scaffold-modulemenu-expanded-width: 230px;
 @scaffold-modulemenu-zindex: @zindex-navbar;
 
-@scaffold-toolbar-bg: #424242;
-@scaffold-toolbar-color: #fff;
+@scaffold-toolbar-bg: lighten(@scaffold-secondary-bg,5);
+@scaffold-toolbar-color: @scaffold-secondary-color;
 @scaffold-toolbar-zindex: @zindex-navbar;
 
 @scaffold-content-navigation-width: 300px;
 
-@scaffold-content-toggle-bg: #333;
-@scaffold-content-toggle-color: #fff;
+@scaffold-content-toggle-bg: lighten(@scaffold-secondary-bg,10);
+@scaffold-content-toggle-color: @scaffold-secondary-color;
 
 
 //
index 8b11190..eb52e70 100644 (file)
@@ -7239,8 +7239,8 @@ body {
   left: 0;
 }
 .scaffold-modulemenu {
-  background-color: #424242;
-  color: #fff;
+  background-color: #2c2c2b;
+  color: #f5f5f5;
   position: fixed;
   top: 45px;
   left: 0;
@@ -7251,18 +7251,18 @@ body {
   overflow: hidden;
 }
 .scaffold-modulemenu a {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(245, 245, 245, 0.7);
 }
 .scaffold-modulemenu a:hover {
-  color: #fff;
+  color: #f5f5f5;
 }
 .scaffold-modulemenu .active > a {
-  color: #fff;
+  color: #f5f5f5;
 }
 .scaffold-toolbar {
   overflow: auto;
-  background-color: #424242;
-  color: #fff;
+  background-color: #2c2c2b;
+  color: #f5f5f5;
   z-index: 1000;
   position: fixed;
   top: 45px;
@@ -7273,16 +7273,16 @@ body {
 }
 .scaffold-toolbar .dropdown-menu a,
 .scaffold-toolbar a {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(245, 245, 245, 0.7);
 }
 .scaffold-toolbar .dropdown-menu a:focus,
 .scaffold-toolbar a:focus,
 .scaffold-toolbar .dropdown-menu a:hover,
 .scaffold-toolbar a:hover {
-  color: #fff;
+  color: #f5f5f5;
 }
 .scaffold-toolbar .active > a {
-  color: #fff;
+  color: #f5f5f5;
 }
 @media (min-width: 992px) {
   .scaffold-toolbar {
@@ -7425,19 +7425,19 @@ body {
   top: 0;
   display: inline-block;
   border: 0;
-  background-color: #222;
+  background-color: #1f1f1e;
   height: 45px;
   width: 40px;
 }
 .topbar-button:hover {
-  background-color: #2a2a2a;
+  background-color: #272726;
 }
 .topbar-button.topbar-button-modulemenu {
   left: 0;
 }
 @media (min-width: 992px) {
   .topbar-button.topbar-button-modulemenu {
-    background-color: #424242;
+    background-color: #2c2c2b;
   }
 }
 .topbar-button.topbar-button-navigationcomponent {
@@ -7450,10 +7450,10 @@ body {
   right: 0;
 }
 .scaffold-modulemenu-expanded .topbar-button.topbar-button-modulemenu {
-  background-color: #424242;
+  background-color: #2c2c2b;
 }
 .scaffold-content-navigation-expanded .topbar-button-navigationcomponent {
-  background-color: #424242;
+  background-color: #2c2c2b;
 }
 @media (max-width: 991px) {
   .scaffold-toolbar-expanded .toolbar-item-search {
@@ -7461,7 +7461,7 @@ body {
   }
 }
 .scaffold-toolbar-expanded .topbar-button-toolbar {
-  background-color: #424242;
+  background-color: #2c2c2b;
 }
 @media (max-width: 991px) {
   .scaffold-search-expanded .toolbar-item {
@@ -7473,7 +7473,7 @@ body {
   }
 }
 .scaffold-search-expanded .topbar-button-search {
-  background-color: #424242;
+  background-color: #2c2c2b;
 }
 .topbar-button-toolbar,
 .topbar-button-search {
index 83ed0dd..489d545 100644 (file)
@@ -1 +1,6 @@
-<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>.st0{fill:#666}.st1{fill:#999}</style><path class="st0" d="M7 1h8v2H7zM7 7h8v2H7zM7 13h8v2H7z"/><path class="st1" d="M1 14h1v1H1zM3 14h1v1H3zM3 8h1v1H3zM1 8h1v1H1zM1 6h1v1H1zM1 10h1v1H1zM1 12h1v1H1zM5 8h1v1H5zM5 14h1v1H5zM3 2h1v1H3zM5 2h1v1H5zM1 4h1v1H1zM1 2h1v1H1zM1 0h1v1H1z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <g class="icon-color">
+        <path class="st0" d="M7 1h8v2H7zM7 7h8v2H7zM7 13h8v2H7z"/>
+        <path class="st1" d="M1 14h1v1H1zM3 14h1v1H3zM3 8h1v1H3zM1 8h1v1H1zM1 6h1v1H1zM1 10h1v1H1zM1 12h1v1H1zM5 8h1v1H5zM5 14h1v1H5zM3 2h1v1H3zM5 2h1v1H5zM1 4h1v1H1zM1 2h1v1H1zM1 0h1v1H1z"/>
+    </g>
+</svg>
\ No newline at end of file
index 167218c..732101c 100644 (file)
@@ -7228,8 +7228,8 @@ body {
   left: 0;
 }
 .scaffold-modulemenu {
-  background-color: #424242;
-  color: #fff;
+  background-color: #2c2c2b;
+  color: #f5f5f5;
   position: fixed;
   top: 45px;
   left: 0;
@@ -7240,18 +7240,18 @@ body {
   overflow: hidden;
 }
 .scaffold-modulemenu a {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(245, 245, 245, 0.7);
 }
 .scaffold-modulemenu a:hover {
-  color: #fff;
+  color: #f5f5f5;
 }
 .scaffold-modulemenu .active > a {
-  color: #fff;
+  color: #f5f5f5;
 }
 .scaffold-toolbar {
   overflow: auto;
-  background-color: #424242;
-  color: #fff;
+  background-color: #2c2c2b;
+  color: #f5f5f5;
   z-index: 1000;
   position: fixed;
   top: 45px;
@@ -7262,16 +7262,16 @@ body {
 }
 .scaffold-toolbar .dropdown-menu a,
 .scaffold-toolbar a {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(245, 245, 245, 0.7);
 }
 .scaffold-toolbar .dropdown-menu a:focus,
 .scaffold-toolbar a:focus,
 .scaffold-toolbar .dropdown-menu a:hover,
 .scaffold-toolbar a:hover {
-  color: #fff;
+  color: #f5f5f5;
 }
 .scaffold-toolbar .active > a {
-  color: #fff;
+  color: #f5f5f5;
 }
 @media (min-width: 992px) {
   .scaffold-toolbar {
@@ -7414,19 +7414,19 @@ body {
   top: 0;
   display: inline-block;
   border: 0;
-  background-color: #222;
+  background-color: #1f1f1e;
   height: 45px;
   width: 40px;
 }
 .topbar-button:hover {
-  background-color: #2a2a2a;
+  background-color: #272726;
 }
 .topbar-button.topbar-button-modulemenu {
   left: 0;
 }
 @media (min-width: 992px) {
   .topbar-button.topbar-button-modulemenu {
-    background-color: #424242;
+    background-color: #2c2c2b;
   }
 }
 .topbar-button.topbar-button-navigationcomponent {
@@ -7439,10 +7439,10 @@ body {
   right: 0;
 }
 .scaffold-modulemenu-expanded .topbar-button.topbar-button-modulemenu {
-  background-color: #424242;
+  background-color: #2c2c2b;
 }
 .scaffold-content-navigation-expanded .topbar-button-navigationcomponent {
-  background-color: #424242;
+  background-color: #2c2c2b;
 }
 @media (max-width: 991px) {
   .scaffold-toolbar-expanded .toolbar-item-search {
@@ -7450,7 +7450,7 @@ body {
   }
 }
 .scaffold-toolbar-expanded .topbar-button-toolbar {
-  background-color: #424242;
+  background-color: #2c2c2b;
 }
 @media (max-width: 991px) {
   .scaffold-search-expanded .toolbar-item {
@@ -7462,7 +7462,7 @@ body {
   }
 }
 .scaffold-search-expanded .topbar-button-search {
-  background-color: #424242;
+  background-color: #2c2c2b;
 }
 .topbar-button-toolbar,
 .topbar-button-search {