Created
November 11, 2015 12:16
-
-
Save egohub/5ef25f71423e5fa7f5ec to your computer and use it in GitHub Desktop.
Calendar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body { | |
margin: 0; | |
padding: 0; | |
background: #efefef; | |
font-family: 'noto sans myanmar', padauk, myanmar3, tharlon, pyidaungsu, sans-serif; | |
line-height: 1.8em; | |
} | |
.text-right { | |
text-align: right; | |
} | |
.calendar { | |
max-width: 60em; | |
margin: 0 auto; | |
background: #C6C4CE; | |
border: 1px solid #ddd; | |
} | |
.clndr-controls { | |
overflow: hidden; | |
color: #63558A; | |
background: #fff; | |
} | |
.clndr-control-button { | |
width: 10%; | |
float: left; | |
font-weight: bold; | |
font-size: 2em; | |
cursor: pointer; | |
background: #f5f5f5; | |
height: 70px; | |
line-height: 70px; | |
} | |
.clndr-control-button:hover { | |
opacity: 0.6; | |
} | |
.clndr-previous-button { | |
display: block; | |
text-align: center; | |
} | |
.clndr-next-button { | |
display: block; | |
text-align: center; | |
} | |
.month-title { | |
width: 80%; | |
float: left; | |
text-align: center; | |
font-weight: bold; | |
margin-top: 10px; | |
} | |
.mm-title { | |
font-weight: normal; | |
font-size: 0.8em; | |
color: #999; | |
} | |
.main { | |
width: 70%; | |
float: left; | |
} | |
.info { | |
width: 30%; | |
float: right; | |
position: relative; | |
} | |
.clndr-table { | |
background: #584C7C; | |
color: #fff; | |
font-size: 0.9em; | |
} | |
.clndr-table th { | |
width: 14.2%; | |
height: 30px; | |
padding: 4px 0; | |
font-size: 0.9em; | |
} | |
.clndr-table td { | |
background: #63558A; | |
padding: 8px; | |
} | |
td.day { | |
cursor: pointer; | |
} | |
.calendar-dow-0 .endate, | |
.calendar-dow-6 .endate, | |
.weekend, | |
.holiday { | |
color: #f66; | |
} | |
.mmdate { | |
color: #aaa; | |
font-size: 0.8em; | |
display: block; | |
height: 50px; | |
text-align: right; | |
line-height: 1.5em; | |
} | |
.endate { | |
font-size: 1.2em; | |
} | |
td.selected, td.day:active { | |
background: #584C7C; | |
} | |
.today .endate { | |
font-weight: bold; | |
background: yellow; | |
color: #555; | |
width: 30px; | |
height: 30px; | |
text-align: center; | |
line-height: 30px; | |
border-radius: 30px; | |
display: inline-block; | |
} | |
.moon { | |
float: right; | |
} | |
td.adjacent-month { | |
background: #756D8C; | |
color: #aaa; | |
} | |
.holiday-tag, .event-tag { | |
display: inline-block; | |
width: 10px; | |
height: 3px; | |
background: #f66; | |
float: right; | |
margin: 18px 5px 0 0; | |
} | |
.event-tag { | |
background: #fff; | |
} | |
.info { | |
font-size: 0.9em; | |
color: #584C7C; | |
} | |
.info-container { | |
overflow-y: auto; | |
} | |
.info-title { | |
height: 30px; | |
padding: 5px; | |
background: #756D8C; | |
overflow: hidden; | |
} | |
.info-title b { | |
color: #fff; | |
font-weight: normal; | |
} | |
.menu { | |
display: block; | |
float: right; | |
margin: 5px 8px 0 0; | |
cursor: pointer; | |
} | |
.today-button { | |
display: block; | |
margin: 2px 15px 0 0; | |
width: 26px; | |
height: 26px; | |
text-align: center; | |
line-height: 35px; | |
font-size: 0.6em; | |
color: #fff; | |
float: right; | |
background: url(../img/cal-g.png) no-repeat center center; | |
cursor: pointer; | |
} | |
.sm .today-button { | |
color: #555; | |
background: url(../img/cal.png) no-repeat center center; | |
font-size: 0.5em; | |
} | |
.options { | |
float: right; | |
margin-top: 20px; | |
} | |
.today-button:hover, .today-button:active { | |
opacity: 0.8; | |
} | |
.info-data { | |
padding: 15px; | |
font-size: 0.9em; | |
} | |
.holiday-box, .event-box { | |
margin-bottom: 10px; | |
background: #fdd; | |
border-radius: 2px; | |
} | |
.event-box { | |
background: #ffd; | |
} | |
.box-body { | |
overflow: hidden; | |
} | |
.box-body b { | |
display: block; | |
float: left; | |
width: 25%; | |
text-align: center; | |
font-size: 1.4em; | |
text-align: center; | |
line-height: 1.3em; | |
padding: 8px 0; | |
color: #63558A; | |
} | |
.holiday-box .box-body b { | |
border-right: 1px solid #ecc; | |
} | |
.event-box .box-body b { | |
border-right: 1px solid #eec; | |
} | |
.box-body b span { | |
display: block; | |
font-size: 0.5em; | |
font-weight: normal; | |
color: #666; | |
} | |
.box-body i { | |
color: #777; | |
padding: 15px 0 0 10px; | |
float: left; | |
} | |
.meta { | |
font-size: 0.8em; | |
color: #777; | |
background: #ddd; | |
padding: 10px; | |
line-height: 2.2em; | |
} | |
.unlucky { | |
color: #f77; | |
} | |
hr { | |
opacity: 0.2; | |
} | |
.sm { | |
display: none; | |
} | |
.page { | |
position: absolute; | |
top: 0; | |
right: 0; | |
width: 100%; | |
height: 100%; | |
background: #756D8C; | |
color: #fff; | |
display: none; | |
} | |
.page-title { | |
height: 30px; | |
padding: 5px; | |
background: #63558A; | |
overflow: hidden; | |
} | |
.close-page { | |
display: block; | |
width: 30px; | |
height: 30px; | |
background: #584C7C; | |
color: #fff; | |
border-radius: 30px; | |
text-align: center; | |
line-height: 30px; | |
font-weight: bold; | |
font-size: 1.2em; | |
cursor: pointer; | |
float: right; | |
} | |
.close-page:hover, .close-page:active { | |
opacity: 0.8; | |
} | |
.page .day { | |
color: #aaa; | |
font-size: 0.9em; | |
} | |
.page .event-box, .page .holiday-box { | |
margin-top: 20px; | |
} | |
.page .box-body i { | |
padding: 15px; | |
font-style: normal; | |
} | |
.page-data { | |
padding: 15px; | |
overflow-y: auto; | |
} | |
.page-endate { | |
font-weight: bold; | |
font-size: 1.2em; | |
} | |
.page-mmdate { | |
background: #C6C4CE; | |
font-size: 0.9em; | |
padding: 8px 8px 4px 8px; | |
margin-top: 20px; | |
color: #666; | |
border-radius: 2px; | |
} | |
@media screen and (max-width: 60em) { | |
.main { | |
width: 100%; | |
float: none; | |
} | |
.month-title { | |
text-align: left; | |
margin-left: 10px; | |
} | |
.clndr-table { | |
width: 100%; | |
} | |
.info { | |
width: 100%; | |
float: left; | |
} | |
.page { | |
position: fixed; | |
} | |
.info-container { | |
display: none; | |
} | |
.bg { | |
display: none; | |
} | |
.sm { | |
display: block; | |
} | |
.mmdate { | |
height: 30px; | |
} | |
.moon { | |
width: 12px; | |
margin-top: 8px; | |
} | |
.mmdate .sm { | |
font-size: 0.8em; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment