← All changes | assets/css/learnpress-block.css +152 -70 4.4.6 → 4.4.10 View file →

		@@ -26,32 +26,141 @@
26	26	.wp-block-group {
27	27	--lp-container-max-width: var(--wp--style--global--wide-size);
28	28	}
29	29
	30	+/**
	31	+* Style for the buttons
	32	+*/
	33	+.lp-btn-edit-primary {
	34	+ border: none;
	35	+ background: #135e96;
	36	+ color: #fff;
	37	+}
	38	+.lp-btn-edit-primary:not(.active) {
	39	+ opacity: 0.5;
	40	+}
	41	+.lp-btn-edit-primary:hover, .lp-btn-edit-primary.active, .lp-btn-edit-primary.active:hover {
	42	+ background: #135E96;
	43	+ color: #fff;
	44	+ opacity: 1;
	45	+}
	46	+
	47	+/* 5. Minimal Bottom Line */
	48	+.btn-line::after {
	49	+ content: "";
	50	+ position: absolute;
	51	+ bottom: 0;
	52	+ left: 0;
	53	+ height: 4px;
	54	+ width: 0%;
	55	+ background-color: #38bdf8;
	56	+ animation: lineLoad 2s ease-in-out infinite;
	57	+}
	58	+
	59	+@keyframes lineLoad {
	60	+ 0% {
	61	+ width: 0%;
	62	+ left: 0;
	63	+ }
	64	+ 50% {
	65	+ width: 100%;
	66	+ left: 0;
	67	+ }
	68	+ 100% {
	69	+ width: 0%;
	70	+ left: 100%;
	71	+ }
	72	+}
	73	+.lp-button {
	74	+ padding: 8px 16px;
	75	+ border: 1px solid var(--lp-border-color, #E2E0DB);
	76	+ border-radius: var(--lp-border-radius, 5px);
	77	+ color: #374151;
	78	+ font-weight: 500;
	79	+ text-decoration: none;
	80	+ cursor: pointer;
	81	+}
	82	+.lp-button.loading {
	83	+ position: relative;
	84	+ display: inline-flex;
	85	+ align-items: center;
	86	+ justify-content: center;
	87	+ pointer-events: none;
	88	+ color: rgba(0, 0, 0, 0) !important;
	89	+}
	90	+.lp-button.loading:before {
	91	+ position: absolute;
	92	+ inset: 0;
	93	+ display: flex;
	94	+ align-items: center;
	95	+ justify-content: center;
	96	+ font-family: "lp-icon";
	97	+ content: "\f110";
	98	+ animation: lp-rotating 1s linear infinite;
	99	+ font-variant: normal;
	100	+ text-transform: none;
	101	+ -webkit-font-smoothing: antialiased;
	102	+ -moz-osx-font-smoothing: grayscale;
	103	+ color: black;
	104	+}
	105	+
30	106	.learn-press-message {
31	107	position: relative;
32		- padding: 10px 20px;
	108	+ display: flex;
	109	+ align-items: center;
	110	+ margin: 0 !important;
	111	+ padding: 10px;
33	112	border-radius: var(--lp-border-radius, 5px);
34	113	background-color: #E5F7FF;
35	114	color: #007AFF;
36	115	max-width: 100%;
37	116	}
	117	+.learn-press-message::before {
	118	+ display: inline-block;
	119	+ margin-right: 8px;
	120	+ font-family: "lp-icon";
	121	+ font-size: 20px;
	122	+ font-style: normal;
	123	+ font-weight: normal;
	124	+ line-height: 1;
	125	+}
38	126	.learn-press-message.error {
39	127	background-color: #FEE5E5;
40	128	color: #FF3B30;
	129	+ border: 1px solid #E31A1A;
	130	+ padding: 10px 20px;
41	131	}
	132	+.learn-press-message.error::before {
	133	+ content: "\f071";
	134	+ color: #E31A1A;
	135	+}
42	136	.learn-press-message.warning {
43	137	background-color: #FEF7E6;
44	138	color: #FF9500;
	139	+ border: 1px solid #F8A100;
45	140	}
	141	+.learn-press-message.warning::before {
	142	+ content: "\f06a";
	143	+ color: #F8A100;
	144	+}
46	145	.learn-press-message.success {
47	146	background-color: #EBF8E5;
48	147	color: #3AB500;
	148	+ border: 1px solid #28A746;
49	149	}
	150	+.learn-press-message.success::before {
	151	+ content: "\f058";
	152	+ color: #28A746;
	153	+}
50	154	.learn-press-message.info {
51	155	background-color: rgba(0, 122, 255, 0.1019607843);
52	156	color: #007AFF;
	157	+ border: 1px solid #2E91FA;
53	158	}
	159	+.learn-press-message.info::before {
	160	+ content: "\e931";
	161	+ color: #2E91FA;
	162	+}
54	163	.learn-press-message a {
55	164	text-decoration: underline;
56	165	}
57	166
		@@ -663,18 +772,21 @@
663	772	box-shadow: none;
664	773	outline: none;
665	774	}
666	775	.course-curriculum .section-item__loadmore.loading button:before {
667		- display: inline-block;
	776	+ position: absolute;
	777	+ inset: 0;
	778	+ display: flex;
	779	+ align-items: center;
	780	+ justify-content: center;
668	781	font-family: "lp-icon";
669	782	content: "\f110";
670	783	animation: lp-rotating 1s linear infinite;
671		- margin-right: 5px;
672	784	font-variant: normal;
673	785	text-transform: none;
674	786	-webkit-font-smoothing: antialiased;
675	787	-moz-osx-font-smoothing: grayscale;
676		- vertical-align: middle;
	788	+ color: black;
677	789	}
678	790	.course-curriculum .section-header {
679	791	display: table;
680	792	width: 100%;
		@@ -889,18 +1001,21 @@
889	1001	margin-top: 20px;
890	1002	margin-bottom: 20px;
891	1003	}
892	1004	.course-curriculum .curriculum-more__button.loading:before {
893		- display: inline-block;
	1005	+ position: absolute;
	1006	+ inset: 0;
	1007	+ display: flex;
	1008	+ align-items: center;
	1009	+ justify-content: center;
894	1010	font-family: "lp-icon";
895	1011	content: "\f110";
896	1012	animation: lp-rotating 1s linear infinite;
897		- margin-right: 5px;
898	1013	font-variant: normal;
899	1014	text-transform: none;
900	1015	-webkit-font-smoothing: antialiased;
901	1016	-moz-osx-font-smoothing: grayscale;
902		- vertical-align: middle;
	1017	+ color: black;
903	1018	}
904	1019
905	1020	body .content-item-summary .form-button-finish-course, body .lp-quiz-buttons .form-button-finish-course {
906	1021	float: right;
		@@ -1143,8 +1258,11 @@
1143	1258	content: "\e921";
1144	1259	color: #999;
1145	1260	}
1146	1261
	1262	+.info-learning .course-progress > div {
	1263	+ margin-bottom: 8px;
	1264	+}
