diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 12:38:04 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 12:38:04 +0000 |
commit | 1ff5c35de5dbd70a782875a91dd2232fd01b002b (patch) | |
tree | 77d9ce5e1bf78b3e6ef79f8f6e7861e2ced3c09b /asset/css/vendor | |
parent | Initial commit. (diff) | |
download | icinga-php-library-upstream/0.10.1.tar.xz icinga-php-library-upstream/0.10.1.zip |
Adding upstream version 0.10.1.upstream/0.10.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | asset/css/vendor/flatpickr.css | 791 | ||||
-rw-r--r-- | asset/css/vendor/flatpickr.vars.less | 327 |
2 files changed, 1118 insertions, 0 deletions
diff --git a/asset/css/vendor/flatpickr.css b/asset/css/vendor/flatpickr.css new file mode 100644 index 0000000..be7168c --- /dev/null +++ b/asset/css/vendor/flatpickr.css @@ -0,0 +1,791 @@ +.flatpickr-calendar { + background: transparent; + opacity: 0; + display: none; + text-align: center; + visibility: hidden; + padding: 0; + -webkit-animation: none; + animation: none; + direction: ltr; + border: 0; + font-size: 14px; + line-height: 24px; + border-radius: 5px; + position: absolute; + width: 307.875px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -ms-touch-action: manipulation; + touch-action: manipulation; + background: #fff; + -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08); + box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08); +} +.flatpickr-calendar.open, +.flatpickr-calendar.inline { + opacity: 1; + max-height: 640px; + visibility: visible; +} +.flatpickr-calendar.open { + display: inline-block; + z-index: 99999; +} +.flatpickr-calendar.animate.open { + -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); +} +.flatpickr-calendar.inline { + display: block; + position: relative; + top: 2px; +} +.flatpickr-calendar.static { + position: absolute; + top: calc(100% + 2px); +} +.flatpickr-calendar.static.open { + z-index: 999; + display: block; +} +.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { + -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; + box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; +} +.flatpickr-calendar .hasWeeks .dayContainer, +.flatpickr-calendar .hasTime .dayContainer { + border-bottom: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.flatpickr-calendar .hasWeeks .dayContainer { + border-left: 0; +} +.flatpickr-calendar.hasTime .flatpickr-time { + height: 40px; + border-top: 1px solid #e6e6e6; +} +.flatpickr-calendar.noCalendar.hasTime .flatpickr-time { + height: auto; +} +.flatpickr-calendar:before, +.flatpickr-calendar:after { + position: absolute; + display: block; + pointer-events: none; + border: solid transparent; + content: ''; + height: 0; + width: 0; + left: 22px; +} +.flatpickr-calendar.rightMost:before, +.flatpickr-calendar.arrowRight:before, +.flatpickr-calendar.rightMost:after, +.flatpickr-calendar.arrowRight:after { + left: auto; + right: 22px; +} +.flatpickr-calendar.arrowCenter:before, +.flatpickr-calendar.arrowCenter:after { + left: 50%; + right: 50%; +} +.flatpickr-calendar:before { + border-width: 5px; + margin: 0 -5px; +} +.flatpickr-calendar:after { + border-width: 4px; + margin: 0 -4px; +} +.flatpickr-calendar.arrowTop:before, +.flatpickr-calendar.arrowTop:after { + bottom: 100%; +} +.flatpickr-calendar.arrowTop:before { + border-bottom-color: #e6e6e6; +} +.flatpickr-calendar.arrowTop:after { + border-bottom-color: #fff; +} +.flatpickr-calendar.arrowBottom:before, +.flatpickr-calendar.arrowBottom:after { + top: 100%; +} +.flatpickr-calendar.arrowBottom:before { + border-top-color: #e6e6e6; +} +.flatpickr-calendar.arrowBottom:after { + border-top-color: #fff; +} +.flatpickr-calendar:focus { + outline: 0; +} +.flatpickr-wrapper { + position: relative; + display: inline-block; +} +.flatpickr-months { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} +.flatpickr-months .flatpickr-month { + background: transparent; + color: rgba(0,0,0,0.9); + fill: rgba(0,0,0,0.9); + height: 34px; + line-height: 1; + text-align: center; + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + overflow: hidden; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} +.flatpickr-months .flatpickr-prev-month, +.flatpickr-months .flatpickr-next-month { + text-decoration: none; + cursor: pointer; + position: absolute; + top: 0; + height: 34px; + padding: 10px; + z-index: 3; + color: rgba(0,0,0,0.9); + fill: rgba(0,0,0,0.9); +} +.flatpickr-months .flatpickr-prev-month.flatpickr-disabled, +.flatpickr-months .flatpickr-next-month.flatpickr-disabled { + display: none; +} +.flatpickr-months .flatpickr-prev-month i, +.flatpickr-months .flatpickr-next-month i { + position: relative; +} +.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, +.flatpickr-months .flatpickr-next-month.flatpickr-prev-month { + /* + /*rtl:begin:ignore*/ + /* + */ + left: 0; + /* + /*rtl:end:ignore*/ + /* + */ +} +/* + /*rtl:begin:ignore*/ +/* + /*rtl:end:ignore*/ +.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, +.flatpickr-months .flatpickr-next-month.flatpickr-next-month { + /* + /*rtl:begin:ignore*/ + /* + */ + right: 0; + /* + /*rtl:end:ignore*/ + /* + */ +} +/* + /*rtl:begin:ignore*/ +/* + /*rtl:end:ignore*/ +.flatpickr-months .flatpickr-prev-month:hover, +.flatpickr-months .flatpickr-next-month:hover { + color: #959ea9; +} +.flatpickr-months .flatpickr-prev-month:hover svg, +.flatpickr-months .flatpickr-next-month:hover svg { + fill: #f64747; +} +.flatpickr-months .flatpickr-prev-month svg, +.flatpickr-months .flatpickr-next-month svg { + width: 14px; + height: 14px; +} +.flatpickr-months .flatpickr-prev-month svg path, +.flatpickr-months .flatpickr-next-month svg path { + -webkit-transition: fill 0.1s; + transition: fill 0.1s; + fill: inherit; +} +.numInputWrapper { + position: relative; + height: auto; +} +.numInputWrapper input, +.numInputWrapper span { + display: inline-block; +} +.numInputWrapper input { + width: 100%; +} +.numInputWrapper input::-ms-clear { + display: none; +} +.numInputWrapper input::-webkit-outer-spin-button, +.numInputWrapper input::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; +} +.numInputWrapper span { + position: absolute; + right: 0; + width: 14px; + padding: 0 4px 0 2px; + height: 50%; + line-height: 50%; + opacity: 0; + cursor: pointer; + border: 1px solid rgba(57,57,57,0.15); + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +.numInputWrapper span:hover { + background: rgba(0,0,0,0.1); +} +.numInputWrapper span:active { + background: rgba(0,0,0,0.2); +} +.numInputWrapper span:after { + display: block; + content: ""; + position: absolute; +} +.numInputWrapper span.arrowUp { + top: 0; + border-bottom: 0; +} +.numInputWrapper span.arrowUp:after { + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 4px solid rgba(57,57,57,0.6); + top: 26%; +} +.numInputWrapper span.arrowDown { + top: 50%; +} +.numInputWrapper span.arrowDown:after { + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid rgba(57,57,57,0.6); + top: 40%; +} +.numInputWrapper span svg { + width: inherit; + height: auto; +} +.numInputWrapper span svg path { + fill: rgba(0,0,0,0.5); +} +.numInputWrapper:hover { + background: rgba(0,0,0,0.05); +} +.numInputWrapper:hover span { + opacity: 1; +} +.flatpickr-current-month { + font-size: 135%; + line-height: inherit; + font-weight: 300; + color: inherit; + position: absolute; + width: 75%; + left: 12.5%; + padding: 7.48px 0 0 0; + line-height: 1; + height: 34px; + display: inline-block; + text-align: center; + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); +} +.flatpickr-current-month span.cur-month { + font-family: inherit; + font-weight: 700; + color: inherit; + display: inline-block; + margin-left: 0.5ch; + padding: 0; +} +.flatpickr-current-month span.cur-month:hover { + background: rgba(0,0,0,0.05); +} +.flatpickr-current-month .numInputWrapper { + width: 6ch; + width: 7ch\0; + display: inline-block; +} +.flatpickr-current-month .numInputWrapper span.arrowUp:after { + border-bottom-color: rgba(0,0,0,0.9); +} +.flatpickr-current-month .numInputWrapper span.arrowDown:after { + border-top-color: rgba(0,0,0,0.9); +} +.flatpickr-current-month input.cur-year { + background: transparent; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: inherit; + cursor: text; + padding: 0 0 0 0.5ch; + margin: 0; + display: inline-block; + font-size: inherit; + font-family: inherit; + font-weight: 300; + line-height: inherit; + height: auto; + border: 0; + border-radius: 0; + vertical-align: initial; + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; +} +.flatpickr-current-month input.cur-year:focus { + outline: 0; +} +.flatpickr-current-month input.cur-year[disabled], +.flatpickr-current-month input.cur-year[disabled]:hover { + font-size: 100%; + color: rgba(0,0,0,0.5); + background: transparent; + pointer-events: none; +} +.flatpickr-current-month .flatpickr-monthDropdown-months { + appearance: menulist; + background: transparent; + border: none; + border-radius: 0; + box-sizing: border-box; + color: inherit; + cursor: pointer; + font-size: inherit; + font-family: inherit; + font-weight: 300; + height: auto; + line-height: inherit; + margin: -1px 0 0 0; + outline: none; + padding: 0 0 0 0.5ch; + position: relative; + vertical-align: initial; + -webkit-box-sizing: border-box; + -webkit-appearance: menulist; + -moz-appearance: menulist; + width: auto; +} +.flatpickr-current-month .flatpickr-monthDropdown-months:focus, +.flatpickr-current-month .flatpickr-monthDropdown-months:active { + outline: none; +} +.flatpickr-current-month .flatpickr-monthDropdown-months:hover { + background: rgba(0,0,0,0.05); +} +.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { + background-color: transparent; + outline: none; + padding: 0; +} +.flatpickr-weekdays { + background: transparent; + text-align: center; + overflow: hidden; + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + height: 28px; +} +.flatpickr-weekdays .flatpickr-weekdaycontainer { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} +span.flatpickr-weekday { + cursor: default; + font-size: 90%; + background: transparent; + color: rgba(0,0,0,0.54); + line-height: 1; + margin: 0; + text-align: center; + display: block; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-weight: bolder; +} +.dayContainer, +.flatpickr-weeks { + padding: 1px 0 0 0; +} +.flatpickr-days { + position: relative; + overflow: hidden; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + width: 307.875px; +} +.flatpickr-days:focus { + outline: 0; +} +.dayContainer { + padding: 0; + outline: 0; + text-align: left; + width: 307.875px; + min-width: 307.875px; + max-width: 307.875px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + display: -ms-flexbox; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-wrap: wrap; + -ms-flex-pack: justify; + -webkit-justify-content: space-around; + justify-content: space-around; + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + opacity: 1; +} +.dayContainer + .dayContainer { + -webkit-box-shadow: -1px 0 0 #e6e6e6; + box-shadow: -1px 0 0 #e6e6e6; +} +.flatpickr-day { + background: none; + border: 1px solid transparent; + border-radius: 150px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #393939; + cursor: pointer; + font-weight: 400; + width: 14.2857143%; + -webkit-flex-basis: 14.2857143%; + -ms-flex-preferred-size: 14.2857143%; + flex-basis: 14.2857143%; + max-width: 39px; + height: 39px; + line-height: 39px; + margin: 0; + display: inline-block; + position: relative; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; +} +.flatpickr-day.inRange, +.flatpickr-day.prevMonthDay.inRange, +.flatpickr-day.nextMonthDay.inRange, +.flatpickr-day.today.inRange, +.flatpickr-day.prevMonthDay.today.inRange, +.flatpickr-day.nextMonthDay.today.inRange, +.flatpickr-day:hover, +.flatpickr-day.prevMonthDay:hover, +.flatpickr-day.nextMonthDay:hover, +.flatpickr-day:focus, +.flatpickr-day.prevMonthDay:focus, +.flatpickr-day.nextMonthDay:focus { + cursor: pointer; + outline: 0; + background: #e6e6e6; + border-color: #e6e6e6; +} +.flatpickr-day.today { + border-color: #959ea9; +} +.flatpickr-day.today:hover, +.flatpickr-day.today:focus { + border-color: #959ea9; + background: #959ea9; + color: #fff; +} +.flatpickr-day.selected, +.flatpickr-day.startRange, +.flatpickr-day.endRange, +.flatpickr-day.selected.inRange, +.flatpickr-day.startRange.inRange, +.flatpickr-day.endRange.inRange, +.flatpickr-day.selected:focus, +.flatpickr-day.startRange:focus, +.flatpickr-day.endRange:focus, +.flatpickr-day.selected:hover, +.flatpickr-day.startRange:hover, +.flatpickr-day.endRange:hover, +.flatpickr-day.selected.prevMonthDay, +.flatpickr-day.startRange.prevMonthDay, +.flatpickr-day.endRange.prevMonthDay, +.flatpickr-day.selected.nextMonthDay, +.flatpickr-day.startRange.nextMonthDay, +.flatpickr-day.endRange.nextMonthDay { + background: #569ff7; + -webkit-box-shadow: none; + box-shadow: none; + color: #fff; + border-color: #569ff7; +} +.flatpickr-day.selected.startRange, +.flatpickr-day.startRange.startRange, +.flatpickr-day.endRange.startRange { + border-radius: 50px 0 0 50px; +} +.flatpickr-day.selected.endRange, +.flatpickr-day.startRange.endRange, +.flatpickr-day.endRange.endRange { + border-radius: 0 50px 50px 0; +} +.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), +.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), +.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { + -webkit-box-shadow: -10px 0 0 #569ff7; + box-shadow: -10px 0 0 #569ff7; +} +.flatpickr-day.selected.startRange.endRange, +.flatpickr-day.startRange.startRange.endRange, +.flatpickr-day.endRange.startRange.endRange { + border-radius: 50px; +} +.flatpickr-day.inRange { + border-radius: 0; + -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; + box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; +} +.flatpickr-day.flatpickr-disabled, +.flatpickr-day.flatpickr-disabled:hover, +.flatpickr-day.prevMonthDay, +.flatpickr-day.nextMonthDay, +.flatpickr-day.notAllowed, +.flatpickr-day.notAllowed.prevMonthDay, +.flatpickr-day.notAllowed.nextMonthDay { + color: rgba(57,57,57,0.3); + background: transparent; + border-color: transparent; + cursor: default; +} +.flatpickr-day.flatpickr-disabled, +.flatpickr-day.flatpickr-disabled:hover { + cursor: not-allowed; + color: rgba(57,57,57,0.1); +} +.flatpickr-day.week.selected { + border-radius: 0; + -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; + box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; +} +.flatpickr-day.hidden { + visibility: hidden; +} +.rangeMode .flatpickr-day { + margin-top: 1px; +} +.flatpickr-weekwrapper { + float: left; +} +.flatpickr-weekwrapper .flatpickr-weeks { + padding: 0 12px; + -webkit-box-shadow: 1px 0 0 #e6e6e6; + box-shadow: 1px 0 0 #e6e6e6; +} +.flatpickr-weekwrapper .flatpickr-weekday { + float: none; + width: 100%; + line-height: 28px; +} +.flatpickr-weekwrapper span.flatpickr-day, +.flatpickr-weekwrapper span.flatpickr-day:hover { + display: block; + width: 100%; + max-width: none; + color: rgba(57,57,57,0.3); + background: transparent; + cursor: default; + border: none; +} +.flatpickr-innerContainer { + display: block; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; +} +.flatpickr-rContainer { + display: inline-block; + padding: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +.flatpickr-time { + text-align: center; + outline: 0; + display: block; + height: 0; + line-height: 40px; + max-height: 40px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} +.flatpickr-time:after { + content: ""; + display: table; + clear: both; +} +.flatpickr-time .numInputWrapper { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + width: 40%; + height: 40px; + float: left; +} +.flatpickr-time .numInputWrapper span.arrowUp:after { + border-bottom-color: #393939; +} +.flatpickr-time .numInputWrapper span.arrowDown:after { + border-top-color: #393939; +} +.flatpickr-time.hasSeconds .numInputWrapper { + width: 26%; +} +.flatpickr-time.time24hr .numInputWrapper { + width: 49%; +} +.flatpickr-time input { + background: transparent; + -webkit-box-shadow: none; + box-shadow: none; + border: 0; + border-radius: 0; + text-align: center; + margin: 0; + padding: 0; + height: inherit; + line-height: inherit; + color: #393939; + font-size: 14px; + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; +} +.flatpickr-time input.flatpickr-hour { + font-weight: bold; +} +.flatpickr-time input.flatpickr-minute, +.flatpickr-time input.flatpickr-second { + font-weight: 400; +} +.flatpickr-time input:focus { + outline: 0; + border: 0; +} +.flatpickr-time .flatpickr-time-separator, +.flatpickr-time .flatpickr-am-pm { + height: inherit; + float: left; + line-height: inherit; + color: #393939; + font-weight: bold; + width: 2%; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; +} +.flatpickr-time .flatpickr-am-pm { + outline: 0; + width: 18%; + cursor: pointer; + text-align: center; + font-weight: 400; +} +.flatpickr-time input:hover, +.flatpickr-time .flatpickr-am-pm:hover, +.flatpickr-time input:focus, +.flatpickr-time .flatpickr-am-pm:focus { + background: #eee; +} +.flatpickr-input[readonly] { + cursor: pointer; +} +@-webkit-keyframes fpFadeInDown { + from { + opacity: 0; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes fpFadeInDown { + from { + opacity: 0; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} diff --git a/asset/css/vendor/flatpickr.vars.less b/asset/css/vendor/flatpickr.vars.less new file mode 100644 index 0000000..2409667 --- /dev/null +++ b/asset/css/vendor/flatpickr.vars.less @@ -0,0 +1,327 @@ +/** + * This file's only purpose is to make the flatpickr themeable. DO NOT add ANY custom style here! + * Also, DO NOT re-arrange the CSS blocks to make them more LESS like. They're based off of the + * pre-compiled flatpickr.css file and so can easily identified when updating to a new version. + * + * Non-standard LESS variables were added to allow usage of CSS variables. All of them hold a + * value calculated by LESS functions. If not temporarily stored in another LESS variable, + * they wouldn't be available to CSS variable usage. + * + * Latest state from version: v4.6.9 + */ + +@fp-calendarBackground: #ffffff; +@fp-calendarBorderColor: #e6e6e6; + +@fp-arrowColor: fadeout(@fp-dayForeground, 40%); // Non-standard variable +@fp-arrow_hover_color: #f64747; + +@fp-monthForeground: fadeout(black, 10%); +@fp-monthBackground: transparent; + +@fp-weekdaysBackground: transparent; +@fp-weekdaysForeground: fadeout(black, 46%); +@fp-weekNumberForeground: fadeout(@fp-dayForeground, 70%); // Non-standard variable + +@fp-dayForeground: #393939; +@fp-dayHoverBackground: #e6e6e6; +@fp-disabledDayForeground: fadeout(@fp-dayForeground, 90%); // Non-standard variable +@fp-outsideRangeDayForeground: @fp-weekNumberForeground; // Non-standard variable +@fp-selectedDayBackground: #569FF7; +@fp-todayColor: #959ea9; + +@fp-timeHoverBg: lighten(@fp-dayHoverBackground, 3); // Non-standard variable + +@fp-invertedBg: black; +@fp-hoverInvertedBg: fadeout(@fp-invertedBg, 95%); // Non-standard variable + +@fp-numChooserSvgFillColor: fadeout(@fp-monthForeground, 50%); // Non-standard variable +@fp-hoverNumChooserBg: fadeout(@fp-invertedBg, 90%); // Non-standard variable +@fp-numChooserBorderColor: fadeout(@fp-dayForeground, 85%); // Non-standard variable + +.icinga-datetime-picker { + &.flatpickr-calendar { + background: @fp-calendarBackground; + background: var(--fp-calendarBackground, @fp-calendarBackground); + box-shadow: 1px 0 0 @fp-calendarBorderColor, + -1px 0 0 @fp-calendarBorderColor, + 0 1px 0 @fp-calendarBorderColor, + 0 -1px 0 @fp-calendarBorderColor, + 0 3px 13px fadeout(black, 92%); + box-shadow: 1px 0 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor), + -1px 0 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor), + 0 1px 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor), + 0 -1px 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor), + 0 3px 13px fadeout(black, 92%); + } + + &.flatpickr-calendar.arrowTop:before { + border-bottom-color: @fp-calendarBorderColor; + border-bottom-color: var(--fp-calendarBorderColor, @fp-calendarBorderColor); + } + &.flatpickr-calendar.arrowTop:after { + border-bottom-color: @fp-calendarBackground; + border-bottom-color: var(--fp-calendarBackground, @fp-calendarBackground); + } + &.flatpickr-calendar.arrowBottom:before { + border-top-color: @fp-calendarBorderColor; + border-top-color: var(--fp-calendarBorderColor, @fp-calendarBorderColor); + } + &.flatpickr-calendar.arrowBottom:after { + border-top-color: @fp-calendarBackground; + border-top-color: var(--fp-calendarBackground, @fp-calendarBackground); + } + + &.flatpickr-calendar.hasTime .flatpickr-time { + border-top-color: @fp-calendarBorderColor; + border-top-color: var(--fp-calendarBorderColor, @fp-calendarBorderColor); + } + + .dayContainer + .dayContainer { + -webkit-box-shadow: -1px 0 0 @fp-calendarBorderColor; + -webkit-box-shadow: -1px 0 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor); + box-shadow: -1px 0 0 @fp-calendarBorderColor; + box-shadow: -1px 0 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor); + } + + .flatpickr-day { + color: @fp-dayForeground; + color: var(--fp-dayForeground, @fp-dayForeground); + } + .flatpickr-day.today { + border-color: @fp-todayColor; + border-color: var(--fp-todayColor, @fp-todayColor); + } + .flatpickr-day.today:hover, + .flatpickr-day.today:focus { + border-color: @fp-todayColor; + border-color: var(--fp-todayColor, @fp-todayColor); + background: @fp-todayColor; + background: var(--fp-todayColor, @fp-todayColor); + color: @fp-calendarBackground; + color: var(--fp-calendarBackground, @fp-calendarBackground); + } + .flatpickr-day.selected, + .flatpickr-day.startRange, + .flatpickr-day.endRange, + .flatpickr-day.selected.inRange, + .flatpickr-day.startRange.inRange, + .flatpickr-day.endRange.inRange, + .flatpickr-day.selected:focus, + .flatpickr-day.startRange:focus, + .flatpickr-day.endRange:focus, + .flatpickr-day.selected:hover, + .flatpickr-day.startRange:hover, + .flatpickr-day.endRange:hover, + .flatpickr-day.selected.prevMonthDay, + .flatpickr-day.startRange.prevMonthDay, + .flatpickr-day.endRange.prevMonthDay, + .flatpickr-day.selected.nextMonthDay, + .flatpickr-day.startRange.nextMonthDay, + .flatpickr-day.endRange.nextMonthDay { + color: @fp-calendarBackground; + color: var(--fp-calendarBackground, @fp-calendarBackground); + } + .flatpickr-day.inRange, + .flatpickr-day.prevMonthDay.inRange, + .flatpickr-day.nextMonthDay.inRange, + .flatpickr-day.today.inRange, + .flatpickr-day.prevMonthDay.today.inRange, + .flatpickr-day.nextMonthDay.today.inRange, + .flatpickr-day:hover, + .flatpickr-day.prevMonthDay:hover, + .flatpickr-day.nextMonthDay:hover, + .flatpickr-day:focus, + .flatpickr-day.nextMonthDay:focus { + background: @fp-dayHoverBackground; + background: var(--fp-dayHoverBackground, @fp-dayHoverBackground); + border-color: @fp-dayHoverBackground; + border-color: var(--fp-dayHoverBackground, @fp-dayHoverBackground); + } + .flatpickr-day.inRange { + -webkit-box-shadow: -5px 0 0 @fp-dayHoverBackground, 5px 0 0 @fp-dayHoverBackground; + -webkit-box-shadow: -5px 0 0 var(--fp-dayHoverBackground, @fp-dayHoverBackground), + 5px 0 0 var(--fp-dayHoverBackground, @fp-dayHoverBackground); + box-shadow: -5px 0 0 @fp-dayHoverBackground, 5px 0 0 @fp-dayHoverBackground; + box-shadow: -5px 0 0 var(--fp-dayHoverBackground, @fp-dayHoverBackground), + 5px 0 0 var(--fp-dayHoverBackground, @fp-dayHoverBackground); + } + .flatpickr-day.prevMonthDay, + .flatpickr-day.nextMonthDay, + .flatpickr-day.notAllowed, + .flatpickr-day.notAllowed.prevMonthDay, + .flatpickr-day.notAllowed.nextMonthDay { + color: @fp-outsideRangeDayForeground; + color: var(--fp-outsideRangeDayForeground, @fp-outsideRangeDayForeground); + } + .flatpickr-day.flatpickr-disabled, + .flatpickr-day.flatpickr-disabled:hover { + color: @fp-disabledDayForeground; + color: var(--fp-disabledDayForeground, @fp-disabledDayForeground); + } + .flatpickr-day.selected, + .flatpickr-day.startRange, + .flatpickr-day.endRange, + .flatpickr-day.selected.inRange, + .flatpickr-day.startRange.inRange, + .flatpickr-day.endRange.inRange, + .flatpickr-day.selected:focus, + .flatpickr-day.startRange:focus, + .flatpickr-day.endRange:focus, + .flatpickr-day.selected:hover, + .flatpickr-day.startRange:hover, + .flatpickr-day.endRange:hover, + .flatpickr-day.selected.prevMonthDay, + .flatpickr-day.startRange.prevMonthDay, + .flatpickr-day.endRange.prevMonthDay, + .flatpickr-day.selected.nextMonthDay, + .flatpickr-day.startRange.nextMonthDay, + .flatpickr-day.endRange.nextMonthDay { + background: @fp-selectedDayBackground; + background: var(--fp-selectedDayBackground, @fp-selectedDayBackground); + border-color: @fp-selectedDayBackground; + border-color: var(--fp-selectedDayBackground, @fp-selectedDayBackground); + } + .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), + .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), + .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { + -webkit-box-shadow: -10px 0 0 @fp-selectedDayBackground; + -webkit-box-shadow: -10px 0 0 var(--fp-selectedDayBackground, @fp-selectedDayBackground); + box-shadow: -10px 0 0 @fp-selectedDayBackground; + box-shadow: -10px 0 0 var(--fp-selectedDayBackground, @fp-selectedDayBackground); + } + .flatpickr-day.week.selected { + -webkit-box-shadow: -5px 0 0 @fp-selectedDayBackground, 5px 0 0 @fp-selectedDayBackground; + -webkit-box-shadow: -5px 0 0 var(--fp-selectedDayBackground, @fp-selectedDayBackground), + 5px 0 0 var(--fp-selectedDayBackground, @fp-selectedDayBackground); + box-shadow: -5px 0 0 @fp-selectedDayBackground, 5px 0 0 @fp-selectedDayBackground; + box-shadow: -5px 0 0 var(--fp-selectedDayBackground, @fp-selectedDayBackground), + 5px 0 0 var(--fp-selectedDayBackground, @fp-selectedDayBackground); + } + + .flatpickr-weekwrapper .flatpickr-weeks { + -webkit-box-shadow: 1px 0 0 @fp-calendarBorderColor; + -webkit-box-shadow: 1px 0 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor); + box-shadow: 1px 0 0 @fp-calendarBorderColor; + box-shadow: 1px 0 0 var(--fp-calendarBorderColor, @fp-calendarBorderColor); + } + .flatpickr-weekwrapper span.flatpickr-day, + .flatpickr-weekwrapper span.flatpickr-day:hover { + color: @fp-weekNumberForeground; + color: var(--fp-weekNumberForeground, @fp-weekNumberForeground); + } + .flatpickr-weekdays { + background: @fp-weekdaysBackground; + background: var(--fp-weekdaysBackground, @fp-weekdaysBackground); + } + span.flatpickr-weekday { + background: @fp-monthBackground; + background: var(--fp-monthBackground, @fp-monthBackground); + color: @fp-weekdaysForeground; + color: var(--fp-weekdaysForeground, @fp-weekdaysForeground); + } + + .flatpickr-months .flatpickr-month { + background: @fp-monthBackground; + background: var(--fp-monthBackground, @fp-monthBackground); + color: @fp-monthForeground; + color: var(--fp-monthForeground, @fp-monthForeground); + fill: @fp-monthForeground; + fill: var(--fp-monthForeground, @fp-monthForeground); + } + .flatpickr-months .flatpickr-prev-month, + .flatpickr-months .flatpickr-next-month { + color: @fp-monthForeground; + color: var(--fp-monthForeground, @fp-monthForeground); + fill: @fp-monthForeground; + fill: var(--fp-monthForeground, @fp-monthForeground); + } + .flatpickr-months .flatpickr-prev-month:hover, + .flatpickr-months .flatpickr-next-month:hover { + color: @fp-todayColor; + color: var(--fp-todayColor, @fp-todayColor); + } + .flatpickr-months .flatpickr-prev-month:hover svg, + .flatpickr-months .flatpickr-next-month:hover svg { + fill: @fp-arrow_hover_color; + fill: var(--fp-arrow_hover_color, @fp-arrow_hover_color); + } + .flatpickr-current-month .flatpickr-monthDropdown-months { + background: @fp-monthBackground; + background: var(--fp-monthBackground, @fp-monthBackground); + } + .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { + background-color: @fp-monthBackground; + background-color: var(--fp-monthBackground, @fp-monthBackground); + } + .flatpickr-current-month .numInputWrapper span.arrowUp:after { + border-bottom-color: @fp-monthForeground; + border-bottom-color: var(--fp-monthForeground, @fp-monthForeground); + } + .flatpickr-current-month .numInputWrapper span.arrowDown:after { + border-top-color: @fp-monthForeground; + border-top-color: var(--fp-monthForeground, @fp-monthForeground); + } + + .numInputWrapper span { + border-color: @fp-numChooserBorderColor; + border-color: var(--fp-numChooserBorderColor, @fp-numChooserBorderColor); + } + .numInputWrapper span:hover { + background: @fp-hoverNumChooserBg; + background: var(--fp-hoverNumChooserBg, @fp-hoverNumChooserBg); + } + .numInputWrapper span:active { + background: @fp-hoverNumChooserBg; + background: var(--fp-hoverNumChooserBg, @fp-hoverNumChooserBg); + } + .numInputWrapper span svg path { + fill: @fp-numChooserSvgFillColor; + fill: var(--fp-numChooserSvgFillColor, @fp-numChooserSvgFillColor); + } + .numInputWrapper span.arrowUp:after { + border-bottom-color: @fp-arrowColor; + border-bottom-color: var(--fp-arrowColor, @fp-arrowColor); + } + .numInputWrapper span.arrowDown:after { + border-top-color: @fp-arrowColor; + border-top-color: var(--fp-arrowColor, @fp-arrowColor); + } + .numInputWrapper:hover { + background: @fp-hoverInvertedBg; + background: var(--fp-hoverInvertedBg, @fp-hoverInvertedBg); + } + .flatpickr-current-month span.cur-month:hover { + background: @fp-hoverInvertedBg; + background: var(--fp-hoverInvertedBg, @fp-hoverInvertedBg); + } + .flatpickr-current-month .flatpickr-monthDropdown-months:hover { + background: @fp-hoverInvertedBg; + background: var(--fp-hoverInvertedBg, @fp-hoverInvertedBg); + } + + .flatpickr-time input:hover, + .flatpickr-time .flatpickr-am-pm:hover, + .flatpickr-time input:focus, + .flatpickr-time .flatpickr-am-pm:focus { + background: @fp-timeHoverBg; + background: var(--fp-timeHoverBg, @fp-timeHoverBg); + } + .flatpickr-time .numInputWrapper span.arrowUp:after { + border-bottom-color: @fp-dayForeground; + border-bottom-color: var(--fp-dayForeground, @fp-dayForeground); + } + .flatpickr-time .numInputWrapper span.arrowDown:after { + border-top-color: @fp-dayForeground; + border-top-color: var(--fp-dayForeground, @fp-dayForeground); + } + .flatpickr-time input { + color: @fp-dayForeground; + color: var(--fp-dayForeground, @fp-dayForeground); + } + .flatpickr-time .flatpickr-time-separator, + .flatpickr-time .flatpickr-am-pm { + color: @fp-dayForeground; + color: var(--fp-dayForeground, @fp-dayForeground); + } +} |