Updated design settings page

- Changed modal copy
- Increased menu transition speed
- Updated sidenav tabs visually
This commit is contained in:
Sanne de Vries 2021-10-20 16:44:54 +02:00
parent 01afeaa90e
commit 3f642eeb7c
4 changed files with 13 additions and 17 deletions

View File

@ -1,7 +1,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="theme-validation-container"> <div class="theme-validation-container">
<header class="modal-header" data-test-modal="upload-theme"> <header class="modal-header" data-test-modal="upload-theme">
<h1>{{if this.installSuccess "Theme installed and activated" "Install theme"}}</h1> <h1>{{if this.installSuccess "Success" "Install theme"}}</h1>
</header> </header>
<button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button> <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>

View File

@ -207,7 +207,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
height: 100%; height: 100%;
transition: transform 800ms ease; transition: transform 400ms ease;
} }
.gh-nav-main-enter-active, .gh-nav-main-enter-active,

View File

@ -1431,7 +1431,7 @@ p.theme-validation-details {
} }
.gh-nav-design .gh-nav-menu-title:hover { .gh-nav-design .gh-nav-menu-title:hover {
background: var(--mainmenu-color-hover-bg); background: none !important;
} }
.gh-nav-design .gh-nav-menu-title:focus, .gh-nav-design .gh-nav-menu-title:focus,
@ -1455,13 +1455,12 @@ p.theme-validation-details {
} }
.gh-nav-design-tab:hover { .gh-nav-design-tab:hover {
background: var(--mainmenu-color-hover-bg); color: var(--black);
} }
.gh-nav-design-tab.active { .gh-nav-design-tab.active {
color: var(--black); color: var(--black);
font-weight: 600; font-weight: 600;
background: var(--mainmenu-color-hover-bg);
border-radius: var(--border-radius) var(--border-radius) 0 0; border-radius: var(--border-radius) var(--border-radius) 0 0;
} }
@ -1534,9 +1533,13 @@ p.theme-validation-details {
padding: 12px 0; padding: 12px 0;
} }
.gh-nav-design .gh-setting-first {
padding-bottom: 12px;
}
.gh-nav-design .gh-setting-title { .gh-nav-design .gh-setting-title {
font-size: 1.45rem; font-size: 1.3rem;
font-weight: 500; font-weight: 600;
} }
.gh-nav-design .gh-setting-action { .gh-nav-design .gh-setting-action {
@ -1802,17 +1805,12 @@ p.theme-validation-details {
text-transform: uppercase; text-transform: uppercase;
} }
.gh-theme-directory-footer-container {
width: 100%;
border-top: 1px solid var(--main-color-area-divider)
}
.gh-theme-directory-footer { .gh-theme-directory-footer {
display: block; display: block;
padding: 58px var(--main-layout-content-sidepadding); padding: 58px var(--main-layout-content-sidepadding);
color: var(--darkgrey-l1); color: var(--darkgrey-l1);
font-size: 1.6rem; font-size: 1.6rem;
background: var(--main-color-content-greybg);
} }
.gh-theme-directory-footer .link { .gh-theme-directory-footer .link {

View File

@ -42,8 +42,6 @@
</section> </section>
</section> </section>
<section class="gh-theme-directory-footer-container"> <section class="gh-theme-directory-footer">
<div class="gh-theme-directory-footer"> See more themes, free and premium, in <a href="https://ghost.org/themes/" target="_blank" rel="noopener noreferrer" class="link">our official marketplace →</a>
See more themes, free and premium, in <a href="https://ghost.org/themes/" target="_blank" rel="noopener noreferrer" class="link">our official marketplace →</a>
</div>
</section> </section>