natxocc
600c78510a
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
356 lines
11 KiB
CSS
356 lines
11 KiB
CSS
@import "tailwindcss";
|
|
@plugin "daisyui";
|
|
@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;
|
|
}
|
|
|
|
:root {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Agrupamos los selectores normales de CSS */
|
|
.input, .select, .textarea {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
&:focus,
|
|
&:focus-within {
|
|
outline: 1px solid transparent !important;
|
|
outline-offset: 1px !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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.floating-label span {
|
|
color: oklch(30% 0.01 260); /* Gris más oscuro (30% es más oscuro que 45%) */
|
|
font-size: 1.1rem; /* text-base: más grande que 0.875rem */
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.floating-label:focus-within span {
|
|
color: oklch(25% 0.02 260); /* Aún más oscuro al enfocar */
|
|
font-size: 1.1rem; /* Mantiene el mismo tamaño */
|
|
}
|
|
|
|
.floating-label:has(input:not(:placeholder-shown)) span {
|
|
color: oklch(28% 0.01 260); /* Gris oscuro cuando tiene valor */
|
|
font-size: 1.1rem; /* Mantiene el mismo tamaño */
|
|
}
|
|
|
|
.collapse .collapse-content {
|
|
transform: scaleY(0);
|
|
transform-origin: top;
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
.collapse:has(input:checked) .collapse-content {
|
|
transform: scaleY(1);
|
|
height: auto;
|
|
opacity: 1;
|
|
}
|
|
|
|
.tab-content-inner {
|
|
animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transform-origin: top;
|
|
}
|
|
|
|
@keyframes tabFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scaleY(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
/* sigpro-ui daisyUI classes - extracted from components */
|
|
|
|
/* Accordion */
|
|
/* .input, .input-bordered, .input-ghost, .input-primary, .input-secondary, .input-accent, .input-info, .input-success, .input-warning, .input-error, .input-xs, .input-sm, .input-md, .input-lg, .floating-label, */
|
|
|
|
/* Alert */
|
|
/* .alert, .alert-info, .alert-success, .alert-warning, .alert-error, .alert-soft, .alert-outline, .alert-dash, */
|
|
/* .icon-[lucide--info], .icon-[lucide--check-circle], .icon-[lucide--alert-triangle], .icon-[lucide--alert-circle], */
|
|
|
|
/* Autocomplete */
|
|
/* .menu, .menu-dropdown, .menu-dropdown-show, */
|
|
|
|
/* Badge */
|
|
/* .badge, .badge-primary, .badge-secondary, .badge-accent, .badge-info, .badge-success, .badge-warning, .badge-error, .badge-outline, .badge-soft, .badge-dash, .badge-xs, .badge-sm, .badge-md, .badge-lg, */
|
|
|
|
/* Button */
|
|
/* .btn, .btn-primary, .btn-secondary, .btn-accent, .btn-ghost, .btn-info, .btn-success, .btn-warning, .btn-error, .btn-neutral, .btn-xs, .btn-sm, .btn-md, .btn-lg, .btn-xl, .btn-outline, .btn-soft, .btn-dash, .btn-link, .btn-circle, .btn-square, .btn-wide, .btn-block, .btn-active, .btn-disabled, */
|
|
|
|
/* Checkbox & Toggle */
|
|
/* .checkbox, .checkbox-primary, .checkbox-secondary, .checkbox-accent, .checkbox-info, .checkbox-success, .checkbox-warning, .checkbox-error, .checkbox-xs, .checkbox-sm, .checkbox-md, .checkbox-lg, .toggle, .toggle-primary, .toggle-secondary, .toggle-accent, .toggle-xs, .toggle-sm, .toggle-md, .toggle-lg, */
|
|
|
|
/* Colorpicker */
|
|
|
|
/* Datepicker */
|
|
/* .icon-[lucide--calendar], .icon-[lucide--chevrons-left], .icon-[lucide--chevron-left], .icon-[lucide--chevron-right], .icon-[lucide--chevrons-right], */
|
|
|
|
/* Drawer */
|
|
/* .drawer, .drawer-toggle, .drawer-content, .drawer-side, .drawer-overlay, */
|
|
|
|
/* Dropdown */
|
|
/* .dropdown, .dropdown-content, .dropdown-end, .dropdown-top, .dropdown-bottom, */
|
|
|
|
/* Fab */
|
|
/* .fab, */
|
|
|
|
/* Fieldset */
|
|
/* .fieldset, .fieldset-legend, */
|
|
|
|
/* Fileinput */
|
|
/* .icon-[lucide--upload], .icon-[lucide--x], */
|
|
|
|
/* Indicator */
|
|
/* .indicator, .indicator-item, */
|
|
|
|
/* Input */
|
|
/* .input, .input-bordered, .input-ghost, .input-primary, .input-secondary, .input-accent, .input-info, .input-success, .input-warning, .input-error, .input-xs, .input-sm, .input-md, .input-lg, .floating-label, */
|
|
/* .icon-[lucide--text], .icon-[lucide--lock], .icon-[lucide--calendar], .icon-[lucide--hash], .icon-[lucide--mail], .icon-[lucide--search], .icon-[lucide--phone], .icon-[lucide--link], .icon-[lucide--eye-off], .icon-[lucide--eye], */
|
|
|
|
/* List */
|
|
/* .list, .list-row, .list-bullet, .list-image, .list-none, */
|
|
|
|
/* Mask */
|
|
/* .mask, .mask-star, .mask-star-2, .mask-heart, .mask-circle, */
|
|
|
|
/* Menu */
|
|
/* .menu, .menu-dropdown, .menu-dropdown-show, */
|
|
|
|
/* Modal */
|
|
/* .modal, .modal-box, .modal-action, .modal-backdrop, .modal-open, .modal-middle, .modal-top, .modal-bottom, */
|
|
|
|
/* Navbar */
|
|
/* .navbar, .navbar-start, .navbar-center, .navbar-end, */
|
|
|
|
/* Radio */
|
|
/* .radio, .radio-primary, .radio-secondary, .radio-accent, .radio-info, .radio-success, .radio-warning, .radio-error, .radio-xs, .radio-sm, .radio-md, .radio-lg, */
|
|
|
|
/* Range */
|
|
/* .range, .range-primary, .range-secondary, .range-accent, .range-info, .range-success, .range-warning, .range-error, .range-xs, .range-sm, .range-md, .range-lg, */
|
|
|
|
/* Rating */
|
|
/* .rating, .rating-half, .rating-hidden, */
|
|
|
|
/* Select */
|
|
/* .select, .select-bordered, .select-primary, .select-secondary, .select-accent, .select-info, .select-success, .select-warning, .select-error, .select-xs, .select-sm, .select-md, .select-lg, */
|
|
|
|
/* Stack */
|
|
/* .stack, .stack-top, .stack-bottom, .stack-start, .stack-end, */
|
|
|
|
/* Stat */
|
|
/* .stat, .stat-figure, .stat-title, .stat-value, .stat-desc, */
|
|
|
|
/* Swap */
|
|
/* .swap, .swap-on, .swap-off, .swap-active, .swap-rotate, .swap-flip, .swap-indeterminate, */
|
|
|
|
/* Table */
|
|
/* .table, .table-zebra, .table-pin-rows, .table-pin-cols, .table-xs, .table-sm, .table-md, .table-lg, */
|
|
|
|
/* Tabs */
|
|
/* .tabs, .tabs-box, .tabs-lift, .tabs-border, .tab, .tab-content, */
|
|
/* .icon-[lucide--x], */
|
|
|
|
/* Timeline */
|
|
/* .timeline, .timeline-vertical, .timeline-horizontal, .timeline-compact, .timeline-start, .timeline-middle, .timeline-end, .timeline-box, */
|
|
/* .icon-[lucide--info], .icon-[lucide--check-circle], .icon-[lucide--alert-triangle], .icon-[lucide--alert-circle], */
|
|
|
|
/* Toast */
|
|
/* .icon-[lucide--x], */
|
|
|
|
/* Tooltip */
|
|
/* .tooltip, .tooltip-top, .tooltip-bottom, .tooltip-left, .tooltip-right, .tooltip-primary, .tooltip-secondary, .tooltip-accent, .tooltip-info, .tooltip-success, .tooltip-warning, .tooltip-error, .tooltip-open, */
|
|
|
|
/* ===== Tailwind ===== */
|
|
|
|
/* Background */
|
|
/* .bg-base-100, .bg-base-200, .bg-base-content, .bg-primary, .bg-primary/10, .bg-secondary, */
|
|
|
|
/* Border */
|
|
/* .border, .border-2, .border-base-300, .border-base-content/20, .border-dashed, .border-primary, */
|
|
|
|
/* Bottom */
|
|
/* .bottom-6, */
|
|
|
|
/* Cursor */
|
|
/* .cursor-pointer, */
|
|
|
|
/* Duration */
|
|
/* .duration-200, .duration-300, */
|
|
|
|
/* Flex */
|
|
/* .flex, .flex-1, .flex-col, .flex-col-reverse, */
|
|
|
|
/* Font */
|
|
/* .font-black, .font-bold, .font-medium, */
|
|
|
|
/* Grid */
|
|
/* .grid, .grid-cols-7, .grid-cols-8, */
|
|
|
|
/* Height */
|
|
/* .h-12, .min-h-full, */
|
|
|
|
/* Inset */
|
|
/* .inset-0, */
|
|
|
|
/* Items */
|
|
/* .items-center, .items-end, */
|
|
|
|
/* Justify */
|
|
/* .justify-between, .justify-start, */
|
|
|
|
/* Left */
|
|
/* .left-0, */
|
|
|
|
/* Loading */
|
|
/* .loading, .loading-spinner, */
|
|
|
|
/* Max Height */
|
|
/* .max-h-60, */
|
|
|
|
/* Opacity */
|
|
/* .opacity-0, .opacity-40, .opacity-50, .opacity-60, .opacity-70, */
|
|
|
|
/* Overflow */
|
|
/* .overflow-x-auto, .overflow-y-auto, */
|
|
|
|
/* Padding */
|
|
/* .p-2, .p-3, .p-4, .p-6, */
|
|
|
|
/* Pointer events */
|
|
/* .pointer-events-auto, .pointer-events-none, */
|
|
|
|
/* Position */
|
|
/* .absolute, .fixed, .relative, */
|
|
|
|
/* Right */
|
|
/* .right-0, */
|
|
|
|
/* Rounded */
|
|
/* .rounded-box, .rounded-lg, */
|
|
|
|
/* Shadow */
|
|
/* .shadow-2xl, .shadow-lg, .shadow-sm, .shadow-xl, */
|
|
|
|
/* Shrink */
|
|
/* .shrink-0, */
|
|
|
|
/* Space */
|
|
/* .space-y-1, */
|
|
|
|
/* Spacing */
|
|
/* .gap-1, .gap-2, .gap-3, */
|
|
|
|
/* Text */
|
|
/* .text-center, .text-error, .text-left, .text-lg, .text-primary-content, .text-right, .text-secondary, .text-sm, .text-xl, .text-xs, */
|
|
|
|
/* Text custom */
|
|
/* .text-[10px], */
|
|
|
|
/* Top */
|
|
/* .top-0, */
|
|
|
|
/* Transform */
|
|
/* .translate-x-10, */
|
|
|
|
/* Transition */
|
|
/* .transition-all, */
|
|
|
|
/* Truncate */
|
|
/* .truncate, */
|
|
|
|
/* Width */
|
|
/* .w-full, .w-52, .w-64, .w-80, */
|
|
|
|
/* Z-index */
|
|
/* .z-100, .z-50, .z-90, .z-[100], .z-[9999], */
|
|
|
|
/* Tailwind variants */
|
|
/* .hover:bg-base-200, */
|
|
|
|
/* Misc */
|
|
/* .active, .hr, .label, .label-text, */ |