From 11e410c9c03bfc91737e176d35f2760cb4b7182b Mon Sep 17 00:00:00 2001 From: Antoine Clausse Date: Thu, 5 Jun 2025 09:28:57 +0200 Subject: [PATCH] Merge pull request #26163 from overleaf/revert-25745-ac-bs5-metrics-module Revert "[web] Migrate metrics module Pug files to Bootstrap 5 (#25745)" GitOrigin-RevId: b97eecc2232f56833391fb789902f9a85936c365 --- services/web/.prettierignore | 2 +- .../frontend/stylesheets/app/admin-hub.less | 156 ++ .../institution-hub.less} | 28 +- .../metrics/metrics.scss => app/metrics.less} | 58 +- .../web/frontend/stylesheets/app/portals.less | 34 - .../publisher-hub.less} | 36 +- .../stylesheets/bootstrap-5/modules/all.scss | 7 - .../modules/metrics/admin-hub.scss | 93 -- .../modules/metrics/daterange-picker.scss | 617 -------- .../bootstrap-5/pages/admin/admin.scss | 5 - .../bootstrap-5/pages/project-list.scss | 2 +- .../components/daterange-picker.less | 656 ++++++++ .../nvd3.scss => components/nvd3.less} | 1368 +++++++++-------- .../nvd3_override.less} | 5 +- .../web/frontend/stylesheets/main-style.less | 7 + 15 files changed, 1557 insertions(+), 1517 deletions(-) create mode 100644 services/web/frontend/stylesheets/app/admin-hub.less rename services/web/frontend/stylesheets/{bootstrap-5/modules/metrics/institution-hub.scss => app/institution-hub.less} (52%) rename services/web/frontend/stylesheets/{bootstrap-5/modules/metrics/metrics.scss => app/metrics.less} (78%) rename services/web/frontend/stylesheets/{bootstrap-5/modules/metrics/publisher-hub.scss => app/publisher-hub.less} (52%) delete mode 100644 services/web/frontend/stylesheets/bootstrap-5/modules/metrics/admin-hub.scss delete mode 100644 services/web/frontend/stylesheets/bootstrap-5/modules/metrics/daterange-picker.scss create mode 100644 services/web/frontend/stylesheets/components/daterange-picker.less rename services/web/frontend/stylesheets/{bootstrap-5/modules/metrics/nvd3.scss => components/nvd3.less} (78%) rename services/web/frontend/stylesheets/{bootstrap-5/modules/metrics/nvd3_override.scss => components/nvd3_override.less} (74%) diff --git a/services/web/.prettierignore b/services/web/.prettierignore index 39282c64c2..f4be187b87 100644 --- a/services/web/.prettierignore +++ b/services/web/.prettierignore @@ -6,7 +6,7 @@ frontend/js/vendor modules/**/frontend/js/vendor public/js public/minjs -frontend/stylesheets/bootstrap-5/modules/metrics/nvd3.scss +frontend/stylesheets/components/nvd3.less frontend/js/features/source-editor/lezer-latex/latex.mjs frontend/js/features/source-editor/lezer-latex/latex.terms.mjs frontend/js/features/source-editor/lezer-bibtex/bibtex.mjs diff --git a/services/web/frontend/stylesheets/app/admin-hub.less b/services/web/frontend/stylesheets/app/admin-hub.less new file mode 100644 index 0000000000..bae3312447 --- /dev/null +++ b/services/web/frontend/stylesheets/app/admin-hub.less @@ -0,0 +1,156 @@ +.hub-header { + h2 { + display: inline-block; + } + a { + color: @ol-dark-green; + } + i { + font-size: 30px; + } + .dropdown { + margin-right: 10px; + } +} +.admin-item { + position: relative; + margin-bottom: 60px; + .section-title { + text-transform: capitalize; + } + .alert-danger { + color: @ol-red; + } +} +.hidden-chart-section { + display: none; +} +.hub-circle { + display: inline-block; + background-color: @accent-color-secondary; + border-radius: 50%; + width: 160px; + height: 160px; + text-align: center; + //padding-top: 160px / 6.4; + img { + height: 160px - 160px / 3.2; + } + padding-top: 50px; + color: white; +} +.hub-circle-number { + display: block; + font-size: 36px; + font-weight: 900; + line-height: 1; +} +.hub-big-number { + float: left; + font-size: 32px; + font-weight: 900; + line-height: 40px; + color: @accent-color-secondary; +} +.hub-big-number, +.hub-number-label { + display: block; +} +.hub-metric-link { + position: absolute; + top: 9px; + right: 0; + a { + color: @accent-color-secondary; + } + i { + margin-right: 5px; + } +} +.custom-donut-container { + svg { + max-width: 700px; + margin: auto; + } + .chart-center-text { + font-family: @font-family-sans-serif; + font-size: 40px; + font-weight: bold; + fill: @accent-color-secondary; + text-anchor: middle; + } + + .nv-legend-text { + font-family: @font-family-sans-serif; + font-size: 14px; + } +} +.chart-no-center-text { + .chart-center-text { + display: none; + } +} + +.superscript { + font-size: @font-size-large; +} + +.admin-page { + summary { + // firefox does not show markers for block items + display: list-item; + } +} + +.material-switch { + input[type='checkbox'] { + display: none; + + &:checked + label::before { + background: inherit; + opacity: 0.5; + } + &:checked + label::after { + background: inherit; + left: 20px; + } + &:disabled + label { + opacity: 0.5; + cursor: not-allowed; + } + } + + label { + cursor: pointer; + height: 0; + position: relative; + width: 40px; + + &:before { + background: rgb(0, 0, 0); + box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); + border-radius: 8px; + content: ''; + height: 16px; + margin-top: -2px; + position: absolute; + opacity: 0.3; + transition: all 0.2s ease-in-out; + width: 40px; + } + + &:after { + background: rgb(255, 255, 255); + border-radius: 16px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + content: ''; + height: 24px; + left: -4px; + margin-top: -2px; + position: absolute; + top: -4px; + transition: all 0.2s ease-in-out; + width: 24px; + } + } +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/institution-hub.scss b/services/web/frontend/stylesheets/app/institution-hub.less similarity index 52% rename from services/web/frontend/stylesheets/bootstrap-5/modules/metrics/institution-hub.scss rename to services/web/frontend/stylesheets/app/institution-hub.less index 67cbe580e4..cb705e4b99 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/institution-hub.scss +++ b/services/web/frontend/stylesheets/app/institution-hub.less @@ -1,54 +1,38 @@ #institution-hub { - .section-header { + .section_header { .dropdown { - margin-right: var(--spacing-04); + margin-right: 10px; } } #usage { .recent-activity { .overbox { - @include body-base; + font-size: 16px; } - .hub-big-number, .hub-number-label, .worked-on { display: block; width: 50%; } - .hub-big-number { - padding-right: var(--spacing-04); + padding-right: 10px; text-align: right; } - .hub-number-label, .worked-on { float: right; } - .hub-number-label { &:nth-child(odd) { - margin-top: var(--spacing-06); + margin-top: 16px; } } - .worked-on { - color: var(--content-secondary); + color: @text-small-color; font-style: italic; } } } - - .overbox { - margin: 0; - padding: var(--spacing-10) var(--spacing-07); - background: var(--white); - border: 1px solid var(--content-disabled); - - &.overbox-small { - padding: var(--spacing-04); - } - } } diff --git a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/metrics.scss b/services/web/frontend/stylesheets/app/metrics.less similarity index 78% rename from services/web/frontend/stylesheets/bootstrap-5/modules/metrics/metrics.scss rename to services/web/frontend/stylesheets/app/metrics.less index 32cde9c522..5256b8a8bd 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/metrics.scss +++ b/services/web/frontend/stylesheets/app/metrics.less @@ -1,6 +1,6 @@ #metrics { max-width: none; - padding: 0 var(--spacing-09); + padding: 0 30px; width: auto; svg.nvd3-svg { @@ -9,18 +9,17 @@ .overbox { margin: 0; - padding: var(--spacing-10) var(--spacing-07); + padding: 40px 20px; background: #fff; border: 1px solid #dfdfdf; - .box { - padding-bottom: var(--spacing-09); + padding-bottom: 30px; overflow: hidden; - margin-bottom: var(--spacing-10); - border-bottom: 1px solid rgb(216 216 216); + margin-bottom: 40px; + border-bottom: 1px solid rgb(216, 216, 216); .header { - margin-bottom: var(--spacing-07); + margin-bottom: 20px; h4 { font-size: 19px; @@ -28,14 +27,10 @@ } } } - - &.overbox-small { - padding: var(--spacing-04); - } } .print-button { - margin-right: var(--spacing-04); + margin-right: 10px; font-size: 20px; } @@ -45,17 +40,21 @@ } .metric-col { - padding: var(--spacing-06); + padding: 15px; + } + + .metric-header-container { + h4 { + margin-bottom: 0; + } } svg { display: block; height: 250px; - text { font-family: 'Open Sans', sans-serif; } - &:not(:root) { overflow: visible; } @@ -80,10 +79,6 @@ // BEGIN: Metrics header .metric-header-container { - h4 { - margin-bottom: 0; - } - > h4 { margin-top: 0; margin-bottom: 0; @@ -94,14 +89,12 @@ font-size: 0.5em; } } - // END: Metrics header // BEGIN: Metrics footer .metric-footer-container { text-align: center; } - // END: Metrics footer // BEGIN: Metrics overlays @@ -114,7 +107,7 @@ height: 100%; width: 100%; padding: 16px; /* 15px of .metric-col padding + 1px border */ - padding-top: 56px; /* Same as above + 30px for title + 10px overbox padding */ + padding-top: 56px; /* Same as above + 30px for title + 10px overbox padding*/ } .metric-overlay-loading { @@ -136,20 +129,19 @@ width: 100%; height: 100%; } - // END: Metrics overlays } #metrics-header { - @include media-breakpoint-up(lg) { - margin-bottom: var(--spacing-09); + @media (min-width: 1200px) { + margin-bottom: 30px; } h3 { display: inline-block; } - .section-header { + .section_header { margin-bottom: 0; } @@ -170,11 +162,9 @@ #dates-container { display: inline-block; - .daterangepicker { - margin-right: var(--spacing-06); + margin-right: 15px; } - #metrics-dates { padding: 0; } @@ -182,10 +172,14 @@ } #metrics-footer { - margin-top: var(--spacing-09); + margin-top: 30px; text-align: center; } -body.print-loading #metrics .metric-col { - opacity: 0.5; +body.print-loading { + #metrics { + .metric-col { + opacity: 0.5; + } + } } diff --git a/services/web/frontend/stylesheets/app/portals.less b/services/web/frontend/stylesheets/app/portals.less index b69176b05f..9dfd4a57b7 100644 --- a/services/web/frontend/stylesheets/app/portals.less +++ b/services/web/frontend/stylesheets/app/portals.less @@ -141,38 +141,4 @@ } } } - .hub-circle { - display: inline-block; - background-color: @green-70; - border-radius: 50%; - width: 160px; - height: 160px; - text-align: center; - padding-top: 50px; - color: white; - } - .hub-circle-number { - display: block; - font-size: 36px; - font-weight: 900; - line-height: 1; - } - .custom-donut-container { - svg { - max-width: 700px; - margin: auto; - } - .chart-center-text { - font-family: @font-family-sans-serif; - font-size: 40px; - font-weight: bold; - fill: @green-70; - text-anchor: middle; - } - - .nv-legend-text { - font-family: @font-family-sans-serif; - font-size: 14px; - } - } } diff --git a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/publisher-hub.scss b/services/web/frontend/stylesheets/app/publisher-hub.less similarity index 52% rename from services/web/frontend/stylesheets/bootstrap-5/modules/metrics/publisher-hub.scss rename to services/web/frontend/stylesheets/app/publisher-hub.less index f59b33e6ef..8d7e5ea7eb 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/publisher-hub.scss +++ b/services/web/frontend/stylesheets/app/publisher-hub.less @@ -2,66 +2,48 @@ .recent-activity { .hub-big-number { text-align: right; - padding-right: var(--spacing-06); + padding-right: 15px; } } #templates-container { width: 100%; - tr { - border: 1px solid var(--bg-light-secondary); + border: 1px solid @ol-blue-gray-0; } - td { - padding: var(--spacing-06); + padding: 15px; } - td:last-child { text-align: right; } - .title-cell { max-width: 300px; } - .title-text { font-weight: bold; } - .hub-big-number { width: 60%; - padding-right: var(--spacing-04); - padding-top: var(--spacing-04); + padding-right: 10px; + padding-top: 10px; text-align: right; } - .hub-number-label, .since { width: 35%; float: right; - - @include media-breakpoint-down(md) { + @media screen and (max-width: 940px) { float: none; } } - .hub-long-big-number { - padding-right: var(--spacing-10); + padding-right: 40px; } - .created-on { - @include body-sm; - - color: var(--content-disabled); + color: @gray-light; font-style: italic; + font-size: 14px; } } - - .overbox { - margin: 0; - padding: var(--spacing-10) var(--spacing-07); - background: var(--white); - border: 1px solid var(--content-disabled); - } } diff --git a/services/web/frontend/stylesheets/bootstrap-5/modules/all.scss b/services/web/frontend/stylesheets/bootstrap-5/modules/all.scss index 01d58c8c20..b92eb80551 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/modules/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/modules/all.scss @@ -1,10 +1,3 @@ -@import 'metrics/admin-hub'; -@import 'metrics/daterange-picker'; -@import 'metrics/institution-hub'; -@import 'metrics/metrics'; -@import 'metrics/nvd3'; -@import 'metrics/nvd3_override'; -@import 'metrics/publisher-hub'; @import 'third-party-references'; @import 'symbol-palette'; @import 'writefull'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/admin-hub.scss b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/admin-hub.scss deleted file mode 100644 index 3e6576cf92..0000000000 --- a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/admin-hub.scss +++ /dev/null @@ -1,93 +0,0 @@ -.hub-header { - h2 { - display: inline-block; - } - - .dropdown { - margin-right: var(--spacing-04); - } -} - -.admin-item { - position: relative; - margin-bottom: var(--spacing-12); - - .section-title { - text-transform: capitalize; - } - - .alert-danger { - color: var(--content-danger); - } -} - -.hidden-chart-section { - display: none; -} - -.hub-circle { - display: inline-block; - background-color: var(--green-70); - border-radius: 50%; - width: 160px; - height: 160px; - text-align: center; - padding-top: 50px; - color: white; -} - -.hub-circle-number { - display: block; - font-size: 36px; - font-weight: 900; - line-height: 1; -} - -.hub-big-number { - float: left; - font-size: 32px; - font-weight: 900; - line-height: 40px; - color: var(--green-70); -} - -.hub-big-number, -.hub-number-label { - display: block; -} - -.hub-metric-link { - position: absolute; - top: 9px; - right: 0; - - i { - margin-right: 5px; - } -} - -.custom-donut-container { - svg { - max-width: 700px; - margin: auto; - } - - .chart-center-text { - font-family: $font-family-sans-serif; - font-size: 40px; - font-weight: bold; - fill: var(--green-70); - text-anchor: middle; - } - - .nv-legend-text { - font-family: $font-family-sans-serif; - font-size: 14px; - } -} - -.chart-no-center-text { - .chart-center-text { - display: none; - } -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/daterange-picker.scss b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/daterange-picker.scss deleted file mode 100644 index 33e466bd91..0000000000 --- a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/daterange-picker.scss +++ /dev/null @@ -1,617 +0,0 @@ -// A stylesheet for use with Bootstrap 3.x -// @author: Dan Grossman http://www.dangrossman.info/ -// @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved. -// @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php -// @website: https://www.improvely.com/ - -/* stylelint-disable selector-class-pattern */ - -// VARIABLES - -// Settings - -// The class name to contain everything within. -$arrow-size: 7px; - -// Colors -$daterangepicker-color: $green-50; -$daterangepicker-bg-color: #fff; -$daterangepicker-cell-color: $daterangepicker-color; -$daterangepicker-cell-border-color: transparent; -$daterangepicker-cell-bg-color: $daterangepicker-bg-color; -$daterangepicker-cell-hover-color: $daterangepicker-color; -$daterangepicker-cell-hover-border-color: $daterangepicker-cell-border-color; -$daterangepicker-cell-hover-bg-color: #eee; -$daterangepicker-in-range-color: #000; -$daterangepicker-in-range-border-color: transparent; -$daterangepicker-in-range-bg-color: #ebf4f8; -$daterangepicker-active-color: #fff; -$daterangepicker-active-bg-color: #138a07; -$daterangepicker-active-border-color: transparent; -$daterangepicker-unselected-color: #999; -$daterangepicker-unselected-border-color: transparent; -$daterangepicker-unselected-bg-color: #fff; - -// daterangepicker -$daterangepicker-width: 278px; -$daterangepicker-padding: 4px; -$daterangepicker-z-index: 3000; -$daterangepicker-border-size: 1px; -$daterangepicker-border-color: #ccc; -$daterangepicker-border-radius: 4px; - -// Calendar -$daterangepicker-calendar-margin: $daterangepicker-padding; -$daterangepicker-calendar-bg-color: $daterangepicker-bg-color; -$daterangepicker-calendar-border-size: 1px; -$daterangepicker-calendar-border-color: $daterangepicker-bg-color; -$daterangepicker-calendar-border-radius: $daterangepicker-border-radius; - -// Calendar Cells -$daterangepicker-cell-size: 20px; -$daterangepicker-cell-width: $daterangepicker-cell-size; -$daterangepicker-cell-height: $daterangepicker-cell-size; -$daterangepicker-cell-border-radius: $daterangepicker-calendar-border-radius; -$daterangepicker-cell-border-size: 1px; - -// Dropdowns -$daterangepicker-dropdown-z-index: $daterangepicker-z-index + 1; - -// Controls -$daterangepicker-control-height: 30px; -$daterangepicker-control-line-height: $daterangepicker-control-height; -$daterangepicker-control-color: #555; -$daterangepicker-control-border-size: 1px; -$daterangepicker-control-border-color: #ccc; -$daterangepicker-control-border-radius: 4px; -$daterangepicker-control-active-border-size: 1px; -$daterangepicker-control-active-border-color: $green-50; -$daterangepicker-control-active-border-radius: $daterangepicker-control-border-radius; -$daterangepicker-control-disabled-color: #ccc; - -// Ranges -$daterangepicker-ranges-color: $green-50; -$daterangepicker-ranges-bg-color: daterangepicker-ranges-color; -$daterangepicker-ranges-border-size: 1px; -$daterangepicker-ranges-border-color: $daterangepicker-ranges-bg-color; -$daterangepicker-ranges-border-radius: $daterangepicker-border-radius; -$daterangepicker-ranges-hover-color: #fff; -$daterangepicker-ranges-hover-bg-color: $daterangepicker-ranges-color; -$daterangepicker-ranges-hover-border-size: $daterangepicker-ranges-border-size; -$daterangepicker-ranges-hover-border-color: $daterangepicker-ranges-hover-bg-color; -$daterangepicker-ranges-hover-border-radius: $daterangepicker-border-radius; -$daterangepicker-ranges-active-border-size: $daterangepicker-ranges-border-size; -$daterangepicker-ranges-active-border-color: $daterangepicker-ranges-bg-color; -$daterangepicker-ranges-active-border-radius: $daterangepicker-border-radius; - -// STYLESHEETS -.daterangepicker { - position: absolute; - color: $daterangepicker-color; - background-color: $daterangepicker-bg-color; - border-radius: $daterangepicker-border-radius; - width: $daterangepicker-width; - padding: $daterangepicker-padding; - margin-top: $daterangepicker-border-size; - - // TODO: Should these be parameterized?? - // top: 100px; - // left: 20px; - - $arrow-prefix-size: $arrow-size; - $arrow-suffix-size: ($arrow-size - $daterangepicker-border-size); - - &::before, - &::after { - position: absolute; - display: inline-block; - border-bottom-color: rgb(0 0 0 / 20%); - content: ''; - } - - &::before { - top: -$arrow-prefix-size; - border-right: $arrow-prefix-size solid transparent; - border-left: $arrow-prefix-size solid transparent; - border-bottom: $arrow-prefix-size solid $daterangepicker-border-color; - } - - &::after { - top: -$arrow-suffix-size; - border-right: $arrow-suffix-size solid transparent; - border-bottom: $arrow-suffix-size solid $daterangepicker-bg-color; - border-left: $arrow-suffix-size solid transparent; - } - - &.opensleft { - &::before { - // TODO: Make this relative to prefix size. - right: $arrow-prefix-size + 2px; - } - - &::after { - // TODO: Make this relative to suffix size. - right: $arrow-suffix-size + 4px; - } - } - - &.openscenter { - &::before { - left: 0; - right: 0; - width: 0; - margin-left: auto; - margin-right: auto; - } - - &::after { - left: 0; - right: 0; - width: 0; - margin-left: auto; - margin-right: auto; - } - } - - &.opensright { - &::before { - // TODO: Make this relative to prefix size. - left: $arrow-prefix-size + 2px; - } - - &::after { - // TODO: Make this relative to suffix size. - left: $arrow-suffix-size + 4px; - } - } - - &.dropup { - margin-top: -5px; - - // NOTE: Note sure why these are special-cased. - &::before { - top: initial; - bottom: -$arrow-prefix-size; - border-bottom: initial; - border-top: $arrow-prefix-size solid $daterangepicker-border-color; - } - - &::after { - top: initial; - bottom: -$arrow-suffix-size; - border-bottom: initial; - border-top: $arrow-suffix-size solid $daterangepicker-bg-color; - } - } - - &.dropdown-menu { - max-width: none; - z-index: $daterangepicker-dropdown-z-index; - } - - &.single { - .ranges, - .calendar { - float: none; - } - } - - /* Calendars */ - &.show-calendar { - .calendar { - display: block; - } - } - - .calendar { - display: none; - max-width: $daterangepicker-width - ($daterangepicker-calendar-margin * 2); - margin: $daterangepicker-calendar-margin; - - &.single { - .calendar-table { - border: none; - } - } - - th, - td { - white-space: nowrap; - text-align: center; - - // TODO: Should this actually be hard-coded? - min-width: 32px; - } - } - - .calendar-table { - border: $daterangepicker-calendar-border-size solid - $daterangepicker-calendar-border-color; - padding: $daterangepicker-calendar-margin; - border-radius: $daterangepicker-calendar-border-radius; - background-color: $daterangepicker-calendar-bg-color; - } - - table { - width: 100%; - margin: 0; - } - - td, - th { - text-align: center; - width: $daterangepicker-cell-width; - height: $daterangepicker-cell-height; - border-radius: $daterangepicker-cell-border-radius; - border: $daterangepicker-cell-border-size solid - $daterangepicker-cell-border-color; - white-space: nowrap; - cursor: pointer; - - &.available { - &:hover { - background-color: $daterangepicker-cell-hover-bg-color; - border-color: $daterangepicker-cell-hover-border-color; - color: $daterangepicker-cell-hover-color; - } - } - - &.week { - font-size: 80%; - color: #ccc; - } - } - - td { - &.off { - &, - &.in-range, - &.start-date, - &.end-date { - background-color: $daterangepicker-unselected-bg-color; - border-color: $daterangepicker-unselected-border-color; - color: $daterangepicker-unselected-color; - } - } - - // Date Range - &.in-range { - background-color: $daterangepicker-in-range-bg-color; - border-color: $daterangepicker-in-range-border-color; - color: $daterangepicker-in-range-color; - - // TODO: Should this be static or should it be parameterized? - border-radius: 0; - } - - &.start-date { - border-radius: $daterangepicker-cell-border-radius 0 0 - $daterangepicker-cell-border-radius; - } - - &.end-date { - border-radius: 0 $daterangepicker-cell-border-radius - $daterangepicker-cell-border-radius 0; - } - - &.start-date.end-date { - border-radius: $daterangepicker-cell-border-radius; - } - - &.active { - &, - &:hover { - background-color: $daterangepicker-active-bg-color; - border-color: $daterangepicker-active-border-color; - color: $daterangepicker-active-color; - } - } - } - - th { - &.month { - width: auto; - } - } - - // Disabled Controls - td, - option { - &.disabled { - color: #999; - cursor: not-allowed; - text-decoration: line-through; - } - } - - select { - &.monthselect, - &.yearselect { - font-size: 12px; - padding: 1px; - height: auto; - margin: 0; - cursor: default; - } - - &.monthselect { - margin-right: 2%; - width: 56%; - } - - &.yearselect { - width: 40%; - } - - &.hourselect, - &.minuteselect, - &.secondselect, - &.ampmselect { - width: 50px; - margin-bottom: 0; - } - } - - // Text Input Controls (above calendar) - .input-mini { - border: $daterangepicker-control-border-size solid - $daterangepicker-control-border-color; - border-radius: $daterangepicker-control-border-radius; - color: $daterangepicker-control-color; - height: $daterangepicker-control-line-height; - line-height: $daterangepicker-control-height; - display: block; - vertical-align: middle; - - // TODO: Should these all be static, too?? - margin: 0 0 5px; - padding: 0 6px 0 28px; - width: 100%; - - &.active { - border: $daterangepicker-control-active-border-size solid - $daterangepicker-control-active-border-color; - border-radius: $daterangepicker-control-active-border-radius; - } - } - - .daterangepicker_input { - position: relative; - padding-left: 0; - - i { - position: absolute; - - // NOTE: These appear to be eyeballed to me... - left: 8px; - top: var(--spacing-04); - } - } - - &.rtl { - .input-mini { - padding-right: 28px; - padding-left: 6px; - } - - .daterangepicker_input i { - left: auto; - right: 8px; - } - } - - // Time Picker - .calendar-time { - text-align: center; - margin: 5px auto; - line-height: $daterangepicker-control-line-height; - position: relative; - padding-left: 28px; - - select { - &.disabled { - color: $daterangepicker-control-disabled-color; - cursor: not-allowed; - } - } - } -} - -// Predefined Ranges -.ranges { - font-size: 11px; - float: none; - margin: 4px; - text-align: left; - - ul { - list-style: none; - margin: 0 auto; - padding: 0; - width: 100%; - } - - li { - font-size: 13px; - background-color: $daterangepicker-ranges-bg-color; - border: $daterangepicker-ranges-border-size solid - $daterangepicker-ranges-border-color; - border-radius: $daterangepicker-ranges-border-radius; - color: $daterangepicker-ranges-color; - padding: 3px 12px; - margin-bottom: 8px; - cursor: pointer; - - &:hover { - background-color: $daterangepicker-ranges-hover-bg-color; - color: $daterangepicker-ranges-hover-color; - } - - &.active { - background-color: $daterangepicker-ranges-hover-bg-color; - border: $daterangepicker-ranges-hover-border-size solid - $daterangepicker-ranges-hover-border-color; - color: $daterangepicker-ranges-hover-color; - } - } -} - -/* Larger Screen Styling */ -@include media-breakpoint-up(sm) { - .daterangepicker { - .glyphicon { - /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ - font-family: FontAwesome; - } - - .glyphicon-chevron-left::before { - content: '\f053'; - } - - .glyphicon-chevron-right::before { - content: '\f054'; - } - - .glyphicon-calendar::before { - content: '\f073'; - } - - width: auto; - - .ranges { - ul { - width: 160px; - } - } - - &.single { - .ranges { - ul { - width: 100%; - } - } - - .calendar.left { - clear: none; - } - - &.ltr { - .ranges, - .calendar { - float: left; - } - } - - &.rtl { - .ranges, - .calendar { - float: right; - } - } - } - - &.ltr { - direction: ltr; - text-align: left; - - .calendar { - &.left { - clear: left; - margin-right: 0; - - .calendar-table { - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - padding-right: 12px; - } - } - - &.right { - margin-left: 0; - - .calendar-table { - border-left: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - } - - .left .daterangepicker_input { - padding-right: 12px; - } - - .ranges, - .calendar { - float: left; - } - } - - &.rtl { - direction: rtl; - text-align: right; - - .calendar { - &.left { - clear: right; - margin-left: 0; - - .calendar-table { - border-left: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - padding-left: 12px; - } - } - - &.right { - margin-right: 0; - - .calendar-table { - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - } - - .ranges, - .calendar { - text-align: right; - float: right; - } - } - } -} - -@include media-breakpoint-up(md) { - /* force the calendar to display on one row */ - .show-calendar { - min-width: 658px; /* width of all contained elements, IE/Edge fallback */ - width: max-content; - } - - .daterangepicker { - .ranges { - width: auto; - } - - &.ltr { - .ranges { - float: left; - clear: none !important; - } - } - - &.rtl { - .ranges { - float: right; - } - } - - .calendar { - clear: none !important; - } - } -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/admin/admin.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/admin/admin.scss index a4bfa532e3..e2c807e928 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/admin/admin.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/admin/admin.scss @@ -91,8 +91,3 @@ color: var(--yellow-50); } } - -.admin-page summary { - // firefox does not show markers for block items - display: list-item; -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss index 1bf487eeca..83b6fbd28a 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss @@ -85,7 +85,7 @@ } &:hover { - background-color: var(--bg-light-secondary); + background-color: $bg-light-secondary; } .welcome-message-card-img { diff --git a/services/web/frontend/stylesheets/components/daterange-picker.less b/services/web/frontend/stylesheets/components/daterange-picker.less new file mode 100644 index 0000000000..43e0e3ba55 --- /dev/null +++ b/services/web/frontend/stylesheets/components/daterange-picker.less @@ -0,0 +1,656 @@ +// +// A stylesheet for use with Bootstrap 3.x +// @author: Dan Grossman http://www.dangrossman.info/ +// @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved. +// @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php +// @website: https://www.improvely.com/ +// + +// +// VARIABLES +// + +// +// Settings + +// The class name to contain everything within. +@arrow-size: 7px; + +// +// Colors +@daterangepicker-color: @brand-primary; +@daterangepicker-bg-color: #fff; + +@daterangepicker-cell-color: @daterangepicker-color; +@daterangepicker-cell-border-color: transparent; +@daterangepicker-cell-bg-color: @daterangepicker-bg-color; + +@daterangepicker-cell-hover-color: @daterangepicker-color; +@daterangepicker-cell-hover-border-color: @daterangepicker-cell-border-color; +@daterangepicker-cell-hover-bg-color: #eee; + +@daterangepicker-in-range-color: #000; +@daterangepicker-in-range-border-color: transparent; +@daterangepicker-in-range-bg-color: #ebf4f8; + +@daterangepicker-active-color: #fff; +@daterangepicker-active-bg-color: #138a07; +@daterangepicker-active-border-color: transparent; + +@daterangepicker-unselected-color: #999; +@daterangepicker-unselected-border-color: transparent; +@daterangepicker-unselected-bg-color: #fff; + +// +// daterangepicker +@daterangepicker-width: 278px; +@daterangepicker-padding: 4px; +@daterangepicker-z-index: 3000; + +@daterangepicker-border-size: 1px; +@daterangepicker-border-color: #ccc; +@daterangepicker-border-radius: 4px; + +// +// Calendar +@daterangepicker-calendar-margin: @daterangepicker-padding; +@daterangepicker-calendar-bg-color: @daterangepicker-bg-color; + +@daterangepicker-calendar-border-size: 1px; +@daterangepicker-calendar-border-color: @daterangepicker-bg-color; +@daterangepicker-calendar-border-radius: @daterangepicker-border-radius; + +// +// Calendar Cells +@daterangepicker-cell-size: 20px; +@daterangepicker-cell-width: @daterangepicker-cell-size; +@daterangepicker-cell-height: @daterangepicker-cell-size; + +@daterangepicker-cell-border-radius: @daterangepicker-calendar-border-radius; +@daterangepicker-cell-border-size: 1px; + +// +// Dropdowns +@daterangepicker-dropdown-z-index: @daterangepicker-z-index + 1; + +// +// Controls +@daterangepicker-control-height: 30px; +@daterangepicker-control-line-height: @daterangepicker-control-height; +@daterangepicker-control-color: #555; + +@daterangepicker-control-border-size: 1px; +@daterangepicker-control-border-color: #ccc; +@daterangepicker-control-border-radius: 4px; + +@daterangepicker-control-active-border-size: 1px; +@daterangepicker-control-active-border-color: @brand-primary; +@daterangepicker-control-active-border-radius: @daterangepicker-control-border-radius; + +@daterangepicker-control-disabled-color: #ccc; + +// +// Ranges +@daterangepicker-ranges-color: @brand-primary; +@daterangepicker-ranges-bg-color: daterangepicker-ranges-color; + +@daterangepicker-ranges-border-size: 1px; +@daterangepicker-ranges-border-color: @daterangepicker-ranges-bg-color; +@daterangepicker-ranges-border-radius: @daterangepicker-border-radius; + +@daterangepicker-ranges-hover-color: #fff; +@daterangepicker-ranges-hover-bg-color: @daterangepicker-ranges-color; +@daterangepicker-ranges-hover-border-size: @daterangepicker-ranges-border-size; +@daterangepicker-ranges-hover-border-color: @daterangepicker-ranges-hover-bg-color; +@daterangepicker-ranges-hover-border-radius: @daterangepicker-border-radius; + +@daterangepicker-ranges-active-border-size: @daterangepicker-ranges-border-size; +@daterangepicker-ranges-active-border-color: @daterangepicker-ranges-bg-color; +@daterangepicker-ranges-active-border-radius: @daterangepicker-border-radius; + +// +// STYLESHEETS +// +.daterangepicker { + position: absolute; + color: @daterangepicker-color; + background-color: @daterangepicker-bg-color; + border-radius: @daterangepicker-border-radius; + width: @daterangepicker-width; + padding: @daterangepicker-padding; + margin-top: @daterangepicker-border-size; + + // TODO: Should these be parameterized?? + // top: 100px; + // left: 20px; + + @arrow-prefix-size: @arrow-size; + @arrow-suffix-size: (@arrow-size - @daterangepicker-border-size); + + &:before, + &:after { + position: absolute; + display: inline-block; + + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; + } + + &:before { + top: -@arrow-prefix-size; + + border-right: @arrow-prefix-size solid transparent; + border-left: @arrow-prefix-size solid transparent; + border-bottom: @arrow-prefix-size solid @daterangepicker-border-color; + } + + &:after { + top: -@arrow-suffix-size; + + border-right: @arrow-suffix-size solid transparent; + border-bottom: @arrow-suffix-size solid @daterangepicker-bg-color; + border-left: @arrow-suffix-size solid transparent; + } + + &.opensleft { + &:before { + // TODO: Make this relative to prefix size. + right: @arrow-prefix-size + 2px; + } + + &:after { + // TODO: Make this relative to suffix size. + right: @arrow-suffix-size + 4px; + } + } + + &.openscenter { + &:before { + left: 0; + right: 0; + width: 0; + margin-left: auto; + margin-right: auto; + } + + &:after { + left: 0; + right: 0; + width: 0; + margin-left: auto; + margin-right: auto; + } + } + + &.opensright { + &:before { + // TODO: Make this relative to prefix size. + left: @arrow-prefix-size + 2px; + } + + &:after { + // TODO: Make this relative to suffix size. + left: @arrow-suffix-size + 4px; + } + } + + &.dropup { + margin-top: -5px; + + // NOTE: Note sure why these are special-cased. + &:before { + top: initial; + bottom: -@arrow-prefix-size; + border-bottom: initial; + border-top: @arrow-prefix-size solid @daterangepicker-border-color; + } + + &:after { + top: initial; + bottom: -@arrow-suffix-size; + border-bottom: initial; + border-top: @arrow-suffix-size solid @daterangepicker-bg-color; + } + } + + &.dropdown-menu { + max-width: none; + z-index: @daterangepicker-dropdown-z-index; + } + + &.single { + .ranges, + .calendar { + float: none; + } + } + + /* Calendars */ + &.show-calendar { + .calendar { + display: block; + } + } + + .calendar { + display: none; + max-width: @daterangepicker-width - (@daterangepicker-calendar-margin * 2); + margin: @daterangepicker-calendar-margin; + + &.single { + .calendar-table { + border: none; + } + } + + th, + td { + white-space: nowrap; + text-align: center; + + // TODO: Should this actually be hard-coded? + min-width: 32px; + } + } + + .calendar-table { + border: @daterangepicker-calendar-border-size solid + @daterangepicker-calendar-border-color; + padding: @daterangepicker-calendar-margin; + border-radius: @daterangepicker-calendar-border-radius; + background-color: @daterangepicker-calendar-bg-color; + } + + table { + width: 100%; + margin: 0; + } + + td, + th { + text-align: center; + width: @daterangepicker-cell-width; + height: @daterangepicker-cell-height; + border-radius: @daterangepicker-cell-border-radius; + border: @daterangepicker-cell-border-size solid + @daterangepicker-cell-border-color; + white-space: nowrap; + cursor: pointer; + + &.available { + &:hover { + background-color: @daterangepicker-cell-hover-bg-color; + border-color: @daterangepicker-cell-hover-border-color; + color: @daterangepicker-cell-hover-color; + } + } + + &.week { + font-size: 80%; + color: #ccc; + } + } + + td { + &.off { + &, + &.in-range, + &.start-date, + &.end-date { + background-color: @daterangepicker-unselected-bg-color; + border-color: @daterangepicker-unselected-border-color; + color: @daterangepicker-unselected-color; + } + } + + // + // Date Range + &.in-range { + background-color: @daterangepicker-in-range-bg-color; + border-color: @daterangepicker-in-range-border-color; + color: @daterangepicker-in-range-color; + + // TODO: Should this be static or should it be parameterized? + border-radius: 0; + } + + &.start-date { + border-radius: @daterangepicker-cell-border-radius 0 0 + @daterangepicker-cell-border-radius; + } + + &.end-date { + border-radius: 0 @daterangepicker-cell-border-radius + @daterangepicker-cell-border-radius 0; + } + + &.start-date.end-date { + border-radius: @daterangepicker-cell-border-radius; + } + + &.active { + &, + &:hover { + background-color: @daterangepicker-active-bg-color; + border-color: @daterangepicker-active-border-color; + color: @daterangepicker-active-color; + } + } + } + + th { + &.month { + width: auto; + } + } + + // + // Disabled Controls + // + td, + option { + &.disabled { + color: #999; + cursor: not-allowed; + text-decoration: line-through; + } + } + + select { + &.monthselect, + &.yearselect { + font-size: 12px; + padding: 1px; + height: auto; + margin: 0; + cursor: default; + } + + &.monthselect { + margin-right: 2%; + width: 56%; + } + + &.yearselect { + width: 40%; + } + + &.hourselect, + &.minuteselect, + &.secondselect, + &.ampmselect { + width: 50px; + margin-bottom: 0; + } + } + + // + // Text Input Controls (above calendar) + // + .input-mini { + border: @daterangepicker-control-border-size solid + @daterangepicker-control-border-color; + border-radius: @daterangepicker-control-border-radius; + color: @daterangepicker-control-color; + height: @daterangepicker-control-line-height; + line-height: @daterangepicker-control-height; + display: block; + vertical-align: middle; + + // TODO: Should these all be static, too?? + margin: 0 0 5px 0; + padding: 0 6px 0 28px; + width: 100%; + + &.active { + border: @daterangepicker-control-active-border-size solid + @daterangepicker-control-active-border-color; + border-radius: @daterangepicker-control-active-border-radius; + } + } + + .daterangepicker_input { + position: relative; + padding-left: 0; + + i { + position: absolute; + + // NOTE: These appear to be eyeballed to me... + left: 8px; + top: 10px; + } + } + &.rtl { + .input-mini { + padding-right: 28px; + padding-left: 6px; + } + .daterangepicker_input i { + left: auto; + right: 8px; + } + } + + // + // Time Picker + // + .calendar-time { + text-align: center; + margin: 5px auto; + line-height: @daterangepicker-control-line-height; + position: relative; + padding-left: 28px; + + select { + &.disabled { + color: @daterangepicker-control-disabled-color; + cursor: not-allowed; + } + } + } +} + +// +// Predefined Ranges +// + +.ranges { + font-size: 11px; + float: none; + margin: 4px; + text-align: left; + + ul { + list-style: none; + margin: 0 auto; + padding: 0; + width: 100%; + } + + li { + font-size: 13px; + background-color: @daterangepicker-ranges-bg-color; + border: @daterangepicker-ranges-border-size solid + @daterangepicker-ranges-border-color; + border-radius: @daterangepicker-ranges-border-radius; + color: @daterangepicker-ranges-color; + padding: 3px 12px; + margin-bottom: 8px; + cursor: pointer; + + &:hover { + background-color: @daterangepicker-ranges-hover-bg-color; + color: @daterangepicker-ranges-hover-color; + } + + &.active { + background-color: @daterangepicker-ranges-hover-bg-color; + border: @daterangepicker-ranges-hover-border-size solid + @daterangepicker-ranges-hover-border-color; + color: @daterangepicker-ranges-hover-color; + } + } +} + +/* Larger Screen Styling */ +@media (min-width: 564px) { + .daterangepicker { + .glyphicon { + font-family: FontAwesome; + } + .glyphicon-chevron-left:before { + content: '\f053'; + } + .glyphicon-chevron-right:before { + content: '\f054'; + } + .glyphicon-calendar:before { + content: '\f073'; + } + + width: auto; + + .ranges { + ul { + width: 160px; + } + } + + &.single { + .ranges { + ul { + width: 100%; + } + } + + .calendar.left { + clear: none; + } + + &.ltr { + .ranges, + .calendar { + float: left; + } + } + &.rtl { + .ranges, + .calendar { + float: right; + } + } + } + + &.ltr { + direction: ltr; + text-align: left; + .calendar { + &.left { + clear: left; + margin-right: 0; + + .calendar-table { + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + &.right { + margin-left: 0; + + .calendar-table { + border-left: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + } + + .left .daterangepicker_input { + padding-right: 12px; + } + + .calendar.left .calendar-table { + padding-right: 12px; + } + + .ranges, + .calendar { + float: left; + } + } + &.rtl { + direction: rtl; + text-align: right; + .calendar { + &.left { + clear: right; + margin-left: 0; + + .calendar-table { + border-left: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + + &.right { + margin-right: 0; + + .calendar-table { + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + } + + .left .daterangepicker_input { + padding-left: 12px; + } + + .calendar.left .calendar-table { + padding-left: 12px; + } + + .ranges, + .calendar { + text-align: right; + float: right; + } + } + } +} + +@media (min-width: 730px) { + /* force the calendar to display on one row */ + &.show-calendar { + min-width: 658px; /* width of all contained elements, IE/Edge fallback */ + width: -moz-max-content; + width: -webkit-max-content; + width: max-content; + } + + .daterangepicker { + .ranges { + width: auto; + } + &.ltr { + .ranges { + float: left; + clear: none !important; + } + } + &.rtl { + .ranges { + float: right; + } + } + + .calendar { + clear: none !important; + } + } +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/nvd3.scss b/services/web/frontend/stylesheets/components/nvd3.less similarity index 78% rename from services/web/frontend/stylesheets/bootstrap-5/modules/metrics/nvd3.scss rename to services/web/frontend/stylesheets/components/nvd3.less index 4983129a80..f1fea65901 100755 --- a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/nvd3.scss +++ b/services/web/frontend/stylesheets/components/nvd3.less @@ -1,677 +1,691 @@ -/* stylelint-disable */ - -/* nvd3 version 1.8.4 (https://github.com/novus/nvd3) 2016-07-03 */ -.nvd3 .nv-axis { - pointer-events: none; - opacity: 1; -} - -.nvd3 .nv-axis path { - fill: none; - stroke: #000; - stroke-opacity: 0.75; - shape-rendering: crispedges; -} - -.nvd3 .nv-axis path.domain { - stroke-opacity: 0.75; -} - -.nvd3 .nv-axis.nv-x path.domain { - stroke-opacity: 0; -} - -.nvd3 .nv-axis line { - fill: none; - stroke: #e5e5e5; - shape-rendering: crispedges; -} - -.nvd3 .nv-axis .zero line, - /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero { - stroke-opacity: 0.75; -} - -.nvd3 .nv-axis .nv-axisMaxMin text { - font-weight: bold; -} - -.nvd3 .x .nv-axis .nv-axisMaxMin text, -.nvd3 .x2 .nv-axis .nv-axisMaxMin text, -.nvd3 .x3 .nv-axis .nv-axisMaxMin text { - text-anchor: middle; -} - -.nvd3 .nv-axis.nv-disabled { - opacity: 0; -} - -.nvd3 .nv-bars rect { - fill-opacity: 0.75; - transition: fill-opacity 250ms linear; -} - -.nvd3 .nv-bars rect.hover { - fill-opacity: 1; -} - -.nvd3 .nv-bars .hover rect { - fill: lightblue; -} - -.nvd3 .nv-bars text { - fill: rgb(0 0 0 / 0%); -} - -.nvd3 .nv-bars .hover text { - fill: rgb(0 0 0 / 100%); -} - -.nvd3 .nv-multibar .nv-groups rect, -.nvd3 .nv-multibarHorizontal .nv-groups rect, -.nvd3 .nv-discretebar .nv-groups rect { - stroke-opacity: 0; - transition: fill-opacity 250ms linear; -} - -.nvd3 .nv-multibar .nv-groups rect:hover, -.nvd3 .nv-multibarHorizontal .nv-groups rect:hover, -.nvd3 .nv-candlestickBar .nv-ticks rect:hover, -.nvd3 .nv-discretebar .nv-groups rect:hover { - fill-opacity: 1; -} - -.nvd3 .nv-discretebar .nv-groups text, -.nvd3 .nv-multibarHorizontal .nv-groups text { - font-weight: bold; - fill: rgb(0 0 0 / 100%); - stroke: rgb(0 0 0 / 0%); -} - -/* boxplot CSS */ -.nvd3 .nv-boxplot circle { - fill-opacity: 0.5; -} - -.nvd3 .nv-boxplot circle:hover { - fill-opacity: 1; -} - -.nvd3 .nv-boxplot rect:hover { - fill-opacity: 1; -} - -.nvd3 line.nv-boxplot-median { - stroke: black; -} - -.nv-boxplot-tick:hover { - stroke-width: 2.5px; -} - -/* bullet */ -.nvd3.nv-bullet { - font: 10px sans-serif; -} - -.nvd3.nv-bullet .nv-measure { - fill-opacity: 0.8; -} - -.nvd3.nv-bullet .nv-measure:hover { - fill-opacity: 1; -} - -.nvd3.nv-bullet .nv-marker { - stroke: #000; - stroke-width: 2px; -} - -.nvd3.nv-bullet .nv-markerTriangle { - stroke: #000; - fill: #fff; - stroke-width: 1.5px; -} - -.nvd3.nv-bullet .nv-markerLine { - stroke: #000; - stroke-width: 1.5px; -} - -.nvd3.nv-bullet .nv-tick line { - stroke: #666; - stroke-width: 0.5px; -} - -.nvd3.nv-bullet .nv-range.nv-s0 { - fill: #eee; -} - -.nvd3.nv-bullet .nv-range.nv-s1 { - fill: #ddd; -} - -.nvd3.nv-bullet .nv-range.nv-s2 { - fill: #ccc; -} - -.nvd3.nv-bullet .nv-title { - font-size: 14px; - font-weight: bold; -} - -.nvd3.nv-bullet .nv-subtitle { - fill: #999; -} - -.nvd3.nv-bullet .nv-range { - fill: #bababa; - fill-opacity: 0.4; -} - -.nvd3.nv-bullet .nv-range:hover { - fill-opacity: 0.7; -} - -.nvd3.nv-candlestickBar .nv-ticks .nv-tick { - stroke-width: 1px; -} - -.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover { - stroke-width: 2px; -} - -.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect { - stroke: #2ca02c; - fill: #2ca02c; -} - -.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect { - stroke: #d62728; - fill: #d62728; -} - -.with-transitions .nv-candlestickBar .nv-ticks .nv-tick { - transition: stroke-width 250ms linear, stroke-opacity 250ms linear; -} - -.nvd3.nv-candlestickBar .nv-ticks line { - stroke: #333; -} - -.nv-force-node { - stroke: #fff; - stroke-width: 1.5px; -} - -.nv-force-link { - stroke: #999; - stroke-opacity: 0.6; -} - -.nv-force-node text { - stroke-width: 0; -} - -.nvd3 .nv-legend .nv-disabled rect { - /* fill-opacity: 0; */ -} - -.nvd3 .nv-check-box .nv-box { - fill-opacity: 0; - stroke-width: 2; -} - -.nvd3 .nv-check-box .nv-check { - fill-opacity: 0; - stroke-width: 4; -} - -.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check { - fill-opacity: 0; - stroke-opacity: 0; -} - -.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check { - opacity: 0; -} - -/* line plus bar */ -.nvd3.nv-linePlusBar .nv-bar rect { - fill-opacity: 0.75; -} - -.nvd3.nv-linePlusBar .nv-bar rect:hover { - fill-opacity: 1; -} - -.nvd3 .nv-groups path.nv-line { - fill: none; -} - -.nvd3 .nv-groups path.nv-area { - stroke: none; -} - -.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point { - fill-opacity: 0; - stroke-opacity: 0; -} - -.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point { - fill-opacity: 0.5 !important; - stroke-opacity: 0.5 !important; -} - -.with-transitions .nvd3 .nv-groups .nv-point { - transition: stroke-width 250ms linear, stroke-opacity 250ms linear; -} - -.nvd3.nv-scatter .nv-groups .nv-point.hover, -.nvd3 .nv-groups .nv-point.hover { - stroke-width: 7px; - fill-opacity: 0.95 !important; - stroke-opacity: 0.95 !important; -} - -.nvd3 .nv-point-paths path { - stroke: #aaa; - stroke-opacity: 0; - fill: #eee; - fill-opacity: 0; -} - -.nvd3 .nv-indexLine { - cursor: ew-resize; -} - -/******************** - * SVG CSS - */ - -/******************** - Default CSS for an svg element nvd3 used -*/ -svg.nvd3-svg, svg.nvd3-iddle { - -webkit-touch-callout: none; - user-select: none; - display: block; - width: 100%; - height: 100%; -} - -/******************** - Box shadow and border radius styling -*/ -.nvtooltip.with-3d-shadow, -.with-3d-shadow .nvtooltip { - box-shadow: 0 5px 10px rgb(0 0 0 / 20%); - border-radius: 5px; -} - -.nvd3 text { - font: normal 12px Arial; -} - -.nvd3 .title { - font: bold 14px Arial; -} - -.nvd3 .nv-background { - fill: white; - fill-opacity: 0; -} - -.nvd3.nv-noData { - font-size: 18px; - font-weight: bold; -} - -/********** -* Brush -*/ - -.nv-brush .extent { - fill-opacity: 0.125; - shape-rendering: crispedges; -} - -.nv-brush .resize path { - fill: #eee; - stroke: #666; -} - -/********** -* Legend -*/ - -.nvd3 .nv-legend .nv-series { - cursor: pointer; -} - -.nvd3 .nv-legend .nv-disabled circle { - fill-opacity: 0; -} - -/* focus */ -.nvd3 .nv-brush .extent { - fill-opacity: 0 !important; -} - -.nvd3 .nv-brushBackground rect { - stroke: #000; - stroke-width: 0.4; - fill: #fff; - fill-opacity: 0.7; -} - -/********** -* Print -*/ - -@media print { - .nvd3 text { - stroke-width: 0; - fill-opacity: 1; - } -} - -.nvd3.nv-ohlcBar .nv-ticks .nv-tick { - stroke-width: 1px; -} - -.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover { - stroke-width: 2px; -} - -.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive { - stroke: #2ca02c; -} - -.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative { - stroke: #d62728; -} - -.nvd3 .background path { - fill: none; - stroke: #eee; - stroke-opacity: 0.4; - shape-rendering: crispedges; -} - -.nvd3 .foreground path { - fill: none; - stroke-opacity: 0.7; -} - -.nvd3 .nv-parallelCoordinates-brush .extent { - fill: #fff; - fill-opacity: 0.6; - stroke: gray; - shape-rendering: crispedges; -} - -.nvd3 .nv-parallelCoordinates .hover { - fill-opacity: 1; - stroke-width: 3px; -} - -.nvd3 .missingValuesline line { - fill: none; - stroke: black; - stroke-width: 1; - stroke-opacity: 1; - stroke-dasharray: 5, 5; -} - -.nvd3.nv-pie path { - stroke-opacity: 0; - transition: fill-opacity 250ms linear, stroke-width 250ms linear, - stroke-opacity 250ms linear; -} - -.nvd3.nv-pie .nv-pie-title { - font-size: 24px; - fill: rgb(19 196 249 / 59%); -} - -.nvd3.nv-pie .nv-slice text { - stroke: #000; - stroke-width: 0; -} - -.nvd3.nv-pie path { - stroke: #fff; - stroke-width: 1px; - stroke-opacity: 1; -} - -.nvd3.nv-pie path { - fill-opacity: 0.7; -} - -.nvd3.nv-pie .hover path { - fill-opacity: 1; -} - -.nvd3.nv-pie .nv-label { - pointer-events: none; -} - -.nvd3.nv-pie .nv-label rect { - fill-opacity: 0; - stroke-opacity: 0; -} - -/* scatter */ -.nvd3 .nv-groups .nv-point.hover { - stroke-width: 20px; - stroke-opacity: 0.5; -} - -.nvd3 .nv-scatter .nv-point.hover { - fill-opacity: 1; -} - -.nv-noninteractive { - pointer-events: none; -} - -.nv-distx, -.nv-disty { - pointer-events: none; -} - -/* sparkline */ -.nvd3.nv-sparkline path { - fill: none; -} - -.nvd3.nv-sparklineplus g.nv-hoverValue { - pointer-events: none; -} - -.nvd3.nv-sparklineplus .nv-hoverValue line { - stroke: #333; - stroke-width: 1.5px; -} - -.nvd3.nv-sparklineplus, -.nvd3.nv-sparklineplus g { - pointer-events: all; -} - -.nvd3 .nv-hoverArea { - fill-opacity: 0; - stroke-opacity: 0; -} - -.nvd3.nv-sparklineplus .nv-xValue, -.nvd3.nv-sparklineplus .nv-yValue { - stroke-width: 0; - font-size: 0.9em; - font-weight: normal; -} - -.nvd3.nv-sparklineplus .nv-yValue { - stroke: #f66; -} - -.nvd3.nv-sparklineplus .nv-maxValue { - stroke: #2ca02c; - fill: #2ca02c; -} - -.nvd3.nv-sparklineplus .nv-minValue { - stroke: #d62728; - fill: #d62728; -} - -.nvd3.nv-sparklineplus .nv-currentValue { - font-weight: bold; - font-size: 1.1em; -} - -/* stacked area */ -.nvd3.nv-stackedarea path.nv-area { - fill-opacity: 0.7; - stroke-opacity: 0; - transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; -} - -.nvd3.nv-stackedarea path.nv-area.hover { - fill-opacity: 0.9; -} - -.nvd3.nv-stackedarea .nv-groups .nv-point { - stroke-opacity: 0; - fill-opacity: 0; -} - -.nvtooltip { - position: absolute; - background-color: rgb(255 255 255 / 100%); - color: rgb(0 0 0 / 100%); - padding: 1px; - border: 1px solid rgb(0 0 0 / 20%); - z-index: 10000; - display: block; - font-family: Arial; - font-size: 13px; - text-align: left; - pointer-events: none; - white-space: nowrap; - -webkit-touch-callout: none; - user-select: none; -} - -.nvtooltip { - background: rgb(255 255 255 / 80%); - border: 1px solid rgb(0 0 0 / 50%); - border-radius: 4px; -} - -/* Give tooltips that old fade in transition by - putting a "with-transitions" class on the container div. -*/ -.nvtooltip.with-transitions, -.with-transitions .nvtooltip { - transition: opacity 50ms linear; - transition-delay: 200ms; -} - -.nvtooltip.x-nvtooltip, -.nvtooltip.y-nvtooltip { - padding: 8px; -} - -.nvtooltip h3 { - margin: 0; - padding: 4px 14px; - line-height: 18px; - font-weight: normal; - background-color: rgb(247 247 247 / 75%); - color: rgb(0 0 0 / 100%); - text-align: center; - border-bottom: 1px solid #ebebeb; - border-radius: 5px 5px 0 0; -} - -.nvtooltip p { - margin: 0; - padding: 5px 14px; - text-align: center; -} - -.nvtooltip span { - display: inline-block; - margin: 2px 0; -} - -.nvtooltip table { - margin: 6px; - border-spacing: 0; -} - -.nvtooltip table td { - padding: 2px 9px 2px 0; - vertical-align: middle; -} - -.nvtooltip table td.key { - font-weight: normal; -} - -.nvtooltip table td.key.total { - font-weight: bold; -} - -.nvtooltip table td.value { - text-align: right; - font-weight: bold; -} - -.nvtooltip table td.percent { - color: darkgray; -} - -.nvtooltip table tr.highlight td { - padding: 1px 9px 1px 0; - border-bottom-style: solid; - border-bottom-width: 1px; - border-top-style: solid; - border-top-width: 1px; -} - -.nvtooltip table td.legend-color-guide div { - width: 8px; - height: 8px; - vertical-align: middle; -} - -.nvtooltip table td.legend-color-guide div { - width: 12px; - height: 12px; - border: 1px solid #999; -} - -.nvtooltip .footer { - padding: 3px; - text-align: center; -} - -.nvtooltip-pending-removal { - pointer-events: none; - display: none; -} - -/**** -Interactive Layer -*/ -.nvd3 .nv-interactiveGuideLine { - pointer-events: none; -} - -.nvd3 line.nv-guideline { - stroke: #ccc; -} +/* nvd3 version 1.8.4 (https://github.com/novus/nvd3) 2016-07-03 */ +.nvd3 .nv-axis { + pointer-events: none; + opacity: 1; +} + +.nvd3 .nv-axis path { + fill: none; + stroke: #000; + stroke-opacity: 0.75; + shape-rendering: crispEdges; +} + +.nvd3 .nv-axis path.domain { + stroke-opacity: 0.75; +} + +.nvd3 .nv-axis.nv-x path.domain { + stroke-opacity: 0; +} + +.nvd3 .nv-axis line { + fill: none; + stroke: #e5e5e5; + shape-rendering: crispEdges; +} + +.nvd3 .nv-axis .zero line, + /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero { + stroke-opacity: 0.75; +} + +.nvd3 .nv-axis .nv-axisMaxMin text { + font-weight: bold; +} + +.nvd3 .x .nv-axis .nv-axisMaxMin text, +.nvd3 .x2 .nv-axis .nv-axisMaxMin text, +.nvd3 .x3 .nv-axis .nv-axisMaxMin text { + text-anchor: middle; +} + +.nvd3 .nv-axis.nv-disabled { + opacity: 0; +} + +.nvd3 .nv-bars rect { + fill-opacity: 0.75; + + transition: fill-opacity 250ms linear; + -moz-transition: fill-opacity 250ms linear; + -webkit-transition: fill-opacity 250ms linear; +} + +.nvd3 .nv-bars rect.hover { + fill-opacity: 1; +} + +.nvd3 .nv-bars .hover rect { + fill: lightblue; +} + +.nvd3 .nv-bars text { + fill: rgba(0, 0, 0, 0); +} + +.nvd3 .nv-bars .hover text { + fill: rgba(0, 0, 0, 1); +} + +.nvd3 .nv-multibar .nv-groups rect, +.nvd3 .nv-multibarHorizontal .nv-groups rect, +.nvd3 .nv-discretebar .nv-groups rect { + stroke-opacity: 0; + + transition: fill-opacity 250ms linear; + -moz-transition: fill-opacity 250ms linear; + -webkit-transition: fill-opacity 250ms linear; +} + +.nvd3 .nv-multibar .nv-groups rect:hover, +.nvd3 .nv-multibarHorizontal .nv-groups rect:hover, +.nvd3 .nv-candlestickBar .nv-ticks rect:hover, +.nvd3 .nv-discretebar .nv-groups rect:hover { + fill-opacity: 1; +} + +.nvd3 .nv-discretebar .nv-groups text, +.nvd3 .nv-multibarHorizontal .nv-groups text { + font-weight: bold; + fill: rgba(0, 0, 0, 1); + stroke: rgba(0, 0, 0, 0); +} + +/* boxplot CSS */ +.nvd3 .nv-boxplot circle { + fill-opacity: 0.5; +} + +.nvd3 .nv-boxplot circle:hover { + fill-opacity: 1; +} + +.nvd3 .nv-boxplot rect:hover { + fill-opacity: 1; +} + +.nvd3 line.nv-boxplot-median { + stroke: black; +} + +.nv-boxplot-tick:hover { + stroke-width: 2.5px; +} +/* bullet */ +.nvd3.nv-bullet { + font: 10px sans-serif; +} +.nvd3.nv-bullet .nv-measure { + fill-opacity: 0.8; +} +.nvd3.nv-bullet .nv-measure:hover { + fill-opacity: 1; +} +.nvd3.nv-bullet .nv-marker { + stroke: #000; + stroke-width: 2px; +} +.nvd3.nv-bullet .nv-markerTriangle { + stroke: #000; + fill: #fff; + stroke-width: 1.5px; +} +.nvd3.nv-bullet .nv-markerLine { + stroke: #000; + stroke-width: 1.5px; +} +.nvd3.nv-bullet .nv-tick line { + stroke: #666; + stroke-width: 0.5px; +} +.nvd3.nv-bullet .nv-range.nv-s0 { + fill: #eee; +} +.nvd3.nv-bullet .nv-range.nv-s1 { + fill: #ddd; +} +.nvd3.nv-bullet .nv-range.nv-s2 { + fill: #ccc; +} +.nvd3.nv-bullet .nv-title { + font-size: 14px; + font-weight: bold; +} +.nvd3.nv-bullet .nv-subtitle { + fill: #999; +} + +.nvd3.nv-bullet .nv-range { + fill: #bababa; + fill-opacity: 0.4; +} +.nvd3.nv-bullet .nv-range:hover { + fill-opacity: 0.7; +} + +.nvd3.nv-candlestickBar .nv-ticks .nv-tick { + stroke-width: 1px; +} + +.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover { + stroke-width: 2px; +} + +.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect { + stroke: #2ca02c; + fill: #2ca02c; +} + +.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect { + stroke: #d62728; + fill: #d62728; +} + +.with-transitions .nv-candlestickBar .nv-ticks .nv-tick { + transition: stroke-width 250ms linear, stroke-opacity 250ms linear; + -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; + -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; +} + +.nvd3.nv-candlestickBar .nv-ticks line { + stroke: #333; +} + +.nv-force-node { + stroke: #fff; + stroke-width: 1.5px; +} +.nv-force-link { + stroke: #999; + stroke-opacity: 0.6; +} +.nv-force-node text { + stroke-width: 0px; +} + +.nvd3 .nv-legend .nv-disabled rect { + /*fill-opacity: 0;*/ +} + +.nvd3 .nv-check-box .nv-box { + fill-opacity: 0; + stroke-width: 2; +} + +.nvd3 .nv-check-box .nv-check { + fill-opacity: 0; + stroke-width: 4; +} + +.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check { + fill-opacity: 0; + stroke-opacity: 0; +} + +.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check { + opacity: 0; +} + +/* line plus bar */ +.nvd3.nv-linePlusBar .nv-bar rect { + fill-opacity: 0.75; +} + +.nvd3.nv-linePlusBar .nv-bar rect:hover { + fill-opacity: 1; +} +.nvd3 .nv-groups path.nv-line { + fill: none; +} + +.nvd3 .nv-groups path.nv-area { + stroke: none; +} + +.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point { + fill-opacity: 0; + stroke-opacity: 0; +} + +.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point { + fill-opacity: 0.5 !important; + stroke-opacity: 0.5 !important; +} + +.with-transitions .nvd3 .nv-groups .nv-point { + transition: stroke-width 250ms linear, stroke-opacity 250ms linear; + -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; + -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; +} + +.nvd3.nv-scatter .nv-groups .nv-point.hover, +.nvd3 .nv-groups .nv-point.hover { + stroke-width: 7px; + fill-opacity: 0.95 !important; + stroke-opacity: 0.95 !important; +} + +.nvd3 .nv-point-paths path { + stroke: #aaa; + stroke-opacity: 0; + fill: #eee; + fill-opacity: 0; +} + +.nvd3 .nv-indexLine { + cursor: ew-resize; +} + +/******************** + * SVG CSS + */ + +/******************** + Default CSS for an svg element nvd3 used +*/ +svg.nvd3-svg { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -ms-user-select: none; + -moz-user-select: none; + user-select: none; + display: block; + width: 100%; + height: 100%; +} + +/******************** + Box shadow and border radius styling +*/ +.nvtooltip.with-3d-shadow, +.with-3d-shadow .nvtooltip { + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.nvd3 text { + font: normal 12px Arial; +} + +.nvd3 .title { + font: bold 14px Arial; +} + +.nvd3 .nv-background { + fill: white; + fill-opacity: 0; +} + +.nvd3.nv-noData { + font-size: 18px; + font-weight: bold; +} + +/********** +* Brush +*/ + +.nv-brush .extent { + fill-opacity: 0.125; + shape-rendering: crispEdges; +} + +.nv-brush .resize path { + fill: #eee; + stroke: #666; +} + +/********** +* Legend +*/ + +.nvd3 .nv-legend .nv-series { + cursor: pointer; +} + +.nvd3 .nv-legend .nv-disabled circle { + fill-opacity: 0; +} + +/* focus */ +.nvd3 .nv-brush .extent { + fill-opacity: 0 !important; +} + +.nvd3 .nv-brushBackground rect { + stroke: #000; + stroke-width: 0.4; + fill: #fff; + fill-opacity: 0.7; +} + +/********** +* Print +*/ + +@media print { + .nvd3 text { + stroke-width: 0; + fill-opacity: 1; + } +} + +.nvd3.nv-ohlcBar .nv-ticks .nv-tick { + stroke-width: 1px; +} + +.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover { + stroke-width: 2px; +} + +.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive { + stroke: #2ca02c; +} + +.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative { + stroke: #d62728; +} + +.nvd3 .background path { + fill: none; + stroke: #eee; + stroke-opacity: 0.4; + shape-rendering: crispEdges; +} + +.nvd3 .foreground path { + fill: none; + stroke-opacity: 0.7; +} + +.nvd3 .nv-parallelCoordinates-brush .extent { + fill: #fff; + fill-opacity: 0.6; + stroke: gray; + shape-rendering: crispEdges; +} + +.nvd3 .nv-parallelCoordinates .hover { + fill-opacity: 1; + stroke-width: 3px; +} + +.nvd3 .missingValuesline line { + fill: none; + stroke: black; + stroke-width: 1; + stroke-opacity: 1; + stroke-dasharray: 5, 5; +} +.nvd3.nv-pie path { + stroke-opacity: 0; + transition: fill-opacity 250ms linear, stroke-width 250ms linear, + stroke-opacity 250ms linear; + -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, + stroke-opacity 250ms linear; + -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, + stroke-opacity 250ms linear; +} + +.nvd3.nv-pie .nv-pie-title { + font-size: 24px; + fill: rgba(19, 196, 249, 0.59); +} + +.nvd3.nv-pie .nv-slice text { + stroke: #000; + stroke-width: 0; +} + +.nvd3.nv-pie path { + stroke: #fff; + stroke-width: 1px; + stroke-opacity: 1; +} + +.nvd3.nv-pie path { + fill-opacity: 0.7; +} +.nvd3.nv-pie .hover path { + fill-opacity: 1; +} +.nvd3.nv-pie .nv-label { + pointer-events: none; +} +.nvd3.nv-pie .nv-label rect { + fill-opacity: 0; + stroke-opacity: 0; +} + +/* scatter */ +.nvd3 .nv-groups .nv-point.hover { + stroke-width: 20px; + stroke-opacity: 0.5; +} + +.nvd3 .nv-scatter .nv-point.hover { + fill-opacity: 1; +} +.nv-noninteractive { + pointer-events: none; +} + +.nv-distx, +.nv-disty { + pointer-events: none; +} + +/* sparkline */ +.nvd3.nv-sparkline path { + fill: none; +} + +.nvd3.nv-sparklineplus g.nv-hoverValue { + pointer-events: none; +} + +.nvd3.nv-sparklineplus .nv-hoverValue line { + stroke: #333; + stroke-width: 1.5px; +} + +.nvd3.nv-sparklineplus, +.nvd3.nv-sparklineplus g { + pointer-events: all; +} + +.nvd3 .nv-hoverArea { + fill-opacity: 0; + stroke-opacity: 0; +} + +.nvd3.nv-sparklineplus .nv-xValue, +.nvd3.nv-sparklineplus .nv-yValue { + stroke-width: 0; + font-size: 0.9em; + font-weight: normal; +} + +.nvd3.nv-sparklineplus .nv-yValue { + stroke: #f66; +} + +.nvd3.nv-sparklineplus .nv-maxValue { + stroke: #2ca02c; + fill: #2ca02c; +} + +.nvd3.nv-sparklineplus .nv-minValue { + stroke: #d62728; + fill: #d62728; +} + +.nvd3.nv-sparklineplus .nv-currentValue { + font-weight: bold; + font-size: 1.1em; +} +/* stacked area */ +.nvd3.nv-stackedarea path.nv-area { + fill-opacity: 0.7; + stroke-opacity: 0; + transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; + -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; + -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; +} + +.nvd3.nv-stackedarea path.nv-area.hover { + fill-opacity: 0.9; +} + +.nvd3.nv-stackedarea .nv-groups .nv-point { + stroke-opacity: 0; + fill-opacity: 0; +} + +.nvtooltip { + position: absolute; + background-color: rgba(255, 255, 255, 1); + color: rgba(0, 0, 0, 1); + padding: 1px; + border: 1px solid rgba(0, 0, 0, 0.2); + z-index: 10000; + display: block; + + font-family: Arial; + font-size: 13px; + text-align: left; + pointer-events: none; + + white-space: nowrap; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.nvtooltip { + background: rgba(255, 255, 255, 0.8); + border: 1px solid rgba(0, 0, 0, 0.5); + border-radius: 4px; +} + +/*Give tooltips that old fade in transition by + putting a "with-transitions" class on the container div. +*/ +.nvtooltip.with-transitions, +.with-transitions .nvtooltip { + transition: opacity 50ms linear; + -moz-transition: opacity 50ms linear; + -webkit-transition: opacity 50ms linear; + + transition-delay: 200ms; + -moz-transition-delay: 200ms; + -webkit-transition-delay: 200ms; +} + +.nvtooltip.x-nvtooltip, +.nvtooltip.y-nvtooltip { + padding: 8px; +} + +.nvtooltip h3 { + margin: 0; + padding: 4px 14px; + line-height: 18px; + font-weight: normal; + background-color: rgba(247, 247, 247, 0.75); + color: rgba(0, 0, 0, 1); + text-align: center; + + border-bottom: 1px solid #ebebeb; + + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; +} + +.nvtooltip p { + margin: 0; + padding: 5px 14px; + text-align: center; +} + +.nvtooltip span { + display: inline-block; + margin: 2px 0; +} + +.nvtooltip table { + margin: 6px; + border-spacing: 0; +} + +.nvtooltip table td { + padding: 2px 9px 2px 0; + vertical-align: middle; +} + +.nvtooltip table td.key { + font-weight: normal; +} +.nvtooltip table td.key.total { + font-weight: bold; +} +.nvtooltip table td.value { + text-align: right; + font-weight: bold; +} + +.nvtooltip table td.percent { + color: darkgray; +} + +.nvtooltip table tr.highlight td { + padding: 1px 9px 1px 0; + border-bottom-style: solid; + border-bottom-width: 1px; + border-top-style: solid; + border-top-width: 1px; +} + +.nvtooltip table td.legend-color-guide div { + width: 8px; + height: 8px; + vertical-align: middle; +} + +.nvtooltip table td.legend-color-guide div { + width: 12px; + height: 12px; + border: 1px solid #999; +} + +.nvtooltip .footer { + padding: 3px; + text-align: center; +} + +.nvtooltip-pending-removal { + pointer-events: none; + display: none; +} + +/**** +Interactive Layer +*/ +.nvd3 .nv-interactiveGuideLine { + pointer-events: none; +} +.nvd3 line.nv-guideline { + stroke: #ccc; +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/nvd3_override.scss b/services/web/frontend/stylesheets/components/nvd3_override.less similarity index 74% rename from services/web/frontend/stylesheets/bootstrap-5/modules/metrics/nvd3_override.scss rename to services/web/frontend/stylesheets/components/nvd3_override.less index 72c3e2f99a..929a99e9db 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/nvd3_override.scss +++ b/services/web/frontend/stylesheets/components/nvd3_override.less @@ -5,9 +5,12 @@ opacity: 0; } } - path.domain { opacity: 0; } } } + +svg.nvd3-iddle { + &:extend(svg.nvd3-svg); +} diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less index fd8c308117..d42a2ab502 100644 --- a/services/web/frontend/stylesheets/main-style.less +++ b/services/web/frontend/stylesheets/main-style.less @@ -61,6 +61,8 @@ @import 'components/hover.less'; @import 'components/ui-select.less'; @import 'components/input-suggestions.less'; +@import 'components/nvd3.less'; +@import 'components/nvd3_override.less'; @import 'components/infinite-scroll.less'; @import 'components/expand-collapse.less'; @import 'components/beta-badges.less'; @@ -80,6 +82,7 @@ @import 'components/modals.less'; @import 'components/tooltip.less'; @import 'components/popovers.less'; +@import 'components/daterange-picker'; @import 'components/lists.less'; @import 'components/overbox.less'; @import 'components/embed-responsive.less'; @@ -115,6 +118,7 @@ @import 'app/invite.less'; @import 'app/error-pages.less'; @import 'app/editor/history-v2.less'; +@import 'app/metrics.less'; @import 'app/open-in-overleaf.less'; @import 'app/primary-email-check'; @import 'app/grammarly'; @@ -122,6 +126,9 @@ @import 'app/ol-chat.less'; @import 'app/templates-v2.less'; @import 'app/login-register.less'; +@import 'app/institution-hub.less'; +@import 'app/publisher-hub.less'; +@import 'app/admin-hub.less'; @import 'app/import.less'; @import 'app/website-redesign.less'; @import 'app/add-secondary-email-prompt.less';