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

662 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 padding-left: 0 !important;
317 }
318
319 /* Table & List Styles */
320 .wp-subscription-list-table {
321 border: none !important;
322 border-radius: 8px;
323 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
324 overflow: hidden;
325 }
326 .wp-subscription-list-table th,
327 .wp-subscription-list-table td {
328 border: none;
329 border-bottom: 1px solid #f0f0f1;
330 background: #fff;
331 }
332 .wp-subscription-list-table tr:last-child td {
333 /* border-bottom: none; */
334 }
335
336 .wp-subscription-list-table .button-small {
337 font-size: 13px;
338 padding: 5px 14px;
339 border-radius: 5px;
340 }
341
342 /* Remove default table border */
343 .wp-subscription-list-table {
344 border-collapse: separate !important;
345 border-spacing: 0;
346 }
347
348 /* Row Actions on Title Hover */
349 .wp-subscription-title-wrap {
350 position: relative;
351 }
352 .wp-subscription-row-actions {
353 visibility: hidden;
354 gap: 8px;
355 display: flex;
356 }
357 .wp-subscription-title-wrap:hover .wp-subscription-row-actions {
358 visibility: visible;
359 }
360 .wp-subscription-row-actions a {
361 color: #2271b1;
362 font-size: 13px;
363 text-decoration: none;
364 padding: 2px 8px;
365 border-radius: 4px;
366 background: #f0f6ff;
367 transition:
368 background 0.2s,
369 color 0.2s;
370 }
371 .wp-subscription-row-actions a:hover {
372 background: #2271b1;
373 color: #fff;
374 }
375
376 /* =====================
377 Subscriptions List Page
378 ===================== */
379 .wp-subscription-title-wrap:hover .wp-subscription-row-actions {
380 opacity: 1 !important;
381 pointer-events: auto !important;
382 }
383 .wp-subscription-row-actions {
384 display: flex;
385 align-items: center;
386 gap: 8px;
387 background: none;
388 box-shadow: none;
389 position: static;
390 padding: 0;
391 border-radius: 0;
392 white-space: nowrap;
393 }
394 .wp-subscription-row-actions a {
395 color: #2271b1;
396 text-decoration: none;
397 font-size: 13px;
398 padding: 2px 4px;
399 transition: color 0.15s;
400 }
401 .wp-subscription-row-actions a[style*="color:#d93025"] {
402 color: #d93025 !important;
403 }
404 .wp-subscription-modern-table {
405 border-radius: 10px;
406 overflow: hidden;
407 background: #fff;
408 border: none !important;
409 box-shadow: none !important;
410 }
411 .wp-subscription-modern-table thead tr {
412 background: #e6f0fa !important;
413 border-bottom: 2px solid #b6d4f7 !important;
414 }
415 .wp-subscription-modern-table th {
416 font-weight: 600 !important;
417 color: #1e293b !important;
418 background: none !important;
419 }
420 .wp-subscription-modern-table th,
421 .wp-subscription-modern-table td {
422 border: none !important;
423 padding: 14px 18px !important;
424 background: none !important;
425 }
426 .wp-subscription-modern-table tr {
427 border-bottom: 1px solid #f1f3f7 !important;
428 transition: background 0.18s;
429 }
430 .wp-subscription-modern-table tr:last-child {
431 border-bottom: none !important;
432 }
433 .wp-subscription-modern-table tbody tr:hover {
434 background: #f0f6ff !important;
435 box-shadow: none !important;
436 z-index: 1;
437 }
438 .subscrpt-id-link {
439 color: #2563eb;
440 font-weight: 600;
441 text-decoration: none;
442 transition: color 0.16s;
443 }
444 .subscrpt-id-link:hover {
445 color: #1e40af;
446 text-decoration: underline;
447 }
448 .subscrpt-id-title {
449 font-size: 11px;
450 color: #888;
451 margin-top: 2px;
452 line-height: 1.3;
453 max-width: 120px;
454 white-space: nowrap;
455 overflow: hidden;
456 text-overflow: ellipsis;
457 }
458
459 /* Subscriptions List Page Layout */
460 .wp-subscription-admin-content.list-page {
461 max-width: 1240px;
462 margin: 32px auto 0 auto;
463 background: #fff;
464 padding: 32px 24px 24px 24px;
465 border-radius: 12px;
466 }
467 .wp-subscription-list-header {
468 margin-bottom: 28px;
469 display: flex;
470 justify-content: space-between;
471 align-items: center;
472 flex-wrap: wrap;
473 gap: 16px;
474 }
475 .wp-subscription-filters {
476 display: flex;
477 align-items: center;
478 gap: 10px;
479 flex-wrap: wrap;
480 flex: 1;
481 }
482 .wp-subscription-bulk-actions {
483 display: flex;
484 align-items: center;
485 gap: 8px;
486 flex-shrink: 0;
487 }
488 .wp-subscription-pagination {
489 display: flex;
490 justify-content: flex-end;
491 align-items: center;
492 gap: 8px;
493 margin-top: 24px;
494 }
495 .wp-subscription-pagination .total {
496 color: #888;
497 font-size: 13px;
498 }
499 .wp-subscription-pagination .goto-label {
500 margin-left: 16px;
501 color: #888;
502 font-size: 13px;
503 }
504 .wp-subscription-pagination form {
505 display: inline-block;
506 margin: 0;
507 }
508 .wp-subscription-pagination input[type="number"] {
509 width: 48px;
510 }
511 .wp-subscription-customer-email {
512 color: #888;
513 font-size: 12px;
514 line-height: 1.3;
515 word-break: break-all;
516 }
517 @keyframes floatY {
518 0% {
519 transform: translateY(0);
520 }
521 100% {
522 transform: translateY(-10px);
523 }
524 }
525 .wp-subscription-admin-box:hover {
526 box-shadow: 0 4px 16px #e0e7ef;
527 transition: box-shadow 0.2s;
528 }
529 .wp-subscription-pro-callout {
530 background: #2271b1 !important;
531 }
532 .wp-subscription-pro-callout h2,
533 .wp-subscription-pro-callout p {
534 color: #fff !important;
535 }
536 .wp-subscription-pro-callout .button-primary {
537 background: #fff !important;
538 color: #2271b1 !important;
539 }
540 .wp-subscription-pro-callout .button-primary:hover {
541 background: #e0e7ef !important;
542 }
543 @media (max-width: 900px) {
544 .wp-subscription-support-resources {
545 grid-template-columns: 1fr !important;
546 }
547 }
548 .wp-subscription-hero-upgrade {
549 position: relative;
550 display: flex;
551 align-items: center;
552 justify-content: space-between;
553 background: #2196f3;
554 border-radius: 12px;
555 padding: 32px 36px;
556 margin-bottom: 28px;
557 overflow: hidden;
558 min-height: 90px;
559 }
560 .wp-subscription-hero-upgrade::before {
561 content: "";
562 position: absolute;
563 inset: 0;
564 background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 40px);
565 opacity: 0.25;
566 pointer-events: none;
567 }
568 .wp-subscription-hero-content {
569 display: flex;
570 align-items: center;
571 gap: 18px;
572 z-index: 1;
573 }
574 .wp-subscription-hero-icon {
575 font-size: 2em;
576 line-height: 1;
577 }
578 .wp-subscription-hero-title {
579 font-size: 2em;
580 font-weight: bold;
581 color: #fff;
582 line-height: 1.2;
583 }
584 .wp-subscription-hero-btn {
585 z-index: 1;
586 background: #fff;
587 color: #2196f3;
588 font-weight: 600;
589 font-size: 1.1em;
590 padding: 16px 32px;
591 border-radius: 8px;
592 text-decoration: none;
593 box-shadow: 0 2px 8px rgba(33, 150, 243, 0.08);
594 transition:
595 background 0.18s,
596 color 0.18s,
597 transform 0.18s;
598 border: none;
599 outline: none;
600 display: inline-block;
601 text-align: center;
602 }
603 .wp-subscription-hero-btn:hover {
604 background: #e3f0fd;
605 color: #1565c0;
606 transform: translateY(-2px) scale(1.03);
607 }
608
609 /* Bulk Actions Styling */
610 .tablenav {
611 margin: 8px 0 16px 0;
612 display: flex;
613 align-items: center;
614 justify-content: space-between;
615 }
616
617 .tablenav .bulkactions {
618 display: flex;
619 align-items: center;
620 gap: 8px;
621 }
622
623 .tablenav select {
624 min-width: 120px;
625 }
626
627 .tablenav .button {
628 margin: 0;
629 }
630
631 /* Checkbox styling */
632 .wp-subscription-modern-table input[type="checkbox"] {
633 margin: 0;
634 }
635
636 /* Trash row styling */
637 .wp-subscription-modern-table tr[data-status="trash"] {
638 opacity: 0.7;
639 }
640
641 .wp-subscription-modern-table tr[data-status="trash"]:hover {
642 opacity: 1;
643 }
644
645 /* Empty Trash button styling */
646 .button-link-delete {
647 color: #d63638 !important;
648 text-decoration: none;
649 border: 1px solid #d63638;
650 border-radius: 4px;
651 padding: 4px 12px;
652 font-size: 13px;
653 line-height: 1.4;
654 transition: all 0.2s;
655 }
656
657 .button-link-delete:hover {
658 background: #d63638;
659 color: #fff !important;
660 text-decoration: none;
661 }
662