UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: auth screens, project actions и полировка внешних контуров

This commit is contained in:
DCCONSTRUCTIONS
2026-04-20 10:50:09 +03:00
parent c6ace8b9cc
commit 8fed697531
15 changed files with 362 additions and 241 deletions
@@ -90,7 +90,7 @@ export const ExternalContoursContentRoot = observer(function ExternalContoursCon
hasDirectTargetAccess={hasDirectTargetAccess}
/>
</div>
<ContentWrapper className="divide-y-2 divide-subtle-1">
<ContentWrapper className="space-y-4 px-4 py-4">
<ExternalContoursIssueMainContent
workspaceSlug={workspaceSlug}
sourceProjectId={projectId}
@@ -39,7 +39,7 @@ export function ExternalContourDeclineModal(props: Props) {
handleClose={handleClose}
position={EModalPosition.CENTER}
width={EModalWidth.LG}
className="rounded-lg"
className="nodedc-glass-modal rounded-[1.75rem]"
>
<div className="space-y-4 p-6">
<div className="space-y-1">
@@ -54,13 +54,14 @@ export function ExternalContourDeclineModal(props: Props) {
rows={5}
disabled={isSubmitting}
autoFocus
className="nodedc-modal-input min-h-[8rem] resize-none"
/>
<div className="flex justify-end gap-2">
<Button variant="secondary" onClick={handleClose} disabled={isSubmitting}>
<Button variant="secondary" onClick={handleClose} disabled={isSubmitting} className="nodedc-modal-secondary-button">
{t("cancel")}
</Button>
<Button variant="primary" onClick={handleSubmit} disabled={isSubmitting || !comment.trim()}>
<Button variant="primary" onClick={handleSubmit} disabled={isSubmitting || !comment.trim()} className="nodedc-modal-primary-button">
{t("external_contours_page.decline_modal.submit")}
</Button>
</div>
@@ -135,7 +135,7 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
onSubmit={(comment) => handleDecision("decline", comment)}
/>
<Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 border-b border-subtle bg-surface-1 lg:flex">
<Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 px-4 lg:flex">
<div className="flex items-center gap-4">
{issue?.project_id && issue.sequence_id && (
<h3 className="flex-shrink-0 text-14 font-medium text-tertiary">
@@ -157,11 +157,11 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
<div className="flex flex-wrap items-center gap-2">
{canReviewClosedRequest && (
<>
<Button variant="secondary" size="lg" onClick={() => handleDecision("accept")}>
<Button variant="primary" size="lg" onClick={() => handleDecision("accept")} className="nodedc-external-primary-button">
<CheckCircleFilledIcon className="size-4 shrink-0 text-success-secondary" />
{t("external_contours_page.actions.accept")}
</Button>
<Button variant="secondary" size="lg" onClick={() => setIsDeclineModalOpen(true)}>
<Button variant="secondary" size="lg" onClick={() => setIsDeclineModalOpen(true)} className="nodedc-external-action-button">
<CloseCircleFilledIcon className="size-4 shrink-0 text-danger-secondary" />
{t("external_contours_page.actions.decline")}
</Button>
@@ -172,12 +172,18 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
<Badge variant="neutral">{t("external_contours_page.traceability.source_decision_accepted")}</Badge>
)}
<Button variant="secondary" size="lg" prependIcon={<LinkIcon className="h-2.5 w-2.5" />} onClick={handleCopyLink}>
<Button
variant="secondary"
size="lg"
prependIcon={<LinkIcon className="h-2.5 w-2.5" />}
onClick={handleCopyLink}
className="nodedc-external-action-button"
>
{t("external_contours_page.actions.copy")}
</Button>
{hasDirectTargetAccess && (
<ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
<Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />}>
<Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />} className="nodedc-external-action-button">
{t("external_contours_page.actions.open")}
</Button>
</ControlLink>
@@ -196,10 +202,10 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
<div className="ml-auto flex items-center gap-2">
{canReviewClosedRequest && (
<>
<Button variant="secondary" size="sm" onClick={() => handleDecision("accept")}>
<Button variant="primary" size="sm" onClick={() => handleDecision("accept")} className="nodedc-external-primary-button">
{t("external_contours_page.actions.accept")}
</Button>
<Button variant="secondary" size="sm" onClick={() => setIsDeclineModalOpen(true)}>
<Button variant="secondary" size="sm" onClick={() => setIsDeclineModalOpen(true)} className="nodedc-external-action-button">
{t("external_contours_page.actions.decline")}
</Button>
</>
@@ -209,7 +215,7 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
)}
{hasDirectTargetAccess && (
<ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
<Button variant="secondary" size="sm">
<Button variant="secondary" size="sm" className="nodedc-external-action-button">
{t("external_contours_page.actions.open")}
</Button>
</ControlLink>
@@ -139,7 +139,7 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
if (!hasDirectTargetAccess) {
return (
<div className="space-y-4">
<div className="nodedc-external-section space-y-4 p-5">
<div className="nodedc-external-content-shell space-y-4 p-5">
{isSourceEditable ? (
<>
<IssueTitleInput
@@ -239,8 +239,8 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
}
return (
<>
<div className="space-y-4 pb-4">
<div className="space-y-4">
<div className="nodedc-external-content-shell space-y-4 p-5">
{duplicateIssues.length > 0 && (
<DeDupeIssuePopoverRoot
workspaceSlug={workspaceSlug}
@@ -313,15 +313,13 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
</div>
</div>
<div className="py-4">
<ExternalContoursRequestTraceability contourRequest={contourRequest} />
</div>
<ExternalContoursRequestTraceability contourRequest={contourRequest} />
<div className="py-4">
<div className="nodedc-external-section px-4 py-4">
<IssueAttachmentRoot workspaceSlug={workspaceSlug} projectId={targetProjectId} issueId={issue.id} disabled={!isEditable} />
</div>
<div className="py-4">
<div className="nodedc-external-section px-4 py-4">
<ExternalContoursIssueContentProperties
workspaceSlug={workspaceSlug}
targetProjectId={targetProjectId}
@@ -331,9 +329,9 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
/>
</div>
<div className="pt-4">
<div className="nodedc-external-section px-4 py-4">
<IssueActivity workspaceSlug={workspaceSlug} projectId={targetProjectId} issueId={issue.id} />
</div>
</>
</div>
);
});
@@ -42,8 +42,11 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
if (!request || !issue) return <></>;
const assigneeDetails = issue.assignee_details?.slice(0, 2) ?? [];
const visibleLabels = issue.label_details?.slice(0, 3) ?? [];
const lastUpdatedAt = issue.updated_at || request.updated_at;
const requester = issue.created_by_detail;
const requesterName =
request.requested_by_name || requester?.display_name || t("external_contours_page.mirror.system_actor");
const contourName = request.target_project_name || issue.project_detail?.name || t("common.none");
return (
<Link
@@ -55,38 +58,71 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
<Row
data-active={selectedInboxIssueId === request.id}
className={cn(
"nodedc-external-card relative flex cursor-pointer flex-col gap-4 px-4 py-4 transition-all hover:bg-white/5",
"nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col gap-5 px-5 py-5 transition-all hover:bg-white/5",
{ "ring-1 ring-accent-primary/35": selectedInboxIssueId === request.id }
)}
>
<div className="space-y-2">
<div className="relative flex items-center justify-between gap-2">
<div className="flex min-w-0 items-center gap-2 text-11 font-medium text-tertiary">
<span>
{issue.project_detail?.identifier || "REQ"}-{issue.sequence_id}
</span>
{issue.project_detail?.name && <span className="truncate text-placeholder">{issue.project_detail.name}</span>}
<div className="flex items-start justify-between gap-3">
<div className="flex min-w-0 items-center gap-3">
<Avatar
src={requester?.avatar_url || ""}
name={requesterName}
size="lg"
showTooltip
/>
<div className="min-w-0">
<div className="truncate text-15 font-semibold text-primary">{requesterName}</div>
<div className="truncate text-13 text-secondary">{contourName}</div>
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
<div className="text-11 font-medium text-tertiary">
{issue.project_detail?.identifier || "REQ"}-{issue.sequence_id}
</div>
<div className="flex items-center gap-2">
{request.has_unread_updates && (
<Tooltip tooltipHeading={t("external_contours_page.list.unread_updates")} isMobile={isMobile}>
<span className="size-2 rounded-full bg-accent-primary" />
</Tooltip>
)}
</div>
<div className="shrink-0">
<ExternalContourStatePill request={request} />
</div>
</div>
<h3 className="w-full text-15 leading-6 font-semibold text-primary">{issue.name}</h3>
</div>
<div className="flex items-center justify-between gap-2">
<div className="flex flex-wrap items-center gap-2">
<div className="flex flex-1 items-center justify-center px-2">
<h3 className="line-clamp-3 w-full max-w-[18rem] text-center text-16 leading-7 font-semibold text-primary">
{issue.name}
</h3>
</div>
<div className="flex items-center justify-between gap-3">
<div className="flex min-w-0 items-center gap-2">
{assigneeDetails.length > 0 ? (
assigneeDetails.map((assignee) => (
<Avatar
key={assignee.id}
src={assignee.avatar_url || ""}
name={assignee.display_name || "NODE.DC"}
size="lg"
showTooltip
/>
))
) : (
<Tooltip tooltipHeading={t("assignee")} tooltipContent={t("external_contours_page.list.unassigned")} isMobile={isMobile}>
<div className="text-11 text-placeholder">{t("external_contours_page.list.unassigned")}</div>
</Tooltip>
)}
</div>
<div className="flex flex-wrap items-center justify-end gap-2">
<Tooltip
tooltipHeading={t("external_contours_page.list.last_updated")}
tooltipContent={`${renderFormattedDate(lastUpdatedAt ?? "")}`}
isMobile={isMobile}
>
<div className="text-11 text-secondary">{renderFormattedDate(lastUpdatedAt ?? "")}</div>
<div className="rounded-full bg-white/6 px-3 py-1.5 text-12 text-secondary">
{renderFormattedDate(lastUpdatedAt ?? "")}
</div>
</Tooltip>
{issue.priority && issue.priority !== "none" && (
@@ -94,32 +130,6 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
<PriorityIcon priority={issue.priority} withContainer className="h-3 w-3" />
</Tooltip>
)}
{visibleLabels.map((label) => (
<div key={label.id} className="relative flex h-6 items-center gap-1 rounded-full bg-white/6 px-2 text-11">
<span className="h-2 w-2 rounded-full" style={{ backgroundColor: label.color }} />
<span className="max-w-28 truncate normal-case">{label.name}</span>
</div>
))}
</div>
<div className="flex items-center gap-1">
{assigneeDetails.length > 0 ? (
<>
{assigneeDetails.map((assignee) => (
<Avatar
key={assignee.id}
src={assignee.avatar_url || ""}
name={assignee.display_name || "NODE.DC"}
size="lg"
showTooltip
/>
))}
</>
) : (
<Tooltip tooltipHeading={t("assignee")} tooltipContent={t("external_contours_page.list.unassigned")} isMobile={isMobile}>
<div className="text-11 text-placeholder">{t("external_contours_page.list.unassigned")}</div>
</Tooltip>
)}
</div>
</div>
</Row>
@@ -157,7 +157,7 @@ export const AuthRoot = observer(function AuthRoot(props: TAuthRoot) {
function AuthContainer({ children }: { children: React.ReactNode }) {
return (
<div className="mt-6 flex w-full flex-grow flex-col items-center justify-center py-8">
<div className="mt-8 flex w-full flex-grow flex-col items-center justify-center py-8">
<div className="nodedc-auth-shell relative flex w-full max-w-[28rem] flex-col gap-6">{children}</div>
</div>
);
@@ -15,7 +15,7 @@ type AuthBaseProps = {
export function AuthBase({ authType }: AuthBaseProps) {
return (
<div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto bg-canvas px-8 pt-8 pb-10">
<div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto bg-canvas px-8 pt-10 pb-12">
<AuthHeader type={authType} />
<AuthRoot authMode={authType} />
</div>
@@ -73,7 +73,11 @@ export function AuthHeaderBase(props: TAuthHeaderBase) {
<PageHead title={pageTitle + " - NODE.DC"} />
<div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6 px-2 py-1">
<Link href="/">
<PlaneLockup height={40} width={190} className="text-primary transition-opacity hover:opacity-90" />
<PlaneLockup
height={54}
width={258}
className="nodedc-auth-logo-lockup text-primary transition-opacity hover:opacity-90"
/>
</Link>
{additionalAction}
</div>
@@ -17,7 +17,7 @@ import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } fro
import { useOutsideClickDetector } from "@plane/hooks";
import { useTranslation } from "@plane/i18n";
import { Tabs } from "@plane/propel/tabs";
import { Button, getButtonStyling } from "@plane/propel/button";
import { Button } from "@plane/propel/button";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { EFileAssetType } from "@plane/types";
import { Input, Loader } from "@plane/ui";
@@ -204,7 +204,9 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
return (
<Popover className="relative z-19" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
<Popover.Button
className={cn(getButtonStyling("secondary", "sm"), buttonClassName)}
className={cn(
buttonClassName || "inline-flex min-h-10 items-center justify-center rounded-[1.25rem] px-4 py-2"
)}
onClick={handleOnClick}
disabled={disabled}
>
@@ -17,39 +17,46 @@ export function InstanceNotReady() {
return (
<DefaultLayout>
<div className="relative z-10 flex h-screen w-screen overflow-hidden">
{/* Background decorations */}
<img
src={GradientBgLogo}
className="pointer-events-none absolute -top-24 -left-32 h-56 w-96 opacity-15"
alt=""
aria-hidden="true"
/>
<img
src={GradientBgLogo}
className="pointer-events-none absolute -right-20 -bottom-16 h-56 w-96 opacity-15"
alt=""
aria-hidden="true"
/>
{/* Main content */}
<div className="flex h-full w-full flex-col items-center px-8 pt-6 pb-10">
<div className="sticky top-0 flex w-full shrink-0 items-center justify-between gap-6">
<PlaneLockup height={20} width={95} className="text-primary" />
<PlaneLockup height={40} width={190} className="nodedc-auth-logo-lockup text-primary" />
</div>
<div className="flex h-full w-full flex-col items-center justify-center gap-7">
<div className="flex flex-col items-center gap-11">
<div className="nodedc-error-shell flex max-w-3xl flex-col items-center gap-11 text-center">
<img
src={GradientBgLogo}
className="pointer-events-none absolute -top-24 -left-32 h-56 w-96 opacity-12"
alt=""
aria-hidden="true"
/>
<img
src={GradientBgLogo}
className="pointer-events-none absolute -right-20 -bottom-16 h-56 w-96 opacity-12"
alt=""
aria-hidden="true"
/>
<img src={GradientLogo} className="h-24 w-40 object-contain" alt="NODE.DC Logo" />
<div className="flex max-w-124 flex-col items-center gap-3">
<h1 className="text-h2-semibold text-primary">Welcome to NODE.DC</h1>
<h1 className="text-h2-semibold text-primary">NODE.DC готов к запуску</h1>
<p className="text-center text-body-md-regular text-secondary">
Set up your instance and create your first workspace to begin managing projects and work.
Завершите настройку инстанса и создайте первое рабочее пространство, чтобы начать работу с
проектами и рабочими элементами.
</p>
</div>
<a href={GOD_MODE_URL} className="w-80">
<Button variant="primary" className="nodedc-error-primary w-full" size="xl">
Перейти к настройке
</Button>
</a>
<a
href="https://nodedc.dctouch.ru/"
target="_blank"
rel="noopener noreferrer"
className="nodedc-error-link text-13 font-medium"
>
Служба поддержки
</a>
</div>
<a href={GOD_MODE_URL} className="w-72">
<Button variant="primary" className="w-full" size="xl">
Get started
</Button>
</a>
</div>
</div>
</div>
@@ -84,7 +84,7 @@ function ProjectCreateHeader(props: Props) {
}}
control={control}
value={value ?? null}
buttonClassName="nodedc-overlay-button"
buttonClassName="nodedc-overlay-button min-w-[10.5rem]"
tabIndex={getIndex("cover_image")}
/>
)}
@@ -255,7 +255,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
control={control}
onChange={onChange}
value={value ?? null}
buttonClassName="nodedc-overlay-button"
buttonClassName="nodedc-overlay-button min-w-[10.5rem]"
disabled={!isAdmin}
projectId={project.id}
/>
@@ -436,7 +436,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
type="submit"
loading={isLoading}
disabled={!isAdmin}
className="nodedc-settings-save-button min-w-[11.5rem]"
className="nodedc-settings-save-button min-w-[11.5rem] !text-[#0b1117] hover:!text-[#0b1117]"
>
{isLoading ? t("updating") : t("common.update_project")}
</Button>
@@ -57,7 +57,7 @@ export const ProjectFeatureUpdate = observer(function ProjectFeatureUpdate(props
<Link
href={`/${workspaceSlug}/projects/${projectId}/issues`}
onClick={onClose}
className="nodedc-modal-primary-button inline-flex min-w-[10.5rem] items-center justify-center"
className="nodedc-modal-primary-button inline-flex min-w-[10.5rem] items-center justify-center !text-[#0b1117] hover:!text-[#0b1117]"
tabIndex={2}
>
{t("open_project")}
+129 -36
View File
@@ -494,6 +494,15 @@
background: color-mix(in srgb, rgb(var(--nodedc-card-active-rgb)) 82%, white) !important;
}
.nodedc-modal-primary-button,
.nodedc-modal-primary-button *,
.nodedc-settings-primary-button,
.nodedc-settings-primary-button *,
.nodedc-settings-save-button,
.nodedc-settings-save-button * {
color: #0b1117 !important;
}
.nodedc-modal-danger-button {
min-height: 2.75rem;
border: 0 !important;
@@ -650,18 +659,18 @@
}
.nodedc-overlay-button {
min-height: 2.5rem;
min-height: 2.75rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.05rem !important;
border-radius: 1.25rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.018) 100%),
rgba(8, 8, 10, 0.58) !important;
linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.02) 100%),
rgba(9, 9, 12, 0.72) !important;
color: #f5f7fb !important;
padding-inline: 1rem !important;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
padding-inline: 1.05rem !important;
-webkit-backdrop-filter: blur(22px);
backdrop-filter: blur(22px);
transition:
background 120ms ease,
color 120ms ease,
@@ -670,8 +679,8 @@
.nodedc-overlay-button:hover {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.03) 100%),
rgba(8, 8, 10, 0.72) !important;
linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%),
rgba(9, 9, 12, 0.8) !important;
color: #ffffff !important;
}
@@ -798,17 +807,24 @@
.nodedc-auth-shell {
width: 100%;
max-width: 28rem;
max-width: 32rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.75rem !important;
padding: 1.75rem !important;
box-shadow:
0 24px 64px rgba(0, 0, 0, 0.34),
0 8px 20px rgba(0, 0, 0, 0.18) !important;
border-radius: 1.9rem !important;
padding: 2.2rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%),
rgba(10, 10, 12, 0.82) !important;
-webkit-backdrop-filter: blur(34px);
backdrop-filter: blur(34px);
linear-gradient(180deg, rgba(255, 255, 255, 0.048) 0%, rgba(255, 255, 255, 0.015) 100%),
rgba(9, 9, 12, 0.84) !important;
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
}
.nodedc-auth-logo-lockup {
color: var(--text-color-primary) !important;
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.2));
}
.nodedc-auth-banner {
@@ -885,14 +901,16 @@
max-width: 36rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.9rem !important;
padding: 2rem !important;
box-shadow:
0 24px 64px rgba(0, 0, 0, 0.34),
0 8px 20px rgba(0, 0, 0, 0.18) !important;
border-radius: 1.95rem !important;
padding: 2.15rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%),
rgba(10, 10, 12, 0.82) !important;
-webkit-backdrop-filter: blur(36px);
backdrop-filter: blur(36px);
linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.016) 100%),
rgba(9, 9, 12, 0.86) !important;
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
}
.nodedc-error-link {
@@ -955,10 +973,10 @@
.nodedc-external-sidebar-shell {
border: 0 !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%),
rgba(8, 8, 11, 0.82) !important;
-webkit-backdrop-filter: blur(26px);
backdrop-filter: blur(26px);
linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%),
rgba(8, 8, 11, 0.86) !important;
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(30px);
}
.nodedc-external-tab {
@@ -985,23 +1003,65 @@
.nodedc-external-card {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.9rem !important;
background: rgb(var(--nodedc-card-passive-rgb)) !important;
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
border-radius: 2rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 100%),
rgb(var(--nodedc-card-passive-rgb)) !important;
color: var(--text-color-primary) !important;
}
.nodedc-external-card[data-active="true"] {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.01) 100%),
rgba(255, 255, 255, 0.04) !important;
box-shadow: inset 0 0 0 1px rgba(var(--nodedc-accent-rgb), 0.3);
linear-gradient(180deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.008) 100%),
rgba(255, 255, 255, 0.035) !important;
box-shadow:
inset 0 0 0 1px rgba(var(--nodedc-accent-rgb), 0.32),
0 12px 32px rgba(0, 0, 0, 0.16) !important;
}
.nodedc-external-content-shell {
border: 0 !important;
outline: none !important;
box-shadow:
0 18px 44px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
border-radius: 2rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.034) 0%, rgba(255, 255, 255, 0.014) 100%),
rgba(255, 255, 255, 0.03) !important;
-webkit-backdrop-filter: blur(28px);
backdrop-filter: blur(28px);
}
.nodedc-external-field {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.4rem !important;
background: rgba(255, 255, 255, 0.04) !important;
}
.nodedc-external-field:hover,
.nodedc-external-field:focus-within {
background: rgba(255, 255, 255, 0.055) !important;
}
.nodedc-external-chip {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.06) !important;
color: var(--text-color-primary) !important;
}
.nodedc-external-panel {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
border-radius: 1.6rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
@@ -1013,7 +1073,9 @@
.nodedc-external-section {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
border-radius: 1.5rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.012) 100%),
@@ -1030,4 +1092,35 @@
background: rgba(255, 255, 255, 0.035) !important;
color: var(--text-color-secondary) !important;
}
.nodedc-external-action-button {
min-height: 2.75rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.25rem !important;
background: rgba(255, 255, 255, 0.06) !important;
color: var(--text-color-primary) !important;
padding-inline: 1.15rem !important;
}
.nodedc-external-action-button:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.nodedc-external-primary-button {
min-height: 2.75rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.25rem !important;
background: rgb(var(--nodedc-card-active-rgb)) !important;
color: #0b1117 !important;
padding-inline: 1.2rem !important;
}
.nodedc-external-primary-button:hover {
background: color-mix(in srgb, rgb(var(--nodedc-card-active-rgb)) 82%, white) !important;
color: #0b1117 !important;
}
}