PluginProbe
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses / 4.4.9
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses v4.4.9
4.4.9 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 All 140 releases
learnpress / assets / css / edit-curriculum.css

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

881 lines 21.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Edit Curriculum styles
3 */
4 /**
5 * Mixin
6 */
7 @keyframes rotating4 {
8 from {
9 transform: rotate(0deg);
10 }
11 to {
12 transform: rotate(360deg);
13 }
14 }
15 @keyframes animation4 {
16 from {
17 left: -40%;
18 width: 40%;
19 }
20 to {
21 left: 100%;
22 width: 10%;
23 }
24 }
25 .learn-press-message {
26 position: relative;
27 display: flex;
28 align-items: center;
29 margin: 0 !important;
30 padding: 10px 20px;
31 border-radius: var(--lp-border-radius, 5px);
32 background-color: #E5F7FF;
33 color: #007AFF;
34 max-width: 100%;
35 }
36 .learn-press-message::before {
37 display: inline-block;
38 margin-right: 8px;
39 font-family: "lp-icon";
40 font-size: 20px;
41 font-style: normal;
42 font-weight: normal;
43 line-height: 1;
44 }
45 .learn-press-message.error {
46 background-color: #FEE5E5;
47 color: #FF3B30;
48 border: 1px solid #E31A1A;
49 padding: 10px 20px;
50 }
51 .learn-press-message.error::before {
52 content: "\f071";
53 color: #E31A1A;
54 }
55 .learn-press-message.warning {
56 background-color: #FEF7E6;
57 color: #FF9500;
58 border: 1px solid #F8A100;
59 }
60 .learn-press-message.warning::before {
61 content: "\f06a";
62 color: #F8A100;
63 }
64 .learn-press-message.success {
65 background-color: #EBF8E5;
66 color: #3AB500;
67 border: 1px solid #28A746;
68 }
69 .learn-press-message.success::before {
70 content: "\f058";
71 color: #28A746;
72 }
73 .learn-press-message.info {
74 background-color: rgba(0, 122, 255, 0.1019607843);
75 color: #007AFF;
76 border: 1px solid #2E91FA;
77 }
78 .learn-press-message.info::before {
79 content: "\e931";
80 color: #2E91FA;
81 }
82 .learn-press-message a {
83 text-decoration: underline;
84 }
85
86 .lp-toast.toastify {
87 background: #EBF8E5;
88 color: #3AB500;
89 border-radius: var(--lp-border-radius, 5px);
90 box-shadow: 0 0 0;
91 display: flex;
92 align-items: center;
93 }
94 .lp-toast.toastify .toast-close {
95 background: transparent !important;
96 font-size: 0;
97 padding-left: 12px;
98 }
99 .lp-toast.toastify .toast-close:before {
100 content: "\f00d";
101 font-family: "lp-icon";
102 font-size: 16px;
103 color: #000;
104 line-height: 17px;
105 }
106 .lp-toast.toastify .toast-close:hover {
107 opacity: 1;
108 }
109 .lp-toast.toastify.error {
110 background-color: #FEE5E5;
111 color: #FF3B30;
112 padding: 12px 20px;
113 border: none;
114 margin: 0 auto;
115 }
116 .lp-toast.toastify.warning {
117 background-color: #FEF7E6;
118 color: #fb9422;
119 padding: 12px 20px;
120 border: none;
121 margin: 0 auto;
122 }
123 .lp-toast.toastify.info {
124 background-color: rgba(0, 122, 255, 0.1019607843);
125 color: #277afc;
126 padding: 12px 20px;
127 border: none;
128 margin: 0 auto;
129 }
130
131 /**
132 * Style for the popup select item to add in LearnPress
133 */
134 .lp-select-items-popup {
135 padding: 0 !important;
136 grid-row: 1 !important;
137 --swal2-close-button-font-size: 32px;
138 }
139 .lp-select-items-html-container {
140 padding: 0 !important;
141 }
142
143 .lp-popup-items-to-select {
144 text-align: left;
145 font-size: 1rem;
146 /**
147 * Style for the buttons
148 */
149 /* 5. Minimal Bottom Line */
150 }
151 .lp-popup-items-to-select .lp-btn-edit-primary {
152 border: none;
153 background: #135e96;
154 color: #fff;
155 }
156 .lp-popup-items-to-select .lp-btn-edit-primary:not(.active) {
157 opacity: 0.5;
158 }
159 .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 {
160 background: #135E96;
161 color: #fff;
162 opacity: 1;
163 }
164 .lp-popup-items-to-select .btn-line::after {
165 content: "";
166 position: absolute;
167 bottom: 0;
168 left: 0;
169 height: 4px;
170 width: 0%;
171 background-color: #38bdf8;
172 animation: lineLoad 2s ease-in-out infinite;
173 }
174 @keyframes lineLoad {
175 0% {
176 width: 0%;
177 left: 0;
178 }
179 50% {
180 width: 100%;
181 left: 0;
182 }
183 100% {
184 width: 0%;
185 left: 100%;
186 }
187 }
188 .lp-popup-items-to-select .header {
189 position: relative;
190 }
191 .lp-popup-items-to-select .header .header-count-items-selected {
192 border-bottom: 1px solid #C3C4C7;
193 padding: 16px 20px;
194 }
195 .lp-popup-items-to-select .header .tabs {
196 margin: 0;
197 border-bottom: 1px solid #C3C4C7;
198 }
199 .lp-popup-items-to-select .header .tabs .tab {
200 display: inline-block;
201 position: relative;
202 margin: 0;
203 }
204 .lp-popup-items-to-select .header .tabs .tab:not(:last-child)::before {
205 position: absolute;
206 top: 50%;
207 right: 0;
208 height: 44px;
209 margin-top: -22px;
210 border-right: 1px solid #C3C4C7;
211 content: "";
212 }
213 .lp-popup-items-to-select .header .tabs .tab.active::after {
214 display: inline-block;
215 position: absolute;
216 bottom: -6px;
217 left: 50%;
218 width: 10px;
219 height: 10px;
220 margin-left: -6px;
221 border: 1px solid #C3C4C7;
222 border-right: 0;
223 border-bottom: 0;
224 background: #fff;
225 content: "";
226 transform: rotate(45deg);
227 }
228 .lp-popup-items-to-select .header .tabs .tab.active a {
229 color: #0073aa;
230 }
231 .lp-popup-items-to-select .header .tabs .tab a {
232 display: inline-block;
233 height: 44px;
234 padding: 0 20px;
235 color: #333;
236 font-weight: 600;
237 line-height: 2.75rem;
238 text-decoration: none;
239 }
240 .lp-popup-items-to-select .header .tabs .tab a:focus {
241 box-shadow: none;
242 }
243 .lp-popup-items-to-select .main {
244 overflow: hidden;
245 position: relative;
246 padding: 20px;
247 border-bottom: 1px solid #C3C4C7;
248 }
249 .lp-popup-items-to-select .main input.lp-search-title-item {
250 width: 100%;
251 font-size: 1rem;
252 border: 1px solid #C3C4C7;
253 margin-bottom: 10px;
254 }
255 .lp-popup-items-to-select .list-items, .lp-popup-items-to-select .list-items-selected {
256 display: flex;
257 flex-direction: column;
258 overflow-y: auto;
259 min-height: 260px;
260 max-height: 50vh;
261 margin: 0;
262 }
263 .lp-popup-items-to-select .list-items li, .lp-popup-items-to-select .list-items-selected li {
264 margin: 0;
265 cursor: pointer;
266 padding: 10px;
267 border: 1px solid white;
268 }
269 .lp-popup-items-to-select .list-items li:hover, .lp-popup-items-to-select .list-items-selected li:hover {
270 background-color: #eff6ff;
271 border-color: #e2eefe;
272 }
273 .lp-popup-items-to-select .list-items-selected li {
274 display: flex;
275 gap: 5px;
276 align-items: center;
277 color: #999;
278 }
279 .lp-popup-items-to-select .list-items-selected li .item-type {
280 padding: 0;
281 font-size: inherit;
282 color: inherit;
283 line-height: unset;
284 }
285 .lp-popup-items-to-select .list-items-selected li .item-title {
286 color: #333;
287 }
288 .lp-popup-items-to-select .list-items-selected li.selected {
289 background-color: #F4FCFF;
290 }
291 .lp-popup-items-to-select .list-items-selected li:hover .dashicons-remove {
292 opacity: 1;
293 }
294 .lp-popup-items-to-select .list-items-selected .dashicons-remove {
295 color: #E74C3C;
296 opacity: 0.6;
297 }
298 .lp-popup-items-to-select .pagination {
299 display: flex;
300 flex-wrap: wrap;
301 margin: 10px 0 -10px 0;
302 align-items: center;
303 flex-direction: column;
304 gap: 10px;
305 }
306 .lp-popup-items-to-select .pagination::before {
307 content: "";
308 display: block;
309 width: 100%;
310 height: 1px;
311 background-color: #ececec;
312 position: relative;
313 }
314 .lp-popup-items-to-select .pagination li {
315 margin: 0;
316 cursor: pointer;
317 }
318 .lp-popup-items-to-select .pagination li .page-numbers {
319 height: 30px;
320 display: flex;
321 align-items: center;
322 justify-content: center;
323 }
324 .lp-popup-items-to-select .pagination li a {
325 text-decoration: none;
326 display: flex;
327 align-items: center;
328 }
329 .lp-popup-items-to-select .footer {
330 padding: 16px 20px;
331 display: flex;
332 gap: 5px;
333 }
334
335 /**
336 * Style for the popup alert, confirm
337 * @link https://sweetalert2.github.io/
338 * @since 4.2.9
339 * @version 1.0.0
340 */
341 .swal2-container {
342 z-index: 99999;
343 }
344
345 .swal2-popup {
346 max-width: 850px;
347 }
348 .swal2-popup .content-title {
349 margin: 0 0 20px 0;
350 padding: 0;
351 text-align: center;
352 font-size: 1.5em;
353 font-weight: bold;
354 }
355 .swal2-popup .swal2-actions {
356 width: 100%;
357 padding: 0 30px;
358 }
359 .swal2-popup .swal2-actions button {
360 flex: 1;
361 }
362 .swal2-popup .swal2-actions button.swal2-confirm {
363 background-color: #e02200;
364 }
365 .swal2-popup .swal2-actions button.swal2-cancel {
366 background-color: transparent;
367 border: 1px solid #ccc;
368 color: inherit;
369 }
370 .swal2-popup .swal2-warning {
371 color: #e02200;
372 border-color: transparent;
373 background-color: rgba(223, 0, 0, 0.1019607843);
374 }
375 .swal2-popup .swal2-icon {
376 width: 50px;
377 height: 50px;
378 }
379 .swal2-popup .swal2-icon .swal2-icon-content {
380 font-size: 0;
381 }
382 .swal2-popup .swal2-icon .swal2-icon-content::before {
383 content: "\f071";
384 font-family: "lp-icon";
385 font-size: 24px;
386 display: inline-block;
387 }
388 .swal2-popup .swal2-title {
389 font-size: 1.5em;
390 }
391 .swal2-popup .swal2-html-container {
392 font-size: 1em;
393 }
394 .swal2-popup .lp-tom-select.ts-wrapper .ts-dropdown {
395 max-height: 200px;
396 overflow: hidden;
397 }
398 .swal2-popup .swal2-close {
399 background-color: unset !important;
400 outline: none !important;
401 color: rgb(204, 204, 204) !important;
402 font-size: 30px;
403 box-shadow: none !important;
404 position: absolute;
405 }
406 .swal2-popup .swal2-close:hover {
407 color: #f27474 !important;
408 }
409
410 #lp-course-edit-curriculum {
411 padding: 12px;
412 }
413 #lp-course-edit-curriculum [class*=lp-icon-] {
414 font-size: 1.25rem;
415 color: #787c82;
416 }
417 #lp-course-edit-curriculum .lp-icon-angle-down, #lp-course-edit-curriculum .lp-icon-angle-up {
418 padding: 8px;
419 font-size: 24px;
420 cursor: pointer;
421 }
422 #lp-course-edit-curriculum .lp-icon-angle-down:hover, #lp-course-edit-curriculum .lp-icon-angle-up:hover {
423 color: #2271B1;
424 }
425 #lp-course-edit-curriculum input[type=text] {
426 width: 100%;
427 border: none;
428 box-shadow: none;
429 padding: 0;
430 }
431 #lp-course-edit-curriculum textarea {
432 width: 100%;
433 border: 1px solid #C3C4C7;
434 padding: 10px;
435 resize: vertical;
436 min-height: 50px;
437 }
438 #lp-course-edit-curriculum button {
439 color: #2271B1;
440 border-color: #2271B1;
441 background-color: #fff;
442 border-radius: 5px;
443 }
444 #lp-course-edit-curriculum button:hover {
445 background: #f0f0f1;
446 }
447 #lp-course-edit-curriculum .course-toggle-all-sections.lp-collapse .lp-icon-angle-up {
448 display: none;
449 }
450 #lp-course-edit-curriculum .course-toggle-all-sections:not(.lp-collapse) .lp-icon-angle-down {
451 display: none;
452 }
453 #lp-course-edit-curriculum .heading {
454 display: flex;
455 flex-direction: row;
456 flex-wrap: nowrap;
457 margin-bottom: 15px;
458 align-items: center;
459 line-height: 1;
460 gap: 5px;
461 padding-right: 12px;
462 }
463 #lp-course-edit-curriculum .heading .count-sections .one, #lp-course-edit-curriculum .heading .count-sections .plural, #lp-course-edit-curriculum .heading .total-items .one, #lp-course-edit-curriculum .heading .total-items .plural {
464 display: none;
465 }
466 #lp-course-edit-curriculum .heading .count-sections[data-count="1"] .one, #lp-course-edit-curriculum .heading .total-items[data-count="1"] .one {
467 display: inline-block;
468 }
469 #lp-course-edit-curriculum .heading .count-sections:not([data-count="1"]) .plural, #lp-course-edit-curriculum .heading .total-items:not([data-count="1"]) .plural {
470 display: inline-block;
471 }
472 #lp-course-edit-curriculum .heading .total-items {
473 margin-left: auto;
474 }
475 #lp-course-edit-curriculum .heading h4 {
476 margin: 0;
477 font-size: 1em;
478 font-weight: normal;
479 }
480 #lp-course-edit-curriculum .curriculum-sections {
481 border: 1px solid #C3C4C7;
482 border-bottom: none;
483 }
484 #lp-course-edit-curriculum .curriculum-sections .section-description {
485 margin-bottom: 10px;
486 }
487 #lp-course-edit-curriculum .curriculum-sections .section-description button {
488 display: none;
489 }
490 #lp-course-edit-curriculum .curriculum-sections .section-description .lp-btn-update-section-description {
491 margin-right: 5px;
492 }
493 #lp-course-edit-curriculum .curriculum-sections .section-description.editing button {
494 display: inline-block;
495 }
496 #lp-course-edit-curriculum .curriculum-sections .section-description input::placeholder {
497 color: #2271B1;
498 }
499 #lp-course-edit-curriculum .section {
500 margin: 0;
501 border-bottom: 1px solid #C3C4C7;
502 opacity: 1;
503 background: #fff;
504 }
505 #lp-course-edit-curriculum .section.focus {
506 border: 1px solid #2271B1 !important;
507 }
508 #lp-course-edit-curriculum .section.lp-collapse .section-collapse {
509 display: none;
510 }
511 #lp-course-edit-curriculum .section.lp-collapse .section-toggle .lp-icon-angle-up {
512 display: none;
513 }
514 #lp-course-edit-curriculum .section:not(.lp-collapse) .section-toggle .lp-icon-angle-down {
515 display: none;
516 }
517 #lp-course-edit-curriculum .section .lp-icon-spinner {
518 animation: rotation 2s infinite linear;
519 font-size: 1.25rem;
520 color: #2271B1;
521 display: none;
522 }
523 #lp-course-edit-curriculum .section .drag {
524 cursor: grab;
525 line-height: 1;
526 }
527 #lp-course-edit-curriculum .section .drag:active {
528 cursor: grabbing;
529 }
530 #lp-course-edit-curriculum .section .drag:hover {
531 color: #2271B1;
532 }
533 #lp-course-edit-curriculum .section.loading {
534 pointer-events: none;
535 opacity: 0.5 !important;
536 }
537 #lp-course-edit-curriculum .section.loading .section-head .lp-icon-spinner {
538 display: inline-block;
539 }
540 #lp-course-edit-curriculum .section:first-child {
541 border-top: 0;
542 }
543 #lp-course-edit-curriculum .section:hover .remove {
544 display: inline-block;
545 }
546 #lp-course-edit-curriculum .section input {
547 background-color: transparent;
548 box-shadow: none;
549 }
550 #lp-course-edit-curriculum .section input:focus {
551 box-shadow: none;
552 }
553 #lp-course-edit-curriculum .section .section-items-counts {
554 white-space: nowrap;
555 }
556 #lp-course-edit-curriculum .section .section-items-counts .one, #lp-course-edit-curriculum .section .section-items-counts .plural {
557 display: none;
558 }
559 #lp-course-edit-curriculum .section .section-items-counts[data-count="1"] .one {
560 display: inline-block;
561 }
562 #lp-course-edit-curriculum .section .section-items-counts:not([data-count="1"]) .plural {
563 display: inline-block;
564 }
565 #lp-course-edit-curriculum .section .lp-btn-delete-section {
566 color: #E74C3C;
567 border: 1px solid #eee;
568 background: white;
569 display: none;
570 opacity: 0.7;
571 }
572 #lp-course-edit-curriculum .section .lp-btn-delete-section:hover {
573 opacity: 1;
574 }
575 #lp-course-edit-curriculum .section .lp-btn-edit-section-title {
576 cursor: pointer;
577 display: none;
578 opacity: 0.7;
579 font-size: 1rem;
580 }
581 #lp-course-edit-curriculum .section .lp-btn-edit-section-title:hover {
582 opacity: 1;
583 color: #2271B1;
584 }
585 #lp-course-edit-curriculum .section .section-head:hover .lp-btn-delete-section, #lp-course-edit-curriculum .section .section-head:hover .lp-btn-edit-section-title {
586 display: inline-block;
587 }
588 #lp-course-edit-curriculum .section .section-collapse {
589 overflow: hidden;
590 padding: 12px;
591 border-top: 1px solid #C3C4C7;
592 }
593 #lp-course-edit-curriculum .section .section-content {
594 margin-bottom: 10px;
595 }
596 #lp-course-edit-curriculum .section .lp-input-title-section {
597 padding-left: 0;
598 border: none;
599 font-size: 1.2em;
600 line-height: 1.875rem;
601 flex: 1;
602 }
603 #lp-course-edit-curriculum .section .lp-btn-update-section-title, #lp-course-edit-curriculum .section .lp-btn-cancel-update-section-title {
604 display: none;
605 }
606 #lp-course-edit-curriculum .section.editing .lp-btn-update-section-title, #lp-course-edit-curriculum .section.editing .lp-btn-cancel-update-section-title {
607 display: inline-block;
608 }
609 #lp-course-edit-curriculum .section.editing .lp-btn-delete-section, #lp-course-edit-curriculum .section.editing .lp-btn-edit-section-title {
610 display: none !important;
611 }
612 #lp-course-edit-curriculum .section.editing .section-items-counts, #lp-course-edit-curriculum .section.editing .section-toggle {
613 display: none;
614 }
615 #lp-course-edit-curriculum .section .description-input {
616 width: 100%;
617 margin: 0;
618 padding: 0;
619 border: none;
620 color: #999;
621 }
622 #lp-course-edit-curriculum .section .description-input:focus {
623 color: #444;
624 }
625 #lp-course-edit-curriculum .section .lp-btn-cancel-update-section-title {
626 border: none;
627 background: transparent;
628 }
629 #lp-course-edit-curriculum .section .lp-btn-cancel-update-section-title:hover {
630 background: #f0f0f1;
631 }
632 #lp-course-edit-curriculum .add-new-section, #lp-course-edit-curriculum .lp-add-item-type {
633 display: flex;
634 gap: 5px;
635 padding: 5px 10px;
636 align-items: center;
637 }
638 #lp-course-edit-curriculum .add-new-section .lp-icon-plus, #lp-course-edit-curriculum .lp-add-item-type .lp-icon-plus {
639 font-size: 1.1rem;
640 min-width: 20px;
641 text-align: center;
642 }
643 #lp-course-edit-curriculum .add-new-section input, #lp-course-edit-curriculum .lp-add-item-type input {
644 width: 100%;
645 border: none;
646 background: transparent;
647 outline: none;
648 padding: 0;
649 }
650 #lp-course-edit-curriculum .add-new-section input::placeholder, #lp-course-edit-curriculum .lp-add-item-type input::placeholder {
651 color: #8A8888;
652 }
653 #lp-course-edit-curriculum .add-new-section {
654 border: 1px solid #C3C4C7;
655 border-top: none;
656 background-color: #F4FCFF;
657 /**
658 * Style for the buttons
659 */
660 /* 5. Minimal Bottom Line */
661 /*.lp-btn-add-section {
662 border: none;
663 background: rgba(19, 94, 150, 0.5);
664 color: #fff;
665
666 &:hover, &.active {
667 background: rgba(19, 94, 150, 1);
668 }
669 }*/
670 }
671 #lp-course-edit-curriculum .add-new-section.focus {
672 border-top: 1px solid;
673 border-color: #2271B1;
674 }
675 #lp-course-edit-curriculum .add-new-section input {
676 font-size: 16px;
677 }
678 #lp-course-edit-curriculum .add-new-section .lp-btn-edit-primary {
679 border: none;
680 background: #135e96;
681 color: #fff;
682 }
683 #lp-course-edit-curriculum .add-new-section .lp-btn-edit-primary:not(.active) {
684 opacity: 0.5;
685 }
686 #lp-course-edit-curriculum .add-new-section .lp-btn-edit-primary:hover, #lp-course-edit-curriculum .add-new-section .lp-btn-edit-primary.active, #lp-course-edit-curriculum .add-new-section .lp-btn-edit-primary.active:hover {
687 background: #135E96;
688 color: #fff;
689 opacity: 1;
690 }
691 #lp-course-edit-curriculum .add-new-section .btn-line::after {
692 content: "";
693 position: absolute;
694 bottom: 0;
695 left: 0;
696 height: 4px;
697 width: 0%;
698 background-color: #38bdf8;
699 animation: lineLoad 2s ease-in-out infinite;
700 }
701 @keyframes lineLoad {
702 0% {
703 width: 0%;
704 left: 0;
705 }
706 50% {
707 width: 100%;
708 left: 0;
709 }
710 100% {
711 width: 0%;
712 left: 100%;
713 }
714 }
715 #lp-course-edit-curriculum .lp-add-item-type {
716 border: 1px solid #2271B1;
717 margin-bottom: 10px;
718 }
719 #lp-course-edit-curriculum .lp-add-item-type .new-item-actions {
720 width: 100%;
721 display: flex;
722 gap: 5px;
723 }
724 #lp-course-edit-curriculum .lp-add-item-type .lp-btn-add-item.active {
725 background: rgb(19, 94, 150);
726 color: #fff;
727 }
728 #lp-course-edit-curriculum .lp-add-item-type .lp-btn-add-item-cancel {
729 border: none;
730 }
731 #lp-course-edit-curriculum .item-actions {
732 display: flex;
733 bottom: 0;
734 align-items: center;
735 gap: 5px;
736 }
737 #lp-course-edit-curriculum .item-actions li {
738 list-style: none;
739 margin: 0;
740 padding: 0;
741 }
742 #lp-course-edit-curriculum .item-actions li a {
743 color: #999;
744 text-decoration: none;
745 font-size: 1.15rem;
746 }
747 #lp-course-edit-curriculum .item-actions li a:hover {
748 color: #2271B1;
749 }
750 #lp-course-edit-curriculum .item-actions li:hover {
751 cursor: pointer;
752 }
753 #lp-course-edit-curriculum .section-list-items {
754 width: 100%;
755 border-collapse: collapse;
756 display: flex;
757 flex-direction: column;
758 gap: 12px;
759 margin: 0;
760 }
761 #lp-course-edit-curriculum .section-item, #lp-course-edit-curriculum .section-head {
762 display: flex;
763 position: relative;
764 margin: 0;
765 padding: 6px 10px;
766 background: #fff;
767 transition: background 200ms ease-out;
768 align-items: center;
769 gap: 5px;
770 }
771 #lp-course-edit-curriculum .section-head {
772 background-color: #F4FCFF;
773 }
774 #lp-course-edit-curriculum .section-head:hover .lp-btn-delete-section {
775 display: inline-block;
776 }
777 #lp-course-edit-curriculum .section-item {
778 border: 1px solid #EEEEEE;
779 }
780 #lp-course-edit-curriculum .section-item.focus {
781 border-color: #2271B1 !important;
782 }
783 #lp-course-edit-curriculum .section-item.loading {
784 pointer-events: none;
785 opacity: 0.5 !important;
786 }
787 #lp-course-edit-curriculum .section-item.loading .lp-icon-spinner {
788 display: inline-block;
789 }
790 #lp-course-edit-curriculum .section-item:hover {
791 border-color: #2271B1;
792 }
793 #lp-course-edit-curriculum .section-item .lp-btn-update-item-title, #lp-course-edit-curriculum .section-item .lp-btn-cancel-update-item-title {
794 display: none;
795 }
796 #lp-course-edit-curriculum .section-item.editing .lp-btn-update-item-title, #lp-course-edit-curriculum .section-item.editing .lp-btn-cancel-update-item-title {
797 display: inline-block;
798 }
799 #lp-course-edit-curriculum .section-item.editing .item-actions {
800 display: none;
801 }
802 #lp-course-edit-curriculum .section-item .drag {
803 cursor: grab;
804 }
805 #lp-course-edit-curriculum .section-item .drag:hover {
806 color: #2271B1;
807 }
808 #lp-course-edit-curriculum .section-item .actions {
809 margin: 0;
810 }
811 #lp-course-edit-curriculum .section-item .actions > * {
812 visibility: hidden;
813 margin-right: 10px;
814 }
815 #lp-course-edit-curriculum .section-item .actions .edit {
816 text-decoration: none;
817 }
818 #lp-course-edit-curriculum .section-item .actions .remove {
819 color: #a00;
820 }
821 #lp-course-edit-curriculum .section-item:not(.lp_lesson) .item-actions .lp-btn-set-preview-item {
822 display: none;
823 }
824 #lp-course-edit-curriculum .section-item input {
825 width: 100%;
826 border: none;
827 font-size: 0.875rem;
828 }
829 #lp-course-edit-curriculum .section-item .lp-btn-cancel-update-item-title {
830 border: none;
831 }
832 #lp-course-edit-curriculum .lp-add-item-type .item-ico-type, #lp-course-edit-curriculum .section-item .item-ico-type {
833 padding: 0;
834 font-family: "lp-icon";
835 color: #2271B1;
836 font-size: 1rem;
837 }
838 #lp-course-edit-curriculum .lp-add-item-type.lp_lesson .item-ico-type:before, #lp-course-edit-curriculum .section-item.lp_lesson .item-ico-type:before {
839 content: "\f15b";
840 }
841 #lp-course-edit-curriculum .lp-add-item-type.lp_quiz .item-ico-type:before, #lp-course-edit-curriculum .section-item.lp_quiz .item-ico-type:before {
842 content: "\f12e";
843 }
844 #lp-course-edit-curriculum .lp-add-item-type.lp_assignment .item-ico-type:before, #lp-course-edit-curriculum .section-item.lp_assignment .item-ico-type:before {
845 content: "\e929";
846 }
847 #lp-course-edit-curriculum .lp-add-item-type.lp_h5p .item-ico-type:before, #lp-course-edit-curriculum .section-item.lp_h5p .item-ico-type:before {
848 content: "\e92a";
849 }
850 #lp-course-edit-curriculum .section-actions {
851 display: flex;
852 gap: 10px;
853 align-items: center;
854 }
855 #lp-course-edit-curriculum .section-actions button {
856 display: flex;
857 align-items: center;
858 gap: 4px;
859 }
860 #lp-course-edit-curriculum .section-actions button:before {
861 font-family: "lp-icon";
862 font-style: normal;
863 font-size: 16px;
864 line-height: 1;
865 content: "\f009";
866 }
867 #lp-course-edit-curriculum .section-actions button[data-item-type=lp_lesson]:before {
868 content: "\f15b";
869 }
870 #lp-course-edit-curriculum .section-actions button[data-item-type=lp_quiz]:before {
871 content: "\f12e";
872 }
873 #lp-course-edit-curriculum .section-actions button[data-item-type=lp_assignment]:before {
874 content: "\e929";
875 }
876 #lp-course-edit-curriculum .section-actions button[data-item-type=lp_h5p]:before {
877 content: "\e92a";
878 }
879 #lp-course-edit-curriculum .lp-section-title-input {
880 font-size: 16px;
881 }