discourse/app/assets/stylesheets/common/admin/admin_base.scss
Martin Brennan a16faa27cd
FEATURE: Allow showing site text search in selected locale (#28453)
When searching for site texts for admin using the english
version of the text, previously we would show the english
version in the results _even if_ there was another locale
translated version available when a locale was selected
from the dropdown.

This commit adds a "Only show results in selected locale"
checkbox option which will instead make it so the results
shown are in the target locale, making it easier for translators
to tell when there is actually translations vs. missing tranlsations.
2024-08-26 11:25:36 +10:00

1086 lines
20 KiB
SCSS

// Styles for /admin section
$mobile-breakpoint: 700px;
// Common admin styles
.admin-main-nav {
display: inline-flex;
position: relative;
width: 100%;
overflow: hidden;
height: 100%;
background: var(--d-content-background);
@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;
margin-top: 0;
@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 {
--space-1: 0.25rem;
--space-2: calc(0.25rem * 2);
--space-3: calc(0.25rem * 3);
--space-4: calc(0.25rem * 4);
--space-5: calc(0.25rem * 5);
--space-6: calc(0.25rem * 6);
position: relative;
.nav-stacked {
@media screen and (max-width: 700px) {
margin: 0;
}
}
.row:before,
.row:after {
display: table;
content: "";
}
.row:after {
clear: both;
}
&.admin-site-settings-category {
overflow: hidden;
@media (max-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: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: 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 (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: 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(--primary-low);
margin-bottom: 0.5em;
&.overridden {
background-color: var(--highlight-bg);
}
h3 {
font-weight: normal;
font-size: var(--font-0);
@include breakpoint(mobile-extra-large) {
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;
&::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)
);
}
@include breakpoint(mobile-extra-large) {
word-wrap: break-word;
max-width: 80vw;
margin-right: 3em;
}
color: var(--primary-medium);
}
}
.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 breakpoint(mobile-extra-large) {
.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(--primary-low);
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 {
position: relative;
display: inline-block;
.location-box {
position: absolute;
width: 460px;
right: 0;
z-index: z("dropdown");
box-shadow: var(--shadow-card);
margin-top: -2px;
background-color: var(--secondary);
padding: 12px 12px 5px;
.powered-by {
font-size: var(--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;
.admin-section {
margin-bottom: 1em;
}
.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;
}
.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%;
}
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: 100%;
display: inline-flex;
padding: 0.5em;
margin: 0;
white-space: nowrap;
overflow-x: auto;
@include breakpoint(tablet) {
margin-left: -10px;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
&: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 breakpoint(mobile-extra-large) {
margin: 0 -10px;
}
input {
@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;
}
}
}
}
.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: 0px;
}
// 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;
}
.horizontal-overflow-nav__scroll-right,
.horizontal-overflow-nav__scroll-left {
--fade-color: var(--primary-low-rgb);
background: var(--primary-low);
}
}
.badges,
.web-hook-container {
input[type="text"],
textarea {
min-width: 350px;
}
}
.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%;
}
.nav-stacked {
background-color: inherit;
a.active {
color: var(--primary);
background-color: initial;
font-weight: 700;
border-right: 4px solid var(--d-nav-color--active);
&::after {
display: none; // Hides the arrow
}
}
}
}
.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: 100%;
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));
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-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%;
}
}
.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 {
@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;
}
}
}
.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 {
@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;
}
}
.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/sidebar";
@import "common/admin/settings";
@import "common/admin/users";
@import "common/admin/penalty";
@import "common/admin/badges";
@import "common/admin/emails";
@import "common/admin/flags";
@import "common/admin/json_schema_editor";
@import "common/admin/schema_field";
@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_config_area";
@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_radar";
@import "common/admin/admin_report_stacked_chart";
@import "common/admin/admin_report_stacked_line_chart";
@import "common/admin/admin_report_table";
@import "common/admin/admin_report_inline_table";
@import "common/admin/admin_page_header";
@import "common/admin/admin_intro";
@import "common/admin/admin_emojis";
@import "common/admin/mini_profiler";
@import "common/admin/schema_theme_setting_editor";
@import "common/admin/customize_themes_show_schema";