VCalendar.css 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. .v-calendar {
  2. background: rgb(var(--v-theme-background));
  3. color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
  4. }
  5. .v-calendar-weekly {
  6. width: 100%;
  7. height: 100%;
  8. display: flex;
  9. flex-direction: column;
  10. min-height: 0;
  11. }
  12. .v-calendar__container {
  13. border-top: thin solid #e0e0e0;
  14. border-left: thin solid #e0e0e0;
  15. border-right: thin solid #e0e0e0;
  16. }
  17. .v-calendar-weekly__head {
  18. display: grid;
  19. grid-template-columns: 24px repeat(7, 1fr);
  20. user-select: none;
  21. }
  22. .v-calendar-weekly__head.days__0 {
  23. grid-template-columns: 1fr;
  24. }
  25. .v-calendar-weekly__head.days__0.v-calendar-weekly__head-weeknumbers {
  26. grid-template-columns: 24px 1fr;
  27. }
  28. .v-calendar-weekly__head.days__1 {
  29. grid-template-columns: 1fr;
  30. }
  31. .v-calendar-weekly__head.days__1.v-calendar-weekly__head-weeknumbers {
  32. grid-template-columns: 24px 1fr;
  33. }
  34. .v-calendar-weekly__head.days__2 {
  35. grid-template-columns: repeat(2, 1fr);
  36. }
  37. .v-calendar-weekly__head.days__2.v-calendar-weekly__head-weeknumbers {
  38. grid-template-columns: 24px repeat(2, 1fr);
  39. }
  40. .v-calendar-weekly__head.days__3 {
  41. grid-template-columns: repeat(3, 1fr);
  42. }
  43. .v-calendar-weekly__head.days__3.v-calendar-weekly__head-weeknumbers {
  44. grid-template-columns: 24px repeat(3, 1fr);
  45. }
  46. .v-calendar-weekly__head.days__4 {
  47. grid-template-columns: repeat(4, 1fr);
  48. }
  49. .v-calendar-weekly__head.days__4.v-calendar-weekly__head-weeknumbers {
  50. grid-template-columns: 24px repeat(4, 1fr);
  51. }
  52. .v-calendar-weekly__head.days__5 {
  53. grid-template-columns: repeat(5, 1fr);
  54. }
  55. .v-calendar-weekly__head.days__5.v-calendar-weekly__head-weeknumbers {
  56. grid-template-columns: 24px repeat(5, 1fr);
  57. }
  58. .v-calendar-weekly__head.days__6 {
  59. grid-template-columns: repeat(6, 1fr);
  60. }
  61. .v-calendar-weekly__head.days__6.v-calendar-weekly__head-weeknumbers {
  62. grid-template-columns: 24px repeat(6, 1fr);
  63. }
  64. .v-calendar-weekly__head.days__7 {
  65. grid-template-columns: repeat(7, 1fr);
  66. }
  67. .v-calendar-weekly__head.days__7.v-calendar-weekly__head-weeknumbers {
  68. grid-template-columns: 24px repeat(7, 1fr);
  69. }
  70. .v-calendar-weekly__head-weekday, .v-calendar-weekly__head-weekday-with-weeknumber {
  71. flex: 1 0 20px;
  72. user-select: none;
  73. padding: 8px 4px 0px 4px;
  74. font-size: 11px;
  75. overflow: hidden;
  76. text-align: center;
  77. text-overflow: ellipsis;
  78. text-transform: uppercase;
  79. white-space: nowrap;
  80. border-right: thin solid #e0e0e0;
  81. }
  82. .v-calendar-weekly__head-weekday:last-child, .v-calendar-weekly__head-weekday-with-weeknumber:last-child {
  83. border-right: none;
  84. }
  85. .v-calendar-weekly__head-weekday > div .v-btn, .v-calendar-weekly__head-weekday-with-weeknumber > div .v-btn {
  86. font-size: 1.5rem;
  87. }
  88. .v-calendar-weekly__head-weeknumber {
  89. background: rgb(var(--v-theme-surface-light));
  90. color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
  91. }
  92. .v-calendar-weekly__week {
  93. display: flex;
  94. flex: 1;
  95. height: unset;
  96. min-height: 0;
  97. }
  98. .v-calendar-month__weeknumber {
  99. padding-top: 6px;
  100. background: rgb(var(--v-theme-surface-light));
  101. border-bottom: thin solid #e0e0e0;
  102. color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
  103. text-align: center;
  104. font-size: 12px;
  105. font-weight: 500;
  106. }
  107. .v-calendar-month__days {
  108. display: grid;
  109. flex: 1 1;
  110. }
  111. .v-calendar-month__days > .v-calendar-month__day {
  112. min-height: 150px;
  113. }
  114. .v-calendar-month__days.days__0 {
  115. grid-template-columns: 1fr;
  116. }
  117. .v-calendar-month__days.days__0 > .v-calendar-month__day {
  118. border-right: none;
  119. }
  120. .v-calendar-month__days.days__1 {
  121. grid-template-columns: 1fr;
  122. }
  123. .v-calendar-month__days.days__1 > .v-calendar-month__day {
  124. border-right: none;
  125. }
  126. .v-calendar-month__days.days__2 {
  127. grid-template-columns: repeat(2, 1fr);
  128. }
  129. .v-calendar-month__days.days__2 > .v-calendar-month__day:nth-child(2n) {
  130. border-right: none;
  131. }
  132. .v-calendar-month__days.days__3 {
  133. grid-template-columns: repeat(3, 1fr);
  134. }
  135. .v-calendar-month__days.days__3 > .v-calendar-month__day:nth-child(3n) {
  136. border-right: none;
  137. }
  138. .v-calendar-month__days.days__4 {
  139. grid-template-columns: repeat(4, 1fr);
  140. }
  141. .v-calendar-month__days.days__4 > .v-calendar-month__day:nth-child(4n) {
  142. border-right: none;
  143. }
  144. .v-calendar-month__days.days__5 {
  145. grid-template-columns: repeat(5, 1fr);
  146. }
  147. .v-calendar-month__days.days__5 > .v-calendar-month__day:nth-child(5n) {
  148. border-right: none;
  149. }
  150. .v-calendar-month__days.days__6 {
  151. grid-template-columns: repeat(6, 1fr);
  152. }
  153. .v-calendar-month__days.days__6 > .v-calendar-month__day:nth-child(6n) {
  154. border-right: none;
  155. }
  156. .v-calendar-month__days.days__6.v-calendar-month__weeknumbers {
  157. grid-template-columns: 24px repeat(6, 1fr);
  158. }
  159. .v-calendar-month__days.days__7 {
  160. grid-template-columns: repeat(7, 1fr);
  161. }
  162. .v-calendar-month__days.days__7 > .v-calendar-month__day:nth-child(7n) {
  163. border-right: none;
  164. }
  165. .v-calendar-month__days.days-with-weeknumbers__0 {
  166. grid-template-columns: 24px 1fr;
  167. }
  168. .v-calendar-month__days.days-with-weeknumbers__0 > .v-calendar-month__day {
  169. border-right: none;
  170. }
  171. .v-calendar-month__days.days-with-weeknumbers__1 {
  172. grid-template-columns: 24px 1fr;
  173. }
  174. .v-calendar-month__days.days-with-weeknumbers__1 > .v-calendar-month__day {
  175. border-right: none;
  176. }
  177. .v-calendar-month__days.days-with-weeknumbers__2 {
  178. grid-template-columns: 24px repeat(2, 1fr);
  179. }
  180. .v-calendar-month__days.days-with-weeknumbers__2 > .v-calendar-month__day:nth-child(3n) {
  181. border-right: none;
  182. }
  183. .v-calendar-month__days.days-with-weeknumbers__3 {
  184. grid-template-columns: 24px repeat(3, 1fr);
  185. }
  186. .v-calendar-month__days.days-with-weeknumbers__3 > .v-calendar-month__day:nth-child(4n) {
  187. border-right: none;
  188. }
  189. .v-calendar-month__days.days-with-weeknumbers__4 {
  190. grid-template-columns: 24px repeat(4, 1fr);
  191. }
  192. .v-calendar-month__days.days-with-weeknumbers__4 > .v-calendar-month__day:nth-child(5n) {
  193. border-right: none;
  194. }
  195. .v-calendar-month__days.days-with-weeknumbers__5 {
  196. grid-template-columns: 24px repeat(5, 1fr);
  197. }
  198. .v-calendar-month__days.days-with-weeknumbers__5 > .v-calendar-month__day:nth-child(6n) {
  199. border-right: none;
  200. }
  201. .v-calendar-month__days.days-with-weeknumbers__6 {
  202. grid-template-columns: 24px repeat(6, 1fr);
  203. }
  204. .v-calendar-month__days.days-with-weeknumbers__6 > .v-calendar-month__day:nth-child(7n) {
  205. border-right: none;
  206. }
  207. .v-calendar-month__days.days-with-weeknumbers__7 {
  208. grid-template-columns: 24px repeat(7, 1fr);
  209. }
  210. .v-calendar-month__days.days-with-weeknumbers__7 > .v-calendar-month__day:nth-child(7n) {
  211. border-right: thin solid thin;
  212. }
  213. .v-calendar-month__days.days-with-weeknumbers__7 > .v-calendar-month__day:nth-child(8n) {
  214. border-right: none;
  215. }
  216. .v-calendar-month__days.days-with-weeknumbers__7 > .v-calendar-month__day:nth-child(8n) {
  217. border-right: none;
  218. }