diff --git a/ghost/admin/app/styles/layouts/labs.css b/ghost/admin/app/styles/layouts/labs.css index 10ce518bc8..9ef0138e4e 100644 --- a/ghost/admin/app/styles/layouts/labs.css +++ b/ghost/admin/app/styles/layouts/labs.css @@ -52,6 +52,26 @@ opacity: 0.25; } +.gh-members-stripe-info-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.gh-members-stripe-info-header h4 { + font-weight: 600; + margin: 0; + padding: 0; +} + +.gh-members-stripe-info { + border-radius: 0.9rem; + border: 1px solid var(--whitegrey); + background: var(--whitegrey-l2); + padding: 12px; + width: 380px; +} + .gh-members-stripe-badge { width: 180px; } @@ -60,6 +80,29 @@ color: #555ABF; } +@media (max-width: 500px) { + .gh-members-stripe-info-header { + flex-direction: column; + align-items: stretch; + } + + .gh-members-stripe-info-header h4 { + order: 2; + margin-top: 10px; + padding-top: 10px; + border-top: 1px solid var(--whitegrey); + } + + .gh-members-stripe-badge { + order: 1; + /* margin: -10px 0 0 -10px; */ + } + + .gh-members-stripe-info { + width: 100%; + } +} + .gh-labs-disabled .for-checkbox label, .gh-labs-disabled .for-checkbox .input-toggle-component, .gh-labs-disabled .for-switch label, diff --git a/ghost/admin/app/templates/components/gh-members-lab-setting.hbs b/ghost/admin/app/templates/components/gh-members-lab-setting.hbs index 4f15a25556..fe19df7aa6 100644 --- a/ghost/admin/app/templates/components/gh-members-lab-setting.hbs +++ b/ghost/admin/app/templates/components/gh-members-lab-setting.hbs @@ -12,8 +12,8 @@ {{#liquid-if membersStripeOpen}} -