mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-26 11:12:53 +08:00
d4ac43e605
This PR introduces part one of the "Upcoming changes" interface for Discourse admins. The upcoming changes feature is an enhancement around our existing site-setting based feature flagging and experiments system. With some light metadata, we can give admins a much better overview of the current work we are doing, with ways for them to opt-out in early stages and opt-in to things that we haven’t yet turned on by default for them. This system, along with encouraging a more liberal use of site setting flags for features, experiments, and refactors in the app, should minimise the problem of breakages and disruptions for all Discourse users. It is also our intent with this system for it to be easier for designers to add and remove these changes. Finally, it also gives us a kind of running changelog that we can use to communicate with site owners before releases and “What’s new?” updates. ### FOR REVIEWERS This initial PR is gated behind a hidden `enable_upcoming_changes` site setting, because there is still more work to do before we reveal this to admins. To test the UI, you can add this metadata under any boolean-based site setting, though upcoming change settings will specifically be hidden: ``` upcoming_change: status: "alpha" (see UpcomingChanges.statuses.keys) impact: "feature,staff" (feature|other for the first part, staff|admins|moderators|all_members|developers for the second part) learn_more_url: "https://some.url" ``` To test the images, add an image under `public/images/upcoming_changes` with the file name as `SITE_SETTING_NAME.png` ### Interface Admins can see the following in the interface for upcoming changes: * The status of the change. Changes can progress along these statuses: * Pre-Alpha * Alpha * Beta * Stable * Permanent * The impact of the change. This is split into Type and Role. Type can be "Feature" or "Other" for now. Changes may affect the following roles: * Admins * Moderators * Staff * All members * The plugin that is making the change * The groups that are opted-in to the change. Admins can control these groups for a gradual rollout. If a change is enabled, it is limited to these groups. * In some cases, an image related to the change, behind the "Preview" link * A link to learn more about the change Admins can filter the changes by name, description, plugin, status, impact type, and whether the change is enabled. ### Promotion system For our hosted customers, we intend to have a status-based auto-promotion system as changes progress. For all sites, once a change reaches the Stable status, if an admin opts-out of that change it will generate an admin problem message that will be shown on the dashboard. For self-hosted Discourse admins, changes will only be forcibly enabled when they reach the Permanent state. ### Notification system A notification system for upcoming changes so admins can stay informed will be added in a followup PR. --------- Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
1279 lines
21 KiB
SCSS
Vendored
1279 lines
21 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
// Styles for /admin section
|
|
|
|
$mobile-breakpoint: 700px;
|
|
|
|
:root {
|
|
--admin-content-max-width: min(700px, 100%);
|
|
}
|
|
|
|
// Common admin styles
|
|
.admin-main-nav {
|
|
display: inline-flex;
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
background: var(--d-content-background);
|
|
|
|
@include viewport.until(md) {
|
|
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 viewport.until(md) {
|
|
white-space: nowrap;
|
|
flex-wrap: nowrap;
|
|
overflow-x: scroll;
|
|
margin: 0 0 0 -10px;
|
|
padding: 0 10px 10px 10px;
|
|
}
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
|
|
> li {
|
|
margin: 0;
|
|
|
|
&:last-of-type {
|
|
> a {
|
|
margin-right: 25px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include viewport.until(md) {
|
|
// Fade-out for horizontal scroll nav
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 10px;
|
|
margin-left: -10px;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgb(var(--secondary-rgb), 1),
|
|
rgb(var(--secondary-rgb), 0)
|
|
);
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
width: 30px;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgb(var(--secondary-rgb), 0),
|
|
rgb(var(--secondary-rgb), 1)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-contents {
|
|
position: relative;
|
|
|
|
.nav-stacked {
|
|
@media screen and (width <= 700px) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.row::before,
|
|
.row::after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
|
|
.row::after {
|
|
clear: both;
|
|
}
|
|
|
|
&.admin-site-settings-category {
|
|
overflow: hidden;
|
|
|
|
@media (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.selected {
|
|
background-color: var(--primary-low);
|
|
}
|
|
|
|
.filters input {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.label {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (width <= 970px) and (width >= 768px) {
|
|
td,
|
|
th {
|
|
padding: 6px 4px;
|
|
}
|
|
|
|
th {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
th.sortable {
|
|
max-width: 100px;
|
|
}
|
|
}
|
|
|
|
.admin-table-row-controls {
|
|
text-align: right;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.5em;
|
|
justify-content: flex-end;
|
|
|
|
.fk-d-menu__trigger {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-contents table.grid {
|
|
// Table switches to grid for narrow screens
|
|
@media screen and (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 (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(--content-border-color);
|
|
margin-bottom: 0.5em;
|
|
|
|
&.overridden {
|
|
background-color: var(--highlight-bg);
|
|
}
|
|
|
|
h3 {
|
|
font-weight: normal;
|
|
font-size: var(--font-0);
|
|
|
|
@include viewport.until(sm) {
|
|
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;
|
|
color: var(--primary-medium);
|
|
|
|
@include viewport.until(sm) {
|
|
word-wrap: break-word;
|
|
max-width: 80vw;
|
|
margin-right: 3em;
|
|
}
|
|
|
|
&::after {
|
|
content: " ";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: $maxHeight - $gradientHeight;
|
|
height: $gradientHeight;
|
|
background: linear-gradient(
|
|
to top,
|
|
rgb(var(--secondary-rgb), 1),
|
|
rgb(var(--secondary-rgb), 0.15)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 viewport.until(sm) {
|
|
.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(--content-border-color);
|
|
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-content {
|
|
.location-box {
|
|
padding: 1em;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: var(--font-up-1);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&__controls {
|
|
display: flex;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
}
|
|
|
|
.powered-by {
|
|
font-size: var(--font-down-1);
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.loading-container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
dl {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
|
|
&.other-accounts {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: normal;
|
|
font-size: var(--font-down-1);
|
|
|
|
.btn {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.count {
|
|
font-weight: bold;
|
|
margin-left: 0.25em;
|
|
|
|
&.--nonzero {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
dd {
|
|
margin: 0.25em 0 1em;
|
|
|
|
&.other-accounts {
|
|
margin: 1em 0 0 0;
|
|
max-height: 13em;
|
|
overflow: auto;
|
|
font-size: var(--font-down-1);
|
|
padding-right: 0.25em;
|
|
|
|
thead {
|
|
position: sticky;
|
|
top: 0;
|
|
line-height: 1.2;
|
|
background: var(--secondary);
|
|
|
|
th {
|
|
padding: 0.25em;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
td {
|
|
padding: 0.25em 0.25em 0.25em 0;
|
|
}
|
|
|
|
td.user {
|
|
white-space: nowrap;
|
|
|
|
img {
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-container {
|
|
margin-top: var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
|
|
.admin-section {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
&.-no-header {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.username {
|
|
input[type="text"] {
|
|
min-width: 15em;
|
|
|
|
@media screen and (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 (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%;
|
|
display: inline-flex;
|
|
position: relative;
|
|
flex: 1 0 0px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
height: 100%;
|
|
|
|
@include viewport.until(md) {
|
|
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,
|
|
rgb(var(--primary-low-rgb), 1),
|
|
rgb(var(--primary-low-rgb), 0)
|
|
);
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
width: 15px;
|
|
height: calc(100% - 5px);
|
|
background: linear-gradient(
|
|
to right,
|
|
rgb(var(--primary-low-rgb), 0),
|
|
rgb(var(--primary-low-rgb), 1)
|
|
);
|
|
}
|
|
}
|
|
|
|
.nav-pills {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
padding: 0.5em;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
overflow-x: auto;
|
|
|
|
@include viewport.until(md) {
|
|
margin-left: -10px;
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
&::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 viewport.until(sm) {
|
|
margin: 0 -10px;
|
|
}
|
|
|
|
input {
|
|
@include viewport.until(md) {
|
|
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: 0;
|
|
}
|
|
|
|
// Hide the search checkbox for very small screens
|
|
// Todo: find somewhere to display it - probably requires switching its order in the html
|
|
@media (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);
|
|
}
|
|
}
|
|
|
|
.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 (width <= 500px) {
|
|
width: 50%;
|
|
}
|
|
|
|
.nav-stacked {
|
|
background-color: inherit;
|
|
|
|
a.active {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
.admin-site-settings-category-nav__item:hover {
|
|
background: var(--d-sidebar-highlight-background);
|
|
}
|
|
}
|
|
|
|
.admin-detail {
|
|
background-color: var(--secondary);
|
|
margin-left: 0;
|
|
border-left: solid 1px var(--content-border-color);
|
|
padding: 30px 0 90px 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;
|
|
transform: translateX(250px);
|
|
}
|
|
|
|
@media (width <= 500px) {
|
|
transition: transform 0.3s ease;
|
|
transform: translateX(50%);
|
|
}
|
|
}
|
|
|
|
.admin-detail.mobile-closed {
|
|
@media (max-width: $mobile-breakpoint) {
|
|
transition: transform 0.3s ease;
|
|
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-xmark {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
|
|
@media all and (width >= 320px) and (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 {
|
|
margin-right: 0.25em;
|
|
|
|
@include value-btn;
|
|
}
|
|
|
|
.shift-up-value-btn,
|
|
.shift-down-value-btn {
|
|
.discourse-no-touch & {
|
|
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 {
|
|
margin-right: 0 !important;
|
|
margin-left: 0.25em;
|
|
|
|
@include value-btn;
|
|
}
|
|
|
|
.secret-value-list {
|
|
.value {
|
|
flex-flow: row wrap;
|
|
margin-left: -0.25em;
|
|
margin-top: -0.125em;
|
|
|
|
.new-value-input {
|
|
flex: 1 0 0px;
|
|
margin-left: 0.25em;
|
|
}
|
|
|
|
.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 {
|
|
margin-left: 0.25em;
|
|
margin-top: 0.125em;
|
|
|
|
@include value-btn;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.desktop-view .emoji-value-list {
|
|
.value {
|
|
.shift-up-value-btn,
|
|
.shift-down-value-btn {
|
|
display: none;
|
|
}
|
|
|
|
&:hover {
|
|
.shift-up-value-btn,
|
|
.shift-down-value-btn {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Styles for subtabs in admin
|
|
@import "admin/dashboard";
|
|
@import "admin/sidebar";
|
|
@import "admin/settings";
|
|
@import "admin/users";
|
|
@import "admin/penalty";
|
|
@import "admin/badges";
|
|
@import "admin/emails";
|
|
@import "admin/flags";
|
|
@import "admin/json_schema_editor";
|
|
@import "admin/schema_field";
|
|
@import "admin/staff_logs";
|
|
@import "admin/color_palettes";
|
|
@import "admin/customize";
|
|
@import "admin/customize-install-theme";
|
|
@import "admin/api";
|
|
@import "admin/backups";
|
|
@import "admin/plugins";
|
|
@import "admin/site-settings";
|
|
@import "admin/admin_config_area";
|
|
@import "admin/search";
|
|
@import "admin/admin_table";
|
|
@import "admin/admin_filter";
|
|
@import "admin/admin_filter_controls";
|
|
@import "admin/admin_reports";
|
|
@import "admin/admin_report";
|
|
@import "admin/admin_report_counters";
|
|
@import "admin/admin_report_chart";
|
|
@import "admin/admin_report_radar";
|
|
@import "admin/admin_report_stacked_chart";
|
|
@import "admin/admin_report_stacked_line_chart";
|
|
@import "admin/admin_report_table";
|
|
@import "admin/admin_report_inline_table";
|
|
@import "admin/admin_section_landing_page";
|
|
@import "admin/admin_user_fields";
|
|
@import "admin/admin_intro";
|
|
@import "admin/mini_profiler";
|
|
@import "admin/schema_setting_editor";
|
|
@import "admin/customize_show_schema";
|
|
@import "admin/admin_bulk_users_delete_modal";
|
|
@import "admin/color-palette-editor";
|
|
@import "admin/admin_config_color_palettes";
|
|
@import "admin/admin_config_components";
|
|
@import "admin/upcoming-changes";
|
