timetracker/common/input.css

@import 'tailwindcss';

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

@source '../node_modules/flowbite/**/*.js';

@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;
  }

  /* a:hover {
  text-decoration-color: #ff4400;
  color: rgb(254, 185, 160);
  transition: all 0.2s ease-out;
} */

  /* form label {
  @apply dark:text-slate-400;
} */

  .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,
select,
textarea {
  @apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
} */

form input:disabled,
select:disabled,
textarea:disabled {
  @apply dark:bg-slate-800 dark:text-slate-500 cursor-not-allowed;
}

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

/* @media screen and (min-width: 768px) {
  form input,
  select,
  textarea {
    width: 300px;
  }
} */

/* @media screen and (max-width: 768px) {
  form input,
  select,
  textarea {
    width: 150px;
  }
} */

#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;
}

/* .truncate-container {
  @apply inline-block relative;
  a {
    @apply inline-block truncate max-w-20char transition-all group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-sm group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4;
    
  }  
} */

label {
  @apply dark:text-slate-500;
}

[type="text"], [type="password"], [type="datetime-local"], [type="datetime"], [type="date"], [type="number"], select, textarea {
  @apply dark:bg-slate-600 dark:text-slate-300;
}

[type="submit"] {
  @apply dark:text-white font-bold dark:bg-blue-600 px-4 py-2;
}

form div label {
  @apply dark:text-white;
}

form div {
  @apply flex flex-col;
}

div [type="submit"] {
  @apply mt-3;
}