@996-design/996-ui 0.1.0

package/dist/theme.css

@@ -0,0 +1,601 @@
+@layer base {
+  :root,
+  .huaijiu-web-root,
+  .huaijiu-admin-root {
+    --hj-color-brand: #ffcc33;
+    --hj-color-brand-hover: #fdc721;
+    --hj-color-brand-active: #cca329;
+    --hj-color-brand-weak: rgb(255 204 51 / 0.9);
+    --hj-color-brand-disabled: rgb(255 204 51 / 0.5);
+    --hj-color-success: #07c160;
+    --hj-color-warning: #f39713;
+    --hj-color-info: #1e8cff;
+    --hj-color-danger: #fa433d;
+    --hj-color-danger-soft: #ff554c;
+    --hj-color-purchase: #07c160;
+
+    --hj-color-web-page: #121318;
+    --hj-color-web-bg: #181a1f;
+    --hj-color-web-surface: #242731;
+    --hj-color-web-control: #32343a;
+    --hj-color-web-surface-raised: #242731;
+    --hj-color-web-surface-active: rgb(255 255 255 / 0.05);
+    --hj-color-web-border: rgb(228 228 228 / 0.1);
+    --hj-color-web-border-strong: rgb(228 228 228 / 0.25);
+    --hj-color-web-foreground: #ffffff;
+    --hj-color-web-foreground-80: rgb(255 255 255 / 0.8);
+    --hj-color-web-muted: #808191;
+    --hj-color-web-subtle: #646566;
+    --hj-color-web-disabled: rgb(128 129 145 / 0.45);
+
+    --hj-color-admin-brand: #f9bb26;
+    --hj-color-admin-brand-hover: #f6ad13;
+    --hj-color-admin-bg: #f8fafc;
+    --hj-color-admin-surface: #ffffff;
+    --hj-color-admin-surface-muted: #f8fafc;
+    --hj-color-admin-border: #e2e8f0;
+    --hj-color-admin-border-strong: #cbd5e1;
+    --hj-color-admin-foreground: #0f172a;
+    --hj-color-admin-muted: #64748b;
+
+    --hj-radius-xs: 4px;
+    --hj-radius-sm: 6px;
+    --hj-radius-md: 8px;
+    --hj-radius-lg: 16px;
+
+    --hj-button-font-family: MicrosoftYaHei-Bold, "Microsoft YaHei", PingFangSC-Semibold, sans-serif;
+    --hj-button-font-weight: 700;
+    --hj-button-light-font-family: "Microsoft YaHei", PingFangSC-Regular, sans-serif;
+    --hj-button-light-font-weight: 400;
+    --hj-button-xs-height: 28px;
+    --hj-button-sm-height: 32px;
+    --hj-button-md-height: 40px;
+    --hj-button-lg-height: 48px;
+    --hj-button-xs-min-width: 72px;
+    --hj-button-sm-min-width: 71px;
+    --hj-button-md-min-width: 90px;
+    --hj-button-lg-min-width: 106px;
+    --hj-button-xs-narrow-width: 40px;
+    --hj-button-sm-narrow-width: 58px;
+    --hj-button-xs-padding-x: 12px;
+    --hj-button-sm-padding-x: 16px;
+    --hj-button-md-padding-x: 24px;
+    --hj-button-lg-padding-x: 32px;
+    --hj-button-xs-icon-padding-x: 13px;
+    --hj-button-sm-icon-padding-x: 16px;
+    --hj-button-md-icon-padding-x: 21px;
+    --hj-button-lg-icon-padding-x: 24px;
+    --hj-button-xs-font-size: 12px;
+    --hj-button-sm-font-size: 13px;
+    --hj-button-md-font-size: 14px;
+    --hj-button-lg-font-size: 14px;
+    --hj-button-xs-line-height: 16px;
+    --hj-button-sm-line-height: 20px;
+    --hj-button-md-line-height: 20px;
+    --hj-button-lg-line-height: 20px;
+
+    --hj-button-primary-bg: var(--hj-color-brand);
+    --hj-button-primary-bg-hover: color-mix(in srgb, var(--hj-color-brand) 80%, white);
+    --hj-button-primary-bg-active: color-mix(in srgb, var(--hj-color-brand) 85%, black);
+    --hj-button-primary-fg: rgb(0 0 0 / 0.8);
+    --hj-button-primary-fg-active: rgb(0 0 0 / 0.9);
+    --hj-button-default-bg: var(--hj-color-web-control);
+    --hj-button-default-bg-hover: color-mix(in srgb, var(--hj-color-web-control) 90%, white);
+    --hj-button-default-bg-active: color-mix(in srgb, var(--hj-color-web-control) 85%, black);
+    --hj-button-default-fg: rgb(255 255 255 / 0.8);
+    --hj-button-default-fg-hover: #ffffff;
+    --hj-button-light-bg: #ffffff;
+    --hj-button-light-bg-hover: #ffffff;
+    --hj-button-light-bg-active: #f7f8fa;
+    --hj-button-light-border: #dcdee0;
+    --hj-button-light-border-hover: #c8c9cc;
+    --hj-button-light-fg: #323233;
+    --hj-button-translucent-bg: rgb(255 255 255 / 0.1);
+    --hj-button-translucent-bg-hover: rgb(255 255 255 / 0.2);
+    --hj-button-translucent-bg-active: rgb(255 255 255 / 0.07);
+    --hj-button-toggle-bg: rgb(255 204 51 / 0.05);
+    --hj-button-toggle-bg-hover: rgb(255 204 51 / 0.15);
+    --hj-button-toggle-bg-active: rgb(0 0 0 / 0.1);
+    --hj-button-toggle-border: rgb(255 204 51 / 0.6);
+    --hj-button-text-fg: var(--hj-color-brand);
+    --hj-button-text-default-fg: #cccccc;
+    --hj-button-group-separator: rgb(0 0 0 / 0.3);
+    --hj-carousel-bg: #101820;
+    --hj-carousel-arrow-bg: rgb(0 0 0 / 0.35);
+    --hj-carousel-arrow-bg-hover: rgb(0 0 0 / 0.5);
+    --hj-carousel-arrow-border: rgb(255 255 255 / 0.12);
+    --hj-carousel-dot-active: var(--hj-color-brand);
+    --hj-carousel-dot-bg: #8b94a0;
+    --hj-carousel-dot-bg-hover: #aab1ba;
+    --hj-icon-button-default-border: #3b4652;
+    --hj-icon-button-default-bg: #18222c;
+    --hj-icon-button-default-fg: #8b94a0;
+    --hj-icon-button-default-border-hover: var(--hj-color-brand);
+    --hj-icon-button-default-fg-hover: var(--hj-color-brand);
+    --hj-icon-button-primary-border: var(--hj-color-brand);
+    --hj-icon-button-primary-bg: var(--hj-color-brand);
+    --hj-icon-button-primary-bg-hover: var(--hj-color-brand-hover);
+    --hj-icon-button-primary-fg: #15120a;
+    --hj-icon-button-ghost-border: transparent;
+    --hj-icon-button-ghost-bg: transparent;
+    --hj-icon-button-ghost-fg: var(--hj-color-web-muted);
+    --hj-icon-button-ghost-fg-hover: var(--hj-color-brand);
+    --hj-icon-button-selected-border: var(--hj-color-brand);
+    --hj-icon-button-selected-bg: var(--hj-icon-button-default-bg);
+    --hj-icon-button-selected-fg: var(--hj-color-brand);
+
+    --hj-input-height-sm: 40px;
+    --hj-input-height-md: 48px;
+    --hj-input-height-lg: 56px;
+    --hj-input-padding-x: 16px;
+    --hj-input-gap: 4px;
+    --hj-input-font-size: 14px;
+    --hj-input-line-height: 18px;
+    --hj-input-radius: var(--hj-radius-md);
+    --hj-input-bg: var(--hj-color-web-control);
+    --hj-input-bg-active: var(--hj-color-web-surface);
+    --hj-input-border: transparent;
+    --hj-input-border-active: var(--hj-color-brand);
+    --hj-input-fg: var(--hj-color-web-foreground);
+    --hj-input-placeholder: var(--hj-color-web-muted);
+    --hj-input-icon: var(--hj-color-web-muted);
+    --hj-input-clear: var(--hj-color-web-muted);
+    --hj-input-addon: var(--hj-color-brand);
+    --hj-input-addon-bg: var(--hj-color-web-control);
+    --hj-input-addon-fg: var(--hj-color-web-subtle);
+
+    --hj-checkbox-size: 14px;
+    --hj-checkbox-border-width: 2px;
+    --hj-checkbox-border: var(--hj-color-web-muted);
+    --hj-checkbox-border-hover: var(--hj-color-brand);
+    --hj-checkbox-bg: transparent;
+    --hj-checkbox-bg-checked: var(--hj-color-brand);
+    --hj-checkbox-icon: var(--hj-color-web-surface);
+    --hj-checkbox-label: #cccccc;
+    --hj-checkbox-label-active: var(--hj-color-brand);
+
+    --hj-switch-width: 28px;
+    --hj-switch-height: 16px;
+    --hj-switch-padding: 2px;
+    --hj-switch-thumb-size: 12px;
+    --hj-switch-bg: #4b4c52;
+    --hj-switch-bg-checked: var(--hj-color-brand);
+    --hj-switch-thumb-bg: #ffffff;
+
+    --hj-skeleton-bg: rgb(255 255 255 / 0.08);
+    --hj-skeleton-highlight: rgb(255 255 255 / 0.16);
+    --hj-skeleton-gap: 16px;
+    --hj-skeleton-row-height: 16px;
+    --hj-skeleton-row-gap: 12px;
+    --hj-skeleton-title-height: 20px;
+    --hj-skeleton-title-margin: 16px;
+    --hj-skeleton-radius: 999px;
+    --hj-skeleton-radius-square: var(--hj-radius-md);
+    --hj-skeleton-size-sm: 24px;
+    --hj-skeleton-size-md: 32px;
+    --hj-skeleton-size-lg: 40px;
+
+    --hj-tooltip-radius: var(--hj-radius-xs);
+    --hj-tooltip-height: 28px;
+    --hj-tooltip-min-width: 100px;
+    --hj-tooltip-padding-x: 8px;
+    --hj-tooltip-arrow-size: 11px;
+    --hj-tooltip-gap: 10px;
+    --hj-tooltip-light-bg: #ffffff;
+    --hj-tooltip-light-fg: #000000;
+    --hj-tooltip-dark-bg: #323232;
+    --hj-tooltip-dark-fg: #ffffff;
+    --hj-tooltip-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
+
+    --hj-message-height: 48px;
+    --hj-message-radius: var(--hj-radius-md);
+    --hj-message-padding-x: 16px;
+    --hj-message-gap: 9px;
+    --hj-message-bg: var(--hj-color-web-surface);
+    --hj-message-fg: #cccccc;
+    --hj-message-light-bg: #ffffff;
+    --hj-message-light-fg: rgb(0 0 0 / 0.8);
+    --hj-message-action-fg: var(--hj-color-brand);
+    --hj-message-close-fg: var(--hj-color-web-muted);
+    --hj-message-close-fg-hover: #ffffff;
+    --hj-message-icon-size: 16px;
+    --hj-message-success: #7fba7a;
+    --hj-message-warning: #f39713;
+    --hj-message-error: #ff754c;
+    --hj-message-info: var(--hj-color-brand);
+    --hj-message-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
+
+    --hj-modal-bg: var(--hj-color-web-surface);
+    --hj-modal-fg: #ffffff;
+    --hj-modal-body-fg: #999999;
+    --hj-modal-padding-x: 32px;
+    --hj-modal-padding-y: 32px;
+    --hj-modal-header-height: 64px;
+    --hj-modal-wrap-padding-y: 48px;
+    --hj-modal-close-size: 40px;
+    --hj-modal-close-inset: 12px;
+    --hj-modal-mask-bg: rgb(0 0 0 / 0.32);
+    --hj-modal-radius: var(--hj-radius-lg);
+    --hj-modal-shadow: 0 4px 32px rgb(0 0 0 / 0.28);
+
+    --hj-menu-bg: var(--hj-color-web-surface);
+    --hj-menu-border: #2e313b;
+    --hj-menu-shadow: 0 -4px 18px rgb(0 0 0 / 0.15);
+    --hj-menu-item-bg: transparent;
+    --hj-menu-item-bg-hover: rgb(255 255 255 / 0.05);
+    --hj-menu-item-bg-active: var(--hj-color-web-control);
+    --hj-menu-item-fg: rgb(255 255 255 / 0.6);
+    --hj-menu-item-fg-active: #ffffff;
+    --hj-menu-item-muted: var(--hj-color-web-subtle);
+    --hj-menu-avatar-bg: #ffe2ac;
+    --hj-menu-avatar-fg: rgb(0 0 0 / 0.7);
+    --hj-menu-divider: var(--hj-menu-border);
+
+    --hj-tabs-line-fg: var(--hj-color-web-muted);
+    --hj-tabs-line-fg-hover: #ffffff;
+    --hj-tabs-line-fg-active: var(--hj-color-brand);
+    --hj-tabs-line-ink: var(--hj-color-brand);
+    --hj-tabs-card-bg: transparent;
+    --hj-tabs-card-bg-hover: rgb(255 255 255 / 0.05);
+    --hj-tabs-card-bg-active: rgb(255 255 255 / 0.1);
+    --hj-tabs-card-fg: rgb(255 255 255 / 0.6);
+    --hj-tabs-card-fg-active: #ffffff;
+    --hj-tabs-boxed-bg: var(--hj-color-web-surface);
+    --hj-tabs-boxed-border: rgb(255 255 255 / 0.1);
+    --hj-tabs-boxed-item-border: rgb(255 255 255 / 0.1);
+    --hj-tabs-boxed-fg: rgb(255 255 255 / 0.6);
+    --hj-tabs-boxed-fg-hover: #ffffff;
+    --hj-tabs-boxed-fg-active: var(--hj-color-brand);
+    --hj-tabs-boxed-indicator-bg: rgb(255 204 51 / 0.05);
+    --hj-tabs-boxed-indicator-border: rgb(255 204 51 / 0.2);
+    --hj-tabs-boxed-indicator-shadow: inset 0 0 0 1px rgb(255 204 51 / 0.12);
+
+    --hj-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.12);
+    --hj-shadow-md: 0 4px 16px rgb(0 0 0 / 0.24);
+    --hj-shadow-lg: 0 4px 32px rgb(0 0 0 / 0.32);
+
+    --hj-spacing-xs: 4px;
+    --hj-spacing-sm: 8px;
+    --hj-spacing-md: 12px;
+    --hj-spacing-lg: 16px;
+    --hj-spacing-xl: 20px;
+
+    --hj-z-dropdown: 1000;
+    --hj-z-sticky: 1020;
+    --hj-z-modal: 1050;
+    --hj-z-toast: 1060;
+
+    --hj-motion-duration-fast: 100ms;
+    --hj-motion-duration-normal: 200ms;
+    --hj-motion-duration-slow: 300ms;
+    --hj-motion-ease-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    --hj-motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --hj-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+    --hj-motion-ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
+    --hj-motion-ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+    --hj-motion-deadline: 500ms;
+  }
+
+  .huaijiu-web-root {
+    color: var(--hj-color-web-foreground);
+  }
+
+  .huaijiu-admin-root {
+    color: var(--hj-color-admin-foreground);
+  }
+
+  :where(.huaijiu-motion-disabled, .huaijiu-motion-disabled *) {
+    transition-duration: 1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root,
+    .huaijiu-web-root,
+    .huaijiu-admin-root {
+      --hj-motion-duration-fast: 1ms;
+      --hj-motion-duration-normal: 1ms;
+      --hj-motion-duration-slow: 1ms;
+      --hj-motion-deadline: 1ms;
+    }
+
+    *,
+    *::before,
+    *::after {
+      transition-duration: 1ms !important;
+      animation-duration: 1ms !important;
+      animation-iteration-count: 1 !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+@layer components {
+  .hj-wave {
+    position: relative;
+    overflow: hidden;
+    isolation: isolate;
+  }
+
+  .hj-wave::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 36%, transparent);
+    opacity: 0;
+    content: "";
+    transition: box-shadow var(--hj-motion-duration-normal) var(--hj-motion-ease-out), opacity
+      var(--hj-motion-duration-normal) var(--hj-motion-ease-out);
+  }
+
+  .hj-wave:where(:active:not(:disabled))::after {
+    box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 10%, transparent);
+    opacity: 0.32;
+    transition-duration: var(--hj-motion-duration-fast);
+  }
+
+  .hj-modal-body {
+    scrollbar-color: rgb(255 255 255 / 0.28) transparent;
+    scrollbar-width: thin;
+  }
+
+  .hj-modal-body::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .hj-modal-body::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .hj-modal-body::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: rgb(255 255 255 / 0.28);
+  }
+
+  .hj-modal-body::-webkit-scrollbar-thumb:hover {
+    background: rgb(255 255 255 / 0.42);
+  }
+
+  .hj-skeleton-active {
+    background-image: linear-gradient(90deg, transparent, var(--hj-skeleton-highlight), transparent);
+    background-size: 400% 100%;
+    animation: hj-skeleton-loading 1.4s ease infinite;
+  }
+
+  @keyframes hj-skeleton-loading {
+    0% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0 50%;
+    }
+  }
+
+  .hj-button-group {
+    display: inline-flex;
+    align-items: stretch;
+  }
+
+  .hj-button-group-block {
+    display: flex;
+    width: 100%;
+  }
+
+  .hj-button-group-attached {
+    overflow: hidden;
+    border-radius: var(--hj-radius-md);
+  }
+
+  .hj-button-group-attached > :where(button) {
+    min-width: 0;
+    border-radius: 0 !important;
+  }
+
+  .hj-button-group-attached > :where(button):first-child {
+    border-top-left-radius: inherit !important;
+    border-bottom-left-radius: inherit !important;
+  }
+
+  .hj-button-group-attached > :where(button):last-child {
+    border-top-right-radius: inherit !important;
+    border-bottom-right-radius: inherit !important;
+  }
+
+  .hj-button-group-separated > :where(button + button) {
+    box-shadow: inset 1px 0 0 var(--hj-button-group-separator);
+  }
+
+  .hj-segmented-tabs {
+    position: relative;
+  }
+
+  .hj-segmented-tabs-boxed::before {
+    position: absolute;
+    inset-block: 0;
+    left: 0;
+    z-index: 0;
+    width: calc(100% / max(var(--hj-segmented-count, 1), 1));
+    border: 1px solid var(--hj-tabs-boxed-indicator-border);
+    background: var(--hj-tabs-boxed-indicator-bg);
+    box-shadow: var(--hj-tabs-boxed-indicator-shadow);
+    content: "";
+    transform: translateX(calc(var(--hj-segmented-index, 0) * 100%));
+    transition: transform var(--hj-motion-duration-normal) var(--hj-motion-ease-out-circ), width
+      var(--hj-motion-duration-normal) var(--hj-motion-ease-out-circ);
+  }
+
+  .hj-segmented-tabs-boxed > button[aria-selected="true"] {
+    border-color: transparent !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  .hj-segmented-tabs-segmented::before {
+    position: absolute;
+    inset-block: 3px;
+    left: 3px;
+    z-index: 0;
+    width: calc((100% - 6px) / max(var(--hj-segmented-count, 1), 1));
+    border: 1px solid rgb(255 255 255 / 0.08);
+    border-radius: 999px;
+    background: rgb(255 204 51 / 0.14);
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
+    content: "";
+    transform: translateX(calc(var(--hj-segmented-index, 0) * 100%));
+    transition: transform var(--hj-motion-duration-normal) var(--hj-motion-ease-out-circ), width
+      var(--hj-motion-duration-normal) var(--hj-motion-ease-out-circ);
+  }
+
+  .hj-segmented-tabs-segmented > button[aria-selected="true"] {
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  @keyframes hjFadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes hjFadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes hjZoomBigIn {
+    0% {
+      opacity: 0;
+      transform: scale(0.2);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes hjZoomBigOut {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.2);
+    }
+  }
+
+  @keyframes hjSlideUpIn {
+    0% {
+      opacity: 0;
+      transform: scaleY(0.8);
+      transform-origin: 0% 0%;
+    }
+    100% {
+      opacity: 1;
+      transform: scaleY(1);
+      transform-origin: 0% 0%;
+    }
+  }
+
+  @keyframes hjSlideUpOut {
+    0% {
+      opacity: 1;
+      transform: scaleY(1);
+      transform-origin: 0% 0%;
+    }
+    100% {
+      opacity: 0;
+      transform: scaleY(0.8);
+      transform-origin: 0% 0%;
+    }
+  }
+
+  @keyframes hj-border-beam {
+    0% {
+      transform: rotate(0deg) scale(2);
+    }
+    100% {
+      transform: rotate(360deg) scale(2);
+    }
+  }
+
+  .hj-fade-enter {
+    animation: hjFadeIn var(--hj-motion-duration-normal) var(--hj-motion-ease-in-out-circ) both;
+  }
+
+  .hj-fade-exit {
+    animation: hjFadeOut var(--hj-motion-duration-normal) var(--hj-motion-ease-in-out-circ) both;
+  }
+
+  .hj-zoom-appear,
+  .hj-zoom-enter {
+    animation: hjZoomBigIn var(--hj-motion-duration-slow) var(--hj-motion-ease-out-circ) both;
+  }
+
+  .hj-zoom-leave,
+  .hj-zoom-exit {
+    animation: hjZoomBigOut var(--hj-motion-duration-slow) var(--hj-motion-ease-in-out-circ) both;
+  }
+
+  .hj-slide-up-appear,
+  .hj-slide-up-enter {
+    animation: hjSlideUpIn var(--hj-motion-duration-normal) var(--hj-motion-ease-out) both;
+  }
+
+  .hj-slide-up-leave,
+  .hj-slide-up-exit {
+    animation: hjSlideUpOut var(--hj-motion-duration-normal) var(--hj-motion-ease-in) both;
+  }
+
+  .hj-collapse-enter {
+    grid-template-rows: 1fr;
+    opacity: 1;
+    transition: grid-template-rows var(--hj-motion-duration-normal) var(--hj-motion-ease-in-out),
+      opacity var(--hj-motion-duration-normal) var(--hj-motion-ease-out);
+  }
+
+  .hj-collapse-exit {
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition: grid-template-rows var(--hj-motion-duration-normal) var(--hj-motion-ease-in-out),
+      opacity var(--hj-motion-duration-fast) var(--hj-motion-ease-in);
+  }
+
+  :where(.huaijiu-motion-disabled, .huaijiu-motion-disabled *)
+    :where(
+      .hj-zoom-appear,
+      .hj-zoom-enter,
+      .hj-zoom-leave,
+      .hj-zoom-exit,
+      .hj-slide-up-appear,
+      .hj-slide-up-enter,
+      .hj-slide-up-leave,
+      .hj-slide-up-exit
+    ) {
+    transform: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(
+        .hj-zoom-appear,
+        .hj-zoom-enter,
+        .hj-zoom-leave,
+        .hj-zoom-exit,
+        .hj-slide-up-appear,
+        .hj-slide-up-enter,
+        .hj-slide-up-leave,
+        .hj-slide-up-exit
+      ) {
+      transform: none !important;
+    }
+  }
+}