diff --git a/src/css/sigpro.css b/src/css/sigpro.css index d0c0935..cc49e2f 100644 --- a/src/css/sigpro.css +++ b/src/css/sigpro.css @@ -1,3 +1,96 @@ @import "tailwindcss"; @plugin "daisyui"; -@plugin "@iconify/tailwind4"; \ No newline at end of file +@plugin "@iconify/tailwind4"; + +/* join join-vertical lg:join-horizontal divider divider-horizontal validator validator-hint glass */ + +@plugin "daisyui/theme" { + name: "light"; + default: true; + prefersdark: false; + color-scheme: "light"; + --color-base-100: oklch(100% 0 0); + --color-base-200: oklch(98% 0 0); + --color-base-300: oklch(92% 0 0); + --color-base-content: oklch(25% 0.006 285); + --color-primary: oklch(25% 0.006 285); + --color-primary-content: oklch(98% 0 0); + --color-secondary: oklch(55% 0.046 257.417); + --color-secondary-content: oklch(98% 0 0); + --color-accent: oklch(96% 0 0); + --color-accent-content: oklch(25% 0.006 285); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(74% 0.16 232); + --color-success: oklch(62% 0.17 163); + --color-warning: oklch(82% 0.18 84); + --color-error: oklch(60% 0.25 27); + --radius-selector: 0.5rem; + --radius-field: 0.4rem; + --radius-box: 0.5rem; + --border: 1px; +} + +@plugin "daisyui/theme" { + name: "dark"; + default: false; + prefersdark: true; + color-scheme: "dark"; + --color-base-100: oklch(15% 0.005 285.823); + --color-base-200: oklch(20% 0.005 285.823); + --color-base-300: oklch(30% 0.005 285.823); + --color-base-content: oklch(92% 0.004 286.32); + --color-primary: oklch(98% 0 0); + --color-primary-content: oklch(15% 0 0); + --color-secondary: oklch(65% 0.046 257.417); + --color-secondary-content: oklch(15% 0.005 285.823); + --color-accent: oklch(25% 0 0); + --color-accent-content: oklch(98% 0 0); + --color-neutral: oklch(92% 0.004 286.32); + --color-neutral-content: oklch(14% 0.005 285.823); + --color-info: oklch(70% 0.1 230); + --color-success: oklch(65% 0.15 160); + --color-warning: oklch(85% 0.15 90); + --color-error: oklch(55% 0.2 27); + --radius-selector: 0.5rem; + --radius-field: 0.4rem; + --radius-box: 0.5rem; + --border: 1px; +} + +/* Agrupamos los selectores normales de CSS */ +.input, .select, .textarea { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + + &:focus, + &:focus-within { + outline: 2px solid transparent !important; + outline-offset: 2px !important; + } + + &:hover:not(:focus) { + background-color: oklch(from var(--color-base-100) calc(l - 0.03) c h); + } + + &:focus { + --focus-color: var(--color-primary); + + /* Selectores que detectan la variante de color sin importar el prefijo */ + &[class*="-secondary"] { --focus-color: var(--color-secondary); } + &[class*="-accent"] { --focus-color: var(--color-accent); } + &[class*="-neutral"] { --focus-color: var(--color-neutral); } + &[class*="-ghost"] { --focus-color: var(--color-base-content); } + &[class*="-info"] { --focus-color: var(--color-info); } + &[class*="-success"] { --focus-color: var(--color-success); } + &[class*="-warning"] { --focus-color: var(--color-warning); } + &[class*="-error"] { --focus-color: var(--color-error); } + + background-color: oklch(from var(--focus-color) l c h / 0.05); + border-color: var(--focus-color); + box-shadow: 0 0 0 4px oklch(from var(--focus-color) l c h / 0.25); + + &[class*="-ghost"] { + border-width: 1px; + } + } +}