forked from sent/waves
374 lines
9.6 KiB
CSS
374 lines
9.6 KiB
CSS
/*!
|
|
* dyCalendar is a JavaScript library for creating Calendar.
|
|
*
|
|
* Author: Yusuf Shakeel
|
|
* https://github.com/yusufshakeel
|
|
*
|
|
* GitHub Link: https://github.com/yusufshakeel/dyCalendarJS
|
|
*
|
|
* MIT license
|
|
* Copyright (c) 2016 Yusuf Shakeel
|
|
*
|
|
* Date: 2014-08-17 sunday
|
|
*/
|
|
.dycalendar-container {
|
|
display: inline-block;
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.dycalendar-container.round-edge {
|
|
border-radius: 5%;
|
|
-o-border-radius: 5%;
|
|
-moz-border-radius: 5%;
|
|
-webkit-border-radius: 5%;
|
|
}
|
|
|
|
/*================================== DAY CALENDAR ========================*/
|
|
/*
|
|
* day calendar style
|
|
*-------------------------------------------------*/
|
|
.dycalendar-day-container {
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.dycalendar-day-container div {
|
|
padding: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.dycalendar-day-container .dycalendar-span-day {
|
|
font-size: 110%;
|
|
}
|
|
|
|
.dycalendar-day-container .dycalendar-span-date {
|
|
font-size: 250%;
|
|
}
|
|
|
|
.dycalendar-day-container .dycalendar-span-month-year {
|
|
font-size: 90%;
|
|
}
|
|
|
|
/*================================== DAY CALENDAR ENDS HERE ===============*/
|
|
/*================================== MONTH CALENDAR DEFAULT ========================*/
|
|
/*
|
|
* month calendar style
|
|
*-------------------------------------------------*/
|
|
.dycalendar-month-container {
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.dycalendar-month-container div {
|
|
padding: 0;
|
|
}
|
|
|
|
.dycalendar-month-container .dycalendar-header {
|
|
position: relative;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.dycalendar-month-container .dycalendar-header {
|
|
text-align: left;
|
|
}
|
|
|
|
.dycalendar-month-container .dycalendar-header .dycalendar-prev-next-btn {
|
|
position: absolute;
|
|
top: 0;
|
|
cursor: pointer;
|
|
color: var(--sat-txt);
|
|
padding: 10px;
|
|
font-size: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.dycalendar-month-container .dycalendar-header .dycalendar-prev-next-btn:hover {
|
|
background: var(--bgHvr);
|
|
}
|
|
|
|
.dycalendar-month-container
|
|
.dycalendar-header
|
|
.dycalendar-prev-next-btn.prev-btn {
|
|
right: 40px;
|
|
}
|
|
|
|
.dycalendar-month-container
|
|
.dycalendar-header
|
|
.dycalendar-prev-next-btn.next-btn {
|
|
right: 0;
|
|
}
|
|
|
|
.dycalendar-month-container table {
|
|
width: 100%;
|
|
}
|
|
|
|
.dycalendar-month-container .dycalendar-body table tr td {
|
|
width: 42px;
|
|
height: 42px;
|
|
padding: 0;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 200ms ease-in-out;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.dycalendar-month-container
|
|
.dycalendar-body
|
|
table
|
|
tr:not(:first-child)
|
|
td:not(.dycalendar-today-date):hover {
|
|
background: var(--bgHvr);
|
|
}
|
|
|
|
.dycalendar-month-container .dycalendar-body table tr:first-child td {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.dycalendar-today-date {
|
|
background: var(--clrPrm);
|
|
color: var(--alt-txt);
|
|
}
|
|
|
|
/*================================== MONTH CALENDAR ENS HERE ===============*/
|
|
/*================================== DYCALENDAR SKIN =======================*/
|
|
/*
|
|
* calendar skin (default skin)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.gradient {
|
|
background: #fff;
|
|
background: linear-gradient(#fff, #d3d3d3);
|
|
background: -o-linear-gradient(#fff, #d3d3d3);
|
|
background: -moz-linear-gradient(#fff, #d3d3d3);
|
|
background: -webkit-linear-gradient(#fff, #d3d3d3);
|
|
}
|
|
|
|
/*
|
|
* calendar skin (skin-black)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.skin-black {
|
|
color: #fff;
|
|
background-color: #111;
|
|
border: 0;
|
|
}
|
|
|
|
.dycalendar-container.skin-black.gradient {
|
|
background: #111;
|
|
background: linear-gradient(#555, #111);
|
|
background: -o-linear-gradient(#555, #111);
|
|
background: -moz-linear-gradient(#555, #111);
|
|
background: -webkit-linear-gradient(#555, #111);
|
|
}
|
|
|
|
.dycalendar-container.skin-black .dycalendar-today-date,
|
|
.dycalendar-container.skin-black .dycalendar-target-date {
|
|
background-color: #fff;
|
|
color: #111;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/*
|
|
* calendar skin (skin-blue)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.skin-blue {
|
|
color: #fff;
|
|
background-color: #3c99d3;
|
|
border: 0;
|
|
}
|
|
|
|
.dycalendar-container.skin-blue.gradient {
|
|
background: #3c99d3;
|
|
background: linear-gradient(#5ebbf5, #3c99d3);
|
|
background: -o-linear-gradient(#5ebbf5, #3c99d3);
|
|
background: -moz-linear-gradient(#5ebbf5, #3c99d3);
|
|
background: -webkit-linear-gradient(#5ebbf5, #3c99d3);
|
|
}
|
|
|
|
.dycalendar-container.skin-blue .dycalendar-today-date,
|
|
.dycalendar-container.skin-blue .dycalendar-target-date {
|
|
background-color: #fff;
|
|
color: #3c99d3;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/*
|
|
* calendar skin (skin-green)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.skin-green {
|
|
color: #fff;
|
|
background-color: #2bb063;
|
|
border: 0;
|
|
}
|
|
|
|
.dycalendar-container.skin-green.gradient {
|
|
background: #2bb063;
|
|
background: linear-gradient(#3dd175, #2bb063);
|
|
background: -o-linear-gradient(#3dd175, #2bb063);
|
|
background: -moz-linear-gradient(#3dd175, #2bb063);
|
|
background: -webkit-linear-gradient(#3dd175, #2bb063);
|
|
}
|
|
|
|
.dycalendar-container.skin-green .dycalendar-today-date,
|
|
.dycalendar-container.skin-green .dycalendar-target-date {
|
|
background-color: #fff;
|
|
color: #2bb063;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/*
|
|
* calendar skin (skin-purple)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.skin-purple {
|
|
color: #fff;
|
|
background-color: #975ea4;
|
|
border: 0;
|
|
}
|
|
|
|
.dycalendar-container.skin-purple.gradient {
|
|
background: #975ea4;
|
|
background: linear-gradient(#ca82d7, #975ea4);
|
|
background: -o-linear-gradient(#ca82d7, #975ea4);
|
|
background: -moz-linear-gradient(#ca82d7, #975ea4);
|
|
background: -webkit-linear-gradient(#ca82d7, #975ea4);
|
|
}
|
|
|
|
.dycalendar-container.skin-purple .dycalendar-today-date,
|
|
.dycalendar-container.skin-purple .dycalendar-target-date {
|
|
background-color: #fff;
|
|
color: #975ea4;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/*
|
|
* calendar skin (skin-red)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.skin-red {
|
|
color: #fff;
|
|
background-color: #e94d40;
|
|
border: 0;
|
|
}
|
|
|
|
.dycalendar-container.skin-red.gradient {
|
|
background: #e94d40;
|
|
background: linear-gradient(#fb6f62, #e94d40);
|
|
background: -o-linear-gradient(#fb6f62, #e94d40);
|
|
background: -moz-linear-gradient(#fb6f62, #e94d40);
|
|
background: -webkit-linear-gradient(#fb6f62, #e94d40);
|
|
}
|
|
|
|
.dycalendar-container.skin-red .dycalendar-today-date,
|
|
.dycalendar-container.skin-red .dycalendar-target-date {
|
|
background-color: #fff;
|
|
color: #e94d40;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/*
|
|
* calendar skin (skin-spacegray)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.skin-spacegray {
|
|
color: #fff;
|
|
background-color: #343d46;
|
|
border: 0;
|
|
}
|
|
|
|
.dycalendar-container.skin-spacegray.gradient {
|
|
background: #343d46;
|
|
background: linear-gradient(#454e57, #343d46);
|
|
background: -o-linear-gradient(#454e57, #343d46);
|
|
background: -moz-linear-gradient(#454e57, #343d46);
|
|
background: -webkit-linear-gradient(#454e57, #343d46);
|
|
}
|
|
|
|
.dycalendar-container.skin-spacegray .dycalendar-today-date,
|
|
.dycalendar-container.skin-spacegray .dycalendar-target-date {
|
|
background-color: #fff;
|
|
color: #343d46;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/*================================== DYCALENDAR SKIN ENDS HERE =============*/
|
|
/*================================== DYCALENDAR SHADOW =====================*/
|
|
/*
|
|
* calendar shadow (shadow-default)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.shadow-default {
|
|
-o-box-shadow: 0 4px 4px 0 rgba(50, 50, 50, 0.4);
|
|
-moz-box-shadow: 0 4px 4px 0 rgba(50, 50, 50, 0.4);
|
|
-webkit-box-shadow: 0 4px 4px 0 rgba(50, 50, 50, 0.4);
|
|
box-shadow: 0 4px 4px 0 rgba(50, 50, 50, 0.4);
|
|
}
|
|
|
|
/*
|
|
* calendar shadow (shadow-black)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.shadow-black {
|
|
-o-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
|
|
-moz-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
|
|
-webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
|
|
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/*
|
|
* calendar shadow (shadow-blue)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.shadow-blue {
|
|
-o-box-shadow: 0 4px 4px 0 rgba(60, 153, 211, 0.4);
|
|
-moz-box-shadow: 0 4px 4px 0 rgba(60, 153, 211, 0.4);
|
|
-webkit-box-shadow: 0 4px 4px 0 rgba(60, 153, 211, 0.4);
|
|
box-shadow: 0 4px 4px 0 rgba(60, 153, 211, 0.4);
|
|
}
|
|
|
|
/*
|
|
* calendar shadow (shadow-green)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.shadow-green {
|
|
-o-box-shadow: 0 4px 4px 0 rgba(43, 176, 99, 0.4);
|
|
-moz-box-shadow: 0 4px 4px 0 rgba(43, 176, 99, 0.4);
|
|
-webkit-box-shadow: 0 4px 4px 0 rgba(43, 176, 99, 0.4);
|
|
box-shadow: 0 4px 4px 0 rgba(43, 176, 99, 0.4);
|
|
}
|
|
|
|
/*
|
|
* calendar shadow (shadow-purple)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.shadow-purple {
|
|
-o-box-shadow: 0 4px 4px 0 rgba(151, 94, 164, 0.4);
|
|
-moz-box-shadow: 0 4px 4px 0 rgba(151, 94, 164, 0.4);
|
|
-webkit-box-shadow: 0 4px 4px 0 rgba(151, 94, 164, 0.4);
|
|
box-shadow: 0 4px 4px 0 rgba(151, 94, 164, 0.4);
|
|
}
|
|
|
|
/*
|
|
* calendar shadow (shadow-red)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.shadow-red {
|
|
-o-box-shadow: 0 4px 4px 0 rgba(233, 77, 64, 0.4);
|
|
-moz-box-shadow: 0 4px 4px 0 rgba(233, 77, 64, 0.4);
|
|
-webkit-box-shadow: 0 4px 4px 0 rgba(233, 77, 64, 0.4);
|
|
box-shadow: 0 4px 4px 0 rgba(233, 77, 64, 0.4);
|
|
}
|
|
|
|
/*
|
|
* calendar shadow (shadow-spacegray)
|
|
*-------------------------------------------------*/
|
|
.dycalendar-container.shadow-spacegray {
|
|
-o-box-shadow: 0 4px 4px 0 rgba(52, 61, 70, 1);
|
|
-moz-box-shadow: 0 4px 4px 0 rgba(52, 61, 70, 1);
|
|
-webkit-box-shadow: 0 4px 4px 0 rgba(52, 61, 70, 1);
|
|
box-shadow: 0 4px 4px 0 rgba(52, 61, 70, 1);
|
|
}
|
|
|
|
.dycalendar-span-month-year {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin: 5px;
|
|
}
|
|
|
|
.dycalendar-prev-next-btn {
|
|
font-size: 0.8em;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
/*================================== DYCALENDAR SHADOW ENDS HERE ===========*/
|