SILVER/NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: фильтры активности и единый voice loader

Browse Source
This commit is contained in:
DCCONSTRUCTIONS
2026-04-26 21:17:23 +03:00
parent 9a91af372e
commit 7ac9a3dbd3
10 changed files with 509 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plane-src/apps/web/styles/globals.css
+102 -3
View File
@@ -3937,15 +3937,23 @@
color: var(--text-color-primary) !important;
}
.nodedc-processing-loader,
.nodedc-voice-task-processing-loader {
--nodedc-processing-loader-rgb: var(--nodedc-accent-rgb);
width: 5rem;
aspect-ratio: 1;
box-sizing: border-box;
position: relative;
display: block;
color: rgb(var(--nodedc-accent-rgb));
color: rgb(var(--nodedc-processing-loader-rgb));
}
.nodedc-processing-loader-white {
--nodedc-processing-loader-rgb: 255 255 255;
}
.nodedc-processing-loader::before,
.nodedc-processing-loader::after,
.nodedc-voice-task-processing-loader::before,
.nodedc-voice-task-processing-loader::after {
content: "";
@@ -3954,13 +3962,15 @@
display: block;
}
.nodedc-processing-loader::before,
.nodedc-voice-task-processing-loader::before {
inset: 1.125rem;
border: 0.5rem solid currentColor;
border-radius: 0.625rem;
box-shadow: 0 0 1.25rem rgba(var(--nodedc-accent-rgb), 0.18);
box-shadow: 0 0 1.25rem rgba(var(--nodedc-processing-loader-rgb), 0.18);
}
.nodedc-processing-loader::after,
.nodedc-voice-task-processing-loader::after {
width: 1rem;
aspect-ratio: 1;
@@ -3968,7 +3978,7 @@
left: 0;
border-radius: 9999px;
background: currentColor;
box-shadow: 0 0 1.125rem rgba(var(--nodedc-accent-rgb), 0.28);
box-shadow: 0 0 1.125rem rgba(var(--nodedc-processing-loader-rgb), 0.28);
offset-anchor: center;
offset-path: path("M 22 22 H 58 V 58 H 22 V 22");
animation: nodedc-voice-task-processing-loader 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
@@ -3995,4 +4005,93 @@
offset-distance: 100%;
}
}
.nodedc-processing-loader-fluid {
width: 5rem;
aspect-ratio: 1;
padding: 0.625rem;
box-sizing: border-box;
display: grid;
background: transparent;
filter: blur(5px) contrast(15);
mix-blend-mode: screen;
}
.nodedc-processing-loader-fluid::before,
.nodedc-processing-loader-fluid::after {
content: "";
position: static;
grid-area: 1 / 1;
display: block;
width: auto;
height: auto;
margin: 0.3125rem;
border: 0;
border-radius: 9999px;
background: currentColor;
box-shadow: none;
offset-path: none;
-webkit-mask-size: 100% 20px, 100% 100%;
mask-size: 100% 20px, 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
.nodedc-processing-loader-fluid::before {
-webkit-mask-image:
linear-gradient(#000 0 0),
linear-gradient(#000 0 0);
mask-image:
linear-gradient(#000 0 0),
linear-gradient(#000 0 0);
animation: nodedc-processing-fluid-shape 2s infinite;
}
.nodedc-processing-loader-fluid::after {
-webkit-mask-image: linear-gradient(#000 0 0);
mask-image: linear-gradient(#000 0 0);
animation:
nodedc-processing-fluid-shape 2s infinite,
nodedc-processing-fluid-jitter 0.5s infinite cubic-bezier(0.5, 200, 0.5, -200);
}
@keyframes nodedc-processing-fluid-shape {
0% {
-webkit-mask-position: 0 20%, 0 0;
mask-position: 0 20%, 0 0;
}
20% {
-webkit-mask-position: 0 80%, 0 0;
mask-position: 0 80%, 0 0;
}
40% {
-webkit-mask-position: 0 100%, 0 0;
mask-position: 0 100%, 0 0;
}
60% {
-webkit-mask-position: 0 0%, 0 0;
mask-position: 0 0%, 0 0;
}
80% {
-webkit-mask-position: 0 35%, 0 0;
mask-position: 0 35%, 0 0;
}
100% {
-webkit-mask-position: 0 0, 0 0;
mask-position: 0 0, 0 0;
}
}
@keyframes nodedc-processing-fluid-jitter {
100% {
transform: translate(0.1px);
}
}
}