MDL-64506 templates: Move BS2 btns' to BS4 btns'
[moodle.git] / mod / lti / styles.css
1 .path-mod-lti .ltiframe {
2     position: relative;
3     width: 100%;
4     height: 100%;
5 }
7 /** General Styles **/
8 .path-mod-lti .userpicture,
9 .path-mod-lti .picture.user,
10 .path-mod-lti .picture.teacher {
11     width: 35px;
12     height: 35px;
13     vertical-align: top;
14 }
16 .path-mod-lti .feedback .files,
17 .path-mod-lti .feedback .grade,
18 .path-mod-lti .feedback .outcome,
19 .path-mod-lti .feedback .finalgrade {
20     float: right;
21 }
23 .path-mod-lti .feedback .disabledfeedback {
24     width: 500px;
25     height: 250px;
26 }
28 .path-mod-lti .feedback .from {
29     float: left;
30 }
32 .path-mod-lti .files img {
33     margin-right: 4px;
34 }
36 .path-mod-lti .files a {
37     white-space: nowrap;
38 }
40 .path-mod-lti .late {
41     color: red;
42 }
44 .path-mod-lti .message {
45     text-align: center;
46 }
48 /* Styles for admin */
49 .path-admin-mod-lti .mform .fitem .fitemtitle {
50     min-width: 18em;
51     padding-right: 1em;
52 } /* Prevent setting titles from wrapping */
54 /* Styles for instructor editing an external tool */
56 .path-mod-lti .mform .fitem .fitemtitle {
57     min-width: 14em;
58     padding-right: 1em;
59 } /* Prevent setting titles from wrapping */
61 /* Styles for instructor_edit_tool_type.php */
62 #page-mod-lti-instructor_edit_tool_type .mform .fitem .fitemtitle {
63     min-width: 18em;
64     padding-right: 1em;
65 } /* Prevent setting titles from wrapping */
67 /* Styling for tool_configure page */
68 #registration-choice-container .buffer-text {
69     margin: 20px;
70 }
72 #choice-list {
73     list-style: none;
74     border-bottom: 1px solid #e3e3e3;
75     padding-bottom: 1em;
76     margin-left: 0;
77 }
79 #choice-list > li {
80     display: inline-block;
81 }
83 #external-registration-container iframe {
84     border: 1px solid #e5e5e5;
85     border-radius: 10px;
86     width: 100%;
87     min-height: 800px;
88 }
90 .loading-screen {
91     text-align: center;
92     padding: 3em;
93 }
95 .loading-screen .loading-text {
96     font-size: 2em;
97 }
99 .loading-screen .loader {
100     margin-left: auto;
101     margin-right: auto;
102     margin-bottom: 1em;
103     height: 2em;
104     width: 2em;
105     font-size: 2em;
108 #registration-submit {
109     min-width: 140px;
112 #registration-form-container {
113     min-height: 260px;
116 #registration-form-container .card {
117     margin-bottom: 0;
120 #registration-form-container .control-group:last-child {
121     margin-bottom: 0;
124 #registration-choice-container .card {
125     text-align: center;
128 #registration-choice-container .btn-toolbar {
129     margin-bottom: 0;
132 #registration-choice-container p:last-child {
133     margin-top: 20px;
136 #tool-type-capabilities-container .registration-loading-container {
137     display: none;
140 #tool-type-capabilities-container.loading .registration-loading-container {
141     display: block;
144 #tool-type-capabilities-container.loading #tool-type-capabilities-template-container {
145     display: none;
148 .centered-menu {
149     max-width: 70%;
150     margin-left: auto;
151     margin-right: auto;
154 .btn-text {
155     display: block;
158 .btn-loader {
159     display: none;
162 .loading .btn-text {
163     display: none;
166 .loading .btn-loader {
167     display: block;
170 .btn .loader {
171     margin-left: auto;
172     margin-right: auto;
175 .btn .loader img {
176     height: 1.5em;
179 #tool-list-container h3 {
180     display: inline-block;
183 #tool-list-loader-container {
184     display: inline-block;
187 #tool-list-loader-container .loader {
188     display: none;
191 #tool-list-loader-container .loader img {
192     height: 2em;
195 .loading #tool-list-loader-container .loader {
196     display: block;
199 .loading #tool-notools-text {
200     display: none;
203 .tool-card {
204     display: inline-block;
205     width: 250px;
206     height: 300px;
207     border: 1px solid #e5e5e5;
208     border-radius: 10px;
209     margin: 5px;
210     position: relative;
211     box-sizing: border-box;
212     vertical-align: top;
215 .tool-card:hover,
216 .tool-card:focus {
217     border-color: #08c;
218     box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
219     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
220     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
221     -o-transition: border linear 0.2s, box-shadow linear 0.2s;
222     transition: border linear 0.2s, box-shadow linear 0.2s;
225 .tool-card .overlay-container {
226     background-color: rgba(255, 255, 255, 0.8);
227     border-radius: 10px;
228     display: none;
229     height: 100%;
230     left: 0;
231     position: absolute;
232     text-align: center;
233     top: 0;
234     width: 100%;
235     z-index: 100;
236     box-sizing: border-box;
237     padding: 10px;
240 .tool-card .overlay-container .img-container {
241     position: absolute;
242     top: 115px;
243     left: 90px;
244     display: block;
245     width: 70px;
246     height: 70px;
249 .tool-card .overlay-container .img-container img {
250     height: 100%;
251     width: 100%;
254 .tool-card.announcement > .overlay-container {
255     display: block;
258 .tool-card.announcement .overlay-container .loader {
259     display: none;
262 .tool-card.announcement.loading .overlay-container .loader {
263     display: block;
264     width: 100%;
265     height: 100%;
268 .tool-card.announcement .overlay-container .success-icon-container {
269     display: none;
272 .tool-card.announcement.success .overlay-container .success-icon-container {
273     display: block;
276 .tool-card.announcement .overlay-container .fail-icon-container {
277     display: none;
280 .tool-card.announcement.fail .overlay-container .fail-icon-container {
281     display: block;
284 .tool-card.announcement .overlay-container .capabilities-container {
285     display: none;
288 .tool-card.announcement.capabilities .overlay-container .capabilities-container {
289     display: block;
292 .tool-card.announcement.capabilities .overlay-container {
293     background-color: rgb(255, 255, 255);
296 .tool-card.announcement.capabilities .overlay-container .img-container {
297     display: none;
300 .tool-card-content {
301     z-index: 1;
304 .tool-card-header {
305     text-align: center;
306     background-color: #f5f5f5;
307     padding: 10px;
308     border-top-left-radius: 10px;
309     border-top-right-radius: 10px;
310     box-sizing: border-box;
311     height: 125px;
314 .tool-card-subheader {
315     margin-bottom: 10px;
316     text-align: left;
319 .tool-card-header .tool-card-icon {
320     width: 35px;
321     height: 35px;
324 .tool-card-header .name {
325     margin-bottom: 0;
326     white-space: nowrap;
329 .tool-card-header .tool-card-actions {
330     float: right;
333 .tool-card-header .tool-card-actions img {
334     width: 15px;
335     height: 15px;
336     margin-left: 7px;
339 .tool-card-body {
340     border-top: 1px solid #e5e5e5;
341     box-sizing: border-box;
342     padding: 5px;
343     height: 125px;
346 .tool-card-body .description {
347     max-height: 100px;
348     word-wrap: break-word;
351 .tool-card-footer {
352     height: 50px;
353     text-align: center;
354     padding-top: 10px;
355     box-sizing: border-box;
358 .tool-card .contenteditable-container {
359     position: relative;
362 .tool-card [contenteditable=true] {
363     border: 1px solid transparent;
364     padding: 0.25em;
365     position: relative;
366     z-index: 1;
367     overflow: auto;
370 .tool-card [contenteditable=true]:hover {
371     border-radius: 4px;
372     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
373     background-color: #fff;
374     border: 1px solid #e3e3e3;
375     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
376     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
377     -o-transition: border linear 0.2s, box-shadow linear 0.2s;
378     transition: border linear 0.2s, box-shadow linear 0.2s;
379     cursor: text;
382 .tool-card [contenteditable=true]:focus {
383     outline: 0;
384     border-radius: 4px;
385     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
386     background-color: #fff;
387     border: 1px solid rgba(82, 168, 236, 0.8);
388     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
389     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
390     -o-transition: border linear 0.2s, box-shadow linear 0.2s;
391     transition: border linear 0.2s, box-shadow linear 0.2s;
392     cursor: text;
395 .tool-card [contenteditable=true].loading + .overlay-container {
396     border-radius: 4px;
397     display: block;
400 .tool-card [contenteditable=true] + .overlay-container .loader {
401     display: inline-block;
402     vertical-align: middle;
405 /* Styling for LTI view */
406 #contentframe {
407     border: 1px solid #ddd;
408     border-radius: 4px;