mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
Updated theme directory and theme preview
This commit is contained in:
parent
a6a9ecad22
commit
e4c10cbe6c
@ -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;
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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 {
|
||||
|
@ -15,10 +15,13 @@
|
||||
{{/if}}
|
||||
|
||||
<div class="gh-theme-directory-container-labs">
|
||||
<div class="theme-directory">
|
||||
<div class="theme-directory-labs">
|
||||
{{#each this.marketplaceThemes as |theme|}}
|
||||
<LinkTo @route="settings.design.change-theme.view" @model={{theme.name}} class="td-item">
|
||||
<div class="td-item-screenshot relative">
|
||||
<div class="gh-theme-toolbar">
|
||||
<span class="gh-theme-toolbar-button"></span>
|
||||
</div>
|
||||
<div class="td-item-screenshot-labs relative">
|
||||
<img style="object-fit:contain;" src={{theme.image}} alt="{{theme.name}} Theme" />
|
||||
</div>
|
||||
<div class="td-item-desc">
|
||||
@ -33,7 +36,7 @@
|
||||
</section>
|
||||
|
||||
<section class="gh-theme-directory-footer-container">
|
||||
<a href="https://ghost.org/themes/" target="_blank" rel="noopener noreferrer" class="gh-theme-directory-footer">
|
||||
See more themes, free and premium, in <span class="link">our official marketplace →</span>
|
||||
</a>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
Loading…
Reference in New Issue
Block a user