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

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