PluginProbe
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses / 4.4.6
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses v4.4.6
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.6, at assets/css/edit-quiz.css

730 lines 16.8 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 overflow-y: auto;
447 min-height: 260px;
448 max-height: 50vh;
449 margin: 0;
450 }
451 .lp-popup-items-to-select .list-items li, .lp-popup-items-to-select .list-items-selected li {
452 margin: 0;
453 cursor: pointer;
454 padding: 10px;
455 border: 1px solid white;
456 }
457 .lp-popup-items-to-select .list-items li:hover, .lp-popup-items-to-select .list-items-selected li:hover {
458 background-color: #eff6ff;
459 border-color: #e2eefe;
460 }
461 .lp-popup-items-to-select .list-items-selected li {
462 display: flex;
463 gap: 5px;
464 align-items: center;
465 color: #999;
466 }
467 .lp-popup-items-to-select .list-items-selected li .item-type {
468 padding: 0;
469 font-size: inherit;
470 color: inherit;
471 line-height: unset;
472 }
473 .lp-popup-items-to-select .list-items-selected li .item-title {
474 color: #333;
475 }
476 .lp-popup-items-to-select .list-items-selected li.selected {
477 background-color: #F4FCFF;
478 }
479 .lp-popup-items-to-select .list-items-selected li:hover .dashicons-remove {
480 opacity: 1;
481 }
482 .lp-popup-items-to-select .list-items-selected .dashicons-remove {
483 color: #E74C3C;
484 opacity: 0.6;
485 }
486 .lp-popup-items-to-select .pagination {
487 display: flex;
488 flex-wrap: wrap;
489 margin: 10px 0 -10px 0;
490 align-items: center;
491 flex-direction: column;
492 gap: 10px;
493 }
494 .lp-popup-items-to-select .pagination::before {
495 content: "";
496 display: block;
497 width: 100%;
498 height: 1px;
499 background-color: #ececec;
500 position: relative;
501 }
502 .lp-popup-items-to-select .pagination li {
503 margin: 0;
504 cursor: pointer;
505 }
506 .lp-popup-items-to-select .pagination li .page-numbers {
507 height: 30px;
508 display: flex;
509 align-items: center;
510 justify-content: center;
511 }
512 .lp-popup-items-to-select .pagination li a {
513 text-decoration: none;
514 display: flex;
515 align-items: center;
516 }
517 .lp-popup-items-to-select .footer {
518 padding: 16px 20px;
519 display: flex;
520 gap: 5px;
521 }
522
523 /**
524 * Style for the popup select item to add in LearnPress
525 */
526 .lp-icon-angle-down {
527 display: none;
528 cursor: pointer;
529 }
530
531 .lp-icon-angle-up {
532 display: inline-block;
533 cursor: pointer;
534 }
535
536 .lp-collapse .lp-icon-angle-up {
537 display: none;
538 }
539 .lp-collapse .lp-icon-angle-down {
540 display: inline-block;
541 }
542
543 .lp-section-collapse {
544 display: grid;
545 padding: 12px;
546 border: 1px solid #C3C4C7;
547 border-top: none;
548 }
549
550 .lp-section-toggle.lp-collapse .lp-section-collapse {
551 display: none;
552 }
553
554 .lp-trigger-toggle {
555 display: flex;
556 align-items: center;
557 }
558
559 .lp-edit-quiz-wrap {
560 padding: 12px;
561 /**
562 * Style for the buttons
563 */
564 /*.lp-btn-add-question {
565 border: none !important;
566 background: rgba(19, 94, 150, 0.5) !important;
567 color: #fff !important;
568
569 &:hover, &.active {
570 background: rgba(19, 94, 150, 1) !important;
571 color: #fff !important;
572 }
573 }*/
574 }
575 .lp-edit-quiz-wrap [class*=lp-icon-] {
576 font-size: 1.25rem;
577 color: #787c82;
578 }
579 .lp-edit-quiz-wrap input {
580 padding: 0;
581 margin: 0;
582 }
583 .lp-edit-quiz-wrap input[type=text] {
584 width: 100%;
585 border: none;
586 font-size: 0.875rem;
587 background: transparent;
588 box-shadow: none;
589 }
590 .lp-edit-quiz-wrap .lp-icon-spinner {
591 animation: rotation 2s infinite linear;
592 font-size: 1.25rem;
593 color: #2271B1;
594 display: none;
595 }
596 .lp-edit-quiz-wrap .lp-icon-drag {
597 cursor: grab;
598 line-height: 1;
599 }
600 .lp-edit-quiz-wrap .lp-icon-drag:active {
601 cursor: grabbing;
602 }
603 .lp-edit-quiz-wrap .lp-btn-edit-primary {
604 border: none;
605 background: #135e96;
606 color: #fff;
607 }
608 .lp-edit-quiz-wrap .lp-btn-edit-primary:not(.active) {
609 opacity: 0.5;
610 }
611 .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 {
612 background: #135E96;
613 color: #fff;
614 opacity: 1;
615 }
616 .lp-edit-quiz-wrap .heading {
617 display: flex;
618 flex-direction: row;
619 flex-wrap: nowrap;
620 margin-bottom: 15px;
621 align-items: center;
622 line-height: 1;
623 gap: 5px;
624 padding-right: 12px;
625 }
626 .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 {
627 display: none;
628 }
629 .lp-edit-quiz-wrap .heading .count-sections[data-count="1"] .one, .lp-edit-quiz-wrap .heading .total-items[data-count="1"] .one {
630 display: inline-block;
631 }
632 .lp-edit-quiz-wrap .heading .count-sections:not([data-count="1"]) .plural, .lp-edit-quiz-wrap .heading .total-items:not([data-count="1"]) .plural {
633 display: inline-block;
634 }
635 .lp-edit-quiz-wrap .heading .total-items {
636 margin-left: auto;
637 }
638 .lp-edit-quiz-wrap .heading h4 {
639 margin: 0;
640 font-size: 1em;
641 font-weight: normal;
642 }
643 .lp-edit-quiz-wrap .lp-edit-list-questions {
644 border: 1px solid #C3C4C7;
645 border-bottom: none;
646 }
647 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item {
648 border-bottom: 1px solid #C3C4C7;
649 }
650 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item.lp-collapse .lp-question-edit-main {
651 display: none;
652 }
653 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item.loading {
654 pointer-events: none;
655 opacity: 0.5 !important;
656 }
657 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item.loading .lp-icon-spinner {
658 display: inline-block;
659 }
660 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item[data-question-type=fill_in_blanks] .lp-btn-update-question-answer {
661 display: none;
662 }
663 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item .lp-question-type-label {
664 white-space: nowrap;
665 text-overflow: ellipsis;
666 background: #efefef;
667 padding: 5px;
668 border-radius: 4px;
669 }
670 .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 {
671 font-size: 1.15rem;
672 cursor: pointer;
673 text-decoration: none;
674 }
675 .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 {
676 display: none;
677 }
678 .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 {
679 display: inline-block;
680 }
681 .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 {
682 display: none;
683 }
684 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item .lp-btn-cancel-update-question-title {
685 border: none;
686 background: transparent;
687 }
688 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item .lp-btn-cancel-update-question-title:hover {
689 background: #f0f0f1;
690 }
691 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-item:hover {
692 /*.lp-btn-remove-question, .lp-btn-edit-question-title {
693 display: inline-block;
694 }*/
695 }
696 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-head {
697 display: flex;
698 margin: 0;
699 padding: 6px 10px;
700 background: #F4FCFF;
701 transition: background 200ms ease-out;
702 align-items: center;
703 gap: 5px;
704 }
705 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-section-toggle.lp-collapse .lp-section-collapse {
706 display: none;
707 }
708 .lp-edit-quiz-wrap .add-new-question {
709 display: flex;
710 margin: 0;
711 padding: 6px 10px;
712 background: #F4FCFF;
713 transition: background 200ms ease-out;
714 align-items: center;
715 gap: 5px;
716 border: 1px solid #C3C4C7;
717 border-top: none;
718 }
719 .lp-edit-quiz-wrap .lp-question-edit-left {
720 display: flex;
721 flex-direction: column;
722 gap: 20px;
723 }
724
725 @media (max-width: 768px) {
726 .lp-edit-quiz-wrap .lp-edit-list-questions .lp-question-edit-main {
727 display: grid;
728 grid-template-columns: 1fr;
729 }
730 }