discourse/app/assets/stylesheets/common/admin/dashboard.scss

674 lines
12 KiB
SCSS
Raw Normal View History

2018-07-02 23:14:53 -04:00
.admin-reports,
2019-04-01 06:39:49 -04:00
.dashboard,
2018-07-02 23:14:53 -04:00
.dashboard-next {
&.admin-contents {
margin: 10px 0 0 0;
}
}
2019-04-01 06:39:49 -04:00
.dashboard,
.dashboard-next {
.section-top {
2018-08-09 20:45:47 -04:00
margin-bottom: 0.5em;
}
.navigation {
display: flex;
2018-08-09 20:43:18 -04:00
margin: 0 0 2.5em 0;
border-bottom: 1px solid $primary-low-mid;
.navigation-item {
display: inline;
2018-08-09 20:43:18 -04:00
&:hover {
background: $primary-very-low;
}
}
.navigation-link {
2018-08-09 20:43:18 -04:00
display: block;
font-weight: bold;
2018-08-09 20:45:47 -04:00
padding: 0.6em 1em 0.5em 1em;
}
}
@mixin active-navigation-item {
2018-08-09 20:43:18 -04:00
.navigation-link {
2018-08-09 20:45:47 -04:00
border-bottom: 0.4em solid $tertiary;
2018-08-09 20:43:18 -04:00
}
}
2019-04-01 06:39:49 -04:00
&.dashboard-moderation .navigation-item.moderation {
@include active-navigation-item;
}
2019-04-01 06:39:49 -04:00
&.dashboard-security .navigation-item.security {
@include active-navigation-item;
}
2019-04-01 06:39:49 -04:00
&.dashboard-reports .navigation-item.reports {
@include active-navigation-item;
}
&.general .navigation-item.general {
@include active-navigation-item;
}
.sections {
display: flex;
flex-direction: column;
}
.section-columns {
display: flex;
justify-content: space-between;
2018-07-12 16:38:51 -04:00
@include breakpoint(medium) {
flex-direction: column;
}
.section-column {
min-width: calc(50% - 0.5em);
max-width: 100%;
&:last-child {
margin-left: 0.5em;
}
&:first-child {
margin-right: 0.5em;
}
2018-07-12 16:38:51 -04:00
@include breakpoint(medium) {
min-width: 100%;
&:last-child {
order: 1;
}
&:first-child {
order: 2;
}
}
}
2018-07-12 16:38:51 -04:00
@include breakpoint(medium) {
.section-column:last-child,
.section-column:first-child {
margin: 0;
}
}
}
.section {
.section-title {
h2 {
margin: 0 0.5em 0 0;
a {
color: $primary;
}
}
display: flex;
2018-05-17 11:41:58 -04:00
@media screen and (max-width: 400px) {
flex-wrap: wrap;
}
align-items: center;
justify-content: space-between;
2018-05-15 20:18:21 -04:00
border-bottom: 1px solid $primary-low;
margin-bottom: 0.5em;
padding-bottom: 0.5em;
}
.section-body {
2018-05-17 11:41:58 -04:00
padding: 1em 0 0;
2018-08-09 20:43:18 -04:00
> p {
margin-top: 0;
}
}
}
.admin-report .header {
border: 0;
padding: 0;
margin-bottom: 1em;
}
.charts {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
// IE11 grid support
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
.admin-report {
-ms-grid-column-span: 4;
&:nth-of-type(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
&:nth-of-type(2) {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
&:nth-of-type(3) {
-ms-grid-row: 2;
-ms-grid-column: 5;
}
&:nth-of-type(4) {
-ms-grid-row: 2;
-ms-grid-column: 9;
}
&:nth-of-type(5) {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
&:nth-of-type(6) {
-ms-grid-row: 3;
-ms-grid-column: 5;
}
&:nth-of-type(7) {
-ms-grid-row: 3;
-ms-grid-column: 9;
}
}
.admin-report {
grid-column: span 4;
&.consolidated-page-views {
grid-column: span 12;
-ms-grid-column-span: 12;
}
}
2018-07-12 16:38:51 -04:00
@include breakpoint(medium) {
.admin-report {
grid-column: span 12;
}
}
.chart-canvas-container {
position: relative;
2018-05-16 15:06:23 -04:00
margin-left: -5px;
}
.chart-canvas {
width: 100%;
height: 100%;
}
}
.misc {
2018-05-16 15:49:02 -04:00
display: flex;
2018-05-16 15:06:23 -04:00
border: 1px solid $primary-low;
2018-05-16 15:49:02 -04:00
.storage-stats,
.last-dashboard-update {
2018-05-16 15:49:02 -04:00
flex: 1 1 50%;
box-sizing: border-box;
margin: 1em 0;
padding: 0 1em;
2018-05-16 15:49:02 -04:00
}
.storage-stats {
display: flex;
2018-05-16 15:49:02 -04:00
flex-wrap: wrap;
justify-content: space-between;
2018-08-09 20:43:18 -04:00
border-right: 1px solid $primary-low;
.backups,
.uploads {
flex: 1 1 100%;
2018-05-16 15:49:02 -04:00
}
.uploads p:last-of-type {
margin-bottom: 0;
}
}
2018-05-16 15:49:02 -04:00
@media screen and (max-width: 400px) {
flex-wrap: wrap;
.storage-stats,
.last-dashboard-update {
2018-05-16 15:49:02 -04:00
flex: 1 1 100%;
text-align: left;
}
.last-dashboard-update {
display: block;
margin: 0 20px 20px 20px;
padding: 20px 0 0 0;
border-top: 1px solid $primary-low;
border-left: none;
}
}
.last-dashboard-update {
text-align: center;
display: flex;
justify-content: center;
2018-05-16 15:49:02 -04:00
div {
align-self: center;
h4 {
margin-bottom: 0;
}
}
}
}
.top-referred-topics {
margin-bottom: 1.5em;
}
.top-referred-topics,
.trending-search {
th:first-of-type {
text-align: left;
}
}
2018-05-16 15:49:02 -04:00
.section {
.period-chooser .period-chooser-header {
.selected-name,
.d-icon {
font-size: $font-up-1;
}
.d-icon {
margin: 0;
}
}
}
.dashboard-problems {
2018-08-09 20:43:18 -04:00
margin-bottom: 2.5em;
.d-icon-exclamation-triangle {
color: $danger;
}
.actions {
margin: 1em 0 0 0;
display: flex;
align-items: center;
color: $primary-medium;
.btn {
margin-right: 1em;
}
}
}
}
.counters-list {
display: flex;
flex: 1 0 0px;
flex-direction: column;
.counters-header {
display: grid;
flex: 1 0 auto;
grid-template-columns: 33% repeat(auto-fit, minmax(20px, 1fr));
border: 1px solid $primary-low;
border-bottom: 0;
font-weight: 700;
text-align: right;
align-items: center;
padding: 0.65em 0.25em;
// IE11 grid support
display: -ms-grid;
-ms-grid-columns: 2fr 1fr 1fr 1fr 1fr;
.counters-cell {
-ms-grid-row: 1;
-ms-grid-column-span: 1;
&:nth-of-type(1) {
-ms-grid-column: 1;
}
&:nth-of-type(2) {
-ms-grid-column: 2;
}
&:nth-of-type(3) {
-ms-grid-column: 3;
}
&:nth-of-type(4) {
-ms-grid-column: 4;
}
&:nth-of-type(5) {
-ms-grid-column: 5;
}
}
}
.admin-report .main {
border: 1px solid $primary-low;
&:hover {
background-color: $primary-very-low;
}
}
.admin-report:not(:last-child) {
.main {
border-bottom: 0;
}
.conditional-loading-section.is-loading {
border-bottom: 0;
}
}
.admin-report .conditional-loading-section.is-loading {
display: flex;
flex-direction: row;
padding: 0.5em 0.25em;
align-items: flex-start;
justify-content: flex-start;
border: 1px solid $primary-low;
.title {
font-size: $font-0;
}
.spinner {
margin: 0;
width: 8px;
height: 8px;
margin-left: 0.5em;
}
}
.admin-report .main .report-alert {
display: flex;
flex-direction: row;
padding: 0.5em 0.25em;
align-items: center;
text-align: left;
border: 0;
&:hover {
background-color: $primary-very-low;
}
.d-icon {
font-size: $font-up-1;
margin: 0 0.25em 0 0;
color: $primary-low-mid;
}
}
}
.activity-metrics {
margin-bottom: 1.5em;
}
2018-05-22 15:33:06 -04:00
.user-metrics {
display: flex;
2018-05-22 15:33:06 -04:00
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
.dashboard-inline-table {
// and "hides" margin when the item spans 100% width
2018-05-22 15:33:06 -04:00
flex: 1 0 auto;
max-width: 95%;
}
.table-cell {
display: flex;
flex: 0 1 auto;
2018-05-23 18:46:25 -04:00
margin: 0 10px 5px 0;
border: 1px solid $primary-low;
border-radius: 10px;
.label {
display: flex;
align-items: center;
color: $primary;
background: $primary-very-low;
justify-content: center;
2018-05-23 18:46:25 -04:00
border-radius: 9px 0 0 9px;
padding: 0 5px 0 8px;
.d-icon {
margin-right: 5px;
font-size: $font-down-1;
}
}
2018-05-23 18:46:25 -04:00
.value {
padding: 0 8px 0 5px;
}
&.user-newuser {
.label {
color: $primary-high;
}
}
&.user-basic,
&.user-member {
border-color: $bronze;
.label {
border-color: $bronze;
background: $bronze;
color: $secondary;
}
}
&.user-regular {
border-color: $silver;
.label {
border-color: $silver;
background: $silver;
color: $secondary;
}
}
&.user-leader {
border-color: $gold;
.label {
background: $gold;
border-color: $gold;
color: $secondary;
}
}
}
2018-05-23 18:46:25 -04:00
}
.rtl .dashboard-next {
.section-column {
&:last-child {
margin-right: 1em;
margin-left: 0;
}
&:first-child {
margin-left: 1em;
margin-right: 0;
}
}
.user-metrics .table-cell {
margin: 0 0 5px 10px;
}
.table-cell {
.label {
border-radius: 0 9px 9px 0;
.d-icon {
margin-right: 0;
margin-left: 5px;
}
}
}
}
.users-by-trust-level,
.users-by-type {
margin-bottom: 1.5em;
}
.community-health.section {
margin-bottom: 1.5em;
}
2019-04-01 06:39:49 -04:00
.dashboard-moderation,
.dashboard-security {
.section-body {
margin-bottom: 1em;
}
.main-section {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
> * {
grid-column: span 12;
}
.admin-dashboard-security-bottom-outlet,
.admin-dashboard-moderation-bottom-outlet {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
}
}
.admin-report {
grid-column: span 12;
}
}
2019-04-01 06:39:49 -04:00
.dashboard-moderation {
.admin-dashboard-moderation-top {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
}
}
2019-04-01 06:39:49 -04:00
.dashboard-reports {
.reports-list {
display: flex;
flex-wrap: wrap;
list-style-type: none;
margin: 0 -1.5%;
}
.report {
margin: 1.5%;
border: 1px solid $primary-low;
flex: 1 1 28%;
transition: box-shadow 0.25s;
min-width: 225px;
max-width: 550px;
a {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 1em;
.report-description {
color: $primary-high;
}
}
&:hover {
box-shadow: shadow("card");
}
}
}
2019-04-01 06:39:49 -04:00
.version-checks {
display: flex;
flex-wrap: wrap;
.section-title {
flex: 1 1 100%;
border-bottom: 1px solid $primary-low;
margin-bottom: 0.5em;
}
}
.version-check {
display: flex;
flex: 1 1 50%;
flex-wrap: wrap;
align-items: flex-start;
align-self: flex-start;
justify-content: space-between;
padding: 10px 0 10px 0;
.upgrade-header {
flex: 1 1 100%;
@media screen and (max-width: 650px) {
margin: 0;
}
tr {
border: none;
}
th {
background: transparent;
padding: 0;
}
}
h2 {
flex: 1 1 100%;
}
.version-number {
font-size: $font-up-2;
line-height: $line-height-medium;
box-sizing: border-box;
font-weight: bold;
margin: 0 0 1em 0;
padding-right: 20px;
flex: 1 1 27%;
h3 {
flex: 1 0 auto;
white-space: nowrap;
}
h4 {
font-size: $font-down-2;
margin-bottom: 0;
}
}
.version-status {
display: flex;
align-items: center;
margin: 0 0 1em 0;
flex: 1 1 24%;
box-sizing: border-box;
padding-right: 20px;
min-width: 250px;
@include breakpoint(medium) {
max-width: unset;
}
.face {
margin: 0 0.75em 0 0;
font-size: $font-up-3;
}
}
&.critical .version-notes .normal-note {
display: none;
}
&.normal .version-notes .critical-note {
display: none;
}
.fa {
font-size: $font-up-4;
}
.up-to-date {
color: $success;
}
.updates-available {
color: $danger;
}
.critical-updates-available {
color: $danger;
}
}
.update-nag {
.d-icon {
font-size: $font-up-3;
}
}