/**
 * @name 格子
 * @author ciaoca
 * @email ciaoca@gmail.com
 * @printMode A3,A4,A5H
 * @license Released under the MIT license
 */

:root{
--day-color:#434a54;
--saturday-color:#4a89dc;
--sunday-color:#da4453;
--month-size:1.8rem;
--week-size:1.4rem;
--day-num-size:1.6rem;
--day-name-size:1rem;
--day-tip-size:1rem;
--year-week-size:1rem;
--border-color:#e6e9ed;
--border-size:1px;
}


/**
 * 日历
 * ------------------------------ */
.calendar{position:relative;margin:0 10px;color:var(--day-color);text-align:center;}
.calendar section + section{margin-top:40px;}

.calendar .hd{position:relative;font-weight:bold;font-size:var(--month-size);line-height:46px;}
.calendar .hd span:after{margin-left:0.2em;}
.calendar .hd span + span{margin-left:0.5em;}
.calendar .hd .year:after{content:'年';}
.calendar .hd .month:after{content:'月';}

.calendar .bd{border-top:var(--border-size) solid var(--border-color);border-right:var(--border-size) solid var(--border-color);}
.calendar .bd ol{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.calendar .bd li{box-sizing:border-box;position:relative;min-width:0;border-bottom:var(--border-size) solid var(--border-color);border-left:var(--border-size) solid var(--border-color);
flex:0 0 14.25%;
}
.calendar .bd li:nth-child(7n){
flex-basis:14.5%;
}


/* 星期 */
.calendar .weeks{font-weight:bold;font-size:var(--week-size);line-height:32px;}
.calendar .weeks li:after{display:none;margin-left:0.25em;font-weight:normal;font-size:0.9em;vertical-align:top;opacity:0.8;}

.calendar .weeks li.week_0:before{content:'日';}
.calendar .weeks li.week_1:before{content:'一';}
.calendar .weeks li.week_2:before{content:'二';}
.calendar .weeks li.week_3:before{content:'三';}
.calendar .weeks li.week_4:before{content:'四';}
.calendar .weeks li.week_5:before{content:'五';}
.calendar .weeks li.week_6:before{content:'六';}

.calendar .weeks li.week_0:after{content:'SUN';}
.calendar .weeks li.week_1:after{content:'MON';}
.calendar .weeks li.week_2:after{content:'TUE';}
.calendar .weeks li.week_3:after{content:'WED';}
.calendar .weeks li.week_4:after{content:'THU';}
.calendar .weeks li.week_5:after{content:'FRI';}
.calendar .weeks li.week_6:after{content:'STA';}

/* 日期 */
.calendar .days{line-height:20px;}
.calendar .days .item{position:relative;padding:6px 0;}
.calendar .days .item:before{position:absolute;top:2px;left:2px;font-size:var(--day-tip-size);line-height:1;opacity:0.5;}

.calendar .days span{display:block;}
.calendar .days .num{font-size:var(--day-num-size);}
.calendar .days .name{overflow:hidden;font-size:var(--day-name-size);line-height:16px;text-overflow:ellipsis;white-space:nowrap;}
.calendar .days .week{position:absolute;bottom:0;left:2px;color:rgba(0,0,0,0.3);font-size:var(--year-week-size);line-height:1;}

.calendar .days .sat{color:var(--saturday-color);}
.calendar .days .sun{color:var(--sunday-color);}
.calendar .days .holiday{color:var(--sunday-color);}
.calendar .days .workday{color:var(--day-color);}

.calendar .days .now .item{background-color:#d44;color:#fff;}
.calendar .days .holiday .item:before{content:'休';}
.calendar .days .workday .item:before{content:'班';}
.calendar .days .other .item:before{opacity:1;}

.calendar .days .other .item{opacity:0.4;}

/* 隐藏前后月份的日期 */
.calendar.hide_fillday .days .other{background-color:transparent;}
.calendar.hide_fillday .days .other .item{visibility:hidden;}

/* 隐藏周数 */
.calendar.hide_yearweek .days .week{display:none;}


/**
 * 打印模式（默认 A4 纵向）
 * ------------------------------ */
body.print{
--day-color:#000;
--saturday-color:#00f;
--sunday-color:#f00;
--month-size:4rem;
--week-size:2.2rem;
--day-num-size:3.6rem;
--day-name-size:1.6rem;
--day-tip-size:1.6rem;
--year-week-size:1.4rem;
--border-color:#333;
--border-size:2px;
}
body.print .calendar{display:block;}
body.print .calendar section{margin:0;}

body.print .calendar .hd{line-height:120px;}
body.print .calendar .hd span{vertical-align:top;}
body.print .calendar .hd span:after{font-size:0.9em;vertical-align:top;}
body.print .calendar .hd .month{margin-left:calc(var(--month-size) / 2);font-size:1.8em;}
body.print .calendar .hd .month:after{margin-left:calc(var(--month-size) / 2);font-size:calc(var(--month-size) * 0.9);}

body.print .calendar .weeks{line-height:60px;}
body.print .calendar .weeks li:after{display:inline;}

body.print .calendar .days .item{height:110px;padding:12px;}
body.print .calendar .days .item:before{top:12px;left:auto;right:12px;}
body.print .calendar .days .num{font-weight:bold;line-height:40px;text-align:left;}
body.print .calendar .days .name{line-height:24px;text-align:left;white-space:normal;}
body.print .calendar .days .week{bottom:8px;left:12px;}
body.print .calendar .days .now .item{background-color:transparent;color:var(--day-color);}
body.print .calendar .days .now.sat .item{color:var(--saturday-color);}
body.print .calendar .days .now.sun .item{color:var(--sunday-color);}
body.print .calendar .days .now.holiday .item{color:var(--sunday-color);}
body.print .calendar .days .now.workday .item{color:var(--day-color);}

body.print .calendar .days .other .item{opacity:0.5;}

/* A3 纵向 */
body.print.a3{
--month-size:5rem;
--week-size:2.8rem;
--day-num-size:6rem;
--day-name-size:2rem;
--day-tip-size:2rem;
--year-week-size:1.6rem;
}
body.print.a3 .calendar .hd{line-height:160px;}
body.print.a3 .calendar .weeks{line-height:80px;}
body.print.a3 .calendar .days .item{height:170px;padding:16px;}
body.print.a3 .calendar .days .item:before{top:16px;right:16px;}
body.print.a3 .calendar .days .num{line-height:60px;}
body.print.a3 .calendar .days .name{line-height:28px;}
body.print.a3 .calendar .days .week{bottom:12px;left:16px;}

/* A5 横向 */
body.print.a5h{
--month-size:2rem;
--week-size:1.8rem;
--day-num-size:2.4rem;
--day-name-size:1.2rem;
--day-tip-size:1.2rem;
--year-week-size:1.2rem;
}
body.print.a5h .calendar .hd{line-height:60px;}
body.print.a5h .calendar .weeks{line-height:50px;}
body.print.a5h .calendar .days .item{height:50px;padding:4px 8px;}
body.print.a5h .calendar .days .num{line-height:30px;}
body.print.a5h .calendar .days .name{line-height:20px;text-align:right;}
body.print.a5h .calendar .days .week{bottom:4px;left:8px;line-height:20px;}


@media (min-width:414px) {
:root{
--day-num-size:1.8rem;
--day-name-size:1.1rem;
}
.calendar .days .item{padding:8px 0;}
.calendar .days .item:before{top:3px;left:3px;}
.calendar .days .week{bottom:1px;left:3px;}
}


/* iPad */
@media (min-width:768px) {
.calendar{
display:flex;
flex-wrap:wrap;
}
.calendar section{margin-left:2%;padding-top:40px;
flex:0 0 49%;
}
.calendar section:nth-child(2n+1){margin-left:0;}
.calendar section + section{margin-top:0;}
}


@media (min-width:1024px) {
:root{
--month-size:2rem;
--week-size:1.6rem;
--day-num-size:2rem;
--day-name-size:1.2rem;
}
.calendar{margin-left:20px;margin-right:20px;}
.calendar section{margin-left:4%;
flex:0 0 48%;
}
.calendar .weeks{line-height:40px;}
.calendar .days .item{padding:12px 0;}
.calendar .days .item:before{top:4px;left:4px;}
.calendar .days .num{line-height:24px;}
.calendar .days .name{line-height:20px;}
.calendar .days .week{bottom:2px;left:4px;}
}


/* 桌面端分界线 */
@media (min-width:1280px) {
:root{
--month-size:2.4rem;
--week-size:1.8rem;
--day-num-size:2.4rem;
--day-name-size:1.4rem;
--day-tip-size:1.2rem;
--year-week-size:1.2rem;
}
.calendar .hd{line-height:50px;}
.calendar .weeks{line-height:50px;}
.calendar .days .item{
transition-property:background-color;
transition-duration:0.2s;
}
.calendar .days .item:hover{background-color:#e6e9ed;}
.calendar .days .num{line-height:28px;}
.calendar .days .name{line-height:24px;}
}


@media (min-width:1600px) {
.calendar{margin-left:40px;margin-right:40px;}
.calendar section{
flex:0 0 31%;
}
.calendar section,
.calendar section:nth-child(2n+1){margin-left:3.5%;}
.calendar section:nth-child(3n+1){margin-left:0;}
}


@media (min-width:1920px) {
.calendar{margin:80px;}
}


/* 打印 */
@media print {
.calendar{margin:0;}
.calendar section{margin:0;padding:0;page-break-before:always;}
}
