fix: align ops ai workspace settings ui

This commit is contained in:
DCCONSTRUCTIONS
2026-06-09 14:49:50 +03:00
parent b1d19cf5df
commit fcd014e26d
2 changed files with 337 additions and 39 deletions
+171
View File
@@ -676,6 +676,27 @@
backdrop-filter: blur(42px);
}
body:has(.nodedc-ai-workspace-product-modal) [data-headlessui-portal] [class~="z-[180]"] {
z-index: 27080 !important;
}
.ai-workspace-settings-portal {
display: flex;
width: min(1280px, calc(100vw - 32px)) !important;
max-width: min(1280px, calc(100vw - 32px)) !important;
justify-content: center;
overflow: visible;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.ai-workspace-settings-portal > .nodedc-ai-workspace-product-modal {
margin-inline: auto;
}
.nodedc-ai-workspace-product-modal:has(.ai-settings-workspace[data-details-open="true"]) {
width: min(1220px, calc(100vw - 32px));
}
@@ -1163,6 +1184,128 @@
color: #ffffff;
}
.nodedc-select {
position: relative;
min-width: 0;
--nodedc-select-toggle-w: var(--wf-share-control-h);
--nodedc-select-gap: 8px;
}
.ai-settings-field .nodedc-select {
width: 100%;
--wf-share-control-h: 46px;
}
.nodedc-select__control {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--nodedc-select-toggle-w);
gap: var(--nodedc-select-gap);
}
.nodedc-select__value {
display: flex;
height: var(--wf-share-control-h);
min-width: 0;
align-items: center;
overflow: hidden;
border: 0;
border-radius: 14px;
background: rgba(255, 255, 255, 0.045);
color: rgba(255, 255, 255, 0.92);
padding: 0 15px;
font-size: 13px;
font-weight: 680;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: var(--nodedc-glass-control-shadow);
}
.nodedc-select__toggle {
display: inline-grid;
width: 100%;
height: var(--wf-share-control-h);
place-items: center;
border: 0;
border-radius: 14px;
background: var(--nodedc-glass-control-bg, rgba(255, 255, 255, 0.045));
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
outline: none !important;
padding: 0;
box-shadow: var(--nodedc-glass-control-shadow) !important;
}
.nodedc-select__toggle:hover,
.nodedc-select__toggle[aria-expanded="true"] {
background: var(--nodedc-glass-control-hover);
}
.nodedc-select__toggle:disabled {
cursor: default;
opacity: 0.48;
}
.nodedc-select__chevron {
width: 8px;
height: 8px;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
opacity: 0.82;
transform: translateY(-2px) rotate(45deg);
}
.nodedc-dropdown-surface.nodedc-ai-workspace-settings-select-menu {
--brand: rgb(var(--nodedc-accent-rgb));
--brand-rgb: var(--nodedc-accent-rgb);
--nodedc-glass-control-hover: rgba(255, 255, 255, 0.075);
--nodedc-glass-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 28px 78px rgba(0, 0, 0, 0.48);
z-index: 27120;
display: grid;
gap: 2px;
min-width: 0;
max-height: 232px;
overflow: auto;
border: 0;
border-radius: 20px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%), rgba(18, 18, 22, 0.94);
padding: 7px;
box-shadow:
0 18px 60px rgba(0, 0, 0, 0.48),
var(--nodedc-glass-panel-shadow);
-webkit-backdrop-filter: blur(44px) saturate(145%) brightness(1.05);
backdrop-filter: blur(44px) saturate(145%) brightness(1.05);
}
.nodedc-ai-workspace-settings-select-menu::-webkit-scrollbar {
width: 0;
height: 0;
}
.nodedc-select__option {
min-height: 42px;
border: 0;
border-radius: 14px;
background: transparent;
color: rgba(255, 255, 255, 0.72);
outline: none !important;
padding: 0 12px;
text-align: left;
box-shadow: none !important;
}
.nodedc-select__option:hover,
.nodedc-select__option:focus-visible,
.nodedc-select__option[data-selected="true"] {
background: var(--nodedc-glass-control-hover);
color: rgba(255, 255, 255, 0.96);
}
.nodedc-select__option[data-selected="true"] {
background: rgba(var(--brand-rgb, 51, 163, 255), 0.18);
}
.ai-settings-capabilities {
display: flex;
min-width: 0;
@@ -1470,6 +1613,34 @@
line-height: 1;
}
.nodedc-ai-workspace-console .nodedc-glass-modal__close-mark {
position: relative;
display: block;
width: 12px;
height: 12px;
}
.nodedc-ai-workspace-console .nodedc-glass-modal__close-mark::before,
.nodedc-ai-workspace-console .nodedc-glass-modal__close-mark::after {
position: absolute;
top: 50%;
left: 50%;
width: 12.5px;
height: 1.2px;
border-radius: 999px;
background: currentColor;
content: "";
transform-origin: center;
}
.nodedc-ai-workspace-console .nodedc-glass-modal__close-mark::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.nodedc-ai-workspace-console .nodedc-glass-modal__close-mark::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.nodedc-ai-workspace-console .ai-console-threads,
.nodedc-ai-workspace-console .ai-console-main {
min-width: 0;