PluginProbe
Subscriptions for WooCommerce with Stripe Recurring Payments / 1.10.0
Subscriptions for WooCommerce with Stripe Recurring Payments v1.10.0
2.0.0 1.11.2 1.11.1 1.11.0 1.10.9 1.10.8 1.10.7 1.10.6 1.10.5 1.10.4 1.10.3 1.10.2 1.10.1 1.10.0 1.9.6 1.9.5 trunk 1.3.0 1.3.1 1.3.2 1.4.0 1.4.1 1.4.2 1.5.0 1.5.1 All 61 releases
subscription / assets / css / admin.css

admin.css in Subscriptions for WooCommerce with Stripe Recurring Payments 1.10.0, at assets/css/admin.css

697 lines 13.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .sdevs_subscription_tab > a::before {
2 content: "\f531" !important;
3 }
4
5 .subscrpt_field {
6 max-width: 480px;
7 display: flex;
8 flex-wrap: wrap;
9 }
10
11 .subscrpt_field > label {
12 width: 100%;
13 }
14
15 .subscrpt_field > input {
16 width: 70% !important;
17 margin-right: 5px !important;
18 }
19
20 .subscrpt_field > select {
21 width: 25%;
22 }
23
24 .subscrpt_field > small {
25 line-height: 14px;
26 margin-top: 5px !important;
27 }
28
29 .subscrpt-order-label {
30 background: #dbeafe;
31 color: #1e40af;
32 display: inline-block;
33 padding: 5px 10px;
34 font-weight: 500;
35 font-size: 14px;
36 margin-top: 10px;
37 clear: both;
38 margin-bottom: 5px;
39 border-radius: 5px;
40 }
41
42 @media (min-width: 1024px) {
43 .subscrpt_field > select {
44 width: 20%;
45 }
46 }
47
48 /* Utility Classes */
49 .wp-subscription-flex {
50 display: flex;
51 align-items: center;
52 }
53 .wp-subscription-space-between {
54 justify-content: space-between;
55 }
56 .wp-subscription-full-width {
57 width: 100%;
58 }
59
60 /* Admin Header */
61 .wp-subscription-admin-header {
62 background: #fff;
63 border-bottom: 1px solid #e2e4e7;
64 padding: 0 32px;
65 position: sticky;
66 top: 32px;
67 z-index: 100;
68 width: 100%;
69 box-sizing: border-box;
70 }
71
72 .wp-subscription-admin-header-inner {
73 max-width: 1240px;
74 margin: 0 auto;
75 display: flex;
76 align-items: center;
77 justify-content: space-between;
78 min-height: 72px;
79 }
80
81 .wp-subscription-admin-header-left {
82 display: flex;
83 flex-direction: column;
84 gap: 2px;
85 }
86
87 .wp-subscription-breadcrumb {
88 display: flex;
89 align-items: center;
90 gap: 8px;
91 }
92
93 .wp-subscription-breadcrumb-home {
94 display: inline-flex;
95 align-items: center;
96 color: #646970;
97 text-decoration: none;
98 transition: color 0.2s;
99 }
100
101 .wp-subscription-breadcrumb-home:hover {
102 color: #2271b1;
103 }
104
105 .wp-subscription-breadcrumb-home .dashicons {
106 font-size: 20px;
107 width: 20px;
108 height: 20px;
109 }
110
111 .wp-subscription-breadcrumb-sep {
112 color: #c3c4c7;
113 font-size: 16px;
114 line-height: 1;
115 user-select: none;
116 }
117
118 .wp-subscription-breadcrumb-current {
119 color: #1d2327;
120 font-weight: 500;
121 font-size: 14px;
122 }
123
124 .wp-subscription-logo {
125 height: 30px;
126 width: auto;
127 display: block;
128 }
129
130 .wp-subscription-admin-header-right {
131 display: flex;
132 align-items: center;
133 gap: 12px;
134 }
135
136 .wp-subscription-help-btn {
137 display: inline-flex;
138 align-items: center;
139 gap: 5px;
140 padding: 6px 14px;
141 border: 1px solid #c3c4c7;
142 border-radius: 4px;
143 color: #1d2327;
144 text-decoration: none;
145 font-size: 13px;
146 font-weight: 500;
147 background: #fff;
148 line-height: 1.4;
149 transition:
150 border-color 0.2s,
151 color 0.2s,
152 background 0.2s;
153 }
154
155 .wp-subscription-help-btn:hover {
156 border-color: #2271b1;
157 color: #2271b1;
158 background: #f0f6fc;
159 }
160
161 .wp-subscription-help-btn .dashicons {
162 font-size: 16px;
163 width: 16px;
164 height: 16px;
165 margin-top: 1px;
166 }
167
168 .wp-subscription-upgrade-btn {
169 background: #2271b1;
170 color: #fff;
171 padding: 6px 14px;
172 border-radius: 4px;
173 text-decoration: none;
174 font-weight: 600;
175 font-size: 13px;
176 transition:
177 background 0.2s,
178 box-shadow 0.2s;
179 box-shadow: 0 1px 3px rgba(34, 113, 177, 0.08);
180 border: none;
181 outline: none;
182 display: inline-block;
183 }
184
185 .wp-subscription-upgrade-btn:hover {
186 background: #135e96;
187 color: #fff;
188 box-shadow: 0 3px 12px rgba(34, 113, 177, 0.13);
189 }
190
191 /* Admin Content */
192
193 .wp-subscription-admin-box {
194 background: #fff;
195 border-radius: 6px;
196 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
197 padding: 25px;
198 margin-bottom: 20px;
199 transition: box-shadow 0.3s ease;
200 }
201
202 .wp-subscription-admin-box:hover {
203 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
204 }
205
206 /* Typography */
207 .wp-subscription-admin-title {
208 font-family: Georgia, "Times New Roman", serif;
209 font-size: 24px;
210 color: #1d2327;
211 margin: 0 0 20px 0;
212 padding: 0;
213 }
214
215 .wp-subscription-admin-content p,
216 .wp-subscription-admin-content li,
217 .wp-subscription-admin-content td,
218 .wp-subscription-admin-content th {
219 font-family:
220 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
221 font-size: 14px;
222 line-height: 1.5;
223 color: #1d2327;
224 }
225
226 /* Navigation (legacy, for reference) */
227 .wp-subscription-admin-nav {
228 display: flex;
229 gap: 20px;
230 margin-bottom: 20px;
231 }
232
233 .wp-subscription-admin-nav a {
234 color: #1d2327;
235 text-decoration: none;
236 padding: 8px 16px;
237 border-radius: 4px;
238 transition: all 0.3s ease;
239 }
240
241 .wp-subscription-admin-nav a:hover {
242 background: #f0f0f1;
243 }
244
245 .wp-subscription-admin-nav a.current {
246 background: #2271b1;
247 color: #fff;
248 }
249
250 /* Stats Cards */
251 .wp-subscription-stats-grid {
252 display: grid;
253 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
254 gap: 20px;
255 margin-bottom: 30px;
256 }
257
258 .wp-subscription-stat-card {
259 background: #fff;
260 border-radius: 6px;
261 padding: 20px;
262 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
263 transition: all 0.3s ease;
264 }
265
266 .wp-subscription-stat-card:hover {
267 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
268 transform: translateY(-2px);
269 }
270
271 .wp-subscription-stat-title {
272 font-family: Georgia, "Times New Roman", serif;
273 font-size: 16px;
274 color: #1d2327;
275 margin: 0 0 10px 0;
276 }
277
278 .wp-subscription-stat-value {
279 font-size: 24px;
280 font-weight: 600;
281 color: #2271b1;
282 }
283
284 /* Support Grid */
285 .wp-subscription-support-grid {
286 display: grid;
287 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
288 gap: 20px;
289 }
290
291 .wp-subscription-support-card {
292 background: #fff;
293 border-radius: 6px;
294 padding: 25px;
295 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
296 transition: all 0.3s ease;
297 }
298
299 .wp-subscription-support-card:hover {
300 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
301 transform: translateY(-2px);
302 }
303
304 /* Responsive Design */
305 @media screen and (max-width: 900px) {
306 .wp-subscription-admin-header {
307 padding: 0 16px;
308 }
309 .wp-subscription-admin-header-inner {
310 flex-wrap: wrap;
311 gap: 10px;
312 }
313 .wp-subscription-admin-content {
314 padding: 10px;
315 }
316 }
317
318 @media screen and (max-width: 600px) {
319 .wp-subscription-admin-header {
320 padding: 0 12px;
321 }
322 .wp-subscription-admin-header-inner {
323 flex-direction: column;
324 align-items: flex-start;
325 gap: 8px;
326 }
327 .wp-subscription-admin-header-right {
328 gap: 8px;
329 }
330 .wp-subscription-logo {
331 height: 24px;
332 }
333 .wp-subscription-upgrade-btn {
334 font-size: 12px;
335 padding: 5px 10px;
336 }
337 }
338
339 /* Remove left padding on WPSubscription admin pages only */
340 body.toplevel_page_wp-subscription #wpcontent,
341 body[class*="wpsubscription_page_wp-subscription"] #wpcontent {
342 padding-left: 0 !important;
343 }
344
345 /* Table & List Styles */
346 .wp-subscription-list-table {
347 border: none !important;
348 border-radius: 8px;
349 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
350 overflow: hidden;
351 }
352 .wp-subscription-list-table th,
353 .wp-subscription-list-table td {
354 border: none;
355 border-bottom: 1px solid #f0f0f1;
356 background: #fff;
357 }
358 .wp-subscription-list-table tr:last-child td {
359 /* border-bottom: none; */
360 }
361
362 .wp-subscription-list-table .button-small {
363 font-size: 13px;
364 padding: 5px 14px;
365 border-radius: 5px;
366 }
367
368 /* Remove default table border */
369 .wp-subscription-list-table {
370 border-collapse: separate !important;
371 border-spacing: 0;
372 }
373
374 /* Row Actions on Title Hover */
375 .wp-subscription-title-wrap {
376 position: relative;
377 }
378 .wp-subscription-row-actions {
379 visibility: hidden;
380 gap: 8px;
381 display: flex;
382 }
383 .wp-subscription-title-wrap:hover .wp-subscription-row-actions {
384 visibility: visible;
385 }
386 .wp-subscription-row-actions a {
387 color: #2271b1;
388 font-size: 13px;
389 text-decoration: none;
390 padding: 2px 8px;
391 border-radius: 4px;
392 background: #f0f6ff;
393 transition:
394 background 0.2s,
395 color 0.2s;
396 }
397 .wp-subscription-row-actions a:hover {
398 background: #2271b1;
399 color: #fff;
400 }
401
402 /* =====================
403 Subscriptions List Page
404 ===================== */
405 .wp-subscription-title-wrap:hover .wp-subscription-row-actions {
406 opacity: 1 !important;
407 pointer-events: auto !important;
408 }
409 .wp-subscription-row-actions {
410 display: flex;
411 align-items: center;
412 gap: 8px;
413 background: none;
414 box-shadow: none;
415 position: static;
416 padding: 0;
417 border-radius: 0;
418 white-space: nowrap;
419 }
420 .wp-subscription-row-actions a {
421 color: #2271b1;
422 text-decoration: none;
423 font-size: 13px;
424 padding: 2px 4px;
425 transition: color 0.15s;
426 }
427 .wp-subscription-row-actions a[style*="color:#d93025"] {
428 color: #d93025 !important;
429 }
430 .wp-subscription-modern-table {
431 border-radius: 10px;
432 overflow: hidden;
433 background: #fff;
434 border: none !important;
435 box-shadow: none !important;
436 }
437 .wp-subscription-modern-table thead tr {
438 background: #e6f0fa !important;
439 border-bottom: 2px solid #b6d4f7 !important;
440 }
441 .wp-subscription-modern-table th {
442 font-weight: 600 !important;
443 color: #1e293b !important;
444 background: none !important;
445 }
446 .wp-subscription-modern-table th,
447 .wp-subscription-modern-table td {
448 border: none !important;
449 padding: 14px 18px !important;
450 background: none !important;
451 }
452 .wp-subscription-modern-table tr {
453 border-bottom: 1px solid #f1f3f7 !important;
454 transition: background 0.18s;
455 }
456 .wp-subscription-modern-table tr:last-child {
457 border-bottom: none !important;
458 }
459 .wp-subscription-modern-table tbody tr:hover {
460 background: #f0f6ff !important;
461 box-shadow: none !important;
462 z-index: 1;
463 }
464 .subscrpt-id-link {
465 color: #2563eb;
466 font-weight: 600;
467 text-decoration: none;
468 transition: color 0.16s;
469 }
470 .subscrpt-id-link:hover {
471 color: #1e40af;
472 text-decoration: underline;
473 }
474 .subscrpt-id-title {
475 font-size: 11px;
476 color: #888;
477 margin-top: 2px;
478 line-height: 1.3;
479 max-width: 120px;
480 white-space: nowrap;
481 overflow: hidden;
482 text-overflow: ellipsis;
483 }
484
485 /* Subscriptions List Page Layout */
486 .wp-subscription-admin-content.list-page {
487 max-width: 1240px;
488 margin: 32px auto 0 auto;
489 background: #fff;
490 padding: 32px 24px 24px 24px;
491 border-radius: 12px;
492 }
493
494 /* Subscription list: toolbar sits on WP admin gray, table card is the white surface */
495 .wp-subscription-admin-content.list-page.subscrpt-subs-list {
496 background: transparent;
497 padding: 0;
498 border-radius: 0;
499 margin-top: 24px;
500 margin-bottom: 32px;
501 }
502 .wp-subscription-list-header {
503 margin-bottom: 28px;
504 display: flex;
505 justify-content: space-between;
506 align-items: center;
507 flex-wrap: wrap;
508 gap: 16px;
509 }
510 .wp-subscription-filters {
511 display: flex;
512 align-items: center;
513 gap: 10px;
514 flex-wrap: wrap;
515 flex: 1;
516 }
517 .wp-subscription-bulk-actions {
518 display: flex;
519 align-items: center;
520 gap: 8px;
521 flex-shrink: 0;
522 }
523 .wp-subscription-pagination {
524 display: flex;
525 justify-content: flex-end;
526 align-items: center;
527 gap: 8px;
528 margin-top: 24px;
529 }
530 .wp-subscription-pagination .total {
531 color: #888;
532 font-size: 13px;
533 }
534 .wp-subscription-pagination .goto-label {
535 margin-left: 16px;
536 color: #888;
537 font-size: 13px;
538 }
539 .wp-subscription-pagination form {
540 display: inline-block;
541 margin: 0;
542 }
543 .wp-subscription-pagination input[type="number"] {
544 width: 48px;
545 }
546 .wp-subscription-customer-email {
547 color: #888;
548 font-size: 12px;
549 line-height: 1.3;
550 word-break: break-all;
551 }
552 @keyframes floatY {
553 0% {
554 transform: translateY(0);
555 }
556 100% {
557 transform: translateY(-10px);
558 }
559 }
560 .wp-subscription-admin-box:hover {
561 box-shadow: 0 4px 16px #e0e7ef;
562 transition: box-shadow 0.2s;
563 }
564 .wp-subscription-pro-callout {
565 background: #2271b1 !important;
566 }
567 .wp-subscription-pro-callout h2,
568 .wp-subscription-pro-callout p {
569 color: #fff !important;
570 }
571 .wp-subscription-pro-callout .button-primary {
572 background: #fff !important;
573 color: #2271b1 !important;
574 }
575 .wp-subscription-pro-callout .button-primary:hover {
576 background: #e0e7ef !important;
577 }
578 @media (max-width: 900px) {
579 .wp-subscription-support-resources {
580 grid-template-columns: 1fr !important;
581 }
582 }
583 .wp-subscription-hero-upgrade {
584 position: relative;
585 display: flex;
586 align-items: center;
587 justify-content: space-between;
588 background: #2196f3;
589 border-radius: 12px;
590 padding: 32px 36px;
591 margin-bottom: 28px;
592 overflow: hidden;
593 min-height: 90px;
594 }
595 .wp-subscription-hero-upgrade::before {
596 content: "";
597 position: absolute;
598 inset: 0;
599 background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 40px);
600 opacity: 0.25;
601 pointer-events: none;
602 }
603 .wp-subscription-hero-content {
604 display: flex;
605 align-items: center;
606 gap: 18px;
607 z-index: 1;
608 }
609 .wp-subscription-hero-icon {
610 font-size: 2em;
611 line-height: 1;
612 }
613 .wp-subscription-hero-title {
614 font-size: 2em;
615 font-weight: bold;
616 color: #fff;
617 line-height: 1.2;
618 }
619 .wp-subscription-hero-btn {
620 z-index: 1;
621 background: #fff;
622 color: #2196f3;
623 font-weight: 600;
624 font-size: 1.1em;
625 padding: 16px 32px;
626 border-radius: 8px;
627 text-decoration: none;
628 box-shadow: 0 2px 8px rgba(33, 150, 243, 0.08);
629 transition:
630 background 0.18s,
631 color 0.18s,
632 transform 0.18s;
633 border: none;
634 outline: none;
635 display: inline-block;
636 text-align: center;
637 }
638 .wp-subscription-hero-btn:hover {
639 background: #e3f0fd;
640 color: #1565c0;
641 transform: translateY(-2px) scale(1.03);
642 }
643
644 /* Bulk Actions Styling */
645 .tablenav {
646 margin: 8px 0 16px 0;
647 display: flex;
648 align-items: center;
649 justify-content: space-between;
650 }
651
652 .tablenav .bulkactions {
653 display: flex;
654 align-items: center;
655 gap: 8px;
656 }
657
658 .tablenav select {
659 min-width: 120px;
660 }
661
662 .tablenav .button {
663 margin: 0;
664 }
665
666 /* Checkbox styling */
667 .wp-subscription-modern-table input[type="checkbox"] {
668 margin: 0;
669 }
670
671 /* Trash row styling */
672 .wp-subscription-modern-table tr[data-status="trash"] {
673 opacity: 0.7;
674 }
675
676 .wp-subscription-modern-table tr[data-status="trash"]:hover {
677 opacity: 1;
678 }
679
680 /* Empty Trash button styling */
681 .button-link-delete {
682 color: #d63638 !important;
683 text-decoration: none;
684 border: 1px solid #d63638;
685 border-radius: 4px;
686 padding: 4px 12px;
687 font-size: 13px;
688 line-height: 1.4;
689 transition: all 0.2s;
690 }
691
692 .button-link-delete:hover {
693 background: #d63638;
694 color: #fff !important;
695 text-decoration: none;
696 }
697