PluginProbe
Affiliate Sales in Google Analytics and other tools / trunk
Affiliate Sales in Google Analytics and other tools vtrunk
5.4.1 5.5.0 5.4.0 5.3.0 5.1.0 5.1.1 4.0.1 4.0.2 5.0.0 5.0.1 5.0.2 trunk 1.0 1.0.1 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 1.1.1 1.1.2 All 55 releases
wecantrack / css / admin.css

admin.css in Affiliate Sales in Google Analytics and other tools trunk, at css/admin.css

652 lines 15.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* ── Brand palette ──────────────────────────────────────── */
2
3 :root {
4 --wecantrack-brand: #1d71b8;
5 --wecantrack-brand-dark: #175d99;
6 --wecantrack-brand-disabled: #a7c4dd;
7 --wecantrack-success: #1e7a3c;
8 --wecantrack-success-bg: #e6f2ea;
9 --wecantrack-danger: #b32d2e;
10 --wecantrack-danger-bg: #fcebea;
11 }
12
13 /* ── Layout ─────────────────────────────────────────────── */
14
15 .wecantrack_body {
16 background: #fff;
17 border: 1px solid #dcdcde;
18 border-radius: 8px;
19 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
20 box-sizing: border-box;
21 max-width: 1000px;
22 margin-top: 16px;
23 padding: 28px 32px 32px;
24 }
25
26 .wecantrack_body h1 {
27 margin: 4px 0 12px;
28 padding: 0;
29 font-size: 23px;
30 font-weight: 600;
31 color: #1d2327;
32 }
33
34 /* ── Page header ────────────────────────────────────────── */
35
36 .wecantrack-header {
37 display: flex;
38 align-items: center;
39 justify-content: space-between;
40 gap: 16px;
41 margin-bottom: 20px;
42 padding-bottom: 18px;
43 border-bottom: 1px solid #f0f0f1;
44 }
45
46 .wecantrack-header-brand {
47 display: flex;
48 align-items: center;
49 gap: 10px;
50 }
51
52 .wecantrack-header-brand img {
53 height: 38px;
54 width: auto;
55 display: block;
56 }
57
58 .wecantrack-version-footer {
59 margin-top: 24px;
60 text-align: right;
61 color: #8c8f94;
62 font-size: 12px;
63 font-family: Consolas, Monaco, monospace;
64 }
65
66 .wecantrack-pill {
67 display: inline-flex;
68 align-items: center;
69 gap: 7px;
70 padding: 4px 12px;
71 border-radius: 999px;
72 font-size: 12px;
73 font-weight: 600;
74 }
75
76 .wecantrack-pill::before {
77 content: "";
78 width: 8px;
79 height: 8px;
80 border-radius: 50%;
81 background: currentColor;
82 }
83
84 .wecantrack-pill-connected {
85 background: var(--wecantrack-success-bg);
86 color: var(--wecantrack-success);
87 }
88
89 .wecantrack-pill-disconnected {
90 background: #f0f0f1;
91 color: #646970;
92 }
93
94 .wecantrack-pill-paused {
95 background: #fcf9e8;
96 color: #996800;
97 }
98
99 .wecantrack-inline-note {
100 max-width: 720px;
101 margin: 0 0 16px;
102 padding: 10px 14px;
103 background: #fcf9e8;
104 border-left: 4px solid #dba617;
105 border-radius: 4px;
106 font-size: 13px;
107 line-height: 1.6;
108 }
109
110 /* ── Connection card ────────────────────────────────────── */
111
112 .wecantrack-connection-card {
113 background: #f6f7f7;
114 border: 1px solid #e5e5e5;
115 border-radius: 6px;
116 box-sizing: border-box;
117 max-width: 720px;
118 margin: 0 0 24px;
119 padding: 18px 22px;
120 }
121
122 .wecantrack-card-title {
123 margin: 0 0 14px;
124 padding: 0;
125 font-size: 14px;
126 font-weight: 600;
127 color: #1d2327;
128 }
129
130 .wecantrack-connection-row {
131 display: flex;
132 align-items: center;
133 flex-wrap: wrap;
134 gap: 8px;
135 margin: 8px 0;
136 font-size: 13px;
137 }
138
139 .wecantrack-connection-label {
140 display: inline-block;
141 width: 80px;
142 flex-shrink: 0;
143 color: #646970;
144 font-size: 13px;
145 }
146
147 .wecantrack-connection-card code {
148 background: #fff;
149 border: 1px solid #e5e5e5;
150 border-radius: 3px;
151 padding: 2px 8px;
152 font-size: 12px;
153 }
154
155 .wecantrack-connection-setup {
156 margin: 8px 0;
157 }
158
159 .wecantrack-connection-setup .wecantrack-connection-label {
160 display: block;
161 width: auto;
162 margin-bottom: 6px;
163 font-weight: 600;
164 color: #1d2327;
165 }
166
167 .wecantrack-connection-controls {
168 display: flex;
169 align-items: center;
170 gap: 8px;
171 flex-wrap: wrap;
172 }
173
174 .wecantrack-connection-controls input[type="text"] {
175 width: 320px;
176 max-width: 100%;
177 }
178
179 .wecantrack-prerequisites {
180 margin-top: 14px;
181 padding-top: 12px;
182 border-top: 1px solid #e5e5e5;
183 }
184
185 .wecantrack-website-override {
186 margin-top: 14px;
187 }
188
189 .wecantrack-website-override select {
190 width: 320px;
191 max-width: 100%;
192 }
193
194 /* ── Settings fieldset ──────────────────────────────────── */
195
196 .wecantrack-settings-fieldset {
197 border: none;
198 margin: 0;
199 padding: 0;
200 transition: opacity 0.2s ease;
201 }
202
203 .wecantrack-settings-fieldset:disabled {
204 opacity: 0.5;
205 }
206
207 /* ── Toggle switch ──────────────────────────────────────── */
208
209 .wecantrack-toggle {
210 display: inline-flex;
211 align-items: center;
212 cursor: pointer;
213 user-select: none;
214 }
215
216 /* Extra .wecantrack_body specificity: WP core's <=782px stylesheet restyles
217 input[type=checkbox] (25px box) with more specific selectors and would
218 otherwise resurface the hidden checkbox on mobile. */
219 .wecantrack_body .wecantrack-toggle input[type="checkbox"] {
220 -webkit-appearance: none;
221 appearance: none;
222 position: absolute;
223 opacity: 0;
224 width: 0;
225 height: 0;
226 min-width: 0;
227 min-height: 0;
228 margin: 0;
229 padding: 0;
230 border: none;
231 }
232
233 /* inline-block + own margin (not flex gap): keeps its 40x22 box and spacing
234 even when a WP mobile rule changes the label's display. */
235 .wecantrack-toggle-track {
236 display: inline-block;
237 position: relative;
238 vertical-align: middle;
239 box-sizing: border-box;
240 flex-shrink: 0;
241 width: 40px;
242 height: 22px;
243 margin-right: 10px;
244 border-radius: 999px;
245 background: #c3c4c7;
246 transition: background 0.15s ease;
247 }
248
249 .wecantrack-toggle-track::after {
250 content: "";
251 position: absolute;
252 top: 2px;
253 left: 2px;
254 width: 18px;
255 height: 18px;
256 border-radius: 50%;
257 background: #fff;
258 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
259 transition: transform 0.15s ease;
260 }
261
262 .wecantrack-toggle input[type="checkbox"]:checked ~ .wecantrack-toggle-track {
263 background: var(--wecantrack-brand);
264 }
265
266 .wecantrack-toggle input[type="checkbox"]:checked ~ .wecantrack-toggle-track::after {
267 transform: translateX(18px);
268 }
269
270 .wecantrack-toggle input[type="checkbox"]:focus-visible ~ .wecantrack-toggle-track {
271 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wecantrack-brand);
272 }
273
274 .wecantrack-toggle-text {
275 font-size: 13px;
276 color: #1d2327;
277 }
278
279 /* ── Form table ─────────────────────────────────────────── */
280
281 .wecantrack_body .form-table {
282 border-collapse: collapse;
283 }
284
285 .wecantrack_body .form-table tr {
286 border-bottom: 1px solid #f0f0f1;
287 }
288
289 .wecantrack_body .form-table tr:last-child {
290 border-bottom: none;
291 }
292
293 .wecantrack_body .form-table th {
294 font-weight: 600;
295 color: #1d2327;
296 }
297
298 /* Fixed label column only on desktop — below 783px WP core stacks
299 th/td as full-width blocks and must keep control of the layout. */
300 @media (min-width: 783px) {
301 .wecantrack_body .form-table th {
302 width: 220px;
303 padding: 24px 24px 24px 0;
304 }
305
306 .wecantrack_body .form-table td {
307 padding: 20px 10px;
308 }
309 }
310
311 .wecantrack_body .form-table td > p:first-child,
312 .wecantrack_body .form-table td > fieldset:first-child p:first-child {
313 margin-top: 0;
314 }
315
316 .wecantrack_body p.description {
317 max-width: 720px;
318 color: #646970;
319 font-size: 12.5px;
320 line-height: 1.6;
321 }
322
323 /* One consistent 36px control height so inputs and adjacent buttons align. */
324 .wecantrack_body input[type="text"],
325 .wecantrack_body select,
326 .wecantrack_body .button {
327 box-sizing: border-box;
328 min-height: 36px;
329 vertical-align: middle;
330 }
331
332 .wecantrack_body input[type="text"] {
333 padding: 4px 12px;
334 border-color: #dcdcde;
335 border-radius: 4px;
336 }
337
338 .wecantrack_body input[type="text"]:focus,
339 .wecantrack_body select:focus {
340 border-color: var(--wecantrack-brand);
341 box-shadow: 0 0 0 1px var(--wecantrack-brand);
342 }
343
344 .wecantrack_body select {
345 border-radius: 4px;
346 }
347
348 .wecantrack_body input[type="radio"]:checked::before {
349 background-color: var(--wecantrack-brand);
350 }
351
352 /* ── Buttons ────────────────────────────────────────────── */
353
354 .wecantrack_body .button {
355 border-radius: 4px;
356 /* 34px line-height + 2px border = the shared 36px control height. */
357 line-height: 34px;
358 }
359
360 .wecantrack_body .button-primary {
361 background: var(--wecantrack-brand);
362 border-color: var(--wecantrack-brand);
363 padding: 0 16px;
364 transition: background 0.15s ease;
365 }
366
367 .wecantrack_body .button-primary:hover,
368 .wecantrack_body .button-primary:focus {
369 background: var(--wecantrack-brand-dark);
370 border-color: var(--wecantrack-brand-dark);
371 }
372
373 /* !important required: WP core styles disabled buttons with !important. */
374 .wecantrack_body .button-primary:disabled {
375 background: var(--wecantrack-brand-disabled) !important;
376 border-color: var(--wecantrack-brand-disabled) !important;
377 }
378
379 .wecantrack-button-danger {
380 border-color: var(--wecantrack-danger) !important;
381 color: var(--wecantrack-danger) !important;
382 }
383
384 /* ── Feedback messages ──────────────────────────────────── */
385
386 .wecantrack-text-success,
387 .wecantrack-text-danger {
388 display: inline-block;
389 box-sizing: border-box;
390 max-width: 720px;
391 padding: 8px 14px;
392 border-left: 3px solid;
393 border-radius: 4px;
394 font-size: 13px;
395 font-weight: 600;
396 line-height: 1.5;
397 transition: opacity 0.6s ease;
398 }
399
400 .wecantrack-text-success {
401 color: var(--wecantrack-success);
402 background: var(--wecantrack-success-bg);
403 border-left-color: var(--wecantrack-success);
404 }
405
406 .wecantrack-text-danger {
407 color: var(--wecantrack-danger);
408 background: var(--wecantrack-danger-bg);
409 border-left-color: var(--wecantrack-danger);
410 }
411
412 .wecantrack-fade-out {
413 opacity: 0;
414 }
415
416 /* Block feedback area (verify errors, script version) gets breathing room. */
417 .wecantrack-feedback:not(:empty):not(.wecantrack-feedback-inline) {
418 margin-top: 12px;
419 }
420
421 /* Inline feedback sits next to its button: plain text, no box, so it
422 aligns with the button instead of competing with it. */
423 .wecantrack-feedback-inline {
424 vertical-align: middle;
425 }
426
427 .wecantrack-feedback-inline .wecantrack-text-success,
428 .wecantrack-feedback-inline .wecantrack-text-danger {
429 background: none;
430 border: none;
431 margin: 0;
432 padding: 0;
433 font-weight: 600;
434 line-height: 36px;
435 }
436
437 .wecantrack-feedback-inline .wecantrack-text-success::before {
438 content: "";
439 }
440
441 .wecantrack-feedback-inline .wecantrack-text-danger::before {
442 content: "";
443 }
444
445 .wecantrack-submit-row {
446 display: flex;
447 align-items: center;
448 gap: 12px;
449 }
450
451 /* WP core gives submit buttons a bottom margin; it skews flex centering. */
452 .wecantrack-submit-row .button {
453 margin: 0;
454 }
455
456 /* ── Requirements checklist ─────────────────────────────── */
457
458 .wecantrack-prerequisites p {
459 display: flex;
460 align-items: center;
461 gap: 6px;
462 margin: 6px 0;
463 }
464
465 .wecantrack-prerequisites .dashicons-yes {
466 color: var(--wecantrack-success);
467 }
468
469 .wecantrack-prerequisites .dashicons-no {
470 color: var(--wecantrack-danger);
471 }
472
473 /* ── Footer notes ───────────────────────────────────────── */
474
475 .wecantrack-footer-note {
476 max-width: 720px;
477 margin: 20px 0 0;
478 color: #646970;
479 font-size: 12.5px;
480 line-height: 1.6;
481 }
482
483 /* ── Tracking script version UI ─────────────────────────── */
484
485 .wecantrack-script-version-card {
486 background: #fff;
487 border: 1px solid #dcdcde;
488 border-left: 4px solid var(--wecantrack-brand);
489 border-radius: 4px;
490 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
491 padding: 20px 24px;
492 margin: 24px 0 16px;
493 max-width: 860px;
494 box-sizing: border-box;
495 }
496
497 .wecantrack-script-version-card h2 {
498 display: flex;
499 align-items: center;
500 gap: 10px;
501 flex-wrap: wrap;
502 margin: 0 0 10px;
503 padding: 0;
504 font-size: 16px;
505 line-height: 1.4;
506 }
507
508 .wecantrack-script-version-card p {
509 margin: 0 0 16px;
510 max-width: 660px;
511 color: #50575e;
512 font-size: 13px;
513 line-height: 1.6;
514 }
515
516 /* Selectors are specific enough to beat both the card's own `p` rule and
517 WP core's `.form-table td p` margins without !important. */
518 .wecantrack-script-version-card p.wecantrack-script-version-actions,
519 .wecantrack_body .form-table td p.wecantrack-script-version-actions {
520 display: flex;
521 align-items: center;
522 gap: 8px;
523 margin: 0;
524 }
525
526 .wecantrack_body .form-table td p.wecantrack-script-version-status {
527 display: flex;
528 align-items: center;
529 gap: 10px;
530 margin: 0 0 12px;
531 }
532
533 .wecantrack-badge {
534 display: inline-block;
535 padding: 2px 10px;
536 border-radius: 999px;
537 font-size: 11px;
538 font-weight: 600;
539 line-height: 1.8;
540 text-transform: uppercase;
541 letter-spacing: 0.4px;
542 white-space: nowrap;
543 }
544
545 .wecantrack-badge-legacy {
546 background: #fcf0e4;
547 color: #8a6116;
548 }
549
550 .wecantrack-badge-new {
551 background: var(--wecantrack-success-bg);
552 color: var(--wecantrack-success);
553 }
554
555 .wecantrack-script-version-feedback:not(:empty) {
556 margin-top: 14px;
557 }
558
559 /* ── Loading bar ────────────────────────────────────────── */
560
561 @keyframes wecantrack-loader-animation {
562 0% {left: -100%;}
563 49% {left: 100%;}
564 50% {left: 100%;}
565 100% {left: -100%;}
566 }
567
568 #wecantrack_loading {
569 width: 100%;
570 opacity: 0.8;
571 position: fixed;
572 height: 4px;
573 top: 32px;
574 left: 0;
575 background-color: var(--wecantrack-brand);
576 animation-name: wecantrack-loader-animation;
577 animation-duration: 3s;
578 animation-iteration-count: infinite;
579 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
580 z-index: 99999999;
581 display: none;
582 }
583
584 /* ── Diagnostics cards (optimizer compatibility + tag health check) ── */
585
586 .wecantrack-diagnostics-card {
587 background: #f6f7f7;
588 border: 1px solid #e5e5e5;
589 border-radius: 6px;
590 box-sizing: border-box;
591 max-width: 720px;
592 margin: 0 0 24px;
593 padding: 18px 22px;
594 }
595
596 .wecantrack-optimizer-list {
597 margin: 0 0 10px;
598 }
599
600 .wecantrack-optimizer-row {
601 display: flex;
602 justify-content: space-between;
603 gap: 14px;
604 align-items: baseline;
605 flex-wrap: wrap;
606 padding: 7px 0;
607 border-bottom: 1px solid #e5e5e5;
608 margin: 0;
609 }
610
611 .wecantrack-optimizer-row:last-child {
612 border-bottom: 0;
613 }
614
615 .wecantrack-optimizer-status {
616 font-size: 12px;
617 font-weight: 600;
618 }
619
620 .wecantrack-optimizer-ok {
621 color: #00753e;
622 }
623
624 .wecantrack-optimizer-warn {
625 color: #b45309;
626 }
627
628 .wecantrack-tag-check-result {
629 border-left: 4px solid #8c8f94;
630 background: #fff;
631 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
632 padding: 10px 14px;
633 font-size: 13px;
634 max-width: 640px;
635 }
636
637 .wecantrack-tag-check-result.hidden {
638 display: none;
639 }
640
641 .wecantrack-tag-check-ok {
642 border-left-color: #00a32a;
643 }
644
645 .wecantrack-tag-check-warn {
646 border-left-color: #dba617;
647 }
648
649 .wecantrack-tag-check-error {
650 border-left-color: #d63638;
651 }
652