From 7aa0ffb9270a98ac955a6c93ddb55d965e25715c Mon Sep 17 00:00:00 2001 From: isUnknown Date: Mon, 27 Jan 2025 20:44:11 +0100 Subject: [PATCH] save --- .../css/src/2.blocks.design-to-light.css | 130 ++++++++++-------- src/assets/css/src/2.blocks.dialog.css | 24 ++-- src/components/design-to-light/DTLPanel.vue | 14 +- .../OptimizationRequestDialog.vue | 1 + 4 files changed, 95 insertions(+), 74 deletions(-) diff --git a/src/assets/css/src/2.blocks.design-to-light.css b/src/assets/css/src/2.blocks.design-to-light.css index 0bbc40f..72dba17 100644 --- a/src/assets/css/src/2.blocks.design-to-light.css +++ b/src/assets/css/src/2.blocks.design-to-light.css @@ -28,7 +28,7 @@ max-height: calc(100vh - var(--gutter) * 2); } #dtl-page::before { - content: ''; + content: ""; display: block; position: absolute; inset: 0; @@ -39,7 +39,11 @@ background-position: top center; background-attachment: fixed; filter: saturate(60%); - mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 50%); + mask-image: linear-gradient( + 180deg, + rgba(0, 0, 0, 0.4) 0%, + rgba(0, 0, 0, 0) 50% + ); } #dtl-page > * { max-width: 73.25rem; /* 1172px */ @@ -52,7 +56,7 @@ #dtl-page .card ul { list-style: initial; padding-left: 1.25em; - padding-block: .25rem; + padding-block: 0.25rem; } /* Button */ @@ -68,14 +72,14 @@ width: 1.5rem; height: 1.5rem; position: absolute; - left: .5rem; - top: .5rem; + left: 0.5rem; + top: 0.5rem; } #dtl-btn[data-grade]::after, #dtl-btn .new { position: absolute; - right: .25rem; - top: .25rem; + right: 0.25rem; + top: 0.25rem; width: 2rem; height: 2rem; user-select: none; @@ -89,20 +93,20 @@ background: var(--color-primary-50); font-weight: 700; font-size: var(--text-xs); - padding: .5rem 0; + padding: 0.5rem 0; z-index: 10; } #dtl-btn .new::after { content: ""; - width: .5rem; - height: .5rem; + width: 0.5rem; + height: 0.5rem; border: 2px solid var(--color-black); border-radius: 50%; background: var(--color-primary); display: block; position: absolute; - top: -.333rem; - right: -.333rem; + top: -0.333rem; + right: -0.333rem; } /* Grades */ @@ -115,23 +119,23 @@ } [data-grade="A"]::after { background-image: var(--icon-grade-A); - background-color: rgba(0, 148, 91, .2); + background-color: rgba(0, 148, 91, 0.2); } [data-grade="B"]::after { background-image: var(--icon-grade-B); - background-color: rgba(94, 172, 13, .2); + background-color: rgba(94, 172, 13, 0.2); } [data-grade="C"]::after { background-image: var(--icon-grade-C); - background-color: rgba(238, 175, 16, .2); + background-color: rgba(238, 175, 16, 0.2); } [data-grade="D"]::after { background-image: var(--icon-grade-D); - background-color: rgba(242, 106, 79, .2); + background-color: rgba(242, 106, 79, 0.2); } [data-grade="E"]::after { background-image: var(--icon-grade-E); - background-color: rgba(243, 45, 47, .2); + background-color: rgba(243, 45, 47, 0.2); } /* Panel */ @@ -179,7 +183,7 @@ } #dtl-panel [role="tab"] { height: 2.5rem; - padding: var(--space-12) .625rem; + padding: var(--space-12) 0.625rem; color: var(--color-grey-400); font-weight: 500; white-space: pre; @@ -210,13 +214,19 @@ #note-globale input[type="range"] { width: 100%; - height: .5rem; - background: linear-gradient(to right, - rgba(243, 45, 47, 1) 0%, rgba(243, 45, 47, 1) 20%, - rgba(242, 106, 79, 1) 20%, rgba(242, 106, 79, 1) 40%, - rgba(238, 175, 16, 1) 40%, rgba(238, 175, 16, 1) 60%, - rgba(94, 172, 13, 1) 60%, rgba(94, 172, 13, 1) 80%, - rgba(0, 148, 91, 1) 80%, rgba(0, 148, 91, 1) 100% + height: 0.5rem; + background: linear-gradient( + to right, + rgba(243, 45, 47, 1) 0%, + rgba(243, 45, 47, 1) 20%, + rgba(242, 106, 79, 1) 20%, + rgba(242, 106, 79, 1) 40%, + rgba(238, 175, 16, 1) 40%, + rgba(238, 175, 16, 1) 60%, + rgba(94, 172, 13, 1) 60%, + rgba(94, 172, 13, 1) 80%, + rgba(0, 148, 91, 1) 80%, + rgba(0, 148, 91, 1) 100% ); transform: scaleX(-1); } @@ -276,25 +286,25 @@ position: absolute; } #positionnement #design { - top: calc(50% - .666em); + top: calc(50% - 0.666em); right: calc(50% + 5rem); transform: translateY(-50%); } #positionnement #design::after { - content: 'Complexe'; + content: "Complexe"; bottom: -1.333em; right: 0; } -#positionnement #design+dd::before { - content: 'Design'; - top: calc(50% - .666em); +#positionnement #design + dd::before { + content: "Design"; + top: calc(50% - 0.666em); left: calc(50% + 5rem); transform: translateY(-50%); color: var(--color-grey-400); } -#positionnement #design+dd::after { - content: 'Sobre'; - top: calc(50% + .666em); +#positionnement #design + dd::after { + content: "Sobre"; + top: calc(50% + 0.666em); left: calc(50% + 5rem); transform: translateY(-50%); } @@ -303,18 +313,18 @@ transform: translateX(-50%); } #positionnement #poids::after { - content: ' Léger'; + content: " Léger"; position: static; } -#positionnement #poids+dd::before { - content: 'Poids'; +#positionnement #poids + dd::before { + content: "Poids"; bottom: 0; left: calc(50% - 1.5em); transform: translateX(-50%); color: var(--color-grey-400); } -#positionnement #poids+dd::after { - content: ' Lourd'; +#positionnement #poids + dd::after { + content: " Lourd"; bottom: 0; left: calc(50% + 1.5em); transform: translateX(-50%); @@ -322,11 +332,11 @@ #positionnement .dot { position: absolute; top: calc(50% + 0.6875rem); - left: calc(50% - .25rem); - width: .5rem; - height: .5rem; + left: calc(50% - 0.25rem); + width: 0.5rem; + height: 0.5rem; background: var(--color-white); - opacity: .5; + opacity: 0.5; border-radius: 50%; margin: 0; padding: 0; @@ -348,17 +358,16 @@ width: var(--gauge-outer-size); height: var(--gauge-outer-size); border-radius: 50%; - background-image: - conic-gradient( - from 0deg at 50% 50%, - #EEAF10 0deg, - #5EAC0D 72deg, - #00945B 144deg, - #00945B 180deg, - #F32D2F 180deg, - #F26A4F 216deg, - #EEAF10 360deg - ); + background-image: conic-gradient( + from 0deg at 50% 50%, + #eeaf10 0deg, + #5eac0d 72deg, + #00945b 144deg, + #00945b 180deg, + #f32d2f 180deg, + #f26a4f 216deg, + #eeaf10 360deg + ); background-size: 100%; background-position: center; position: relative; @@ -371,7 +380,7 @@ .gauge::after { content: attr(data-value); display: block; - padding: 1.125rem 1.25rem 1.125rem .875rem; + padding: 1.125rem 1.25rem 1.125rem 0.875rem; font-size: var(--text-lg); width: var(--gauge-inner-size); height: var(--gauge-inner-size); @@ -380,14 +389,15 @@ position: absolute; top: calc((var(--gauge-outer-size) - var(--gauge-inner-size)) / 2); left: calc((var(--gauge-outer-size) - var(--gauge-inner-size)) / 2); - font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif; + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", + sans-serif; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1; z-index: 10; } .gauge::before { - content: ''; + content: ""; display: block; width: calc(var(--gauge-outer-size) / 2); height: var(--gauge-outer-size); @@ -408,7 +418,7 @@ right: unset; } .gauge label::before { - content: ''; + content: ""; display: block; width: calc(var(--gauge-outer-size) / 2); height: var(--gauge-outer-size); @@ -427,7 +437,7 @@ transform: rotate(calc(180deg + 30deg * var(--value))) scale(1.03); } .gauge label::after { - content: ''; + content: ""; display: block; position: absolute; top: calc(-1 * var(--gauge-outer-size) - 2px); @@ -447,8 +457,8 @@ left: -1rem; right: -1rem; font-weight: 500; - padding: .5rem 0; + padding: 0.5rem 0; } .gauge input[type="range"] { visibility: hidden; -} \ No newline at end of file +} diff --git a/src/assets/css/src/2.blocks.dialog.css b/src/assets/css/src/2.blocks.dialog.css index caabd5f..52f6752 100644 --- a/src/assets/css/src/2.blocks.dialog.css +++ b/src/assets/css/src/2.blocks.dialog.css @@ -74,7 +74,7 @@ /* Content */ .dialog__inner { - background: var(--dialog-inner-background, #F7F7F7); + background: var(--dialog-inner-background, #f7f7f7); height: 100%; } .dialog__inner > header { @@ -101,14 +101,14 @@ right: var(--space-8); } .dialog__inner .options-selector + button::before { - content: ''; + content: ""; display: block; position: absolute; left: calc(-3rem - 1px); top: -1px; bottom: -1px; width: 3rem; - background: linear-gradient(to right, transparent, #FBFBFB); + background: linear-gradient(to right, transparent, #fbfbfb); } .dialog [data-pc-section="content"] [role="tablist"] { height: 3.5rem; @@ -168,10 +168,9 @@ color: var(--color-white); } - /* Virtual Sample */ .dialog#virtual-sample { - --dialog-inner-background: #F7F7F7; + --dialog-inner-background: #f7f7f7; } .dialog#virtual-sample [data-pc-section="header"] h2 { left: 22.5rem; @@ -206,7 +205,13 @@ gap: 0; padding: var(--space-32); color: var(--color-white); - background: linear-gradient(90deg, hsla(0, 0%, 10%, .5) 0%, hsla(0, 0%, 10%, .9) 50%, hsla(0, 0%, 10%, .9) 100%), var(--cover), var(--color-black); + background: linear-gradient( + 90deg, + hsla(0, 0%, 10%, 0.5) 0%, + hsla(0, 0%, 10%, 0.9) 50%, + hsla(0, 0%, 10%, 0.9) 100% + ), + var(--cover), var(--color-black); background-repeat: no-repeat; background-size: cover; border-radius: var(--rounded-xl); @@ -246,9 +251,6 @@ flex-direction: column; align-items: center; gap: 0; -} -#optimization-request-dialog [data-pc-section="header"] [data-icon="leaf"] { - } #project-request-dialog h2, #optimization-request-dialog h2 { @@ -298,5 +300,5 @@ } #project-request-dialog [data-icon="leaf"]::before, #optimization-request-dialog [data-icon="leaf"]::before { - transform: translateY(.125rem); -} \ No newline at end of file + transform: translateY(0.125rem); +} diff --git a/src/components/design-to-light/DTLPanel.vue b/src/components/design-to-light/DTLPanel.vue index f9726e8..0ce2236 100644 --- a/src/components/design-to-light/DTLPanel.vue +++ b/src/components/design-to-light/DTLPanel.vue @@ -161,17 +161,20 @@ -