mirror of
https://github.com/discourse/discourse.git
synced 2024-12-03 16:03:41 +08:00
361e954c55
This commit introduces a little bit of duplication since the old plugin UIs not using the new plugin show page look different from ones like AI and Gamification which have been converted. We can use the new admin header component on the plugins list, but for the other pages we are manually rendering a breadcrumb trail and the list of plugin tabs. Over time as we convert more plugins to use the new UI guidelines and show page we can get rid of this duplication.
1090 lines
20 KiB
SCSS
1090 lines
20 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 {
|
|
--space-1: 0.25rem;
|
|
--space-2: calc(0.25rem * 2);
|
|
--space-3: calc(0.25rem * 3);
|
|
--space-4: calc(0.25rem * 4);
|
|
--space-5: calc(0.25rem * 5);
|
|
--space-6: calc(0.25rem * 6);
|
|
|
|
position: relative;
|
|
.nav-stacked {
|
|
@media screen and (max-width: 700px) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.row:before,
|
|
.row:after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
.row:after {
|
|
clear: both;
|
|
}
|
|
|
|
&.admin-site-settings-category {
|
|
overflow: hidden;
|
|
|
|
@media (max-width: 500px) {
|
|
background-color: var(--primary-very-low);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
.site-text-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 {
|
|
.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;
|
|
}
|
|
|
|
&.-no-header {
|
|
margin-top: 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;
|
|
align-items: center;
|
|
background: var(--primary-low);
|
|
|
|
.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: 100%;
|
|
display: inline-flex;
|
|
padding: 0.5em;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
overflow-x: auto;
|
|
@include breakpoint(tablet) {
|
|
margin-left: -10px;
|
|
overflow-x: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
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(--d-nav-color--active);
|
|
|
|
&::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: 100%;
|
|
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));
|
|
padding: 30px 20px;
|
|
}
|
|
}
|
|
|
|
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/sidebar";
|
|
@import "common/admin/settings";
|
|
@import "common/admin/users";
|
|
@import "common/admin/penalty";
|
|
@import "common/admin/badges";
|
|
@import "common/admin/emails";
|
|
@import "common/admin/flags";
|
|
@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_config_area";
|
|
@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_stacked_line_chart";
|
|
@import "common/admin/admin_report_table";
|
|
@import "common/admin/admin_report_inline_table";
|
|
@import "common/admin/admin_page_header";
|
|
@import "common/admin/admin_intro";
|
|
@import "common/admin/admin_emojis";
|
|
@import "common/admin/mini_profiler";
|
|
@import "common/admin/schema_theme_setting_editor";
|
|
@import "common/admin/customize_themes_show_schema";
|