mirror of
https://github.com/discourse/discourse.git
synced 2025-03-02 13:40:13 +08:00
cdba864598
Why this change?
When editing a objects typed theme setting, the input fields which are
rendered should include a description so that the user knows the purpose
of the field which they are changing.
What does this change do?
This change adds support for adding description to each property in the
schema for an object by following a given convention in the locale file.
For a schema like this:
```
objects_setting:
type: objects
schema:
name: section
properties:
name:
type: string
required: true
links:
type: objects
schema:
name: link
properties:
name:
type: string
required: true
validations:
max_length: 20
url:
type: string
```
Description for each property in the object can be added like so:
```
en:
theme_metadata:
settings:
objects_setting:
description: <description> for the setting
schema:
properties:
name: <description for the name property>
links:
name: <description for the name property in link>
url: <description for the url property in link>
```
If the a description is not present, the input field will simply not
have an description.
Also note that a description for a theme setting can now be added like
so:
```
en:
theme_metadata:
settings:
some_other_setting: <This will be used as the description>
objects_setting:
description: <This will also be used as the description>
```
1074 lines
19 KiB
SCSS
1074 lines
19 KiB
SCSS
// Styles for /admin section
|
|
|
|
$mobile-breakpoint: 700px;
|
|
|
|
// Common admin styles
|
|
|
|
.admin-main-nav {
|
|
display: inline-flex;
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
background: var(--d-content-background);
|
|
|
|
@include breakpoint(tablet) {
|
|
width: calc(100% + 10px);
|
|
margin-left: -10px;
|
|
padding: 0 0 0 10px;
|
|
}
|
|
|
|
.nav-pills {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
width: calc(100% - 10px);
|
|
flex: 1 0 auto;
|
|
margin-top: 0;
|
|
@include breakpoint(tablet) {
|
|
white-space: nowrap;
|
|
flex-wrap: nowrap;
|
|
overflow-x: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
margin: 0 0 0 -10px;
|
|
padding: 0 10px 10px 10px;
|
|
}
|
|
&:before {
|
|
display: none;
|
|
}
|
|
> li {
|
|
margin: 0;
|
|
&:last-of-type {
|
|
> a {
|
|
margin-right: 25px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include breakpoint(tablet) {
|
|
// Fade-out for horizontal scroll nav
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 10px;
|
|
margin-left: -10px;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(var(--secondary-rgb), 1),
|
|
rgba(var(--secondary-rgb), 0)
|
|
);
|
|
}
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0px;
|
|
width: 30px;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(var(--secondary-rgb), 0),
|
|
rgba(var(--secondary-rgb), 1)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-contents {
|
|
position: relative;
|
|
.nav-stacked {
|
|
@media screen and (max-width: 700px) {
|
|
margin: 0 15px 0 -10px;
|
|
}
|
|
}
|
|
|
|
.row:before,
|
|
.row:after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
.row:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.admin-contents table {
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
|
|
tr {
|
|
text-align: left;
|
|
}
|
|
td,
|
|
th {
|
|
padding: 8px;
|
|
}
|
|
tr:hover {
|
|
background-color: var(--primary-very-low);
|
|
}
|
|
tr.selected {
|
|
background-color: var(--primary-low);
|
|
}
|
|
.filters input {
|
|
margin-bottom: 0;
|
|
}
|
|
.label {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: 970px) and (min-width: 768px) {
|
|
td,
|
|
th {
|
|
padding: 6px 4px;
|
|
}
|
|
th {
|
|
vertical-align: bottom;
|
|
}
|
|
th.sortable {
|
|
max-width: 100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-contents table.grid {
|
|
// Table switches to grid for narrow screens
|
|
@media screen and (max-width: 767px) {
|
|
thead {
|
|
display: none;
|
|
}
|
|
.label {
|
|
display: block;
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-down-1);
|
|
margin: 0.5em 0 0.15em 0;
|
|
}
|
|
tr {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
display: grid;
|
|
line-height: var(--line-height-medium);
|
|
padding: 8px 0;
|
|
min-width: 0;
|
|
td {
|
|
padding: 2px;
|
|
align-self: center;
|
|
}
|
|
}
|
|
|
|
tr.flagged-topic {
|
|
grid-template-columns: 0.25fr 1fr 1fr;
|
|
td.topic-title {
|
|
grid-column-start: 2;
|
|
grid-column-end: -2;
|
|
min-width: 0;
|
|
align-self: start;
|
|
}
|
|
td.last-flagged {
|
|
grid-row: 1;
|
|
grid-column-end: -1;
|
|
text-align: right;
|
|
align-self: start;
|
|
}
|
|
td.flag-details {
|
|
grid-row: 2;
|
|
grid-column-end: -1;
|
|
text-align: right;
|
|
}
|
|
td.flagged-topic-users {
|
|
grid-row: 1;
|
|
grid-column-start: 1;
|
|
max-width: 60px;
|
|
align-self: start;
|
|
a {
|
|
display: inline-block;
|
|
margin: 0 0.25em 0.25em 0;
|
|
}
|
|
}
|
|
td.flag-counts {
|
|
grid-row: 2;
|
|
grid-column-start: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 550px) {
|
|
tr {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
}
|
|
}
|
|
}
|
|
|
|
.site-texts {
|
|
.search-area {
|
|
margin-bottom: 2em;
|
|
p {
|
|
margin-top: 0;
|
|
}
|
|
.site-text-search {
|
|
padding: 0.5em;
|
|
font-size: var(--font-0);
|
|
width: 50%;
|
|
}
|
|
.reseed {
|
|
float: right;
|
|
}
|
|
.locale {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.locale-search {
|
|
width: 50%;
|
|
}
|
|
}
|
|
.text-highlight {
|
|
font-weight: bold;
|
|
}
|
|
.site-text {
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--primary-low);
|
|
margin-bottom: 0.5em;
|
|
&.overridden {
|
|
background-color: var(--highlight-bg);
|
|
}
|
|
h3 {
|
|
font-weight: normal;
|
|
font-size: var(--font-0);
|
|
@include breakpoint(mobile-extra-large) {
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
button.edit {
|
|
float: right;
|
|
}
|
|
|
|
$maxHeight: 8 * 1.4em;
|
|
$gradientHeight: 2.2em;
|
|
|
|
.site-text-value {
|
|
margin: 0.5em 5em 0.5em 0;
|
|
max-height: $maxHeight;
|
|
overflow: hidden;
|
|
position: relative;
|
|
&::after {
|
|
content: " ";
|
|
position: absolute;
|
|
background-color: red;
|
|
left: 0;
|
|
right: 0;
|
|
top: $maxHeight - $gradientHeight;
|
|
height: $gradientHeight;
|
|
background: linear-gradient(
|
|
to top,
|
|
rgba(var(--secondary-rgb), 1),
|
|
rgba(var(--secondary-rgb), 0.15)
|
|
);
|
|
}
|
|
@include breakpoint(mobile-extra-large) {
|
|
word-wrap: break-word;
|
|
max-width: 80vw;
|
|
margin-right: 3em;
|
|
}
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
.edit-site-text {
|
|
textarea {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 0;
|
|
}
|
|
.save-button {
|
|
margin-top: 1em;
|
|
}
|
|
.save-button,
|
|
.title {
|
|
margin-bottom: 1em;
|
|
}
|
|
@include breakpoint(mobile-extra-large) {
|
|
.title {
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
.go-back {
|
|
margin-top: 1em;
|
|
}
|
|
.desc {
|
|
padding-top: 3px;
|
|
font-size: var(--font-down-1);
|
|
line-height: var(--line-height-large);
|
|
color: var(--primary-medium);
|
|
}
|
|
.outdated {
|
|
border: 1px solid var(--primary-low);
|
|
box-sizing: border-box;
|
|
color: var(--primary);
|
|
margin-bottom: 1em;
|
|
max-width: 800px;
|
|
padding: 1em;
|
|
|
|
p {
|
|
color: var(--primary-high);
|
|
}
|
|
}
|
|
}
|
|
p.warning {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
|
|
.content-list {
|
|
width: 27%;
|
|
float: left;
|
|
li a span.count {
|
|
font-size: var(--font-down-1);
|
|
float: right;
|
|
margin-right: 10px;
|
|
background-color: var(--primary-low);
|
|
padding: 2px 5px;
|
|
border-radius: 5px;
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
.content-body {
|
|
float: left;
|
|
width: 60%;
|
|
}
|
|
|
|
.admin-content {
|
|
margin-bottom: 50px;
|
|
.admin-contents {
|
|
padding: 0 0 8px 0;
|
|
@include clearfix();
|
|
}
|
|
.view-options {
|
|
float: right;
|
|
}
|
|
table.report {
|
|
margin-top: 20px;
|
|
tr {
|
|
th:nth-of-type(1) {
|
|
width: 20%;
|
|
}
|
|
}
|
|
|
|
tr.total-for-period,
|
|
tr.total {
|
|
td {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
&.web_crawlers {
|
|
tr {
|
|
th:nth-of-type(1) {
|
|
width: 60%;
|
|
}
|
|
}
|
|
td.x-value {
|
|
max-width: 0;
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
.bar-container {
|
|
float: left;
|
|
width: 300px;
|
|
margin-right: 15px;
|
|
margin-bottom: 5px;
|
|
|
|
.bar {
|
|
margin-top: 5px;
|
|
background-color: var(--tertiary);
|
|
display: inline-block;
|
|
text-align: right;
|
|
padding-right: 8px;
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.full-reason {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.admin-users .users-list {
|
|
.username .d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
.ip-lookup {
|
|
position: relative;
|
|
display: inline-block;
|
|
.location-box {
|
|
position: absolute;
|
|
width: 460px;
|
|
right: 0;
|
|
z-index: z("dropdown");
|
|
box-shadow: var(--shadow-card);
|
|
margin-top: -2px;
|
|
background-color: var(--secondary);
|
|
padding: 12px 12px 5px;
|
|
.powered-by {
|
|
font-size: var(--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: 10px;
|
|
|
|
.admin-section {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.username {
|
|
input {
|
|
min-width: 15em;
|
|
@media screen and (max-width: 500px) {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.select-kit {
|
|
width: 350px;
|
|
}
|
|
.select-kit.multi-select {
|
|
width: 500px;
|
|
}
|
|
.select-kit.dropdown-select-box {
|
|
width: auto;
|
|
}
|
|
.search-logs-filter {
|
|
margin-left: auto;
|
|
@media screen and (max-width: 700px) {
|
|
flex: 1 1 100%;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.header-search-results {
|
|
clear: both;
|
|
padding: 4px;
|
|
}
|
|
|
|
.controls {
|
|
@include clearfix;
|
|
}
|
|
.users-list-container {
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
|
|
.admin-title {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
.show-emails,
|
|
.hide-emails {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.admin-controls {
|
|
display: flex;
|
|
background-color: var(--primary-low);
|
|
align-items: center;
|
|
|
|
.admin-actions {
|
|
margin-left: auto;
|
|
}
|
|
nav {
|
|
background-color: var(--primary-low);
|
|
width: 100%;
|
|
}
|
|
nav {
|
|
display: inline-flex;
|
|
position: relative;
|
|
flex: 1 0 0px;
|
|
height: auto;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
height: 100%;
|
|
@include breakpoint(tablet) {
|
|
width: calc(100% + 10px);
|
|
padding-left: 10px;
|
|
margin-left: -10px;
|
|
margin-right: -10px;
|
|
}
|
|
|
|
&:before {
|
|
// Fade out sides of horizontal nav
|
|
content: "";
|
|
position: absolute;
|
|
width: 10px;
|
|
left: 0;
|
|
height: calc(100% - 5px);
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(var(--primary-low-rgb), 1),
|
|
rgba(var(--primary-low-rgb), 0)
|
|
);
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0px;
|
|
width: 15px;
|
|
height: calc(100% - 5px);
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(var(--primary-low-rgb), 0),
|
|
rgba(var(--primary-low-rgb), 1)
|
|
);
|
|
}
|
|
}
|
|
|
|
.nav-pills {
|
|
width: calc(100% - 10px);
|
|
display: inline-flex;
|
|
padding: 10px;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
overflow-x: auto;
|
|
@include breakpoint(tablet) {
|
|
margin-left: -10px;
|
|
overflow-x: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
> li {
|
|
margin: 0;
|
|
a.active {
|
|
background: var(--primary-medium);
|
|
}
|
|
}
|
|
}
|
|
h1 {
|
|
font-size: var(--font-up-3);
|
|
line-height: var(--line-height-medium);
|
|
color: var(--primary);
|
|
}
|
|
.controls {
|
|
background: var(--primary-low);
|
|
width: 100%;
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
.inline-form {
|
|
// Hacky, but fixes email preview summary
|
|
margin-bottom: -0.5em;
|
|
> div {
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
|
|
@include breakpoint(mobile-extra-large) {
|
|
margin: 0 -10px;
|
|
}
|
|
input {
|
|
@include breakpoint(tablet) {
|
|
max-width: 150px;
|
|
}
|
|
}
|
|
&.search {
|
|
width: auto;
|
|
white-space: nowrap;
|
|
label {
|
|
flex: 1 1 250px;
|
|
display: flex;
|
|
align-items: center;
|
|
input {
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.menu-toggle {
|
|
border-color: var(--primary-medium);
|
|
border-radius: 3px;
|
|
background: transparent;
|
|
color: var(--primary);
|
|
&:hover {
|
|
background-color: var(--primary-low-mid);
|
|
}
|
|
|
|
.not-mobile-device & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.result-message {
|
|
display: inline-block;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.search {
|
|
label {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
// 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 {
|
|
span {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
label {
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.horizontal-overflow-nav__scroll-right,
|
|
.horizontal-overflow-nav__scroll-left {
|
|
--fade-color: var(--primary-low-rgb);
|
|
background: var(--primary-low);
|
|
}
|
|
}
|
|
|
|
.badges,
|
|
.web-hook-container {
|
|
input[type="text"],
|
|
textarea {
|
|
min-width: 350px;
|
|
}
|
|
}
|
|
|
|
.text-successful {
|
|
color: var(--success);
|
|
}
|
|
|
|
.text-danger {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.text-muted {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.admin-nav {
|
|
width: 18%;
|
|
box-sizing: border-box;
|
|
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: 250px;
|
|
}
|
|
@media (max-width: 500px) {
|
|
width: 50%;
|
|
}
|
|
.nav-stacked {
|
|
background-color: inherit;
|
|
|
|
a.active {
|
|
color: var(--primary);
|
|
background-color: initial;
|
|
font-weight: 700;
|
|
border-right: 4px solid var(--quaternary);
|
|
|
|
&::after {
|
|
display: none; // Hides the arrow
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-detail {
|
|
background-color: var(--secondary);
|
|
margin-left: 0;
|
|
border-left: solid 1px var(--primary-low);
|
|
padding: 30px 0 30px 30px;
|
|
width: 82%;
|
|
box-sizing: border-box;
|
|
@media (max-width: $mobile-breakpoint) {
|
|
width: 95%;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.admin-detail.mobile-open {
|
|
@media (max-width: $mobile-breakpoint) {
|
|
transition: transform 0.3s ease;
|
|
@include transform(translateX(250px));
|
|
}
|
|
@media (max-width: 500px) {
|
|
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));
|
|
margin-left: -10px;
|
|
}
|
|
}
|
|
|
|
section.details {
|
|
h1 {
|
|
font-size: var(--font-up-3);
|
|
color: var(--primary);
|
|
padding: 5px 10px;
|
|
margin: 30px 0 5px 0;
|
|
border-bottom: 5px solid var(--primary-low);
|
|
}
|
|
}
|
|
|
|
.user-controls {
|
|
padding: 5px;
|
|
clear: both;
|
|
text-align: right;
|
|
.btn {
|
|
line-height: var(--line-height-medium);
|
|
}
|
|
@media (max-width: $mobile-breakpoint) {
|
|
.btn {
|
|
margin: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.row.groups {
|
|
input[type="text"] {
|
|
width: 500px;
|
|
}
|
|
input#group-users {
|
|
width: 600px;
|
|
}
|
|
}
|
|
|
|
// Ember.ListView
|
|
.ember-list-view {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.ember-list-item-view {
|
|
position: absolute;
|
|
}
|
|
|
|
.tl3-requirements {
|
|
.d-icon-check {
|
|
color: var(--success);
|
|
}
|
|
.d-icon-times {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
}
|
|
|
|
.directory-table {
|
|
.not-activated {
|
|
.directory-table__cell {
|
|
&,
|
|
a,
|
|
a:visited {
|
|
color: #bbb;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.preview {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
table#user-badges {
|
|
.reason {
|
|
max-width: 200px;
|
|
}
|
|
}
|
|
|
|
@mixin value-btn {
|
|
width: 29px;
|
|
border: 1px solid var(--primary-low);
|
|
outline: none;
|
|
padding: 0;
|
|
|
|
&:focus {
|
|
border-color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
.value-list {
|
|
.value {
|
|
padding: 0.125em 0;
|
|
@include ellipsis;
|
|
display: flex;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.value-input {
|
|
box-sizing: border-box;
|
|
flex: 1 0 0px;
|
|
border-color: var(--primary-low);
|
|
cursor: pointer;
|
|
margin: 0;
|
|
|
|
&:focus {
|
|
border-color: var(--tertiary);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.remove-value-btn {
|
|
@include value-btn;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.shift-up-value-btn,
|
|
.shift-down-value-btn {
|
|
display: none;
|
|
margin-inline: 0.25em;
|
|
}
|
|
|
|
&:hover {
|
|
.shift-up-value-btn,
|
|
.shift-down-value-btn {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
.values {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
}
|
|
|
|
.emoji-value-list {
|
|
margin-left: 0;
|
|
|
|
.emoji-details {
|
|
@include form-item-sizing;
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 30px;
|
|
color: var(--primary);
|
|
border-color: var(--primary-low);
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
.emoji-name {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
&:not(.can-edit) {
|
|
pointer-events: none;
|
|
background-color: var(--primary-very-low);
|
|
}
|
|
}
|
|
|
|
.value-input {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.value .add-emoji-button {
|
|
display: block;
|
|
background-color: var(--primary-low);
|
|
border: none;
|
|
}
|
|
|
|
.value .add-value-btn,
|
|
.shift-up-value-btn,
|
|
.shift-down-value-btn {
|
|
@include value-btn;
|
|
margin-right: 0 !important;
|
|
margin-left: 0.25em;
|
|
}
|
|
|
|
.secret-value-list {
|
|
.value {
|
|
flex-flow: row wrap;
|
|
margin-left: -0.25em;
|
|
margin-top: -0.125em;
|
|
.new-value-input {
|
|
flex: 1 0 0px;
|
|
}
|
|
.value-input,
|
|
.new-value-input {
|
|
margin-top: 0.125em;
|
|
&:last-of-type {
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
.remove-value-btn {
|
|
margin-left: 0.25em;
|
|
margin-top: 0.125em;
|
|
}
|
|
.add-value-btn {
|
|
@include value-btn;
|
|
margin-left: 0.25em;
|
|
margin-top: 0.125em;
|
|
}
|
|
.new-value-input {
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobile-view .secret-value-list {
|
|
.add-value-btn {
|
|
margin-bottom: 9px;
|
|
}
|
|
.value {
|
|
.value-input:last-of-type {
|
|
margin-left: 2.35em;
|
|
}
|
|
.new-value-input:first-of-type {
|
|
margin-right: 2.15em;
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.simple-list-input {
|
|
display: flex;
|
|
|
|
.add-value-input {
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
flex: 1 0 0px;
|
|
}
|
|
|
|
.add-value-btn {
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.inline-edit label {
|
|
display: inline-block;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
a.inline-editable-field {
|
|
color: var(--primary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Styles for subtabs in admin
|
|
@import "common/admin/dashboard";
|
|
@import "common/admin/settings";
|
|
@import "common/admin/users";
|
|
@import "common/admin/penalty";
|
|
@import "common/admin/badges";
|
|
@import "common/admin/emails";
|
|
@import "common/admin/json_schema_editor";
|
|
@import "common/admin/schema_field";
|
|
@import "common/admin/staff_logs";
|
|
@import "common/admin/customize";
|
|
@import "common/admin/customize-install-theme";
|
|
@import "common/admin/api";
|
|
@import "common/admin/backups";
|
|
@import "common/admin/plugins";
|
|
@import "common/admin/admin_reports";
|
|
@import "common/admin/admin_report";
|
|
@import "common/admin/admin_report_counters";
|
|
@import "common/admin/admin_report_chart";
|
|
@import "common/admin/admin_report_radar";
|
|
@import "common/admin/admin_report_stacked_chart";
|
|
@import "common/admin/admin_report_table";
|
|
@import "common/admin/admin_report_inline_table";
|
|
@import "common/admin/admin_intro";
|
|
@import "common/admin/admin_emojis";
|
|
@import "common/admin/mini_profiler";
|
|
|
|
// EXPERIMENTAL: Revamped admin styles, probably can be split up later down the line.
|
|
@import "common/admin/admin_revamp";
|