← All changes | includes/widgets/Age_Gate/style.css +85 -2 51.1.44 → 51.1.86 View file →

		@@ -20,10 +20,11 @@
20	20	/* ========== Overlay ========== */
21	21	.king-addons-age-gate__overlay {
22	22	position: absolute;
23	23	inset: 0;
24		- background: var(--ka-age-overlay, #0d0d0d);
25		- opacity: var(--ka-age-overlay-opacity, 0.7);
	24	+ background: var(--ka-age-overlay-rgba, rgba(13, 13, 13, 0.7));
	25	+ -webkit-backdrop-filter: blur(var(--ka-age-overlay-blur, 12px));
	26	+ backdrop-filter: blur(var(--ka-age-overlay-blur, 12px));
26	27	transition: opacity 0.25s ease;
27	28	}
28	29
29	30	/* ========== Card ========== */
		@@ -47,8 +48,70 @@
47	48	align-self: flex-end;
48	49	margin-bottom: 32px;
49	50	}
50	51
	52	+.king-addons-age-gate__card--top {
	53	+ align-self: flex-start;
	54	+ margin-top: 32px;
	55	+}
	56	+
	57	+/* ========== Templates ========== */
	58	+.king-addons-age-gate--template-side-left,
	59	+.king-addons-age-gate--template-side-right {
	60	+ align-items: stretch;
	61	+}
	62	+
	63	+.king-addons-age-gate--template-side-left {
	64	+ justify-content: flex-start;
	65	+}
	66	+
	67	+.king-addons-age-gate--template-side-right {
	68	+ justify-content: flex-end;
	69	+}
	70	+
	71	+.king-addons-age-gate--template-side-left .king-addons-age-gate__card,
	72	+.king-addons-age-gate--template-side-right .king-addons-age-gate__card {
	73	+ height: 100%;
	74	+ max-width: 520px;
	75	+ width: 100%;
	76	+ border-radius: 0;
	77	+ padding-top: 48px;
	78	+ padding-bottom: 48px;
	79	+ overflow: auto;
	80	+ text-align: left;
	81	+}
	82	+
	83	+.king-addons-age-gate--template-side-left .king-addons-age-gate__card {
	84	+ border-top-right-radius: 20px;
	85	+ border-bottom-right-radius: 20px;
	86	+}
	87	+
	88	+.king-addons-age-gate--template-side-right .king-addons-age-gate__card {
	89	+ border-top-left-radius: 20px;
	90	+ border-bottom-left-radius: 20px;
	91	+}
	92	+
	93	+.king-addons-age-gate--template-fullscreen {
	94	+ align-items: center;
	95	+ justify-content: center;
	96	+}
	97	+
	98	+.king-addons-age-gate--template-fullscreen .king-addons-age-gate__card {
	99	+ width: calc(100% - 32px);
	100	+ max-width: 980px;
	101	+ height: calc(100% - 32px);
	102	+ overflow: auto;
	103	+ text-align: left;
	104	+}
	105	+
	106	+.king-addons-age-gate--template-fullscreen .king-addons-age-gate__buttons {
	107	+ justify-content: flex-start;
	108	+}
	109	+
	110	+.king-addons-age-gate--template-fullscreen .king-addons-age-gate__logo {
	111	+ margin-left: 0;
	112	+}
	113	+
51	114	/* ========== Content ========== */
52	115	.king-addons-age-gate__content {
53	116	display: flex;
54	117	flex-direction: column;
		@@ -288,8 +351,28 @@
288	351	@media (max-width: 600px) {
289	352	.king-addons-age-gate__card {
290	353	padding: 24px 20px;
291	354	border-radius: 16px;
	355	+ }
	356	+
	357	+ .king-addons-age-gate--template-side-left .king-addons-age-gate__card,
	358	+ .king-addons-age-gate--template-side-right .king-addons-age-gate__card,
	359	+ .king-addons-age-gate--template-fullscreen .king-addons-age-gate__card {
	360	+ width: calc(100% - 16px);
	361	+ height: auto;
	362	+ max-width: none;
	363	+ border-radius: 16px;
	364	+ padding-top: 24px;
	365	+ padding-bottom: 24px;
	366	+ text-align: center;
	367	+ }
	368	+
	369	+ .king-addons-age-gate--template-fullscreen .king-addons-age-gate__buttons {
	370	+ justify-content: center;
	371	+ }
	372	+
	373	+ .king-addons-age-gate--template-fullscreen .king-addons-age-gate__logo {
	374	+ margin-left: auto;
292	375	}
293	376
294	377	.king-addons-age-gate__title {
295	378	font-size: calc(var(--ka-age-title-size, 26px) * 0.85);