tailwind.css

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

/* Desabilita animações para acessibilidade */
@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}

/* Variáveis */
:root {
  --primary: 5 77 165;
  --dark-primary: 0 51 105;
  --text: 16 21 25;
  --light: 240 240 240;
  --accent: 2 182 108;
  --dark-accent: 0 99 28;
}

/* Propriedades especiais */
::selection {
  @apply bg-primary text-light;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--primary));
}

/* Tables Scrollbar Styling Start */
div::-webkit-scrollbar {
  height: 0.75em;
  width: 0.75rem;
}
/* Track */
div::-webkit-scrollbar-track {
  @apply bg-primary/10;
  border-radius: 5px;
}
/* Handle */
div::-webkit-scrollbar-thumb {
  @apply bg-primary/40;
  border-radius: 5px;
}
/* Handle on hover */
div::-webkit-scrollbar-thumb:hover {
  @apply bg-primary/50;
}

/* Propriedades gerais do documento */
*:focus {
  @apply outline-none ring-1 ring-offset-1 ring-primary;
}

html {
  @apply bg-gray-50 text-text scroll-smooth h-full;
  font-family: "Jost", sans-serif;
}

/* Seções */
header {
  @apply flex flex-col items-center justify-center bg-primary h-[150px] py-4 px-4 select-none sm:h-[200px];
}

main {
  @apply w-full;
}

footer {
  @apply flex flex-col items-center text-center w-full px-4 py-6 mx-auto border-t-2 border-t-gray-300 md:w-11/12;
}

footer img {
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.024))
    drop-shadow(2.3px 2.3px 4.5px rgba(0, 0, 0, 0.035))
    drop-shadow(3.9px 3.9px 7.9px rgba(0, 0, 0, 0.043))
    drop-shadow(6.3px 6.3px 12.5px rgba(0, 0, 0, 0.05))
    drop-shadow(9.7px 9.7px 19.3px rgba(0, 0, 0, 0.057))
    drop-shadow(15.1px 15.1px 30.1px rgba(0, 0, 0, 0.065))
    drop-shadow(25px 25px 50px rgba(0, 0, 0, 0.076))
    drop-shadow(50px 50px 100px rgba(0, 0, 0, 0.1));
}

.card {
  @apply flex justify-center mx-auto py-8;
}

.success {
  @apply text-green-900 bg-green-100 border border-green-300 rounded-md p-4 mb-4;
}

.error {
  @apply text-red-900 bg-red-100 border border-red-500 rounded-md p-4 mb-4;
}

.error > ul,
.success > ul {
  @apply list-disc px-4;
}

/* Itens */
/* Títulos */
h1,
h2,
h3,
h4 {
  font-family: "Poppins", sans-serif;
  @apply text-center tracking-wide;
}

h1 {
  @apply text-light text-4xl font-bold sm:text-6xl;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.024))
    drop-shadow(2.3px 2.3px 4.5px rgba(0, 0, 0, 0.035))
    drop-shadow(3.9px 3.9px 7.9px rgba(0, 0, 0, 0.043))
    drop-shadow(6.3px 6.3px 12.5px rgba(0, 0, 0, 0.05))
    drop-shadow(9.7px 9.7px 19.3px rgba(0, 0, 0, 0.057))
    drop-shadow(15.1px 15.1px 30.1px rgba(0, 0, 0, 0.065))
    drop-shadow(25px 25px 50px rgba(0, 0, 0, 0.076))
    drop-shadow(50px 50px 100px rgba(0, 0, 0, 0.1));
}

h2,
h3,
h4 {
  @apply font-semibold;
}

h2 {
  @apply text-2xl mt-2 mb-6 sm:text-4xl;
}

h3 {
  @apply text-xl my-2 sm:text-2xl;
}

h4 {
  @apply text-lg my-2 sm:text-xl;
}

h1 + small {
  @apply text-sm text-gray-300 md:text-base lg:text-lg;
}

/* Links */
.reset-password {
  @apply relative font-semibold text-primary px-3 overflow-hidden transition-colors duration-300 z-[1];
}

