// these are the styles associated with the Discourse admin section @import "common/foundation/variables"; @import "common/foundation/mixins"; @import "common/foundation/helpers"; $mobile-breakpoint: 700px; // Change the box model for .admin-content @media (max-width: $mobile-breakpoint) { .admin-content { box-sizing: border-box; *, *:before, *:after { box-sizing: inherit; } input[type="text"] { // Desktop/_discourse.scss sets a height on text-input elements. Using `box-sizing: border-box` // this value either needs to be increased or set to auto. `mobile.css` seems to not set a height on text-inputs. height: auto; } } } .admin-contents { position: relative; margin-left: -10px; margin-right: -10px; } .admin-contents table { width: 100%; tr {text-align: left;} td, th {padding: 8px;} th {border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);} td {border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);} tr:hover { background-color: darken($secondary, 2.5%); } tr.selected { background-color: lighten($primary, 80%); } .filters input { margin-bottom: 0; } } td.flaggers td { border-bottom: none; border-top: none; } .site-texts { .search-area { margin-bottom: 2em; p { margin-top: 0; } .site-text-search { padding: 0.5em; font-size: 1em; width: 50%; } .extra-options { float: right; input[type=checkbox] { margin-right: 0.5em; } } } .text-highlight { font-weight: bold; } .site-text { cursor: pointer; border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); margin-bottom: 0.5em; &.overridden { background-color: dark-light-diff($highlight, $secondary, 50%, -60%); } h3 { font-weight: normal; font-size: 1.1em; } button.edit { float: right; } .site-text-value { margin: 0.5em 5em 0.5em 0; max-height: 100px; color: dark-light-diff($primary, $secondary, 40%, -10%); } } .edit-site-text { textarea { width: 80%; } .save-messages, .title { margin-bottom: 1em; } .go-back { margin-top: 1em; } } } .content-list li a span.count { font-size: 0.857em; float: right; margin-right: 10px; background-color: dark-light-diff($primary, $secondary, 90%, -60%); padding: 2px 5px; border-radius: 5px; color: $primary; } .admin-content { margin-bottom: 50px; .admin-contents { padding: 8px 0; @include clearfix(); } .view-options { float: right; } 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; } } } } .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; .other-accounts { margin: 5px 0 0; max-height: 200px; overflow: auto; width: 455px; ul { margin: 0; } li { list-style: none; } tr td:first-of-type { width: 130px; } } } } .admin-container { margin-top: 20px; } .admin-container .controls { @include clearfix; .save-messages { margin-top: 1em; } } .admin-title { height: 45px; } .admin-controls { background-color: dark-light-diff($primary, $secondary, 90%, -65%); padding: 10px 10px 3px 0; @include clearfix; .nav.nav-pills { li.active { a { border-color: dark-light-diff($primary, $secondary, 90%, -90%); background-color: dark-light-diff($primary, $secondary, 40%, -10%); &:hover { background-color: dark-light-diff($primary, $secondary, 40%, -10%); } } } } h1 { font-size: 1.429em; line-height: 25px; color: $primary; } .controls { margin-left: 10px; } .controls .menu-toggle { display: none; float: left; font-size: 24px; padding: 3px 6px; margin-right: 32px; border: 1px solid lighten($primary, 40%); border-radius: 3px; background: transparent; color: $primary; &:hover { background-color: lighten($primary, 60%); } @media (max-width: $mobile-breakpoint) { display: inline-block; } } button { margin-right: 5px; } input[type=text] { display: inline-block; float: left; } .result-message { display: inline-block; padding-left: 10px; } .username { input[type=text] { width: 240px; } } .search { float: right; margin-left: 10px; label { margin-top: 5px; } .controls { margin-left: 0; } // Hide the search checkbox for very small screens // Todo: find somewhere to display it - probably requires switching its order in the html @media (max-width: 550px) { display: none; } } .toggle { margin-top: 8px; float: right; span { font-weight: bold; } } label { display: inline-block; margin-right: 5px; } #last-seen input[type="text"] { float: none; } .ac-wrap { display: inline-block; vertical-align: middle; padding: 0; } } .paste-users { width: 400px; height: 150px; } .groups, .badges { .form-horizontal { label { font-weight: bold; } & > div { margin-top: 10px; } input, textarea, select { width: 350px; } input[type="checkbox"] { width: 20px; } } } .admin-nav { width: 18.018%; position: relative; // The admin-nav becomes a slide-out menu at the mobile-nav breakpoint @media (max-width: $mobile-breakpoint) { position: absolute; z-index: 0; width: 50%; } margin-top: 30px; .nav-stacked { border-right: none; @media (max-width: $mobile-breakpoint) { //margin-right: 10px; } } li a.active { color: $secondary; background-color: $quaternary; } } .admin-detail { width: 76.5765%; @media (max-width: $mobile-breakpoint) { z-index: 10; width: 100%; } background-color: $secondary; // Todo: set this properly - it needs to be >= the menu height min-height: 875px; margin-left: 0; border-left: solid 1px dark-light-diff($primary, $secondary, 90%, -60%); padding: 30px 0 30px 30px; @media (max-width: $mobile-breakpoint) { padding: 30px 0; border: none; } } .admin-detail.mobile-open { @media (max-width: $mobile-breakpoint) { transition: transform 0.3s ease; @include transform(translateX(50%)); } } .admin-detail.mobile-closed { @media (max-width: $mobile-breakpoint) { transition: transform 0.3s ease; @include transform(translateX(0)); } } .settings { margin-left: 10px; margin-right: 10px; .setting { padding-bottom: 20px; .setting-label { float: left; width: 17.6576%; margin-right: 12px; @media (max-width: $mobile-breakpoint) { float: none; margin-right: 0; width: 100%; h3 { margin-bottom: 6px; } } } .setting-value { float: left; width: 53%; padding-right: 20px; .category-group { width: 95%; } @media (max-width: $mobile-breakpoint) { width: 100%; padding-right: 0; } .select2-container { width: 100% !important; // Needs !important to override hard-coded value @media (max-width: $mobile-breakpoint) { width: 100% !important; // !important overrides hard-coded mobile width of 68px } } .select2-container-multi .select2-choices { border: none; } } .setting-controls { float: left; } .input-setting-string { box-sizing: border-box; height: 30px; width: 100%; @media (max-width: $mobile-breakpoint) { width: 100%; } } .input-setting-list { @media (max-width: $mobile-breakpoint) { width: 100%; } padding: 1px; background-color: $secondary; border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-radius: 3px; box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3); 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: transparent; width: 3em; height: 1em; } } .desc, .validation-error { padding-top: 3px; font-size: 80%; line-height: 1.4em; } .validation-error { color: $danger; } .desc { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } h3 { font-size: 0.929em; font-weight: normal; } } .setting.overridden { h3 { color: scale-color($highlight, $lightness: -50%); } } .setting.overridden.string { input[type=text] { background-color: dark-light-diff($highlight, $secondary, 50%, -60%); } } } section.details { h1 { font-size: 1.286em; color: $primary; padding: 5px 10px; margin: 30px 0 5px 0; border-bottom: 5px solid dark-light-diff($primary, $secondary, 90%, -60%); } } #selected-controls { background-color: scale-color($tertiary, $lightness: 75%); padding: 8px; min-height: 27px; position: fixed; bottom: 0; width: 1075px; } .user-controls { padding: 5px; clear: both; text-align: right; } .display-row.associations .value { width: 750px; } .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 dark-light-diff($primary, $secondary, 90%, -60%); &: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: 0.929em; 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; p.help { margin: 0; color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); font-size: 0.9em; } } .form-horizontal { .delete-link { margin-left: 15px; margin-top: 5px; } textarea { height: 200px; } } .current-badge-actions { margin: 10px; padding: 10px; border-top: 1px solid dark-light-choose(scale-color($primary, $lightness: 80%), scale-color($secondary, $lightness: 20%)); } .buttons { float: left; width: 200px; .saving { padding: 5px 0 0 0; margin-left: 10px; width: 80px; color: $primary; } } } .badge-query-preview { .grant-count, .sample, .error-header { margin-left: 10px; } .badge-errors { font-size: 1em; line-height: 16px; padding: 4px; background-color: dark-light-diff($primary, $secondary, 90%, -60%); } .badge-query-plan { font-size: 0.857em; line-height: 13px; padding: 4px; background-color: dark-light-diff($primary, $secondary, 90%, -60%); } .count-warning { background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -60%); margin: 0 0 7px 0; padding: 10px 20px; p { margin: 0; } .heading { color: $danger; font-weight: bold; } } } // Groups area .groups { .ac-wrap { width: 100% !important; border-color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); .item { margin-right: 10px; } } .next, .previous { color: #333 !important; &.disabled { color: #aaa !important; } } .btn.add { margin-top: 7px; } .controls { margin-top: 10px; } .select2-container { width: 100%; } .select2-choices { width: 100%; border-color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); } } // Customise area .customize { .admin-footer { margin-top: 20px; } .current-style.maximized { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 100000; background-color: white; width: 100%; padding: 0; margin: 0; .wrapper { position: absolute; top: 20px; bottom: 10px; left: 20px; right: 20px; } } .nav.nav-pills { margin-left: 10px; } .content-list, .current-style { float: left; } .content-list ul { margin-bottom: 10px; } .current-style { .nav.nav-pills{ position: relative; } .toggle-mobile { position: absolute; right: 35px; font-size: 20px; } .toggle-maximize { position: absolute; right: -5px; } .delete-link { margin-left: 15px; margin-top: 5px; } .preview-link { margin-left: 15px; } .export { float: right; } padding-left: 10px; width: 70%; .style-name { width: 350px; height: 25px; // Remove height to for `box-sizing: border-box` height: auto; } .ace-wrapper { position: relative; height: 400px; width: 100%; } &.maximized { .admin-container { position: absolute; bottom: 50px; top: 80px; width: 100%; } .admin-footer { position: absolute; bottom: 10px; } .ace-wrapper { height: 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: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } .invalid .hex input { background-color: white; color: black; border-color: $danger; } } } .admin-flags { table-layout: fixed; .hidden-post td.excerpt, .hidden-post td.user { opacity: 0.5; } .deleted td.excerpt, .deleted td.user { background-color: scale-color($danger, $lightness: 70%); } .message { background-color: dark-light-diff($highlight, $secondary, 50%, -70%); } .message:hover { background-color: dark-light-diff($highlight, $secondary, 60%, -60%); } td { vertical-align: top; } th { text-align: left; } .user { width: 25px; padding: 8px 0 0 0; text-align: center; } .excerpt { max-width: 700px; width: 75%; padding: 8px; word-wrap: break-word; .fa { display: inline-block; } h3 { max-height: 1.2em; overflow: hidden; margin-top: 0; margin-bottom: 5px; } } .flaggers { font-size: 11px; padding: 8px 0 0 5px; .avatar { width: 25px; } table { max-width: 145px; } tr { height: 44px; } td { vertical-align: middle; padding: 3px; line-height: 1.4; } } .action { button { margin: 4px; } text-align: right; padding-bottom: 20px; } td p { font-size: 0.929em; margin: 0 0 5px 0; } .flagged-posts { background: $danger; } } /* Dashboard */ .dashboard-left { float: left; width: 60%; } .dashboard-right { float: right; width: 40%; .dashboard-stats { width: 100%; margin-left: 0; } } .version-check { th { text-align: left !important; } .version-number { font-size: 1.286em; font-weight: bold; } .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: 1.857em; } .up-to-date { color: $success; } .updates-available { color: $danger; } .critical-updates-available { color: $danger; } } .update-nag { i.fa { font-size: 1.429em; } } table.api-keys { margin-top: 10px; width: 100%; th { text-align: left; padding: 5px; } td { padding: 5px; } td.key { font-size: 0.857em; } } .dashboard-stats { margin-bottom: 30px; margin-right: 40px; h4 { font-weight: normal; margin-bottom: 8px; } table { width: 100%; .title { i.fa { color: $primary; } i.fa-heart { color: $love; } } th { font-weight: normal; text-align: center; background: dark-light-diff($primary, $secondary, 80%, -65%); } th.title { text-align: left; } thead { tr:hover > td { background-color: $secondary; } } td.value { font-weight: bold; text-align: center; i { display: none; } &.trending-up { i.up { color: $success; display: inline; } } &.trending-down { i.down { color: $danger; display: inline; } } &.no-change { i.down { display: inline; visibility: hidden; } } } tr.reverse-colors { td.value.trending-down i.down { color: $success; } td.value.trending-up i.up { color: $danger; } } } &.detected-problems { background: dark-light-diff($primary, $secondary, 90%, -75%); margin-bottom: 20px; .look-here { float: left; margin: 20px 10px 0 10px; .fa { font-size: 2.286em; vertical-align: middle; color: $primary } } .problem-messages { float: left; width: 80%; margin-left: 1%; a { text-decoration: underline; } .actions { text-align: right; } .btn { background: dark-light-diff($primary, $secondary, 80%, -85%); } ul { margin-left: 0; padding-left: 20px; li { margin-bottom: 10px; } } } } &.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: 355px; @include medium-width { width: 305px; } @include small-width { width: 265px; } } } .groups-bulk { .control { margin-bottom: 1em; } } .commits-widget { border: solid 1px dark-light-diff($primary, $secondary, 90%, -60%); 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: dark-light-diff($primary, $secondary, 80%, -75%); cursor: pointer; h1 { font-size: 1.286em; 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: dark-light-diff($primary, $secondary, 90%, -60%); .left { float: left; } .right { margin-left: 52px; } img { margin-top: 2px; border: solid 1px dark-light-diff($primary, $secondary, 90%, -60%); padding: 2px; background-color: $secondary; } .commit-message { color: $primary; font-size: 0.857em; font-weight: bold; } .commit-meta { color: $primary; font-size: 0.857em; } .committer-name { font-weight: bold; color: $primary; } } li:last-child { border: none; } } // Always show the scrollbar: ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: dark-light-diff($primary, $secondary, 90%, -75%); -webkit-border-radius: 3px; } ::-webkit-scrollbar-track { border-left: solid 1px dark-light-diff($primary, $secondary, 90%, -60%); } } .content-editor { min-height: 500px; float: left; width: 54.0540%; margin-left: 1.8018%; p.description { color: $primary; } .controls { margin-top: 10px; } textarea.plain { width: 98%; height: 200px; } .d-editor-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; } } .email-template { input { width: 100%; } label { font-weight: bold; } } .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%; min-width: 990px; .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: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); padding: 3px 10px; border-radius: 3px; color: $primary; &:hover { color: $primary; background-color: dark-light-diff($primary, $secondary, 90%, -60%); } .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, .permalinks { border-bottom: dotted 1px dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); .heading-container { width: 100%; background-color: dark-light-diff($primary, $secondary, 90%, -60%); } .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 dark-light-diff($primary, $secondary, 90%, -60%); } } .log-details-modal { .modal-tab { width: 95%; } } .tl3-requirements { .fa-check { color: $success; } .fa-times { color: $danger; } } .admin-plugins .col-enabled { width: 20px; } // 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 { button { display: block; margin: 10px 0 10px 10px; padding: 10px 15px; } } .start-backup-modal { .btn { margin: 10px 0 10px 5px; } .btn:first-of-type { margin-left: 10px; } } @media all and (max-width : 850px) { html:not(.mobile-view) .admin-content .nav-stacked { .glyph {width: auto; position: relative;} > 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: 0.929em; } } } .content-editor { width: 100%; } 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 { float: right; .btn { padding: 3px 6px; } } } tr.not-activated { td, td a, td a:visited { color: #bbb; } } .details.not-activated { .username .value, .email .value a, .email .value a:visited { color: #bbb; } } .user-fields { h2 { margin-bottom: 10px; } .user-field { padding: 10px; margin-bottom: 10px; border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); .form-display { width: 25%; display: inline-block; float: left; } .form-element, .form-element-desc { float: left; min-height: 30px; padding: 0.25em 0; &.input-area { width: 75%; input[type=text] { width: 50%; } } &.label-area { width: 25%; label { margin: 0.5em 1em 0 0; text-align: right; font-weight: bold; } } } .controls { float: right; text-align: right; } .clearfix { clear: both; } } } .preview { margin-top: 5px; } table#user-badges { .reason { max-width: 200px; } } .value-list { .value { border-bottom: 1px solid #ddd; padding: 3px; margin-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: move; } .values { margin-bottom: 10px; } .placeholder { border-bottom: 1px solid #ddd; padding: 3px; margin-right: 10px; height: 30px; } input[type=text] { width: 90%; } } // Permalinks .permalinks { .url, .topic, .category, .external_url, .post { text-overflow: ellipsis; white-space: nowrap; } .url { width: 200px; } .topic, .post, .external_url { width: 180px; } .category { width: 140px; } .action { text-align: center; width: 8%; } } .permalink-title { margin-bottom: 10px; } // embedding .embeddable-hosts { table { margin-bottom: 1em; } margin-bottom: 2em; } .embedding-secondary { h3 { margin: 1em 0; } margin-bottom: 2em; .embed-setting { input[type=text] { width: 50%; } margin: 0.75em 0; } p.description { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); margin-bottom: 1em; max-width: 700px; } } // Emails .email-list { .filters input { width: 100%; } .time { width: 50px; } .reply-key { display: block; font-size: 12px; color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%)); } .username div { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .addresses p { margin: 2px 0; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .incoming-emails { .control-group { margin: 8px 0; } .controls { margin-left: 110px; } p { margin: 5px 10px; } .error-description { color: #919191; font-size: 90%; } hr { margin: 0; } label { font-weight: bold; float: left; width: 100px; text-align: right; margin: 0 10px; } ul { list-style: none; margin: 0 10px; } textarea { width: 95%; height: 150px; font-family: monospace; box-shadow: none; } } // Mobile specific styles // Mobile view text-inputs need some padding .mobile-view .admin-contents { input[type="text"] { padding: 4px; } } .mobile-view .admin-controls { padding: 10px 10px 9px 0; } .mobile-view .full-width { margin: 0; } // Mobile specific style for Admin IP Lookup box .mobile-view .admin-contents .ip-lookup .location-box { width: 300px; left: 20px; } .cboxcontainer { display: inline-block; padding: 8px; padding-bottom: 4px; * { width: 20px; height: 20px; display: inline-block; border: 1px solid $tertiary; } &.primary { background: $primary; } &.secondary { background: $secondary; } } .cbox0 { background: blend-primary-secondary(0%); } .cbox10 { background: blend-primary-secondary(10%); } .cbox20 { background: blend-primary-secondary(20%); } .cbox30 { background: blend-primary-secondary(30%); } .cbox40 { background: blend-primary-secondary(40%); } .cbox50 { background: blend-primary-secondary(50%); } .cbox60 { background: blend-primary-secondary(60%); } .cbox70 { background: blend-primary-secondary(70%); } .cbox80 { background: blend-primary-secondary(80%); } .cbox90 { background: blend-primary-secondary(90%); } .cbox100 { background: blend-primary-secondary(100%); } .cbox5 { background: blend-primary-secondary(5%); } .cbox7 { background: blend-primary-secondary(7%); } .cbox15 { background: blend-primary-secondary(15%); } .cbox17 { background: blend-primary-secondary(17%); } .cbox25 { background: blend-primary-secondary(25%); } .cbox95 { background: blend-primary-secondary(95%); } .cbox85 { background: blend-primary-secondary(85%); } .cbox75 { background: blend-primary-secondary(75%); } .dbox0 { background: dark-light-diff($primary, $secondary, 0%, -0%); } .dbox10 { background: dark-light-diff($primary, $secondary, 10%, -10%); } .dbox20 { background: dark-light-diff($primary, $secondary, 20%, -20%); } .dbox30 { background: dark-light-diff($primary, $secondary, 30%, -30%); } .dbox40 { background: dark-light-diff($primary, $secondary, 40%, -40%); } .dbox50 { background: dark-light-diff($primary, $secondary, 50%, -50%); } .dbox60 { background: dark-light-diff($primary, $secondary, 60%, -60%); } .dbox70 { background: dark-light-diff($primary, $secondary, 70%, -70%); } .dbox80 { background: dark-light-diff($primary, $secondary, 80%, -80%); } .dbox90 { background: dark-light-diff($primary, $secondary, 90%, -90%); } .dbox100 { background: dark-light-diff($primary, $secondary, 100%, -100%); } .dbox5 { background: dark-light-diff($primary, $secondary, 5%, -5%); } .dbox15 { background: dark-light-diff($primary, $secondary, 15%, -15%); } .dbox25 { background: dark-light-diff($primary, $secondary, 25%, -25%); } .dbox95 { background: dark-light-diff($primary, $secondary, 95%, -95%); } .dbox85 { background: dark-light-diff($primary, $secondary, 85%, -85%); } .dbox75 { background: dark-light-diff($primary, $secondary, 75%, -75%); }