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

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

701 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 display: inline-block;
346 font-family: "lp-icon";
347 content: "\f110";
348 animation: lp-rotating 1s linear infinite;
349 font-variant: normal;
350 text-transform: none;
351 -webkit-font-smoothing: antialiased;
352 -moz-osx-font-smoothing: grayscale;
353 vertical-align: middle;
354 color: black;
355 }
356
357 button.learnpress_avatar__button {
358 height: 40px;
359 padding: 0 15px;
360 border: 0;
361 background: var(--lp-primary-color);
362 color: white;
363 margin-top: 15px;
364 border-radius: 3px;
365 }
366 button.learnpress_avatar__button + button {
367 margin-left: 15px;
368 margin-right: 0;
369 }
370
371 body .entry-content.has-global-padding {
372 padding-left: 0;
373 padding-right: 0;
374 }
375 body .wp-site-blocks {
376 padding-left: 0;
377 padding-right: 0;
378 }
379
380 .learnpress-v4 .lp-content-area {
381 --lp-container-max-width: inherit;
382 --lp-cotainer-padding: 0;
383 }
384
385 .lp-single-instructor {
386 --lp-instructor-item-padding: 13px;
387 --lp-instructor-border-color: #c3c4c7;
388 --lp-instructor-minmax-column: 250px;
389 }
390 .lp-single-instructor h1 {
391 font-size: 1.8em;
392 font-weight: bold;
393 margin-bottom: var(--lp-instructor-item-padding);
394 }
395 .lp-single-instructor h2 {
396 font-size: 1.4em;
397 font-weight: bold;
398 }
399 .lp-single-instructor .wrapper-instructor-total-courses, .lp-single-instructor .wrapper-instructor-total-students {
400 display: flex;
401 align-items: center;
402 gap: 5px;
403 }
404 .lp-single-instructor__info {
405 margin-bottom: 40px;
406 }
407 .lp-single-instructor__info__wrapper {
408 display: flex;
409 gap: 24px;
410 }
411 .lp-single-instructor__info .instructor-avatar img {
412 max-width: 120px;
413 border-radius: 50%;
414 height: auto;
415 }
416 @media (max-width: 767px) {
417 .lp-single-instructor__info .instructor-avatar img {
418 max-width: 100px;
419 }
420 }
421 .lp-single-instructor__info__right {
422 flex: 1;
423 display: flex;
424 flex-direction: column;
425 gap: 8px;
426 }
427 .lp-single-instructor__info__right__content {
428 display: flex;
429 align-items: center;
430 justify-content: space-between;
431 column-gap: 20px;
432 row-gap: 8px;
433 flex-wrap: wrap;
434 }
435 .lp-single-instructor__info__right .instructor-description:empty {
436 margin: 0;
437 }
438 .lp-single-instructor__info__right .instructor-social {
439 display: flex;
440 gap: 12px;
441 font-size: calc(var(--lp-font-size-base, 1em) * 0.925);
442 }
443 .lp-single-instructor__info__right .instructor-social:empty {
444 margin: 0;
445 }
446 .lp-single-instructor__info__right .instructor-social i {
447 width: 40px;
448 height: 40px;
449 display: inline-flex;
450 align-items: center;
451 justify-content: center;
452 border: 1px solid var(--lp-border-color, #E2E0DB);
453 border-radius: 50%;
454 }
455 .lp-single-instructor__info__right .instructor-social i:hover {
456 background-color: var(--lp-primary-color, #ffb606);
457 border-color: var(--lp-primary-color, #ffb606);
458 color: var(--lp-color-white, #fff);
459 }
460 .lp-single-instructor__info__right .lp-instructor-meta {
461 display: flex;
462 column-gap: 20px;
463 row-gap: 8px;
464 }
465 .lp-single-instructor__info__right .lp-instructor-meta .instructor-item-meta {
466 display: inline-flex;
467 gap: 8px;
468 align-items: center;
469 }
470 .lp-single-instructor__info__right .lp-instructor-meta .instructor-item-meta i {
471 color: var(--lp-primary-color, #ffb606);
472 }
473 @media (max-width: 991px) {
474 .lp-single-instructor__info__right {
475 flex-wrap: wrap;
476 }
477 .lp-single-instructor__info__right .instructor-description {
478 display: none;
479 }
480 .lp-single-instructor__info__right .lp-instructor-meta {
481 flex-wrap: wrap;
482 }
483 }
484 @media (max-width: 600px) {
485 .lp-single-instructor__info {
486 display: block;
487 }
488 .lp-single-instructor__info .instructor-avatar {
489 margin-right: 0;
490 margin-bottom: 20px;
491 }
492 .lp-single-instructor__info .instructor-social {
493 gap: 3%;
494 }
495 }
496 .lp-single-instructor .ul-instructor-courses {
497 display: grid;
498 gap: 30px;
499 padding: 0 !important;
500 margin: 0 0 30px 0;
501 list-style: none;
502 grid-template-columns: repeat(auto-fill, minmax(var(--lp-instructor-minmax-column), 1fr));
503 }
504 .lp-single-instructor .ul-instructor-courses li {
505 list-style: none;
506 }
507 .lp-single-instructor .ul-instructor-courses a:hover {
508 color: var(--lp-primary-color);
509 }
510 .lp-single-instructor .ul-instructor-courses .course-item {
511 border: 1px solid var(--lp-border-color, #E2E0DB);
512 border-radius: var(--lp-border-radius, 5px);
513 }
514 .lp-single-instructor .ul-instructor-courses .course-item:hover {
515 box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.2);
516 }
517 .lp-single-instructor .ul-instructor-courses .course-content {
518 padding: 20px;
519 flex-grow: 1;
520 }
521 .lp-single-instructor .ul-instructor-courses .course-content .course-info {
522 flex-direction: column;
523 align-items: flex-start;
524 gap: 12px;
525 }
526 .lp-single-instructor .ul-instructor-courses .course-content .course-info .course-readmore {
527 width: 100%;
528 text-align: center;
529 }
530 .lp-single-instructor .ul-instructor-courses .course-content .wap-course-title {
531 font-size: calc(var(--lp-font-size-base, 1em) * 1.15);
532 }
533 .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 {
534 display: none;
535 }
536 .lp-single-instructor .ul-instructor-courses .course-thumbnail {
537 position: relative;
538 border-radius: var(--lp-border-radius, 5px) var(--lp-border-radius, 5px) 0 0;
539 overflow: hidden;
540 }
541 .lp-single-instructor .ul-instructor-courses .course-thumbnail img {
542 width: 100%;
543 height: auto;
544 }
545 .lp-single-instructor .ul-instructor-courses .course-wrap-meta {
546 display: flex;
547 padding: 0;
548 margin-bottom: 12px;
549 gap: 20px;
550 flex-wrap: wrap;
551 row-gap: 8px;
552 }
553 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item {
554 text-transform: capitalize;
555 display: flex;
556 gap: 8px;
557 }
558 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item::before {
559 color: var(--lp-primary-color);
560 font-family: "lp-icon";
561 }
562 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item > div {
563 display: inline-block;
564 }
565 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-level::before {
566 content: "\f012";
567 }
568 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-duration::before {
569 content: "\f017";
570 }
571 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-lesson::before {
572 content: "\f15b";
573 }
574 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-quiz::before {
575 content: "\f12e";
576 }
577 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-student::before {
578 content: "\f501";
579 }
580 .lp-single-instructor .ul-instructor-courses .course-wrap-meta .meta-item-address::before {
581 content: "\e91b";
582 }
583 .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 {
584 display: none;
585 }
586 .lp-single-instructor .ul-instructor-courses .course-price {
587 display: block;
588 margin: 0 0 12px 0;
589 font-size: calc(var(--lp-font-size-base, 1em) * 1.25);
590 font-weight: 700;
591 }
592 .lp-single-instructor .ul-instructor-courses .course-price .free {
593 color: #3AB500;
594 }
595 .lp-single-instructor .ul-instructor-courses .course-price .origin-price {
596 text-decoration: line-through;
597 opacity: 0.6;
598 font-size: calc(var(--lp-font-size-base, 1em) * 0.925);
599 margin-right: 4px;
600 }
601 .lp-single-instructor .ul-instructor-courses .course-title {
602 margin: 0 0 12px 0;
603 padding: 0;
604 display: block;
605 }
606 .lp-single-instructor .ul-instructor-courses .course-title:hover {
607 color: var(--lp-primary-color);
608 }
609 .lp-single-instructor .ul-instructor-courses .course-readmore a {
610 padding: 8px 24px;
611 border-radius: var(--lp-border-radius, 5px);
612 color: var(--lp-color-base, #333);
613 border: 1px solid var(--lp-color-base, #333);
614 transition: all 0.3s;
615 display: block;
616 background: transparent;
617 text-decoration: none;
618 text-align: center;
619 }
620 .lp-single-instructor .ul-instructor-courses .course-readmore a:hover {
621 background: var(--lp-primary-color, #ffb606);
622 color: var(--lp-color-white, #fff);
623 border-color: var(--lp-primary-color, #ffb606);
624 }
625 .lp-single-instructor .instructor-avatar {
626 position: relative;
627 }
628 .lp-single-instructor .instructor-avatar:hover .lp-btn-to-edit-avatar {
629 opacity: 1;
630 visibility: visible;
631 }
632 .lp-single-instructor .instructor-avatar .lp-btn-to-edit-avatar {
633 position: absolute;
634 top: 80px;
635 right: 0;
636 left: auto;
637 width: 36px;
638 height: 36px;
639 font-size: 0;
640 display: flex;
641 align-items: center;
642 justify-content: center;
643 opacity: 0;
644 visibility: hidden;
645 cursor: pointer;
646 background-color: var(--lp-white-grey, #F7F7FB);
647 border-radius: 50%;
648 }
649 @media (max-width: 767px) {
650 .lp-single-instructor .instructor-avatar .lp-btn-to-edit-avatar {
651 opacity: 1;
652 top: 60px;
653 visibility: visible;
654 }
655 }
656 .lp-single-instructor .instructor-avatar .lp-btn-to-edit-avatar::before {
657 content: "\f044";
658 font-size: 1.5rem;
659 font-family: "lp-icon";
660 font-weight: normal;
661 color: var(--lp-primary-color);
662 }
663
664 .learnpress-block-pagination,
665 .learn-press-pagination {
666 margin: 20px 0;
667 text-align: center;
668 }
669 .learnpress-block-pagination .page-numbers,
670 .learn-press-pagination .page-numbers {
671 display: inline-flex;
672 gap: 5px;
673 flex-wrap: wrap;
674 margin: 0;
675 padding: 0;
676 border: 0;
677 outline: 0;
678 background: transparent;
679 list-style: none;
680 }
681 .learnpress-block-pagination .page-numbers > li,
682 .learn-press-pagination .page-numbers > li {
683 display: inline-block;
684 margin: 0;
685 }
686 .learnpress-block-pagination .page-numbers > li .page-numbers,
687 .learn-press-pagination .page-numbers > li .page-numbers {
688 float: unset;
689 padding: 0 12px;
690 color: #666;
691 text-decoration: none;
692 }
693 .learnpress-block-pagination .page-numbers > li .page-numbers.current,
694 .learn-press-pagination .page-numbers > li .page-numbers.current {
695 color: var(--lp-primary-color);
696 font-weight: 400;
697 }
698 .learnpress-block-pagination .page-numbers > li .page-numbers:hover,
699 .learn-press-pagination .page-numbers > li .page-numbers:hover {
700 color: var(--lp-primary-color);
701 }