/* Custom skin for the vendored nepali.datepicker.v2.2 jQuery plugin. The plugin builds its DOM as raw HTML strings (see nepali-datepicker.js comments) so the element structure/class names below are fixed by the vendor script and can't be changed here — only styled. All colors use the app's design tokens (src/FinAccBlazor/wwwroot/css/app.css) so the popup matches the rest of the UI in both themes. The plugin appends #ndp-nepali-box to (outside #wrapper), so dark mode can't reach it through normal CSS inheritance; nepali-datepicker.js toggles a literal ".dark-theme" class on the popup itself at open time, which re-scopes the app's existing ".dark-theme { --surface: ...; }" block onto this element. */ #ndp-nepali-box { position: absolute; z-index: 9999; width: 264px; margin-top: 6px; padding: 10px; box-sizing: border-box; border: 1px solid var(--outline-variant, #c3c6d5); border-radius: 14px; background: var(--surface-container-lowest, #fff); color: var(--on-surface, #141b2b); font-family: inherit; box-shadow: 0 16px 40px -12px rgba(20, 27, 43, .32), 0 4px 12px rgba(20, 27, 43, .12); overflow: hidden; animation: npd-pop .14s ease-out; } #ndp-nepali-box.ndp-dropup { margin-top: 0 !important; animation: npd-pop-up .14s ease-out; } @media (prefers-reduced-motion: reduce) { #ndp-nepali-box, #ndp-nepali-box.ndp-dropup { animation: none; } } @keyframes npd-pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes npd-pop-up { from { opacity: 0; transform: scale(.96) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Header: month/year navigation */ .ndp-header { position: relative; margin: -10px -10px 8px; padding: 10px 40px; background: #3d75c9; color: var(--on-primary, #fff); font-size: 13px; font-weight: 600; line-height: 26px; text-align: center; } #currentMonth { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } /* Custom chevron (appearance:none drops the native one) so the selects still read as dropdowns at this size. */ #currentMonth #npd-month-select, #currentMonth #npd-year-select { -webkit-appearance: none; appearance: none; box-sizing: border-box; height: 30px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 8px; background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center; background-size: 12px; color: var(--on-primary, #fff); font-size: 13px; font-weight: 600; line-height: 1.4; padding: 4px 22px 4px 10px; cursor: pointer; } /* Month names run 2-6 Devanagari characters wide ("असोज" vs "श्रावण"); a fixed min-width keeps the header from jittering as the month changes. Year is a stable 4 digits. */ #currentMonth #npd-month-select { min-width: 86px; } #currentMonth #npd-year-select { min-width: 66px; } #currentMonth #npd-month-select:hover, #currentMonth #npd-year-select:hover { background-color: rgba(255, 255, 255, .18); } #currentMonth #npd-month-select:focus-visible, #currentMonth #npd-year-select:focus-visible { outline: 2px solid var(--on-primary, #fff); outline-offset: 1px; } /* The closed select is skinned above, but the open options list is rendered natively by the OS/browser — only background-color/color/font are stylable (Chromium respects these; Firefox/Safari mostly ignore them and fall back to their own native popup, which is an acceptable degrade). Without these the list previously had no background-color and no selected/hover state at all, so every row rendered identically. */ #currentMonth #npd-month-select option, #currentMonth #npd-year-select option { background-color: var(--surface-container-lowest, #fff); color: var(--on-surface, #141b2b); font-size: 13px; padding: 6px 10px; } #currentMonth #npd-month-select option:checked, #currentMonth #npd-year-select option:checked { background-color: var(--primary-container, #0047ab) !important; color: var(--on-primary-container, #a5bdff) !important; font-weight: 700; } #currentMonth #npd-month-select option:hover, #currentMonth #npd-year-select option:hover { background-color: var(--surface-variant, #dce2f7); } /* Prev/Next: CSS-only chevrons, no vendor image sprite */ .ndp-prev, .ndp-next { position: absolute; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 8px; cursor: pointer; } .ndp-prev { left: 6px; } .ndp-next { right: 6px; } .ndp-prev:hover, .ndp-next:hover { background: rgba(255, 255, 255, .16); } .ndp-prev::before, .ndp-next::before { content: ''; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-style: solid; border-color: var(--on-primary, #fff); border-width: 0 2px 2px 0; } .ndp-prev::before { transform: rotate(135deg); margin-left: 2px; } .ndp-next::before { transform: rotate(-45deg); margin-right: 2px; } /* Weekday header row + day grid */ #npd-table-div { margin: 0; } #npd-table-div table { width: 100%; border-collapse: separate; border-spacing: 2px; } .ndp-days th { padding-bottom: 6px; font-size: 11px; font-weight: 700; text-align: center; color: var(--on-surface-variant, #434653); } div#ndp-nepali-box table, div#ndp-nepali-box td, div#ndp-nepali-box tr { font-size: 13px; line-height: 1; } div#ndp-nepali-box td.ndp-date, div#ndp-nepali-box td.ndp-selected, div#ndp-nepali-box td.ndp-current { width: 34px; height: 34px; padding: 0; margin: 0; border: none; background: transparent; text-align: center; } div#ndp-nepali-box td.ndp-date a, div#ndp-nepali-box td.ndp-selected a, div#ndp-nepali-box td.ndp-current a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 10px; color: var(--on-surface, #141b2b); text-decoration: none; font-size: 13px; font-weight: 500; transition: background-color .12s ease, color .12s ease; } div#ndp-nepali-box td.ndp-date a:hover { background: var(--surface-variant, #dce2f7); } /* .ndp-selected = today (plugin naming quirk: matches the real calendar date, not the picked one) — outlined so it reads as "today", not "chosen". */ div#ndp-nepali-box td.ndp-selected a { box-shadow: inset 0 0 0 1.5px var(--primary, #00327d); color: var(--primary, #00327d); font-weight: 700; } /* .ndp-current = the date currently typed/picked into the input — filled pill. */ div#ndp-nepali-box td.ndp-current a { background: var(--primary, #00327d); color: var(--on-primary, #fff); font-weight: 700; } a.ndp-disabled { color: var(--outline, #737784) !important; opacity: .45; pointer-events: none; } div#ndp-nepali-box td.ndp-date a:focus-visible, div#ndp-nepali-box td.ndp-current a:focus-visible, div#ndp-nepali-box td.ndp-selected a:focus-visible { outline: 2px solid var(--primary, #00327d); outline-offset: 2px; } /* Dark theme: toggled directly on #ndp-nepali-box by nepali-datepicker.js (syncNdpTheme), re-scoping the app's shared ".dark-theme" token block onto this element since it lives outside #wrapper in the DOM. */ #ndp-nepali-box.dark-theme .ndp-header { background: #3d75c9; color: #ffffff; } #ndp-nepali-box.dark-theme .ndp-prev::before, #ndp-nepali-box.dark-theme .ndp-next::before, #ndp-nepali-box.dark-theme #currentMonth #npd-month-select, #ndp-nepali-box.dark-theme #currentMonth #npd-year-select { border-color: rgba(255, 255, 255, .38); color: #ffffff; } /* ---- Field: input + calendar affordance icon (NepaliDatePicker.razor) ---- */ .npd-field { position: relative; display: block; } /* app.css sets `.form-control` padding with !important (global site rule), so the icon-clearance override has to match !important to win despite being the more specific selector. */ .npd-field .npd-input { padding-right: 32px !important; } .npd-field .npd-icon { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--outline, #737784); cursor: pointer; } .npd-field .npd-icon:hover { color: var(--primary, #00327d); background: var(--surface-variant, #dce2f7); }