diff --git a/ghost/admin/app/routes/settings/design.js b/ghost/admin/app/routes/settings/design.js index 451acc3d8a..ba364a4b91 100644 --- a/ghost/admin/app/routes/settings/design.js +++ b/ghost/admin/app/routes/settings/design.js @@ -55,6 +55,12 @@ export default class SettingsDesignRoute extends AuthenticatedRoute { this.hasConfirmed = false; } + buildRouteInfoMetadata() { + return { + mainClasses: ['gh-main-fullwidth'] + }; + } + confirmUnsavedChanges() { if (!this.settings.get('hasDirtyAttributes') && !this.customThemeSettings.isDirty) { return Promise.resolve(true); diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css index 310a530055..ae279ead1a 100644 --- a/ghost/admin/app/styles/layouts/settings.css +++ b/ghost/admin/app/styles/layouts/settings.css @@ -458,7 +458,7 @@ font-weight: 700; } -.td-item-desc span { +.td-item-category { display: inline-flex; align-items: center; margin-left: 4px; @@ -1381,7 +1381,7 @@ p.theme-validation-details { align-items: center; margin-bottom: 40px; padding: 6px 0; - color: var(--darkgrey); + color: var(--darkgrey-l1); font-size: 1.35rem; font-weight: 500; letter-spacing: .2px; @@ -1392,14 +1392,22 @@ p.theme-validation-details { display: block; width: 9px; height: 9px; - margin-right: 8px; + margin: 1px 8px 0 0; transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);; } +.gh-nav-menu-back-button svg path { + stroke: var(--darkgrey-l1); +} + .gh-nav-menu-back-button:hover svg { transform: translateX(-3px) } +.gh-nav-menu-back-button:hover svg path { + stroke: var(--black); +} + .gh-nav-menu-back-button:hover { color: var(--black); } @@ -1408,11 +1416,11 @@ p.theme-validation-details { display: flex; align-items: center; overflow: hidden; - margin-bottom: 8px; + margin-bottom: 4px; padding: 8px var(--mainmenu-padding) 8px calc(var(--mainmenu-padding) + 7px); color: var(--black); font-size: 1.5rem; - font-weight: 700; + font-weight: 500; line-height: 1.3em; } @@ -1420,6 +1428,10 @@ p.theme-validation-details { background: var(--mainmenu-color-hover-bg); } +.gh-nav-design .gh-nav-menu-title:focus { + font-weight: 700; +} + .gh-nav-design-tab { display: flex; position: relative; @@ -1453,13 +1465,17 @@ p.theme-validation-details { align-items: center; color: var(--black); font-size: 1.5rem; + font-weight: 500; +} + +.gh-nav-bottom .gh-nav-design-tab:focus span { font-weight: 700; } .gh-nav-bottom .gh-nav-design-tab .active-theme { color: var(--midgrey); font-size: 1.3rem; - font-weight: 400; + font-weight: 400 !important; } .gh-nav-design .gh-nav-list .active svg { @@ -1472,7 +1488,7 @@ p.theme-validation-details { } .gh-nav-design .gh-nav-bottom { - padding: 32px 0; + padding: 40px 0; } .gh-nav-design .gh-nav-bottom svg { @@ -1566,6 +1582,12 @@ p.theme-validation-details { margin-bottom: 1rem; } +.gh-design { + display: flex; + flex-direction: column; + height: 100%; +} + .gh-design-page-preview-mode, .gh-design-page-preview-mode select { height: 34px; @@ -1587,6 +1609,10 @@ p.theme-validation-details { fill: var(--midgrey); } +.gh-design .view-container { + padding-bottom: 0; +} + .gh-themes-container-labs { margin-bottom: 40px; background: var(--main-color-content-greybg); @@ -1699,6 +1725,10 @@ p.theme-validation-details { left: 24px; } +.td-item-labs { + text-align: left !important; +} + .td-item-screenshot-labs { line-height: 0; border-radius: 0 0 3px 3px; @@ -1708,6 +1738,28 @@ p.theme-validation-details { border-radius: 0 0 3px 3px; } +.theme-directory-labs .td-item-desc { + display: flex; + flex-direction: column; +} + +.td-item-name { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 4px; + font-size: 1.6rem; + text-transform: none; +} + +.td-item-labs .td-item-category { + margin-left: 0; + color: var(--midgrey); + font-size: 1.2rem; + font-weight: 500; + text-transform: uppercase; +} + .gh-theme-directory-footer-container { width: 100%; background: var(--main-color-content-greybg); diff --git a/ghost/admin/app/templates/settings/design/change-theme.hbs b/ghost/admin/app/templates/settings/design/change-theme.hbs index b98212271a..eba468044c 100644 --- a/ghost/admin/app/templates/settings/design/change-theme.hbs +++ b/ghost/admin/app/templates/settings/design/change-theme.hbs @@ -17,7 +17,7 @@
{{#each this.themesList as |theme|}} - +
@@ -25,13 +25,15 @@ {{theme.name}} Theme
-
{{theme.name}}
- • {{theme.category}} - {{#if theme.isActive}} - Active - {{else if theme.isDefault}} - Default - {{/if}} +
{{theme.name}} + {{#if theme.isDefault}} + (Default) + {{/if}} + {{#if theme.isActive}} + Active + {{/if}} +
+
{{theme.category}}
{{/each}} diff --git a/ghost/admin/app/templates/settings/design/index.hbs b/ghost/admin/app/templates/settings/design/index.hbs index 739c2e9182..d0c2bbbb08 100644 --- a/ghost/admin/app/templates/settings/design/index.hbs +++ b/ghost/admin/app/templates/settings/design/index.hbs @@ -1,4 +1,4 @@ -
+

Site design

diff --git a/ghost/admin/app/templates/settings/theme.hbs b/ghost/admin/app/templates/settings/theme.hbs index 7d89be8c25..966f19cdf3 100644 --- a/ghost/admin/app/templates/settings/theme.hbs +++ b/ghost/admin/app/templates/settings/theme.hbs @@ -27,7 +27,7 @@
{{theme.name}}
- • {{theme.category}} + • {{theme.category}}
{{/each}} diff --git a/ghost/admin/public/assets/icons/arrow-left-small.svg b/ghost/admin/public/assets/icons/arrow-left-small.svg index 85f4a3908f..20bf9f76ea 100644 --- a/ghost/admin/public/assets/icons/arrow-left-small.svg +++ b/ghost/admin/public/assets/icons/arrow-left-small.svg @@ -1,9 +1,5 @@ - - arrow-left3 - Created with Sketch. -