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