From 087d848c18dbd11f9f409f7237ac162a804fced8 Mon Sep 17 00:00:00 2001 From: Stephan de Wit Date: Mon, 17 Feb 2025 15:48:47 +0100 Subject: [PATCH] misc/themes: update css for chart.js v4 --- .../themes/advanced/assets/stylesheets/dashboard.scss | 9 +++++++++ .../www/themes/advanced/build/css/dashboard.css | 2 +- .../themes/cicada/assets/stylesheets/dashboard.scss | 10 ++++++++++ .../opnsense/www/themes/cicada/build/css/dashboard.css | 10 ++++++++++ .../www/themes/rebellion/build/css/dashboard.css | 10 ++++++++++ .../themes/vicuna/assets/stylesheets/dashboard.scss | 9 +++++++++ .../opnsense/www/themes/vicuna/build/css/dashboard.css | 10 ++++++++++ 7 files changed, 59 insertions(+), 1 deletion(-) diff --git a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/dashboard.scss b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/dashboard.scss index af78a80af..7a7d96579 100644 --- a/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/dashboard.scss +++ b/misc/theme-advanced/src/opnsense/www/themes/advanced/assets/stylesheets/dashboard.scss @@ -128,11 +128,20 @@ td { word-break: break-all; } +.canvas-container-noaspectratio { + position: relative; +} .canvas-container { position: relative; } +.canvas-container > canvas { + /* ChartJS v4 workaround: https://github.com/chartjs/Chart.js/issues/11005 */ + width: 100% !important; + height: 100% !important; +} + .cpu-canvas-container { display: flex; flex-direction: column; diff --git a/misc/theme-advanced/src/opnsense/www/themes/advanced/build/css/dashboard.css b/misc/theme-advanced/src/opnsense/www/themes/advanced/build/css/dashboard.css index f140ce341..947ca2075 100644 --- a/misc/theme-advanced/src/opnsense/www/themes/advanced/build/css/dashboard.css +++ b/misc/theme-advanced/src/opnsense/www/themes/advanced/build/css/dashboard.css @@ -1 +1 @@ -:root{--chart-js-background-color: #f7e2d6;--chart-js-border-color: #f6f6f6;--chart-js-font-color: #4b4b64}.btn-pressed,.btn-pressed:hover{color:white;background-color:#0086d9}#save-grid{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50px;height:33px;margin-right:10px;transition:opacity 0.3s ease}#save-btn-text,#icon-container{position:absolute}#icon-container{display:inline-flex;align-items:center;justify-content:center}#save-spinner,#save-check{transition:opacity 0.3s ease, transform 0.3s ease}.transition-spinner,transition-check{transition:opacity 0.3s ease, transform 0.3s ease}.grid-stack-item-content{text-align:center;border:none !important;border-radius:0.5em 0.5em 0.5em 0.5em;background-color:#fff;box-shadow:0 2px 4px rgba(40,40,50,0.15),0 0 1px rgba(40,40,50,0.35)}.widget-error{margin:50px;color:#721c24}.widget-content{position:relative;width:100%;height:100%;padding:1px;cursor:grab}.widget-header{font-size:14px;display:flex;align-items:center;justify-content:space-between;margin-top:0.5em;margin-right:1em;margin-left:1em}.widget-spinner{margin-top:20px}.fa-stack.small{font-size:0.5em}.close-handle,.edit-handle{padding:.2rem .5rem;cursor:pointer;text-align:right;vertical-align:middle}.close-handle>i,.edit-handle>i{font-size:1.2rem !important}.widget-header-left{display:flex;align-items:center;flex:1;justify-content:flex-start}.widget-command-container{display:flex;align-items:center;flex:1;justify-content:flex-end}.widget-title{display:flex;align-items:center;justify-content:center}.panel-divider{width:100%;height:8px;margin-bottom:10px;text-align:center}.panel-divider .line{display:none}td{word-break:break-all}.canvas-container{position:relative}.cpu-canvas-container{display:flex;flex-direction:column}.smoothie-container{width:100%}.smoothie-chart-tooltip{font-size:13px;z-index:1;padding-right:15px;padding-left:15px;pointer-events:none;color:white;border-radius:0.5em 0.5em 0.5em 0.5em;background:rgba(50,50,50,0.9)}.flex-container{display:flex;flex-wrap:nowrap;white-space:nowrap}.gateway-info{font-size:13px;margin:5px;padding:5px}.gateway-detail-container{display:none;margin:5px}.interface-info{display:flex;align-items:center;flex-wrap:wrap;height:100%}.nowrap{flex-wrap:nowrap}.gateway-graph{display:none}.flex-container>.gateway-graph{font-size:13px}.vertical-center-row{display:inline;height:100%}.interfaces-info{font-size:.8rem;margin:5px}.interface-descr{font-size:1em;margin-left:.8em;cursor:pointer;text-decoration:underline}.interfaces-detail-container{display:none;margin:5px}.d-flex{display:flex}.d-flex>.justify-content-start{justify-content:start}.d-flex>.justify-content-end{justify-content:end}#chartjs-toolip{z-index:20}.cpu-type{margin-top:10px;margin-bottom:10px}div{box-sizing:border-box}.flextable-container{display:block;width:95%;max-width:1200px;margin:2em auto}.flextable-header{display:flex;flex-flow:row wrap;padding:0.5em 0.5em;transition:0.5s;border-top:solid 1px rgba(0,119,217,0.15) !important}.flextable-row{display:flex;align-items:center;flex-flow:row wrap;padding:0.5em 0.5em;transition:0.5s;border-top:solid 1px #e8eaef !important}.flextable-header .flex-cell{font-weight:bold}.flextable-row:hover{transition:500ms;background:#f5f5f5}.flex-cell{padding:4px 0;text-align:left;word-break:break-word}.column{display:flex;flex-flow:column wrap;width:50%;padding:0}.column .flex-cell{display:flex;flex-flow:row wrap;width:100%;padding:4px 0;border:0;border-top:#e8eaef}.column .flex-cell:hover{transition:500ms;background:#f5f5f5}.flex-subcell{width:100%;text-align:left}.column .flex-cell:not(:last-child){border-bottom:solid 1px #e8eaef !important}.grid-header-container{display:grid;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr))}.grid-row{display:grid;transition:0.5s;opacity:0.4;border-top:1px solid #eff3f8;background-color:#d6e5f7;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr))}.grid-row:hover{transition:500ms;background:#f5f5f5 !important}.grid-header{font-weight:bold;border-top:1px solid #eff3f8}.grid-item{padding:4px;text-align:center}.ovpn-common-name{display:flex;align-items:center;justify-content:center} +:root{--chart-js-background-color: #f7e2d6;--chart-js-border-color: #f6f6f6;--chart-js-font-color: #4b4b64}.btn-pressed,.btn-pressed:hover{color:#fff;background-color:#0086d9}#save-grid{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50px;height:33px;margin-right:10px;transition:opacity .3s ease}#save-btn-text,#icon-container{position:absolute}#icon-container{display:inline-flex;align-items:center;justify-content:center}#save-spinner,#save-check{transition:opacity .3s ease,transform .3s ease}.transition-spinner,transition-check{transition:opacity .3s ease,transform .3s ease}.grid-stack-item-content{text-align:center;border:none !important;border-radius:.5em .5em .5em .5em;background-color:#fff;box-shadow:0 2px 4px rgba(40,40,50,.15),0 0 1px rgba(40,40,50,.35)}.widget-error{margin:50px;color:#721c24}.widget-content{position:relative;width:100%;height:100%;padding:1px;cursor:grab}.widget-header{font-size:14px;display:flex;align-items:center;justify-content:space-between;margin-top:.5em;margin-right:1em;margin-left:1em}.widget-spinner{margin-top:20px}.fa-stack.small{font-size:.5em}.close-handle,.edit-handle{padding:.2rem .5rem;cursor:pointer;text-align:right;vertical-align:middle}.close-handle>i,.edit-handle>i{font-size:1.2rem !important}.widget-header-left{display:flex;align-items:center;flex:1;justify-content:flex-start}.widget-command-container{display:flex;align-items:center;flex:1;justify-content:flex-end}.widget-title{display:flex;align-items:center;justify-content:center}.panel-divider{width:100%;height:8px;margin-bottom:10px;text-align:center}.panel-divider .line{display:none}td{word-break:break-all}.canvas-container-noaspectratio{position:relative}.canvas-container{position:relative}.canvas-container>canvas{width:100% !important;height:100% !important}.cpu-canvas-container{display:flex;flex-direction:column}.smoothie-container{width:100%}.smoothie-chart-tooltip{font-size:13px;z-index:1;padding-right:15px;padding-left:15px;pointer-events:none;color:#fff;border-radius:.5em .5em .5em .5em;background:rgba(50,50,50,.9)}.flex-container{display:flex;flex-wrap:nowrap;white-space:nowrap}.gateway-info{font-size:13px;margin:5px;padding:5px}.gateway-detail-container{display:none;margin:5px}.interface-info{display:flex;align-items:center;flex-wrap:wrap;height:100%}.nowrap{flex-wrap:nowrap}.gateway-graph{display:none}.flex-container>.gateway-graph{font-size:13px}.vertical-center-row{display:inline;height:100%}.interfaces-info{font-size:.8rem;margin:5px}.interface-descr{font-size:1em;margin-left:.8em;cursor:pointer;text-decoration:underline}.interfaces-detail-container{display:none;margin:5px}.d-flex{display:flex}.d-flex>.justify-content-start{justify-content:start}.d-flex>.justify-content-end{justify-content:end}#chartjs-toolip{z-index:20}.cpu-type{margin-top:10px;margin-bottom:10px}div{box-sizing:border-box}.flextable-container{display:block;width:95%;max-width:1200px;margin:2em auto}.flextable-header{display:flex;flex-flow:row wrap;padding:.5em .5em;transition:.5s;border-top:solid 1px rgba(0,119,217,.15) !important}.flextable-row{display:flex;align-items:center;flex-flow:row wrap;padding:.5em .5em;transition:.5s;border-top:solid 1px #e8eaef !important}.flextable-header .flex-cell{font-weight:bold}.flextable-row:hover{transition:500ms;background:#f5f5f5}.flex-cell{padding:4px 0;text-align:left;word-break:break-word}.column{display:flex;flex-flow:column wrap;width:50%;padding:0}.column .flex-cell{display:flex;flex-flow:row wrap;width:100%;padding:4px 0;border:0;border-top:#e8eaef}.column .flex-cell:hover{transition:500ms;background:#f5f5f5}.flex-subcell{width:100%;text-align:left}.column .flex-cell:not(:last-child){border-bottom:solid 1px #e8eaef !important}.grid-header-container{display:grid;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr))}.grid-row{display:grid;transition:.5s;opacity:.4;border-top:1px solid #eff3f8;background-color:#d6e5f7;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr))}.grid-row:hover{transition:500ms;background:#f5f5f5 !important}.grid-header{font-weight:bold;border-top:1px solid #eff3f8}.grid-item{padding:4px;text-align:center}.ovpn-common-name{display:flex;align-items:center;justify-content:center}/*# sourceMappingURL=dashboard.css.map */ diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/dashboard.scss b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/dashboard.scss index 2eb8ea4d3..88e697987 100644 --- a/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/dashboard.scss +++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/dashboard.scss @@ -84,10 +84,20 @@ td { margin: 5px; } +.canvas-container-noaspectratio { + position: relative; +} + .canvas-container { position: relative; } +.canvas-container > canvas { + /* ChartJS v4 workaround: https://github.com/chartjs/Chart.js/issues/11005 */ + width: 100% !important; + height: 100% !important; +} + .cpu-canvas-container { display: flex; flex-direction: column; diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dashboard.css b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dashboard.css index 4725d9e07..7d784bb26 100644 --- a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dashboard.css +++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dashboard.css @@ -79,10 +79,20 @@ td { margin: 5px; } +.canvas-container-noaspectratio { + position: relative; +} + .canvas-container { position: relative; } +.canvas-container > canvas { + /* ChartJS v4 workaround: https://github.com/chartjs/Chart.js/issues/11005 */ + width: 100% !important; + height: 100% !important; +} + .cpu-canvas-container { display: flex; flex-direction: column; diff --git a/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/dashboard.css b/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/dashboard.css index 9ada40835..d1b95c429 100644 --- a/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/dashboard.css +++ b/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/dashboard.css @@ -107,10 +107,20 @@ td { margin: 5px; } +.canvas-container-noaspectratio { + position: relative; +} + .canvas-container { position: relative; } +.canvas-container > canvas { + /* ChartJS v4 workaround: https://github.com/chartjs/Chart.js/issues/11005 */ + width: 100% !important; + height: 100% !important; +} + .cpu-canvas-container { display: flex; flex-direction: column; diff --git a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/dashboard.scss b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/dashboard.scss index 73c537421..4d4066e9b 100644 --- a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/dashboard.scss +++ b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/dashboard.scss @@ -84,10 +84,19 @@ td { margin: 5px; } +.canvas-container-noaspectratio { + position: relative; +} + .canvas-container { position: relative; } +.canvas-container > canvas { + /* ChartJS v4 workaround: https://github.com/chartjs/Chart.js/issues/11005 */ + width: 100% !important; + height: 100% !important; +} .cpu-canvas-container { display: flex; flex-direction: column; diff --git a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dashboard.css b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dashboard.css index 62bc03c5e..533397d12 100644 --- a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dashboard.css +++ b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dashboard.css @@ -79,10 +79,20 @@ td { margin: 5px; } +.canvas-container-noaspectratio { + position: relative; +} + .canvas-container { position: relative; } +.canvas-container > canvas { + /* ChartJS v4 workaround: https://github.com/chartjs/Chart.js/issues/11005 */ + width: 100% !important; + height: 100% !important; +} + .cpu-canvas-container { display: flex; flex-direction: column;