PluginProbe
Subscriptions for WooCommerce with Stripe Recurring Payments / trunk
Subscriptions for WooCommerce with Stripe Recurring Payments vtrunk
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 1.5.2 All 60 releases
subscription / assets / css / admin.css

admin.css in Subscriptions for WooCommerce with Stripe Recurring Payments trunk, 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 24px;
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 .wp-submenu a[href*="page=wp-subscription-details"] {
333 display: none !important;
334 }
335
336 /* Table & List Styles */
337 .wp-subscription-list-table {
338 border: none !important;
339 border-radius: 8px;
340 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
341 overflow: hidden;
342 }
343 .wp-subscription-list-table th,
344 .wp-subscription-list-table td {
345 border: none;
346 border-bottom: 1px solid #f0f0f1;
347 background: #fff;
348 }
349 .wp-subscription-list-table tr:last-child td {
350 /* border-bottom: none; */
351 }
352
353 .wp-subscription-list-table .button-small {
354 font-size: 13px;
355 padding: 5px 14px;
356 border-radius: 5px;
357 }
358
359 /* Remove default table border */
360 .wp-subscription-list-table {
361 border-collapse: separate !important;
362 border-spacing: 0;
363 }
364
365 /* Row Actions on Title Hover */
366 .wp-subscription-title-wrap {
367 position: relative;
368 }
369 .wp-subscription-row-actions {
370 visibility: hidden;
371 gap: 8px;
372 display: flex;
373 }
374 .wp-subscription-title-wrap:hover .wp-subscription-row-actions {
375 visibility: visible;
376 }
377 .wp-subscription-row-actions a {
378 color: #2271b1;
379 font-size: 13px;
380 text-decoration: none;
381 padding: 2px 8px;
382 border-radius: 4px;
383 background: #f0f6ff;
384 transition:
385 background 0.2s,
386 color 0.2s;
387 }
388 .wp-subscription-row-actions a:hover {
389 background: #2271b1;
390 color: #fff;
391 }
392
393 /* =====================
394 Subscriptions List Page
395 ===================== */
396 .wp-subscription-title-wrap:hover .wp-subscription-row-actions {
397 opacity: 1 !important;
398 pointer-events: auto !important;
399 }
400 .wp-subscription-row-actions {
401 display: flex;
402 align-items: center;
403 gap: 8px;
404 background: none;
405 box-shadow: none;
406 position: static;
407 padding: 0;
408 border-radius: 0;
409 white-space: nowrap;
410 }
411 .wp-subscription-row-actions a {
412 color: #2271b1;
413 text-decoration: none;
414 font-size: 13px;
415 padding: 2px 4px;
416 transition: color 0.15s;
417 }
418 .wp-subscription-row-actions a[style*="color:#d93025"] {
419 color: #d93025 !important;
420 }
421 .wp-subscription-modern-table {
422 border-radius: 10px;
423 overflow: hidden;
424 background: #fff;
425 border: none !important;
426 box-shadow: none !important;
427 }
428 .wp-subscription-modern-table thead tr {
429 background: #e6f0fa !important;
430 border-bottom: 2px solid #b6d4f7 !important;
431 }
432 .wp-subscription-modern-table th {
433 font-weight: 600 !important;
434 color: #1e293b !important;
435 background: none !important;
436 }
437 .wp-subscription-modern-table th,
438 .wp-subscription-modern-table td {
439 border: none !important;
440 padding: 14px 18px !important;
441 background: none !important;
442 }
443 .wp-subscription-modern-table tr {
444 border-bottom: 1px solid #f1f3f7 !important;
445 transition: background 0.18s;
446 }
447 .wp-subscription-modern-table tr:last-child {
448 border-bottom: none !important;
449 }
450 .wp-subscription-modern-table tbody tr:hover {
451 background: #f0f6ff !important;
452 box-shadow: none !important;
453 z-index: 1;
454 }
455 .subscrpt-id-link {
456 color: #2563eb;
457 font-weight: 600;
458 text-decoration: none;
459 transition: color 0.16s;
460 }
461 .subscrpt-id-link:hover {
462 color: #1e40af;
463 text-decoration: underline;
464 }
465 .subscrpt-id-title {
466 font-size: 11px;
467 color: #888;
468 margin-top: 2px;
469 line-height: 1.3;
470 max-width: 120px;
471 white-space: nowrap;
472 overflow: hidden;
473 text-overflow: ellipsis;
474 }
475
476 /* Subscriptions List Page Layout */
477 .wp-subscription-admin-content.list-page {
478 max-width: 1240px;
479 margin: 32px auto 0 auto;
480 background: #fff;
481 padding: 0px 24px;
482 border-radius: 12px;
483 }
484
485 /* Subscription list: toolbar sits on WP admin gray, table card is the white surface */
486 .wp-subscription-admin-content.list-page.subscrpt-subs-list {
487 background: transparent;
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