diff --git a/README.md b/README.md index f5913e1..2d93739 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,3 @@ -# matomo-theme-google-analytics -A Google Analytics theme for Matomo +# Matomo: Google Analytics Theme + +## Description diff --git a/plugin.json b/plugin.json new file mode 100644 index 0000000..2121965 --- /dev/null +++ b/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" + } + ] +} diff --git a/stylesheets/theme.less b/stylesheets/theme.less new file mode 100644 index 0000000..f96877e --- /dev/null +++ b/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; +}