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

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