tailwind.css

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

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

/* Variáveis */
:root {
  animation: none !important;
  --primary: 5 77 165;
  --dark-primary: 3 31 72;
  --text: 68 70 80;
  --light: 240 240 240;
  --accent: 2 182 108;
  --dark-accent: 0 99 28;
}

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

/* 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));
}

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

html {
  @apply text-text scroll-smooth h-full;
  font-family: "Jost", sans-serif;
  background-color: #e0e0e0;
}

/* Seções */
header {
  @apply flex flex-col justify-center content-center p-4 my-6 select-none sm:h-40;
}

main {
  @apply w-full;
}

footer {
  @apply flex flex-col justify-center items-center text-center w-5/6 min-w-[340px] py-6 px-4 mx-auto rounded-xl;
}

dialog {
  @apply text-text;
}

dialog[open] {
  animation: show 0.5s ease normal;
}

dialog[open]::backdrop {
  animation: show 0.5s ease normal;
}

dialog.hide {
  animation: hide 0.5s ease normal;
}

dialog.hide::backdrop {
  animation: hide 0.5s ease normal;
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hide {
  to {
    opacity: 0;
  }
}

.card {
  @apply flex justify-center mb-10 mx-auto p-4 rounded-xl;
  box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
}

.card-inset {
  @apply flex justify-center mb-10 mx-auto p-4 rounded-xl;
  box-shadow: inset 10px 10px 20px #bebebe, inset -10px -10px 20px #ffffff;
}

@media (min-width: 640px) {
  .card {
    @apply mb-12;
    box-shadow: 16px 16px 32px #bebebe, -16px -16px 32px #ffffff;
  }

  .card-inset {
    @apply mb-12;
    box-shadow: inset 16px 16px 32px #bebebe, inset -16px -16px 32px #ffffff;
  }
}

.success {
  @apply absolute top-[15%] left-0 right-0 w-[300px] mx-auto text-green-900 bg-green-200/50 border border-green-300 rounded-md p-4 mb-4 backdrop-blur-sm z-50;
  @apply sm:w-[340px] sm:bg-green-300/50;
  box-shadow: 16px 16px 32px #bebebe;
}

.error {
  @apply absolute top-[15%] left-0 right-0 w-[300px] mx-auto text-red-900 bg-red-200/50 border border-red-300 rounded-md p-4 mb-4 backdrop-blur-sm z-50;
  @apply sm:w-[340px] sm:bg-red-300/50;
  box-shadow: 16px 16px 32px #bebebe;
}

.close-toast {
  @apply absolute right-0 top-0 font-semibold py-1 px-2 rounded-tl-md cursor-pointer;
}

.show-toast {
  animation: showToast 1s ease-out normal;
}

.hide-toast {
  @apply -top-[50%];
  animation: hideToast 1s ease-in normal;
}

@keyframes showToast {
  from {
    top: -50%;
  }
  to {
    top: 15%;
  }
}

@keyframes hideToast {
  from {
    top: 15%;
  }
  to {
    top: -50%;
  }
}

.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-4xl font-bold sm:text-6xl;
}

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

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

h3 {
  @apply text-xl w-fit mx-auto mb-5 p-2 rounded-md sm:text-2xl sm:mb-8;
  text-shadow: 2px 2px 4px #bebebe, -2px -2px 4px #ffffff;
  box-shadow: inset 10px 10px 20px #bebebe, inset -10px -10px 20px #ffffff;
}

h3::before {
  @apply px-2;
  content: "::";
}

h3::after {
  @apply px-2;
  content: "::";
}

h4 {
  @apply text-lg mb-3 sm:text-xl;
}

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

/* Links */
.link {
  @apply font-semibold tracking-wider py-1 px-3 rounded-md duration-300 transition-shadow;
}

.link:hover,
.link:active {
  box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
}

.link:focus {
  @apply ring-0;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  @apply text-primary rounded-md px-3 py-2 w-full focus:ring-offset-0 focus:ring-opacity-0 focus:outline-none invalid:text-red-900 invalid:bg-red-100 invalid:focus:text-red-900;
  background-color: #e0e0e0;
  box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
}

select:focus {
  box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
}

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

.form-line label {
  @apply mb-1 inline-block;
}

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

