CSS Cleanup

core/AssetManager/UIAssetFetcher/StylesheetUIAssetFetcher.php

@@ -57,7 +57,7 @@ protected function addThemeFiles()
     {
         $themeStylesheet = $this->getTheme()->getStylesheet();
 
-        if($themeStylesheet) {
+        if ($themeStylesheet) {
             $this->fileLocations[] = $themeStylesheet;
         }
     }

core/AssetManager/UIAssetMerger.php

@@ -95,8 +95,9 @@ abstract protected function postEvent(&$mergedContent);
 
     protected function getConcatenatedAssets()
     {
-        if(empty($this->mergedContent))
+        if (empty($this->mergedContent)) {
             $this->concatenateAssets();
+        }
 
         return $this->mergedContent;
     }

core/AssetManager/UIAssetMerger/StylesheetUIAssetMerger.php

@@ -30,15 +30,7 @@ function __construct($mergedAsset, $assetFetcher, $cacheBuster)
 
     protected function getMergedAssets()
     {
-        foreach($this->getAssetCatalog()->getAssets() as $uiAsset) {
-
-            $content = $uiAsset->getContent();
-            if (false !== strpos($content, '@import')) {
-                $this->lessCompiler->addImportDir(dirname($uiAsset->getAbsoluteLocation()));
-            }
-
-        }
-
+        $this->lessCompiler->addImportDir(PIWIK_USER_PATH);
         return $this->lessCompiler->compile($this->getConcatenatedAssets());
     }
 
@@ -87,46 +79,74 @@ public function getFileSeparator()
 
     protected function processFileContent($uiAsset)
     {
-        return $this->rewriteCssPathsDirectives($uiAsset);
+        $pathsRewriter = $this->getCssPathsRewriter($uiAsset); 
+        $content = $uiAsset->getContent();
+        $content = $this->rewriteCssImagePaths($content, $pathsRewriter);
+        $content = $this->rewriteCssImportPaths($content, $pathsRewriter);
+        return $content;
     }
 
     /**
-     * Rewrite css url directives
+     * Rewrite CSS url() directives
+     *
+     * @param string $content
+     * @param function $pathsRewriter
+     * @return string
+     */
+    private function rewriteCssImagePaths($content, $pathsRewriter)
+    {
+        $content = preg_replace_callback( "/(url\(['\"]?)([^'\")]*)/", $pathsRewriter, $content );
+        return $content;
+    }
+
+    /**
+     * Rewrite CSS import directives
+     *
+     * @param string $content
+     * @param function $pathsRewriter
+     * @return string
+     */
+    private function rewriteCssImportPaths($content, $pathsRewriter)
+    {
+        $content = preg_replace_callback( "/(@import \")([^\")]*)/", $pathsRewriter, $content );
+        return $content;
+    }
+
+    /**
+     * Rewrite CSS url directives
      * - rewrites paths defined relatively to their css/less definition file
      * - rewrite windows directory separator \\ to /
      *
-     * @param UIAsset $uiAsset
-     * @return string
+     * @param rootDirectoryLength $rootDirectoryLength
+     * @param baseDirectory $baseDirectory
+     * @return function
      */
-    private function rewriteCssPathsDirectives($uiAsset)
+    private function getCssPathsRewriter($uiAsset)
     {
         static $rootDirectoryLength = null;
         if (is_null($rootDirectoryLength)) {
             $rootDirectoryLength = self::countDirectoriesInPathToRoot($uiAsset);
         }
-
         $baseDirectory = dirname($uiAsset->getRelativeLocation());
-        $content = preg_replace_callback(
-            "/(url\(['\"]?)([^'\")]*)/",
-            function ($matches) use ($rootDirectoryLength, $baseDirectory) {
 
-                $absolutePath = realpath(PIWIK_USER_PATH . "/$baseDirectory/" . $matches[2]);
-
-                if($absolutePath) {
-
-                    $relativePath = substr($absolutePath, $rootDirectoryLength);
-
-                    $relativePath = str_replace('\\', '/', $relativePath);
-
-                    return $matches[1] . $relativePath;
-
-                } else {
-                    return $matches[1] . $matches[2];
-                }
-            },
-            $uiAsset->getContent()
-        );
-        return $content;
+        return function ($matches) use ($rootDirectoryLength, $baseDirectory) {
+            $publicPath = $matches[1] . $matches[2];
+            $absolutePath = PIWIK_USER_PATH . "/$baseDirectory/" . $matches[2];
+
+            // Allow to import extension less file
+            if (strpos($matches[2], '.') === false) {
+                $absolutePath .= '.less';
+            }
+
+            // Prevent from rewriting full path
+            $absolutePath = realpath($absolutePath);
+            if ($absolutePath) {
+                $relativePath = substr($absolutePath, $rootDirectoryLength);
+                $relativePath = str_replace('\\', '/', $relativePath);
+                $publicPath = $matches[1] . $relativePath;
+            }
+            return $publicPath;
+        };
     }
 
     /**

plugins/Annotations/stylesheets/annotations.less

@@ -55,7 +55,7 @@ body > .widget .evolution-annotations > span {
     font-style: italic;
     margin-bottom: 8px;
     vertical-align: top;
-    color: #666;
+    color: @theme-color-text-lighter;
 }
 
 .annotation-controls {
@@ -66,7 +66,7 @@ body > .widget .evolution-annotations > span {
 .annotation-controls>a {
     font-size: 11px;
     font-style: italic;
-    color: #666;
+    color: @theme-color-text-lighter;
     cursor: pointer;
     padding: 3px 0 6px 0;
     display: inline-block;
@@ -88,7 +88,7 @@ body > .widget .evolution-annotations > span {
     display: inline-block;
     font-size: 12px;
     font-style: italic;
-    color: #666;
+    color: @theme-color-text-lighter;
     vertical-align: top;
     margin: 0 0 8px 8px;
 }
@@ -97,7 +97,7 @@ body > .widget .evolution-annotations > span {
     display: block;
 
     font-style: italic;
-    color: #666;
+    color: @theme-color-text-lighter;
     margin: 0 0 12px 140px;
 }
 
@@ -111,7 +111,7 @@ body > .widget .evolution-annotations > span {
 .annotation-user {
     font-style: italic;
     font-size: 11px;
-    color: #444;
+    color: @theme-color-text-light;
 }
 
 .annotation-user-cell {
@@ -172,7 +172,7 @@ body > .widget .evolution-annotations > span {
 
 .edit-annotation {
     font-size: 10px;
-    color: #666;
+    color: @theme-color-text-lighter;
     font-style: italic;
 }
 
@@ -196,7 +196,7 @@ body > .widget .evolution-annotations > span {
 .annotation-period-edit {
     display: inline-block;
     background: white;
-    color: #444;
+    color: @theme-color-text-light;
     font-size: 12px;
     border: 1px solid #e4e5e4;
     padding: 5px 5px 6px 3px;

plugins/CoreAdminHome/stylesheets/generalSettings.less

@@ -19,7 +19,6 @@
 
 table.admin {
     font-size: 0.9em;
-    font-family: Arial, Helvetica, verdana sans-serif;
     background-color: #fff;
     border-collapse: collapse;
 }
@@ -139,7 +138,7 @@ table.admin  tbody td:hover, table.admin  tbody th:hover {
 
 /* other styles */
 .form-description {
-    color: #666666;
+    color: @theme-color-text-lighter;
     font-style: italic;
     margin-left: 10px;
 }

plugins/CoreHome/angularjs/siteselector/siteselector.less

@@ -70,7 +70,7 @@
   right: 0;
   font-size: 0.8em;
   margin-top: 0.2em;
-  color: #444;
+  color: @theme-color-text-light;
 }
 
 .sites_autocomplete--dropdown .custom_select_main_link {

plugins/CoreHome/stylesheets/_donate.less

@@ -112,7 +112,7 @@
 .donate-form-instructions {
     font-size: .8em;
     margin: 0 1.25em 0 1.25em;
-    color: #666;
+    color: @theme-color-text-lighter;
     font-style: italic;
 }
 

plugins/CoreHome/stylesheets/coreHome.less

@@ -148,11 +148,6 @@ div.pk-emptyGraph {
  * Popover
  * @see popover.js
  */
-
-#Piwik_Popover {
-    font-family: Arial, Helvetica, sans-serif;
-}
-
 .Piwik_Popover_Loading_Name {
     padding: 50px 0 65px 0;
     font-size: 16px;

plugins/CoreHome/stylesheets/dataTable/_dataTable.less

@@ -87,7 +87,7 @@ table.dataTable td,
 table.dataTable td a {
   margin: 0;
   text-decoration: none;
-  color: #444;
+  color: @theme-color-text-light;
 }
 
 table.dataTable tr:hover > td,

plugins/CoreHome/stylesheets/dataTable/_reportDocumentation.less

@@ -4,7 +4,7 @@ table.dataTable th .columnDocumentation {
   width: 165px;
   text-align: left;
   background: #f7f7f7;
-  color: #444;
+  color: @theme-color-text-light;
   font-size: 11px;
   font-weight: normal;
   border: 1px solid #e4e5e4;
@@ -38,7 +38,7 @@ table.dataTable th .columnDocumentationTitle {
 .reportDocumentation p {
   padding: 5px 10px 6px 10px;
   margin: 0;
-  color: #444;
+  color: @theme-color-text-light;
   font-size: 12px;
 }
 

plugins/CoreHome/stylesheets/dataTable/_tableConfiguration.less

@@ -70,7 +70,7 @@ a.tableConfigurationIcon.highlighted {
   cursor: pointer;
   padding: 5px 10px;
   line-height: 15px;
-  color: #444;
+  color: @theme-color-text-light;
 }
 
 .tableConfiguration div.configItem:hover {

plugins/CoreHome/stylesheets/jqplotColors.less

@@ -44,7 +44,7 @@
 }
 
 .evolution-graph-colors[data-name=single-metric-label] {
-    color: #666;
+    color: @theme-color-text-lighter;
 }
 
 // bar graph colors
@@ -93,7 +93,7 @@
 }
 
 .bar-graph-colors[data-name=single-metric-label] {
-    color: #666;
+    color: @theme-color-text-lighter;
 }
 
 // pie graph colors
@@ -146,5 +146,5 @@
 }
 
 .pie-graph-colors[data-name=single-metric-label] {
-    color: #666;
+    color: @theme-color-text-lighter;
 }

plugins/CoreHome/stylesheets/menu.less

@@ -27,7 +27,7 @@
 }
 
 .Menu--dashboard > .Menu-tabList a {
-    color: #444;
+    color: @theme-color-text-light;
     font-size: 18px;
     display: block;
     float: left;
@@ -85,7 +85,7 @@
     display: inline-block;
     height: auto;
     background: none;
-    color: #444;
+    color: @theme-color-text-light;
     text-decoration: none;
 }
 

plugins/CoreHome/stylesheets/promo.less

@@ -63,7 +63,7 @@
     font-size: .8em;
     font-style: italic;
     margin: 1em 0 0 1.25em;
-    color: #666;
+    color: @theme-color-text-lighter;
     display: inline-block;
 }
 

