macUI/app/calendar/css/style.css

*{margin:0;padding:0;font-style:normal}ul,li{list-style:none}body{font-family:pingfang sc,helvetica neue,helvetica,microsoft yahei,arial,sans-serif;font-size:14px;color:#333}h2{font-weight:400}body{overflow:hidden;width:100%;background-size:cover;background-color:#313131}#calendar{width:910px;margin:0 auto;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#calendar .header{position:relative;width:100%;height:37px;border-bottom:1px solid #b4b2b3;background-color:#e7e5e7;border-top-left-radius:5px;border-top-right-radius:5px}#calendar .header ul{position:absolute;left:420px;top:8px;overflow:hidden;border-radius:3px;font-size:0}#calendar .header ul li{display:inline-block;width:62px;height:24px;line-height:24px;font-size:14px;text-align:center;background-color:#fff;cursor:default}#calendar .header ul li.cur{color:#fff;background-color:#6f6e6f}#calendar .sidebar{float:left;width:167px;height:609px;border-right:1px solid #d4dad3;background-color:rgba(255,255,255,.9)}#calendar .sidebar .wrapper{width:100%;padding:12px 0;border-bottom:1px solid #c8d6c7}#calendar .sidebar .title{position:relative;text-align:center}#calendar .sidebar .btn{padding:0 10px;position:absolute;cursor:default}#calendar .sidebar .btn-prev{left:8px}#calendar .sidebar .btn-next{right:8px}#calendar .sidebar .date{}#calendar .sidebar .week{height:20px;padding-top:10px;line-height:20px;font-size:0;text-align:center}#calendar .sidebar .week li{display:inline-block;font-size:12px;width:22px;height:20px;text-align:center}#calendar .sidebar .day{text-align:center;font-size:0}#calendar .sidebar .day li{display:inline-block;width:18px;height:18px;margin:2px;line-height:18px;font-size:12px;text-align:center;color:#ccc;cursor:default}#calendar .sidebar .day li.cur-month{color:#333}#calendar .sidebar .day li.cur-day{color:#fff;background-color:#ff6d6d;border-radius:50%}#calendar .container{position:relative;float:left;width:742px;height:604px;background-color:#fff}#calendar .container .render{display:none}#calendar .container .render-show{display:block}#renderMonth{padding-top:5px}#renderMonth .title{padding-left:16px;line-height:42px;font-size:30px}#renderMonth .week{height:33px;line-height:33px;border-bottom:1px solid #c8c6cc;font-size:0}#renderMonth .week li{position:relative;right:12px;display:inline-block;width:106px;font-size:18px;text-align:right}#renderMonth .day{font-size:0}#renderMonth .day li{display:inline-block;width:106px;height:88px;padding:6px;border-right:1px solid #e6e5e6;border-bottom:1px solid #e6e5e6;box-sizing:border-box;font-size:14px;vertical-align:top;color:#ccc;background-color:#fff}#renderMonth .day li.cur-month{color:#333}#renderMonth .day li.cur-day{color:#333}#renderMonth .day li.weekend{background-color:#f4f6f7}#renderMonth .day li p{margin-bottom:8px}#renderMonth .day li .info{height:20px}#renderMonth .day li .lunar{float:left}#renderMonth .day li .first-lunarday{position:relative;left:-5px;border-bottom:1px solid #ff6d6d}#renderMonth .day li .first-lunarJanuary{position:relative;left:-5px;border-bottom:2px solid #ff6d6d}#renderMonth .day li .date{float:right}#renderMonth .day li.cur-day .date{}#renderMonth .day li.cur-day .date em{display:inline-block;width:20px;height:20px;line-height:20px;margin-right:2px;text-align:center;color:#fff;background-color:#ff6d6d;border-radius:50%}#renderMonth .day li .festival{display:none;padding-left:10px;height:16px;line-height:16px;color:#333;background-color:#f9d8f8;cursor:default}#renderMonth .day li .festival.show{display:block}#renderMonth .day li .term{display:none;color:#333;height:16px;line-height:16px;padding-left:10px;background-color:#a7d1ed;cursor:default}#renderMonth .day li .term.show{display:block}#renderFullYear{padding-top:5px}#renderFullYear>.title{width:617px;height:42px;padding:0 0 10px 16px}#renderFullYear>.title h2{display:inline-block;line-height:42px;font-size:30px}#renderFullYear>.title p{float:right;margin-top:10px;margin-right:15px}#renderFullYear>.title .lunar-year{}#renderFullYear>.title .lunar-year i{display:inline-block;margin:9px 6px 0 0;width:16px;height:3px;background-color:#ff6d6d;vertical-align:top}#renderFullYear>.title .info{}#renderFullYear>.title .info i{display:inline-block;width:14px;height:1px;margin-top:-3px;margin-right:5px;background-color:#ff6d6d;vertical-align:middle}#renderFullYear .month{font-size:0}#renderFullYear .month .item{display:inline-block;width:25%;padding:0 10px;box-sizing:border-box}#renderFullYear .month .title{padding-left:8px;font-size:18px;color:#ff6d6d}#renderFullYear .month .week{font-size:0;text-align:center}#renderFullYear .month .week li{display:inline-block;width:22px;height:20px;line-height:20px;font-size:12px;color:#ccc}#renderFullYear .month .day{text-align:center;font-size:0}#renderFullYear .month .day li{display:inline-block;width:18px;height:18px;line-height:18px;margin:2px;text-align:center;color:#ccc;font-size:10px;cursor:default}#renderFullYear .month .day li.lunar-first{border-bottom:1px solid #ff6d6d}#renderFullYear .month .day li.lunar-january{border-bottom:2px solid #ff6d6d}#renderFullYear .month .day li.cur-month{color:#333}#renderFullYear .month .day li.cur-day{color:#fff;background-color:#ff6d6d;border-radius:50%}#control{position:absolute;top:16px;right:14px;font-size:0}#control input{display:inline-block;height:19px;text-align:center;border:1px solid #dadada;border-radius:4px;font-size:14px;color:#333;background:#fff;vertical-align:top;outline:0}#control .btn{width:21px}#control .btn-prev{}#control .btn-next{}#control .today{width:52px}#popup{display:none;position:absolute;left:200px;top:100px;width:260px;height:104px;background-color:#f4f6f7;box-shadow:0 0 2px rgba(0,0,0,.3);border-radius:6px;border:1px solid #efefef}#popup.popup-right{}#popup .title{height:43px;padding:0 15px;line-height:43px;margin-bottom:8px;border-bottom:1px solid #d6d6d6}#popup .arrow{display:none;position:absolute;top:36px;width:0;height:0;border-width:14px;border-style:solid}#popup .arrow:after{content:"";position:absolute;top:-14px;width:0;height:0;border-width:14px;border-style:dashed}#popup .arrow-left{left:-29px;border-color:transparent #d6d6d6 transparent transparent}#popup.popup-left .arrow-left{display:block}#popup .arrow-left:after{left:-13px;border-color:transparent #f4f6f7 transparent transparent}#popup .arrow-right{right:-29px;border-color:transparent transparent transparent #d6d6d6}#popup.popup-right .arrow-right{display:block}#popup .arrow-right:after{right:-13px;border-color:transparent transparent transparent #f4f6f7}#popup .date,#popup .lunar{padding:0 15px;line-height:20px}