From fbc6e22bf720cc32caf2d730e9a08adf119e654c Mon Sep 17 00:00:00 2001 From: Alessio Date: Wed, 29 Apr 2020 09:46:31 +0200 Subject: [PATCH] fix avvio produzione modal --- .../assets/styles/base/avvio-prod.less | 18 +- .../wwwroot/assets/styles/base/layout.less | 2 +- .../assets/styles/base/tastierino.less | 1 - Thermo.Active/wwwroot/assets/styles/style.css | 736 +++++++++--------- 4 files changed, 384 insertions(+), 373 deletions(-) diff --git a/Thermo.Active/wwwroot/assets/styles/base/avvio-prod.less b/Thermo.Active/wwwroot/assets/styles/base/avvio-prod.less index 64190b33..c93223ad 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/avvio-prod.less +++ b/Thermo.Active/wwwroot/assets/styles/base/avvio-prod.less @@ -5,19 +5,25 @@ @modal: modal; .@{modal}.avvio-produzione-info { + margin-top: 100px; width: 653px; height: 616px; - // section.body{ + section.body{ - // section{ + section{ + justify-content: center; - // .specific{ + .specific{ - // } + .tast{ + margin-left: 25%; + } + + } - // } + } - // } + } } \ No newline at end of file diff --git a/Thermo.Active/wwwroot/assets/styles/base/layout.less b/Thermo.Active/wwwroot/assets/styles/base/layout.less index 39abfc19..61a41d28 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/layout.less +++ b/Thermo.Active/wwwroot/assets/styles/base/layout.less @@ -1,4 +1,5 @@ // out: false, sourceMap: false, main: ../style.less +@import "setup.less"; @import "colors.less"; @import "modals.less"; @import "pirometro.less"; @@ -9,7 +10,6 @@ @import "circlegantt.less"; @import "arretramento-riscaldi.less"; @import "avvio-prod.less"; -@import "setup.less"; @import "ciclo.less"; @import "raffreddamento.less"; @import "processo.less"; diff --git a/Thermo.Active/wwwroot/assets/styles/base/tastierino.less b/Thermo.Active/wwwroot/assets/styles/base/tastierino.less index 70c0c88b..1709ee9f 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/tastierino.less +++ b/Thermo.Active/wwwroot/assets/styles/base/tastierino.less @@ -4,7 +4,6 @@ @import "fonts.less"; .tast{ - margin-left: 25%; height: 261px; width: 293px; background-color:@color-silver; diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css index e5e9a2b2..7e6b969c 100644 --- a/Thermo.Active/wwwroot/assets/styles/style.css +++ b/Thermo.Active/wwwroot/assets/styles/style.css @@ -1,6 +1,373 @@ @import url(../../libs/font-awesome/css/font-awesome.css); @import url(../../libs/glyphicons/styles/glyphicons.css); @import "iziToast.min.css"; +.setup { + padding-top: 50px; + display: flex; + justify-content: flex-start; + align-items: center; + flex-flow: column nowrap; + width: 100vw; + height: 100vh; +} +.setup hr { + flex-shrink: 0; + background-color: #979797; + width: 2px; + height: 100%; + margin: 0; + margin-left: 5px; +} +.setup .modal { + width: 1820px; + height: 980px; +} +.setup .modal section.body { + height: calc(100% - 66px); +} +.setup .modal section.body section { + height: 100%; + flex-flow: row nowrap; + padding: 14px; + display: flex; + justify-content: flex-start; + width: calc(100% - 28px); + height: calc(100% - 28px - 82px); +} +.setup .modal section.body section .auto { + overflow-y: auto; + overflow-x: hidden; +} +.setup .modal section.body section aside { + display: flex; + justify-content: start; + flex-direction: column; + height: 100%; + width: 520px; + flex: 0 0 520px; + overflow-y: scroll; + padding-right: 10px; +} +.setup .modal section.body section aside hr { + flex-shrink: 0; + background-color: #979797; + width: 100%; + height: 2px; + margin-left: 0px; +} +.setup .modal section.body section .specific { + display: flex; + flex-direction: column; +} +.setup .modal section.body section .specific .svg-area { + display: flex; + justify-content: center; +} +.setup .modal section.body section .specific .svg-area .input-circles { + display: flex; + flex-direction: column; +} +.setup .modal section.body section .specific .svg-area .input-circles span { + object-fit: contain; + font-size: 22px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: white; + background-color: #979797; +} +.setup .modal section.body section .specific .svg-area .input-circles .circle { + width: 141px; + height: 60px; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5); + background-color: rgba(255, 255, 255, 0.8); + display: flex; + justify-content: flex-start; + object-fit: contain; + border-radius: 40.5px; + border: solid 4px #9b9b9b; +} +.setup .modal section.body section .specific .svg-area .input-circles input { + width: 40px; + height: 21px; + margin: auto; + object-fit: contain; + font-size: 20px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + color: #6d6d6d; + border: none; +} +.setup .modal section.body section .specific .svg-area .input-circles label { + margin: auto; + object-fit: contain; + font-size: 20px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + color: #6d6d6d; +} +.setup .modal section.body section .specific .svg-area .input-circles img { + margin: auto; + width: 20px; + height: 20px; + object-fit: contain; +} +.setup .modal section.body footer { + height: 82px; + display: flex; + justify-content: flex-end; + align-items: center; +} +.setup .modal header { + background-color: #fff; + color: #002680; + font-weight: 600; + font-size: 24px; + text-align: left; + padding: 0px 23px; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: stretch; +} +.modal.setup-info header { + padding-left: 31px; + display: flex; + align-items: center; + font-size: 20px; + font-weight: bold; + color: darkblue; +} +.tab-header { + display: flex; + flex-flow: row; + align-items: stretch; + justify-content: flex-start; +} +.tab-header button { + background: none; + border: 1px solid #bbbcbc; + padding: 0 38px; + border-bottom: none; + font-size: 20px; + background-color: #bbbcbc; + color: #002680; +} +.tab-header button.active { + background-color: #fff; + font-weight: bold; + border-top: 2px solid #002680; +} +.modal.setup-info { + width: 1639px; + height: 695px; + background-color: #fff; + margin: 150px 193px; + box-shadow: none; +} +.modal.setup-info section { + height: 100%; +} +.modal.setup-info section .Rectangle { + width: calc(100% - 200px); + height: calc(100% - 200px); + background-color: #BBBCBC; + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: 1fr 1fr; + align-items: center; + justify-items: center; + padding: 100px; +} +.setup-button { + cursor: pointer; + display: grid; + width: 200px; + height: 128px; + grid-template-columns: 50px 1fr; + grid-template-rows: 1fr 50px; + position: relative; +} +.setup-button span, +.setup-button label { + grid-column: 1; + display: flex; + align-items: flex-end; + color: #fff; + z-index: 2; + justify-content: center; + font-weight: 500; + font-size: 18px; + padding-left: 10px; +} +.setup-button label { + grid-column: 2; + color: #002680; + justify-content: flex-start; +} +.setup-button img { + grid-column: 2; + grid-row: 2; + z-index: 2; + margin: auto; +} +.setup-button i { + grid-column: 2; + grid-row: 2; + z-index: 2; + margin: auto; + transform: scale(1.5); +} +.setup-button i.fa-check-circle { + color: #90BF3D; +} +.setup-button i.fa-minus-circle { + color: #7A7C74; +} +.setup-button .background-top, +.setup-button .background-bottom { + position: absolute; + left: 0; + width: 100%; + height: 50%; + transform: skewX(12px); +} +.setup-button .background-top:after, +.setup-button .background-bottom:after { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 35px; + background-color: #002680; +} +.setup-button .background-top { + background-image: linear-gradient(to bottom, #fff, #e6e6e6); + top: 0; + transform: skewX(20deg); +} +.setup-button .background-bottom { + background-image: linear-gradient(to bottom, #e6e6e6, #e2e2e2); + bottom: 0; + transform: skewX(-20deg); +} +.box { + margin-bottom: 30px; + box-sizing: border-box; + clear: both; +} +.box .header { + display: flex; + align-items: center; + justify-content: center; + height: 44px; + width: 100%; + font-size: 24px; + font-weight: bold; + color: #fff; + background-color: #979797; +} +.box .body { + padding: 20px; + display: flex; + flex-flow: column; + justify-items: center; + padding-bottom: 10px; + border: 2px solid #979797; +} +.box .submit { + margin: auto; + width: 90px; + height: 48px; + object-fit: contain; + border-radius: 8px; + border: none; + box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); + background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); +} +.box .submit label { + object-fit: contain; + font-size: 18px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: #002680; +} +.input-area { + margin: 10px auto; + display: flex; + flex-flow: row; + align-items: center; + justify-content: space-between; + width: 100%; + height: 48px; +} +.input-area.col { + flex-flow: column; + align-items: flex-start; + height: auto; +} +.input-area h3 { + font-weight: normal; + color: #002680; + margin: 18px 0; +} +.input-area .buttons { + width: 100%; + display: flex; + flex-flow: row; + margin-bottom: 18px; +} +.input-area .buttons:last-child { + margin-bottom: 0; +} +.input-area label { + color: #002680; + font-size: 24px; + font-weight: 500; + flex: 1; +} +.input-area .rect { + object-fit: contain; + font-size: 20px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + color: #6d6d6d; + text-align: center; + width: 98px; + height: 48px; + border-radius: 2px; + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); +} +.input-area select { + min-width: 150px; + height: 48px; + background-color: #fff; + padding: 0 20px; + font-size: 1rem; +} +.setup-play { + cursor: pointer; + margin: auto; + display: flex; +} .text-success { color: #002680; } @@ -3986,7 +4353,6 @@ margin: 16px; } .tast { - margin-left: 25%; height: 261px; width: 293px; background-color: #bbbcbc; @@ -4141,375 +4507,15 @@ height: 411px; } .modal.avvio-produzione-info { + margin-top: 100px; width: 653px; height: 616px; } -.setup { - padding-top: 50px; - display: flex; - justify-content: flex-start; - align-items: center; - flex-flow: column nowrap; - width: 100vw; - height: 100vh; -} -.setup hr { - flex-shrink: 0; - background-color: #979797; - width: 2px; - height: 100%; - margin: 0; - margin-left: 5px; -} -.setup .modal { - width: 1820px; - height: 980px; -} -.setup .modal section.body { - height: calc(100% - 66px); -} -.setup .modal section.body section { - height: 100%; - flex-flow: row nowrap; - padding: 14px; - display: flex; - justify-content: flex-start; - width: calc(100% - 28px); - height: calc(100% - 28px - 82px); -} -.setup .modal section.body section .auto { - overflow-y: auto; - overflow-x: hidden; -} -.setup .modal section.body section aside { - display: flex; - justify-content: start; - flex-direction: column; - height: 100%; - width: 520px; - flex: 0 0 520px; - overflow-y: scroll; - padding-right: 10px; -} -.setup .modal section.body section aside hr { - flex-shrink: 0; - background-color: #979797; - width: 100%; - height: 2px; - margin-left: 0px; -} -.setup .modal section.body section .specific { - display: flex; - flex-direction: column; -} -.setup .modal section.body section .specific .svg-area { - display: flex; +.modal.avvio-produzione-info section.body section { justify-content: center; } -.setup .modal section.body section .specific .svg-area .input-circles { - display: flex; - flex-direction: column; -} -.setup .modal section.body section .specific .svg-area .input-circles span { - object-fit: contain; - font-size: 22px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - text-align: center; - color: white; - background-color: #979797; -} -.setup .modal section.body section .specific .svg-area .input-circles .circle { - width: 141px; - height: 60px; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5); - background-color: rgba(255, 255, 255, 0.8); - display: flex; - justify-content: flex-start; - object-fit: contain; - border-radius: 40.5px; - border: solid 4px #9b9b9b; -} -.setup .modal section.body section .specific .svg-area .input-circles input { - width: 40px; - height: 21px; - margin: auto; - object-fit: contain; - font-size: 20px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - color: #6d6d6d; - border: none; -} -.setup .modal section.body section .specific .svg-area .input-circles label { - margin: auto; - object-fit: contain; - font-size: 20px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - color: #6d6d6d; -} -.setup .modal section.body section .specific .svg-area .input-circles img { - margin: auto; - width: 20px; - height: 20px; - object-fit: contain; -} -.setup .modal section.body footer { - height: 82px; - display: flex; - justify-content: flex-end; - align-items: center; -} -.setup .modal header { - background-color: #fff; - color: #002680; - font-weight: 600; - font-size: 24px; - text-align: left; - padding: 0px 23px; - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - align-items: stretch; -} -.modal.setup-info header { - padding-left: 31px; - display: flex; - align-items: center; - font-size: 20px; - font-weight: bold; - color: darkblue; -} -.tab-header { - display: flex; - flex-flow: row; - align-items: stretch; - justify-content: flex-start; -} -.tab-header button { - background: none; - border: 1px solid #bbbcbc; - padding: 0 38px; - border-bottom: none; - font-size: 20px; - background-color: #bbbcbc; - color: #002680; -} -.tab-header button.active { - background-color: #fff; - font-weight: bold; - border-top: 2px solid #002680; -} -.modal.setup-info { - width: 1639px; - height: 695px; - background-color: #fff; - margin: 150px 193px; - box-shadow: none; -} -.modal.setup-info section { - height: 100%; -} -.modal.setup-info section .Rectangle { - width: calc(100% - 200px); - height: calc(100% - 200px); - background-color: #BBBCBC; - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-template-rows: 1fr 1fr; - align-items: center; - justify-items: center; - padding: 100px; -} -.setup-button { - cursor: pointer; - display: grid; - width: 200px; - height: 128px; - grid-template-columns: 50px 1fr; - grid-template-rows: 1fr 50px; - position: relative; -} -.setup-button span, -.setup-button label { - grid-column: 1; - display: flex; - align-items: flex-end; - color: #fff; - z-index: 2; - justify-content: center; - font-weight: 500; - font-size: 18px; - padding-left: 10px; -} -.setup-button label { - grid-column: 2; - color: #002680; - justify-content: flex-start; -} -.setup-button img { - grid-column: 2; - grid-row: 2; - z-index: 2; - margin: auto; -} -.setup-button i { - grid-column: 2; - grid-row: 2; - z-index: 2; - margin: auto; - transform: scale(1.5); -} -.setup-button i.fa-check-circle { - color: #90BF3D; -} -.setup-button i.fa-minus-circle { - color: #7A7C74; -} -.setup-button .background-top, -.setup-button .background-bottom { - position: absolute; - left: 0; - width: 100%; - height: 50%; - transform: skewX(12px); -} -.setup-button .background-top:after, -.setup-button .background-bottom:after { - content: ""; - display: block; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 35px; - background-color: #002680; -} -.setup-button .background-top { - background-image: linear-gradient(to bottom, #fff, #e6e6e6); - top: 0; - transform: skewX(20deg); -} -.setup-button .background-bottom { - background-image: linear-gradient(to bottom, #e6e6e6, #e2e2e2); - bottom: 0; - transform: skewX(-20deg); -} -.box { - margin-bottom: 30px; - box-sizing: border-box; - clear: both; -} -.box .header { - display: flex; - align-items: center; - justify-content: center; - height: 44px; - width: 100%; - font-size: 24px; - font-weight: bold; - color: #fff; - background-color: #979797; -} -.box .body { - padding: 20px; - display: flex; - flex-flow: column; - justify-items: center; - padding-bottom: 10px; - border: 2px solid #979797; -} -.box .submit { - margin: auto; - width: 90px; - height: 48px; - object-fit: contain; - border-radius: 8px; - border: none; - box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); - background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); -} -.box .submit label { - object-fit: contain; - font-size: 18px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - text-align: center; - color: #002680; -} -.input-area { - margin: 10px auto; - display: flex; - flex-flow: row; - align-items: center; - justify-content: space-between; - width: 100%; - height: 48px; -} -.input-area.col { - flex-flow: column; - align-items: flex-start; - height: auto; -} -.input-area h3 { - font-weight: normal; - color: #002680; - margin: 18px 0; -} -.input-area .buttons { - width: 100%; - display: flex; - flex-flow: row; - margin-bottom: 18px; -} -.input-area .buttons:last-child { - margin-bottom: 0; -} -.input-area label { - color: #002680; - font-size: 24px; - font-weight: 500; - flex: 1; -} -.input-area .rect { - object-fit: contain; - font-size: 20px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - color: #6d6d6d; - text-align: center; - width: 98px; - height: 48px; - border-radius: 2px; - box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); -} -.input-area select { - min-width: 150px; - height: 48px; - background-color: #fff; - padding: 0 20px; - font-size: 1rem; -} -.setup-play { - cursor: pointer; - margin: auto; - display: flex; +.modal.avvio-produzione-info section.body section .specific .tast { + margin-left: 25%; } .modal.ciclo-info section .specific { padding: 0 10px;