.reset-password:hover,
.reset-password:active {
  @apply text-light transition-colors duration-300 no-underline;
}

.reset-password::before {
  content: "";
  @apply absolute left-0 top-0 w-full h-full bg-primary rounded-sm z-[-1] translate-x-[-101%] transition-transform duration-300 ease-in-out;
}

.reset-password:hover::before,
.reset-password:active::before {
  @apply translate-x-0 transition-transform duration-300 ease-in-out;
}

.reset-password:focus {
  @apply ring-0;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
  @apply text-primary bg-gray-100 border border-gray-300 rounded-md px-3 py-1 w-full focus:bg-gray-50 focus:border-primary focus:ring-offset-0 focus:ring-opacity-0 focus:outline-none invalid:text-red-900 invalid:bg-red-100 invalid:border invalid:border-red-500 invalid:focus:text-red-900 invalid:focus:bg-red-100 invalid:focus:border invalid:focus:border-red-500;
}

.form-line {
  @apply mb-4;
}

.required {
  @apply text-red-600 font-semibold align-middle ml-1;
}

.validation-error {
  @apply text-sm text-red-900 font-semibold bg-red-50 border border-red-200 -mt-1 pt-2 px-3 rounded-b-md transition-all duration-300;
}

/* Tables */
table {
  @apply table-auto border-collapse text-xs md:text-base;
}

td,
th {
  @apply bg-clip-padding;
}

td {
  @apply bg-gray-100;
}

thead tr:first-child th:not(:first-child):not(:last-child) {
  @apply border-x border-x-gray-300;
}

thead tr:nth-child(2n) th {
  @apply border-t border-x border-gray-300;
}

tbody tr td:not(:first-child):not(:last-child) {
  @apply border border-gray-300;
}

tbody tr td:first-child,
tbody tr td:last-child {
  @apply border-y border-gray-300;
}

tbody tr:first-child td {
  @apply border-t-0 !important;
}

thead tr th {
  @apply bg-primary text-light p-4 lg:py-3 lg:px-4;
}

tbody tr td {
  @apply p-1 sm:py-2 sm:px-3;
}

.zebrado {
  @apply bg-primary/5;
}

.inativa td {
  @apply bg-gray-400 text-gray-300 line-through;
}

th.auditado {
  @apply bg-darkAccent;
}

.auditado {
  @apply font-bold bg-accent/20;
}

/* Toggle */
input[type="checkbox"].toggle {
  @apply opacity-0 absolute left-[-9000px];
}

input[type="checkbox"].toggle + label {
  @apply relative flex items-center cursor-pointer;
}

input[type="checkbox"].toggle + label::before {
  @apply bg-gray-500 mr-2 transition ease-in-out;
  content: "";
  width: 2rem;
  height: 0.7rem;
  border-radius: 1rem;
}

input[type="checkbox"].toggle + label::after {
  @apply absolute left-0 bg-gray-200 transition ease-in-out;
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 1rem;
}

input[type="checkbox"].toggle + label:focus {
  @apply outline-none ring-2 ring-primary;
}

input[type="checkbox"].toggle:checked + label::before {
  @apply bg-primary/50;
}

input[type="checkbox"].toggle:checked + label::after {
  @apply bg-primary;
  transform: translateX(1rem);
}

/* Buttons */
.button {
  @apply font-semibold px-4 py-2 rounded-md transition-all duration-300;
}

.button-primary {
  @apply text-gray-50 bg-accent;
}

.button-primary:hover {
  @apply bg-darkAccent;
}

.button-secondary {
  @apply text-primary border-solid border border-primary;
}

.button-secondary:hover {
  @apply border-darkPrimary text-darkPrimary bg-gray-200;
}

.button-tertiary {
  @apply text-primary;
}

.button-tertiary:hover {
  @apply text-darkPrimary;
}

