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 / instructor.css

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

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