discourse/app/assets/stylesheets/common/admin/admin_base.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

1032 lines
18 KiB
SCSS
Raw Normal View History

2018-07-02 23:14:53 -04:00
// Styles for /admin section
@import "common/foundation/helpers";
2013-02-05 14:16:51 -05:00
2015-08-30 15:09:28 -04:00
$mobile-breakpoint: 700px;
2015-08-01 18:00:39 -04:00
2018-07-02 23:14:53 -04:00
// Common admin styles
2015-08-01 18:00:39 -04:00
2018-07-02 23:14:53 -04:00
.admin-main-nav {
display: inline-flex;
position: relative;
width: 100%;
overflow: hidden;
height: 100%;
2018-07-12 16:38:51 -04:00
@include breakpoint(tablet) {
2018-07-02 23:14:53 -04:00
width: calc(100% + 10px);
margin-left: -10px;
padding: 0 0 0 10px;
}
2018-08-03 17:43:07 -04:00
.nav-pills {
2018-07-02 23:14:53 -04:00
display: inline-flex;
flex-wrap: wrap;
2018-07-02 23:14:53 -04:00
width: calc(100% - 10px);
flex: 1 0 auto;
margin-top: 0;
2018-07-12 16:38:51 -04:00
@include breakpoint(tablet) {
2018-07-02 23:14:53 -04:00
white-space: nowrap;
flex-wrap: nowrap;
2018-07-02 23:14:53 -04:00
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;
}
}
}
}
2018-07-12 16:38:51 -04:00
@include breakpoint(tablet) {
2018-07-02 23:14:53 -04:00
// 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)
2018-07-02 23:14:53 -04:00
);
}
&: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)
2018-07-02 23:14:53 -04:00
);
2015-08-01 18:00:39 -04:00
}
}
}
2015-08-16 13:35:23 -04:00
.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;
}
2015-08-16 13:35:23 -04:00
}
.admin-contents table {
2014-02-12 23:36:10 -05:00
width: 100%;
2017-03-20 10:23:00 -04:00
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;
}
2018-07-02 23:14:53 -04:00
.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);
2018-07-02 23:14:53 -04:00
font-size: $font-down-1;
margin: 0.5em 0 0.15em 0;
}
tr {
grid-template-columns: repeat(3, 1fr);
display: grid;
line-height: $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;
2018-01-12 17:27:38 -05:00
font-size: $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-medium);
}
h3 {
font-weight: normal;
2018-01-12 17:27:38 -05:00
font-size: $font-0;
2019-07-11 09:57:53 -04:00
@include breakpoint(mobile-extra-large) {
2018-07-13 01:43:40 -04:00
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)
);
2018-07-13 01:43:40 -04:00
}
2019-07-11 09:57:53 -04:00
@include breakpoint(mobile-extra-large) {
2018-07-13 01:43:40 -04:00
word-wrap: break-word;
max-width: 80vw;
margin-right: 3em;
2018-07-13 01:43:40 -04:00
}
color: var(--primary-medium);
}
}
.edit-site-text {
textarea {
2018-07-13 01:43:40 -04:00
width: 100%;
max-width: 800px;
}
.save-button,
.title {
margin-bottom: 1em;
}
2019-07-11 09:57:53 -04:00
@include breakpoint(mobile-extra-large) {
2018-07-13 01:43:40 -04:00
.title {
word-wrap: break-word;
}
}
.go-back {
margin-top: 1em;
}
}
2019-03-11 12:32:41 -04:00
p.warning {
color: var(--danger);
}
}
2018-02-14 12:26:05 -05:00
.content-list {
width: 27%;
float: left;
li a span.count {
font-size: $font-down-1;
float: right;
margin-right: 10px;
background-color: var(--primary-low);
2018-02-14 12:26:05 -05:00
padding: 2px 5px;
border-radius: 5px;
color: var(--primary);
2018-02-14 12:26:05 -05:00
}
}
.content-body {
float: left;
width: 60%;
2013-05-08 01:20:38 -04:00
}
2013-02-05 14:16:51 -05:00
.admin-content {
margin-bottom: 50px;
.admin-contents {
2018-07-02 23:14:53 -04:00
padding: 0 0 8px 0;
2015-03-23 10:23:42 -04:00
@include clearfix();
2013-02-05 14:16:51 -05:00
}
.view-options {
float: right;
}
table.report {
2014-03-26 12:03:58 -04:00
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;
display: inline-block;
.bar {
margin-top: 5px;
background-color: var(--tertiary);
display: inline-block;
text-align: right;
padding-right: 8px;
color: var(--secondary);
}
}
}
2013-02-05 14:16:51 -05:00
}
.full-reason {
white-space: pre-wrap;
}
.admin-users .users-list {
2019-10-04 13:25:54 -04:00
.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: shadow("card");
margin-top: -2px;
background-color: var(--secondary);
padding: 12px 12px 5px;
.powered-by {
2018-01-12 17:27:38 -05:00
font-size: $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 {
2018-07-02 23:14:53 -04:00
margin-top: 10px;
2017-10-19 15:51:08 -04:00
2018-07-02 23:14:53 -04:00
.username {
input {
min-width: 15em;
2018-07-02 23:14:53 -04:00
@media screen and (max-width: 500px) {
box-sizing: border-box;
width: 100%;
}
}
}
.select-kit {
2017-10-19 15:51:08 -04:00
width: 350px;
}
.select-kit.multi-select {
2017-11-09 13:57:53 -05:00
width: 500px;
2017-10-19 15:51:08 -04:00
}
.select-kit.dropdown-select-box {
width: auto;
}
.search-logs-filter {
2018-07-02 23:14:53 -04:00
margin-left: auto;
@media screen and (max-width: 700px) {
flex: 1 1 100%;
margin-left: 0;
}
}
2018-07-02 23:14:53 -04:00
.header-search-results {
clear: both;
padding: 4px;
}
2018-07-02 23:14:53 -04:00
.controls {
@include clearfix;
2015-11-20 12:30:04 -05:00
}
.users-list-container {
overflow-x: auto;
}
2015-08-01 18:00:39 -04:00
}
.admin-title {
2018-07-02 23:14:53 -04:00
display: flex;
flex-wrap: wrap;
align-items: flex-start;
2019-03-21 05:25:05 -04:00
.show-emails,
.hide-emails {
2018-07-02 23:14:53 -04:00
margin-left: auto;
}
}
2013-02-05 14:16:51 -05:00
.admin-controls {
2018-07-02 23:14:53 -04:00
display: flex;
background-color: var(--primary-low);
2018-07-05 02:32:27 -04:00
align-items: center;
2018-07-02 23:14:53 -04:00
.admin-actions {
margin-left: auto;
}
2018-02-14 12:26:05 -05:00
nav {
background-color: var(--primary-low);
2018-07-02 23:14:53 -04:00
width: 100%;
}
nav {
display: inline-flex;
position: relative;
flex: 1 0 0px;
2018-07-02 23:14:53 -04:00
height: auto;
overflow: hidden;
padding: 0;
height: 100%;
2018-07-12 16:38:51 -04:00
@include breakpoint(tablet) {
2018-07-02 23:14:53 -04:00
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)
2018-07-02 23:14:53 -04:00
);
}
&:after {
content: "";
position: absolute;
right: 0px;
width: 15px;
2018-07-02 23:14:53 -04:00
height: calc(100% - 5px);
background: linear-gradient(
to right,
rgba(var(--primary-low-rgb), 0),
rgba(var(--primary-low-rgb), 1)
2018-07-02 23:14:53 -04:00
);
}
2018-02-14 12:26:05 -05:00
}
2018-07-02 23:14:53 -04:00
2018-08-03 17:43:07 -04:00
.nav-pills {
2018-07-02 23:14:53 -04:00
width: calc(100% - 10px);
display: inline-flex;
padding: 10px;
margin: 0;
white-space: nowrap;
overflow-x: auto;
2018-07-12 16:38:51 -04:00
@include breakpoint(tablet) {
2018-07-02 23:14:53 -04:00
margin-left: -10px;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
&:before {
display: none;
}
> li {
margin: 0;
a.active {
background: var(--primary-medium);
2018-07-02 23:14:53 -04:00
}
&:last-of-type {
> a {
margin-right: 25px;
2013-02-05 14:16:51 -05:00
}
}
}
}
h1 {
2018-01-12 17:27:38 -05:00
font-size: $font-up-3;
line-height: $line-height-medium;
color: var(--primary);
2013-02-05 14:16:51 -05:00
}
.controls {
background: var(--primary-low);
2018-07-02 23:14:53 -04:00
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;
}
}
2019-07-11 09:57:53 -04:00
@include breakpoint(mobile-extra-large) {
2018-07-13 01:43:40 -04:00
margin: 0 -10px;
}
2018-07-02 23:14:53 -04:00
input {
2018-07-13 01:43:40 -04:00
@include breakpoint(tablet) {
max-width: 150px;
}
2018-07-02 23:14:53 -04:00
}
&.search {
width: auto;
white-space: nowrap;
label {
flex: 1 1 250px;
display: flex;
align-items: center;
input {
margin-right: 0.5em;
}
}
}
2013-02-05 14:16:51 -05:00
}
.menu-toggle {
border-color: var(--primary-medium);
2015-08-16 13:35:23 -04:00
border-radius: 3px;
background: transparent;
color: var(--primary);
2015-08-16 13:35:23 -04:00
&:hover {
background-color: var(--primary-low-mid);
2015-08-16 13:35:23 -04:00
}
.not-mobile-device & {
display: none;
2015-08-16 13:35:23 -04:00
}
}
2013-02-05 14:16:51 -05:00
.result-message {
display: inline-block;
padding-left: 10px;
}
2013-02-05 14:16:51 -05:00
.search {
label {
margin-bottom: 0px;
2013-02-05 14:16:51 -05:00
}
// Hide the search checkbox for very small screens
2015-08-01 18:00:39 -04:00
// Todo: find somewhere to display it - probably requires switching its order in the html
2015-08-30 13:36:54 -04:00
@media (max-width: 550px) {
2015-08-01 18:00:39 -04:00
display: none;
}
2013-02-05 14:16:51 -05:00
}
.toggle {
span {
font-weight: bold;
}
}
label {
display: inline-block;
margin-right: 5px;
}
}
.badges,
.web-hook-container {
2021-09-20 09:52:03 -04:00
input[type="text"],
textarea {
min-width: 350px;
}
}
2016-06-15 13:49:57 -04:00
.text-successful {
color: var(--success);
2016-06-15 13:49:57 -04:00
}
.text-danger {
color: var(--danger);
2016-06-15 13:49:57 -04:00
}
.text-muted {
color: var(--primary-medium);
2016-06-15 13:49:57 -04:00
}
.admin-nav {
width: 18%;
box-sizing: border-box;
2018-07-02 23:14:53 -04:00
position: relative; // The admin-nav becomes a slide-out menu at the mobile-nav breakpoint
2015-08-01 18:00:39 -04:00
@media (max-width: $mobile-breakpoint) {
2015-11-12 13:01:12 -05:00
position: absolute;
z-index: z("base") - 1;
2018-07-02 23:14:53 -04:00
width: 250px;
}
@media (max-width: 500px) {
2015-08-16 13:35:23 -04:00
width: 50%;
2015-08-01 18:00:39 -04:00
}
}
.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;
2015-08-01 18:00:39 -04:00
@media (max-width: $mobile-breakpoint) {
width: 95%;
2015-08-16 13:35:23 -04:00
border: none;
}
}
.admin-detail.mobile-open {
@media (max-width: $mobile-breakpoint) {
2018-07-02 23:14:53 -04:00
transition: transform 0.3s ease;
@include transform(translateX(250px));
}
@media (max-width: 500px) {
2015-08-30 13:30:56 -04:00
transition: transform 0.3s ease;
2015-08-30 13:02:12 -04:00
@include transform(translateX(50%));
2015-08-16 13:35:23 -04:00
}
}
.admin-detail.mobile-closed {
@media (max-width: $mobile-breakpoint) {
2015-08-30 13:30:56 -04:00
transition: transform 0.3s ease;
2015-08-30 13:02:12 -04:00
@include transform(translateX(0));
2018-07-02 23:14:53 -04:00
margin-left: -10px;
}
2013-02-05 14:16:51 -05:00
}
section.details {
h1 {
2018-01-12 17:27:38 -05:00
font-size: $font-up-3;
color: var(--primary);
padding: 5px 10px;
margin: 30px 0 5px 0;
border-bottom: 5px solid var(--primary-low);
2013-02-05 14:16:51 -05:00
}
}
.user-controls {
padding: 5px;
clear: both;
text-align: right;
2019-01-22 14:00:38 -05:00
.btn {
line-height: $line-height-medium;
}
@media (max-width: $mobile-breakpoint) {
.btn {
margin: 2px;
}
}
}
2018-07-02 23:14:53 -04:00
.row.groups {
input[type="text"] {
width: 500px;
}
input#group-users {
width: 600px;
}
2014-09-25 02:38:44 -04:00
}
2018-07-02 23:14:53 -04:00
// 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);
2013-02-05 14:16:51 -05:00
}
2018-07-02 23:14:53 -04:00
.d-icon-times {
color: var(--danger);
}
2018-07-02 23:14:53 -04:00
}
@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 {
2014-07-22 16:30:32 -04:00
.setting-label {
float: left;
width: 100%;
h3 {
margin-bottom: 5px;
font-weight: bold;
margin-top: 25px;
2014-07-22 16:30:32 -04:00
}
}
.setting-value {
width: 100%;
}
2014-07-22 16:30:32 -04:00
}
}
.content-editor {
width: 100%;
}
div.ac-wrap {
width: 100% !important;
box-sizing: border-box;
}
2014-07-22 16:30:32 -04:00
.dashboard-left,
.dashboard-right {
width: 100%;
}
.dashboard-stats {
margin: 0;
}
2014-07-22 16:30:32 -04:00
.badges {
.current-badge {
margin: 70px 0 0 0;
}
.current-badge-actions {
padding: 0;
}
2014-07-22 16:30:32 -04:00
}
.customize .content-list,
.customize .current-style {
2014-07-22 16:30:32 -04:00
width: 100%;
}
}
2014-07-27 04:22:01 -04:00
tr.not-activated {
td,
td a,
td a:visited {
color: #bbb;
}
}
2018-07-02 23:14:53 -04:00
.details.not-activated {
.username .value,
.email .value a,
.email .value a:visited {
color: #bbb;
}
}
.preview {
margin-top: 5px;
}
table#user-badges {
.reason {
max-width: 200px;
}
}
2015-03-02 12:12:19 -05:00
@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;
}
}
2015-03-02 12:12:19 -05:00
}
.values {
margin-bottom: 0.5em;
2015-03-02 12:12:19 -05:00
}
}
2015-07-15 08:54:28 -04:00
.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;
}
}
2015-08-01 18:00:39 -04:00
.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;
}
2018-07-02 23:14:53 -04:00
// Styles for subtabs in admin
2019-04-01 06:39:49 -04:00
@import "common/admin/dashboard";
2018-07-02 23:14:53 -04:00
@import "common/admin/settings";
@import "common/admin/users";
@import "common/admin/suspend";
@import "common/admin/badges";
@import "common/admin/emails";
@import "common/admin/json_schema_editor";
2018-07-02 23:14:53 -04:00
@import "common/admin/staff_logs";
@import "common/admin/customize";
@import "common/admin/customize-install-theme";
2018-07-02 23:14:53 -04:00
@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";