// 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-diff();} td {border-bottom: 1px solid scale-color-diff(); border-top: 1px solid scale-color-diff();} tr:hover { background-color: darken($secondary, 2.5%); } tr.selected { background-color: lighten($primary, 50%); } .filters input { margin-bottom: 0; } } td.flaggers td { border-bottom: none; border-top: none; } .content-list li a span.count { font-size: 12px; float: right; margin-right: 10px; background-color: scale-color-diff(); 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; }; } .ip-lookup { position: relative; display: inline-block; .location-box { position: absolute; width: 460px; right: 0px; z-index: 990; box-shadow: 0 2px 6px rgba(0,0,0, .8); margin-top: -2px; background-color: $secondary; padding: 12px 12px 5px; .close { float: right; } } } .admin-container { margin-top: 20px; } .admin-controls { background-color: dark-light-diff($primary, $secondary, 90%, -20%); padding: 10px 10px 3px 0; height: 35px; .nav.nav-pills { li.active { a { border-color: scale-color-diff(); 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: 18.018%; margin-top: 30px; .nav-stacked { border-right: none; } li a.active { color: $secondary; background-color: $quaternary; } } .site-settings-detail { width: 76.5765%; min-height: 800px; margin-left: 0; border-left: solid 1px scale-color-diff(); padding: 30px 0 30px 30px; } .settings { .setting { padding-bottom: 20px; .setting-label { float: left; width: 17.6576%; margin-right: 12px; } .setting-value { float: left; width: 53%; .select2-container { width: 100%; } .select2-container-multi .select2-choices { border: none; } } .setting-controls { float: left; } .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-diff(); 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; li.select2-search-choice { cursor: pointer; .select2-search-choice-close { content: "x" } } li.sortable-placeholder { padding: 3px 5px 3px 18px; margin: 3px 0px 3px 5px; position: relative; line-height: 13px; cursor: default; border: 1px dashed #AAA; border-radius: 3px; background-clip: padding-box; -moz-user-select: none; background-color: none; width: 3em; height: 1em; } } .desc, .validation-error { padding-top: 3px; font-size: 80%; line-height: 1.4em; } .validation-error { color: $danger; } .desc { color: scale-color($primary, $lightness: 50%); } h3 { font-size: 13px; font-weight: normal; } } .setting.overridden { input[type=text] { background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%); } h3 { color: scale-color($highlight, $lightness: -50%); } } } section.details { h1 { font-size: 15px; background-color: scale-color-diff(); 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-diff(); &:before, &:after { display: table; content: ""; } &:after { clear: both; } .field { font-weight: bold; width: 17.65765%; 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; .list-badge { float: right; font-size: 11px; font-weight: normal; padding: 0 6px; color: $secondary; background-color: scale-color($tertiary, $lightness: 50%); border-radius: 3px; } } .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; } } .current-badge-actions { margin: 10px; padding: 10px; border-top: 1px solid scale-color($primary, $lightness: 80%); } .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: 54.0540%; 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 { .hidden-post td.excerpt { opacity: 0.5; } .deleted td.excerpt { background-color: scale-color($danger, $lightness: 70%); } .message { background-color: scale-color($highlight, $lightness: 70%); } .message:hover { background-color: scale-color($highlight, $lightness: 30%); } td { vertical-align: top; } th { text-align: left; } .user { width: 20px; padding-top: 8px; } .excerpt { max-width: 720px; width: 720px; padding: 8px; word-wrap: break-word; .fa { display: inline-block; } h3 { max-height: 1.2em; overflow: hidden; } } .flaggers { font-size: 11px; padding: 8px 0 0 5px; td { vertical-align: middle; padding: 3px; } } .action { button { margin: 4px; } text-align: right; padding-bottom: 20px; } td p { font-size: 13px; margin: 0 0 5px 0; } } /* Dashboard */ .dashboard-left { float: left; width: 60%; } .dashboard-right { float: right; margin-top: 10px; width: 40%; .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; margin-right: 40px; 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-diff(); } 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-diff(); margin-bottom: 20px; margin-top: 10px; box-shadow: inset 0 0 10px rgba(0,0,0, .1); .look-here { float: left; margin: 20px 10px 0 10px; .fa { font-size: 32px; vertical-align: middle; color: $primary } } .problem-messages { float: left; width: 75%; 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-diff(); height: 180px; margin-bottom: 36px; 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-diff(); .left { float: left; } .right { margin-left: 52px; } img { margin-top: 2px; border: solid 1px scale-color-diff(); 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-diff(); } } .content-list { h3 { color: dark-light-diff($primary, $secondary, 90%, -60%); 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-diff(); } li { border-bottom: 1px solid scale-color-diff(); } li a { display: block; padding: 10px; color: $primary; &:hover { background-color: scale-color-diff(); color: $primary; } &.active { font-weight: bold; color: $primary; } } } } .content-editor { min-height: 500px; float: left; width: 54.0540%; margin-left: 1.8018%; 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: 9.9099%; } } .screened-ip-address-form { margin-left: 6px; .combobox { width: 130px; } } .screened-emails, .screened-urls { .ip_address { width: 9.9099%; 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: 10.810%; } .staff_user { width: 9.009%; } .subject { width: 18.018%; } .created_at { width: 4.5045%; } .context { width: 18.018%; } .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-diff(); } .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-diff(); } .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-diff(); } } .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; } .delete-flag-modal, .agree-flag-modal { .modal-inner-container { width: 400px; } button { display: block; margin: 10px 0 10px 10px; padding: 10px 15px; } } @media all and (max-width : 850px) { .nav-stacked { .glyph {width: auto; position: relative;} .fa-chevron-right {display: none;} > li > a {padding: 13px} } } @media all and (min-width : 320px) and (max-width : 500px) { .full-width { margin: 0; } .site-settings-nav { width: 100%; } .site-settings-detail { width: 100%; padding: 0; border: none; .settings .setting { .setting-label { float: left; width: 100%; h3 { margin-bottom: 5px; font-weight: bold; margin-top: 25px; } } .setting-value { width: 100%; } label { font-size: 13px; } } } .content-editor { width: 100%; #pagedown-editor { box-sizing: border-box; } } div.ac-wrap { width: 100% !important; box-sizing: border-box; } .admin-container { h2 { float: left; } } .dashboard-left, .dashboard-right { width: 100%; } .dashboard-stats { margin: 0; } .badges { .current-badge {margin: 70px 0 0 0;} .current-badge-actions {padding: 0;} } .customize .content-list, .customize .current-style { width: 100%; } } .badge-groupings { list-style: none; margin: 0; padding: 10px 3px; li { padding: 6px 0; width: 600px; border-bottom: 1px solid #dfdfdf; } .actions { font-size: 17px; float: right; a { margin-left: 5px; } } }