1147	1265	.info-learning .course-progress__line {
1148	1266	width: 100%;
1149	1267	background: #ccc;
1150	1268	height: 5px;
		@@ -1173,8 +1291,11 @@
1173	1291	width: 2px;
1174	1292	height: 100%;
1175	1293	background: var(--lp-secondary-color);
1176	1294	}
	1295	+.info-learning .start-date, .info-learning .end-date {
	1296	+ margin-bottom: 8px;
	1297	+}
1177	1298
1178	1299	.lp-single-course .comment-form .comment-form-url,
1179	1300	.lp-single-course .comment-form .comment-form-email,
1180	1301	.lp-single-course .comment-form .comment-form-author,
		@@ -1330,8 +1451,26 @@
1330	1451	min-height: 100vh;
1331	1452	text-align: center;
1332	1453	align-items: center;
1333	1454	justify-content: center;
	1455	+ /*.lp-button {
	1456	+ cursor: pointer;
	1457	+ border: 1px solid $border-color;
	1458	+ border-radius: $border-radius-global;
	1459	+ padding: $spacing-base-2x $spacing-base-4x;
	1460	+
	1461	+ &.loading {
	1462	+ pointer-events: none;
	1463	+ opacity: 0.8;
	1464	+ @include loading();
	1465	+ }
	1466	+
	1467	+ &:hover {
	1468	+ border-color: $color-primary;
	1469	+ color: #fff;
	1470	+ background: $color-primary;
	1471	+ }
	1472	+ }*/
