PluginProbe
WANotifier for Forms and Actions / 2.2.0
WANotifier for Forms and Actions v2.2.0
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.2.0, at assets/css/admin.css

991 lines 36.2 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: 28px; -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: 6px; -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 0px 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; }
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: 1em; }
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: #ddd; }
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; }
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 .ms-auto {
245 margin-left: auto;
246 }
247
248 .mt-0 {
249 margin-top: 0;
250 }
251
252 .mb-0 {
253 margin-bottom: 0;
254 }
255
256 .loader {
257 height: 100px;
258 background-size: 50px 50px;
259 background-repeat: no-repeat;
260 background-position: center;
261 background-color: #f7f7f7;
262 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");
263 }
264
265 /* Global */
266 #wpcontent {
267 padding-left: 0 !important;
268 }
269
270 #screen-meta {
271 margin: 0 -20px;
272 }
273 @media screen and (max-width: 767px) {
274 #screen-meta {
275 margin: 0 0 0 -12px;
276 border-left: 0;
277 border-right: 0;
278 }
279 }
280
281 #wpbody {
282 padding-left: 20px;
283 }
284 @media screen and (max-width: 767px) {
285 #wpbody {
286 padding-top: 0;
287 padding-left: 12px;
288 }
289 }
290
291 .wrap.notifier {
292 margin-top: 20px;
293 }
294
295 /* Meta Fields */
296 .meta-fields .form-field {
297 position: relative;
298 }
299 .meta-fields .form-field label.form-label,
300 .meta-fields .form-field legend {
301 font-size: 14px;
302 font-weight: 500;
303 display: block;
304 margin-bottom: 5px;
305 }
306 .meta-fields .form-field label .limit-text {
307 float: right;
308 color: #999;
309 }
310 .meta-fields .form-field input[type=text],
311 .meta-fields .form-field input[type=password],
312 .meta-fields .form-field textarea,
313 .meta-fields .form-field select {
314 width: 100%;
315 max-width: 100%;
316 }
317 @media screen and (max-width: 767px) {
318 .meta-fields .form-field input[type=text],
319 .meta-fields .form-field input[type=password],
320 .meta-fields .form-field textarea,
321 .meta-fields .form-field select {
322 width: 100%;
323 }
324 }
325 .meta-fields .form-field input[disabled=disabled],
326 .meta-fields .form-field textarea[disabled=disabled],
327 .meta-fields .form-field select[disabled=disabled] {
328 background-color: #f6f7f7;
329 cursor: not-allowed;
330 }
331 .meta-fields .form-field *:disabled {
332 background-color: #f6f7f7;
333 }
334 .meta-fields .form-field .radio-buttons {
335 margin: 0;
336 }
337 .meta-fields .form-field .radio-buttons li {
338 display: inline-block;
339 margin-right: 20px;
340 }
341 .meta-fields .form-field .radio-buttons li label {
342 display: inline-block;
343 width: auto;
344 }
345 .meta-fields .form-field .fields-repeater {
346 width: 100%;
347 border-collapse: collapse;
348 }
349 .meta-fields .form-field .fields-repeater th {
350 text-align: left;
351 font-size: 13px;
352 font-weight: normal;
353 border: 1px solid #a8a6a6;
354 padding: 10px;
355 background-color: #f7f7f7;
356 }
357 .meta-fields .form-field .fields-repeater td {
358 width: 50%;
359 border: 1px solid #a8a6a6;
360 padding: 10px;
361 vertical-align: top;
362 }
363 .meta-fields .form-field .fields-repeater td input,
364 .meta-fields .form-field .fields-repeater td select,
365 .meta-fields .form-field .fields-repeater td textarea {
366 width: 100%;
367 }
368 .meta-fields .form-field .fields-repeater td.delete-repeater-field {
369 min-width: 20px;
370 text-align: center;
371 }
372 .meta-fields .form-field .fields-repeater td.delete-repeater-field span {
373 margin-top: 5px;
374 cursor: pointer;
375 }
376 .meta-fields fieldset.form-field {
377 font-size: 13px;
378 line-height: 1.5;
379 margin: 1em 0;
380 }
381 .meta-fields h3 {
382 margin-bottom: 5px;
383 font-size: 14px;
384 }
385 .meta-fields h4 {
386 margin-bottom: 0;
387 }
388 .meta-fields hr {
389 margin: 20px auto;
390 }
391 .meta-fields .optional-text {
392 color: #999;
393 font-weight: normal;
394 }
395 .meta-fields .description {
396 font-size: 12px;
397 margin-top: 5px;
398 display: inline-block;
399 color: #555;
400 }
401 @media screen and (max-width: 767px) {
402 .meta-fields .col {
403 flex: 0 0 100%;
404 }
405 }
406
407 .notifier-media-preview {
408 display: block;
409 }
410
411 .notifier-notice {
412 margin-top: 20px;
413 margin-left: 0;
414 }
415
416 table.wp-list-table {
417 border: 1px solid #eee;
418 box-shadow: none;
419 border-radius: 8px;
420 }
421 table.wp-list-table thead td,
422 table.wp-list-table thead th {
423 padding-top: 5px !important;
424 padding-bottom: 5px !important;
425 border-bottom: 1px solid #eee;
426 }
427 table.wp-list-table tfoot td,
428 table.wp-list-table tfoot th {
429 padding-top: 5px !important;
430 padding-bottom: 5px !important;
431 border-top: 1px solid #eee;
432 }
433
434 .notifier-toggle-switch input[type=checkbox] {
435 position: relative;
436 -webkit-appearance: none;
437 -moz-appearance: none;
438 appearance: none;
439 width: 32px;
440 height: 16px;
441 background: #ccc;
442 border-radius: 40px;
443 box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
444 cursor: pointer;
445 transition: 0.2s;
446 border: none;
447 outline: none;
448 }
449 .notifier-toggle-switch input:checked[type=checkbox] {
450 -webkit-appearance: none;
451 -moz-appearance: none;
452 appearance: none;
453 background: #00c417;
454 }
455 .notifier-toggle-switch input[type=checkbox]::before {
456 content: none;
457 }
458 .notifier-toggle-switch input[type=checkbox]::after {
459 position: absolute;
460 content: "";
461 width: 16px;
462 height: 16px;
463 top: 0;
464 left: 0;
465 background: #fff;
466 border-radius: 50%;
467 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
468 transform: scale(1.1);
469 transition: 0.2s;
470 }
471 .notifier-toggle-switch input:checked[type=checkbox]::after {
472 left: 50%;
473 }
474
475 .select2-results__option {
476 margin-bottom: 0px;
477 }
478
479 @media screen and (max-width: 767px) {
480 #notifier-admin-header {
481 padding-top: 46px;
482 }
483 }
484 #notifier-admin-header .header-logo {
485 display: inline-block;
486 margin-right: 15px;
487 width: 35px;
488 height: 35px;
489 align-self: center;
490 }
491 #notifier-admin-header .header-logo img {
492 width: 100%;
493 height: 100%;
494 }
495 @media screen and (max-width: 767px) {
496 #notifier-admin-header .header-logo {
497 margin-right: 10px;
498 }
499 }
500 #notifier-admin-header .notifier-admin-header-content {
501 background: #fff;
502 box-sizing: border-box;
503 width: 100%;
504 top: 32px;
505 z-index: 1001;
506 padding: 0 20px;
507 height: 70px;
508 display: flex;
509 align-content: center;
510 align-items: center;
511 justify-content: space-between;
512 border-bottom: 1px solid #eee;
513 }
514 @media screen and (max-width: 767px) {
515 #notifier-admin-header .notifier-admin-header-content {
516 padding: 0 12px;
517 }
518 }
519 #notifier-admin-header .notifier-admin-header-content.sticky {
520 box-shadow: 0 8px 8px 0 rgba(85, 93, 102, 0.3);
521 }
522 @media screen and (max-width: 767px) {
523 #notifier-admin-header .notifier-admin-header-content .header-page-title {
524 flex: 1;
525 }
526 }
527 @media screen and (max-width: 767px) {
528 #notifier-admin-header .notifier-admin-header-content .header-menu-items {
529 flex: 1;
530 justify-content: flex-end;
531 }
532 }
533 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul {
534 margin: 0;
535 }
536 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li {
537 display: inline-block;
538 margin-bottom: 0;
539 }
540 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li:last-child {
541 border-right: 0;
542 }
543 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li a {
544 text-decoration: none;
545 padding: 0 20px;
546 display: block;
547 }
548 @media screen and (max-width: 767px) {
549 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li a {
550 padding: 0 10px;
551 }
552 }
553 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li a.active {
554 color: #555;
555 }
556 @media screen and (max-width: 767px) {
557 #notifier-admin-header .notifier-admin-header-content .header-action-links {
558 display: none !important;
559 }
560 }
561 #notifier-admin-header .notifier-admin-header-content .header-action-links > * {
562 text-decoration: none;
563 padding: 0 10px;
564 display: inline-block;
565 }
566 #notifier-admin-header .notifier-admin-header-content .header-action-links > *.header-version {
567 color: #777;
568 }
569
570 .onboarding {
571 max-width: 600px;
572 margin: 0 auto;
573 background: #fff;
574 border-radius: 10px;
575 box-shadow: 0 8px 8px 0 rgba(85, 93, 102, 0.1);
576 }
577 .onboarding .onboarding-head {
578 padding: 20px;
579 border-bottom: 1px solid #eee;
580 }
581 .onboarding .onboarding-head h1,
582 .onboarding .onboarding-head h2,
583 .onboarding .onboarding-head h3 {
584 margin: 0;
585 }
586 .onboarding .onboarding-head p {
587 margin-bottom: 0;
588 }
589 .onboarding .onboarding-body {
590 padding: 20px;
591 }
592 .onboarding .onboarding-body h1,
593 .onboarding .onboarding-body h2,
594 .onboarding .onboarding-body h3,
595 .onboarding .onboarding-body p:first-child {
596 margin-top: 0;
597 }
598 .onboarding .onboarding-body p:last-child {
599 margin-bottom: 0;
600 }
601 .onboarding .onboarding-footer {
602 padding: 20px;
603 border-top: 1px solid #eee;
604 }
605
606 .dashboard-boxes {
607 display: flex;
608 flex-wrap: wrap;
609 margin-left: -10px;
610 margin-right: -10px;
611 }
612 .dashboard-boxes .col {
613 padding: 0 10px;
614 }
615 @media screen and (max-width: 992px) {
616 .dashboard-boxes > .col:not(.w-100) {
617 flex: 0 0 50% !important;
618 }
619 }
620 @media screen and (max-width: 767px) {
621 .dashboard-boxes > .col:not(.w-100) {
622 flex: 0 0 100% !important;
623 }
624 }
625 .dashboard-boxes .dashboard-box {
626 border-radius: 8px;
627 background-color: #fff;
628 display: flex;
629 flex-direction: column;
630 margin-bottom: 20px;
631 }
632 .dashboard-boxes .dashboard-box.dashboard-box-top {
633 height: auto;
634 }
635 @media screen and (max-width: 767px) {
636 .dashboard-boxes .dashboard-box.dashboard-box-top .w-25 {
637 flex: 0 0 100%;
638 }
639 }
640 .dashboard-boxes .dashboard-box .dashboard-box-head {
641 padding: 15px 20px;
642 border-bottom: 1px solid #eee;
643 }
644 @media screen and (max-width: 767px) {
645 .dashboard-boxes .dashboard-box .dashboard-box-head {
646 padding: 12px;
647 }
648 }
649 .dashboard-boxes .dashboard-box .dashboard-box-head h2,
650 .dashboard-boxes .dashboard-box .dashboard-box-head h3 {
651 margin: 0;
652 }
653 @media screen and (max-width: 767px) {
654 .dashboard-boxes .dashboard-box .dashboard-box-head h2,
655 .dashboard-boxes .dashboard-box .dashboard-box-head h3 {
656 font-size: 16px;
657 }
658 }
659 .dashboard-boxes .dashboard-box .dashboard-box-body {
660 padding: 15px 20px;
661 }
662 @media screen and (max-width: 767px) {
663 .dashboard-boxes .dashboard-box .dashboard-box-body {
664 padding: 12px;
665 }
666 }
667 .dashboard-boxes .dashboard-box .dashboard-box-body *:first-child {
668 margin-top: 0;
669 }
670 .dashboard-boxes .dashboard-box .dashboard-box-body h3 {
671 font-size: 1.2em;
672 }
673 .dashboard-boxes .dashboard-box .dashboard-box-body table {
674 width: 100%;
675 }
676 .dashboard-boxes .dashboard-box .dashboard-box-body table th,
677 .dashboard-boxes .dashboard-box .dashboard-box-body table td {
678 text-align: left;
679 vertical-align: top;
680 }
681 .dashboard-boxes .dashboard-box .dashboard-box-body table th:first-child,
682 .dashboard-boxes .dashboard-box .dashboard-box-body table td:first-child {
683 width: 20%;
684 }
685 .dashboard-boxes .dashboard-box .dashboard-box-body.how-to ul {
686 list-style: inherit;
687 padding-left: 20px;
688 margin-bottom: 10px;
689 }
690 .dashboard-boxes .dashboard-box .dashboard-box-body .dashicons-marker {
691 color: #ccc;
692 }
693 .dashboard-boxes .dashboard-box .dashboard-box-body .dashicons-yes-alt {
694 color: #01a401;
695 }
696 .dashboard-boxes .dashboard-box .dashboard-box-footer {
697 margin-top: auto;
698 padding: 15px 20px;
699 }
700 .dashboard-boxes .dashboard-box .dashboard-box-footer .dashboard-box-buttons-wrap {
701 text-align: right;
702 }
703 .dashboard-boxes .dashboard-box .dashboard-box-footer .dashboard-box-buttons-wrap .button {
704 margin-left: 10px;
705 }
706
707 #wa-notifier-api-key {
708 width: 100%;
709 margin-bottom: 10px;
710 }
711
712 .notifier-triggers-group-wrap {
713 margin-bottom: 30px;
714 }
715 .notifier-triggers-group-wrap .notifier-trigger-wrap {
716 margin-bottom: 20px;
717 }
718 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label {
719 font-size: 16px;
720 }
721 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label input[type=checkbox] {
722 -webkit-appearance: none;
723 -moz-appearance: none;
724 appearance: none;
725 margin: 0;
726 font: inherit;
727 color: #697a8d;
728 width: 20px;
729 height: 20px;
730 border: 2px solid #697a8d;
731 border-radius: 3px;
732 background-color: transparent;
733 outline: none !important;
734 margin-right: 10px;
735 }
736 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label input[type=checkbox]::before {
737 content: "";
738 }
739 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label input[type=checkbox]:checked {
740 color: white;
741 background: #0396a1;
742 border-color: #0396a1;
743 box-shadow: none;
744 }
745 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label input[type=checkbox]:checked::before {
746 content: "\f147";
747 font-family: "dashicons";
748 font-size: 20px;
749 display: block;
750 position: absolute;
751 height: 18px;
752 width: 18px;
753 margin-top: -1px;
754 margin-left: -3px;
755 }
756 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label .notifier-show-trigger-info {
757 border: 0;
758 background: none;
759 padding: 0;
760 cursor: pointer;
761 color: #aaa;
762 }
763 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-info {
764 background: #f7f7f7;
765 padding: 10px;
766 margin-top: 10px;
767 border: 1px solid #eee;
768 border-radius: 10px;
769 }
770
771 .notifier-overview-image {
772 float: right;
773 display: inline-block;
774 width: 100%;
775 height: auto;
776 max-width: 250px;
777 margin-left: 30px;
778 }
779 @media screen and (max-width: 767px) {
780 .notifier-overview-image {
781 float: none;
782 }
783 .notifier-overview-image img {
784 max-width: none;
785 }
786 }
787
788 .notifier-settings-form-profile .notifier-profile-fields-right {
789 margin-left: 50px;
790 margin-top: 100px;
791 }
792 @media screen and (max-width: 767px) {
793 .notifier-settings-form-profile .notifier-profile-fields-right {
794 display: none;
795 }
796 }
797
798 .notifier-fields-table {
799 width: 100%;
800 max-width: 700px;
801 }
802 .notifier-fields-table tr th {
803 vertical-align: top;
804 text-align: left;
805 padding: 20px 10px 20px 0;
806 width: 200px;
807 line-height: 1.3;
808 font-weight: 600;
809 }
810 @media screen and (max-width: 767px) {
811 .notifier-fields-table tr th {
812 display: block;
813 width: 100%;
814 padding: 10px 0 5px 0;
815 }
816 }
817 .notifier-fields-table tr th.section-title {
818 padding: 0;
819 }
820 .notifier-fields-table tr td {
821 margin-bottom: 9px;
822 padding: 15px 10px;
823 line-height: 1.3;
824 vertical-align: middle;
825 }
826 @media screen and (max-width: 767px) {
827 .notifier-fields-table tr td {
828 display: block;
829 width: 100%;
830 padding: 0;
831 }
832 }
833 .notifier-fields-table tr h3 {
834 margin-bottom: 0px;
835 }
836 .notifier-fields-table tr .description {
837 font-weight: normal;
838 }
839 .notifier-fields-table input:not([type=button]),
840 .notifier-fields-table textarea,
841 .notifier-fields-table select {
842 width: 100%;
843 max-width: none;
844 }
845 .notifier-fields-table #notifier_ctc_enable {
846 max-width: 16px;
847 height: 16px;
848 }
849
850 .notifier-chat-btn-image-url {
851 display: none;
852 }
853
854 .disabled-field {
855 background: #fff !important;
856 opacity: 0.5;
857 pointer-events: none;
858 }
859
860 .post-type-wa_notifier_trigger #minor-publishing-actions #save-action,
861 .post-type-wa_notifier_trigger #misc-publishing-actions {
862 display: none;
863 }
864 .post-type-wa_notifier_trigger #minor-publishing-actions {
865 padding: 15px 10px;
866 text-align: left;
867 }
868 .post-type-wa_notifier_trigger .trigger-fields-wrap {
869 margin: 1em 0;
870 }
871 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags {
872 margin-bottom: 5px;
873 }
874 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap {
875 padding: 10px 10px 5px 10px;
876 border: 1px solid #8c8f94;
877 border-radius: 3px;
878 }
879 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags {
880 flex-wrap: nowrap;
881 margin-bottom: 15px;
882 padding-bottom: 10px;
883 border-bottom: 1px solid #dddddd;
884 }
885 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags:last-child {
886 margin-bottom: 0;
887 border-bottom: 0px;
888 }
889 @media screen and (max-width: 767px) {
890 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags {
891 flex-wrap: wrap;
892 }
893 }
894 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags legend.form-label {
895 font-size: 13px;
896 min-width: 120px;
897 max-width: 120px;
898 font-weight: 500;
899 margin-bottom: 5px;
900 margin-top: 1px;
901 }
902 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper {
903 flex-grow: 1;
904 max-height: 105px;
905 overflow: auto;
906 }
907 @media screen and (max-width: 767px) {
908 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper {
909 max-height: 150px;
910 }
911 }
912 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check {
913 display: inline-block;
914 margin-bottom: 5px;
915 width: 25%;
916 }
917 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check .form-check-label {
918 width: auto;
919 display: block;
920 white-space: nowrap;
921 overflow: hidden;
922 text-overflow: ellipsis;
923 }
924 @media screen and (max-width: 1440px) {
925 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check {
926 width: 33.33%;
927 }
928 }
929 @media screen and (max-width: 1024px) {
930 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check {
931 width: 50%;
932 }
933 }
934 @media screen and (max-width: 767px) {
935 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check {
936 width: 100%;
937 }
938 }
939
940 .notifier-click-to-chat-btn {
941 position: fixed;
942 bottom: 20px;
943 right: 20px;
944 cursor: pointer;
945 z-index: 99999999;
946 }
947 .notifier-click-to-chat-btn a {
948 text-decoration: none !important;
949 display: inline-block;
950 outline: none !important;
951 }
952 .notifier-click-to-chat-btn a:hover, .notifier-click-to-chat-btn a:focus {
953 text-decoration: none !important;
954 }
955 .notifier-click-to-chat-btn.notifier-click-to-chat-style-3 a {
956 display: flex;
957 justify-content: center;
958 align-items: center;
959 background-color: #e4e4e4;
960 color: #7f7d7d;
961 padding: 0 12px;
962 border-radius: 25px;
963 font-size: 13px;
964 line-height: 32px;
965 }
966 .notifier-click-to-chat-btn.notifier-click-to-chat-style-4 a {
967 display: flex;
968 padding: 0 2rem;
969 letter-spacing: 0.5px;
970 transition: 0.2s ease-out;
971 text-align: center;
972 justify-content: center;
973 align-items: center;
974 border-radius: 2px;
975 height: 36px;
976 line-height: 36px;
977 vertical-align: middle;
978 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);
979 box-sizing: inherit;
980 background-color: #26a69a;
981 color: #fff;
982 }
983 .notifier-click-to-chat-btn.notifier-click-to-chat-style-custom img {
984 width: 100%;
985 height: auto;
986 max-width: 150px;
987 max-height: 150px;
988 -o-object-fit: cover;
989 object-fit: cover;
990 }
991