PluginProbe
Subscriptions for WooCommerce with Stripe Recurring Payments / 1.5.0
Subscriptions for WooCommerce with Stripe Recurring Payments v1.5.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.5.0, at assets/css/admin.css

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