tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Admin style refinements (#1234) 

refs. 183e22e0bf

* Refine form inputs and button styles
* Refined Forget link and buttons
* Remove green icon success indicator from login screen
This commit is contained in:
Peter Zimon 2019-06-21 13:52:39 +02:00 committed by GitHub
parent 42345a3c24
commit 48c3774456
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 63 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/styles/components/publishmenu.css
View File

@ -163,7 +163,7 @@
position: relative;
margin: 7px 0 4px;
padding: 6px 8px;
border: transparent 1px solid;
border: var(--input-border);
border-radius: 3px;
transition: border-color 0.15s linear;
background: var(--input-bg-color);

2
app/styles/components/settings-menu.css
View File

@ -155,7 +155,7 @@
}
.settings-menu-content textarea.gh-input {
font-size: 1.4rem;
font-size: 1.5rem;
line-height: 1.4em;
}

9
app/styles/layouts/auth.css
View File

@ -37,20 +37,25 @@
border-left: color-mod(var(--lightgrey) l(-5%) s(-10%)) 1px solid;
border-radius: 0;
}
.forgotten-link span {
height: 19px;
font-size: 1.1rem;
font-size: 1.2rem;
line-height: 19px;
padding: 0 11px 0 12px;
margin-top: -1px;
color: var(--midlightgrey);
}
.forgotten-link:hover {
border-left: color-mod(var(--lightgrey) l(-15%) s(-10%)) 1px solid;
color: color-mod(var(--blue) l(-10%));
text-decoration: none;
}
.forgotten-link:hover span {
color: var(--blue);
}
.forgotten-link:active {
box-shadow: none;
text-decoration: underline;

8
app/styles/layouts/flow.css
View File

@ -354,7 +354,7 @@
.gh-flow-content input {
padding: 10px 10px 10px 30px;
font-size: 1.4rem;
font-size: 1.5rem;
line-height: 1.4em;
font-weight: 400;
}
@ -408,10 +408,10 @@
.gh-flow-invite textarea {
background: var(--input-bg-color) url(img/invite-placeholder.png) 10px 8px no-repeat;
background-size: 185px 32px;
background-size: 203px 35px;
border: var(--input-border);
box-shadow: none; /* Remove some default styling for Firefox (required attribute) */
font-size: 1.4rem;
font-size: 1.5rem;
line-height: 1.8rem;
}
@ -448,7 +448,7 @@
font-size: 1.2rem;
}
.gh-flow-content .success .gh-input-icon svg {
.gh-flow-content form:not(.gh-signin) .success .gh-input-icon svg {
fill: var(--green);
}

15
app/styles/layouts/main.css
View File

@ -66,6 +66,21 @@
border: 1px solid color-mod(var(--main-bg-color) l(-8%));
}
.gh-user-name {
margin: -2px 8px 5px 0;
word-break: break-all;
font-weight: 600;
line-height: 1.1em;
}
.gh-user-email {
margin: -1px 8px 0 0;
word-break: break-all;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.1em;
color: var(--middarkgrey);
}
/* Global Nav
/* ---------------------------------------------------------- */

46
app/styles/patterns/buttons.css
View File

