dick/src/public/css/tailwind.css

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

@layer base {
  /* Custom Background Colors */
  .bg-primary {
    @apply bg-lighttheme-primary dark:bg-darktheme-primary;
  }
  .bg-secondary {
    @apply bg-lighttheme-secondary dark:bg-darktheme-secondary;
  }
  .bg-secondary-hover {
    @apply bg-lighttheme-secondaryHover dark:bg-darktheme-secondaryHover;
  }
  .bg-tertiary {
    @apply bg-lighttheme-tertiary dark:bg-darktheme-tertiary;
  }
  .bg-accent {
    @apply bg-lighttheme-accent dark:bg-darktheme-accent;
  }
  .bg-accentsecondary {
    @apply bg-lighttheme-accentSecondary dark:bg-darktheme-accentSecondary;
  }
  .bg-tertiary-hover {
    @apply bg-lighttheme-tertiaryHover dark:bg-darktheme-tertiaryHover;
  }
  .bg-tooltip {
    @apply bg-lighttheme-tooltip dark:bg-darktheme-tooltip;
  }
  /* Custom Form Colors */
  .bg-forminput {
    @apply bg-lightthemeForm-input dark:bg-darkthemeForm-input;
  }
  /* Custom Border Colors */
  .border-tooltip {
    @apply border-lightthemeBorder-tooltip dark:border-darkthemeBorder-tooltip;
  }
  .border-accent {
    @apply border-lightthemeBorder-accent dark:border-darkthemeBorder-accent;
  }
  .border-accentsecondary {
    @apply border-lightthemeBorder-accentSecondary dark:border-darkthemeBorder-accentSecondary;
  }
  .border-form {
    @apply border-lightthemeBorder-form dark:border-darkthemeBorder-form;
  }
  .border-table {
    @apply border-lightthemeBorder-table dark:border-darkthemeBorder-table;
  }

  /* Custom Text Colors */
  .text-color-primary {
    @apply text-lightthemeText-primary dark:text-darkthemeText-primary;
  }
  .text-color-secondary {
    @apply text-lightthemeText-secondary dark:text-darkthemeText-secondary;
  }
  .text-color-tertiary {
    @apply text-lightthemeText-tertiary dark:text-darkthemeText-tertiary;
  }
  .text-color-light {
    @apply text-lightthemeText-light dark:text-darkthemeText-secondary;
  }
  .text-color-accent {
    @apply text-lightthemeText-accentPrimary dark:text-darkthemeText-accentPrimary;
  }
  .text-color-accentsecondary {
    @apply text-lightthemeText-accentSecondary dark:text-darkthemeText-accentSecondary;
  }
}

@layer components {
  /* Component Sizing */
  .custom-size-profile {
    height: 200px;
    width: 200px;
  }
  .custom-w-preview {
    height: 800px;
    width: 800px;
  }
  .name-tooltip {
    @apply invisible;
  }
  .has-name-tooltip:hover .name-tooltip {
    @apply hover:visible hover:z-50;
  }

  .switch {
    @apply inline-flex items-center cursor-pointer relative;
  }

  .switch input[type="checkbox"] {
    @apply absolute left-0 opacity-0 -z-10;
  }

  .switch input[type="checkbox"] + .check {
    @apply border-gray-700 border transition-colors duration-200;
  }

  .switch input[type="checkbox"]:focus + .check {
    @apply ring ring-lightthemeBorder-accent dark:ring-darkthemeBorder-accent;
  }

  .checkbox input[type="checkbox"] + .check {
    @apply rounded;
  }

  .switch input[type="checkbox"] + .check {
    @apply flex items-center shrink-0 w-12 h-6 p-0.5 bg-forminput;
  }
/*bg-[#19253B]*/
  .switch input[type="checkbox"] + .check,
  .switch input[type="checkbox"] + .check:before {
    @apply rounded-full;
  }

  .switch input[type="checkbox"]:checked + .check {
    @apply bg-lighttheme-accent dark:bg-darktheme-accent border-lightthemeBorder-accent dark:border-darkthemeBorder-accent;
  }

  .switch input[type="checkbox"] + .check:before {
    content: "";
    @apply block w-5 h-5 bg-white border border-gray-700;
  }

  .switch input[type="checkbox"]:checked + .check:before {
    transform: translate3d(110%, 0, 0);
    @apply border-lightthemeBorder-accent dark:border-darkthemeBorder-accent;
  }
}

@layer utilities {
  .custom-color-picker-border {
    --color: linear-gradient(
      90deg,
      Red,
      Orange,
      Yellow,
      Green,
      purple,
      Indigo,
      violet
    );
    width: 99%;
    height: 1.57rem;
    position: relative;
  }

  /* Create the pseudo class and add styling */
  .custom-color-picker-border::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 100%;
    height: 150%;
    background: var(--color);
    border-radius: 5px;
  }
}