timetracker/common/input.css

@import 'tailwindcss';

@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/forms';
@plugin 'flowbite/plugin';

@source "../node_modules/flowbite";
@import "flowbite/src/themes/default";

@custom-variant dark (&:is(.dark *));

@theme {
  --font-sans:
    IBM Plex Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono:
    IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  --font-serif:
    IBM Plex Serif, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-condensed:
    IBM Plex Sans Condensed, ui-sans-serif, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  --color-accent: #7c3aed;
  --color-background: #1f2937;
}


/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@utility min-w-20char {
  min-width: 20ch;
}

@utility max-w-20char {
  max-width: 20ch;
}

@utility min-w-30char {
  min-width: 30ch;
}

@utility max-w-30char {
  max-width: 30ch;
}

@utility max-w-35char {
  max-width: 35ch;
}

@utility max-w-40char {
  max-width: 40ch;
}

@layer utilities {
  @font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'IBM Plex Sans';
    src: url('fonts/IBMPlexSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'IBM Plex Serif';
    src: url('fonts/IBMPlexSerif-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'IBM Plex Serif';
    src: url('fonts/IBMPlexSerif-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
  }

  @font-face {
    font-family: 'IBM Plex Sans Condensed';
    src: url('fonts/IBMPlexSansCondensed-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
  }

  .responsive-table {
    @apply dark:text-white mx-auto table-fixed;
  }

  .responsive-table tr:nth-child(even) {
    @apply bg-indigo-100 dark:bg-slate-800;
  }

  .responsive-table tbody tr:nth-child(odd) {
    @apply bg-indigo-200 dark:bg-slate-900;
  }

  .responsive-table thead th {
    @apply text-left border-b-2 border-b-slate-500 text-xl;
  }

  .responsive-table thead th:not(:first-child),
  .responsive-table td:not(:first-child) {
    @apply border-l border-l-slate-500;
  }
}

form input:disabled,
select:disabled,
textarea:disabled {
  @apply cursor-not-allowed bg-neutral-secondary-strong text-fg-disabled;
   
}

.errorlist {
  @apply mt-4 mb-1 pl-3 py-2 bg-red-600 text-slate-200 w-[300px];
}

#button-container button {
  @apply mx-1;
}

.basic-button-container {
  @apply flex space-x-2 justify-center;
}

.basic-button {
  @apply inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded-sm shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-hidden focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out;
}

.markdown-content ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 1em;
}

.markdown-content ol {
  list-style-type: decimal;
  list-style-position: inside;
  padding-left: 1em;
}

.markdown-content ul, 
.markdown-content ol {
    list-style-position: outside;
    padding-left: 1em;
}

.markdown-content ul ul, 
.markdown-content ul ol, 
.markdown-content ol ul, 
.markdown-content ol ol {
    list-style-type: circle;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 1em;
}

#add-form {
  label + select, input, textarea {
    @apply mt-1;
  }
  form {
    @apply flex flex-col gap-3;
  }

  .form-row-button-group {
    display: flex;
    flex-direction: row;
    @apply gap-0 p-0;
    button {
      @apply mr-0;
      &:first-child {
        @apply rounded-e-none;
      }
      &:nth-child(2) {
        @apply rounded-none;
      }
      &:last-child {
        @apply rounded-s-none;
      }
    }
  }
  label {
    @apply mb-2.5 text-sm font-medium text-heading;
  }
  input:not([type="checkbox"]) {
    @apply mb-3 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body; 
  }
  input[type="checkbox"] {
    @apply  w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft;
  }
  select {
    @apply w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body;
  }
  textarea {
    @apply bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body;
  }
  :has(> label + input[type="checkbox"]) {
    @apply mt-3; /* needed because compared to all other form elements checkbox and its label are on the same row */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}