12cff339691e3511e98d0835ceb3a1e6409d4627
[moodle.git] / theme / bootstrapbase / less / moodle / calendar.less
1 /* calendar.less */
3 // Calendar colour variables defined.
4 @calendarEventCourseColor: #ffd3bd; // Pale red.
5 @calendarEventGlobalColor: #d6f8cd; // Pale green.
6 @calendarEventGroupColor:  #fee7ae; // Pale yellow.
7 @calendarEventUserColor:   #dce7ec; // Pale blue.
9 // Calendar event background colours defined.
10 .calendar_event_course {
11     background-color: @calendarEventCourseColor;
12 }
13 .calendar_event_global {
14     background-color: @calendarEventGlobalColor;
15 }
16 .calendar_event_group {
17     background-color: @calendarEventGroupColor;
18 }
19 .calendar_event_user {
20     background-color: @calendarEventUserColor;
21 }
23 // Calendar restyling.
24 .path-calendar {
25     #dateselector-calendar-panel {
26         z-index: @zindexModalContainer+4;
27     }
28     .calendartable {
29         width: 100%;
30         th,
31         td {
32             width: 14%;
33             vertical-align: top;
34             text-align: center;
35             border: 0;
36         }
37     }
38     .calendar-controls {
39         .previous,
40         .next,
41         .current {
42             display: block;
43             float: left;
44             width: 12%;
45         }
46         .previous {
47             text-align: left;
48         }
49         .current {
50             text-align: center;
51             width: 76%;
52         }
53         .next {
54             text-align: right;
55         }
56     }
57     .filters {
58         table {
59             border-collapse: separate;
60             border-spacing: 2px;
61             width: 100%;
62         }
63     }
64     .cal_courses_flt {
65         float: left;
67         label {
68             margin-right: .45em;
69         }
70     }
71     .maincalendar {
72         vertical-align: top;
73         padding: 0;
74         .bottom {
75             text-align: center;
76             padding: 5px 0 0 0;
77         }
78         .heightcontainer {
79             height: 100%;
80             position: relative;
81         }
82         .calendarmonth {
83             width: 98%;
84             margin: 10px auto;
85         }
86         .calendarmonth {
87             ul {
88                 margin: 0;
89                 li {
90                     list-style-type: none;
91                     margin-top: 4px;
92                 }
93             }
94             td {
95                 height: 5em;
96             }
97         }
98         .calendar-controls {
99             .previous,
100             .next {
101                 width: 30%;
102             }
103             .current {
104                 width: 39.95%;
105             }
106         }
107         .controls {
108             width: 98%;
109             margin: 10px auto;
110         }
111         .calendar_event_course,
112         .calendar_event_global,
113         .calendar_event_group,
114         .calendar_event_user {
115             border-width: 1px 1px 1px 12px;
116             border-style: solid;
117         }
118         .calendar_event_course {
119             border-color: @calendarEventCourseColor;
120         }
121         .calendar_event_global {
122             border-color: @calendarEventGlobalColor;
123         }
124         .calendar_event_group {
125             border-color: @calendarEventGroupColor;
126         }
127         .calendar_event_user {
128             border-color: @calendarEventUserColor;
129         }
130         .calendar-controls {
131             .current {
132                 font-family: @headingsFontFamily;
133                 font-weight: @headingsFontWeight;
134                 color: @headingsColor;
135                 font-size: 25px;
136                 line-height: 1.2;
137             }
138         }
139         .calendartable {
140             td,
141             li {
142                 padding: 5px;
143             }
144             li {
145                 padding-left: 10px;
146                 text-align: left;
147             }
148         }
149         .header {
150             overflow: hidden;
151             .buttons {
152                 float: right;
153             }
154         }
155         .eventlist {
156             margin: 0;
158             .event {
159                 border-spacing: 0;
160                 border-collapse: separate;
161                 position: relative;
162                 margin-bottom: 20px;
163                 list-style-type: none;
165                 > img {
166                     padding-top: 3px;
167                     float: left;
168                 }
169                 .name {
170                     font-size: @fontSizeLarge;
171                     font-weight: 200;
172                     line-height: 24px;
173                     float: left;
174                     margin: 0;
175                     margin-right: 0.5rem;
176                 }
177                 .name,
178                 .course {
179                     margin-bottom: 5px;
180                 }
181                 .date {
182                     float: right;
183                 }
184                 .course,
185                 .subscription {
186                     float: left;
187                     clear: left;
188                 }
189                 .side {
190                     width: 22px;
191                 }
192                 .description {
193                     background-color: @white;
194                     clear: both;
195                 }
196                 .commands {
197                     a {
198                         margin: 0 3px;
199                     }
200                 }
201             }
202         }
203     }
206 // Calendar export.
207 #page-calendar-export {
208     .indent {
209         padding-left: 20px;
210     }
213 // Block minicalendar.
214 .block {
215     .minicalendar {
216         max-width: 280px;
217         margin: 0 auto;
218         width: 100%;
219         th,
220         td {
221             padding: 2px;
222             font-size: 0.8em;
223             text-align: center;
224         }
225         td {
226             &.weekend {
227                 .muted;
228             }
229             a {
230                 width: 100%;
231                 height: 100%;
232                 display: block;
233             }
234             &.duration_global {
235                 border-top: 1px solid @calendarEventGlobalColor;
236                 border-bottom: 1px solid @calendarEventGlobalColor;
237                 &.duration_finish {
238                     background-color: @calendarEventGlobalColor;
239                 }
240             }
241             &.duration_course {
242                 border-top: 1px solid @calendarEventCourseColor;
243                 border-bottom: 1px solid @calendarEventCourseColor;
244                 &.duration_finish {
245                     background-color: @calendarEventCourseColor;
246                 }
247             }
248             &.duration_group {
249                 border-top: 1px solid @calendarEventGroupColor;
250                 border-bottom: 1px solid @calendarEventGroupColor;
251                 &.duration_finish {
252                     background-color: @calendarEventGroupColor;
253                 }
254             }
255             &.duration_user {
256                 border-top: 1px solid @calendarEventUserColor;
257                 border-bottom: 1px solid @calendarEventUserColor;
258                 &.duration_finish {
259                     background-color: @calendarEventUserColor;
260                 }
261             }
262         }
263         caption {
264             font-size: inherit;
265             font-weight: inherit;
266             line-height: inherit;
267             text-align: center;
268         }
269     }
270     .calendar-controls {
271         .previous,
272         .current,
273         .next {
274             display: block;
275             float: left;
276         }
277         .previous {
278             text-align: left;
279             width: 12%;
280         }
281         .current {
282             text-align: center;
283             width: 76%;
284         }
285         .next {
286             text-align: right;
287             width: 12%;
288         }
289     }
290     .calendar_filters {
291         ul {
292             list-style: none;
293             margin: 0;
294         }
295         li {
296             margin-bottom: 0.2em;
297             span {
298                 img {
299                     padding: 0 0.2em;
300                 }
301             }
302         }
303         .eventname {
304             padding-left: 0.2em;
305         }
306     }
307     .content {
308         h3 {
309             &.eventskey {
310                 margin-top: 0.5em;
311             }
312         }
313     }
316 .ical-link {
317     font-size: 10px;
318     font-weight: bold;
319     background-color: #f60;
320     padding: 0 5px;
321     color: #fff;
322     border-top: 1px solid #f93;
323     border-left: 1px solid #f93;
324     border-bottom: 1px solid #013;
325     border-right: 1px solid #013;
327 .ical-link:hover,
328 .ical-link:active,
329 .ical-link:focus,
330 .ical-link:visited {
331     color: #fff;
332     text-decoration: none;
335 @media (min-width: 768px) {
336     #page-calender-view {
337         .container-fluid {
338             min-width: 1024px;
339         }
340     }