PluginProbe
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses / 4.4.7
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses v4.4.7
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 / instructor.css

instructor.css in LearnPress – WordPress LMS Plugin for Create and Sell Online Courses 4.4.7, at assets/css/instructor.css

722 lines 17.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Style for instructor page
3 */
4 /**
5 * Styles for all page of LP
6 *
7 * @since 4.2.3
8 * @version 1.0.0
9 */
10 /**
11 * Mixin
12 */
13 @keyframes rotating4 {
14 from {
15 transform: rotate(0deg);
16 }
17 to {
18 transform: rotate(360deg);
19 }
20 }
21 @keyframes animation4 {
22 from {
23 left: -40%;
24 width: 40%;
25 }
26 to {
27 left: 100%;
28 width: 10%;
29 }
30 }
31 :root {
32 --lp-cotainer-max-with: var(--lp-container-max-width);
33 }
34
35 .wp-block-group {
36 --lp-container-max-width: var(--wp--style--global--wide-size);
37 }
38
39 *, :after, :before {
40 box-sizing: border-box;
41 }
42
43 /* start reset css */
44 body {
45 background: #fff;
46 }
47
48 button {
49 cursor: pointer;
50 }
51
52 .learnpress-page input[type=text],
53 .learnpress-page input[type=email],
54 .learnpress-page input[type=number],
55 .learnpress-page input[type=password], .learnpress-page textarea {
56 border-color: var(--lp-border-color, #E2E0DB);
57 border-radius: var(--lp-border-radius, 5px);
58 }
59 .learnpress-page input[type=text]:focus,
60 .learnpress-page input[type=email]:focus,
61 .learnpress-page input[type=number]:focus,
62 .learnpress-page input[type=password]:focus, .learnpress-page textarea:focus {
63 outline: none;
64 border-color: var(--lp-primary-color, #ffb606);
65 }
66 .learnpress-page .lp-button, .learnpress-page #lp-button {
67 padding: 12px 24px;
68 border: 1px solid var(--lp-border-color, #E2E0DB);
69 color: var(--lp-color-base, #333);
70 background: transparent;
71 box-shadow: unset;
72 font-family: inherit;
73 font-weight: 400;
74 text-align: center;
75 text-transform: capitalize;
76 border-radius: var(--lp-border-radius, 5px);
77 -webkit-transition: all 0.25s;
78 transition: all 0.25s;
79 }
80 .learnpress-page .lp-button.large, .learnpress-page #lp-button.large {
81 height: 52px;
82 padding: 18px 30px;
83 font-size: 1.1em;
84 }
85 .learnpress-page .lp-button:hover, .learnpress-page #lp-button:hover {
86 border-color: var(--lp-primary-color);
87 color: #fff;
88 background: var(--lp-primary-color);
89 }
90 .learnpress-page .lp-button.btn-ajax-off .icon, .learnpress-page #lp-button.btn-ajax-off .icon {
91 display: none;
92 }
93 .learnpress-page .lp-button.btn-ajax-on .icon, .learnpress-page #lp-button.btn-ajax-on .icon {
94 display: inline-block;
95 margin-right: 5px;
96 animation: lp-rotating 1s linear infinite;
97 }
98 .learnpress-page .lp-button:focus, .learnpress-page #lp-button:focus {
99 outline: 0;
100 }
101 .learnpress-page .rwmb-field .description {
102 margin-top: 8px;
103 color: #999;
104 font-size: smaller;
105 font-style: italic;
106 }
107
108 input, button, select, textarea {
109 outline: none;
110 }
111
112 /*html {
113 overflow-x: hidden;
114 }*/
115 a {
116 -webkit-transition: 0.3s;
117 transition: 0.3s;
118 text-decoration: none;
119 }
120
121 p {
122 margin-bottom: 1rem;
123 }
124 p:last-child {
125 margin: 0;
126 }
127
128 .lp-content-area {
129 max-width: var(--lp-container-max-width) !important;
130 margin: 0 auto;
131 padding-right: var(--lp-cotainer-padding);
132 padding-left: var(--lp-cotainer-padding);
133 }
134 .lp-content-area.learn-press-message {
135 margin-bottom: 24px;
136 padding-left: 15px;
137 padding-right: 15px;
138 }
139
140 .lp-ico svg {
141 width: 20px;
142 height: 20px;
143 }
144
145 .lp-button {
146 border: 1px solid var(--lp-border-color, #E2E0DB);
147 border-radius: var(--lp-border-radius, 5px);
148 padding: 8px 16px;
149 }
150 .lp-button.loading {
151 pointer-events: none;
152 opacity: 0.8;
153 }
154 .lp-button.loading:before {
155 display: inline-block;
156 font-family: "lp-icon";
157 content: "\f110";
158 animation: lp-rotating 1s linear infinite;
159 margin-right: 5px;
160 font-variant: normal;
161 text-transform: none;
162 -webkit-font-smoothing: antialiased;
163 -moz-osx-font-smoothing: grayscale;
164 vertical-align: middle;
165 }
166
167 .lp-hidden {
168 display: none !important;
169 }
170
171 .course-price .origin-price {
172 text-decoration: line-through;
173 margin-right: 4px;
174 font-size: calc(var(--lp-font-size-base, 1em) * 0.925);
175 opacity: 0.6;
176 }
177
178 /**
179 * Mixin
180 */
181 @keyframes rotating4 {
182 from {
183 transform: rotate(0deg);
184 }
185 to {
186 transform: rotate(360deg);
187 }
188 }
189 @keyframes animation4 {
190 from {
191 left: -40%;
192 width: 40%;
193 }
194 to {
195 left: 100%;
196 width: 10%;
197 }
198 }
199 /**
200 * Style for single instructor page
201 *
202 * @since 4.2.3
203 * @version 1.0.0
204 */
205 :root {
206 --lp-cotainer-max-with: var(--lp-container-max-width);
207 }
208
209 .wp-block-group {
210 --lp-container-max-width: var(--wp--style--global--wide-size);
211 }
212
213 /**
214 * Style for user cover amd avatar image.
215 * @since 4.2.7.2
216 * @version 1.0.0
217 */
218 .lp-user-cover-image_background {
219 position: relative;
220 }
221 .lp-user-cover-image_background:hover .lp-btn-to-edit-cover-image {
222 opacity: 1;
223 visibility: visible;
224 }
225 .lp-user-cover-image_background .lp-btn-to-edit-cover-image {
226 position: absolute;
227 bottom: 0;
228 right: 0;
229 background: var(--lp-white-grey, #F7F7FB);
230 padding: 12px 20px;
231 border-radius: var(--lp-border-radius, 5px) 0 var(--lp-border-radius, 5px) 0;
232 text-transform: capitalize;
233 cursor: pointer;
234 color: var(--lp-primary-color, #ffb606);
235 text-decoration: none;
236 opacity: 0;
237 visibility: hidden;
238 }
239 @media (max-width: 767px) {
240 .lp-user-cover-image_background .lp-btn-to-edit-cover-image {
241 font-size: 0;
242 padding: 4px 12px;
243 opacity: 1;
244 visibility: visible;
245 }
246 .lp-user-cover-image_background .lp-btn-to-edit-cover-image:before {
247 font-family: "lp-icon";
248 content: "\f044";
249 font-size: 16px;
250 }
251 }
252
253 .lp-user-cover-image__display {
254 width: 100%;
255 }
256 @media (max-width: 767px) {
257 .lp-user-cover-image {
258 position: relative;
259 z-index: 1;
260 }
261 }
262 .lp-user-cover-image .lp-cover-image-empty {
263 display: flex;
264 align-items: center;
265 width: 100%;
266 height: 250px;
267 border: 2px dashed var(--lp-border-color, #E2E0DB);
268 border-radius: var(--lp-border-radius, 5px);
269 cursor: pointer;
270 position: relative;
271 text-align: center;
272 }
273 .lp-user-cover-image .lp-cover-image-empty:hover {
274 border-color: var(--lp-primary-color, #ffb606);
275 }
276 .lp-user-cover-image .lp-cover-image-empty input[type=file] {
277 position: absolute;
278 top: 0;
279 left: 0;
280 width: 100%;
281 height: 100%;
282 opacity: 0;
283 cursor: pointer;
284 z-index: 10;
285 }
286 .lp-user-cover-image .lp-cover-image-empty .lp-cover-image-empty__info {
287 z-index: 1;
288 flex: 1;
289 position: relative;
290 padding: 0 16px;
291 line-height: 1.3;
292 }
293 .lp-user-cover-image .lp-cover-image-empty .lp-cover-image-empty__info__top {
294 font-weight: 600;
295 display: flex;
296 align-items: center;
297 gap: 8px;
298 margin-bottom: 8px;
299 flex-direction: column;
300 }
301 .lp-user-cover-image .lp-cover-image-empty .lp-cover-image-empty__info__top .lp-icon-file-image {
302 font-size: 32px;
303 transform: rotate(-90deg);
304 }
305 .lp-user-cover-image .lp-cover-image-empty .lp-cover-image-empty__info__top .lp-icon-file-image:before {
306 color: var(--lp-primary-color);
307 content: "\f08b";
308 }
309 .lp-user-cover-image .lp-cover-image-empty .lp-cover-image-empty__info__bottom {
310 opacity: 0.7;
311 }
312 @media (max-width: 420px) {
313 .lp-user-cover-image .lp-cover-image-empty {
314 height: 200px;
315 }
316 .lp-user-cover-image .lp-cover-image-empty .lp-cover-image-empty__info {
317 padding: 0 8px;
318 font-size: 15px;
319 }
320 }
321 .lp-user-cover-image .lp-user-cover-image__buttons {
322 display: inline-flex;
323 gap: 12px;
324 margin-top: 16px;
325 }
326
327 .lp-user-cover-image_background {
328 background-repeat: no-repeat;
329 background-position: center;
330 background-size: cover;
331 margin-bottom: 20px;
332 border-radius: var(--lp-border-radius, 5px);
333 min-height: 100px;
334 }
335 .lp-user-cover-image_background > img {
336 opacity: 0;
337 visibility: hidden;
338 }
339
340 .learnpress_avatar__form label {
341 display: inline-block;
342 }
343 .learnpress_avatar__form input[type=file] {
344 display: none;
345 }
346 .learnpress_avatar__form__upload {
347 display: flex;
348 width: 200px;
349 height: 200px;
350 border: 1px dashed var(--lp-border-color, #E2E0DB);
351 border-radius: 3px;
352 background-color: #fafafa;
353 font-size: 0.875em;
354 font-weight: 300;
355 font-style: italic;
356 line-height: 2.6875em;
357 text-align: center;
358 cursor: pointer;
359 align-items: center;
360 justify-content: center;
361 }
362 .learnpress_avatar__form__upload div {
363 line-height: 1.4;
364 }
365 .learnpress_avatar__button--loading:before {
366 display: inline-block;
367 font-family: "lp-icon";
368 content: "\f110";
369 animation: lp-rotating 1s linear infinite;
370 margin-right: 5px;
371 font-variant: normal;
372 text-transform: none;
373 -webkit-font-smoothing: antialiased;
374 -moz-osx-font-smoothing: grayscale;
375 vertical-align: middle;
376 }
377
378 button.learnpress_avatar__button {
379 height: 40px;
380 padding: 0 15px;
381 border: 0;
382 background: var(--lp-primary-color);
383 color: white;
384 margin-top: 15px;
385 border-radius: 3px;
386 }
387 button.learnpress_avatar__button + button {
388 margin-left: 15px;
389 margin-right: 0;
390 }
391
392 body .entry-content.has-global-padding {
393 padding-left: 0;
394 padding-right: 0;
395 }
396 body .wp-site-blocks {
397 padding-left: 0;
398 padding-right: 0;
399 }
400
401 .learnpress-v4 .lp-content-area {
402 --lp-container-max-width: inherit;
403 --lp-cotainer-padding: 0;
404 }
405
406 .lp-single-instructor {
407 --lp-instructor-item-padding: 13px;
408 --lp-instructor-border-color: #c3c4c7;
409 --lp-instructor-minmax-column: 250px;
410 }
411 .lp-single-instructor h1 {
412 font-size: 1.8em;
413 font-weight: bold;
414 margin-bottom: var(--lp-instructor-item-padding);
415 }
416 .lp-single-instructor h2 {
417 font-size: 1.4em;
418 font-weight: bold;
419 }
420 .lp-single-instructor .wrapper-instructor-total-courses, .lp-single-instructor .wrapper-instructor-total-students {
421 display: flex;
422 align-items: center;
423 gap: 5px;
424 }
425 .lp-single-instructor__info {
426 margin-bottom: 40px;
427 }
428 .lp-single-instructor__info__wrapper {
429 display: flex;
430 gap: 24px;
431 }
432 .lp-single-instructor__info .instructor-avatar img {
433 max-width: 120px;
434 border-radius: 50%;
435 height: auto;
436 }
437 @media (max-width: 767px) {
438 .lp-single-instructor__info .instructor-avatar img {
439 max-width: 100px;
440 }
441 }
442 .lp-single-instructor__info__right {
443 flex: 1;
444 display: flex;
445 flex-direction: column;
446 gap: 8px;
447 }
448 .lp-single-instructor__info__right__content {
449 display: flex;
450 align-items: center;
451 justify-content: space-between;
452 column-gap: 20px;
453 row-gap: 8px;
454 flex-wrap: wrap;
455 }
456 .lp-single-instructor__info__right .instructor-description:empty {
457 margin: 0;
458 }
459 .lp-single-instructor__info__right .instructor-social {
460 display: flex;
461 gap: 12px;
462 font-size: calc(var(--lp-font-size-base, 1em) * 0.925);
463 }
464 .lp-single-instructor__info__right .instructor-social:empty {
465 margin: 0;
466 }
467 .lp-single-instructor__info__right .instructor-social i {
468 width: 40px;
469 height: 40px;
470 display: inline-flex;
471 align-items: center;
472 justify-content: center;
473 border: 1px solid var(--lp-border-color, #E2E0DB);
474 border-radius: 50%;
475 }
476 .lp-single-instructor__info__right .instructor-social i:hover {
477 background-color: var(--lp-primary-color, #ffb606);
478 border-color: var(--lp-primary-color, #ffb606);
479 color: var(--lp-color-white, #fff);
480 }
481 .lp-single-instructor__info__right .lp-instructor-meta {
482 display: flex;
483 column-gap: 20px;
484 row-gap: 8px;
485 }
486 .lp-single-instructor__info__right .lp-instructor-meta .instructor-item-meta {
487 display: inline-flex;
488 gap: 8px;
489 align-items: center;
490 }
491 .lp-single-instructor__info__right .lp-instructor-meta .instructor-item-meta i {
492 color: var(--lp-primary-color, #ffb606);
493 }
494 @media (max-width: 991px) {
495 .lp-single-instructor__info__right {
496 flex-wrap: wrap;
497 }
498 .lp-single-instructor__info__right .instructor-description {
499 display: none;
500 }
501 .lp-single-instructor__info__right .lp-instructor-meta {
502 flex-wrap: wrap;
503 }
504 }
505 @media (max-width: 600px) {
506 .lp-single-instructor__info {
507 display: block;
508 }
509 .lp-single-instructor__info .instructor-avatar {
510 margin-right: 0;
511 margin-bottom: 20px;
512 }
513 .lp-single-instructor__info .instructor-social {
514 gap: 3%;
515 }
516 }
517 .lp-single-instructor .ul-instructor-courses {
518 display: grid;
519 gap: 30px;
520 padding: 0 !important;
521 margin: 0 0 30px 0;
522 list-style: none;
523 grid-template-columns: repeat(auto-fill, minmax(var(--lp-instructor-minmax-column), 1fr));
524 }
525 .lp-single-instructor .ul-instructor-courses li {
526 list-style: none;
527 }
528 .lp-single-instructor .ul-instructor-courses a:hover {
529 color: var(--lp-primary-color);
530 }
531 .lp-single-instructor .ul-instructor-courses .course-item {
532 border: 1px solid var(--lp-border-color, #E2E0DB);
533 border-radius: var(--lp-border-radius, 5px);
534 }
535 .lp-single-instructor .ul-instructor-courses .course-item:hover {
536 box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.2);
537 }
538 .lp-single-instructor .ul-instructor-courses .course-content {
539 padding: 20px;
540 flex-grow: 1;
541 }
542 .lp-single-instructor .ul-instructor-courses .course-content .course-info {
543 flex-direction: column;
544 align-items: flex-start;
545 gap: 12px;
546 }
547 .lp-single-instructor .ul-instructor-courses .course-content .course-info .course-readmore {
548 width: 100%;
549 text-align: center;
550 }
551 .lp-single-instructor .ul-instructor-courses .course-content .wap-course-title {
552 font-size: calc(var(--lp-font-size-base, 1em) * 1.15);
553 }
554 .lp-single-instructor .ul-instructor-courses .course-content .course-excerpt, .lp-single-instructor .ul-instructor-courses .course-content .course-short-description, .lp-single-instructor .ul-instructor-courses .course-content .course-instructor-category {
555 display: none;
556 }
557 .lp-single-instructor .ul-instructor-courses .course-thumbnail {
558 position: relative;
559 border-radius: var(--lp-border-radius, 5px) var(--lp-border-radius, 5px) 0 0;
560 overflow: hidden;
561 }
562 .lp-single-instructor .ul-instructor-courses .course-thumbnail img {
563 width: 100%;
564 height: auto;
565 }
566 .lp-single-instructor .ul-instructor-courses .course-wrap-meta {
567 display: flex;
568 padding: 0;
569 margin-bottom: 12px;
570 gap: 20px;
571 flex-wrap: wrap;
572 row-gap: 8px;
573 }
574 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item {
575 text-transform: capitalize;
576 display: flex;
577 gap: 8px;
578 }
579 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item::before {
580 color: var(--lp-primary-color);
581 font-family: "lp-icon";
582 }
583 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item > div {
584 display: inline-block;
585 }
586 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-level::before {
587 content: "\f012";
588 }
589 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-duration::before {
590 content: "\f017";
591 }
592 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-lesson::before {
593 content: "\f15b";
594 }
595 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-quiz::before {
596 content: "\f12e";
597 }
598 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-student::before {
599 content: "\f501";
600 }
601 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-address::before {
602 content: "\e91b";
603 }
604 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-duration, .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-level, .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-quiz {
605 display: none;
606 }
607 .lp-single-instructor .ul-instructor-courses .course-price {
608 display: block;
609 margin: 0 0 12px 0;
610 font-size: calc(var(--lp-font-size-base, 1em) * 1.25);
611 font-weight: 700;
612 }
613 .lp-single-instructor .ul-instructor-courses .course-price .free {
614 color: #3AB500;
615 }
616 .lp-single-instructor .ul-instructor-courses .course-price .origin-price {
617 text-decoration: line-through;
618 opacity: 0.6;
619 font-size: calc(var(--lp-font-size-base, 1em) * 0.925);
620 margin-right: 4px;
621 }
622 .lp-single-instructor .ul-instructor-courses .course-title {
623 margin: 0 0 12px 0;
624 padding: 0;
625 display: block;
626 }
627 .lp-single-instructor .ul-instructor-courses .course-title:hover {
628 color: var(--lp-primary-color);
629 }
630 .lp-single-instructor .ul-instructor-courses .course-readmore a {
631 padding: 8px 24px;
632 border-radius: var(--lp-border-radius, 5px);
633 color: var(--lp-color-base, #333);
634 border: 1px solid var(--lp-color-base, #333);
635 transition: all 0.3s;
636 display: block;
637 background: transparent;
638 text-decoration: none;
639 text-align: center;
640 }
641 .lp-single-instructor .ul-instructor-courses .course-readmore a:hover {
642 background: var(--lp-primary-color, #ffb606);
643 color: var(--lp-color-white, #fff);
644 border-color: var(--lp-primary-color, #ffb606);
645 }
646 .lp-single-instructor .instructor-avatar {
647 position: relative;
648 }
649 .lp-single-instructor .instructor-avatar:hover .lp-btn-to-edit-avatar {
650 opacity: 1;
651 visibility: visible;
652 }
653 .lp-single-instructor .instructor-avatar .lp-btn-to-edit-avatar {
654 position: absolute;
655 top: 80px;
656 right: 0;
657 left: auto;
658 width: 36px;
659 height: 36px;
660 font-size: 0;
661 display: flex;
662 align-items: center;
663 justify-content: center;
664 opacity: 0;
665 visibility: hidden;
666 cursor: pointer;
667 background-color: var(--lp-white-grey, #F7F7FB);
668 border-radius: 50%;
669 }
670 @media (max-width: 767px) {
671 .lp-single-instructor .instructor-avatar .lp-btn-to-edit-avatar {
672 opacity: 1;
673 top: 60px;
674 visibility: visible;
675 }
676 }
677 .lp-single-instructor .instructor-avatar .lp-btn-to-edit-avatar::before {
678 content: "\f044";
679 font-size: 1.5rem;
680 font-family: "lp-icon";
681 font-weight: normal;
682 color: var(--lp-primary-color);
683 }
684
685 .learnpress-block-pagination,
686 .learn-press-pagination {
687 margin: 20px 0;
688 text-align: center;
689 }
690 .learnpress-block-pagination .page-numbers,
691 .learn-press-pagination .page-numbers {
692 display: inline-flex;
693 gap: 5px;
694 flex-wrap: wrap;
695 margin: 0;
696 padding: 0;
697 border: 0;
698 outline: 0;
699 background: transparent;
700 list-style: none;
701 }
702 .learnpress-block-pagination .page-numbers > li,
703 .learn-press-pagination .page-numbers > li {
704 display: inline-block;
705 margin: 0;
706 }
707 .learnpress-block-pagination .page-numbers > li .page-numbers,
708 .learn-press-pagination .page-numbers > li .page-numbers {
709 float: unset;
710 padding: 0 12px;
711 color: #666;
712 text-decoration: none;
713 }
714 .learnpress-block-pagination .page-numbers > li .page-numbers.current,
715 .learn-press-pagination .page-numbers > li .page-numbers.current {
716 color: var(--lp-primary-color);
717 font-weight: 400;
718 }
719 .learnpress-block-pagination .page-numbers > li .page-numbers:hover,
720 .learn-press-pagination .page-numbers > li .page-numbers:hover {
721 color: var(--lp-primary-color);
722 }