MDL-64506 templates: Move BS2 btns' to BS4 btns'
[moodle.git] / mod / lti / styles.css
CommitLineData
bc33e9bd
DP
1.path-mod-lti .ltiframe {
2 position: relative;
3 width: 100%;
4 height: 100%;
5}
73300339
CS
6
7/** General Styles **/
8.path-mod-lti .userpicture,
9.path-mod-lti .picture.user,
bc33e9bd
DP
10.path-mod-lti .picture.teacher {
11 width: 35px;
12 height: 35px;
13 vertical-align: top;
14}
15
73300339
CS
16.path-mod-lti .feedback .files,
17.path-mod-lti .feedback .grade,
18.path-mod-lti .feedback .outcome,
bc33e9bd
DP
19.path-mod-lti .feedback .finalgrade {
20 float: right;
21}
22
23.path-mod-lti .feedback .disabledfeedback {
24 width: 500px;
25 height: 250px;
26}
27
28.path-mod-lti .feedback .from {
29 float: left;
30}
31
32.path-mod-lti .files img {
33 margin-right: 4px;
34}
35
36.path-mod-lti .files a {
37 white-space: nowrap;
38}
39
40.path-mod-lti .late {
41 color: red;
42}
43
44.path-mod-lti .message {
45 text-align: center;
46}
73300339 47
73300339 48/* Styles for admin */
bc33e9bd
DP
49.path-admin-mod-lti .mform .fitem .fitemtitle {
50 min-width: 18em;
51 padding-right: 1em;
52} /* Prevent setting titles from wrapping */
58e3a4f3 53
038d8e30
CS
54/* Styles for instructor editing an external tool */
55
bc33e9bd
DP
56.path-mod-lti .mform .fitem .fitemtitle {
57 min-width: 14em;
58 padding-right: 1em;
59} /* Prevent setting titles from wrapping */
038d8e30 60
58e3a4f3 61/* Styles for instructor_edit_tool_type.php */
bc33e9bd
DP
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 */
cc193e0d
RW
66
67/* Styling for tool_configure page */
68#registration-choice-container .buffer-text {
69 margin: 20px;
70}
71
72#choice-list {
73 list-style: none;
74 border-bottom: 1px solid #e3e3e3;
75 padding-bottom: 1em;
76 margin-left: 0;
77}
78
79#choice-list > li {
80 display: inline-block;
81}
82
83#external-registration-container iframe {
84 border: 1px solid #e5e5e5;
85 border-radius: 10px;
86 width: 100%;
87 min-height: 800px;
88}
89
811d9ff9 90.loading-screen {
cc193e0d 91 text-align: center;
cc193e0d
RW
92 padding: 3em;
93}
94
811d9ff9 95.loading-screen .loading-text {
af9d3a92
JO
96 font-size: 2em;
97}
98
811d9ff9 99.loading-screen .loader {
cc193e0d
RW
100 margin-left: auto;
101 margin-right: auto;
102 margin-bottom: 1em;
103 height: 2em;
104 width: 2em;
811d9ff9 105 font-size: 2em;
cc193e0d
RW
106}
107
108#registration-submit {
109 min-width: 140px;
110}
111
112#registration-form-container {
811d9ff9 113 min-height: 260px;
cc193e0d
RW
114}
115
29551c4b 116#registration-form-container .card {
cc193e0d
RW
117 margin-bottom: 0;
118}
119
120#registration-form-container .control-group:last-child {
121 margin-bottom: 0;
122}
123
29551c4b 124#registration-choice-container .card {
cc193e0d
RW
125 text-align: center;
126}
127
128#registration-choice-container .btn-toolbar {
129 margin-bottom: 0;
130}
131
132#registration-choice-container p:last-child {
133 margin-top: 20px;
134}
135
cc193e0d
RW
136#tool-type-capabilities-container .registration-loading-container {
137 display: none;
138}
139
140#tool-type-capabilities-container.loading .registration-loading-container {
141 display: block;
142}
143
144#tool-type-capabilities-container.loading #tool-type-capabilities-template-container {
145 display: none;
146}
147
148.centered-menu {
149 max-width: 70%;
150 margin-left: auto;
151 margin-right: auto;
152}
153
154.btn-text {
155 display: block;
156}
157
158.btn-loader {
159 display: none;
160}
161
162.loading .btn-text {
163 display: none;
164}
165
166.loading .btn-loader {
167 display: block;
168}
169
170.btn .loader {
171 margin-left: auto;
172 margin-right: auto;
173}
174
af9d3a92
JO
175.btn .loader img {
176 height: 1.5em;
cc193e0d
RW
177}
178
179#tool-list-container h3 {
180 display: inline-block;
181}
182
183#tool-list-loader-container {
184 display: inline-block;
185}
186
187#tool-list-loader-container .loader {
188 display: none;
189}
bc33e9bd 190
af9d3a92
JO
191#tool-list-loader-container .loader img {
192 height: 2em;
193}
cc193e0d
RW
194
195.loading #tool-list-loader-container .loader {
196 display: block;
197}
198
af9d3a92
JO
199.loading #tool-notools-text {
200 display: none;
201}
202
cc193e0d
RW
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;
213}
214
215.tool-card:hover,
216.tool-card:focus {
aea8eaec 217 border-color: #08c;
cc193e0d
RW
218 box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
219 -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
bc33e9bd
DP
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;
cc193e0d
RW
223}
224
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;
238}
239
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;
247}
248
249.tool-card .overlay-container .img-container img {
250 height: 100%;
251 width: 100%;
252}
253
254.tool-card.announcement > .overlay-container {
255 display: block;
256}
257
258.tool-card.announcement .overlay-container .loader {
259 display: none;
260}
261
262.tool-card.announcement.loading .overlay-container .loader {
263 display: block;
264 width: 100%;
265 height: 100%;
266}
267
268.tool-card.announcement .overlay-container .success-icon-container {
269 display: none;
270}
271
272.tool-card.announcement.success .overlay-container .success-icon-container {
273 display: block;
274}
275
276.tool-card.announcement .overlay-container .fail-icon-container {
277 display: none;
278}
279
280.tool-card.announcement.fail .overlay-container .fail-icon-container {
281 display: block;
282}
283
284.tool-card.announcement .overlay-container .capabilities-container {
285 display: none;
286}
287
288.tool-card.announcement.capabilities .overlay-container .capabilities-container {
289 display: block;
290}
291
292.tool-card.announcement.capabilities .overlay-container {
293 background-color: rgb(255, 255, 255);
294}
295
296.tool-card.announcement.capabilities .overlay-container .img-container {
297 display: none;
298}
299
300.tool-card-content {
301 z-index: 1;
302}
303
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;
312}
313
314.tool-card-subheader {
315 margin-bottom: 10px;
316 text-align: left;
317}
318
319.tool-card-header .tool-card-icon {
320 width: 35px;
321 height: 35px;
322}
323
324.tool-card-header .name {
325 margin-bottom: 0;
326 white-space: nowrap;
327}
328
329.tool-card-header .tool-card-actions {
af9d3a92
JO
330 float: right;
331}
332
cc193e0d
RW
333.tool-card-header .tool-card-actions img {
334 width: 15px;
335 height: 15px;
336 margin-left: 7px;
337}
338
339.tool-card-body {
340 border-top: 1px solid #e5e5e5;
341 box-sizing: border-box;
342 padding: 5px;
343 height: 125px;
344}
345
346.tool-card-body .description {
347 max-height: 100px;
811d9ff9 348 word-wrap: break-word;
cc193e0d
RW
349}
350
351.tool-card-footer {
352 height: 50px;
353 text-align: center;
354 padding-top: 10px;
355 box-sizing: border-box;
356}
357
358.tool-card .contenteditable-container {
359 position: relative;
360}
361
362.tool-card [contenteditable=true] {
363 border: 1px solid transparent;
364 padding: 0.25em;
365 position: relative;
366 z-index: 1;
367 overflow: auto;
368}
369
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;
bc33e9bd
DP
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;
cc193e0d
RW
379 cursor: text;
380}
381
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;
bc33e9bd
DP
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;
cc193e0d
RW
392 cursor: text;
393}
394
395.tool-card [contenteditable=true].loading + .overlay-container {
396 border-radius: 4px;
397 display: block;
398}
399
400.tool-card [contenteditable=true] + .overlay-container .loader {
401 display: inline-block;
402 vertical-align: middle;
403}
9c8ef139
RW
404
405/* Styling for LTI view */
406#contentframe {
407 border: 1px solid #ddd;
408 border-radius: 4px;
409}