immich/web/src/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* light */
    --immich-primary: 66 80 175;
    --immich-bg: 255 255 255;
    --immich-fg: 0 0 0;
    --immich-gray: 246 246 244;
    --immich-error: 229 115 115;
    --immich-success: 129 199 132;
    --immich-warning: 255 183 77;

    /* dark */
    --immich-dark-primary: 172 203 250;
    --immich-dark-bg: 0 0 0;
    --immich-dark-fg: 229 231 235;
    --immich-dark-gray: 33 33 33;
    --immich-dark-error: 211 47 47;
    --immich-dark-success: 56 142 60;
    --immich-dark-warning: 245 124 0;
  }
}

@font-face {
  font-family: 'Overpass';
  src: url('$lib/assets/fonts/overpass/Overpass.ttf') format('truetype-variations');
  font-weight: 1 999;
  font-style: normal;
  ascent-override: 100%;
}

@font-face {
  font-family: 'Overpass Mono';
  src: url('$lib/assets/fonts/overpass/OverpassMono.ttf') format('truetype-variations');
  font-weight: 1 999;
  font-style: monospace;
  ascent-override: 100%;
}

:root {
  font-family: 'Overpass', sans-serif;
  /* Used by layouts to ensure proper spacing between navbar and content */
  --navbar-height: calc(theme(spacing.18) + 4px);
}

:root.dark {
  color-scheme: dark;
}

:root:not(.dark) {
  color-scheme: light;
}

html {
  height: 100%;
  width: 100%;
  font-size: 17px;
}

html::-webkit-scrollbar {
  width: 8px;
}

/* Track */
html::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 16px;
}

/* Handle */
html::-webkit-scrollbar-thumb {
  background: rgba(85, 86, 87, 0.408);
  border-radius: 16px;
}

/* Handle on hover */
html::-webkit-scrollbar-thumb:hover {
  background: #4250afad;
  border-radius: 16px;
}

body {
  margin: 0;
  color: #3a3a3a;
}

input:focus-visible {
  outline-offset: 0px !important;
  outline: none !important;
}

.text-white-shadow {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.icon-white-drop-shadow {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8));
}

@layer utilities {
  .immich-form-input {
    @apply rounded-xl bg-slate-200 px-3 py-3 text-sm focus:border-immich-primary disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-200 dark:bg-gray-600 dark:text-immich-dark-fg dark:disabled:bg-gray-800;
  }

  .immich-form-label {
    @apply font-medium text-gray-500 dark:text-gray-300;
  }

  /* width */
  .immich-scrollbar::-webkit-scrollbar {
    width: 8px;
  }

  /* Track */
  .immich-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 16px;
  }

  /* Handle */
  .immich-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(85, 86, 87, 0.408);
    border-radius: 16px;
  }

  /* Handle on hover */
  .immich-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #4250afad;
    border-radius: 16px;
  }

  /* Hidden scrollbar */
  /* width */
  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
    scrollbar-width: none;
  }

  .scrollbar-stable {
    scrollbar-gutter: stable both-edges;
  }

  /* Supporter Effect */
  .supporter-effect {
    position: relative;
    border: 0px solid transparent;
    background-clip: padding-box;
    animation: gradient 10s ease infinite;
    z-index: 1;
  }

  .supporter-effect:hover:after {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: linear-gradient(
      to right,
      rgba(16, 132, 254, 0.25),
      rgba(229, 125, 175, 0.25),
      rgba(254, 36, 29, 0.25),
      rgba(255, 183, 0, 0.25),
      rgba(22, 193, 68, 0.25)
    );
    content: '';
    border-radius: 8px;
    animation: gradient 10s ease infinite;
    background-size: 400% 400%;
    z-index: -1;
  }

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}