mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Implemented newsletter customisation in admin preview
Refs https://github.com/TryGhost/Team/issues/2846
This commit is contained in:
Sanne de Vries
parent
86027fdb6f
commit
8eefaee591
6 changed files with 166 additions and 151 deletions
|
|
@ -1,7 +1,14 @@
|
|||
<div class="gh-members-emailpreview-latest-post">
|
||||
<div>
|
||||
<h4>{{@postTitle}}</h4>
|
||||
<p>{{@postExcerpt}}</p>
|
||||
</div>
|
||||
{{#if (feature 'makingItRain')}}
|
||||
<div>
|
||||
<h4 style={{html-safe (concat "color: " @textColor)}}>{{@postTitle}}</h4>
|
||||
<p style={{html-safe (concat "color: " @secondaryTextColor " !important")}}>{{@postExcerpt}}</p>
|
||||
</div>
|
||||
{{else}}
|
||||
<div>
|
||||
<h4>{{@postTitle}}</h4>
|
||||
<p>{{@postExcerpt}}</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="gh-members-emailpreview-latest-post-image" style={{html-safe (concat "background-image: url(" @imgPath ")")}}></div>
|
||||
</div>
|
||||
|
|
@ -7,130 +7,127 @@
|
|||
<p><span class="dark">To:</span> Jamie Larson <jamie@example.com></p>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>accentColor: {{this.accentColor}}</li>
|
||||
<li>backgroundColor: {{this.backgroundColor}}</li>
|
||||
<li>backgroundColorIsDark: {{this.backgroundColorIsDark}}</li>
|
||||
<li>borderColor: {{this.borderColor}}</li>
|
||||
<li>secondaryBorderColor: {{this.secondaryBorderColor}}</li>
|
||||
<li>titleColor: {{this.titleColor}}</li>
|
||||
<li>textColor: {{this.textColor}}</li>
|
||||
<li>secondaryTextColor: {{this.secondaryTextColor}}</li>
|
||||
<li>linkColor: {{this.linkColor}}</li>
|
||||
</ul>
|
||||
|
||||
<div class="gh-members-emailpreview-contents">
|
||||
{{#if @newsletter.headerImage}}
|
||||
<div class="gh-members-emailpreview-header-image">
|
||||
<img src={{@newsletter.headerImage}} alt="" role="presentation">
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if this.showHeader}}
|
||||
<div class={{if (or (not @newsletter.showPostTitleSection) this.showHeaderTitle) "gh-members-emailpreview-header bordered" "gh-members-emailpreview-header"}}>
|
||||
{{#if (and this.settings.icon @newsletter.showHeaderIcon)}}
|
||||
<img src={{this.settings.icon}} alt="" role="presentation" />
|
||||
{{/if}}
|
||||
{{#if this.headerTitle}}
|
||||
<h4>{{this.headerTitle}}</h4>
|
||||
{{/if}}
|
||||
{{#if this.headerSubtitle}}
|
||||
<h5>{{this.headerSubtitle}}</h5>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if @newsletter.showPostTitleSection}}
|
||||
<div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
|
||||
<h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}">Your email newsletter</h2>
|
||||
<div class="gh-members-emailpreview-meta {{if (eq @newsletter.titleAlignment "center") "center-aligned"}}">
|
||||
<p>By {{or this.session.user.name this.session.user.email}}
|
||||
<span>{{moment-format (moment-site-tz) "D MMM YYYY"}}</span>
|
||||
{{#if this.showCommentCta}}
|
||||
<span><a href="javascript:" class="gh-members-emailpreview-comment-link"> {{svg-jar "comment"}}</a></span>
|
||||
{{/if}}
|
||||
</p>
|
||||
<p>
|
||||
<a href="javascript:">View in browser</a>
|
||||
</p>
|
||||
<div class="gh-members-emailpreview-contents" style={{html-safe (concat "background: " this.backgroundColor)}}>
|
||||
<div class="gh-members-emailpreview-border" style={{html-safe (concat "border-color: " this.borderColor)}}>
|
||||
{{#if @newsletter.headerImage}}
|
||||
<div class="gh-members-emailpreview-header-image">
|
||||
<img src={{@newsletter.headerImage}} alt="" role="presentation">
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if @newsletter.showFeatureImage}}
|
||||
<div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
|
||||
<div class="gh-members-emailpreview-featureimage-caption">Feature image caption</div>
|
||||
{{/if}}
|
||||
<div class="gh-members-emailpreview-content {{if (eq @newsletter.bodyFontCategory "sans_serif") "sans-serif"}}">
|
||||
<p>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
|
||||
<p>Over there on the left you’ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we’ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.</p>
|
||||
<p>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
|
||||
</div>
|
||||
|
||||
{{#if (or (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta)}}
|
||||
<div class="gh-members-emailpreview-feedback">
|
||||
<div class="gh-members-emailpreview-feedback-buttons-group">
|
||||
{{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
|
||||
<Modals::Newsletters::Components::FeedbackButton
|
||||
@text="More like this"
|
||||
@icon="thumbs-up" />
|
||||
|
||||
<Modals::Newsletters::Components::FeedbackButton
|
||||
@text="Less like this"
|
||||
@icon="thumbs-down" />
|
||||
{{/if}}
|
||||
{{#if this.showHeader}}
|
||||
<div class={{if (or (not @newsletter.showPostTitleSection) this.showHeaderTitle) "gh-members-emailpreview-header bordered" "gh-members-emailpreview-header"}} style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
|
||||
{{#if (and this.settings.icon @newsletter.showHeaderIcon)}}
|
||||
<img src={{this.settings.icon}} alt="" role="presentation" />
|
||||
{{/if}}
|
||||
|
||||
{{#if this.showCommentCta}}
|
||||
<Modals::Newsletters::Components::FeedbackButton
|
||||
@text="Comment"
|
||||
@icon="comment" />
|
||||
{{#if this.headerTitle}}
|
||||
<h4 style={{html-safe (concat "color: " this.textColor)}}>{{this.headerTitle}}</h4>
|
||||
{{/if}}
|
||||
{{#if this.headerSubtitle}}
|
||||
<h5 style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{this.headerSubtitle}}</h5>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if @newsletter.showLatestPosts}}
|
||||
<div class="gh-members-emailpreview-latest-posts">
|
||||
<h3 class="pb2">Keep reading</h3>
|
||||
<Modals::Newsletters::Components::LatestPost
|
||||
@imgPath="assets/img/latest-posts-1.png"
|
||||
@postTitle="The three latest posts published on your site"
|
||||
@postExcerpt="Posts sent as an email only will never be shown here." />
|
||||
<Modals::Newsletters::Components::LatestPost
|
||||
@imgPath="assets/img/latest-posts-2.png"
|
||||
@postTitle="Displayed at the bottom of each newsletter"
|
||||
@postExcerpt="Giving your readers one more place to discover your stories." />
|
||||
<Modals::Newsletters::Components::LatestPost
|
||||
@imgPath="assets/img/latest-posts-3.png"
|
||||
@postTitle="To keep your work front and center"
|
||||
@postExcerpt="Making sure that your audience stays engaged." />
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if @newsletter.showSubscriptionDetails}}
|
||||
<div class="gh-members-emailpreview-subscription-details">
|
||||
<h4 class="pb2">Subscription details</h4>
|
||||
<p class="pb4">You are receiving this because you are a <strong>paid subscriber</strong> to The Local Host. Your subscription will renew on {{this.renewDateString}}.</p>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<p>Name: Jamie Larson</p>
|
||||
<p>Email: jamie@example.com</p>
|
||||
<p>Member since: {{this.todayString}}</p>
|
||||
{{/if}}
|
||||
{{#if @newsletter.showPostTitleSection}}
|
||||
<div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
|
||||
<h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}" style={{html-safe (concat "color: " this.titleColor)}}>Your email newsletter</h2>
|
||||
<div class="gh-members-emailpreview-meta {{if (eq @newsletter.titleAlignment "center") "center-aligned"}}">
|
||||
<p style={{html-safe (concat "color: " this.secondaryTextColor)}}>By {{or this.session.user.name this.session.user.email}}
|
||||
<span style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{moment-format (moment-site-tz) "D MMM YYYY"}}</span>
|
||||
{{#if this.showCommentCta}}
|
||||
<span style={{html-safe (concat "color: " this.secondaryTextColor)}}><a href="javascript:" class="gh-members-emailpreview-comment-link"
|
||||
style={{html-safe (if this.backgroundColorIsDark "filter: brightness(2)")}}> {{svg-jar "comment"}}</a></span>
|
||||
{{/if}}
|
||||
</p>
|
||||
<p>
|
||||
<a href="javascript:" class="gh-members-emailpreview-view-online" style={{html-safe (concat "color: " this.secondaryTextColor)}}>View in browser</a>
|
||||
</p>
|
||||
</div>
|
||||
<a href="#" class="gh-members-emailpreview-subscription-link">Manage subscription →</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if @newsletter.showFeatureImage}}
|
||||
<div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
|
||||
<div class="gh-members-emailpreview-featureimage-caption" style={{html-safe (concat "color: " this.secondaryTextColor)}}>Feature image caption</div>
|
||||
{{/if}}
|
||||
<div class="gh-members-emailpreview-content {{if (eq @newsletter.bodyFontCategory "sans_serif") "sans-serif"}}" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
|
||||
<p style={{html-safe (concat "color: " this.textColor)}}>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
|
||||
<p style={{html-safe (concat "color: " this.textColor)}}>Over there on the left you’ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we’ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.</p>
|
||||
<p style={{html-safe (concat "color: " this.textColor)}}>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
|
||||
</div>
|
||||
|
||||
{{#if (or (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta)}}
|
||||
<div class="gh-members-emailpreview-feedback" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
|
||||
<div class="gh-members-emailpreview-feedback-buttons-group">
|
||||
{{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
|
||||
<Modals::Newsletters::Components::FeedbackButton
|
||||
@text="More like this"
|
||||
@icon="thumbs-up" />
|
||||
|
||||
<Modals::Newsletters::Components::FeedbackButton
|
||||
@text="Less like this"
|
||||
@icon="thumbs-down" />
|
||||
{{/if}}
|
||||
|
||||
{{#if this.showCommentCta}}
|
||||
<Modals::Newsletters::Components::FeedbackButton
|
||||
@text="Comment"
|
||||
@icon="comment" />
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if @newsletter.showLatestPosts}}
|
||||
<div class="gh-members-emailpreview-latest-posts" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
|
||||
<h3 class="pb2" style={{html-safe (concat "color: " this.textColor)}}>Keep reading</h3>
|
||||
<Modals::Newsletters::Components::LatestPost
|
||||
@imgPath="assets/img/latest-posts-1.png"
|
||||
@postTitle="The three latest posts published on your site"
|
||||
@postExcerpt="Posts sent as an email only will never be shown here."
|
||||
@textColor={{html-safe this.textColor}}
|
||||
@secondaryTextColor={{html-safe this.secondaryTextColor}} />
|
||||
<Modals::Newsletters::Components::LatestPost
|
||||
@imgPath="assets/img/latest-posts-2.png"
|
||||
@postTitle="Displayed at the bottom of each newsletter"
|
||||
@postExcerpt="Giving your readers one more place to discover your stories."
|
||||
@textColor={{html-safe this.textColor}}
|
||||
@secondaryTextColor={{html-safe this.secondaryTextColor}} />
|
||||
<Modals::Newsletters::Components::LatestPost
|
||||
@imgPath="assets/img/latest-posts-3.png"
|
||||
@postTitle="To keep your work front and center"
|
||||
@postExcerpt="Making sure that your audience stays engaged."
|
||||
@textColor={{html-safe this.textColor}}
|
||||
@secondaryTextColor={{html-safe this.secondaryTextColor}} />
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if @newsletter.showSubscriptionDetails}}
|
||||
<div class="gh-members-emailpreview-subscription-details" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
|
||||
<h4 class="pb2" style={{html-safe (concat "color: " this.textColor)}}>Subscription details</h4>
|
||||
<p class="pb4" style={{html-safe (concat "color: " this.textColor)}}>You are receiving this because you are a <strong>paid subscriber</strong> to The Local Host. Your subscription will renew on {{this.renewDateString}}.</p>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<p style={{html-safe (concat "color: " this.textColor)}}>Name: Jamie Larson</p>
|
||||
<p style={{html-safe (concat "color: " this.textColor)}}>Email: jamie@example.com</p>
|
||||
<p style={{html-safe (concat "color: " this.textColor)}}>Member since: {{this.todayString}}</p>
|
||||
</div>
|
||||
<a href="#" class="gh-members-emailpreview-subscription-link" style={{html-safe (if this.backgroundColorIsDark "color: #FFF; text-decoration: underline;")}}>Manage subscription →</a>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="gh-members-emailpreview-footer">
|
||||
<div class="gh-members-emailpreview-footercontent" style={{html-safe (concat "color: " this.secondaryTextColor)}}>
|
||||
{{html-safe @newsletter.footerContent}}
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-footersite">
|
||||
<span style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{this.settings.title}} © {{moment-format (moment-site-tz) "YYYY"}} – </span> <a href="javascript:" style={{html-safe (concat "color: " this.secondaryTextColor)}}>Unsubscribe</a>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="gh-members-emailpreview-footer">
|
||||
<div class="gh-members-emailpreview-footercontent">
|
||||
{{html-safe @newsletter.footerContent}}
|
||||
<div class="gh-members-emailpreview-badge {{unless @newsletter.showBadge "hide"}}">
|
||||
<a href="javascript:"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM11.8326 2.33879C6.37785 2.95189 3.95901 5.20797 3.41126 9.74699C3.34896 10.2632 3.22642 10.7805 3.10443 11.2954C2.93277 12.02 2.76221 12.74 2.76221 13.4458C2.76221 17.9885 6.5856 21.556 11.1283 21.556C12.8959 21.556 14.4433 20.8144 15.8756 20.048C19.0536 18.3478 22.0328 16.2597 22.0328 12.5411C22.0328 9.91512 20.1051 7.56932 18.466 5.5747C18.3834 5.47416 18.3015 5.37451 18.2206 5.27577C17.3866 4.25742 14.4333 2.04643 11.8326 2.33879Z" fill="black"/>
|
||||
</svg> <span>Powered by Ghost</span></a>
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-footersite">
|
||||
<span>{{this.settings.title}} © {{moment-format (moment-site-tz) "YYYY"}} – </span> <a href="javascript:">Unsubscribe</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-badge {{unless @newsletter.showBadge "hide"}}">
|
||||
<a href="javascript:"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM11.8326 2.33879C6.37785 2.95189 3.95901 5.20797 3.41126 9.74699C3.34896 10.2632 3.22642 10.7805 3.10443 11.2954C2.93277 12.02 2.76221 12.74 2.76221 13.4458C2.76221 17.9885 6.5856 21.556 11.1283 21.556C12.8959 21.556 14.4433 20.8144 15.8756 20.048C19.0536 18.3478 22.0328 16.2597 22.0328 12.5411C22.0328 9.91512 20.1051 7.56932 18.466 5.5747C18.3834 5.47416 18.3015 5.37451 18.2206 5.27577C17.3866 4.25742 14.4333 2.04643 11.8326 2.33879Z" fill="black"/>
|
||||
</svg> <span>Powered by Ghost</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export default class EditNewsletterPreview extends Component {
|
|||
return textColorForBackgroundColor(this.backgroundColor).hex();
|
||||
}
|
||||
get secondaryTextColor() {
|
||||
return textColorForBackgroundColor(this.backgroundColor).alpha(0.45).toString();
|
||||
return textColorForBackgroundColor(this.backgroundColor).alpha(0.5).toString();
|
||||
}
|
||||
get linkColor() {
|
||||
return this.backgroundIsDark ? '#ffffff' : this.accentColor;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="gh-members-emailpreview gh-members-emailpreview-labs">
|
||||
<div class="gh-members-emailpreview">
|
||||
<div class="gh-members-emailpreview-container">
|
||||
<div class="gh-members-emailpreview-faux">
|
||||
<p>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
{{/if}}
|
||||
</p>
|
||||
<p>
|
||||
<a href="javascript:">View in browser</a>
|
||||
<a href="javascript:" class="gh-members-emailpreview-view-online">View in browser</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1752,13 +1752,13 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
transition: all .15s ease-in-out;
|
||||
transition-delay: .05s;
|
||||
transition-delay: .03s;
|
||||
}
|
||||
|
||||
.gh-email-design-color-picker .gh-btn-group:hover p {
|
||||
opacity: 0;
|
||||
transition: all .15s ease-in-out;
|
||||
transition-delay: .05s;
|
||||
transition-delay: .03s;
|
||||
}
|
||||
|
||||
.gh-btn-group .gh-email-design-color {
|
||||
|
|
@ -1769,28 +1769,27 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
box-shadow: inset 0 0 0 1px var(--lightgrey-l1);
|
||||
transition: all .15s ease-in-out;
|
||||
transition-delay: .05s;
|
||||
transition-delay: .03s;
|
||||
}
|
||||
|
||||
.gh-btn-group:hover .gh-email-design-color {
|
||||
opacity: 1;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin: 0 0 0 5px;
|
||||
/*border: 1px solid transparent;*/
|
||||
margin: 0 0 0 6px;
|
||||
transition: all .15s ease-in-out;
|
||||
transition-delay: .05s;
|
||||
transition-delay: .03s;
|
||||
}
|
||||
|
||||
.gh-email-design-color.gh-btn-group-selected {
|
||||
opacity: 1;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin: 0 0 0 5px;
|
||||
/*border: 1px solid transparent;*/
|
||||
margin: 0 0 0 6px;
|
||||
}
|
||||
|
||||
.gh-email-design-color.gh-btn-group-selected::before {
|
||||
|
|
@ -1804,18 +1803,18 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
border: 2px solid var(--green);
|
||||
border-radius: 999px;
|
||||
transition: all .15s ease-in-out;
|
||||
transition-delay: .05s;
|
||||
transition-delay: .03s;
|
||||
}
|
||||
|
||||
.gh-btn-group:hover .gh-email-design-color.gh-btn-group-selected::before {
|
||||
opacity: 1;
|
||||
transition: all .15s ease-in-out;
|
||||
transition-delay: .05s;
|
||||
transition-delay: .03s;
|
||||
}
|
||||
|
||||
.gh-btn-group .gh-email-design-color.transparent {
|
||||
background: transparent;
|
||||
/*border: 1px solid var(--lightgrey);*/
|
||||
box-shadow: inset 0 0 0 1px var(--lightgrey);
|
||||
}
|
||||
|
||||
.gh-email-design-color.transparent::after {
|
||||
|
|
@ -1833,7 +1832,6 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
|
||||
.gh-btn-group .gh-email-design-color.white {
|
||||
background: var(--white) !important;
|
||||
/*border: 1px solid var(--lightgrey-l1);*/
|
||||
}
|
||||
|
||||
.gh-btn-group .gh-email-design-color.black {
|
||||
|
|
@ -1846,7 +1844,6 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
|
||||
.gh-btn-group .gh-email-design-color.custom {
|
||||
background: conic-gradient(yellow, red, magenta, blue, aqua, lime, yellow) !important;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
|
|
@ -2106,6 +2103,19 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-labs .gh-members-emailpreview-contents {
|
||||
max-width: 624px;
|
||||
margin: 0 auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-border {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-header-image img {
|
||||
display: block;
|
||||
margin: 24px auto 0;
|
||||
|
|
@ -2184,7 +2194,7 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-labs .gh-members-emailpreview-title h2 {
|
||||
.gh-members-emailpreview-title h2 {
|
||||
padding: 0 0 16px;
|
||||
}
|
||||
|
||||
|
|
@ -2226,6 +2236,7 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
.gh-members-emailpreview-meta p span::before{
|
||||
content: "•";
|
||||
padding: 0 4px 0 2px;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-title p span {
|
||||
|
|
|
|||
|
|
@ -968,27 +968,27 @@ a[data-flickr-embed] img {
|
|||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
text-decoration: none;
|
||||
color: #15212A;
|
||||
text-decoration: none !important;
|
||||
color: #15212A !important;
|
||||
}
|
||||
.kg-audio-play-button {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #15212A;
|
||||
color: #15212A !important;
|
||||
border-style: solid;
|
||||
border-width: 8px 0px 8px 16px;
|
||||
border-color: transparent transparent transparent currentColor;
|
||||
}
|
||||
.kg-audio-duration {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-decoration: none !important;
|
||||
font-size: 13px;
|
||||
color: #15171A;
|
||||
color: #15171A !important;
|
||||
}
|
||||
.kg-audio-link {
|
||||
color: #738a94;
|
||||
color: #738a94 !important;
|
||||
}
|
||||
.kg-file-card {
|
||||
width: auto;
|
||||
|
|
@ -1005,8 +1005,8 @@ a[data-flickr-embed] img {
|
|||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
line-height: 1.3em;
|
||||
text-decoration: none;
|
||||
color: #15212A;
|
||||
text-decoration: none !important;
|
||||
color: #15212A !important;
|
||||
}
|
||||
.kg-file-description {
|
||||
display: block;
|
||||
|
|
@ -1015,8 +1015,8 @@ a[data-flickr-embed] img {
|
|||
padding-top: 2px;
|
||||
font-size: 15px;
|
||||
line-height: 1.4em;
|
||||
text-decoration: none;
|
||||
color: #738a94;
|
||||
text-decoration: none !important;
|
||||
color: #738a94 !important;
|
||||
}
|
||||
.kg-file-meta {
|
||||
display: block;
|
||||
|
|
@ -1026,12 +1026,12 @@ a[data-flickr-embed] img {
|
|||
padding-bottom: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4em;
|
||||
text-decoration: none;
|
||||
color: #738a94;
|
||||
text-decoration: none !important;
|
||||
color: #738a94 !important;
|
||||
}
|
||||
.kg-file-name {
|
||||
font-weight: 500;
|
||||
color: #15212A;
|
||||
color: #15212A !important;
|
||||
}
|
||||
.kg-file-thumbnail {
|
||||
position: relative;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue