ultimate-post-kit / assets / css / upk-carbon-slider.css

upk-carbon-slider.css in Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets 4.1.2, at assets/css/upk-carbon-slider.css

185 lines 5.0 KB

Raw Download Zip

1	:root {
2	--carbon-thumb-height: clamp(6rem, 12vw, 8.125rem);
3	}
4
5	.upk-carbon-slider-wrap {
6	position: relative;
7	overflow: hidden;
8	}
9	.upk-carbon-slider-wrap .upk-image-wrap {
10	width: 100%;
11	height: 100%;
12	margin-right: auto;
13	margin-left: auto;
14	margin-bottom: 30px;
15	}
16	.upk-carbon-slider-wrap .upk-image-wrap .upk-img {
17	width: 100%;
18	height: clamp(16.875rem, 40vw, 31.25rem);
19	object-fit: cover;
20	vertical-align: middle;
21	border-radius: 10px;
22	}
23	.upk-carbon-slider-wrap .upk-carbon-thumbs {
24	position: absolute;
25	text-align: center;
26	top: 0;
27	right: 0;
28	left: 0;
29	}
30	.upk-carbon-slider-wrap .upk-carbon-thumbs::before {
31	content: "";
32	position: absolute;
33	width: 92%;
34	height: 2px;
35	top: 50%;
36	left: 4%;
37	right: 4%;
38	transform: translateY(-50%);
39	background-image: linear-gradient(to right, transparent, #EF233C, transparent);
40	}
41	.upk-carbon-slider-wrap .upk-carbon-thumbs .upk-item {
42	height: var(--carbon-thumb-height);
43	position: relative;
44	}
45	.upk-carbon-slider-wrap .upk-carbon-thumbs .upk-item.swiper-slide-active .upk-dot::after {
46	background: #D90429;
47	transform: translate(-50%, -50%) scale(1.8);
48	transition-delay: 700ms;
49	}
50	.upk-carbon-slider-wrap .upk-carbon-thumbs .upk-date,
51	.upk-carbon-slider-wrap .upk-carbon-thumbs .upk-post-time {
52	font-size: clamp(0.75rem, 1.5vw, 1rem);
53	text-transform: uppercase;
54	font-weight: 700;
55	color: #EF233C;
56	}
57	.upk-carbon-slider-wrap .upk-carbon-thumbs .upk-post-time {
58	margin-left: 5px;
59	}
60	.upk-carbon-slider-wrap .upk-carbon-thumbs .upk-post-time i {
61	margin-right: 2px;
62	}
63	.upk-carbon-slider-wrap .upk-carbon-thumbs .upk-dot {
64	cursor: pointer;
65	}
66	.upk-carbon-slider-wrap .upk-carbon-thumbs .upk-dot::after {
67	content: "";
68	position: absolute;
69	width: clamp(0.938rem, 2vw, 1.25rem);
70	height: clamp(0.938rem, 2vw, 1.25rem);
71	border-radius: 100%;
72	background: #ffffff;
73	border-width: 2px;
74	border-color: #EF233C;
75	border-style: solid;
76	top: 50%;
77	left: 50%;
78	transform: translate(-50%, -50%) scale(1);
79	transition: transform 0.3s ease;
80	}
81	.upk-carbon-slider-wrap .upk-carbon-thumbs .upk-dot:hover::after {
82	background: #D90429;
83	transform: translate(-50%, -50%) scale(1.2);
84	}
85	.upk-carbon-slider-wrap .upk-carbon-main {
86	margin-top: var(--carbon-thumb-height);
87	}
88	.upk-carbon-slider-wrap .upk-carbon-main .upk-item.swiper-slide-active .upk-content {
89	opacity: 1;
90	}
91	.upk-carbon-slider-wrap .upk-carbon-main .upk-content {
92	opacity: 0;
93	margin: auto;
94	width: 100%;
95	}
96	.upk-carbon-slider-wrap .upk-carbon-main .upk-category-and-comment,
97	.upk-carbon-slider-wrap .upk-carbon-main .upk-meta {
98	display: inline-flex;
99	align-items: center;
100	margin-bottom: clamp(0.625rem, 1vw, 0.875rem);
101	}
102	.upk-carbon-slider-wrap .upk-carbon-main .upk-category a + a {
103	margin-left: 5px;
104	}
105	.upk-carbon-slider-wrap .upk-carbon-main .upk-category a,
106	.upk-carbon-slider-wrap .upk-carbon-main .upk-meta {
107	font-size: clamp(0.75rem, 1vw, 0.875rem);
108	color: #515258;
109	text-transform: uppercase;
110	}
111	.upk-carbon-slider-wrap .upk-carbon-main .upk-category a,
112	.upk-carbon-slider-wrap .upk-carbon-main .upk-title a,
113	.upk-carbon-slider-wrap .upk-carbon-main .upk-author a {
114	text-decoration: none;
115	transition: all 0.3s ease-in-out;
116	}
117	.upk-carbon-slider-wrap .upk-carbon-main .upk-category a:hover,
118	.upk-carbon-slider-wrap .upk-carbon-main .upk-title a:hover,
119	.upk-carbon-slider-wrap .upk-carbon-main .upk-author a:hover {
120	color: #D90429;
121	}
122	.upk-carbon-slider-wrap .upk-carbon-main .upk-title {
123	margin: 0 0 clamp(0.625rem, 1vw, 0.875rem);
124	font-size: clamp(1.25rem, 4vw, 2.25rem);
125	font-weight: 700;
126	}
127	.upk-carbon-slider-wrap .upk-carbon-main .upk-title a {
128	color: #282932;
129	}
130	.upk-carbon-slider-wrap .upk-carbon-main .upk-meta i {
131	margin-right: 5px;
132	}
133	.upk-carbon-slider-wrap .upk-carbon-main .upk-meta .upk-author a {
134	color: #515258;
135	}
136	.upk-carbon-slider-wrap .upk-carbon-main .upk-meta > div {
137	position: relative;
138	display: inline-flex;
139	align-items: center;
140	}
141	.upk-carbon-slider-wrap .upk-carbon-main .upk-meta > div:before {
142	content: attr(data-separator);
143	margin: 0 5px;
144	}
145	.upk-carbon-slider-wrap .upk-carbon-main .upk-meta > div:nth-child(1)::before {
146	display: none;
147	}
148	.upk-carbon-slider-wrap .upk-carbon-main .upk-post-time {
149	margin-left: 15px;
150	}
151	.upk-carbon-slider-wrap .upk-carbon-main .upk-separator {
152	margin: 0 15px;
153	}
154	.upk-carbon-slider-wrap .upk-carbon-main .upk-text {
155	font-size: clamp(0.875rem, 1.5vw, 1rem);
156	color: #62626a;
157	}
158	.upk-carbon-slider-wrap .upk-carbon-main .upk-text p {
159	margin: 0;
160	}
161	.upk-carbon-slider-wrap .upk-navigation-button {
162	position: absolute;
163	top: 50%;
164	transform: translateY(-50%);
165	color: #fff;
166	padding: clamp(0.625rem, 1.5vw, 0.875rem);
167	border-radius: 50%;
168	transition: all 0.3s ease;
169	background-color: #EF233C;
170	z-index: 1;
171	cursor: pointer;
172	box-shadow: 0;
173	}
174	.upk-carbon-slider-wrap .upk-navigation-button i {
175	display: block;
176	}
177	.upk-carbon-slider-wrap .upk-navigation-button:hover {
178	background-color: #D90429;
179	}
180	.upk-carbon-slider-wrap .upk-navigation-button.upk-navigation-next {
181	right: 0;
182	}
183	.upk-carbon-slider-wrap .upk-navigation-button.upk-navigation-prev {
184	left: 0;
185	}