1334	1473	}
1335	1474	.lp-modal-dialog .learn-press-message {
1336	1475	width: auto;
1337	1476	margin: 0 !important;
		@@ -1400,35 +1539,8 @@
1400	1539	display: flex;
1401	1540	align-items: center;
1402	1541	gap: 10px;
1403	1542	}
1404		-.lp-modal-dialog .lp-button {
1405		- cursor: pointer;
1406		- border: 1px solid var(--lp-border-color, #E2E0DB);
1407		- border-radius: var(--lp-border-radius, 5px);
1408		- padding: 8px 16px;
1409		-}
1410		-.lp-modal-dialog .lp-button.loading {
1411		- pointer-events: none;
1412		- opacity: 0.8;
1413		-}
1414		-.lp-modal-dialog .lp-button.loading:before {
1415		- display: inline-block;
1416		- font-family: "lp-icon";
1417		- content: "\f110";
1418		- animation: lp-rotating 1s linear infinite;
1419		- margin-right: 5px;
1420		- font-variant: normal;
1421		- text-transform: none;
1422		- -webkit-font-smoothing: antialiased;
1423		- -moz-osx-font-smoothing: grayscale;
1424		- vertical-align: middle;
1425		-}
1426		-.lp-modal-dialog .lp-button:hover {
1427		- border-color: var(--lp-primary-color, #ffb606);
1428		- color: #fff;
1429		- background: var(--lp-primary-color, #ffb606);
1430		-}
1431	1543
1432	1544	.lp-button.btn-finish-course {
1433	1545	cursor: pointer;
1434	1546	width: 100%;
		@@ -1447,24 +1559,8 @@
1447	1559	.lp-button.btn-finish-course:hover {
1448	1560	background-color: var(--lp-secondary-color, #442e66);
1449	1561	border-color: var(--lp-secondary-color, #442e66);
1450	1562	}
1451		-.lp-button.btn-finish-course.loading {
1452		- pointer-events: none;
1453		- opacity: 0.8;
1454		-}
1455		-.lp-button.btn-finish-course.loading:before {
1456		- display: inline-block;
1457		- font-family: "lp-icon";
1458		- content: "\f110";
1459		- animation: lp-rotating 1s linear infinite;
1460		- margin-right: 5px;
1461		- font-variant: normal;
1462		- text-transform: none;
1463		- -webkit-font-smoothing: antialiased;
1464		- -moz-osx-font-smoothing: grayscale;
1465		- vertical-align: middle;
1466		-}
1467	1563
1468	1564	/**
1469	1565	* Mixin
1470	1566	*/
		@@ -1534,18 +1630,21 @@
1534	1630	opacity: 0.8;
1535	1631	}
1536	1632	.wp-block-learnpress-course-button-read-more.loading:before,
1537	1633	.wp-block-learnpress-course-button.loading:before {
1538		- display: inline-block;
	1634	+ position: absolute;
	1635	+ inset: 0;
	1636	+ display: flex;
	1637	+ align-items: center;
	1638	+ justify-content: center;
1539	1639	font-family: "lp-icon";
1540	1640	content: "\f110";
1541	1641	animation: lp-rotating 1s linear infinite;
1542		- margin-right: 5px;
1543	1642	font-variant: normal;
1544	1643	text-transform: none;
1545	1644	-webkit-font-smoothing: antialiased;
1546	1645	-moz-osx-font-smoothing: grayscale;
1547		- vertical-align: middle;
	1646	+ color: black;
1548	1647	}
1549	1648
1550	1649	@media (min-width: 992px) {
1551	1650	.lp-block-course-sidebar {
		@@ -2161,22 +2260,5 @@
2161	2260	}
2162	2261
2163	2262	.lp-sidebar-toggle__open .js-block-sidebar {
2164	2263	display: block;
2165		-}
2166		-
2167		-.lp-button.loading {
2168		- pointer-events: none;
2169		- opacity: 0.8;
2170		-}
2171		-.lp-button.loading:before {
2172		- display: inline-block;
2173		- font-family: "lp-icon";
2174		- content: "\f110";
2175		- animation: lp-rotating 1s linear infinite;
2176		- margin-right: 5px;
2177		- font-variant: normal;
2178		- text-transform: none;
2179		- -webkit-font-smoothing: antialiased;
2180		- -moz-osx-font-smoothing: grayscale;
2181		- vertical-align: middle;
2182	2264	}