diff --git a/ghost/admin/app/styles/components/browser-preview.css b/ghost/admin/app/styles/components/browser-preview.css index e0bf343bc0..d7f24f78bc 100644 --- a/ghost/admin/app/styles/components/browser-preview.css +++ b/ghost/admin/app/styles/components/browser-preview.css @@ -25,7 +25,7 @@ } .gh-browserpreview-browser { - background: var(--whitegrey-d1); + background: var(--whitegrey-l1); border-top-left-radius: 3px; border-top-right-radius: 3px; } @@ -49,12 +49,11 @@ display: block; padding: 0; margin: 0; - margin-right: 8px; - background: var(--midgrey); - border-radius: 999px; - width: 12px; - height: 12px; - opacity: 0.3; + margin-right: 10px; + background: var(--lightgrey); + border-radius: 50%; + width: 10px; + height: 10px; } .gh-browserpreview-browser .tabs div { @@ -66,7 +65,7 @@ display: flex; align-items: center; font-size: 1.25rem; - background: var(--whitegrey-l1); + background: var(--white); border-top-left-radius: 7px; border-top-right-radius: 7px; } diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css index 81dabf90d1..445bfe204f 100644 --- a/ghost/admin/app/styles/layouts/main.css +++ b/ghost/admin/app/styles/layouts/main.css @@ -1004,7 +1004,8 @@ } .gh-canvas-header { - margin: 0; + margin: 0 calc(-1 * var(--main-layout-content-sidepadding)); + padding: 0 var(--main-layout-content-sidepadding); position: sticky; top: 0; background: var(--main-bg-color); diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css index 82d236809c..9505bc0b01 100644 --- a/ghost/admin/app/styles/layouts/settings.css +++ b/ghost/admin/app/styles/layouts/settings.css @@ -1627,6 +1627,62 @@ p.theme-validation-details { padding: 8px 0 0; } +.theme-directory-labs { + display: grid; + justify-content: space-between; + grid-template-columns: 1fr 1fr 1fr; + grid-column-gap: 40px; + grid-row-gap: 64px; + max-width: 1320px; + margin: 0 0 24px; +} + +.gh-theme-toolbar { + position: relative; + width: 100%; + height: 28px; + padding: 0 12px; + background: var(--whitegrey-l1); + border-radius: 3px 3px 0 0; +} + +.gh-theme-toolbar-button { + position: relative; + top: 11px; + display: block; + width: 6px; + height: 6px; + background: var(--lightgrey); + border-radius: 50%; +} + +.gh-theme-toolbar-button::before, +.gh-theme-toolbar-button::after { + content: ""; + position: absolute; + width: 6px; + height: 6px; + background: var(--lightgrey); + border-radius: 50%; +} + +.gh-theme-toolbar-button::before { + left: 12px; +} + +.gh-theme-toolbar-button::after { + left: 24px; +} + +.td-item-screenshot-labs { + line-height: 0; + border-radius: 0 0 3px 3px; +} + +.td-item-screenshot-labs img { + border-radius: 0 0 3px 3px; +} + .gh-theme-directory-footer-container { width: 100%; background: var(--main-color-content-greybg); @@ -1657,13 +1713,6 @@ p.theme-validation-details { padding-bottom: 0; } -.gh-theme-previewcontainer .site-frame { - width: 133.33333%; - height: 133.33333%; - transform: scale(0.75); - transform-origin: 0 0; -} - /* Membership */ @media (max-width: 1140px) { .gh-setting-members-canvas::before { diff --git a/ghost/admin/app/templates/settings/design/change-theme.hbs b/ghost/admin/app/templates/settings/design/change-theme.hbs index 6eb2b40ede..41c69b38ca 100644 --- a/ghost/admin/app/templates/settings/design/change-theme.hbs +++ b/ghost/admin/app/templates/settings/design/change-theme.hbs @@ -15,10 +15,13 @@ {{/if}}
-
+
{{#each this.marketplaceThemes as |theme|}} -
+
+ +
+
{{theme.name}} Theme
@@ -33,7 +36,7 @@ \ No newline at end of file