PluginProbe
Ultimate WP Mail / trunk
Ultimate WP Mail vtrunk
1.3.13 1.3.12 trunk 0.11 0.25 1.0.0 1.0.1 1.0.10 1.0.11 1.0.12 1.0.13 1.0.14 1.0.15 1.0.16 1.0.17 1.0.18 1.0.2 1.0.3 1.0.4 1.0.5 1.0.6 1.0.7 1.0.8 1.0.9 1.1.0 All 46 releases
ultimate-wp-mail / lib / simple-admin-pages / css / admin-settings.css

admin-settings.css in Ultimate WP Mail trunk, at lib/simple-admin-pages/css/admin-settings.css

681 lines 15.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .sap-hidden {
2 display: none;
3 }
4
5 /************************/
6 /***** OPTIONS PAGE *****/
7 /************************/
8
9 .wrap.sap-settings-page h1 {
10 width: 100%;
11 }
12
13 /* Side Menu */
14 .wrap.sap-settings-page h2.nav-tab-wrapper {
15 position: relative;
16 float: left;
17 border: none;
18 width: 180px;
19 box-shadow: -1px 1px 8px #ccc;
20 overflow: hidden;
21 padding-top: 0;
22 margin-top: 20px;
23 }
24 .wrap.sap-settings-page h2.nav-tab-wrapper a {
25 clear: both;
26 display: block;
27 position: relative;
28 float: left;
29 background-color: #e2e2e2;
30 border: none;
31 border-bottom: 1px solid #f1f1f1;
32 color: #555;
33 font-weight: bold;
34 padding-left: 20px;
35 width: calc(100% - 20px);
36 text-align: left;
37 margin: 0;
38 height: 34px;
39 line-height: 34px;
40 font-size: 13px;
41 }
42 .wrap.sap-settings-page h2.nav-tab-wrapper a:last-of-type {
43 border-bottom: none;
44 }
45 .wrap.sap-settings-page h2.nav-tab-wrapper a.nav-tab-active {
46 box-shadow: none;
47 background-color: #fff !important;
48 color: var(--main-color, #1b335f);
49 border-left: 4px solid var(--main-color-border, #1b335f);
50 }
51 .wrap.sap-settings-page h2.nav-tab-wrapper a:hover {
52 color: var(--main-color, #1b335f);
53 background-color: rgba(199,199,199, 0.5);
54 box-shadow: none;
55 border-left: 4px solid var(--main-color-border, #1b335f);
56 }
57 .wrap.sap-settings-page h2.nav-tab-wrapper a.nav-tab-active:hover {
58 color: var(--main-color, #1b335f);
59 background-color: #fff;
60 border-left: 4px solid var(--main-color-border, #1b335f);
61 }
62
63 /* Right side */
64 .wrap.sap-settings-page form {
65 display: block;
66 position: relative;
67 float: left;
68 width: calc(100% - 276px);
69 padding: 32px 48px;
70 z-index: 999;
71 background:#fff;
72 margin: 20px 0 0 !important;
73 min-height: 400px;
74 border: none;
75 }
76
77 .wrap.sap-settings-page form h2:first-of-type {
78 font-size: 18px;
79 color: var(--main-color, #1b335f);
80 margin: 0 0 32px !important;
81 display: inline-block;
82 }
83
84 .wrap.sap-settings-page form h2:nth-of-type(1n+2) {
85 position: relative;
86 float: left;
87 background: var(--main-color, #1b335f);
88 margin: 8px 0 0;
89 font-size: 15px;
90 font-weight: bold;
91 color: #fff;
92 padding: 12px 2%;
93 width: 96%;
94 text-transform: uppercase;
95 z-index: 2;
96 }
97 .wrap.sap-settings-page form .form-table {
98 width: 100%;
99 overflow-x: auto;
100 box-sizing: border-box;
101 margin: 0 auto 16px;
102 box-shadow: 0 1px 12px #ddd;
103 display: block;
104 padding: 11px 5%;
105 }
106 .wrap.sap-settings-page form .form-table tr {
107 width: 20%;
108 }
109 .wrap.sap-settings-page form .form-table td {
110 width: 80%;
111 }
112
113 .wrap.sap-settings-page form p.description {
114 display: none;
115 }
116 .wrap.sap-settings-page form .form-table p.description {
117 display: block;
118 }
119 .wrap.sap-settings-page form .form-table p.description.disabled {
120 color: #b5b5b5;
121 }
122
123
124 .ulb-premium-options-table-overlay + table th,
125 .ulb-premium-options-table-overlay + table td {
126 color: #b5b5b5;
127 }
128
129
130
131 /************************
132 TOGGLE SWITCHES
133 ************************/
134 .sap-admin-hide-radios {
135 display: none;
136 }
137
138 /* The switch - the box around the slider */
139 .sap-admin-switch {
140 position: relative;
141 display: inline-block;
142 width: 40px;
143 height: 22px;
144 }
145
146 /* Hide default HTML checkbox */
147 .sap-admin-switch input {
148 display: none;
149 }
150
151 /* The slider */
152 .sap-admin-switch-slider {
153 position: absolute;
154 cursor: pointer;
155 top: 0;
156 left: 0;
157 right: 0;
158 bottom: 0;
159 background-color: #ccc;
160 -webkit-transition: .4s;
161 transition: .4s;
162 }
163
164 .sap-admin-switch-slider:before {
165 position: absolute;
166 content: "";
167 height: 14px;
168 width: 14px;
169 left: 4px;
170 bottom: 4px;
171 background-color: white;
172 -webkit-transition: .4s;
173 transition: .4s;
174 }
175
176 input:checked + .sap-admin-switch-slider {
177 background-color: var(--main-color, #1b335f);
178 }
179
180 input:focus + .sap-admin-switch-slider {
181 box-shadow: 0 0 1px var(--main-color, #1b335f);
182 }
183
184 input:checked + .sap-admin-switch-slider:before {
185 -webkit-transform: translateX(18px);
186 -ms-transform: translateX(18px);
187 transform: translateX(18px);
188 }
189
190 /* Rounded sliders */
191 .sap-admin-switch-slider.round {
192 border-radius: 34px;
193 }
194
195 .sap-admin-switch-slider.round:before {
196 border-radius: 50%;
197 }
198
199
200 /* RADIO BUTTON AND CHECKBOX */
201 .wrap.sap-settings-page form .form-table fieldset label {
202 line-height: 1.4em;
203 margin: .25em 0 .5em;
204 display: inline-block;
205 font-size: 14px;
206 }
207
208 .sap-admin-input-container input, .sap-admin-input-container input:disabled {
209 position: absolute;
210 opacity: 0;
211 }
212 .sap-admin-radio-button {
213 position: relative;
214 float: left;
215 height: 14px;
216 width: 14px;
217 top: 1px;
218 margin-right: 12px;
219 background-color: #fff;
220 border: 2px solid #aaa;
221 border-radius: 50%;
222 }
223 .sap-admin-input-container:hover input ~ .sap-admin-radio-button {
224 background-color: #E6FFFB;
225 border-color: var(--main-color-border, #1b335f);
226 }
227 .sap-admin-input-container input:checked ~ .sap-admin-radio-button {
228 border-color: var(--main-color-border, #1b335f);
229 background-color: #fff;
230 }
231 .sap-admin-radio-button:after {
232 content: "";
233 position: absolute;
234 display: none;
235 }
236 .sap-admin-input-container input:checked ~ .sap-admin-radio-button:after {
237 display: block;
238 }
239 .sap-admin-input-container .sap-admin-radio-button:after {
240 top: 3px;
241 left: 3px;
242 width: 8px;
243 height: 8px;
244 border-radius: 50%;
245 background: var(--main-color, #1b335f);
246 }
247
248 .sap-admin-checkbox {
249 position: relative;
250 float: left;
251 height: 14px;
252 width: 14px;
253 top: 1px;
254 margin-right: 12px;
255 background-color: #fff;
256 border: 2px solid #aaa;
257 }
258 .sap-admin-input-container:hover input ~ .sap-admin-checkbox {
259 background-color: #E6FFFB;
260 border-color: var(--main-color-border, #1b335f);
261 }
262 .sap-admin-input-container input:checked ~ .sap-admin-checkbox {
263 border-color: var(--main-color-border, #1b335f);
264 background-color: #fff;
265 }
266 .sap-admin-checkbox:after {
267 content: "";
268 position: absolute;
269 display: none;
270 }
271 .sap-admin-input-container input:checked ~ .sap-admin-checkbox:after {
272 display: block;
273 }
274 .sap-admin-input-container .sap-admin-checkbox:after {
275 left: 4px;
276 top: 1px;
277 width: 4px;
278 height: 8px;
279 border: solid var(--main-color-border, #1b335f);
280 border-width: 0 2px 2px 0;
281 -webkit-transform: rotate(45deg);
282 -ms-transform: rotate(45deg);
283 transform: rotate(45deg);
284 }
285
286 /* Textbox and Text Area and Select boxes */
287 .wrap.sap-settings-page form .form-table input[type=text],
288 .wrap.sap-settings-page form .form-table input[type=search],
289 .wrap.sap-settings-page form .form-table input[type=tel],
290 .wrap.sap-settings-page form .form-table input[type=url],
291 .wrap.sap-settings-page form .form-table input[type=week],
292 .wrap.sap-settings-page form .form-table input[type=password],
293 .wrap.sap-settings-page form .form-table input[type=color],
294 .wrap.sap-settings-page form .form-table input[type=email],
295 .wrap.sap-settings-page form .form-table input[type=number],
296 .wrap.sap-settings-page form .form-table textarea,
297 .wrap.sap-settings-page form .form-table select {
298 border: 2px solid #ccc;
299 border-radius: 5px;
300 box-shadow: none;
301 }
302 .wrap.sap-settings-page form .form-table select,
303 .wrap.sap-settings-page form .form-table textarea {
304 width: auto !important;
305 min-width: 50%;
306 max-width: 100% !important;
307 }
308 #sap-dining-block-length_count,
309 #sap-dining-block-length_unit {
310 min-width: 0;
311 }
312
313 .wrap.sap-settings-page form .form-table textarea {
314 min-width: 300px;
315 min-height: 200px;
316 }
317 .wrap.sap-settings-page form .form-table .wp-editor-wrap textarea {
318 border: none;
319 border-radius: 0;
320 min-width: 0;
321 max-width: 100%;
322 min-height: 0;
323 }
324
325
326 /*SMALL TEXT INPUTS*/
327 .sap-small-text-input {
328 border-radius: 2px !important;
329 width: 100px;
330 }
331
332
333 /*SETTINGS COLUMNS*/
334 .sap-admin-input-container {
335 position: relative;
336 float: left;
337 width: 100%;
338 }
339 .sap-setting-columns-2 .sap-admin-input-container {
340 width: 50%;
341 }
342 .sap-setting-columns-3 .sap-admin-input-container {
343 width: 33.33333%;
344 width: calc(100% / 3);
345 }
346 .sap-setting-columns-8 .sap-admin-input-container {
347 width: 12.5%;
348 }
349
350
351 /*COLOUR PICKERS*/
352 fieldset.sap-colorpicker {
353 position: relative;
354 }
355 .sap-colorpicker input.sap-spectrum {
356 position: absolute;
357 right: 0;
358 bottom: 0;
359 border: none !important;
360 margin: 0 !important;
361 width: calc(100% - 42px);
362 border-radius: 0;
363 background: transparent !important;
364 color: #888 !important;
365 padding: 0;
366 font-size: 12px;
367 }
368 .sap-colorpicker .sp-replacer {
369 padding: 0 !important;
370 margin-right: 8px !important;
371 border-radius: 2px;
372 }
373 .sap-colorpicker .sp-preview {
374 width: 32px !important;
375 height: 32px !important;
376 margin: 0 !important;
377 border: none !important
378 }
379 .sap-colorpicker .sp-dd {
380 display: none !important;
381 }
382
383
384 /**************************
385 OTHER OPTION PAGE STYLING
386 **************************/
387
388 /*LOCK PREMIUM CONTENT*/
389 .sap-premium-options-table {
390 position: relative;
391 min-height: 240px;
392 }
393 .sap-premium-options-table.Yes {
394 min-height: 0;
395 }
396 .sap-premium-options-table-overlay {
397 position: absolute;
398 top: 0;
399 left: 0;
400 width: 1000px;
401 height: 500px;
402 background: rgba(0,0,0,.45);
403 z-index: 2;
404 }
405 .section-disabled {
406 position: absolute;
407 margin-top: 16px;
408 width: 200px;
409 height: 200px;
410 padding: 16px;
411 background: #fff;
412 left: calc(50% - 116px);
413 }
414 .section-disabled img {
415 position: relative;
416 float: left;
417 width: 40px;
418 height: auto;
419 margin: 16px 80px 24px;
420 }
421 .section-disabled p {
422 margin: 16px 0;
423 text-align: center;
424 color: #888;
425 }
426 .section-disabled .sap-dashboard-get-premium-widget-button {
427 clear: both;
428 position: relative;
429 float: left;
430 width: calc(100% - 20px);
431 margin: 16px 8px;
432 border: 2px solid var(--main-color-border, #1b335f);
433 background-color: var(--main-color, #1b335f);
434 color: #fff;
435 padding: 6px 0;
436 font-size: 12px;
437 text-decoration: none;
438 text-align: center;
439 font-weight: bold;
440 border-radius: 2px;
441 transition: background-color .35s, border-color .35s;
442 }
443 .section-disabled .sap-dashboard-get-premium-widget-button:hover {
444 background-color: var(--main-color-hover, #5477b7);
445 border-color: var(--main-color-hover, #5477b7);;
446 color: #fff;
447 }
448
449
450 /*************
451 RESPONSIVE
452 *************/
453 @media screen and (max-width: 1099px) {
454 .wrap.sap-settings-page h2.nav-tab-wrapper {
455 clear: both;
456 width: 100%;
457 }
458 .wrap.sap-settings-page form {
459 clear: both;
460 width: calc(100% - 96px);
461 }
462 }
463 @media screen and (max-width: 782px) {
464 .wrap.sap-settings-page h2.nav-tab-wrapper {
465 margin: 0 0 20px 0;
466 }
467 .wrap.sap-settings-page form {
468 width: calc(100% - 96px);
469 }
470 .sap-admin-section-heading {
471 text-align: center;
472 }
473 .wrap.sap-settings-page form .form-table {
474 box-shadow: none;
475 }
476 .wrap.sap-settings-page form .form-table,
477 .wrap.sap-settings-page form .form-table tbody,
478 .wrap.sap-settings-page form .form-table tr,
479 .wrap.sap-settings-page form .form-table th,
480 .wrap.sap-settings-page form .form-table td {
481 clear: both;
482 float: left;
483 width: 100%;
484 }
485 .wrap.sap-settings-page form .form-table {
486 padding: 11px 0;
487 }
488 .wrap.sap-settings-page form .form-table th {
489 padding: 20px 5% 8px;
490 width: 90%;
491 height: auto;
492 margin: 0;
493 background-image: url(../images/options-asset-info.png);
494 background-position: 95% 20px;
495 background-size: 18px 18px;
496 background-repeat: no-repeat;
497 cursor: pointer;
498 }
499 .wrap.sap-settings-page form .form-table td {
500 padding-top: 4px;
501 }
502 .wrap.sap-settings-page form .form-table td fieldset {
503 position: relative;
504 }
505 .wrap.sap-settings-page form .form-table td label {
506 position: relative;
507 clear: both;
508 float: left;
509 width: 90%;
510 margin-left: 5% !important;
511 }
512 .wrap.sap-settings-page form .form-table td label.sap-admin-switch {
513 position: absolute;
514 width: 40px;
515 top: -35px;
516 right: 5%;
517 }
518 .wrap.sap-settings-page form .form-table td p {
519 display: none;
520 position: relative;
521 float: left;
522 width: 90%;
523 padding: 10px 5% 24px;
524 background: #f3f3f3;
525 border-bottom: 1px solid #ccc;
526 font-size: 13px;
527 }
528 .wrap.sap-settings-page form .form-table td input[type="button"] {
529 display: block;
530 margin: 10px auto 4px;
531 }
532 .sap-admin-input-container {
533 width: calc(100% - 16px);
534 padding-left: 16px;
535 }
536 }
537
538
539
540 /******************************************************************
541 NEW STYLING FOR ADD/DELETE AREAS LIKE CUSTOM FIELDS
542 ******************************************************************/
543 .sap-infinite-table table th {
544 padding: 0 10px !important;
545 }
546 .sap-new-admin-add-button {
547 position: relative;
548 float: left;
549 width: calc(100% - 4px);
550 border: 2px dotted #bbb;
551 text-align: center;
552 padding: 12px 0;
553 color: #999;
554 }
555 .sap-new-admin-add-button:hover {
556 background: #f5f5f5;
557 color: #888;
558 cursor: pointer;
559 }
560 .sap-infinite-table-row-delete,
561 .sap-custom-fields-add-nutrional-information {
562 cursor: pointer;
563 color: var(--main-color, #1b335f);
564 }
565 .sap-infinite-table-row-delete:hover,
566 .sap-custom-fields-add-nutrional-information:hover {
567 color: #4366A6;
568 }
569
570
571 /******************************************************************
572 EXPORT BUTTON
573 ******************************************************************/
574 .sap-export-button {
575 position: relative;
576 width: 150px;
577 padding: 0 !important;
578 }
579 .sap-export-button span {
580 position: absolute;
581 top: 4px;
582 left: 8px;
583 }
584 input[name="sap_export"] {
585 position: absolute;
586 top: 0;
587 left: 0;
588 width: 100%;
589 height: 100%;
590 box-sizing: border-box;
591 background: none;
592 border: none;
593 cursor: pointer;
594 color: #0071a1;
595 padding: 0 0 0 32px;
596 text-align: left;
597 }
598
599
600
601 /******************************************************************
602 CONTROLS AND ICONS SCREENS
603 ******************************************************************/
604
605 /*
606 Lightbox control element selection
607 */
608 .ulb-admin-one-third,
609 .ulb-admin-one-sixth {
610 float: left;
611 margin-bottom: 18px;
612 }
613 .ulb-admin-one-third {
614 width: 30%;
615 }
616 .ulb-admin-one-sixth {
617 width: auto;
618 }
619
620 .ulb-toolbar-control {
621 width: 40px;
622 float: left;
623 cursor: pointer;
624 }
625 .ewd-ulb-selected-control {
626 background: #333333;
627 color: #FFFFFF;
628 }
629
630 .ulb-add-button,
631 .ulb-remove-button {
632 width: 96px;
633 padding: 6px 0;
634 margin: 0 auto;
635 margin-bottom: 8px;
636 background: #111;
637 color: #fff;
638 border: 2px solid #111;
639 border-radius: 2px;
640 text-align: center;
641 cursor: pointer;
642 transition: background .3s, color .3s;
643 }
644 .ulb-add-button:hover,
645 .ulb-remove-button:hover {
646 background: transparent;
647 color: #111;
648 }
649
650 /*
651 Lightbox Icon Selection
652 */
653
654 .ewd-ulb-control-icons span {
655 font-size: 1.8em;
656 letter-spacing: 3px;
657 }
658
659 /*TOOLBAR SELECT ITEMS*/
660 .ulb-toolbar-controls {
661 background: #f4f4f4;
662 padding: 8px;
663 margin-right: 8px;
664 margin-left: 8px;
665 height: 60px;
666 }
667
668
669 /*************************/
670 /**** VIDEO TUTORIALS ****/
671 /*************************/
672 .sap-tutorial-toggle {
673 margin: -5px 0 0 16px !important
674 }
675 .sap-tutorial-div {
676 width: 100%;
677 margin-bottom: 32px;
678 }
679 .sap-tutorial-div iframe {
680 max-width: 100%;
681 }