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: 4 53 114;
  --text: 68 70 80;
  --light: 240 240 240;
  --background: 224 224 224;
  --shadow-dark: #8d8d8d;
  --shadow-light: #f5f5f5;
}

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

::placeholder {
  @apply text-sm text-gray-500 !important;
}

/* 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,
*:focus-within,
*:focus-visible {
  @apply outline-none;
}

html {
  @apply text-base scroll-smooth h-full;
  font-family: "Nunito Sans", sans-serif;
  background-color: rgb(var(--background));
  color: rgb(var(--text));
}

/* 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 rounded-md;
  background-color: rgb(var(--background));
  color: rgb(var(--text));
}

dialog::backdrop {
  @apply bg-gray-600/90 backdrop-blur-sm;
}

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

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: 12px 12px 12px var(--shadow-dark),
    -12px -12px 12px var(--shadow-light);
}

.toast {
  @apply absolute top-[15%] left-0 right-0 w-[300px] text-base mx-auto rounded-md p-4 mb-4 backdrop-blur-sm z-50 sm:w-[340px];
  box-shadow: 16px 16px 16px var(--shadow-dark);
}

.success {
  @apply text-green-900 bg-green-200/50 border border-green-300;
  @apply sm:bg-green-300/50;
}

.error {
  @apply text-red-900 bg-red-200/50 border border-red-300;
  @apply sm:bg-red-300/50;
}

.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: "Nunito Sans", sans-serif;
  @apply text-center tracking-wide;
}

h1 {
  @apply text-4xl font-bold sm:text-6xl;
}

h1 + small {
  @apply text-base text-center text-gray-500 sm:text-xl;
}

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 var(--shadow-dark), -2px -2px 4px var(--shadow-light);
  box-shadow: inset 10px 10px 16px var(--shadow-dark),
    inset -10px -10px 16px var(--shadow-light);
}

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

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

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

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

.link:hover,
.link:active,
.link:focus {
  @apply ring-0;
  box-shadow: inset 6px 6px 10px var(--shadow-dark),
    inset -6px -6px 10px var(--shadow-light);
}

/* 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:focus:text-red-900;
  background-color: rgb(var(--background));
  box-shadow: inset 8px 8px 13px var(--shadow-dark),
    inset -8px -8px 13px var(--shadow-light);
}

select:focus {
  box-shadow: inset 8px 8px 13px var(--shadow-dark),
    inset -8px -8px 13px var(--shadow-light);
}

.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 10px var(--shadow-dark),
    inset -6px -6px 10px var(--shadow-light);
}

/* Tables */
#tabulatorTable {
  box-shadow: 10px 10px 10px var(--shadow-dark),
    -10px -10px 10px var(--shadow-light);
}

#tabulatorTable:empty::before {
  content: "";
  background: url("../img/SEC_logo.webp") no-repeat center;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  animation: tableLoader 1.3s ease-in-out infinite both;
}

@keyframes tableLoader {
  0% {
    background-size: 80px;
    opacity: 0.8;
  }
  80% {
    background-size: 480px;
    opacity: 0;
  }
  100% {
    background-size: 880px;
    opacity: 0;
  }
}

.tabulator {
  @apply w-full tracking-wide select-none border-0 bg-transparent rounded-md !important;
}

@media (min-width: 640px) {
  .tabulator {
    @apply text-base !important;
  }

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

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

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

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

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

.tabulator-footer {
  @apply text-xs !important;
  background-color: rgb(var(--background)) !important;
  color: rgb(var(--primary)) !important;
}

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

.tabulator-row-even {
  background-color: rgb(var(--background)) !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 10px var(--shadow-dark),
    inset -6px -6px 10px var(--shadow-light);
}

.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 5px var(--shadow-dark), -3px -3px 5px var(--shadow-light);
}

.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 6px var(--shadow-dark), -6px -6px 6px var(--shadow-light);
}

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

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

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

.button-tertiary:hover {
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
}

.button:active,
.button:focus,
.button:focus-within,
.button:focus-visible {
  @apply text-primary;
  background: rgb(var(--background)) !important;
  box-shadow: inset 6px 6px 10px var(--shadow-dark),
    inset -6px -6px 10px var(--shadow-light);
}

