simple-jscalendar
Version:
Just a simple javascript calendar
160 lines (153 loc) • 4.77 kB
CSS
/*
* jsCalendar theme
* DarkSeries v1.2
*
*
* MIT License
*
* Copyright (c) 2019 Grammatopoulos Athanasios-Vasileios
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*
*/
/* Black Theme */
.jsCalendar.black-theme table {
background-color: #000000;
box-shadow: 0 0 2px rgba(80, 80, 80, 0.4);
color: #CCCCCC;
}
.jsCalendar.black-theme thead .jsCalendar-nav-left,
.jsCalendar.black-theme thead .jsCalendar-nav-right {
color: #505050;
}
.jsCalendar.black-theme thead .jsCalendar-nav-left:hover,
.jsCalendar.black-theme thead .jsCalendar-nav-right:hover {
background-color: #252525;
color: #AAAAAA;
}
.jsCalendar.black-theme tbody td.jsCalendar-selected {
background-color: #000000;
border: 2px solid #404040;
}
.jsCalendar.black-theme tbody td:hover {
background-color: #252525;
color: #FFFFFF;
}
.jsCalendar.black-theme tbody td.jsCalendar-current {
background-color: #252525;
}
.jsCalendar.black-theme tbody td.jsCalendar-previous,
.jsCalendar.black-theme tbody td.jsCalendar-next {
color: #505050;
}
.jsCalendar.black-theme tbody td.jsCalendar-previous:hover,
.jsCalendar.black-theme tbody td.jsCalendar-next:hover {
color: #FFFFFF;
}
.jsCalendar.black-theme ::-moz-selection {
background: #505050;
}
.jsCalendar.black-theme ::selection {
background: #505050;
}
/* Grey Theme */
.jsCalendar.grey-theme table {
background-color: #E3E6EB;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
color: #242529;
}
.jsCalendar.grey-theme thead .jsCalendar-nav-left,
.jsCalendar.grey-theme thead .jsCalendar-nav-right {
color: #717580;
}
.jsCalendar.grey-theme thead .jsCalendar-nav-left:hover,
.jsCalendar.grey-theme thead .jsCalendar-nav-right:hover {
background-color: #717580;
color: #E3E6EB;
}
.jsCalendar.grey-theme tbody td.jsCalendar-selected {
background-color: transparent;
border: 2px solid #A3A6AE;
}
.jsCalendar.grey-theme tbody td:hover {
background-color: #717580;
color: #E3E6EB;
}
.jsCalendar.grey-theme tbody td.jsCalendar-current {
background-color: #42454C;
}
.jsCalendar.grey-theme tbody td.jsCalendar-current:hover {
color: #E3E6EB;
}
.jsCalendar.grey-theme tbody td.jsCalendar-previous,
.jsCalendar.grey-theme tbody td.jsCalendar-next {
color: #B0B4BD;
}
.jsCalendar.grey-theme tbody td.jsCalendar-previous:hover,
.jsCalendar.grey-theme tbody td.jsCalendar-next:hover {
color: #E3E6EB;
}
.jsCalendar.grey-theme ::-moz-selection {
background: #B0B4BD;
}
.jsCalendar.grey-theme ::selection {
background: #B0B4BD;
}
/* White Theme */
.jsCalendar.white-theme table {
background-color: #ffffff;
box-shadow: 0 0 2px rgba(80, 80, 80, 0.4);
color: #333333;
}
.jsCalendar.white-theme thead .jsCalendar-nav-left,
.jsCalendar.white-theme thead .jsCalendar-nav-right {
color: #AFAFAF;
}
.jsCalendar.white-theme thead .jsCalendar-nav-left:hover,
.jsCalendar.white-theme thead .jsCalendar-nav-right:hover {
background-color: #DADADA;
color: #555555;
}
.jsCalendar.white-theme tbody td:hover {
background-color: #DADADA;
color: #000000;
}
.jsCalendar.white-theme tbody td.jsCalendar-selected {
border: 2px solid #BFBFBF;
}
.jsCalendar.white-theme tbody td.jsCalendar-current {
background-color: #222222;
}
.jsCalendar.white-theme tbody td.jsCalendar-current:hover {
color: #FFFFFF;
}
.jsCalendar.white-theme tbody td.jsCalendar-previous,
.jsCalendar.white-theme tbody td.jsCalendar-next {
color: #AFAFAF;
}
.jsCalendar.white-theme tbody td.jsCalendar-previous:hover,
.jsCalendar.white-theme tbody td.jsCalendar-next:hover {
color: #000000;
}
.jsCalendar.white-theme ::-moz-selection {
background: #AFAFAF;
}
.jsCalendar.white-theme ::selection {
background: #AFAFAF;
}