/* ═══════════════════════════════════════════════════════════ SOMNA · datos pasirinkiklis Ta pati struktūra kaip įprastuose kalendoriuose, tik puslapio kalba: žalvaris ant juodo, aštrūs kampai, mono antraštės. ═══════════════════════════════════════════════════════════ */ .dp { position: relative; } .dp-input { padding-right: 42px; } .dp-input.dp-err { border-color: rgba(169,107,91,.7); box-shadow: 0 0 0 3px rgba(169,107,91,.12); } /* Mygtukas – atskira, aiškiai matoma sritis lauko dešinėje, atskirta plona linija. Anksčiau jis buvo tik pilkšva ikona be ribų ir atrodė lyg atsitiktinai užmesta. */ .dp-icon { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 42px; display: grid; place-items: center; color: var(--text-3); border-left: 1px solid var(--line); border-radius: 0 var(--r2) var(--r2) 0; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); } .dp-icon svg { width: 17px; height: 17px; } .dp-icon:hover { color: var(--brass); background: var(--tint); border-color: var(--brass-dk); } .dp-icon:focus-visible { outline: 0; color: var(--brass); background: var(--tint); box-shadow: inset 0 0 0 1px var(--brass-dk); } .dp-icon[aria-expanded="true"] { color: var(--brass); background: var(--tint); border-color: var(--brass-dk); } .dp-input:focus ~ .dp-icon { color: var(--brass); border-color: var(--brass-dk); } /* ─────────── Iškylantis kalendorius ─────────── Gyvena tiesiai viduje ir pozicionuojamas `fixed`, nes `body { overflow-x: hidden }` ir kortelių rėmai absoliučiai pozicionuotą langą nukirpdavo. Tikslias top/left reikšmes apskaičiuoja JS (datepicker.js → place()). */ .dp-pop { position: fixed; z-index: 120; top: 0; left: 0; width: 300px; /* Jei kalendorius aukštesnis už ekraną, slenka viduje, o ne lenda už krašto. */ max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; padding: var(--s4); border: 1px solid var(--line-2); border-radius: var(--r3); background: var(--raised); box-shadow: var(--sh3); animation: dp-in .18s var(--ease-o); } @keyframes dp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .dp-pop[hidden] { display: none; } /* ─────────── Telefonas: apatinis lakštas ─────────── Siaurame ekrane 300 px langas neišvengiamai užgultų patį lauką. Todėl jis nusileidžia į apačią per visą plotį – ten jį patogu pasiekti nykščiu, o įvestis lieka matoma viršuje. */ .dp-pop.dp-sheet { top: auto; bottom: 0; left: 0; width: 100%; max-width: 100%; max-height: 82vh; padding: var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: var(--r3) var(--r3) 0 0; animation: dp-sheet-in .22s var(--ease-o); } /* Lakšte kampų kryželiai netinka – vietoj jų rankenėlė viršuje, įprastas ženklas, kad langą galima nubraukti / uždaryti. */ .dp-pop.dp-sheet::after { display: none; } .dp-pop.dp-sheet::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 38px; height: 3px; border: 0; border-radius: var(--r-pill); background: var(--line-2); opacity: 1; } .dp-pop.dp-sheet .dp-head { margin-top: var(--s3); } .dp-pop.dp-sheet .dp-day { font-size: 15.5px; } @keyframes dp-sheet-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .dp-backdrop { position: fixed; inset: 0; z-index: 119; background: rgba(6, 7, 10, .58); backdrop-filter: blur(2px); animation: dp-fade .22s var(--ease-o); } .dp-backdrop[hidden] { display: none; } @keyframes dp-fade { from { opacity: 0; } to { opacity: 1; } } /* Kraštų kryželiai – ta pati graviūros detalė kaip kortelėse */ .dp-pop::before, .dp-pop::after { content: ""; position: absolute; width: 5px; height: 5px; border: 1px solid var(--brass-dk); opacity: .45; pointer-events: none; } .dp-pop::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; } .dp-pop::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; } /* ─────────── Antraštė ─────────── */ .dp-head { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; gap: var(--s2); margin-bottom: var(--s4); } .dp-nav { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--r2); color: var(--text-2); transition: all .18s var(--ease); } .dp-nav svg { width: 11px; height: 11px; } .dp-nav:hover:not(:disabled) { border-color: var(--line-2); color: var(--brass); background: var(--tint); } .dp-nav:disabled { opacity: .22; cursor: default; } .dp-title { font-family: var(--serif); font-size: 1.15rem; color: var(--title); padding: var(--s2) var(--s3); border-radius: var(--r2); transition: background .18s var(--ease), color .18s var(--ease); white-space: nowrap; } .dp-title:hover { background: var(--tint); color: var(--brass-lt); } /* ─────────── Savaitės dienos ─────────── */ .dp-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); } .dp-wd span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--text-3); text-align: center; padding-block: 4px; } /* ─────────── Tinklelis ─────────── */ .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dp-grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--s2); } .dp-blank { aspect-ratio: 1; } .dp-day { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--r2); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text-2); position: relative; transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); } .dp-day:hover:not(:disabled) { background: var(--hover); color: var(--text); } /* Šiandien – žalvarinis taškas po skaičiumi */ .dp-day.is-today::after { content: ""; position: absolute; bottom: 4px; width: 3px; height: 3px; border-radius: 50%; background: var(--brass); } .dp-day.is-today { color: var(--brass); } .dp-day.is-sel { background: var(--brass); color: var(--on-brass); font-weight: 600; border-color: var(--brass); } .dp-day.is-sel::after { background: var(--on-brass); } .dp-day.is-sel:hover { background: var(--brass-lt); border-color: var(--brass-lt); } .dp-day.is-off, .dp-day:disabled { color: var(--text-3); opacity: .28; cursor: default; } /* Mėnesių ir metų langeliai */ .dp-cell { padding: var(--s3) var(--s1); border: 1px solid var(--line); border-radius: var(--r2); font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text-2); transition: all .16s var(--ease); } .dp-cell:hover:not(:disabled) { border-color: var(--brass-dk); color: var(--brass-lt); background: var(--tint); } .dp-cell.is-sel { background: var(--brass); color: var(--on-brass); border-color: var(--brass); font-weight: 600; } .dp-cell.is-off, .dp-cell:disabled { opacity: .25; cursor: default; } /* ─────────── Poraštė ─────────── */ .dp-foot { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); } .dp-link { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding: var(--s2) var(--s2); border-radius: var(--r1); transition: color .18s var(--ease); } .dp-link:hover:not(:disabled) { color: var(--brass); } .dp-link:disabled { opacity: .3; cursor: default; } /* ─────────── Judesio mažinimas ─────────── */ @media (prefers-reduced-motion: reduce) { .dp-pop, .dp-backdrop { animation: none; } }