discourse/app/assets/stylesheets/common/admin/admin_base.scss
Maja Komel 27e732a58d FEATURE: allow multiple secrets for Discourse SSO provider
This splits off the logic between SSO keys used incoming vs outgoing, it allows to far better restrict who is allowed to log in using a site.

This allows for better auditing of the SSO provider feature
2018-10-15 16:03:53 +11:00

991 lines
17 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;
width: calc(100% - 10px);
flex: 1 0 auto;
@include breakpoint(tablet) {
white-space: 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($secondary, 1) 0%,
rgba($secondary, 0) 100%
);
}
&:after {
content: "";
position: absolute;
right: 0px;
width: 30px;
height: 100%;
background: linear-gradient(
to right,
rgba($secondary, 0) 0%,
rgba($secondary, 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;
}
th {
text-align: left;
&.sortable {
cursor: pointer;
&:hover {
background-color: #e9e9e9;
background-color: lighten($primary, 80%);
}
.d-icon-chevron-down,
.d-icon-chevron-up {
margin-left: 0.5em;
}
}
}
tr:hover {
background-color: darken($secondary, 2.5%);
}
tr.selected {
background-color: lighten($primary, 80%);
}
.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: $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%;
}
.extra-options {
float: right;
input[type="checkbox"] {
margin-right: 0.5em;
}
}
}
.text-highlight {
font-weight: bold;
}
.site-text {
cursor: pointer;
border-bottom: 1px solid $primary-low;
margin-bottom: 0.5em;
&.overridden {
background-color: $highlight-medium;
}
h3 {
font-weight: normal;
font-size: $font-0;
@include breakpoint(mobile) {
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) {
word-wrap: break-word;
}
color: $primary-medium;
}
}
.edit-site-text {
textarea {
width: 100%;
max-width: 800px;
}
.save-messages,
.title {
margin-bottom: 1em;
}
@include breakpoint(mobile) {
.title {
word-wrap: break-word;
}
}
.go-back {
margin-top: 1em;
}
}
}
.content-list {
width: 27%;
float: left;
li a span.count {
font-size: $font-down-1;
float: right;
margin-right: 10px;
background-color: $primary-low;
padding: 2px 5px;
border-radius: 5px;
color: $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;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.bar-container {
float: left;
width: 300px;
margin-right: 15px;
margin-bottom: 5px;
display: inline-block;
.bar {
margin-top: 5px;
background-color: $tertiary;
display: inline-block;
text-align: right;
padding-right: 8px;
color: $secondary;
}
}
}
}
.full-reason {
white-space: pre-wrap;
}
.admin-users .users-list {
.username .fa {
color: dark-light-choose($primary-medium, $secondary-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: $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: 220px;
@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;
.save-messages {
margin-top: 1em;
}
}
}
.admin-title {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
.show-emails {
margin-left: auto;
}
}
.admin-controls {
display: flex;
background-color: $primary-low;
align-items: center;
.admin-actions {
margin-left: auto;
}
nav {
background-color: $primary-low;
width: 100%;
}
nav {
display: inline-flex;
position: relative;
flex: 1;
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($primary-low, 1) 0%,
rgba($primary-low, 0) 100%
);
}
&:after {
content: "";
position: absolute;
right: 0px;
width: 15px;
height: calc(100% - 5px);
background: linear-gradient(
to right,
rgba($primary-low, 0) 0%,
rgba($primary-low, 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: $primary-medium;
}
&:last-of-type {
> a {
margin-right: 25px;
}
}
}
}
h1 {
font-size: $font-up-3;
line-height: $line-height-medium;
color: $primary;
}
.controls {
background: $primary-low;
width: 100%;
padding: 10px;
display: flex;
align-items: center;
@include breakpoint(mobile) {
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 lighten($primary, 40%);
border-radius: 3px;
background: transparent;
color: $primary;
&:hover {
background-color: lighten($primary, 60%);
}
@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: $success;
}
.text-danger {
color: $danger;
}
.text-muted {
color: lighten($primary, 40);
}
.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: $secondary; // Todo: set this properly - it needs to be >= the menu height
min-height: 875px;
margin-left: 0;
border-left: solid 1px $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: $primary;
padding: 5px 10px;
margin: 30px 0 5px 0;
border-bottom: 5px solid $primary-low;
}
}
#selected-controls {
background-color: $tertiary-low;
padding: 8px;
min-height: 27px;
position: fixed;
bottom: 0;
width: 1075px;
}
.user-controls {
padding: 5px;
clear: both;
text-align: right;
@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: $success;
}
.d-icon-times {
color: $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 $primary-low;
outline: none;
padding: 0;
&:focus {
border-color: $tertiary;
}
}
.value-list {
.value {
padding: 0.125em 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
&:last-child {
border-bottom: none;
}
.value-input {
box-sizing: border-box;
flex: 1;
border-color: $primary-low;
cursor: pointer;
margin: 0;
&:focus {
border-color: $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;
}
.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;
}
&:last-of-type {
.new-value-input {
&:first-of-type {
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;
}
// Styles for subtabs in admin
@import "common/admin/dashboard_next";
@import "common/admin/settings";
@import "common/admin/users";
@import "common/admin/moderation_history";
@import "common/admin/suspend";
@import "common/admin/badges";
@import "common/admin/emails";
@import "common/admin/flagging";
@import "common/admin/staff_logs";
@import "common/admin/customize";
@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_table";
@import "common/admin/admin_report_inline_table";
@import "common/admin/dashboard_previous";