Ghost/ghost/admin/app/styles/layouts/users.css
Farhad 5552a3edc0 🎨 Improve layout of team invites list at mobile sizes (#813)
refs https://github.com/TryGhost/Ghost/issues/8744
- adjust padding of `.apps-card-meta` at mobile sizes
- adjust title font-size of `.apps-card-title` at mobile sizes
- adjust wrapping behaviour of actions and status badge of invites on team screen
2017-08-17 12:03:20 +01:00

145 lines
2.8 KiB
CSS

/* Users /ghost/settings/users/
/* ---------------------------------------------------------- */
.gh-invited-users .apps-grid-cell:hover {
background: none;
}
.gh-invited-users .gh-badge {
text-transform: none;
}
.user-list-item-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-right: 15px;
width: 40px;
height: 40px;
background: #dfe1e3;
border-radius: 100%;
color: transparent;
font-size: 0;
}
.user-list-item-icon svg {
fill: var(--midgrey);
height: 14px;
width: auto;
}
.user-list-item-figure {
position: relative;
display: block;
width: 40px;
height: 40px;
margin-right: 15px;
background-position: center center;
background-size: cover;
border-radius: 100%;
box-shadow: #fff 0 0 0 3px;
}
.user-list-item-figure img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.gh-team .apps-configured {
flex-wrap: wrap;
justify-content: flex-end;
}
.gh-team .apps-configured .gh-badge {
margin-left: 0.75em;
}
/* Role Labels
/* ---------------------------------------------------------- */
.gh-badge.owner {
border: color(var(--darkgrey) blackness(+8%)) 1px solid;
background: linear-gradient(
color(var(--darkgrey) whiteness(+10%)),
color(var(--darkgrey) blackness(+4%))
);
}
.gh-badge.administrator {
border: color(var(--red) blackness(+8%)) 1px solid;
background: linear-gradient(
color(var(--red) whiteness(+10%)),
color(var(--red) blackness(+4%))
);
}
.gh-badge.editor {
border: color(var(--blue) blackness(+8%)) 1px solid;
background: linear-gradient(
color(var(--blue) whiteness(+10%)),
color(var(--blue) blackness(+4%))
);
}
.gh-badge.author {
border: color(var(--lightgrey) blackness(+8%)) 1px solid;
color: color(var(--midgrey) l(+5%));
background: #fff;
}
.gh-badge.suspended {
margin-left: 15px;
border: color(var(--red) blackness(+8%)) 1px solid;
background: linear-gradient(
color(var(--red) whiteness(+10%)),
color(var(--red) blackness(+4%))
);
}
/* User invitation modal
/* ---------------------------------------------------------- */
.invite-new-user .modal-content {
width: 100%;
max-width: 600px;
}
.invite-new-user .form-group {
margin-bottom: 0;
padding: 0;
}
.invite-new-user .form-group label {
position: static;
display: block;
text-align: left;
}
.invite-new-user .form-group:nth-of-type(1) {
float: left;
width: 60%;
}
.invite-new-user .form-group:nth-of-type(2) {
float: left;
margin-left: 10px;
width: 35%;
}
.invite-new-user .form-group input {
width: 100%;
}
.invite-new-user .gh-btn-green {
margin: 0;
width: 100%;
}