UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: очистка loader Authentik

infra/authentik/custom-templates/branding/nodedc-login.css

@@ -12,6 +12,9 @@
   --ak-c-login__footer--PaddingBlock: 0;
   --pf-global--primary-color--100: rgb(195, 255, 102);
   --pf-global--primary-color--200: rgb(218, 255, 139);
+  --pf-v4-global--palette--blue-300: rgb(195, 255, 102);
+  --ak-global--palette--blue-300: rgb(195, 255, 102);
+  --pf-global--active-color--100: rgb(195, 255, 102);
   --pf-global--link--Color: rgb(195, 255, 102);
   --pf-global--link--Color--hover: rgb(218, 255, 139);
   --pf-global--BackgroundColor--100: #0e0f10;
@@ -181,12 +184,19 @@ ak-flow-executor::part(main),
   outline: none !important;
   box-shadow: none !important;
   border-radius: 1.9rem !important;
+  background: transparent !important;
+  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
+  justify-content: flex-start !important;
+}
+
+body.nodedc-auth-card-ready ak-flow-executor::part(main),
+body.nodedc-auth-card-ready .pf-c-login__main {
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.048) 0%, rgba(255, 255, 255, 0.015) 100%),
     var(--nodedc-auth-card-bg) !important;
-  -webkit-backdrop-filter: blur(40px);
-  backdrop-filter: blur(40px);
-  justify-content: flex-start !important;
+  -webkit-backdrop-filter: blur(40px) !important;
+  backdrop-filter: blur(40px) !important;
 }
 
 ak-flow-card,
@@ -204,7 +214,16 @@ ak-stage-password {
 .pf-c-input-group,
 .pf-c-input-group__item,
 .pf-c-card,
-.pf-c-card__body {
+.pf-c-card__body,
+.pf-c-empty-state,
+.pf-c-empty-state__content,
+.pf-c-empty-state__body,
+.pf-v5-c-empty-state,
+.pf-v5-c-empty-state__content,
+.pf-v5-c-empty-state__body,
+.pf-v6-c-empty-state,
+.pf-v6-c-empty-state__content,
+.pf-v6-c-empty-state__body {
   background: transparent !important;
   box-shadow: none !important;
   border: 0 !important;
@@ -559,15 +578,118 @@ button.pf-m-link {
 }
 
 body.nodedc-auth-submitting ak-flow-executor::part(main),
+body.nodedc-auth-loading ak-flow-executor::part(main),
 body.nodedc-auth-submitting .pf-c-login__main,
+body.nodedc-auth-loading .pf-c-login__main,
 body.nodedc-auth-submitting .pf-c-empty-state,
+body.nodedc-auth-loading .pf-c-empty-state,
 body.nodedc-auth-submitting .pf-c-spinner,
+body.nodedc-auth-loading .pf-c-spinner,
 body.nodedc-auth-submitting [role="progressbar"] {
   opacity: 0 !important;
   visibility: hidden !important;
   pointer-events: none !important;
 }
 
+body.nodedc-auth-loading [role="progressbar"] {
+  opacity: 0 !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+}
+
+.pf-c-spinner,
+.pf-v5-c-spinner,
+[role="progressbar"],
+ak-spinner {
+  --pf-c-spinner--Color: var(--nodedc-auth-primary) !important;
+  --pf-v5-c-spinner--Color: var(--nodedc-auth-primary) !important;
+  --pf-c-spinner__clipper--after--BoxShadowColor: var(--nodedc-auth-primary) !important;
+  --pf-c-spinner__lead-ball--after--BackgroundColor: var(--nodedc-auth-primary) !important;
+  --pf-c-spinner__tail-ball--after--BackgroundColor: var(--nodedc-auth-primary) !important;
+  color: var(--nodedc-auth-primary) !important;
+}
+
+#ak-placeholder.ak-c-placeholder,
+.ak-c-placeholder[slot="placeholder"] {
+  position: fixed !important;
+  top: 50% !important;
+  left: 50% !important;
+  display: block !important;
+  width: 2.5rem !important;
+  height: 2.5rem !important;
+  min-width: 2.5rem !important;
+  min-height: 2.5rem !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 999px !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
+  transform: translate(-50%, -50%) !important;
+  overflow: visible !important;
+}
+
+#ak-placeholder.ak-c-placeholder .pf-c-spinner,
+.ak-c-placeholder[slot="placeholder"] .pf-c-spinner,
+#ak-placeholder.ak-c-placeholder [role="progressbar"],
+.ak-c-placeholder[slot="placeholder"] [role="progressbar"] {
+  opacity: 0 !important;
+  visibility: hidden !important;
+}
+
+#ak-placeholder.ak-c-placeholder::before,
+.ak-c-placeholder[slot="placeholder"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 2px solid rgba(186, 255, 74, 0.22);
+  border-top-color: var(--nodedc-auth-primary);
+  border-radius: 999px;
+  animation: nodedc-auth-placeholder-spin 0.72s linear infinite;
+  pointer-events: none;
+}
+
+body.nodedc-auth-submitting::before,
+body.nodedc-auth-loading::before {
+  content: "";
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 1200;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 2px solid rgba(186, 255, 74, 0.22);
+  border-top-color: var(--nodedc-auth-primary);
+  border-radius: 999px;
+  transform: translate(-50%, -50%);
+  animation: nodedc-auth-loader-spin 0.72s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes nodedc-auth-loader-spin {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@keyframes nodedc-auth-placeholder-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 ak-library-application,
 ak-application-wizard,
 ak-user-interface,