mirror of
https://github.com/discourse/discourse.git
synced 2024-12-19 04:36:27 +08:00
9ef3a18ce4
This commit adds a new admin UI under the route `/admin-revamp`, which is only accessible if the user is in a group defined by the new `enable_experimental_admin_ui_groups` site setting. It also adds a special `admin` sidebar panel that is shown instead of the `main` forum one when the admin is in this area.  We also add an "Admin Revamp" sidebar link to the community section, which will only appear if the user is in the setting group:  Within this there are subroutes defined like `/admin-revamp/config/:area`, these areas could contain any UI imaginable, this is just laying down an initial idea of the structure and how the sidebar will work. Sidebar links are currently hardcoded. Some other changes: * Changed the `main` and `chat` panels sidebar panel keys to use exported const values for reuse * Allowed custom sidebar sections to hide their headers with the `hideSectionHeader` option * Add a `groupSettingArray` setting on `this.siteSettings` in JS, which accepts a group site setting name and splits it by `|` then converts the items in the array to integers, similar to the `_map` magic for ruby group site settings * Adds a `hidden` option for sidebar panels which prevents them from showing in separated mode and prevents the switch button from being shown --------- Co-authored-by: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
1058 lines
19 KiB
SCSS
1058 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%;
|
|
}
|
|
}
|
|
|
|
.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/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_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";
|