From 5150549a57a66b1bad97e97e20aac761a1580271 Mon Sep 17 00:00:00 2001 From: "m.epshtein" Date: Fri, 8 Nov 2024 11:17:45 +0300 Subject: [PATCH] graph-donut --- .../resources/css/components-dashboard.css | 125 +++--------------- 1 file changed, 16 insertions(+), 109 deletions(-) diff --git a/frontend/src/resources/css/components-dashboard.css b/frontend/src/resources/css/components-dashboard.css index 63c5042..0012406 100644 --- a/frontend/src/resources/css/components-dashboard.css +++ b/frontend/src/resources/css/components-dashboard.css @@ -219,103 +219,25 @@ overflow: visible; } -.webbpm.ervu_dashboard .graph-chart .chart-content { - width: min(10vw, 12.5rem); - height: min(7vw, 9rem); -} .webbpm.ervu_dashboard :is(.graph-donut, .graph-donut-large) { display: flex; justify-content: center; } +.webbpm.ervu_dashboard .graph-chart .chart-content { + width: min(10vw, 12.5rem); + height: min(7vw, 9rem); +} .webbpm.ervu_dashboard .graph-donut .chart-content { - width: min(8vw, 11rem); - height: min(8vw, 11rem); + width: 196px; + height: 196px; } .webbpm.ervu_dashboard .graph-donut-medium .chart-content { - width: min(10vw, 13.5rem); - height: min(10vw, 13.5rem); + } .webbpm.ervu_dashboard .graph-donut-large .chart-content { - width: min(14vw, 18.5rem); - height: min(14vw, 18.5rem); + } -.webbpm.ervu_dashboard .graph-legend .horizontal-container { - align-items: center; -} -.webbpm.ervu_dashboard .graph-legend .horizontal-container > text { - flex: 1; -} -.webbpm.ervu_dashboard .graph-legend .horizontal-container > text.text-invert:not(.mute) > div > div:last-of-type { - font-size: var(--size-num-primary); -} -.webbpm.ervu_dashboard .graph-legend .mute { - margin-top: var(--indent-small); -} -.webbpm.ervu_dashboard .graph-legend .lined { - padding-top: var(--indent-small); - margin-top: var(--indent-small); -} -.webbpm.ervu_dashboard .graph-legend-column > .vertical-container > * + * { - padding-top: var(--indent-small); - margin-top: var(--indent-small); -} -.webbpm.ervu_dashboard .graph-legend-column > .vertical-container > hbox [class*="legend-col"] { - margin-top: var(--indent-xmini); -} -.webbpm.ervu_dashboard .graph-legend-column > .vertical-container .text-invert:not(.mute) { - font-size: var(--size-num-primary); - margin-top: var(--indent-xmini); -} -.webbpm.ervu_dashboard .graph-legend-column > .vertical-container .text-invert:not(.mute) label { - font-size: var(--size-text-primary); - color: var(--color-text-secondary); -} -.webbpm.ervu_dashboard .graph-legend-column > .vertical-container .text-invert > div { - justify-content: flex-end; -} -.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox { - padding-right: 0; -} -.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox + vbox { - padding-left: var(--indent-base); - margin-left: var(--indent-base); -} -.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox > .vertical-container { - height: 100%; -} -.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox > .vertical-container [class*="legend-col"] { - padding-bottom: var(--indent-base); - margin-bottom: auto; -} -.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox > .vertical-container .text-invert:not(.mute) { - font-size: var(--size-num-primary); -} -.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox > .vertical-container .text-invert:not(.mute) label { - font-size: var(--size-text-primary); - color: var(--color-text-secondary); -} -.webbpm.ervu_dashboard .graph-legend-right { - color: var(--color-text-secondary); -} -.webbpm.ervu_dashboard .graph-legend-right .text-invert > div { - justify-content: flex-end; -} -.webbpm.ervu_dashboard .graph-legend-right .text-invert > div > div:last-of-type { - color: var(--color-text-primary); - font-size: var(--size-num-primary); -} -.webbpm.ervu_dashboard [class*="graph-legend"] ervu-chart-v2 ~ hbox, -.webbpm.ervu_dashboard [class*="graph-legend"] > div > hbox { - margin-top: var(--indent-mini); -} -.webbpm.ervu_dashboard [class*="graph-legend"] .form-group { - align-items: baseline; - line-height: normal; - margin-bottom: 0; -} -.webbpm.ervu_dashboard [class*="graph-legend"] .mute { - white-space: nowrap; -} + .webbpm.ervu_dashboard [class*="graph-legend"] [class*="legend-col"] { position: relative; padding-left: var(--indent-large); @@ -328,39 +250,24 @@ top: var(--indent-xmini); left: 0; border-radius: var(--indent-base); -} +} .webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-green::before { - background-color: var(--color-success); + background-color: #a3bd9c; } .webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-red::before { - background-color: var(--color-error); + background-color: #e4aaac; } .webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-yellow::before { - background-color: #ffc737; -} -.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-blue-lt::before { - background-color: #00f0ff; + background-color: #d4c892; } .webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-blue::before { - background-color: #17a8fa; + background-color: #a0c3f0; } .webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-lila::before { - background-color: #e24fd4; -} -.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-coral::before { - background-color: #ff4f5e; + background-color: #9193b7; } .webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-orange::before { - background-color: #d98200; -} -.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-orange-dk::before { - background-color: #db5c00; -} -.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-olive::before { - background-color: #808000; -} -.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-dark-blue::before { - background-color: #4d66cc; + background-color: #e9decd; } .webbpm.ervu_dashboard grid-v2 {