/* Content /ghost/ /* Header /* ---------------------------------------------------------- */ .gh-contentfilter { display: flex; align-items: center; justify-content: space-between; margin: 0 24px; padding: 0; list-style: none; } .gh-contentfilter li { position: relative; display: inline-block; margin: 0 25px 0 0; } .gh-contentfilter li.active:after { content: ""; display: block; width: 100%; height: 1px; background: var(--darkgrey); position: absolute; top: -1px; opacity: 0.5; } .gh-contentfilter li a { display: block; padding: 13px 1px 0; color: color-mod(var(--midgrey) l(+8%)); font-size: 1.5rem; letter-spacing: 0; font-weight: 400; letter-spacing: 0.3px; } .gh-contentfilter a.active { font-weight: 500; color: var(--darkgrey); } .gh-contentfilter-menu-trigger, .gh-contentfilter-menu-trigger:focus, .gh-contentfilter-menu-trigger--active { background: var(--white); font-size: 1.35rem; font-weight: 400; color: var(--darkgrey); letter-spacing: 0.2px; height: 34px; padding: 6px 12px 6px; margin-right: 8px; outline: none; border: none; border-radius: 2px !important; white-space: nowrap; transition: all 0.25s ease; overflow: hidden; } .gh-contentfilter-menu-trigger:hover { cursor: pointer; color: var(--darkgrey); background: var(--whitegrey); } .gh-contentfilter-selected .gh-contentfilter-menu-trigger, .gh-contentfilter-selected .gh-contentfilter-menu-trigger:hover { font-weight: 600; background: var(--whitegrey-l1); } .gh-contentfilter-selected:not(.no-highlight) .gh-contentfilter-menu-trigger, .gh-contentfilter-selected:not(.no-highlight) .gh-contentfilter-menu-trigger:hover { color: var(--green) } .gh-canvas-header.grey .gh-contentfilter-menu-trigger, .gh-canvas-header.grey .gh-contentfilter-menu-trigger:focus, .gh-canvas-header.grey .gh-contentfilter-menu-trigger--active { background: var(--main-color-content-greybg); } .gh-contentfilter-menu-trigger svg path { stroke: var(--black); } .gh-btn-save-view svg { margin-top: 3px !important; } .gh-contentfilter .ember-power-select-selected-item, .gh-contentfilter .ember-power-select-placeholder { margin-left: 0; } .gh-contentfilter-menu-dropdown { width: 180px; margin-top: 6px; padding: 6px 0; border: none !important; font-size: 1.35rem; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 7px 20px -5px rgba(0,0,0,.15); border-radius: 5px !important; } .gh-contentfilter-menu-dropdown .ember-power-select-search input { display: block !important; margin: 0 14px !important; border-bottom: 1px solid var(--lightgrey) !important; width: calc(100% - 28px) !important; } .gh-contentfilter-menu-dropdown .ember-power-select-option { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gh-contentfilter-sort .gh-contentfilter-menu-trigger .ember-power-select-selected-item::before { content: "Sort by: "; } .gh-contentfilter-actions svg { width: 18px; height: 18px; margin: 2px 0 0; color: var(--black); } .gh-contentfilter-actions svg g { stroke: var(--black); } .gh-contentfilter-button { display: flex; height: 33px; line-height: 33px; background: color-mod(var(--whitegrey-l1) l(-3%)); } /* Content List /* ---------------------------------------------------------- */ .content-list { position: relative; } .gh-posts-list-item { position: relative; } .gh-posts-list-item a:hover { text-decoration: none; } .content-list .gh-list-header.no-padding { padding: 0 !important; } .gh-posts-title-header { padding-left: 10px; } .gh-posts-status-header { width: 140px; } .gh-posts-signups-header, .gh-posts-conversions-header, .gh-posts-sends-header, .gh-posts-opens-header { width: 90px; padding-right: 8px; } .feature-memberAttribution .gh-posts-opens-header { width: 150px; } .gh-list.feature-memberAttribution .gh-posts-status-header { width: 180px; } .gh-list:not(.feature-memberAttribution) .gh-posts-status-header { width: 140px; } .pages-list .gh-posts-conversions-header, .pages-list .gh-posts-sends-header { width: 140px; } .gh-post-list-title { padding-left: 10px; } .gh-post-list-title .gh-lexical-indicator { margin: 2px 8px 0; padding: 0 8px; font-size: 1.2rem; } .gh-post-list-external { width: 13px; height: 13px; margin-left: 6px; opacity: 0; } .gh-post-list-external path { fill: var(--midgrey); } .gh-list-row:hover .gh-post-list-external { opacity: 1; } .gh-post-list-featured { padding: 15px 0px 20px 10px; width: 1px; vertical-align: top; } .gh-post-list-updated, .gh-post-list-author, .gh-post-list-recipients, .gh-post-list-opens, .gh-post-list-signups, .gh-post-list-conversions { color: var(--middarkgrey); font-size: 1.3rem; } .gh-post-list-signups, .gh-post-list-conversions, .gh-post-list-recipients { padding-right: 8px; } /** TODO: improve this hover style */ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:hover > span { opacity: 0.5; } .gh-list .gh-content-entry-title { display: flex; align-items: center; margin: 0 0 3px 0; font-size: 1.6rem; font-weight: 600; } .gh-content-entry-title a { color: var(--darkgrey); } .gh-posts-list-item p { margin: 0 0 1px; font-size: 1.3rem; overflow-wrap: break-word; color: var(--middarkgrey); } .gh-schedule-plan { color: var(--green-d1); } .gh-schedule-subtext { max-width: 200px; } .gh-content-entry-meta { font-size: 1.3rem; color: var(--midlightgrey); } .gh-content-entry-meta .gh-badge { margin-right: 3px; } .gh-content-email-stats-mobile { display: none; } .gh-content-attribution-stats-mobile { display: none; } .gh-content-status-draft, .gh-content-status-published, .gh-content-status-scheduled, .gh-content-status-emailed { display: flex; justify-content: center; align-items: center; height: 20px; padding: 0 9px; } .gh-content-status-published { color: var(--midgrey-d1); background: var(--whitegrey); border-radius: 999px; text-transform: uppercase; font-size: 1.2rem; font-weight: 500; } .gh-content-status-featured { color: var(--blue); text-transform: uppercase; font-size: 1.2rem; font-weight: 500; padding: 0 3px 0 0; } .gh-content-status-featured svg { display: inline-block; width: 12px; height: 12px; margin-left: -4px; } .gh-content-status-featured svg path { fill: var(--blue); } .gh-content-status-emailed { margin: 0; color: var(--midgrey-d1); background: var(--whitegrey); border-radius: 999px; } .feature-memberAttribution .gh-content-status-emailed { margin: 0px 6px; } .gh-content-status-emailed svg, .gh-content-status-published svg, .gh-content-status-scheduled svg { width: 12px; height: 12px; } .gh-content-status-emailed svg path, .gh-content-status-published svg path { stroke: var(--midgrey-d1); stroke-width: 2; } .gh-content-status-scheduled svg path { stroke: var(--green-d2); stroke-width: 2; } .gh-content-status-published svg, .gh-content-status-scheduled svg { margin-left: 6px; } .gh-content-status-emailed.error { background: color-mod(var(--red) a(10%)); } .gh-content-status-emailed.scheduled { background: color-mod(var(--green) a(20%)); } .gh-post-list-plain-status .gh-content-status-draft, .gh-post-list-plain-status .gh-content-status-published, .gh-post-list-plain-status .gh-content-status-scheduled, .gh-post-list-plain-status .gh-content-status-emailed { background: none; color: var(--darkgrey); text-transform: unset; font-size: 1.3rem; font-weight: 500; } .gh-post-list-plain-status .gh-post-status-email { margin-bottom: -1px; margin-left: 4px; } .gh-post-list-plain-status .gh-post-status-email path { stroke: var(--darkgrey) !important; } .gh-post-list-plain-status .gh-post-status-icon { width: 16px; height: 16px; margin: 0 7px 0 0; } .gh-post-list-plain-status .gh-content-status-published .gh-post-status-icon { width: 12px; height: 12px; } .gh-post-list-plain-status .gh-content-status-scheduled .gh-post-status-icon path { stroke: var(--purple) !important; } .gh-post-list-plain-status .gh-content-status-draft .gh-post-status-icon path { stroke: var(--pink) !important; } .gh-post-list-plain-status .gh-content-status-published .gh-post-status-icon path { stroke: var(--midgrey-l1) !important; } .gh-post-list-plain-status .gh-content-status-published, .gh-post-list-plain-status .gh-content-status-emailed { color: var(--midgrey-l1); margin: 0; } .gh-post-list-plain-status .gh-content-status-published .gh-post-status-email path { stroke: var(--midgrey-l1) !important; } .gh-post-list-plain-status .gh-content-status-emailed path { stroke: var(--midgrey-l1) !important; stroke-width: 1.5; } .gh-posts-placeholder { width: 60px; fill: var(--lightgrey); } .gh-pages-placeholder { width: 60px; fill: var(--lightgrey); } .gh-post-list-email { padding: 0 15px 2px; width: 1px; } @media (max-width: 1600px) { .feature-memberAttribution .gh-post-list-status, .feature-memberAttribution .gh-post-list-recipients, .feature-memberAttribution .gh-post-list-opens, .feature-memberAttribution .gh-post-list-signups, .feature-memberAttribution .gh-post-list-conversions { padding-left: 12px; padding-right: 12px; } .feature-memberAttribution .gh-posts-signups-header, .feature-memberAttribution .gh-posts-conversions-header, .feature-memberAttribution .gh-posts-sends-header { width: 80px; } .feature-memberAttribution .gh-posts-opens-header { width: 100px; } } /* Mobile style of post list */ @media (max-width: 1200px) { .feature-memberAttribution .gh-post-list-status, .feature-memberAttribution .gh-post-list-recipients, .feature-memberAttribution .gh-post-list-opens, .feature-memberAttribution .gh-post-list-signups, .feature-memberAttribution .gh-post-list-conversions { padding-left: 0; padding-right: 0; } .feature-memberAttribution .gh-content-status-draft, .feature-memberAttribution .gh-content-status-published, .feature-memberAttribution .gh-content-status-scheduled, .feature-memberAttribution .gh-content-status-emailed { padding-left: 0; padding-right: 12px; } .gh-posts-list-item:not(.gh-posts-list-item-labs) { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--whitegrey); margin: 0; } .gh-posts-list-item:not(.gh-posts-list-item-labs):nth-of-type(2) { border-top-left-radius: 5px; border-top-right-radius: 5px; } .gh-posts-list-item:not(.gh-posts-list-item-labs):hover { background: var(--whitegrey-l2); } .gh-posts-list-item:not(.gh-posts-list-item-labs):hover .gh-list-data { background: none !important; } .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-featured { display: block; order: 1; border-bottom: none; position: absolute; left: -6px; top: 4px; border: none; } .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-title { display: block; order: 2; flex: 1 1 100%; border: none; padding: 20px 0 4px; } .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-status, .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-recipients, .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-opens, .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-signups, .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-conversions { display: inline-block; border: none; padding: 0 4px 20px 0; font-size: 1.3rem; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-status { order: 3; } .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-recipients { order: 4; } .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-opens { order: 5; } .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-signups { order: 6; } .gh-posts-list-item:not(.gh-posts-list-item-labs) .gh-post-list-conversions { order: 7; } .gh-posts-list-item.gh-posts-list-item-labs .gh-post-list-opens, .gh-posts-list-item.gh-posts-list-item-labs .gh-post-list-clicks { display: none; } .gh-post-list-updated { display: inline-block; order: 6; border: none; padding: 0 4px 20px; font-size: 1.3rem; max-width: calc((100% - 140px) * 1/4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gh-post-list-author { display: inline-block; order: 7; border: none; padding: 0 4px 20px 0; font-size: 1.3rem; max-width: calc((100% - 140px) * 3/4);; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gh-post-list-author:before { content: "- by"; } .gh-post-headers, .gh-post-list-actions { display: none; } .gh-content-email-stats { display: none; } .gh-content-email-stats-mobile { display: inherit; padding: 0 0.33em; } .gh-content-attribution-stats { display: none; } .gh-content-attribution-stats-mobile { display: inherit; padding: 0 0.33em; } .posts-list .gh-list-nodata, .pages-list .gh-list-nodata { display: none; } .gh-post-analytics-item .hide-when-small { display: none; } } @media (max-width: 800px) { .post-header { left: 0; } .post-header .gh-canvas-title { left: 25px; } .gh-post-list-updated { display: none; } .gh-post-list-author { max-width: calc(100% - 140px); } } @media (max-width: 430px) { .post-header .view-actions .gh-contentfilter { border-right: 1px solid var(--whitegrey-d1); } .gh-contentfilter-menu:last-of-type { padding-right: 8px; } } @media (min-width: 901px) { .gh-posts-list-item a:after { display: none; } } /* Empty State /* ---------------------------------------------------------- */ .no-posts { background: none; box-shadow: none; border: none !important; } .no-posts + .infinity-loader { padding: 0 !important; } .no-posts-box { position: relative; z-index: 600; display: flex; justify-content: center; align-items: center; margin: 0 auto; padding: 0 0 24px; height: calc(100vh - 200px); } .no-posts-box .no-posts { display: flex; flex-direction: column; align-items: center; margin-top: -32px; } .no-posts-box .no-posts h4 { margin: 32px 0; } /* Keyboard Focus Effects /* ---------------------------------------------------------- */ /* This has to be a pseudo element to sit over the top of everything else in the content list */ .tag-list-content.keyboard-focused:before, .tag-settings.keyboard-focused:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 500; animation: keyboard-focus-style-fade-out 1.5s 1 forwards; pointer-events: none; } /* Post analytics /* --------------------------------------------------------- */ .gh-post-analytics-header { position: relative; margin: 0 0 2.4rem; padding: 0 0 1.6rem; border-bottom: 1px solid var(--whitegrey); } .gh-canvas-title.gh-post-title { max-width: 880px; padding: 12px 0 8px; font-size: 3.1rem; overflow: inherit; white-space: inherit; } .gh-post-analytics-meta { margin: 0; color: var(--midlightgrey-d2); font-size: 1.35rem; } .gh-post-analytics-box { position: relative; display: flex; margin: 0 0 2.4rem; padding: 2.8rem 2.4rem; background: var(--main-color-content-greybg); border-radius: var(--border-radius); } .gh-post-analytics-box.column { display: flex; flex-direction: column; } .gh-post-analytics-box.resources { display: flex; flex-direction: row; gap: 24px; } .gh-post-analytics-resource { padding: 2.4rem; background: var(--white); border-radius: var(--border-radius); box-shadow: 0 1px 4px -1px rgba(0,0,0,.1); transition: all .3s ease-in-out; } .gh-post-analytics-resource:hover { transform: translateY(-4px); transition: all .3s ease-in-out; box-shadow: 0 54px 80px rgba(0,0,0,.07), 0 19.7109px 29.2013px rgba(0,0,0,.0482987), 0 9.56927px 14.1767px rgba(0,0,0,.0389404), 0 4.69103px 6.94968px rgba(0,0,0,.0310596), 0 1.85484px 2.74791px rgba(0,0,0,.0217013) ; } .gh-post-analytics-resource { flex: 1; display: grid; grid-template-columns: 2fr 3fr; grid-gap: 24px; } .gh-post-analytics-resource .thumbnail { border-radius: var(--border-radius); width: 100%; height: auto; background: transparent; background-repeat: no-repeat; background-position: center; background-size: cover; aspect-ratio: 1; filter: brightness(1.08); } .gh-post-analytics-resource p { font-size: 1.5rem; letter-spacing: 0; line-height: 1.55; color: var(--middarkgrey); margin: 0 0 1rem; } .gh-post-analytics-title { margin: 0; padding: 0 0 2px; color: var(--black); font-size: 1.6rem; font-weight: 600; } .gh-post-analytics-item { flex: 1; border-left: 1px solid var(--whitegrey-d1); padding-left: 2rem; padding-right: 2rem; white-space: nowrap; } .gh-post-analytics-item:first-child { border-left: none; padding-left: 0; } .gh-post-analytics-item h3 { margin: 0 0 4px; color: var(--black); font-size: 2.4rem; font-weight: 700; letter-spacing: -.4px; line-height: 1em; white-space: nowrap; } .gh-post-analytics-item h3 sup { top: -0.2em; font-size: 1.7rem; margin: 0 0 0 2px; } .gh-post-analytics-item p { margin: 0; color: var(--midgrey); font-size: 1.3rem; font-weight: 500; letter-spacing: 0; } .gh-post-analytics-item p.strong { font-weight: 600; } .gh-post-analytics-item p:first-letter { text-transform: uppercase; } .gh-links-list { margin: 0; padding: 20px; background: var(--white); box-shadow: 0 1px 4px -1px rgba(0,0,0,0.1); border-radius: var(--border-radius); } .gh-links-list-item:first-child { padding-top: 0; } .gh-links-list-item:last-child { padding-bottom: 0; border-bottom: none; } .gh-links-list-item { display: flex; justify-content: space-between; padding: 1.6rem 0; border-bottom: 1px solid var(--whitegrey); font-size: 1.4rem; font-weight: 500; letter-spacing: 0; text-decoration: none; } .gh-links-list-item a { margin: 0; padding: 0 32px 0 0; color: var(--darkgrey); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; } .gh-links-list-item a:hover { color: var(--midgrey-d2); } .gh-links-list-clicks { margin: 0; color: var(--darkgrey); } /* Post list – LABS /* ---------------------------------------------------------- */ .gh-posts-list-item-labs .gh-list-data { padding: 2rem 0; vertical-align: top; } .gh-posts-list-item-labs:nth-of-type(2) .gh-list-data { border-top: var(--whitegrey) 1px solid; } .gh-posts-list-item-labs .gh-content-entry-title { margin: 0 0 3px; font-size: 1.55rem; font-weight: 600; } .gh-posts-list-item-labs .gh-content-entry-meta, .gh-posts-list-item-labs .gh-content-entry-status { max-width: max-content; font-size: 1.35rem; color: var(--midlightgrey-d2); } .gh-posts-list-item-labs .gh-content-entry-status .draft { display: flex; align-items: center; color: var(--pink); font-weight: 500; } .gh-posts-list-item-labs .gh-content-entry-status .scheduled { display: flex; align-items: center; color: var(--green); font-weight: 500; } .gh-posts-list-item-labs .gh-content-entry-status .status-dot { display: inline-block; width: 6px; height: 6px; margin: 1px 6px 0 0; border-radius: 999px; } .gh-posts-list-item-labs .gh-content-entry-status .scheduled .status-dot { border-color: var(--green); background: var(--green); } .gh-posts-list-item-labs .gh-content-entry-status .draft .status-dot { border-color: var(--pink); background: var(--pink); } .gh-posts-list-item-labs .schedule-details { margin-left: 3px; color: var(--midlightgrey-d1); } .gh-posts-list-item-labs .schedule-details.absolute { position: absolute; transform: translateX(-100%); min-width: max-content; } .gh-content-entry-author, .gh-content-entry-date { display: inline-block; transition: all 1s ease; } .gh-posts-list-item-labs .gh-post-list-clicks, .gh-posts-list-item-labs .gh-post-list-opens, .gh-posts-list-item-labs .gh-post-list-button { width: 120px; } .gh-posts-list-item-labs .gh-content-email-stats { margin: 0 0 3px; color: var(--midlightgrey-d2); font-size: 1.35rem; font-weight: 400; } .gh-posts-list-item-labs .gh-content-email-stats strong { color: var(--black); font-size: 1.5rem; font-weight: 600; } .gh-posts-list-item-labs a.gh-post-list-cta { display: flex; align-items: center; max-width: max-content; margin: -6px 16px 0 0; padding: 8px 16px; background: var(--white); border: 1px solid var(--lightgrey-l1); color: var(--midgrey); border-radius: var(--border-radius); transition: all .2s ease; } .gh-posts-list-item-labs a.gh-post-list-cta.stats.is-hovered { color: var(--green); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .gh-posts-list-item-labs a.gh-post-list-cta.stats.is-hovered:hover { border-color: var(--lightgrey); color: var(--green-d1); } .gh-posts-list-item-labs a.gh-post-list-cta.edit.is-hovered { color: var(--pink-l2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .gh-posts-list-item-labs a.gh-post-list-cta.edit.is-hovered:hover { border-color: var(--lightgrey); color: var(--pink-l1); } .gh-posts-list-item-labs .gh-post-list-cta svg { width: 1.5rem; height: 1.5rem; } .gh-posts-list-item-labs .gh-post-list-cta.edit svg { padding: 1px; } .gh-posts-list-item-labs .gh-post-list-cta svg path { stroke-width: 2; } @media screen and (max-width: 1080px) { .gh-post-analytics-box.resources { flex-direction: column; } } @media screen and (max-width: 1000px) { .gh-post-analytics-box { flex-direction: column; } .gh-post-analytics-item { border-left: 0 none; border-bottom: 1px solid var(--whitegrey-d1); padding-left: 0; padding-bottom: 2rem; padding-top: 2rem; } .gh-post-analytics-item:first-child { padding-top: 0; } .gh-post-analytics-item:last-child { padding-bottom: 0; border-bottom: 0 none; } .gh-post-analytics-item h3 { font-size: 2.8rem; margin-bottom: 2px; } .gh-post-analytics-item h3 sup { top: -0.3em; font-size: 1.8rem; } }