PluginProbe ʕ •ᴥ•ʔ
Photo Gallery by FooGallery : Responsive Image Gallery, Masonry Gallery & Carousel / trunk
Photo Gallery by FooGallery : Responsive Image Gallery, Masonry Gallery & Carousel vtrunk
trunk 1.10.3 2.0.24 2.1.34 2.2.44 2.3.3 2.4.32 3.0.6 3.1.11 3.1.12 3.1.13 3.1.20 3.1.25 3.1.26 3.1.26.1 3.1.26.2
foogallery / css / admin-page-foogallery-help.css
foogallery / css Last commit date
admin-foogallery-gallery-piles.css 7 months ago admin-foogallery.css 7 months ago admin-page-foogallery-extensions.css 7 months ago admin-page-foogallery-help.css 7 months ago admin-page-foogallery-settings.css 7 months ago admin-tinymce.css 7 months ago foogallery-foovideo-overrides.css 7 months ago foogallery.admin.datasources.css 7 months ago foogallery.admin.min.css 4 years ago foogallery.admin.template.css 7 months ago
admin-page-foogallery-help.css
590 lines
1 .foogallery_page_foogallery-help .fs-notice {
2 margin-right: 200px !important;
3 }
4
5
6 body {
7 background-color: #646970;/*#484c50;*/
8 }
9 #wpcontent {
10 padding-right: 20px;
11 box-sizing: border-box;
12 }
13 @media screen and (max-width: 782px){
14 .auto-fold #wpcontent {
15 padding-right: 10px;
16 }
17 }
18
19 .foogallery-admin-help,
20 .foogallery-admin-help * {
21 box-sizing: border-box;
22 }
23
24 .foogallery-admin-help {
25 max-width: 1000px;
26 margin: 24px auto;
27 clear: both;
28 background-color: #101517;
29 border-radius: 20px;
30 color: #ffffff;
31 font-size: 14px;
32 line-height: 1.4;
33 }
34
35 .foogallery-admin-help img {
36 display: block;
37 max-width: 100%;
38 height: auto;
39 box-sizing: border-box;
40 margin: 0 auto;
41 }
42 .foogallery-admin-help p {
43 margin: 0.8em 0;
44 font-size: 14px;
45 line-height: 1.4;
46 }
47 .foogallery-admin-help h2,
48 .foogallery-admin-help h3,
49 .foogallery-admin-help h4 {
50 color: inherit;
51 }
52
53 .foogallery-admin-help a {
54 color: #3582c4;
55 text-decoration: none;
56 }
57 .foogallery-admin-help a:focus {
58 box-shadow: none;
59 }
60 .foogallery-admin-help a:hover {
61 color: #4f94d4;
62 }
63
64 .foogallery-admin-help-header {
65 margin: 0;
66 color: #FFFFFF;
67 position: relative;
68 text-align: center;
69 padding: 20px;
70 }
71 .foogallery-admin-help-header > img {
72 margin: 3em auto;
73 }
74
75 .foogallery-admin-help-tagline {
76 margin: 0;
77 padding: 10px;
78 font-size: 1.5em;
79 }
80
81 .foogallery-admin-help-ribbon {
82 position: absolute;
83 right: -5px;
84 top: -5px;
85 z-index: 1;
86 overflow: hidden;
87 width: 75px;
88 height: 75px;
89 text-align: right;
90 }
91 .foogallery-admin-help-ribbon span {
92 font-size: 10px;
93 font-weight: bold;
94 color: #2b2400;
95 text-transform: uppercase;
96 text-align: center;
97 line-height: 20px;
98 transform: rotate(45deg);
99 width: 100px;
100 display: block;
101 background: #b04cff;
102 box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
103 position: absolute;
104 top: 19px; right: -21px;
105 }
106 .foogallery-admin-help-ribbon span::before {
107 content: "";
108 position: absolute;
109 left: 0;
110 top: 100%;
111 z-index: -1;
112 border-left: 3px solid #6a00b8;
113 border-right: 3px solid transparent;
114 border-bottom: 3px solid transparent;
115 border-top: 3px solid #6a00b8;
116 }
117 .foogallery-admin-help-ribbon span::after {
118 content: "";
119 position: absolute;
120 right: 0;
121 top: 100%;
122 z-index: -1;
123 border-left: 3px solid transparent;
124 border-right: 3px solid #6a00b8;
125 border-bottom: 3px solid transparent;
126 border-top: 3px solid #6a00b8;
127 }
128
129 .foogallery-admin-help nav {
130 background: #101517;/*#1d2327*/;
131 clear: both;
132 padding-top: 0;
133 color: #9ca2a7;
134 display: flex;
135 width: 100%;
136 max-width: 100%;
137 justify-content: stretch;
138 align-items: stretch;
139 flex-wrap: nowrap;
140 padding-left: 10px;
141 padding-right: 10px;
142 border-bottom: 3px solid #fff;
143 }
144
145 .foogallery-admin-help nav a {
146 display: block;
147 flex-grow: 1;
148 margin-left: 0;
149 padding: 24px 32px 18px 32px;
150 font-size: 1.3em;
151 line-height: 1.4;
152 border: 3px solid transparent;
153 border-top-left-radius: .6rem;
154 border-top-right-radius: .6rem;
155 background: transparent;
156 color: inherit;
157 text-decoration: none;
158 font-weight: 600;
159 box-shadow: none;
160 text-align: center;
161 }
162
163 .foogallery-admin-help nav a.foogallery-admin-help-tab-active {
164 background-color: #2c3338;
165 color: #ffffff;
166 border-color: #ffffff;
167 border-bottom: none;
168 border-bottom-color: #2c3338;
169 margin-bottom: -3px;
170 }
171
172 .fgah-feature {
173 display: block;
174 position: relative;
175 max-width: 100%;
176 margin: 0;
177 padding: 16px;
178 font-size: 14px;
179 background-color: #1d2327;
180 }
181 .fgah-feature:nth-child(odd) {
182 background-color: #2c3338;
183 }
184
185 .fgah-feature > * {
186 margin: 16px;
187 }
188 .fgah-feature > header + * {
189 margin-top: 32px;
190 }
191 .fgah-feature > * + footer {
192 margin-top: 32px;
193 }
194
195 .fgah-feature > header {
196 text-align: left;
197 }
198 .rtl .fgah-feature > header {
199 text-align: right;
200 }
201
202 .fgah-feature > header > h3 {
203 font-size: 1.5em;
204 margin: 0;
205 padding: 0;
206 font-weight: 600;
207 }
208 .fgah-feature > header > h3 + p {
209 margin-top: 24px;
210 }
211
212 .fgah-feature > footer {
213 text-align: center;
214 padding: 0;
215 }
216
217 .fgah-feature > footer > small {
218 display: block;
219 margin: 16px 0;
220 color: #c3c4c7;
221 }
222
223 .fgah-feature > footer > *:last-child {
224 margin-bottom: 0;
225 }
226
227 .fgah-feature > div {
228 display: flex;
229 flex-direction: row;
230 justify-content: center;
231 align-items: flex-start;
232 max-width: 100%;
233 }
234 .fgah-feature-right > div {
235 flex-direction: row-reverse;
236 }
237 .fgah-feature > div > * {
238 padding: 0;
239 margin: 0;
240 width: 33.33%;
241 }
242 .fgah-feature > div > figure {
243 width: 66.66%;
244 text-align: center;
245 padding-right: 32px;
246 }
247 .rtl .fgah-feature > div > figure {
248 padding-right: 0;
249 padding-left: 32px;
250 }
251 .fgah-feature-right > div > figure {
252 padding-right: 0;
253 padding-left: 32px;
254 }
255 .rtl .fgah-feature-right > div > figure {
256 padding-right: 32px;
257 padding-left: 0;
258 }
259 .fgah-feature > div > ol > li {
260 list-style-type: decimal;
261 margin: 0 2em;
262 padding: 0;
263 }
264 .fgah-feature > div > dl > dt {
265 font-size: large;
266 margin: 0 0 16px 0;
267 font-weight: 600;
268 }
269 .fgah-feature > div > dl > dt > code {
270 background-color: transparent;
271 font-size: inherit;
272 padding: 0;
273 margin: 0;
274 }
275 .fgah-feature > div > dl > dd {
276 font-size: inherit;
277 margin: 16px 0;
278 }
279 .fgah-feature > div > dl > dd + dt {
280 margin: 32px 0 16px 0;
281 }
282
283 .fgah-feature-pro {
284 counter-increment: number-counter;
285 }
286
287 .fgah-feature-pro > div > dl > dd > p > a {
288 text-decoration: underline;
289 }
290
291 .fgah-feature-pro > div > dl > dt::before {
292 content: counters(number-counter, ".") " ";
293 line-height: 30px;
294 display: inline-block;
295 min-width: 20px;
296 margin: 0 8px 0 0;
297 padding: 0 5px;
298 text-align: center;
299 vertical-align: 1px;
300 color: #fff;
301 border-radius: 3px;
302 background: #4098D7;
303 background: linear-gradient(45deg, #6638b8 0%, #4098D7 100%);
304 }
305 .rtl .fgah-feature-pro > div > dl > dt::before {
306 margin: 0 0 0 8px;
307 }
308
309 span.fgah-plan-prostarter {
310 color: #4098D7;
311 font-weight: bold;
312 }
313
314 .fgah-feature-pro.fgah-feature-plan-pro > div > dl > dt::before {
315 background: #2CA03D;
316 background: linear-gradient(45deg, #6638b8 0%, #2CA03D 100%);
317 }
318
319 span.fgah-plan-pro {
320 color: #2CA03D;
321 font-weight: bold;
322 }
323
324 .fgah-feature-pro.fgah-feature-plan-commerce > div > dl > dt::before {
325 background: #B0459D;
326 background: linear-gradient(45deg, #6638b8 0%, #B0459D 100%);
327 }
328
329 span.fgah-plan-commerce {
330 color: #B0459D;
331 font-weight: bold;
332 }
333
334 .fgah-feature-sub-title {
335 margin-bottom: 16px;
336 }
337
338 .fgah-feature-sub-title h4 {
339 margin: 0px 0px 5px 0;
340 }
341
342 .fgah-feature-sub-title span {
343 background: #6d6d6d;
344 color: #191a1f;
345 padding: 1px 6px;
346 border-radius: 3px;
347 margin-right: 3px;
348 font-weight: 500;
349 }
350
351 .fgah-feature-sub-title span.fgah-plan-prostarter {
352 background: #3397C1;
353 }
354
355 .fgah-feature-sub-title span.fgah-plan-pro {
356 background: #2CA03D;
357 }
358
359 .fgah-feature-sub-title span.fgah-plan-commerce {
360 background: #B0459D;
361 }
362
363 .fgah-help-list {
364 list-style-type: none;
365 }
366 .fgah-help-list li {
367 list-style-type: none;
368 margin: 0 0 16px 0;
369 padding: 0;
370 }
371 .fgah-help-list li:last-child {
372 margin-bottom: 0;
373 }
374 .fgah-help-list li::before {
375 content: "\003F";
376 display: inline-block;
377 background-color: #1897ff;
378 color: #FFFFFF;
379 border-radius: 50%;
380 line-height: 1;
381 width: 1em;
382 height: 1em;
383 padding: 0.14em;
384 text-align: center;
385 margin-right: 0.4em;
386 border: solid 2px #FFFFFF;
387 float: left;
388 }
389 .rtl .fgah-help-list li::before {
390 margin-right: 0;
391 margin-left: 0.4em;
392 float: right;
393 }
394
395 .fgah-demo {
396 display: block;
397 position: relative;
398 max-width: 100%;
399 margin: 0;
400 padding: 16px;
401 font-size: 14px;
402 background-color: #2c3338;
403 }
404 .fgah-demo > header {
405 text-align: left;
406 margin: 16px;
407 }
408 .rtl .fgah-demo > header {
409 text-align: right;
410 }
411 .fgah-demo > header + * {
412 margin-top: 32px;
413 }
414 .fgah-demo > header > h3 {
415 font-size: 1.5em;
416 margin: 0;
417 padding: 0;
418 font-weight: 600;
419 }
420 .fgah-demo > header > h3 + p {
421 margin-top: 24px;
422 }
423 .fgah-demo > div.foogallery {
424 margin-bottom: 15px;
425 }
426
427 .foogallery-admin-help-button {
428 position: relative;
429 background-color: #7d4fff;
430 color: #ffffff !important;
431 padding: 10px 20px;
432 font-size: 1em;
433 border-radius: 3px;
434 text-decoration: none;
435 font-weight: 400;
436 display: inline-block;
437 text-align: center;
438 line-height: 1.2;
439 border: none;
440 box-shadow: none;
441 outline: none;
442 cursor: pointer;
443 transition: background-color .1s ease-in-out;
444 }
445
446 .foogallery-admin-help-button .dashicons {
447 margin-left: 5px;
448 width: 10px;
449 height: 10px;
450 font-size: 15px;
451 }
452
453 .foogallery-admin-help-button:hover {
454 background-color: #184eff;
455 }
456
457 .foogallery-admin-help-button-active {
458 background-color: #1897ff;
459 }
460
461 .foogallery-admin-help-button-cta {
462 position: relative;
463 background-color: #7d4fff;
464 color: #ffffff !important;
465 padding: 12px 36px;
466 font-size: 1.3em;
467 border-radius: 5px;
468 text-decoration: none;
469 font-weight: 600;
470 display: inline-block;
471 min-width: 250px;
472 text-align: center;
473 line-height: 1.4;
474 border: none;
475 box-shadow: none;
476 outline: none;
477 cursor: pointer;
478 transition: background-color .1s ease-in-out;
479 }
480
481 .foogallery-admin-help-button-cta:hover,
482 .foogallery-admin-help-button-cta:focus {
483 background-color: #5234a7;
484 }
485
486 .foogallery-admin-help-button-cta.foogallery-admin-help-loading {
487 position: relative;
488 cursor: wait;
489 }
490
491 .foogallery-admin-help-button-cta .progress {
492 border-radius: 5px;
493 width: 0;
494 background: #1897ff;
495 opacity: 0;
496 transition: all 0.3s ease;
497 position: absolute;
498 left: 0;
499 top: 0;
500 right: 0;
501 bottom: 0;
502 }
503 .foogallery-admin-help-button-cta.foogallery-admin-help-loading .progress {
504 opacity: 1;
505 animation: progress-anim 5s ease 0s;
506 animation-fill-mode: both;
507 }
508
509 @keyframes progress-anim {
510 0% {
511 width: 0%;
512 }
513 5% {
514 width: 0%;
515 }
516 10% {
517 width: 15%;
518 }
519 30% {
520 width: 40%;
521 }
522 50% {
523 width: 55%;
524 }
525 80% {
526 width: 70%;
527 }
528 90% {
529 width: 80%;
530 }
531 100% {
532 width: 95%;
533 }
534 }
535
536 .foogallery-admin-help-footer {
537 margin: 0;
538 color: #ffffff;
539 text-align: center;
540 padding: 20px;
541 font-size: 1.3em;
542 }
543
544 .foogallery-admin-help-column .foogallery-admin-help-button-cta {
545 min-width: auto;
546 padding: 12px 24px;
547 }
548
549
550 @media screen and (max-width: 782px){
551 .foogallery-admin-help nav {
552 flex-wrap: wrap;
553 }
554 .foogallery-admin-help nav a {
555 padding: 24px 24px 18px 24px;
556 width: 50%;
557 }
558 }
559
560 @media screen and (max-width: 600px){
561 .fgah-feature > div,
562 .fgah-feature-right > div {
563 flex-direction: column;
564 }
565 .fgah-feature > div > *,
566 .fgah-feature > div > figure {
567 width: 100%;
568 }
569 .fgah-feature > div > figure + * {
570 margin-top: 32px;
571 }
572 .fgah-feature > div > figure,
573 .fgah-feature-right > div > figure {
574 padding-right: 0;
575 padding-left: 0;
576 }
577 }
578
579 @media screen and (max-width: 400px){
580 .foogallery-admin-help-button-cta {
581 min-width: 150px;
582 }
583 }
584
585
586 @media (hover: hover){
587 .foogallery-admin-help a:hover {
588 color: #0097de;
589 }
590 }