moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dark theme improvements

This commit is contained in:
Alex Gleason 2020-05-31 21:05:00 -05:00
parent 97ba4b005d
commit d12bc38112
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
28 changed files with 569 additions and 602 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/containers/soapbox.js
View File

@ -76,7 +76,7 @@ class SoapboxMount extends React.PureComponent {
}; };
componentDidMount() { componentDidMount() {
this.props.dispatch(generateTheme('#0482d8', 'light')); this.props.dispatch(generateTheme('#bb0000', 'light'));
} }
render() { render() {

4
app/soapbox/reducers/theme.js
View File

@ -11,10 +11,14 @@ const modes = ImmutableMap({
light: ImmutableMap({ light: ImmutableMap({
'primary-text-color': '#000000', 'primary-text-color': '#000000',
'primary-text-color-faint': 'rgba(0, 0, 0, 0.7)', 'primary-text-color-faint': 'rgba(0, 0, 0, 0.7)',
'background-color': '#f2f2f2',
'foreground-color': '#ffffff',
}), }),
dark: ImmutableMap({ dark: ImmutableMap({
'primary-text-color': '#ffffff', 'primary-text-color': '#ffffff',
'primary-text-color-faint': 'rgba(255, 255, 255, 0.7)', 'primary-text-color-faint': 'rgba(255, 255, 255, 0.7)',
'background-color': '#333333',
'foreground-color': '#222222',
}), }),
}); });

803
app/styles/soapbox-light/diff.scss
View File

