From b64de8641c691455c2f2ea80906a510879f9e62d Mon Sep 17 00:00:00 2001 From: Shahmar Date: Fri, 6 Feb 2026 22:50:23 +0300 Subject: [PATCH] [fix] extended params style --- .../PipelineModalLayout.module.css | 570 +++++++++--------- .../ExtendedBlock/ExtendedBlock.module.css | 15 +- src/shared/ExtendedBlock/index.tsx | 11 +- 3 files changed, 304 insertions(+), 292 deletions(-) diff --git a/src/layouts/PipelineModalLayout/PipelineModalLayout.module.css b/src/layouts/PipelineModalLayout/PipelineModalLayout.module.css index a65806a..4dbcb18 100644 --- a/src/layouts/PipelineModalLayout/PipelineModalLayout.module.css +++ b/src/layouts/PipelineModalLayout/PipelineModalLayout.module.css @@ -1,285 +1,285 @@ -.modalContent { - min-width: 55rem; - border-radius: 1.5rem; - padding: 1.5rem; - display: flex; - flex-direction: column; - gap: 0.625rem; - background-color: white; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 11; - overflow-y: auto; - max-height: 80%; - max-width: 70%; - scrollbar-color: var(--color-gray-light2) transparent; - scrollbar-width: thin; - - &::-webkit-scrollbar { - width: 8px; - height: 8px; - } - - &::-webkit-scrollbar-track { - background: transparent; - } - - &::-webkit-scrollbar-thumb { - background: var(--color-gray-light2); - border-radius: 4px; - } - - &::-webkit-scrollbar-thumb:hover { - background: var(--color-gray-light2); - } -} - -.overlay { - position: fixed; - inset: 0; - background-color: rgb(0 0 0 / 50%); - z-index: 10; - -webkit-backdrop-filter: blur(4px); - backdrop-filter: blur(4px); - animation: fadeIn 0.3s ease-out forwards; - cursor: pointer; -} - -@keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -.closeButton { - position: absolute; - right: 1.5rem; - top: 1.5rem; - padding: 0.625rem; - color: var(--color-gray-close-modal); - cursor: pointer; - transition: all 0.3s ease; - border-radius: 50%; - background: transparent; - display: flex; - align-items: center; - justify-content: center; - line-height: 0; - - &:hover { - color: var(--color-red-close-modal); - background: rgb(0 0 0 / 5%); - transform: rotate(90deg) scale(1.1); - } - - &:active { - transform: rotate(90deg) scale(0.95); - } -} - -.header { - display: flex; - gap: 1rem; - align-items: center; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--color-gray-border); -} - -.buttonWrapper { - width: fit-content; -} - -.titleWrapper { - flex: 1; -} - -.scriptNumber { - font-weight: 700; - font-size: 1.25rem; - line-height: 1.75rem; - color: var(--color-dark-main); - margin: 0; - overflow-wrap: break-word; -} - -.scriptName { - font-weight: 400; - font-size: 1rem; - line-height: 1.5rem; - color: var(--color-gray-sub); - margin: 0; - overflow-wrap: break-word; -} - -.content { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.timing { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.timeBlock { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.timeLabel { - font-weight: 600; - font-size: 0.875rem; - line-height: 1.25rem; - color: var(--color-gray-bio); - margin: 0; -} - -.timeValue { - font-family: Consolas, monospace; - font-weight: 400; - font-size: 1rem; - line-height: 1.5rem; - color: var(--color-dark-main); - margin: 0; -} - -.section { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.sectionHeader { - display: flex; - justify-content: space-between; - align-items: center; -} - -.sectionTitle { - font-weight: 600; - font-size: 0.875rem; - line-height: 1.25rem; - color: var(--color-gray-bio); - margin: 0; -} - -.actionButtons { - display: flex; - gap: 1.5rem; - color: var(--color-gray-light2); -} - -.actionButton { - display: flex; - align-items: center; - gap: 0.25rem; - transition: all 0.3s ease; - padding: 0.5rem; - border-radius: 0.375rem; - cursor: pointer; - background: none; - color: inherit; - font-size: 0.875rem; - line-height: 1.25rem; - - &:hover { - color: var(--color-purple-main); - background: var(--color-purple-light); - transform: translateY(-1px); - - span { - text-decoration: underline; - text-underline-offset: 0.125rem; - } - } - - &:active { - transform: translateY(0); - filter: brightness(0.9); - } -} - -.codeBlock { - border-radius: 0.75rem; - padding: 1rem; - background: var(--color-white-main); - border: 1px solid var(--color-gray-border); - white-space: pre; - font-family: Consolas, monospace; - font-weight: 400; - font-size: 0.875rem; - line-height: 1.25rem; - color: var(--color-gray-code); - margin: 0; - overflow-x: auto; -} - -.errorSection { - .sectionTitle { - color: var(--color-red-darker-main); - } - - .codeBlock { - background: var(--color-red-light-background); - border-color: var(--color-red-light-border); - color: var(--color-red-dark-main); - } -} - -.tooltipContainer { - position: relative; - display: inline-block; -} - -.tooltip { - position: absolute; - bottom: 100%; - left: 50%; - transform: translateX(-50%); - background-color: var(--color-dark-main); - color: white; - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.75rem; - white-space: nowrap; - margin-bottom: 0.5rem; - animation: fadeInOut 2s ease-in-out forwards; - - &::after { - content: ''; - position: absolute; - top: 100%; - left: 50%; - margin-left: -0.25rem; - border-width: 0.25rem; - border-style: solid; - border-color: var(--color-dark-main) transparent transparent transparent; - } -} - -@keyframes fadeInOut { - 0% { - opacity: 0; - } - - 10% { - opacity: 1; - } - - 90% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} +.modalContent { + min-width: 55rem; + border-radius: 1.5rem; + padding: 1.5rem; + display: flex; + flex-direction: column; + gap: 0.625rem; + background-color: white; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 11; + overflow-y: auto; + max-height: 80%; + max-width: 70%; + scrollbar-color: var(--color-gray-light2) transparent; + scrollbar-width: thin; + + &::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background: var(--color-gray-light2); + border-radius: 4px; + } + + &::-webkit-scrollbar-thumb:hover { + background: var(--color-gray-light2); + } +} + +.overlay { + position: fixed; + inset: 0; + background-color: rgb(0 0 0 / 50%); + z-index: 10; + -webkit-backdrop-filter: blur(4px); + backdrop-filter: blur(4px); + animation: fadeIn 0.3s ease-out forwards; + cursor: pointer; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.closeButton { + position: absolute; + right: 1.5rem; + top: 1.5rem; + padding: 0.625rem; + color: var(--color-gray-close-modal); + cursor: pointer; + transition: all 0.3s ease; + border-radius: 50%; + background: transparent; + display: flex; + align-items: center; + justify-content: center; + line-height: 0; + + &:hover { + color: var(--color-red-close-modal); + background: rgb(0 0 0 / 5%); + transform: rotate(90deg) scale(1.1); + } + + &:active { + transform: rotate(90deg) scale(0.95); + } +} + +.header { + display: flex; + gap: 1rem; + align-items: center; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--color-gray-border); +} + +.buttonWrapper { + width: fit-content; +} + +.titleWrapper { + flex: 1; +} + +.scriptNumber { + font-weight: 700; + font-size: 1.25rem; + line-height: 1.75rem; + color: var(--color-dark-main); + margin: 0; + overflow-wrap: break-word; +} + +.scriptName { + font-weight: 400; + font-size: 1rem; + line-height: 1.5rem; + color: var(--color-gray-sub); + margin: 0; + overflow-wrap: break-word; +} + +.content { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.timing { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.timeBlock { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.timeLabel { + font-weight: 600; + font-size: 0.875rem; + line-height: 1.25rem; + color: var(--color-gray-bio); + margin: 0; +} + +.timeValue { + font-family: Consolas, monospace; + font-weight: 400; + font-size: 1rem; + line-height: 1.5rem; + color: var(--color-dark-main); + margin: 0; +} + +.section { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.sectionHeader { + display: flex; + justify-content: space-between; + align-items: center; +} + +.sectionTitle { + font-weight: 600; + font-size: 0.875rem; + line-height: 1.25rem; + color: var(--color-gray-bio); + margin: 0; +} + +.actionButtons { + display: flex; + gap: 1.5rem; + color: var(--color-gray-light2); +} + +.actionButton { + display: flex; + align-items: center; + gap: 0.25rem; + transition: all 0.3s ease; + padding: 0.5rem; + border-radius: 0.375rem; + cursor: pointer; + background: none; + color: inherit; + font-size: 0.875rem; + line-height: 1.25rem; + + &:hover { + color: var(--color-purple-main); + background: var(--color-purple-light); + transform: translateY(-1px); + + span { + text-decoration: underline; + text-underline-offset: 0.125rem; + } + } + + &:active { + transform: translateY(0); + filter: brightness(0.9); + } +} + +.codeBlock { + border-radius: 0.75rem; + padding: 1rem; + background: var(--color-white-main); + border: 1px solid var(--color-gray-border); + white-space: pre; + font-family: Consolas, monospace; + font-weight: 400; + font-size: 0.875rem; + line-height: 1.25rem; + color: var(--color-gray-code); + margin: 0; + overflow-x: auto; +} + +.errorSection { + .sectionTitle { + color: var(--color-red-darker-main); + } + + .codeBlock { + background: var(--color-red-light-background); + border-color: var(--color-red-light-border); + color: var(--color-red-dark-main); + } +} + +.tooltipContainer { + position: relative; + display: inline-block; +} + +.tooltip { + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + background-color: var(--color-dark-main); + color: white; + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-size: 0.75rem; + white-space: nowrap; + margin-bottom: 0.5rem; + animation: fadeInOut 2s ease-in-out forwards; + + &::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + margin-left: -0.25rem; + border-width: 0.25rem; + border-style: solid; + border-color: var(--color-dark-main) transparent transparent transparent; + } +} + +@keyframes fadeInOut { + 0% { + opacity: 0; + } + + 10% { + opacity: 1; + } + + 90% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} diff --git a/src/shared/ExtendedBlock/ExtendedBlock.module.css b/src/shared/ExtendedBlock/ExtendedBlock.module.css index 3331763..231bb0e 100644 --- a/src/shared/ExtendedBlock/ExtendedBlock.module.css +++ b/src/shared/ExtendedBlock/ExtendedBlock.module.css @@ -10,7 +10,6 @@ display: flex; flex-direction: column; background: var(--color-white-clear); - gap: 1.5rem; } .ScriptParametrsLayout__content__children { @@ -25,8 +24,9 @@ /* padding: 2rem; */ height: fit-content; - - /* padding: 0 !important; */ + padding-top: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; } .ScriptParametrsLayout__content { @@ -47,6 +47,8 @@ display: flex; justify-content: center; align-items: center; + border-top: 1px solid var(--color-gray-border); + background: var(--color-white-clear); } .ScriptParametrsLayout__extendBtn { @@ -73,9 +75,14 @@ } .ScriptParametrsLayout__extendBtn__showLess { - padding-top: 0.5rem; + /* padding-top: 0.5rem; */ } +.childrenBlock { + padding-top: 0 !important; +} + + @media (width <= 1024px) { .ScriptParametrsLayout__content { grid-template-columns: repeat(1, 1fr); diff --git a/src/shared/ExtendedBlock/index.tsx b/src/shared/ExtendedBlock/index.tsx index 21710a7..23ff991 100644 --- a/src/shared/ExtendedBlock/index.tsx +++ b/src/shared/ExtendedBlock/index.tsx @@ -39,9 +39,14 @@ export const ExtendedBlock: FC = ({ {countOfChildren > 4 && (
4, - })}> + className={cn( + styles.ScriptParametrsLayout__content, + styles.childrenBlock, + contentClassname, + { + [styles.expanded]: countOfShown > 4, + }, + )}>