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 {
input {
&::placeholder {
opacity: 1.0;
opacity: 1;
}
}
}
}
}
.compose-form__warning {
color: $inverted-text-color;
}

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

@ -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;
}

9
app/styles/neenster.scss
Unescape View File

@ -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;
}
}

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

@ -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);
}

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

@ -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 {

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

@ -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%);
}
}
@ -709,7 +734,7 @@ $small-breakpoint: 960px;
}
@media (min-width: 767px) and (max-width: 1024px) {
padding: 40px 20px 20px 20px;
padding: 40px 20px 20px;
&--left {
margin-right: 40px;
@ -933,7 +958,7 @@ $small-breakpoint: 960px;
margin-right: 15px;
h1 {
@include font-montserrat();
@include font-montserrat;
color: $gab-brand-default;
}
}

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

@ -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 {

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

@ -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%;
@ -23,7 +23,7 @@ body {
font-feature-settings: "kern";
-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 {

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

@ -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;
}
@ -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;
@ -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;
@ -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;
@ -4082,7 +4098,7 @@ a.status-card.compact:hover {
}
.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;
@ -4734,7 +4750,7 @@ noscript {
&__avatar {
height: 46px;
width: 46px;
background-color: red;
background-color: #ff0000;
left: -58px;
position: absolute;
}
@ -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,7 +4895,7 @@ noscript {
max-height: 160px !important;
}
.compose-form__autosuggest-wrapper:before {
.compose-form__autosuggest-wrapper::before {
content: none !important;
}
}
@ -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;
}

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

@ -1,14 +1,19 @@
.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;
@ -16,6 +21,7 @@
background: darken($ui-base-color, 4%);
@media screen and (max-width: 895px) {height: 225px;}
&--none {height: 125px;}
img {
object-fit: cover;
display: block;
@ -24,6 +30,7 @@
margin: 0;
}
}
&__bar {
display: block;
min-height: 74px;
@ -32,6 +39,7 @@
background: lighten($ui-base-color, 4%);
@media (min-width: 895px) {height: 74px;}
}
&__avatar {
display: block;
position: absolute;
@ -54,6 +62,7 @@
left: 10px;
height: 90px;
width: 90px;
.account__avatar {
width: 90px;
height: 90px;
@ -62,6 +71,7 @@
}
}
&__extra {
display: flex;
flex-direction: row;
@ -78,14 +88,16 @@
}
@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,6 +106,7 @@
}
.button {margin-right: 10px;}
}
&__links {
display: flex;
font-size: 14px;
@ -102,14 +115,17 @@
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;}
> span {
display: block;
&:first-of-type {
color: $primary-text-color;
font-size: 20px;
@ -120,6 +136,7 @@
line-height: 20px;
}
}
&:last-of-type {
color: $ui-secondary-color;
font-size: 12px;
@ -127,9 +144,12 @@
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
@ -139,7 +159,7 @@
background: lighten($ui-base-color, 4%);
margin-top: 10px;
position: relative;
padding: 10px 10px 0px;
padding: 10px 10px 0;
&--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.
&-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;
}
}

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

@ -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);
&.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;

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

@ -1,11 +1,13 @@
.group-column-header {
@include gab-container-standards;
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;
@ -24,9 +26,9 @@
}
.group-card {
@include gab-container-standards;
display: block;
flex: 0 0 calc(50% - 20px/2);
@include gab-container-standards();
margin-bottom: 20px;
text-decoration: none;
overflow: hidden;

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

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

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

@ -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);
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;

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

@ -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;}
}
}

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

@ -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;}
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,

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

@ -46,7 +46,7 @@
&--borderless {
margin: 0;
border-top: none;
border-top: 0;
}
}

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

@ -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 {

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

@ -360,7 +360,7 @@
.nav-button {
background: $gab-brand-default;
color: white;
color: #fff;
margin: 8px;
margin-left: 0;
border-radius: 4px;

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

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

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

@ -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;

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

@ -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;
}
}

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

@ -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;
}

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

@ -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";
}

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

@ -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;

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

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

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

@ -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;

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
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);}

Write Preview
Loading…
Cancel
Save