diff --git a/app/styles/application.scss b/app/styles/application.scss index 3c3b00226..0fe9ed5d7 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -2,7 +2,6 @@ @import 'soapbox/variables'; @import 'soapbox/fonts'; @import 'soapbox/reset'; -// @import 'soapbox/scrollbars'; @import 'soapbox/basics'; @import 'soapbox/containers'; @import 'soapbox/lists'; @@ -40,7 +39,6 @@ @import 'soapbox/emoji_picker'; @import 'soapbox/about'; @import 'soapbox/tables'; -@import 'soapbox/admin'; @import 'soapbox/dashboard'; @import 'soapbox/rtl'; @import 'soapbox/accessibility'; diff --git a/app/styles/halloween/diff.scss b/app/styles/halloween/diff.scss index 3d853c5ac..f81ca9e6c 100644 --- a/app/styles/halloween/diff.scss +++ b/app/styles/halloween/diff.scss @@ -106,10 +106,6 @@ body.app-body::after { color: darken($halloween-dark, 10%); } -.admin-wrapper .content h2 { - color: #fff; -} - .compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input { color: darken($halloween-dark, 15%); @@ -203,7 +199,3 @@ body.app-body::after { .mute-modal { border-color: $halloween-orange; } - -.admin-wrapper .sidebar ul .simple-navigation-active-leaf a { - color: #000; -} diff --git a/app/styles/soapbox-light/diff.scss b/app/styles/soapbox-light/diff.scss index 4a476af88..e176decfb 100644 --- a/app/styles/soapbox-light/diff.scss +++ b/app/styles/soapbox-light/diff.scss @@ -151,7 +151,6 @@ body { .actions-modal ul li:not(:empty) a:focus button, .actions-modal ul li:not(:empty) a:hover, .actions-modal ul li:not(:empty) a:hover button, -.admin-wrapper .sidebar ul li a.selected, .simple_form .block-button, .simple_form .button, .simple_form button { @@ -353,21 +352,6 @@ body { box-shadow: none; } -.admin-wrapper .sidebar ul li a.selected { - color: $gab-background-container-light; - background-color: var(--brand-color); -} - -.admin-wrapper .sidebar ul li .simple-navigation-active-leaf a.selected { - color: #fff; - background-color: darken($gab-brand-default, 10%); - // Using Darken bc Lighten and Darken are reversed on light theme - actually lightens -} - -.admin-wrapper .content > p { - color: #000; -} - .btngroup__btn--active { color: #fff; } diff --git a/app/styles/soapbox/admin.scss b/app/styles/soapbox/admin.scss deleted file mode 100644 index 4332a7214..000000000 --- a/app/styles/soapbox/admin.scss +++ /dev/null @@ -1,733 +0,0 @@ -$no-columns-breakpoint: 600px; -$sidebar-width: 240px; -$content-width: 840px; - -.admin-wrapper { - display: flex; - justify-content: center; - height: 100%; - - .sidebar-wrapper { - flex: 1 1 $sidebar-width; - height: 100%; - background: $ui-base-color; - display: flex; - justify-content: flex-end; - } - - .sidebar { - width: $sidebar-width; - height: 100%; - padding: 0; - overflow-y: auto; - - .logo { - display: block; - margin: 40px auto; - width: 100px; - } - - @media screen and (max-width: $no-columns-breakpoint) { - & > a:first-child { - display: none; - } - } - - ul { - list-style: none; - border-radius: 4px 0 0 4px; - overflow: hidden; - margin-bottom: 20px; - - @media screen and (max-width: $no-columns-breakpoint) { - margin-bottom: 0; - } - - a { - display: block; - padding: 15px; - color: $gab-secondary-text; - text-decoration: none; - transition: all 200ms linear; - transition-property: color, background-color; - border-radius: 4px 0 0 4px; - - i.fa { - margin-right: 5px; - } - - &:hover { - color: var(--brand-color); - background-color: $gab-background; - transition: all 100ms linear; - transition-property: color, background-color; - } - - &.selected { - background: darken($ui-base-color, 2%); - border-radius: 4px 0 0; - } - } - - ul { - background: darken($ui-base-color, 4%); - border-radius: 0 0 0 4px; - margin: 0; - - a { - border: 0; - padding: 15px 35px; - } - } - - .simple-navigation-active-leaf a { - color: $primary-text-color; - background-color: $ui-highlight-color; - border-bottom: 0; - border-radius: 0; - - &:hover { - background-color: lighten($ui-highlight-color, 5%); - } - } - } - - & > ul > .simple-navigation-active-leaf a { - border-radius: 4px 0 0 4px; - } - } - - .content-wrapper { - flex: 2 1 $content-width; - overflow: auto; - } - - .content { - max-width: $content-width; - padding: 20px 15px; - padding-top: 60px; - padding-left: 25px; - - @media screen and (max-width: $no-columns-breakpoint) { - max-width: none; - padding: 15px; - padding-top: 30px; - } - - h2 { - color: $secondary-text-color; - font-size: 24px; - line-height: 28px; - font-weight: 400; - padding-bottom: 40px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - margin-bottom: 40px; - } - - h3 { - color: $secondary-text-color; - font-size: 20px; - line-height: 28px; - font-weight: 400; - margin-bottom: 30px; - } - - h4 { - text-transform: uppercase; - font-size: 13px; - font-weight: 700; - color: $gab-secondary-text; - padding-bottom: 8px; - margin-bottom: 8px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - } - - h6 { - font-size: 16px; - color: $secondary-text-color; - line-height: 28px; - font-weight: 400; - } - - .fields-group h6 { - color: $primary-text-color; - font-weight: 500; - } - - .directory__tag > a, - .directory__tag > div { - box-shadow: none; - } - - .directory__tag .table-action-link .fa { - color: inherit; - } - - .directory__tag h4 { - font-size: 18px; - font-weight: 700; - color: $gab-secondary-text; - text-transform: none; - padding-bottom: 0; - margin-bottom: 0; - border-bottom: 0; - } - - & > p { - font-size: 14px; - line-height: 18px; - color: $gab-secondary-text; - margin-bottom: 20px; - - strong { - color: $gab-secondary-text; - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - } - - hr { - width: 100%; - height: 0; - border: 0; - border-bottom: 1px solid rgba($ui-base-lighter-color, .6); - margin: 20px 0; - - &.spacer { - height: 1px; - border: 0; - } - } - - .muted-hint { - color: $gab-secondary-text; - - a { - color: var(--highlight-text-color); - } - } - - .positive-hint { - color: $valid-value-color; - font-weight: 500; - } - - .negative-hint { - color: $error-value-color; - font-weight: 500; - } - - .neutral-hint { - color: $dark-text-color; - font-weight: 500; - } - } - - @media screen and (max-width: $no-columns-breakpoint) { - display: block; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - - .sidebar-wrapper, - .content-wrapper { - flex: 0 0 auto; - height: auto; - overflow: initial; - } - - .sidebar { - width: 100%; - padding: 0; - height: auto; - } - } -} - -.filters { - display: flex; - flex-wrap: wrap; - - .filter-subset { - flex: 0 0 auto; - margin: 0 40px 10px 0; - - &:last-child { - margin-bottom: 20px; - } - - ul { - margin-top: 5px; - list-style: none; - - li { - display: inline-block; - margin-right: 5px; - } - } - - strong { - font-weight: 500; - text-transform: uppercase; - font-size: 12px; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - a { - display: inline-block; - color: $gab-secondary-text; - text-decoration: none; - text-transform: uppercase; - font-size: 12px; - font-weight: 500; - border-bottom: 2px solid $gab-secondary-text; - - &:hover { - color: $primary-text-color; - border-bottom: 2px solid lighten($gab-secondary-text, 5%); - } - - &.selected { - color: var(--highlight-text-color); - border-bottom: 2px solid $ui-highlight-color; - } - } - } -} - -.report-accounts { - display: flex; - flex-wrap: wrap; - margin-bottom: 20px; -} - -.report-accounts__item { - display: flex; - flex: 250px; - flex-direction: column; - margin: 0 5px; - - & > strong { - display: block; - margin: 0 0 10px -5px; - font-weight: 500; - font-size: 14px; - line-height: 18px; - color: $secondary-text-color; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - .account-card { - flex: 1 1 auto; - } -} - -.report-status, -.account-status { - display: flex; - margin-bottom: 10px; - - .activity-stream { - flex: 2 0 0; - margin-right: 20px; - max-width: calc(100% - 60px); - - .entry { - border-radius: 4px; - } - } -} - -.report-status__actions, -.account-status__actions { - flex: 0 0 auto; - display: flex; - flex-direction: column; - - .icon-button { - font-size: 24px; - width: 24px; - text-align: center; - margin-bottom: 10px; - } -} - -.simple_form.new_report_note, -.simple_form.new_account_moderation_note { - max-width: 100%; -} - -.batch-form-box { - display: flex; - flex-wrap: wrap; - margin-bottom: 5px; - - #form_status_batch_action { - margin: 0 5px 5px 0; - font-size: 14px; - } - - input.button { - margin: 0 5px 5px 0; - } - - .media-spoiler-toggle-buttons { - margin-left: auto; - - .button { - overflow: visible; - margin: 0 0 5px 5px; - float: right; - } - } -} - -.back-link { - margin-bottom: 10px; - font-size: 14px; - - a { - color: var(--highlight-text-color); - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -.spacer { - flex: 1 1 auto; -} - -.log-entry { - margin-bottom: 20px; - line-height: 20px; - - &__header { - display: flex; - justify-content: flex-start; - align-items: center; - padding: 10px; - background: $ui-base-color; - color: $darker-text-color; - border-radius: 4px 4px 0 0; - font-size: 14px; - position: relative; - } - - &__avatar { - margin-right: 10px; - - .avatar { - display: block; - margin: 0; - border-radius: 50%; - width: 40px; - height: 40px; - } - } - - &__content { - max-width: calc(100% - 90px); - } - - &__title { - word-wrap: break-word; - } - - &__timestamp { - color: $dark-text-color; - } - - &__extras { - background: lighten($ui-base-color, 6%); - border-radius: 0 0 4px 4px; - padding: 10px; - color: $darker-text-color; - font-family: $font-monospace, monospace; - font-size: 12px; - word-wrap: break-word; - min-height: 20px; - } - - &__icon { - font-size: 28px; - margin-right: 10px; - color: $dark-text-color; - } - - &__icon__overlay { - position: absolute; - top: 10px; - right: 10px; - width: 10px; - height: 10px; - border-radius: 50%; - - &.positive { - background: $success-green; - } - - &.negative { - background: lighten($error-red, 12%); - } - - &.neutral { - background: $ui-highlight-color; - } - } - - .username, - .target { - color: $secondary-text-color; - text-decoration: none; - font-weight: 500; - } - - a { - color: $ui-highlight-color; - text-decoration: none; - font-weight: 500; - - &:hover { - text-decoration: underline; - } - } - - .diff-old { - color: lighten($error-red, 12%); - } - - .diff-neutral { - color: $secondary-text-color; - } - - .diff-new { - color: $success-green; - } -} - -a.name-tag, -.name-tag, -a.inline-name-tag, -.inline-name-tag { - text-decoration: none; - color: $secondary-text-color; - - .username { - font-weight: 500; - } - - &.suspended { - .username { - text-decoration: line-through; - color: lighten($error-red, 12%); - } - - .avatar { - filter: grayscale(100%); - opacity: 0.8; - } - } -} - -a.name-tag, -.name-tag { - display: flex; - align-items: center; - - .avatar { - display: block; - margin: 0; - margin-right: 5px; - border-radius: 50%; - } - - &.suspended { - .avatar { - filter: grayscale(100%); - opacity: 0.8; - } - } -} - -.speech-bubble { - margin-bottom: 20px; - border-left: 4px solid $ui-highlight-color; - - &.positive { - border-left-color: $success-green; - } - - &.negative { - border-left-color: lighten($error-red, 12%); - } - - &.warning { - border-left-color: $gold-star; - } - - &__bubble { - padding: 16px; - padding-left: 14px; - font-size: 15px; - line-height: 20px; - border-radius: 4px 4px 4px 0; - position: relative; - font-weight: 500; - - a { - color: $darker-text-color; - } - } - - &__owner { - padding: 8px; - padding-left: 12px; - } - - time { - color: $dark-text-color; - } -} - -.report-card { - background: $ui-base-color; - border-radius: 4px; - margin-bottom: 20px; - - &__profile { - display: flex; - justify-content: space-between; - align-items: center; - padding: 15px; - - .account { - padding: 0; - border: 0; - - &__avatar-wrapper { - margin-left: 0; - } - } - - &__stats { - flex: 0 0 auto; - font-weight: 500; - color: $darker-text-color; - text-transform: uppercase; - text-align: right; - - a { - color: inherit; - text-decoration: none; - - &:focus, - &:hover, - &:active { - color: lighten($darker-text-color, 8%); - } - } - - .red { - color: $error-value-color; - } - } - } - - &__summary { - &__item { - display: flex; - justify-content: flex-start; - border-top: 1px solid darken($ui-base-color, 4%); - - &:hover { - background: lighten($ui-base-color, 2%); - } - - &__reported-by, - &__assigned { - padding: 15px; - flex: 0 0 auto; - box-sizing: border-box; - width: 150px; - color: $darker-text-color; - - &, - .username { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - - &__content { - flex: 1 1 auto; - max-width: calc(100% - 300px); - - &__icon { - color: $dark-text-color; - margin-right: 4px; - font-weight: 500; - } - } - - &__content a { - display: block; - box-sizing: border-box; - width: 100%; - padding: 15px; - text-decoration: none; - color: $darker-text-color; - } - } - } -} - -.one-line { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.ellipsized-ip { - display: inline-block; - max-width: 120px; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: middle; -} - -.admin select.dropdown { - appearance: none; - box-sizing: border-box; - font-size: 16px; - color: $primary-text-color; - display: block; - width: 100%; - outline: 0; - font-family: inherit; - resize: vertical; - background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; - border: 1px solid darken($ui-base-color, 14%); - border-radius: 4px; - padding-left: 10px; - padding-right: 30px; - height: 41px; - margin: 20px 0; -} diff --git a/app/styles/soapbox/rtl.scss b/app/styles/soapbox/rtl.scss index 300eb4dac..6201d3f4e 100644 --- a/app/styles/soapbox/rtl.scss +++ b/app/styles/soapbox/rtl.scss @@ -189,16 +189,6 @@ body.rtl { right: -2.14285714em; } - .admin-wrapper { - direction: rtl; - } - - .admin-wrapper .sidebar ul a i.fa, - a.table-action-link i.fa { - margin-right: 0; - margin-left: 5px; - } - .simple_form .check_boxes .checkbox label { padding-left: 0; padding-right: 25px; diff --git a/app/styles/soapbox/scrollbars.scss b/app/styles/soapbox/scrollbars.scss deleted file mode 100644 index d91d7e83d..000000000 --- a/app/styles/soapbox/scrollbars.scss +++ /dev/null @@ -1,43 +0,0 @@ -// A lot of this stuff is temporary for now. -// Content containers are meant to behave much differently than the mastodon default UI -// For now linking default gab colors to replace the base UI colors and formulas - -html {scrollbar-color: lighten($gab-background-container, 4%) $gab-background-container;} - -::-webkit-scrollbar { - width: 12px; - height: 12px; -} - -::-webkit-scrollbar-thumb { - border: 0; - background: rgba($gab-placeholder-accent, .5); - @if $light-theme {background: rgba($gab-background-container-light, .3);} -} - -::-webkit-scrollbar-thumb:hover { - background: rgba($gab-placeholder-accent, .75); - @if $light-theme {background: rgba($gab-background-container-light, .4);} -} - -::-webkit-scrollbar-thumb:active { - background: $gab-placeholder-accent; - @if $light-theme {background: rgba($gab-background-container-light, .5);} -} - -::-webkit-scrollbar-track { - border: 0; - background: rgba($gab-background-container, .5); - @if $light-theme {background: rgba($gab-background-base, .3);} -} - -::-webkit-scrollbar-track:hover { - background: rgba($gab-background-container, .75); - @if $light-theme {background: rgba($gab-background-base, .4);} -} - -::-webkit-scrollbar-track:active { - background: $gab-background-container; - @if $light-theme {background: rgba($gab-background-base, .5);} -} -::-webkit-scrollbar-corner {background: transparent;}