PluginProbe
Authorsy – Author Box, Multiple Authors, Guest Authors & Post Rating / trunk
Authorsy – Author Box, Multiple Authors, Guest Authors & Post Rating vtrunk
trunk 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 1.0.5 1.0.6 1.0.7 1.0.8
authorsy / assets / css / frontend.css

frontend.css in Authorsy – Author Box, Multiple Authors, Guest Authors & Post Rating trunk, at assets/css/frontend.css

416 lines 9.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*!************************************************************************************************************************!*\
2 !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./assets/src/scss/frontend.scss ***!
3 \************************************************************************************************************************/
4 :root {
5 --ea-color-white: #ffffff;
6 --ea-color-black: #000000;
7 --ea-color-light-grey: #eaeaea;
8 --ea-color-light-blue: #f5fafe;
9 --ea-color-main: #275CDE;
10 --ea-color-gradient: linear-gradient(20deg, #275CDE 0%, #1044c4 100%);
11 --ea-color-secondary: linear-gradient(40deg, #275CDE 0%, #1044c4 80%);
12 --ea-color-main-active: #275CDE;
13 }
14
15 .mb-0 {
16 margin: 0 !important;
17 }
18
19 .mb-20 {
20 margin-bottom: 20px !important;
21 }
22
23 .mb-30 {
24 margin-bottom: 30px !important;
25 }
26
27 .mb-40 {
28 margin-bottom: 40px !important;
29 }
30
31 .ant-btn-primary {
32 background: var(--ea-color-gradient);
33 border-radius: 6px;
34 -webkit-border-radius: 6px;
35 -ms-border-radius: 6px;
36 border-color: var(--ea-color-main);
37 }
38
39 .ant-switch-checked {
40 background: var(--ea-color-gradient);
41 }
42
43 .ea-author-box-item {
44 padding: 20px;
45 border: 1px solid #eaeaea;
46 margin-bottom: 20px;
47 }
48
49 .ea-author-box {
50 display: flex;
51 gap: 20px;
52 }
53 .ea-author-box .ea-author-img img {
54 max-width: 100%;
55 }
56 .ea-author-box .ea-author-info {
57 flex: 0 0 80%;
58 max-width: 80%;
59 }
60 .ea-author-box .ea-author-name {
61 margin: 0 0 8px;
62 line-height: 20px;
63 font-size: 22px;
64 text-transform: capitalize;
65 font-weight: 600;
66 }
67 .ea-author-box .ea-author-name a {
68 text-decoration: none;
69 color: var(--ea-color-black);
70 }
71 .ea-author-box .ea-author-name a:hover {
72 color: var(--ea-color-main);
73 }
74 .ea-author-box .ea-author-description {
75 font-size: 16px;
76 margin: 0 0 15px;
77 color: #666;
78 }
79 .ea-author-box .ea-author-socials {
80 display: flex;
81 flex-wrap: wrap;
82 list-style: none;
83 padding: 0;
84 margin: 0;
85 gap: 8px;
86 }
87 .ea-author-box .ea-author-socials li a {
88 color: var(--ea-color-black);
89 text-decoration: none;
90 display: inline-block;
91 text-align: center;
92 transition: all 0.4s ease;
93 -webkit-transition: all 0.4s ease;
94 -moz-transition: all 0.4s ease;
95 -ms-transition: all 0.4s ease;
96 }
97 .ea-author-box .ea-author-socials li a i {
98 vertical-align: middle;
99 }
100 .ea-author-box .ea-social_outline li a {
101 border-radius: 50%;
102 -webkit-border-radius: 50%;
103 -ms-border-radius: 50%;
104 }
105 .ea-author-box .ea-social_fill li a {
106 background-color: #666;
107 color: #fff;
108 }
109 .ea-author-box .author-website a {
110 font-size: 14px;
111 font-style: italic;
112 line-height: 14px;
113 margin-bottom: 12px;
114 display: inline-block;
115 color: var(--ea-color-main);
116 text-decoration: none;
117 }
118
119 .ea-author-title-wrap {
120 display: flex;
121 justify-content: space-between;
122 flex-wrap: wrap;
123 }
124
125 .ea-author-designation {
126 font-size: 14px;
127 font-style: italic;
128 margin-bottom: 5px;
129 }
130
131 .ea-author-extra-bio-wrap {
132 padding-top: 20px;
133 border-top: 1px solid #eaeaea;
134 margin-top: 20px;
135 }
136
137 .ea-social-left {
138 display: flex;
139 flex-wrap: nowrap;
140 }
141 .ea-social-left .ea-author-socials {
142 width: 50px;
143 }
144
145 .ea-author-box-style5 {
146 text-align: center;
147 }
148 .ea-author-box-style5 .ea-author-box {
149 flex-direction: column;
150 text-align: center;
151 }
152 .ea-author-box-style5 .ea-author-info {
153 flex: 0 0 100%;
154 max-width: 100%;
155 }
156 .ea-author-box-style5 .ea-author-socials,
157 .ea-author-box-style5 .ea-author-extra-bio {
158 justify-content: center;
159 }
160
161 .ea-author-box-style2 .ea-author-socials {
162 margin-bottom: 8px;
163 }
164
165 .ea-author-extra-bio-title {
166 font-size: 15px;
167 display: block;
168 margin-bottom: 5px;
169 }
170
171 .ea-social-left .ea-author-socials {
172 margin-right: 10px;
173 }
174
175 .authorsy-like-box-wrapper {
176 display: flex;
177 justify-content: space-between;
178 flex-wrap: wrap;
179 align-items: center;
180 padding: 20px;
181 border: 1px solid #ddd;
182 }
183 .authorsy-like-box-wrapper .authorsy-like-box-title {
184 margin: 0 0 10px;
185 font-size: 24px;
186 }
187
188 .ea-like-dislike-btn {
189 display: flex;
190 flex-wrap: wrap;
191 gap: 30px;
192 }
193 .ea-like-dislike-btn button {
194 background-color: transparent;
195 border: none;
196 padding: 0;
197 cursor: pointer;
198 color: #000;
199 }
200 .ea-like-dislike-btn button i {
201 font-size: 35px;
202 display: block;
203 margin-bottom: 6px;
204 color: #777;
205 transition: all 0.4s ease;
206 -webkit-transition: all 0.4s ease;
207 -moz-transition: all 0.4s ease;
208 -ms-transition: all 0.4s ease;
209 }
210 .ea-like-dislike-btn button:hover i {
211 transform: scale(1.3);
212 }
213 .ea-like-dislike-btn button.ea-like:hover i, .ea-like-dislike-btn button.ea-like.ea-active i {
214 color: #19509c;
215 }
216 .ea-like-dislike-btn button.ea-loves:hover i, .ea-like-dislike-btn button.ea-loves.ea-active i {
217 color: #FF559D;
218 }
219 .ea-like-dislike-btn button.ea-angry:hover i, .ea-like-dislike-btn button.ea-angry.ea-active i {
220 color: #f00;
221 }
222 .ea-like-dislike-btn [disabled] {
223 cursor: not-allowed;
224 opacity: 0.3;
225 }
226 .ea-like-dislike-btn [disabled]:hover i {
227 transform: scale(1);
228 }
229 .ea-like-dislike-btn [disabled][tooltip]:before, .ea-like-dislike-btn [disabled][tooltip]:after {
230 display: none !important;
231 }
232 .ea-like-dislike-btn [tooltip] {
233 position: relative; /* opinion 1 */
234 }
235 .ea-like-dislike-btn {
236 /* Applies to all tooltips */
237 }
238 .ea-like-dislike-btn [tooltip]::before,
239 .ea-like-dislike-btn [tooltip]::after {
240 text-transform: none; /* opinion 2 */
241 font-size: 0.9em; /* opinion 3 */
242 line-height: 1;
243 user-select: none;
244 pointer-events: none;
245 position: absolute;
246 display: none;
247 opacity: 0;
248 }
249 .ea-like-dislike-btn [tooltip]::before {
250 content: "";
251 border: 5px solid transparent; /* opinion 4 */
252 z-index: 1001; /* absurdity 1 */
253 }
254 .ea-like-dislike-btn [tooltip]::after {
255 content: attr(tooltip); /* magic! */
256 /* most of the rest of this is opinion */
257 font-family: Helvetica, sans-serif;
258 text-align: center;
259 /*
260 Let the content set the size of the tooltips
261 but this will also keep them from being obnoxious
262 */
263 min-width: 3em;
264 max-width: 21em;
265 white-space: nowrap;
266 overflow: hidden;
267 text-overflow: ellipsis;
268 padding: 1ch 1.5ch;
269 border-radius: 0.3ch;
270 box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
271 background: #333;
272 color: #fff;
273 z-index: 1000; /* absurdity 2 */
274 }
275 .ea-like-dislike-btn {
276 /* Make the tooltips respond to hover */
277 }
278 .ea-like-dislike-btn [tooltip]:hover::before,
279 .ea-like-dislike-btn [tooltip]:hover::after {
280 display: block;
281 }
282 .ea-like-dislike-btn {
283 /* don't show empty tooltips */
284 }
285 .ea-like-dislike-btn [tooltip=""]::before,
286 .ea-like-dislike-btn [tooltip=""]::after {
287 display: none !important;
288 }
289 .ea-like-dislike-btn {
290 /* FLOW: UP */
291 }
292 .ea-like-dislike-btn [tooltip]:not([flow])::before,
293 .ea-like-dislike-btn [tooltip][flow^=up]::before {
294 bottom: 120%;
295 border-bottom-width: 0;
296 border-top-color: #333;
297 }
298 .ea-like-dislike-btn [tooltip]:not([flow])::after,
299 .ea-like-dislike-btn [tooltip][flow^=up]::after {
300 bottom: calc(100% + 15px);
301 }
302 .ea-like-dislike-btn [tooltip]:not([flow])::before,
303 .ea-like-dislike-btn [tooltip]:not([flow])::after,
304 .ea-like-dislike-btn [tooltip][flow^=up]::before,
305 .ea-like-dislike-btn [tooltip][flow^=up]::after {
306 left: 50%;
307 transform: translate(-50%, -0.5em);
308 }
309 .ea-like-dislike-btn {
310 /* FLOW: DOWN */
311 }
312 .ea-like-dislike-btn [tooltip][flow^=down]::before {
313 top: 100%;
314 border-top-width: 0;
315 border-bottom-color: #333;
316 }
317 .ea-like-dislike-btn [tooltip][flow^=down]::after {
318 top: calc(100% + 15px);
319 }
320 .ea-like-dislike-btn [tooltip][flow^=down]::before,
321 .ea-like-dislike-btn [tooltip][flow^=down]::after {
322 left: 50%;
323 transform: translate(-50%, 0.5em);
324 }
325 .ea-like-dislike-btn {
326 /* FLOW: LEFT */
327 }
328 .ea-like-dislike-btn [tooltip][flow^=left]::before {
329 top: 50%;
330 border-right-width: 0;
331 border-left-color: #333;
332 left: calc(0em - 5px);
333 transform: translate(-0.5em, -50%);
334 }
335 .ea-like-dislike-btn [tooltip][flow^=left]::after {
336 top: 50%;
337 right: calc(100% + 5px);
338 transform: translate(-0.5em, -50%);
339 }
340 .ea-like-dislike-btn {
341 /* FLOW: RIGHT */
342 }
343 .ea-like-dislike-btn [tooltip][flow^=right]::before {
344 top: 50%;
345 border-left-width: 0;
346 border-right-color: #333;
347 right: calc(0em - 15px);
348 transform: translate(0.5em, -50%);
349 }
350 .ea-like-dislike-btn [tooltip][flow^=right]::after {
351 top: 50%;
352 left: calc(100% + 15px);
353 transform: translate(0.5em, -50%);
354 }
355 .ea-like-dislike-btn {
356 /* KEYFRAMES */
357 }
358 @keyframes tooltips-vert {
359 to {
360 opacity: 0.9;
361 transform: translate(-50%, 0);
362 }
363 }
364 @keyframes tooltips-horz {
365 to {
366 opacity: 0.9;
367 transform: translate(0, -50%);
368 }
369 }
370 .ea-like-dislike-btn {
371 /* FX All The Things */
372 }
373 .ea-like-dislike-btn [tooltip]:not([flow]):hover::before,
374 .ea-like-dislike-btn [tooltip]:not([flow]):hover::after,
375 .ea-like-dislike-btn [tooltip][flow^=up]:hover::before,
376 .ea-like-dislike-btn [tooltip][flow^=up]:hover::after,
377 .ea-like-dislike-btn [tooltip][flow^=down]:hover::before,
378 .ea-like-dislike-btn [tooltip][flow^=down]:hover::after {
379 animation: tooltips-vert 300ms ease-out forwards;
380 }
381
382 .authorsy-modal-wrapper {
383 padding: 10px;
384 top: 120%;
385 }
386 .authorsy-modal-wrapper button {
387 padding: 8px 20px;
388 font-size: 13px;
389 background-color: var(--ea-color-main);
390 color: #fff;
391 border: none;
392 cursor: pointer;
393 }
394 .authorsy-modal-wrapper .social-share-modal-title {
395 line-height: 14px;
396 }
397 .authorsy-modal-wrapper textarea {
398 width: 100%;
399 height: 80px;
400 }
401
402 @media (max-width: 500px) {
403 .ea-author-extra-bio li,
404 .ea-author-extra-bio li a {
405 display: block;
406 width: 100%;
407 }
408 .authorsy-top-voted-grid-wrapper .authorsy-top-voted-grid {
409 flex: 0 0 100%;
410 max-width: 100%;
411 }
412 .authorsy-top-voted-list {
413 flex-wrap: nowrap;
414 }
415 }
416