/* * Shared Vetra date-picker skin. * Laydate still owns date/time selection and is portalled to ; this * stylesheet owns the visual contract for both the trigger and its popup. */ :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-date-picker, .layui-laydate.laydate-theme-vetra { --vtd-surface: var(--vt-surface, #ffffff); --vtd-raised: var(--vt-bg-raised, #fcfcfc); --vtd-soft: var(--vt-surface-3, #f7f7f7); --vtd-border: var(--vt-border, #e2e5e9); --vtd-text: var(--vt-text, #383838); --vtd-text-strong: var(--vt-text-strong, #171717); --vtd-muted: var(--vt-muted, #777777); --vtd-subtle: var(--vt-subtle, #a3a3a3); --vtd-info: var(--vt-info, #3b82f6); --vtd-radius: var(--vt-radius-sm, 8px); } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-date-picker { position: relative; display: block; min-width: 0; width: 220px; font: inherit; } /* The range is a layout shell only: it deliberately has no fixed height, so the pair is always sized by its two shared date controls. */ :is(body.vetra-user, body.vetra-admin, body.vetra-store) .table-search > .vetra-date-range { display: inline-flex; align-items: center; gap: 10px; width: auto !important; min-width: 0; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .table-search > .vetra-date-range > .vetra-date-picker { flex: 0 1 220px; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-date-picker > .vetra-date-picker__input { display: block; width: 100% !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 4px 38px 0 12px !important; color: var(--vtd-text) !important; border: 1px solid var(--vtd-border) !important; border-radius: var(--vtd-radius) !important; outline: 0 !important; background: var(--vtd-raised) !important; box-shadow: none !important; font: inherit; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-date-picker > .vetra-date-picker__input:hover:not(:disabled) { border-color: color-mix(in srgb, var(--vtd-text) 18%, var(--vtd-border)) !important; background: var(--vtd-surface) !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-date-picker:focus-within > .vetra-date-picker__input, :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-date-picker > .vetra-date-picker__input:focus { border-color: var(--vtd-info) !important; background: var(--vtd-surface) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vtd-info) 10%, transparent) !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-date-picker.is-disabled > .vetra-date-picker__input, :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-date-picker > .vetra-date-picker__input:disabled { color: var(--vtd-subtle) !important; cursor: not-allowed; opacity: .66; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-date-picker__label { position: absolute; z-index: 2; top: -7px; left: 9px; max-width: calc(100% - 18px); margin: 0 !important; padding: 0 4px; overflow: hidden; color: var(--vtd-subtle) !important; background: var(--vtd-surface) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 14px !important; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-date-picker:focus-within > .vetra-date-picker__label { color: var(--vtd-info) !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-date-picker__indicator { position: absolute; top: 50%; right: 10px; z-index: 1; color: var(--vtd-subtle) !important; font-size: 18px !important; line-height: 1 !important; pointer-events: none; transform: translateY(-50%); } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-date-picker:focus-within > .vetra-date-picker__indicator { color: var(--vtd-info) !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-date-range__separator { flex: 0 0 auto; color: var(--vtd-subtle, #a3a3a3); font-size: 14px; line-height: 1; user-select: none; } /* Laydate's panel is rendered outside the component tree. The explicit class means this skin cannot leak into legacy date pickers that are not migrated. */ :root[data-theme] .layui-laydate.laydate-theme-vetra, .layui-laydate.laydate-theme-vetra { overflow: hidden !important; color: var(--vtd-text) !important; border: 1px solid var(--vtd-border) !important; border-radius: var(--vtd-radius) !important; background: var(--vtd-surface) !important; box-shadow: 0 12px 28px rgba(41, 41, 41, .12) !important; -webkit-animation: none !important; animation: none !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-main, .layui-laydate.laydate-theme-vetra .layui-laydate-main { color: var(--vtd-text) !important; background: var(--vtd-surface) !important; border-radius: 0 !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-header, .layui-laydate.laydate-theme-vetra .layui-laydate-header { color: var(--vtd-text) !important; border-bottom: 1px solid var(--vtd-border) !important; background: var(--vtd-surface) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-header i, :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-header span, .layui-laydate.laydate-theme-vetra .layui-laydate-header i, .layui-laydate.laydate-theme-vetra .layui-laydate-header span { color: var(--vtd-muted) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-header i:hover, :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-header span:hover, .layui-laydate.laydate-theme-vetra .layui-laydate-header i:hover, .layui-laydate.laydate-theme-vetra .layui-laydate-header span:hover { color: var(--vtd-info) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-content, .layui-laydate.laydate-theme-vetra .layui-laydate-content { background: var(--vtd-surface) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-content th, .layui-laydate.laydate-theme-vetra .layui-laydate-content th { color: var(--vtd-muted) !important; font-weight: 500 !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-content td, .layui-laydate.laydate-theme-vetra .layui-laydate-content td { color: var(--vtd-text) !important; border-radius: 6px; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-content td:hover:not(.laydate-disabled), :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-list li:hover, .layui-laydate.laydate-theme-vetra .layui-laydate-content td:hover:not(.laydate-disabled), .layui-laydate.laydate-theme-vetra .layui-laydate-list li:hover { color: var(--vtd-text-strong) !important; background: var(--vtd-soft) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-content td.laydate-selected, :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-content td.laydate-selected:hover, .layui-laydate.laydate-theme-vetra .layui-laydate-content td.laydate-selected, .layui-laydate.laydate-theme-vetra .layui-laydate-content td.laydate-selected:hover { color: var(--vtd-info) !important; background: color-mix(in srgb, var(--vtd-info) 10%, var(--vtd-surface)) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-content td.layui-this, .layui-laydate.laydate-theme-vetra .layui-laydate-content td.layui-this { color: #ffffff !important; background: var(--vtd-info) !important; border-radius: 6px !important; } /* Laydate paints the active day on its inner div; inherit the cell radius so the initial selection and a clicked selection have the same shape. */ :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-content td.layui-this > div, .layui-laydate.laydate-theme-vetra .layui-laydate-content td.layui-this > div { border-radius: inherit !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-content .laydate-day-next, :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-content .laydate-day-prev, .layui-laydate.laydate-theme-vetra .layui-laydate-content .laydate-day-next, .layui-laydate.laydate-theme-vetra .layui-laydate-content .laydate-day-prev { color: var(--vtd-subtle) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .laydate-day-now, .layui-laydate.laydate-theme-vetra .laydate-day-now { color: var(--vtd-info) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-footer, .layui-laydate.laydate-theme-vetra .layui-laydate-footer { border-top: 1px solid var(--vtd-border) !important; background: var(--vtd-surface) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-footer span, .layui-laydate.laydate-theme-vetra .layui-laydate-footer span { color: var(--vtd-muted) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-footer span:hover, .layui-laydate.laydate-theme-vetra .layui-laydate-footer span:hover { color: var(--vtd-info) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .laydate-footer-btns span, .layui-laydate.laydate-theme-vetra .laydate-footer-btns span { color: var(--vtd-muted) !important; border-color: var(--vtd-border) !important; border-radius: 0 !important; background: var(--vtd-raised) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .laydate-footer-btns span:first-child, .layui-laydate.laydate-theme-vetra .laydate-footer-btns span:first-child { border-radius: 6px 0 0 6px !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .laydate-footer-btns span:last-child, .layui-laydate.laydate-theme-vetra .laydate-footer-btns span:last-child { border-radius: 0 6px 6px 0 !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .laydate-footer-btns .laydate-btns-confirm, .layui-laydate.laydate-theme-vetra .laydate-footer-btns .laydate-btns-confirm { color: #ffffff !important; border-color: var(--vtd-info) !important; background: var(--vtd-info) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .laydate-footer-btns .laydate-btns-confirm:hover, .layui-laydate.laydate-theme-vetra .laydate-footer-btns .laydate-btns-confirm:hover { color: #ffffff !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-list, :root[data-theme] .layui-laydate.laydate-theme-vetra .laydate-time-list li ol, .layui-laydate.laydate-theme-vetra .layui-laydate-list, .layui-laydate.laydate-theme-vetra .laydate-time-list li ol { color: var(--vtd-text) !important; border-color: var(--vtd-border) !important; background: var(--vtd-surface) !important; } :root[data-theme] .layui-laydate.laydate-theme-vetra .layui-laydate-hint, .layui-laydate.laydate-theme-vetra .layui-laydate-hint { color: var(--vt-danger, #dc2626) !important; border-color: var(--vtd-border) !important; background: var(--vtd-surface) !important; } @media (max-width: 767.98px) { :is(body.vetra-user, body.vetra-admin, body.vetra-store) .table-search > .vetra-date-range { width: 100% !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .table-search > .vetra-date-range > .vetra-date-picker { flex: 1 1 0; width: auto !important; } }