PluginProbe
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses / 4.4.4
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses v4.4.4
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 4.2.1 All 138 releases
learnpress / assets / css / edit-quiz.css

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

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