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

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