/* ========================================================================== Dervi — form widgets (select2 + date picker), panel-wide. Loaded AFTER assets/plugins/select2/dist/css/select2.css so it wins without anyone having to hand-edit the vendor file again. (That file currently carries a hand-painted #05d3cd highlight — this replaces it rather than patching it, so a future select2 upgrade cannot silently bring the teal back.) Everything here is deliberately global. select2 renders its dropdown panel as a child of , OUTSIDE whatever container the field lives in, so any page-scoped rule can only ever style the closed control and leaves the open list untouched. That mismatch is exactly what this file fixes. ========================================================================== */ :root { --s2-line: #E6E9EE; --s2-ink: #1F2733; --s2-mut: #7A8595; --s2-bg: #F6F7F9; --s2-brand: #FF5200; --s2-soft: #FFF1EA; --s2-softbd: #FFD5C0; --s2-deep: #A63500; } /* ------------------------------------------------------------- the control */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border: 1px solid var(--s2-line); border-radius: 9px; background: #fff; min-height: 44px; transition: border-color .15s ease, box-shadow .15s ease; } .select2-container--default .select2-selection--single { height: 44px; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-left: 13px; padding-right: 38px; color: var(--s2-ink); font-size: 14px; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--s2-mut); } /* the caret: a drawn chevron rather than the stock CSS triangle */ .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; right: 6px; width: 26px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border: 0; width: 9px; height: 9px; margin: -6px 0 0 -5px; border-right: 2px solid var(--s2-mut); border-bottom: 2px solid var(--s2-mut); transform: rotate(45deg); transition: transform .15s ease; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { transform: rotate(-135deg); margin-top: -2px; border-color: var(--s2-brand); } /* open / focused */ .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--multiple, .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--multiple:focus { border-color: var(--s2-brand); box-shadow: 0 0 0 3px rgba(255, 82, 0, .10); } /* select2 flattens the corner that meets the dropdown; keep the radius honest */ .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; } .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { border-top-left-radius: 9px; border-top-right-radius: 9px; } .select2-container--default .select2-selection--single .select2-selection__clear { color: var(--s2-mut); font-size: 20px; line-height: 40px; margin-right: 26px; font-weight: 400; } .select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--s2-brand); } /* ------------------------------------------------------- multi-select tags */ .select2-container--default .select2-selection--multiple { padding: 4px 6px; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 0; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--s2-soft); border: 1px solid var(--s2-softbd); color: var(--s2-deep); border-radius: 7px; padding: 4px 9px 4px 7px; margin: 2px 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; display: inline-flex; align-items: center; gap: 6px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--s2-deep); opacity: .55; margin: 0; font-size: 15px; font-weight: 700; order: 2; /* × after the label reads better than before it */ } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--s2-brand); opacity: 1; } .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { margin-top: 0; height: 30px; font-size: 14px; color: var(--s2-ink); } .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder { color: var(--s2-mut); } /* ------------------------------------------------------------ the dropdown */ .select2-container--default .select2-dropdown { border: 1px solid var(--s2-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 28, 40, .12); overflow: hidden; margin-top: 6px; background: #fff; } .select2-container--default .select2-dropdown--above { margin-top: 0; margin-bottom: 6px; } .select2-container--default .select2-search--dropdown { padding: 10px 10px 6px; background: #fff; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--s2-line); border-radius: 8px; height: 38px; padding: 0 12px; font-size: 13.5px; color: var(--s2-ink); background: var(--s2-bg); } .select2-container--default .select2-search--dropdown .select2-search__field:focus { outline: none; border-color: var(--s2-brand); background: #fff; box-shadow: 0 0 0 3px rgba(255, 82, 0, .10); } .select2-container--default .select2-results > .select2-results__options { max-height: 280px; padding: 6px; } .select2-container--default .select2-results__option { padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--s2-ink); line-height: 1.4; } /* A soft tint keeps the label readable; the old rule painted a saturated bar across the row and pushed the text to white, which is loud on every hover. */ .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected=true] { background: var(--s2-soft); color: var(--s2-deep); font-weight: 600; } .select2-container--default .select2-results__option[aria-selected=true] { background: transparent; color: var(--s2-brand); font-weight: 700; } .select2-container--default .select2-results__option[aria-selected=true]:after { content: ""; float: right; width: 11px; height: 6px; margin: 5px 2px 0 0; border-left: 2px solid var(--s2-brand); border-bottom: 2px solid var(--s2-brand); transform: rotate(-45deg); } .select2-container--default .select2-results__option--highlighted[aria-selected=true] { background: var(--s2-soft); } /* a disabled first entry is a prompt, not a choice */ .select2-container--default .select2-results__option[aria-disabled=true] { color: var(--s2-mut); background: transparent; cursor: default; } .select2-container--default .select2-results__message { color: var(--s2-mut); font-size: 13px; padding: 12px; } .select2-container--default .select2-results__group { color: var(--s2-mut); font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 10px 12px 6px; } /* select2 sits under Bootstrap modals by default */ .select2-container { z-index: 1061; } /* ========================================================================== Date picker (jquery.datetimepicker / xdsoft) Same reasoning as select2: the calendar is appended to , so it can only be reached from a global sheet. Loaded after the vendor CSS so these win. ========================================================================== */ .xdsoft_datetimepicker { border: 1px solid var(--s2-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 28, 40, .12); padding: 10px; background: #fff; font-family: inherit; margin-top: 6px; } .xdsoft_datetimepicker .xdsoft_datepicker { width: 258px; margin-left: 0; } /* header: month / year with the arrows either side */ .xdsoft_datetimepicker .xdsoft_monthpicker { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; } .xdsoft_datetimepicker .xdsoft_label { order: 2; background: transparent; font-size: 14px; font-weight: 700; color: var(--s2-ink); line-height: 34px; height: 34px; padding: 0 6px; float: none; } .xdsoft_datetimepicker .xdsoft_label:hover > span { text-decoration: none; } .xdsoft_datetimepicker .xdsoft_label i { border-top-color: var(--s2-mut); } .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_today_button { width: 32px; height: 32px; border-radius: 8px; background-color: var(--s2-bg); background-position: center; opacity: 1; float: none; margin: 0; transition: background-color .15s ease; } .xdsoft_datetimepicker .xdsoft_prev:hover, .xdsoft_datetimepicker .xdsoft_next:hover, .xdsoft_datetimepicker .xdsoft_today_button:hover { background-color: var(--s2-soft); } .xdsoft_datetimepicker .xdsoft_prev { order: 1; } .xdsoft_datetimepicker .xdsoft_today_button { order: 3; margin-left: auto; } .xdsoft_datetimepicker .xdsoft_next { order: 4; } /* weekday header row */ .xdsoft_datetimepicker .xdsoft_calendar th { background: transparent; border: 0; color: var(--s2-mut); font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; height: 28px; text-align: center; } .xdsoft_datetimepicker .xdsoft_calendar table { border-collapse: separate; border-spacing: 2px; } .xdsoft_datetimepicker .xdsoft_calendar td { background: transparent; border: 0; border-radius: 8px; height: 32px; width: 32px; padding: 0; text-align: center; color: var(--s2-ink); font-size: 13px; transition: background-color .12s ease, color .12s ease; } .xdsoft_datetimepicker .xdsoft_calendar td > div { padding: 0; text-align: center; line-height: 32px; } .xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current:hover { background: var(--s2-soft) !important; color: var(--s2-deep) !important; box-shadow: none !important; } /* days outside this month stay visible but recede */ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled { color: #C7CDD6; opacity: 1; } /* today is outlined; the chosen day is filled. Two different things, so they must not look the same — the stock theme fills both. */ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { color: var(--s2-brand); font-weight: 800; box-shadow: inset 0 0 0 1px var(--s2-softbd); } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_today { background: var(--s2-brand) !important; color: #fff !important; font-weight: 700; box-shadow: none !important; } /* month / year drop-downs */ .xdsoft_datetimepicker .xdsoft_select { border: 1px solid var(--s2-line); border-radius: 10px; box-shadow: 0 10px 26px rgba(20, 28, 40, .12); padding: 5px; background: #fff; } .xdsoft_datetimepicker .xdsoft_select .xdsoft_option { border-radius: 7px; padding: 7px 12px; color: var(--s2-ink); font-size: 13px; } .xdsoft_datetimepicker .xdsoft_select .xdsoft_option:hover { background: var(--s2-soft); color: var(--s2-deep); } .xdsoft_datetimepicker .xdsoft_select .xdsoft_option.xdsoft_current { background: var(--s2-brand); color: #fff; box-shadow: none; }