yaak/src-web/main.css

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

@layer base {
  html,
  body,
  #root {
    @apply w-full h-full overflow-hidden text-gray-900 bg-gray-50;
  }

  /* Setup default transitions for elements */
  * {
    transition: background-color var(--transition-duration), border-color var(--transition-duration),
      box-shadow var(--transition-duration);
    font-variant-ligatures: none;
  }

  ::selection {
    @apply bg-selection;
  }

  /* Disable user selection to make it more "app-like" */
  :not(a),
  :not(input):not(textarea),
  :not(input):not(textarea)::after,
  :not(input):not(textarea)::before {
    @apply select-none cursor-default;
  }

  a,
  a[href] * {
    @apply cursor-pointer !important;
  }

  table th {
    @apply text-left;
  }

  .hide-scrollbars {
    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar {
      display: none !important;
    }
  }

  /* Style the scrollbars */
  * {
    ::-webkit-scrollbar-corner,
    ::-webkit-scrollbar {
      @apply w-1.5 h-1.5;
    }

    .scrollbar-track,
    ::-webkit-scrollbar-corner,
    ::-webkit-scrollbar {
      @apply bg-transparent;
    }

    &:hover {
      &.scrollbar-thumb,
      &::-webkit-scrollbar-thumb {
        @apply bg-gray-500/30 hover:bg-gray-500/50 rounded-full;
      }
    }
  }

  .rtl {
    direction: rtl;
  }

  iframe {
    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar {
      @apply bg-gray-100;
    }
  }

  :root {
    color-scheme: light dark;
    --transition-duration: 100ms ease-in-out;
    --color-white: 255 100% 100%;
    --color-black: 255 0% 0%;
  }

  select {
    @apply appearance-none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
  }
}