jsCalendar.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390
  1. /*
  2. * jsCalendar v1.4.2
  3. *
  4. *
  5. * MIT License
  6. *
  7. * Copyright (c) 2018 Grammatopoulos Athanasios-Vasileios
  8. *
  9. * Permission is hereby granted, free of charge, to any person obtaining a copy
  10. * of this software and associated documentation files (the "Software"), to deal
  11. * in the Software without restriction, including without limitation the rights
  12. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  13. * copies of the Software, and to permit persons to whom the Software is
  14. * furnished to do so, subject to the following conditions:
  15. *
  16. * The above copyright notice and this permission notice shall be included in all
  17. * copies or substantial portions of the Software.
  18. *
  19. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  20. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  21. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  22. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  23. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  24. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  25. * SOFTWARE.
  26. *
  27. */
  28. /* Default Theme */
  29. /* General style */
  30. .jsCalendar * {
  31. padding: 0px;
  32. margin: 0px;
  33. }
  34. .jsCalendar table,
  35. .jsCalendar table th,
  36. .jsCalendar table td {
  37. border: 0px;
  38. }
  39. /* Blue default */
  40. .jsCalendar table {
  41. color: #000000;
  42. background-color: #ffffff;
  43. border-collapse: collapse;
  44. font-family: Tahoma, Geneva, sans-serif;
  45. margin: 5px;
  46. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  47. border-radius: 4px;
  48. }
  49. .jsCalendar thead .jsCalendar-title {
  50. height: 40px;
  51. line-height: 40px;
  52. }
  53. .jsCalendar thead .jsCalendar-title-left {
  54. float: left;
  55. }
  56. .jsCalendar thead .jsCalendar-title-right {
  57. float: right;
  58. }
  59. .jsCalendar thead .jsCalendar-nav-left,
  60. .jsCalendar thead .jsCalendar-nav-right {
  61. font-family: "Courier New", Courier, monospace;
  62. font-size: 12px;
  63. font-weight: bold;
  64. height: 20px;
  65. width: 20px;
  66. margin: 10px 8px;
  67. text-align: center;
  68. line-height: 20px;
  69. cursor: pointer;
  70. color: #999999;
  71. border-radius: 10px;
  72. transition: color 0.2s, background-color 0.2s;
  73. }
  74. .jsCalendar thead .jsCalendar-nav-left:hover,
  75. .jsCalendar thead .jsCalendar-nav-right:hover {
  76. background-color: #e2e2e2;
  77. color: #000000;
  78. }
  79. .jsCalendar thead .jsCalendar-nav-left {
  80. float: left;
  81. }
  82. .jsCalendar thead .jsCalendar-nav-right {
  83. float: right;
  84. }
  85. .jsCalendar thead .jsCalendar-title-name {
  86. font-size: 18px;
  87. font-weight: lighter;
  88. float: left;
  89. padding: 0px 20px;
  90. cursor: default;
  91. }
  92. .jsCalendar thead .jsCalendar-nav-left:after {
  93. content: "<";
  94. }
  95. .jsCalendar thead .jsCalendar-nav-right:after {
  96. content: ">";
  97. }
  98. .jsCalendar thead .jsCalendar-week-days th {
  99. text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  100. }
  101. .jsCalendar thead .jsCalendar-week-days th,
  102. .jsCalendar tbody td {
  103. display: inline-block;
  104. height: 36px;
  105. width: 36px;
  106. margin: 1px 2px;
  107. line-height: 36px;
  108. text-align: center;
  109. font-size: 12px;
  110. font-weight: lighter;
  111. cursor: default;
  112. transition: color 0.1s, background-color 0.2s;
  113. border-radius: 18px;
  114. }
  115. .jsCalendar tbody td:hover {
  116. background-color: #e6e6e6;
  117. }
  118. .jsCalendar tbody td.jsCalendar-selected {
  119. border: 2px solid #e6e6e6;
  120. background-color: #ffffff;
  121. height: 32px;
  122. width: 32px;
  123. line-height: 32px;
  124. }
  125. .jsCalendar tbody td.jsCalendar-current {
  126. background-color: #52c9ff;
  127. border-radius: 18px;
  128. color: #ffffff;
  129. }
  130. .jsCalendar tbody td.jsCalendar-previous,
  131. .jsCalendar tbody td.jsCalendar-next {
  132. color: #cacaca;
  133. }
  134. .jsCalendar tbody td.jsCalendar-previous:hover,
  135. .jsCalendar tbody td.jsCalendar-next:hover {
  136. color: #ffffff;
  137. }
  138. .jsCalendar thead {
  139. display: block;
  140. margin: 4px 4px 0px 4px;
  141. }
  142. .jsCalendar tbody {
  143. display: block;
  144. margin: 0px 4px 4px 4px;
  145. }
  146. .jsCalendar *::selection {
  147. background: #83d8ff;
  148. }
  149. .jsCalendar *::-moz-selection {
  150. background: #83d8ff;
  151. }
  152. /* Yellow */
  153. .jsCalendar.yellow tbody td.jsCalendar-current {
  154. background-color: #ffe31b;
  155. }
  156. .jsCalendar.yellow *::selection {
  157. background: #FDE74C;
  158. }
  159. .jsCalendar.yellow *::-moz-selection {
  160. background: #FDE74C;
  161. }
  162. /* Orange */
  163. .jsCalendar.orange tbody td.jsCalendar-current {
  164. background-color: #FFB400;
  165. }
  166. .jsCalendar.orange *::selection {
  167. background: #FFB400;
  168. }
  169. .jsCalendar.orange *::-moz-selection {
  170. background: #FFB400;
  171. }
  172. /* Red */
  173. .jsCalendar.red tbody td.jsCalendar-current {
  174. background-color: #F6511D;
  175. }
  176. .jsCalendar.red *::selection {
  177. background: #F6511D;
  178. }
  179. .jsCalendar.red *::-moz-selection {
  180. background: #F6511D;
  181. }
  182. /* Green */
  183. .jsCalendar.green tbody td.jsCalendar-current {
  184. background-color: #7FB800;
  185. }
  186. .jsCalendar.green *::selection {
  187. background: #7FB800;
  188. }
  189. .jsCalendar.green *::-moz-selection {
  190. background: #7FB800;
  191. }
  192. /* Material Theme */
  193. /* Blue default */
  194. .jsCalendar.material-theme table {
  195. border-radius: 0px;
  196. }
  197. .jsCalendar.material-theme thead {
  198. margin: 0px;
  199. padding: 4px 4px 0px 4px;
  200. background-color: #52c9ff;
  201. color: #ffffff;
  202. }
  203. .jsCalendar.material-theme thead .jsCalendar-title {
  204. display: block;
  205. position: relative;
  206. }
  207. .jsCalendar.material-theme thead .jsCalendar-title-name {
  208. color: #ffffff;
  209. text-align: center;
  210. position: absolute;
  211. left: 15px;
  212. right: 15px;
  213. font-size: 16px;
  214. border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  215. }
  216. .jsCalendar.material-theme thead .jsCalendar-title-left,
  217. .jsCalendar.material-theme thead .jsCalendar-title-right {
  218. position: absolute;
  219. z-index: 1;
  220. }
  221. .jsCalendar.material-theme thead .jsCalendar-nav-left,
  222. .jsCalendar.material-theme thead .jsCalendar-nav-right {
  223. color: #ffffff;
  224. }
  225. .jsCalendar.material-theme thead .jsCalendar-nav-left:hover,
  226. .jsCalendar.material-theme thead .jsCalendar-nav-right:hover {
  227. background-color: #03A9F4;
  228. }
  229. .jsCalendar.material-theme thead .jsCalendar-title-right {
  230. right: 0px;
  231. }
  232. .jsCalendar.material-theme thead .jsCalendar-week-days th {
  233. font-size: 14px;
  234. text-shadow: none;
  235. }
  236. /* Yellow */
  237. .jsCalendar.material-theme.yellow thead {
  238. background-color: #ffe31b;
  239. }
  240. .jsCalendar.material-theme.yellow thead .jsCalendar-nav-left:hover,
  241. .jsCalendar.material-theme.yellow thead .jsCalendar-nav-right:hover {
  242. background-color: #e2ca23;
  243. }
  244. /* Orange */
  245. .jsCalendar.material-theme.orange thead {
  246. background-color: #FFB400;
  247. }
  248. .jsCalendar.material-theme.orange thead .jsCalendar-nav-left:hover,
  249. .jsCalendar.material-theme.orange thead .jsCalendar-nav-right:hover {
  250. background-color: #d49600;
  251. }
  252. /* Red */
  253. .jsCalendar.material-theme.red thead {
  254. background-color: #F6511D;
  255. }
  256. .jsCalendar.material-theme.red thead .jsCalendar-nav-left:hover,
  257. .jsCalendar.material-theme.red thead .jsCalendar-nav-right:hover {
  258. background-color: #bb3d16;
  259. }
  260. /* Green */
  261. .jsCalendar.material-theme.green thead {
  262. background-color: #7FB800;
  263. }
  264. .jsCalendar.material-theme.green thead .jsCalendar-nav-left:hover,
  265. .jsCalendar.material-theme.green thead .jsCalendar-nav-right:hover {
  266. background-color: #639000;
  267. }
  268. /* Classic Theme */
  269. /* Blue default */
  270. .jsCalendar.classic-theme table,
  271. .jsCalendar.classic-theme thead .jsCalendar-nav-left,
  272. .jsCalendar.classic-theme thead .jsCalendar-nav-right,
  273. .jsCalendar.classic-theme thead .jsCalendar-week-days th,
  274. .jsCalendar.classic-theme tbody td,
  275. .jsCalendar.classic-theme tbody td.jsCalendar-current {
  276. border-radius: 0px;
  277. }
  278. .jsCalendar.classic-theme thead {
  279. margin: 0px;
  280. background-color: #52c9ff;
  281. padding: 4px 4px 0px 4px;
  282. }
  283. .jsCalendar.classic-theme thead .jsCalendar-title-row,
  284. .jsCalendar.classic-theme thead .jsCalendar-title {
  285. display: block;
  286. width: 100%;
  287. }
  288. .jsCalendar.classic-theme thead .jsCalendar-title {
  289. position: relative;
  290. }
  291. .jsCalendar.classic-theme thead .jsCalendar-title-name {
  292. font-size: 16px;
  293. color: #ffffff;
  294. text-shadow: none;
  295. text-align: center;
  296. position: absolute;
  297. left: 41px;
  298. right: 41px;
  299. }
  300. .jsCalendar.classic-theme thead .jsCalendar-title-left,
  301. .jsCalendar.classic-theme thead .jsCalendar-title-right {
  302. position: absolute;
  303. z-index: 1;
  304. }
  305. .jsCalendar.classic-theme thead .jsCalendar-title-right {
  306. right: 0px;
  307. }
  308. .jsCalendar.classic-theme thead .jsCalendar-nav-left,
  309. .jsCalendar.classic-theme thead .jsCalendar-nav-right {
  310. color: #ffffff;
  311. text-shadow: none;
  312. }
  313. .jsCalendar.classic-theme thead .jsCalendar-nav-left:hover,
  314. .jsCalendar.classic-theme thead .jsCalendar-nav-right:hover {
  315. background-color: #03A9F4;
  316. }
  317. .jsCalendar.classic-theme thead .jsCalendar-week-days {
  318. background-color: #ffffff;
  319. display: block;
  320. margin: 0px -4px;
  321. }
  322. .jsCalendar.classic-theme thead .jsCalendar-week-days th {
  323. height: 20px;
  324. line-height: 20px;
  325. font-size: 10px;
  326. text-shadow: none;
  327. }
  328. .jsCalendar.classic-theme tbody td {
  329. padding: 1px 1px 0px 1px;
  330. margin: -1px 0px 0px -1px;
  331. border-top: 1px solid #dadada;
  332. border-left: 1px solid #dadada;
  333. width: 38px;
  334. }
  335. .jsCalendar.classic-theme tbody {
  336. margin: 0px;
  337. }
  338. .jsCalendar.classic-theme tbody td.jsCalendar-selected{
  339. border-top: 1px solid #dadada;
  340. border-left: 1px solid #dadada;
  341. border-right: 0px;
  342. border-bottom: 0px;
  343. height: 36px;
  344. line-height: 36px;
  345. background-color: #ccefff;
  346. }
  347. .jsCalendar.classic-theme tbody td.jsCalendar-current.jsCalendar-selected{
  348. background-color: #52c9ff;
  349. text-shadow: 0px 0px 3px #000000;
  350. }
  351. /* Yellow */
  352. .jsCalendar.classic-theme.yellow thead {
  353. background-color: #ffe31b;
  354. }
  355. .jsCalendar.classic-theme.yellow thead .jsCalendar-nav-left:hover,
  356. .jsCalendar.classic-theme.yellow thead .jsCalendar-nav-right:hover {
  357. background-color: #e2ca23;
  358. }
  359. /* Orange */
  360. .jsCalendar.classic-theme.orange thead {
  361. background-color: #FFB400;
  362. }
  363. .jsCalendar.classic-theme.orange thead .jsCalendar-nav-left:hover,
  364. .jsCalendar.classic-theme.orange thead .jsCalendar-nav-right:hover {
  365. background-color: #d49600;
  366. }
  367. /* Red */
  368. .jsCalendar.classic-theme.red thead {
  369. background-color: #F6511D;
  370. }
  371. .jsCalendar.classic-theme.red thead .jsCalendar-nav-left:hover,
  372. .jsCalendar.classic-theme.red thead .jsCalendar-nav-right:hover {
  373. background-color: #bb3d16;
  374. }
  375. /* Green */
  376. .jsCalendar.classic-theme.green thead {
  377. background-color: #7FB800;
  378. }
  379. .jsCalendar.classic-theme.green thead .jsCalendar-nav-left:hover,
  380. .jsCalendar.classic-theme.green thead .jsCalendar-nav-right:hover {
  381. background-color: #639000;
  382. }