MDL-52154 mod_lti: Improve admin interface
[moodle.git] / mod / lti / styles.css
CommitLineData
73300339
CS
1.path-mod-lti .ltiframe {position: relative;width: 100%;height: 100%;}
2
3/** General Styles **/
4.path-mod-lti .userpicture,
5.path-mod-lti .picture.user,
6.path-mod-lti .picture.teacher {width:35px;height: 35px;vertical-align:top;}
7.path-mod-lti .feedback .files,
8.path-mod-lti .feedback .grade,
9.path-mod-lti .feedback .outcome,
10.path-mod-lti .feedback .finalgrade {float: right;}
11.path-mod-lti .feedback .disabledfeedback {width: 500px;height: 250px;}
12.path-mod-lti .feedback .from {float: left;}
13.path-mod-lti .files img {margin-right: 4px;}
14.path-mod-lti .files a {white-space:nowrap;}
15.path-mod-lti .late {color: red;}
16.path-mod-lti .message {text-align: center;}
17
73300339 18/* Styles for admin */
b26dc53c 19.path-admin-mod-lti .mform .fitem .fitemtitle { min-width:18em;padding-right:1em } /* Prevent setting titles from wrapping */
58e3a4f3 20
038d8e30
CS
21/* Styles for instructor editing an external tool */
22
23.path-mod-lti .mform .fitem .fitemtitle { min-width:14em;padding-right:1em } /* Prevent setting titles from wrapping */
24
58e3a4f3
CS
25/* Styles for instructor_edit_tool_type.php */
26#page-mod-lti-instructor_edit_tool_type .mform .fitem .fitemtitle { min-width:18em;padding-right:1em } /* Prevent setting titles from wrapping */
cc193e0d
RW
27
28/* Styling for tool_configure page */
29#registration-choice-container .buffer-text {
30 margin: 20px;
31}
32
33#choice-list {
34 list-style: none;
35 border-bottom: 1px solid #e3e3e3;
36 padding-bottom: 1em;
37 margin-left: 0;
38}
39
40#choice-list > li {
41 display: inline-block;
42}
43
44#external-registration-container iframe {
45 border: 1px solid #e5e5e5;
46 border-radius: 10px;
47 width: 100%;
48 min-height: 800px;
49}
50
51#external-registration-container .registration-loading-container {
52 text-align: center;
53 font-size: 2em;
54 padding: 3em;
55}
56
57#external-registration-container .registration-loading-container .loader {
58 margin-left: auto;
59 margin-right: auto;
60 margin-bottom: 1em;
61 height: 2em;
62 width: 2em;
63}
64
65#registration-submit {
66 min-width: 140px;
67}
68
69#registration-form-container {
70 min-height: 230px;
71}
72
73#registration-form-container .well {
74 margin-bottom: 0;
75}
76
77#registration-form-container .control-group:last-child {
78 margin-bottom: 0;
79}
80
81#registration-choice-container .well {
82 text-align: center;
83}
84
85#registration-choice-container .btn-toolbar {
86 margin-bottom: 0;
87}
88
89#registration-choice-container p:last-child {
90 margin-top: 20px;
91}
92
93#registration-feedback-container {
94 cursor: pointer;
95}
96
97#registration-feedback-container h4 {
98 text-transform: capitalize;
99}
100
101#tool-type-capabilities-container .registration-loading-container {
102 display: none;
103}
104
105#tool-type-capabilities-container.loading .registration-loading-container {
106 display: block;
107}
108
109#tool-type-capabilities-container.loading #tool-type-capabilities-template-container {
110 display: none;
111}
112
113.centered-menu {
114 max-width: 70%;
115 margin-left: auto;
116 margin-right: auto;
117}
118
119.btn-text {
120 display: block;
121}
122
123.btn-loader {
124 display: none;
125}
126
127.loading .btn-text {
128 display: none;
129}
130
131.loading .btn-loader {
132 display: block;
133}
134
135.btn .loader {
136 margin-left: auto;
137 margin-right: auto;
138}
139
140.btn .loader .sk-circle:before {
141 background-color: #fff;
142}
143
144#tool-list-container h3 {
145 display: inline-block;
146}
147
148#tool-list-loader-container {
149 display: inline-block;
150}
151
152#tool-list-loader-container .loader {
153 display: none;
154}
155
156.loading #tool-list-loader-container .loader {
157 display: block;
158}
159
160.tool-card {
161 display: inline-block;
162 width: 250px;
163 height: 300px;
164 border: 1px solid #e5e5e5;
165 border-radius: 10px;
166 margin: 5px;
167 position: relative;
168 box-sizing: border-box;
169 vertical-align: top;
170}
171
172.tool-card:hover,
173.tool-card:focus {
174 border-color: #0088cc;
175 box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
176 -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
177 -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
178 -o-transition: border linear 0.2s, box-shadow linear 0.2s;
179 transition: border linear 0.2s, box-shadow linear 0.2s;
180}
181
182.tool-card .overlay-container {
183 background-color: rgba(255, 255, 255, 0.8);
184 border-radius: 10px;
185 display: none;
186 height: 100%;
187 left: 0;
188 position: absolute;
189 text-align: center;
190 top: 0;
191 width: 100%;
192 z-index: 100;
193 box-sizing: border-box;
194 padding: 10px;
195}
196
197.tool-card .overlay-container .img-container {
198 position: absolute;
199 top: 115px;
200 left: 90px;
201 display: block;
202 width: 70px;
203 height: 70px;
204}
205
206.tool-card .overlay-container .img-container img {
207 height: 100%;
208 width: 100%;
209}
210
211.tool-card.announcement > .overlay-container {
212 display: block;
213}
214
215.tool-card.announcement .overlay-container .loader {
216 display: none;
217}
218
219.tool-card.announcement.loading .overlay-container .loader {
220 display: block;
221 width: 100%;
222 height: 100%;
223}
224
225.tool-card.announcement .overlay-container .success-icon-container {
226 display: none;
227}
228
229.tool-card.announcement.success .overlay-container .success-icon-container {
230 display: block;
231}
232
233.tool-card.announcement .overlay-container .fail-icon-container {
234 display: none;
235}
236
237.tool-card.announcement.fail .overlay-container .fail-icon-container {
238 display: block;
239}
240
241.tool-card.announcement .overlay-container .capabilities-container {
242 display: none;
243}
244
245.tool-card.announcement.capabilities .overlay-container .capabilities-container {
246 display: block;
247}
248
249.tool-card.announcement.capabilities .overlay-container {
250 background-color: rgb(255, 255, 255);
251}
252
253.tool-card.announcement.capabilities .overlay-container .img-container {
254 display: none;
255}
256
257.tool-card-content {
258 z-index: 1;
259}
260
261.tool-card-header {
262 text-align: center;
263 background-color: #f5f5f5;
264 padding: 10px;
265 border-top-left-radius: 10px;
266 border-top-right-radius: 10px;
267 box-sizing: border-box;
268 height: 125px;
269}
270
271.tool-card-subheader {
272 margin-bottom: 10px;
273 text-align: left;
274}
275
276.tool-card-header .tool-card-icon {
277 width: 35px;
278 height: 35px;
279}
280
281.tool-card-header .name {
282 margin-bottom: 0;
283 white-space: nowrap;
284}
285
286.tool-card-header .tool-card-actions {
287 text-align: right;
288}
289
290.tool-card-header .tool-card-actions img {
291 width: 15px;
292 height: 15px;
293 margin-left: 7px;
294}
295
296.tool-card-body {
297 border-top: 1px solid #e5e5e5;
298 box-sizing: border-box;
299 padding: 5px;
300 height: 125px;
301}
302
303.tool-card-body .description {
304 max-height: 100px;
305}
306
307.tool-card-footer {
308 height: 50px;
309 text-align: center;
310 padding-top: 10px;
311 box-sizing: border-box;
312}
313
314.tool-card .contenteditable-container {
315 position: relative;
316}
317
318.tool-card [contenteditable=true] {
319 border: 1px solid transparent;
320 padding: 0.25em;
321 position: relative;
322 z-index: 1;
323 overflow: auto;
324}
325
326.tool-card [contenteditable=true]:hover {
327 border-radius: 4px;
328 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
329 background-color: #fff;
330 border: 1px solid #e3e3e3;
331 -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
332 -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
333 -o-transition: border linear 0.2s, box-shadow linear 0.2s;
334 transition: border linear 0.2s, box-shadow linear 0.2s;
335 cursor: text;
336}
337
338.tool-card [contenteditable=true]:focus {
339 outline: 0;
340 border-radius: 4px;
341 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
342 background-color: #fff;
343 border: 1px solid rgba(82, 168, 236, 0.8);
344 -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
345 -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
346 -o-transition: border linear 0.2s, box-shadow linear 0.2s;
347 transition: border linear 0.2s, box-shadow linear 0.2s;
348 cursor: text;
349}
350
351.tool-card [contenteditable=true].loading + .overlay-container {
352 border-radius: 4px;
353 display: block;
354}
355
356.tool-card [contenteditable=true] + .overlay-container .loader {
357 display: inline-block;
358 vertical-align: middle;
359}
360
361/* LOADER STYLING */
362.sk-fading-circle {
363 width: 20px;
364 height: 20px;
365 position: relative;
366}
367
368.sk-fading-circle .sk-circle {
369 width: 100%;
370 height: 100%;
371 position: absolute;
372 left: 0;
373 top: 0;
374}
375
376.sk-fading-circle .sk-circle:before {
377 content: '';
378 display: block;
379 margin: 0 auto;
380 width: 15%;
381 height: 15%;
382 background-color: #333;
383 border-radius: 100%;
384 -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
385 animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
386}
387.sk-fading-circle .sk-circle2 {
388 -webkit-transform: rotate(30deg);
389 -ms-transform: rotate(30deg);
390 transform: rotate(30deg);
391}
392.sk-fading-circle .sk-circle3 {
393 -webkit-transform: rotate(60deg);
394 -ms-transform: rotate(60deg);
395 transform: rotate(60deg);
396}
397.sk-fading-circle .sk-circle4 {
398 -webkit-transform: rotate(90deg);
399 -ms-transform: rotate(90deg);
400 transform: rotate(90deg);
401}
402.sk-fading-circle .sk-circle5 {
403 -webkit-transform: rotate(120deg);
404 -ms-transform: rotate(120deg);
405 transform: rotate(120deg);
406}
407.sk-fading-circle .sk-circle6 {
408 -webkit-transform: rotate(150deg);
409 -ms-transform: rotate(150deg);
410 transform: rotate(150deg);
411}
412.sk-fading-circle .sk-circle7 {
413 -webkit-transform: rotate(180deg);
414 -ms-transform: rotate(180deg);
415 transform: rotate(180deg);
416}
417.sk-fading-circle .sk-circle8 {
418 -webkit-transform: rotate(210deg);
419 -ms-transform: rotate(210deg);
420 transform: rotate(210deg);
421}
422.sk-fading-circle .sk-circle9 {
423 -webkit-transform: rotate(240deg);
424 -ms-transform: rotate(240deg);
425 transform: rotate(240deg);
426}
427.sk-fading-circle .sk-circle10 {
428 -webkit-transform: rotate(270deg);
429 -ms-transform: rotate(270deg);
430 transform: rotate(270deg);
431}
432.sk-fading-circle .sk-circle11 {
433 -webkit-transform: rotate(300deg);
434 -ms-transform: rotate(300deg);
435 transform: rotate(300deg);
436}
437.sk-fading-circle .sk-circle12 {
438 -webkit-transform: rotate(330deg);
439 -ms-transform: rotate(330deg);
440 transform: rotate(330deg);
441}
442.sk-fading-circle .sk-circle2:before {
443 -webkit-animation-delay: -1.1s;
444 animation-delay: -1.1s;
445}
446.sk-fading-circle .sk-circle3:before {
447 -webkit-animation-delay: -1s;
448 animation-delay: -1s;
449}
450.sk-fading-circle .sk-circle4:before {
451 -webkit-animation-delay: -0.9s;
452 animation-delay: -0.9s;
453}
454.sk-fading-circle .sk-circle5:before {
455 -webkit-animation-delay: -0.8s;
456 animation-delay: -0.8s;
457}
458.sk-fading-circle .sk-circle6:before {
459 -webkit-animation-delay: -0.7s;
460 animation-delay: -0.7s;
461}
462.sk-fading-circle .sk-circle7:before {
463 -webkit-animation-delay: -0.6s;
464 animation-delay: -0.6s;
465}
466.sk-fading-circle .sk-circle8:before {
467 -webkit-animation-delay: -0.5s;
468 animation-delay: -0.5s;
469}
470.sk-fading-circle .sk-circle9:before {
471 -webkit-animation-delay: -0.4s;
472 animation-delay: -0.4s;
473}
474.sk-fading-circle .sk-circle10:before {
475 -webkit-animation-delay: -0.3s;
476 animation-delay: -0.3s;
477}
478.sk-fading-circle .sk-circle11:before {
479 -webkit-animation-delay: -0.2s;
480 animation-delay: -0.2s;
481}
482.sk-fading-circle .sk-circle12:before {
483 -webkit-animation-delay: -0.1s;
484 animation-delay: -0.1s;
485}
486
487@-webkit-keyframes sk-circleFadeDelay {
488 0%, 39%, 100% { opacity: 0; }
489 40% { opacity: 1; }
490}
491
492@keyframes sk-circleFadeDelay {
493 0%, 39%, 100% { opacity: 0; }
494 40% { opacity: 1; }
495}