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

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