@media screen and (max-width: 1440px){
.cal-wrapper{
width:95%;
max-width:1400px;
margin:0 auto;
padding:0 15px
}
}
@media screen and (max-width: 1200px){
.month{
margin-bottom:30px
}
.invisible-year{
font-size:24px;
padding:0 15px
}
.month-name{
font-size:24px;
padding:10px
}
td{
height:110px
}
.date-number{
font-size:0.9em;
min-width:1.8em
}
.event-list{
font-size:0.8em
}
.navigation a{
font-size:24px;
padding:8px 15px
}
.mini-calendar-container, .mini-calendar-container *{
box-sizing: border-box;
max-width: 100%;
}
.mini-day,.mini-day-header{
height:18px;
font-size:10px
}
}
@media screen and (max-width: 1000px){
.mini-months-grid {
grid-template-columns: repeat(3,1fr);
gap: 6px;
padding: 6px;
box-sizing: border-box;
}
.month-name{
font-size:18px
}
.invisible-year{
font-size:18px;
padding:0 10px
}
td{
height:95px
}
th{
font-size:0.85em;
padding:6px 2px
}
.event-list{
font-size:0.7em
}
.event-item{
margin-bottom:3px;
line-height:1.1
}
.closed-text{
font-size:22px
}
.half-day-text{
font-size:22px
}
.navigation a{
font-size:18px;
padding:5px 10px
}
.toggle-label{
font-size:0.75em
}
.mini-months-grid{
grid-template-columns:repeat(3,1fr);
gap:6px;
padding:6px
}
.mini-day,.mini-day-header{
height:16px;
font-size:9px
}
.mini-month-name{
font-size:14px;
margin-bottom:4px
}
}
@media screen and (max-width: 850px){
td{
height:90px
}
th{
font-size:0.8em;
padding:4px 1px
}
.event-list{
font-size:0.65em
}
.closed-text{
font-size:18px
}
.half-day-text{
font-size:18px
}
.date-number{
font-size:0.8em
}
.day-content{
padding-left:22px
}
.mini-months-grid{
grid-template-columns:repeat(2,1fr);
gap:5px;
padding:5px
}
.mini-day,.mini-day-header{
height:14px;
font-size:8px
}
}
@media screen and (max-width: 800px){
.cal-wrapper{
width:100%;
padding:0 5px
}
.invisible-year{
font-size:16px;
padding:0 8px
}
table{
table-layout:fixed
}
.month-name{
font-size:18px
}
td{
height:85px
}
th{
font-size:0.8em;
padding:4px 1px
}
.event-list{
font-size:0.65em
}
.closed-text{
font-size:20px;
top:45%
}
.half-day-text{
font-size:20px
}
.date-number{
font-size:0.8em;
min-width:1.6em
}
.day-content{
padding-left:25px
}
.navigation a{
font-size:16px;
padding:4px 8px
}
.toggle-label{
font-size:0.75em
}
.event-item{
margin-bottom:2px;
line-height:1.1
}
.calendar-controls{
flex-direction:column;
align-items:flex-start;
padding:8px
}
.controls-inner{
flex-wrap:wrap;
gap:6px
}
.event-toggle{
flex:0 0 auto
}
.mini-calendar-container{
padding:0 5px
}
.mini-months-grid{
gap:4px;
padding:4px
}
.mini-month-name{
font-size:10px;
margin-bottom:1px
}
}
@media screen and (max-width: 768px){
/*???*/
/*???*/
/*???*/
body{
padding-top:120px;
}
.month{
scroll-margin-top:120px;
}
/*???*/
/*???*/
/*???*/
.calendar-controls{
padding:10px;
position:sticky;
top:0;
z-index:100;
background:#e6e6e6
}
.controls-inner{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
width:100%
}
.event-toggle{
display:flex;
align-items:center;
gap:6px
}
.toggle-label{
font-size:0.8em
}
table{
width:100%;
border-collapse:collapse
}
tr{
display:grid;
grid-template-columns:repeat(7,1fr);
width:100%
}
th,td{
display:block;
width:100%;
box-sizing:border-box;
overflow:hidden
}
th{
font-size:0.65em;
padding:4px 1px;
text-align:center
}
td{
height:80px;
position:relative
}
.mini-calendar-container{
margin-bottom:15px
}
.mini-months-grid{
gap:3px;
padding:3px
}
}
@media screen and (max-width: 555px){
.month{
margin-bottom:20px
}
.month-name{
margin-bottom:1px
}
.invisible-year{
font-size:16px;
padding:0 8px
}
.calendar-controls{
position:static
}
.event-toggle{
border-radius:4px
}
tr{
display:block
}
th{
display:none
}
td{
display:flex;
width:100%;
height:auto;
min-height:60px;
margin-bottom:1px;
padding:8px;
align-items:center
}
.empty{
display:none
}
.date-number{
position:relative;
font-size:0.9em;
padding:4px 8px;
min-width:auto;
border:none;
background:none;
font-weight:bold
}
.day-content{
flex:1;
padding:0 0 0 10px;
display:flex;
align-items:center
}
.event-list{
font-size:0.75em;
max-height:none;
margin:0
}
.event-item{
margin:2px 0
}
.closed-text,.half-day-text{
position:static;
transform:none;
font-size:16px;
margin-left:10px
}
td.holiday,td.payday{
background:none
}
td.holiday{
border-left:4px solid #ffebee
}
td.payday{
border-left:4px solid #e8f5e9
}
.today{
background:rgba(0,0,0,0.05)
}
.controls-inner{
grid-template-columns:1fr;
gap:10px
}
.event-toggle{
justify-content:space-between;
padding:8px;
background:#fff;
border-radius:0;
}
.toggle-label{
font-size:0.9em
}
.payday-icon{
position:static;
transform:none;
width:20px;
height:20px;
opacity:0.8;
margin-left:10px
}
.mini-calendar-container{
padding:0
}
.mini-months-grid{
grid-template-columns:repeat(2,1fr);
gap:2px;
padding:2px
}
.mini-day,.mini-day-header{
height:12px;
font-size:7px
}
.mini-month-name{
font-size:10px;
margin-bottom:1px
}
}
@media screen and (max-width:1440px){
.mini-calendar-container{
width:95%;
max-width:950px;
margin:0 auto;
padding:0 10px
}
.mini-months-grid{
grid-template-columns:repeat(6,1fr);
gap:12px;
padding:12px
}
}
@media screen and (max-width:1200px){
.mini-months-grid{
grid-template-columns:repeat(4,1fr);
gap:10px
}
.mini-month{
margin-bottom:10px
}
.mini-month-name{
font-size:14px;
padding:4px;
margin-bottom:4px
}
.mini-day,.mini-day-header{
height:20px;
font-size:11px
}
}
@media screen and (max-width:1050px){
.mini-months-grid{
grid-template-columns:repeat(3,1fr);
gap:8px;
padding:8px 10px
}
.mini-month-name{
font-size:13px;
padding:3px
}
.mini-day,.mini-day-header{
height:18px;
font-size:10px
}
}
@media screen and (max-width:1000px) and (min-width:991px){
.mini-calendar-container{
width:100%;
max-width:none;
padding:0 8px
}
.mini-months-grid{
grid-template-columns:repeat(3,1fr);
gap:6px;
padding:6px 8px
}
.mini-month{
margin-bottom:8px
}
.mini-month-name{
font-size:13px;
padding:3px;
margin-bottom:3px
}
.mini-day,.mini-day-header{
height:16px;
font-size:9px
}
.mini-days-grid{
border:1px solid #e4e4e4
}
}
@media screen and (max-width:990px){
.mini-calendar-container{
width:100%;
max-width:none;
padding:0 6px;
margin-bottom:15px
}
.mini-months-grid{
grid-template-columns:repeat(3,1fr);
gap:6px;
padding:6px
}
.mini-month{
margin-bottom:6px
}
.mini-month-name{
font-size:12px;
padding:3px;
margin-bottom:2px;
font-weight:600
}
.mini-day,.mini-day-header{
height:15px;
font-size:9px;
border-right:1px solid #e4e4e4;
border-bottom:1px solid #e4e4e4
}
.mini-days-grid{
border-left:1px solid #e4e4e4;
border-top:1px solid #e4e4e4
}
.mini-day.has-payday{
background-color:#e8f5e9
}
.mini-day.has-holiday{
background-color:#ffd9df
}
.mini-day.has-special-holiday{
background-color:#fff3e0
}
.mini-day.has-events{
background-color:#e3f2fd
}
}
@media screen and (max-width:850px){
.mini-months-grid{
grid-template-columns:repeat(2,1fr);
gap:5px;
padding:5px
}
.mini-month-name{
font-size:11px
}
.mini-day,.mini-day-header{
height:14px;
font-size:8px
}
}
@media screen and (max-width:768px){
.mini-calendar-container{
padding:0 4px;
margin-bottom:12px
}
.mini-months-grid{
gap:4px;
padding:4px
}
.mini-month-name{
font-size:11px;
margin-bottom:2px
}
.calendar-controls{
height:52px;
padding:0;
display:flex;
align-items:center;
margin-bottom:20px;
flex-wrap:wrap;
background-color:#f5f5f5;
border-bottom:1px solid #ddd;
width:100%;
box-sizing:border-box;
position:fixed;
top:0;
left:0;
right:0;
z-index:100
}
body{
margin:0;
padding-top:90px
}
#mini-calendar{
margin-top:20px
}
.month{
scroll-margin-top:90px
}
.cal-wrapper{
padding-top:20px
}
@media screen and (max-width:768px){
body{
padding-top:120px
}
.month{
scroll-margin-top:120px
}
}
}
@media screen and (max-width:555px){
.mini-calendar-container{
padding:0 3px;
margin-bottom:10px
}
.mini-months-grid{
grid-template-columns:repeat(2,1fr);
gap:3px;
padding:3px
}
.mini-month-name{
font-size:10px;
margin-bottom:1px
}
.mini-day,.mini-day-header{
height:12px;
font-size:7px
}
}