ore/app/assets/stylesheets/_user.scss
@import 'pallette';
@import 'utils';
// user page
.user-avatar {
@include rounded-corners();
}
.user-avatar-xxs {
width: 26px;
height: 26px;
}
.user-avatar-xs {
width: 32px;
height: 32px;
}
.user-avatar-s {
width: 40px;
height: 40px;
}
.user-avatar-sm {
width: 50px;
height: 50px;
}
.user-avatar-md {
width: 100px;
height: 100px;
}
.list-members .list-group-item, .table-members td {
display: flex;
align-items: center;
justify-content: left;
.user-avatar { margin-right: 5px; }
span, select { margin-left: auto; }
}
.username {
svg {
font-size: 0.6em;
font-weight: normal;
padding: 3px;
}
.action-lock-account:hover, .action-api svg:hover, .user-settings svg:hover {
background-color: gray;
transition: all 0.5s ease;
}
svg { cursor: pointer; }
.action-api, .user-settings { color: #333; }
}
.organization-avatar {
cursor: pointer;
}
.edit-avatar {
position: absolute;
width: 100px;
height: 15px;
background-color: rgba(0, 0, 0, 0.75);
color: white;
text-align: center;
font-size: 10px;
bottom: 9px;
}
#form-avatar input[name="avatar-url"] {
margin-bottom: 10px;
}
.user-header {
@include size(100%, 150px);
padding: 20px;
border-bottom: 1px solid $lighter;
margin-bottom: 40px;
.user-badge {
width: 80%;
position: relative;
display: flex;
align-items: center;
justify-content: left;
.user-avatar { margin-right: 20px; }
}
.user-badge > h1 { float: left; }
.pull-right { @include size(20%, 100%); }
.user-roles li { display: inline; }
.header-body {
@include size(100%, 100%);
position: relative;
margin-top: 4px;
}
.user-badge > img {
float: left;
margin-right: 20px;
}
.user-info {
@include fromBottomRight(0, 0);
text-align: right;
}
.user-roles {
@include fromTopRight(0, 0);
list-style-type: none;
}
.organization-role img {
margin-bottom: 4px;
}
}
.panel-user-info {
.panel-footer > .pull-right { font-size: 16px; }
.panel-user-info .panel-footer > .pull-left { margin-top: 2px; }
tr { height: 42px; }
td > .pull-left { margin-right: 5px; }
td > .pull-right > span { font-size: 12px; }
td > .pull-right > i { font-size: 18px; }
.panel-footer {
height: 34px;
padding: 5px 10px;
}
tr:hover {
background-color: $mainBackground;
cursor: pointer;
}
}
// authors page
.table-users {
tbody > tr > td { vertical-align: middle; }
tbody > tr.authors-footer > td:last-child {
padding: 0;
.btn {
float: right;
border: none;
}
}
thead {
background-color: $dark;
color: #f6cf17;
font-weight: bold;
td:first-child { width: 40px; }
td:not(:first-child) { cursor: pointer; }
td:hover:not(:first-child) { background-color: #222; }
.user-sort { background-color: #292929; }
.o {
float: right;
}
}
}
.notification-controls {
margin-top: 20px;
}
.notification:hover {
background-color: #f3f2f0;
cursor: pointer;
}
.btn-mark-read {
padding: 5px;
position: absolute;
width: 25px;
height: 25px;
top: 30%;
right: 1%;
}
.btn-mark-read:hover {
background-color: #5cb85c;
svg {
color: white;
}
}
.dismiss {
padding: 5px;
text-align: center;
}
.dismiss:hover {
color: white;
background-color: gray;
transition: all .2s ease-out;
}
.user-cancel {
cursor: pointer;
padding: 1px;
color: gray;
}
.user-cancel:hover {
background-color: $lighter;
}
.invite {
padding-left: 0;
padding-right: 5px;
padding-bottom: 5px;
overflow: hidden;
.invite-content {
background-color: white;
border: 1px solid $lighter;
text-align: center;
padding: 5px;
.invite-message {
position: absolute;
width: 90%;
top: 30%;
}
.invite-accepted {
top: 20%;
}
.invite-loading {
position: absolute;
top: 30%;
right: 35%;
}
}
}
.prompt {
z-index: 0;
display: block;
.popover-content { position: relative; }
.btn-got-it {
position: absolute;
right: 15px;
bottom: 5px;
}
}
.popover-avatar {
left: 105px;
top: -11px;
}
#new-page {
#new-page-label {
color: $sponge_grey;
}
}