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

990 lines
16 KiB
SCSS
Raw Normal View History

2013-02-05 14:16:51 -05:00
// these are the styles associated with the Discourse admin section
@import "common/foundation/variables";
@import "common/foundation/mixins";
@import "common/foundation/helpers";
2013-02-05 14:16:51 -05:00
2013-05-08 01:20:38 -04:00
.admin-contents table {
2014-02-12 23:36:10 -05:00
width: 100%;
tr {text-align: left;}
td, th {padding: 8px;}
th {border-top: 1px solid $primary_lighter;}
td {border-bottom: 1px solid $primary_lighter; border-top: 1px solid $primary_lighter;}
tr:hover { background-color: darken($secondary, 2.5%); }
tr.selected { background-color: lighten($tertiary, 58%); }
2014-02-14 18:50:08 -05:00
.filters input { margin-bottom: 0px; }
}
2013-05-08 01:20:38 -04:00
.content-list li a span.count {
font-size: 12px;
float: right;
margin-right: 10px;
background-color: $primary_lightest;
2013-05-08 01:20:38 -04:00
padding: 2px 5px;
border-radius: 5px;
color: $primary_medium;
2013-05-08 01:20:38 -04:00
}
2013-02-05 14:16:51 -05:00
.admin-content {
margin-bottom: 50px;
.admin-contents {
padding: 8px;
p {
margin-left: 6px;
}
.ace-wrapper {
height: 400px;
}
2013-02-05 14:16:51 -05:00
}
table.report {
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;
}
}
}
2013-02-05 14:16:51 -05:00
}
.admin-loading {
width: 100px;
margin: 0 auto 30px auto;
background-color: $primary;
2013-02-05 14:16:51 -05:00
@include border-radius-all(10px);
padding: 10px 10px 10px 30px;
font-size: 15px;
line-height: 23px;
text-align: center;
color: $secondary;
2013-02-05 14:16:51 -05:00
background: {
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
position: 10px 8px;
size: 25px;
};
}
.admin-container {
margin-top: 20px;
}
2013-02-05 14:16:51 -05:00
.admin-controls {
@include border-radius-all(5px);
background-color: darken($secondary, 5%);
border: 1px solid darken($secondary, 10%);
padding: 10px 10px 3px 0px;
2013-02-05 14:16:51 -05:00
height: 35px;
.nav.nav-pills {
li.active {
a {
border-color: darken($primary_medium, 10%);
background-color: $primary_medium;
2013-02-05 14:16:51 -05:00
&:hover {
background-color: $primary_medium;
2013-02-05 14:16:51 -05:00
}
}
}
}
h1 {
font-size: 20px;
line-height: 25px;
color: $primary_medium;
2013-02-05 14:16:51 -05:00
}
.controls {
margin-left: 10px;
2013-02-05 14:16:51 -05:00
}
button {
margin-right: 5px;
margin-left: 5px;
}
input[type=text] {
display: inline-block;
float: left;
2013-02-05 14:16:51 -05:00
}
.result-message {
display: inline-block;
padding-left: 10px;
padding-top: 5px;
}
.username {
input[type=text] {
width: 240px;
}
}
.search {
float: right;
margin-left: 10px;
2013-02-05 14:16:51 -05:00
label {
margin-top: 5px;
}
}
.toggle {
margin-top: 8px;
float: right;
span {
font-weight: bold;
}
}
label {
display: inline-block;
margin-right: 5px;
}
2013-02-05 14:16:51 -05:00
}
.site-settings-nav {
width: 200px;
margin-top: 40px;
.nav-stacked {
border-right: none;
}
li a.active {
color: $secondary;
background-color: $nav-stacked-background-color-active;
}
}
.site-settings-detail {
width: 850px;
@include medium-width { width: 740px; }
@include small-width { width: 700px; }
2013-11-18 09:53:06 -05:00
min-height: 800px;
margin-left: 0;
border-left: solid 1px lighten($nav-stacked-border-color, 5%);
padding: 30px 0 30px 30px;
}
2013-02-05 14:16:51 -05:00
.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; }
}
2013-02-05 14:16:51 -05:00
.desc {
padding-top: 3px;
color: darken($secondary, 40%);
2013-02-05 14:16:51 -05:00
}
h3 {
font-size: 13px;
font-weight: normal;
}
}
.setting.overridden {
input[type=text] {
background-color: lighten($highlight, 40%);
}
h3 {
color: darken($highlight, 30%);
}
2013-02-05 14:16:51 -05:00
}
}
section.details {
h1 {
font-size: 15px;
background-color: $primary_light;
color: $secondary;
2013-02-05 14:16:51 -05:00
padding: 0 10px;
margin: 0px 0 5px 0;
}
}
#selected-controls {
background-color: lighten($tertiary, 50%);
2013-02-05 14:16:51 -05:00
padding: 8px;
min-height: 27px;
position: fixed;
bottom: 0;
width: 1075px;
border: 1px solid lighten($tertiary, 45%);
2013-02-05 14:16:51 -05:00
}
.display-row {
line-height: 30px;
2013-02-05 14:16:51 -05:00
padding: 5px;
&:nth-of-type(1) {
border-top: 0;
}
&.highlight-danger {
background-color: $highlight_danger_light;
}
border-top: 1px solid $primary_lighter;
2013-02-05 14:16:51 -05:00
&: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;
}
2013-10-22 15:53:08 -04:00
.long-value {
width: 800px;
float: left;
margin-left: 12px;
font-size: 13px;
button {
margin-left: 10px;
}
}
2013-02-05 14:16:51 -05:00
.controls {
width: 600px;
float: left;
margin-left: 12px;
2013-02-05 14:16:51 -05:00
.btn {
margin-right: 5px;
}
}
}
// Customise area
.customize {
.nav.nav-pills {
margin-left: 10px;
}
.content-list, .current-style {
float: left;
}
.content-list ul {
2013-06-19 01:18:22 -04:00
margin-bottom: 10px;
2013-02-05 14:16:51 -05:00
}
.current-style {
.delete-link {
margin-left: 15px;
margin-top: 5px;
}
.preview-link {
margin-left: 30px;
}
padding-left: 10px;
width: 65%;
2013-02-05 14:16:51 -05:00
.style-name {
width: 600px;
height: 25px;
font-size: 20px;
}
.ace-wrapper {
position: relative;
2013-06-19 01:18:22 -04:00
height: 400px;
2013-02-05 14:16:51 -05:00
width: 100%;
}
.ace_editor {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.status-actions {
float: right;
2013-06-19 01:18:22 -04:00
margin-top: 7px;
2013-02-05 14:16:51 -05:00
span {
margin-right: 20px;
}
}
.buttons {
float: left;
width: 200px;
.saving {
padding: 5px 0 0 0;
margin-left: 10px;
width: 80px;
color: $primary_medium;
}
2013-02-05 14:16:51 -05:00
}
}
}
.admin-flags {
2013-06-17 03:15:56 -04:00
2013-02-05 14:16:51 -05:00
tr.hidden-post td.excerpt { opacity: 0.4; }
tr.deleted td.excerpt { opacity: 0.8; background-color: $highlight_danger_light; }
2013-02-05 14:16:51 -05:00
td.message {
padding: 4px 8px;
background-color: $highlight_light;
2013-02-05 14:16:51 -05:00
}
2013-06-26 15:10:07 -04:00
td { vertical-align: top; }
2013-02-05 14:16:51 -05:00
th { text-align: left; }
2014-02-05 17:54:16 -05:00
.user { width: 40px; padding-top: 12px; }
2013-02-05 14:16:51 -05:00
.excerpt {
max-width: 740px;
width: 740px;
2014-02-05 17:54:16 -05:00
padding: 8px;
word-wrap: break-word;
2013-12-09 16:27:49 -05:00
.fa,h3 { display: inline-block; }
2013-02-25 11:42:20 -05:00
2013-02-05 14:16:51 -05:00
}
.flaggers {
font-size: 11px;
td {
2013-06-26 15:10:07 -04:00
vertical-align: middle;
padding: 3px;
}
}
.action {
2013-06-21 03:29:54 -04:00
button { margin: 4px; }
text-align: right;
padding-bottom: 20px;
}
2013-02-05 14:16:51 -05:00
}
2013-03-07 11:07:59 -05:00
2013-03-14 12:28:35 -04:00
/* Dashboard */
.dashboard-left {
float: left;
width: 500px;
margin-top: 10px;
2013-03-14 12:28:35 -04:00
}
.dashboard-right {
float: right;
width: 500px;
margin-top: 10px;
2013-03-14 12:28:35 -04:00
margin-right: 15px;
@include medium-width {
width: 430px;
}
@include small-width {
width: 390px;
}
.dashboard-stats {
width: 100%;
margin-left: 0;
}
2013-03-14 12:28:35 -04:00
}
.version-check {
.version-number {
font-size: 18px;
font-weight: bold;
text-align: center;
}
.face {
width: 20px;
2013-03-14 12:28:35 -04:00
}
2013-12-09 16:27:49 -05:00
.version-notes .fa {
2013-03-14 12:28:35 -04:00
vertical-align: bottom;
}
&.critical .version-notes .normal-note {
display: none;
}
&.normal .version-notes .critical-note {
display: none;
}
2013-12-09 16:27:49 -05:00
.fa {
2013-03-14 12:28:35 -04:00
font-size: 26px;
}
.up-to-date {
color: $success;
2013-03-14 12:28:35 -04:00
}
.updates-available {
color: $highlight_danger;
2013-03-14 12:28:35 -04:00
}
.critical-updates-available {
color: $highlight_danger;
2013-03-14 12:28:35 -04:00
}
}
.update-nag {
2013-12-09 16:27:49 -05:00
i.fa {
2013-03-14 12:28:35 -04:00
font-size: 20px;
}
}
2013-10-22 15:53:08 -04:00
table.api-keys {
margin-top: 10px;
width: 100%;
th {
text-align: left;
padding: 5px;
}
td {
padding: 5px;
}
td.key {
font-size: 12px;
}
}
2013-03-07 11:07:59 -05:00
.dashboard-stats {
margin-bottom: 30px;
width: 460px;
margin-left: 30px;
2013-03-07 11:07:59 -05:00
2013-04-16 18:37:35 -04:00
h4 {
font-weight: normal;
margin-bottom: 8px;
}
2013-03-07 11:07:59 -05:00
table {
width: 100%;
2013-03-07 11:07:59 -05:00
.title {
2013-12-09 16:27:49 -05:00
i.fa {
color: $primary;
}
}
2013-03-07 11:07:59 -05:00
th {
font-weight: normal;
text-align: center;
background-color: $primary_lightest;
2013-03-07 11:07:59 -05:00
}
2013-04-16 18:37:35 -04:00
th.title {
text-align: left;
}
thead {
tr:hover > td {
background-color: $secondary;
}
tr:hover > th {
background-color: $primary_lighter;
}
}
2013-03-07 11:07:59 -05:00
td.value {
font-weight: bold;
text-align: center;
2013-03-30 14:07:25 -04:00
i {
display: none;
}
&.trending-up {
color: $success;
2013-03-30 14:07:25 -04:00
i.up {
display: inline;
}
}
&.trending-down {
color: $highlight_danger;
2013-03-30 14:07:25 -04:00
i.down {
display: inline;
}
}
&.no-change {
i.down {
display: inline;
visibility: hidden;
}
}
2013-03-07 11:07:59 -05:00
}
}
&.detected-problems {
@include border-radius-all(5px);
background-color: $primary_lightest;
border: 1px solid $primary_lighter;
margin-bottom: 20px;
margin-top: 10px;
box-shadow: inset 0 0 10px $primary_lighter;
.look-here {
float: left;
margin: 20px 20px 0 20px;
2013-12-09 16:27:49 -05:00
.fa {
font-size: 32px;
vertical-align: middle;
color: $primary_medium;
}
}
.problem-messages {
float: left;
width: 355px;
a {
text-decoration: underline;
}
.actions {
text-align: right;
}
.btn {
background-color: $primary_lighter;
}
}
}
&.totals {
2013-07-08 12:21:08 -04:00
table {
width: auto;
}
margin-top: 12px;
padding-left: 5px;
.value {
2013-07-08 12:21:08 -04:00
text-align: left;
font-weight: bold;
2013-07-08 12:21:08 -04:00
padding-left: 8px;
padding-right: 30px;
}
}
&.trust-levels {
margin-bottom: 0px;
table {
margin-bottom: 0px;
}
td.value {
width: 45px;
}
}
.referred-topic-title {
width: 410px;
@include medium-width { width: 360px; }
@include small-width { width: 320px; }
}
2013-03-11 15:26:14 -04:00
}
.commits-widget {
border: solid 1px $primary_lighter;
2013-03-11 15:26:14 -04:00
width: 500px;
height: 180px;
margin-bottom: 36px;
2013-03-11 15:26:14 -04:00
@include medium-width {
width: 430px;
}
@include small-width {
width: 390px;
}
2013-03-11 15:26:14 -04:00
ul, li {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: $primary;
2013-03-14 12:28:35 -04:00
text-decoration: none;
2013-03-11 15:26:14 -04:00
}
a:hover {
text-decoration: underline;
}
.header {
color: $primary;
2013-03-11 15:26:14 -04:00
font-weight: bold;
height: 30px;
border-bottom: solid 1px $primary_lighter;
background: $primary_lightest;
2013-03-11 15:26:14 -04:00
cursor: pointer;
h1 {
font-size: 18px;
margin: 5px 0 0 8px;
display: inline-block;
line-height: 1.0em;
}
}
.header:hover h1 {
color: $link-color-hover;
2013-03-11 15:26:14 -04:00
}
.commits-list {
height: 149px;
2013-03-11 15:26:14 -04:00
overflow-y:auto;
li {
@extend .clearfix;
line-height: 1.0em;
padding: 6px 8px;
border-bottom: solid 1px $primary_lighter;
background: $primary_lightest;
2013-03-11 15:26:14 -04:00
.left {
float: left;
}
.right {
margin-left: 52px;
}
img {
margin-top: 2px;
border: solid 1px $primary_lighter;
2013-03-11 15:26:14 -04:00
padding: 2px;
background-color: $secondary;
2013-03-11 15:26:14 -04:00
}
.commit-message {
color: $primary;
2013-03-11 15:26:14 -04:00
font-size: 12px;
font-weight: bold;
}
.commit-meta {
color: $primary_medium;
2013-03-11 15:26:14 -04:00
font-size: 12px;
}
.committer-name {
font-weight: bold;
color: $primary;
2013-03-11 15:26:14 -04:00
}
}
li:last-child {
border: none;
}
}
2013-03-14 12:28:35 -04:00
// Always show the scrollbar:
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: $primary_lighter;
2013-03-14 12:28:35 -04:00
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-track {
border-left: solid 1px $primary_lighter;
2013-03-14 12:28:35 -04:00
}
}
.content-list {
h3 {
color: $primary_medium;
font-size: 15px;
padding-left: 5px;
}
ul {
list-style: none;
margin: 0;
li {
border-bottom: 1px solid $primary_lighter;
}
li a {
display: block;
padding: 10px;
color: $primary_medium;
&:hover {
background-color: #eee;
color: $primary_medium;
}
&.active {
font-weight: bold;
color: $primary;
}
}
}
}
.content-editor {
min-height: 500px;
2013-04-09 11:28:28 -04:00
float: left;
width: 760px;
@include medium-width { width: 650px; }
@include small-width { width: 600px; }
margin-left: 20px;
p.description {
color: $primary_medium;
}
.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;
}
}
2013-08-01 21:30:13 -04:00
// Logs
2013-08-01 21:30:13 -04:00
.admin-logs-table {
input.ember-text-field {
padding: 1px 4px;
}
2013-10-23 12:55:06 -04:00
.btn {
padding: 2px 8px;
2013-12-09 16:27:49 -05:00
.fa {
2013-10-23 12:55:06 -04:00
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;
2013-08-01 21:30:13 -04:00
text-align: center;
}
}
.screened-ip-addresses {
.ip_address {
width: 150px;
text-align: left;
input {
width: 130px;
}
}
2013-10-23 12:55:06 -04:00
.col.actions {
width: 275px;
2013-10-23 12:55:06 -04:00
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;
}
}
}
2013-08-09 16:58:57 -04:00
.staff-action-logs-controls {
margin: 0 0 20px 6px;
a.filter {
display: inline-block;
background-color: $primary_lighter;
2013-08-09 16:58:57 -04:00
padding: 3px 10px;
border-radius: 3px;
margin-left: 5px;
color: $primary;
2013-08-09 16:58:57 -04:00
&:hover {
color: $link-color-hover;
}
.label {
font-weight: bold;
}
i {
margin-left: 6px;
}
}
}
.staff-action-logs-instructions {
margin: 0 0 10px 10px;
2013-08-09 16:58:57 -04:00
}
// 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 {
margin-left: 5px;
border-bottom: dotted 1px $primary_lighter;
.heading-container {
width: 100%;
background-color: $primary_lightest;
}
.col.heading {
font-weight: bold;
padding: 4px 0;
}
.col {
display: inline-block;
padding-top: 6px;
vertical-align: top;
overflow-y: auto;
overflow-x: hidden;
}
2013-08-09 11:24:50 -04:00
.col.first {
margin-left: 5px;
}
.ember-list-item-view {
width: 100%;
border-top: solid 1px $primary_lighter;
}
}
.log-details-modal {
.modal-tab {
width: 95%;
}
}
.leader-requirements {
.fa-check {
color: $success;
}
.fa-times {
color: $highlight_danger;
}
2014-02-12 23:36:10 -05:00
}
// 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;
}