custom_2.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. /* Custom calendar elements */
  2. .whzlhead{
  3. width: 190px;height: 40px;overflow: hidden;float: left;
  4. }
  5. .custom-calendar-wrap {
  6. margin: 10px auto;
  7. position: relative;
  8. overflow: hidden;
  9. }
  10. .custom-inner {
  11. background: #fff;
  12. box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  13. }
  14. .custom-inner:before,
  15. .custom-inner:after {
  16. content: '';
  17. width: 99%;
  18. height: 50%;
  19. position: absolute;
  20. background: #f6f6f6;
  21. bottom: -4px;
  22. left: 0.5%;
  23. z-index: -1;
  24. box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  25. }
  26. .custom-inner:after {
  27. content: '';
  28. width: 98%;
  29. bottom: -7px;
  30. left: 1%;
  31. z-index: -2;
  32. }
  33. .custom-header {
  34. background: #fff;
  35. padding: 5px 10px 10px 20px;
  36. height: 50px;
  37. position: relative;
  38. //border-top: 5px solid #1369d8;
  39. border-bottom: 1px solid #ddd;
  40. }
  41. .custom-header h2,
  42. .custom-header h3 {
  43. text-align: center;
  44. text-transform: uppercase;
  45. }
  46. .custom-header h2 {
  47. color: #495468;
  48. font-weight: 300;
  49. font-size: 18px;
  50. margin-top: 0px;
  51. }
  52. .custom-header h3 {
  53. font-size: 10px;
  54. font-weight: 700;
  55. color: #b7bbc2;
  56. }
  57. .whzlhead nav span {
  58. position: absolute;
  59. top: 7px;
  60. width: 30px;
  61. height: 30px;
  62. color: transparent;
  63. cursor: pointer;
  64. margin: 0 1px;
  65. font-size: 20px;
  66. line-height: 30px;
  67. -webkit-touch-callout: none;
  68. -webkit-user-select: none;
  69. -khtml-user-select: none;
  70. -moz-user-select: none;
  71. -ms-user-select: none;
  72. user-select: none;
  73. }
  74. .whzlhead nav span:first-child {
  75. left: 5px;
  76. }
  77. .whzlhead nav span:last-child {
  78. right: 5px;
  79. }
  80. .whzlhead nav span:before {
  81. font-family: 'fontawesome-selected';
  82. color: #1369d8;
  83. position: absolute;
  84. text-align: center;
  85. width: 100%;
  86. }
  87. .whzlhead nav span.custom-prev:before {
  88. content: '\25c2';
  89. }
  90. .whzlhead nav span.custom-next:before {
  91. content: '\25b8';
  92. }
  93. .whzlhead nav span:hover:before {
  94. color: #495468;
  95. }
  96. .custom-content-reveal {
  97. background: #f6f6f6;
  98. background: rgba(246, 246, 246, 0.9);
  99. width: 100%;
  100. height: 100%;
  101. position: absolute;
  102. z-index: 100;
  103. top: 100%;
  104. left: 0px;
  105. text-align: center;
  106. -webkit-transition: all 0.6s ease-in-out;
  107. -moz-transition: all 0.6s ease-in-out;
  108. -o-transition: all 0.6s ease-in-out;
  109. -ms-transition: all 0.6s ease-in-out;
  110. transition: all 0.6s ease-in-out;
  111. }
  112. .custom-content-reveal span.custom-content-close {
  113. position: absolute;
  114. top: 15px;
  115. right: 10px;
  116. width: 20px;
  117. height: 20px;
  118. text-align: center;
  119. background: #ef4f69;
  120. box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  121. cursor: pointer;
  122. line-height: 13px;
  123. padding: 0;
  124. }
  125. .custom-content-reveal span.custom-content-close:after {
  126. content: 'x';
  127. font-size: 18px;
  128. color: #fff;
  129. }
  130. .custom-content-reveal a,
  131. .custom-content-reveal span {
  132. font-size: 22px;
  133. padding: 10px 30px;
  134. display: block;
  135. }
  136. .custom-content-reveal h4 {
  137. text-transform: uppercase;
  138. font-size: 13px;
  139. font-weight: 300;
  140. letter-spacing: 3px;
  141. color: #777;
  142. padding: 20px;
  143. background: #fff;
  144. border-bottom: 1px solid #ddd;
  145. border-top: 5px solid #ef4f69;
  146. box-shadow: 0 1px rgba(255,255,255,0.9);
  147. margin-bottom: 30px;
  148. }
  149. .custom-content-reveal span {
  150. color: #888;
  151. }
  152. .custom-content-reveal a {
  153. color: #ef4f69;
  154. }
  155. .custom-content-reveal a:hover {
  156. color: #333;
  157. }
  158. /* Modifications */
  159. .fc-calendar-container {
  160. height: 300px;
  161. width: 320px;
  162. background: #f6f6f6;
  163. }
  164. .fc-calendar .fc-head {
  165. background: transparent;
  166. color: #1369d8;
  167. font-weight: bold;
  168. text-transform: uppercase;
  169. font-size: 12px;
  170. }
  171. .fc-calendar .fc-row > div {
  172. background: #fff;
  173. cursor: pointer;
  174. }
  175. .fc-calendar .fc-row > div:empty {
  176. background: transparent;
  177. }
  178. .fc-calendar .fc-row > div > span.fc-date {
  179. top: 50%;
  180. left: 50%;
  181. text-align: center;
  182. margin: -10px 0 0 -15px;
  183. color: #686a6e;
  184. font-weight: 300;
  185. pointer-events: none;
  186. }
  187. .fc-calendar .fc-row > div.fc-today {
  188. background: #ef4f69;
  189. box-shadow: inset 0 -1px 1px rgba(0,0,0,0.1);
  190. }
  191. .fc-calendar .fc-row > div.fc-today > span.fc-date {
  192. color: #fff;
  193. text-shadow: 0 1px 1px rgba(0,0,0,0.1);
  194. }
  195. .fc-calendar .fc-row > div.fc-content:after {
  196. text-align: center;
  197. width: 12px;
  198. margin-left: -10px;
  199. position: absolute;
  200. color: #DDD;
  201. font-size: 70px;
  202. line-height: 12px;
  203. left: 50%;
  204. bottom: 3px;
  205. }
  206. .fc-calendar .fc-row > div.fc-today.fc-content:after {
  207. color: #b02c42;
  208. }
  209. .fc-calendar .fc-row > div.fc-content:hover:after{
  210. color: #ef4f69;
  211. }
  212. .fc-calendar .fc-row > div.fc-today.fc-content:hover:after{
  213. color: #fff;
  214. }
  215. .fc-calendar .fc-row > div > div a,
  216. .fc-calendar .fc-row > div > div span {
  217. display: none;
  218. font-size: 12px;
  219. }