@prettyy/ui/dist/css/datepicker/panel.css

vue2 UI

.vl-date-picker--panel-month .vl-date-picker--panel-value,.vl-date-picker--panel-year .vl-date-picker--panel-value{width:60px;height:40px}.vl-date-picker--panel-month .vl-date-picker--panel-value--lunar,.vl-date-picker--panel-year .vl-date-picker--panel-value--lunar{transform:scale(.9);margin-top:0}.vl-date-picker--panel-quarter .vl-date-picker--table-body .vl-date-picker--table-row,.vl-date-picker--panel-week .vl-date-picker--table-body .vl-date-picker--table-row{color:unset;transition:color 312ms,background-color 312ms;border-radius:20px}.vl-date-picker--panel-quarter .vl-date-picker--table-body .vl-date-picker--table-row .vl-date-picker--panel-value:not(.vl-date-picker--panel-value-disabled),.vl-date-picker--panel-week .vl-date-picker--table-body .vl-date-picker--table-row .vl-date-picker--panel-value:not(.vl-date-picker--panel-value-disabled){background-color:transparent}.vl-date-picker--panel-quarter .vl-date-picker--table-body .vl-date-picker--table-row-active,.vl-date-picker--panel-week .vl-date-picker--table-body .vl-date-picker--table-row-active{background-color:color-mix(in srgb,#9155fd 10%,#fff);color:#9155fd;transition-duration:312ms}.vl-date-picker--panel-quarter .vl-date-picker--table-body .vl-date-picker--table-row-active .vl-date-picker--panel-value:not(.vl-date-picker--panel-value-disabled),.vl-date-picker--panel-week .vl-date-picker--table-body .vl-date-picker--table-row-active .vl-date-picker--panel-value:not(.vl-date-picker--panel-value-disabled){color:inherit}.vl-date-picker--panel-quarter .vl-date-picker--table-body .vl-date-picker--table-row:hover,.vl-date-picker--panel-week .vl-date-picker--table-body .vl-date-picker--table-row:hover{background-color:color-mix(in srgb,#9155fd 10%,#fff);transition-duration:312ms}.vl-date-picker--table+.vl-date-picker--panel-time{border-top:1px solid #ededed;padding-top:5px}.vl-date-picker--table+.vl-date-picker--panel-time .vl-date-picker--panel-time--value{position:relative}.vl-date-picker--table+.vl-date-picker--panel-time .vl-date-picker--panel-time--value:hover .vl-date-picker--panel-time-wheel{display:block}.vl-date-picker--table+.vl-date-picker--panel-time .vl-date-picker--panel-time--value:hover>span:first-child{color:#9155fd}.vl-date-picker--table+.vl-date-picker--panel-time .vl-date-picker--panel-time-wheel{display:none;position:absolute;bottom:40px;left:-10px;background-color:#fff;width:80px}.vl-date-picker--panel-value-active,.vl-date-picker--panel-value:not(.vl-date-picker--panel-value-disabled):hover{background-color:color-mix(in srgb,#9155fd 10%,#fff);transition-duration:312ms}.vl-date-picker--table+.vl-date-picker--panel-time .vl-date-picker--panel-time-wheel:after{content:"";display:block;position:absolute;left:36px;border:4px solid;border-color:transparent #fff #fff transparent;transform:rotate(45deg);bottom:-4px;box-shadow:2px 2px 2px 1px #ddd}.vl-date-picker--panel-time--body{margin:0 auto;display:flex;flex-direction:row;justify-content:center;line-height:24px}.vl-date-picker--panel-time--value{width:60px;padding:10px 0}.vl-date-picker--panel-time--value>span:first-child{font-size:18px;color:#444;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;display:inline-block}.vl-date-picker--panel-time--sep{flex-shrink:0;width:24px;padding:10px 0}.vl-date-picker--panel-time-wheel{border-radius:10px;box-shadow:0 0 12px rgba(0,0,0,.12);overflow:hidden}.vl-date-picker--panel-time-wheel-value{color:#9155fd;padding:2px 0;border-top:1px solid;border-bottom:1px solid;background:color-mix(in srgb,#9155fd 10%,#fff)}.vl-date-picker--panel-time-wheel-next,.vl-date-picker--panel-time-wheel-prev{color:#aaa}.vl-date-picker--panel-time-wheel-next>span,.vl-date-picker--panel-time-wheel-prev>span{display:block;border:1px solid #EEE}.vl-date-picker--panel-time-wheel-next>span:not(.vl-date-picker--panel-value-disabled):hover,.vl-date-picker--panel-time-wheel-prev>span:not(.vl-date-picker--panel-value-disabled):hover{color:color-mix(in srgb,#9155fd 90%,#fff)}.vl-date-picker--panel-time-wheel-next>span:last-child,.vl-date-picker--panel-time-wheel-prev>span:first-child{color:#ccc;border:1px solid #f0f0f0}.vl-date-picker--panel-time-wheel-next-button,.vl-date-picker--panel-time-wheel-prev-button{cursor:pointer}.vl-date-picker--panel-body{box-sizing:border-box}.vl-date-picker--table{border-collapse:collapse;width:280px;height:280px;display:flex;justify-content:center;align-items:center;flex-direction:column}.vl-date-picker--table-body{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-around}.vl-date-picker--table-row{display:flex;justify-content:space-around;align-items:center;flex-direction:row}.vl-date-picker--table-cell{cursor:default;border:none;padding:0}.vl-date-picker--table-header{width:100%}.vl-date-picker--table-header .vl-date-picker--table-cell{font-weight:400;padding:10px 0;border:none}.vl-date-picker--panel-header{display:flex;justify-content:space-around;align-items:center;font-size:larger;color:#555;line-height:25px}.vl-date-picker--panel-header .vl-icon{cursor:pointer;flex-shrink:0}.vl-date-picker--panel-header-next,.vl-date-picker--panel-header-prev{cursor:default;flex-shrink:0}.vl-date-picker--panel-header-month,.vl-date-picker--panel-header-year{cursor:pointer;padding:0 2px}.vl-date-picker--panel-header-month:hover,.vl-date-picker--panel-header-year:hover{color:color-mix(in srgb,#9155fd 90%,#fff)}.vl-date-picker--panel-header-container{display:flex;justify-content:space-between;align-items:center}.vl-date-picker--panel-value{width:40px;height:40px;display:flex;position:relative;flex-direction:column;justify-content:center;align-items:center;font-size:14px;border:1px solid transparent;margin:0 auto;background-clip:padding-box;box-sizing:border-box;border-radius:8px;transition:border-color 618ms,background-color 618ms,color 618ms;cursor:default}.vl-date-picker--panel-value-active{color:#9155fd}.vl-date-picker--panel-value-highlight{background-color:rgba(98,163,226,.07);transition-duration:312ms}.vl-date-picker--panel-value-current{font-weight:700;color:#9155fd}.vl-date-picker--panel-value-current .vl-date-picker--panel-value--lunar{font-weight:400}.vl-date-picker--panel-value-overflow{color:#888}.vl-date-picker--panel-value-overflow .vl-date-picker--panel-value--lunar{color:#aaa}.vl-date-picker--panel-value-disabled{color:#aaa!important;cursor:not-allowed}.vl-date-picker--panel-value-disabled .vl-date-picker--panel-value--lunar{text-shadow:none;color:#ccc}.vl-date-picker--panel-value--solar{position:relative}.vl-date-picker--panel-value--solar.is-festival:after{content:"";display:block;width:3px;height:3px;background-color:#ffb7b7;position:absolute;right:-5px;top:0;border-radius:50%}.vl-date-picker--panel-value--lunar{font-size:12px;display:block;transform:scale(.8);margin-top:-5px;color:#888}.vl-date-picker--panel-value--lunar.is-festival{color:#d58237}.vl-date-picker--panel-value--marker{position:absolute;text-align:left;left:0;top:0;width:100%;height:100%}