From 2b58f3131eab20800d6feb1e82b81103ad8f733a Mon Sep 17 00:00:00 2001 From: Qstick Date: Sun, 21 Nov 2021 17:00:02 -0600 Subject: [PATCH] New: Move to CSS Variables for Colorings --- frontend/postcss.config.js | 3 +- frontend/src/Components/Alert.css | 24 +-- frontend/src/Components/Card.css | 6 +- frontend/src/Components/Chart/BarChart.js | 7 +- .../src/Components/Chart/DoughnutChart.js | 9 +- .../src/Components/Chart/StackedBarChart.js | 11 +- frontend/src/Components/FieldSet.css | 2 +- .../FileBrowser/FileBrowserModalContent.css | 2 +- .../Filter/Builder/FilterBuilderRow.css | 2 +- .../Builder/FilterBuilderRowValueTag.css | 2 +- .../Filter/CustomFilters/CustomFilter.css | 2 +- .../src/Components/Form/AutoSuggestInput.css | 8 +- frontend/src/Components/Form/CheckInput.css | 32 +-- .../Components/Form/EnhancedSelectInput.css | 14 +- .../Form/EnhancedSelectInputOption.css | 10 +- .../Form/EnhancedSelectInputSelectedValue.css | 2 +- .../src/Components/Form/FormInputGroup.css | 2 +- .../src/Components/Form/FormInputHelpText.css | 10 +- frontend/src/Components/Form/FormLabel.css | 4 +- .../Form/HintedSelectInputOption.css | 2 +- .../Form/HintedSelectInputSelectedValue.css | 2 +- frontend/src/Components/Form/Input.css | 19 +- .../src/Components/Form/KeyValueListInput.css | 4 +- .../Components/Form/KeyValueListInputItem.css | 2 +- frontend/src/Components/Form/TagInput.css | 6 +- frontend/src/Components/Form/TextArea.css | 2 +- frontend/src/Components/Form/TextInput.css | 2 +- frontend/src/Components/Icon.css | 16 +- frontend/src/Components/InfoLabel.css | 6 +- frontend/src/Components/Label.css | 65 +++--- frontend/src/Components/Link/Button.css | 60 +++--- frontend/src/Components/Link/IconButton.css | 4 +- frontend/src/Components/Link/Link.css | 4 +- .../Components/Loading/LoadingIndicator.css | 2 +- frontend/src/Components/Menu/MenuButton.css | 4 +- frontend/src/Components/Menu/MenuContent.css | 2 +- frontend/src/Components/Menu/MenuItem.css | 10 +- .../src/Components/Menu/MenuItemSeparator.css | 2 +- frontend/src/Components/Modal/Modal.css | 2 +- .../src/Components/Modal/ModalContent.css | 4 +- frontend/src/Components/Modal/ModalFooter.css | 2 +- frontend/src/Components/Modal/ModalHeader.css | 2 +- .../Page/Header/IndexerSearchInput.css | 20 +- .../Page/Header/IndexerSearchResult.css | 2 +- .../Header/KeyboardShortcutsModalContent.css | 4 +- .../src/Components/Page/Header/PageHeader.css | 6 +- .../Page/Header/PageHeaderActionsMenu.css | 2 +- frontend/src/Components/Page/LoadingPage.css | 2 + .../src/Components/Page/PageContentFooter.css | 2 +- .../src/Components/Page/PageJumpBarItem.css | 2 +- .../Page/Sidebar/Messages/Message.css | 12 +- .../Components/Page/Sidebar/PageSidebar.css | 6 +- .../Page/Sidebar/PageSidebarItem.css | 12 +- .../Components/Page/Toolbar/PageToolbar.css | 4 +- .../Page/Toolbar/PageToolbarButton.css | 8 +- frontend/src/Components/ProgressBar.css | 24 +-- .../Components/Scroller/OverlayScroller.css | 4 +- .../Table/TableOptions/TableOptionsColumn.css | 2 +- frontend/src/Components/Table/TablePager.css | 4 +- frontend/src/Components/Table/TableRow.css | 2 +- .../src/Components/Table/VirtualTableRow.css | 2 +- frontend/src/Components/Tooltip/Popover.css | 4 +- frontend/src/Components/Tooltip/Tooltip.css | 40 ++-- frontend/src/Helpers/Props/kinds.js | 2 - frontend/src/History/HistoryRowParameter.css | 8 +- .../Delete/DeleteIndexerModalContent.css | 2 +- .../src/Indexer/Index/IndexerIndexFooter.css | 10 +- .../Indexer/Index/Table/IndexerIndexRow.css | 2 +- .../src/Indexer/Index/Table/ProtocolLabel.css | 8 +- frontend/src/Search/QueryParameterModal.css | 4 +- frontend/src/Search/QueryParameterOption.css | 10 +- frontend/src/Search/Table/ProtocolLabel.css | 8 +- frontend/src/Search/Table/SearchIndexRow.css | 2 +- .../src/Settings/AdvancedSettingsButton.css | 6 +- .../Applications/Applications.css | 8 +- .../DownloadClients/DownloadClients.css | 8 +- .../IndexerProxies/IndexerProxies.css | 8 +- .../Notifications/Notifications.css | 8 +- .../src/Settings/Profiles/App/AppProfiles.css | 8 +- frontend/src/Settings/Settings.css | 4 +- .../Tags/Details/TagDetailsModalContent.css | 2 +- frontend/src/Styles/Mixins/scroller.css | 4 +- frontend/src/Styles/Themes/index.js | 4 +- frontend/src/Styles/Themes/light.js | 37 ++-- frontend/src/Styles/Variables/colors.js | 192 ------------------ frontend/src/Styles/scaffolding.css | 2 +- .../System/Events/LogsTableDetailsModal.css | 2 +- frontend/src/System/Events/LogsTableRow.css | 6 +- frontend/src/System/Status/styles.css | 4 +- frontend/src/index.css | 2 +- 90 files changed, 354 insertions(+), 547 deletions(-) delete mode 100644 frontend/src/Styles/Variables/colors.js diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js index 6d15f7369..f657adf28 100644 --- a/frontend/postcss.config.js +++ b/frontend/postcss.config.js @@ -1,7 +1,6 @@ const reload = require('require-nocache')(module); const cssVarsFiles = [ - './src/Styles/Variables/colors', './src/Styles/Variables/dimensions', './src/Styles/Variables/fonts', './src/Styles/Variables/animations', @@ -29,4 +28,4 @@ module.exports = { 'postcss-color-function', 'postcss-nested' ] -}; \ No newline at end of file +}; diff --git a/frontend/src/Components/Alert.css b/frontend/src/Components/Alert.css index 312fbb4f2..135d1ee2b 100644 --- a/frontend/src/Components/Alert.css +++ b/frontend/src/Components/Alert.css @@ -7,25 +7,25 @@ } .danger { - border-color: $alertDangerBorderColor; - background-color: $alertDangerBackgroundColor; - color: $alertDangerColor; + border-color: var(--alertDangerBorderColor); + background-color: var(--alertDangerBackgroundColor); + color: var(--alertDangerColor); } .info { - border-color: $alertInfoBorderColor; - background-color: $alertInfoBackgroundColor; - color: $alertInfoColor; + border-color: var(--alertInfoBorderColor); + background-color: var(--alertInfoBackgroundColor); + color: var(--alertInfoColor); } .success { - border-color: $alertSuccessBorderColor; - background-color: $alertSuccessBackgroundColor; - color: $alertSuccessColor; + border-color: var(--alertSuccessBorderColor); + background-color: var(--alertSuccessBackgroundColor); + color: var(--alertSuccessColor); } .warning { - border-color: $alertWarningBorderColor; - background-color: $alertWarningBackgroundColor; - color: $alertWarningColor; + border-color: var(--alertWarningBorderColor); + background-color: var(--alertWarningBackgroundColor); + color: var(--alertWarningColor); } diff --git a/frontend/src/Components/Card.css b/frontend/src/Components/Card.css index b54bbcdf4..49a9abd76 100644 --- a/frontend/src/Components/Card.css +++ b/frontend/src/Components/Card.css @@ -3,9 +3,9 @@ margin: 10px; padding: 10px; border-radius: 3px; - background-color: $white; - box-shadow: 0 0 10px 1px $cardShadowColor; - color: $defaultColor; + background-color: var(--cardBackgroundColor); + box-shadow: 0 0 10px 1px var(--cardShadowColor); + color: var(--defaultColor); } .underlay { diff --git a/frontend/src/Components/Chart/BarChart.js b/frontend/src/Components/Chart/BarChart.js index f52bd8a94..b9d7f0acc 100644 --- a/frontend/src/Components/Chart/BarChart.js +++ b/frontend/src/Components/Chart/BarChart.js @@ -2,15 +2,16 @@ import Chart from 'chart.js/auto'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { kinds } from 'Helpers/Props'; -import colors from 'Styles/Variables/colors'; function getColors(kind) { + const style = getComputedStyle(document.body); + if (kind === kinds.WARNING) { - return colors.failedColors.reverse(); + return style.getPropertyValue('--failedColors').split(','); } - return colors.chartColors; + return style.getPropertyValue('--chartColors').split(','); } class BarChart extends Component { diff --git a/frontend/src/Components/Chart/DoughnutChart.js b/frontend/src/Components/Chart/DoughnutChart.js index d358b97c2..dd5052e23 100644 --- a/frontend/src/Components/Chart/DoughnutChart.js +++ b/frontend/src/Components/Chart/DoughnutChart.js @@ -1,7 +1,12 @@ import Chart from 'chart.js/auto'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import colors from 'Styles/Variables/colors'; + +function getColors(kind) { + + const style = getComputedStyle(document.body); + return style.getPropertyValue('--chartColorsDiversified').split(','); +} class DoughnutChart extends Component { constructor(props) { @@ -29,7 +34,7 @@ class DoughnutChart extends Component { datasets: [{ label: this.props.title, data: this.props.data.map((d) => d.value), - backgroundColor: colors.chartColorsDiversified + backgroundColor: getColors() }] } }); diff --git a/frontend/src/Components/Chart/StackedBarChart.js b/frontend/src/Components/Chart/StackedBarChart.js index 6b5ed083f..d6e4879d2 100644 --- a/frontend/src/Components/Chart/StackedBarChart.js +++ b/frontend/src/Components/Chart/StackedBarChart.js @@ -1,7 +1,12 @@ import Chart from 'chart.js/auto'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import colors from 'Styles/Variables/colors'; + +function getColors(index) { + + const style = getComputedStyle(document.body); + return style.getPropertyValue('--chartColorsDiversified').split(',')[index]; +} class StackedBarChart extends Component { constructor(props) { @@ -41,7 +46,7 @@ class StackedBarChart extends Component { return { label: d.label, data: d.data, - backgroundColor: colors.chartColorsDiversified[index] + backgroundColor: getColors(index) }; }) } @@ -54,7 +59,7 @@ class StackedBarChart extends Component { return { label: d.label, data: d.data, - backgroundColor: colors.chartColorsDiversified[index] + backgroundColor: getColors(index) }; }); this.myChart.update(); diff --git a/frontend/src/Components/FieldSet.css b/frontend/src/Components/FieldSet.css index daf3bdf2e..c9a567c0e 100644 --- a/frontend/src/Components/FieldSet.css +++ b/frontend/src/Components/FieldSet.css @@ -13,7 +13,7 @@ width: 100%; border: 0; border-bottom: 1px solid #e5e5e5; - color: #3a3f51; + color: var(--textColor); font-size: 21px; line-height: inherit; } diff --git a/frontend/src/Components/FileBrowser/FileBrowserModalContent.css b/frontend/src/Components/FileBrowser/FileBrowserModalContent.css index 7ddb9e806..db31d6f86 100644 --- a/frontend/src/Components/FileBrowser/FileBrowserModalContent.css +++ b/frontend/src/Components/FileBrowser/FileBrowserModalContent.css @@ -13,7 +13,7 @@ } .faqLink { - color: $alertWarningColor; + color: var(--alertWarningColor); font-weight: bold; } diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRow.css b/frontend/src/Components/Filter/Builder/FilterBuilderRow.css index c5471b253..bcfc3b04e 100644 --- a/frontend/src/Components/Filter/Builder/FilterBuilderRow.css +++ b/frontend/src/Components/Filter/Builder/FilterBuilderRow.css @@ -3,7 +3,7 @@ margin-bottom: 5px; &:hover { - background-color: $tableRowHoverBackgroundColor; + background-color: var(--tableRowHoverBackgroundColor); } } diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css index 461a54aaa..56294d6f5 100644 --- a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css +++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css @@ -17,5 +17,5 @@ .or { margin: 0 3px; - color: $themeDarkColor; + color: var(--themeDarkColor); } diff --git a/frontend/src/Components/Filter/CustomFilters/CustomFilter.css b/frontend/src/Components/Filter/CustomFilters/CustomFilter.css index 7acb69dc7..e2b8c72bf 100644 --- a/frontend/src/Components/Filter/CustomFilters/CustomFilter.css +++ b/frontend/src/Components/Filter/CustomFilters/CustomFilter.css @@ -4,7 +4,7 @@ padding: 5px; &:hover { - background-color: $tableRowHoverBackgroundColor; + background-color: var(--tableRowHoverBackgroundColor); } } diff --git a/frontend/src/Components/Form/AutoSuggestInput.css b/frontend/src/Components/Form/AutoSuggestInput.css index 0f3279cb9..7dc416960 100644 --- a/frontend/src/Components/Form/AutoSuggestInput.css +++ b/frontend/src/Components/Form/AutoSuggestInput.css @@ -27,10 +27,10 @@ overflow-y: auto; max-height: 200px; width: 100%; - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-radius: 4px; - background-color: $white; - box-shadow: inset 0 1px 1px $inputBoxShadowColor; + background-color: var(--inputBackgroundColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor); } } @@ -46,5 +46,5 @@ } .suggestionHighlighted { - background-color: $menuItemHoverBackgroundColor; + background-color: var(--menuItemHoverBackgroundColor); } diff --git a/frontend/src/Components/Form/CheckInput.css b/frontend/src/Components/Form/CheckInput.css index e0b05eca3..171121482 100644 --- a/frontend/src/Components/Form/CheckInput.css +++ b/frontend/src/Components/Form/CheckInput.css @@ -32,21 +32,21 @@ height: 20px; border: 1px solid #ccc; border-radius: 2px; - background-color: $white; - color: $white; + background-color: var(--white); + color: var(--white); text-align: center; line-height: 20px; } .checkbox:focus + .input { outline: 0; - border-color: $inputFocusBorderColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor; + border-color: var(--inputFocusBorderColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor); } .dangerIsChecked { - border-color: $dangerColor; - background-color: $dangerColor; + border-color: var(--dangerColor); + background-color: var(--dangerColor); &.isDisabled { opacity: 0.7; @@ -54,8 +54,8 @@ } .primaryIsChecked { - border-color: $primaryColor; - background-color: $primaryColor; + border-color: var(--primaryColor); + background-color: var(--primaryColor); &.isDisabled { opacity: 0.7; @@ -63,8 +63,8 @@ } .successIsChecked { - border-color: $successColor; - background-color: $successColor; + border-color: var(--successColor); + background-color: var(--successColor); &.isDisabled { opacity: 0.7; @@ -72,8 +72,8 @@ } .warningIsChecked { - border-color: $warningColor; - background-color: $warningColor; + border-color: var(--warningColor); + background-color: var(--warningColor); &.isDisabled { opacity: 0.7; @@ -82,15 +82,15 @@ .isNotChecked { &.isDisabled { - border-color: $disabledCheckInputColor; - background-color: $disabledCheckInputColor; + border-color: var(--disabledCheckInputColor); + background-color: var(--disabledCheckInputColor); opacity: 0.7; } } .isIndeterminate { - border-color: $gray; - background-color: $gray; + border-color: var(--gray); + background-color: var(--gray); } .helpText { diff --git a/frontend/src/Components/Form/EnhancedSelectInput.css b/frontend/src/Components/Form/EnhancedSelectInput.css index f971f6517..cb841eb67 100644 --- a/frontend/src/Components/Form/EnhancedSelectInput.css +++ b/frontend/src/Components/Form/EnhancedSelectInput.css @@ -39,7 +39,7 @@ .dropdownArrowContainerDisabled { composes: dropdownArrowContainer; - color: $disabledInputColor; + color: var(--disabledInputColor); } .optionsContainer { @@ -50,9 +50,9 @@ .options { composes: scroller from '~Components/Scroller/Scroller.css'; - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-radius: 4px; - background-color: $white; + background-color: var(--inputBackgroundColor); } .optionsModal { @@ -76,9 +76,9 @@ .optionsModalScroller { composes: scroller from '~Components/Scroller/Scroller.css'; - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-radius: 4px; - background-color: $white; + background-color: var(--white); } .loading { @@ -90,7 +90,7 @@ display: flex; justify-content: flex-end; height: 40px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); } .mobileCloseButton { @@ -100,6 +100,6 @@ line-height: 40px; &:hover { - color: $modalCloseButtonHoverColor; + color: var(--modalCloseButtonHoverColor); } } diff --git a/frontend/src/Components/Form/EnhancedSelectInputOption.css b/frontend/src/Components/Form/EnhancedSelectInputOption.css index f6b6136ae..8dcfa25d5 100644 --- a/frontend/src/Components/Form/EnhancedSelectInputOption.css +++ b/frontend/src/Components/Form/EnhancedSelectInputOption.css @@ -7,7 +7,7 @@ cursor: default; &:hover { - background-color: #f8f8f8; + background-color: var(--inputHoverBackgroundColor); } } @@ -24,17 +24,17 @@ } .isSelected { - background-color: #e2e2e2; + background-color: var(--inputSelectedBackgroundColor); &:hover { - background-color: #e2e2e2; + background-color: var(--inputSelectedBackgroundColor); } &.isMobile { background-color: inherit; .iconContainer { - color: $primaryColor; + color: var(--primaryColor); } } } @@ -49,7 +49,7 @@ .isMobile { height: 50px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); &:last-child { border: none; diff --git a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css b/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css index 6b8b73af9..908126689 100644 --- a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css +++ b/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css @@ -3,5 +3,5 @@ } .isDisabled { - color: $disabledInputColor; + color: var(--disabledInputColor); } diff --git a/frontend/src/Components/Form/FormInputGroup.css b/frontend/src/Components/Form/FormInputGroup.css index 1a1b104e6..32d91e29b 100644 --- a/frontend/src/Components/Form/FormInputGroup.css +++ b/frontend/src/Components/Form/FormInputGroup.css @@ -40,7 +40,7 @@ } .pendingChangesIcon { - color: $warningColor; + color: var(--warningColor); font-size: 20px; line-height: 35px; } diff --git a/frontend/src/Components/Form/FormInputHelpText.css b/frontend/src/Components/Form/FormInputHelpText.css index 756fd90db..0a6897d27 100644 --- a/frontend/src/Components/Form/FormInputHelpText.css +++ b/frontend/src/Components/Form/FormInputHelpText.css @@ -1,14 +1,14 @@ .helpText { margin-top: 5px; - color: $helpTextColor; + color: var(--helpTextColor); line-height: 20px; } .isError { - color: $dangerColor; + color: var(--dangerColor); .link { - color: $dangerColor; + color: var(--dangerColor); &:hover { color: #e01313; @@ -17,10 +17,10 @@ } .isWarning { - color: $warningColor; + color: var(--warningColor); .link { - color: $warningColor; + color: var(--warningColor); &:hover { color: #e36c00; diff --git a/frontend/src/Components/Form/FormLabel.css b/frontend/src/Components/Form/FormLabel.css index 236f4aab0..074b6091d 100644 --- a/frontend/src/Components/Form/FormLabel.css +++ b/frontend/src/Components/Form/FormLabel.css @@ -7,11 +7,11 @@ } .hasError { - color: $dangerColor; + color: var(--dangerColor); } .isAdvanced { - color: $advancedFormLabelColor; + color: var(--advancedFormLabelColor); } @media only screen and (max-width: $breakpointLarge) { diff --git a/frontend/src/Components/Form/HintedSelectInputOption.css b/frontend/src/Components/Form/HintedSelectInputOption.css index 74d1fb088..74bf6a86e 100644 --- a/frontend/src/Components/Form/HintedSelectInputOption.css +++ b/frontend/src/Components/Form/HintedSelectInputOption.css @@ -18,6 +18,6 @@ @add-mixin truncate; margin-left: 15px; - color: $darkGray; + color: var(--darkGray); font-size: $smallFontSize; } diff --git a/frontend/src/Components/Form/HintedSelectInputSelectedValue.css b/frontend/src/Components/Form/HintedSelectInputSelectedValue.css index a31970a9e..f779b83d7 100644 --- a/frontend/src/Components/Form/HintedSelectInputSelectedValue.css +++ b/frontend/src/Components/Form/HintedSelectInputSelectedValue.css @@ -18,7 +18,7 @@ flex: 1 10 0; margin-left: 15px; - color: $gray; + color: var(--gray); text-align: right; font-size: $smallFontSize; } diff --git a/frontend/src/Components/Form/Input.css b/frontend/src/Components/Form/Input.css index e9ca23d8f..dd9ee888d 100644 --- a/frontend/src/Components/Form/Input.css +++ b/frontend/src/Components/Form/Input.css @@ -2,26 +2,27 @@ padding: 6px 16px; width: 100%; height: 35px; - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-radius: 4px; - background-color: $white; - box-shadow: inset 0 1px 1px $inputBoxShadowColor; + background-color: var(--inputBackgroundColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor); + color: var(--textColor); &:focus { outline: 0; - border-color: $inputFocusBorderColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor; + border-color: var(--inputFocusBorderColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor); } } .hasError { - border-color: $inputErrorBorderColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputErrorBoxShadowColor; + border-color: var(--inputErrorBorderColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputErrorBoxShadowColor); } .hasWarning { - border-color: $inputWarningBorderColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputWarningBoxShadowColor; + border-color: var(--inputWarningBorderColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputWarningBoxShadowColor); } .hasButton { diff --git a/frontend/src/Components/Form/KeyValueListInput.css b/frontend/src/Components/Form/KeyValueListInput.css index 8bf23610b..d86e6a512 100644 --- a/frontend/src/Components/Form/KeyValueListInput.css +++ b/frontend/src/Components/Form/KeyValueListInput.css @@ -7,8 +7,8 @@ &.isFocused { outline: 0; - border-color: $inputFocusBorderColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor; + border-color: var(--inputFocusBorderColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor); } } diff --git a/frontend/src/Components/Form/KeyValueListInputItem.css b/frontend/src/Components/Form/KeyValueListInputItem.css index e136823c2..88c5847ee 100644 --- a/frontend/src/Components/Form/KeyValueListInputItem.css +++ b/frontend/src/Components/Form/KeyValueListInputItem.css @@ -1,7 +1,7 @@ .itemContainer { display: flex; margin-bottom: 3px; - border-bottom: 1px solid $inputBorderColor; + border-bottom: 1px solid var(--inputBorderColor); &:last-child { margin-bottom: 0; diff --git a/frontend/src/Components/Form/TagInput.css b/frontend/src/Components/Form/TagInput.css index 1516bfb1d..83ff2a02c 100644 --- a/frontend/src/Components/Form/TagInput.css +++ b/frontend/src/Components/Form/TagInput.css @@ -7,8 +7,8 @@ &.isFocused { outline: 0; - border-color: $inputFocusBorderColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor; + border-color: var(--inputFocusBorderColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor); } } @@ -20,4 +20,6 @@ width: 0%; height: 31px; border: none; + background-color: var(--inputBackground); + color: var(--textColor); } diff --git a/frontend/src/Components/Form/TextArea.css b/frontend/src/Components/Form/TextArea.css index 7a4961c07..5f357cef6 100644 --- a/frontend/src/Components/Form/TextArea.css +++ b/frontend/src/Components/Form/TextArea.css @@ -7,7 +7,7 @@ } .readOnly { - background-color: #eee; + background-color: var(--inputReadOnlyBackgroundColor); } .hasError { diff --git a/frontend/src/Components/Form/TextInput.css b/frontend/src/Components/Form/TextInput.css index 80503704d..a3d9692c6 100644 --- a/frontend/src/Components/Form/TextInput.css +++ b/frontend/src/Components/Form/TextInput.css @@ -3,7 +3,7 @@ } .readOnly { - background-color: #eee; + background-color: var(--inputReadOnlyBackgroundColor); } .hasError { diff --git a/frontend/src/Components/Icon.css b/frontend/src/Components/Icon.css index db95e019b..9dbbfef76 100644 --- a/frontend/src/Components/Icon.css +++ b/frontend/src/Components/Icon.css @@ -1,5 +1,5 @@ .danger { - color: $dangerColor; + color: var(--dangerColor); } .default { @@ -7,25 +7,21 @@ } .disabled { - color: $disabledColor; + color: var(--disabledColor); } .info { - color: $infoColor; -} - -.pink { - color: $pink; + color: var(--infoColor); } .success { - color: $successColor; + color: var(--successColor); } .warning { - color: $warningColor; + color: var(--warningColor); } .purple { - color: $purple; + color: var(--purple); } diff --git a/frontend/src/Components/InfoLabel.css b/frontend/src/Components/InfoLabel.css index c75044b66..6a2f5601b 100644 --- a/frontend/src/Components/InfoLabel.css +++ b/frontend/src/Components/InfoLabel.css @@ -1,7 +1,7 @@ .label { display: inline-block; margin: 2px; - color: $white; + color: var(--white); /** text-align: center; **/ white-space: nowrap; line-height: 1; @@ -10,7 +10,7 @@ .title { margin-bottom: 2px; - color: $helpTextColor; + color: var(--helpTextColor); font-size: 10px; } @@ -36,5 +36,5 @@ /** Outline **/ .outline { - background-color: $white; + background-color: var(--white); } diff --git a/frontend/src/Components/Label.css b/frontend/src/Components/Label.css index b54bba63b..84b12552b 100644 --- a/frontend/src/Components/Label.css +++ b/frontend/src/Components/Label.css @@ -3,7 +3,7 @@ margin: 2px; border: 1px solid; border-radius: 2px; - color: $white; + color: var(--white); text-align: center; white-space: nowrap; line-height: 1; @@ -13,86 +13,77 @@ /** Kinds **/ .danger { - border-color: $dangerColor; - background-color: $dangerColor; + border-color: var(--dangerColor); + background-color: var(--dangerColor); &.outline { - color: $dangerColor; + color: var(--dangerColor); } } .default { - border-color: $themeLightColor; - background-color: $themeLightColor; + border-color: var(--themeLightColor); + background-color: var(--themeLightColor); &.outline { - color: $themeLightColor; + color: var(--themeLightColor); } } .disabled { - border-color: $disabledColor; - background-color: $disabledColor; + border-color: var(--disabledColor); + background-color: var(--disabledColor); &.outline { - color: $disabledColor; + color: var(--disabledColor); } } .info { - border-color: $infoColor; - background-color: $infoColor; + border-color: var(--infoColor); + background-color: var(--infoColor); &.outline { - color: $infoColor; + color: var(--infoColor); } } .inverse { - border-color: $lightGray; - background-color: $lightGray; - color: $defaultColor; + border-color: var(--inverseLabelColor); + background-color: var(--inverseLabelColor); + color: var(--inverseLabelTextColor); &.outline { - background-color: $defaultColor !important; - color: $lightGray; + background-color: var(--inverseLabelTextColor) !important; + color: var(--inverseLabelColor); } } .primary { - border-color: $primaryColor; - background-color: $primaryColor; + border-color: var(--primaryColor); + background-color: var(--primaryColor); &.outline { - color: $primaryColor; + color: var(--primaryColor); } } .success { - border-color: $successColor; - background-color: $successColor; + border-color: var(--successColor); + background-color: var(--successColor); color: #eee; &.outline { - color: $successColor; + color: var(--successColor); } } .warning { - border-color: $warningColor; - background-color: $warningColor; + border-color: var(--warningColor); + background-color: var(--warningColor); &.outline { - color: $warningColor; - } -} - -.queue { - border-color: $queueColor; - background-color: $queueColor; - - &.outline { - color: $queueColor; + color: var(--warningColor); } } @@ -117,5 +108,5 @@ /** Outline **/ .outline { - background-color: $white; + background-color: var(--white); } diff --git a/frontend/src/Components/Link/Button.css b/frontend/src/Components/Link/Button.css index d5b7e8200..1ef2eb4b3 100644 --- a/frontend/src/Components/Link/Button.css +++ b/frontend/src/Components/Link/Button.css @@ -19,62 +19,62 @@ } .danger { - border-color: $dangerBorderColor; - background-color: $dangerBackgroundColor; - color: $white; + border-color: var(--dangerBorderColor); + background-color: var(--dangerBackgroundColor); + color: var(--white); &:hover { - border-color: $dangerHoverBorderColor; - background-color: $dangerHoverBackgroundColor; - color: $white; + border-color: var(--dangerHoverBorderColor); + background-color: var(--dangerHoverBackgroundColor); + color: var(--white); } } .default { - border-color: $defaultBorderColor; - background-color: $defaultBackgroundColor; - color: $defaultColor; + border-color: var(--defaultBorderColor); + background-color: var(--defaultButtonBackgroundColor); + color: var(--defaultButtonTextColor); &:hover { - border-color: $defaultHoverBorderColor; - background-color: $defaultHoverBackgroundColor; - color: $defaultColor; + border-color: var(--defaultHoverBorderColor); + background-color: var(--defaultHoverBackgroundColor); + color: var(--defaultButtonTextColor); } } .primary { - border-color: $primaryBorderColor; - background-color: $primaryBackgroundColor; - color: $white; + border-color: var(--primaryBorderColor); + background-color: var(--primaryBackgroundColor); + color: var(--white); &:hover { - border-color: $primaryHoverBorderColor; - background-color: $primaryHoverBackgroundColor; - color: $white; + border-color: var(--primaryHoverBorderColor); + background-color: var(--primaryHoverBackgroundColor); + color: var(--white); } } .success { - border-color: $successBorderColor; - background-color: $successBackgroundColor; - color: $white; + border-color: var(--successBorderColor); + background-color: var(--successBackgroundColor); + color: var(--white); &:hover { - border-color: $successHoverBorderColor; - background-color: $successHoverBackgroundColor; - color: $white; + border-color: var(--successHoverBorderColor); + background-color: var(--successHoverBackgroundColor); + color: var(--white); } } .warning { - border-color: $warningBorderColor; - background-color: $warningBackgroundColor; - color: $white; + border-color: var(--warningBorderColor); + background-color: var(--warningBackgroundColor); + color: var(--white); &:hover { - border-color: $warningHoverBorderColor; - background-color: $warningHoverBackgroundColor; - color: $white; + border-color: var(--warningHoverBorderColor); + background-color: var(--warningHoverBackgroundColor); + color: var(--white); } } diff --git a/frontend/src/Components/Link/IconButton.css b/frontend/src/Components/Link/IconButton.css index 2061243ee..b697e3bd4 100644 --- a/frontend/src/Components/Link/IconButton.css +++ b/frontend/src/Components/Link/IconButton.css @@ -12,10 +12,10 @@ &:hover { border: none; background-color: inherit; - color: $iconButtonHoverColor; + color: var(--iconButtonHoverColor); } &.isDisabled { - color: $iconButtonDisabledColor; + color: var(--iconButtonDisabledColor); } } diff --git a/frontend/src/Components/Link/Link.css b/frontend/src/Components/Link/Link.css index ff0ed8d0c..47b6fb852 100644 --- a/frontend/src/Components/Link/Link.css +++ b/frontend/src/Components/Link/Link.css @@ -15,10 +15,10 @@ } .to { - color: $linkColor; + color: var(--linkColor); &:hover { - color: $linkHoverColor; + color: var(--linkHoverColor); text-decoration: underline; } } diff --git a/frontend/src/Components/Loading/LoadingIndicator.css b/frontend/src/Components/Loading/LoadingIndicator.css index fd224b1d6..8732d786b 100644 --- a/frontend/src/Components/Loading/LoadingIndicator.css +++ b/frontend/src/Components/Loading/LoadingIndicator.css @@ -26,7 +26,7 @@ .ripple { position: absolute; - border: 2px solid #3a3f51; + border: 2px solid var(--themeDarkColor); border-radius: 100%; animation: rippleContainer 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); animation-fill-mode: both; diff --git a/frontend/src/Components/Menu/MenuButton.css b/frontend/src/Components/Menu/MenuButton.css index 38812cfb7..ef7a8a5ff 100644 --- a/frontend/src/Components/Menu/MenuButton.css +++ b/frontend/src/Components/Menu/MenuButton.css @@ -10,12 +10,12 @@ } &:hover { - color: $toobarButtonHoverColor; + color: var(--toobarButtonHoverColor); } } .isDisabled { - color: $disabledColor; + color: var(--disabledColor); pointer-events: none; } diff --git a/frontend/src/Components/Menu/MenuContent.css b/frontend/src/Components/Menu/MenuContent.css index b9327fdd7..d6c990131 100644 --- a/frontend/src/Components/Menu/MenuContent.css +++ b/frontend/src/Components/Menu/MenuContent.css @@ -2,7 +2,7 @@ z-index: $popperZIndex; display: flex; flex-direction: column; - background-color: $toolbarMenuItemBackgroundColor; + background-color: var(--toolbarMenuItemBackgroundColor); line-height: 20px; } diff --git a/frontend/src/Components/Menu/MenuItem.css b/frontend/src/Components/Menu/MenuItem.css index 2eb2817af..a14a06014 100644 --- a/frontend/src/Components/Menu/MenuItem.css +++ b/frontend/src/Components/Menu/MenuItem.css @@ -5,19 +5,19 @@ padding: 10px 20px; min-width: 150px; max-width: 250px; - background-color: $toolbarMenuItemBackgroundColor; - color: $menuItemColor; + background-color: var(--toolbarMenuItemBackgroundColor); + color: var(--menuItemColor); line-height: 20px; &:hover, &:focus { - background-color: $toolbarMenuItemHoverBackgroundColor; - color: $menuItemHoverColor; + background-color: var(--toolbarMenuItemHoverBackgroundColor); + color: var(--menuItemHoverColor); text-decoration: none; } } .isDisabled { - color: $disabledColor; + color: var(--disabledColor); pointer-events: none; } diff --git a/frontend/src/Components/Menu/MenuItemSeparator.css b/frontend/src/Components/Menu/MenuItemSeparator.css index e48e7f16f..199b15b56 100644 --- a/frontend/src/Components/Menu/MenuItemSeparator.css +++ b/frontend/src/Components/Menu/MenuItemSeparator.css @@ -2,5 +2,5 @@ overflow: hidden; min-height: 1px; height: 1px; - background-color: $themeDarkColor; + background-color: var(--themeDarkColor); } diff --git a/frontend/src/Components/Modal/Modal.css b/frontend/src/Components/Modal/Modal.css index d7269ea46..33f849945 100644 --- a/frontend/src/Components/Modal/Modal.css +++ b/frontend/src/Components/Modal/Modal.css @@ -12,7 +12,7 @@ justify-content: center; width: 100%; height: 100%; - background-color: $modalBackdropBackgroundColor; + background-color: var(--modalBackdropBackgroundColor); opacity: 1; } diff --git a/frontend/src/Components/Modal/ModalContent.css b/frontend/src/Components/Modal/ModalContent.css index afd798dfa..d7a1212ec 100644 --- a/frontend/src/Components/Modal/ModalContent.css +++ b/frontend/src/Components/Modal/ModalContent.css @@ -4,7 +4,7 @@ flex-direction: column; flex-grow: 1; width: 100%; - background-color: $modalBackgroundColor; + background-color: var(--modalBackgroundColor); } .closeButton { @@ -18,6 +18,6 @@ line-height: 60px; &:hover { - color: $modalCloseButtonHoverColor; + color: var(--modalCloseButtonHoverColor); } } diff --git a/frontend/src/Components/Modal/ModalFooter.css b/frontend/src/Components/Modal/ModalFooter.css index 3b817d2bf..9ce992b2e 100644 --- a/frontend/src/Components/Modal/ModalFooter.css +++ b/frontend/src/Components/Modal/ModalFooter.css @@ -4,7 +4,7 @@ justify-content: flex-end; flex-shrink: 0; padding: 15px 30px; - border-top: 1px solid $borderColor; + border-top: 1px solid var(--borderColor); a, button { diff --git a/frontend/src/Components/Modal/ModalHeader.css b/frontend/src/Components/Modal/ModalHeader.css index eab77a9f8..cd1e54d84 100644 --- a/frontend/src/Components/Modal/ModalHeader.css +++ b/frontend/src/Components/Modal/ModalHeader.css @@ -3,6 +3,6 @@ flex-shrink: 0; padding: 15px 50px 15px 30px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); font-size: 18px; } diff --git a/frontend/src/Components/Page/Header/IndexerSearchInput.css b/frontend/src/Components/Page/Header/IndexerSearchInput.css index fb1b876e2..5ce43e503 100644 --- a/frontend/src/Components/Page/Header/IndexerSearchInput.css +++ b/frontend/src/Components/Page/Header/IndexerSearchInput.css @@ -12,22 +12,22 @@ .ripple { composes: ripple from '~Components/Loading/LoadingIndicator.css'; - border: 1px solid $toolbarColor; + border: 1px solid var(--toolbarColor); } .input { margin-left: 8px; width: 200px; border: none; - border-bottom: solid 1px $white; + border-bottom: solid 1px var(--white); border-radius: 0; background-color: transparent; box-shadow: none; - color: $white; + color: var(--white); transition: border 0.3s ease-out; &::placeholder { - color: $white; + color: var(--white); transition: color 0.3s ease-out; } @@ -60,13 +60,13 @@ overflow-y: auto; min-width: 100%; max-height: 230px; - border: 1px solid $themeDarkColor; + border: 1px solid var(--themeDarkColor); border-radius: 4px; border-top-left-radius: 0; border-top-right-radius: 0; - background-color: $themeDarkColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor; - color: $menuItemColor; + background-color: var(--themeDarkColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor); + color: var(--menuItemColor); } } @@ -82,12 +82,12 @@ } .highlighted { - background-color: $themeLightColor; + background-color: var(--themeLightColor); } .sectionTitle { padding: 5px 8px; - color: $disabledColor; + color: var(--disabledColor); } .addNewMovieSuggestion { diff --git a/frontend/src/Components/Page/Header/IndexerSearchResult.css b/frontend/src/Components/Page/Header/IndexerSearchResult.css index 29edc382b..5a5343633 100644 --- a/frontend/src/Components/Page/Header/IndexerSearchResult.css +++ b/frontend/src/Components/Page/Header/IndexerSearchResult.css @@ -21,7 +21,7 @@ .alternateTitle { composes: title; - color: $disabledColor; + color: var(--disabledColor); font-size: $smallFontSize; } diff --git a/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css b/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css index 4425e0e0d..e8a2b0ce2 100644 --- a/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css +++ b/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css @@ -8,8 +8,8 @@ .key { padding: 2px 4px; border-radius: 3px; - background-color: $defaultColor; + background-color: var(--defaultColor); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); - color: $white; + color: var(--white); font-size: 16px; } diff --git a/frontend/src/Components/Page/Header/PageHeader.css b/frontend/src/Components/Page/Header/PageHeader.css index 36a5847c8..b5830594b 100644 --- a/frontend/src/Components/Page/Header/PageHeader.css +++ b/frontend/src/Components/Page/Header/PageHeader.css @@ -4,9 +4,9 @@ align-items: center; flex: 0 0 auto; height: $headerHeight; - background-color: $prowlarrOrange; + background-color: var(--pageHeaderBackgroundColor); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - color: $white; + color: var(--white); } .logoContainer { @@ -80,7 +80,7 @@ align-items: center; justify-content: center; width: 30px; - color: $themeRed; + color: var(--themeRed); text-align: center; line-height: 60px; diff --git a/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css b/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css index d2cece6e5..26a5d37da 100644 --- a/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css +++ b/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css @@ -5,7 +5,7 @@ text-align: center; &:hover { - color: $toobarButtonHoverColor; + color: var(--toobarButtonHoverColor); } } diff --git a/frontend/src/Components/Page/LoadingPage.css b/frontend/src/Components/Page/LoadingPage.css index 337f77f1a..8683ed41e 100644 --- a/frontend/src/Components/Page/LoadingPage.css +++ b/frontend/src/Components/Page/LoadingPage.css @@ -1,5 +1,7 @@ .page { composes: page from '~./Page.css'; + + background-color: var(--pageBackground); } .logoFull { diff --git a/frontend/src/Components/Page/PageContentFooter.css b/frontend/src/Components/Page/PageContentFooter.css index 74bdb3811..cd942ea7d 100644 --- a/frontend/src/Components/Page/PageContentFooter.css +++ b/frontend/src/Components/Page/PageContentFooter.css @@ -2,7 +2,7 @@ display: flex; flex: 0 0 auto; padding: 20px; - background-color: #f1f1f1; + background-color: var(--pageFooterBackground); } @media only screen and (max-width: $breakpointSmall) { diff --git a/frontend/src/Components/Page/PageJumpBarItem.css b/frontend/src/Components/Page/PageJumpBarItem.css index f1a0c3699..235562a2e 100644 --- a/frontend/src/Components/Page/PageJumpBarItem.css +++ b/frontend/src/Components/Page/PageJumpBarItem.css @@ -1,6 +1,6 @@ .jumpBarItem { flex: 1 1 $jumpBarItemHeight; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); text-align: center; font-weight: bold; diff --git a/frontend/src/Components/Page/Sidebar/Messages/Message.css b/frontend/src/Components/Page/Sidebar/Messages/Message.css index 7d53adb69..d1d94ce08 100644 --- a/frontend/src/Components/Page/Sidebar/Messages/Message.css +++ b/frontend/src/Components/Page/Sidebar/Messages/Message.css @@ -1,6 +1,6 @@ .message { display: flex; - border-left: 3px solid $infoColor; + border-left: 3px solid var(--infoColor); } .iconContainer, @@ -9,7 +9,7 @@ justify-content: center; flex-direction: column; padding: 2px 0; - color: $sidebarColor; + color: var(--sidebarColor); } .iconContainer { @@ -26,17 +26,17 @@ /* Types */ .error { - border-left-color: $dangerColor; + border-left-color: var(--dangerColor); } .info { - border-left-color: $infoColor; + border-left-color: var(--infoColor); } .success { - border-left-color: $successColor; + border-left-color: var(--successColor); } .warning { - border-left-color: $warningColor; + border-left-color: var(--warningColor); } diff --git a/frontend/src/Components/Page/Sidebar/PageSidebar.css b/frontend/src/Components/Page/Sidebar/PageSidebar.css index 3f2abeee7..ee44c0407 100644 --- a/frontend/src/Components/Page/Sidebar/PageSidebar.css +++ b/frontend/src/Components/Page/Sidebar/PageSidebar.css @@ -2,7 +2,7 @@ flex: 0 0 $sidebarWidth; overflow: hidden; width: $sidebarWidth; - background-color: $sidebarBackgroundColor; + background-color: var(--sidebarBackgroundColor); transition: transform 300ms ease-in-out; transform: translateX(0); } @@ -11,8 +11,8 @@ display: flex; flex-direction: column; overflow: hidden; - background-color: $sidebarBackgroundColor; - color: $white; + background-color: var(--sidebarBackgroundColor); + color: var(--white); } @media only screen and (max-width: $breakpointSmall) { diff --git a/frontend/src/Components/Page/Sidebar/PageSidebarItem.css b/frontend/src/Components/Page/Sidebar/PageSidebarItem.css index dac40927f..5e3e3b52c 100644 --- a/frontend/src/Components/Page/Sidebar/PageSidebarItem.css +++ b/frontend/src/Components/Page/Sidebar/PageSidebarItem.css @@ -1,21 +1,21 @@ .item { border-left: 3px solid transparent; - color: $sidebarColor; + color: var(--sidebarColor); transition: border-left 0.3s ease-in-out; } .isActiveItem { - border-left: 3px solid $themeBlue; + border-left: 3px solid var(--themeBlue); } .link { display: block; padding: 12px 24px; - color: $sidebarColor; + color: var(--sidebarColor); &:hover, &:focus { - color: $themeBlue; + color: var(--themeBlue); text-decoration: none; } } @@ -27,11 +27,11 @@ } .isActiveLink { - color: $themeBlue; + color: var(--themeBlue); } .isActiveParentLink { - background-color: $sidebarActiveBackgroundColor; + background-color: var(--sidebarActiveBackgroundColor); } .iconContainer { diff --git a/frontend/src/Components/Page/Toolbar/PageToolbar.css b/frontend/src/Components/Page/Toolbar/PageToolbar.css index e040bc884..d7fb0d5d8 100644 --- a/frontend/src/Components/Page/Toolbar/PageToolbar.css +++ b/frontend/src/Components/Page/Toolbar/PageToolbar.css @@ -4,8 +4,8 @@ flex: 0 0 auto; padding: 0 20px; height: $toolbarHeight; - background-color: $toolbarBackgroundColor; - color: $toolbarColor; + background-color: var(--toolbarBackgroundColor); + color: var(--toolbarColor); line-height: 60px; } diff --git a/frontend/src/Components/Page/Toolbar/PageToolbarButton.css b/frontend/src/Components/Page/Toolbar/PageToolbarButton.css index e729ed000..0b6918296 100644 --- a/frontend/src/Components/Page/Toolbar/PageToolbarButton.css +++ b/frontend/src/Components/Page/Toolbar/PageToolbarButton.css @@ -6,16 +6,16 @@ text-align: center; &:hover { - color: $toobarButtonHoverColor; + color: var(--toobarButtonHoverColor); } &.isDisabled { - color: $disabledColor; + color: var(--disabledColor); } } .isDisabled { - color: $disabledColor; + color: var(--disabledColor); } .labelContainer { @@ -27,7 +27,7 @@ .label { padding: 0 3px; - color: $toolbarLabelColor; + color: var(--toolbarLabelColor); font-size: $extraSmallFontSize; line-height: calc($extraSmallFontSize + 1px); } diff --git a/frontend/src/Components/ProgressBar.css b/frontend/src/Components/ProgressBar.css index f95514478..81510545a 100644 --- a/frontend/src/Components/ProgressBar.css +++ b/frontend/src/Components/ProgressBar.css @@ -14,13 +14,13 @@ width: 0; height: 100%; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - color: $white; + color: var(--white); transition: width 0.6s ease; } .frontTextContainer { z-index: 1; - color: $white; + color: var(--white); } .backTextContainer, @@ -42,39 +42,35 @@ } .primary { - background-color: $primaryColor; + background-color: var(--primaryColor); } .danger { - background-color: $dangerColor; + background-color: var(--dangerColor); &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px); + background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px); } } .success { - background-color: $successColor; + background-color: var(--successColor); } .purple { - background-color: $purple; + background-color: var(--purple); } .warning { - background-color: $warningColor; + background-color: var(--warningColor); &:global(.colorImpaired) { - background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px); + background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px); } } .info { - background-color: $infoColor; -} - -.queue { - background-color: $queueColor; + background-color: var(--infoColor); } .small { diff --git a/frontend/src/Components/Scroller/OverlayScroller.css b/frontend/src/Components/Scroller/OverlayScroller.css index 0e8a2ffd7..c1836d365 100644 --- a/frontend/src/Components/Scroller/OverlayScroller.css +++ b/frontend/src/Components/Scroller/OverlayScroller.css @@ -10,10 +10,10 @@ min-height: 100px; border: 1px solid transparent; border-radius: 5px; - background-color: $scrollbarBackgroundColor; + background-color: var(--scrollbarBackgroundColor); background-clip: padding-box; &:hover { - background-color: $scrollbarHoverBackgroundColor; + background-color: var(--scrollbarHoverBackgroundColor); } } diff --git a/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css b/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css index 204773c3d..ef3d9b062 100644 --- a/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css +++ b/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css @@ -4,7 +4,7 @@ width: 100%; border: 1px solid #aaa; border-radius: 4px; - background: #fafafa; + background: var(--inputBackgroundColor); } .checkContainer { diff --git a/frontend/src/Components/Table/TablePager.css b/frontend/src/Components/Table/TablePager.css index 19f5a8f6b..d73a0d0c0 100644 --- a/frontend/src/Components/Table/TablePager.css +++ b/frontend/src/Components/Table/TablePager.css @@ -46,11 +46,11 @@ } .records { - color: $disabledColor; + color: var(--disabledColor); } .disabledPageButton { - color: $disabledColor; + color: var(--disabledColor); } .pageSelect { diff --git a/frontend/src/Components/Table/TableRow.css b/frontend/src/Components/Table/TableRow.css index dcc6ad8cf..df297a5fe 100644 --- a/frontend/src/Components/Table/TableRow.css +++ b/frontend/src/Components/Table/TableRow.css @@ -2,6 +2,6 @@ transition: background-color 500ms; &:hover { - background-color: $tableRowHoverBackgroundColor; + background-color: var(--tableRowHoverBackgroundColor); } } diff --git a/frontend/src/Components/Table/VirtualTableRow.css b/frontend/src/Components/Table/VirtualTableRow.css index f4c825b64..fcae53bf6 100644 --- a/frontend/src/Components/Table/VirtualTableRow.css +++ b/frontend/src/Components/Table/VirtualTableRow.css @@ -3,7 +3,7 @@ transition: background-color 500ms; &:hover { - background-color: #fafbfc; + background-color: var(--tableRowHoverBackgroundColor); } } diff --git a/frontend/src/Components/Tooltip/Popover.css b/frontend/src/Components/Tooltip/Popover.css index 7b0592844..d392bab46 100644 --- a/frontend/src/Components/Tooltip/Popover.css +++ b/frontend/src/Components/Tooltip/Popover.css @@ -1,7 +1,7 @@ .title { padding: 10px 20px; - border-bottom: 1px solid $popoverTitleBorderColor; - background-color: $popoverTitleBackgroundColor; + border-bottom: 1px solid var(--popoverTitleBorderColor); + background-color: var(--popoverTitleBackgroundColor); font-size: 16px; } diff --git a/frontend/src/Components/Tooltip/Tooltip.css b/frontend/src/Components/Tooltip/Tooltip.css index c5ddc7272..82c80752a 100644 --- a/frontend/src/Components/Tooltip/Tooltip.css +++ b/frontend/src/Components/Tooltip/Tooltip.css @@ -7,13 +7,13 @@ position: relative; &.default { - background-color: $white; - box-shadow: 0 5px 10px $popoverShadowColor; + background-color: var(--white); + box-shadow: 0 5px 10px var(--popoverShadowColor); } &.inverse { - background-color: $themeDarkColor; - box-shadow: 0 5px 10px $popoverShadowInverseColor; + background-color: var(--themeDarkColor); + box-shadow: 0 5px 10px var(--popoverShadowInverseColor); } } @@ -49,20 +49,20 @@ content: ' '; &.default { - border-top-color: $popoverArrowBorderColor; + border-top-color: var(--popoverArrowBorderColor); } &.inverse { - border-top-color: $popoverArrowBorderInverseColor; + border-top-color: var(--popoverArrowBorderInverseColor); } } &.default { - border-top-color: $popoverArrowBorderColor; + border-top-color: var(--popoverArrowBorderColor); } &.inverse { - border-top-color: $popoverArrowBorderInverseColor; + border-top-color: var(--popoverArrowBorderInverseColor); } } @@ -78,20 +78,20 @@ content: ' '; &.default { - border-right-color: $popoverArrowBorderColor; + border-right-color: var(--popoverArrowBorderColor); } &.inverse { - border-right-color: $popoverArrowBorderInverseColor; + border-right-color: var(--popoverArrowBorderInverseColor); } } &.default { - border-right-color: $popoverArrowBorderColor; + border-right-color: var(--popoverArrowBorderColor); } &.inverse { - border-right-color: $popoverArrowBorderInverseColor; + border-right-color: var(--popoverArrowBorderInverseColor); } } @@ -107,20 +107,20 @@ content: ' '; &.default { - border-bottom-color: $popoverArrowBorderColor; + border-bottom-color: var(--popoverArrowBorderColor); } &.inverse { - border-bottom-color: $popoverArrowBorderInverseColor; + border-bottom-color: var(--popoverArrowBorderInverseColor); } } &.default { - border-bottom-color: $popoverArrowBorderColor; + border-bottom-color: var(--popoverArrowBorderColor); } &.inverse { - border-bottom-color: $popoverArrowBorderInverseColor; + border-bottom-color: var(--popoverArrowBorderInverseColor); } } @@ -136,20 +136,20 @@ content: ' '; &.default { - border-left-color: $popoverArrowBorderColor; + border-left-color: var(--popoverArrowBorderColor); } &.inverse { - border-left-color: $popoverArrowBorderInverseColor; + border-left-color: var(--popoverArrowBorderInverseColor); } } &.default { - border-left-color: $popoverArrowBorderColor; + border-left-color: var(--popoverArrowBorderColor); } &.inverse { - border-left-color: $popoverArrowBorderInverseColor; + border-left-color: var(--popoverArrowBorderInverseColor); } } diff --git a/frontend/src/Helpers/Props/kinds.js b/frontend/src/Helpers/Props/kinds.js index d7d61c9f4..b0f5ac87f 100644 --- a/frontend/src/Helpers/Props/kinds.js +++ b/frontend/src/Helpers/Props/kinds.js @@ -3,7 +3,6 @@ export const DEFAULT = 'default'; export const DISABLED = 'disabled'; export const INFO = 'info'; export const INVERSE = 'inverse'; -export const PINK = 'pink'; export const PRIMARY = 'primary'; export const PURPLE = 'purple'; export const SUCCESS = 'success'; @@ -16,7 +15,6 @@ export const all = [ DISABLED, INFO, INVERSE, - PINK, PRIMARY, PURPLE, SUCCESS, diff --git a/frontend/src/History/HistoryRowParameter.css b/frontend/src/History/HistoryRowParameter.css index 9418eccef..5262769e7 100644 --- a/frontend/src/History/HistoryRowParameter.css +++ b/frontend/src/History/HistoryRowParameter.css @@ -3,9 +3,9 @@ align-items: stretch; overflow: hidden; margin: 2px 4px; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: #eee; + background-color: var(--defaultHoverBackgroundColor); cursor: default; } @@ -16,7 +16,7 @@ .value { padding: 0 4px; - background-color: $white; - color: $defaultColor; + background-color: var(--defaultButtonBackgroundColor); + color: var(--defaultColor); white-space: nowrap; } diff --git a/frontend/src/Indexer/Editor/Delete/DeleteIndexerModalContent.css b/frontend/src/Indexer/Editor/Delete/DeleteIndexerModalContent.css index 950fdc27d..02a0514be 100644 --- a/frontend/src/Indexer/Editor/Delete/DeleteIndexerModalContent.css +++ b/frontend/src/Indexer/Editor/Delete/DeleteIndexerModalContent.css @@ -9,5 +9,5 @@ .path { margin-left: 5px; - color: $dangerColor; + color: var(--dangerColor); } diff --git a/frontend/src/Indexer/Index/IndexerIndexFooter.css b/frontend/src/Indexer/Index/IndexerIndexFooter.css index ee77a0480..d9da8112e 100644 --- a/frontend/src/Indexer/Index/IndexerIndexFooter.css +++ b/frontend/src/Indexer/Index/IndexerIndexFooter.css @@ -21,28 +21,28 @@ .disabled { composes: legendItemColor; - background-color: $darkGray; + background-color: var(--darkGray); } .enabled { composes: legendItemColor; - background-color: $successColor; + background-color: var(--successColor); } .redirected { composes: legendItemColor; - background-color: $infoColor; + background-color: var(--infoColor); } .error { composes: legendItemColor; - background-color: $dangerColor; + background-color: var(--dangerColor); &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px); + background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px); } } diff --git a/frontend/src/Indexer/Index/Table/IndexerIndexRow.css b/frontend/src/Indexer/Index/Table/IndexerIndexRow.css index 985411c04..308b87cc7 100644 --- a/frontend/src/Indexer/Index/Table/IndexerIndexRow.css +++ b/frontend/src/Indexer/Index/Table/IndexerIndexRow.css @@ -65,5 +65,5 @@ .externalLink { composes: link from '~Components/Link/Link.css'; - color: $textColor; + color: var(--textColor); } diff --git a/frontend/src/Indexer/Index/Table/ProtocolLabel.css b/frontend/src/Indexer/Index/Table/ProtocolLabel.css index 259fd5c65..110c7e01c 100644 --- a/frontend/src/Indexer/Index/Table/ProtocolLabel.css +++ b/frontend/src/Indexer/Index/Table/ProtocolLabel.css @@ -1,13 +1,13 @@ .torrent { composes: label from '~Components/Label.css'; - border-color: $torrentColor; - background-color: $torrentColor; + border-color: var(--torrentColor); + background-color: var(--torrentColor); } .usenet { composes: label from '~Components/Label.css'; - border-color: $usenetColor; - background-color: $usenetColor; + border-color: var(--usenetColor); + background-color: var(--usenetColor); } diff --git a/frontend/src/Search/QueryParameterModal.css b/frontend/src/Search/QueryParameterModal.css index 66e9bd73a..f65bed4df 100644 --- a/frontend/src/Search/QueryParameterModal.css +++ b/frontend/src/Search/QueryParameterModal.css @@ -19,7 +19,7 @@ .footNote { display: flex; - color: $helpTextColor; + color: var(--helpTextColor); .icon { margin-top: 3px; @@ -29,7 +29,7 @@ code { padding: 0 1px; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); background-color: #f7f7f7; } } diff --git a/frontend/src/Search/QueryParameterOption.css b/frontend/src/Search/QueryParameterOption.css index cdfb186db..022abda1f 100644 --- a/frontend/src/Search/QueryParameterOption.css +++ b/frontend/src/Search/QueryParameterOption.css @@ -3,15 +3,15 @@ align-items: stretch; flex-wrap: wrap; margin: 3px; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); &:hover { .token { - background-color: #ddd; + background-color: rgba(0, 0, 0, 0.01); } .example { - background-color: #ccc; + background-color: rgba(0, 0, 0, 0.01); } } } @@ -27,7 +27,7 @@ .token { flex: 0 0 50%; padding: 6px 16px; - background-color: #eee; + background-color: var(--defaultButtonBackgroundColor); font-family: $monoSpaceFontFamily; } @@ -37,7 +37,7 @@ justify-content: space-between; flex: 0 0 50%; padding: 6px 16px; - background-color: #ddd; + background-color: var(--defaultHoverBackgroundColor); .footNote { padding: 2px; diff --git a/frontend/src/Search/Table/ProtocolLabel.css b/frontend/src/Search/Table/ProtocolLabel.css index 259fd5c65..110c7e01c 100644 --- a/frontend/src/Search/Table/ProtocolLabel.css +++ b/frontend/src/Search/Table/ProtocolLabel.css @@ -1,13 +1,13 @@ .torrent { composes: label from '~Components/Label.css'; - border-color: $torrentColor; - background-color: $torrentColor; + border-color: var(--torrentColor); + background-color: var(--torrentColor); } .usenet { composes: label from '~Components/Label.css'; - border-color: $usenetColor; - background-color: $usenetColor; + border-color: var(--usenetColor); + background-color: var(--usenetColor); } diff --git a/frontend/src/Search/Table/SearchIndexRow.css b/frontend/src/Search/Table/SearchIndexRow.css index 205ed42df..8f676213c 100644 --- a/frontend/src/Search/Table/SearchIndexRow.css +++ b/frontend/src/Search/Table/SearchIndexRow.css @@ -58,7 +58,7 @@ margin: 0 2px; width: 22px; - color: $textColor; + color: var(--textColor); } .externalLinks { diff --git a/frontend/src/Settings/AdvancedSettingsButton.css b/frontend/src/Settings/AdvancedSettingsButton.css index 5f0d3b9f2..f08bdc017 100644 --- a/frontend/src/Settings/AdvancedSettingsButton.css +++ b/frontend/src/Settings/AdvancedSettingsButton.css @@ -19,13 +19,13 @@ } .indicatorBackground { - color: $themeDarkColor; + color: var(--themeDarkColor); } .enabled { - color: $successColor; + color: var(--successColor); } .disabled { - color: $dangerColor; + color: var(--dangerColor); } diff --git a/frontend/src/Settings/Applications/Applications/Applications.css b/frontend/src/Settings/Applications/Applications/Applications.css index bd7348438..960537063 100644 --- a/frontend/src/Settings/Applications/Applications/Applications.css +++ b/frontend/src/Settings/Applications/Applications/Applications.css @@ -6,15 +6,15 @@ .addApplication { composes: application from '~./Application.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; } .center { display: inline-block; padding: 5px 20px 0; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardCenterBackgroundColor); } diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css index 81b4f1510..5f650aaf9 100644 --- a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css +++ b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css @@ -6,15 +6,15 @@ .addDownloadClient { composes: downloadClient from '~./DownloadClient.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; } .center { display: inline-block; padding: 5px 20px 0; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardCenterBackgroundColor); } diff --git a/frontend/src/Settings/Indexers/IndexerProxies/IndexerProxies.css b/frontend/src/Settings/Indexers/IndexerProxies/IndexerProxies.css index 4a80c6128..fcfca425f 100644 --- a/frontend/src/Settings/Indexers/IndexerProxies/IndexerProxies.css +++ b/frontend/src/Settings/Indexers/IndexerProxies/IndexerProxies.css @@ -6,15 +6,15 @@ .addIndexerProxy { composes: indexerProxy from '~./IndexerProxy.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; } .center { display: inline-block; padding: 5px 20px 0; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardCenterBackgroundColor); } diff --git a/frontend/src/Settings/Notifications/Notifications/Notifications.css b/frontend/src/Settings/Notifications/Notifications/Notifications.css index 11ea6e11f..986226ad8 100644 --- a/frontend/src/Settings/Notifications/Notifications/Notifications.css +++ b/frontend/src/Settings/Notifications/Notifications/Notifications.css @@ -6,15 +6,15 @@ .addNotification { composes: notification from '~./Notification.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; } .center { display: inline-block; padding: 5px 20px 0; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardCenterBackgroundColor); } diff --git a/frontend/src/Settings/Profiles/App/AppProfiles.css b/frontend/src/Settings/Profiles/App/AppProfiles.css index 7d7e52246..8a03c273e 100644 --- a/frontend/src/Settings/Profiles/App/AppProfiles.css +++ b/frontend/src/Settings/Profiles/App/AppProfiles.css @@ -6,8 +6,8 @@ .addAppProfile { composes: appProfile from '~./AppProfile.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; font-size: 45px; } @@ -15,7 +15,7 @@ .center { display: inline-block; padding: 5px 20px 0; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardCenterBackgroundColor); } diff --git a/frontend/src/Settings/Settings.css b/frontend/src/Settings/Settings.css index 38e88e67f..ef69e9674 100644 --- a/frontend/src/Settings/Settings.css +++ b/frontend/src/Settings/Settings.css @@ -2,7 +2,7 @@ composes: link from '~Components/Link/Link.css'; border-bottom: 1px solid #e5e5e5; - color: #3a3f51; + color: var(--textColor); font-size: 21px; &:hover { @@ -14,5 +14,5 @@ .summary { margin-top: 10px; margin-bottom: 30px; - color: $dimColor; + color: var(--helpTextColor); } diff --git a/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css b/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css index d11136863..75b157063 100644 --- a/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css +++ b/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css @@ -10,7 +10,7 @@ .restriction { margin-bottom: 5px; padding-bottom: 5px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); &:last-child { margin: 0; diff --git a/frontend/src/Styles/Mixins/scroller.css b/frontend/src/Styles/Mixins/scroller.css index 7a296c27f..09d26d083 100644 --- a/frontend/src/Styles/Mixins/scroller.css +++ b/frontend/src/Styles/Mixins/scroller.css @@ -16,11 +16,11 @@ min-height: 100px; border: 1px solid transparent; border-radius: 5px; - background-color: $scrollbarBackgroundColor; + background-color: var(--scrollbarBackgroundColor); background-clip: padding-box; &:hover { - background-color: $scrollbarHoverBackgroundColor; + background-color: var(--scrollbarHoverBackgroundColor); } } } diff --git a/frontend/src/Styles/Themes/index.js b/frontend/src/Styles/Themes/index.js index 9e5cacb1b..02068cc4c 100644 --- a/frontend/src/Styles/Themes/index.js +++ b/frontend/src/Styles/Themes/index.js @@ -1,5 +1,7 @@ +import * as dark from './dark'; import * as light from './light'; export default { - light + light, + dark }; diff --git a/frontend/src/Styles/Themes/light.js b/frontend/src/Styles/Themes/light.js index b5fd0433f..e48bcd40c 100644 --- a/frontend/src/Styles/Themes/light.js +++ b/frontend/src/Styles/Themes/light.js @@ -7,22 +7,17 @@ module.exports = { dimColor: '#555', black: '#000', white: '#fff', - offWhite: '#f5f7fa', primaryColor: '#5d9cec', selectedColor: '#f9be03', successColor: '#27c24c', dangerColor: '#f05050', warningColor: '#ffa500', infoColor: '#5d9cec', - queueColor: '#7a43b6', purple: '#7a43b6', - pink: '#ff69b4', prowlarrOrange, helpTextColor: '#909293', darkGray: '#888', gray: '#adadad', - lightGray: '#ddd', - disabledInputColor: '#808080', // Theme Colors @@ -30,15 +25,24 @@ module.exports = { themeRed: '#c4273c', themeDarkColor: '#595959', themeLightColor: '#707070', + pageBackground: '#f5f7fa', + pageFooterBackgroud: '#f1f1f1', torrentColor: '#00853d', usenetColor: '#17b1d9', + // Labels + inverseLabelColor: '#ddd', + inverseLabelTextColor: '#333', + // Links defaultLinkHoverColor: '#fff', linkColor: '#5d9cec', linkHoverColor: '#1b72e2', + // Header + pageHeaderBackgroundColor: prowlarrOrange, + // Sidebar sidebarColor: '#e1e2e3', @@ -68,7 +72,8 @@ module.exports = { // // Buttons - defaultBackgroundColor: '#fff', + defaultButtonTextColor: '#333', + defaultButtonBackgroundColor: '#fff', defaultBorderColor: '#eaeaea', defaultHoverBackgroundColor: '#f5f5f5', defaultHoverBorderColor: '#d6d6d6;', @@ -125,8 +130,10 @@ module.exports = { // // Card + cardBackgroundColor: '#fff', cardShadowColor: '#e1e1e1', cardAlternateBackgroundColor: '#f5f5f5', + cardCenterBackgroundColor: '#fff', // // Alert @@ -147,16 +154,16 @@ module.exports = { alertWarningBackgroundColor: '#fcf8e3', alertWarningColor: '#8a6d3b', - // - // Slider - - sliderAccentColor: '#5d9cec', - // // Form + inputBackgroundColor: '#fff', + inputReadOnlyBackgroundColor: '#eee', + inputHoverBackgroundColor: '#f8f8f8', + inputSelectedBackgroundColor: '#e2e2e2', advancedFormLabelColor: '#ff902b', disabledCheckInputColor: '#ddd', + disabledInputColor: '#808080', // // Popover @@ -171,13 +178,6 @@ module.exports = { popoverShadowInverseColor: 'rgba(0, 0, 0, 0.2)', popoverArrowBorderInverseColor: 'rgba(58, 63, 81, 0.75)', - // - // Calendar - - calendarTodayBackgroundColor: '#ddd', - calendarBorderColor: '#cecece', - calendarTextDim: '#666', - // // Table @@ -187,5 +187,6 @@ module.exports = { // Charts failedColors: ['#ffbeb2', '#feb4a6', '#fdab9b', '#fca290', '#fb9984', '#fa8f79', '#f9856e', '#f77b66', '#f5715d', '#f36754', '#f05c4d', '#ec5049', '#e74545', '#e13b42', '#da323f', '#d3293d', '#ca223c', '#c11a3b', '#b8163a', '#ae123a'], + chartColorsDiversified: ['#90caf9', '#f4d166', '#ff8a65', '#ce93d8', '#80cba9', '#ffab91', '#8097ea', '#bcaaa4', '#a57583', '#e4e498', '#9e96af', '#c6ab81', '#6972c6', '#619fc6', '#81ad81', '#f48fb1', '#82afca', '#b5b071', '#8b959b', '#7ec0b4'], chartColors: ['#f4d166', '#f6c760', '#f8bc58', '#f8b252', '#f7a84a', '#f69e41', '#f49538', '#f38b2f', '#f28026', '#f0751e', '#eb6c1c', '#e4641e', '#de5d1f', '#d75521', '#cf4f22', '#c64a22', '#bc4623', '#b24223', '#a83e24', '#9e3a26'] }; diff --git a/frontend/src/Styles/Variables/colors.js b/frontend/src/Styles/Variables/colors.js deleted file mode 100644 index ff2bedb3a..000000000 --- a/frontend/src/Styles/Variables/colors.js +++ /dev/null @@ -1,192 +0,0 @@ -const prowlarrOrange = '#e66000'; - -module.exports = { - textColor: '#515253', - defaultColor: '#333', - disabledColor: '#999', - dimColor: '#555', - black: '#000', - white: '#fff', - offWhite: '#f5f7fa', - primaryColor: '#5d9cec', - selectedColor: '#f9be03', - successColor: '#27c24c', - dangerColor: '#f05050', - warningColor: '#ffa500', - infoColor: '#5d9cec', - queueColor: '#7a43b6', - purple: '#7a43b6', - pink: '#ff69b4', - prowlarrOrange, - helpTextColor: '#909293', - darkGray: '#888', - gray: '#adadad', - lightGray: '#ddd', - disabledInputColor: '#808080', - - // Theme Colors - - themeBlue: prowlarrOrange, - themeRed: '#c4273c', - themeDarkColor: '#595959', - themeLightColor: '#707070', - - torrentColor: '#00853d', - usenetColor: '#17b1d9', - - // Links - defaultLinkHoverColor: '#fff', - linkColor: '#5d9cec', - linkHoverColor: '#1b72e2', - - // Sidebar - - sidebarColor: '#e1e2e3', - sidebarBackgroundColor: '#595959', - sidebarActiveBackgroundColor: '#333333', - - // Toolbar - toolbarColor: '#e1e2e3', - toolbarBackgroundColor: '#707070', - toolbarMenuItemBackgroundColor: '#606060', - toolbarMenuItemHoverBackgroundColor: '#515151', - toolbarLabelColor: '#e1e2e3', - - // Accents - borderColor: '#e5e5e5', - inputBorderColor: '#dde6e9', - inputBoxShadowColor: 'rgba(0, 0, 0, 0.075)', - inputFocusBorderColor: '#66afe9', - inputFocusBoxShadowColor: 'rgba(102, 175, 233, 0.6)', - inputErrorBorderColor: '#f05050', - inputErrorBoxShadowColor: 'rgba(240, 80, 80, 0.6)', - inputWarningBorderColor: '#ffa500', - inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)', - colorImpairedGradient: '#ffffff', - colorImpairedGradientDark: '#f4f5f6', - - // - // Buttons - - defaultBackgroundColor: '#fff', - defaultBorderColor: '#eaeaea', - defaultHoverBackgroundColor: '#f5f5f5', - defaultHoverBorderColor: '#d6d6d6;', - - primaryBackgroundColor: '#5d9cec', - primaryBorderColor: '#5899eb', - primaryHoverBackgroundColor: '#4b91ea', - primaryHoverBorderColor: '#3483e7;', - - successBackgroundColor: '#27c24c', - successBorderColor: '#26be4a', - successHoverBackgroundColor: '#24b145', - successHoverBorderColor: '#1f9c3d;', - - warningBackgroundColor: '#ff902b', - warningBorderColor: '#ff8d26', - warningHoverBackgroundColor: '#ff8517', - warningHoverBorderColor: '#fc7800;', - - dangerBackgroundColor: '#f05050', - dangerBorderColor: '#f04b4b', - dangerHoverBackgroundColor: '#ee3d3d', - dangerHoverBorderColor: '#ec2626;', - - iconButtonDisabledColor: '#7a7a7a', - iconButtonHoverColor: '#666', - iconButtonHoverLightColor: '#ccc', - - // - // Modal - - modalBackdropBackgroundColor: 'rgba(0, 0, 0, 0.6)', - modalBackgroundColor: '#fff', - modalCloseButtonHoverColor: '#888', - - // - // Menu - menuItemColor: '#e1e2e3', - menuItemHoverColor: '#fbfcfc', - menuItemHoverBackgroundColor: '#f5f7fa', - - // - // Toolbar - - toobarButtonHoverColor: '#e66000', - toobarButtonSelectedColor: '#e66000', - - // - // Scroller - - scrollbarBackgroundColor: '#9ea4b9', - scrollbarHoverBackgroundColor: '#656d8c', - - // - // Card - - cardShadowColor: '#e1e1e1', - cardAlternateBackgroundColor: '#f5f5f5', - - // - // Alert - - alertDangerBorderColor: '#ebccd1', - alertDangerBackgroundColor: '#f2dede', - alertDangerColor: '#a94442', - - alertInfoBorderColor: '#bce8f1', - alertInfoBackgroundColor: '#d9edf7', - alertInfoColor: '#31708f', - - alertSuccessBorderColor: '#d6e9c6', - alertSuccessBackgroundColor: '#dff0d8', - alertSuccessColor: '#3c763d', - - alertWarningBorderColor: '#faebcc', - alertWarningBackgroundColor: '#fcf8e3', - alertWarningColor: '#8a6d3b', - - // - // Slider - - sliderAccentColor: '#5d9cec', - - // - // Form - - advancedFormLabelColor: '#ff902b', - disabledCheckInputColor: '#ddd', - - // - // Popover - - popoverTitleBackgroundColor: '#f7f7f7', - popoverTitleBorderColor: '#ebebeb', - popoverShadowColor: 'rgba(0, 0, 0, 0.2)', - popoverArrowBorderColor: '#fff', - - popoverTitleBackgroundInverseColor: '#595959', - popoverTitleBorderInverseColor: '#707070', - popoverShadowInverseColor: 'rgba(0, 0, 0, 0.2)', - popoverArrowBorderInverseColor: 'rgba(58, 63, 81, 0.75)', - - // - // Calendar - - calendarTodayBackgroundColor: '#ddd', - calendarBorderColor: '#cecece', - calendarTextDim: '#666', - - // - // Table - - tableRowHoverBackgroundColor: '#fafbfc', - - // - // Charts - - failedColors: ['#ffbeb2', '#feb4a6', '#fdab9b', '#fca290', '#fb9984', '#fa8f79', '#f9856e', '#f77b66', '#f5715d', '#f36754', '#f05c4d', '#ec5049', '#e74545', '#e13b42', '#da323f', '#d3293d', '#ca223c', '#c11a3b', '#b8163a', '#ae123a'], - chartColorsDiversified: ['#90caf9', '#f4d166', '#ff8a65', '#ce93d8', '#80cba9', '#ffab91', '#8097ea', '#bcaaa4', '#a57583', '#e4e498', '#9e96af', '#c6ab81', '#6972c6', '#619fc6', '#81ad81', '#f48fb1', '#82afca', '#b5b071', '#8b959b', '#7ec0b4'], - chartColors: ['#f4d166', '#f6c760', '#f8bc58', '#f8b252', '#f7a84a', '#f69e41', '#f49538', '#f38b2f', '#f28026', '#f0751e', '#eb6c1c', '#e4641e', '#de5d1f', '#d75521', '#cf4f22', '#c64a22', '#bc4623', '#b24223', '#a83e24', '#9e3a26'] -}; diff --git a/frontend/src/Styles/scaffolding.css b/frontend/src/Styles/scaffolding.css index 1810037cf..3f5f0fa65 100644 --- a/frontend/src/Styles/scaffolding.css +++ b/frontend/src/Styles/scaffolding.css @@ -15,7 +15,7 @@ html, body { - color: #515253; + color: var(--textColor); font-family: 'Roboto', 'open sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; } diff --git a/frontend/src/System/Events/LogsTableDetailsModal.css b/frontend/src/System/Events/LogsTableDetailsModal.css index b6e0dd24d..887403249 100644 --- a/frontend/src/System/Events/LogsTableDetailsModal.css +++ b/frontend/src/System/Events/LogsTableDetailsModal.css @@ -7,7 +7,7 @@ border: 1px solid #ccc; border-radius: 4px; background-color: #f5f5f5; - color: #3a3f51; + color: var(--themeDarkColor); white-space: pre; word-wrap: break-word; word-break: break-all; diff --git a/frontend/src/System/Events/LogsTableRow.css b/frontend/src/System/Events/LogsTableRow.css index 8efd99abc..0c5a3e1c6 100644 --- a/frontend/src/System/Events/LogsTableRow.css +++ b/frontend/src/System/Events/LogsTableRow.css @@ -17,15 +17,15 @@ } .warn { - color: $warningColor; + color: var(--warningColor); } .error { - color: $dangerColor; + color: var(--dangerColor); } .fatal { - color: $purple; + color: var(--purple); } .actions { diff --git a/frontend/src/System/Status/styles.css b/frontend/src/System/Status/styles.css index 44fe69bad..49253297c 100644 --- a/frontend/src/System/Status/styles.css +++ b/frontend/src/System/Status/styles.css @@ -9,9 +9,9 @@ width: 50px; height: 50px; outline: none; - border: solid 1px #e6e6e6; + border: solid 1px #e5e5e5; border-radius: 0.5em; - background: #f8f8ff; + background: var(--pageBackgroundColor); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); cursor: pointer; } diff --git a/frontend/src/index.css b/frontend/src/index.css index 04e0e11ef..2a94ba941 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -5,7 +5,7 @@ body { body { overflow: hidden; - background-color: #f5f7fa; + background-color: var(--pageBackground); } @media only screen and (max-width: $breakpointSmall) {