jsCalendar.clean.css 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. /*
  2. * jsCalendar theme
  3. * Clean v1.1
  4. *
  5. *
  6. * MIT License
  7. *
  8. * Copyright (c) 2019 Grammatopoulos Athanasios-Vasileios
  9. *
  10. * Permission is hereby granted, free of charge, to any person obtaining a copy
  11. * of this software and associated documentation files (the "Software"), to deal
  12. * in the Software without restriction, including without limitation the rights
  13. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  14. * copies of the Software, and to permit persons to whom the Software is
  15. * furnished to do so, subject to the following conditions:
  16. *
  17. * The above copyright notice and this permission notice shall be included in all
  18. * copies or substantial portions of the Software.
  19. *
  20. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  21. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  22. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  23. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  24. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  25. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  26. * SOFTWARE.
  27. *
  28. */
  29. /* Clean Theme */
  30. .jsCalendar.clean-theme table {
  31. background-color: transparent;
  32. box-shadow: none;
  33. color: #000000;
  34. font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  35. }
  36. .jsCalendar.clean-theme thead .jsCalendar-title-name {
  37. font-weight: bold;
  38. }
  39. .jsCalendar.clean-theme thead .jsCalendar-nav-left,
  40. .jsCalendar.clean-theme thead .jsCalendar-nav-right {
  41. color: #AFAFAF;
  42. }
  43. .jsCalendar.clean-theme thead .jsCalendar-nav-left:hover,
  44. .jsCalendar.clean-theme thead .jsCalendar-nav-right:hover {
  45. background-color: transparent;
  46. color: #000000;
  47. }
  48. .jsCalendar.clean-theme thead .jsCalendar-week-days th {
  49. font-weight: bold;
  50. }
  51. .jsCalendar.clean-theme thead .jsCalendar-week-days th,
  52. .jsCalendar.clean-theme tbody td {
  53. border-radius: unset;
  54. font-size: 14px;
  55. height: 42px;
  56. line-height: 42px;
  57. margin: 2px 2px;
  58. width: 42px;
  59. }
  60. .jsCalendar.clean-theme tbody td:hover {
  61. background-color: #F0F0F0;
  62. color: #000000;
  63. }
  64. .jsCalendar.clean-theme tbody td.jsCalendar-selected {
  65. border: unset;
  66. }
  67. .jsCalendar.clean-theme tbody td.jsCalendar-current {
  68. background-color: transparent;
  69. border-bottom: 2px solid #000000;
  70. border-radius: unset;
  71. color: #000000;
  72. font-weight: bold;
  73. margin-bottom: 0;
  74. }
  75. .jsCalendar.clean-theme tbody td.jsCalendar-selected {
  76. background-color: #E0E0E0;
  77. }
  78. .jsCalendar.clean-theme tbody td.jsCalendar-current:hover {
  79. color: #000000;
  80. }
  81. .jsCalendar.clean-theme tbody td.jsCalendar-previous,
  82. .jsCalendar.clean-theme tbody td.jsCalendar-next {
  83. color: transparent;
  84. opacity: 0;
  85. }
  86. .jsCalendar.clean-theme tbody td.jsCalendar-previous:hover,
  87. .jsCalendar.clean-theme tbody td.jsCalendar-next:hover {
  88. color: transparent;
  89. }
  90. .jsCalendar.clean-theme ::-moz-selection {
  91. background: #AFAFAF;
  92. }
  93. .jsCalendar.clean-theme ::selection {
  94. background: #AFAFAF;
  95. }
  96. /* Blue */
  97. .jsCalendar.clean-theme.blue tbody td:hover {
  98. background-color: rgba(82, 201, 255, 0.3);
  99. }
  100. .jsCalendar.clean-theme.blue tbody td.jsCalendar-current {
  101. background-color: rgba(82, 201, 255, 0.2);
  102. }
  103. .jsCalendar.clean-theme.blue tbody td.jsCalendar-selected {
  104. background-color: rgba(82, 201, 255, 0.5);
  105. }
  106. .jsCalendar.clean-theme.blue ::-moz-selection {
  107. background: #83D8FF;
  108. }
  109. .jsCalendar.clean-theme.blue ::selection {
  110. background: #83D8FF;
  111. }
  112. /* Yellow */
  113. .jsCalendar.clean-theme.yellow tbody td:hover {
  114. background-color: rgba(255, 227, 27, 0.3);
  115. }
  116. .jsCalendar.clean-theme.yellow tbody td.jsCalendar-current {
  117. background-color: rgba(255, 227, 27, 0.2);
  118. }
  119. .jsCalendar.clean-theme.yellow tbody td.jsCalendar-selected {
  120. background-color: rgba(255, 227, 27, 0.5);
  121. }
  122. .jsCalendar.clean-theme.yellow ::-moz-selection {
  123. background: #FDE74C;
  124. }
  125. .jsCalendar.clean-theme.yellow ::selection {
  126. background: #FDE74C;
  127. }
  128. /* Orange */
  129. .jsCalendar.clean-theme.orange tbody td:hover {
  130. background-color: rgba(255, 180, 0, 0.3);
  131. }
  132. .jsCalendar.clean-theme.orange tbody td.jsCalendar-current {
  133. background-color: rgba(255, 180, 0, 0.2);
  134. }
  135. .jsCalendar.clean-theme.orange tbody td.jsCalendar-selected {
  136. background-color: rgba(255, 180, 0, 0.5);
  137. }
  138. .jsCalendar.clean-theme.orange ::-moz-selection {
  139. background: #FFB400;
  140. }
  141. .jsCalendar.clean-theme.orange ::selection {
  142. background: #FFB400;
  143. }
  144. /* Red */
  145. .jsCalendar.clean-theme.red tbody td:hover {
  146. background-color: rgba(246, 81, 29, 0.3);
  147. }
  148. .jsCalendar.clean-theme.red tbody td.jsCalendar-current {
  149. background-color: rgba(246, 81, 29, 0.2);
  150. }
  151. .jsCalendar.clean-theme.red tbody td.jsCalendar-selected {
  152. background-color: rgba(246, 81, 29, 0.5);
  153. }
  154. .jsCalendar.clean-theme.red ::-moz-selection {
  155. background: #F6511D;
  156. }
  157. .jsCalendar.clean-theme.red ::selection {
  158. background: #F6511D;
  159. }
  160. /* Green */
  161. .jsCalendar.clean-theme.green tbody td:hover {
  162. background-color: rgba(127, 184, 0, 0.3);
  163. }
  164. .jsCalendar.clean-theme.green tbody td.jsCalendar-current {
  165. background-color: rgba(127, 184, 0, 0.2);
  166. }
  167. .jsCalendar.clean-theme.green tbody td.jsCalendar-selected {
  168. background-color: rgba(127, 184, 0, 0.5);
  169. }
  170. .jsCalendar.clean-theme.green ::-moz-selection {
  171. background: #7FB800;
  172. }
  173. .jsCalendar.clean-theme.green ::selection {
  174. background: #7FB800;
  175. }