// 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 15px 0 -10px; } } .row:before, .row:after { display: table; content: ""; } .row:after { clear: both; } } .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; } } 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) ); } @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 { 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; .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; 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); } } } 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(--quaternary); &::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: 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: 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/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_table"; @import "common/admin/admin_report_inline_table"; @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";