app/assets/stylesheets/components/admin.scss
#admin_columns {
max-width: 1060px;
margin-right: auto;
margin-left: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: flex-start;
.admin_column_left {
margin-right: 36px;
overflow: hidden;
box-shadow: none;
h2 {
margin-bottom: 0;
}
ul.admin_nav {
margin: 0;
li {
line-height: 34px;
display: block;
&.current {
background-color: $accent;
color: $admin-nav-item-current-text;
padding-left: 12px;
span {
color: $admin-nav-item-current-text;
}
}
&:hover {
text-decoration: none;
}
a {
font-size: 14px;
line-height: 34px;
padding-left: 12px;
width: 100%;
display: block;
box-sizing: border-box;
&:hover {
background: $admin-nav-item-background-hover;
text-decoration: none;
}
}
span {
float: right;
color: $admin-nav-item-total-text;
font-size: 12px;
padding-right: 12px;
}
}
> ul {
padding-right: 30px;
li {
padding-left: 0;
width: 100%;
&.current {
padding-left: 30px;
}
a {
padding-left: 30px;
box-sizing: content-box;
}
}
}
}
}
.admin_column_right {
flex: 1;
font-size: 13px;
min-width: 768px;
.admin_search_field {
input {
font-size: 12px;
width: 210px;
height: 32px;
line-height: 1.2em;
padding: 0;
padding-left: 8px;
padding-top: 3px;
box-sizing: border-box;
color: $admin-search-text;
border: 1px solid #DDDDDD;
border-radius: 5px;
margin-bottom: 12px;
background-color: $admin-search-background;
}
}
.pagy-nav {
width: 100%;
float: none;
}
.admin_column_right_inner {
padding: $baseline / 2 0;
margin-bottom: 0;
padding-bottom: 0px;
padding-left: 0;
padding-right: 0;
header.admin_comments_header,
header.admin_users_header,
header.admin_requests,
header.admin_assets_header {
display: flex;
border-bottom: 1px solid $admin-header-border;
padding-left: $baseline / 2;
padding-right: $baseline / 2;
div {
font-family: $medium-sans-font;
padding-bottom: $baseline / 2;
color: $admin-column-heading-text;
}
}
.admin_comments_rows,
.admin_users_rows,
.admin_requests_rows,
.admin_assets_rows {
> div {
display: flex;
border-top: 1px solid $admin-row-border;
padding: $baseline / 2 0;
padding-left: $baseline / 2;
padding-right: $baseline / 2;
&:first-child {
border-top: 0;
}
&.deleted, &.moderated {
background-color: $admin-deleted-row-background;
box-shadow: inset 0 0 3px $admin-header-border;
input[value~='Restore'] {
background-color: $accent;
opacity: 1;
}
}
&.approved {
.approve_button,
.deny_button {
display: none;
}
}
&.denied {
.deny_button {
display: none;
}
}
&.spam {
background-color: $admin-spam-row-background;
box-shadow: inset 0 0 3px $admin-header-border;
}
}
}
.date_column {
width: 90px;
.deleted_at_date {
margin-top: 5px;
font-size: 12px;
color: $admin-deleted-at-text;
}
}
.user_column {
width: 220px;
min-width: 220px;
margin-right: 12px;
display: flex;
div.avatar {
width: 40px;
height: 40px;
margin-right: 8px;
img {
width: 40px;
height: 40px;
}
}
div {
overflow: hidden;
div:first-child {
margin-bottom: 5px;
font-family: $medium-sans-font;
a {
display: block;
text-overflow: ellipsis;
overflow: hidden;
}
}
div:nth-child(2) {
display: block;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 5px;
}
div:last-child {
color: $admin-user-ip-text;
font-size: 13px;
line-height: 1.1;
a {
text-decoration: underline;
}
}
}
}
.admin_requests_rows .user_column,
header.admin_requests .user_column {
min-width: 150px;
width: 150px;
}
.type_column {
width: 90px;
}
.track_column,
.bio_column,
.text_column {
flex: 1;
padding-right: 6px;
word-break: break-all;
div:first-child {
margin-bottom: 5px;
font-family: $medium-sans-font;
word-break: break-all;
}
div:nth-child(2) {
color: $admin-default-data-text;
font-size: 13px;
line-height: 1.1;
word-break: break-all;
margin-bottom: 5px;
}
div:nth-child(3) {
color: $admin-default-data-text;
font-size: 11px;
line-height: 1.1;
word-break: break-all;
font-style: italic;
}
}
.bio_column,
.text_column {
div:first-child {
font-family: $sans-font;
font-size: 13px;
line-height: 1.1;
}
}
.button_column {
display: flex;
a {
@include default-button();
}
input[type="submit"],
a {
margin-bottom: 0;
padding: 7px 6px 5px 6px;
height: 32px;
font-size: 11px;
white-space: normal;
margin-left: 6px;
margin-top: 3px;
line-height: 1.7;
min-width: 104px;
}
}
}
}
table {
border-collapse: collapse;
th {
font-weight: bold;
}
th, td {
text-align: left;
vertical-align: top;
padding: 0.375em 0.5em;
}
}
form.new_mass_invite {
padding: 0 1em;
}
}