website-v2/frontend/styles.css

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

@layer base {
  [x-cloak] {
    display: none !important;
  }

  body {
    @apply text-slate dark:text-white;
    @apply font-cairo;
  }
  h1 {
    @apply text-6xl;
    @apply mb-3;
  }
  h2 {
    @apply text-slate dark:text-white;
    @apply text-4xl;
    @apply my-5;
  }
  h3 {
    @apply text-2xl;
  }
  h4 {
    @apply text-xl;
  }
  h5 {
    @apply text-base
  }
  p {
    @apply py-5;
  }
  pre {
    @apply p-6;
  }
  /* Forum style overrides */
  textarea {
    @apply w-full rounded bg-white dark:bg-charcoal border border-slate;
  }
  input[type=email] {
    @apply w-full rounded bg-white dark:bg-charcoal border border-slate;
  }
  input[type=checkbox] {
    @apply mr-3 rounded bg-white dark:bg-charcoal border border-slate text-orange dark:border-slate;
    @apply cursor-pointer;
  }
  input[type=file] {
    @apply block w-full px-3 py-1 text-base text-slate dark:text-white font-normal text-orange bg-clip-padding border border-solid border-slate rounded transition ease-in-out my-2;
  }
  #signup_form input[type=email],
  #signup_form input[type=password]{
    @apply rounded bg-white dark:bg-charcoal text-slate dark:text-white border border-slate w-full;
  }
  #authpages #footerSignup {
    @apply hidden;
  }
  /* Generic link style */
  /*a:not(.link-header):not(.link-none), .link {*/
  /*  @apply text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange;*/
  /*  @apply group-hover:text-orange dark:group-hover:text-orange;*/
  /*  @apply fill-current;*/
  /*}*/

  .link-header {
    @apply text-orange dark:text-orange hover:text-sky-600 dark:hover:text-sky-300;
  }

  /* use both .link and .link-force on an icon in order to bypass the following style and use all styles from .link */
  i:not(.link-force) {
    i.fa, i.fab, i.fa-brands, i.fas {
      @apply text-slate dark:text-white;
    }
  }

  /* just using .content as a class for these for now, but we can change later */
  main.content {
    @apply px-3 pt-3 mb-3 md:py-0 md:px-0;
  }

  section.content {
    @apply p-6 mb-4 w-full bg-white rounded-lg shadow-lg md:flex  dark:text-white truncate text-slate dark:bg-charcoal;
  }

  select.dropdown {
    @apply py-1 mb-3 min-w-[8rem] text-sm bg-white rounded-md border border-gray-300 cursor-pointer dark:bg-black text-sky-600 dark:text-orange dark:border-slate;
  }

  .errorlist {
    @apply bg-red-300 py-2 px-3 rounded text-white;
  }

  /* STYLES FOR THE LIBRARY README
  These can't easily be handled in the template so doing globally.
   */
  #libraryReadMe h1 {
    @apply text-3xl font-semibold border-b border-gray-300 dark:border-slate;
  }
  #libraryReadMe h1 a {
    @apply float-right inline-block mx-2;
  }
  #libraryReadMe h2 {
    @apply mt-3 text-2xl font-semibold border-b border-gray-300 dark:border-slate;
  }
  #libraryReadMe h3 {
    @apply mt-3 text-xl font-semibold;
  }
  #libraryReadMe p {
    @apply text-base pb-1 font-light;
  }
  #libraryReadMe ul {
    @apply list-disc list-inside;
  }
  #libraryReadMe ul li {
    @apply text-base py-1 font-light;
  }
  #libraryReadMe table {
    @apply table-auto w-full;
  }
  #libraryReadMe code {
    @apply text-sm;
  }

  code,
  kbd,
  samp,
  pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* 1 */
    @apply text-sm bg-gray-200 dark:bg-black overflow-x-scroll;
    /* 2 */
  }

}