.floating-button {
  @apply bg-primary text-light text-lg font-semibold w-16 h-16 rounded-full border border-gray-200 fixed bottom-6 right-6 z-20 md:bottom-8 md:right-8 md:w-20 md:h-20;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.024),
    2.3px 2.3px 4.5px rgba(0, 0, 0, 0.035),
    3.9px 3.9px 7.9px rgba(0, 0, 0, 0.043),
    6.3px 6.3px 12.5px rgba(0, 0, 0, 0.05),
    9.7px 9.7px 19.3px rgba(0, 0, 0, 0.057),
    15.1px 15.1px 30.1px rgba(0, 0, 0, 0.065),
    25px 25px 50px rgba(0, 0, 0, 0.076), 50px 50px 100px rgba(0, 0, 0, 0.1);
}

.floating-button::before {
  content: "";
  animation: ring-1 3s linear infinite forwards;
  @apply absolute inset-0 block w-1/5 h-1/5 m-auto rounded-full bg-primary -z-10;
}

.floating-button::after {
  content: "";
  animation: ring-2 3s linear infinite both;
  @apply absolute inset-0 block w-1/5 h-1/5 m-auto rounded-full bg-primary -z-10;
}

.floating-button svg {
  @apply mx-auto w-6 h-6 lg:w-auto lg:h-auto;
}

.button:hover,
.floating-button:hover {
  @apply transition-all duration-300;
}

.floating-button:hover,
.floating-button:hover::after,
.floating-button:hover::before {
  @apply bg-darkPrimary;
}

.button:active,
.floating-button:active {
  @apply transform scale-95;
}

.button:disabled,
.button:disabled:hover,
.floating-button:disabled,
.floating-button:disabled:hover {
  @apply bg-gray-300 border-gray-700 text-gray-400 filter-none shadow-none cursor-not-allowed;
}

@keyframes ring-1 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(8);
  }
}

@keyframes ring-2 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(8);
  }
}

/* Logos */
img {
  @apply h-fit;
}

/* Page Load animation */
.loader-wrapper {
  @apply flex justify-center items-center fixed top-[-50vh] left-[-50vw] bg-gray-100 w-[200vw] h-[200vh] rounded-[50%] filter backdrop-blur-[2px] z-[1000];
}

.loader {
  animation: ping 1.3s ease-in-out infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-3-11 10:1:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation ping
 * ----------------------------------------
 */
@keyframes ping {
  0% {
    transform: scale(0.2);
    opacity: 0.8;
  }
  80% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Modal de saída */
.logout-modal {
  @apply w-[50ch] bg-gray-100 py-4 px-8 rounded-md;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.024),
    2.3px 2.3px 4.5px rgba(0, 0, 0, 0.035),
    3.9px 3.9px 7.9px rgba(0, 0, 0, 0.043),
    6.3px 6.3px 12.5px rgba(0, 0, 0, 0.05),
    9.7px 9.7px 19.3px rgba(0, 0, 0, 0.057),
    15.1px 15.1px 30.1px rgba(0, 0, 0, 0.065),
    25px 25px 50px rgba(0, 0, 0, 0.076), 50px 50px 100px rgba(0, 0, 0, 0.1);
}

.logout-modal::backdrop {
  @apply bg-gray-600/90 backdrop-blur-sm;
}

.logout-modal-buttons {
  @apply flex justify-end items-center gap-4 mt-8 pb-4;
}

/* Gráfico do dashboard */
#dashboardChart {
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.024))
    drop-shadow(2.3px 2.3px 4.5px rgba(0, 0, 0, 0.035))
    drop-shadow(3.9px 3.9px 7.9px rgba(0, 0, 0, 0.043))
    drop-shadow(6.3px 6.3px 12.5px rgba(0, 0, 0, 0.05))
    drop-shadow(9.7px 9.7px 19.3px rgba(0, 0, 0, 0.057))
    drop-shadow(15.1px 15.1px 30.1px rgba(0, 0, 0, 0.065))
    drop-shadow(25px 25px 50px rgba(0, 0, 0, 0.076))
    drop-shadow(50px 50px 100px rgba(0, 0, 0, 0.1));
}