diff --git a/ghost/admin/app/components/gh-posts-list-item.hbs b/ghost/admin/app/components/gh-posts-list-item.hbs index b3586faeaf..f7b7d00b0b 100644 --- a/ghost/admin/app/components/gh-posts-list-item.hbs +++ b/ghost/admin/app/components/gh-posts-list-item.hbs @@ -3,7 +3,7 @@ {{on "mouseleave" this.mouseLeave}} ...attributes > - +

{{@post.title}}

@@ -22,7 +22,7 @@
{{#if (and this.feature.emailAnalytics (eq @post.displayName "post"))}} - +
{{#if (or @post.email @post.willEmail)}} {{#if (eq @post.email.status "submitted")}} @@ -35,7 +35,7 @@
- + {{#if (and @post.email.trackOpens (eq @post.email.status "submitted"))}}
@@ -51,7 +51,7 @@ {{/if}} - +
{{#if @post.isScheduled}} diff --git a/ghost/admin/app/styles/components/lists.css b/ghost/admin/app/styles/components/lists.css index 3e22ba3d3f..98f9cfa30b 100644 --- a/ghost/admin/app/styles/components/lists.css +++ b/ghost/admin/app/styles/components/lists.css @@ -1,5 +1,5 @@ .gh-list { - margin: 0 0 0 -6px; + margin: 0; padding: 0; list-style: none; background: var(--white); @@ -17,9 +17,13 @@ display: table-row; } -.gh-list-row:not(.header):not(.loading):hover .gh-list-cell, +/* .gh-list-row:not(.header):not(.loading):hover .gh-list-cell, .gh-list-row:not(.header):not(.loading):hover .gh-list-data { background: var(--whitegrey-l2); +} */ + +.gh-list-row:not(.header):not(.loading):hover { + background: linear-gradient(315deg, var(--whitegrey-l2) 60%, var(--white) 100%); } .gh-list-row:not(.header):first-of-type { @@ -52,7 +56,7 @@ .gh-list:not(.tabbed) .gh-list-header:first-child { border-top-left-radius: 5px; - padding-left: 8px; + padding-left: 0; } .gh-list:not(.tabbed) .gh-list-header:last-child { @@ -73,7 +77,7 @@ } .gh-list-row .gh-list-data:first-child { - padding-left: 8px; + padding-left: 0; } .gh-list-data.show-on-hover > *, diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css index 7d80fbbe67..82602d16a4 100644 --- a/ghost/admin/app/styles/layouts/main.css +++ b/ghost/admin/app/styles/layouts/main.css @@ -1,8 +1,8 @@ :root { /* Main menu variables */ - --mainmenu-color-hover-bg: var(--whitegrey-l1); + --mainmenu-color-hover-bg: var(--whitegrey); --mainmenu-color-active: var(--black); - --mainmenu-color-active-bg: var(--whitegrey-l1); + --mainmenu-color-active-bg: var(--whitegrey); --mainmenu-width: 340px; --mainmenu-padding: var(--main-area-padding); } diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css index abfb197790..69229c28b1 100644 --- a/ghost/admin/app/styles/patterns/buttons.css +++ b/ghost/admin/app/styles/patterns/buttons.css @@ -8,11 +8,10 @@ outline: none; background: var(--white); box-shadow: 0 2px 5px -3px rgba(0,0,0,.12); - color: color-mod(var(--midgrey) l(-7%)); + color: var(--darkgrey); text-decoration: none !important; user-select: none; - fill: color-mod(var(--midgrey) l(-7%)); - border: 1px solid color-mod(var(--midgrey) l(+35%) s(+10%)); + fill: var(--white); border-radius: 3px; transition: all 0.2s ease; transition-property: color, border-color, background, width, height, box-shadow; @@ -31,7 +30,7 @@ font-weight: 500; text-align: center; letter-spacing: 0.2px; - border-radius: 4px; + border-radius: 3px; white-space: nowrap; text-overflow: ellipsis; } @@ -114,7 +113,7 @@ fieldset[disabled] .gh-btn { /* Primary button /* ---------------------------------------------------------- */ .gh-btn-primary, -.gh-btn-primary:hover { +.gh-btn-black { background: var(--black) !important; border: none; color: var(--white); @@ -122,7 +121,8 @@ fieldset[disabled] .gh-btn { box-shadow: none; } -.gh-btn-primary:hover { +.gh-btn-primary:hover, +.gh-btn-black:hover { background: color-mod(var(--black) l(-20%)); } @@ -133,7 +133,6 @@ fieldset[disabled] .gh-btn { /* The background of the button creates 1px gradient border */ .gh-btn-blue, .gh-btn-blue:hover { - border: 1px solid color-mod(var(--blue) s(-5%)); color: #fff; fill: #fff; box-shadow: none; @@ -146,22 +145,22 @@ fieldset[disabled] .gh-btn { /* The background of the span is the main visual element */ .gh-btn-blue span { - background: linear-gradient(color-mod(var(--blue) l(+6%) s(-1%)), color-mod(var(--blue) l(-6%) saturation(-8%))); + background: var(--blue); font-weight: 500; } .gh-btn-blue:hover span { - background: linear-gradient(color-mod(var(--blue) l(+9%) s(-1%)), color-mod(var(--blue) l(-3%) saturation(-3%))); + background: color-mod(var(--blue) l(+5%)); } /* When clicked or focused with keyboard */ .gh-btn-blue:active, .gh-btn-blue:focus { - background: color-mod(var(--blue) l(-20%) saturation(-15%)); + background: var(--blue); } .gh-btn-blue:active span, .gh-btn-blue:focus span { - background: color-mod(var(--blue) l(-7%) saturation(-10%)); + background: var(--blue); box-shadow: none; } @@ -171,7 +170,6 @@ fieldset[disabled] .gh-btn { /* The background of the button creates 1px gradient border */ .gh-btn-green, .gh-btn-green:hover { - border: 1px solid color-mod(var(--green) s(-5%)); color: #fff; fill: #fff; box-shadow: none; @@ -184,22 +182,22 @@ fieldset[disabled] .gh-btn { /* The background of the span is the main visual element */ .gh-btn-green span { - background: linear-gradient(color-mod(var(--green) l(+6%) s(-2%)), color-mod(var(--green) l(-8%) s(+5%))); + background: var(--green); font-weight: 500; } .gh-btn-green:hover span { - background: linear-gradient(color-mod(var(--green) l(+9%) s(-1%)), color-mod(var(--green) l(-3%) saturation(-3%))); + background: color-mod(var(--green) l(+5%)); } /* When clicked or focused with keyboard */ .gh-btn-green:active, .gh-btn-green:focus { - background: color-mod(var(--green) l(-9%) saturation(-9%)); + background: var(--green); } .gh-btn-green:active span, .gh-btn-green:focus span { - background: color-mod(var(--green) l(-3%) saturation(-7%)); + background: var(--green); box-shadow: none; } @@ -210,7 +208,6 @@ fieldset[disabled] .gh-btn { /* The background of the button creates 1px gradient border */ .gh-btn-red, .gh-btn-red:hover { - border: 1px solid color-mod(var(--red) s(-5%)); color: #fff; fill: #fff; box-shadow: none; @@ -223,65 +220,22 @@ fieldset[disabled] .gh-btn { /* The background of the span is the main visual element */ .gh-btn-red span { - background: linear-gradient( - color-mod(var(--red) whiteness(+7%)), - color-mod(var(--red) l(-7%) saturation(-10%)) 60%, - color-mod(var(--red) l(-7%) saturation(-10%)) 90%, - color-mod(var(--red) l(-4%) saturation(-10%)) - ); + background: var(--red); font-weight: 500; } .gh-btn-red:hover span { - background: linear-gradient(color-mod(var(--red) l(+7%) s(-1%)), color-mod(var(--red) l(-5%) saturation(-3%))); + background: color-mod(var(--red) l(+5%)); } /* When clicked or focused with keyboard */ .gh-btn-red:active, .gh-btn-red:focus { - background: color-mod(var(--red) l(-20%) saturation(-15%)); + background: var(--red); } .gh-btn-red:active span, .gh-btn-red:focus span { - background: color-mod(var(--red) l(-7%) saturation(-10%)); - box-shadow: none; -} - -/* Black button -/* ---------------------------------------------------------- */ - -/* The background of the button creates 1px gradient border */ -.gh-btn-black, -.gh-btn-black:hover { - border: 0; - color: #fff; - fill: #fff; - box-shadow: none; - transition-property: box-shadow; -} - -.gh-btn-black:hover { - box-shadow: 0 4px 5px -3px rgba(0,0,0,.1); -} - -/* The background of the span is the main visual element */ -.gh-btn-black span { - background: linear-gradient( - color-mod(var(--darkgrey) whiteness(+7%)), - color-mod(var(--darkgrey) l(-7%) saturation(-10%)) 60%, - color-mod(var(--darkgrey) l(-7%) saturation(-10%)) 90%, - color-mod(var(--darkgrey) l(-4%) saturation(-10%)) - ); -} - -/* When clicked or focused with keyboard */ -.gh-btn-black:active, -.gh-btn-black:focus { - background: color-mod(var(--darkgrey) l(-20%) saturation(-15%)); -} -.gh-btn-black:active span, -.gh-btn-black:focus span { - background: color-mod(var(--darkgrey) l(-7%) saturation(-10%)); + background: var(--red); box-shadow: none; } diff --git a/ghost/admin/app/styles/patterns/global.css b/ghost/admin/app/styles/patterns/global.css index ae160755fa..905c5d08c8 100644 --- a/ghost/admin/app/styles/patterns/global.css +++ b/ghost/admin/app/styles/patterns/global.css @@ -13,7 +13,7 @@ /* Secondary colours */ --blue: #23AAF4; - --green: #95DA02; + --green: #45C32E; --purple: #F71D81; --yellow: #FFC701; --red: #f05230;