discourse/app/assets/stylesheets/common/admin/admin_base.scss
Penar Musaraj c937afc75e
FEATURE: automatic dark mode (#10341)
A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. 

This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
2020-08-03 22:57:10 -04:00

999 lines
18 KiB
SCSS

// Styles for /admin section
@import "common/foundation/variables";
@import "common/foundation/mixins";
@import "common/foundation/helpers";
$mobile-breakpoint: 700px;
// Common admin styles
.admin-main-nav {
display: inline-flex;
position: relative;
width: 100%;
height: auto;
overflow: hidden;
height: 100%;
.mobile-view & {
margin-top: 10px;
}
@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;
@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) 0%,
rgba(var(--secondary-rgb), 0) 100%
);
}
&:after {
content: "";
position: absolute;
right: 0px;
width: 30px;
height: 100%;
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0) 0%,
rgba(var(--secondary-rgb), 1) 100%
);
}
}
}
.nav-stacked {
@media screen and (max-width: 700px) {
margin: 0 10px 0 -10px;
}
}
.admin-contents {
position: relative;
}
.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: $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;
font-size: $font-0;
width: 50%;
}
.reseed {
float: right;
}
}
.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;
font-size: $font-0;
@include breakpoint(mobile-extra-large) {
word-wrap: break-word;
}
}
button.edit {
float: right;
}
.site-text-value {
margin: 0.5em 5em 0.5em 0;
@include breakpoint(medium, min-width) {
max-height: 100px;
}
@include breakpoint(mobile-extra-large) {
word-wrap: break-word;
}
color: var(--primary-medium);
}
}
.edit-site-text {
textarea {
width: 100%;
max-width: 800px;
}
.save-button,
.title {
margin-bottom: 1em;
}
@include breakpoint(mobile-extra-large) {
.title {
word-wrap: break-word;
}
}
.go-back {
margin-top: 1em;
}
}
p.warning {
color: var(--danger);
}
}
.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);
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;
display: inline-block;
.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: shadow("card");
margin-top: -2px;
background-color: var(--secondary);
padding: 12px 12px 5px;
.powered-by {
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 {
margin-top: 10px;
.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;
}
@include breakpoint(tablet) {
.select-kit.period-chooser
.period-chooser-header
h2.selected-name
.top-date-string {
font-size: $font-down-3;
}
}
.controls {
@include clearfix;
}
}
.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) 0%,
rgba(var(--primary-low-rgb), 0) 100%
);
}
&:after {
content: "";
position: absolute;
right: 0px;
width: 15px;
height: calc(100% - 5px);
background: linear-gradient(
to right,
rgba(var(--primary-low-rgb), 0) 0%,
rgba(var(--primary-low-rgb), 1) 100%
);
}
}
.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);
}
&:last-of-type {
> a {
margin-right: 25px;
}
}
}
}
h1 {
font-size: $font-up-3;
line-height: $line-height-medium;
color: var(--primary);
}
.controls {
background: var(--primary-low);
width: 100%;
padding: 10px;
display: flex;
align-items: center;
@include breakpoint(mobile-extra-large) {
margin: 0 -10px;
}
label {
margin-bottom: 0;
}
input {
margin-right: 5px;
margin-bottom: 0;
@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;
}
}
}
}
.controls .menu-toggle {
display: none;
float: left;
padding: 5px 10px;
margin-right: 15px;
border: 1px solid var(--primary-medium);
border-radius: 3px;
background: transparent;
color: var(--primary);
&:hover {
background-color: var(--primary-low-mid);
}
@media (max-width: $mobile-breakpoint) {
display: inline-block;
}
}
button {
margin-right: 5px;
}
input[type="text"] {
display: inline-block;
float: left;
}
.result-message {
display: inline-block;
padding-left: 10px;
}
.username {
input[type="text"] {
width: 240px;
}
}
.search {
label {
margin-top: 5px;
}
.controls {
margin-left: 0;
} // 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;
}
.pull-right {
padding-right: 10px;
}
}
.paste-users {
width: 400px;
height: 150px;
}
.groups,
.badges,
.web-hook-container {
.form-horizontal {
& > div {
margin-bottom: 20px;
}
.d-editor-textarea-wrapper {
max-width: 60%;
.d-editor-button-bar {
overflow: hidden;
}
}
input,
textarea,
select,
.select-box {
width: 350px;
}
input[type="checkbox"],
input[type="radio"] {
width: 20px;
}
}
}
.text-successful {
color: var(--success);
}
.text-danger {
color: var(--danger);
}
.text-muted {
color: var(--primary-medium);
}
.admin-nav {
width: 18.018%;
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 {
width: 76.5765%;
@media (max-width: $mobile-breakpoint) {
z-index: z("base");
width: 100%;
}
background-color: var(
--secondary
); // Todo: set this properly - it needs to be >= the menu height
min-height: 875px;
margin-left: 0;
border-left: solid 1px var(--primary-low);
padding: 30px 0 30px 30px;
@media (max-width: $mobile-breakpoint) {
padding: 30px 0;
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;
padding-left: 10px;
}
}
section.details {
h1 {
font-size: $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: $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%;
}
}
tr.not-activated {
td,
td a,
td a:visited {
color: #bbb;
}
}
.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;
}
}
@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;
}
}
.values {
margin-bottom: 0.5em;
}
}
.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 text-inputs need some padding
.mobile-view .admin-contents {
input[type="text"] {
padding: 4px;
}
}
.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/suspend";
@import "common/admin/badges";
@import "common/admin/emails";
@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";