PluginProbe
Photo Gallery by Re Gallery: Responsive Image Gallery with AI SEO / trunk
Photo Gallery by Re Gallery: Responsive Image Gallery with AI SEO vtrunk
1.20.14 1.20.13 1.20.12 1.20.11 1.20.10 1.20.9 1.20.8 1.20.7 1.20.6 1.20.5 1.20.4 1.20.3 1.20.2 1.20.1 1.20.0 1.19.2 1.19.1 1.19.0 1.10.0 1.10.1 1.10.2 1.10.3 1.10.4 1.10.5 1.11.0 All 135 releases
regallery / assets / css / admin.css

admin.css in Photo Gallery by Re Gallery: Responsive Image Gallery with AI SEO trunk, at assets/css/admin.css

669 lines 13.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .reacg_items * {
2 box-sizing: border-box;
3 }
4
5 .reacg_items {
6 max-height: 315px;
7 overflow: auto;
8 line-height: 0;
9 margin: -2px;
10 margin-top: 8px;
11 }
12
13 .reacg_item {
14 border: 1px solid rgba(0, 0, 0, 0.12);
15 display: inline-block;
16 height: 100px;
17 width: 100px;
18 margin: 2px;
19 padding: 0;
20 border-radius: 6px;
21 overflow: hidden;
22 filter: drop-shadow(1px 1px 3px rgba(26, 45, 89, 0.18));
23 background-color: #ffffff;
24 }
25
26 .reacg_item a, .reacg_item a:hover {
27 color: inherit;
28 text-decoration: none;
29 }
30
31 .reacg_item_new .reacg_item_image {
32 cursor: pointer;
33 background-color: var(--reacg-primary-color, #155C92);
34 -webkit-mask-image: url(../images/add_new_image.svg);
35 -webkit-mask-repeat: no-repeat;
36 -webkit-mask-position: center;
37 -webkit-mask-size: 90px;
38 mask-image: url(../images/add_new_image.svg);
39 mask-repeat: no-repeat;
40 mask-position: center;
41 mask-size: 90px;
42 }
43
44 .reacg_item_image {
45 width: 100%;
46 height: 100%;
47 position: relative;
48 cursor: move;
49 overflow: hidden;
50 }
51
52 .reacg_item_image img {
53 position: absolute;
54 inset: 0;
55 width: 100%;
56 height: 100%;
57 object-fit: cover;
58 object-position: center;
59 pointer-events: none;
60 }
61
62 .reacg_item_image img.reacg_item_image_img_natural {
63 inset: 50% auto auto 50%;
64 width: auto;
65 height: auto;
66 max-width: 100%;
67 max-height: 100%;
68 object-fit: contain;
69 transform: translate(-50%, -50%);
70 }
71
72 .reacg-cover,
73 .reacg-overlay {
74 position: absolute;
75 }
76
77 .reacg_item_new p {
78 margin: 0;
79 padding: 65px 0 0 0;
80 position: absolute;
81 text-align: center;
82 font-weight: 500;
83 width: 100%;
84 }
85
86 .reacg-hidden {
87 display: none !important;
88 }
89
90 .reacg-overlay {
91 display: none;
92 width: 100%;
93 height: 100%;
94 background-color: rgba(0, 0, 0, 0.4);
95 }
96
97 .reacg-cover {
98 width: 75px;
99 height: 75px;
100 position: absolute;
101 left: 50%;
102 top: 50%;
103 transform: translate(-50%, -50%);
104 background-color: rgb(0 0 0 / 30%);
105 border-radius: 18px;
106 border: 3px solid #cacccb;
107 }
108 .reacg-cover.dashicons.dashicons-admin-post:before,
109 .reacg-cover.dashicons.dashicons-admin-page:before,
110 .reacg-cover.dashicons.dashicons-archive:before {
111 font-size: 35px;
112 }
113 .reacg-cover.reacg-dynamic.dashicons.dashicons-admin-post:after {
114 content: "\f109";
115 }
116 .reacg-cover.reacg-dynamic.dashicons.dashicons-admin-page:after {
117 content: "\f105";
118 }
119
120 .reacg-cover.reacg-dynamic.dashicons.dashicons-archive:after {
121 content: "\f480";
122 }
123 .reacg-cover.reacg-dynamic.dashicons.dashicons-admin-post:after,
124 .reacg-cover.reacg-dynamic.dashicons.dashicons-admin-page:after,
125 .reacg-cover.reacg-dynamic.dashicons.dashicons-archive:after {
126 left: 30%;
127 top: 40%;
128 font-size: 35px;
129 transform: translate(-30%, -40%);
130 color: #9b9b9b;
131 }
132 .reacg-cover.reacg-dynamic.dashicons.dashicons-admin-post:before,
133 .reacg-cover.reacg-dynamic.dashicons.dashicons-archive:before,
134 .reacg-cover.reacg-dynamic.dashicons.dashicons-admin-page:before {
135 transform: translate(-35%, -40%);
136 }
137 .reacg-cover.dashicons:before,
138 .reacg-cover.reacg-dynamic.dashicons:after {
139 font-size: 45px;
140 width: 40px;
141 color: #cacccb;
142 position: absolute;
143 left: 50%;
144 top: 50%;
145 transform: translate(-50%, -50%);
146 }
147
148 .reacg-hover-buttons {
149 display: flex;
150 justify-content: center;
151 align-items: center;
152 position: absolute;
153 width: 100%;
154 height: 100%;
155 }
156
157 .reacg-hover-buttons span {
158 color: #cacccb;
159 cursor: pointer !important;
160 font-size: 25px;
161 opacity: 1;
162 margin-right: 5px;
163 }
164
165 .reacg-hover-buttons span[disabled] {
166 cursor: default !important;
167 opacity: 0.6;
168 }
169
170 .reacg_item_image:hover .reacg-cover {
171 display: none;
172 }
173
174 .reacg_item_image:hover .reacg-overlay {
175 display: block;
176 }
177
178 .reacg-already-added {
179 opacity: 0.5;
180 }
181
182
183 .column-reacg_shortcode {
184 width: 140px;
185 }
186
187 .column-reacg_thumbnail {
188 width: 90px;
189 }
190
191 .column-reacg_images_count {
192 width: 120px;
193 }
194
195 @media screen and (max-width: 782px) {
196 .column-reacg_thumbnail,
197 .column-reacg_thumbnail:before {
198 display: none !important;
199 }
200 }
201
202 .reacg_thumbnail.column-reacg_thumbnail>div {
203 background-repeat: no-repeat;
204 background-position: center;
205 width: 80px;
206 height: 60px;
207 position: relative;
208 cursor: move;
209 background-size: cover;
210 border-radius: 6px;
211 border: 1px solid #eceaf8;
212 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
213 filter: drop-shadow(0 2px 3px rgba(26, 45, 89, 0.18));
214 }
215
216 .reacg-invisible {
217 visibility: hidden;
218 }
219
220 /* Editor in the custom post type edit screen is not used, but added during post registration and hiding with CSS
221 to avoid a bug connected with preview.
222 */
223 .post-type-reacg #postdivrich {
224 display: none;
225 }
226
227 /* Remove all notices except plugin's.*/
228 .notice:not(.reacg-keep-notice):not(#message),
229 .updated:not(.reacg-keep-notice):not(#message) {
230 display: none !important;
231 }
232 .error {
233 display: none;
234 }
235
236 .reacg_shortcode code {
237 text-align: center;
238 padding: 6px 0;
239 display: block;
240 max-width: 350px;
241 border-radius: 6px;
242 border: 1px solid #eceaf8;
243 background: #f6f6fb !important;
244 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
245 filter: drop-shadow(0 2px 3px rgba(26, 45, 89, 0.18));
246 }
247 #gallery-help ul li {
248 list-style-type: disc;
249 list-style-position: inside;
250 list-style-image: none;
251 font-size: 14px;
252 }
253 #gallery-help ul li::marker {
254 color: green;
255 }
256 #gallery-help ul li a,
257 #gallery-help ul li a:hover,
258 #gallery-help ul li a:active,
259 #gallery-help ul li a:focus {
260 cursor: pointer;
261 color: inherit;
262 text-decoration: none;
263 box-shadow: none;
264 outline: none;
265 }
266
267 #gallery-custom-css textarea {
268 width: 100%;
269 }
270
271 .reacg-ai-button {
272 background: #FFC54D;
273 border: #FFC54D;
274 border-radius: 6px;
275 padding: 4px 6px 1px;
276 margin: 2px;
277 cursor: pointer;
278 svg {
279 width: 18px;
280 height: 18px;
281 }
282 }
283 .reacg-float-none {
284 float: none !important;
285 }
286
287 .reacg-required-input {
288 border-color: #b32d2e !important;
289 box-shadow: none !important;
290 }
291
292 .reacg-modal {
293 position: fixed;
294 top: 0;
295 left: 0;
296 width: 100%;
297 height: 100%;
298 background-color: rgba(0, 0, 0, 0.5);
299 display: none;
300 z-index: 10000000;
301 -webkit-box-pack: center;
302 justify-content: center;
303 -webkit-box-align: center;
304 align-items: center;
305
306 .reacg-modal-wrapper {
307 background-color: #FFF;
308 border-radius: 6px;
309 position: relative;
310 max-height: calc(100% - 64px);
311 width: 600px;
312 overflow-y: auto;
313 }
314
315 .reacg-modal-close {
316 position: absolute;
317 right: 0;
318 padding: 15px;
319 top: 0;
320 cursor: pointer;
321 width: 24px;
322 height: 24px;
323 }
324
325 .reacg-modal-content {
326 display: flex;
327 flex-direction: column;
328 justify-content: center;
329 align-items: start;
330
331 h1,
332 h3 {
333 margin: 0;
334 }
335
336 label {
337 cursor: pointer;
338 display: block;
339 font-size: 16px;
340 font-weight: bold;
341 margin-bottom: 7px;
342 }
343 label span {
344 font-weight: normal;
345 }
346 input[type=radio] {
347 margin-top: 0;
348 }
349
350 p {
351 margin: 0;
352 font-size: 14px;
353 }
354
355 textarea {
356 width: 100%;
357 resize: none;
358 }
359
360 div {
361 width: 100%;
362 }
363 input[type="text"],
364 input[type="url"] {
365 width: 100%;
366 }
367
368 .reacg-modal-buttons-wrapper {
369 display: flex;
370 justify-content: end;
371
372 .reacg-modal-button-generate {
373 margin-right: 10px;
374 }
375
376 .reacg-modal-button-generate svg {
377 width: 18px;
378 height: 18px;
379 margin: -4px 5px 0 0;
380 vertical-align: middle;
381 }
382 }
383
384 .reacg-modal-note svg {
385 width: 18px;
386 height: 18px;
387 fill: #FFC54D;
388 margin-right: 5px;
389 margin-bottom: -4px;
390 }
391
392 .reacg-modal-error-note {
393 color: #B32D2E;
394 }
395 }
396
397 .reacg-modal__header {
398 position: sticky;
399 top: 0;
400 z-index: 2;
401 background: #FFF;
402 padding: 24px 30px 20px 30px;
403 display: flex;
404 align-items: center;
405 justify-content: space-between;
406 border-bottom: 1px solid #E2E4E7;
407 box-sizing: border-box;
408 }
409
410 .reacg-modal__body {
411 padding: 24px 30px;
412 box-sizing: border-box;
413 }
414
415 .reacg-modal__layout {
416 display: grid;
417 grid-template-columns: minmax(280px, 38%) minmax(420px, 62%);
418 gap: 24px;
419 }
420
421 .reacg-modal__layout-content {
422 display: flex;
423 flex-direction: column;
424 gap: 16px;
425 label {
426 display: inline-flex;
427 }
428 .reacg-ai-button {
429 margin: 0 0 6px 8px;
430 vertical-align: middle;
431 }
432 .spinner.reacg-float-none {
433 margin-left: 6px;
434 margin-top: -6px;
435 vertical-align: middle;
436 }
437 }
438
439 .reacg-modal__footer {
440 position: sticky;
441 bottom: 0;
442 z-index: 2;
443 background: #FFF;
444 padding: 20px 30px 24px 30px;
445 border-top: 1px solid #E2E4E7;
446 box-sizing: border-box;
447 }
448 }
449
450 .reacg-modal.reacg-attachment-modal {
451 .reacg-modal-wrapper {
452 width: min(1100px, calc(100% - 64px));
453 }
454 .reacg-attachment-modal__preview img,
455 .reacg-attachment-modal__preview video {
456 display: block;
457 max-width: 100%;
458 max-height: 360px;
459 object-fit: contain;
460 background: #F6F7F7;
461 }
462 .reacg-attachment-modal__details p {
463 margin: 0 0 8px 0;
464 }
465 }
466
467 @media (max-width: 900px) {
468 .reacg-modal {
469 .reacg-modal-wrapper {
470 width: calc(100% - 24px);
471 max-height: calc(100% - 24px);
472 }
473 .reacg-modal__layout {
474 grid-template-columns: 1fr;
475 }
476 }
477 }
478
479 .reacg-tooltip {
480 position: absolute;
481 z-index: 10000000;
482 max-width: 300px;
483 margin: 0px 0px 0px -10px;
484 overflow-wrap: break-word;
485 font-weight: 500;
486 padding: 16px;
487 overflow: visible;
488 background-color: #5A558C;
489 font-size: 0.875rem;
490 line-height: 1.43;
491 letter-spacing: 0.01071em;
492 width: 272px;
493 color: rgb(255, 255, 255);
494 border-radius: 12px;
495 font-family: lexend;
496 box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
497
498 .reacg-tooltip-wrapper {
499 width: 100%;
500 display: flex;
501 justify-content: space-between;
502 gap: 8px;
503 align-items: center;
504 }
505 .reacg-tooltip-icon-wrapper {
506 display: flex;
507 align-items: center;
508 }
509 .reacg-tooltip-arrow[data-popper-placement*="left"] {
510 right: 0;
511 width: 15px;
512 height: 24px;
513 margin-right: -12px;
514 position: absolute;
515 top: calc(50% - 12px);
516 overflow: hidden;
517 box-sizing: border-box;
518 color: #5A558C;
519 }
520 .reacg-tooltip-arrow[data-popper-placement*="left"]::before {
521 content: "";
522 margin: auto;
523 display: block;
524 width: 100%;
525 height: 100%;
526 background-color: #5A558C;
527 transform: rotate(45deg);
528 transform-origin: 0 0;
529 }
530 }
531
532 .reacg_help_icon {
533 position: fixed;
534 bottom: 20px;
535 right: 20px;
536 z-index: 1301;
537 border-radius: 50%;
538 width: 60px;
539 height: 60px;
540 background-color: var(--reacg-primary-color, #155C92);
541 cursor: pointer;
542 box-shadow: 0 0 10px 3px #aaaaaa;
543 transition: transform 0.3s ease;
544 padding: 16px;
545 box-sizing: border-box;
546 &:hover {
547 transform: scale(1.03);
548 }
549 svg {
550 width: 28px;
551 height: 28px;
552 }
553 }
554
555 #gallery-license {
556 .reacg-license-key {
557 width: 100%;
558 margin-bottom: 5px;
559 }
560 .spinner {
561 float: none;
562 margin-top: 5px;
563 }
564 .reacg-activate-action {
565 text-align: right;
566 }
567 .reacg-error {
568 color: red;
569 }
570 }
571
572 .button.reacg-primary-button {
573 background: rgb(147 177 77);
574 }
575 .button.reacg-primary-button:hover,
576 .button.reacg-primary-button:active,
577 .button.reacg-primary-button:focus {
578 background: rgb(135 162 71);
579 }
580 .button.reacg-primary-button,
581 .button.reacg-primary-button:hover,
582 .button.reacg-primary-button:active,
583 .button.reacg-primary-button:focus {
584 color: white;
585 border: none;
586 outline: none !important;
587 box-shadow: none !important;
588 }
589 .wp-core-ui {
590 .button,
591 .button.button-primary,
592 .button.button-secondary {
593 border-radius: 6px;
594 }
595 }
596
597 #gallery-custom-css h2.hndle {
598 justify-content: normal;
599 }
600 label[for=gallery-custom-css-hide] svg {
601 display: none;
602 }
603
604 #gallery-preview .reacg-gallery-wrapper {
605 margin-top: 12px;
606 }
607
608 .reacg-modal.reacg-ai-generate-modal {
609 .reacg-ai-generate-modal__fields {
610 border-top: 1px solid #E2E4E7;
611 border-bottom: 1px solid #E2E4E7;
612 padding: 14px 0;
613 display: grid;
614 gap: 10px;
615 }
616
617 .reacg-ai-generate-modal__fields label {
618 display: grid;
619 grid-template-columns: 24px minmax(120px, 140px) 1fr;
620 gap: 10px;
621 align-items: center;
622 margin: 0;
623 }
624
625 .reacg-ai-generate-modal__fields input[type="checkbox"] {
626 margin: 0;
627 }
628
629 .reacg-ai-generate-modal__field-name {
630 font-weight: 600;
631 }
632
633 .reacg-ai-generate-modal__overwrite {
634 display: grid;
635 grid-template-columns: 1fr 1fr;
636 gap: 10px;
637 }
638
639 .reacg-ai-generate-modal__overwrite label {
640 display: inline-flex;
641 align-items: center;
642 gap: 8px;
643 font-size: 16px;
644 }
645
646 .reacg-ai-generate-modal__progress {
647 margin: 0 12px 0 auto;
648 font-size: 13px;
649 color: #50575E;
650 white-space: nowrap;
651 align-content: center;
652 }
653
654 .reacg-ai-generate-modal__notice--success {
655 color: #1d6f42;
656 background-color: #ebf9f0;
657 border-radius: 6px;
658 padding: 8px 10px;
659 font-size: 0.85rem;
660 }
661
662 .reacg-ai-generate-modal__notice--error {
663 color: #c7254e;
664 background-color: #f9f2f4;
665 border-radius: 6px;
666 padding: 8px 10px;
667 font-size: 0.85rem;
668 }
669 }