plugins/CorePluginsAdmin/stylesheets/marketplace.less

@@ -33,7 +33,7 @@
 }
 
 .admin .pluginsFilter {
-  color: #666;
+  color: @theme-color-text-lighter;
   .active {
     font-weight: bold;
   }
@@ -239,7 +239,6 @@
 .pluginDetails {
   font-size: 13px;
   text-align: left;
-  font-family: Arial, Helvetica, sans-serif;
   line-height: 20px;
 
   h3, h4, h5, h6 {
@@ -271,7 +270,6 @@
   }
 
   p, .ui-tabs-panel ul, .ui-tabs-panel li {
-    font-family: Arial, Helvetica, sans-serif;
     text-align: left;
     line-height: 20px;
   }

plugins/Dashboard/stylesheets/dashboard.less

@@ -148,10 +148,9 @@
   display: none;
   width: 630px;
   background: #fff;
-  color: #444;
+  color: @theme-color-text-light;
   cursor: default;
   font-size: 12px !important;
-  font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
   border-radius: 4px;
   padding: 20px 10px;
   border-radius: 4px;
@@ -233,7 +232,7 @@
   border: 1px solid #e4e5e4;
   padding: 5px 10px 6px 10px;
   border-radius: 4px;
-  color: #444;
+  color: @theme-color-text-light;
   font-size: 14px;
   cursor: pointer;
   overflow: hidden;
@@ -436,7 +435,7 @@ div.widgetpreview-preview {
 .dashboardSettings .submenu ul li {
   line-height: 20px;
   padding: 0 25px 0 5px;
-  color: #444;
+  color: @theme-color-text-light;
 }
 
 .dashboardSettings .submenu ul li:hover {