cookie-banner.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 2.3.1, at assets/css/modules/cookie-banner/cookie-banner.css

135 lines 3.1 KB Raw Download Zip

1	/**
2	* Cookie Banner.
3	*
4	*/
5	.merchant-cookie-banner {
6	position: fixed;
7	left: 0;
8	right: 0;
9	bottom: 0;
10	width: 100%;
11	display: none;
12	}
13	.merchant-cookie-banner.merchant-show {
14	display: block;
15	}
16
17	.merchant-cookie-banner-inner {
18	position: relative;
19	padding: 16px;
20	display: -webkit-box;
21	display: -ms-flexbox;
22	display: flex;
23	-webkit-box-align: center;
24	-ms-flex-align: center;
25	align-items: center;
26	-webkit-box-pack: center;
27	-ms-flex-pack: center;
28	justify-content: center;
29	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0 9px 1px;
30	box-shadow: rgba(0, 0, 0, 0.1) 0 0 9px 1px;
31	color: var(--merchant-text-color, #ffffff);
32	background-color: var(--merchant-background, #000000);
33	min-height: var(--merchant-modal-height, 50px);
34	}
35	.merchant-cookie-banner-inner a {
36	margin-left: 2px;
37	text-decoration: underline;
38	color: var(--merchant-link-color, #aeaeae);
39	}
40	.merchant-cookie-banner-inner a:focus, .merchant-cookie-banner-inner a:hover, .merchant-cookie-banner-inner a:visited {
41	color: var(--merchant-link-color, #aeaeae);
42	}
43
44	.merchant-cookie-close-button {
45	cursor: pointer;
46	position: absolute;
47	z-index: 1;
48	top: 0;
49	right: 0;
50	padding: 5px;
51	display: -webkit-box;
52	display: -ms-flexbox;
53	display: flex;
54	-webkit-box-align: center;
55	-ms-flex-align: center;
56	align-items: center;
57	-webkit-box-pack: center;
58	-ms-flex-pack: center;
59	justify-content: center;
60	font-size: 18px;
61	line-height: 1em;
62	opacity: 0.5;
63	-webkit-transition: all 0.2s;
64	transition: all 0.2s;
65	}
66	.merchant-cookie-close-button:hover {
67	opacity: 1;
68	}
69	.merchant-cookie-close-button svg {
70	width: 1em;
71	height: 1em;
72	fill: currentColor;
73	}
74
75	.merchant-cookie-banner-floating {
76	bottom: 35px;
77	z-index: 9999;
78	}
79	.merchant-cookie-banner-floating .merchant-cookie-banner-inner {
80	margin: 0 auto;
81	border-radius: 10px;
82	-webkit-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.2);
83	box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.2);
84	width: var(--merchant-modal-width, 750px);
85	max-width: 95%;
86	}
87
88	.merchant-cookie-banner-fixed-bottom {
89	z-index: 999;
90	}
91
92	.merchant-cookie-banner-content {
93	font-size: 14px;
94	display: -webkit-box;
95	display: -ms-flexbox;
96	display: flex;
97	grid-gap: 10px;
98	-webkit-box-align: center;
99	-ms-flex-align: center;
100	align-items: center;
101	-webkit-box-pack: center;
102	-ms-flex-pack: center;
103	justify-content: center;
104	-ms-flex-wrap: wrap;
105	flex-wrap: wrap;
106	}
107
108	.merchant-cookie-banner-button {
109	-webkit-user-select: none;
110	-moz-user-select: none;
111	-ms-user-select: none;
112	user-select: none;
113	cursor: pointer;
114	font-weight: bold;
115	padding: 6px 20px;
116	border-radius: 4px;
117	color: var(--merchant-button-text-color, #151515);
118	background-color: var(--merchant-button-background, #dddddd);
119	}
120
121	@media (max-width: 768px) {
122	.merchant-cookie-banner-floating {
123	bottom: 15px;
124	}
125	.merchant-cookie-banner-content {
126	-webkit-box-orient: vertical;
127	-webkit-box-direction: normal;
128	-ms-flex-direction: column;
129	flex-direction: column;
130	}
131	.merchant-cookie-banner-button {
132	width: 100%;
133	text-align: center;
134	}
135	}