Joe eecff3d15b
DEV: Ensures mobile RTL stylesheets are loaded (#11360)
This PR only makes CSS changes that have no visual impact, but they fix an issue in the compiler that causes some stylesheets not to load on mobile RTL.

Full context here

https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268/6?u=johani
2020-11-26 21:03:25 +08:00

991 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),
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;
}
}
}
.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),
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);
}
&: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%;
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: $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";