mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Fix all scss linter warnings

Browse Source
merge-requests/36/head
Alex Gleason 4 years ago
parent 66dbed005d
commit c889269ecb
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
32 changed files with 487 additions and 337 deletions
Show Stats Download Patch File Download Diff File

3
app/styles/contrast/diff.scss
Unescape View File

@ -5,12 +5,13 @@
&-description { &-description {
input { input {
&::placeholder { &::placeholder {
opacity: 1.0; opacity: 1;
} }
} }
} }
} }
} }
.compose-form__warning { .compose-form__warning {
color: $inverted-text-color; color: $inverted-text-color;
} }

2
app/styles/contrast/variables.scss
Unescape View File

@ -20,5 +20,5 @@ $highlight-text-color: $classic-highlight-color !default;
$action-button-color: #8d9ac2; $action-button-color: #8d9ac2;
$inverted-text-color: $black !default; $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; $light-text-color: darken($ui-primary-color, 40%) !default;

43
app/styles/halloween/diff.scss
Unescape View File

@ -15,7 +15,10 @@ body.app-body::after,
content: ''; content: '';
display: block; display: block;
position: fixed; position: fixed;
top: 0; left: 0; right: 0; bottom: 0; top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
width: 100%; width: 100%;
@ -70,21 +73,24 @@ body.app-body::after {
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
} }
.ui .page__columns::after { .ui .page__columns::after {
position: fixed; position: fixed;
top: 50px; top: 50px;
} }
.ui .page__top::after { .ui .page__top::after {
position: absolute; position: absolute;
bottom: -100px; bottom: -100px;
} }
.ui .page__top + .page__columns::after { .ui .page__top + .page__columns::after {
display: none; display: none;
} }
.search__input { .search__input {
border-color: $halloween-dark; border-color: $halloween-dark;
color: black; color: #000;
} }
.search__icon .fa-times-circle, .search__icon .fa-times-circle,
@ -101,7 +107,7 @@ body.app-body::after {
} }
.admin-wrapper .content h2 { .admin-wrapper .content h2 {
color: white; color: #fff;
} }
.compose-form .autosuggest-textarea__textarea, .compose-form .autosuggest-textarea__textarea,
@ -115,11 +121,18 @@ body.app-body::after {
.button { .button {
background-color: $halloween-orange; background-color: $halloween-orange;
&:focus, &:hover { background-color: darken($halloween-orange, 10%);} color: #000;
color: black;
&: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 { .getting-started__footer::before {
@ -160,12 +173,15 @@ body.app-body::after {
.dropdown-menu { .dropdown-menu {
border-color: $halloween-orange; border-color: $halloween-orange;
} }
.dropdown-menu__item a { .dropdown-menu__item a {
color: $halloween-orange; color: $halloween-orange;
} }
.dropdown-menu__arrow.bottom { .dropdown-menu__arrow.bottom {
border-bottom-color: $halloween-orange; border-bottom-color: $halloween-orange;
} }
.dropdown-menu__arrow.top { .dropdown-menu__arrow.top {
border-top-color: $halloween-orange; border-top-color: $halloween-orange;
} }
@ -174,13 +190,20 @@ body.app-body::after {
background: $gab-background-container; 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; 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; border-color: $halloween-orange;
} }
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a { .admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
color: black; color: #000;
} }

9
app/styles/neenster.scss
Unescape View File

@ -19,12 +19,15 @@ $ui-base-lighter-color: darken(#2da8be, 35%);
} }
.brand__tagline { .brand__tagline {
color: white; color: #fff;
} }
.header .nav-link { .header .nav-link {
color: white; color: #fff;
&:hover, &:focus, &:active {
&:hover,
&:focus,
&:active {
color: $gab-background-base-light; color: $gab-background-base-light;
} }
} }

17
app/styles/soapbox-light/diff.scss
Unescape View File

@ -11,7 +11,7 @@ body {
color: $white; color: $white;
&.button-alternative-2 { &.button-alternative-2 {
color: black; color: #000;
} }
} }
@ -175,7 +175,7 @@ body {
.embed-modal { .embed-modal {
background: #333; background: #333;
color: white; color: #fff;
} }
.boost-modal__action-bar, .boost-modal__action-bar,
@ -290,6 +290,7 @@ body {
.simple_form input[type="password"], .simple_form input[type="password"],
.simple_form textarea { .simple_form textarea {
border-color: $gab-brand-default; border-color: $gab-brand-default;
&:hover { &:hover {
border-color: $gab-brand-default; border-color: $gab-brand-default;
} }
@ -364,11 +365,11 @@ body {
} }
.admin-wrapper .content > p { .admin-wrapper .content > p {
color: black; color: #000;
} }
.btngroup__btn--active { .btngroup__btn--active {
color: white; color: #fff;
} }
.timeline-compose-block .compose-form .compose-form__autosuggest-wrapper .autosuggest-textarea__textarea { .timeline-compose-block .compose-form .compose-form__autosuggest-wrapper .autosuggest-textarea__textarea {
@ -376,7 +377,7 @@ body {
} }
.promo-panel-item { .promo-panel-item {
@include light-theme-shadow(); @include light-theme-shadow;
background: $gab-background-container-light; background: $gab-background-container-light;
} }
@ -395,7 +396,7 @@ body {
} }
.wtf-panel { .wtf-panel {
@include light-theme-shadow(); @include light-theme-shadow;
background: $gab-background-container-light; background: $gab-background-container-light;
} }
@ -424,10 +425,10 @@ body {
input[type='text'], input[type='text'],
textarea { textarea {
&.standard { &.standard {
@include input-placeholder($gab-secondary-text);
color: $gab-placeholder-accent; color: $gab-placeholder-accent;
border-color: $gab-secondary-text; border-color: $gab-secondary-text;
background: $gab-background-base-light; background: $gab-background-base-light;
@include input-placeholder($gab-secondary-text);
} }
} }
@ -467,6 +468,6 @@ textarea {
color: $gab-default-text-light; color: $gab-default-text-light;
} }
.fa-site-icon:before { .fa-site-icon::before {
filter: grayscale(100%) invert(0); filter: grayscale(100%) invert(0);
} }

12
app/styles/soapbox/_mixins.scss
Unescape View File

@ -39,6 +39,8 @@
} }
@mixin search-input { @mixin search-input {
@include font-size(16);
@include line-height(19);
outline: 0; outline: 0;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
@ -47,8 +49,6 @@
font-family: inherit; font-family: inherit;
background: $nav-ui-search-bg-color; background: $nav-ui-search-bg-color;
color: $nav-ui-highlight-color; color: $nav-ui-highlight-color;
@include font-size(16);
@include line-height(19);
margin: 0; margin: 0;
border-radius: 4px; border-radius: 4px;
@ -69,22 +69,22 @@
} }
@mixin search-popout { @mixin search-popout {
@include font-size(12);
@include line-height(14);
@include font-weight(normal);
background: $gab-background-container; background: $gab-background-container;
border-radius: 4px; border-radius: 4px;
border: 1px solid $gab-placeholder-accent; border: 1px solid $gab-placeholder-accent;
padding: 8px 10px 17px; padding: 8px 10px 17px;
margin: 4px 0 0; margin: 4px 0 0;
@include font-size(12);
@include line-height(14);
@include font-weight(normal);
color: $gab-secondary-text; 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);
h4 { h4 {
color: #fff;
@include font-size(14); @include font-size(14);
@include line-height(16); @include line-height(16);
@include font-weight(bold); @include font-weight(bold);
color: #fff;
} }
ul { ul {

59
app/styles/soapbox/about.scss
Unescape View File

@ -62,7 +62,12 @@ $small-breakpoint: 960px;
color: lighten($darker-text-color, 10%); color: lighten($darker-text-color, 10%);
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font-display, sans-serif; font-family: $font-display, sans-serif;
margin-top: 2em; margin-top: 2em;
margin-bottom: 1.25em; margin-bottom: 1.25em;
@ -71,7 +76,12 @@ $small-breakpoint: 960px;
} }
hr + { hr + {
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1.25em; margin-top: 1.25em;
} }
} }
@ -663,18 +673,33 @@ $small-breakpoint: 960px;
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
background-image: none; background-image: none;
.brand__tagline, .brand h1 { color: white; }
.brand__tagline,
.brand h1 {
color: #fff;
}
.header { .header {
.nav-link { .nav-link {
color: white; color: #fff;
&:hover, &:focus, &:active { color: $gab-background-base-light; }
&:hover,
&:focus,
&:active {
color: $gab-background-base-light;
}
} }
.brand { .brand {
filter: brightness(0) invert(100%); filter: brightness(0) invert(100%);
} }
.nav-button { .nav-button {
background: darken($gab-brand-default, 10%); background: darken($gab-brand-default, 10%);
&:hover, &:focus, &:active {
&:hover,
&:focus,
&:active {
background: darken($gab-brand-default, 15%); background: darken($gab-brand-default, 15%);
} }
} }
@ -690,7 +715,7 @@ $small-breakpoint: 960px;
height: auto; height: auto;
min-height: 80vh; min-height: 80vh;
@media (min-width:767px) { @media (min-width: 767px) {
min-height: 550px; min-height: 550px;
} }
@ -708,8 +733,8 @@ $small-breakpoint: 960px;
width: 395px; width: 395px;
} }
@media (min-width:767px) and (max-width:1024px) { @media (min-width: 767px) and (max-width: 1024px) {
padding: 40px 20px 20px 20px; padding: 40px 20px 20px;
&--left { &--left {
margin-right: 40px; margin-right: 40px;
@ -720,7 +745,7 @@ $small-breakpoint: 960px;
} }
} }
@media screen and (max-width:767px) { @media screen and (max-width: 767px) {
height: auto; height: auto;
padding: 20px 10px 30px; padding: 20px 10px 30px;
flex-direction: column; flex-direction: column;
@ -752,11 +777,11 @@ $small-breakpoint: 960px;
img { img {
height: 100px; height: 100px;
@media (min-width:767px) and (max-width:1024px) { @media (min-width: 767px) and (max-width: 1024px) {
height: 60px; height: 60px;
} }
@media screen and (max-width:767px) { @media screen and (max-width: 767px) {
display: none; display: none;
} }
} }
@ -933,7 +958,7 @@ $small-breakpoint: 960px;
margin-right: 15px; margin-right: 15px;
h1 { h1 {
@include font-montserrat(); @include font-montserrat;
color: $gab-brand-default; color: $gab-brand-default;
} }
} }
@ -947,19 +972,19 @@ $small-breakpoint: 960px;
margin-top: 25px; margin-top: 25px;
font-weight: 400; font-weight: 400;
@media (min-width:767px) and (max-width:1024px) { @media (min-width: 767px) and (max-width: 1024px) {
width: 320px; width: 320px;
font-size: 20px; font-size: 20px;
} }
@media screen and (max-width:767px) { @media screen and (max-width: 767px) {
width: 100%; width: 100%;
font-size: 22px; font-size: 22px;
margin-top: 0; margin-top: 0;
} }
} }
@media (min-width:767px) { @media (min-width: 767px) {
.hidden-sm { .hidden-sm {
display: block; display: block;
} }
@ -969,7 +994,7 @@ $small-breakpoint: 960px;
} }
} }
@media screen and (max-width:767px) { @media screen and (max-width: 767px) {
.hidden-sm { .hidden-sm {
display: none !important; display: none !important;
} }

5
app/styles/soapbox/admin.scss
Unescape View File

@ -170,7 +170,7 @@ $content-width: 840px;
text-transform: none; text-transform: none;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 0; margin-bottom: 0;
border-bottom: none; border-bottom: 0;
} }
& > p { & > p {
@ -502,10 +502,11 @@ $content-width: 840px;
a { a {
color: $ui-highlight-color; color: $ui-highlight-color;
text-decoration: none; text-decoration: none;
font-weight: 500;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
font-weight: 500;
} }
.diff-old { .diff-old {

10
app/styles/soapbox/basics.scss
Unescape View File

@ -2,11 +2,11 @@
@if type-of($color) == 'color' { @if type-of($color) == 'color' {
$color: str-slice(ie-hex-str($color), 4); $color: str-slice(ie-hex-str($color), 4);
} }
@return '%23' + unquote($color) @return '%23' + unquote($color);
} }
html { html {
@include font-roboto(); @include font-roboto;
@include font-weight(normal); @include font-weight(normal);
font-size: 62.5%; font-size: 62.5%;
text-size-adjust: 100%; text-size-adjust: 100%;
@ -21,9 +21,9 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-feature-settings: "kern"; 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; -webkit-tap-highlight-color: transparent;
color: white; color: #fff;
background-color: $gab-background-base; background-color: $gab-background-base;
&.system-font { &.system-font {
@ -150,7 +150,7 @@ button {
.visuallyhidden { .visuallyhidden {
border: 0 !important; border: 0 !important;
clip: rect(1px,1px,1px,1px) !important; clip: rect(1px, 1px, 1px, 1px) !important;
font-size: 1px !important; font-size: 1px !important;
height: 1px !important; height: 1px !important;
overflow: hidden !important; overflow: hidden !important;

144
app/styles/soapbox/components.scss
Unescape View File

@ -28,7 +28,9 @@
&:active, &:active,
&:focus, &:focus,
&:hover {background-color: lighten($ui-highlight-color, 10%);} &:hover {
background-color: lighten($ui-highlight-color, 10%);
}
&--destructive { &--destructive {
transition: none; transition: none;
@ -187,7 +189,7 @@
.text-icon-button { .text-icon-button {
color: $gab-secondary-text; color: $gab-secondary-text;
border: none; border: 0;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
@ -245,14 +247,16 @@
.ellipsis::after {content: "…";} .ellipsis::after {content: "…";}
.timeline-compose-block { .timeline-compose-block {
@include gab-container-standards;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
padding: 20px; padding: 20px;
margin-bottom: 20px; margin-bottom: 20px;
@include gab-container-standards();
.emoji-picker-wrapper { .emoji-picker-wrapper {
.emoji-picker-dropdown {top: 10px;} .emoji-picker-dropdown {top: 10px;}
} }
.compose-form { .compose-form {
flex: 1 1; flex: 1 1;
padding: 0 0 0 20px !important; padding: 0 0 0 20px !important;
@ -263,12 +267,12 @@
} }
.compose-form__autosuggest-wrapper { .compose-form__autosuggest-wrapper {
&:before { &::before {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
height: 0px; height: 0;
width: 0px; width: 0;
border-top: 11px solid transparent; border-top: 11px solid transparent;
border-right: 12px solid #fff; border-right: 12px solid #fff;
border-bottom: 11px solid transparent; border-bottom: 11px solid transparent;
@ -276,6 +280,7 @@
left: -22px; left: -22px;
top: 13px; top: 13px;
} }
.autosuggest-textarea__textarea { .autosuggest-textarea__textarea {
padding: 14px 32px 13px 10px !important; padding: 14px 32px 13px 10px !important;
} }
@ -314,7 +319,7 @@
flex: 0 2 auto; flex: 0 2 auto;
max-height: 500px; max-height: 500px;
@media screen and (min-width: 320px) and (max-width: 375px) {max-height: 220px;} @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 { .reply-indicator__header {
@ -453,6 +458,7 @@
background: transparent; background: transparent;
padding: 0; padding: 0;
padding-top: 8px; padding-top: 8px;
&:hover, &:hover,
&:active { &:active {
text-decoration: underline; text-decoration: underline;
@ -788,7 +794,7 @@
} }
.account__avatar { .account__avatar {
@include avatar-radius(); @include avatar-radius;
position: relative; position: relative;
background-color: $ui-base-color; background-color: $ui-base-color;
@ -799,11 +805,11 @@
} }
&-composite { &-composite {
@include avatar-radius(); @include avatar-radius;
overflow: hidden; overflow: hidden;
& > div { & > div {
@include avatar-radius(); @include avatar-radius;
float: left; float: left;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
@ -819,12 +825,12 @@ a .account__avatar {
@include avatar-size(48px); @include avatar-size(48px);
&-base { &-base {
@include avatar-radius(); @include avatar-radius;
@include avatar-size(36px); @include avatar-size(36px);
} }
&-overlay { &-overlay {
@include avatar-radius(); @include avatar-radius;
@include avatar-size(24px); @include avatar-size(24px);
position: absolute; position: absolute;
@ -846,7 +852,7 @@ a .account__avatar {
} }
.account__reciprocal_follow_message { .account__reciprocal_follow_message {
padding: 0px 5px; padding: 0 5px;
color: $gab-secondary-text; color: $gab-secondary-text;
text-align: center; text-align: center;
} }
@ -1198,7 +1204,7 @@ a.account__display-name {
width: auto; width: auto;
height: auto; height: auto;
object-fit: contain; 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 { .icon-button.close {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
transform: scale(0.0, 1.0) translate(-100%, 0); transform: scale(0, 1) translate(-100%, 0);
opacity: 0; opacity: 0;
} }
.compose__action-bar .icon-button { .compose__action-bar .icon-button {
pointer-events: auto; pointer-events: auto;
transform: scale(1.0, 1.0) translate(0, 0); transform: scale(1, 1) translate(0, 0);
opacity: 1; opacity: 1;
} }
} }
@ -1341,7 +1347,7 @@ a.account__display-name {
.ui { .ui {
display: block; display: block;
width: 100%; width: 100%;
padding: 0 0 100px 0; padding: 0 0 100px;
.page { .page {
display: flex; display: flex;
@ -1354,7 +1360,7 @@ a.account__display-name {
height: auto; height: auto;
z-index: 105; z-index: 105;
@media (min-width:895px) { @media (min-width: 895px) {
top: -290px; top: -290px;
position: sticky; position: sticky;
} }
@ -1439,6 +1445,7 @@ a.account__display-name {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 15px 0; padding: 15px 0;
.column, .column,
.drawer { .drawer {
width: 100%; width: 100%;
@ -1446,6 +1453,7 @@ a.account__display-name {
padding: 0; padding: 0;
} }
.autosuggest-textarea__textarea {font-size: 16px;} .autosuggest-textarea__textarea {font-size: 16px;}
.search__input { .search__input {
line-height: 18px; line-height: 18px;
font-size: 16px; font-size: 16px;
@ -1456,15 +1464,20 @@ a.account__display-name {
@media screen and (min-width: 630px) { @media screen and (min-width: 630px) {
.detailed-status { .detailed-status {
padding: 15px; padding: 15px;
.media-gallery, .media-gallery,
.video-player { .video-player {
margin-top: 15px; margin-top: 15px;
} }
} }
.account__header__bar {padding: 5px 10px;} .account__header__bar {padding: 5px 10px;}
.navigation-bar, .navigation-bar,
.compose-form {padding: 15px;} .compose-form {
padding: 15px;
}
.compose-form .compose-form__publish .compose-form__publish-button-wrapper {padding-top: 15px;} .compose-form .compose-form__publish .compose-form__publish-button-wrapper {padding-top: 15px;}
.status { .status {
padding: 15px 15px 15px (48px + 15px * 2); padding: 15px 15px 15px (48px + 15px * 2);
min-height: 48px + 2px; min-height: 48px + 2px;
@ -1534,7 +1547,7 @@ a.account__display-name {
background-color: $nav-ui-highlight-color; background-color: $nav-ui-highlight-color;
border: 0; border: 0;
border-radius: 999px; 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; font-size: 30px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -1592,23 +1605,24 @@ a.account__display-name {
height: 100%; height: 100%;
&__badge { &__badge {
@include font-montserrat;
@include font-size(14);
@include line-height(14);
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
left: -10px; left: -10px;
top: 3px; top: 3px;
@media screen and (max-width: 895px) {
top: 0;
}
min-width: 16px; min-width: 16px;
height: 16px; height: 16px;
padding: 1px 3px 0; padding: 1px 3px 0;
border-radius: 8px; border-radius: 8px;
text-align: center; text-align: center;
@include font-montserrat();
@include font-size(14);
@include line-height(14);
color: #fff; color: #fff;
background: $nav-ui-highlight-color; 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; background: $gab-background-container;
&--highlighted { &--highlighted {
background-color: #30CE7D; background-color: #30ce7d;
border-radius: 10px; border-radius: 10px;
font-weight: 600; font-weight: 600;
margin-bottom: 10px; margin-bottom: 10px;
@ -1642,7 +1656,7 @@ a.account__display-name {
} }
&:last-of-type { &:last-of-type {
border-bottom: none; border-bottom: 0;
} }
&__btn { &__btn {
@ -2057,7 +2071,7 @@ a.account__display-name {
.setting-text { .setting-text {
color: $darker-text-color; color: $darker-text-color;
background: transparent; background: transparent;
border: none; border: 0;
border-bottom: 2px solid $ui-primary-color; border-bottom: 2px solid $ui-primary-color;
box-sizing: border-box; box-sizing: border-box;
display: block; 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 { .column-header__wrapper {
position: relative; position: relative;
flex: 0 0 auto; flex: 0 0 auto;
@ -2405,7 +2420,7 @@ a.status-card.compact:hover {
& > button, & > button,
& > .btn { & > .btn {
margin: 0; margin: 0;
border: none; border: 0;
padding: 15px; padding: 15px;
color: inherit; color: inherit;
background: transparent; background: transparent;
@ -2531,6 +2546,7 @@ a.status-card.compact:hover {
margin-left: 10px; margin-left: 10px;
} }
} }
&:hover { &:hover {
color: $darker-text-color; color: $darker-text-color;
text-decoration: underline; text-decoration: underline;
@ -2607,11 +2623,11 @@ a.status-card.compact:hover {
} }
.no-reduce-motion .loading-indicator span { .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 { .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 { @keyframes loader-figure {
@ -2778,7 +2794,7 @@ a.status-card.compact:hover {
.column-select { .column-select {
&__control { &__control {
@include search-input(); @include search-input;
} }
&__placeholder { &__placeholder {
@ -2829,7 +2845,7 @@ a.status-card.compact:hover {
} }
&__menu { &__menu {
@include search-popout(); @include search-popout;
padding: 0; padding: 0;
background: $ui-secondary-color; background: $ui-secondary-color;
} }
@ -2991,7 +3007,7 @@ a.status-card.compact:hover {
.no-reduce-motion .shake-bottom { .no-reduce-motion .shake-bottom {
transform-origin: 50% 100%; 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 { .emoji-picker-dropdown__menu {
@ -3287,9 +3303,9 @@ a.status-card.compact:hover {
} }
.search__input { .search__input {
@include search-input;
display: block; display: block;
padding: 7px 30px 6px 10px; padding: 7px 30px 6px 10px;
@include search-input();
} }
.search__icon { .search__icon {
@ -3303,6 +3319,7 @@ a.status-card.compact:hover {
} }
.fa { .fa {
@include font-size(16);
cursor: default; cursor: default;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
@ -3311,7 +3328,6 @@ a.status-card.compact:hover {
z-index: 2; z-index: 2;
width: 18px; width: 18px;
height: 18px; height: 18px;
@include font-size(16);
color: $gab-placeholder-accent; color: $gab-placeholder-accent;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@ -3324,8 +3340,8 @@ a.status-card.compact:hover {
.fa-search.active {pointer-events: none;} .fa-search.active {pointer-events: none;}
.fa-times-circle { .fa-times-circle {
cursor: pointer;
@include font-size(17); @include font-size(17);
cursor: pointer;
color: $nav-ui-highlight-color; color: $nav-ui-highlight-color;
&:hover {color: lighten($nav-ui-highlight-color, 7%);} &:hover {color: lighten($nav-ui-highlight-color, 7%);}
} }
@ -3506,7 +3522,7 @@ a.status-card.compact:hover {
} }
.media-gallery__item { .media-gallery__item {
border: none; border: 0;
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
float: left; float: left;
@ -3993,7 +4009,7 @@ a.status-card.compact:hover {
} }
.account-gallery__item { .account-gallery__item {
border: none; border: 0;
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
position: relative; position: relative;
@ -4076,13 +4092,13 @@ a.status-card.compact:hover {
border-radius: 0; border-radius: 0;
} }
.search-popout-container{ .search-popout-container {
width: 251px; width: 251px;
@media screen and (max-width: $nav-breakpoint-2) {width: 100%;} @media screen and (max-width: $nav-breakpoint-2) {width: 100%;}
} }
.search-popout { .search-popout {
@include search-popout(); @include search-popout;
} }
noscript { noscript {
@ -4184,14 +4200,14 @@ noscript {
.icon-button.close { .icon-button.close {
pointer-events: auto; pointer-events: auto;
opacity: 1; opacity: 1;
transform: scale(1.0, 1.0) translate(0, 0); transform: scale(1, 1) translate(0, 0);
bottom: 5px; bottom: 5px;
} }
.compose__action-bar .icon-button { .compose__action-bar .icon-button {
pointer-events: none; pointer-events: none;
opacity: 0; 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; box-sizing: border-box;
display: block; display: block;
width: 100%; width: 100%;
border: none; border: 0;
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
font-family: $font-monospace, monospace; font-family: $font-monospace, monospace;
@ -4432,7 +4448,7 @@ noscript {
display: flex; display: flex;
.account__relationship { .account__relationship {
padding: 8px 5px 0 5px; padding: 8px 5px 0;
} }
} }
@ -4667,7 +4683,7 @@ noscript {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
margin-bottom: 10px; margin-bottom: 10px;
padding: 15px 15px 0 15px; padding: 15px 15px 0;
&__icon { &__icon {
margin-right: 10px; margin-right: 10px;
@ -4734,7 +4750,7 @@ noscript {
&__avatar { &__avatar {
height: 46px; height: 46px;
width: 46px; width: 46px;
background-color: red; background-color: #ff0000;
left: -58px; left: -58px;
position: absolute; position: absolute;
} }
@ -4786,11 +4802,11 @@ noscript {
width: 15px; width: 15px;
height: 15px; height: 15px;
&:before { &::before {
display: block; display: block;
content: ""; content: "";
position: absolute; position: absolute;
background-color: #00A3ED; background-color: #00a3ed;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
@ -4798,7 +4814,7 @@ noscript {
border-radius: 50%; border-radius: 50%;
} }
&:after { &::after {
display: block; display: block;
position: absolute; position: absolute;
content: '\f00c'; content: '\f00c';
@ -4879,14 +4895,14 @@ noscript {
max-height: 160px !important; max-height: 160px !important;
} }
.compose-form__autosuggest-wrapper:before { .compose-form__autosuggest-wrapper::before {
content: none !important; content: none !important;
} }
} }
} }
} }
@media screen and (max-width:895px) { @media screen and (max-width: 895px) {
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
height: 100vh; height: 100vh;
@ -4910,7 +4926,7 @@ noscript {
flex-direction: column; flex-direction: column;
flex: 1 1; flex: 1 1;
@media (min-width:895px) { @media (min-width: 895px) {
padding-top: 60px; padding-top: 60px;
} }
} }
@ -4998,7 +5014,7 @@ noscript {
padding: 10px 0; padding: 10px 0;
margin: 5px 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%); 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; height: 270px !important;
width: 330px !important; width: 330px !important;
} }
@ -5113,7 +5129,7 @@ noscript {
padding: 25px 0; padding: 25px 0;
background-color: lighten($ui-base-color, 6%); background-color: lighten($ui-base-color, 6%);
@media (min-width:895px) { @media (min-width: 895px) {
display: block; display: block;
} }
} }
@ -5137,12 +5153,12 @@ noscript {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
@media screen and (max-width:895px) { @media screen and (max-width: 895px) {
max-width: 580px; max-width: 580px;
} }
} }
@media (min-width:895px) and (max-width:1190px) { @media (min-width: 895px) and (max-width: 1190px) {
&__title-text, &__title-text,
&__type-filters-tabs { &__type-filters-tabs {
max-width: 900px; max-width: 900px;
@ -5163,7 +5179,7 @@ noscript {
overflow: hidden; overflow: hidden;
&.hidden { &.hidden {
max-height: 0px; max-height: 0;
} }
&__btn { &__btn {
@ -5193,17 +5209,17 @@ noscript {
margin: 0 5px 5px 0; margin: 0 5px 5px 0;
&--pro { &--pro {
background-color: blueviolet; background-color: #8a2be2;
color: #fff; color: #fff;
} }
&--investor { &--investor {
background-color: gold; background-color: #ffd700;
color: #000; color: #000;
} }
&--donor { &--donor {
background-color: lightgreen; background-color: #90ee90;
color: #000; color: #000;
} }

48
app/styles/soapbox/components/account-header.scss
Unescape View File

@ -1,21 +1,27 @@
.account__header { .account__header {
&.inactive { &.inactive {
opacity: 0.5; opacity: 0.5;
.account__header__image, .account__header__image,
.account__avatar {filter: grayscale(100%);} .account__avatar {
filter: grayscale(100%);
}
} }
&__info { &__info {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
} }
&__image { &__image {
overflow: hidden; overflow: hidden;
height: 350px; height: 350px;
position: relative; position: relative;
background: darken($ui-base-color, 4%); 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;} &--none {height: 125px;}
img { img {
object-fit: cover; object-fit: cover;
display: block; display: block;
@ -24,14 +30,16 @@
margin: 0; margin: 0;
} }
} }
&__bar { &__bar {
display: block; display: block;
min-height: 74px; min-height: 74px;
width: 100%; width: 100%;
position: relative; position: relative;
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
@media (min-width:895px) {height: 74px;} @media (min-width: 895px) {height: 74px;}
} }
&__avatar { &__avatar {
display: block; display: block;
position: absolute; position: absolute;
@ -49,11 +57,12 @@
height: 200px; height: 200px;
background-size: 200px 200px; background-size: 200px 200px;
} }
@media screen and (max-width:895px) { @media screen and (max-width: 895px) {
top: -45px; top: -45px;
left: 10px; left: 10px;
height: 90px; height: 90px;
width: 90px; width: 90px;
.account__avatar { .account__avatar {
width: 90px; width: 90px;
height: 90px; height: 90px;
@ -62,6 +71,7 @@
} }
} }
&__extra { &__extra {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -72,20 +82,22 @@
max-width: 1200px; max-width: 1200px;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
@media (min-width:895px) and (max-width:1190px) { @media (min-width: 895px) and (max-width: 1190px) {
max-width: 900px; max-width: 900px;
padding-left: 300px; padding-left: 300px;
} }
@media screen and (max-width:895px) { @media screen and (max-width: 895px) {
max-width: 900px; max-width: 900px;
padding: 10px 10px 0 10px; padding: 10px 10px 0;
flex-direction: column-reverse; flex-direction: column-reverse;
min-height: 50px; min-height: 50px;
} }
&__buttons { &__buttons {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: auto; margin-left: auto;
.icon-button { .icon-button {
border: 1px solid lighten($ui-base-color, 12%); border: 1px solid lighten($ui-base-color, 12%);
border-radius: 4px; border-radius: 4px;
@ -94,32 +106,37 @@
} }
.button {margin-right: 10px;} .button {margin-right: 10px;}
} }
&__links { &__links {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
color: $darker-text-color; color: $darker-text-color;
@media screen and (max-width:895px) { @media screen and (max-width: 895px) {
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
a { a {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
padding: 16px 22px; padding: 16px 22px;
text-align: center; text-align: center;
@media screen and (max-width:1190px) {padding: 16px;} @media screen and (max-width: 1190px) {padding: 16px;}
> span { > span {
display: block; display: block;
&:first-of-type { &:first-of-type {
color: $primary-text-color; color: $primary-text-color;
font-size: 20px; font-size: 20px;
font-weight: 800; font-weight: 800;
line-height: 24px; line-height: 24px;
@media screen and (max-width:895px) { @media screen and (max-width: 895px) {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
} }
} }
&:last-of-type { &:last-of-type {
color: $ui-secondary-color; color: $ui-secondary-color;
font-size: 12px; font-size: 12px;
@ -127,19 +144,22 @@
padding-top: 2px; padding-top: 2px;
} }
} }
&:hover, &:hover,
&.active {border-bottom: 2px solid $primary-text-color;} &.active {
&.score {border-bottom:none !important;} border-bottom: 2px solid $primary-text-color;
}
&.score {border-bottom: 0 !important;}
} }
} }
} // end .account__header__extra } // end .account__header__extra
@media screen and (max-width:895px) { @media screen and (max-width: 895px) {
.account-mobile-container { .account-mobile-container {
display: block; display: block;
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
margin-top: 10px; margin-top: 10px;
position: relative; position: relative;
padding: 10px 10px 0px; padding: 10px 10px 0;
&--nonuser {padding: 10px 10px 15px;} &--nonuser {padding: 10px 10px 15px;}
} }
} }

10
app/styles/soapbox/components/buttons.scss
Unescape View File

@ -5,15 +5,15 @@ a.button {
// NOTE - will define the larger standard buttons here and apply class where used. // NOTE - will define the larger standard buttons here and apply class where used.
&-small { &-small {
height: 20px;
padding: 5px 15px;
border: none;
border-radius: 4px;
@include font-size(11); @include font-size(11);
@include line-height(11); @include line-height(11);
@include font-weight(bold); @include font-weight(bold);
height: 20px;
padding: 5px 15px;
border: 0;
border-radius: 4px;
text-transform: uppercase; text-transform: uppercase;
color: white; color: #fff;
background: $gab-small-cta-primary; background: $gab-small-cta-primary;
} }
} }

19
app/styles/soapbox/components/dropdown-menu.scss
Unescape View File

@ -1,42 +1,47 @@
.dropdown-menu { .dropdown-menu {
@include font-size(13);
@include line-height(26);
@include font-weight(normal);
z-index: 9999; z-index: 9999;
position: absolute; position: absolute;
background: $gab-background-container; background: $gab-background-container;
border-radius: 4px; border-radius: 4px;
border: 1px solid $gab-placeholder-accent; border: 1px solid $gab-placeholder-accent;
padding: 4px 0; padding: 4px 0;
@include font-size(13);
@include line-height(26);
@include font-weight(normal);
color: $gab-secondary-text; 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%;} &.left {transform-origin: 100% 50%;}
&.top {transform-origin: 50% 100%;} &.top {transform-origin: 50% 100%;}
&.bottom {transform-origin: 50% 0;} &.bottom {transform-origin: 50% 0;}
&.right {transform-origin: 0 50%;} &.right {transform-origin: 0 50%;}
&__arrow { &__arrow {
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
border: 0 solid transparent; border: 0 solid transparent;
&.left { &.left {
right: -5px; right: -5px;
margin-top: -5px; margin-top: -5px;
border-width: 5px 0 5px 5px; border-width: 5px 0 5px 5px;
border-left-color: $gab-placeholder-accent; border-left-color: $gab-placeholder-accent;
} }
&.top { &.top {
bottom: -5px; bottom: -5px;
margin-left: -5px; margin-left: -5px;
border-width: 5px 5px 0; border-width: 5px 5px 0;
border-top-color: $gab-placeholder-accent; border-top-color: $gab-placeholder-accent;
} }
&.bottom { &.bottom {
top: -5px; top: -5px;
margin-left: -5px; margin-left: -5px;
border-width: 0 5px 5px; border-width: 0 5px 5px;
border-bottom-color: $gab-placeholder-accent; border-bottom-color: $gab-placeholder-accent;
} }
&.right { &.right {
left: -5px; left: -5px;
margin-top: -5px; margin-top: -5px;
@ -44,10 +49,12 @@
border-right-color: $gab-placeholder-accent; border-right-color: $gab-placeholder-accent;
} }
} }
ul { ul {
overflow: hidden; overflow: hidden;
padding: 6px 0; padding: 6px 0;
} }
&__item a { &__item a {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
@ -58,14 +65,16 @@
white-space: nowrap; white-space: nowrap;
text-transform: capitalize; text-transform: capitalize;
color: $gab-secondary-text; color: $gab-secondary-text;
&:focus, &:focus,
&:hover, &:hover,
&:active { &:active {
outline: 0; outline: 0;
color: white; color: #fff;
background: $gab-brand-default !important; background: $gab-brand-default !important;
} }
} }
&__separator { &__separator {
display: block; display: block;
margin: 10px !important; margin: 10px !important;

6
app/styles/soapbox/components/group-card.scss
Unescape View File

@ -1,11 +1,13 @@
.group-column-header { .group-column-header {
@include gab-container-standards;
overflow: hidden; overflow: hidden;
@include gab-container-standards();
.group-column-header__title { .group-column-header__title {
padding: 15px; padding: 15px;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
} }
.group-column-header__cta { .group-column-header__cta {
float: right; float: right;
padding: 15px; padding: 15px;
@ -24,9 +26,9 @@
} }
.group-card { .group-card {
@include gab-container-standards;
display: block; display: block;
flex: 0 0 calc(50% - 20px/2); flex: 0 0 calc(50% - 20px/2);
@include gab-container-standards();
margin-bottom: 20px; margin-bottom: 20px;
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;

4
app/styles/soapbox/components/group-detail.scss
Unescape View File

@ -34,7 +34,7 @@
} }
} }
&:after { &::after {
content: ""; content: "";
clear: both; clear: both;
display: table; display: table;
@ -53,7 +53,7 @@
} }
.group__panel { .group__panel {
padding: 10px 10px 20px 10px; padding: 10px 10px 20px;
h1 { h1 {
font-size: 22px; font-size: 22px;

15
app/styles/soapbox/components/group-form.scss
Unescape View File

@ -1,12 +1,14 @@
.group-form { .group-form {
@include gab-container-standards;
padding: 20px; padding: 20px;
@include gab-container-standards();
&, &,
div { div {
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
width: 100%; width: 100%;
} }
input[type=text], input[type=text],
textarea { textarea {
&.standard { &.standard {
@ -14,32 +16,37 @@
margin: 0 0 10px; margin: 0 0 10px;
} }
} }
textarea { textarea {
float: left; float: left;
height: 88px; height: 88px;
} }
.group-form__file-label { .group-form__file-label {
@include font-size(12);
@include font-weight(light);
cursor: pointer; cursor: pointer;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
height: 20px; height: 20px;
padding: 3px 0 0 33px; padding: 3px 0 0 33px;
@include font-size(12);
@include font-weight(light);
color: $gab-secondary-text; color: $gab-secondary-text;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url('../images/sprite-post-functions.png'); background-image: url('../images/sprite-post-functions.png');
background-size: 100px 1200px; background-size: 100px 1200px;
&:hover { &:hover {
color: $gab-brand-default; color: $gab-brand-default;
background-position: 0 -100px; background-position: 0 -100px;
} }
&.group-form__file-label--selected { &.group-form__file-label--selected {
background-position: 0 -100px; background-position: 0 -100px;
color: $gab-brand-default;; color: $gab-brand-default;
} }
} }
.group-form__file { .group-form__file {
width: 1px; width: 1px;
height: 1px; height: 1px;

6
app/styles/soapbox/components/inputs.scss
Unescape View File

@ -1,16 +1,16 @@
input[type='text'], input[type='text'],
textarea { textarea {
&.standard { &.standard {
@include font-size(16);
@include line-height(18);
@include input-placeholder($gab-placeholder-accent);
box-sizing: border-box; box-sizing: border-box;
padding: 7px 10px; padding: 7px 10px;
border: 1px solid; border: 1px solid;
border-radius: 4px; border-radius: 4px;
@include font-size(16);
@include line-height(18);
color: $gab-brand-default; color: $gab-brand-default;
border-color: $gab-placeholder-accent; border-color: $gab-placeholder-accent;
background: $gab-background-container; background: $gab-background-container;
@include input-placeholder($gab-placeholder-accent);
&:focus {outline: none;} &:focus {outline: none;}
} }
} }

24
app/styles/soapbox/components/modal.scss
Unescape View File

@ -318,11 +318,13 @@
border: 1px solid $gab-placeholder-accent; border: 1px solid $gab-placeholder-accent;
color: $gab-secondary-text; color: $gab-secondary-text;
background: $gab-background-container; background: $gab-background-container;
.status__display-name { .status__display-name {
display: block; display: block;
max-width: 100%; max-width: 100%;
padding-right: 25px; padding-right: 25px;
} }
.status__avatar { .status__avatar {
height: 28px; height: 28px;
left: 10px; left: 10px;
@ -330,6 +332,7 @@
top: 10px; top: 10px;
width: 48px; width: 48px;
} }
.status__content__spoiler-link { .status__content__spoiler-link {
color: lighten($secondary-text-color, 8%); color: lighten($secondary-text-color, 8%);
} }
@ -500,13 +503,16 @@
} }
.actions-modal { .actions-modal {
width: calc(100% - 72px);
margin: 35px;
.status { .status {
overflow-y: auto; overflow-y: auto;
max-height: 300px; max-height: 300px;
} }
width: calc(100% - 72px);
margin: 35px;
.actions-modal__item-label {font-weight: 500;} .actions-modal__item-label {font-weight: 500;}
ul { ul {
overflow-y: auto; overflow-y: auto;
flex-shrink: 0; flex-shrink: 0;
@ -516,9 +522,11 @@
&.with-status {max-height: calc(80vh - 75px);} &.with-status {max-height: calc(80vh - 75px);}
li:empty {margin: 0;} li:empty {margin: 0;}
li:not(:empty) { li:not(:empty) {
&:first-of-type{margin: 10px 0 0;} &:first-of-type {margin: 10px 0 0;}
&:last-of-type{margin: 0 0 10px;} &:last-of-type {margin: 0 0 10px;}
a { a {
display: flex; display: flex;
align-items: center; align-items: center;
@ -526,8 +534,12 @@
@inclide font-size(14); @inclide font-size(14);
color: $gab-secondary-text; color: $gab-secondary-text;
text-decoration: none; text-decoration: none;
&, &,
button {transition: none;} button {
transition: none;
}
&.active, &.active,
&:hover, &:hover,
&:active, &:active,
@ -536,7 +548,7 @@
button { button {
background: $gab-background-base; background: $gab-background-base;
color: $gab-text-highlight; 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;} button:first-child {margin-right: 10px;}

4
app/styles/soapbox/components/sidebar-menu.scss
Unescape View File

@ -46,7 +46,7 @@
&--borderless { &--borderless {
margin: 0; margin: 0;
border-top: none; border-top: 0;
} }
} }
@ -63,7 +63,7 @@
} }
.sidebar-menu__wrapper { .sidebar-menu__wrapper {
background-color: rgba(0,0,0,0.3); background-color: rgba(0, 0, 0, 0.3);
} }
} }

5
app/styles/soapbox/components/user-panel.scss
Unescape View File

@ -1,9 +1,10 @@
.user-panel { .user-panel {
@include gab-container-standards;
display: flex; display: flex;
width: 265px; width: 265px;
flex-direction: column; flex-direction: column;
overflow-y: hidden; overflow-y: hidden;
@include gab-container-standards();
&__header { &__header {
display: block; display: block;
height: 112px; height: 112px;
@ -36,7 +37,7 @@
&__meta { &__meta {
display: block; display: block;
padding: 6px 20px 17px 20px; padding: 6px 20px 17px;
} }
&__account { &__account {

6
app/styles/soapbox/containers.scss
Unescape View File

@ -121,7 +121,7 @@
grid-auto-rows: max-content; grid-auto-rows: max-content;
.column-0 { .column-0 {
grid-column: 1/3; grid-column: 1 / 3;
grid-row: 1; grid-row: 1;
} }
@ -136,7 +136,7 @@
} }
.column-3 { .column-3 {
grid-column: 1/3; grid-column: 1 / 3;
grid-row: 3; grid-row: 3;
} }
@ -360,7 +360,7 @@
.nav-button { .nav-button {
background: $gab-brand-default; background: $gab-brand-default;
color: white; color: #fff;
margin: 8px; margin: 8px;
margin-left: 0; margin-left: 0;
border-radius: 4px; border-radius: 4px;

3
app/styles/soapbox/demetricator.scss
Unescape View File

@ -7,8 +7,9 @@ body.demetricator {
.sidebar-menu-profile__stats { .sidebar-menu-profile__stats {
display: none; display: none;
} }
.account__header__bar { .account__header__bar {
min-height: 50px; min-height: 50px;
@media (min-width:895px) {height: 50px;} @media (min-width: 895px) {height: 50px;}
} }
} }

28
app/styles/soapbox/donations.scss
Unescape View File

@ -1,9 +1,9 @@
.btngroup { .btngroup {
display: flex; display: flex;
margin: 10px 0 15px 0; margin: 10px 0 15px;
&__btn { &__btn {
background-color: white; background-color: #fff;
padding: 10px 24px; padding: 10px 24px;
font-size: 14px; font-size: 14px;
border-radius: 0; border-radius: 0;
@ -13,6 +13,7 @@
&:first-of-type { &:first-of-type {
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
} }
&:last-of-type { &:last-of-type {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
@ -36,14 +37,17 @@
font-size: 1.3rem; font-size: 1.3rem;
margin-bottom: 4px; margin-bottom: 4px;
} }
&__amount { &__amount {
font-size: 2rem; font-size: 2rem;
line-height: normal; line-height: normal;
margin: 4px 0 12px 0; margin: 4px 0 12px;
} }
&__billing { &__billing {
font-size: 14px; font-size: 14px;
} }
&__button { &__button {
margin-top: 20px; margin-top: 20px;
} }
@ -60,15 +64,23 @@
height: 13px; height: 13px;
width: 13px; width: 13px;
} }
&--trialing, &--active {
&--trialing,
&--active {
&::before { &::before {
background-color: #00ff00; background-color: #00ff00;
} }
} }
&--cancelling::before { &--cancelling::before {
background-color: yellow; background-color: #ffff00;
} }
&--incomplete, &--incomplete_expired, &--past_due, &--canceled, &--unpaid {
&--incomplete,
&--incomplete_expired,
&--past_due,
&--canceled,
&--unpaid {
&::before { &::before {
background-color: #ff0000; background-color: #ff0000;
} }
@ -78,13 +90,16 @@
.subs { .subs {
.sub { .sub {
border-radius: 0; border-radius: 0;
& + .sub { & + .sub {
border-top: 0; border-top: 0;
} }
&:first-child { &:first-child {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
} }
&:last-child { &:last-child {
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
@ -105,6 +120,7 @@
margin-right: 6px; margin-right: 6px;
transform: translateY(-4px); transform: translateY(-4px);
} }
&__price { &__price {
font-size: 60px; font-size: 60px;
background: transparent; background: transparent;

3
app/styles/soapbox/dyslexic.scss
Unescape View File

@ -5,7 +5,8 @@
body.dyslexic { body.dyslexic {
@media screen and (max-width: $nav-breakpoint-2) { @media screen and (max-width: $nav-breakpoint-2) {
.column-header > button, .column-header > .btn { .column-header > button,
.column-header > .btn {
font-size: 11px; font-size: 11px;
} }
} }

8
app/styles/soapbox/emoji_picker.scss
Unescape View File

@ -1,14 +1,14 @@
.emoji-mart { .emoji-mart {
font-size: 13px;
display: inline-block;
color: $inverted-text-color;
&, &,
* { * {
box-sizing: border-box; box-sizing: border-box;
line-height: 1.15; line-height: 1.15;
} }
font-size: 13px;
display: inline-block;
color: $inverted-text-color;
.emoji-mart-emoji { .emoji-mart-emoji {
padding: 6px; padding: 6px;
} }

10
app/styles/soapbox/fonts.scss
Unescape View File

@ -116,8 +116,8 @@
// TYPEOGRAPHY MIXINS // TYPEOGRAPHY MIXINS
// declare the font family using these shortcuts // declare the font family using these shortcuts
@mixin font-roboto() {font-family: 'Roboto', Arial, sans-serif !important;} @mixin font-roboto {font-family: 'Roboto', Arial, sans-serif !important;}
@mixin font-montserrat() {font-family: 'Montserrat', Arial, sans-serif !important;} @mixin font-montserrat {font-family: 'Montserrat', Arial, sans-serif !important;}
// Declare font weights as a numerical value in rendered output // Declare font weights as a numerical value in rendered output
// Prevents certain browsers which do not play nice with "light, medium" textual declarations // Prevents certain browsers which do not play nice with "light, medium" textual declarations
@ -158,11 +158,13 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
.fa-site-icon:before {
.fa-site-icon::before {
font-family: 'FontAwesome'; font-family: 'FontAwesome';
content: '\f0c0'; content: '\f0c0';
} }
.fa-fediverse:before {
.fa-fediverse::before {
font-family: 'spinster' !important; font-family: 'spinster' !important;
content: "\e901"; content: "\e901";
} }

8
app/styles/soapbox/footer.scss
Unescape View File

@ -9,7 +9,7 @@
background-color: lighten($ui-base-color, 5%); background-color: lighten($ui-base-color, 5%);
border-top: darken($ui-base-color, 10%); border-top: darken($ui-base-color, 10%);
@media screen and (max-width:1024px) { @media screen and (max-width: 1024px) {
padding: 40px 20px; padding: 40px 20px;
} }
@ -20,11 +20,11 @@
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
@media screen and (max-width:1024px) { @media screen and (max-width: 1024px) {
width: 100%; width: 100%;
} }
@media screen and (max-width:767px) { @media screen and (max-width: 767px) {
flex-direction: column-reverse; flex-direction: column-reverse;
justify-content: center; justify-content: center;
} }
@ -83,7 +83,7 @@
} }
} }
@media screen and (max-width:767px) { @media screen and (max-width: 767px) {
.copyright { .copyright {
margin: 0 auto auto; margin: 0 auto auto;
text-align: center; text-align: center;

2
app/styles/soapbox/forms.scss
Unescape View File

@ -564,7 +564,7 @@ code {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
width: 100%; width: 100%;
border: none; border: 0;
padding: 10px; padding: 10px;
font-family: $font-monospace, monospace; font-family: $font-monospace, monospace;
background: $ui-base-color; background: $ui-base-color;

1
app/styles/soapbox/polls.scss
Unescape View File

@ -28,6 +28,7 @@
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
color: #fff; color: #fff;
input[type=radio], input[type=radio],
input[type=checkbox] { input[type=checkbox] {
display: none; display: none;

3
app/styles/soapbox/pro.scss
Unescape View File

@ -8,8 +8,9 @@ body.theme-purple-contrast {
body.theme-halloween { body.theme-halloween {
.page--customization { .page--customization {
background-color: #904700; background-color: #904700;
&::before { &::before {
background: radial-gradient(circle, transparent 0%, transparent 60%, black 100%); background: radial-gradient(circle, transparent 0%, transparent 60%, #000 100%);
content: ""; content: "";
display: block; display: block;
position: fixed; position: fixed;

11
app/styles/soapbox/scrollbars.scss
Unescape View File

@ -3,32 +3,39 @@
// For now linking default gab colors to replace the base UI colors and formulas // 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;} html {scrollbar-color: lighten($gab-background-container, 4%) $gab-background-container;}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border: none; border: 0;
background: rgba($gab-placeholder-accent, .5); background: rgba($gab-placeholder-accent, .5);
@if $light-theme {background: rgba($gab-background-container-light, .3);} @if $light-theme {background: rgba($gab-background-container-light, .3);}
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba($gab-placeholder-accent, .75); background: rgba($gab-placeholder-accent, .75);
@if $light-theme {background: rgba($gab-background-container-light, .4);} @if $light-theme {background: rgba($gab-background-container-light, .4);}
} }
::-webkit-scrollbar-thumb:active { ::-webkit-scrollbar-thumb:active {
background: $gab-placeholder-accent; background: $gab-placeholder-accent;
@if $light-theme {background: rgba($gab-background-container-light, .5);} @if $light-theme {background: rgba($gab-background-container-light, .5);}
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border: none; border: 0;
background: rgba($gab-background-container, .5); background: rgba($gab-background-container, .5);
@if $light-theme {background: rgba($gab-background-base, .3);} @if $light-theme {background: rgba($gab-background-base, .3);}
} }
::-webkit-scrollbar-track:hover { ::-webkit-scrollbar-track:hover {
background: rgba($gab-background-container, .75); background: rgba($gab-background-container, .75);
@if $light-theme {background: rgba($gab-background-base, .4);} @if $light-theme {background: rgba($gab-background-base, .4);}
} }
::-webkit-scrollbar-track:active { ::-webkit-scrollbar-track:active {
background: $gab-background-container; background: $gab-background-container;
@if $light-theme {background: rgba($gab-background-base, .5);} @if $light-theme {background: rgba($gab-background-base, .5);}

Write Preview
Loading…
Cancel
Save