on-demand release 3.1beta+
[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;
cc193e0d
RW
53 padding: 3em;
54}
55
af9d3a92
JO
56#external-registration-container .registration-loading-container .loading-text, #external-registration-container .registration-loading-container .loader {
57 font-size: 2em;
58}
59
cc193e0d
RW
60#external-registration-container .registration-loading-container .loader {
61 margin-left: auto;
62 margin-right: auto;
63 margin-bottom: 1em;
64 height: 2em;
65 width: 2em;
66}
67
68#registration-submit {
69 min-width: 140px;
70}
71
72#registration-form-container {
73 min-height: 230px;
74}
75
76#registration-form-container .well {
77 margin-bottom: 0;
78}
79
80#registration-form-container .control-group:last-child {
81 margin-bottom: 0;
82}
83
84#registration-choice-container .well {
85 text-align: center;
86}
87
88#registration-choice-container .btn-toolbar {
89 margin-bottom: 0;
90}
91
92#registration-choice-container p:last-child {
93 margin-top: 20px;
94}
95
96#registration-feedback-container {
97 cursor: pointer;
98}
99
100#registration-feedback-container h4 {
101 text-transform: capitalize;
102}
103
104#tool-type-capabilities-container .registration-loading-container {
105 display: none;
106}
107
108#tool-type-capabilities-container.loading .registration-loading-container {
109 display: block;
110}
111
112#tool-type-capabilities-container.loading #tool-type-capabilities-template-container {
113 display: none;
114}
115
116.centered-menu {
117 max-width: 70%;
118 margin-left: auto;
119 margin-right: auto;
120}
121
122.btn-text {
123 display: block;
124}
125
126.btn-loader {
127 display: none;
128}
129
130.loading .btn-text {
131 display: none;
132}
133
134.loading .btn-loader {
135 display: block;
136}
137
138.btn .loader {
139 margin-left: auto;
140 margin-right: auto;
141}
142
af9d3a92
JO
143.btn .loader img {
144 height: 1.5em;
cc193e0d
RW
145}
146
147#tool-list-container h3 {
148 display: inline-block;
149}
150
151#tool-list-loader-container {
152 display: inline-block;
153}
154
155#tool-list-loader-container .loader {
156 display: none;
157}
af9d3a92
JO
158#tool-list-loader-container .loader img {
159 height: 2em;
160}
cc193e0d
RW
161
162.loading #tool-list-loader-container .loader {
163 display: block;
164}
165
af9d3a92
JO
166.loading #tool-notools-text {
167 display: none;
168}
169
cc193e0d
RW
170.tool-card {
171 display: inline-block;
172 width: 250px;
173 height: 300px;
174 border: 1px solid #e5e5e5;
175 border-radius: 10px;
176 margin: 5px;
177 position: relative;
178 box-sizing: border-box;
179 vertical-align: top;
180}
181
182.tool-card:hover,
183.tool-card:focus {
184 border-color: #0088cc;
185 box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
186 -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
187 -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
188 -o-transition: border linear 0.2s, box-shadow linear 0.2s;
189 transition: border linear 0.2s, box-shadow linear 0.2s;
190}
191
192.tool-card .overlay-container {
193 background-color: rgba(255, 255, 255, 0.8);
194 border-radius: 10px;
195 display: none;
196 height: 100%;
197 left: 0;
198 position: absolute;
199 text-align: center;
200 top: 0;
201 width: 100%;
202 z-index: 100;
203 box-sizing: border-box;
204 padding: 10px;
205}
206
207.tool-card .overlay-container .img-container {
208 position: absolute;
209 top: 115px;
210 left: 90px;
211 display: block;
212 width: 70px;
213 height: 70px;
214}
215
216.tool-card .overlay-container .img-container img {
217 height: 100%;
218 width: 100%;
219}
220
221.tool-card.announcement > .overlay-container {
222 display: block;
223}
224
225.tool-card.announcement .overlay-container .loader {
226 display: none;
227}
228
229.tool-card.announcement.loading .overlay-container .loader {
230 display: block;
231 width: 100%;
232 height: 100%;
233}
234
235.tool-card.announcement .overlay-container .success-icon-container {
236 display: none;
237}
238
239.tool-card.announcement.success .overlay-container .success-icon-container {
240 display: block;
241}
242
243.tool-card.announcement .overlay-container .fail-icon-container {
244 display: none;
245}
246
247.tool-card.announcement.fail .overlay-container .fail-icon-container {
248 display: block;
249}
250
251.tool-card.announcement .overlay-container .capabilities-container {
252 display: none;
253}
254
255.tool-card.announcement.capabilities .overlay-container .capabilities-container {
256 display: block;
257}
258
259.tool-card.announcement.capabilities .overlay-container {
260 background-color: rgb(255, 255, 255);
261}
262
263.tool-card.announcement.capabilities .overlay-container .img-container {
264 display: none;
265}
266
267.tool-card-content {
268 z-index: 1;
269}
270
271.tool-card-header {
272 text-align: center;
273 background-color: #f5f5f5;
274 padding: 10px;
275 border-top-left-radius: 10px;
276 border-top-right-radius: 10px;
277 box-sizing: border-box;
278 height: 125px;
279}
280
281.tool-card-subheader {
282 margin-bottom: 10px;
283 text-align: left;
284}
285
af9d3a92
JO
286.dir-rtl .tool-card-subheader {
287 text-align: right;
288}
289
cc193e0d
RW
290.tool-card-header .tool-card-icon {
291 width: 35px;
292 height: 35px;
293}
294
295.tool-card-header .name {
296 margin-bottom: 0;
297 white-space: nowrap;
298}
299
300.tool-card-header .tool-card-actions {
af9d3a92
JO
301 float: right;
302}
303
304.dir-rtl .tool-card-header .tool-card-actions {
305 float: left;
cc193e0d
RW
306}
307
308.tool-card-header .tool-card-actions img {
309 width: 15px;
310 height: 15px;
311 margin-left: 7px;
312}
313
af9d3a92
JO
314.dir-rtl .tool-card-header .tool-card-actions img {
315 margin-left: 0px;
316 margin-right: 7px;
317}
318
cc193e0d
RW
319.tool-card-body {
320 border-top: 1px solid #e5e5e5;
321 box-sizing: border-box;
322 padding: 5px;
323 height: 125px;
324}
325
326.tool-card-body .description {
327 max-height: 100px;
328}
329
330.tool-card-footer {
331 height: 50px;
332 text-align: center;
333 padding-top: 10px;
334 box-sizing: border-box;
335}
336
337.tool-card .contenteditable-container {
338 position: relative;
339}
340
341.tool-card [contenteditable=true] {
342 border: 1px solid transparent;
343 padding: 0.25em;
344 position: relative;
345 z-index: 1;
346 overflow: auto;
347}
348
349.tool-card [contenteditable=true]:hover {
350 border-radius: 4px;
351 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
352 background-color: #fff;
353 border: 1px solid #e3e3e3;
354 -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
355 -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
356 -o-transition: border linear 0.2s, box-shadow linear 0.2s;
357 transition: border linear 0.2s, box-shadow linear 0.2s;
358 cursor: text;
359}
360
361.tool-card [contenteditable=true]:focus {
362 outline: 0;
363 border-radius: 4px;
364 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
365 background-color: #fff;
366 border: 1px solid rgba(82, 168, 236, 0.8);
367 -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
368 -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
369 -o-transition: border linear 0.2s, box-shadow linear 0.2s;
370 transition: border linear 0.2s, box-shadow linear 0.2s;
371 cursor: text;
372}
373
374.tool-card [contenteditable=true].loading + .overlay-container {
375 border-radius: 4px;
376 display: block;
377}
378
379.tool-card [contenteditable=true] + .overlay-container .loader {
380 display: inline-block;
381 vertical-align: middle;
382}