From c889269ecb7d3244f5d7bc87aa61d5d27be96da5 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 28 May 2020 19:58:37 -0500 Subject: [PATCH] Fix all scss linter warnings --- app/styles/contrast/diff.scss | 3 +- app/styles/contrast/variables.scss | 2 +- app/styles/halloween/diff.scss | 43 +++-- app/styles/neenster.scss | 9 +- app/styles/soapbox-light/diff.scss | 17 +- app/styles/soapbox/_mixins.scss | 12 +- app/styles/soapbox/about.scss | 59 +++++-- app/styles/soapbox/admin.scss | 5 +- app/styles/soapbox/basics.scss | 10 +- app/styles/soapbox/components.scss | 152 ++++++++++-------- .../soapbox/components/account-header.scss | 50 ++++-- app/styles/soapbox/components/buttons.scss | 10 +- .../soapbox/components/dropdown-menu.scss | 19 ++- app/styles/soapbox/components/group-card.scss | 112 ++++++------- .../soapbox/components/group-detail.scss | 132 +++++++-------- app/styles/soapbox/components/group-form.scss | 23 ++- .../components/group-sidebar-panel.scss | 56 +++---- app/styles/soapbox/components/inputs.scss | 6 +- app/styles/soapbox/components/modal.scss | 24 ++- .../soapbox/components/sidebar-menu.scss | 4 +- app/styles/soapbox/components/user-panel.scss | 5 +- app/styles/soapbox/containers.scss | 6 +- app/styles/soapbox/demetricator.scss | 3 +- app/styles/soapbox/donations.scss | 28 +++- app/styles/soapbox/dyslexic.scss | 3 +- app/styles/soapbox/emoji_picker.scss | 8 +- app/styles/soapbox/fonts.scss | 10 +- app/styles/soapbox/footer.scss | 8 +- app/styles/soapbox/forms.scss | 2 +- app/styles/soapbox/polls.scss | 1 + app/styles/soapbox/pro.scss | 3 +- app/styles/soapbox/scrollbars.scss | 11 +- 32 files changed, 493 insertions(+), 343 deletions(-) diff --git a/app/styles/contrast/diff.scss b/app/styles/contrast/diff.scss index 0a52f79555..aeb82c698f 100644 --- a/app/styles/contrast/diff.scss +++ b/app/styles/contrast/diff.scss @@ -5,12 +5,13 @@ &-description { input { &::placeholder { - opacity: 1.0; + opacity: 1; } } } } } + .compose-form__warning { color: $inverted-text-color; } diff --git a/app/styles/contrast/variables.scss b/app/styles/contrast/variables.scss index f6cadf0298..cfe3b21dbc 100644 --- a/app/styles/contrast/variables.scss +++ b/app/styles/contrast/variables.scss @@ -20,5 +20,5 @@ $highlight-text-color: $classic-highlight-color !default; $action-button-color: #8d9ac2; $inverted-text-color: $black !default; -$lighter-text-color: darken($ui-base-color,6%) !default; +$lighter-text-color: darken($ui-base-color, 6%) !default; $light-text-color: darken($ui-primary-color, 40%) !default; diff --git a/app/styles/halloween/diff.scss b/app/styles/halloween/diff.scss index 3cdef86d62..3d853c5ac7 100644 --- a/app/styles/halloween/diff.scss +++ b/app/styles/halloween/diff.scss @@ -15,7 +15,10 @@ body.app-body::after, content: ''; display: block; position: fixed; - top: 0; left: 0; right: 0; bottom: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; background-size: cover; background-position: center; width: 100%; @@ -70,21 +73,24 @@ body.app-body::after { z-index: -1; pointer-events: none; } + .ui .page__columns::after { position: fixed; top: 50px; } + .ui .page__top::after { position: absolute; bottom: -100px; } + .ui .page__top + .page__columns::after { display: none; } .search__input { border-color: $halloween-dark; - color: black; + color: #000; } .search__icon .fa-times-circle, @@ -101,7 +107,7 @@ body.app-body::after { } .admin-wrapper .content h2 { - color: white; + color: #fff; } .compose-form .autosuggest-textarea__textarea, @@ -115,11 +121,18 @@ body.app-body::after { .button { background-color: $halloween-orange; - &:focus, &:hover { background-color: darken($halloween-orange, 10%);} - color: black; + color: #000; + + &:focus, + &:hover { + background-color: darken($halloween-orange, 10%); + } } -.simple_form button, .simple_form .button, .simple_form .block-button { - color: black; + +.simple_form button, +.simple_form .button, +.simple_form .block-button { + color: #000; } .getting-started__footer::before { @@ -160,12 +173,15 @@ body.app-body::after { .dropdown-menu { border-color: $halloween-orange; } + .dropdown-menu__item a { color: $halloween-orange; } + .dropdown-menu__arrow.bottom { border-bottom-color: $halloween-orange; } + .dropdown-menu__arrow.top { border-top-color: $halloween-orange; } @@ -174,13 +190,20 @@ body.app-body::after { background: $gab-background-container; } -.boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar { +.boost-modal__action-bar, +.confirmation-modal__action-bar, +.mute-modal__action-bar { background: $halloween-dark; } -.boost-modal, .confirmation-modal, .report-modal, .actions-modal, .mute-modal { + +.boost-modal, +.confirmation-modal, +.report-modal, +.actions-modal, +.mute-modal { border-color: $halloween-orange; } .admin-wrapper .sidebar ul .simple-navigation-active-leaf a { - color: black; + color: #000; } diff --git a/app/styles/neenster.scss b/app/styles/neenster.scss index 09208e083f..72e30acac5 100644 --- a/app/styles/neenster.scss +++ b/app/styles/neenster.scss @@ -19,12 +19,15 @@ $ui-base-lighter-color: darken(#2da8be, 35%); } .brand__tagline { - color: white; + color: #fff; } .header .nav-link { - color: white; - &:hover, &:focus, &:active { + color: #fff; + + &:hover, + &:focus, + &:active { color: $gab-background-base-light; } } diff --git a/app/styles/soapbox-light/diff.scss b/app/styles/soapbox-light/diff.scss index 7299db95e8..a50d1c8835 100644 --- a/app/styles/soapbox-light/diff.scss +++ b/app/styles/soapbox-light/diff.scss @@ -11,7 +11,7 @@ body { color: $white; &.button-alternative-2 { - color: black; + color: #000; } } @@ -175,7 +175,7 @@ body { .embed-modal { background: #333; - color: white; + color: #fff; } .boost-modal__action-bar, @@ -290,6 +290,7 @@ body { .simple_form input[type="password"], .simple_form textarea { border-color: $gab-brand-default; + &:hover { border-color: $gab-brand-default; } @@ -364,11 +365,11 @@ body { } .admin-wrapper .content > p { - color: black; + color: #000; } .btngroup__btn--active { - color: white; + color: #fff; } .timeline-compose-block .compose-form .compose-form__autosuggest-wrapper .autosuggest-textarea__textarea { @@ -376,7 +377,7 @@ body { } .promo-panel-item { - @include light-theme-shadow(); + @include light-theme-shadow; background: $gab-background-container-light; } @@ -395,7 +396,7 @@ body { } .wtf-panel { - @include light-theme-shadow(); + @include light-theme-shadow; background: $gab-background-container-light; } @@ -424,10 +425,10 @@ body { input[type='text'], textarea { &.standard { + @include input-placeholder($gab-secondary-text); color: $gab-placeholder-accent; border-color: $gab-secondary-text; background: $gab-background-base-light; - @include input-placeholder($gab-secondary-text); } } @@ -467,6 +468,6 @@ textarea { color: $gab-default-text-light; } -.fa-site-icon:before { +.fa-site-icon::before { filter: grayscale(100%) invert(0); } diff --git a/app/styles/soapbox/_mixins.scss b/app/styles/soapbox/_mixins.scss index f54f3cb71a..49eb090b83 100644 --- a/app/styles/soapbox/_mixins.scss +++ b/app/styles/soapbox/_mixins.scss @@ -39,6 +39,8 @@ } @mixin search-input { + @include font-size(16); + @include line-height(19); outline: 0; box-sizing: border-box; width: 100%; @@ -47,8 +49,6 @@ font-family: inherit; background: $nav-ui-search-bg-color; color: $nav-ui-highlight-color; - @include font-size(16); - @include line-height(19); margin: 0; border-radius: 4px; @@ -69,22 +69,22 @@ } @mixin search-popout { + @include font-size(12); + @include line-height(14); + @include font-weight(normal); background: $gab-background-container; border-radius: 4px; border: 1px solid $gab-placeholder-accent; padding: 8px 10px 17px; margin: 4px 0 0; - @include font-size(12); - @include line-height(14); - @include font-weight(normal); color: $gab-secondary-text; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); h4 { - color: #fff; @include font-size(14); @include line-height(16); @include font-weight(bold); + color: #fff; } ul { diff --git a/app/styles/soapbox/about.scss b/app/styles/soapbox/about.scss index 42f59774ff..1f557b0e27 100644 --- a/app/styles/soapbox/about.scss +++ b/app/styles/soapbox/about.scss @@ -62,7 +62,12 @@ $small-breakpoint: 960px; color: lighten($darker-text-color, 10%); } - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { font-family: $font-display, sans-serif; margin-top: 2em; margin-bottom: 1.25em; @@ -71,7 +76,12 @@ $small-breakpoint: 960px; } hr + { - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { margin-top: 1.25em; } } @@ -663,18 +673,33 @@ $small-breakpoint: 960px; @media screen and (max-width: 767px) { background-image: none; - .brand__tagline, .brand h1 { color: white; } + + .brand__tagline, + .brand h1 { + color: #fff; + } + .header { .nav-link { - color: white; - &:hover, &:focus, &:active { color: $gab-background-base-light; } + color: #fff; + + &:hover, + &:focus, + &:active { + color: $gab-background-base-light; + } } + .brand { filter: brightness(0) invert(100%); } + .nav-button { background: darken($gab-brand-default, 10%); - &:hover, &:focus, &:active { + + &:hover, + &:focus, + &:active { background: darken($gab-brand-default, 15%); } } @@ -690,7 +715,7 @@ $small-breakpoint: 960px; height: auto; min-height: 80vh; - @media (min-width:767px) { + @media (min-width: 767px) { min-height: 550px; } @@ -708,8 +733,8 @@ $small-breakpoint: 960px; width: 395px; } - @media (min-width:767px) and (max-width:1024px) { - padding: 40px 20px 20px 20px; + @media (min-width: 767px) and (max-width: 1024px) { + padding: 40px 20px 20px; &--left { margin-right: 40px; @@ -720,7 +745,7 @@ $small-breakpoint: 960px; } } - @media screen and (max-width:767px) { + @media screen and (max-width: 767px) { height: auto; padding: 20px 10px 30px; flex-direction: column; @@ -752,11 +777,11 @@ $small-breakpoint: 960px; img { height: 100px; - @media (min-width:767px) and (max-width:1024px) { + @media (min-width: 767px) and (max-width: 1024px) { height: 60px; } - @media screen and (max-width:767px) { + @media screen and (max-width: 767px) { display: none; } } @@ -933,7 +958,7 @@ $small-breakpoint: 960px; margin-right: 15px; h1 { - @include font-montserrat(); + @include font-montserrat; color: $gab-brand-default; } } @@ -947,19 +972,19 @@ $small-breakpoint: 960px; margin-top: 25px; font-weight: 400; - @media (min-width:767px) and (max-width:1024px) { + @media (min-width: 767px) and (max-width: 1024px) { width: 320px; font-size: 20px; } - @media screen and (max-width:767px) { + @media screen and (max-width: 767px) { width: 100%; font-size: 22px; margin-top: 0; } } -@media (min-width:767px) { +@media (min-width: 767px) { .hidden-sm { display: block; } @@ -969,7 +994,7 @@ $small-breakpoint: 960px; } } -@media screen and (max-width:767px) { +@media screen and (max-width: 767px) { .hidden-sm { display: none !important; } diff --git a/app/styles/soapbox/admin.scss b/app/styles/soapbox/admin.scss index 42f5de8940..df0eb56669 100644 --- a/app/styles/soapbox/admin.scss +++ b/app/styles/soapbox/admin.scss @@ -170,7 +170,7 @@ $content-width: 840px; text-transform: none; padding-bottom: 0; margin-bottom: 0; - border-bottom: none; + border-bottom: 0; } & > p { @@ -502,10 +502,11 @@ $content-width: 840px; a { color: $ui-highlight-color; text-decoration: none; + font-weight: 500; + &:hover { text-decoration: underline; } - font-weight: 500; } .diff-old { diff --git a/app/styles/soapbox/basics.scss b/app/styles/soapbox/basics.scss index 01ade9b3ef..d04a7055a7 100644 --- a/app/styles/soapbox/basics.scss +++ b/app/styles/soapbox/basics.scss @@ -2,11 +2,11 @@ @if type-of($color) == 'color' { $color: str-slice(ie-hex-str($color), 4); } - @return '%23' + unquote($color) + @return '%23' + unquote($color); } html { - @include font-roboto(); + @include font-roboto; @include font-weight(normal); font-size: 62.5%; text-size-adjust: 100%; @@ -21,9 +21,9 @@ body { -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; font-feature-settings: "kern"; - -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; - color: white; + color: #fff; background-color: $gab-background-base; &.system-font { @@ -150,7 +150,7 @@ button { .visuallyhidden { border: 0 !important; - clip: rect(1px,1px,1px,1px) !important; + clip: rect(1px, 1px, 1px, 1px) !important; font-size: 1px !important; height: 1px !important; overflow: hidden !important; diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss index bb54c1ad9a..0f9a6e0875 100644 --- a/app/styles/soapbox/components.scss +++ b/app/styles/soapbox/components.scss @@ -28,7 +28,9 @@ &:active, &:focus, - &:hover {background-color: lighten($ui-highlight-color, 10%);} + &:hover { + background-color: lighten($ui-highlight-color, 10%); + } &--destructive { transition: none; @@ -187,7 +189,7 @@ .text-icon-button { color: $gab-secondary-text; - border: none; + border: 0; background: transparent; cursor: pointer; font-weight: 600; @@ -245,14 +247,16 @@ .ellipsis::after {content: "…";} .timeline-compose-block { + @include gab-container-standards; display: flex; align-items: flex-start; padding: 20px; margin-bottom: 20px; - @include gab-container-standards(); + .emoji-picker-wrapper { .emoji-picker-dropdown {top: 10px;} } + .compose-form { flex: 1 1; padding: 0 0 0 20px !important; @@ -263,12 +267,12 @@ } .compose-form__autosuggest-wrapper { - &:before { + &::before { content: ""; display: block; position: absolute; - height: 0px; - width: 0px; + height: 0; + width: 0; border-top: 11px solid transparent; border-right: 12px solid #fff; border-bottom: 11px solid transparent; @@ -276,6 +280,7 @@ left: -22px; top: 13px; } + .autosuggest-textarea__textarea { padding: 14px 32px 13px 10px !important; } @@ -314,7 +319,7 @@ flex: 0 2 auto; max-height: 500px; @media screen and (min-width: 320px) and (max-width: 375px) {max-height: 220px;} - @media screen and (max-width: 320px) {max-height :130px;} + @media screen and (max-width: 320px) {max-height: 130px;} } .reply-indicator__header { @@ -453,6 +458,7 @@ background: transparent; padding: 0; padding-top: 8px; + &:hover, &:active { text-decoration: underline; @@ -788,7 +794,7 @@ } .account__avatar { - @include avatar-radius(); + @include avatar-radius; position: relative; background-color: $ui-base-color; @@ -799,11 +805,11 @@ } &-composite { - @include avatar-radius(); + @include avatar-radius; overflow: hidden; & > div { - @include avatar-radius(); + @include avatar-radius; float: left; position: relative; box-sizing: border-box; @@ -819,12 +825,12 @@ a .account__avatar { @include avatar-size(48px); &-base { - @include avatar-radius(); + @include avatar-radius; @include avatar-size(36px); } &-overlay { - @include avatar-radius(); + @include avatar-radius; @include avatar-size(24px); position: absolute; @@ -846,7 +852,7 @@ a .account__avatar { } .account__reciprocal_follow_message { - padding: 0px 5px; + padding: 0 5px; color: $gab-secondary-text; text-align: center; } @@ -1198,7 +1204,7 @@ a.account__display-name { width: auto; height: auto; object-fit: contain; - box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5); } } @@ -1228,13 +1234,13 @@ a.account__display-name { .icon-button.close { position: absolute; pointer-events: none; - transform: scale(0.0, 1.0) translate(-100%, 0); + transform: scale(0, 1) translate(-100%, 0); opacity: 0; } .compose__action-bar .icon-button { pointer-events: auto; - transform: scale(1.0, 1.0) translate(0, 0); + transform: scale(1, 1) translate(0, 0); opacity: 1; } } @@ -1341,7 +1347,7 @@ a.account__display-name { .ui { display: block; width: 100%; - padding: 0 0 100px 0; + padding: 0 0 100px; .page { display: flex; @@ -1354,7 +1360,7 @@ a.account__display-name { height: auto; z-index: 105; - @media (min-width:895px) { + @media (min-width: 895px) { top: -290px; position: sticky; } @@ -1439,6 +1445,7 @@ a.account__display-name { width: 100%; margin: 0 auto; padding: 15px 0; + .column, .drawer { width: 100%; @@ -1446,6 +1453,7 @@ a.account__display-name { padding: 0; } .autosuggest-textarea__textarea {font-size: 16px;} + .search__input { line-height: 18px; font-size: 16px; @@ -1456,15 +1464,20 @@ a.account__display-name { @media screen and (min-width: 630px) { .detailed-status { padding: 15px; + .media-gallery, .video-player { margin-top: 15px; } } .account__header__bar {padding: 5px 10px;} + .navigation-bar, - .compose-form {padding: 15px;} + .compose-form { + padding: 15px; + } .compose-form .compose-form__publish .compose-form__publish-button-wrapper {padding-top: 15px;} + .status { padding: 15px 15px 15px (48px + 15px * 2); min-height: 48px + 2px; @@ -1534,7 +1547,7 @@ a.account__display-name { background-color: $nav-ui-highlight-color; border: 0; border-radius: 999px; - box-shadow: 2px 5px 5px rgba(0,0,0,0.5); + box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5); font-size: 30px; align-items: center; justify-content: center; @@ -1592,23 +1605,24 @@ a.account__display-name { height: 100%; &__badge { + @include font-montserrat; + @include font-size(14); + @include line-height(14); position: absolute; box-sizing: border-box; left: -10px; top: 3px; - @media screen and (max-width: 895px) { - top: 0; - } min-width: 16px; height: 16px; padding: 1px 3px 0; border-radius: 8px; text-align: center; - @include font-montserrat(); - @include font-size(14); - @include line-height(14); color: #fff; background: $nav-ui-highlight-color; + + @media screen and (max-width: 895px) { + top: 0; + } } } @@ -1630,7 +1644,7 @@ a.account__display-name { background: $gab-background-container; &--highlighted { - background-color: #30CE7D; + background-color: #30ce7d; border-radius: 10px; font-weight: 600; margin-bottom: 10px; @@ -1642,7 +1656,7 @@ a.account__display-name { } &:last-of-type { - border-bottom: none; + border-bottom: 0; } &__btn { @@ -2057,7 +2071,7 @@ a.account__display-name { .setting-text { color: $darker-text-color; background: transparent; - border: none; + border: 0; border-bottom: 2px solid $ui-primary-color; box-sizing: border-box; display: block; @@ -2367,7 +2381,8 @@ a.status-card.compact:hover { } } -.columns-area--mobile .column {@include gab-container-standards();} +.columns-area--mobile .column {@include gab-container-standards;} + .column-header__wrapper { position: relative; flex: 0 0 auto; @@ -2405,7 +2420,7 @@ a.status-card.compact:hover { & > button, & > .btn { margin: 0; - border: none; + border: 0; padding: 15px; color: inherit; background: transparent; @@ -2531,6 +2546,7 @@ a.status-card.compact:hover { margin-left: 10px; } } + &:hover { color: $darker-text-color; text-decoration: underline; @@ -2607,11 +2623,11 @@ a.status-card.compact:hover { } .no-reduce-motion .loading-indicator span { - animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } .no-reduce-motion .loading-indicator__figure { - animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } @keyframes loader-figure { @@ -2778,7 +2794,7 @@ a.status-card.compact:hover { .column-select { &__control { - @include search-input(); + @include search-input; } &__placeholder { @@ -2829,7 +2845,7 @@ a.status-card.compact:hover { } &__menu { - @include search-popout(); + @include search-popout; padding: 0; background: $ui-secondary-color; } @@ -2991,7 +3007,7 @@ a.status-card.compact:hover { .no-reduce-motion .shake-bottom { transform-origin: 50% 100%; - animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both; + animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both; } .emoji-picker-dropdown__menu { @@ -3287,9 +3303,9 @@ a.status-card.compact:hover { } .search__input { + @include search-input; display: block; padding: 7px 30px 6px 10px; - @include search-input(); } .search__icon { @@ -3303,6 +3319,7 @@ a.status-card.compact:hover { } .fa { + @include font-size(16); cursor: default; display: inline-block; position: absolute; @@ -3311,7 +3328,6 @@ a.status-card.compact:hover { z-index: 2; width: 18px; height: 18px; - @include font-size(16); color: $gab-placeholder-accent; opacity: 0; pointer-events: none; @@ -3324,8 +3340,8 @@ a.status-card.compact:hover { .fa-search.active {pointer-events: none;} .fa-times-circle { - cursor: pointer; @include font-size(17); + cursor: pointer; color: $nav-ui-highlight-color; &:hover {color: lighten($nav-ui-highlight-color, 7%);} } @@ -3506,7 +3522,7 @@ a.status-card.compact:hover { } .media-gallery__item { - border: none; + border: 0; box-sizing: border-box; display: block; float: left; @@ -3993,7 +4009,7 @@ a.status-card.compact:hover { } .account-gallery__item { - border: none; + border: 0; box-sizing: border-box; display: block; position: relative; @@ -4076,13 +4092,13 @@ a.status-card.compact:hover { border-radius: 0; } -.search-popout-container{ +.search-popout-container { width: 251px; @media screen and (max-width: $nav-breakpoint-2) {width: 100%;} } .search-popout { - @include search-popout(); + @include search-popout; } noscript { @@ -4184,14 +4200,14 @@ noscript { .icon-button.close { pointer-events: auto; opacity: 1; - transform: scale(1.0, 1.0) translate(0, 0); + transform: scale(1, 1) translate(0, 0); bottom: 5px; } .compose__action-bar .icon-button { pointer-events: none; opacity: 0; - transform: scale(0.0, 1.0) translate(100%, 0); + transform: scale(0, 1) translate(100%, 0); } } } @@ -4221,7 +4237,7 @@ noscript { box-sizing: border-box; display: block; width: 100%; - border: none; + border: 0; border-radius: 5px; padding: 10px; font-family: $font-monospace, monospace; @@ -4432,7 +4448,7 @@ noscript { display: flex; .account__relationship { - padding: 8px 5px 0 5px; + padding: 8px 5px 0; } } @@ -4667,7 +4683,7 @@ noscript { display: flex; align-items: baseline; margin-bottom: 10px; - padding: 15px 15px 0 15px; + padding: 15px 15px 0; &__icon { margin-right: 10px; @@ -4732,11 +4748,11 @@ noscript { padding-right: 10px; &__avatar { - height: 46px; - width: 46px; - background-color: red; - left: -58px; - position: absolute; + height: 46px; + width: 46px; + background-color: #ff0000; + left: -58px; + position: absolute; } &__name { @@ -4786,11 +4802,11 @@ noscript { width: 15px; height: 15px; - &:before { + &::before { display: block; content: ""; position: absolute; - background-color: #00A3ED; + background-color: #00a3ed; top: 0; right: 0; left: 0; @@ -4798,7 +4814,7 @@ noscript { border-radius: 50%; } - &:after { + &::after { display: block; position: absolute; content: '\f00c'; @@ -4879,14 +4895,14 @@ noscript { max-height: 160px !important; } - .compose-form__autosuggest-wrapper:before { + .compose-form__autosuggest-wrapper::before { content: none !important; } } } } - @media screen and (max-width:895px) { + @media screen and (max-width: 895px) { margin: 0; border-radius: 0; height: 100vh; @@ -4910,7 +4926,7 @@ noscript { flex-direction: column; flex: 1 1; - @media (min-width:895px) { + @media (min-width: 895px) { padding-top: 60px; } } @@ -4998,7 +5014,7 @@ noscript { padding: 10px 0; margin: 5px 0; - @media screen and (max-width:895px) { + @media screen and (max-width: 895px) { border-bottom: 1px solid lighten($ui-base-color, 12%); } @@ -5079,7 +5095,7 @@ noscript { } } - @media screen and (max-width:895px) { + @media screen and (max-width: 895px) { height: 270px !important; width: 330px !important; } @@ -5113,7 +5129,7 @@ noscript { padding: 25px 0; background-color: lighten($ui-base-color, 6%); - @media (min-width:895px) { + @media (min-width: 895px) { display: block; } } @@ -5137,12 +5153,12 @@ noscript { max-width: 1200px; margin: 0 auto; - @media screen and (max-width:895px) { + @media screen and (max-width: 895px) { max-width: 580px; } } - @media (min-width:895px) and (max-width:1190px) { + @media (min-width: 895px) and (max-width: 1190px) { &__title-text, &__type-filters-tabs { max-width: 900px; @@ -5163,7 +5179,7 @@ noscript { overflow: hidden; &.hidden { - max-height: 0px; + max-height: 0; } &__btn { @@ -5193,17 +5209,17 @@ noscript { margin: 0 5px 5px 0; &--pro { - background-color: blueviolet; + background-color: #8a2be2; color: #fff; } &--investor { - background-color: gold; + background-color: #ffd700; color: #000; } &--donor { - background-color: lightgreen; + background-color: #90ee90; color: #000; } diff --git a/app/styles/soapbox/components/account-header.scss b/app/styles/soapbox/components/account-header.scss index 96a2add0b8..8874df4fdf 100644 --- a/app/styles/soapbox/components/account-header.scss +++ b/app/styles/soapbox/components/account-header.scss @@ -1,21 +1,27 @@ .account__header { &.inactive { opacity: 0.5; + .account__header__image, - .account__avatar {filter: grayscale(100%);} + .account__avatar { + filter: grayscale(100%); + } } + &__info { position: absolute; top: 10px; left: 10px; } + &__image { overflow: hidden; height: 350px; position: relative; background: darken($ui-base-color, 4%); - @media screen and (max-width:895px) {height: 225px;} + @media screen and (max-width: 895px) {height: 225px;} &--none {height: 125px;} + img { object-fit: cover; display: block; @@ -24,14 +30,16 @@ margin: 0; } } + &__bar { display: block; min-height: 74px; width: 100%; position: relative; background: lighten($ui-base-color, 4%); - @media (min-width:895px) {height: 74px;} + @media (min-width: 895px) {height: 74px;} } + &__avatar { display: block; position: absolute; @@ -49,11 +57,12 @@ height: 200px; background-size: 200px 200px; } - @media screen and (max-width:895px) { + @media screen and (max-width: 895px) { top: -45px; left: 10px; height: 90px; width: 90px; + .account__avatar { width: 90px; height: 90px; @@ -62,6 +71,7 @@ } } + &__extra { display: flex; flex-direction: row; @@ -72,20 +82,22 @@ max-width: 1200px; box-sizing: border-box; position: relative; - @media (min-width:895px) and (max-width:1190px) { + @media (min-width: 895px) and (max-width: 1190px) { max-width: 900px; padding-left: 300px; } - @media screen and (max-width:895px) { + @media screen and (max-width: 895px) { max-width: 900px; - padding: 10px 10px 0 10px; + padding: 10px 10px 0; flex-direction: column-reverse; min-height: 50px; } + &__buttons { display: flex; align-items: center; margin-left: auto; + .icon-button { border: 1px solid lighten($ui-base-color, 12%); border-radius: 4px; @@ -94,32 +106,37 @@ } .button {margin-right: 10px;} } + &__links { display: flex; font-size: 14px; color: $darker-text-color; - @media screen and (max-width:895px) { + @media screen and (max-width: 895px) { justify-content: center; flex-wrap: wrap; } + a { display: inline-block; text-decoration: none; padding: 16px 22px; text-align: center; - @media screen and (max-width:1190px) {padding: 16px;} + @media screen and (max-width: 1190px) {padding: 16px;} + > span { display: block; + &:first-of-type { color: $primary-text-color; font-size: 20px; font-weight: 800; line-height: 24px; - @media screen and (max-width:895px) { + @media screen and (max-width: 895px) { font-size: 16px; line-height: 20px; } } + &:last-of-type { color: $ui-secondary-color; font-size: 12px; @@ -127,20 +144,23 @@ padding-top: 2px; } } + &:hover, - &.active {border-bottom: 2px solid $primary-text-color;} - &.score {border-bottom:none !important;} + &.active { + border-bottom: 2px solid $primary-text-color; + } + &.score {border-bottom: 0 !important;} } } } // end .account__header__extra - @media screen and (max-width:895px) { + @media screen and (max-width: 895px) { .account-mobile-container { display: block; background: lighten($ui-base-color, 4%); margin-top: 10px; position: relative; - padding: 10px 10px 0px; + padding: 10px 10px 0; &--nonuser {padding: 10px 10px 15px;} } } -} // end .account__header \ No newline at end of file +} // end .account__header diff --git a/app/styles/soapbox/components/buttons.scss b/app/styles/soapbox/components/buttons.scss index 453241ab30..2dfb4c3947 100644 --- a/app/styles/soapbox/components/buttons.scss +++ b/app/styles/soapbox/components/buttons.scss @@ -5,15 +5,15 @@ a.button { // NOTE - will define the larger standard buttons here and apply class where used. &-small { - height: 20px; - padding: 5px 15px; - border: none; - border-radius: 4px; @include font-size(11); @include line-height(11); @include font-weight(bold); + height: 20px; + padding: 5px 15px; + border: 0; + border-radius: 4px; text-transform: uppercase; - color: white; + color: #fff; background: $gab-small-cta-primary; } } diff --git a/app/styles/soapbox/components/dropdown-menu.scss b/app/styles/soapbox/components/dropdown-menu.scss index 01a6340df1..0cc214c547 100644 --- a/app/styles/soapbox/components/dropdown-menu.scss +++ b/app/styles/soapbox/components/dropdown-menu.scss @@ -1,42 +1,47 @@ .dropdown-menu { + @include font-size(13); + @include line-height(26); + @include font-weight(normal); z-index: 9999; position: absolute; background: $gab-background-container; border-radius: 4px; border: 1px solid $gab-placeholder-accent; padding: 4px 0; - @include font-size(13); - @include line-height(26); - @include font-weight(normal); color: $gab-secondary-text; - box-shadow: 0 0 6px 0 rgba(0,0,0,0.5); + box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); &.left {transform-origin: 100% 50%;} &.top {transform-origin: 50% 100%;} &.bottom {transform-origin: 50% 0;} &.right {transform-origin: 0 50%;} + &__arrow { position: absolute; width: 0; height: 0; border: 0 solid transparent; + &.left { right: -5px; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: $gab-placeholder-accent; } + &.top { bottom: -5px; margin-left: -5px; border-width: 5px 5px 0; border-top-color: $gab-placeholder-accent; } + &.bottom { top: -5px; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: $gab-placeholder-accent; } + &.right { left: -5px; margin-top: -5px; @@ -44,10 +49,12 @@ border-right-color: $gab-placeholder-accent; } } + ul { overflow: hidden; padding: 6px 0; } + &__item a { display: block; box-sizing: border-box; @@ -58,14 +65,16 @@ white-space: nowrap; text-transform: capitalize; color: $gab-secondary-text; + &:focus, &:hover, &:active { outline: 0; - color: white; + color: #fff; background: $gab-brand-default !important; } } + &__separator { display: block; margin: 10px !important; diff --git a/app/styles/soapbox/components/group-card.scss b/app/styles/soapbox/components/group-card.scss index 164db59e77..f3cee9223b 100644 --- a/app/styles/soapbox/components/group-card.scss +++ b/app/styles/soapbox/components/group-card.scss @@ -1,71 +1,73 @@ .group-column-header { - overflow: hidden; - @include gab-container-standards(); - .group-column-header__title { - padding: 15px; - font-size: 20px; - font-weight: bold; - } - .group-column-header__cta { - float: right; - padding: 15px; - font-size: 17px; - a {color: #fff;} - } + @include gab-container-standards; + overflow: hidden; + + .group-column-header__title { + padding: 15px; + font-size: 20px; + font-weight: bold; + } + + .group-column-header__cta { + float: right; + padding: 15px; + font-size: 17px; + a {color: #fff;} + } } .group-card-list { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - width: 100%; - margin-top: 20px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; + margin-top: 20px; } .group-card { - display: block; - flex: 0 0 calc(50% - 20px/2); - @include gab-container-standards(); - margin-bottom: 20px; - text-decoration: none; + @include gab-container-standards; + display: block; + flex: 0 0 calc(50% - 20px/2); + margin-bottom: 20px; + text-decoration: none; + overflow: hidden; + + .group-card__header { overflow: hidden; - .group-card__header { - overflow: hidden; + img { + pointer-events: none; + width: 100%; + background: $gab-background-container; + } + } - img { - pointer-events: none; - width: 100%; - background: $gab-background-container; - } + .group-card__content { + padding: 15px; + + .group-card__title { + color: $primary-text-color; + font-size: 16px; + font-weight: bold; } - .group-card__content { - padding: 15px; - - .group-card__title { - color: $primary-text-color; - font-size: 16px; - font-weight: bold; - } - - .group-card__meta { - color: $gab-secondary-text; - font-size: 14px; - margin-top: 5px; - margin-bottom: 10px; - } - - .group-card__description { - color: $primary-text-color; - font-size: 14px; - } + .group-card__meta { + color: $gab-secondary-text; + font-size: 14px; + margin-top: 5px; + margin-bottom: 10px; } - &:hover { - .group-card__title { - text-decoration: underline; - } + .group-card__description { + color: $primary-text-color; + font-size: 14px; } + } + + &:hover { + .group-card__title { + text-decoration: underline; + } + } } diff --git a/app/styles/soapbox/components/group-detail.scss b/app/styles/soapbox/components/group-detail.scss index 0732da007f..4d28c1800f 100644 --- a/app/styles/soapbox/components/group-detail.scss +++ b/app/styles/soapbox/components/group-detail.scss @@ -1,84 +1,84 @@ .group { - .group__header-container { + .group__header-container { + width: 100%; + display: flex; + justify-content: center; + flex-direction: row; + } + + .group__header { + width: 100%; + max-width: 1150px; + background: $gab-background-container; + border-radius: 10px; + overflow: hidden; + margin: 20px 0; + + .group__cover { + img { width: 100%; - display: flex; - justify-content: center; - flex-direction: row; + } } - .group__header { - width: 100%; - max-width: 1150px; - background: $gab-background-container; - border-radius: 10px; - overflow: hidden; - margin: 20px 0; + .group__tabs { + .group__tabs__tab { + display: inline-block; + text-decoration: none; + padding: 16px 22px; + text-align: center; + color: $primary-text-color; - .group__cover { - img { - width: 100%; - } + &:hover, + &--active { + border-bottom: 2px solid $primary-text-color; } + } - .group__tabs { - .group__tabs__tab { - display: inline-block; - text-decoration: none; - padding: 16px 22px; - text-align: center; - color: $primary-text-color; + &::after { + content: ""; + clear: both; + display: table; + } - &:hover, - &--active { - border-bottom: 2px solid $primary-text-color; - } - } + button { + float: right; + margin: 7px; + } - &:after { - content: ""; - clear: both; - display: table; - } + div { + float: right; + margin: 4px; + } + } + } - button { - float: right; - margin: 7px; - } + .group__panel { + padding: 10px 10px 20px; - div { - float: right; - margin: 4px; - } - } + h1 { + font-size: 22px; + font-weight: bold; + margin-bottom: 10px; } - .group__panel { - padding: 10px 10px 20px 10px; - - h1 { - font-size: 22px; - font-weight: bold; - margin-bottom: 10px; - } - - .group__panel__description { - font-size: 14px; - } - - .group__panel__label { - display: inline-block; - margin-bottom: 10px; - border-radius: 4px; - background: $gab-background-container; - font-size: 13px; - padding: 4px 8px; - } + .group__panel__description { + font-size: 14px; } - .group__feed { + .group__panel__label { + display: inline-block; + margin-bottom: 10px; + border-radius: 4px; background: $gab-background-container; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - overflow: hidden; + font-size: 13px; + padding: 4px 8px; } + } + + .group__feed { + background: $gab-background-container; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + overflow: hidden; + } } diff --git a/app/styles/soapbox/components/group-form.scss b/app/styles/soapbox/components/group-form.scss index 846c340a74..fad2ebfbbb 100644 --- a/app/styles/soapbox/components/group-form.scss +++ b/app/styles/soapbox/components/group-form.scss @@ -1,12 +1,14 @@ .group-form { + @include gab-container-standards; padding: 20px; - @include gab-container-standards(); - &, + + &, div { box-sizing: border-box; float: left; width: 100%; } + input[type=text], textarea { &.standard { @@ -14,32 +16,37 @@ margin: 0 0 10px; } } + textarea { float: left; height: 88px; } + .group-form__file-label { + @include font-size(12); + @include font-weight(light); cursor: pointer; display: block; box-sizing: border-box; float: left; - height: 20px; - padding: 3px 0 0 33px; - @include font-size(12); - @include font-weight(light); + height: 20px; + padding: 3px 0 0 33px; color: $gab-secondary-text; background-repeat: no-repeat; background-image: url('../images/sprite-post-functions.png'); background-size: 100px 1200px; + &:hover { color: $gab-brand-default; background-position: 0 -100px; } + &.group-form__file-label--selected { background-position: 0 -100px; - color: $gab-brand-default;; + color: $gab-brand-default; } } + .group-form__file { width: 1px; height: 1px; @@ -49,4 +56,4 @@ pointer-events: none; } button {float: right;} -} \ No newline at end of file +} diff --git a/app/styles/soapbox/components/group-sidebar-panel.scss b/app/styles/soapbox/components/group-sidebar-panel.scss index 9b750f2e12..8a2d510313 100644 --- a/app/styles/soapbox/components/group-sidebar-panel.scss +++ b/app/styles/soapbox/components/group-sidebar-panel.scss @@ -1,33 +1,33 @@ .group-sidebar-panel { - &__items { - padding: 0 15px 15px; + &__items { + padding: 0 15px 15px; - &__show-all { - color: $primary-text-color; - } + &__show-all { + color: $primary-text-color; + } + } + + &__item { + display: block; + color: $primary-text-color; + text-decoration: none; + margin-bottom: 15px; + + &:last-child { + margin-bottom: 0; } - &__item { - display: block; - color: $primary-text-color; - text-decoration: none; - margin-bottom: 15px; - - &:last-child { - margin-bottom: 0; - } - - &__title { - font-weight: bold; - } - - &__meta { - font-size: 0.8em; - color: $gab-secondary-text; - - &__unread { - color: $gab-brand-default; - } - } + &__title { + font-weight: bold; } -} \ No newline at end of file + + &__meta { + font-size: 0.8em; + color: $gab-secondary-text; + + &__unread { + color: $gab-brand-default; + } + } + } +} diff --git a/app/styles/soapbox/components/inputs.scss b/app/styles/soapbox/components/inputs.scss index 2713efb940..f0fa22956d 100644 --- a/app/styles/soapbox/components/inputs.scss +++ b/app/styles/soapbox/components/inputs.scss @@ -1,16 +1,16 @@ input[type='text'], textarea { &.standard { + @include font-size(16); + @include line-height(18); + @include input-placeholder($gab-placeholder-accent); box-sizing: border-box; padding: 7px 10px; border: 1px solid; border-radius: 4px; - @include font-size(16); - @include line-height(18); color: $gab-brand-default; border-color: $gab-placeholder-accent; background: $gab-background-container; - @include input-placeholder($gab-placeholder-accent); &:focus {outline: none;} } } diff --git a/app/styles/soapbox/components/modal.scss b/app/styles/soapbox/components/modal.scss index e9370fb653..52a1b2859b 100644 --- a/app/styles/soapbox/components/modal.scss +++ b/app/styles/soapbox/components/modal.scss @@ -318,11 +318,13 @@ border: 1px solid $gab-placeholder-accent; color: $gab-secondary-text; background: $gab-background-container; + .status__display-name { display: block; max-width: 100%; padding-right: 25px; } + .status__avatar { height: 28px; left: 10px; @@ -330,6 +332,7 @@ top: 10px; width: 48px; } + .status__content__spoiler-link { color: lighten($secondary-text-color, 8%); } @@ -500,13 +503,16 @@ } .actions-modal { + width: calc(100% - 72px); + margin: 35px; + .status { overflow-y: auto; max-height: 300px; } - width: calc(100% - 72px); - margin: 35px; + .actions-modal__item-label {font-weight: 500;} + ul { overflow-y: auto; flex-shrink: 0; @@ -516,9 +522,11 @@ &.with-status {max-height: calc(80vh - 75px);} li:empty {margin: 0;} + li:not(:empty) { - &:first-of-type{margin: 10px 0 0;} - &:last-of-type{margin: 0 0 10px;} + &:first-of-type {margin: 10px 0 0;} + &:last-of-type {margin: 0 0 10px;} + a { display: flex; align-items: center; @@ -526,8 +534,12 @@ @inclide font-size(14); color: $gab-secondary-text; text-decoration: none; + &, - button {transition: none;} + button { + transition: none; + } + &.active, &:hover, &:active, @@ -536,7 +548,7 @@ button { background: $gab-background-base; color: $gab-text-highlight; - box-shadow: 0 0 6px 0 rgba(0,0,0,0.5); + box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); } } button:first-child {margin-right: 10px;} diff --git a/app/styles/soapbox/components/sidebar-menu.scss b/app/styles/soapbox/components/sidebar-menu.scss index 30f22e4578..15af6eff4c 100644 --- a/app/styles/soapbox/components/sidebar-menu.scss +++ b/app/styles/soapbox/components/sidebar-menu.scss @@ -46,7 +46,7 @@ &--borderless { margin: 0; - border-top: none; + border-top: 0; } } @@ -63,7 +63,7 @@ } .sidebar-menu__wrapper { - background-color: rgba(0,0,0,0.3); + background-color: rgba(0, 0, 0, 0.3); } } diff --git a/app/styles/soapbox/components/user-panel.scss b/app/styles/soapbox/components/user-panel.scss index 0db01fe4bb..d8f18b235b 100644 --- a/app/styles/soapbox/components/user-panel.scss +++ b/app/styles/soapbox/components/user-panel.scss @@ -1,9 +1,10 @@ .user-panel { + @include gab-container-standards; display: flex; width: 265px; flex-direction: column; overflow-y: hidden; - @include gab-container-standards(); + &__header { display: block; height: 112px; @@ -36,7 +37,7 @@ &__meta { display: block; - padding: 6px 20px 17px 20px; + padding: 6px 20px 17px; } &__account { diff --git a/app/styles/soapbox/containers.scss b/app/styles/soapbox/containers.scss index 88a66a08e2..ba4f2030a9 100644 --- a/app/styles/soapbox/containers.scss +++ b/app/styles/soapbox/containers.scss @@ -121,7 +121,7 @@ grid-auto-rows: max-content; .column-0 { - grid-column: 1/3; + grid-column: 1 / 3; grid-row: 1; } @@ -136,7 +136,7 @@ } .column-3 { - grid-column: 1/3; + grid-column: 1 / 3; grid-row: 3; } @@ -360,7 +360,7 @@ .nav-button { background: $gab-brand-default; - color: white; + color: #fff; margin: 8px; margin-left: 0; border-radius: 4px; diff --git a/app/styles/soapbox/demetricator.scss b/app/styles/soapbox/demetricator.scss index 2a84eb926e..08288bd91c 100644 --- a/app/styles/soapbox/demetricator.scss +++ b/app/styles/soapbox/demetricator.scss @@ -7,8 +7,9 @@ body.demetricator { .sidebar-menu-profile__stats { display: none; } + .account__header__bar { min-height: 50px; - @media (min-width:895px) {height: 50px;} + @media (min-width: 895px) {height: 50px;} } } diff --git a/app/styles/soapbox/donations.scss b/app/styles/soapbox/donations.scss index 39d8a560a1..2130b8a2f2 100644 --- a/app/styles/soapbox/donations.scss +++ b/app/styles/soapbox/donations.scss @@ -1,9 +1,9 @@ .btngroup { display: flex; - margin: 10px 0 15px 0; + margin: 10px 0 15px; &__btn { - background-color: white; + background-color: #fff; padding: 10px 24px; font-size: 14px; border-radius: 0; @@ -13,6 +13,7 @@ &:first-of-type { border-radius: 4px 0 0 4px; } + &:last-of-type { border-radius: 0 4px 4px 0; } @@ -36,14 +37,17 @@ font-size: 1.3rem; margin-bottom: 4px; } + &__amount { font-size: 2rem; line-height: normal; - margin: 4px 0 12px 0; + margin: 4px 0 12px; } + &__billing { font-size: 14px; } + &__button { margin-top: 20px; } @@ -60,15 +64,23 @@ height: 13px; width: 13px; } - &--trialing, &--active { + + &--trialing, + &--active { &::before { background-color: #00ff00; } } + &--cancelling::before { - background-color: yellow; + background-color: #ffff00; } - &--incomplete, &--incomplete_expired, &--past_due, &--canceled, &--unpaid { + + &--incomplete, + &--incomplete_expired, + &--past_due, + &--canceled, + &--unpaid { &::before { background-color: #ff0000; } @@ -78,13 +90,16 @@ .subs { .sub { border-radius: 0; + & + .sub { border-top: 0; } + &:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } + &:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; @@ -105,6 +120,7 @@ margin-right: 6px; transform: translateY(-4px); } + &__price { font-size: 60px; background: transparent; diff --git a/app/styles/soapbox/dyslexic.scss b/app/styles/soapbox/dyslexic.scss index 08310d6754..9dd348fec6 100644 --- a/app/styles/soapbox/dyslexic.scss +++ b/app/styles/soapbox/dyslexic.scss @@ -5,7 +5,8 @@ body.dyslexic { @media screen and (max-width: $nav-breakpoint-2) { - .column-header > button, .column-header > .btn { + .column-header > button, + .column-header > .btn { font-size: 11px; } } diff --git a/app/styles/soapbox/emoji_picker.scss b/app/styles/soapbox/emoji_picker.scss index e49084b5f7..4bfd665049 100644 --- a/app/styles/soapbox/emoji_picker.scss +++ b/app/styles/soapbox/emoji_picker.scss @@ -1,14 +1,14 @@ .emoji-mart { + font-size: 13px; + display: inline-block; + color: $inverted-text-color; + &, * { box-sizing: border-box; line-height: 1.15; } - font-size: 13px; - display: inline-block; - color: $inverted-text-color; - .emoji-mart-emoji { padding: 6px; } diff --git a/app/styles/soapbox/fonts.scss b/app/styles/soapbox/fonts.scss index a4f4e2d40c..013008cf0a 100644 --- a/app/styles/soapbox/fonts.scss +++ b/app/styles/soapbox/fonts.scss @@ -116,8 +116,8 @@ // TYPEOGRAPHY MIXINS // declare the font family using these shortcuts -@mixin font-roboto() {font-family: 'Roboto', Arial, sans-serif !important;} -@mixin font-montserrat() {font-family: 'Montserrat', Arial, sans-serif !important;} +@mixin font-roboto {font-family: 'Roboto', Arial, sans-serif !important;} +@mixin font-montserrat {font-family: 'Montserrat', Arial, sans-serif !important;} // Declare font weights as a numerical value in rendered output // Prevents certain browsers which do not play nice with "light, medium" textual declarations @@ -158,11 +158,13 @@ font-weight: normal; font-style: normal; } -.fa-site-icon:before { + +.fa-site-icon::before { font-family: 'FontAwesome'; content: '\f0c0'; } -.fa-fediverse:before { + +.fa-fediverse::before { font-family: 'spinster' !important; content: "\e901"; } diff --git a/app/styles/soapbox/footer.scss b/app/styles/soapbox/footer.scss index ba38341cc5..bcc19f5926 100644 --- a/app/styles/soapbox/footer.scss +++ b/app/styles/soapbox/footer.scss @@ -9,7 +9,7 @@ background-color: lighten($ui-base-color, 5%); border-top: darken($ui-base-color, 10%); - @media screen and (max-width:1024px) { + @media screen and (max-width: 1024px) { padding: 40px 20px; } @@ -20,11 +20,11 @@ flex-wrap: wrap; align-items: center; - @media screen and (max-width:1024px) { + @media screen and (max-width: 1024px) { width: 100%; } - @media screen and (max-width:767px) { + @media screen and (max-width: 767px) { flex-direction: column-reverse; justify-content: center; } @@ -83,7 +83,7 @@ } } - @media screen and (max-width:767px) { + @media screen and (max-width: 767px) { .copyright { margin: 0 auto auto; text-align: center; diff --git a/app/styles/soapbox/forms.scss b/app/styles/soapbox/forms.scss index 1d794fe1e6..26ee451968 100644 --- a/app/styles/soapbox/forms.scss +++ b/app/styles/soapbox/forms.scss @@ -564,7 +564,7 @@ code { box-sizing: border-box; display: block; width: 100%; - border: none; + border: 0; padding: 10px; font-family: $font-monospace, monospace; background: $ui-base-color; diff --git a/app/styles/soapbox/polls.scss b/app/styles/soapbox/polls.scss index 4846b1847a..5701498e9e 100644 --- a/app/styles/soapbox/polls.scss +++ b/app/styles/soapbox/polls.scss @@ -28,6 +28,7 @@ width: 100%; text-overflow: ellipsis; color: #fff; + input[type=radio], input[type=checkbox] { display: none; diff --git a/app/styles/soapbox/pro.scss b/app/styles/soapbox/pro.scss index 07024ff955..a32ee1e63c 100644 --- a/app/styles/soapbox/pro.scss +++ b/app/styles/soapbox/pro.scss @@ -8,8 +8,9 @@ body.theme-purple-contrast { body.theme-halloween { .page--customization { background-color: #904700; + &::before { - background: radial-gradient(circle, transparent 0%, transparent 60%, black 100%); + background: radial-gradient(circle, transparent 0%, transparent 60%, #000 100%); content: ""; display: block; position: fixed; diff --git a/app/styles/soapbox/scrollbars.scss b/app/styles/soapbox/scrollbars.scss index e07228c231..d91d7e83d2 100644 --- a/app/styles/soapbox/scrollbars.scss +++ b/app/styles/soapbox/scrollbars.scss @@ -3,32 +3,39 @@ // 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: none; + 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: none; + 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);}