@ -1,419 +1,384 @@
// Notes! // // Notes!
// Sass color functions, "darken" and "lighten" are automatically replaced. // // Sass color functions, "darken" and "lighten" are automatically replaced.
//
body { // // Change the colors of button texts
color: $gab-default-text-light; // .button {
background-color: $gab-background; // color: #ffffff;
} //
// &.button-alternative-2 {
// Change the colors of button texts // color: #000;
.button { // }
color: #ffffff; // }
//
&.button-alternative-2 { // .drawer__inner {
color: #000; // background: var(--brand-color-med);
} // }
} //
// .drawer__inner__soapbox {
// Change default background colors of columns // background: var(--brand-color-med) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(#ffffff)}"/></svg>') no-repeat bottom / 100% auto;
.column { // }
article { //
background: #ffffff; // // Change the colors used in compose-form
} // .compose-form {
} // .compose-form__modifiers {
// .compose-form__upload-description input {
.drawer__inner { // color: lighten(#ffffff, 7%);
background: var(--brand-color-med); // &::placeholder {color: lighten(#ffffff, 7%);}
} // }
// }
.drawer__inner__soapbox { //
background: var(--brand-color-med) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(#ffffff)}"/></svg>') no-repeat bottom / 100% auto; // .autosuggest-textarea__suggestions {
} // background: darken($ui-base-color, 6%);
// }
// Change the colors used in compose-form //
.compose-form { // .autosuggest-textarea__suggestions__item {
.compose-form__modifiers { // &:hover,
.compose-form__upload-description input { // &:focus,
color: lighten(#ffffff, 7%); // &:active,
&::placeholder {color: lighten(#ffffff, 7%);} // &.selected {
} // background: var(--brand-color-faint);
} // }
// }
.autosuggest-textarea__suggestions { // }
background: darken($ui-base-color, 6%); //
} // .emoji-mart-bar {
// border-color: var(--brand-color-faint);
.autosuggest-textarea__suggestions__item { //
&:hover, // &:first-child {
&:focus, // background: darken($ui-base-color, 6%);
&:active, // }
&.selected { // }
background: var(--brand-color-faint); //
} // .emoji-mart-search input {
} // background: rgba($ui-base-color, 0.3);
} // border-color: var(--brand-color-med);
// }
.emoji-mart-bar { //
border-color: var(--brand-color-faint); // // Change the background colors of statuses
// .focusable:focus {
&:first-child { // background: var(--brand-color-faint);
background: darken($ui-base-color, 6%); // }
} //
} // .status.status-direct {
// background: var(--brand-color-faint);
.emoji-mart-search input { // }
background: rgba($ui-base-color, 0.3); //
border-color: var(--brand-color-med); // .focusable:focus .status.status-direct {
} // background: var(--brand-color-med);
// }
// Change the background colors of statuses //
.focusable:focus { // // Change the background colors of status__content__spoiler-link
background: var(--brand-color-faint); // .reply-indicator__content .status__content__spoiler-link,
} // .status__content .status__content__spoiler-link {
// background: $ui-base-lighter-color;
.status.status-direct { //
background: var(--brand-color-faint); // &:hover {
} // background: lighten($ui-base-lighter-color, 6%);
// }
.focusable:focus .status.status-direct { // }
background: var(--brand-color-med); //
} // // Change the background colors of media and video spoilers
// .media-spoiler,
// Change the background colors of status__content__spoiler-link // .video-player__spoiler {
.reply-indicator__content .status__content__spoiler-link, // background: var(--brand-color-med);
.status__content .status__content__spoiler-link { // }
background: $ui-base-lighter-color; //
// // Change the colors used in the dropdown menu
&:hover { // .dropdown-menu {
background: lighten($ui-base-lighter-color, 6%); // &__item {
} // a {
} // color: var(--primary-color-faint);
// }
// Change the background colors of media and video spoilers // }
.media-spoiler, // }
.video-player__spoiler { //
background: var(--brand-color-med); // // Change the text colors on inverted background
} // .privacy-dropdown__option.active .privacy-dropdown__option__content,
// .privacy-dropdown__option.active .privacy-dropdown__option__content strong,
// Change the colors used in the dropdown menu // .privacy-dropdown__option:hover .privacy-dropdown__option__content,
.dropdown-menu { // .privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
&__item { // .actions-modal ul li:not(:empty) a.active,
a { // .actions-modal ul li:not(:empty) a.active button,
color: $darker-text-color; // .actions-modal ul li:not(:empty) a:active,
} // .actions-modal ul li:not(:empty) a:active button,
} // .actions-modal ul li:not(:empty) a:focus,
} // .actions-modal ul li:not(:empty) a:focus button,
// .actions-modal ul li:not(:empty) a:hover,
// Change the text colors on inverted background // .actions-modal ul li:not(:empty) a:hover button,
.privacy-dropdown__option.active .privacy-dropdown__option__content, // .simple_form .block-button,
.privacy-dropdown__option.active .privacy-dropdown__option__content strong, // .simple_form .button,
.privacy-dropdown__option:hover .privacy-dropdown__option__content, // .simple_form button {
.privacy-dropdown__option:hover .privacy-dropdown__option__content strong, // color: #ffffff;
.actions-modal ul li:not(:empty) a.active, // }
.actions-modal ul li:not(:empty) a.active button, //
.actions-modal ul li:not(:empty) a:active, // .dropdown-menu__separator {
.actions-modal ul li:not(:empty) a:active button, // border-bottom-color: var(--brand-color-med);
.actions-modal ul li:not(:empty) a:focus, // }
.actions-modal ul li:not(:empty) a:focus button, //
.actions-modal ul li:not(:empty) a:hover, // // Change the background colors of modals
.actions-modal ul li:not(:empty) a:hover button, // .actions-modal,
.simple_form .block-button, // .boost-modal,
.simple_form .button, // .confirmation-modal,
.simple_form button { // .mute-modal,
color: #ffffff; // .report-modal,
} // .error-modal,
// .onboarding-modal {
.dropdown-menu__separator { // background: var(--brand-color-med);
border-bottom-color: var(--brand-color-med); // }
} //
// .embed-modal {
// Change the background colors of modals // background: #333;
.actions-modal, // color: #fff;
.boost-modal, // }
.confirmation-modal, //
.mute-modal, // .boost-modal__action-bar,
.report-modal, // .confirmation-modal__action-bar,
.error-modal, // .mute-modal__action-bar,
.onboarding-modal { // .onboarding-modal__paginator,
background: var(--brand-color-med); // .error-modal__footer {
} // background: darken($ui-base-color, 6%);
//
.embed-modal { // .onboarding-modal__nav,
background: #333; // .error-modal__nav {
color: #fff; // &:hover,
} // &:focus,
// &:active {
.boost-modal__action-bar, // background-color: darken($ui-base-color, 12%);
.confirmation-modal__action-bar, // }
.mute-modal__action-bar, // }
.onboarding-modal__paginator, // }
.error-modal__footer { //
background: darken($ui-base-color, 6%); // .display-case__case {
// background: #ffffff;
.onboarding-modal__nav, // }
.error-modal__nav { //
&:hover, // .embed-modal .embed-modal__container .embed-modal__html {
&:focus, // background: #ffffff;
&:active { //
background-color: darken($ui-base-color, 12%); // &:focus {
} // background: darken($ui-base-color, 6%);
} // }
} // }
//
.display-case__case { // .react-toggle-track {
background: #ffffff; // background: $ui-secondary-color;
} // }
//
.embed-modal .embed-modal__container .embed-modal__html { // .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background: #ffffff; // background: darken($ui-secondary-color, 10%);
// }
&:focus { //
background: darken($ui-base-color, 6%); // .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
} // background: lighten($gab-brand-default, 10%);
} // }
//
.react-toggle-track { // // Change the default color used for the text in an empty column or on the error column
background: $ui-secondary-color; // .empty-column-indicator,
} // .error-column {
// color: var(--primary-text-color);
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { // background: #ffffff;
background: darken($ui-secondary-color, 10%); // }
} //
// // Change the default colors used on some parts of the profile pages
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { // .activity-stream-tabs {
background: lighten($gab-brand-default, 10%); // background: $account-background-color;
} // border-bottom-color: var(--brand-color-med);
// }
// Change the default color used for the text in an empty column or on the error column //
.empty-column-indicator, // .activity-stream {
.error-column { // .entry {
color: var(--primary-text-color); // background: $account-background-color;
background: #ffffff; //
} // .detailed-status.light,
// .more.light,
// Change the default colors used on some parts of the profile pages // .status.light {
.activity-stream-tabs { // border-bottom-color: var(--brand-color-med);
background: $account-background-color; // }
border-bottom-color: var(--brand-color-med); // }
} //
// .status.light {
.activity-stream { // .status__content {
.entry { // color: var(--primary-text-color);
background: $account-background-color; // }
//
.detailed-status.light, // .display-name {
.more.light, // strong {
.status.light { // color: var(--primary-text-color);
border-bottom-color: var(--brand-color-med); // }
} // }
} // }
// }
.status.light { //
.status__content { // .accounts-grid {
color: var(--primary-text-color); // .account-grid-card {
} //
// .name {
.display-name { // a {
strong { // color: var(--primary-text-color);
color: var(--primary-text-color); // }
} // }
} //
} // .username {
} // color: var(--primary-color-faint);
// }
.accounts-grid { //
.account-grid-card { // .account__header__content {
// color: var(--primary-text-color);
.name { // }
a { // }
color: var(--primary-text-color); // }
} //
} // .simple_form,
// .table-form {
.username { // .warning {
color: $darker-text-color; // box-shadow: none;
} // background: rgba($error-red, 0.5);
// text-shadow: none;
.account__header__content { // }
color: var(--primary-text-color); // }
} //
} // .simple_form input[type="text"],
} // .simple_form input[type="number"],
// .simple_form input[type="email"],
.simple_form, // .simple_form input[type="password"],
.table-form { // .simple_form textarea {
.warning { // border-color: var(--brand-color);
box-shadow: none; //
background: rgba($error-red, 0.5); // &:hover {
text-shadow: none; // border-color: var(--brand-color);
} // }
} // }
//
.simple_form input[type="text"], // .simple_form select,
.simple_form input[type="number"], // .admin select.dropdown {
.simple_form input[type="email"], // border-color: var(--primary-color-faint);
.simple_form input[type="password"], // }
.simple_form textarea { //
border-color: var(--brand-color); // .button.logo-button {
// color: #ffffff;
&:hover { //
border-color: var(--brand-color); // svg {
} // fill: #ffffff;
} // }
// }
.simple_form select, //
.admin select.dropdown { // .public-layout {
border-color: $gab-secondary-text; // .header,
} // .public-account-header,
// .public-account-bio {
.button.logo-button { // box-shadow: none;
color: #ffffff; // }
//
svg { // .public-account-header {
fill: #ffffff; // &__image {
} // background: var(--brand-color-med);
} //
// &::after {
.public-layout { // box-shadow: none;
.header, // }
.public-account-header, // }
.public-account-bio { //
box-shadow: none; // &__tabs {
} // &__name {
// h1,
.public-account-header { // h1 small {
&__image { // color: #ffffff;
background: var(--brand-color-med); // }
// }
&::after { // }
box-shadow: none; // }
} // }
} //
// .account__section-headline a.active::after {
&__tabs { // border-color: transparent transparent #ffffff;
&__name { // }
h1, //
h1 small { // .hero-widget,
color: #ffffff; // .box-widget,
} // .contact-widget,
} // .landing-page__information.contact-widget,
} // .moved-account-widget,
} // .memoriam-widget,
} // .activity-stream,
// .nothing-here,
.account__section-headline a.active::after { // .directory__tag > a,
border-color: transparent transparent #ffffff; // .directory__tag > div {
} // box-shadow: none;
// }
.hero-widget, //
.box-widget, // .btngroup__btn--active {
.contact-widget, // color: #fff;
.landing-page__information.contact-widget, // }
.moved-account-widget, //
.memoriam-widget, // .wtf-panel {
.activity-stream, // @include light-theme-shadow;
.nothing-here, // background: var(--foreground-color);
.directory__tag > a, // }
.directory__tag > div { //
box-shadow: none; // .profile-info-panel .profile-info-panel-content span,
} // .profile-info-panel .profile-info-panel-content__name h1,
// .profile-info-panel .profile-info-panel-content__name h1 span:first-of-type {
.btngroup__btn--active { // color: $gab-default-text-light;
color: #fff; // }
} //
// .group-card .group-card__header img {
.promo-panel-item { // background: var(--foreground-color);
@include light-theme-shadow; // }
background: $gab-background-container-light; //
} // .group .group__header {
// background: var(--foreground-color);
.column-header { // }
background: $gab-background-container-light; //
color: $gab-default-text-light; // .group .group__panel .group__panel__label {
} // background: var(--foreground-color);
// }
.column-header__button { //
color: $gab-default-text-light; // .group .group__feed {
background: $gab-background-container-light; // background: var(--foreground-color);
} // }
//
.column-header__collapsible-inner { // input[type='text'],
background: #e6e6e6; // textarea {
} // &.standard {
// @include input-placeholder($gab-secondary-text);
.wtf-panel { // color: $gab-placeholder-accent;
@include light-theme-shadow; // border-color: var(--primary-color-faint);
background: $gab-background-container-light; // background: $gab-background-base-light;
} // }
// }
.profile-info-panel .profile-info-panel-content span, //
.profile-info-panel .profile-info-panel-content__name h1, //
.profile-info-panel .profile-info-panel-content__name h1 span:first-of-type { // .boost-modal,
color: $gab-default-text-light; // .confirmation-modal,
} // .report-modal,
// .actions-modal,
.group-card .group-card__header img { // .mute-modal {
background: $gab-background-container-light; // color: $gab-default-text-light;
} // }
//
.group .group__header { // .report-modal__statuses {
background: $gab-background-container-light; // .status__content,
} // .status__content p {
// color: $gab-default-text-light;
.group .group__panel .group__panel__label { // }
background: $gab-background-container-light; // }
} //
// .user-panel__header {
.group .group__feed { // background: darken($gab-background-container-light, 4%);
background: $gab-background-container-light; // }
} //
// .user-panel__profile .account__avatar {
input[type='text'], // border: 6px solid $gab-background-base-light;
textarea { // }
&.standard { //
@include input-placeholder($gab-secondary-text); // .user-panel .user-panel-stats-item__value {
color: $gab-placeholder-accent; // color: $gab-default-text-light;
border-color: $gab-secondary-text; // }
background: $gab-background-base-light; //
} // .poll__text {
} // color: $gab-default-text-light;
// }
//
.boost-modal, // .fa-site-icon::before {
.confirmation-modal, // filter: grayscale(100%) invert(0);
.report-modal, // }
.actions-modal,
.mute-modal {
color: $gab-default-text-light;
}
.report-modal__statuses {
.status__content,
.status__content p {
color: $gab-default-text-light;
}
}
.user-panel__header {
background: darken($gab-background-container-light, 4%);
}
.user-panel__profile .account__avatar {
border: 6px solid $gab-background-base-light;
}
.user-panel__account__name {
color: $gab-default-text-light;
}
.user-panel .user-panel-stats-item__value {
color: $gab-default-text-light;
}
.poll__text {
color: $gab-default-text-light;
}
.fa-site-icon::before {
filter: grayscale(100%) invert(0);
}

17
app/styles/soapbox/_mixins.scss
View File

@ -1,19 +1,15 @@
// NEW GAB SPECIFIC MIXINS
// THEME MIXINS // THEME MIXINS
// standard container drop shadow // standard container drop shadow
@mixin light-theme-shadow {box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);} @mixin light-theme-shadow {
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
}
// common properties for all standard containers // common properties for all standard containers
@mixin gab-container-standards { @mixin gab-container-standards {
@include light-theme-shadow;
border-radius: 10px; border-radius: 10px;
background: $gab-background-container; background: var(--foreground-color);
$light-theme: false !default;
@if $light-theme {
@include light-theme-shadow;
background: $gab-background-container-light;
}
} }
// SHORTCUTS // SHORTCUTS
@ -24,7 +20,6 @@
&:-moz-placeholder {color: $color;} &:-moz-placeholder {color: $color;}
} }
// OLDER MIXINS
@mixin avatar-radius { @mixin avatar-radius {
border-radius: 50%; border-radius: 50%;
background: transparent no-repeat; background: transparent no-repeat;
@ -77,7 +72,7 @@
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;
color: $gab-secondary-text; color: var(--primary-color-faint);
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 {

40
app/styles/soapbox/about.scss
View File

@ -21,7 +21,7 @@ $small-breakpoint: 960px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 30px;
color: $darker-text-color; color: var(--primary-color-faint);
max-width: 600px; max-width: 600px;
padding: 15px 30px; padding: 15px 30px;
@ -47,7 +47,7 @@ $small-breakpoint: 960px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 30px;
color: $darker-text-color; color: var(--primary-color-faint);
a { a {
color: var(--highlight-text-color); color: var(--highlight-text-color);
@ -72,7 +72,7 @@ $small-breakpoint: 960px;
margin-top: 2em; margin-top: 2em;
margin-bottom: 1.25em; margin-bottom: 1.25em;
font-weight: 500; font-weight: 500;
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
hr + { hr + {
@ -200,7 +200,7 @@ $small-breakpoint: 960px;
span { span {
&:last-child { &:last-child {
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
} }
@ -232,7 +232,7 @@ $small-breakpoint: 960px;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
font-weight: 500; font-weight: 500;
color: $darker-text-color; color: var(--primary-color-faint);
padding-bottom: 5px; padding-bottom: 5px;
margin-bottom: 15px; margin-bottom: 15px;
border-bottom: 1px solid var(--brand-color-faint); border-bottom: 1px solid var(--brand-color-faint);
@ -286,7 +286,7 @@ $small-breakpoint: 960px;
.username { .username {
display: block; display: block;
color: $darker-text-color; color: var(--primary-color-faint);
} }
} }
} }
@ -301,7 +301,7 @@ $small-breakpoint: 960px;
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 30px;
margin-bottom: 12px; margin-bottom: 12px;
color: $darker-text-color; color: var(--primary-color-faint);
a { a {
color: var(--highlight-text-color); color: var(--highlight-text-color);
@ -327,7 +327,7 @@ $small-breakpoint: 960px;
line-height: 30px; line-height: 30px;
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
color: $secondary-text-color; color: var(--primary-text-color-faint);
small { small {
font-family: $font-sans-serif, sans-serif; font-family: $font-sans-serif, sans-serif;
@ -344,7 +344,7 @@ $small-breakpoint: 960px;
line-height: 26px; line-height: 26px;
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
h3 { h3 {
@ -353,7 +353,7 @@ $small-breakpoint: 960px;
line-height: 24px; line-height: 24px;
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
h4 { h4 {
@ -362,7 +362,7 @@ $small-breakpoint: 960px;
line-height: 24px; line-height: 24px;
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
h5 { h5 {
@ -371,7 +371,7 @@ $small-breakpoint: 960px;
line-height: 24px; line-height: 24px;
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
h6 { h6 {
@ -380,7 +380,7 @@ $small-breakpoint: 960px;
line-height: 24px; line-height: 24px;
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
ul, ul,
@ -581,7 +581,7 @@ $small-breakpoint: 960px;
} }
p a { p a {
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
h1 { h1 {
@ -590,10 +590,10 @@ $small-breakpoint: 960px;
margin-bottom: 0; margin-bottom: 0;
small { small {
color: $darker-text-color; color: var(--primary-color-faint);
span { span {
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
} }
} }
@ -812,7 +812,7 @@ $small-breakpoint: 960px;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 13px;
color: $darker-text-color; color: var(--primary-color-faint);
} }
&__text { &__text {
@ -859,18 +859,18 @@ $small-breakpoint: 960px;
span { span {
font-size: 14px; font-size: 14px;
color: $darker-text-color; color: var(--primary-color-faint);
} }
} }
} }
.simple_form .user_agreement .label_input > label { .simple_form .user_agreement .label_input > label {
font-weight: 400; font-weight: 400;
color: $darker-text-color; color: var(--primary-color-faint);
} }
.simple_form p.lead { .simple_form p.lead {
color: $darker-text-color; color: var(--primary-color-faint);
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
font-weight: 400; font-weight: 400;

12
app/styles/soapbox/accounts.scss
View File

@ -87,7 +87,7 @@
span { span {
display: block; display: block;
font-size: 14px; font-size: 14px;
color: $gab-secondary-text; color: var(--primary-color-faint);
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -130,7 +130,7 @@
.older, .older,
.newer { .newer {
text-transform: uppercase; text-transform: uppercase;
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
.older { .older {
@ -175,7 +175,7 @@
.nothing-here { .nothing-here {
background: var(--brand-color-med); background: var(--brand-color-med);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
color: $gab-secondary-text; color: var(--primary-color-faint);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
@ -251,13 +251,13 @@
font-weight: 500; font-weight: 500;
width: 120px; width: 120px;
flex: 0 0 auto; flex: 0 0 auto;
color: $secondary-text-color; color: var(--primary-text-color-faint);
background: rgba(darken($ui-base-color, 8%), 0.5); background: rgba(darken($ui-base-color, 8%), 0.5);
} }
dd { dd {
flex: 1 1 auto; flex: 1 1 auto;
color: $darker-text-color; color: var(--primary-color-faint);
} }
a { a {
@ -296,7 +296,7 @@
.pending-account { .pending-account {
&__header { &__header {
color: $darker-text-color; color: var(--primary-color-faint);
a { a {
color: $ui-secondary-color; color: $ui-secondary-color;

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

@ -23,8 +23,8 @@ body {
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: #fff; color: var(--primary-text-color);
background-color: $gab-background-base; background-color: var(--background-color);
&.system-font { &.system-font {
// system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+) // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
@ -95,7 +95,7 @@ body {
&.error { &.error {
position: absolute; position: absolute;
text-align: center; text-align: center;
color: $darker-text-color; color: var(--primary-color-faint);
background: var(--brand-color-med); background: var(--brand-color-med);
width: 100%; width: 100%;
height: 100%; height: 100%;

4
app/styles/soapbox/compact_header.scss
View File

@ -2,7 +2,7 @@
h1 { h1 {
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
color: $darker-text-color; color: var(--primary-color-faint);
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
padding: 0 10px; padding: 0 10px;
@ -20,7 +20,7 @@
small { small {
font-weight: 400; font-weight: 400;
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
img { img {

143
app/styles/soapbox/components.scss
View File

@ -8,7 +8,7 @@
border: 10px none; border: 10px none;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
color: var(--primary-text-color); color: #fff;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-family: inherit; font-family: inherit;
@ -89,7 +89,7 @@
} }
&.button-secondary { &.button-secondary {
color: $darker-text-color; color: var(--primary-color-faint);
background: transparent; background: transparent;
padding: 3px 15px; padding: 3px 15px;
border: 1px solid $ui-primary-color; border: 1px solid $ui-primary-color;
@ -121,7 +121,7 @@
.icon-button { .icon-button {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
color: $gab-secondary-text; color: var(--primary-color-faint);
border: 0; border: 0;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
@ -158,7 +158,7 @@
} }
&.inverted { &.inverted {
color: $gab-secondary-text; color: var(--primary-color-faint);
&:hover, &:hover,
&:active, &:active,
@ -181,19 +181,19 @@
&.overlayed { &.overlayed {
box-sizing: content-box; box-sizing: content-box;
background: rgba($base-overlay-background, 0.6); background: var(--foreground-color);
color: var(--primary-text-color-faint); color: var(--primary-text-color-faint);
border-radius: 4px; border-radius: 4px;
padding: 2px; padding: 2px;
&:hover { &:hover {
background: rgba($base-overlay-background, 0.9); background: var(--background-color);
} }
} }
} }
.text-icon-button { .text-icon-button {
color: $gab-secondary-text; color: var(--primary-color-faint);
border: 0; border: 0;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
@ -561,11 +561,11 @@
&.light { &.light {
.status__relative-time { .status__relative-time {
color: $light-text-color; color: var(--primary-text-color-faint);
} }
.status__display-name { .status__display-name {
color: $inverted-text-color; color: var(--primary-text-color-faint);
} }
.display-name { .display-name {
@ -598,7 +598,7 @@
&__meta { &__meta {
font-size: 14px; font-size: 14px;
color: $gab-secondary-text; color: var(--primary-color-faint);
a { a {
color: var(--brand-color); color: var(--brand-color);
@ -624,13 +624,13 @@
.status__relative-time, .status__relative-time,
.notification__relative_time { .notification__relative_time {
color: $dark-text-color; color: var(--primary-text-color-faint);
float: right; float: right;
font-size: 14px; font-size: 14px;
} }
.status__display-name { .status__display-name {
color: $dark-text-color; color: var(--primary-text-color-faint);
} }
.status__info .status__display-name { .status__info .status__display-name {
@ -786,7 +786,7 @@
.account__display-name { .account__display-name {
flex: 1 1 auto; flex: 1 1 auto;
display: block; display: block;
color: $darker-text-color; color: var(--primary-color-faint);
overflow: hidden; overflow: hidden;
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
@ -862,7 +862,7 @@ a .account__avatar {
.account__reciprocal_follow_message { .account__reciprocal_follow_message {
padding: 0 5px; padding: 0 5px;
color: $gab-secondary-text; color: var(--primary-color-faint);
text-align: center; text-align: center;
} }
@ -948,7 +948,7 @@ a .account__avatar {
display: block; display: block;
text-transform: uppercase; text-transform: uppercase;
font-size: 11px; font-size: 11px;
color: $darker-text-color; color: var(--primary-color-faint);
} }
strong { strong {
@ -1023,7 +1023,7 @@ a.account__display-name {
} }
.detailed-status__display-name { .detailed-status__display-name {
color: $secondary-text-color; color: var(--primary-text-color-faint);
display: flex; display: flex;
line-height: 24px; line-height: 24px;
margin-bottom: 15px; margin-bottom: 15px;
@ -1098,7 +1098,7 @@ a.account__display-name {
margin: 0 10px 0 68px; margin: 0 10px 0 68px;
padding: 8px 0 0; padding: 8px 0 0;
cursor: default; cursor: default;
color: $gab-secondary-text; color: var(--primary-color-faint);
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
position: relative; position: relative;
@ -1223,10 +1223,10 @@ a.account__display-name {
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
cursor: default; cursor: default;
color: $darker-text-color; color: var(--primary-color-faint);
strong { strong {
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
a { a {
@ -1346,11 +1346,6 @@ a.account__display-name {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
article {
// TEMPORARY - content of columns may be significantly altered
background: $gab-background-container;
}
} }
.ui { .ui {
@ -1368,7 +1363,7 @@ a.account__display-name {
width: 100%; width: 100%;
height: auto; height: auto;
z-index: 105; z-index: 105;
background: $gab-background-container-light; background: var(--foreground-color);
@media (min-width: 895px) { @media (min-width: 895px) {
top: -290px; top: -290px;
@ -1397,7 +1392,7 @@ a.account__display-name {
display: block; display: block;
flex: 1 1 auto; flex: 1 1 auto;
padding: 15px 5px 13px; padding: 15px 5px 13px;
color: $darker-text-color; color: var(--primary-color-faint);
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
@ -1462,6 +1457,7 @@ a.account__display-name {
height: 100%; height: 100%;
padding: 0; padding: 0;
} }
.autosuggest-textarea__textarea {font-size: 16px;} .autosuggest-textarea__textarea {font-size: 16px;}
.search__input { .search__input {
@ -1647,11 +1643,12 @@ a.account__display-name {
} }
.promo-panel-item { .promo-panel-item {
@include light-theme-shadow;
display: block; display: block;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color-med);
background: $gab-background-container; background: var(--foreground-color);
&--highlighted { &--highlighted {
background-color: #30ce7d; background-color: #30ce7d;
@ -2017,13 +2014,13 @@ a.account__display-name {
} }
.getting-started { .getting-started {
color: $dark-text-color;
overflow: auto; overflow: auto;
&__footer { &__footer {
flex: 0 0 auto; flex: 0 0 auto;
padding: 10px; padding: 10px;
padding-top: 20px; padding-top: 20px;
opacity: 0.7;
ul { ul {
margin-bottom: 10px; margin-bottom: 10px;
@ -2034,19 +2031,21 @@ a.account__display-name {
} }
p { p {
color: $dark-text-color; color: var(--primary-text-color);
font-size: 13px; font-size: 13px;
margin-bottom: 20px; margin-bottom: 20px;
a { a {
color: $gab-secondary-text; color: var(--primary-text-color-faint);
text-decoration: underline; text-decoration: underline;
opacity: 0.8;
} }
} }
a { a {
text-decoration: none; text-decoration: none;
color: $gab-secondary-text; color: var(--primary-text-color-faint);
opacity: 0.8;
&:hover, &:hover,
&:focus, &:focus,
@ -2079,7 +2078,7 @@ a.account__display-name {
} }
.setting-text { .setting-text {
color: $darker-text-color; color: var(--primary-color-faint);
background: transparent; background: transparent;
border: 0; border: 0;
border-bottom: 2px solid $ui-primary-color; border-bottom: 2px solid $ui-primary-color;
@ -2162,7 +2161,7 @@ a.account__display-name {
button, button,
a { a {
display: inline; display: inline;
color: $secondary-text-color; color: var(--primary-text-color-faint);
background: transparent; background: transparent;
border: 0; border: 0;
padding: 0 8px; padding: 0 8px;
@ -2213,7 +2212,7 @@ a.status-card {
display: block; display: block;
font-weight: 500; font-weight: 500;
margin-bottom: 5px; margin-bottom: 5px;
color: $darker-text-color; color: var(--primary-color-faint);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -2227,7 +2226,7 @@ a.status-card {
} }
.status-card__description { .status-card__description {
color: $darker-text-color; color: var(--primary-color-faint);
} }
.status-card__host { .status-card__host {
@ -2391,7 +2390,9 @@ 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;
@ -2419,7 +2420,6 @@ a.status-card.compact:hover {
.column-header { .column-header {
display: flex; display: flex;
font-size: 16px; font-size: 16px;
background: $gab-background-container;
flex: 0 0 auto; flex: 0 0 auto;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -2503,8 +2503,11 @@ a.status-card.compact:hover {
padding: 0 15px; padding: 0 15px;
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
background: $gab-background-container; background: transparent;
&:hover {color: lighten($darker-text-color, 7%);}
&:hover {
color: lighten($darker-text-color, 7%);
}
&.active { &.active {
color: var(--primary-text-color); color: var(--primary-text-color);
@ -2521,7 +2524,7 @@ a.status-card.compact:hover {
max-height: 70vh; max-height: 70vh;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
color: $darker-text-color; color: var(--primary-color-faint);
transition: max-height 150ms ease-in-out, opacity 300ms linear; transition: max-height 150ms ease-in-out, opacity 300ms linear;
opacity: 1; opacity: 1;
@ -2558,7 +2561,7 @@ a.status-card.compact:hover {
} }
&:hover { &:hover {
color: $darker-text-color; color: var(--primary-color-faint);
text-decoration: underline; text-decoration: underline;
} }
} }
@ -2676,7 +2679,7 @@ a.status-card.compact:hover {
.video-error-cover { .video-error-cover {
align-items: center; align-items: center;
background: $base-overlay-background; background: var(--background-color);
color: var(--primary-text-color); color: var(--primary-text-color);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -2690,8 +2693,8 @@ a.status-card.compact:hover {
} }
.media-spoiler { .media-spoiler {
background: $base-overlay-background; background: var(--background-color);
color: $darker-text-color; color: var(--primary-color-faint);
border: 0; border: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -2790,7 +2793,7 @@ a.status-card.compact:hover {
} }
.column-settings__section { .column-settings__section {
color: $darker-text-color; color: var(--primary-color-faint);
cursor: default; cursor: default;
display: block; display: block;
font-weight: 500; font-weight: 500;
@ -2834,7 +2837,7 @@ a.status-card.compact:hover {
&__multi-value__label, &__multi-value__label,
&__input { &__input {
color: $darker-text-color; color: var(--primary-color-faint);
} }
&__clear-indicator, &__clear-indicator,
@ -2888,7 +2891,7 @@ a.status-card.compact:hover {
margin-bottom: 4px; margin-bottom: 4px;
display: block; display: block;
vertical-align: top; vertical-align: top;
background-color: $base-overlay-background; background-color: var(--background-color);
text-transform: uppercase; text-transform: uppercase;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;
@ -2907,7 +2910,7 @@ a.status-card.compact:hover {
} }
.setting-toggle__label { .setting-toggle__label {
color: $darker-text-color; color: var(--primary-color-faint);
display: inline-block; display: inline-block;
margin-bottom: 14px; margin-bottom: 14px;
margin-left: 8px; margin-left: 8px;
@ -3124,7 +3127,7 @@ a.status-card.compact:hover {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: $secondary-text-color; color: var(--primary-text-color-faint);
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
border: 2px dashed var(--brand-color-med); border: 2px dashed var(--brand-color-med);
@ -3399,7 +3402,7 @@ a.status-card.compact:hover {
.search-results__hashtag { .search-results__hashtag {
display: block; display: block;
padding: 10px; padding: 10px;
color: $secondary-text-color; color: var(--primary-text-color-faint);
text-decoration: none; text-decoration: none;
&:hover, &:hover,
@ -3545,7 +3548,7 @@ a.status-card.compact:hover {
cursor: zoom-in; cursor: zoom-in;
display: block; display: block;
text-decoration: none; text-decoration: none;
color: $secondary-text-color; color: var(--primary-text-color-faint);
line-height: 0; line-height: 0;
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -3567,7 +3570,7 @@ a.status-card.compact:hover {
content: 'GIF'; content: 'GIF';
position: absolute; position: absolute;
color: var(--primary-text-color); color: var(--primary-text-color);
background: rgba($base-overlay-background, 0.5); background: var(--foreground-color);
bottom: 6px; bottom: 6px;
left: 6px; left: 6px;
padding: 2px 6px; padding: 2px 6px;
@ -3603,7 +3606,7 @@ a.status-card.compact:hover {
top: 0; top: 0;
left: 0; left: 0;
z-index: 0; z-index: 0;
background: $base-overlay-background; background: var(--background-color);
&--hidden { &--hidden {
display: none; display: none;
@ -3638,7 +3641,7 @@ a.status-card.compact:hover {
/* Status Video Player */ /* Status Video Player */
.status__video-player { .status__video-player {
background: $base-overlay-background; background: var(--background-color);
box-sizing: border-box; box-sizing: border-box;
cursor: default; /* May not be needed */ cursor: default; /* May not be needed */
margin-top: 8px; margin-top: 8px;
@ -3774,8 +3777,8 @@ a.status-card.compact:hover {
height: 100%; height: 100%;
z-index: 4; z-index: 4;
border: 0; border: 0;
background: $base-overlay-background; background: var(--background-color);
color: $darker-text-color; color: var(--primary-color-faint);
transition: none; transition: none;
pointer-events: none; pointer-events: none;
@ -4058,7 +4061,7 @@ a.status-card.compact:hover {
a { a {
display: block; display: block;
flex: 1 1 auto; flex: 1 1 auto;
color: $secondary-text-color; color: var(--primary-text-color-faint);
padding: 15px 0; padding: 15px 0;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -4127,7 +4130,7 @@ noscript {
div { div {
font-size: 14px; font-size: 14px;
margin: 30px auto; margin: 30px auto;
color: $secondary-text-color; color: var(--primary-text-color-faint);
max-width: 400px; max-width: 400px;
a { a {
@ -4530,7 +4533,7 @@ noscript {
} }
.account__header__content { .account__header__content {
color: $darker-text-color; color: var(--primary-color-faint);
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
@ -4594,7 +4597,7 @@ noscript {
} }
a { a {
color: $darker-text-color; color: var(--primary-color-faint);
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -4620,7 +4623,7 @@ noscript {
line-height: 36px; line-height: 36px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
&__sparkline { &__sparkline {
@ -4724,7 +4727,7 @@ noscript {
&__subtitle { &__subtitle {
display: block; display: block;
padding: 0 15px; padding: 0 15px;
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
&__form { &__form {
@ -4798,7 +4801,7 @@ noscript {
padding-top: 6px; padding-top: 6px;
&__button { &__button {
display: flex; display: flex;
} }
&__icon { &__icon {
@ -4991,7 +4994,7 @@ noscript {
span:first-of-type { span:first-of-type {
font-size: 20px !important; font-size: 20px !important;
line-height: 1.25; line-height: 1.25;
color: #ffffff; color: var(--primary-text-color);
font-weight: 600 !important; font-weight: 600 !important;
max-width: 260px; max-width: 260px;
} }
@ -5000,7 +5003,7 @@ noscript {
display: block; display: block;
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
color: $secondary-text-color; color: var(--primary-text-color-faint);
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -5101,7 +5104,7 @@ noscript {
> span { > span {
font-size: 14px; font-size: 14px;
color: $secondary-text-color; color: var(--primary-text-color-faint);
a { a {
color: var(--brand-color) !important; color: var(--brand-color) !important;
@ -5122,7 +5125,7 @@ noscript {
span { span {
display: block; display: block;
text-align: center; text-align: center;
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
a { a {
@ -5185,15 +5188,17 @@ noscript {
width: 100%; width: 100%;
max-height: 46px; max-height: 46px;
position: relative; position: relative;
background-color: darken($ui-base-color, 8%); background-color: var(--brand-color-faint);
border-bottom: 1px solid; border-bottom: 1px solid;
border-top: 1px solid; border-top: 1px solid;
border-color: var(--brand-color-faint); border-color: var(--brand-color-faint);
transition: max-height 150ms ease; transition: max-height 150ms ease;
overflow: hidden; overflow: hidden;
opacity: 1;
&.hidden { &.hidden {
max-height: 0; max-height: 0;
opacity: 0;
} }
&__btn { &__btn {
@ -5204,7 +5209,7 @@ noscript {
line-height: 46px; line-height: 46px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
color: $secondary-text-color; color: var(--primary-text-color-faint);
span { span {
height: 46px; height: 46px;

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

@ -115,7 +115,7 @@
&__links { &__links {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
color: $darker-text-color; color: var(--primary-color-faint);
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
@ -143,7 +143,7 @@
} }
&:last-of-type { &:last-of-type {
color: $ui-secondary-color; color: var(--primary-text-color-faint);
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
padding-top: 2px; padding-top: 2px;

10
app/styles/soapbox/components/compose-form.scss
View File

@ -219,7 +219,7 @@
.icon-button { .icon-button {
flex: 0 1 auto; flex: 0 1 auto;
color: $gab-secondary-text; color: var(--primary-color-faint);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
padding: 10px; padding: 10px;
@ -250,8 +250,8 @@
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
box-sizing: border-box; box-sizing: border-box;
background: transparent; background: transparent;
color: $gab-secondary-text; color: var(--primary-color-faint);
border: 1px solid $gab-secondary-text; border: 1px solid var(--primary-color-faint);
outline: none; outline: none;
padding: 10px; padding: 10px;
margin: 0; margin: 0;
@ -263,7 +263,7 @@
&:focus {color: #fff;} &:focus {color: #fff;}
&::placeholder { &::placeholder {
color: $gab-secondary-text; color: var(--primary-color-faint);
} }
} }
&.active {opacity: 1;} &.active {opacity: 1;}
@ -314,7 +314,7 @@
font-family: $font-sans-serif, sans-serif; font-family: $font-sans-serif, sans-serif;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: $gab-secondary-text; color: var(--primary-color-faint);
&.character-counter--over {color: $warning-red;} &.character-counter--over {color: $warning-red;}
} }
} }

4
app/styles/soapbox/components/detailed-status.scss
View File

@ -45,7 +45,7 @@
.detailed-status__meta { .detailed-status__meta {
margin-top: 15px; margin-top: 15px;
color: $dark-text-color; color: var(--primary-text-color-faint);
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
display: flex; display: flex;
@ -60,7 +60,7 @@
} }
.detailed-status__link { .detailed-status__link {
color: $action-button-color; color: var(--primary-text-color-faint);
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
font-size: 13px; font-size: 13px;

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

@ -4,10 +4,10 @@
@include font-weight(normal); @include font-weight(normal);
z-index: 9999; z-index: 9999;
position: absolute; position: absolute;
background: $gab-background-base-light; background: var(--background-color);
border-radius: 6px; border-radius: 6px;
padding: 4px 0; padding: 4px 0;
color: $gab-secondary-text; color: var(--primary-text-color);
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%;}
@ -24,28 +24,28 @@
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-background-base-light; border-left-color: var(--background-color);
} }
&.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-background-base-light; border-top-color: var(--background-color);
} }
&.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-background-base-light; border-bottom-color: var(--background-color);
} }
&.right { &.right {
left: -5px; left: -5px;
margin-top: -5px; margin-top: -5px;
border-width: 5px 5px 5px 0; border-width: 5px 5px 5px 0;
border-right-color: $gab-background-base-light; border-right-color: var(--background-color);
} }
} }
@ -63,7 +63,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-transform: capitalize; text-transform: capitalize;
color: $gab-secondary-text; color: var(--primary-text-color);
&:focus, &:focus,
&:hover, &:hover,
@ -78,7 +78,7 @@
display: block; display: block;
margin: 10px !important; margin: 10px !important;
height: 1px; height: 1px;
background: $gab-background-base; background: var(--foreground-color);
} }
} }
// end .dropdown-menu // end .dropdown-menu
@ -146,7 +146,7 @@
&:hover { &:hover {
background: var(--brand-color); background: var(--brand-color);
color: $secondary-text-color; color: var(--primary-text-color-faint);
} }
} }
} }

4
app/styles/soapbox/components/emoji-reacts.scss
View File

@ -6,7 +6,7 @@
img { img {
width: 20px; width: 20px;
height: 20px; height: 20px;
filter: drop-shadow(2px 0 0 #fff); // FIXME: Use theme color filter: drop-shadow(2px 0 0 var(--foreground-color));
} }
} }
@ -57,7 +57,7 @@
.emoji-react-selector { .emoji-react-selector {
position: absolute; position: absolute;
display: flex; display: flex;
background-color: #fff; background-color: var(--background-color);
padding: 5px 8px; padding: 5px 8px;
border-radius: 9999px; border-radius: 9999px;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);

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

@ -53,7 +53,7 @@
} }
.group-card__meta { .group-card__meta {
color: $gab-secondary-text; color: var(--primary-color-faint);
font-size: 14px; font-size: 14px;
margin-top: 5px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;

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

@ -31,7 +31,7 @@
float: left; float: left;
height: 20px; height: 20px;
padding: 3px 0 0 33px; padding: 3px 0 0 33px;
color: $gab-secondary-text; color: var(--primary-color-faint);
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;

2
app/styles/soapbox/components/group-sidebar-panel.scss
View File

@ -23,7 +23,7 @@
&__meta { &__meta {
font-size: 0.8em; font-size: 0.8em;
color: $gab-secondary-text; color: var(--primary-color-faint);
&__unread { &__unread {
color: var(--brand-color); color: var(--brand-color);

8
app/styles/soapbox/components/modal.scss
View File

@ -290,7 +290,7 @@
&__case { &__case {
background: var(--brand-color-med); background: var(--brand-color-med);
color: $secondary-text-color; color: var(--primary-text-color-faint);
font-weight: 500; font-weight: 500;
padding: 10px; padding: 10px;
border-radius: 4px; border-radius: 4px;
@ -316,7 +316,7 @@
max-width: 90vw; max-width: 90vw;
border-radius: 4px; border-radius: 4px;
border: 1px solid $gab-placeholder-accent; border: 1px solid $gab-placeholder-accent;
color: $gab-secondary-text; color: var(--primary-color-faint);
background: $gab-background-container; background: $gab-background-container;
.status__display-name { .status__display-name {
@ -440,7 +440,7 @@
.status__content, .status__content,
.status__content p { .status__content p {
color: $gab-secondary-text; color: var(--primary-color-faint);
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
@ -532,7 +532,7 @@
align-items: center; align-items: center;
padding: 13px 10px 12px; padding: 13px 10px 12px;
@inclide font-size(14); @inclide font-size(14);
color: $gab-secondary-text; color: var(--primary-color-faint);
text-decoration: none; text-decoration: none;
&, &,

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

@ -9,7 +9,7 @@
display: block; display: block;
height: 112px; height: 112px;
width: 100%; width: 100%;
background: lighten($gab-background-container, 4%); background: var(--brand-color-faint);
img { img {
display: block; display: block;
@ -30,7 +30,7 @@
display: block; display: block;
width: 82px; width: 82px;
height: 82px; height: 82px;
border: 6px solid $gab-background-base; border: 6px solid var(--foreground-color);
background-size: cover; background-size: cover;
} }
} }
@ -51,7 +51,7 @@
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
line-height: 24px; line-height: 24px;
color: #fff; color: var(--primary-text-color);
} }
&:hover & { &:hover & {
@ -64,7 +64,7 @@
display: block; display: block;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $gab-secondary-text; color: var(--primary-color-faint);
text-decoration: none !important; text-decoration: none !important;
} }
} }
@ -84,7 +84,6 @@
a { a {
text-decoration: none; text-decoration: none;
color: var(--primary-text-color); color: var(--primary-text-color);
&:hover { &:hover {
@ -95,7 +94,7 @@
&__value { &__value {
display: block; display: block;
width: 100%; width: 100%;
color: #fff; color: var(--primary-text-color);
font-size: 20px; font-size: 20px;
font-weight: 800; font-weight: 800;
line-height: 24px; line-height: 24px;
@ -104,7 +103,7 @@
&__label { &__label {
display: block; display: block;
width: 100%; width: 100%;
color: $gab-secondary-text; color: var(--primary-color-faint);
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
} }

16
app/styles/soapbox/containers.scss
View File

@ -94,7 +94,7 @@
.name { .name {
flex: 1 1 auto; flex: 1 1 auto;
color: $secondary-text-color; color: var(--primary-text-color-faint);
width: calc(100% - 88px); width: calc(100% - 88px);
.username { .username {
@ -431,7 +431,7 @@
} }
.logo-button { .logo-button {
background-color: $secondary-text-color; background-color: var(--primary-text-color-faint);
} }
} }
@ -612,7 +612,7 @@
text-shadow: none; text-shadow: none;
small { small {
color: $darker-text-color; color: var(--primary-color-faint);
} }
} }
} }
@ -640,7 +640,7 @@
width: 33.3%; width: 33.3%;
box-sizing: border-box; box-sizing: border-box;
flex: 0 0 auto; flex: 0 0 auto;
color: $darker-text-color; color: var(--primary-color-faint);
padding: 10px; padding: 10px;
border-right: 1px solid var(--brand-color-faint); border-right: 1px solid var(--brand-color-faint);
cursor: default; cursor: default;
@ -674,7 +674,7 @@
} }
&.inactive::after { &.inactive::after {
border-bottom-color: $secondary-text-color; border-bottom-color: var(--primary-text-color-faint);
} }
} }
@ -737,11 +737,11 @@
&__links { &__links {
margin-top: -15px; margin-top: -15px;
font-size: 14px; font-size: 14px;
color: $darker-text-color; color: var(--primary-color-faint);
a { a {
display: inline-block; display: inline-block;
color: $darker-text-color; color: var(--primary-color-faint);
text-decoration: none; text-decoration: none;
padding: 15px; padding: 15px;
font-weight: 500; font-weight: 500;
@ -812,7 +812,7 @@
.roles { .roles {
padding: 20px; padding: 20px;
font-size: 14px; font-size: 14px;
color: $darker-text-color; color: var(--primary-color-faint);
} }
.roles { .roles {

2
app/styles/soapbox/dashboard.scss
View File

@ -48,7 +48,7 @@
&__label { &__label {
font-size: 14px; font-size: 14px;
color: $gab-secondary-text; color: var(--primary-color-faint);
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
} }

2
app/styles/soapbox/footer.scss
View File

@ -34,7 +34,7 @@
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
margin-bottom: 8px; margin-bottom: 8px;
color: $darker-text-color; color: var(--primary-color-faint);
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.5; line-height: 1.5;

20
app/styles/soapbox/forms.scss
View File

@ -95,7 +95,7 @@ code {
} }
.hint { .hint {
color: $gab-secondary-text; color: var(--primary-color-faint);
a { a {
color: var(--highlight-text-color); color: var(--highlight-text-color);
@ -116,7 +116,7 @@ code {
p.hint { p.hint {
margin-bottom: 15px; margin-bottom: 15px;
color: $gab-secondary-text; color: var(--primary-color-faint);
&.subtle-hint { &.subtle-hint {
text-align: center; text-align: center;
@ -390,7 +390,7 @@ code {
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
background: var(--brand-color); background: var(--brand-color);
color: var(--primary-text-color); color: #fff;
font-size: 18px; font-size: 18px;
line-height: inherit; line-height: inherit;
height: auto; height: auto;
@ -519,7 +519,7 @@ code {
.flash-message { .flash-message {
background: var(--brand-color-med); background: var(--brand-color-med);
color: $darker-text-color; color: var(--primary-color-faint);
border-radius: 4px; border-radius: 4px;
padding: 15px 10px; padding: 15px 10px;
margin-bottom: 30px; margin-bottom: 30px;
@ -539,7 +539,7 @@ code {
a { a {
display: inline-block; display: inline-block;
color: $darker-text-color; color: var(--primary-color-faint);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -600,7 +600,7 @@ code {
text-align: center; text-align: center;
a { a {
color: $darker-text-color; color: var(--primary-color-faint);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -636,7 +636,7 @@ code {
.oauth-prompt, .oauth-prompt,
.follow-prompt { .follow-prompt {
margin-bottom: 30px; margin-bottom: 30px;
color: $darker-text-color; color: var(--primary-color-faint);
h2 { h2 {
font-size: 16px; font-size: 16px;
@ -645,7 +645,7 @@ code {
} }
strong { strong {
color: $secondary-text-color; color: var(--primary-text-color-faint);
font-weight: 500; font-weight: 500;
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
@ -682,7 +682,7 @@ code {
.qr-alternative { .qr-alternative {
margin-bottom: 20px; margin-bottom: 20px;
color: $secondary-text-color; color: var(--primary-text-color-faint);
flex: 150px; flex: 150px;
samp { samp {
@ -767,7 +767,7 @@ code {
.post-follow-actions { .post-follow-actions {
text-align: center; text-align: center;
color: $darker-text-color; color: var(--primary-color-faint);
div { div {
margin-bottom: 4px; margin-bottom: 4px;

2
app/styles/soapbox/introduction.scss
View File

@ -92,7 +92,7 @@
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
color: $darker-text-color; color: var(--primary-color-faint);
code { code {
display: inline-block; display: inline-block;

2
app/styles/soapbox/stream_entries.scss
View File

@ -77,7 +77,7 @@
flex: 0 auto; flex: 0 auto;
font-size: 14px; font-size: 14px;
background: var(--brand-color); background: var(--brand-color);
color: var(--primary-text-color); color: #fff;
text-transform: none; text-transform: none;
line-height: 36px; line-height: 36px;
height: auto; height: auto;

2
app/styles/soapbox/tables.scss
View File

@ -109,7 +109,7 @@ a.table-action-link {
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
padding: 0 10px; padding: 0 10px;
color: $gab-secondary-text; color: var(--primary-color-faint);
font-weight: 500; font-weight: 500;
&:hover { &:hover {

1
app/styles/soapbox/variables.scss
View File

@ -24,7 +24,6 @@ $gab-placeholder-accent: #666 !default;
// light theme // light theme
$gab-background-base-light: #f6f2f6 !default; $gab-background-base-light: #f6f2f6 !default;
$gab-background-container-light: #fff !default;
$gab-default-text-light: #6c6c6c !default; $gab-default-text-light: #6c6c6c !default;
$gab-background: $gab-background-base !default; $gab-background: $gab-background-base !default;

26
app/styles/soapbox/widgets.scss
View File

@ -24,7 +24,7 @@
padding: 20px; padding: 20px;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
font-size: 15px; font-size: 15px;
color: $darker-text-color; color: var(--primary-color-faint);
line-height: 20px; line-height: 20px;
word-wrap: break-word; word-wrap: break-word;
font-weight: 400; font-weight: 400;
@ -56,7 +56,7 @@
} }
a { a {
color: $secondary-text-color; color: var(--primary-text-color-faint);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -79,7 +79,7 @@
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 13px;
color: $darker-text-color; color: var(--primary-color-faint);
} }
.account { .account {
@ -121,7 +121,7 @@
.contact-widget { .contact-widget {
font-size: 15px; font-size: 15px;
color: $darker-text-color; color: var(--primary-color-faint);
line-height: 20px; line-height: 20px;
word-wrap: break-word; word-wrap: break-word;
font-weight: 400; font-weight: 400;
@ -154,7 +154,7 @@
border-radius: 4px; border-radius: 4px;
background: var(--brand-color-med); background: var(--brand-color-med);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
color: $secondary-text-color; color: var(--primary-text-color-faint);
font-weight: 400; font-weight: 400;
margin-bottom: 10px; margin-bottom: 10px;
@ -197,7 +197,7 @@
.fa { .fa {
margin-right: 5px; margin-right: 5px;
color: $darker-text-color; color: var(--primary-color-faint);
} }
} }
@ -224,7 +224,7 @@
background: $base-shadow-color; background: $base-shadow-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
font-size: 14px; font-size: 14px;
color: $darker-text-color; color: var(--primary-color-faint);
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -246,7 +246,7 @@
p { p {
font-size: 15px; font-size: 15px;
color: $darker-text-color; color: var(--primary-color-faint);
} }
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
@ -309,7 +309,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
.fa { .fa {
color: $darker-text-color; color: var(--primary-color-faint);
} }
small { small {
@ -317,7 +317,7 @@
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
margin-top: 8px; margin-top: 8px;
color: $darker-text-color; color: var(--primary-color-faint);
} }
} }
@ -383,7 +383,7 @@
thead th { thead th {
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
color: $darker-text-color; color: var(--primary-color-faint);
font-weight: 700; font-weight: 700;
padding: 10px; padding: 10px;
@ -411,7 +411,7 @@
small { small {
display: block; display: block;
color: $darker-text-color; color: var(--primary-color-faint);
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
@ -508,7 +508,7 @@ $fluid-breakpoint: $maximum-width + 20px;
.notice-widget { .notice-widget {
margin-bottom: 10px; margin-bottom: 10px;
color: $darker-text-color; color: var(--primary-color-faint);
p { p {
margin-bottom: 10px; margin-bottom: 10px;