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

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

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