@ -25,9 +25,9 @@
display: block;
overflow: hidden;
padding: 0 11px;
height: 29px;
font-size: 1.3rem !important;
line-height: 29px;
height: 33px;
font-size: 1.3rem;
line-height: 33px;
font-weight: 400;
text-align: center;
letter-spacing: 0.2px;
@ -109,7 +109,7 @@ fieldset[disabled] .gh-btn {
/* The background of the button creates 1px gradient border */
.gh-btn-blue,
.gh-btn-blue:hover {
border: 0;
border: 1px solid color-mod(var(--blue) s(-5%));
color: #fff;
fill: #fff;
box-shadow: none;
@ -117,15 +117,17 @@ fieldset[disabled] .gh-btn {
}
.gh-btn-blue:hover {
box-shadow: 0 4px 5px -3px rgba(0,0,0,.18);
box-shadow: none;
}
/* 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%)));
font-weight: 500;
height: 31px;
line-height: 31px;
}
.gh-btn-blue:hover span {
background: linear-gradient(color-mod(var(--blue) l(+9%) s(-1%)), color-mod(var(--blue) l(-3%) saturation(-3%)));
}
/* When clicked or focused with keyboard */
@ -145,7 +147,7 @@ fieldset[disabled] .gh-btn {
/* The background of the button creates 1px gradient border */
.gh-btn-green,
.gh-btn-green:hover {
border: 0;
border: 1px solid color-mod(var(--green) s(-5%));
color: #fff;
fill: #fff;
box-shadow: none;
@ -153,15 +155,17 @@ fieldset[disabled] .gh-btn {
}
.gh-btn-green:hover {
box-shadow: 0 4px 5px -3px rgba(0,0,0,.1);
box-shadow: none;
}
/* 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(-6%) s(+5%)));
background: linear-gradient(color-mod(var(--green) l(+6%) s(-2%)), color-mod(var(--green) l(-8%) s(+5%)));
font-weight: 500;
height: 31px;
line-height: 31px;
}
.gh-btn-green:hover span {
background: linear-gradient(color-mod(var(--green) l(+9%) s(-1%)), color-mod(var(--green) l(-3%) saturation(-3%)));
}
/* When clicked or focused with keyboard */
@ -182,7 +186,7 @@ fieldset[disabled] .gh-btn {
/* The background of the button creates 1px gradient border */
.gh-btn-red,
.gh-btn-red:hover {
border: 0;
border: 1px solid color-mod(var(--red) s(-5%));
color: #fff;
fill: #fff;
box-shadow: none;
@ -190,7 +194,7 @@ fieldset[disabled] .gh-btn {
}
.gh-btn-red:hover {
box-shadow: 0 4px 5px -3px rgba(0,0,0,.18);
box-shadow: none;
}
/* The background of the span is the main visual element */
@ -202,8 +206,10 @@ fieldset[disabled] .gh-btn {
color-mod(var(--red) l(-4%) saturation(-10%))
);
font-weight: 500;
height: 31px;
line-height: 31px;
}
.gh-btn-red:hover span {
background: linear-gradient(color-mod(var(--red) l(+7%) s(-1%)), color-mod(var(--red) l(-5%) saturation(-3%)));
}
/* When clicked or focused with keyboard */
@ -243,8 +249,8 @@ fieldset[disabled] .gh-btn {
color-mod(var(--darkgrey) l(-4%) saturation(-10%))
);
font-weight: 500;
height: 31px;
line-height: 31px;
height: 35px;
line-height: 35px;
}
/* When clicked or focused with keyboard */
@ -274,8 +280,8 @@ fieldset[disabled] .gh-btn {
}
.gh-btn-white span {
height: 31px;
line-height: 31px;
height: 35px;
line-height: 35px;
}
.gh-btn-strong {

11
app/styles/patterns/forms.css
View File

@ -38,12 +38,12 @@ input {
::-webkit-input-placeholder {
color: color-mod(var(--midgrey) l(+18%));
font-weight: 300;
font-weight: 400;
}
:-ms-input-placeholder {
color: color-mod(var(--midgrey) l(+18%));
font-weight: 300;
font-weight: 400;
}
.error .response {
@ -68,8 +68,9 @@ input {
.form-group p {
margin: 4px 0 0 0;
color: var(--midlightgrey);
color: var(--midgrey);
font-size: 1.25rem;
font-weight: 400;
}
.form-group h3 {
@ -127,12 +128,12 @@ input {
select {
display: block;
width: 100%;
height: 31px;
height: 38px;
padding: 6px 12px;
border: var(--input-border);
background: var(--input-bg-color);
color: var(--darkgrey);
font-size: 1.4rem;
font-size: 1.5rem;
line-height: 1em;
font-weight: 400;
user-select: text;

2
app/styles/patterns/global.css
View File

@ -26,7 +26,7 @@
/* Inputs */
--input-bg-color: var(--white);
--input-border: color-mod(var(--whitegrey) h(+7) s(-12%) l(-4%)) 1px solid;
--input-border: color-mod(var(--lightgrey) l(-5%) s(-10%)) 1px solid;
}
/* Colour classes

4
app/templates/components/gh-nav-menu.hbs
View File

@ -100,8 +100,8 @@
<div class="flex-auto flex items-center">
<div class="gh-user-avatar" style={{background-image-style session.user.profileImageUrl}}></div>
<div class="flex flex-column items-start justify-center">
<span class="mr2 {{if session.user.name "mb1"}} fw6 lh-solid word-wrap">{{session.user.name}}</span>
<span class="mr2 fw4 f8 middarkgrey lh-solid word-wrap">{{session.user.email}}</span>
<span class="gh-user-name {{if session.user.name "mb1"}}">{{session.user.name}}</span>
<span class="gh-user-email">{{session.user.email}}</span>
</div>
</div>
{{svg-jar "arrow-down" class="w3 mr1 fill-darkgrey"}}

BIN
public/assets/img/invite-placeholder.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 15 KiB