diff --git a/app/index.ejs b/app/index.ejs index 2a2aa1bee..4ccca8631 100644 --- a/app/index.ejs +++ b/app/index.ejs @@ -5,18 +5,6 @@ Soapbox - <%= htmlWebpackPlugin.tags.headTags.map(t => { - if (t.attributes['href'].startsWith('/packs/css/azure')) t.attributes['data-react-helmet'] = "true"; - return t; - }).join("\n ") %> - <%= htmlWebpackPlugin.tags.bodyTags.join("\n ") %> - diff --git a/app/styles/soapbox-light/diff.scss b/app/styles/soapbox-light/diff.scss deleted file mode 100644 index eac696bf8..000000000 --- a/app/styles/soapbox-light/diff.scss +++ /dev/null @@ -1,384 +0,0 @@ -// // Notes! -// // Sass color functions, "darken" and "lighten" are automatically replaced. -// -// // Change the colors of button texts -// .button { -// color: #ffffff; -// -// &.button-alternative-2 { -// color: #000; -// } -// } -// -// .drawer__inner { -// background: var(--brand-color-med); -// } -// -// .drawer__inner__soapbox { -// background: var(--brand-color-med) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; -// } -// -// // Change the colors used in compose-form -// .compose-form { -// .compose-form__modifiers { -// .compose-form__upload-description input { -// color: lighten(#ffffff, 7%); -// &::placeholder {color: lighten(#ffffff, 7%);} -// } -// } -// -// .autosuggest-textarea__suggestions { -// background: darken($ui-base-color, 6%); -// } -// -// .autosuggest-textarea__suggestions__item { -// &:hover, -// &:focus, -// &:active, -// &.selected { -// background: var(--brand-color-faint); -// } -// } -// } -// -// .emoji-mart-bar { -// border-color: var(--brand-color-faint); -// -// &:first-child { -// background: darken($ui-base-color, 6%); -// } -// } -// -// .emoji-mart-search input { -// background: rgba($ui-base-color, 0.3); -// border-color: var(--brand-color-med); -// } -// -// // Change the background colors of statuses -// .focusable:focus { -// background: var(--brand-color-faint); -// } -// -// .status.status-direct { -// background: var(--brand-color-faint); -// } -// -// .focusable:focus .status.status-direct { -// background: var(--brand-color-med); -// } -// -// // Change the background colors of status__content__spoiler-link -// .reply-indicator__content .status__content__spoiler-link, -// .status__content .status__content__spoiler-link { -// background: $ui-base-lighter-color; -// -// &:hover { -// background: lighten($ui-base-lighter-color, 6%); -// } -// } -// -// // Change the background colors of media and video spoilers -// .media-spoiler, -// .video-player__spoiler { -// background: var(--brand-color-med); -// } -// -// // Change the colors used in the dropdown menu -// .dropdown-menu { -// &__item { -// a { -// color: var(--primary-text-color-faint); -// } -// } -// } -// -// // Change the text colors on inverted background -// .privacy-dropdown__option.active .privacy-dropdown__option__content, -// .privacy-dropdown__option.active .privacy-dropdown__option__content strong, -// .privacy-dropdown__option:hover .privacy-dropdown__option__content, -// .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, -// .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, -// .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, -// .actions-modal ul li:not(:empty) a:hover button, -// .simple_form .block-button, -// .simple_form .button, -// .simple_form button { -// color: #ffffff; -// } -// -// .dropdown-menu__separator { -// border-bottom-color: var(--brand-color-med); -// } -// -// // Change the background colors of modals -// .actions-modal, -// .boost-modal, -// .confirmation-modal, -// .mute-modal, -// .report-modal, -// .error-modal, -// .onboarding-modal { -// background: var(--brand-color-med); -// } -// -// .embed-modal { -// background: #333; -// color: #fff; -// } -// -// .boost-modal__action-bar, -// .confirmation-modal__action-bar, -// .mute-modal__action-bar, -// .onboarding-modal__paginator, -// .error-modal__footer { -// background: darken($ui-base-color, 6%); -// -// .onboarding-modal__nav, -// .error-modal__nav { -// &:hover, -// &:focus, -// &:active { -// background-color: darken($ui-base-color, 12%); -// } -// } -// } -// -// .display-case__case { -// background: #ffffff; -// } -// -// .embed-modal .embed-modal__container .embed-modal__html { -// background: #ffffff; -// -// &:focus { -// background: darken($ui-base-color, 6%); -// } -// } -// -// .react-toggle-track { -// background: $ui-secondary-color; -// } -// -// .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { -// background: darken($ui-secondary-color, 10%); -// } -// -// .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { -// background: lighten($gab-brand-default, 10%); -// } -// -// // Change the default color used for the text in an empty column or on the error column -// .empty-column-indicator, -// .error-column { -// color: var(--primary-text-color); -// background: #ffffff; -// } -// -// // Change the default colors used on some parts of the profile pages -// .activity-stream-tabs { -// background: $account-background-color; -// border-bottom-color: var(--brand-color-med); -// } -// -// .activity-stream { -// .entry { -// background: $account-background-color; -// -// .detailed-status.light, -// .more.light, -// .status.light { -// border-bottom-color: var(--brand-color-med); -// } -// } -// -// .status.light { -// .status__content { -// color: var(--primary-text-color); -// } -// -// .display-name { -// strong { -// color: var(--primary-text-color); -// } -// } -// } -// } -// -// .accounts-grid { -// .account-grid-card { -// -// .name { -// a { -// color: var(--primary-text-color); -// } -// } -// -// .username { -// color: var(--primary-text-color-faint); -// } -// -// .account__header__content { -// color: var(--primary-text-color); -// } -// } -// } -// -// .simple_form, -// .table-form { -// .warning { -// box-shadow: none; -// background: rgba($error-red, 0.5); -// text-shadow: none; -// } -// } -// -// .simple_form input[type="text"], -// .simple_form input[type="number"], -// .simple_form input[type="email"], -// .simple_form input[type="password"], -// .simple_form textarea { -// border-color: var(--brand-color); -// -// &:hover { -// border-color: var(--brand-color); -// } -// } -// -// .simple_form select, -// .admin select.dropdown { -// border-color: var(--primary-text-color-faint); -// } -// -// .button.logo-button { -// color: #ffffff; -// -// svg { -// fill: #ffffff; -// } -// } -// -// .public-layout { -// .header, -// .public-account-header, -// .public-account-bio { -// box-shadow: none; -// } -// -// .public-account-header { -// &__image { -// background: var(--brand-color-med); -// -// &::after { -// box-shadow: none; -// } -// } -// -// &__tabs { -// &__name { -// h1, -// h1 small { -// color: #ffffff; -// } -// } -// } -// } -// } -// -// .account__section-headline a.active::after { -// border-color: transparent transparent #ffffff; -// } -// -// .hero-widget, -// .box-widget, -// .contact-widget, -// .landing-page__information.contact-widget, -// .moved-account-widget, -// .memoriam-widget, -// .activity-stream, -// .nothing-here, -// .directory__tag > a, -// .directory__tag > div { -// box-shadow: none; -// } -// -// .btngroup__btn--active { -// color: #fff; -// } -// -// .wtf-panel { -// @include light-theme-shadow; -// background: var(--foreground-color); -// } -// -// .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 { -// color: $gab-default-text-light; -// } -// -// .group-card .group-card__header img { -// background: var(--foreground-color); -// } -// -// .group .group__header { -// background: var(--foreground-color); -// } -// -// .group .group__panel .group__panel__label { -// background: var(--foreground-color); -// } -// -// .group .group__feed { -// background: var(--foreground-color); -// } -// -// input[type='text'], -// textarea { -// &.standard { -// @include input-placeholder($gab-secondary-text); -// color: $gab-placeholder-accent; -// border-color: var(--primary-text-color-faint); -// background: $gab-background-base-light; -// } -// } -// -// -// .boost-modal, -// .confirmation-modal, -// .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 .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); -// } diff --git a/app/styles/soapbox-light/variables.scss b/app/styles/soapbox-light/variables.scss deleted file mode 100644 index 79173d7bd..000000000 --- a/app/styles/soapbox-light/variables.scss +++ /dev/null @@ -1,39 +0,0 @@ -$light-theme: true; -$gab-background: #f6f2f6; - -$classic-base-color: #282c37; -$classic-primary-color: #9baec8; -$classic-secondary-color: lighten(#be9bc8, 30%); -$classic-highlight-color: #2b90d9; - -// Differences -$success-green: #3c754d; - -$base-overlay-background: #ffffff !default; -$valid-value-color: $success-green !default; - -$ui-base-color: $classic-secondary-color !default; -$ui-base-lighter-color: #f4c6f4; -$ui-primary-color: #9bcbed; -$ui-secondary-color: $classic-base-color !default; -$ui-highlight-color: #990099; - -$darker-text-color: $classic-base-color !default; -$dark-text-color: #444b5d; -$action-button-color: #606984; - -$inverted-text-color: #000000 !default; -$lighter-text-color: $classic-base-color !default; -$light-text-color: #444b5d; - -//Newly added colors -$account-background-color: #ffffff !default; - -//Invert darkened and lightened colors -@function darken($color, $amount) { - @return hsl(hue($color), saturation($color), lightness($color) + $amount); -} - -@function lighten($color, $amount) { - @return hsl(hue($color), saturation($color), lightness($color) - $amount); -} diff --git a/webpack/config/themes.yml b/webpack/config/themes.yml deleted file mode 100644 index 17dc07cd3..000000000 --- a/webpack/config/themes.yml +++ /dev/null @@ -1,2 +0,0 @@ -azure: styles/azure.scss -purple-dark: styles/application.scss diff --git a/webpack/configuration.js b/webpack/configuration.js index 0af340386..703119e3a 100644 --- a/webpack/configuration.js +++ b/webpack/configuration.js @@ -8,9 +8,6 @@ const { readFileSync } = require('fs'); const configPath = join(__dirname, 'config', 'webpacker.yml'); const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]; -const themePath = join(__dirname, 'config', 'themes.yml'); -const themes = safeLoad(readFileSync(themePath), 'utf8'); - function removeOuterSlashes(string) { return string.replace(/^\/*/, '').replace(/\/*$/, ''); } @@ -31,7 +28,6 @@ const output = { module.exports = { settings, - themes, env: { CDN_HOST: env.CDN_HOST, NODE_ENV: env.NODE_ENV, diff --git a/webpack/shared.js b/webpack/shared.js index 740c33f22..643309192 100644 --- a/webpack/shared.js +++ b/webpack/shared.js @@ -7,7 +7,7 @@ const AssetsManifestPlugin = require('webpack-assets-manifest'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin'); const extname = require('path-complete-extname'); -const { env, settings, themes, output } = require('./configuration'); +const { env, settings, output } = require('./configuration'); const rules = require('./rules'); const localePackPaths = require('./generateLocalePacks'); @@ -19,10 +19,7 @@ module.exports = { localMap[basename(entry, extname(entry, extname(entry)))] = resolve(entry); return localMap; }, {}), - Object.keys(themes).reduce((themePaths, name) => { - themePaths[name] = resolve(join(settings.source_path, themes[name])); - return themePaths; - }, {}) + { styles: resolve(join(settings.source_path, 'styles/application.scss')) } ), output: { @@ -78,10 +75,9 @@ module.exports = { }), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ - inject: false, template: 'app/index.ejs', chunksSortMode: 'manual', - chunks: ['common', 'locale_en', 'application', 'azure'], + chunks: ['common', 'locale_en', 'application', 'styles'], alwaysWriteToDisk: true, }), new HtmlWebpackHarddiskPlugin({