From d0039dc27519f2b2e48c1d4edc56554f87703677 Mon Sep 17 00:00:00 2001 From: Julien Gautier Date: Mon, 18 Sep 2023 22:55:08 +0200 Subject: [PATCH] =?UTF-8?q?Mise=20=C3=A0=20jour=20de=20feuilles=20de=20sty?= =?UTF-8?q?le?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/{charts.scss => _charts.scss} | 154 ++++++++++++++++++++--- src/styles/app.scss | 54 ++++++++ src/styles/tables.scss | 42 +++++-- src/styles/variable.scss | 13 +- 4 files changed, 234 insertions(+), 29 deletions(-) rename src/styles/{charts.scss => _charts.scss} (69%) diff --git a/src/styles/charts.scss b/src/styles/_charts.scss similarity index 69% rename from src/styles/charts.scss rename to src/styles/_charts.scss index 611128f..b2142dc 100644 --- a/src/styles/charts.scss +++ b/src/styles/_charts.scss @@ -7,28 +7,12 @@ font-size: 0.75rem; line-height: 1; } -$chart-color-a: #20b6fc; -$chart-color-b: #f15050; -$chart-color-c: #02bfab; -$chart-color-d: #f90; -$chart-color-e: #65dae0; -$chart-color-f: #8a65e0; -$chart-color-g: #00897b; -$chart-color-h: #b51156; -$chart-color-i: #5dcc89; -$chart-color-j: #ffe205; -$chart-color-k: #bf65e0; -$chart-color-l: #4cae4c; -$chart-color-m: #337ab7; -$chart-color-n: #ed5094; -$chart-color-o: #fd18f3; -$chart-color-p: #d61f1f; -$chart-color-q: #99abb4; -$chart-color-r: #ffffff; + .ct-grid { stroke: rgba(255, 255, 255, 0.2); } .linechart { + max-height: 400px; margin-top:20px; .ct-series-a .ct-line, .ct-series-a .ct-point { @@ -102,9 +86,42 @@ $chart-color-r: #ffffff; .ct-series-r .ct-point { stroke:$chart-color-r; } + .ct-series-s .ct-line, + .ct-series-s .ct-point { + stroke:$chart-color-s; + } + .ct-series-t .ct-line, + .ct-series-t .ct-point { + stroke:$chart-color-t; + } + .ct-series-u .ct-line, + .ct-series-u .ct-point { + stroke:$chart-color-u; + } + .ct-series-v .ct-line, + .ct-series-v .ct-point { + stroke:$chart-color-v; + } + .ct-series-w .ct-line, + .ct-series-w .ct-point { + stroke:$chart-color-w; + } + .ct-series-x .ct-line, + .ct-series-x .ct-point { + stroke:$chart-color-x; + } + .ct-series-y .ct-line, + .ct-series-y .ct-point { + stroke:$chart-color-y; + } + .ct-series-z .ct-line, + .ct-series-z .ct-point { + stroke:$chart-color-z; + } } -.barchrt { +.barchart { + max-height: 300px; &.bar-xs .ct-bar { stroke-width: 5px; } @@ -162,9 +179,34 @@ $chart-color-r: #ffffff; .ct-series-r .ct-bar { stroke:$chart-color-r; } + .ct-series-s .ct-bar { + stroke:$chart-color-s; + } + .ct-series-t .ct-bar { + stroke:$chart-color-t; + } + .ct-series-u .ct-bar { + stroke:$chart-color-u; + } + .ct-series-v .ct-bar { + stroke:$chart-color-v; + } + .ct-series-w .ct-bar { + stroke:$chart-color-w; + } + .ct-series-x .ct-bar { + stroke:$chart-color-x; + } + .ct-series-y .ct-bar { + stroke:$chart-color-y; + } + .ct-series-z .ct-bar { + stroke:$chart-color-z; + } } .piechart { + max-height: 400px; .ct-label { fill: rgba(255, 255, 255, 0.8); color:rgba(255, 255, 255, 0.8); @@ -223,6 +265,30 @@ $chart-color-r: #ffffff; .ct-series-r .ct-slice-donut { stroke:$chart-color-r; } + .ct-series-s .ct-slice-donut { + stroke:$chart-color-s; + } + .ct-series-t .ct-slice-donut { + stroke:$chart-color-t; + } + .ct-series-u .ct-slice-donut { + stroke:$chart-color-u; + } + .ct-series-v .ct-slice-donut { + stroke:$chart-color-v; + } + .ct-series-w .ct-slice-donut { + stroke:$chart-color-w; + } + .ct-series-x .ct-slice-donut { + stroke:$chart-color-x; + } + .ct-series-y .ct-slice-donut { + stroke:$chart-color-y; + } + .ct-series-z .ct-slice-donut { + stroke:$chart-color-z; + } .ct-series-a .ct-slice-donut-solid { fill:$chart-color-a; @@ -278,6 +344,30 @@ $chart-color-r: #ffffff; .ct-series-r .ct-slice-donut-solid { fill:$chart-color-r; } + .ct-series-s .ct-slice-donut-solid { + fill:$chart-color-s; + } + .ct-series-t .ct-slice-donut-solid { + fill:$chart-color-t; + } + .ct-series-u .ct-slice-donut-solid { + fill:$chart-color-u; + } + .ct-series-v .ct-slice-donut-solid { + fill:$chart-color-v; + } + .ct-series-w .ct-slice-donut-solid { + fill:$chart-color-w; + } + .ct-series-x .ct-slice-donut-solid { + fill:$chart-color-x; + } + .ct-series-y .ct-slice-donut-solid { + fill:$chart-color-y; + } + .ct-series-z .ct-slice-donut-solid { + fill:$chart-color-z; + } } html body { @@ -333,6 +423,30 @@ html body { color: $chart-color-q; } .ct-color-r { - color: $chart-color-r + color: $chart-color-r; + } + .ct-color-s { + color: $chart-color-s; + } + .ct-color-t { + color: $chart-color-t; + } + .ct-color-u { + color: $chart-color-u; + } + .ct-color-v { + color: $chart-color-v; + } + .ct-color-w { + color: $chart-color-w; + } + .ct-color-x { + color: $chart-color-x; + } + .ct-color-y { + color: $chart-color-y; + } + .ct-color-z { + color: $chart-color-z; } } \ No newline at end of file diff --git a/src/styles/app.scss b/src/styles/app.scss index bd24f2b..245f364 100755 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -4,6 +4,7 @@ Author: UnEspace Email: rampeur@gmail.com File: scss */ +@use 'sass:color'; html { height: 100%; @@ -52,6 +53,18 @@ a.link { color: $primary; } } +a.warn { + color: $warn; +} +a.warn:hover { + color: color.adjust($warn, $alpha: -0.3); +} +a.accent { + color: $accent; +} +a.accent:hover { + color: color.adjust($accent, $alpha: -0.3); +} .no-shrink { flex-shrink: 0; @@ -105,6 +118,47 @@ huapp-full-layout .mdc-text-field--filled .mdc-floating-label { padding-bottom: 8px; } } +.mat-mdc-icon-button { + .mat-icon { + line-height: 0.87; + } +} + +/**************** +* Definitions * +****************/ +dl.dl-horizontal { + margin-bottom: 0; + font-size: 14px; + margin-top: 0; + margin-bottom: 20px; + dt { + float: left; + width: 120px; + overflow: hidden; + clear: left; + color: $light; + font-weight: normal; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + } + dt, + dd { + line-height: 1.42857143; + min-height: 1.42857143em; + } + dd { + margin-left: 140px; + /* color: $extra-light; */ + } + .dl-large dt { + width: 200px; + } + .dl-large dd { + margin-left: 220px; + } +} /**************** * Text Colors * diff --git a/src/styles/tables.scss b/src/styles/tables.scss index bdfeb8c..999919f 100644 --- a/src/styles/tables.scss +++ b/src/styles/tables.scss @@ -84,8 +84,9 @@ caption { padding-top: 1rem; } -tr.mat-mdc-header-row.primary { - background-color: rgba(167, 212, 196, 0.1); +tr.mat-mdc-header-row.primary, +.table.table-dark>thead>tr.primary { + background-color: rgba(167, 212, 196, 0.1); // #a5d492; } .table.table-dark>tbody>tr.primary.active>td, .table.table-dark>tbody>tr.primary.active>th, @@ -99,18 +100,19 @@ tr.mat-mdc-header-row.primary { .table.table-dark>thead>tr.primary.active>th, .table.table-dark>thead>tr.primary>td.active, .table.table-dark>thead>tr.primary>th.active { - background-color: rgba(165, 212, 146, 0.2); //#a5d492; + background-color: rgba(165, 212, 146, 0.2); } .table-dark.table-hover>tbody>tr.primary.active:hover>td, .table-dark.table-hover>tbody>tr.primary.active:hover>th, .table-dark.table-hover>tbody>tr.primary:hover>.active, .table-dark.table-hover>tbody>tr.primary>td.active:hover, .table-dark.table-hover>tbody>tr.primary>th.active:hover { - background-color: rgba(165, 212, 146, 0.3); //#93c081; + background-color: rgba(165, 212, 146, 0.3); } -tr.mat-mdc-header-row.warn { - background-color: rgba(151, 136, 199, 0.1); +tr.mat-mdc-header-row.warn, +.table.table-dark>thead>tr.warn { + background-color: rgba(151, 136, 199, 0.1); // #9788c7 } .table.table-dark>tbody>tr.warn.active>td, .table.table-dark>tbody>tr.warn.active>th, @@ -131,7 +133,33 @@ tr.mat-mdc-header-row.warn { .table-dark.table-hover>tbody>tr.warn:hover>.active, .table-dark.table-hover>tbody>tr.warn>td.active:hover, .table-dark.table-hover>tbody>tr.warn>th.active:hover { - background-color: rgba(151, 136, 199, 0.3); + background-color: rgba(151, 136, 199, 0.3); +} + +tr.mat-mdc-header-row.accent, +.table.table-dark>thead>tr.accent { + background-color: rgba(205, 186, 152, 0.1); // #cdba98 +} +.table.table-dark>tbody>tr.accent.active>td, +.table.table-dark>tbody>tr.accent.active>th, +.table.table-dark>tbody>tr.accent>td.active, +.table.table-dark>tbody>tr.accent>th.active, +.table.table-dark>tfoot>tr.accent.active>td, +.table.table-dark>tfoot>tr.accent.active>th, +.table.table-dark>tfoot>tr.accent>td.active, +.table.table-dark>tfoot>tr.accent>th.active, +.table.table-dark>thead>tr.accent.active>td, +.table.table-dark>thead>tr.accent.active>th, +.table.table-dark>thead>tr.accent>td.active, +.table.table-dark>thead>tr.accent>th.active { + background-color: rgba(205, 186, 152, 0.2); +} +.table-dark.table-hover>tbody>tr.accent.active:hover>td, +.table-dark.table-hover>tbody>tr.accent.active:hover>th, +.table-dark.table-hover>tbody>tr.accent:hover>.active, +.table-dark.table-hover>tbody>tr.accent>td.active:hover, +.table-dark.table-hover>tbody>tr.accent>th.active:hover { + background-color: rgba(205, 186, 152, 0.3); } .table>caption+thead>tr:first-child>td, diff --git a/src/styles/variable.scss b/src/styles/variable.scss index af21f3c..985034a 100755 --- a/src/styles/variable.scss +++ b/src/styles/variable.scss @@ -113,6 +113,7 @@ $md-custom-warn: ( /* Theme Colors */ $primary: mat.get-color-from-palette($md-custom-primary, 700); // #a7d4c4; // #a1c7a1; $accent: mat.get-color-from-palette($md-custom-accent, 700); // #d9caae; // #d9caae; +$warn: mat.get-color-from-palette($md-custom-warn, 600); // #9788c7; // #9788c7; $secondary: mat.get-color-from-palette($md-custom-warn, 600); // #9788c7; // #9788c7; $headingtext: mat.get-color-from-palette($md-custom-primary, 500); // #b7ddd0; // #b1d2b1; $bodytext: mat.get-color-from-palette($md-custom-primary, 100); // #e9f5f1; // #e8f2e8; @@ -137,7 +138,7 @@ $empty: #717171; $muted: #aaaaaa; $extra-muted: #c4c4c4; $dark: #263238; -$light: #ebf3f5; +$light: #ebf5ef; $extra-light: #f2f4f8; @@ -208,4 +209,12 @@ $chart-color-n: #337ab7; $chart-color-o: #fd18f3; $chart-color-p: #d61f1f; $chart-color-q: #99abb4; -$chart-color-r: #ffffff; +$chart-color-r: #cdba98; +$chart-color-s: #65e0b8; +$chart-color-t: #02bfab; +$chart-color-u: #65dae0; +$chart-color-v: #a1c7a1; +$chart-color-w: #d9caae; +$chart-color-x: #9788c7; +$chart-color-y: #d4ce70; +$chart-color-z: #ffffff;