.button:disabled,
.button:disabled:hover {
  @apply text-gray-500 cursor-not-allowed;
  background-color: rgb(var(--background));
  box-shadow: inset 6px 6px 10px var(--shadow-dark),
    inset -6px -6px 10px var(--shadow-light);
}

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

.img-filter {
  filter: drop-shadow(3px 3px 6px var(--shadow-dark))
    drop-shadow(-3px -3px 6px var(--shadow-light));
}

/* Page Load animation */
.loader-wrapper {
  @apply flex justify-center items-center fixed top-[-50vh] left-[-50vw] w-[200vw] h-[200vh] rounded-[50%] filter backdrop-blur-[2px] z-[1000];
  background-color: rgb(var(--background));
}

.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] py-4 px-8;
}

/* Gráficos */
#dashboardChart,
#chart {
  filter: drop-shadow(3px 3px 6px var(--shadow-dark))
    drop-shadow(-3px -3px 6px var(--shadow-light));
}

/* 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 {
  border-radius: 50%;
  background-color: rgb(var(--primary));
  cursor: pointer;
  justify-content: center;
  align-items: center;
  box-shadow: 6px 6px 10px var(--shadow-dark);
}

.menu-open-button {
  width: 4rem;
  height: 4rem;
  display: flex;
  z-index: 2;
  animation: pulse 3s infinite;
  transition: all 0.5s ease;
}

.menu-item {
  bottom: 0;
  z-index: 1;
  text-align: center;
  padding-block: 0.7rem;
}

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

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

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--primary));
  }
  60% {
    box-shadow: 0 0 0 20px rgb(var(--primary) / 0%);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(var(--primary) / 0%);
  }
}

/* Modal de ajuda */
/* modal open|close controller */
.help-modal {
  @apply w-11/12 p-0 md:w-3/4 xl:w-1/2;
}

.help-modal-close {
  @apply bg-red-400 text-4xl leading-none mb-2 px-2 cursor-pointer rounded-bl-md md:text-5xl md:mb-4 md:px-4 md:pb-1;
}

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

[class*="-slide"] {
  @apply bg-primary text-light text-4xl leading-none pb-1 px-4 rounded-md cursor-pointer md:text-5xl md:pb-2 md:px-5;
  box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 8px var(--shadow-light);
}

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

/* Dark Mode */
html.dark {
  /* Variáveis */
  --primary: 0 127 206;
  --dark-primary: 0 88 142;
  --text: 166 166 171;
  --background: 26 26 26;
  --shadow-dark: #101010;
  --shadow-light: #242424;
}

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

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

/* Seções */
html.dark .success {
  @apply text-green-100 bg-green-800/50 border-green-700;
}

html.dark .error {
  @apply text-red-100 bg-red-800/50 border-red-700;
}

/* Itens */
/* 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 invalid:text-red-100 invalid:focus:text-red-100;
}

html.dark .validation-error {
  @apply text-red-100 bg-red-800/50;
  box-shadow: inset 6px 6px 10px #471414, inset -6px -6px 10px #611c1c;
}

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

html.dark .tabulator-header,
html.dark .tabulator-col,
html.dark .tabulator-col-group-cols {
  @apply border-text/50 !important;
}

html.dark .tabulator-row-odd {
  @apply bg-[#3e3e3f] !important;
}

html.dark .tabulator-cell {
  @apply border-text/10 !important;
}

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

/* Toggle */
html.dark .switch-toggle input[type="checkbox"] + label::before {
  background: linear-gradient(145deg, #1c1c1c, #171717);
}

html.dark .switch-toggle input[type="checkbox"]:checked + label::before {
  background: linear-gradient(145deg, #0088dc, #0072b9);
}

/* Buttons */
html.dark .button-primary {
  background: linear-gradient(145deg, #0088dc, #0072b9);
}

html.dark .button-primary:hover {
  background: linear-gradient(145deg, #0072b9, #0088dc);
}

html.dark .button-tertiary {
  background: linear-gradient(145deg, #1c1c1c, #171717);
}

html.dark .button-tertiary:hover {
  background: linear-gradient(145deg, #171717, #1c1c1c);
}

html.dark .button:active,
html.dark .button:focus {
  background: rgb(var(--background));
}

html.dark #senha-olho {
  @apply shadow-none;
}

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