quivr/frontend/app/globals.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import './colors.css';

* {
  @apply scrollbar;
}

main {
  @apply max-w-screen-xl mx-auto flex flex-col;
}

header,
section {
  @apply px-5 md:px-10;
}

a {
  @apply hover:text-primary dark:hover:text-gray-200 transition-colors;
}

div:focus {
  @apply outline-none;
}

@layer utilities {
  .scrollbar::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  .scrollbar::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: var(--background-0);
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--background-3);
    border-radius: 4px;
    max-height: 30px;
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--background-2);
  }

  .h-fill-available {
    /* fixes the h-[100vh] issue on mobile */
    /* like height: -webkit-fill-available; but for any device (android and iphone) */
    @apply h-[100vh] supports-[height:100cqh]:h-[100cqh] supports-[height:100svh]:h-[100svh];
  }
}

:root {
  /* Backgrounds */
  --background-0: var(--white-0);
  --background-1: var(--white-1);
  --background-2: var(--grey-6);
  --background-3: var(--grey-4);
  --background-4: var(--grey-0);
  --background-5: var(--black-0);
  --background-primary-0: var(--primary-2);
  --background-primary-1: var(--primary-1);
  --background-blur: rgba(0, 0, 0, 0.9);
  --background-success: var(--success-lightest);
  --background-error: var(--dangerous-lightest);

  /* Borders */
  --border-0: var(--grey-5);
  --border-1: var(--grey-4);
  --border-2: var(--grey-2);

  /* Icons */
  --icon-0: var(--white-0);
  --icon-1: var(--grey-2);
  --icon-2: var(--grey-0);
  --icon-3: var(--black-0);

  /* Text */
  --text-0: var(--white-0);
  --text-1: var(--grey-2);
  --text-2: var(--grey-0);
  --text-3: var(--black-0);
  --text-4: var(--grey-1);

  /* Box Shadow */
  --box-shadow: rgba(0, 0, 0, 0.25);
}

body.dark_mode {
  /* Backgrounds */
  --background-0: var(--black-1);
  --background-1: var(--black-0);
  --background-2: var(--black-2);
  --background-3: var(--black-3);
  --background-4: var(--black-4);
  --background-5: var(--black-5);
  --background-primary-0: var(--black-5);
  --background-primary-1: var(--black-5);
  --background-opposite: var(--white-0);
  --background-blur: rgba(0, 0, 0, 0.9);
  --background-success: var(--black-5);
  --background-error: var(--black-5);
 
  /* Borders */
  --border-0: var(--black-5);
  --border-1: var(--black-6);
  --border-2: var(--black-7);
 
  /* Icons */
  --icon-0: var(--black-0);
  --icon-1: var(--grey-0);
  --icon-2: var(--grey-2);
  --icon-3: var(--white-0);
 
  /* Text */
  --text-0: var(--black-0);
  --text-1: var(--grey-0);
  --text-2: var(--grey-2);
  --text-3: var(--white-2);
  --text-4: var(--grey-1);

  /* Box Shadow */
  --box-shadow: rgba(255, 255, 255, 0.25);
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--code-very-dark-grey);
  font-style: italic;
}

.token.punctuation {
  color: var(--code-dark-grey);
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: var(--code-red); 
}

.token.boolean,
.token.number {
  color: var(--code-purple);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: var(--code-green); 
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: var(--code-grey); 
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: var(--code-yellow);
}

.token.keyword {
  color: var(--code-blue); 
}

.token.regex,
.token.important {
  color: var(--code-orange);
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

.EmojiPickerReact {
  --epr-emoji-size: 20px !important;
  --epr-hover-bg-color: var(--primary-1) !important;
  --epr-category-navigation-button-size: 24px !important;
  --epr-category-label-bg-color: var(--background-0) !important;
  --epr-header-padding: 8px 16px !important;
}

.EmojiPickerReact.epr-dark-theme {
  --epr-emoji-size: 20px !important; 
  --epr-hover-bg-color: var(--primary-1) !important;
  --epr-category-navigation-button-size: 24px !important;
  --epr-category-label-bg-color: var(--background-0) !important;
  --epr-header-padding: 8px 16px !important;
}

.react-colorful {
  width: 250px !important;
  height: 300px !important;
  border: none !important;
}

@media (min-width: 768px) {
  .react-colorful {
    width: 375px !important;
  }
}

.react-colorful__last-control {
  border-radius: 0 !important;
}

.react-colorful__saturation {
  border-radius: 0 !important;
}