PluginProbe
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses / 4.4.5
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses v4.4.5
4.4.8 4.4.7 4.4.6 4.4.5 4.4.4 4.4.3 4.4.2 4.4.1 4.4.0 4.3.9.1 4.3.9 4.3.8 4.3.7 4.1.6.9 4.1.6.9.1 4.1.6.9.2 4.1.6.9.3 4.1.6.9.4 4.1.7 4.1.7.1 4.1.7.2 4.1.7.3 4.1.7.3.1 4.1.7.3.2 4.2.0 All 139 releases
learnpress / assets / css / edit-quiz.css

edit-quiz.css in LearnPress – WordPress LMS Plugin for Create and Sell Online Courses 4.4.5, at assets/css/edit-quiz.css

715 lines 16.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Style for Edit Quiz.
3 *
4 * @since 4.2.9
5 * @version 1.0.0
6 */
7 /**
8 * Style for the edit question page in LearnPress
9 * @since 4.2.9
10 * @version 1.0.0
11 */
12 /**
13 * Style for the popup select item to add in LearnPress
14 */
15 .lp-icon-angle-down {
16 display: none;
17 cursor: pointer;
18 }
19
20 .lp-icon-angle-up {
21 display: inline-block;
22 cursor: pointer;
23 }
24
25 .lp-collapse .lp-icon-angle-up {
26 display: none;
27 }
28 .lp-collapse .lp-icon-angle-down {
29 display: inline-block;
30 }
31
32 .lp-section-collapse {
33 display: grid;
34 padding: 12px;
35 border: 1px solid #C3C4C7;
36 border-top: none;
37 }
38
39 .lp-section-toggle.lp-collapse .lp-section-collapse {
40 display: none;
41 }
42
43 .lp-trigger-toggle {
44 display: flex;
45 align-items: center;
46 }
47
48 /**
49 * Style for the popup alert, confirm
50 * @link https://sweetalert2.github.io/
51 * @since 4.2.9
52 * @version 1.0.0
53 */
54 .swal2-container {
55 z-index: 99999;
56 }
57
58 .swal2-popup {
59 max-width: 850px;
60 }
61 .swal2-popup .content-title {
62 margin: 0 0 20px 0;
63 padding: 0;
64 text-align: center;
65 font-size: 1.5em;
66 font-weight: bold;
67 }
68 .swal2-popup .swal2-actions {
69 width: 100%;
70 padding: 0 30px;
71 }
72 .swal2-popup .swal2-actions button {
73 flex: 1;
74 }
75 .swal2-popup .swal2-actions button.swal2-confirm {
76 background-color: #e02200;
77 }
78 .swal2-popup .swal2-actions button.swal2-cancel {
79 background-color: transparent;
80 border: 1px solid #ccc;
81 color: inherit;
82 }
83 .swal2-popup .swal2-warning {
84 color: #e02200;
85 border-color: transparent;
86 background-color: rgba(223, 0, 0, 0.1019607843);
87 }
88 .swal2-popup .swal2-icon {
89 width: 50px;
90 height: 50px;
91 }
92 .swal2-popup .swal2-icon .swal2-icon-content {
93 font-size: 0;
94 }
95 .swal2-popup .swal2-icon .swal2-icon-content::before {
96 content: "\f071";
97 font-family: "lp-icon";
98 font-size: 24px;
99 display: inline-block;
100 }
101 .swal2-popup .swal2-title {
102 font-size: 1.5em;
103 }
104 .swal2-popup .swal2-html-container {
105 font-size: 1em;
106 }
107 .swal2-popup .lp-tom-select.ts-wrapper .ts-dropdown {
108 max-height: 200px;
109 overflow: hidden;
110 }
111 .swal2-popup .swal2-close {
112 background-color: unset !important;
113 outline: none !important;
114 color: rgb(204, 204, 204) !important;
115 font-size: 30px;
116 box-shadow: none !important;
117 position: absolute;
118 }
119 .swal2-popup .swal2-close:hover {
120 color: #f27474 !important;
121 }
122
123 .lp-icon-spinner {
124 animation: rotation 2s infinite linear;
125 font-size: 1.25rem;
126 color: #2271b1 !important;
127 display: none;
128 }
129
130 .lp-icon-drag {
131 cursor: grab;
132 line-height: 1;
133 }
134 .lp-icon-drag:active {
135 cursor: grabbing;
136 }
137
138 /***** Main Question Edit Styles using styles from Quiz Builder *****/
139 .lp-question-edit-main {
140 display: grid;
141 gap: 20px;
142 overflow: hidden;
143 padding: 20px;
144 grid-template-columns: 1fr 1fr;
145 /**
146 * Style for the buttons
147 */
148 }
149 .lp-question-edit-main [class*=lp-icon-] {
150 font-size: 1.25rem;
151 color: #787c82;
152 cursor: pointer;
153 }
154 .lp-question-edit-main input {
155 padding: 0;
156 margin: 0;
157 }
158 .lp-question-edit-main input[type=text] {
159 width: 100%;
160 border: none;
161 background: transparent;
162 box-shadow: none;
163 }
164 .lp-question-edit-main .lp-question-fib-buttons button {
165 display: flex !important;
166 align-items: center;
167 gap: 5px;
168 }
169 .lp-question-edit-main .lp-question-fib-buttons button.loading {
170 pointer-events: none;
171 opacity: 0.5 !important;
172 }
173 .lp-question-edit-main .lp-question-fib-buttons button.loading .lp-icon-spinner {
174 display: inline-block;
175 }
176 .lp-question-edit-main .loading {
177 pointer-events: none;
178 opacity: 0.5 !important;
179 }
180 .lp-question-edit-main .loading .lp-icon-spinner {
181 display: inline-block;
182 }
183 .lp-question-edit-main .lp-btn-edit-primary {
184 border: none;
185 background: #135e96;
186 color: #fff;
187 }
188 .lp-question-edit-main .lp-btn-edit-primary:not(.active) {
189 opacity: 0.5;
190 }
191 .lp-question-edit-main .lp-btn-edit-primary:hover, .lp-question-edit-main .lp-btn-edit-primary.active, .lp-question-edit-main .lp-btn-edit-primary.active:hover {
192 background: #135E96;
193 color: #fff;
194 opacity: 1;
195 }
196
197 .question-edit-details .lp-section-collapse {
198 padding: 0;
199 border: 1px solid #dcdcde;
200 }
201
202 .lp-question-data-edit-header {
203 display: flex;
204 align-items: center;
205 justify-content: space-between;
206 margin-bottom: 10px;
207 font-weight: bold;
208 }
209
210 .lp-question-choice-header {
211 display: flex;
212 justify-content: space-between;
213 padding: 10px;
214 background: #dcdcde;
215 }
216
217 .lp-question-answer-item {
218 display: flex;
219 flex-direction: row;
220 align-items: center;
221 gap: 5px;
222 padding: 5px;
223 margin: 0;
224 border: 1px solid #dcdcde;
225 border-top: none;
226 }
227 .lp-question-answer-item:hover .lp-btn-delete-question-answer {
228 display: inline-block;
229 }
230 .lp-question-answer-item.loading {
231 pointer-events: none;
232 opacity: 0.5 !important;
233 }
234 .lp-question-answer-item.loading .lp-icon-spinner {
235 display: inline-block;
236 }
237 .lp-question-answer-item .lp-btn-delete-question-answer {
238 display: none;
239 cursor: pointer;
240 }
241 .lp-question-answer-item .lp-icon-drag {
242 cursor: grab;
243 line-height: 1;
244 }
245 .lp-question-answer-item .lp-icon-drag:active {
246 cursor: grabbing;
247 }
248
249 .lp-question-answer-item-add-new {
250 display: flex;
251 flex-direction: row;
252 align-items: center;
253 gap: 5px;
254 padding: 5px;
255 margin: 0;
256 border: 1px solid #dcdcde;
257 border-top: none;
258 }
259 .lp-question-answer-item-add-new .lp-icon-plus {
260 cursor: auto;
261 margin-left: 5px;
262 }
263
264 .lp-question-field-settings {
265 padding: 10px 20px;
266 display: grid;
267 gap: 5px;
268 }
269 .lp-question-field-settings input[type=text],
270 .lp-question-field-settings input[type=number] {
271 padding: 0 10px;
272 }
273
274 /***** Fill in the Blank Styles *****/
275 .lp-question-fib-blank-options {
276 display: grid;
277 gap: 5px;
278 }
279 .lp-question-fib-blank-options .lp-question-fib-option-match-case-wrap {
280 display: grid;
281 gap: 10px;
282 }
283 .lp-question-fib-blank-options .lp-question-fib-option-match-case-wrap.lp-hidden {
284 display: grid !important;
285 pointer-events: none;
286 opacity: 0.5 !important;
287 }
288
289 .lp-question-fib-blank-option-item .lp-question-fib-option-header {
290 display: flex;
291 justify-content: space-between;
292 align-items: center;
293 gap: 10px;
294 padding: 10px;
295 background: #eee;
296 }
297 .lp-question-fib-blank-option-item .lp-question-fib-option-header .lp-icon-angle-down::before,
298 .lp-question-fib-blank-option-item .lp-question-fib-option-header .lp-icon-angle-up::before {
299 content: "\f142";
300 width: 15px;
301 text-align: center;
302 height: 30px;
303 display: flex;
304 align-items: center;
305 justify-content: center;
306 }
307 .lp-question-fib-blank-option-item .lp-question-fib-option-detail {
308 padding: 10px;
309 display: flex;
310 flex-direction: column;
311 gap: 10px;
312 border: 1px solid #eeeeee;
313 border-top: none;
314 }
315 .lp-question-fib-blank-option-item .lp-question-fib-option-detail p {
316 margin: 0;
317 padding: 0;
318 }
319
320 .lp-question-fib-buttons {
321 display: flex;
322 gap: 10px;
323 margin: 10px 0;
324 top: 1px;
325 }
326 .lp-question-fib-buttons .lp-btn-fib-clear-all-content {
327 border: none;
328 }
329
330 .lp-question-type-new-wrap {
331 display: flex;
332 gap: 5px;
333 }
334 .lp-question-type-new-wrap .lp-btn-question-create-type {
335 border: none;
336 background: rgba(19, 94, 150, 0.5);
337 color: #fff;
338 }
339 .lp-question-type-new-wrap .lp-btn-question-create-type:hover, .lp-question-type-new-wrap .lp-btn-question-create-type.active {
340 background: rgb(19, 94, 150) !important;
341 color: #fff !important;
342 }
343
344 /**
345 * Style for the popup select item to add in LearnPress
346 */
347 .lp-select-items-popup {
348 padding: 0 !important;
349 grid-row: 1 !important;
350 --swal2-close-button-font-size: 32px;
351 }
352 .lp-select-items-html-container {
353 padding: 0 !important;
354 }
355
356 .lp-popup-items-to-select {
357 text-align: left;
358 font-size: 1rem;
359 /**
360 * Style for the buttons
361 */
362 }
363 .lp-popup-items-to-select .lp-btn-edit-primary {
364 border: none;
365 background: #135e96;
366 color: #fff;
367 }
368 .lp-popup-items-to-select .lp-btn-edit-primary:not(.active) {
369 opacity: 0.5;
370 }
371 .lp-popup-items-to-select .lp-btn-edit-primary:hover, .lp-popup-items-to-select .lp-btn-edit-primary.active, .lp-popup-items-to-select .lp-btn-edit-primary.active:hover {
372 background: #135E96;
373 color: #fff;
374 opacity: 1;
375 }
376 .lp-popup-items-to-select .header {
377 position: relative;
378 }
379 .lp-popup-items-to-select .header .header-count-items-selected {
380 border-bottom: 1px solid #C3C4C7;
381 padding: 16px 20px;
382 }
383 .lp-popup-items-to-select .header .tabs {
384 margin: 0;
385 border-bottom: 1px solid #C3C4C7;
386 }
387 .lp-popup-items-to-select .header .tabs .tab {
388 display: inline-block;
389 position: relative;
390 margin: 0;
391 }
392 .lp-popup-items-to-select .header .tabs .tab:not(:last-child)::before {
393 position: absolute;
394 top: 50%;
395 right: 0;
396 height: 44px;
397 margin-top: -22px;
398 border-right: 1px solid #C3C4C7;
399 content: "";
400 }
401 .lp-popup-items-to-select .header .tabs .tab.active::after {
402 display: inline-block;
403 position: absolute;
404 bottom: -6px;
405 left: 50%;
406 width: 10px;
407 height: 10px;
408 margin-left: -6px;
409 border: 1px solid #C3C4C7;
410 border-right: 0;
411 border-bottom: 0;
412 background: #fff;
413 content: "";
414 transform: rotate(45deg);
415 }
416 .lp-popup-items-to-select .header .tabs .tab.active a {
417 color: #0073aa;
418 }
419 .lp-popup-items-to-select .header .tabs .tab a {
420 display: inline-block;
421 height: 44px;
422 padding: 0 20px;
423 color: #333;
424 font-weight: 600;
425 line-height: 2.75rem;
426 text-decoration: none;
427 }
428 .lp-popup-items-to-select .header .tabs .tab a:focus {
429 box-shadow: none;
430 }
431 .lp-popup-items-to-select .main {
432 overflow: hidden;
433 position: relative;
434 padding: 20px;
435 border-bottom: 1px solid #C3C4C7;
436 }
437 .lp-popup-items-to-select .main input.lp-search-title-item {
438 width: 100%;
439 font-size: 1rem;
440 border: 1px solid #C3C4C7;
441 margin-bottom: 10px;
442 }
443 .lp-popup-items-to-select .list-items, .lp-popup-items-to-select .list-items-selected {
444 display: flex;
445 flex-direction: column;
446 gap: 10px;
447 overflow-y: auto;
448 min-height: 260px;
449 max-height: 460px;
450 margin: 0;
451 }
452 .lp-popup-items-to-select .list-items li, .lp-popup-items-to-select .list-items-selected li {
453 margin: 0;
454 cursor: pointer;
455 }
456 .lp-popup-items-to-select .list-items-selected li {
457 display: flex;
458 gap: 5px;
459 align-items: center;
460 color: #999;
461 }
462 .lp-popup-items-to-select .list-items-selected li .item-type {
463 padding: 0;
464 font-size: inherit;
465 color: inherit;
466 line-height: unset;
467 }
468 .lp-popup-items-to-select .list-items-selected li .item-title {
469 color: #333;
470 }
471 .lp-popup-items-to-select .list-items-selected li.selected {
472 background-color: #F4FCFF;
473 }
474 .lp-popup-items-to-select .list-items-selected li:hover .dashicons-remove {
475 opacity: 1;
476 }
477 .lp-popup-items-to-select .list-items-selected .dashicons-remove {
478 color: #E74C3C;
479 opacity: 0.6;
480 }
481 .lp-popup-items-to-select .pagination {
482 display: flex;
483 flex-wrap: wrap;
484 margin: 10px 0 -10px -10px;
485 align-items: center;
486 }
487 .lp-popup-items-to-select .pagination li {
488 margin: 0;
489 cursor: pointer;
490 }
491 .lp-popup-items-to-select .pagination li .page-numbers {
492 height: 30px;
493 display: flex;
494 align-items: center;
495 justify-content: center;
496 }
497 .lp-popup-items-to-select .pagination li a {
498 text-decoration: none;
499 display: flex;
500 align-items: center;
501 }
502 .lp-popup-items-to-select .footer {
503 padding: 16px 20px;
504 display: flex;
505 gap: 5px;
506 }
507
508 /**
509 * Style for the popup select item to add in LearnPress
510 */
511 .lp-icon-angle-down {
512 display: none;
513 cursor: pointer;
514 }
515
516 .lp-icon-angle-up {
517 display: inline-block;
518 cursor: pointer;
519 }
520
521 .lp-collapse .lp-icon-angle-up {
522 display: none;
523 }
524 .lp-collapse .lp-icon-angle-down {
525 display: inline-block;
526 }
527
528 .lp-section-collapse {
529 display: grid;
530 padding: 12px;
531 border: 1px solid #C3C4C7;
532 border-top: none;
533 }
534
535 .lp-section-toggle.lp-collapse .lp-section-collapse {
536 display: none;
537 }
538
539 .lp-trigger-toggle {
540 display: flex;
541 align-items: center;
542 }
543
544 .lp-edit-quiz-wrap {
545 padding: 12px;
546 /**
547 * Style for the buttons
548 */
549 /*.lp-btn-add-question {
550 border: none !important;
551 background: rgba(19, 94, 150, 0.5) !important;
552 color: #fff !important;
553
554 &:hover, &.active {
555 background: rgba(19, 94, 150, 1) !important;
556 color: #fff !important;
557 }
558 }*/
559 }
560 .lp-edit-quiz-wrap [class*=lp-icon-] {
561 font-size: 1.25rem;
562 color: #787c82;
563 }
564 .lp-edit-quiz-wrap input {
565 padding: 0;
566 margin: 0;
567 }
568 .lp-edit-quiz-wrap input[type=text] {
569 width: 100%;
570 border: none;
571 font-size: 0.875rem;
572 background: transparent;
573 box-shadow: none;
574 }
575 .lp-edit-quiz-wrap .lp-icon-spinner {
576 animation: rotation 2s infinite linear;
577 font-size: 1.25rem;
578 color: #2271B1;
579 display: none;
580 }
581 .lp-edit-quiz-wrap .lp-icon-drag {
582 cursor: grab;
583 line-height: 1;
584 }
585 .lp-edit-quiz-wrap .lp-icon-drag:active {
586 cursor: grabbing;
587 }
588 .lp-edit-quiz-wrap .lp-btn-edit-primary {
589 border: none;
590 background: #135e96;
591 color: #fff;
592 }
593 .lp-edit-quiz-wrap .lp-btn-edit-primary:not(.active) {
594 opacity: 0.5;
595 }
596 .lp-edit-quiz-wrap .lp-btn-edit-primary:hover, .lp-edit-quiz-wrap .lp-btn-edit-primary.active, .lp-edit-quiz-wrap .lp-btn-edit-primary.active:hover {
597 background: #135E96;
598 color: #fff;
599 opacity: 1;
600 }
601 .lp-edit-quiz-wrap .heading {
602 display: flex;
603 flex-direction: row;
604 flex-wrap: nowrap;
605 margin-bottom: 15px;
606 align-items: center;
607 line-height: 1;
608 gap: 5px;
609 padding-right: 12px;
610 }
611 .lp-edit-quiz-wrap .heading .count-sections .one, .lp-edit-quiz-wrap .heading .count-sections .plural, .lp-edit-quiz-wrap .heading .total-items .one, .lp-edit-quiz-wrap .heading .total-items .plural {
612 display: none;
613 }
614 .lp-edit-quiz-wrap .heading .count-sections[data-count="1"] .one, .lp-edit-quiz-wrap .heading .total-items[data-count="1"] .one {
615 display: inline-block;
616 }
617 .lp-edit-quiz-wrap .heading .count-sections:not([data-count="1"]) .plural, .lp-edit-quiz-wrap .heading .total-items:not([data-count="1"]) .plural {
618 display: inline-block;
619 }
620 .lp-edit-quiz-wrap .heading .total-items {
621 margin-left: auto;
622 }
623 .lp-edit-quiz-wrap .heading h4 {
624 margin: 0;
625 font-size: 1em;
626 font-weight: normal;
627 }
628 .lp-edit-quiz-wrap .lp-edit-list-questions {
629 border: 1px solid #C3C4C7;
630 border-bottom: none;
631 }
632 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item {
633 border-bottom: 1px solid #C3C4C7;
634 }
635 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item.lp-collapse .lp-question-edit-main {
636 display: none;
637 }
638 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item.loading {
639 pointer-events: none;
640 opacity: 0.5 !important;
641 }
642 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item.loading .lp-icon-spinner {
643 display: inline-block;
644 }
645 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item[data-question-type=fill_in_blanks] .lp-btn-update-question-answer {
646 display: none;
647 }
648 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item .lp-question-type-label {
649 white-space: nowrap;
650 text-overflow: ellipsis;
651 background: #efefef;
652 padding: 5px;
653 border-radius: 4px;
654 }
655 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item .lp-btn-remove-question, .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item .lp-btn-edit-question-title {
656 font-size: 1.15rem;
657 cursor: pointer;
658 text-decoration: none;
659 }
660 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item .lp-btn-update-question-title, .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item .lp-btn-cancel-update-question-title {
661 display: none;
662 }
663 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item.editing .lp-btn-update-question-title, .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item.editing .lp-btn-cancel-update-question-title {
664 display: inline-block;
665 }
666 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item.editing .lp-btn-edit-question-title, .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item.editing .lp-btn-remove-question {
667 display: none;
668 }
669 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item .lp-btn-cancel-update-question-title {
670 border: none;
671 background: transparent;
672 }
673 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item .lp-btn-cancel-update-question-title:hover {
674 background: #f0f0f1;
675 }
676 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item:hover {
677 /*.lp-btn-remove-question, .lp-btn-edit-question-title {
678 display: inline-block;
679 }*/
680 }
681 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-head {
682 display: flex;
683 margin: 0;
684 padding: 6px 10px;
685 background: #F4FCFF;
686 transition: background 200ms ease-out;
687 align-items: center;
688 gap: 5px;
689 }
690 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-section-toggle.lp-collapse .lp-section-collapse {
691 display: none;
692 }
693 .lp-edit-quiz-wrap .add-new-question {
694 display: flex;
695 margin: 0;
696 padding: 6px 10px;
697 background: #F4FCFF;
698 transition: background 200ms ease-out;
699 align-items: center;
700 gap: 5px;
701 border: 1px solid #C3C4C7;
702 border-top: none;
703 }
704 .lp-edit-quiz-wrap .lp-question-edit-left {
705 display: flex;
706 flex-direction: column;
707 gap: 20px;
708 }
709
710 @media (max-width: 768px) {
711 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-edit-main {
712 display: grid;
713 grid-template-columns: 1fr;
714 }
715 }