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

1905 lines
32 KiB
SCSS

// these are the styles associated with the Discourse admin section
@import "common/foundation/variables";
@import "common/foundation/mixins";
@import "common/foundation/helpers";
@import "common/admin/customize";
@import "common/admin/flagging";
@import "common/admin/moderation_history";
@import "common/admin/suspend";
$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%;
margin-top: 10px;
tr {text-align: left;}
td, th {padding: 8px;}
td {
border-bottom: 1px solid $primary-low;
border-top: 1px solid $primary-low;
}
th {
text-align: left;
&.sortable {
cursor: pointer;
white-space: nowrap;
&:hover {
background-color: #e9e9e9;
background-color: lighten($primary, 80%);
}
.d-icon-chevron-down,
.d-icon-chevron-up {
margin-left: 0.5em;
}
}
}
tr:hover { background-color: darken($secondary, 2.5%); }
tr.selected { background-color: lighten($primary, 80%); }
.filters input { margin-bottom: 0; }
}
.site-texts {
.search-area {
margin-bottom: 2em;
p {
margin-top: 0;
}
.site-text-search {
padding: 0.5em;
font-size: $font-0;
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 $primary-low;
margin-bottom: 0.5em;
&.overridden {
background-color: $highlight-medium;
}
h3 {
font-weight: normal;
font-size: $font-0;
}
button.edit {
float: right;
}
.site-text-value {
margin: 0.5em 5em 0.5em 0;
max-height: 100px;
color: $primary-medium;
}
}
.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: $font-down-1;
float: right;
margin-right: 10px;
background-color: $primary-low;
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;
}
}
}
}
.full-reason {
white-space: pre-wrap;
}
.admin-users .users-list {
.username .fa {
color: dark-light-choose($primary-medium, $secondary-medium);
}
}
.ip-lookup {
position: relative;
display: inline-block;
.location-box {
position: absolute;
width: 460px;
right: 0;
z-index: z("dropdown");
box-shadow: 0 2px 6px rgba(0,0,0, .8);
margin-top: -2px;
background-color: $secondary;
padding: 12px 12px 5px;
.powered-by {
font-size: $font-down-1;
position: absolute;
bottom: -10px;
left: 10px;
}
.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;
.select-kit {
width: 350px;
}
.select-kit.multi-select {
width: 500px;
}
.select-box-kit.dropdown-select-box {
width: auto;
}
.search-logs-filter {
width: 200px;
float: right;
}
.header-search-results {
clear: both;
padding: 4px;
}
}
.admin-container .controls {
@include clearfix;
.save-messages {
margin-top: 1em;
}
}
.admin-title {
margin-bottom: 0.5em;
}
.admin-controls {
background-color: $primary-low;
padding: 10px 10px 3px 0;
@include clearfix;
.nav.nav-pills {
li.active {
a {
border-color: $primary-low;
background-color: $primary-medium;
&:hover {
background-color: $primary-medium;
}
}
}
}
h1 {
font-size: $font-up-3;
line-height: $line-height-medium;
color: $primary;
}
.controls {
margin-left: 10px;
}
.controls .menu-toggle {
display: none;
float: left;
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;
}
}
.email-preview {
.ac-wrap {
.item {
margin: 0.2em 0 0 0.4em;
}
// input[type=text] {
// margin-left: 0.4em;
// }
}
}
.paste-users {
width: 400px;
height: 150px;
}
.groups, .badges, .web-hook-container {
.form-horizontal {
& > div {
margin-bottom: 20px;
}
.d-editor-textarea-wrapper {
max-width: 60%;
.d-editor-button-bar {
overflow: hidden;
}
}
input, textarea, select, .select-box {
width: 350px;
}
input[type="checkbox"], input[type="radio"] {
width: 20px;
}
}
}
.text-successful {
color: $success;
}
.text-danger {
color: $danger;
}
.text-muted {
color: lighten($primary, 40);
}
.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: z("base") - 1;
width: 50%;
}
}
.admin-detail {
width: 76.5765%;
@media (max-width: $mobile-breakpoint) {
z-index: z("base");
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 $primary-low;
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-selector {
width: 95%;
}
@media (max-width: $mobile-breakpoint) {
width: 100%;
padding-right: 0;
}
.select-kit {
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, .input-setting-textarea {
box-sizing: border-box;
height: 30px;
width: 100%;
@media (max-width: $mobile-breakpoint) {
width: 100%;
}
}
.input-setting-textarea {
height: 150px;
}
.input-setting-list {
@media (max-width: $mobile-breakpoint) {
width: 100%;
}
padding: 1px;
background-color: $secondary;
border: 1px solid $primary-low;
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 0 3px 5px;
position: relative;
line-height: $line-height-small;
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: $font-down-1;
line-height: $line-height-large;
}
.validation-error {
color: $danger;
}
.desc {
color: dark-light-choose($primary-medium, $secondary-medium);
}
h3 {
font-size: $font-0;
font-weight: normal;
}
}
.setting.overridden {
h3 {
color: $highlight-high;
}
}
.setting.overridden.string {
input[type=text], textarea {
background-color: $highlight-medium;
}
}
}
section.details {
h1 {
font-size: $font-up-3;
color: $primary;
padding: 5px 10px;
margin: 30px 0 5px 0;
border-bottom: 5px solid $primary-low;
}
}
#selected-controls {
background-color: $tertiary-low;
padding: 8px;
min-height: 27px;
position: fixed;
bottom: 0;
width: 1075px;
}
.user-controls {
padding: 5px;
clear: both;
text-align: right;
@media (max-width: $mobile-breakpoint) {
.btn {
margin: 2px;
}
}
}
.display-row.associations .value {
width: 750px;
@media (max-width: $mobile-breakpoint) {
width: 75%;
float: right;
text-align: left;
margin-left: 0;
}
}
.display-row {
display: flex;
align-items: center;
padding: 10px 5px;
&:nth-of-type(1) {
border-top: 0;
}
&.highlight-danger {
background-color: $danger-low;
}
border-top: 1px solid $primary-low;
&:before, &:after {
display: table;
content: "";
}
&:after {
clear: both;
}
.field {
font-weight: bold;
width: 17.65765%;
float: left;
margin-left: 12px;
@media (max-width: $mobile-breakpoint) {
margin-left: 0;
line-height: $line-height-large;
margin-top: 5px;
}
}
.value {
width: 250px;
float: left;
margin-left: 12px;
@media (max-width: $mobile-breakpoint) {
width: 75%;
float: right;
text-align: left;
margin-left: 0;
}
.select-kit {
width: inherit;
}
}
.long-value {
width: 800px;
float: left;
margin-left: 12px;
font-size: $font-down-1;
button {
margin-left: 10px;
}
}
.controls {
width: 480px;
float: left;
margin-left: 12px;
@media (max-width: $mobile-breakpoint) {
width: 75%;
float: right;
text-align: left;
margin-left: 0;
}
.btn {
margin: 2px 5px 2px 0;
}
}
}
// Badges area
.badges {
.content-list ul {
margin-bottom: 10px;
.list-badge {
float: right;
font-size: $font-down-1;
font-weight: normal;
padding: 0 6px;
color: $secondary;
background-color: $tertiary-medium;
border-radius: 3px;
}
}
.current-badge {
margin: 20px;
p.help {
margin: 0;
color: dark-light-choose($primary-medium, $secondary-medium);
font-size: $font-down-1;
}
}
.form-horizontal {
.ace-wrapper {
position: relative;
height: 270px;
margin-bottom: 10px;
.ace_editor {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 1px solid #e9e9e9;
border-radius: 3px;
.ace_gutter {
border-right: 1px solid #e9e9e9;
background: #f4f4f4;
}
}
&[data-disabled="true"] {
cursor: not-allowed;
opacity: 0.5;
.ace_editor {
pointer-events:none;
.ace_cursor {
visibility: hidden;
}
}
}
}
.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($primary-low, $secondary-high);
}
.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: $font-0;
line-height: $line-height-medium;
padding: 4px;
background-color: $primary-low;
}
.badge-query-plan {
font-size: $font-down-1;
line-height: $line-height-medium;
padding: 4px;
background-color: $primary-low;
}
.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($primary-low-mid, $secondary-high);
.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($primary-low-mid, $secondary-high);
}
.content-list {
margin-right: 20px;
}
}
/* 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: $font-up-3;
font-weight: bold;
line-height: $line-height-medium;
}
.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: $font-up-4;
}
.up-to-date {
color: $success;
}
.updates-available {
color: $danger;
}
.critical-updates-available {
color: $danger;
}
}
.update-nag {
.d-icon {
font-size: $font-up-3;
}
}
table.api-keys {
margin-top: 10px;
width: 100%;
th {
text-align: left;
padding: 5px;
}
td {
padding: 5px;
}
td.key {
font-size: $font-down-1;
}
}
.dashboard-stats {
margin-bottom: 30px;
margin-right: 40px;
h4 {
font-weight: normal;
margin-bottom: 8px;
}
table {
width: 100%;
.title {
.d-icon {
color: $primary;
}
.d-icon-heart {
color: $love;
}
}
th {
font-weight: normal;
text-align: center;
background: $primary-low;
}
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: $primary-low;
margin-bottom: 20px;
.look-here {
float: left;
margin: 20px 10px 0 10px;
.fa {
font-size: $font-up-5;
vertical-align: middle;
color: $primary
}
}
.problem-messages {
float: left;
width: 80%;
margin-left: 1%;
a {
text-decoration: underline;
}
.actions {
text-align: right;
}
.btn {
background: $primary-low;
}
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;
}
}
.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;
}
}
.hook-event {
display: inline-block;
width: 40%;
margin-left: 20px;
label {
display: inline-block;
}
p {
margin: 0 0 5px 25px;
}
}
.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($primary-low-mid, $secondary-high);
padding: 3px 10px;
border-radius: 3px;
color: $primary;
&:hover {
color: $primary;
background-color: $primary-low;
}
.label {
font-weight: bold;
}
i {
margin-left: 6px;
}
}
}
// 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, .search-logs-list, .web-hook-events {
border-bottom: dotted 1px dark-light-choose($primary-low-mid, $secondary);
.heading-container {
width: 100%;
background-color: $primary-low;
}
.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 $primary-low;
}
}
.search-logs-list{
.col {
text-align: center;
width: 15%;
}
.col.term {
width: 45%;
text-align: left;
}
}
.log-details-modal {
pre {
white-space: pre-wrap;
max-height: 250px;
}
.modal-tab {
width: 95%;
}
}
.tl3-requirements {
.d-icon-check {
color: $success;
}
.d-icon-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;
}
.start-backup-modal {
.btn {
margin: 10px 0 10px 5px;
}
.btn:first-of-type {
margin-left: 10px;
}
}
@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%;
}
}
}
.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 $primary-low;
.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($primary-medium, $secondary-medium);
margin-bottom: 1em;
max-width: 700px;
}
}
.embedding td input {
margin-bottom: 0;
}
// Emails
.email-list {
.filters input {
width: 100%;
}
.time {
width: 50px;
}
.reply-key {
display: block;
font-size: $font-down-1;
color: dark-light-choose($primary-medium, $secondary-high);
}
.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: $font-down-1;
}
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;
}
}
.admin-list-item {
width: 100%;
border-top: 1px solid #e9e9e9;
padding: 0.25em 0;
}
// Webhook
.web-hook-container {
> p {
padding-bottom: 10px;
border-bottom: darken($secondary, 10%) 1px solid;
}
.filters {
margin: 5px 0;
padding-bottom: 5px;
border-bottom: darken($secondary, 5%) 1px solid;
}
.instructions {
margin-top: 5px;
}
.subscription-choice {
margin-bottom: 10px;
}
}
.web-hook-direction {
button {
margin-right: 10px;
}
}
.web-hook-events {
li {
padding: 2px 0;
}
.col {
display: inline-block;
padding-top: 6px;
vertical-align: top;
overflow-y: auto;
overflow-x: hidden;
}
.col.first {
width: 90px;
}
.col.event-id {
width: 300px;
}
.col.timestamp {
width: 150px;
}
.col.completion {
width: 220px;
}
.col.actions {
width: 305px;
padding-top: 0;
a {
text-decoration: underline;
}
}
.col.heading.actions {
padding: 4px 0;
}
.details {
display: block;
margin-top: 10px;
}
label {
font-size: $font-0;
}
}
.web-hook-events-listing {
margin-top: 15px;
.alert {
margin: 15px 0 0 0;
}
}
.email-preview-digest {
.controls {
margin-left: 20px;
label {
display: inline;
}
}
.preview-output iframe {
width: 100%;
height: 600px;
border-width: 1px;
}
}
.watched-word-box {
display: inline-block;
width: 250px;
margin-bottom: 1em;
float: left;
}
.watched-words-list {
margin-top: 40px;
}
.watched-word {
display: inline-block;
cursor: pointer;
.d-icon {
margin-right: 0.25em;
color: dark-light-diff($primary, $secondary, 50%, -50%);
}
&:hover .d-icon {
color: $primary;
}
}
.watched-word-form {
display: inline-block;
.success-message {
margin-left: 1em;
}
}
.watched-words-uploader {
float: right;
text-align: right;
.instructions {
font-size: $font-down-1;
}
}
.watched-words-detail {
.about {
margin-top: 24px;
margin-bottom: 40px;
}
}
// 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: -100%;
}
.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;
}
}
.inline-edit label {
display: inline-block;
margin-right: 20px;
}
.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: blend-primary-secondary(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: $primary-low; }
.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%); }