Visitenbuch/src/app.pcss

/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-animation {
    @apply duration-200 ease-out;
    animation: button-pop var(--animation-btn, 0.25s) ease-out;
    &:active:hover,
    &:active:focus {
      animation: button-pop 0s ease-out;
      transform: scale(var(--btn-focus-scale, 0.97));
    }
  }
}

:root {
  --toastBackground: oklch(var(--b3));
  --toastColor: oklch(var(--bc));
  --toastLeftBorder: oklch(var(--p));
  --toastBarBackground: oklch(var(--bc) / 0.4);
  --toastContainerTop: 4rem;
  --toastContainerRight: 1rem;
  --toastBarHeight: 3px;
}

.toast-error {
  --toastLeftBorder: oklch(var(--er));
}

._toastItem {
  border-left: solid 6px var(--toastLeftBorder) !important;
}

._toastMsg {
  white-space: pre-wrap;
}

.badge {
  border: none;
}

button {
  text-align: initial;
  user-select: text;
}

.heading {
  @apply text-2xl font-bold;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.v-form-field > input {
  @apply input input-bordered w-full max-w-xs;
}

.input[aria-invalid="true"],
.v-form-field > [aria-invalid="true"] {
  @apply input-error;
}

.card2 {
  @apply bg-base-200;
  @apply rounded-xl;
  @apply flex flex-col;
  @apply border border-solid border-base-content/30;

  .row {
    @apply flex;
    @apply p-2;
    @apply border-t border-solid border-base-content/30;
  }

  .row:first-child {
    @apply rounded-t-xl border-none;
  }

  .row:last-child {
    @apply rounded-b-xl;
  }

  .c-light {
    @apply bg-base-content/20 py-1;
  }

  .c-vlight {
    @apply bg-base-content/10 py-1;
  }

  .c-primary {
    @apply bg-primary text-primary-content py-1;
  }
}

.card-animation {
  @apply duration-200 ease-out;
  &:active:hover,
  &:active:focus {
    animation: button-pop 0s ease-out;
    transform: scale(0.99);
  }
}

.block {
  display: block !important;
}

@media print {
  /* Make all text black for best look on B/W printers */
  :root {
    --bc: 0% 0 0;
    --pc: 0% 0 0;
    --sc: 0% 0 0;
    --ac: 0% 0 0;
    --nc: 0% 0 0;
    --inc: 0% 0 0;
    --suc: 0% 0 0;
    --wac: 0% 0 0;
    --erc: 0% 0 0;
  }

  .btn:not(.btn-id) {
    display: none !important;
  }

  .btn-id {
    font-size: 100%;
    border: none;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    @apply rounded-none;
  }

  .card2 {
    @apply rounded-none;
    background: none !important;
    page-break-inside: avoid;

    .row:first-child {
      @apply border-solid border-base-content/50 border-t-0 border-b-2;
      @apply font-semibold;
    }

    .row:last-child,
    .row:first-child {
      @apply rounded-none;
    }

    .c-light,
    .c-vlight,
    .c-primary {
      background: none !important;
    }
  }

  .card2,
  .card2 > .row {
    @apply border-none;
  }

  .table {
    td, th {
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
      @apply border-base-content/50 border;
    }
  }

  .badge {
    background-color: transparent !important;
    color: #000 !important;
    padding: 0;
    @apply rounded-none;
  }
}