datepicker.css
1 lines
| 1 | :host{--color-bg-default:#fff;--color-bg-secondary:#f9f9f9;--color-fg-default:#333;--color-fg-primary:#6b82ff;--color-fg-secondary:#748194;--color-fg-selected:#fff;--color-fg-muted:#9e9e9e;--color-fg-accent:#e63757;--color-btn-primary-bg:#fff;--color-btn-primary-fg:#6b82ff;--color-btn-primary-border:#6b82ff;--color-btn-primary-hover-bg:#6b82ff;--color-btn-primary-hover-fg:#fff;--color-btn-primary-hover-border:#6b82ff;--color-btn-secondary-bg:#fff;--color-btn-secondary-fg:#748194;--color-btn-secondary-border:#748194;--color-btn-secondary-hover-bg:#748194;--color-btn-secondary-hover-fg:#fff;--color-btn-secondary-hover-border:#748194;--color-border-default:#ddd;--color-border-locked:#f9f9f9;--day-width:42px;--day-height:37px;--border-radius:2px;--primary-color:#6b82ff;--secondary-color:#748194;--white-color:#fff;--black-color:#333;--lightgray-color:#f9f9f9;--gray-color:#9e9e9e;--red-color:#e63757}*{box-sizing:border-box}.container{color:var(--color-fg-default);cursor:default;height:0;pointer-events:all;-webkit-transform-origin:0 0;transform-origin:0 0;border-radius:4px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:.8em;transition:-webkit-transform .3s ease-out,-webkit-transform .3s ease-out,transform .3s ease-out;display:inline-block;position:absolute;overflow:hidden;-webkit-transform:scale(0);transform:scale(0)}.container.calc{height:auto;visibility:hidden;transition:none;-webkit-transform:none;transform:none}.container.show{height:auto;-webkit-transform:scale(1);transform:scale(1);box-shadow:0 0 25px rgba(0,0,0,.3)}.container.inline{height:auto;position:relative;top:0;left:0;-webkit-transform:scaleY(1);transform:scaleY(1);box-shadow:0 7px 14px rgba(65,69,88,.1),0 3px 6px rgba(0,0,0,.07)}.container>main{background-color:var(--color-bg-default)}.container>footer,.container>header{background-color:var(--color-bg-secondary);padding:10px}.container>footer .footer-buttons{-moz-column-gap:5px;justify-content:flex-end;column-gap:5px;display:flex}.container>footer .footer-buttons>button{border-radius:var(--border-radius);cursor:pointer;background-color:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);padding:5px 10px}.container>footer .footer-buttons>button.apply-button{background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);color:var(--color-btn-primary-fg)}.container>footer .footer-buttons>button.apply-button:hover{background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border);color:var(--color-btn-primary-hover-fg)}.container>footer .footer-buttons>button.cancel-button{background-color:var(--color-btn-secondary-bg);border-color:var(--color-btn-secondary-border);color:var(--color-btn-secondary-fg)}.container>footer .footer-buttons>button.cancel-button:hover{background-color:var(--color-btn-secondary-hover-bg);border-color:var(--color-btn-secondary-hover-border);color:var(--color-btn-secondary-hover-fg)}.grid-1{grid-template-columns:repeat(1,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-5{grid-template-columns:repeat(5,1fr)}.grid-6{grid-template-columns:repeat(6,1fr)}.grid-7{grid-template-columns:repeat(7,1fr)}.grid-8{grid-template-columns:repeat(8,1fr)}.grid-9{grid-template-columns:repeat(9,1fr)}.grid-10{grid-template-columns:repeat(10,1fr)}.grid-11{grid-template-columns:repeat(11,1fr)}.grid-12{grid-template-columns:repeat(12,1fr)}.calendars{display:grid}.calendars:not(.grid-1) .calendar>.header .month-name{text-align:center;order:2}.calendars:not(.grid-1) .calendar>.header .previous-button{visibility:hidden;order:1}.calendars:not(.grid-1) .calendar>.header .next-button{visibility:hidden;order:3}.calendars:not(.grid-1) .calendar:first-child>.header .previous-button,.calendars:not(.grid-1) .calendar:last-child>.header .next-button{visibility:visible}.calendar{padding:10px}.calendar>.header{-moz-column-gap:5px;justify-content:space-between;align-items:center;column-gap:5px;padding:10px;display:flex}.calendar>.header .month-name{flex:1;font-size:15px;font-weight:500}.calendar>.header .month-name>span{font-weight:700}.calendar>.header button{color:var(--color-btn-secondary-fg);cursor:pointer;background-color:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);border-radius:2px;justify-content:center;align-items:center;padding:4px 7px;display:flex}.calendar>.header button:hover{background-color:var(--color-bg-secondary)}.calendar>.header button:hover>img,.calendar>.header button:hover>svg{fill:var(--color-fg-primary);color:var(--color-fg-primary)}.calendar>.header button>img,.calendar>.header button>svg{fill:var(--color-btn-secondary-fg);color:var(--color-btn-secondary-fg);pointer-events:none;-webkit-transform:scale(.7);transform:scale(.7)}.calendar>.daynames-row,.calendar>.days-grid{grid-template-columns:repeat(7,1fr);row-gap:2px;display:grid}.calendar>.daynames-row>.day,.calendar>.daynames-row>.dayname,.calendar>.days-grid>.day,.calendar>.days-grid>.dayname{cursor:default;flex-direction:column;justify-content:center;align-items:center;font-size:13px;display:flex}.calendar>.daynames-row>.dayname{color:var(--color-fg-muted);padding:5px 0;font-size:12px}.calendar>.days-grid>.day{height:var(--day-height);max-height:var(--day-height);max-width:var(--day-width);min-height:var(--day-height);min-width:var(--day-width);width:var(--day-width);border:1px solid rgba(0,0,0,0);border-radius:2px;padding:10px 0}.calendar>.days-grid>.day:hover{border:1px solid var(--color-fg-primary);color:var(--color-fg-primary)}.calendar>.days-grid>.day.today{color:var(--color-fg-accent)}.calendar>.days-grid>.day.selected{background-color:var(--color-fg-primary);color:var(--color-fg-selected)}@media (max-width:480px){.container:not(.inline){-webkit-transform-origin:bottom!important;transform-origin:bottom!important;-webkit-transform:scaleY(0)!important;transform:scaleY(0)!important}.container:not(.inline).show{position:fixed!important;top:auto!important;bottom:0!important;left:0!important;right:0!important;-webkit-transform:scaleY(1)!important;transform:scaleY(1)!important}.container{width:100%}.calendars{grid-template-columns:repeat(1,1fr)}.calendars .calendar{box-sizing:border-box;width:100%}.calendars .calendar:nth-child(n+2){display:none}.calendars .calendar>.days-grid>.day{height:auto;max-height:unset;max-width:unset;min-height:unset;min-width:unset;width:auto}.calendars .calendar>.header:not(.no-next-month) .next-button{visibility:visible}}:host{--color-bg-inrange:#d5dbff;--color-bg-tooltip:#fff;--color-fg-tooltip:#333}.range-plugin-tooltip{background-color:var(--color-bg-tooltip);border-radius:var(--border-radius);color:var(--color-fg-tooltip);pointer-events:none;visibility:hidden;white-space:nowrap;z-index:1;margin-top:-4px;padding:4px 8px;font-size:12px;position:absolute;box-shadow:0 1px 3px rgba(0,0,0,.25)}.range-plugin-tooltip:before{content:"";border-top:5px solid rgba(0,0,0,.12);border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);position:absolute;bottom:-5px;left:calc(50% - 5px)}.range-plugin-tooltip:after{border-left:4px solid rgba(0,0,0,0);border-right:4px solid rgba(0,0,0,0);border-top:4px solid var(--color-bg-tooltip);content:"";position:absolute;bottom:-4px;left:calc(50% - 4px)}.container.range-plugin .calendar>.days-grid>.day{position:relative}.container.range-plugin .calendar>.days-grid>.day.in-range:last-of-type{border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.container.range-plugin .calendar>.days-grid>.day.in-range{background-color:var(--color-bg-inrange);border-radius:0}.container.range-plugin .calendar>.days-grid>.day.end,.container.range-plugin .calendar>.days-grid>.day.start{background-color:var(--color-fg-primary);color:var(--color-fg-selected)}.container.range-plugin .calendar>.days-grid>.day.start{border-top-right-radius:0;border-bottom-right-radius:0}.container.range-plugin .calendar>.days-grid>.day.start:after{border:8px solid rgba(0,0,0,0);border-left:8px solid var(--color-fg-primary);content:"";pointer-events:none;z-index:1;position:absolute;right:-14px}.container.range-plugin .calendar>.days-grid>.day.start.flipped{border-bottom-left-radius:0;border-bottom-right-radius:var(--border-radius);border-top-left-radius:0;border-top-right-radius:var(--border-radius)}.container.range-plugin .calendar>.days-grid>.day.start.flipped:after{border-left-color:rgba(0,0,0,0);border-right-color:var(--color-fg-primary);left:-14px;right:auto}.container.range-plugin .calendar>.days-grid>.day.end{border-top-left-radius:0;border-bottom-left-radius:0}.container.range-plugin .calendar>.days-grid>.day.end:after{border:8px solid rgba(0,0,0,0);border-right:8px solid var(--color-fg-primary);content:"";pointer-events:none;z-index:1;position:absolute;left:-14px}.container.range-plugin .calendar>.days-grid>.day.end.flipped{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:0;border-top-left-radius:var(--border-radius);border-top-right-radius:0}.container.range-plugin .calendar>.days-grid>.day.end.flipped:after{border-left-color:var(--color-fg-primary);border-right-color:rgba(0,0,0,0);left:auto;right:-14px}.container.range-plugin .calendar>.days-grid>.day.start.end{border-radius:var(--border-radius)}.container.range-plugin .calendar>.days-grid>.day.start.end:after{content:none}.container.range-plugin .calendar>.days-grid>div:not(.day)+.day.in-range{border-bottom-left-radius:var(--border-radius);border-top-left-radius:var(--border-radius)}.container.range-plugin .calendar>.days-grid>div:nth-child(7n).in-range{border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.container.range-plugin .calendar>.days-grid>div:nth-child(7n+1).in-range{border-bottom-left-radius:var(--border-radius);border-top-left-radius:var(--border-radius)}:host{--color-fg-primary:#5123a0;--color-fg-accent:#f69d0a;--color-bg-inrange:#f9f6fe;--color-btn-primary-border:#5123a0;--color-btn-primary-bg:#5123a0;--color-btn-primary-fg:#fff;--color-btn-primary-hover-bg:#6c46ae;--color-btn-primary-hover-border:#6c46ae;--color-btn-secondary-border:#c7bdd9;--color-btn-secondary-fg:#777;--color-btn-secondary-hover-border:#5123a0;--color-btn-secondary-hover-bg:#c7bdd9;--color-btn-secondary-hover-fg:#5123a0;--color-btn-secondary-hover-bg:#fff}.container.inline{box-shadow:none}.day{cursor:pointer!important}.preset-plugin-container{padding:12px}.preset-button{color:#5123a0;cursor:pointer;background:#fff;border:1px solid rgba(0,0,0,0);border-radius:5px;margin:0 6px 6px 0;padding:4px 8px;font-size:14px}.preset-button:hover{color:#5123a0;border-color:#5123a0}.footer-buttons{justify-content:flex-start!important}.apply-button{order:1}.cancel-button{order:2}.calendar:first-child{padding-left:0}.calendar:last-child{padding-right:0}@media (max-width:649px){.calendars .calendar:nth-child(n+2){display:none}} |