Setup

README.md

@@ -1,2 +1,3 @@
-# matomo-theme-google-analytics
-A Google Analytics theme for Matomo
+# Matomo: Google Analytics Theme
+
+## Description

plugin.json

@@ -0,0 +1,30 @@
+{
+  "name": "AnalyticsTheme",
+  "description": "Bring Google Analytics Colors to Matomo",
+  "version": "0.1.0",
+  "theme": true,
+  "require": {
+    "piwik": ">=3.7.0,<4.0.0-b1"
+  },
+  "stylesheet": "stylesheets/theme.less",
+  "homepage": "https://ronan-hello.fr",
+  "license": "GPL v3+",
+  "keywords": [
+    "theme",
+    "google",
+    "analytics"
+  ],
+  "support": {
+    "email": "contact@ronan-hello.fr",
+    "issues": "",
+    "forum": "https://forum.matomo.org",
+    "source": ""
+  },
+  "authors": [
+    {
+      "name": "Ronan HELLO",
+      "email": "contact@ronan-hello.fr",
+      "homepage": "https://ronan-hello.fr"
+    }
+  ]
+}

stylesheets/theme.less

@@ -0,0 +1,68 @@
+@theme-color-background-base: #f8f9fa;
+@theme-color-brand: #4285f4;
+@theme-color-header-background: #ffffff;
+@theme-color-header-text: #5f6368;
+
+//MENU
+@theme-color-menu-contrast-text: #727273;
+@theme-color-menu-contrast-textSelected: #1a73e8;
+@theme-color-menu-contrast-textActive: #3c4043;
+@theme-color-menu-contrast-background: transparent;
+
+#root #secondNavBar .navbar {
+  border-top: 1px solid rgba(0, 0, 0, 0.08);;
+}
+
+#root .borderedControl {
+  box-shadow: none;
+  background-color: transparent;
+  transition: .2s ease all;
+
+  &:hover {
+    background-color: rgba(158, 158, 158, 0.2);
+    transition: .2s ease all;
+  }
+}
+
+#root #secondNavBar .navbar > li .item {
+  padding: 10px 21px 10px 19px;
+  border-radius: 0 50em 50em 0;
+  background-color: transparent;
+  transition: .2s ease all;
+
+  &:hover {
+    background-color: #dadce0;
+    transition: .2s ease all;
+  }
+}
+
+@graph-colors-data-series1: #d4291f;
+@graph-colors-data-series2: #1f78b4;
+@graph-colors-data-series4: #33a02c;
+
+
+// can't find the original colors, so I just make them a bit less bright
+.system.notification {
+  &.notification-success {
+    background-color: desaturate(@color-green-piwik, 25%) !important;
+  }
+
+  &.notification-warning {
+    background-color: desaturate(#f57c00, 25%);
+  }
+
+  &.notification-danger,
+  &.notification-error {
+    background-color: desaturate(#e53935, 25%);
+  }
+
+  &.notification-info {
+    background-color: desaturate(#00bcd4, 25%);
+  }
+}
+
+// set back to materialcss default
+[type="radio"]:checked + label:after, [type="radio"].with-gap:checked + label:after {
+  background-color: #26a69a;
+  border-color: #26a69a;
+}