.validation-error {
  @apply block text-sm text-red-900 font-semibold tracking-wide bg-red-50 w-full mt-1 py-1 px-3 rounded-md transition-all duration-300 invisible;
  box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
}

/* Tables */
.tabulator {
  @apply w-full tracking-wide text-xs select-none border-0 bg-transparent rounded-md !important;
  box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
}

@media (min-width: 640px) {
  .tabulator {
    @apply text-base !important;
    box-shadow: 16px 16px 32px #bebebe, -16px -16px 32px #ffffff;
  }

  .tabulator-col {
    @apply p-2 !important;
  }
}

.tabulator-table {
  @apply bg-transparent !important;
}

.tabulator-col {
  @apply font-medium tracking-wider capitalize border-gray-300 !important;
}

.tabulator-col-group {
  @apply p-0 !important;
}

.tabulator-header,
.tabulator-col-group-cols {
  @apply border-gray-300 !important;
}

.tabulator-row-odd {
  @apply bg-light !important;
}

.tabulator-row-even {
  @apply bg-[#e0e0e0] !important;
}

.tabulator-cell {
  @apply border-b border-r border-gray-300 py-1 md:py-2 !important;
}

.inativa > .tabulator-cell {
  @apply text-gray-600 line-through !important;
}

/* Toggle */
.switch-toggle {
  height: 40px;
}
.switch-toggle input[type="checkbox"] {
  @apply absolute opacity-0 -z-10;
}
.switch-toggle input[type="checkbox"] + label {
  @apply relative inline-block m-0 rounded-md cursor-pointer;
  width: 100px;
  height: 40px;
  box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffff;
}
.switch-toggle input[type="checkbox"] + label::before {
  @apply absolute text-xs text-center rounded-sm;
  content: "OFF";
  line-height: 25px;
  top: 8px;
  left: 8px;
  width: 45px;
  height: 25px;
  transition: all 0.3s linear;
  background: linear-gradient(145deg, #f0f0f0, #cacaca);
  box-shadow: 3px 3px 6px #bebebe, -3px -3px 6px #ffff;
}
.switch-toggle input[type="checkbox"]:checked + label::before {
  @apply left-1/2 text-light;
  content: "ON";
  background: linear-gradient(145deg, #0552b1, #054595);
}

/* Buttons */
.button {
  @apply font-semibold tracking-wider px-4 py-2 rounded-md transition-colors duration-300;
  box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
}

.button-primary {
  @apply text-light;
  background: linear-gradient(145deg, #054595, #0552b1);
}

.button-primary:hover {
  @apply transition-colors duration-100;
  background: linear-gradient(145deg, #0552b1, #054595);
}

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

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

.button-tertiary {
  @apply text-primary;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
}

.button-tertiary:hover {
  @apply transition-colors duration-100;
  background: linear-gradient(145deg, #f0f0f0, #cacaca);
}

.button:active {
  @apply text-primary;
  background: #e0e0e0;
  box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
}

.button:disabled,
.button:disabled:hover {
  @apply text-gray-500 cursor-not-allowed;
  background: #e0e0e0;
  box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
}

.senha-olho {
  @apply absolute top-0 right-0 w-12 h-10 box-border border border-transparent rounded-md transition-all duration-300;
  background: url("../img/eye.svg") no-repeat center;
}

.senha-olho:hover {
  background: url("../img/eye-hover.svg") no-repeat center;
}

.senha-olho:active,
.senha-olho:focus,
.senha-olho:focus-within,
.senha-olho:focus-visible {
  @apply ring-0 ring-offset-0 scale-95;
}

.senha-olho-riscado {
  background: url("../img/eye-off.svg") no-repeat center;
}

.senha-olho-riscado:hover {
  background: url("../img/eye-off-hover.svg") no-repeat center;
}

/* Images */
img {
  @apply h-fit;
  /* background-color: #d1d5db */
}

.img-filter {
  filter: drop-shadow(3px 3px 6px #bebebe) drop-shadow(3px 3px 6px #fff);
}

/* 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;
}

.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(6px 6px 12px #bebebe) drop-shadow(6px 6px 12px #fff);
}

/* Floating Menu */
.menu {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 6rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  color: rgb(var(--light));
}

.menu-open-button,
.menu-item {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: rgb(var(--primary));
  cursor: pointer;
  justify-content: center;
  align-items: center;
  box-shadow: var(--bg-gray-50-shadow-box);
}

#menu-open:checked + .menu-open-button,
.menu-item:hover,
.menu-item:focus {
  background-color: rgb(var(--dark-primary));
  outline: 0;
}

.menu-open-button {
  display: flex;
  z-index: 2;
}

.menu-open-button::before {
  content: "";
  animation: ring-1 5s linear infinite forwards;
  position: fixed;
  bottom: 1rem;
  right: 2rem;
  width: 4rem;
  height: 4rem;
  background-color: rgb(var(--primary));
  border-radius: 50%;
  z-index: -10;
}

.menu-open-button::after {
  content: "";
  animation: ring-2 5s linear infinite both;
  position: fixed;
  bottom: 1rem;
  right: 2rem;
  width: 4rem;
  height: 4rem;
  background-color: rgb(var(--primary));
  border-radius: 50%;
  z-index: -10;
}

#menu-open:checked + .menu-open-button::before {
  background-color: rgb(var(--dark-primary));
}

#menu-open:checked + .menu-open-button::after {
  background-color: rgb(var(--dark-primary));
}

.menu-item {
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.icon {
  width: 24px;
  height: 24px;
}

.icon svg {
  display: unset;
}

.hamburger {
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hamburger-line {
  width: 32px;
  height: 3px;
  background-color: rgb(var(--light));
  border-radius: 4px;
  transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
}

.hamburger-line:nth-child(1) {
  transform: translateY(-7px);
}

.hamburger-line:nth-child(3) {
  transform: translateY(7px);
}

#menu-open:checked + .menu-open-button .hamburger-line:nth-child(1) {
  transform: translateY(3px) rotate(45deg);
}

#menu-open:checked + .menu-open-button .hamburger-line:nth-child(2) {
  opacity: 0;
}

#menu-open:checked + .menu-open-button .hamburger-line:nth-child(3) {
  transform: translateY(-3px) rotate(-45deg);
}

.menu-item-1 {
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transform: translateY(-810%) scale(0);
  transition: all 100ms ease-in-out;
}

.menu-item-2 {
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transform: translateY(-680%) scale(0);
  transition: all 100ms ease-in-out;
}

.menu-item-3 {
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transform: translateY(-550%) scale(0);
  transition: all 100ms 100ms ease-in-out;
}

.menu-item-4 {
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transform: translateY(-420%) scale(0);
  transition: all 100ms 200ms ease-in-out;
}

.menu-item-5 {
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transform: translateY(-290%) scale(0);
  transition: all 100ms 300ms ease-in-out;
}

.menu-item-6 {
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transform: translateY(-160%) scale(0);
  transition: all 100ms 300ms ease-in-out;
}

#menu-open:checked ~ .menu-item-1,
.menu-open-button:focus .menu-item-1 {
  opacity: 1;
  transform: translateY(-810%) scale(1);
  transition: transform 100ms 400ms ease-in-out, color 100ms linear;
}

#menu-open:checked ~ .menu-item-2,
.menu-open-button:focus .menu-item-2 {
  opacity: 1;
  transform: translateY(-680%) scale(1);
  transition: transform 100ms 300ms ease-in-out, color 100ms linear;
}

#menu-open:checked ~ .menu-item-3,
.menu-open-button:focus .menu-item-3 {
  opacity: 1;
  transform: translateY(-550%) scale(1);
  transition: transform 100ms 200ms ease-in-out, color 100ms linear;
}

#menu-open:checked ~ .menu-item-4,
.menu-open-button:focus .menu-item-4 {
  opacity: 1;
  transform: translateY(-420%) scale(1);
  transition: transform 100ms 100ms ease-in-out, color 100ms linear;
}

#menu-open:checked ~ .menu-item-5,
.menu-open-button:focus .menu-item-5 {
  opacity: 1;
  transform: translateY(-290%) scale(1);
  transition: transform 100ms ease-in-out, color 100ms linear;
}

#menu-open:checked ~ .menu-item-6,
.menu-open-button:focus .menu-item-6 {
  opacity: 1;
  transform: translateY(-160%) scale(1);
  transition: transform 100ms ease-in-out, color 100ms linear;
}

.menu-item[class*="hint--"] {
  @apply absolute;
}

@media (min-width: 768px) {
  .menu {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
  }

  .menu-open-button::before {
    position: fixed;
    bottom: 2rem;
    right: 3rem;
  }

  .menu-open-button::after {
    position: fixed;
    bottom: 2rem;
    right: 3rem;
  }
}

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

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

/* Modal de ajuda */
/* modal open|close controller */
.help-modal {
  @apply w-11/12 bg-gray-100 p-0 rounded-md md:w-3/4 xl:w-1/2;
  box-shadow: var(--bg-gray-50-shadow-box);
}

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

.help-modal-close {
  @apply text-[2rem] leading-none px-2 cursor-pointer md:text-5xl md:px-4;
}

.help-modal-nav {
  @apply flex justify-between my-2 px-4 md:px-8;
}

[class*="-slide"] {
  @apply bg-accent text-light text-[2rem] leading-none pb-1 px-3 rounded-md cursor-pointer md:text-5xl md:pb-2 md:px-5;
}

.help-modal-nav > .disabled {
  @apply bg-gray-300 text-gray-400 cursor-not-allowed;
}

.help-modal-content {
  @apply w-full pb-8 px-4 md:pb-12 md:px-8;
}

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

/* Dark Mode */
html.dark {
  /* Variáveis */
  --primary: 0 127 206;
  --background: 13 13 13;
  --text: 249 250 251;
  --light: 240 240 240;
  --accent: 2 182 108;
  --dark-accent: 0 99 28;
  --error: 178 41 41;
  --success: 28 116 63;
  background-color: rgb(var(--background));
}

html.dark * {
  box-shadow: unset;
  filter: unset;
}

/* Propriedades especiais */
/* Change Autocomplete styles in Chrome*/
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark textarea:-webkit-autofill,
html.dark textarea:-webkit-autofill:hover,
html.dark textarea:-webkit-autofill:focus,
html.dark select:-webkit-autofill,
html.dark select:-webkit-autofill:hover,
html.dark select:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--text));
  transition: background-color 5000s ease-in-out 0s;
}

html.dark ::selection {
  @apply bg-light text-primary;
}

/* Seções */
html.dark header {
  background-color: rgb(5, 77, 165);
}

html.dark footer {
  @apply border-t-gray-700;
}

html.dark .success {
  @apply bg-green-100;
  color: rgb(var(--success));
  border: 1px solid rgb(var(--success));
}

html.dark .error {
  @apply bg-red-200;
  color: rgb(var(--error));
  border: 1px solid rgb(var(--error));
}

/* Itens */
/* Títulos */
html.dark h1 + small {
  @apply text-gray-400;
}

/* Forms */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="search"],
html.dark select,
html.dark textarea {
  @apply text-primary bg-gray-900 border border-gray-700 focus:bg-gray-700 focus:text-text focus:border-primary 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;
}

