nitropage/src/features/admin/css/admin.css

A free and open source, extensible visual page builder based on SolidStart.

:root {
  --np-font-sans:
    "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --np-font-brand:
    "Jost Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --np-font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  --np-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --np-ease-in-out-expo: cubic-bezier(0.9, 0, 0.1, 1);
  --np-ease-in-out-cubic: cubic-bezier(0.66, 0, 0.34, 1);
  --np-skew-logo: 9.5deg;
  --np-header-height: 3rem;
}

.np-h-screen {
  min-height: 100vh;
  min-height: 100lvh;
}

.np-hidden {
  display: none !important;
}

.np-min-size {
  min-width: 0;
  min-height: 0;
}

.np-drag-hidden {
  position: absolute;
  top: -99999px;
  left: -99999px;
  background-color: white;
  width: 1px;
  height: 1px;
}

.np-admin-font {
  font-family: var(--np-font-sans);
}

/* https://www.magicpattern.design/tools/css-backgrounds */
.np-bg-iso {
  --color-1: var(--np-gray-50);
  --color-2: var(--np-gray-200);
  background-color: var(--color-1);
  background-image:
    repeating-linear-gradient(
      45deg,
      var(--color-2) 25%,
      transparent 25%,
      transparent 75%,
      var(--color-2) 75%,
      var(--color-2)
    ),
    repeating-linear-gradient(
      45deg,
      var(--color-2) 25%,
      var(--color-1) 25%,
      var(--color-1) 75%,
      var(--color-2) 75%,
      var(--color-2)
    );
  background-position:
    0 0,
    12px 12px;
  background-size: 24px 24px;
}

@keyframes npMoveIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes npMoveOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes npFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes npFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes npAccordionShow {
  from {
    height: 0;
  }
  to {
    height: var(--kb-accordion-content-height);
  }
}
@keyframes npAccordionHide {
  from {
    height: var(--kb-accordion-content-height);
  }
  to {
    height: 0;
  }
}

@keyframes npPulse {
  50% {
    opacity: 0.5;
  }
}

@keyframes npBounce {
  50% {
    transform: translateY(-6px);
  }
}