/* ---------------------------------------------------------------------------- * redxgym Magicline - rxg-datepicker * Dark Panel im RED-GYM-Look. Das sichtbare Textfeld erbt bewusst KEIN * eigenes Border/Background-Styling ausser Basis - es soll sich in die * bestehenden Widget-Formulare einfuegen; Feintuning via --rxg-dp-* Vars. * ---------------------------------------------------------------------------- */ .rxg-dp, .rxg-dp__panel { --rxg-dp-bg: #161616; --rxg-dp-border: rgba(255,255,255,.14); --rxg-dp-text: #f4f4f4; --rxg-dp-muted: rgba(255,255,255,.55); --rxg-dp-primary: #e30613; --rxg-dp-hover: rgba(227,6,19,.18); --rxg-dp-radius: 4px; } .rxg-dp { position: relative; display: block; width: 100%; } .rxg-dp__input { width: 100%; box-sizing: border-box; font: inherit; color: inherit; background: inherit; border: inherit; padding: inherit; } .rxg-dp__input.is-invalid { border-color: var(--rxg-dp-primary) !important; outline-color: var(--rxg-dp-primary); } /* ---------------- Panel ---------------- */ .rxg-dp__panel { position: absolute; /* Koordinaten setzt das JS (Portal in ) */ z-index: 99999; width: 296px; max-width: calc(100vw - 24px); padding: 12px; box-sizing: border-box; background: var(--rxg-dp-bg); border: 1px solid var(--rxg-dp-border); border-radius: var(--rxg-dp-radius); box-shadow: 0 12px 34px rgba(0,0,0,.55); color: var(--rxg-dp-text); font-family: 'Inter', sans-serif; font-size: 14px; } /* ---------------- Kopf ---------------- */ .rxg-dp__head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .rxg-dp__nav { flex: 0 0 32px; height: 32px; border: 1px solid var(--rxg-dp-border); border-radius: var(--rxg-dp-radius); background: transparent; color: var(--rxg-dp-text); font-size: 18px; line-height: 1; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .rxg-dp__nav:hover, .rxg-dp__nav:focus-visible { background: var(--rxg-dp-hover); border-color: var(--rxg-dp-primary); } .rxg-dp__panel select.rxg-dp__select.rxg-dp__select { flex: 1 1 auto; min-width: 0; width: auto; height: 32px; margin: 0; padding: 0 6px; border: 1px solid var(--rxg-dp-border); border-radius: var(--rxg-dp-radius); background: #1f1f1f; background-image: none; color: var(--rxg-dp-text); font: inherit; font-size: 14px; line-height: 30px; text-shadow: none; cursor: pointer; appearance: auto; -webkit-appearance: auto; } .rxg-dp__panel select.rxg-dp__select option { background: #1f1f1f; color: var(--rxg-dp-text); } .rxg-dp__panel select.rxg-dp__select:focus-visible { outline: 2px solid var(--rxg-dp-primary); outline-offset: 1px; } /* Dezente, schmale Scrollbars im Panel & in den Dropdown-Listen (globale Site-Scrollbar-Styles nicht durchschlagen lassen) */ .rxg-dp__panel, .rxg-dp__panel select.rxg-dp__select { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; } .rxg-dp__panel ::-webkit-scrollbar, .rxg-dp__panel select.rxg-dp__select::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; } .rxg-dp__panel ::-webkit-scrollbar-thumb, .rxg-dp__panel select.rxg-dp__select::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 3px; } /* ---------------- Wochentage + Grid ---------------- */ .rxg-dp__dow, .rxg-dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .rxg-dp__dow { margin-bottom: 4px; } .rxg-dp__dow span { text-align: center; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--rxg-dp-muted); padding: 4px 0; } .rxg-dp__day { appearance: none; border: 1px solid transparent; border-radius: var(--rxg-dp-radius); background: transparent; color: var(--rxg-dp-text); font: inherit; font-variant-numeric: tabular-nums; height: 34px; cursor: pointer; transition: background .12s ease, border-color .12s ease; } .rxg-dp__day:hover:not([disabled]), .rxg-dp__day:focus-visible:not([disabled]) { background: var(--rxg-dp-hover); border-color: var(--rxg-dp-primary); outline: none; } .rxg-dp__day.is-today { border-color: var(--rxg-dp-border); } .rxg-dp__day.is-selected { background: var(--rxg-dp-primary); border-color: var(--rxg-dp-primary); color: #fff; font-weight: 600; } .rxg-dp__day[disabled] { color: rgba(255,255,255,.22); cursor: not-allowed; } .rxg-dp__pad { height: 34px; } /* ---------------- Footer ---------------- */ .rxg-dp__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rxg-dp-border); } .rxg-dp__action { appearance: none; border: none; background: transparent; color: var(--rxg-dp-primary); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: var(--rxg-dp-radius); } .rxg-dp__action:hover, .rxg-dp__action:focus-visible { background: var(--rxg-dp-hover); outline: none; } /* Mobil: Panel nicht breiter als Viewport, etwas größere Touch-Ziele */ @media (max-width: 480px) { .rxg-dp__panel { width: min(320px, calc(100vw - 24px)); } .rxg-dp__day, .rxg-dp__pad { height: 38px; } }