diff options
| author | Fabian Dellwing <f.dellwing@netfutura.de> | 2019-04-11 23:39:20 +0300 |
|---|---|---|
| committer | Thomas Steur <tsteur@users.noreply.github.com> | 2019-04-11 23:39:20 +0300 |
| commit | 7a7f529b9dbfec8b7a822c2e25fde011ba619a69 (patch) | |
| tree | 2722078b9f387b51adc15f7d799b00fec9616dd4 | |
| parent | 4566c443ce1866cd2d65fd076940c923f52b4696 (diff) | |
use stylelint to normalize default stylesheets (#14152)
34 files changed, 1705 insertions, 1362 deletions
diff --git a/plugins/Morpheus/stylesheets/base.less b/plugins/Morpheus/stylesheets/base.less index dd2d72526e..65663b34c6 100644 --- a/plugins/Morpheus/stylesheets/base.less +++ b/plugins/Morpheus/stylesheets/base.less @@ -5,34 +5,24 @@ /* General styles */ @import "general/_default.less"; - @import "general/_utils.less"; - @import "general/_form.less"; - @import "general/_jqueryUI.less"; - @import "general/_misc.less"; /* Component styles */ @import "uibase/_header.less"; - @import "uibase/_headerMessage.less"; - @import "../../CoreHome/angularjs/siteselector/siteselector.directive.less"; @import "../../CoreHome/angularjs/menudropdown/menudropdown.directive.less"; @import "../../CoreHome/angularjs/alert/alert.directive.less"; @import "../../CoreHome/stylesheets/dataTable/_entityTable.less"; - @import "uibase/_periodSelect.less"; - @import "uibase/_languageSelect.less"; - @import "uibase/_loading.less"; /* Remote components */ @import "../../CoreHome/stylesheets/_donate.less"; - @import "ui/_buttons"; @import "ui/_code"; @import "ui/_tables"; diff --git a/plugins/Morpheus/stylesheets/base/bootstrap.css b/plugins/Morpheus/stylesheets/base/bootstrap.css index b72d3f7555..769b26dc31 100644 --- a/plugins/Morpheus/stylesheets/base/bootstrap.css +++ b/plugins/Morpheus/stylesheets/base/bootstrap.css @@ -10,15 +10,18 @@ * * Contains only the grid CSS classes. */ + /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } + body { margin: 0; } + article, aside, details, @@ -34,6 +37,7 @@ section, summary { display: block; } + audio, canvas, progress, @@ -41,28 +45,35 @@ video { display: inline-block; vertical-align: baseline; } + audio:not([controls]) { display: none; height: 0; } + [hidden], template { display: none; } + a { background-color: transparent; } + a:active, a:hover { outline: 0; } + abbr[title] { border-bottom: 1px dotted; } + b, strong { font-weight: bold; } + dfn { font-style: italic; } @@ -71,9 +82,11 @@ mark { background: #ff0; color: #000; } + small { font-size: 80%; } + sub, sup { font-size: 75%; @@ -81,30 +94,38 @@ sup { position: relative; vertical-align: baseline; } + sup { top: -0.5em; } + sub { bottom: -0.25em; } + img { border: 0; } + svg:not(:root) { overflow: hidden; } + figure { margin: 1em 40px; } + hr { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; - box-sizing: content-box; + box-sizing: content-box; height: 0; } + pre { overflow: auto; } + code, kbd, pre, @@ -112,82 +133,100 @@ samp { font-family: monospace, monospace; font-size: 1em; } + fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } + legend { border: 0; padding: 0; } + textarea { overflow: auto; } + optgroup { font-weight: bold; } + table { border-collapse: collapse; border-spacing: 0; } + td, th { padding: 0; } + * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -*:before, -*:after { + +*::before, +*::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } + html { font-size: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } + body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; - color: #333333; - background-color: #ffffff; + color: #333; + background-color: #fff; } + a { text-decoration: none; } + a:hover, a:focus { text-decoration: underline; } + a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } + figure { margin: 0; } + img { vertical-align: middle; } + .img-responsive { display: block; max-width: 100%; height: auto; } + .img-rounded { border-radius: 6px; } + .img-thumbnail { padding: 4px; line-height: 1.42857143; - background-color: #ffffff; - border: 1px solid #dddddd; + background-color: #fff; + border: 1px solid #ddd; border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; @@ -196,15 +235,18 @@ img { max-width: 100%; height: auto; } + .img-circle { border-radius: 50%; } + hr { margin-top: 20px; margin-bottom: 20px; border: 0; - border-top: 1px solid #eeeeee; + border-top: 1px solid #eee; } + .sr-only { position: absolute; width: 1px; @@ -215,6 +257,7 @@ hr { clip: rect(0, 0, 0, 0); border: 0; } + .sr-only-focusable:active, .sr-only-focusable:focus { position: static; @@ -224,64 +267,77 @@ hr { overflow: visible; clip: auto; } + .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } + @media (min-width: 768px) { .container { width: 750px; } } + @media (min-width: 992px) { .container { width: 970px; } } + @media (min-width: 1200px) { .container { width: 1170px; } } + .container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } -.clearfix:before, -.clearfix:after, -.container:before, -.container:after, -.container-fluid:before, -.container-fluid:after, -.clearfix:after, -.container:after, -.container-fluid:after { + +.clearfix::before, +.clearfix::after, +.container::before, +.container::after, +.container-fluid::before, +.container-fluid::after, +.clearfix::after, +.container::after, +.container-fluid::after { clear: both; } + .center-block { display: block; margin-left: auto; margin-right: auto; } + .pull-right { float: right !important; } + .pull-left { float: left !important; } + .hide { display: none !important; } + .show { display: block !important; } + .invisible { visibility: hidden; } + .text-hide { font: 0/0 a; color: transparent; @@ -289,10 +345,12 @@ hr { background-color: transparent; border: 0; } + .hidden { display: none !important; visibility: hidden !important; } + .affix { position: fixed; } diff --git a/plugins/Morpheus/stylesheets/base/colors.less b/plugins/Morpheus/stylesheets/base/colors.less index e026fd71d1..8c82888f03 100644 --- a/plugins/Morpheus/stylesheets/base/colors.less +++ b/plugins/Morpheus/stylesheets/base/colors.less @@ -41,6 +41,7 @@ @graph-colors-data-series8: #cab2d6; @default-box-shade: 0 2px 3px 0 rgba(0,0,0,0.16), 0 0px 3px 0 rgba(0,0,0,0.12); + /* Qualitative data color series inspired from colorbrewer2.org/ next ones could be: #cab2d6 #ffff99 # #b2df8a diff --git a/plugins/Morpheus/stylesheets/base/icons.css b/plugins/Morpheus/stylesheets/base/icons.css index ecadd5a6c0..5227e8720f 100644 --- a/plugins/Morpheus/stylesheets/base/icons.css +++ b/plugins/Morpheus/stylesheets/base/icons.css @@ -1,507 +1,511 @@ /* piwik font is deprecated, please use matomo instead */ + /* @todo remove piwik font in Matomo 4.0 */ @font-face { - font-family: 'piwik'; - src: url('plugins/Morpheus/fonts/piwik.woff2?gnoj5m') format('woff2'), - url('plugins/Morpheus/fonts/piwik.woff?gnoj5m') format('woff'), - url('plugins/Morpheus/fonts/piwik.ttf?gnoj5m') format('truetype'), - url('plugins/Morpheus/fonts/piwik.svg?gnoj5m#piwik') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'piwik'; + src: + url('plugins/Morpheus/fonts/piwik.woff2?gnoj5m') format('woff2'), + url('plugins/Morpheus/fonts/piwik.woff?gnoj5m') format('woff'), + url('plugins/Morpheus/fonts/piwik.ttf?gnoj5m') format('truetype'), + url('plugins/Morpheus/fonts/piwik.svg?gnoj5m#piwik') format('svg'); + font-weight: normal; + font-style: normal; } @font-face { - font-family: 'matomo'; - src: url('plugins/Morpheus/fonts/matomo.woff2?gnoj5m') format('woff2'), - url('plugins/Morpheus/fonts/matomo.woff?gnoj5m') format('woff'), - url('plugins/Morpheus/fonts/matomo.ttf?gnoj5m') format('truetype'), - url('plugins/Morpheus/fonts/matomo.svg?gnoj5m#matomo') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'matomo'; + src: + url('plugins/Morpheus/fonts/matomo.woff2?gnoj5m') format('woff2'), + url('plugins/Morpheus/fonts/matomo.woff?gnoj5m') format('woff'), + url('plugins/Morpheus/fonts/matomo.ttf?gnoj5m') format('truetype'), + url('plugins/Morpheus/fonts/matomo.svg?gnoj5m#matomo') format('svg'); + font-weight: normal; + font-style: normal; } -[class^="icon-"], [class*=" icon-"] { - font-family: 'matomo' !important; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; +[class^="icon-"], + [class*=" icon-"] { + font-family: 'matomo' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -.icon-settings:before { - content: "\e8b8"; +.icon-settings::before { + content: "\e8b8"; } -.icon-info2:before { - content: "\e88e"; +.icon-info2::before { + content: "\e88e"; } -.icon-info_outline:before { - content: "\e88f"; +.icon-info_outline::before { + content: "\e88f"; } -.icon-alien:before { - content: "\e600"; +.icon-alien::before { + content: "\e600"; } -.icon-annotation:before { - content: "\e601"; +.icon-annotation::before { + content: "\e601"; } -.icon-arrow-left:before { - content: "\e602"; +.icon-arrow-left::before { + content: "\e602"; } -.icon-arrow-right:before { - content: "\e603"; +.icon-arrow-right::before { + content: "\e603"; } -.icon-business:before { - content: "\e604"; +.icon-business::before { + content: "\e604"; } -.icon-calendar:before { - content: "\e605"; +.icon-calendar::before { + content: "\e605"; } -.icon-chart-bar:before { - content: "\e606"; +.icon-chart-bar::before { + content: "\e606"; } -.icon-chart-line-details:before { - content: "\e607"; +.icon-chart-line-details::before { + content: "\e607"; } -.icon-chart-line:before { - content: "\e608"; +.icon-chart-line::before { + content: "\e608"; } -.icon-chart-pie:before { - content: "\e609"; +.icon-chart-pie::before { + content: "\e609"; } -.icon-close:before { - content: "\e60a"; +.icon-close::before { + content: "\e60a"; } -.icon-arrow-collapsed:before { - content: "\e60b"; +.icon-arrow-collapsed::before { + content: "\e60b"; } -.icon-configure:before { - content: "\e60c"; +.icon-configure::before { + content: "\e60c"; } -.icon-datepicker-arr-l:before { - content: "\e60d"; +.icon-datepicker-arr-l::before { + content: "\e60d"; } -.icon-datepicker-arr-r:before { - content: "\e60e"; +.icon-datepicker-arr-r::before { + content: "\e60e"; } -.icon-delete:before { - content: "\e60f"; +.icon-delete::before { + content: "\e60f"; } -.icon-document:before { - content: "\e610"; +.icon-document::before { + content: "\e610"; } -.icon-download:before { - content: "\e611"; +.icon-download::before { + content: "\e611"; } -.icon-drop:before { - content: "\e612"; +.icon-drop::before { + content: "\e612"; } -.icon-ecommerce-abandoned-cart:before { - content: "\e613"; +.icon-ecommerce-abandoned-cart::before { + content: "\e613"; } -.icon-ecommerce-order:before { - content: "\e614"; +.icon-ecommerce-order::before { + content: "\e614"; } -.icon-email:before { - content: "\e615"; +.icon-email::before { + content: "\e615"; } -.icon-error:before { - content: "\e616"; +.icon-error::before { + content: "\e616"; } -.icon-export:before { - content: "\e617"; +.icon-export::before { + content: "\e617"; } -.icon-feed:before { - content: "\e618"; +.icon-feed::before { + content: "\e618"; } -.icon-finance:before { - content: "\e619"; +.icon-finance::before { + content: "\e619"; } -.icon-folder-charts:before { - content: "\e61a"; +.icon-folder-charts::before { + content: "\e61a"; } -.icon-folder:before { - content: "\e61b"; +.icon-folder::before { + content: "\e61b"; } -.icon-fullscreen:before { - content: "\e61c"; +.icon-fullscreen::before { + content: "\e61c"; } -.icon-goal:before { - content: "\e61d"; +.icon-goal::before { + content: "\e61d"; } -.icon-help-alt:before { - content: "\e61e"; +.icon-help-alt::before { + content: "\e61e"; } -.icon-help:before { - content: "\e61f"; +.icon-help::before { + content: "\e61f"; } -.icon-code:before { - content: "\e620"; +.icon-code::before { + content: "\e620"; } -.icon-warning:before { - content: "\e621"; +.icon-warning::before { + content: "\e621"; } -.icon-edit:before { - content: "\e622"; +.icon-edit::before { + content: "\e622"; } -.icon-image:before { - content: "\e623"; +.icon-image::before { + content: "\e623"; } -.icon-info:before { - content: "\e624"; +.icon-info::before { + content: "\e624"; } -.icon-insights:before { - content: "\e625"; +.icon-insights::before { + content: "\e625"; } -.icon-locked-2:before { - content: "\e626"; +.icon-locked-2::before { + content: "\e626"; } -.icon-locked-3:before { - content: "\e627"; +.icon-locked-3::before { + content: "\e627"; } -.icon-locked:before { - content: "\e628"; +.icon-locked::before { + content: "\e628"; } -.icon-locked-4:before { - content: "\e629"; +.icon-locked-4::before { + content: "\e629"; } -.icon-maximise:before { - content: "\e62a"; +.icon-maximise::before { + content: "\e62a"; } -.icon-minimise:before { - content: "\e62b"; +.icon-minimise::before { + content: "\e62b"; } -.icon-minus:before { - content: "\e62c"; +.icon-minus::before { + content: "\e62c"; } -.icon-newtab:before { - content: "\e62d"; +.icon-newtab::before { + content: "\e62d"; } -.icon-ok:before { - content: "\e62e"; +.icon-ok::before { + content: "\e62e"; } -.icon-open-source:before { - content: "\e62f"; +.icon-open-source::before { + content: "\e62f"; } -.icon-plus:before { - content: "\e630"; +.icon-plus::before { + content: "\e630"; } -.icon-add:before { - content: "\e630"; +.icon-add::before { + content: "\e630"; } -.icon-puzzle:before { - content: "\e631"; +.icon-puzzle::before { + content: "\e631"; } -.icon-refresh:before { - content: "\e632"; +.icon-refresh::before { + content: "\e632"; } -.icon-reload:before { - content: "\e633"; +.icon-reload::before { + content: "\e633"; } -.icon-search:before { - content: "\e634"; +.icon-search::before { + content: "\e634"; } -.icon-segment:before { - content: "\e635"; +.icon-segment::before { + content: "\e635"; } -.icon-users:before { - content: "\e635"; +.icon-users::before { + content: "\e635"; } -.icon-server-alt:before { - content: "\e636"; +.icon-server-alt::before { + content: "\e636"; } -.icon-server:before { - content: "\e637"; +.icon-server::before { + content: "\e637"; } -.icon-hide:before { - content: "\e638"; +.icon-hide::before { + content: "\e638"; } -.icon-show:before { - content: "\e639"; +.icon-show::before { + content: "\e639"; } -.icon-arrow-top:before { - content: "\e63a"; +.icon-arrow-top::before { + content: "\e63a"; } -.icon-arrow-bottom:before { - content: "\e63b"; +.icon-arrow-bottom::before { + content: "\e63b"; } -.icon-star:before { - content: "\e63c"; +.icon-star::before { + content: "\e63c"; } -.icon-success:before { - content: "\e63d"; +.icon-success::before { + content: "\e63d"; } -.icon-table-more:before { - content: "\e63e"; +.icon-table-more::before { + content: "\e63e"; } -.icon-table:before { - content: "\e63f"; +.icon-table::before { + content: "\e63f"; } -.icon-tag-cloud:before { - content: "\e640"; +.icon-tag-cloud::before { + content: "\e640"; } -.icon-user-add:before { - content: "\e642"; +.icon-user-add::before { + content: "\e642"; } -.icon-user:before { - content: "\e641"; +.icon-user::before { + content: "\e641"; } -.icon-play:before { - content: "\e038"; +.icon-play::before { + content: "\e038"; } -.icon-visitor-profile:before { - content: "\e644"; +.icon-visitor-profile::before { + content: "\e644"; } -.icon-zoom-in:before { - content: "\e645"; +.icon-zoom-in::before { + content: "\e645"; } -.icon-zoom-out:before { - content: "\e646"; +.icon-zoom-out::before { + content: "\e646"; } -.icon-sign-out:before { - content: "\e647"; +.icon-sign-out::before { + content: "\e647"; } -.icon-sign-in:before { - content: "\e648"; +.icon-sign-in::before { + content: "\e648"; } -.icon-menu-hamburger:before { - content: "\e649"; +.icon-menu-hamburger::before { + content: "\e649"; } -.icon-more-horiz:before { - content: "\e64a"; +.icon-more-horiz::before { + content: "\e64a"; } -.icon-more-verti:before { - content: "\e64b"; +.icon-more-verti::before { + content: "\e64b"; } -.icon-admin-administration:before { - content: "\e64c"; +.icon-admin-administration::before { + content: "\e64c"; } -.icon-admin-development:before { - content: "\e64d"; +.icon-admin-development::before { + content: "\e64d"; } -.icon-admin-diagnostic:before { - content: "\e64e"; +.icon-admin-diagnostic::before { + content: "\e64e"; } -.icon-admin-platform:before { - content: "\e64f"; +.icon-admin-platform::before { + content: "\e64f"; } -.icon-admin-settings:before { - content: "\e650"; +.icon-admin-settings::before { + content: "\e650"; } -.icon-reporting-actions:before { - content: "\e651"; +.icon-reporting-actions::before { + content: "\e651"; } -.icon-reporting-dashboard:before { - content: "\e652"; +.icon-reporting-dashboard::before { + content: "\e652"; } -.icon-reporting-ecommerce:before { - content: "\e653"; +.icon-reporting-ecommerce::before { + content: "\e653"; } -.icon-reporting-goal:before { - content: "\e654"; +.icon-reporting-goal::before { + content: "\e654"; } -.icon-reporting-referer:before { - content: "\e655"; +.icon-reporting-referer::before { + content: "\e655"; } -.icon-reporting-visitors:before { - content: "\e656"; +.icon-reporting-visitors::before { + content: "\e656"; } -.icon-user-manage:before { - content: "\e657"; +.icon-user-manage::before { + content: "\e657"; } -.icon-user-personal:before { - content: "\e658"; +.icon-user-personal::before { + content: "\e658"; } -.icon-user-platform:before { - content: "\e659"; +.icon-user-platform::before { + content: "\e659"; } -.icon-funnel:before { - content: "\ea5b"; +.icon-funnel::before { + content: "\ea5b"; } -.icon-form:before { - content: "\e85d"; +.icon-form::before { + content: "\e85d"; } -.icon-lab:before { - content: "\e9aa"; +.icon-lab::before { + content: "\e9aa"; } -.icon-archive:before { - content: "\e95e"; +.icon-archive::before { + content: "\e95e"; } -.icon-fast-forward:before { - content: "\e01f"; +.icon-fast-forward::before { + content: "\e01f"; } -.icon-fast-rewind:before { - content: "\e020"; +.icon-fast-rewind::before { + content: "\e020"; } -.icon-pause:before { - content: "\e035"; +.icon-pause::before { + content: "\e035"; } -.icon-replay:before { - content: "\e042"; +.icon-replay::before { + content: "\e042"; } -.icon-skip-next:before { - content: "\e044"; +.icon-skip-next::before { + content: "\e044"; } -.icon-skip-previous:before { - content: "\e045"; +.icon-skip-previous::before { + content: "\e045"; } -.icon-stop:before { - content: "\e047"; +.icon-stop::before { + content: "\e047"; } -.icon-arrowup:before { - content: "\f102"; +.icon-arrowup::before { + content: "\f102"; } -.icon-arrowdown:before { - content: "\f103"; +.icon-arrowdown::before { + content: "\f103"; } -.icon-audio:before { - content: "\e050"; +.icon-audio::before { + content: "\e050"; } -.icon-transition:before { - content: "\ea30"; +.icon-transition::before { + content: "\ea30"; } -.icon-evolution:before { - content: "\e922"; +.icon-evolution::before { + content: "\e922"; } -.icon-overlay:before { - content: "\e0cb"; +.icon-overlay::before { + content: "\e0cb"; } -.icon-rocket:before { - content: "\e9a5"; +.icon-rocket::before { + content: "\e9a5"; } -.icon-bug:before { - content: "\e868"; +.icon-bug::before { + content: "\e868"; } -.icon-upload:before { - content: "\e2c6"; +.icon-upload::before { + content: "\e2c6"; } -.icon-embed:before { - content: "\ea80"; +.icon-embed::before { + content: "\ea80"; } .icon-delete:hover { - color: #d4291f !important; + color: #d4291f !important; } -.icon-segmented-visits-log:before { - content: "\e900"; +.icon-segmented-visits-log::before { + content: "\e900"; } diff --git a/plugins/Morpheus/stylesheets/base/mixins.less b/plugins/Morpheus/stylesheets/base/mixins.less index 3795b90ce3..9c6a802239 100644 --- a/plugins/Morpheus/stylesheets/base/mixins.less +++ b/plugins/Morpheus/stylesheets/base/mixins.less @@ -1,18 +1,20 @@ .clearfix { *zoom: 1; - &:after { + + &::after { content: ""; display: table; clear: right; } - &:before { + + &::before { content: ""; display: table; } } strong { - font-weight: 700 !important; + font-weight: 700 !important; } .font-default(@size: 13px, @line: 16px) { @@ -21,42 +23,40 @@ strong { } .border-radius (@radius: 6px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; - - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; } #gradient { - .horizontal(@start-color: #555, @end-color: #333, @start-percent: 0%, @end-percent: 100%) { background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+ background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ - background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 + background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start-color,@end-color)); // IE9 and down + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)", @start-color, @end-color)); // IE9 and down } .vertical(@start-color: #555, @end-color: #333, @start-percent: 0%, @end-percent: 100%) { background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+ - background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ + background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start-color,@end-color)); // IE9 and down + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", @start-color, @end-color)); // IE9 and down } } .box-sizing(@boxmodel) { -webkit-box-sizing: @boxmodel; - -moz-box-sizing: @boxmodel; - box-sizing: @boxmodel; + -moz-box-sizing: @boxmodel; + box-sizing: @boxmodel; } .opacity(@opacity) { opacity: @opacity; -}
\ No newline at end of file +} diff --git a/plugins/Morpheus/stylesheets/general/_admin.less b/plugins/Morpheus/stylesheets/general/_admin.less index 6f9f1c26d6..75d1f74453 100644 --- a/plugins/Morpheus/stylesheets/general/_admin.less +++ b/plugins/Morpheus/stylesheets/general/_admin.less @@ -1,20 +1,21 @@ .ui-state-highlight { - border-color: @color-silver-l80 !important; - background: @color-silver-l95 !important; - .ui-icon { - background-image: url('plugins/Morpheus/images/info.png'); - background-position: 0 0; - } + border-color: @color-silver-l80 !important; + background: @color-silver-l95 !important; + + .ui-icon { + background-image: url('plugins/Morpheus/images/info.png'); + background-position: 0 0; + } } -.sites_autocomplete { - vertical-align: middle; +.sites_autocomplete { + vertical-align: middle; } .addRowSite, .addrow { - cursor: pointer; + cursor: pointer; } .addrow:hover { @@ -22,18 +23,19 @@ } .addrow { - margin-top: 16px; + margin-top: 16px; } .addRowSite { - display: inline-block; - margin: 5px 0; - text-decoration: none !important; - &:before { - content: url(plugins/Morpheus/images/add.png) !important; - } - - &:hover { - text-decoration: underline !important; - } + display: inline-block; + margin: 5px 0; + text-decoration: none !important; + + &::before { + content: url(plugins/Morpheus/images/add.png) !important; + } + + &:hover { + text-decoration: underline !important; + } } diff --git a/plugins/Morpheus/stylesheets/general/_default.less b/plugins/Morpheus/stylesheets/general/_default.less index cfbd8ec0af..1d7020632c 100644 --- a/plugins/Morpheus/stylesheets/general/_default.less +++ b/plugins/Morpheus/stylesheets/general/_default.less @@ -1,70 +1,133 @@ /* reset style */ -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-size: 100%; - vertical-align: baseline; - background: transparent; +html, + body, + div, + span, + applet, + object, + iframe, + h1, + h2, + h3, + h4, + h5, + h6, + p, + blockquote, + pre, + a, + abbr, + acronym, + address, + big, + cite, + code, + del, + dfn, + em, + font, + img, + ins, + kbd, + q, + s, + samp, + small, + strike, + strong, + sub, + sup, + tt, + var, + b, + u, + i, + center, + dl, + dt, + dd, + ol, + ul, + li, + fieldset, + form, + label, + legend, + table, + caption, + tbody, + tfoot, + thead, + tr, + th, + td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; } abbr { - border-bottom: 1px dotted; - text-decoration: none; + border-bottom: 1px dotted; + text-decoration: none; } form { - margin: 0; + margin: 0; } body { - line-height: 1.33; - background-color: white; - color: #333; + line-height: 1.33; + background-color: white; + color: #333; } -ol, ul { - list-style: none; +ol, + ul { + list-style: none; } -blockquote, q { - quotes: none; +blockquote, + q { + quotes: none; } /* remember to define focus styles! */ :focus { - outline: thin dotted; + outline: thin dotted; } a:focus { - outline: thin dotted; + outline: thin dotted; } /* remember to highlight inserts somehow! */ ins { - text-decoration: none; + text-decoration: none; } del { - text-decoration: line-through; + text-decoration: line-through; } /* start piwik styles */ body { - font-family: @theme-fontFamily-base; - font-size: 1em; + font-family: @theme-fontFamily-base; + font-size: 1em; } a { - color: #255792; - text-decoration: underline; - cursor: pointer; + color: #255792; + text-decoration: underline; + cursor: pointer; } #root { - margin: 0 10px; - position: relative; + margin: 0 10px; + position: relative; } /* Make sure the scroll bar is always displayed so the content does not shift when reloading menu with/without scrollbar */ diff --git a/plugins/Morpheus/stylesheets/general/_form.less b/plugins/Morpheus/stylesheets/general/_form.less index 3ce2f7525e..6833d40ce7 100644 --- a/plugins/Morpheus/stylesheets/general/_form.less +++ b/plugins/Morpheus/stylesheets/general/_form.less @@ -9,7 +9,7 @@ /* on admin screen, Save button aligned on the left */ .admin .submit { - margin-left: 0px; + margin-left: 0; margin-top: 20px; float: none; } @@ -40,7 +40,7 @@ } .entityInlineHelp { - color: #9B9B9B; + color: #9b9b9b; margin-top: 5px; clear: both; } @@ -54,7 +54,8 @@ // material select additions ul.select-dropdown li.disabled span { color: #9e9e9e !important; + &:hover { background-color: #fff; } -}
\ No newline at end of file +} diff --git a/plugins/Morpheus/stylesheets/general/_forms.less b/plugins/Morpheus/stylesheets/general/_forms.less index 4cf5727b67..51875dd025 100644 --- a/plugins/Morpheus/stylesheets/general/_forms.less +++ b/plugins/Morpheus/stylesheets/general/_forms.less @@ -14,7 +14,6 @@ display: inline-block; color: #9e9e9e; font-size: 13px; - } > h3 { @@ -38,10 +37,12 @@ .form-description { font-size: 90%; font-style: italic; - &:before { + + &::before { content: '('; } - &:after { + + &::after { content: ')'; } } @@ -50,7 +51,6 @@ .inline-help .inline-help-node { display: block; } - } @@ -72,23 +72,50 @@ input.browser-default { background-color: @theme-color-brand !important; } -[type="checkbox"]:checked+label:before { +[type="checkbox"]:checked + label::before { border-right-color: @theme-color-brand; border-bottom-color: @theme-color-brand; } + nav.blue-grey.darken-3 { background-color: @theme-color-header-background !important; } -[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:after { + +[type="radio"]:checked + label::after, + [type="radio"].with-gap:checked + label::after { background-color: @theme-color-brand; border-color: @theme-color-brand; } -input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { +input:not([type]):focus:not([readonly]), + input[type=text]:focus:not([readonly]), + input[type=password]:focus:not([readonly]), + input[type=email]:focus:not([readonly]), + input[type=url]:focus:not([readonly]), + input[type=time]:focus:not([readonly]), + input[type=date]:focus:not([readonly]), + input[type=datetime]:focus:not([readonly]), + input[type=datetime-local]:focus:not([readonly]), + input[type=tel]:focus:not([readonly]), + input[type=number]:focus:not([readonly]), + input[type=search]:focus:not([readonly]), + textarea.materialize-textarea:focus:not([readonly]) { border-bottom-color: @theme-color-brand; box-shadow: 0 1px 0 0 @theme-color-brand; } -input:not([type]):focus:not([readonly])+label, input[type=text]:focus:not([readonly])+label, input[type=password]:focus:not([readonly])+label, input[type=email]:focus:not([readonly])+label, input[type=url]:focus:not([readonly])+label, input[type=time]:focus:not([readonly])+label, input[type=date]:focus:not([readonly])+label, input[type=datetime]:focus:not([readonly])+label, input[type=datetime-local]:focus:not([readonly])+label, input[type=tel]:focus:not([readonly])+label, input[type=number]:focus:not([readonly])+label, input[type=search]:focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label { +input:not([type]):focus:not([readonly]) + label, + input[type=text]:focus:not([readonly]) + label, + input[type=password]:focus:not([readonly]) + label, + input[type=email]:focus:not([readonly]) + label, + input[type=url]:focus:not([readonly]) + label, + input[type=time]:focus:not([readonly]) + label, + input[type=date]:focus:not([readonly]) + label, + input[type=datetime]:focus:not([readonly]) + label, + input[type=datetime-local]:focus:not([readonly]) + label, + input[type=tel]:focus:not([readonly]) + label, + input[type=number]:focus:not([readonly]) + label, + input[type=search]:focus:not([readonly]) + label, + textarea.materialize-textarea:focus:not([readonly]) + label { color: @theme-color-brand; } diff --git a/plugins/Morpheus/stylesheets/general/_jqueryUI.less b/plugins/Morpheus/stylesheets/general/_jqueryUI.less index 6d2cb2edab..a1985a8174 100644 --- a/plugins/Morpheus/stylesheets/general/_jqueryUI.less +++ b/plugins/Morpheus/stylesheets/general/_jqueryUI.less @@ -1,7 +1,7 @@ /* jQuery Tooltip */ #tooltip h3 { font-weight: normal; - font-size: .85em; + font-size: 0.85em; font-style: italic; color: #162540; margin: 0; @@ -11,9 +11,9 @@ #tooltip { position: absolute; z-index: 3000; - border: 1px solid #E4E2D7 /*#111*/; + border: 1px solid #e4e2d7 ; padding: 5px 7px 5px 7px; - background-color: #F5F7FF; + background-color: #f5f7ff; opacity: 0.95; } @@ -57,11 +57,11 @@ .ui-inline-help { display: inline-block; background-color: #f4f8fa; - margin: 0px; + margin: 0; font-size: 12px; padding: 20px; color: #3a87ad; - opacity: 1.0; + opacity: 1; border-left: 1px solid #bce8f1; text-align: justify; line-height: 1.3em; @@ -70,7 +70,7 @@ div.ui-state-highlight { border-color: #545903; - background-color: #FFFFD6; + background-color: #ffffd6; } .ui-datepicker { @@ -107,7 +107,7 @@ div.ui-state-highlight { } .ui-datepicker-header .ui-icon-circle-triangle-w { - border-left: 0px; + border-left: 0; border-right: 5px solid @theme-color-brand; } @@ -116,13 +116,15 @@ div.ui-state-highlight { left: 5px !important; top: 3px !important; } + .ui-datepicker-next { background: none !important; right: 2px !important; top: 3px !important; } -.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { +.ui-datepicker .ui-datepicker-prev span, + .ui-datepicker .ui-datepicker-next span { margin-left: -5px; margin-top: -5px; } @@ -175,14 +177,21 @@ div.ui-state-highlight { color: @theme-color-text !important; } -.ui-datepicker td.ui-datepicker-current-period a.ui-state-default, td .ui-state-active, .ui-datepicker td.ui-datepicker-current-period a.ui-state-active, .ui-datepicker td.ui-datepicker-week-end .ui-state-active, .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period { +.ui-datepicker td.ui-datepicker-current-period a.ui-state-default, + td .ui-state-active, + .ui-datepicker td.ui-datepicker-current-period a.ui-state-active, + .ui-datepicker td.ui-datepicker-week-end .ui-state-active, + .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period { border-color: #887f71 !important; background: #887f71 !important; color: #fff !important; opacity: 1 !important; } -.ui-datepicker td .ui-state-hover, .ui-datepicker td .ui-state-hover:hover, .ui-datepicker .ui-datepicker td.ui-datepicker-current-period a.ui-state-hover, .ui-datepicker td.ui-datepicker-week-end .ui-state-hover { +.ui-datepicker td .ui-state-hover, + .ui-datepicker td .ui-state-hover:hover, + .ui-datepicker .ui-datepicker td.ui-datepicker-current-period a.ui-state-hover, + .ui-datepicker td.ui-datepicker-week-end .ui-state-hover { background: #e5e3e0 !important; color: #000 !important; } @@ -202,9 +211,11 @@ td.ui-datepicker-other-month.ui-state-hover { .ui-datepicker select.ui-datepicker-month { width: 46%; } + .ui-datepicker select.ui-datepicker-year { width: 54%; } + .ui-datepicker-month:disabled { border-color: #ccc !important; background: #f5f3f0 !important; @@ -237,7 +248,7 @@ td.ui-datepicker-other-month.ui-state-hover { .ui-tooltip h3 { font-weight: bold; - color: #7E7363; + color: #7e7363; } .ui-tooltip h3 { @@ -284,16 +295,15 @@ body .ui-tooltip.small { /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - - font-size:8px; + font-size: 8px; background-image: none !important; text-indent: 0 !important; opacity: 1 !important; - color:@theme-color-brand-contrast; + color: @theme-color-brand-contrast; overflow: visible; margin-top: -4px; - &:before{ - content:"\e60a"; + &::before { + content: "\e60a"; } } diff --git a/plugins/Morpheus/stylesheets/general/_misc.less b/plugins/Morpheus/stylesheets/general/_misc.less index 7bd0adeaee..e3d53d0eef 100644 --- a/plugins/Morpheus/stylesheets/general/_misc.less +++ b/plugins/Morpheus/stylesheets/general/_misc.less @@ -1,9 +1,9 @@ #topApiRef { - color: #95AECB; + color: #95aecb; } .section-toggler-link { - font-size: .8em; + font-size: 0.8em; font-style: italic; text-decoration: none; } @@ -40,7 +40,8 @@ width: 95%; max-height: 90%; top: 5% !important; + .ui-confirm { padding: 0 !important; } -}
\ No newline at end of file +} diff --git a/plugins/Morpheus/stylesheets/general/_typography.less b/plugins/Morpheus/stylesheets/general/_typography.less index 710174ddef..cd8d155a6b 100644 --- a/plugins/Morpheus/stylesheets/general/_typography.less +++ b/plugins/Morpheus/stylesheets/general/_typography.less @@ -1,80 +1,87 @@ -h1, h2, h3, h4, h5 { - font-family: @theme-fontFamily-base; +h1, + h2, + h3, + h4, + h5 { + font-family: @theme-fontFamily-base; } a { - color: @theme-color-link; - text-decoration: none; + color: @theme-color-link; + text-decoration: none; } h1 { - font-size: 30px; - margin-bottom: 20px; + font-size: 30px; + margin-bottom: 20px; } h2 { - color: @theme-color-headline-alternative; + color: @theme-color-headline-alternative; } .datatableRelatedReports { - color: @theme-color-text-lighter; + color: @theme-color-text-lighter; } .tableIcon { - &.activeIcon { - background-color: @theme-color-background-tinyContrast; - } + &.activeIcon { + background-color: @theme-color-background-tinyContrast; + } } .dataTableFooterActiveItem { - display: none; + display: none; } #topApiRef { - color: @theme-color-text; + color: @theme-color-text; } .tableConfiguration div.configItem span.action { - color: @theme-color-link; + color: @theme-color-link; } .dataTablePages { - color: @theme-color-text; - font-weight: normal; - .font-default(13px, 14px); + color: @theme-color-text; + font-weight: normal; + .font-default(13px, 14px); } .datatableRelatedReports { - color: #808080; - span { - color: @theme-color-text; - font-weight: normal; - } + color: #808080; + + span { + color: @theme-color-text; + font-weight: normal; + } } -.tagCloud span, .tagCloud span a { - color: @theme-color-link !important; +.tagCloud span, + .tagCloud span a { + color: @theme-color-link !important; } -ul.widgetpreview-widgetlist, ul.widgetpreview-categorylist { - color: #4d4d4d; +ul.widgetpreview-widgetlist, + ul.widgetpreview-categorylist { + color: #4d4d4d; } .dataTableRowActions { - background: none !important; + background: none !important; } a { - color: @theme-color-link; + color: @theme-color-link; } .Piwik_Popover_Loading_Subject { - color: @theme-color-link !important; + color: @theme-color-link !important; } body > a.ddmetric { - background-color: @color-gray-light !important; - border-color: @color-gray !important; - color: #000 !important; - font-family: @theme-fontFamily-base !important; + background-color: @color-gray-light !important; + border-color: @color-gray !important; + color: #000 !important; + font-family: @theme-fontFamily-base !important; } diff --git a/plugins/Morpheus/stylesheets/general/_utils.less b/plugins/Morpheus/stylesheets/general/_utils.less index 58a9579eff..a1d69b7e75 100644 --- a/plugins/Morpheus/stylesheets/general/_utils.less +++ b/plugins/Morpheus/stylesheets/general/_utils.less @@ -3,7 +3,7 @@ br.clearAll { clear: both; height: 0; line-height: 0; - font-size: 0; /*for IE*/ + font-size: 0; /* for IE */ } br.clear, @@ -22,4 +22,4 @@ div.clear { margin: auto; text-align: center; padding-bottom: 10px; -}
\ No newline at end of file +} diff --git a/plugins/Morpheus/stylesheets/main.less b/plugins/Morpheus/stylesheets/main.less index 9269839e73..61146031cc 100644 --- a/plugins/Morpheus/stylesheets/main.less +++ b/plugins/Morpheus/stylesheets/main.less @@ -9,37 +9,45 @@ @import "ui/_map"; body { - background: @theme-color-background-base; - font-family: @theme-fontFamily-base; - color: @theme-color-text; + background: @theme-color-background-base; + font-family: @theme-fontFamily-base; + color: @theme-color-text; } -button, input, optgroup, select, textarea { +button, + input, + optgroup, + select, + textarea { color: @theme-color-text; } h2 { - font-weight: normal; - font-size: 24px; - width: 100%; - padding: 16px 0 16px 0; - margin: 0; - .inlineHelp { - a, a:hover { - text-decoration: underline; - color: @theme-color-text; - } + font-weight: normal; + font-size: 24px; + width: 100%; + padding: 16px 0 16px 0; + margin: 0; + + .inlineHelp { + a, + a:hover { + text-decoration: underline; + color: @theme-color-text; } + } } + h3 { - color: @theme-color-headline-alternative; - .font-default(18px, 24px); - font-weight: normal; - margin: 32px 0 16px 0; + color: @theme-color-headline-alternative; + .font-default(18px, 24px); + + font-weight: normal; + margin: 32px 0 16px 0; } .pageWrap a:hover { - text-decoration:underline; + text-decoration: underline; } p { @@ -47,19 +55,29 @@ p { } #content p { - margin-left: 0; - margin-right: 0; - .font-default(13px, 18px); + margin-left: 0; + margin-right: 0; + .font-default(13px, 18px); } .piwik-content-intro { - button, input, optgroup, select, textarea { + button, + input, + optgroup, + select, + textarea { color: @theme-color-headline-alternative; } + color: @theme-color-headline-alternative; - h1, h2, h3, h4 { + + h1, + h2, + h3, + h4 { color: @theme-color-headline-alternative; } + p { color: @theme-color-headline-alternative; } @@ -72,21 +90,22 @@ p { } #leftcolumn { - width: 49%; - margin-right: 1%; + width: 49%; + margin-right: 1%; } #rightcolumn { - float: left; - width: 50%; + float: left; + width: 50%; } #root { - margin: 0 0 20px 0; - padding: 0; - .widgetize { - width: auto; - } + margin: 0 0 20px 0; + padding: 0; + + .widgetize { + width: auto; + } } #pageFooter { @@ -102,12 +121,14 @@ p { border: 1px solid @theme-color-background-lowContrast; background: @theme-color-background-base; z-index: 10; - .border-radius(0px); + .border-radius(0); + > span { position: relative; background: none; text-transform: uppercase; - &:after { + + &::after { content: ''; border-left: 4px solid transparent; border-right: 4px solid transparent; @@ -121,20 +142,26 @@ p { ul.submenu { margin-left: 0; padding-right: 0; + li { list-style-type: none; + > div { .font-default(11px, 14px); + color: @theme-color-text; } + text-transform: none; color: @color-silver-l20; + &.widgetpreview-choosen { color: @theme-color-text; font-weight: normal; background: @color-silver-l95; position: relative; - &:after { + + &::after { position: absolute; content: ''; top: 6px; @@ -151,41 +178,47 @@ p { .segmentEditorPanel { border: 1px solid @theme-color-background-lowContrast; background: @theme-color-background-base; - .border-radius(0px); + .border-radius(0); + .dropdown-body { - background:@theme-color-background-contrast; + background: @theme-color-background-contrast; padding: 8px 19px 0; - .border-radius(0px); - border-top-width: 0px; + .border-radius(0); + + border-top-width: 0; } + &:hover .dropdown-body { - background:@theme-color-background-contrast; + background: @theme-color-background-contrast; } + .segmentationContainer { > span > strong { color: @theme-color-brand; } + .submenu { li { font-weight: normal; .font-default(12px, 14px) !important; + color: @color-silver-l30; } - ul li:hover { + ul li:hover { color: @theme-color-text; } - } } .segmentListContainer { .segmentationContainer { .submenu { - li { - .font-default(13px, 16px); - color: @theme-color-text-light; - } + li { + .font-default(13px, 16px); + + color: @theme-color-text-light; + } } } } @@ -199,25 +232,28 @@ p { /* Iframed Embed dashboard style */ #standalone { - #Dashboard { position: relative; &:hover ul { background-color: @theme-color-background-base; } + ul { padding: 0 19px; color: @theme-color-text-light; min-height: 33px; - line-height:0.5em; - .border-radius(0px); + line-height: 0.5em; + .border-radius(0); + border: 0; background-color: @theme-color-background-base; } + > ul > li { white-space: nowrap; margin-right: 0; + a { font-family: @theme-fontFamily-base; line-height: 12px; @@ -228,12 +264,14 @@ p { cursor: pointer; text-transform: uppercase; } + &.active { a { color: @theme-color-menu-contrast-textActive; } } } + > ul > li:hover, > ul > li:hover a { color: @theme-color-brand; @@ -242,13 +280,14 @@ p { } .rss-title { - color: @theme-color-link !important; - font-weight: normal; - .font-default(15px, 18px); - text-decoration: none; - display: block; - width: 100%; - margin-top: 14px; + color: @theme-color-link !important; + font-weight: normal; + .font-default(15px, 18px); + + text-decoration: none; + display: block; + width: 100%; + margin-top: 14px; } .rss li:first-child .rss-title { @@ -256,166 +295,167 @@ p { } .rss-date { - display: block; - color: @color-silver-l60; - .font-default(13px, 26px); + display: block; + color: @color-silver-l60; + .font-default(13px, 26px); } .rss-description { - p { - margin: 0; - color: @theme-color-text-lighter; - .font-default(13px, 18px); - } + p { + margin: 0; + color: @theme-color-text-lighter; + .font-default(13px, 18px); + } } table.dataTable { - thead { - tr { - th { - background: @theme-color-background-base; - border-radius: 0; - color: @theme-color-text-contrast; - text-transform: uppercase; - .font-default(11px, 12px); - padding-top: 16px; - padding-bottom: 16px; - vertical-align: middle; - - &:not(.first) { - text-align: right; - padding-left: 28px; - padding-right: 12px; - } - - &.first + th { - // first column after label should have a bit less padding - padding-left: 13px; - } - - #thDIV { - display: inline; - position: relative; - } - - &.columnSorted { - .sortIcon { - display: inline-block; - position: absolute; - margin: 0px; - height: 12px; - margin-top: -1px; - margin-left: -14px; - - &.asc { - margin-top: -7px; - } - - } - - &.first { - .sortIcon { - margin-top: -1px; - margin-left: 4px; - &.asc { - margin-top: -6px; - } - } - } - - .sortIcon.asc:after { - content: " \25B2"; - border-bottom: 5px solid @theme-color-brand; - border-top: 0px; - } - - .sortIcon:after { - content: " \25BC"; - font-size: 1px; - color: @theme-color-brand; - border-left: 4px solid rgba(0, 0, 0, 0); - border-right: 4px solid rgba(0, 0, 0, 0); - border-top: 5px solid @theme-color-brand; - } - - } - } - } - } + thead { tr { + th { + background: @theme-color-background-base; + border-radius: 0; + color: @theme-color-text-contrast; + text-transform: uppercase; + .font-default(11px, 12px); - td { - border-bottom: 1px solid @color-silver-l95 !important; - border-color: @color-silver-l95 !important; - color: @theme-color-text; - background: @theme-color-background-contrast; + padding-top: 16px; + padding-bottom: 16px; + vertical-align: middle; - &:not(.value) { - .font-default(13px, 16px); - } + &:not(.first) { + text-align: right; + padding-left: 28px; + padding-right: 12px; + } - .label { - line-height: normal; - } + &.first + th { + // first column after label should have a bit less padding + padding-left: 13px; + } - .value { - .font-default(13px, 16px); - } + #thDIV { + display: inline; + position: relative; + } - &:first-child { - border-left: 0px; + &.columnSorted { + .sortIcon { + display: inline-block; + position: absolute; + margin: 0; + height: 12px; + margin-top: -1px; + margin-left: -14px; + + &.asc { + margin-top: -7px; } + } - &.label + td.column { - // first column after label should have a bit less padding - padding-left: 10px; - } + &.first { + .sortIcon { + margin-top: -1px; + margin-left: 4px; - &.label .label { - text-align: left; + &.asc { + margin-top: -6px; + } } + } - &.column:not(.label) { - padding-left: 28px; - padding-right: 12px; - text-align: right; - font-variant-numeric: tabular-nums; - } + .sortIcon.asc::after { + content: " \25B2"; + border-bottom: 5px solid @theme-color-brand; + border-top: 0; + } - a { - text-decoration: none !important; - color: @theme-color-link; - width: inherit; + .sortIcon::after { + content: " \25BC"; + font-size: 1px; + color: @theme-color-brand; + border-left: 4px solid rgba(0, 0, 0, 0); + border-right: 4px solid rgba(0, 0, 0, 0); + border-top: 5px solid @theme-color-brand; + } + } + } + } + } - &.withIcon { - color: @theme-color-text; - } - } + tr { + td { + border-bottom: 1px solid @color-silver-l95 !important; + border-color: @color-silver-l95 !important; + color: @theme-color-text; + background: @theme-color-background-contrast; - div.label, - a.label, - span.label { - word-break: break-all; - overflow: hidden; - text-overflow: ellipsis; - width: inherit; - display: inline-block; - vertical-align: sub; - } - } + &:not(.value) { + .font-default(13px, 16px); + } + + .label { + line-height: normal; + } + + .value { + .font-default(13px, 16px); + } + + &:first-child { + border-left: 0; + } - &:hover { - td:not(.cellSubDataTable) { - background-color: @color-silver-l95; + &.label + td.column { + // first column after label should have a bit less padding + padding-left: 10px; + } + + &.label .label { + text-align: left; + } + + &.column:not(.label) { + padding-left: 28px; + padding-right: 12px; + text-align: right; + font-variant-numeric: tabular-nums; + } + + a { + text-decoration: none !important; + color: @theme-color-link; + width: inherit; + + &.withIcon { + color: @theme-color-text; } + } - // for third level tables - td.cellSubDataTable { + div.label, + a.label, + span.label { + word-break: break-all; + overflow: hidden; + text-overflow: ellipsis; + width: inherit; + display: inline-block; + vertical-align: sub; + } + } + + &:hover { + td:not(.cellSubDataTable) { + background-color: @color-silver-l95; + } + + // for third level tables + td.cellSubDataTable { + table { table { - table { tr td { background: @theme-color-background-contrast !important; } + tr:hover td { background: @theme-color-background-contrast !important; @@ -423,50 +463,55 @@ table.dataTable { background-color: @color-silver-l95 !important; } } - } } } + } - .cellSubDataTable td { - background: @theme-color-background-contrast; - } - .cellSubDataTable tr:hover td:not(.cellSubDataTable) { - background-color: @theme-color-background-base; - } + .cellSubDataTable td { + background: @theme-color-background-contrast; + } + + .cellSubDataTable tr:hover td:not(.cellSubDataTable) { + background-color: @theme-color-background-base; } } + } } -div.dataTableVizHtmlTable:not(.dataTableActions), div.dataTableVizAllColumns, div.dataTableVizGoals { - tr.subDataTable > td:first-child:before { +div.dataTableVizHtmlTable:not(.dataTableActions), + div.dataTableVizAllColumns, + div.dataTableVizGoals { + tr.subDataTable > td:first-child::before { display: inline-block; float: left; top: 0; width: 12px; height: 12px; - margin-left:-1px; - margin-top:3px; - margin-right:8px; + margin-left: -1px; + margin-top: 3px; + margin-right: 8px; content: ''; } - tr.subDataTable:not(.expanded) > td:first-child:before { + tr.subDataTable:not(.expanded) > td:first-child::before { background-image: url(plugins/Morpheus/images/plus.png); } - tr.subDataTable.expanded > td:first-child:before { + tr.subDataTable.expanded > td:first-child::before { background-image: url(plugins/Morpheus/images/minus.png); } } .visitsLiveFooter { - padding-left: 10px; - a.rightLink { - .font-default(13px, 16px); - margin-top: 10px; - margin-bottom: 10px; - padding-right: 10px; - } + padding-left: 10px; + + a.rightLink { + .font-default(13px, 16px); + + margin-top: 10px; + margin-bottom: 10px; + padding-right: 10px; + } } .UserCountryMap-btn-zoom { @@ -474,128 +519,135 @@ div.dataTableVizHtmlTable:not(.dataTableActions), div.dataTableVizAllColumns, di } div.sparkline { - display: -ms-flexbox; - -ms-box-orient: horizontal; - -ms-box-pack: center; - - display: -webkit-flex; - display: -moz-flex; - display: -ms-flex; - display: flex; - - -webkit-justify-content: space-around; - -moz-justify-content: space-around; - -ms-justify-content: space-around; - justify-content: space-around; - - border-bottom: 0; - margin-bottom: 10px; - &.linked { - border-bottom: 1px solid transparent; - &:hover { - cursor: pointer; - border-bottom: 1px dashed #c3c3c3; - } + display: -ms-flexbox; + -ms-box-orient: horizontal; + -ms-box-pack: center; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: flex; + -webkit-justify-content: space-around; + -moz-justify-content: space-around; + -ms-justify-content: space-around; + justify-content: space-around; + border-bottom: 0; + margin-bottom: 10px; + + &.linked { + border-bottom: 1px solid transparent; + + &:hover { + cursor: pointer; + border-bottom: 1px dashed #c3c3c3; } + } } div.sparkline img { - -webkit-flex-shrink: 0; - -moz-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; + -webkit-flex-shrink: 0; + -moz-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; } -div.sparkline script+div { - -ms-flex: 1 1 auto; // for getting flex to work on IE10's buggy implementation - - margin: 1px 0 0 1px; +div.sparkline script + div { + -ms-flex: 1 1 auto; // for getting flex to work on IE10's buggy implementation + margin: 1px 0 0 1px; } .widgetpreview-base li.widgetpreview-choosen { - background: @color-silver-l95; - position: relative; - color: @theme-color-text; - font-weight: normal; - text-transform: none; - &:after { - position: absolute; - content: ''; - top: 6px; - right: 10px; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - border-left: 5px solid @theme-color-brand; - } + background: @color-silver-l95; + position: relative; + color: @theme-color-text; + font-weight: normal; + text-transform: none; + + &::after { + position: absolute; + content: ''; + top: 6px; + right: 10px; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: 5px solid @theme-color-brand; + } } -.dataTableNext, .dataTablePrevious { - color: @theme-color-link; - .font-default(13px, 14px); +.dataTableNext, + .dataTablePrevious { + color: @theme-color-link; + .font-default(13px, 14px); } .UserCountryMap-info-btn { - z-index: 1; + z-index: 1; } .annotationView { - .font-default(10px, 12px); - text-transform: uppercase; - color: @theme-color-text; + .font-default(10px, 12px); + + text-transform: uppercase; + color: @theme-color-text; } -.datatableHeaderMessage, .datatableFooterMessage { - .font-default(13px, 18px); - color: @color-silver; - font-weight: normal; +.datatableHeaderMessage, + .datatableFooterMessage { + .font-default(13px, 18px); + + color: @color-silver; + font-weight: normal; } + .multisites_asc, .multisites_desc { - background-repeat: no-repeat; - height: 6px; + background-repeat: no-repeat; + height: 6px; } #visitsLive .datetime { - background: @color-silver-l95; - border-top: 0; + background: @color-silver-l95; + border-top: 0; } .metricValueBlock input { - padding: 5px !important; + padding: 5px !important; } #piwik-promo-share { - border: 0px; - background: @theme-color-background-tinyContrast; - .font-default(10px, 16px); + border: 0; + background: @theme-color-background-tinyContrast; + .font-default(10px, 16px); } tr:hover #token_auth { - background: #FFFFF7; + background: #fffff7; } #header_message .dropdown a, #header_message #updateCheckLinkContainer:hover { - text-decoration: underline; + text-decoration: underline; } #header_message #updateCheckLinkContainer:hover { - cursor: pointer; + cursor: pointer; } #multisites table.dataTable { - tfoot tr:hover td { - background: @theme-color-background-contrast; - } + tfoot tr:hover td { + background: @theme-color-background-contrast; + } } /** Materialize color overwrites */ -.dropdown-content li>a, .dropdown-content li>span { +.dropdown-content li > a, + .dropdown-content li > span { color: @theme-color-link !important; } -.dropdown-content li:hover, .dropdown-content li.active, .dropdown-content li.selected { +.dropdown-content li:hover, + .dropdown-content li.active, + .dropdown-content li.selected { background-color: @theme-color-background-tinyContrast; } @@ -607,5 +659,5 @@ tr:hover #token_auth { } .ui-tooltip { - z-index: 9999; + z-index: 9999; } diff --git a/plugins/Morpheus/stylesheets/simple_structure.css b/plugins/Morpheus/stylesheets/simple_structure.css index 0581550123..6b3ddf91cf 100644 --- a/plugins/Morpheus/stylesheets/simple_structure.css +++ b/plugins/Morpheus/stylesheets/simple_structure.css @@ -1,189 +1,225 @@ /* Most of the code here can be removed once we switch to Bootstrap */ body { - font-family: Verdana, sans-serif; - color: #212121; + font-family: Verdana, sans-serif; + color: #212121; } -body#simple { - background: #fff; - margin: 0; + +body#simple { + background: #fff; + margin: 0; } + #simple .logo { - color: #888; - text-align: center; - font-size: 12px; - background-color: #3450A3 !important; - padding: 15px 0; + color: #888; + text-align: center; + font-size: 12px; + background-color: #3450a3 !important; + padding: 15px 0; } + #simple .logo a { - color: #888; - text-decoration: none; + color: #888; + text-decoration: none; } + #simple .box { - border-radius: 2px; - border: solid 1px #ccc; - max-width: 780px; - margin: 30px auto 60px auto; - overflow: hidden; - box-shadow: 0 1px 6px 0 #ccc; + border-radius: 2px; + border: solid 1px #ccc; + max-width: 780px; + margin: 30px auto 60px auto; + overflow: hidden; + box-shadow: 0 1px 6px 0 #ccc; } #simple .box .header { - background-color: #eff0f1; - padding: 40px 80px; - text-align: center; + background-color: #eff0f1; + padding: 40px 80px; + text-align: center; } + #simple .box .header h1 { - font-size: 30px; - font-weight: normal; - margin: 0; + font-size: 30px; + font-weight: normal; + margin: 0; } + #simple .box .header p { - font-size: 13px; - margin-top: 10px; - padding: 0; + font-size: 13px; + margin-top: 10px; + padding: 0; } #simple .box .content { - margin: 1em 2em; - text-align: center; - padding: 30px 50px; - font-size: 14px; + margin: 1em 2em; + text-align: center; + padding: 30px 50px; + font-size: 14px; } + #simple .box .content.text-left { - text-align: left; + text-align: left; } + #simple .box .content ul { - text-align: left; - list-style: disc; - width: 60%; - margin: 0 auto; + text-align: left; + list-style: disc; + width: 60%; + margin: 0 auto; } + #simple .box .content.text-left ul { - width: 100%; + width: 100%; } + #simple .box .content form { - margin: 10px 0; - min-height: 0; + margin: 10px 0; + min-height: 0; } + #simple .box .content .btn { - float: none; - margin: 0; + float: none; + margin: 0; } + #simple .box .content h2 { - font-weight: normal; - font-size: 19px; - margin-bottom: 25px; - margin-top: 30px; + font-weight: normal; + font-size: 19px; + margin-bottom: 25px; + margin-top: 30px; } + #simple .box .content h2:first-child { - margin-top: 0; + margin-top: 0; } #simple .box .content blockquote { - word-wrap: break-word; + word-wrap: break-word; } #simple .box .footer { - background-color: #eff0f1; - padding: 15px; - text-align: center; + background-color: #eff0f1; + padding: 15px; + text-align: center; } + #simple .box .footer a { - text-decoration: none; + text-decoration: none; } /* Old style below */ #contentsimple { - background: #fff; - color: #000; - font-family: Arial, Georgia, "Times New Roman", Times, serif; - padding: 1em 2em; - width:780px; - margin: 30px auto auto; - border-radius: 12px; - display: table; /* Contains floating children */ + background: #fff; + color: #000; + font-family: Arial, Georgia, "Times New Roman", Times, serif; + padding: 1em 2em; + width: 780px; + margin: 30px auto auto; + border-radius: 12px; + display: table; /* Contains floating children */ } + #h1 { - color: #006; - font-size: 45px; - font-weight: lighter; + color: #006; + font-size: 45px; + font-weight: lighter; } + a { - color: #1976D2; + color: #1976d2; } + #subh1 { - color: #444444; - font-size: 17pt; - margin-left: 15px; - vertical-align: bottom; + color: #444; + font-size: 17pt; + margin-left: 15px; + vertical-align: bottom; } #subh1 a { - color: #444; - text-decoration:none; + color: #444; + text-decoration: none; } -#title img{ - vertical-align:bottom; +#title img { + vertical-align: bottom; } + #title { - padding-bottom:15px; - border-bottom:1px solid #F0F0F0; - font:42px Georgia, serif; + padding-bottom: 15px; + border-bottom: 1px solid #f0f0f0; + font: 42px Georgia, serif; } -p, dt { - line-height: 1.5; - padding-bottom: 1em; + +p, + dt { + line-height: 1.5; + padding-bottom: 1em; } #logo { margin-bottom: 2em; } + .submit { - font-size:18pt; - padding: 5px 7px 7px; - border: 1px solid #a3a3a3; - border-radius: 3px; - color: #246; - background: #e5e5e5; - text-decoration: none; + font-size: 18pt; + padding: 5px 7px 7px; + border: 1px solid #a3a3a3; + border-radius: 3px; + color: #246; + background: #e5e5e5; + text-decoration: none; } + .submit:hover { - color: #d54e21; - border-color: #535353; + color: #d54e21; + border-color: #535353; } + .success { - padding-bottom:15px; - color:#1F7F4A; - font-size:25pt; + padding-bottom: 15px; + color: #1f7f4a; + font-size: 25pt; } + .warning { - font-size:130%; - font-weight:bold; - border: 1px solid #ff5502; + font-size: 130%; + font-weight: bold; + border: 1px solid #ff5502; } -.warning, .warning a { - color:#ff5502; + +.warning, + .warning a { + color: #ff5502; } + .error { - font-weight:bold; - font-size:130%; - border: 1px solid red; - padding:20px; + font-weight: bold; + font-size: 130%; + border: 1px solid red; + padding: 20px; } -.error, .error a { - color:#f00; + +.error, + .error a { + color: #f00; } -.error img, .success img, .warning img { - border:0; - vertical-align:bottom; + +.error img, + .success img, + .warning img { + border: 0; + vertical-align: bottom; } -.warning, .error { - border-radius:4px; - padding:15px; + +.warning, + .error { + border-radius: 4px; + padding: 15px; } + .warning.normalFontSize { - font-size: 100%; - padding: 10px; + font-size: 100%; + padding: 10px; } + .indented-radio-button { - margin-left:20px; + margin-left: 20px; } diff --git a/plugins/Morpheus/stylesheets/ui/_buttons.less b/plugins/Morpheus/stylesheets/ui/_buttons.less index ac608d2ed4..3da64f2b0f 100644 --- a/plugins/Morpheus/stylesheets/ui/_buttons.less +++ b/plugins/Morpheus/stylesheets/ui/_buttons.less @@ -1,62 +1,71 @@ // We use `button:not(.btn)` because `button` has a higher priority than CSS classes // which makes it impossible to use btn-lg or similar additional classes. -button.btn,input[type="submit"].btn, .btn { - display: inline-block; - .border-radius(3px); - background: none; - background-color: @theme-color-brand; - color: @theme-color-brand-contrast !important; - font-size: 12px; - font-weight: normal; - text-align: center; - text-decoration: none; - cursor: pointer; - border: 0; +button.btn, +input[type="submit"].btn, + .btn { + display: inline-block; + .border-radius(3px); + + background: none; + background-color: @theme-color-brand; + color: @theme-color-brand-contrast !important; + font-size: 12px; + font-weight: normal; + text-align: center; + text-decoration: none; + cursor: pointer; + border: 0; - &:hover, &:focus { - color: @theme-color-brand-contrast; - background: @theme-color-brand; - text-decoration: none; - } + &:hover, + &:focus { + color: @theme-color-brand-contrast; + background: @theme-color-brand; + text-decoration: none; + } - em { - font-style: normal; - } + em { + font-style: normal; + } } .btn-flat:hover { - background-color: @theme-color-background-base; - text-decoration: none !important; - box-shadow: 0 0; + background-color: @theme-color-background-base; + text-decoration: none !important; + box-shadow: 0 0; } .btn.btn-small { - padding: 0 16px; + padding: 0 16px; } // Bootstrap classes (can be removed in the future) .btn { - display: inline-block; + display: inline-block; } + .btn-block { - width: 100%; + width: 100%; } + .btn-block + .btn-block { - margin-top: 5px; + margin-top: 5px; } -.btn.disabled, .btn[disabled], fieldset[disabled] .btn { - pointer-events: none; - cursor: not-allowed; - filter: alpha(opacity=65); - opacity: .65; + +.btn.disabled, + .btn[disabled], + fieldset[disabled] .btn { + pointer-events: none; + cursor: not-allowed; + filter: alpha(opacity=65); + opacity: 0.65; } // See http://getbootstrap.com/css/#buttons-options .btn.btn-noop { - background: transparent; - color: @theme-color-text; - pointer-events: none; - cursor: not-allowed; - box-shadow: none; + background: transparent; + color: @theme-color-text; + pointer-events: none; + cursor: not-allowed; + box-shadow: none; } diff --git a/plugins/Morpheus/stylesheets/ui/_cards.less b/plugins/Morpheus/stylesheets/ui/_cards.less index f7e863ddba..5288749940 100644 --- a/plugins/Morpheus/stylesheets/ui/_cards.less +++ b/plugins/Morpheus/stylesheets/ui/_cards.less @@ -1,20 +1,27 @@ -h1, h2, h3, h4 { +h1, + h2, + h3, + h4 { &.card-title { color: @theme-color-text !important; + a { color: @theme-color-text !important; } } } -.card.hoverable:hover{ - @media print{ - box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); +.card.hoverable:hover { + @media print { + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } } .card { - h1, h2, h3, h4 { + h1, + h2, + h3, + h4 { color: @theme-color-text; } @@ -33,6 +40,7 @@ h1, h2, h3, h4 { .card-content { color: @theme-color-text; + .card-title { margin-bottom: 16px; display: block; diff --git a/plugins/Morpheus/stylesheets/ui/_charts.less b/plugins/Morpheus/stylesheets/ui/_charts.less index 6a3361b7e9..f85008d8d2 100644 --- a/plugins/Morpheus/stylesheets/ui/_charts.less +++ b/plugins/Morpheus/stylesheets/ui/_charts.less @@ -149,10 +149,10 @@ } .evolution-graph-colors[data-name=ticks] { - color: #ccc; + color: #ccc; } .evolution-graph-colors[data-name=single-metric-label] { - color: @theme-color-text-lighter; + color: @theme-color-text-lighter; } diff --git a/plugins/Morpheus/stylesheets/ui/_code.less b/plugins/Morpheus/stylesheets/ui/_code.less index 4bfd9d2cda..5493b74434 100644 --- a/plugins/Morpheus/stylesheets/ui/_code.less +++ b/plugins/Morpheus/stylesheets/ui/_code.less @@ -1,23 +1,24 @@ code { - padding: 2px 4px; - font-size: 90%; - color: @theme-color-code; - background-color: @theme-color-code-background; - border-radius: 4px; + padding: 2px 4px; + font-size: 90%; + color: @theme-color-code; + background-color: @theme-color-code-background; + border-radius: 4px; } // The .codeblock class is useful to style <textarea> like a code block -pre, .codeblock { - font-size: 13px; - color: @theme-color-code; - background-color: @theme-color-code-background; - border: none; - border-radius: 3px; - direction: ltr; - margin: 15px 0; - padding: 20px; - text-align: left; - height: auto; - display: block; - width: 100%; +pre, + .codeblock { + font-size: 13px; + color: @theme-color-code; + background-color: @theme-color-code-background; + border: none; + border-radius: 3px; + direction: ltr; + margin: 15px 0; + padding: 20px; + text-align: left; + height: auto; + display: block; + width: 100%; } diff --git a/plugins/Morpheus/stylesheets/ui/_components.less b/plugins/Morpheus/stylesheets/ui/_components.less index 3db4d87beb..87b8aa10df 100644 --- a/plugins/Morpheus/stylesheets/ui/_components.less +++ b/plugins/Morpheus/stylesheets/ui/_components.less @@ -5,284 +5,317 @@ @calendarBorder: #ccc; .ui-datepicker { + th, + th.ui-datepicker-week-end { + background: @calendarHeaderBackground !important; + color: @calendarHeaderColor !important; + } + + .ui-state-default { + border-color: @calendarBorder !important; + } + + .ui-datepicker-header { + background: @calendarHeaderBackground !important; + border-color: @color-gray; + border-bottom-width: 0; + } + + .ui-datepicker-calendar { + border: 1px solid @color-gray; - th, th.ui-datepicker-week-end { - background: @calendarHeaderBackground !important; - color: @calendarHeaderColor !important; - } - - .ui-state-default { - border-color: @calendarBorder !important; - } - - .ui-datepicker-header { - background: @calendarHeaderBackground !important; - border-color: @color-gray; - border-bottom-width: 0px; - } - - .ui-datepicker-calendar { - border: 1px solid @color-gray; - thead { - border-bottom: 1px solid @color-gray; - } + thead { + border-bottom: 1px solid @color-gray; } + } - .ui-datepicker-title select { - font-size: 10px; - } + .ui-datepicker-title select { + font-size: 10px; + } } -.ui-datepicker td.ui-datepicker-current-period a.ui-state-default, td .ui-state-active, .ui-datepicker td.ui-datepicker-current-period a.ui-state-active, .ui-datepicker td.ui-datepicker-week-end .ui-state-active, .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period, +.ui-datepicker td.ui-datepicker-current-period a.ui-state-default, + td .ui-state-active, + .ui-datepicker td.ui-datepicker-current-period a.ui-state-active, + .ui-datepicker td.ui-datepicker-week-end .ui-state-active, + .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period, .ui-datepicker td .ui-state-default.ui-state-active:hover { - background: @theme-color-text !important; + background: @theme-color-text !important; } -.ui-datepicker td.ui-datepicker-current-period a.ui-state-default, td .ui-state-active, .ui-datepicker td.ui-datepicker-current-period a.ui-state-active, .ui-datepicker td.ui-datepicker-week-end .ui-state-active, .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period { - background: @calendarCurrentStateHover; +.ui-datepicker td.ui-datepicker-current-period a.ui-state-default, + td .ui-state-active, + .ui-datepicker td.ui-datepicker-current-period a.ui-state-active, + .ui-datepicker td.ui-datepicker-week-end .ui-state-active, + .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period { + background: @calendarCurrentStateHover; } .segment-element { - background: @color-white; - border-color: @color-silver-l80; - line-height: 1.33; - box-shadow: 4px 7px 25px rgba(0,0,0,0.3); - - .segment-add-row { - .border-radius(5px); + background: @color-white; + border-color: @color-silver-l80; + line-height: 1.33; + box-shadow: 4px 7px 25px rgba(0, 0, 0, 0.3); + + .segment-add-row { + .border-radius(5px); + } + + .custom_select_search { + input { + margin-top: 4px; } + } - .custom_select_search { - input { - margin-top: 4px; - } + .segment-content { + h3 { + font-weight: normal; + .font-default(13px, 15px); + + color: @theme-color-text; } - .segment-content { - h3 { - font-weight: normal; - .font-default(13px, 15px); - color: @theme-color-text; - } + .segment-add-row > div a span, + .segment-add-or > div a span { + color: @theme-color-brand; + text-shadow: none; + } - .segment-add-row > div a span, - .segment-add-or > div a span { - color: @theme-color-brand; - text-shadow: none; - } + .segment-input { + select, + input { + .font-default(12px, 14px); - .segment-input { - select, input { - .font-default(12px, 14px); - color: @theme-color-text; - font-weight: 600; - margin: 0; - height: 32px; - } - } + color: @theme-color-text; + font-weight: 600; + margin: 0; + height: 32px; + } } + } - .segment-top { - .font-default(10px, 12px); - color: @theme-color-text-light; + .segment-top { + .font-default(10px, 12px); + + color: @theme-color-text-light; + text-transform: uppercase; + + h4 { + color: @color-silver-l30; + text-transform: uppercase; + .font-default(10px, 12px); + + a.dropdown { + color: @color-silver-l30; text-transform: uppercase; + .font-default(10px, 12px); + } + } - h4 { - color: @color-silver-l30; - text-transform: uppercase; - .font-default(10px, 12px); - a.dropdown { - color: @color-silver-l30; - text-transform: uppercase; - .font-default(10px, 12px); - } - } + a.dropdown { + display: inline; + color: @theme-color-text; + background: url('plugins/Morpheus/images/sort_subtable_desc.png') 100% -2px no-repeat; - a.dropdown { - display: inline; - color: @theme-color-text; - background: url('plugins/Morpheus/images/sort_subtable_desc.png') 100% -2px no-repeat; - &.ui-autocomplete-input { - background-position: 100% -2px; - } - .font-default(10px, 12px); - } + &.ui-autocomplete-input { + background-position: 100% -2px; + } + .font-default(10px, 12px); } - .segment-footer { - background: @color-white; + } - a.delete { - color: @theme-color-brand; - } + .segment-footer { + background: @color-white; + + a.delete { + color: @theme-color-brand; } + } } .available_segments a.dropdown { - color: @theme-color-text !important; - text-transform: uppercase; - .font-default(10px, 12px); + color: @theme-color-text !important; + text-transform: uppercase; + .font-default(10px, 12px); } .ui-datepicker { - .ui-datepicker-month, - .ui-datepicker-year { - min-height: 0; - background-position: 140%; - padding-left: 5px; - display: inline-block; - color: #666; - border: 0; - height: 19px; - line-height: 19px; - } + .ui-datepicker-month, + .ui-datepicker-year { + min-height: 0; + background-position: 140%; + padding-left: 5px; + display: inline-block; + color: #666; + border: 0; + height: 19px; + line-height: 19px; + } } -#periodString { - label.selected-period-label { - text-decoration: none !important; - } +#periodString { + label.selected-period-label { + text-decoration: none !important; + } - h6 { - .font-default(13px, 16px); - font-weight: normal; - color: @theme-color-text; - } + h6 { + .font-default(13px, 16px); - #periodMore { - .period-range { - .ui-datepicker-header { - background: red; - } - } + font-weight: normal; + color: @theme-color-text; + } + + #periodMore { + .period-range { + .ui-datepicker-header { + background: red; + } } + } } #header_message { - height: auto; - .border-radius(0px); - - &.isPiwikDemo { - text-align: right; - position: absolute; - right: 16px; - top: 8px; - .dropdown { - min-width: 280px; - } + height: auto; + .border-radius(0); + + &.isPiwikDemo { + text-align: right; + position: absolute; + right: 16px; + top: 8px; + + .dropdown { + min-width: 280px; } + } } .ui-menu { - .ui-menu-item { - a { - color: @color-silver-l20; - text-transform: uppercase; - .font-default(10px, 18px); - padding: 2px; - } + .ui-menu-item { + a { + color: @color-silver-l20; + text-transform: uppercase; + .font-default(10px, 18px); + + padding: 2px; } + } } .loadingPiwikBelow, .loadingPiwik { - .font-default(13px, 13px); - color: @color-silver-l60; - font-weight: normal; + .font-default(13px, 13px); + + color: @color-silver-l60; + font-weight: normal; } .annotations { - table { - td { - .font-default(12px, 14px) !important; - color: @theme-color-text; - padding: 6px 5px; - } + table { + td { + .font-default(12px, 14px) !important; + + color: @theme-color-text; + padding: 6px 5px; } + } } //reports box .reports { - border: 1px solid @color-gray; - .border-radius(6px); - - h2 { - background: @theme-color-background-tinyContrast; - border-bottom: 1px solid @color-gray; - padding: 11px 15px 10px; - } + border: 1px solid @color-gray; + .border-radius(6px); + + h2 { + background: @theme-color-background-tinyContrast; + border-bottom: 1px solid @color-gray; + padding: 11px 15px 10px; + } } .jqplot-seriespicker-popover { - box-shadow: none; + box-shadow: none; } // transition box #Transitions_Container { - #Transitions_CenterBox { - border: 1px solid @color-gray; - box-shadow: none; - .border-radius(6px); - margin: 27px 0 0 319px; - width: 258px; - height: 400px; - background: @theme-color-background-contrast; - h2 { - color: #1e93d1; - border-bottom: 1px solid @color-gray; - font-weight: normal; - padding: 15px; - background: #f5f5f5; - .border-radius(6px 6px 0 0); - } + #Transitions_CenterBox { + border: 1px solid @color-gray; + box-shadow: none; + .border-radius(6px); - .Transitions_CenterBoxMetrics { - padding: 0; - p.Transitions_Margin { - text-align: left; - .font-default(15px, 20px); - border-bottom: 1px solid @color-gray; - padding: 13px; - .Transitions_Metric { - font-weight: normal; - } - } - .Transitions_IncomingTraffic { - padding: 0 15px; - - h3 { - font-weight: normal; - color: #000; - .font-default(15px, 20px); - margin-bottom: 10px; - } - } - .Transitions_OutgoingTraffic { - padding: 0 15px; - h3 { - font-weight: normal; - color: #000; - .font-default(15px, 20px); - margin-bottom: 10px; - } - } - } + margin: 27px 0 0 319px; + width: 258px; + height: 400px; + background: @theme-color-background-contrast; + + h2 { + color: #1e93d1; + border-bottom: 1px solid @color-gray; + font-weight: normal; + padding: 15px; + background: #f5f5f5; + .border-radius(6px 6px 0 0); } - .Transitions_TitleOfOpenGroup { - color: #000; + .Transitions_CenterBoxMetrics { + padding: 0; + + p.Transitions_Margin { + text-align: left; .font-default(15px, 20px); - font-weight: normal; - margin-top: -4px; + + border-bottom: 1px solid @color-gray; + padding: 13px; + + .Transitions_Metric { + font-weight: normal; + } + } + + .Transitions_IncomingTraffic { + padding: 0 15px; + + h3 { + font-weight: normal; + color: #000; + .font-default(15px, 20px); + + margin-bottom: 10px; + } + } + + .Transitions_OutgoingTraffic { + padding: 0 15px; + + h3 { + font-weight: normal; + color: #000; + .font-default(15px, 20px); + + margin-bottom: 10px; + } + } } + } + + .Transitions_TitleOfOpenGroup { + color: #000; + .font-default(15px, 20px); + + font-weight: normal; + margin-top: -4px; + } } table.dataTable tr td .dataTableRowActions { - a.rightmost, a { - margin: 6px 0 6px 0; - padding: 0 4px 0 0; - } + a.rightmost, + a { + margin: 6px 0 6px 0; + padding: 0 4px 0 0; + } } table.dataTable th .columnDocumentation { - color: @color-silver-l90; + color: @color-silver-l90; } diff --git a/plugins/Morpheus/stylesheets/ui/_list-group.less b/plugins/Morpheus/stylesheets/ui/_list-group.less index 7293710e61..5b3ff0a0fc 100644 --- a/plugins/Morpheus/stylesheets/ui/_list-group.less +++ b/plugins/Morpheus/stylesheets/ui/_list-group.less @@ -1,47 +1,50 @@ // Bootstrap component, Bootstrap code .list-group { - font-size: 12px; - // No need to set list-style: none; since .list-group-item is block level - margin-bottom: 20px; - padding-left: 0; // reset padding because ul and ol - box-shadow: 0 1px 1px rgba(0,0,0,.1); - border-radius: 4px; + font-size: 12px; + // No need to set list-style: none; since .list-group-item is block level + margin-bottom: 20px; + padding-left: 0; // reset padding because ul and ol + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + border-radius: 4px; } + .list-group-item { - color: #858585; - position: relative; - display: block; - padding: 10px 15px; - // Place the border on the list items and negative margin up for better styling - margin-bottom: -1px; - background-color: white; - border: 1px solid @theme-color-border; + color: #858585; + position: relative; + display: block; + padding: 10px 15px; + // Place the border on the list items and negative margin up for better styling + margin-bottom: -1px; + background-color: white; + border: 1px solid @theme-color-border; + + // Round the first and last items + &:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } - // Round the first and last items - &:first-child { - border-top-left-radius: 4px; - border-top-right-radius: 4px; - } - &:last-child { - margin-bottom: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } + &:last-child { + margin-bottom: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + } } + .list-group-item { - // Disabled state - &.disabled, - &.disabled:hover, - &.disabled:focus { - background-color: #FAFAFA; - color: #858585; - } + // Disabled state + &.disabled, + &.disabled:hover, + &.disabled:focus { + background-color: #fafafa; + color: #858585; + } - // Active class on item itself, not parent - &.active, - &.active:hover, - &.active:focus { - z-index: 2; // Place active items above their siblings for proper border styling - color: black; - } + // Active class on item itself, not parent + &.active, + &.active:hover, + &.active:focus { + z-index: 2; // Place active items above their siblings for proper border styling + color: black; + } } diff --git a/plugins/Morpheus/stylesheets/ui/_map.less b/plugins/Morpheus/stylesheets/ui/_map.less index e040f5a236..be639e624b 100644 --- a/plugins/Morpheus/stylesheets/ui/_map.less +++ b/plugins/Morpheus/stylesheets/ui/_map.less @@ -1,74 +1,73 @@ .RealTimeMap-overlay, .RealTimeMap-tooltip { - display: block; - position: absolute; - z-index: 1000; + display: block; + position: absolute; + z-index: 1000; } .RealTimeMap-overlay .content, .RealTimeMap-tooltip .content { - padding: 5px; - border-radius: 3px; - background: rgba(255, 255, 255, 0.9); + padding: 5px; + border-radius: 3px; + background: rgba(255, 255, 255, 0.9); } .RealTimeMap-title { - top: 5px; - left: 5px; + top: 5px; + left: 5px; } .RealTimeMap-legend { - right: 5px; - font-size: 9px; - bottom: 40px; + right: 5px; + font-size: 9px; + bottom: 40px; } .RealTimeMap-info { - left: 5px; - font-size: 11px; - bottom: 60px; - max-width: 42%; + left: 5px; + font-size: 11px; + bottom: 60px; + max-width: 42%; } .RealTimeMap-info-btn { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAA3NCSVQICAjb4U/gAAAAOVBMVEX///8AAAAAAABXV1dSUlKsrKzExMTd3d3V1dXp6end3d3p6enz8/P7+/v39/f///+vqZ6oopWUjH2LPulWAAAAE3RSTlMAESIzM2Z3mZmqqrvd7u7/////UUgTXgAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAYdEVYdENyZWF0aW9uIFRpbWUAMDMuMDEuMjAxM8rVeD8AAABnSURBVBiVhY/LFoAgCEQZ0p4W6f9/bIJ4slV3oTIeBoaICGADIAO8ibEwWn2IcwVovev7znqmCYRon9kEWUFvg3IysXyIXSil3fOvELupC9XUx7pQx/piDV1sVFLwMNF80sw97hj/AXRPCjtYdmhtAAAAAElFTkSuQmCC); - width: 16px; - height: 16px; - cursor: pointer; - left: 5px; - bottom: 40px; - position: absolute; - z-index: 1000; - opacity: 0.9; - + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAA3NCSVQICAjb4U/gAAAAOVBMVEX///8AAAAAAABXV1dSUlKsrKzExMTd3d3V1dXp6end3d3p6enz8/P7+/v39/f///+vqZ6oopWUjH2LPulWAAAAE3RSTlMAESIzM2Z3mZmqqrvd7u7/////UUgTXgAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAYdEVYdENyZWF0aW9uIFRpbWUAMDMuMDEuMjAxM8rVeD8AAABnSURBVBiVhY/LFoAgCEQZ0p4W6f9/bIJ4slV3oTIeBoaICGADIAO8ibEwWn2IcwVovev7znqmCYRon9kEWUFvg3IysXyIXSil3fOvELupC9XUx7pQx/piDV1sVFLwMNF80sw97hj/AXRPCjtYdmhtAAAAAElFTkSuQmCC); + width: 16px; + height: 16px; + cursor: pointer; + left: 5px; + bottom: 40px; + position: absolute; + z-index: 1000; + opacity: 0.9; } .realTimeMap_overlay { - position: absolute; - left: 10px; - font-size: 12px; - z-index: 10; - text-shadow: 1px 1px 1px #FFFFFF, -1px 1px 1px #FFFFFF, 1px -1px 1px #FFFFFF, -1px -1px 1px #FFFFFF, 1px 1px 1px #FFFFFF, -1px 1px 1px #FFFFFF, 1px -1px 1px #FFFFFF, -1px -1px 1px #FFFFFF; + position: absolute; + left: 10px; + font-size: 12px; + z-index: 10; + text-shadow: 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff, 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff; } .realTimeMap_datetime { - color: #887; - font-size: 14px; + color: #887; + font-size: 14px; } .uiTest .realTimeMap_datetime, .uiTest .realTimeMap_overlay { - visibility: hidden; + visibility: hidden; } .realtime-map[data-name=white-fill] { - color: #f2f2f2 !important; + color: #f2f2f2 !important; } .realtime-map[data-name=visit-stroke] { - color: #fff !important; + color: #fff !important; } .realtime-map[data-name=white-bg] { - color: #808080 !important; + color: #808080 !important; } diff --git a/plugins/Morpheus/stylesheets/ui/_navs.less b/plugins/Morpheus/stylesheets/ui/_navs.less index c50f4cdcbd..644ad7f22e 100644 --- a/plugins/Morpheus/stylesheets/ui/_navs.less +++ b/plugins/Morpheus/stylesheets/ui/_navs.less @@ -1,59 +1,62 @@ // Most of this is Bootstrap code and can be removed when switching to Bootstrap .nav { - margin-bottom: 20px; - padding-left: 0; // Override default ul/ol - list-style: none; - - > li { - position: relative; - display: block; - - > a { - position: relative; - display: block; - padding: 11px 70px; - text-decoration: none; - } + margin-bottom: 20px; + padding-left: 0; // Override default ul/ol + list-style: none; + + > li { + position: relative; + display: block; + + > a { + position: relative; + display: block; + padding: 11px 70px; + text-decoration: none; } + } } // .clearfix -.nav:before, .nav:after { - display: table; - content: " "; +.nav::before, + .nav::after { + display: table; + content: " "; } -.nav:after { - clear: both; + +.nav::after { + clear: both; } .nav-pills { - > li { - float: left; - border: 1px solid @color-silver-l85; - border-left: 0; - - &:first-child { - border-radius: 3px 0 0 3px; - border: 1px solid @color-silver-l85; - } - &:last-child { - border-radius: 0 3px 3px 0; - } - - > a { - color: @theme-color-link; - background-color: @color-silver-l95; - - &:hover, - &:focus { - background-color: @color-silver-l85; - } - } - - &.active > a { - color: @theme-color-text; - background-color: @theme-color-background-base; - cursor: default; - } + > li { + float: left; + border: 1px solid @color-silver-l85; + border-left: 0; + + &:first-child { + border-radius: 3px 0 0 3px; + border: 1px solid @color-silver-l85; + } + + &:last-child { + border-radius: 0 3px 3px 0; + } + + > a { + color: @theme-color-link; + background-color: @color-silver-l95; + + &:hover, + &:focus { + background-color: @color-silver-l85; + } + } + + &.active > a { + color: @theme-color-text; + background-color: @theme-color-background-base; + cursor: default; } + } } diff --git a/plugins/Morpheus/stylesheets/ui/_panels.less b/plugins/Morpheus/stylesheets/ui/_panels.less index 6c646bdd29..44fa40ecf6 100644 --- a/plugins/Morpheus/stylesheets/ui/_panels.less +++ b/plugins/Morpheus/stylesheets/ui/_panels.less @@ -1,71 +1,77 @@ // Most of this is Bootstrap code and can be removed when switching to Bootstrap .panel { - margin-bottom: 20px; - background-color: @color-silver-l95; - border: 1px solid @color-silver-l85; - .border-radius(3px); - box-shadow: 0 1px 1px rgba(0,0,0,.05); + margin-bottom: 20px; + background-color: @color-silver-l95; + border: 1px solid @color-silver-l85; + .border-radius(3px); + + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } .panel-body { - padding: 15px; + padding: 15px; } // .clearfix -.panel-body:before, .panel-body:after { - display: table; - content: " "; +.panel-body::before, + .panel-body::after { + display: table; + content: " "; } -.panel-body:after { - clear: both; + +.panel-body::after { + clear: both; } .panel-heading { - padding: 10px 15px; - background-color: @theme-color-background-base; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - position: relative; + padding: 10px 15px; + background-color: @theme-color-background-base; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + position: relative; + + // Within heading, strip any `h*` tag of its default margins for spacing. + .panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: 16px; + line-height: inherit; + color: inherit; + text-overflow: ellipsis; + overflow: hidden; - // Within heading, strip any `h*` tag of its default margins for spacing. - .panel-title { - margin-top: 0; - margin-bottom: 0; - font-size: 16px; - line-height: inherit; - color: inherit; - text-overflow: ellipsis; - overflow: hidden; + &.panel-title-block { + height: 26px; + + > a { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + padding-top: 12px; + } + } - &.panel-title-block { - height: 26px; - > a { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - padding-top: 12px; - } - } + > a, + > small, + > .small, + > small > a, + > .small > a { + color: inherit; + text-decoration: none; - > a, - > small, - > .small, - > small > a, - > .small > a { - color: inherit; - text-decoration: none; - &:focus, &:hover { - text-decoration: underline; - } - } + &:focus, + &:hover { + text-decoration: underline; + } } + } } .panel-footer { - padding: 10px 15px; - background-color: @theme-color-background-base; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; + padding: 10px 15px; + background-color: @theme-color-background-base; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; } diff --git a/plugins/Morpheus/stylesheets/ui/_popups.less b/plugins/Morpheus/stylesheets/ui/_popups.less index 0e328f37a7..93d9a00499 100644 --- a/plugins/Morpheus/stylesheets/ui/_popups.less +++ b/plugins/Morpheus/stylesheets/ui/_popups.less @@ -1,44 +1,58 @@ .ui-dialog-title { - color: @theme-color-text; - font-weight: normal; - img { - height: 16px; - } + color: @theme-color-text; + font-weight: normal; + + img { + height: 16px; + } } .ui-dialog .ui-widget-header { - color: @theme-color-text; - .font-default(18px, 24px); - font-weight: bold; + color: @theme-color-text; + .font-default(18px, 24px); + + font-weight: bold; } #feedback-sent { - a { - color: @theme-color-link; - } + a { + color: @theme-color-link; + } } -.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { - border: 0px !important; - .ui-icon { - .opacity(0.5); - } - &:hover { - .opacity(1); - background: none !important; - } +.ui-state-default, + .ui-widget-content .ui-state-default, + .ui-widget-header .ui-state-default { + border: 0 !important; + + .ui-icon { + .opacity(0.5); + } + + &:hover { + .opacity(1); + + background: none !important; + } } -button.ui-state-default, .ui-widget-content button.ui-state-default, .ui-widget-header button.ui-state-default { +button.ui-state-default, + .ui-widget-content button.ui-state-default, + .ui-widget-header button.ui-state-default { &:hover { background: @theme-color-brand !important; } } -.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { - border: 0px !important; +.ui-state-hover, + .ui-widget-content .ui-state-hover, + .ui-widget-header .ui-state-hover, + .ui-state-focus, + .ui-widget-content .ui-state-focus, + .ui-widget-header .ui-state-focus { + border: 0 !important; } .ui-menu .ui-menu-item a.ui-state-focus { - background: @color-silver-l90; + background: @color-silver-l90; } diff --git a/plugins/Morpheus/stylesheets/ui/_progress-bars.less b/plugins/Morpheus/stylesheets/ui/_progress-bars.less index a4f87a6281..8275ca7a9f 100644 --- a/plugins/Morpheus/stylesheets/ui/_progress-bars.less +++ b/plugins/Morpheus/stylesheets/ui/_progress-bars.less @@ -1,24 +1,24 @@ // Bootstrap component .progress { - overflow: hidden; - height: 20px; - margin-bottom: 20px; - background-color: @theme-color-background-tinyContrast; - box-shadow: inset 0 1px 1px rgba(0,0,0,.1); - border-radius: 10px; - border: solid 1px @theme-color-border; - padding: 4px; + overflow: hidden; + height: 20px; + margin-bottom: 20px; + background-color: @theme-color-background-tinyContrast; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); + border-radius: 10px; + border: solid 1px @theme-color-border; + padding: 4px; } // Bar of progress .progress-bar { - float: left; - width: 0; - height: 100%; - font-size: 12px; - line-height: 20px; - color: @theme-color-brand-contrast; - text-align: center; - background-color: @theme-color-brand; - border-radius: 6px; + float: left; + width: 0; + height: 100%; + font-size: 12px; + line-height: 20px; + color: @theme-color-brand-contrast; + text-align: center; + background-color: @theme-color-brand; + border-radius: 6px; } diff --git a/plugins/Morpheus/stylesheets/ui/_tables.less b/plugins/Morpheus/stylesheets/ui/_tables.less index eb2721ecfb..fd034ba4a6 100644 --- a/plugins/Morpheus/stylesheets/ui/_tables.less +++ b/plugins/Morpheus/stylesheets/ui/_tables.less @@ -2,15 +2,17 @@ // are used for layouts (e.g. forms in the admin section use tables) // TODO refactor that: https://github.com/piwik/piwik/issues/8023 .simple-table { - margin: 20px 0; - width: 100%; - border-top: 1px solid @color-silver-l90; + margin: 20px 0; + width: 100%; + border-top: 1px solid @color-silver-l90; - th, td { - border-bottom: 1px solid @color-silver-l90; - padding: 12px; - } - th { - text-align: left; - } + th, + td { + border-bottom: 1px solid @color-silver-l90; + padding: 12px; + } + + th { + text-align: left; + } } diff --git a/plugins/Morpheus/stylesheets/ui/_tabs.less b/plugins/Morpheus/stylesheets/ui/_tabs.less index 8a8a127a5d..2a2ba9bd27 100644 --- a/plugins/Morpheus/stylesheets/ui/_tabs.less +++ b/plugins/Morpheus/stylesheets/ui/_tabs.less @@ -1,23 +1,27 @@ .row { - .tabs { - .indicator { - background-color: @theme-color-link; - } - .tab { - a { - &:hover { - color: @theme-color-link; - opacity: 0.7; - } - color: @theme-color-link; - } - } + .tabs { + .indicator { + background-color: @theme-color-link; } - .tab-content { - padding: 24px 24px 16px 0 !important; - a { - color: @theme-color-link; - text-decoration: none; + + .tab { + a { + &:hover { + color: @theme-color-link; + opacity: 0.7; } + + color: @theme-color-link; + } + } + } + + .tab-content { + padding: 24px 24px 16px 0 !important; + + a { + color: @theme-color-link; + text-decoration: none; } -}
\ No newline at end of file + } +} diff --git a/plugins/Morpheus/stylesheets/ui/_tooltip.less b/plugins/Morpheus/stylesheets/ui/_tooltip.less index 50ab20ec6c..58bc26e85e 100644 --- a/plugins/Morpheus/stylesheets/ui/_tooltip.less +++ b/plugins/Morpheus/stylesheets/ui/_tooltip.less @@ -1,30 +1,38 @@ body .ui-tooltip, body .ui-tooltip.Transitions_Tooltip_Small { - border: 0px !important; - background: #000000 !important; - box-shadow: none !important; - .border-radius(3px); - .ui-tooltip-content { - background: #000000; - color: @color-silver-l90; - padding: 5px; - } - h1, h2, h3, h4, h5 { - font-weight: normal; - color: @color-white; - } + border: 0 !important; + background: #000 !important; + box-shadow: none !important; + .border-radius(3px); + + .ui-tooltip-content { + background: #000; + color: @color-silver-l90; + padding: 5px; + } + + h1, + h2, + h3, + h4, + h5 { + font-weight: normal; + color: @color-white; + } } .columnDocumentation { - border: 0px !important; - background: #000000 !important; - color: @color-silver-l60; - .font-default(12px, 16px); - padding: 7px 10px 8px 10px; - text-transform: none !important; - .columnDocumentationTitle { - color: #fff; - font-weight: normal !important; - margin-bottom: 2px; - } -}
\ No newline at end of file + border: 0 !important; + background: #000 !important; + color: @color-silver-l60; + .font-default(12px, 16px); + + padding: 7px 10px 8px 10px; + text-transform: none !important; + + .columnDocumentationTitle { + color: #fff; + font-weight: normal !important; + margin-bottom: 2px; + } +} diff --git a/plugins/Morpheus/stylesheets/uibase/_dataTable.less b/plugins/Morpheus/stylesheets/uibase/_dataTable.less index d124d8d9f6..a8878ccac7 100644 --- a/plugins/Morpheus/stylesheets/uibase/_dataTable.less +++ b/plugins/Morpheus/stylesheets/uibase/_dataTable.less @@ -1,3 +1,3 @@ .datatable-label-category { - color:#999; + color: #999; } diff --git a/plugins/Morpheus/stylesheets/uibase/_header.less b/plugins/Morpheus/stylesheets/uibase/_header.less index 852ee4041e..e31cf081d3 100644 --- a/plugins/Morpheus/stylesheets/uibase/_header.less +++ b/plugins/Morpheus/stylesheets/uibase/_header.less @@ -11,7 +11,6 @@ width: 144px; } } - } #logo > a { @@ -24,6 +23,7 @@ #root #logo { width: 80px; } + #root #logo img.default-piwik-logo { width: 100%; } @@ -32,7 +32,7 @@ #javascriptDisabled, #javascriptDisabled a { font-weight: bold; - color: #F88D22; + color: #f88d22; padding: 15px; clear: both; } diff --git a/plugins/Morpheus/stylesheets/uibase/_headerMessage.less b/plugins/Morpheus/stylesheets/uibase/_headerMessage.less index 9e564d0980..3210baafeb 100644 --- a/plugins/Morpheus/stylesheets/uibase/_headerMessage.less +++ b/plugins/Morpheus/stylesheets/uibase/_headerMessage.less @@ -28,9 +28,9 @@ #header_message .dropdown { font-size: 12px; - margin-top: 0px; - border-top:5px solid #edecec; - box-shadow: 8px 6px 7px 0px rgba(0, 0, 0, 0.3); + margin-top: 0; + border-top: 5px solid #edecec; + box-shadow: 8px 6px 7px 0 rgba(0, 0, 0, 0.3); } #header_message .header_short { @@ -57,6 +57,7 @@ line-height: 1.7em; } -.header_info, .header_info a { +.header_info, + .header_info a { color: @theme-color-text-light; } diff --git a/plugins/Morpheus/stylesheets/uibase/_loading.less b/plugins/Morpheus/stylesheets/uibase/_loading.less index f375f7917f..17e4e9f454 100644 --- a/plugins/Morpheus/stylesheets/uibase/_loading.less +++ b/plugins/Morpheus/stylesheets/uibase/_loading.less @@ -12,7 +12,7 @@ color: @color-silver-l60; font-size: 13px; margin-left: 28px; - display:none; + display: none; } #root > #loadingError { @@ -26,4 +26,4 @@ display: none; color: @theme-color-brand; font-weight: normal; -}
\ No newline at end of file +} diff --git a/plugins/Morpheus/stylesheets/uibase/_periodSelect.less b/plugins/Morpheus/stylesheets/uibase/_periodSelect.less index 06b61554fa..023f278449 100644 --- a/plugins/Morpheus/stylesheets/uibase/_periodSelect.less +++ b/plugins/Morpheus/stylesheets/uibase/_periodSelect.less @@ -21,30 +21,30 @@ #periodString td { vertical-align: top; - border-radius: 0 + border-radius: 0; } #periodString { .ui-widget-header, .ui-datepicker { - &.ui-helper-clearfix:before, &.ui-helper-clearfix:after { + &.ui-helper-clearfix::before, + &.ui-helper-clearfix::after { display: inline; clear: none; content: none !important; } } - } #periodString .calendar-icon { width: 13px; height: 15px; - display:inline-block; - position:absolute; + display: inline-block; + position: absolute; right: 19px; top: 9px; background: url("plugins/Morpheus/images/icon-calendar.png") no-repeat scroll; - cursor:pointer; + cursor: pointer; } #periodString strong { @@ -76,4 +76,4 @@ #periodString label.selected-period-label { text-decoration: underline; -}
\ No newline at end of file +} |