deyvisonwanderley
095f041891
- Refactored CSS styles to utilize HSL color values for better theme adaptability. - Added custom light and dark themes with comprehensive variable definitions to ensure consistent styling across the application. - Implemented a mechanism to force CSS variable updates, ensuring that custom themes are applied correctly during runtime.
480 lines
11 KiB
CSS
480 lines
11 KiB
CSS
@import "tailwindcss";
|
|
@plugin "daisyui";
|
|
|
|
/* FullCalendar CSS - v6 não exporta CSS separado, estilos são aplicados via JavaScript */
|
|
|
|
/* Estilo padrão dos botões - mesmo estilo do sidebar */
|
|
.btn-standard {
|
|
@apply font-medium flex items-center justify-center gap-2 text-center p-3 rounded-xl border border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content hover:text-white active:text-white transition-colors;
|
|
}
|
|
|
|
/* Sobrescrever estilos DaisyUI para seguir o padrão */
|
|
.btn-primary {
|
|
@apply font-medium flex items-center justify-center gap-2 text-center px-4 py-2 rounded-xl border border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content hover:text-white active:text-white transition-colors;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply font-medium flex items-center justify-center gap-2 text-center px-4 py-2 rounded-xl border border-base-300 bg-base-100 hover:bg-base-200 active:bg-base-300 text-base-content transition-colors;
|
|
}
|
|
|
|
.btn-error {
|
|
@apply font-medium flex items-center justify-center gap-2 text-center px-4 py-2 rounded-xl border border-error bg-base-100 hover:bg-error/60 active:bg-error text-error hover:text-white active:text-white transition-colors;
|
|
}
|
|
|
|
:where(.card, .card-hover) {
|
|
position: relative;
|
|
overflow: hidden;
|
|
transform: translateY(0);
|
|
transition: transform 220ms ease, box-shadow 220ms ease;
|
|
}
|
|
|
|
:where(.card, .card-hover)::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -2px;
|
|
border-radius: 1.15rem;
|
|
box-shadow:
|
|
0 0 0 1px hsl(var(--bc) / 0.04),
|
|
0 14px 32px -22px hsl(var(--bc) / 0.45),
|
|
0 6px 18px -16px hsl(var(--p) / 0.35);
|
|
opacity: 0.55;
|
|
transition: opacity 220ms ease, transform 220ms ease;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
:where(.card, .card-hover)::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 1rem;
|
|
background: linear-gradient(135deg, hsl(var(--p) / 0.12), hsl(var(--s) / 0.12));
|
|
opacity: 0;
|
|
transform: scale(0.96);
|
|
transition: opacity 220ms ease, transform 220ms ease;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
:where(.card, .card-hover):hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 20px 45px -20px hsl(var(--bc) / 0.35);
|
|
}
|
|
|
|
:where(.card, .card-hover):hover::before {
|
|
opacity: 0.9;
|
|
transform: scale(1);
|
|
}
|
|
|
|
:where(.card, .card-hover):hover::after {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
:where(.card, .card-hover) > * {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Tema Aqua (padrão roxo/azul) - customizado para garantir funcionamento */
|
|
html[data-theme="aqua"],
|
|
html[data-theme="aqua"] body,
|
|
[data-theme="aqua"] {
|
|
color-scheme: light;
|
|
--p: 217 91% 60%;
|
|
--pf: 217 91% 50%;
|
|
--pc: 0 0% 100%;
|
|
--s: 217 91% 60%;
|
|
--sf: 217 91% 50%;
|
|
--sc: 0 0% 100%;
|
|
--a: 217 91% 60%;
|
|
--af: 217 91% 50%;
|
|
--ac: 0 0% 100%;
|
|
--n: 217 20% 17%;
|
|
--nf: 217 20% 10%;
|
|
--nc: 0 0% 100%;
|
|
--b1: 0 0% 100%;
|
|
--b2: 217 20% 95%;
|
|
--b3: 217 20% 90%;
|
|
--bc: 217 20% 17%;
|
|
--in: 217 91% 60%;
|
|
--inc: 0 0% 100%;
|
|
--su: 142 76% 36%;
|
|
--suc: 0 0% 100%;
|
|
--wa: 38 92% 50%;
|
|
--wac: 0 0% 100%;
|
|
--er: 0 84% 60%;
|
|
--erc: 0 0% 100%;
|
|
--rounded-box: 1rem;
|
|
--rounded-btn: 0.5rem;
|
|
--rounded-badge: 1.9rem;
|
|
--animation-btn: 0.25s;
|
|
--animation-input: 0.2s;
|
|
--btn-focus-scale: 0.95;
|
|
--border-btn: 1px;
|
|
--tab-border: 1px;
|
|
--tab-radius: 0.5rem;
|
|
}
|
|
|
|
/* Temas customizados para SGSE - Azul */
|
|
html[data-theme="sgse-blue"],
|
|
html[data-theme="sgse-blue"] body,
|
|
[data-theme="sgse-blue"] {
|
|
color-scheme: light;
|
|
--p: 217 91% 60%;
|
|
--pf: 217 91% 50%;
|
|
--pc: 0 0% 100%;
|
|
--s: 217 91% 60%;
|
|
--sf: 217 91% 50%;
|
|
--sc: 0 0% 100%;
|
|
--a: 217 91% 60%;
|
|
--af: 217 91% 50%;
|
|
--ac: 0 0% 100%;
|
|
--n: 217 20% 17%;
|
|
--nf: 217 20% 10%;
|
|
--nc: 0 0% 100%;
|
|
--b1: 0 0% 100%;
|
|
--b2: 217 20% 95%;
|
|
--b3: 217 20% 90%;
|
|
--bc: 217 20% 17%;
|
|
--in: 217 91% 60%;
|
|
--inc: 0 0% 100%;
|
|
--su: 142 76% 36%;
|
|
--suc: 0 0% 100%;
|
|
--wa: 38 92% 50%;
|
|
--wac: 0 0% 100%;
|
|
--er: 0 84% 60%;
|
|
--erc: 0 0% 100%;
|
|
--rounded-box: 1rem;
|
|
--rounded-btn: 0.5rem;
|
|
--rounded-badge: 1.9rem;
|
|
--animation-btn: 0.25s;
|
|
--animation-input: 0.2s;
|
|
--btn-focus-scale: 0.95;
|
|
--border-btn: 1px;
|
|
--tab-border: 1px;
|
|
--tab-radius: 0.5rem;
|
|
}
|
|
|
|
/* Garantir que todas as variáveis CSS sejam aplicadas em todos os elementos */
|
|
html[data-theme] {
|
|
color-scheme: var(--color-scheme, light);
|
|
}
|
|
|
|
html[data-theme] * {
|
|
color-scheme: inherit;
|
|
}
|
|
|
|
html[data-theme="sgse-green"],
|
|
html[data-theme="sgse-green"] body,
|
|
[data-theme="sgse-green"] {
|
|
color-scheme: light;
|
|
--p: 142 76% 36%;
|
|
--pf: 142 76% 26%;
|
|
--pc: 0 0% 100%;
|
|
--s: 142 76% 36%;
|
|
--sf: 142 76% 26%;
|
|
--sc: 0 0% 100%;
|
|
--a: 142 76% 36%;
|
|
--af: 142 76% 26%;
|
|
--ac: 0 0% 100%;
|
|
--n: 142 20% 17%;
|
|
--nf: 142 20% 10%;
|
|
--nc: 0 0% 100%;
|
|
--b1: 0 0% 100%;
|
|
--b2: 142 20% 95%;
|
|
--b3: 142 20% 90%;
|
|
--bc: 142 20% 17%;
|
|
--in: 142 76% 36%;
|
|
--inc: 0 0% 100%;
|
|
--su: 142 76% 36%;
|
|
--suc: 0 0% 100%;
|
|
--wa: 38 92% 50%;
|
|
--wac: 0 0% 100%;
|
|
--er: 0 84% 60%;
|
|
--erc: 0 0% 100%;
|
|
--rounded-box: 1rem;
|
|
--rounded-btn: 0.5rem;
|
|
--rounded-badge: 1.9rem;
|
|
--animation-btn: 0.25s;
|
|
--animation-input: 0.2s;
|
|
--btn-focus-scale: 0.95;
|
|
--border-btn: 1px;
|
|
--tab-border: 1px;
|
|
--tab-radius: 0.5rem;
|
|
}
|
|
|
|
html[data-theme="sgse-orange"],
|
|
html[data-theme="sgse-orange"] body,
|
|
[data-theme="sgse-orange"] {
|
|
color-scheme: light;
|
|
--p: 25 95% 53%;
|
|
--pf: 25 95% 43%;
|
|
--pc: 0 0% 100%;
|
|
--s: 25 95% 53%;
|
|
--sf: 25 95% 43%;
|
|
--sc: 0 0% 100%;
|
|
--a: 25 95% 53%;
|
|
--af: 25 95% 43%;
|
|
--ac: 0 0% 100%;
|
|
--n: 25 20% 17%;
|
|
--nf: 25 20% 10%;
|
|
--nc: 0 0% 100%;
|
|
--b1: 0 0% 100%;
|
|
--b2: 25 20% 95%;
|
|
--b3: 25 20% 90%;
|
|
--bc: 25 20% 17%;
|
|
--in: 25 95% 53%;
|
|
--inc: 0 0% 100%;
|
|
--su: 142 76% 36%;
|
|
--suc: 0 0% 100%;
|
|
--wa: 38 92% 50%;
|
|
--wac: 0 0% 100%;
|
|
--er: 0 84% 60%;
|
|
--erc: 0 0% 100%;
|
|
--rounded-box: 1rem;
|
|
--rounded-btn: 0.5rem;
|
|
--rounded-badge: 1.9rem;
|
|
--animation-btn: 0.25s;
|
|
--animation-input: 0.2s;
|
|
--btn-focus-scale: 0.95;
|
|
--border-btn: 1px;
|
|
--tab-border: 1px;
|
|
--tab-radius: 0.5rem;
|
|
}
|
|
|
|
html[data-theme="sgse-red"],
|
|
html[data-theme="sgse-red"] body,
|
|
[data-theme="sgse-red"] {
|
|
color-scheme: light;
|
|
--p: 0 84% 60%;
|
|
--pf: 0 84% 50%;
|
|
--pc: 0 0% 100%;
|
|
--s: 0 84% 60%;
|
|
--sf: 0 84% 50%;
|
|
--sc: 0 0% 100%;
|
|
--a: 0 84% 60%;
|
|
--af: 0 84% 50%;
|
|
--ac: 0 0% 100%;
|
|
--n: 0 20% 17%;
|
|
--nf: 0 20% 10%;
|
|
--nc: 0 0% 100%;
|
|
--b1: 0 0% 100%;
|
|
--b2: 0 20% 95%;
|
|
--b3: 0 20% 90%;
|
|
--bc: 0 20% 17%;
|
|
--in: 0 84% 60%;
|
|
--inc: 0 0% 100%;
|
|
--su: 142 76% 36%;
|
|
--suc: 0 0% 100%;
|
|
--wa: 38 92% 50%;
|
|
--wac: 0 0% 100%;
|
|
--er: 0 84% 60%;
|
|
--erc: 0 0% 100%;
|
|
--rounded-box: 1rem;
|
|
--rounded-btn: 0.5rem;
|
|
--rounded-badge: 1.9rem;
|
|
--animation-btn: 0.25s;
|
|
--animation-input: 0.2s;
|
|
--btn-focus-scale: 0.95;
|
|
--border-btn: 1px;
|
|
--tab-border: 1px;
|
|
--tab-radius: 0.5rem;
|
|
}
|
|
|
|
html[data-theme="sgse-pink"],
|
|
html[data-theme="sgse-pink"] body,
|
|
[data-theme="sgse-pink"] {
|
|
color-scheme: light;
|
|
--p: 330 81% 60%;
|
|
--pf: 330 81% 50%;
|
|
--pc: 0 0% 100%;
|
|
--s: 330 81% 60%;
|
|
--sf: 330 81% 50%;
|
|
--sc: 0 0% 100%;
|
|
--a: 330 81% 60%;
|
|
--af: 330 81% 50%;
|
|
--ac: 0 0% 100%;
|
|
--n: 330 20% 17%;
|
|
--nf: 330 20% 10%;
|
|
--nc: 0 0% 100%;
|
|
--b1: 0 0% 100%;
|
|
--b2: 330 20% 95%;
|
|
--b3: 330 20% 90%;
|
|
--bc: 330 20% 17%;
|
|
--in: 330 81% 60%;
|
|
--inc: 0 0% 100%;
|
|
--su: 142 76% 36%;
|
|
--suc: 0 0% 100%;
|
|
--wa: 38 92% 50%;
|
|
--wac: 0 0% 100%;
|
|
--er: 0 84% 60%;
|
|
--erc: 0 0% 100%;
|
|
--rounded-box: 1rem;
|
|
--rounded-btn: 0.5rem;
|
|
--rounded-badge: 1.9rem;
|
|
--animation-btn: 0.25s;
|
|
--animation-input: 0.2s;
|
|
--btn-focus-scale: 0.95;
|
|
--border-btn: 1px;
|
|
--tab-border: 1px;
|
|
--tab-radius: 0.5rem;
|
|
}
|
|
|
|
html[data-theme="sgse-teal"],
|
|
html[data-theme="sgse-teal"] body,
|
|
[data-theme="sgse-teal"] {
|
|
color-scheme: light;
|
|
--p: 173 80% 40%;
|
|
--pf: 173 80% 30%;
|
|
--pc: 0 0% 100%;
|
|
--s: 173 80% 40%;
|
|
--sf: 173 80% 30%;
|
|
--sc: 0 0% 100%;
|
|
--a: 173 80% 40%;
|
|
--af: 173 80% 30%;
|
|
--ac: 0 0% 100%;
|
|
--n: 173 20% 17%;
|
|
--nf: 173 20% 10%;
|
|
--nc: 0 0% 100%;
|
|
--b1: 0 0% 100%;
|
|
--b2: 173 20% 95%;
|
|
--b3: 173 20% 90%;
|
|
--bc: 173 20% 17%;
|
|
--in: 173 80% 40%;
|
|
--inc: 0 0% 100%;
|
|
--su: 142 76% 36%;
|
|
--suc: 0 0% 100%;
|
|
--wa: 38 92% 50%;
|
|
--wac: 0 0% 100%;
|
|
--er: 0 84% 60%;
|
|
--erc: 0 0% 100%;
|
|
--rounded-box: 1rem;
|
|
--rounded-btn: 0.5rem;
|
|
--rounded-badge: 1.9rem;
|
|
--animation-btn: 0.25s;
|
|
--animation-input: 0.2s;
|
|
--btn-focus-scale: 0.95;
|
|
--border-btn: 1px;
|
|
--tab-border: 1px;
|
|
--tab-radius: 0.5rem;
|
|
}
|
|
|
|
html[data-theme="sgse-corporate"],
|
|
html[data-theme="sgse-corporate"] body,
|
|
[data-theme="sgse-corporate"] {
|
|
color-scheme: dark;
|
|
--p: 217 91% 60%;
|
|
--pf: 217 91% 50%;
|
|
--pc: 0 0% 100%;
|
|
--s: 217 91% 60%;
|
|
--sf: 217 91% 50%;
|
|
--sc: 0 0% 100%;
|
|
--a: 217 91% 60%;
|
|
--af: 217 91% 50%;
|
|
--ac: 0 0% 100%;
|
|
--n: 217 30% 15%;
|
|
--nf: 217 30% 8%;
|
|
--nc: 0 0% 100%;
|
|
--b1: 217 30% 10%;
|
|
--b2: 217 30% 15%;
|
|
--b3: 217 30% 20%;
|
|
--bc: 217 10% 90%;
|
|
--in: 217 91% 60%;
|
|
--inc: 0 0% 100%;
|
|
--su: 142 76% 36%;
|
|
--suc: 0 0% 100%;
|
|
--wa: 38 92% 50%;
|
|
--wac: 0 0% 100%;
|
|
--er: 0 84% 60%;
|
|
--erc: 0 0% 100%;
|
|
--rounded-box: 1rem;
|
|
--rounded-btn: 0.5rem;
|
|
--rounded-badge: 1.9rem;
|
|
--animation-btn: 0.25s;
|
|
--animation-input: 0.2s;
|
|
--btn-focus-scale: 0.95;
|
|
--border-btn: 1px;
|
|
--tab-border: 1px;
|
|
--tab-radius: 0.5rem;
|
|
}
|
|
|
|
/* Tema Light customizado para garantir funcionamento completo */
|
|
html[data-theme="light"],
|
|
html[data-theme="light"] body,
|
|
[data-theme="light"] {
|
|
color-scheme: light;
|
|
--p: 217 91% 60%;
|
|
--pf: 217 91% 50%;
|
|
--pc: 0 0% 100%;
|
|
--s: 217 91% 60%;
|
|
--sf: 217 91% 50%;
|
|
--sc: 0 0% 100%;
|
|
--a: 217 91% 60%;
|
|
--af: 217 91% 50%;
|
|
--ac: 0 0% 100%;
|
|
--n: 217 20% 17%;
|
|
--nf: 217 20% 10%;
|
|
--nc: 0 0% 100%;
|
|
--b1: 0 0% 100%;
|
|
--b2: 217 20% 95%;
|
|
--b3: 217 20% 90%;
|
|
--bc: 217 20% 17%;
|
|
--in: 217 91% 60%;
|
|
--inc: 0 0% 100%;
|
|
--su: 142 76% 36%;
|
|
--suc: 0 0% 100%;
|
|
--wa: 38 92% 50%;
|
|
--wac: 0 0% 100%;
|
|
--er: 0 84% 60%;
|
|
--erc: 0 0% 100%;
|
|
--rounded-box: 1rem;
|
|
--rounded-btn: 0.5rem;
|
|
--rounded-badge: 1.9rem;
|
|
--animation-btn: 0.25s;
|
|
--animation-input: 0.2s;
|
|
--btn-focus-scale: 0.95;
|
|
--border-btn: 1px;
|
|
--tab-border: 1px;
|
|
--tab-radius: 0.5rem;
|
|
}
|
|
|
|
/* Tema Dark customizado para garantir funcionamento completo */
|
|
html[data-theme="dark"],
|
|
html[data-theme="dark"] body,
|
|
[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--p: 217 91% 60%;
|
|
--pf: 217 91% 50%;
|
|
--pc: 0 0% 100%;
|
|
--s: 217 91% 60%;
|
|
--sf: 217 91% 50%;
|
|
--sc: 0 0% 100%;
|
|
--a: 217 91% 60%;
|
|
--af: 217 91% 50%;
|
|
--ac: 0 0% 100%;
|
|
--n: 217 30% 15%;
|
|
--nf: 217 30% 8%;
|
|
--nc: 0 0% 100%;
|
|
--b1: 217 30% 10%;
|
|
--b2: 217 30% 15%;
|
|
--b3: 217 30% 20%;
|
|
--bc: 217 10% 90%;
|
|
--in: 217 91% 60%;
|
|
--inc: 0 0% 100%;
|
|
--su: 142 76% 36%;
|
|
--suc: 0 0% 100%;
|
|
--wa: 38 92% 50%;
|
|
--wac: 0 0% 100%;
|
|
--er: 0 84% 60%;
|
|
--erc: 0 0% 100%;
|
|
--rounded-box: 1rem;
|
|
--rounded-btn: 0.5rem;
|
|
--rounded-badge: 1.9rem;
|
|
--animation-btn: 0.25s;
|
|
--animation-input: 0.2s;
|
|
--btn-focus-scale: 0.95;
|
|
--border-btn: 1px;
|
|
--tab-border: 1px;
|
|
--tab-radius: 0.5rem;
|
|
} |