ФУНКЦИИ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: профиль, редиректы и визуальные статусы задач

plane-src/apps/web/styles/globals.css

@@ -33,6 +33,16 @@
   --nodedc-on-card-passive-rgb: 245 247 251;
   --nodedc-card-active-rgb: 195 255 102;
   --nodedc-on-card-active-rgb: 11 17 23;
+  --nodedc-priority-none-rgb: 124 128 138;
+  --nodedc-priority-none-mix-rgb: 255 255 255;
+  --nodedc-priority-low-rgb: 51 163 255;
+  --nodedc-priority-low-mix-rgb: 255 199 95;
+  --nodedc-priority-medium-rgb: 255 213 79;
+  --nodedc-priority-medium-mix-rgb: 80 126 255;
+  --nodedc-priority-high-rgb: 255 136 48;
+  --nodedc-priority-high-mix-rgb: 58 190 255;
+  --nodedc-priority-urgent-rgb: 255 68 82;
+  --nodedc-priority-urgent-mix-rgb: 48 214 188;
   --nodedc-bottom-dock-height: 2.75rem;
   --nodedc-bottom-dock-offset: 2.75rem;
   --nodedc-bottom-dock-visual-overlap: 0.625rem;
@@ -215,6 +225,144 @@
   animation: nodedcDropFillHighlight 1.6s ease-out;
 }
 
+.nodedc-work-item-card,
+.nodedc-external-card {
+  --nodedc-priority-card-rgb: var(--nodedc-priority-none-rgb);
+  --nodedc-priority-card-mix-rgb: var(--nodedc-priority-none-mix-rgb);
+  --nodedc-priority-card-border-opacity: 0.08;
+  --nodedc-priority-card-fill-opacity: 0;
+  --nodedc-priority-card-glow-opacity: 0;
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  box-shadow:
+    0 0 0 1px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-border-opacity)),
+    0 12px 28px rgba(0, 0, 0, 0.2),
+    0 0 18px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-glow-opacity)),
+    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
+}
+
+.nodedc-work-item-card[data-priority="low"],
+.nodedc-external-card[data-priority="low"] {
+  --nodedc-priority-card-rgb: var(--nodedc-priority-low-rgb);
+  --nodedc-priority-card-mix-rgb: var(--nodedc-priority-low-mix-rgb);
+  --nodedc-priority-card-border-opacity: 0.42;
+  --nodedc-priority-card-fill-opacity: 0.46;
+  --nodedc-priority-card-glow-opacity: 0.12;
+}
+
+.nodedc-work-item-card[data-priority="medium"],
+.nodedc-external-card[data-priority="medium"] {
+  --nodedc-priority-card-rgb: var(--nodedc-priority-medium-rgb);
+  --nodedc-priority-card-mix-rgb: var(--nodedc-priority-medium-mix-rgb);
+  --nodedc-priority-card-border-opacity: 0.46;
+  --nodedc-priority-card-fill-opacity: 0.5;
+  --nodedc-priority-card-glow-opacity: 0.13;
+}
+
+.nodedc-work-item-card[data-priority="high"],
+.nodedc-external-card[data-priority="high"] {
+  --nodedc-priority-card-rgb: var(--nodedc-priority-high-rgb);
+  --nodedc-priority-card-mix-rgb: var(--nodedc-priority-high-mix-rgb);
+  --nodedc-priority-card-border-opacity: 0.5;
+  --nodedc-priority-card-fill-opacity: 0.54;
+  --nodedc-priority-card-glow-opacity: 0.15;
+}
+
+.nodedc-work-item-card[data-priority="urgent"],
+.nodedc-external-card[data-priority="urgent"] {
+  --nodedc-priority-card-rgb: var(--nodedc-priority-urgent-rgb);
+  --nodedc-priority-card-mix-rgb: var(--nodedc-priority-urgent-mix-rgb);
+  --nodedc-priority-card-border-opacity: 0.62;
+  --nodedc-priority-card-fill-opacity: 0.62;
+  --nodedc-priority-card-glow-opacity: 0.2;
+}
+
+.nodedc-work-item-card[data-active="true"],
+.nodedc-external-card[data-active="true"] {
+  box-shadow:
+    0 0 0 1px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-border-opacity)),
+    0 14px 32px rgba(0, 0, 0, 0.22),
+    0 0 20px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-glow-opacity)),
+    inset 0 0 0 1px rgb(var(--nodedc-accent-rgb) / 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
+}
+
+.nodedc-work-item-card::before,
+.nodedc-external-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  background:
+    radial-gradient(
+      120% 90% at 50% 118%,
+      rgb(var(--nodedc-priority-card-rgb) / 0.74) 0%,
+      rgb(var(--nodedc-priority-card-rgb) / 0.28) 30%,
+      transparent 64%
+    ),
+    radial-gradient(
+      105% 78% at 50% -26%,
+      rgb(var(--nodedc-priority-card-mix-rgb) / 0.3) 0%,
+      transparent 62%
+    ),
+    radial-gradient(
+      62% 70% at -18% 50%,
+      rgb(var(--nodedc-priority-card-rgb) / 0.24) 0%,
+      transparent 68%
+    ),
+    radial-gradient(
+      62% 70% at 118% 50%,
+      rgb(var(--nodedc-priority-card-mix-rgb) / 0.22) 0%,
+      transparent 68%
+    );
+  opacity: var(--nodedc-priority-card-fill-opacity);
+  mask: radial-gradient(72% 58% at 50% 50%, transparent 0%, transparent 52%, rgba(0, 0, 0, 0.42) 68%, #000 100%);
+  -webkit-mask: radial-gradient(
+    72% 58% at 50% 50%,
+    transparent 0%,
+    transparent 52%,
+    rgba(0, 0, 0, 0.42) 68%,
+    #000 100%
+  );
+}
+
+.nodedc-work-item-card::after,
+.nodedc-external-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  padding: 1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background:
+    linear-gradient(
+      145deg,
+      rgb(var(--nodedc-priority-card-rgb) / 0.82) 0%,
+      rgb(var(--nodedc-priority-card-mix-rgb) / 0.44) 32%,
+      rgba(255, 255, 255, 0.18) 48%,
+      rgb(var(--nodedc-priority-card-rgb) / 0.34) 100%
+    );
+  opacity: var(--nodedc-priority-card-border-opacity);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+}
+
+.nodedc-work-item-card > *,
+.nodedc-external-card > * {
+  position: relative;
+  z-index: 1;
+}
+
 /* Progress Bar Styles */
 :root {
   --bprogress-color: var(--background-color-accent-primary);
@@ -1384,6 +1532,25 @@
     color: rgba(11, 17, 23, 0.72) !important;
   }
 
+  .nodedc-work-item-card,
+  .nodedc-external-card {
+    box-shadow:
+      0 0 0 1px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-border-opacity)),
+      0 12px 28px rgba(0, 0, 0, 0.2),
+      0 0 18px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-glow-opacity)),
+      inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
+  }
+
+  .nodedc-work-item-card[data-active="true"],
+  .nodedc-external-card[data-active="true"] {
+    box-shadow:
+      0 0 0 1px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-border-opacity)),
+      0 14px 32px rgba(0, 0, 0, 0.22),
+      0 0 20px rgb(var(--nodedc-priority-card-rgb) / var(--nodedc-priority-card-glow-opacity)),
+      inset 0 0 0 1px rgb(var(--nodedc-accent-rgb) / 0.18),
+      inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
+  }
+
   .nodedc-external-content-shell {
     border: 0 !important;
     outline: none !important;