diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss index f4dc4de9db3..52cabdcfe8c 100644 --- a/app/assets/stylesheets/wizard.scss +++ b/app/assets/stylesheets/wizard.scss @@ -71,12 +71,10 @@ body.wizard { padding: 0; border: 1px solid var(--primary-low); border-radius: 8px; - padding: 2em 3em; + padding: 2em; - @include breakpoint("mobile-extra-large") { + @include breakpoint("large") { padding: 2em 1.5em; - max-width: 99%; - margin: 1.5em auto; } &__step { @@ -85,7 +83,7 @@ body.wizard { min-width: 35%; width: 100%; - @include breakpoint("mobile-extra-large") { + @include breakpoint("large") { max-width: 95%; } @@ -129,20 +127,6 @@ body.wizard { } } - &__step.branding .wizard-container__fields { - padding-right: 0; - display: flex; - flex-wrap: wrap; - gap: 0 2em; - - .wizard-container__field { - flex: 1 1 45%; - @include breakpoint("large") { - flex: 1 1 100%; - } - } - } - &__step.branding .wizard-container__field { @include breakpoint("mobile-extra-large") { max-width: 100%; @@ -205,6 +189,12 @@ body.wizard { box-sizing: border-box; margin-right: 1em; + @media only screen and (max-device-width: 568px) { + width: 80%; + margin-left: auto; + margin-right: auto; + } + + .wizard-container__fields { padding: 1em; background: var(--primary-very-low); @@ -348,7 +338,6 @@ body.wizard { display: flex; align-items: center; font-weight: bold; - margin-right: -1.5em; @include breakpoint("mobile-extra-large") { margin-right: 0; @@ -544,7 +533,7 @@ body.wizard { display: flex; justify-content: space-between; align-items: center; - @media only screen and (max-device-width: 568px) { + @include breakpoint("mobile-extra-large") { flex-direction: column; justify-content: center; align-items: stretch; @@ -592,7 +581,10 @@ body.wizard { &__description.extra { color: var(--primary-high); font-size: var(--font-up-1); - margin: 0.25em 0 0.5em 0; + margin: 0.25em 0 0.5em 3.5em; + @media only screen and (max-device-width: 568px) { + margin-left: 2em; + } } &__text-input { @@ -607,6 +599,10 @@ body.wizard { transition: border-color 0.5s; } + &__dropdown { + width: 100%; + } + &__dropdown .select-kit-header:not(.btn) { border-radius: 4px; } @@ -628,8 +624,8 @@ body.wizard { display: inline-block; background: var(--primary-low-mid); border-radius: 16px; - width: 58px; - height: 32px; + width: 50px; + height: 28px; margin-right: 0.5em; position: relative; vertical-align: middle; @@ -650,7 +646,7 @@ body.wizard { content: "\2713"; // checkmark color: var(--secondary); top: 4px; - left: 10px; + left: 9px; @media only screen and (max-device-width: 568px) { top: 3px; left: 5px; @@ -661,8 +657,8 @@ body.wizard { &__checkbox-slider:before { background: var(--secondary); border-radius: 50%; - width: 24px; - height: 24px; + width: 20px; + height: 20px; top: 4px; left: 4px; transition: left 0.25s; @@ -681,7 +677,7 @@ body.wizard { background: var(--tertiary); } &__checkbox:checked + .wizard-container__checkbox-slider:before { - left: 30px; + left: 26px; @media only screen and (max-device-width: 568px) { left: 20px; } diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml index 1a65fa27ce8..f6a4943c4c4 100644 --- a/config/locales/server.en.yml +++ b/config/locales/server.en.yml @@ -4929,7 +4929,7 @@ en: title: "Discourse Setup" step: introduction: - title: "Tell us about your community" + title: "About your site" description: "These will be shown on your login and any public pages. You can always change them later." fields: @@ -5000,7 +5000,7 @@ en: label: "Subcategories with Featured Topics" branding: - title: "Community logo" + title: "Site logo" fields: logo: label: "Primary logo"