immich/web/src/app.css

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

@font-face {
  font-family: 'Work Sans';
  src: url('$lib/assets/fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 1 999;
}

@font-face {
  font-family: 'Snowburst One';
  src: url('$lib/assets/fonts/SnowburstOne-Regular.ttf') format('truetype');
}

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

html {
  height: 100%;
  width: 100%;
}

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: #5f6368;
}

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;
  }
}