PluginProbe
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses / 4.4.10
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses v4.4.10
4.4.10 4.4.9.1 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 All 142 releases
learnpress / assets / css / instructor.css

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

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