main.css 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. /** PLANNING **/
  2. /* Conteneur principal du plugin planning */
  3. .planning {
  4. }
  5. #planning{
  6. width:80%;
  7. }
  8. #planning .fc-event{
  9. padding: 3px;
  10. transition: transform 0.2s ease-in-out ;
  11. }
  12. #planning td.fc-day.fc-sat,#planning td.fc-day.fc-sun{
  13. background-color:#f3f3f3;
  14. }
  15. #planning .fc-header-toolbar .fc-center h2{
  16. font-size: 20px;
  17. }
  18. #planning .fc-event.event-selected{
  19. transform:scale(1);
  20. animation: pulse 0.5s infinite;
  21. }
  22. /*#plannings .planning-owner{
  23. display:none;
  24. }*/
  25. #plannings > li{
  26. font-size: 12px;
  27. max-width: 300px;
  28. }
  29. #plannings > li > small{
  30. display: block;
  31. }
  32. .planning-list .planning-option-btn{
  33. color:#cecece;
  34. cursor: pointer;
  35. opacity: 0;
  36. float:right;
  37. transform: scale(0.7);
  38. transition: all 0.2s ease-in-out;
  39. }
  40. .planning-list li:hover .planning-option-btn{
  41. transform: scale(1);
  42. opacity: 1;
  43. }
  44. #planning-share-form .data-type-user{
  45. height:52px;
  46. }
  47. .planning-list .planning-box{
  48. height: 21px;
  49. padding: 0px;
  50. vertical-align: top;
  51. border-radius: 5px;
  52. display: inline-block;
  53. }
  54. .planning-list .planning-box .check-component{
  55. width: 15px;
  56. height: 15px;
  57. margin: 3px;
  58. border: 0;
  59. }
  60. .planning-list .planning-box .check-component .box{
  61. border-radius: 3px;
  62. }
  63. .planning-list .planning-box .check-component input:checked + .box{
  64. background: #ffffff;
  65. border-radius: 3px;
  66. }
  67. @keyframes pulse {
  68. 0% { transform:scale(1); }
  69. 50% { transform:scale(1.05); }
  70. 100% { transform:scale(1); }
  71. }
  72. .planning-view{
  73. display: flex;
  74. }
  75. #planning-calendars h4{
  76. font-weight: bold;
  77. text-transform: uppercase;
  78. font-size: 14px;
  79. color: #4d4f50;
  80. margin-top: 10px;
  81. }
  82. #planning-calendars{
  83. padding:0 15px 0 0;
  84. }
  85. #planning-datepicker .ui-state-default,
  86. #planning-datepicker .ui-widget-content .ui-state-default,
  87. #planning-datepicker .ui-widget-header .ui-state-default{
  88. border: 0;
  89. background: transparent;
  90. font-weight: normal;
  91. color: #505a65;
  92. text-align: center;
  93. }
  94. #planning-datepicker .ui-datepicker table {
  95. width: 100%;
  96. font-size: .7em;
  97. }
  98. #planning-datepicker .ui-datepicker-current-day {
  99. text-align: center;
  100. }
  101. #planning-datepicker .ui-datepicker-current-day a{
  102. border-radius: 100%;
  103. width:20px;
  104. display: inline-block;
  105. height:20px;
  106. }
  107. #planning-datepicker .ui-datepicker-current-day a.ui-state-active{
  108. color: #185abc;
  109. background-color: #d2e3fc;
  110. }
  111. #planning-datepicker .ui-widget-header{
  112. border: 0;
  113. background: transparent;
  114. font-weight: normal;
  115. }
  116. #planning-calendars ul{
  117. padding: 0;
  118. margin:0;
  119. list-style-type: none;
  120. }
  121. #planning-calendars ul label{
  122. cursor:pointer;
  123. }
  124. #planning .fc-toolbar.fc-header-toolbar{
  125. margin-bottom:0.2em;
  126. }
  127. /* formulaire d'édition de planning */
  128. .planning .planning-form {
  129. }
  130. .fc-event-container .fc-icon{
  131. opacity: 0.8;
  132. position: absolute;
  133. right: 3px;
  134. top: 3px;
  135. }
  136. .fc-event-container .fc-icon i{
  137. font-size: 10px;
  138. }
  139. #planning-form {
  140. }
  141. #planning_event_types tbody tr{
  142. cursor: move;
  143. }
  144. .planning-type-chip{
  145. vertical-align: baseline;
  146. display: inline-block;
  147. font-size: 12px;
  148. text-align: center;
  149. padding-top: 1px;
  150. width: 20px;
  151. height: 20px;
  152. border-radius: 100%;
  153. }
  154. .planning-event-panel{
  155. position: fixed;
  156. right:0px;
  157. height:100%;
  158. top:50px;
  159. background-color: #fefefe;
  160. color:#576069;
  161. padding:15px;
  162. width:800px;
  163. box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
  164. z-index: 101;
  165. transition: all 0.2s ease-in-out;
  166. }
  167. .planning-event-panel .input-group-append{
  168. z-index:inherit;
  169. }
  170. #planning-event-form > .row{
  171. margin-top: 10px;
  172. }
  173. .planning-event-panel h1{
  174. text-transform: uppercase;
  175. font-size: 14px;
  176. font-weight: bold;
  177. }
  178. .planning-event-panel.fold{
  179. transform: translateX(800px);
  180. }
  181. /* fullcalendar */
  182. .fc-state-default {
  183. border: 1px solid;
  184. border-top-color: currentcolor;
  185. border-right-color: currentcolor;
  186. border-bottom-color: currentcolor;
  187. border-left-color: currentcolor;
  188. background-color: #f5f5f5;
  189. background-image: none;
  190. background-repeat: repeat-x;
  191. border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  192. border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
  193. color: #333;
  194. text-shadow: none;
  195. box-shadow: none;
  196. }
  197. .fc-state-active, .fc-state-down {
  198. background-color: #ccc;
  199. background-image: none;
  200. box-shadow: none;
  201. }
  202. .fc-event{
  203. cursor:pointer;
  204. }
  205. .planning-page[data-event-editable="0"] .btn-save-event{
  206. display: none;
  207. }
  208. .planning-page[data-planning-share="0"] .planning-share-block,
  209. .planning-page[data-planning-share="0"] .shared-plannings-block{
  210. display: none;
  211. }