PluginProbe
WANotifier for Forms and Actions / 2.7.2
WANotifier for Forms and Actions v2.7.2
3.1.0 3.0.4 2.7.10 2.7.11 2.7.12 2.7.13 2.7.2 2.7.3 2.7.4 2.7.5 2.7.6 2.7.7 2.7.8 2.7.9 3.0.0 3.0.1 3.0.2 3.0.3 trunk 0.1.0 0.1.1 1.0.0 1.0.1 1.0.2 1.0.3 All 66 releases
notifier / assets / css / admin.css

admin.css in WANotifier for Forms and Actions 2.7.2, at assets/css/admin.css

1,045 lines 37.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .select2-container { box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle; }
2 .select2-container .select2-selection--single { box-sizing: border-box; cursor: pointer; display: block; height: 32px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; }
3 .select2-container .select2-selection--single .select2-selection__rendered { display: block; padding-left: 8px; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4 .select2-container .select2-selection--single .select2-selection__clear { background-color: transparent; border: none; font-size: 1em; }
5 .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px; }
6 .select2-container .select2-selection--multiple { box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; }
7 .select2-container .select2-selection--multiple .select2-selection__rendered { display: inline; list-style: none; padding: 0; }
8 .select2-container .select2-selection--multiple .select2-selection__clear { background-color: transparent; border: none; font-size: 1em; }
9 .select2-container .select2-search--inline .select2-search__field { box-sizing: border-box; border: none; font-size: 100%; padding: 0; max-width: 100%; resize: none; height: 18px; vertical-align: top; font-family: sans-serif; overflow: hidden; word-break: keep-all; }
10 .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; }
11 .select2-dropdown { background-color: white; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051; }
12 .select2-results { display: block; }
13 .select2-results__options { list-style: none; margin: 0; padding: 0; }
14 .select2-results__option { padding: 8px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; }
15 .select2-results__option--selectable { cursor: pointer; }
16 .select2-container--open .select2-dropdown { left: 0; }
17 .select2-container--open .select2-dropdown--above { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
18 .select2-container--open .select2-dropdown--below { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; }
19 .select2-search--dropdown { display: block; padding: 4px; }
20 .select2-search--dropdown .select2-search__field { padding: 4px; width: 100%; box-sizing: border-box; }
21 .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; }
22 .select2-search--dropdown.select2-search--hide { display: none; }
23 .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 99; background-color: #fff; filter: alpha(opacity=0); }
24 .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; }
25 .select2-container--default .select2-selection--single { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; }
26 .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; }
27 .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; height: 26px; margin-right: 20px; padding-right: 0; }
28 .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; }
29 .select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; }
30 .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; }
31 .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; }
32 .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow { left: 1px; right: auto; }
33 .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #eee; cursor: default; }
34 .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { display: none; }
35 .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; }
36 .select2-container--default .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; padding: 8px 8px 0 8px; position: relative; }
37 .select2-container--default .select2-selection--multiple.select2-selection--clearable { padding-right: 25px; }
38 .select2-container--default .select2-selection--multiple .select2-selection__clear { cursor: pointer; font-weight: bold; height: 20px; margin-right: 10px; margin-top: 5px; position: absolute; right: 0; padding: 1px; }
39 .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; display: inline-block; margin-right: 8px; margin-bottom: 8px; padding: 0; padding-left: 20px; position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
40 .select2-container--default .select2-selection--multiple .select2-selection__choice__display { cursor: default; padding-left: 2px; padding-right: 5px; }
41 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { background-color: transparent; border: none; border-right: 1px solid #aaa; border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: #999; cursor: pointer; font-size: 1em; font-weight: bold; padding: 0 4px; position: absolute; left: 0; top: 0; }
42
43 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
44 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus { background-color: #f1f1f1; color: #333; outline: none; }
45 .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; }
46 .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display { padding-left: 5px; padding-right: 2px; }
47 .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { border-left: 1px solid #aaa; border-right: none; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
48 .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear { float: left; margin-left: 10px; margin-right: auto; }
49 .select2-container--default.select2-container--focus .select2-selection--multiple { border: solid black 1px; outline: 0; }
50 .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #eee; cursor: default; }
51 .select2-container--default.select2-container--disabled .select2-selection__choice__remove { display: none; }
52
53 .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
54 .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { border-top-left-radius: 0; border-top-right-radius: 0; }
55
56 .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
57 .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
58 .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; }
59 .select2-container--default .select2-search--inline .select2-search__field { background: transparent; border: none; outline: 0; box-shadow: none; -webkit-appearance: textfield; line-height: normal; }
60 .select2-container--default .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; }
61 .select2-container--default .select2-results__option .select2-results__option { padding-left: 16px; }
62 .select2-container--default .select2-results__option .select2-results__option .select2-results__group { padding-left: 0; }
63 .select2-container--default .select2-results__option .select2-results__option .select2-results__option { margin-left: -1em; padding-left: 2em; }
64 .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -2em; padding-left: 3em; }
65 .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -3em; padding-left: 4em; }
66 .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -4em; padding-left: 5em; }
67 .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -5em; padding-left: 6em; }
68 .select2-container--default .select2-results__option--group { padding: 0; }
69 .select2-container--default .select2-results__option--disabled { color: #999; }
70 .select2-container--default .select2-results__option--selected { background-color: rgb(34 113 177 / 20%); }
71 .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #2271b1; color: white; }
72 .select2-container--default .select2-results__group { cursor: default; display: block; padding: 6px 8px; background: #eee; }
73 .select2-container--classic .select2-selection--single { background-color: #f7f7f7; border: 1px solid #aaa; border-radius: 4px; outline: 0; background-image: linear-gradient(to bottom, #fff 50%, #eee 100%); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
74 .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; }
75 .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; }
76 .select2-container--classic .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; height: 26px; margin-right: 20px; }
77 .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999; }
78 .select2-container--classic .select2-selection--single .select2-selection__arrow { background-color: #ddd; border: none; border-left: 1px solid #aaa; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); }
79 .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; }
80 .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; }
81 .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { border: none; border-right: 1px solid #aaa; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; left: 1px; right: auto; }
82 .select2-container--classic.select2-container--open .select2-selection--single { border: 1px solid #5897fb; }
83 .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { background: transparent; border: none; }
84 .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; }
85 .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; background-image: linear-gradient(to bottom, #fff 0%, #eee 50%); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
86 .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-image: linear-gradient(to bottom, #eee 50%, #fff 100%); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); }
87 .select2-container--classic .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; outline: 0; padding-bottom: 5px; padding-right: 5px; }
88 .select2-container--classic .select2-selection--multiple:focus { border: 1px solid #5897fb; }
89 .select2-container--classic .select2-selection--multiple .select2-selection__clear { display: none; }
90 .select2-container--classic .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; display: inline-block; margin-left: 5px; margin-top: 5px; padding: 0; }
91 .select2-container--classic .select2-selection--multiple .select2-selection__choice__display { cursor: default; padding-left: 2px; padding-right: 5px; }
92 .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { background-color: transparent; border: none; border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: #888; cursor: pointer; font-size: 1em; font-weight: bold; padding: 0 4px; }
93 .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #555; outline: none; }
94 .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; }
95 .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display { padding-left: 5px; padding-right: 2px; }
96 .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
97 .select2-container--classic.select2-container--open .select2-selection--multiple { border: 1px solid #5897fb; }
98 .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; }
99 .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
100 .select2-container--classic .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: 0; }
101 .select2-container--classic .select2-search--inline .select2-search__field { outline: 0; box-shadow: none; }
102 .select2-container--classic .select2-dropdown { background-color: #fff; border: 1px solid transparent; }
103 .select2-container--classic .select2-dropdown--above { border-bottom: none; }
104 .select2-container--classic .select2-dropdown--below { border-top: none; }
105 .select2-container--classic .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; }
106 .select2-container--classic .select2-results__option--group { padding: 0; }
107 .select2-container--classic .select2-results__option--disabled { color: grey; }
108 .select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable { background-color: #3875d7; color: #fff; }
109 .select2-container--classic .select2-results__group { cursor: default; display: block; padding: 6px; }
110 .select2-container--classic.select2-container--open .select2-dropdown { border-color: #5897fb; }
111
112 /**
113 * Breakpoints
114 */
115 /**
116 * Colours
117 */
118 .hide {
119 display: none !important;
120 }
121
122 .small {
123 font-size: 85%;
124 }
125
126 .d-block {
127 display: block !important;
128 }
129
130 .d-flex {
131 display: flex !important;
132 flex-wrap: wrap;
133 }
134
135 .justify-content-center {
136 justify-content: center;
137 }
138
139 .justify-content-end {
140 justify-content: flex-end;
141 }
142
143 .justify-content-between {
144 justify-content: space-between;
145 }
146
147 .align-content-center {
148 align-content: center;
149 }
150
151 .align-items-center {
152 align-items: center;
153 }
154
155 .col {
156 flex: 1 0 0%;
157 box-sizing: border-box;
158 }
159
160 .w-25 {
161 flex: 0 0 auto;
162 width: 25%;
163 }
164
165 .w-30 {
166 flex: 0 0 auto;
167 width: 30%;
168 }
169
170 .w-33 {
171 flex: 0 0 auto;
172 width: 33.33333333%;
173 }
174
175 .w-40 {
176 flex: 0 0 auto;
177 width: 40%;
178 }
179
180 .w-50 {
181 flex: 0 0 auto;
182 width: 50%;
183 }
184
185 .w-60 {
186 flex: 0 0 auto;
187 width: 60%;
188 }
189
190 .w-70 {
191 flex: 0 0 auto;
192 width: 70%;
193 }
194
195 .w-75 {
196 flex: 0 0 auto;
197 width: 75%;
198 }
199
200 .w-80 {
201 flex: 0 0 auto;
202 width: 80%;
203 }
204
205 .w-100 {
206 flex: 1 0 100%;
207 }
208
209 .w-auto {
210 width: auto !important;
211 }
212
213 .rounded {
214 border-radius: 8px;
215 }
216
217 .bg-white {
218 background-color: #fff;
219 }
220
221 .p-20 {
222 padding: 20px;
223 }
224
225 .text-truncate {
226 display: block;
227 white-space: nowrap;
228 overflow: hidden;
229 text-overflow: ellipsis;
230 }
231
232 .text-left {
233 text-align: left;
234 }
235
236 .text-right {
237 text-align: right;
238 }
239
240 .text-uppercase {
241 text-transform: uppercase;
242 }
243
244 .text-muted {
245 color: #777;
246 }
247
248 .ms-auto {
249 margin-left: auto;
250 }
251
252 .mt-0 {
253 margin-top: 0;
254 }
255
256 .mb-0 {
257 margin-bottom: 0;
258 }
259
260 .loader {
261 height: 100px;
262 background-size: 50px 50px;
263 background-repeat: no-repeat;
264 background-position: center;
265 background-color: #f7f7f7;
266 background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Cpath fill='%23000' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E");
267 }
268
269 /* Global */
270 #wpcontent {
271 padding-left: 0 !important;
272 }
273
274 #screen-meta {
275 margin: 0 -20px;
276 }
277 @media screen and (max-width: 767px) {
278 #screen-meta {
279 margin: 0 0 0 -12px;
280 border-left: 0;
281 border-right: 0;
282 }
283 }
284
285 #wpbody {
286 padding-left: 20px;
287 }
288 @media screen and (max-width: 767px) {
289 #wpbody {
290 padding-top: 0;
291 padding-left: 12px;
292 }
293 }
294
295 .wrap.notifier {
296 margin-top: 20px;
297 }
298
299 /* Meta Fields */
300 .meta-fields .form-field {
301 position: relative;
302 }
303 .meta-fields .form-field label.form-label,
304 .meta-fields .form-field legend {
305 font-size: 14px;
306 font-weight: 500;
307 display: block;
308 margin-bottom: 5px;
309 }
310 .meta-fields .form-field label .limit-text {
311 float: right;
312 color: #999;
313 }
314 .meta-fields .form-field input[type=text],
315 .meta-fields .form-field input[type=password],
316 .meta-fields .form-field textarea,
317 .meta-fields .form-field select {
318 width: 100%;
319 max-width: 100%;
320 }
321 @media screen and (max-width: 767px) {
322 .meta-fields .form-field input[type=text],
323 .meta-fields .form-field input[type=password],
324 .meta-fields .form-field textarea,
325 .meta-fields .form-field select {
326 width: 100%;
327 }
328 }
329 .meta-fields .form-field input[disabled=disabled],
330 .meta-fields .form-field textarea[disabled=disabled],
331 .meta-fields .form-field select[disabled=disabled] {
332 background-color: #f6f7f7;
333 cursor: not-allowed;
334 }
335 .meta-fields .form-field *:disabled {
336 background-color: #f6f7f7;
337 }
338 .meta-fields .form-field .radio-buttons {
339 margin: 0;
340 }
341 .meta-fields .form-field .radio-buttons li {
342 display: inline-block;
343 margin-right: 20px;
344 }
345 .meta-fields .form-field .radio-buttons li label {
346 display: inline-block;
347 width: auto;
348 }
349 .meta-fields .form-field .fields-repeater {
350 width: 100%;
351 border-collapse: collapse;
352 }
353 .meta-fields .form-field .fields-repeater th {
354 text-align: left;
355 font-size: 13px;
356 font-weight: normal;
357 border: 1px solid #a8a6a6;
358 padding: 10px;
359 background-color: #f7f7f7;
360 }
361 .meta-fields .form-field .fields-repeater td {
362 width: 50%;
363 border: 1px solid #a8a6a6;
364 padding: 10px;
365 vertical-align: top;
366 }
367 .meta-fields .form-field .fields-repeater td input,
368 .meta-fields .form-field .fields-repeater td select,
369 .meta-fields .form-field .fields-repeater td textarea {
370 width: 100%;
371 }
372 .meta-fields .form-field .fields-repeater td.delete-repeater-field {
373 min-width: 20px;
374 text-align: center;
375 }
376 .meta-fields .form-field .fields-repeater td.delete-repeater-field span {
377 margin-top: 5px;
378 cursor: pointer;
379 }
380 .meta-fields fieldset.form-field {
381 font-size: 13px;
382 line-height: 1.5;
383 margin: 1em 0;
384 }
385 .meta-fields h3 {
386 margin-bottom: 5px;
387 font-size: 14px;
388 }
389 .meta-fields h4 {
390 margin-bottom: 0;
391 }
392 .meta-fields hr {
393 margin: 20px auto;
394 }
395 .meta-fields .optional-text {
396 color: #999;
397 font-weight: normal;
398 }
399 .meta-fields .description {
400 font-size: 12px;
401 margin-top: 5px;
402 display: inline-block;
403 color: #555;
404 }
405 @media screen and (max-width: 767px) {
406 .meta-fields .col {
407 flex: 0 0 100%;
408 }
409 }
410
411 .notifier-media-preview {
412 display: block;
413 }
414
415 .notifier-notice {
416 margin-top: 20px;
417 margin-left: 0;
418 }
419
420 table.wp-list-table {
421 border: 1px solid #eee;
422 box-shadow: none;
423 border-radius: 8px;
424 }
425 table.wp-list-table thead td,
426 table.wp-list-table thead th {
427 padding-top: 5px !important;
428 padding-bottom: 5px !important;
429 border-bottom: 1px solid #eee;
430 }
431 table.wp-list-table tfoot td,
432 table.wp-list-table tfoot th {
433 padding-top: 5px !important;
434 padding-bottom: 5px !important;
435 border-top: 1px solid #eee;
436 }
437
438 .notifier-toggle-switch input[type=checkbox] {
439 position: relative;
440 -webkit-appearance: none;
441 -moz-appearance: none;
442 appearance: none;
443 width: 32px;
444 height: 16px;
445 background: #ccc;
446 border-radius: 40px;
447 box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
448 cursor: pointer;
449 transition: 0.2s;
450 border: none;
451 outline: none;
452 }
453 .notifier-toggle-switch input:checked[type=checkbox] {
454 -webkit-appearance: none;
455 -moz-appearance: none;
456 appearance: none;
457 background: #00c417;
458 }
459 .notifier-toggle-switch input[type=checkbox]::before {
460 content: none;
461 }
462 .notifier-toggle-switch input[type=checkbox]::after {
463 position: absolute;
464 content: "";
465 width: 16px;
466 height: 16px;
467 top: 0;
468 left: 0;
469 background: #fff;
470 border-radius: 50%;
471 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
472 transform: scale(1.1);
473 transition: 0.2s;
474 }
475 .notifier-toggle-switch input:checked[type=checkbox]::after {
476 left: 50%;
477 }
478
479 .select2-results__option {
480 margin-bottom: 0;
481 }
482
483 @media screen and (max-width: 767px) {
484 #notifier-admin-header {
485 padding-top: 46px;
486 }
487 }
488 #notifier-admin-header .header-logo {
489 display: inline-block;
490 margin-right: 15px;
491 width: 35px;
492 height: 35px;
493 align-self: center;
494 }
495 #notifier-admin-header .header-logo img {
496 width: 100%;
497 height: 100%;
498 }
499 @media screen and (max-width: 767px) {
500 #notifier-admin-header .header-logo {
501 margin-right: 10px;
502 }
503 }
504 #notifier-admin-header .notifier-admin-header-content {
505 background: #fff;
506 box-sizing: border-box;
507 width: 100%;
508 top: 32px;
509 z-index: 1001;
510 padding: 0 20px;
511 height: 70px;
512 display: flex;
513 align-content: center;
514 align-items: center;
515 justify-content: space-between;
516 border-bottom: 1px solid #eee;
517 }
518 @media screen and (max-width: 767px) {
519 #notifier-admin-header .notifier-admin-header-content {
520 padding: 0 12px;
521 }
522 }
523 #notifier-admin-header .notifier-admin-header-content.sticky {
524 box-shadow: 0 8px 8px 0 rgba(85, 93, 102, 0.3);
525 }
526 @media screen and (max-width: 767px) {
527 #notifier-admin-header .notifier-admin-header-content .header-page-title {
528 flex: 1;
529 }
530 }
531 @media screen and (max-width: 767px) {
532 #notifier-admin-header .notifier-admin-header-content .header-menu-items {
533 flex: 1;
534 justify-content: flex-end;
535 }
536 }
537 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul {
538 margin: 0;
539 }
540 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li {
541 display: inline-block;
542 margin-bottom: 0;
543 }
544 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li:last-child {
545 border-right: 0;
546 }
547 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li a {
548 text-decoration: none;
549 padding: 0 20px;
550 display: block;
551 }
552 @media screen and (max-width: 767px) {
553 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li a {
554 padding: 0 10px;
555 }
556 }
557 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li a.active {
558 color: #555;
559 }
560 #notifier-admin-header .notifier-admin-header-content .header-action-links .review-us-link {
561 color: #777;
562 }
563 #notifier-admin-header .notifier-admin-header-content .header-action-links .review-us-link a {
564 text-decoration: none;
565 color: #777;
566 }
567 @media screen and (max-width: 767px) {
568 #notifier-admin-header .notifier-admin-header-content .header-action-links > *:not(.review-us-link) {
569 display: none !important;
570 }
571 }
572 #notifier-admin-header .notifier-admin-header-content .header-action-links > * {
573 text-decoration: none;
574 padding: 0 10px;
575 display: inline-block;
576 }
577 #notifier-admin-header .notifier-admin-header-content .header-action-links > *.header-version {
578 color: #777;
579 }
580
581 .onboarding {
582 max-width: 600px;
583 margin: 0 auto;
584 background: #fff;
585 border-radius: 10px;
586 box-shadow: 0 8px 8px 0 rgba(85, 93, 102, 0.1);
587 }
588 .onboarding .onboarding-head {
589 padding: 20px;
590 border-bottom: 1px solid #eee;
591 }
592 .onboarding .onboarding-head h1,
593 .onboarding .onboarding-head h2,
594 .onboarding .onboarding-head h3 {
595 margin: 0;
596 }
597 .onboarding .onboarding-head p {
598 margin-bottom: 0;
599 }
600 .onboarding .onboarding-body {
601 padding: 20px;
602 }
603 .onboarding .onboarding-body h1,
604 .onboarding .onboarding-body h2,
605 .onboarding .onboarding-body h3,
606 .onboarding .onboarding-body p:first-child {
607 margin-top: 0;
608 }
609 .onboarding .onboarding-body p:last-child {
610 margin-bottom: 0;
611 }
612 .onboarding .onboarding-footer {
613 padding: 20px;
614 border-top: 1px solid #eee;
615 }
616
617 .dashboard-boxes {
618 display: flex;
619 flex-wrap: wrap;
620 margin-left: -10px;
621 margin-right: -10px;
622 }
623 .dashboard-boxes .col {
624 padding: 0 10px;
625 }
626 @media screen and (max-width: 992px) {
627 .dashboard-boxes > .col:not(.w-100) {
628 flex: 0 0 50% !important;
629 }
630 }
631 @media screen and (max-width: 767px) {
632 .dashboard-boxes > .col:not(.w-100) {
633 flex: 0 0 100% !important;
634 }
635 }
636 .dashboard-boxes .dashboard-box {
637 border-radius: 8px;
638 background-color: #fff;
639 display: flex;
640 flex-direction: column;
641 margin-bottom: 20px;
642 }
643 .dashboard-boxes .dashboard-box.dashboard-box-top {
644 height: auto;
645 }
646 @media screen and (max-width: 767px) {
647 .dashboard-boxes .dashboard-box.dashboard-box-top .w-25 {
648 flex: 0 0 100%;
649 }
650 }
651 .dashboard-boxes .dashboard-box .dashboard-box-head {
652 padding: 15px 20px;
653 border-bottom: 1px solid #eee;
654 }
655 @media screen and (max-width: 767px) {
656 .dashboard-boxes .dashboard-box .dashboard-box-head {
657 padding: 12px;
658 }
659 }
660 .dashboard-boxes .dashboard-box .dashboard-box-head h2,
661 .dashboard-boxes .dashboard-box .dashboard-box-head h3 {
662 margin: 0;
663 }
664 @media screen and (max-width: 767px) {
665 .dashboard-boxes .dashboard-box .dashboard-box-head h2,
666 .dashboard-boxes .dashboard-box .dashboard-box-head h3 {
667 font-size: 16px;
668 }
669 }
670 .dashboard-boxes .dashboard-box .dashboard-box-body {
671 padding: 15px 20px;
672 }
673 @media screen and (max-width: 767px) {
674 .dashboard-boxes .dashboard-box .dashboard-box-body {
675 padding: 12px;
676 }
677 }
678 .dashboard-boxes .dashboard-box .dashboard-box-body *:first-child {
679 margin-top: 0;
680 }
681 .dashboard-boxes .dashboard-box .dashboard-box-body h3 {
682 font-size: 1.2em;
683 }
684 .dashboard-boxes .dashboard-box .dashboard-box-body table {
685 width: 100%;
686 }
687 .dashboard-boxes .dashboard-box .dashboard-box-body table th,
688 .dashboard-boxes .dashboard-box .dashboard-box-body table td {
689 text-align: left;
690 vertical-align: top;
691 }
692 .dashboard-boxes .dashboard-box .dashboard-box-body table th:first-child,
693 .dashboard-boxes .dashboard-box .dashboard-box-body table td:first-child {
694 width: 20%;
695 }
696 .dashboard-boxes .dashboard-box .dashboard-box-body.how-to ul {
697 list-style: inherit;
698 padding-left: 20px;
699 margin-bottom: 10px;
700 }
701 .dashboard-boxes .dashboard-box .dashboard-box-body .dashicons-marker {
702 color: #ccc;
703 }
704 .dashboard-boxes .dashboard-box .dashboard-box-body .dashicons-yes-alt {
705 color: #01a401;
706 }
707 .dashboard-boxes .dashboard-box .dashboard-box-footer {
708 margin-top: auto;
709 padding: 15px 20px;
710 }
711 .dashboard-boxes .dashboard-box .dashboard-box-footer .dashboard-box-buttons-wrap {
712 text-align: right;
713 }
714 .dashboard-boxes .dashboard-box .dashboard-box-footer .dashboard-box-buttons-wrap .button {
715 margin-left: 10px;
716 }
717
718 #wa-notifier-api-key {
719 width: 100%;
720 margin-bottom: 10px;
721 }
722
723 .notifier-triggers-group-wrap {
724 margin-bottom: 30px;
725 }
726 .notifier-triggers-group-wrap .notifier-trigger-wrap {
727 margin-bottom: 20px;
728 }
729 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label {
730 font-size: 16px;
731 }
732 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label input[type=checkbox] {
733 -webkit-appearance: none;
734 -moz-appearance: none;
735 appearance: none;
736 margin: 0;
737 font: inherit;
738 color: #697a8d;
739 width: 20px;
740 height: 20px;
741 border: 2px solid #697a8d;
742 border-radius: 3px;
743 background-color: transparent;
744 outline: none !important;
745 margin-right: 10px;
746 }
747 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label input[type=checkbox]::before {
748 content: "";
749 }
750 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label input[type=checkbox]:checked {
751 color: white;
752 background: #0396a1;
753 border-color: #0396a1;
754 box-shadow: none;
755 }
756 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label input[type=checkbox]:checked::before {
757 content: "\f147";
758 font-family: "dashicons";
759 font-size: 20px;
760 display: block;
761 position: absolute;
762 height: 18px;
763 width: 18px;
764 margin-top: -1px;
765 margin-left: -3px;
766 }
767 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label .notifier-show-trigger-info {
768 border: 0;
769 background: none;
770 padding: 0;
771 cursor: pointer;
772 color: #aaa;
773 }
774 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-info {
775 background: #f7f7f7;
776 padding: 10px;
777 margin-top: 10px;
778 border: 1px solid #eee;
779 border-radius: 10px;
780 }
781
782 .notifier-overview-image {
783 float: right;
784 display: inline-block;
785 width: 100%;
786 height: auto;
787 max-width: 250px;
788 margin-left: 30px;
789 }
790 @media screen and (max-width: 767px) {
791 .notifier-overview-image {
792 float: none;
793 }
794 .notifier-overview-image img {
795 max-width: none;
796 }
797 }
798
799 .notifier-settings-form-profile .notifier-profile-fields-right {
800 margin-left: 50px;
801 margin-top: 100px;
802 }
803 @media screen and (max-width: 767px) {
804 .notifier-settings-form-profile .notifier-profile-fields-right {
805 display: none;
806 }
807 }
808
809 .notifier-fields-table {
810 width: 100%;
811 max-width: 700px;
812 }
813 .notifier-fields-table tr th {
814 vertical-align: top;
815 text-align: left;
816 padding: 20px 10px 20px 0;
817 width: 200px;
818 line-height: 1.3;
819 font-weight: 600;
820 }
821 @media screen and (max-width: 767px) {
822 .notifier-fields-table tr th {
823 display: block;
824 width: 100%;
825 padding: 10px 0 5px 0;
826 }
827 }
828 .notifier-fields-table tr th.section-title {
829 padding: 0;
830 }
831 .notifier-fields-table tr td {
832 margin-bottom: 9px;
833 padding: 15px 10px;
834 line-height: 1.3;
835 vertical-align: middle;
836 }
837 @media screen and (max-width: 767px) {
838 .notifier-fields-table tr td {
839 display: block;
840 width: 100%;
841 padding: 0;
842 }
843 }
844 .notifier-fields-table tr h3 {
845 margin-bottom: 0;
846 }
847 .notifier-fields-table tr .description {
848 font-weight: normal;
849 }
850 .notifier-fields-table input:not([type=button]):not([type=radio]):not([type=checkbox]),
851 .notifier-fields-table textarea,
852 .notifier-fields-table select {
853 width: 100%;
854 max-width: none;
855 }
856 .notifier-fields-table #notifier_ctc_enable {
857 max-width: 16px;
858 height: 16px;
859 }
860
861 .notifier-chat-btn-image-url {
862 display: none;
863 }
864
865 .disabled-field {
866 background: #fff !important;
867 opacity: 0.5;
868 pointer-events: none;
869 }
870
871 .post-type-wa_notifier_trigger #minor-publishing-actions #save-action,
872 .post-type-wa_notifier_trigger #misc-publishing-actions {
873 display: none;
874 }
875 .post-type-wa_notifier_trigger #minor-publishing-actions {
876 padding: 15px 10px;
877 text-align: left;
878 }
879 .post-type-wa_notifier_trigger .trigger-fields-wrap {
880 margin: 1em 0;
881 }
882 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags {
883 margin-bottom: 5px;
884 }
885 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap {
886 padding: 10px 10px 5px 10px;
887 border: 1px solid #8c8f94;
888 border-radius: 3px;
889 }
890 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags {
891 flex-wrap: nowrap;
892 margin-bottom: 15px;
893 padding-bottom: 10px;
894 border-bottom: 1px solid #ddd;
895 }
896 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags:last-child {
897 margin-bottom: 0;
898 border-bottom: 0;
899 }
900 @media screen and (max-width: 767px) {
901 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags {
902 flex-wrap: wrap;
903 }
904 }
905 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags legend.form-label {
906 font-size: 13px;
907 min-width: 120px;
908 max-width: 120px;
909 font-weight: 500;
910 margin-bottom: 5px;
911 margin-top: 1px;
912 }
913 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper {
914 flex-grow: 1;
915 max-height: 105px;
916 overflow: auto;
917 }
918 @media screen and (max-width: 767px) {
919 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper {
920 max-height: 150px;
921 }
922 }
923 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check {
924 display: inline-block;
925 margin-bottom: 5px;
926 width: 25%;
927 }
928 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check .form-check-label {
929 width: auto;
930 display: block;
931 white-space: nowrap;
932 overflow: hidden;
933 text-overflow: ellipsis;
934 }
935 @media screen and (max-width: 1440px) {
936 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check {
937 width: 33.33%;
938 }
939 }
940 @media screen and (max-width: 1024px) {
941 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check {
942 width: 50%;
943 }
944 }
945 @media screen and (max-width: 767px) {
946 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check {
947 width: 100%;
948 }
949 }
950
951 .notifier-click-to-chat-btn {
952 position: fixed;
953 bottom: 20px;
954 right: 20px;
955 cursor: pointer;
956 z-index: 99999999;
957 }
958 .notifier-click-to-chat-btn a {
959 text-decoration: none !important;
960 display: inline-block;
961 outline: none !important;
962 }
963 .notifier-click-to-chat-btn a:hover, .notifier-click-to-chat-btn a:focus {
964 text-decoration: none !important;
965 }
966 .notifier-click-to-chat-btn.notifier-click-to-chat-style-3 a {
967 display: flex;
968 justify-content: center;
969 align-items: center;
970 background-color: #e4e4e4;
971 color: #7f7d7d;
972 padding: 0 12px;
973 border-radius: 25px;
974 font-size: 13px;
975 line-height: 32px;
976 }
977 .notifier-click-to-chat-btn.notifier-click-to-chat-style-4 a {
978 display: flex;
979 padding: 0 2rem;
980 letter-spacing: 0.5px;
981 transition: 0.2s ease-out;
982 text-align: center;
983 justify-content: center;
984 align-items: center;
985 border-radius: 2px;
986 height: 36px;
987 line-height: 36px;
988 vertical-align: middle;
989 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
990 box-sizing: inherit;
991 background-color: #26a69a;
992 color: #fff;
993 }
994 .notifier-click-to-chat-btn.notifier-click-to-chat-style-custom img {
995 width: 100%;
996 height: auto;
997 max-width: 150px;
998 max-height: 150px;
999 -o-object-fit: cover;
1000 object-fit: cover;
1001 }
1002
1003 .notifier-tool-wrap {
1004 background: #fff;
1005 margin-bottom: 15px;
1006 display: flex;
1007 justify-content: space-between;
1008 align-items: center;
1009 padding: 20px;
1010 }
1011 .notifier-tool-wrap .notifier-tool-name {
1012 margin-top: 0px;
1013 margin-bottom: 10px;
1014 }
1015 .notifier-tool-wrap .notifier-tool-description {
1016 margin: 0px;
1017 }
1018
1019 .notifier-tool-activity-wrap {
1020 background: #ffffff;
1021 margin-bottom: 15px;
1022 padding: 20px;
1023 }
1024 .notifier-tool-activity-wrap .notifier-tool-inner-wrap {
1025 display: flex;
1026 justify-content: space-between;
1027 align-items: center;
1028 }
1029 .notifier-tool-activity-wrap .notifier-tool-inner-wrap .notifier-tool-name {
1030 margin-top: 0px;
1031 margin-bottom: 10px;
1032 }
1033 .notifier-tool-activity-wrap .notifier-tool-inner-wrap .notifier-tool-description {
1034 margin: 0px;
1035 }
1036 .notifier-tool-activity-wrap .activity-log-preview-wrap {
1037 background: #f7f7f7;
1038 padding: 10px;
1039 max-height: 150px;
1040 overflow: auto;
1041 border: 1px solid #ddd;
1042 border-radius: 8px;
1043 margin-top: 10px;
1044 }
1045