mirror of
https://github.com/codeninjasllc/discourse.git
synced 2024-11-29 18:46:23 -05:00
1912 lines
34 KiB
SCSS
1912 lines
34 KiB
SCSS
// 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%;
|
|
.category-group {
|
|
width: 95%;
|
|
}
|
|
@media (max-width: $mobile-breakpoint) {
|
|
width: 100%;
|
|
}
|
|
.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 {
|
|
width: 404px;
|
|
@include medium-width { width: 314px; }
|
|
@media (max-width: $mobile-breakpoint) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.input-setting-list {
|
|
width: 408px;
|
|
@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-list {
|
|
|
|
h3 {
|
|
color: dark-light-diff($primary, $secondary, 50%, -20%);
|
|
font-size: 1.071em;
|
|
padding-left: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
|
|
li:first-of-type {
|
|
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
|
}
|
|
li {
|
|
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
|
}
|
|
|
|
li a {
|
|
display: block;
|
|
padding: 10px;
|
|
color: $primary;
|
|
|
|
&:hover {
|
|
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
|
|
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;
|
|
}
|
|
|
|
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%); }
|