discourse/app/assets/stylesheets/common/admin/admin_base.scss

1115 lines
19 KiB
SCSS

// these are the styles associated with the Discourse admin section
@import "common/foundation/variables";
@import "common/foundation/mixins";
@import "common/foundation/helpers";
.admin-contents table {
width: 100%;
tr {text-align: left;}
td, th {padding: 8px;}
th {border-top: 1px solid scale-color($primary, $lightness: 90%);}
td {border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color($primary, $lightness: 90%);}
tr:hover { background-color: darken($secondary, 2.5%); }
tr.selected { background-color: lighten($primary, 50%); }
.filters input { margin-bottom: 0; }
}
.content-list li a span.count {
font-size: 12px;
float: right;
margin-right: 10px;
background-color: scale-color($primary, $lightness: 90%);
padding: 2px 5px;
border-radius: 5px;
color: $primary;
}
.admin-content {
margin-bottom: 50px;
.admin-contents {
padding: 8px;
.ace-wrapper {
height: 400px;
}
}
table.report {
margin-top: 20px;
tr {
th:nth-of-type(1) {
width: 20%;
}
}
.bar-container {
float: left;
width: 300px;
margin-right: 15px;
margin-bottom: 5px;
display: inline-block;
.bar {
margin-top: 5px;
background-color: $tertiary;
display: inline-block;
text-align: right;
padding-right: 8px;
color: $secondary;
}
}
}
}
.admin-loading {
width: 100px;
margin: 0 auto 30px auto;
background-color: $primary;
@include border-radius-all(10px);
padding: 10px 10px 10px 30px;
font-size: 15px;
line-height: 23px;
text-align: center;
color: $secondary;
background: {
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
position: 10px 8px;
size: 25px;
};
}
.admin-container {
margin-top: 20px;
}
.admin-controls {
background-color: darken($secondary, 5%);
padding: 10px 10px 3px 0;
height: 35px;
.nav.nav-pills {
li.active {
a {
border-color: scale-color($primary, $lightness: 90%);
background-color: lighten($primary, 40%);
&:hover {
background-color: lighten($primary, 40%);
}
}
}
}
h1 {
font-size: 20px;
line-height: 25px;
color: $primary;
}
.controls {
margin-left: 10px;
}
button {
margin-right: 5px;
}
input[type=text] {
display: inline-block;
float: left;
}
.result-message {
display: inline-block;
padding-left: 10px;
padding-top: 5px;
}
.username {
input[type=text] {
width: 240px;
}
}
.search {
float: right;
margin-left: 10px;
label {
margin-top: 5px;
}
}
.toggle {
margin-top: 8px;
float: right;
span {
font-weight: bold;
}
}
label {
display: inline-block;
margin-right: 5px;
}
}
.site-settings-nav {
width: 200px;
margin-top: 30px;
.nav-stacked {
border-right: none;
}
li a.active {
color: $secondary;
background-color: $quaternary;
}
}
.site-settings-detail {
width: 850px;
@include medium-width { width: 740px; }
@include small-width { width: 700px; }
min-height: 800px;
margin-left: 0;
border-left: solid 1px scale-color($primary, $lightness: 90%);
padding: 30px 0 30px 30px;
}
.settings {
.setting {
padding-bottom: 20px;
.setting-label {
float: left;
width: 196px;
@include medium-width { width: 176px; }
@include small-width { width: 166px; }
margin-right: 12px;
}
.setting-value {
float: left;
width: 450px;
@include medium-width { width: 360px; }
@include small-width { width: 330px; }
}
.setting-controls {
float: left;
width: 144px;
}
.input-setting-string {
width: 404px;
@include medium-width { width: 314px; }
@include small-width { width: 284px; }
}
.input-setting-list {
width: 408px;
padding: 1px;
background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
.list-input-item {
width: 90px;
margin: 2px 1px;
background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
&:focus {
border-color: $tertiary;
outline: 0;
box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3), 0 0 8px $tertiary;
}
}
.btn.list-add-value {
margin: 0px 3px;
padding: 4px 10px;
color: $tertiary;
}
}
.desc {
padding-top: 3px;
color: $primary;
font-size: 80%;
line-height: 1.4em;
}
h3 {
font-size: 13px;
font-weight: normal;
}
}
.setting.overridden {
input[type=text] {
background-color: scale-color($highlight, $lightness: 50%);
}
h3 {
color: scale-color($highlight, $lightness: -50%);
}
}
}
section.details {
h1 {
font-size: 15px;
background-color: scale-color($primary, $lightness: 90%);
color: $secondary;
padding: 0 10px;
margin: 0 0 5px 0;
}
}
#selected-controls {
background-color: scale-color($tertiary, $lightness: 75%);
padding: 8px;
min-height: 27px;
position: fixed;
bottom: 0;
width: 1075px;
}
.display-row {
line-height: 30px;
padding: 5px;
&:nth-of-type(1) {
border-top: 0;
}
&.highlight-danger {
background-color: scale-color($danger, $lightness: 50%);
}
border-top: 1px solid scale-color($primary, $lightness: 90%);
&:before, &:after {
display: table;
content: "";
}
&:after {
clear: both;
}
.field {
font-weight: bold;
width: 196px;
float: left;
margin-left: 12px;
}
.value {
width: 250px;
float: left;
margin-left: 12px;
}
.long-value {
width: 800px;
float: left;
margin-left: 12px;
font-size: 13px;
button {
margin-left: 10px;
}
}
.controls {
width: 480px;
float: left;
margin-left: 12px;
.btn {
margin-right: 5px;
}
}
}
// Badges area
.badges {
.content-list ul {
margin-bottom: 10px;
}
.current-badge {
margin: 20px;
}
.form-horizontal {
label {
font-weight: bold;
}
& > div {
margin-top: 10px;
}
.delete-link {
margin-left: 15px;
margin-top: 5px;
}
input, textarea, select {
width: 350px;
}
input[type="checkbox"] {
width: 20px;
}
textarea {
height: 200px;
}
}
.buttons {
float: left;
width: 200px;
.saving {
padding: 5px 0 0 0;
margin-left: 10px;
width: 80px;
color: $primary;
}
}
}
// Customise area
.customize {
.nav.nav-pills {
margin-left: 10px;
}
.content-list, .current-style {
float: left;
}
.content-list ul {
margin-bottom: 10px;
}
.current-style {
.delete-link {
margin-left: 15px;
margin-top: 5px;
}
.preview-link {
margin-left: 15px;
}
padding-left: 10px;
width: 65%;
.style-name {
width: 600px;
height: 25px;
font-size: 20px;
}
.ace-wrapper {
position: relative;
height: 400px;
width: 100%;
}
.ace_editor {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.status-actions {
float: right;
margin-top: 7px;
span {
margin-right: 10px;
}
}
.buttons {
float: left;
width: 200px;
.saving {
padding: 5px 0 0 0;
margin-left: 10px;
width: 80px;
color: $primary;
}
}
}
.color-scheme {
.controls {
span, button, a {
margin-right: 10px;
}
}
}
.colors {
thead th { border: none; }
td.hex { width: 100px; }
td.actions { width: 200px; }
.hex-input { width: 80px; margin-bottom: 0; }
.hex { text-align: center; }
.description { color: scale-color($primary, $lightness: 50%); }
.invalid .hex input {
background-color: white;
color: black;
border-color: $danger;
}
}
}
.admin-flags {
tr.hidden-post td.excerpt { opacity: 0.4; }
tr.deleted td.excerpt { opacity: 0.8; background-color: scale-color($danger, $lightness: 30%); }
td.message {
padding: 4px 8px;
background-color: scale-color($highlight, $lightness: 30%);
}
td { vertical-align: top; }
th { text-align: left; }
.user { width: 40px; padding-top: 12px; }
.excerpt {
max-width: 740px;
width: 740px;
padding: 8px;
word-wrap: break-word;
.fa,h3 { display: inline-block; }
}
.flaggers {
font-size: 11px;
td {
vertical-align: middle;
padding: 3px;
}
}
.action {
button { margin: 4px; }
text-align: right;
padding-bottom: 20px;
}
}
/* Dashboard */
.dashboard-left {
float: left;
width: 500px;
margin-top: 10px;
}
.dashboard-right {
float: right;
width: 500px;
margin-top: 10px;
margin-right: 15px;
@include medium-width {
width: 430px;
}
@include small-width {
width: 390px;
}
.dashboard-stats {
width: 100%;
margin-left: 0;
}
}
.version-check {
.version-number {
font-size: 18px;
font-weight: bold;
text-align: center;
}
.face {
width: 20px;
}
.version-notes .fa {
vertical-align: bottom;
}
&.critical .version-notes .normal-note {
display: none;
}
&.normal .version-notes .critical-note {
display: none;
}
.fa {
font-size: 26px;
}
.up-to-date {
color: $success;
}
.updates-available {
color: $danger;
}
.critical-updates-available {
color: $danger;
}
}
.update-nag {
i.fa {
font-size: 20px;
}
}
table.api-keys {
margin-top: 10px;
width: 100%;
th {
text-align: left;
padding: 5px;
}
td {
padding: 5px;
}
td.key {
font-size: 12px;
}
}
.dashboard-stats {
margin-bottom: 30px;
width: 460px;
margin-left: 30px;
h4 {
font-weight: normal;
margin-bottom: 8px;
}
table {
width: 100%;
.title {
i.fa {
color: $primary;
}
}
th {
font-weight: normal;
text-align: center;
background-color: scale-color($primary, $lightness: 90%);
}
th.title {
text-align: left;
}
thead {
tr:hover > td {
background-color: $secondary;
}
tr:hover > th {
background-color: scale-color($primary, $lightness: 75%);
}
}
td.value {
font-weight: bold;
text-align: center;
i {
display: none;
}
&.trending-up {
color: $success;
i.up {
display: inline;
}
}
&.trending-down {
color: $danger;
i.down {
display: inline;
}
}
&.no-change {
i.down {
display: inline;
visibility: hidden;
}
}
}
}
&.detected-problems {
@include border-radius-all(5px);
background-color: scale-color($primary, $lightness: 90%);
margin-bottom: 20px;
margin-top: 10px;
box-shadow: inset 0 0 10px rgba($primary, .1);
.look-here {
float: left;
margin: 20px 10px 0 10px;
.fa {
font-size: 32px;
vertical-align: middle;
color: $primary
}
}
.problem-messages {
float: left;
width: 395px;
a {
text-decoration: underline;
}
.actions {
text-align: right;
}
.btn {
background-color: lighten($primary, 60%);
}
ul {
margin-left: 0;
}
}
}
&.totals {
table {
width: auto;
}
margin-top: 12px;
padding-left: 5px;
.value {
text-align: left;
font-weight: bold;
padding-left: 8px;
padding-right: 30px;
}
}
&.trust-levels {
margin-bottom: 0;
table {
margin-bottom: 0;
}
td.value {
width: 45px;
}
}
.referred-topic-title {
width: 410px;
@include medium-width { width: 360px; }
@include small-width { width: 320px; }
}
}
.commits-widget {
border: solid 1px scale-color($primary, $lightness: 90%);
width: 500px;
height: 180px;
margin-bottom: 36px;
@include medium-width {
width: 430px;
}
@include small-width {
width: 390px;
}
ul, li {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: $primary;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.header {
color: $primary;
font-weight: bold;
height: 30px;
background-color: scale-color($primary, $lightness: 75%);
cursor: pointer;
h1 {
font-size: 18px;
margin: 5px 0 0 8px;
display: inline-block;
line-height: 1.0em;
}
}
.header:hover h1 {
color: $tertiary;
}
.commits-list {
height: 149px;
overflow-y:auto;
li {
@extend .clearfix;
line-height: 1.0em;
padding: 6px 8px;
background-color: scale-color($primary, $lightness: 90%);
.left {
float: left;
}
.right {
margin-left: 52px;
}
img {
margin-top: 2px;
border: solid 1px scale-color($primary, $lightness: 90%);
padding: 2px;
background-color: $secondary;
}
.commit-message {
color: $primary;
font-size: 12px;
font-weight: bold;
}
.commit-meta {
color: $primary;
font-size: 12px;
}
.committer-name {
font-weight: bold;
color: $primary;
}
}
li:last-child {
border: none;
}
}
// Always show the scrollbar:
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: scale-color($primary, $lightness: 75%);
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-track {
border-left: solid 1px scale-color($primary, $lightness: 90%);
}
}
.content-list {
h3 {
color: $primary;
font-size: 15px;
padding-left: 5px;
margin-bottom: 10px;
}
ul {
list-style: none;
margin: 0;
li:first-of-type {
border-top: 1px solid scale-color($primary, $lightness: 90%);
}
li {
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
}
li a {
display: block;
padding: 10px;
color: $primary;
&:hover {
background-color: scale-color($primary, $lightness: 90%);
color: $primary;
}
&.active {
font-weight: bold;
color: $primary;
}
}
}
}
.content-editor {
min-height: 500px;
float: left;
width: 760px;
@include medium-width { width: 650px; }
@include small-width { width: 600px; }
margin-left: 20px;
p.description {
color: $primary;
}
.controls {
margin-top: 10px;
}
#pagedown-editor {
width: 98%;
}
textarea.plain {
width: 98%;
height: 200px;
}
#wmd-input {
width: 98%;
height: 200px;
}
.ace-wrapper {
position: relative;
height: 600px;
width: 100%;
}
.ace_editor {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
.row.groups {
input[type='text'] {
width: 500px;
}
input#group-users {
width: 600px;
}
}
// Logs
.admin-logs-table {
input.ember-text-field {
padding: 1px 4px;
}
.btn {
padding: 2px 8px;
.fa {
margin-right: 2px;
}
}
}
.screened-emails, .screened-urls, .screened-ip-addresses {
.email, .url, .domain {
width: 300px;
}
.action, .match_count, .last_match_at, .created_at {
text-align: center;
width: 110px;
}
}
.screened-ip-address-form {
margin-left: 6px;
.combobox {
width: 130px;
top: 10px;
}
}
.screened-emails, .screened-urls {
.ip_address {
width: 110px;
text-align: center;
}
}
.screened-ip-addresses {
.ip_address {
width: 150px;
text-align: left;
input {
width: 130px;
}
}
.col.actions {
width: 275px;
padding-top: 4px;
a {
text-decoration: underline;
}
}
}
.staff-actions {
width: 100%;
.action {
width: 120px;
}
.staff_user {
width: 100px;
}
.subject {
width: 200px;
}
.created_at {
width: 50px;
}
.context {
width: 200px;
}
.created_at {
text-align: center;
}
.details {
width: 300px;
a {
text-decoration: underline;
}
&.value {
height: 70px;
}
}
}
.staff-action-logs-controls {
margin: 0 0 20px 6px;
a.filter {
display: inline-block;
background-color: scale-color($primary, $lightness: 75%);
padding: 3px 10px;
border-radius: 3px;
color: $primary;
&:hover {
color: $primary;
background-color: scale-color($primary, $lightness: 90%);
}
.label {
font-weight: bold;
}
i {
margin-left: 6px;
}
}
}
.staff-action-logs-instructions {
margin: 0 0 10px 10px;
}
// Ember.ListView
.ember-list-view {
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.ember-list-item-view {
position: absolute;
}
.staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses {
border-bottom: dotted 1px scale-color($primary, $lightness: 75%);
.heading-container {
width: 100%;
background-color: scale-color($primary, $lightness: 90%);
}
.col.heading {
font-weight: bold;
padding: 4px 0;
}
.col {
display: inline-block;
padding-top: 6px;
vertical-align: top;
overflow-y: auto;
overflow-x: hidden;
}
.ember-list-item-view {
width: 100%;
border-top: solid 1px scale-color($primary, $lightness: 90%);
}
}
.log-details-modal {
.modal-tab {
width: 95%;
}
}
.leader-requirements {
.fa-check {
color: $success;
}
.fa-times {
color: $danger;
}
}
// Backups
// --------------------------------------------------
$rollback: #3D9970;
$rollback-dark: darken($rollback, 10%) !default;
$rollback-darker: darken($rollback, 20%) !default;
.btn-rollback {
color: $secondary;
background: $rollback;
&:hover {
background: $rollback-dark;
}
&:active {
@include linear-gradient($rollback-darker, $rollback-dark);
}
&[disabled] {
background: $rollback;
}
}
.admin-backups-logs {
max-height: 500px;
overflow: auto;
}
button.ru {
position: relative;
min-width: 110px;
}
.ru-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: rgba(0, 175, 0, 0.3);
}
.is-uploading:hover .ru-progress {
background: rgba(200, 0, 0, 0.3);
}
.invisible {
visibility: hidden;
}