html.dark .required {
  color: rgb(var(--error));
}

html.dark .validation-error {
  @apply bg-red-200;
  color: rgb(var(--error));
  border: 1px solid rgb(var(--error));
}

html.dark .intercalado {
  @apply bg-gray-700;
}

/* Tables */
html.dark .tabulator-table {
  color: rgb(var(--text)) !important;
}

html.dark .tabulator-row-odd {
  @apply bg-gray-800 !important;
}

html.dark .tabulator-cell {
  @apply border-gray-600 !important;
}

html.dark .tabulator-row-even {
  @apply bg-gray-700 !important;
}

html.dark .inativa > .tabulator-cell {
  @apply text-gray-400 line-through !important;
}

html.dark th.auditado {
  @apply bg-darkAccent;
}

html.dark .auditado {
  @apply bg-[#0A2E20];
}

/* Buttons */
html.dark .button-secondary:hover {
  @apply border-primary text-primary;
}

html.dark .button-tertiary:hover {
  @apply text-primary;
}

html.dark .limpa-busca:hover {
  background: url("../img/delete-dark-hover.svg") no-repeat center;
}

html.dark .senha-olho:hover {
  background: url("../img/eye-dark-hover.svg") no-repeat center;
}

html.dark .senha-olho-riscado:hover {
  background: url("../img/eye-off-dark-hover.svg") no-repeat center;
}

/* Page Load animation */
html.dark .loader-wrapper {
  @apply bg-gray-900;
}

/* Modal de saída e de ajuda */
html.dark .logout-modal,
html.dark .help-modal {
  background-color: rgb(var(--background));
  color: rgb(var(--text));
}

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