From 850bfdcf827135b26806cd89ba5c178d6df41d2e Mon Sep 17 00:00:00 2001 From: Qstick Date: Sat, 10 Sep 2022 16:29:38 -0500 Subject: [PATCH] New: Native Theme Engine Co-Authored-By: Zak Saunders <1936903+thezak48@users.noreply.github.com> --- frontend/postcss.config.js | 3 +- frontend/src/Activity/Queue/ProtocolLabel.css | 8 +- .../src/AddMovie/AddNewMovie/AddNewMovie.css | 6 +- .../AddNewMovie/AddNewMovieModalContent.css | 2 +- .../AddNewMovie/AddNewMovieSearchResult.css | 12 +- .../SelectMovie/ImportMovieSearchResult.css | 4 +- .../SelectMovie/ImportMovieSelectMovie.css | 14 +- .../Import/SelectMovie/ImportMovieTitle.css | 2 +- frontend/src/App/App.js | 9 +- frontend/src/App/ApplyTheme.js | 49 ++++ frontend/src/Calendar/Agenda/AgendaEvent.css | 4 +- frontend/src/Calendar/Day/CalendarDay.css | 10 +- frontend/src/Calendar/Day/CalendarDays.css | 2 +- frontend/src/Calendar/Day/DayOfWeek.css | 4 +- .../src/Calendar/Events/CalendarEvent.css | 30 +-- .../Events/CalendarEventQueueDetails.js | 3 +- frontend/src/Calendar/Legend/LegendItem.css | 20 +- .../AddNewCollectionMovieModalContent.css | 2 +- .../Collection/Overview/CollectionMovie.css | 16 +- .../Overview/CollectionMovieLabel.css | 20 +- .../Overview/CollectionOverview.css | 4 +- .../Overview/CollectionOverviews.css | 2 +- frontend/src/Components/Alert.css | 24 +- frontend/src/Components/Card.css | 6 +- .../src/Components/CircularProgressBar.js | 3 +- 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 | 4 +- .../Form/HintedSelectInputSelectedValue.css | 2 +- frontend/src/Components/Form/Input.css | 19 +- .../src/Components/Form/KeyValueListInput.css | 4 +- .../Components/Form/KeyValueListInputItem.css | 2 +- .../Form/RootFolderSelectInputOption.css | 6 +- .../RootFolderSelectInputSelectedValue.css | 4 +- frontend/src/Components/Form/TagInput.css | 6 +- frontend/src/Components/Form/TextInput.css | 2 +- frontend/src/Components/Form/UMaskInput.css | 2 +- frontend/src/Components/Icon.css | 14 +- frontend/src/Components/InfoLabel.css | 6 +- frontend/src/Components/Label.css | 67 ++--- 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 +- .../src/Components/MonitorToggleButton.css | 2 +- .../Header/KeyboardShortcutsModalContent.css | 4 +- .../Page/Header/MovieSearchInput.css | 20 +- .../Page/Header/MovieSearchResult.css | 2 +- .../src/Components/Page/Header/PageHeader.css | 8 +- .../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 +- .../Components/Table/Cells/TableRowCell.css | 2 +- .../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 +-- .../Exclusion/ExcludeMovieModalContent.css | 2 +- .../Overview/DiscoverMovieOverview.css | 6 +- .../Overview/DiscoverMovieOverviews.css | 2 +- .../Posters/DiscoverMoviePoster.css | 14 +- .../DiscoverMovie/Table/DiscoverMovieRow.css | 2 +- .../InteractiveImportModalContent.css | 2 +- .../InteractiveImportRowCellPlaceholder.css | 2 +- .../Movie/SelectMovieModalContent.css | 2 +- .../Movie/SelectMovieRow.css | 2 +- .../Movie/Delete/DeleteMovieModalContent.css | 2 +- .../Details/Credits/MovieCreditPoster.css | 12 +- frontend/src/Movie/Details/MovieDetails.css | 12 +- .../src/Movie/Details/MovieStatusLabel.css | 12 +- .../Editor/Delete/DeleteMovieModalContent.css | 2 +- frontend/src/Movie/Index/MovieIndexFooter.css | 16 +- .../Index/Overview/MovieIndexOverview.css | 10 +- .../Index/Overview/MovieIndexOverviews.css | 2 +- .../Movie/Index/Posters/MovieIndexPoster.css | 18 +- .../Index/Posters/MovieIndexPosterInfo.css | 2 +- .../ProgressBar/MovieIndexProgressBar.css | 4 +- frontend/src/Movie/MovieCollectionLabel.css | 2 +- frontend/src/Movie/MovieFileStatus.css | 16 +- .../MovieFile/Editor/MovieFileEditorTable.css | 4 +- .../Editor/MovieFileRowCellPlaceholder.css | 2 +- .../src/MovieFile/Extras/ExtraFileTable.css | 4 +- frontend/src/Organize/OrganizePreviewRow.css | 2 +- .../src/Settings/AdvancedSettingsButton.css | 6 +- .../CustomFormats/CustomFormats.css | 8 +- .../EditCustomFormatModalContent.css | 8 +- .../DownloadClients/DownloadClients.css | 8 +- .../RemotePathMappings/RemotePathMapping.css | 2 +- .../ImportListExclusion.css | 2 +- .../ImportLists/ImportLists/ImportLists.css | 8 +- .../Settings/Indexers/Indexers/Indexers.css | 8 +- .../Indexers/Restrictions/Restrictions.css | 8 +- .../MediaManagement/Naming/NamingModal.css | 4 +- .../MediaManagement/Naming/NamingOption.css | 2 +- .../Notifications/Notifications.css | 8 +- .../Settings/Profiles/Delay/DelayProfile.css | 2 +- frontend/src/Settings/Profiles/Profiles.css | 2 +- .../Quality/QualityProfileFormatItem.css | 2 +- .../Quality/QualityProfileFormatItems.css | 2 +- .../Profiles/Quality/QualityProfileItem.css | 2 +- .../Quality/QualityProfileItemGroup.css | 4 +- .../Profiles/Quality/QualityProfiles.css | 8 +- .../Quality/Definition/QualityDefinition.css | 8 +- .../Quality/Definition/QualityDefinitions.css | 2 +- frontend/src/Settings/Settings.css | 4 +- .../Tags/Details/TagDetailsModalContent.css | 2 +- frontend/src/Settings/UI/UISettings.js | 19 +- frontend/src/Styles/Mixins/scroller.css | 4 +- frontend/src/Styles/Themes/dark.js | 231 ++++++++++++++++++ frontend/src/Styles/Themes/index.js | 7 + .../{Variables/colors.js => Themes/light.js} | 79 ++++-- frontend/src/Styles/scaffolding.css | 2 +- .../System/Events/LogsTableDetailsModal.css | 4 +- frontend/src/System/Events/LogsTableRow.css | 6 +- frontend/src/index.css | 2 +- .../Configuration/ConfigFileProvider.cs | 2 + src/NzbDrone.Core/Localization/Core/en.json | 2 + .../Frontend/InitializeJsController.cs | 1 + 147 files changed, 873 insertions(+), 509 deletions(-) create mode 100644 frontend/src/App/ApplyTheme.js create mode 100644 frontend/src/Styles/Themes/dark.js create mode 100644 frontend/src/Styles/Themes/index.js rename frontend/src/Styles/{Variables/colors.js => Themes/light.js} (71%) 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/Activity/Queue/ProtocolLabel.css b/frontend/src/Activity/Queue/ProtocolLabel.css index 259fd5c65..110c7e01c 100644 --- a/frontend/src/Activity/Queue/ProtocolLabel.css +++ b/frontend/src/Activity/Queue/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/AddMovie/AddNewMovie/AddNewMovie.css b/frontend/src/AddMovie/AddNewMovie/AddNewMovie.css index ed5a43c65..bed30c9b6 100644 --- a/frontend/src/AddMovie/AddNewMovie/AddNewMovie.css +++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovie.css @@ -6,12 +6,12 @@ .searchIconContainer { width: 58px; height: 46px; - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-right: none; border-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; - background-color: #edf1f2; + background-color: var(--searchIconContainerBackgroundColor); text-align: center; line-height: 46px; } @@ -25,7 +25,7 @@ } .clearLookupButton { - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-left: none; border-top-right-radius: 4px; border-bottom-right-radius: 4px; diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css b/frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css index 9c42822be..90c23538b 100644 --- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css +++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css @@ -4,7 +4,7 @@ .year { margin-left: 5px; - color: $disabledColor; + color: var(--disabledColor); } .poster { diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css index 92d9f9df1..df53e30d4 100644 --- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css +++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css @@ -9,13 +9,15 @@ .underlay { @add-mixin cover; - background-color: $white; + background-color: var(--addMovieBackgroundColor); transition: background 500ms; &:hover { - background-color: #eaf2ff; + background-color: var(--pageBackground); + box-shadow: 0 0 12px var(--black); color: inherit; text-decoration: none; + transition: all 200ms ease-in; } } @@ -31,7 +33,7 @@ display: block; margin-right: 20px; height: 250px; - background-color: $defaultColor; + background-color: var(--defaultColor); } .content { @@ -56,7 +58,7 @@ .year { margin-left: 10px; - color: $disabledColor; + color: var(--disabledColor); } .icons { @@ -75,7 +77,7 @@ .exclusionIcon { margin-left: 10px; - color: $dangerColor; + color: var(--dangerColor); pointer-events: all; } diff --git a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css index 2afbfe2e1..1cfbf6d82 100644 --- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css +++ b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css @@ -4,7 +4,7 @@ width: 100%; &:hover { - background-color: $menuItemHoverBackgroundColor; + background-color: var(--menuItemHoverBackgroundColor); } } @@ -17,7 +17,7 @@ composes: link from '~Components/Link/Link.css'; margin-left: auto; - color: $textColor; + color: var(--textColor); } .tmdbLinkIcon { diff --git a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovie.css b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovie.css index 2b9cef136..f8d51d2a2 100644 --- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovie.css +++ b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovie.css @@ -7,10 +7,10 @@ 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); } .loading { @@ -38,9 +38,9 @@ .content { padding: 4px; - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-radius: 4px; - background-color: $white; + background-color: var(--inputBackgroundColor); } .searchContainer { @@ -49,12 +49,12 @@ .searchIconContainer { width: 58px; - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-right: none; border-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; - background-color: #edf1f2; + background-color: var(--searchIconContainerBackgroundColor); text-align: center; line-height: 33px; } diff --git a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieTitle.css b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieTitle.css index f6ae0f4e6..393515339 100644 --- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieTitle.css +++ b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieTitle.css @@ -9,7 +9,7 @@ .year { margin-left: 5px; - color: $disabledColor; + color: var(--disabledColor); } .existing { diff --git a/frontend/src/App/App.js b/frontend/src/App/App.js index b68ff26fd..41691a823 100644 --- a/frontend/src/App/App.js +++ b/frontend/src/App/App.js @@ -4,6 +4,7 @@ import React from 'react'; import DocumentTitle from 'react-document-title'; import { Provider } from 'react-redux'; import PageConnector from 'Components/Page/PageConnector'; +import ApplyTheme from './ApplyTheme'; import AppRoutes from './AppRoutes'; function App({ store, history }) { @@ -11,9 +12,11 @@ function App({ store, history }) { - - - + + + + + diff --git a/frontend/src/App/ApplyTheme.js b/frontend/src/App/ApplyTheme.js new file mode 100644 index 000000000..dbec3bde2 --- /dev/null +++ b/frontend/src/App/ApplyTheme.js @@ -0,0 +1,49 @@ +import PropTypes from 'prop-types'; +import React, { Fragment, useCallback, useEffect } from 'react'; +import { connect } from 'react-redux'; +import { createSelector } from 'reselect'; +import themes from 'Styles/Themes'; + +function createMapStateToProps() { + return createSelector( + (state) => state.settings.ui.item.theme || window.Radarr.theme, + ( + theme + ) => { + return { + theme + }; + } + ); +} + +function ApplyTheme({ theme, children }) { + // Update the CSS Variables + const updateCSSVariables = useCallback(() => { + const arrayOfVariableKeys = Object.keys(themes[theme]); + const arrayOfVariableValues = Object.values(themes[theme]); + + // Loop through each array key and set the CSS Variables + arrayOfVariableKeys.forEach((cssVariableKey, index) => { + // Based on our snippet from MDN + document.documentElement.style.setProperty( + `--${cssVariableKey}`, + arrayOfVariableValues[index] + ); + }); + }, [theme]); + + // On Component Mount and Component Update + useEffect(() => { + updateCSSVariables(theme); + }, [updateCSSVariables, theme]); + + return {children}; +} + +ApplyTheme.propTypes = { + theme: PropTypes.string.isRequired, + children: PropTypes.object.isRequired +}; + +export default connect(createMapStateToProps)(ApplyTheme); diff --git a/frontend/src/Calendar/Agenda/AgendaEvent.css b/frontend/src/Calendar/Agenda/AgendaEvent.css index d7881cb93..debb921c6 100644 --- a/frontend/src/Calendar/Agenda/AgendaEvent.css +++ b/frontend/src/Calendar/Agenda/AgendaEvent.css @@ -2,11 +2,11 @@ display: flex; overflow-x: hidden; padding: 5px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); font-size: $defaultFontSize; &:hover { - background-color: $tableRowHoverBackgroundColor; + background-color: var(--tableRowHoverBackgroundColor); } } diff --git a/frontend/src/Calendar/Day/CalendarDay.css b/frontend/src/Calendar/Day/CalendarDay.css index 79eb67ae7..22d1b1ccf 100644 --- a/frontend/src/Calendar/Day/CalendarDay.css +++ b/frontend/src/Calendar/Day/CalendarDay.css @@ -2,8 +2,8 @@ flex: 1 0 14.28%; overflow: hidden; min-height: 70px; - border-bottom: 1px solid $calendarBorderColor; - border-left: 1px solid $calendarBorderColor; + border-bottom: 1px solid var(--calendarBorderColor); + border-left: 1px solid var(--calendarBorderColor); } .isSingleDay { @@ -12,14 +12,14 @@ .dayOfMonth { padding-right: 5px; - border-bottom: 1px solid $calendarBorderColor; + border-bottom: 1px solid var(--calendarBorderColor); text-align: right; } .isToday { - background-color: $calendarTodayBackgroundColor; + background-color: var(--calendarTodayBackgroundColor); } .isDifferentMonth { - color: $disabledColor; + color: var(--disabledColor); } diff --git a/frontend/src/Calendar/Day/CalendarDays.css b/frontend/src/Calendar/Day/CalendarDays.css index b6dd2100c..507dd0ede 100644 --- a/frontend/src/Calendar/Day/CalendarDays.css +++ b/frontend/src/Calendar/Day/CalendarDays.css @@ -1,6 +1,6 @@ .days { display: flex; - border-right: 1px solid $calendarBorderColor; + border-right: 1px solid var(--calendarBorderColor); } .day, diff --git a/frontend/src/Calendar/Day/DayOfWeek.css b/frontend/src/Calendar/Day/DayOfWeek.css index 8c3552e55..bb73fa3ba 100644 --- a/frontend/src/Calendar/Day/DayOfWeek.css +++ b/frontend/src/Calendar/Day/DayOfWeek.css @@ -1,6 +1,6 @@ .dayOfWeek { flex: 1 0 14.28%; - background-color: #e4eaec; + background-color: var(--calendarBackgroudColor); text-align: center; } @@ -9,5 +9,5 @@ } .isToday { - background-color: $calendarTodayBackgroundColor; + background-color: var(--calendarTodayBackgroundColor); } diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css index 0ce400bed..80903d404 100644 --- a/frontend/src/Calendar/Events/CalendarEvent.css +++ b/frontend/src/Calendar/Events/CalendarEvent.css @@ -2,8 +2,8 @@ overflow-x: hidden; margin: 4px 2px; padding: 5px; - border-bottom: 1px solid $borderColor; - border-left: 4px solid $borderColor; + border-bottom: 1px solid var(--calendarBorderColor); + border-left: 4px solid var(--calendarBorderColor); font-size: 12px; &:global(.colorImpaired) { @@ -15,10 +15,10 @@ composes: link from '~Components/Link/Link.css'; display: block; - color: $defaultColor; + color: var(--defaultColor); &:hover { - color: $defaultColor; + color: var(--defaultColor); text-decoration: none; } } @@ -29,7 +29,7 @@ } .movieInfo { - color: $calendarTextDim; + color: var(--calendarTextDim); } .movieTitle, @@ -40,7 +40,7 @@ } .movieTitle { - color: #3a3f51; + color: var(--calendarTextDimAlternate); font-size: $defaultFontSize; } @@ -53,37 +53,37 @@ */ .downloaded { - border-left-color: $successColor !important; + border-left-color: var(--successColor) !important; &:global(.colorImpaired) { - border-left-color: color($successColor, saturation(+15%)) !important; + border-left-color: color(var(--successColor), saturation(+15%)) !important; } } .queue { - border-left-color: $purple !important; + border-left-color: var(--purple) !important; } .unmonitored { - border-left-color: $gray !important; + border-left-color: var(--gray) !important; } .missingUnmonitored { - border-left-color: $warningColor !important; + border-left-color: var(--warningColor) !important; &:global(.colorImpaired) { - background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); + background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); } } .missingMonitored { - border-left-color: $dangerColor !important; + border-left-color: var(--dangerColor) !important; &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); + background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); } } .continuing { - border-left-color: $primaryColor !important; + border-left-color: var(--primaryColor) !important; } diff --git a/frontend/src/Calendar/Events/CalendarEventQueueDetails.js b/frontend/src/Calendar/Events/CalendarEventQueueDetails.js index 7284a89e1..5a01fd0dd 100644 --- a/frontend/src/Calendar/Events/CalendarEventQueueDetails.js +++ b/frontend/src/Calendar/Events/CalendarEventQueueDetails.js @@ -2,7 +2,6 @@ import PropTypes from 'prop-types'; import React from 'react'; import QueueDetails from 'Activity/Queue/QueueDetails'; import CircularProgressBar from 'Components/CircularProgressBar'; -import colors from 'Styles/Variables/colors'; import translate from 'Utilities/String/translate'; function CalendarEventQueueDetails(props) { @@ -35,7 +34,7 @@ function CalendarEventQueueDetails(props) { progress={progress} size={20} strokeWidth={2} - strokeColor={colors.purple} + strokeColor={'#7a43b6'} /> } diff --git a/frontend/src/Calendar/Legend/LegendItem.css b/frontend/src/Calendar/Legend/LegendItem.css index 98634ff74..8112ad4ea 100644 --- a/frontend/src/Calendar/Legend/LegendItem.css +++ b/frontend/src/Calendar/Legend/LegendItem.css @@ -20,53 +20,53 @@ .queue { composes: legendItemColor; - background-color: $queueColor; + background-color: var(--queueColor); } .continuing { composes: legendItemColor; - background-color: $primaryColor; + background-color: var(--primaryColor); } .availNotMonitored { composes: legendItemColor; - background-color: $darkGray; + background-color: var(--darkGray); } .ended { composes: legendItemColor; - background-color: $successColor; + background-color: var(--successColor); } .missingMonitored { 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); } } .missingUnmonitored { composes: legendItemColor; - 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); } } .missingMonitoredColorImpaired { - background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); + background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); } .missingUnmonitoredColorImpaired { - background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); + background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); } .legendItemText { diff --git a/frontend/src/Collection/AddNewCollectionMovieModalContent.css b/frontend/src/Collection/AddNewCollectionMovieModalContent.css index 9c42822be..90c23538b 100644 --- a/frontend/src/Collection/AddNewCollectionMovieModalContent.css +++ b/frontend/src/Collection/AddNewCollectionMovieModalContent.css @@ -4,7 +4,7 @@ .year { margin-left: 5px; - color: $disabledColor; + color: var(--disabledColor); } .poster { diff --git a/frontend/src/Collection/Overview/CollectionMovie.css b/frontend/src/Collection/Overview/CollectionMovie.css index 1d9ee93fe..8a73bac2c 100644 --- a/frontend/src/Collection/Overview/CollectionMovie.css +++ b/frontend/src/Collection/Overview/CollectionMovie.css @@ -6,7 +6,7 @@ $hoverScale: 1.05; &:hover { z-index: 2; - box-shadow: 0 0 10px $black; + box-shadow: 0 0 10px var(--black); transition: all 200ms ease-in; .poster { @@ -28,7 +28,7 @@ $hoverScale: 1.05; .poster { position: relative; display: block; - background-color: $defaultColor; + background-color: var(--defaultColor); } .overlay { @@ -44,7 +44,7 @@ $hoverScale: 1.05; .overlayTitle { padding: 5px; - color: $offWhite; + color: var(--offWhite); text-align: left; font-weight: bold; font-size: 15px; @@ -67,7 +67,7 @@ $hoverScale: 1.05; z-index: 3; border-radius: 4px; background-color: #707070; - color: $white; + color: var(--white); font-size: $smallFontSize; opacity: 0; transition: opacity 0; @@ -77,7 +77,7 @@ $hoverScale: 1.05; composes: button from '~Components/Link/IconButton.css'; &:hover { - color: $radarrYellow; + color: var(--radarrYellow); } } @@ -102,16 +102,16 @@ $hoverScale: 1.05; position: relative; display: block; - background-color: $defaultColor; + background-color: var(--defaultColor); } .monitorToggleButton { composes: toggleButton from '~Components/MonitorToggleButton.css'; width: 25px; - color: $white; + color: var(--white); &:hover { - color: $iconButtonHoverLightColor; + color: var(--iconButtonHoverLightColor); } } diff --git a/frontend/src/Collection/Overview/CollectionMovieLabel.css b/frontend/src/Collection/Overview/CollectionMovieLabel.css index ec553ec3e..dd409b2eb 100644 --- a/frontend/src/Collection/Overview/CollectionMovieLabel.css +++ b/frontend/src/Collection/Overview/CollectionMovieLabel.css @@ -3,7 +3,7 @@ align-items: stretch; overflow: hidden; margin: 2px 4px; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; background-color: #eee; cursor: default; @@ -17,34 +17,34 @@ padding: 0 4px; border-left: 4px; border-left-style: solid; - background-color: $white; - color: $defaultColor; + background-color: var(--white); + color: var(--defaultColor); } .primary { - border-color: $primaryColor; + border-color: var(--primaryColor); } .danger { - border-color: $dangerColor; + border-color: var(--dangerColor); } .success { - border-color: $successColor; + border-color: var(--successColor); } .purple { - border-color: $purple; + border-color: var(--purple); } .warning { - border-color: $warningColor; + border-color: var(--warningColor); } .info { - border-color: $infoColor; + border-color: var(--infoColor); } .queue { - border-color: $queueColor; + border-color: var(--queueColor); } diff --git a/frontend/src/Collection/Overview/CollectionOverview.css b/frontend/src/Collection/Overview/CollectionOverview.css index e9467fbb3..d9181e7b4 100644 --- a/frontend/src/Collection/Overview/CollectionOverview.css +++ b/frontend/src/Collection/Overview/CollectionOverview.css @@ -104,7 +104,7 @@ $hoverScale: 1.05; width: 25px; &:hover { - color: $iconButtonHoverLightColor; + color: var(--iconButtonHoverLightColor); } } @@ -131,7 +131,7 @@ $hoverScale: 1.05; width: 20px; &:hover { - color: $iconButtonHoverLightColor; + color: var(--iconButtonHoverLightColor); } } } diff --git a/frontend/src/Collection/Overview/CollectionOverviews.css b/frontend/src/Collection/Overview/CollectionOverviews.css index a0cee09ff..fe933ec44 100644 --- a/frontend/src/Collection/Overview/CollectionOverviews.css +++ b/frontend/src/Collection/Overview/CollectionOverviews.css @@ -5,7 +5,7 @@ .container { &:hover { .content { - background-color: $tableRowHoverBackgroundColor; + background-color: var(--tableRowHoverBackgroundColor); } } } 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/CircularProgressBar.js b/frontend/src/Components/CircularProgressBar.js index b526eef3b..b6b841c71 100644 --- a/frontend/src/Components/CircularProgressBar.js +++ b/frontend/src/Components/CircularProgressBar.js @@ -1,6 +1,5 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import colors from 'Styles/Variables/colors'; import styles from './CircularProgressBar.css'; class CircularProgressBar extends Component { @@ -132,7 +131,7 @@ CircularProgressBar.defaultProps = { containerClassName: styles.circularProgressBarContainer, size: 60, strokeWidth: 5, - strokeColor: colors.radarrYellow, + strokeColor: '#ffc230', showProgressText: false }; diff --git a/frontend/src/Components/FieldSet.css b/frontend/src/Components/FieldSet.css index 6da64f0e0..9ea0dbab1 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..56f5564b9 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(--inputBackgroundColor); } .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 cc4360805..62a2f8987 100644 --- a/frontend/src/Components/Form/HintedSelectInputOption.css +++ b/frontend/src/Components/Form/HintedSelectInputOption.css @@ -18,11 +18,11 @@ @add-mixin truncate; margin-left: 15px; - color: $darkGray; + color: var(--darkGray); font-size: $smallFontSize; } .divider { border: none; - border-bottom: 1px solid $lightGray; + border-bottom: 1px solid var(--lightGray); } 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/RootFolderSelectInputOption.css b/frontend/src/Components/Form/RootFolderSelectInputOption.css index bf86485ea..d2e5e176b 100644 --- a/frontend/src/Components/Form/RootFolderSelectInputOption.css +++ b/frontend/src/Components/Form/RootFolderSelectInputOption.css @@ -21,17 +21,17 @@ .movieFolder { @add-mixin truncate; - color: $disabledColor; + color: var(--disabledColor); } .freeSpace { margin-left: 15px; - color: $darkGray; + color: var(--darkGray); font-size: $smallFontSize; } .isMissing { margin-left: 15px; - color: $dangerColor; + color: var(--dangerColor); font-size: $smallFontSize; } diff --git a/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css b/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css index 3ed598bf3..105ab6ec8 100644 --- a/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css +++ b/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css @@ -20,13 +20,13 @@ .movieFolder { @add-mixin truncate; flex: 0 1 auto; - color: $disabledColor; + color: var(--disabledColor); } .freeSpace { flex: 0 0 auto; margin-left: 15px; - color: $gray; + color: var(--gray); text-align: right; font-size: $smallFontSize; } 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/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/Form/UMaskInput.css b/frontend/src/Components/Form/UMaskInput.css index 7b687caf9..a777aaeef 100644 --- a/frontend/src/Components/Form/UMaskInput.css +++ b/frontend/src/Components/Form/UMaskInput.css @@ -49,5 +49,5 @@ } .readOnly { - background-color: #eee; + background-color: var(--inputReadOnlyBackgroundColor); } diff --git a/frontend/src/Components/Icon.css b/frontend/src/Components/Icon.css index db95e019b..51c09226b 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,25 @@ } .disabled { - color: $disabledColor; + color: var(--disabledColor); } .info { - color: $infoColor; + color: var(--infoColor); } .pink { - color: $pink; + color: var(--pink); } .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 72cba7dd5..3724124d4 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,94 +13,95 @@ /** Kinds **/ .danger { - border-color: $dangerColor; - background-color: $dangerColor; + border-color: var(--dangerColor); + background-color: var(--dangerColor); &.outline { - color: $dangerColor; + 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); } } .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(--offWhite); } } .info { - border-color: $infoColor; - background-color: $infoColor; + border-color: var(--infoColor); + background-color: var(--infoColor); + color: var(--infoTextColor); &.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; + 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); } } .queue { - border-color: $queueColor; - background-color: $queueColor; + border-color: var(--queueColor); + background-color: var(--queueColor); &.outline { - color: $queueColor; + color: var(--queueColor); } } @@ -125,5 +126,5 @@ /** Outline **/ .outline { - background-color: $white; + background-color: var(--disabledLabelColor); } diff --git a/frontend/src/Components/Link/Button.css b/frontend/src/Components/Link/Button.css index d5b7e8200..0855b2de6 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(--defaultBackgroundColor); + color: var(--defaultColor); &:hover { - border-color: $defaultHoverBorderColor; - background-color: $defaultHoverBackgroundColor; - color: $defaultColor; + border-color: var(--defaultHoverBorderColor); + background-color: var(--defaultHoverBackgroundColor); + color: var(--defaultColor); } } .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/MonitorToggleButton.css b/frontend/src/Components/MonitorToggleButton.css index 09b64f1ab..59376129d 100644 --- a/frontend/src/Components/MonitorToggleButton.css +++ b/frontend/src/Components/MonitorToggleButton.css @@ -6,6 +6,6 @@ } .isDisabled { - color: $disabledColor; + color: var(--disabledColor); cursor: not-allowed; } 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/MovieSearchInput.css b/frontend/src/Components/Page/Header/MovieSearchInput.css index fb1b876e2..5ce43e503 100644 --- a/frontend/src/Components/Page/Header/MovieSearchInput.css +++ b/frontend/src/Components/Page/Header/MovieSearchInput.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/MovieSearchResult.css b/frontend/src/Components/Page/Header/MovieSearchResult.css index 29edc382b..5a5343633 100644 --- a/frontend/src/Components/Page/Header/MovieSearchResult.css +++ b/frontend/src/Components/Page/Header/MovieSearchResult.css @@ -21,7 +21,7 @@ .alternateTitle { composes: title; - color: $disabledColor; + color: var(--disabledColor); font-size: $smallFontSize; } diff --git a/frontend/src/Components/Page/Header/PageHeader.css b/frontend/src/Components/Page/Header/PageHeader.css index 53f0b4322..8ac10122e 100644 --- a/frontend/src/Components/Page/Header/PageHeader.css +++ b/frontend/src/Components/Page/Header/PageHeader.css @@ -4,8 +4,8 @@ align-items: center; flex: 0 0 auto; height: $headerHeight; - background-color: #464b51; - color: $white; + background-color: var(--pageHeaderBackgroundColor); + color: var(--white); } .logoContainer { @@ -56,7 +56,7 @@ line-height: 60px; &:hover { - color: $toobarButtonHoverColor; + color: var(--toobarButtonHoverColor); } } @@ -67,7 +67,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 5671eb00a..a59e4c430 100644 --- a/frontend/src/Components/Page/Toolbar/PageToolbarButton.css +++ b/frontend/src/Components/Page/Toolbar/PageToolbarButton.css @@ -7,16 +7,16 @@ text-align: center; &:hover { - color: $toobarButtonHoverColor; + color: var(--toobarButtonHoverColor); } &.isDisabled { - color: $disabledColor; + color: var(--disabledColor); } } .isDisabled { - color: $disabledColor; + color: var(--disabledColor); } .labelContainer { @@ -28,7 +28,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 a7ad6aaaf..c509d9623 100644 --- a/frontend/src/Components/ProgressBar.css +++ b/frontend/src/Components/ProgressBar.css @@ -3,7 +3,7 @@ overflow: hidden; width: 100%; border-radius: 4px; - background-color: #f5f5f5; + background-color: var(--progressBarBackgroundColor); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } @@ -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,39 @@ } .primary { - background-color: $primaryColor; + background-color: var(--primaryColor); } .danger { - background-color: $dangerColor; + background-color: var(--dangerColor); &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 5px, $dangerColor 5px, $dimColor 10px); + background: repeating-linear-gradient(90deg, var(--dangerColor), var(--dangerColor) 5px, var(--dangerColor) 5px, var(--dimColor) 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, $warningColor 5px, $dimColor 10px); + background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, var(--warningColor) 5px, var(--dimColor) 10px); } } .info { - background-color: $infoColor; + background-color: var(--infoColor); } .queue { - background-color: $queueColor; + background-color: var(--queueColor); } .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/Cells/TableRowCell.css b/frontend/src/Components/Table/Cells/TableRowCell.css index 1c3e6fc5a..47ce0d22e 100644 --- a/frontend/src/Components/Table/Cells/TableRowCell.css +++ b/frontend/src/Components/Table/Cells/TableRowCell.css @@ -1,6 +1,6 @@ .cell { padding: 8px; - border-top: 1px solid #eee; + border-top: 1px solid var(--borderColor); line-height: 1.52857143; } 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..3921a4de2 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(--popoverBodyBackgroundColor); + 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/DiscoverMovie/Exclusion/ExcludeMovieModalContent.css b/frontend/src/DiscoverMovie/Exclusion/ExcludeMovieModalContent.css index dbfef0871..df8e4822e 100644 --- a/frontend/src/DiscoverMovie/Exclusion/ExcludeMovieModalContent.css +++ b/frontend/src/DiscoverMovie/Exclusion/ExcludeMovieModalContent.css @@ -8,5 +8,5 @@ .deleteFilesMessage { margin-top: 20px; - color: $dangerColor; + color: var(--dangerColor); } diff --git a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css index b0e503eb4..43290e5b4 100644 --- a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css +++ b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css @@ -24,10 +24,10 @@ $hoverScale: 1.05; composes: link from '~Components/Link/Link.css'; display: block; - color: $defaultColor; + color: var(--defaultColor); &:hover { - color: $defaultColor; + color: var(--defaultColor); text-decoration: none; } } @@ -40,7 +40,7 @@ $hoverScale: 1.05; .exclusionIcon { margin-left: 10px; - color: $dangerColor; + color: var(--dangerColor); pointer-events: all; } diff --git a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverviews.css b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverviews.css index a0cee09ff..fe933ec44 100644 --- a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverviews.css +++ b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverviews.css @@ -5,7 +5,7 @@ .container { &:hover { .content { - background-color: $tableRowHoverBackgroundColor; + background-color: var(--tableRowHoverBackgroundColor); } } } diff --git a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.css b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.css index 9f3b92170..b99dec4f0 100644 --- a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.css +++ b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.css @@ -5,7 +5,7 @@ $hoverScale: 1.05; &:hover { z-index: 2; - box-shadow: 0 0 12px $black; + box-shadow: 0 0 12px var(--black); transition: all 200ms ease-in; .controls { @@ -24,7 +24,7 @@ $hoverScale: 1.05; position: relative; display: block; - background-color: $defaultColor; + background-color: var(--defaultColor); } .externalLinks { @@ -42,7 +42,7 @@ $hoverScale: 1.05; padding: 5px; width: 100%; height: 100%; - color: $offWhite; + color: var(--offWhite); text-align: center; font-size: 20px; } @@ -64,8 +64,8 @@ $hoverScale: 1.05; height: 0; border-width: 0 25px 25px 0; border-style: solid; - border-color: transparent $dangerColor transparent transparent; - color: $white; + border-color: transparent var(--dangerColor) transparent transparent; + color: var(--white); } .controls { @@ -75,7 +75,7 @@ $hoverScale: 1.05; z-index: 3; border-radius: 4px; background-color: #707070; - color: $white; + color: var(--white); font-size: $smallFontSize; opacity: 0; transition: opacity 0; @@ -92,7 +92,7 @@ $hoverScale: 1.05; composes: button from '~Components/Link/IconButton.css'; &:hover { - color: $radarrYellow; + color: var(--radarrYellow); } } diff --git a/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css b/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css index 48c9c6825..d613b43ee 100644 --- a/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css +++ b/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css @@ -19,7 +19,7 @@ .exclusionIcon { width: 20px !important; - color: $dangerColor; + color: var(--dangerColor); pointer-events: all; } diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css index d50f3a261..573b16667 100644 --- a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css +++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css @@ -35,7 +35,7 @@ } .errorMessage { - color: $dangerColor; + color: var(--dangerColor); } @media only screen and (max-width: $breakpointSmall) { diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css b/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css index 941988144..bf4351181 100644 --- a/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css +++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css @@ -3,5 +3,5 @@ margin: -8px 0; width: 100%; height: 25px; - border: 2px dashed $dangerColor; + border: 2px dashed var(--dangerColor); } diff --git a/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.css b/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.css index 70e697bb3..e963b960d 100644 --- a/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.css +++ b/frontend/src/InteractiveImport/Movie/SelectMovieModalContent.css @@ -27,7 +27,7 @@ .path { margin-right: 20px; - color: $dimColor; + color: var(--dimColor); word-break: break-word; } diff --git a/frontend/src/InteractiveImport/Movie/SelectMovieRow.css b/frontend/src/InteractiveImport/Movie/SelectMovieRow.css index 6ebc63656..95498bf61 100644 --- a/frontend/src/InteractiveImport/Movie/SelectMovieRow.css +++ b/frontend/src/InteractiveImport/Movie/SelectMovieRow.css @@ -1,5 +1,5 @@ .movie { padding: 8px; width: 100%; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); } diff --git a/frontend/src/Movie/Delete/DeleteMovieModalContent.css b/frontend/src/Movie/Delete/DeleteMovieModalContent.css index dbfef0871..df8e4822e 100644 --- a/frontend/src/Movie/Delete/DeleteMovieModalContent.css +++ b/frontend/src/Movie/Delete/DeleteMovieModalContent.css @@ -8,5 +8,5 @@ .deleteFilesMessage { margin-top: 20px; - color: $dangerColor; + color: var(--dangerColor); } diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css b/frontend/src/Movie/Details/Credits/MovieCreditPoster.css index 3c0d27827..9636b2e08 100644 --- a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css +++ b/frontend/src/Movie/Details/Credits/MovieCreditPoster.css @@ -5,7 +5,7 @@ $hoverScale: 1.05; &:hover { z-index: 2; - box-shadow: 0 0 12px $black; + box-shadow: 0 0 12px var(--black); transition: all 200ms ease-in; .controls { @@ -22,7 +22,7 @@ $hoverScale: 1.05; .poster { position: relative; display: block; - background-color: $defaultColor; + background-color: var(--defaultColor); } .overlayTitle { @@ -35,7 +35,7 @@ $hoverScale: 1.05; padding: 5px; width: 100%; height: 100%; - color: $offWhite; + color: var(--offWhite); text-align: center; font-size: 20px; } @@ -43,7 +43,7 @@ $hoverScale: 1.05; .title { @add-mixin truncate; - background-color: #fafbfc; + background-color: var(--movieBackgroundColor); text-align: center; font-size: $smallFontSize; } @@ -55,7 +55,7 @@ $hoverScale: 1.05; z-index: 3; border-radius: 4px; background-color: #707070; - color: $white; + color: var(--white); font-size: $smallFontSize; opacity: 0; transition: opacity 0; @@ -65,7 +65,7 @@ $hoverScale: 1.05; composes: button from '~Components/Link/IconButton.css'; &:hover { - color: $radarrYellow; + color: var(--radarrYellow); } } diff --git a/frontend/src/Movie/Details/MovieDetails.css b/frontend/src/Movie/Details/MovieDetails.css index 4b1ed1441..c6dbac017 100644 --- a/frontend/src/Movie/Details/MovieDetails.css +++ b/frontend/src/Movie/Details/MovieDetails.css @@ -26,7 +26,7 @@ position: absolute; width: 100%; height: 100%; - background: $black; + background: var(--black); opacity: 0.7; } @@ -35,7 +35,7 @@ padding: 30px; width: 100%; height: 100%; - color: $white; + color: var(--white); } .poster { @@ -81,7 +81,7 @@ width: 40px; &:hover { - color: $iconButtonHoverLightColor; + color: var(--iconButtonHoverLightColor); } } @@ -109,7 +109,7 @@ white-space: nowrap; &:hover { - color: $iconButtonHoverLightColor; + color: var(--iconButtonHoverLightColor); } } @@ -172,7 +172,7 @@ .tabList { margin: 0; padding: 0; - border-bottom: 1px solid $lightGray; + border-bottom: 1px solid var(--lightGray); } .tab { @@ -187,7 +187,7 @@ } .selectedTab { - border-bottom: 4px solid $linkColor; + border-bottom: 4px solid var(--linkColor); } .tabContent { diff --git a/frontend/src/Movie/Details/MovieStatusLabel.css b/frontend/src/Movie/Details/MovieStatusLabel.css index 9a315858f..b4a4f8891 100644 --- a/frontend/src/Movie/Details/MovieStatusLabel.css +++ b/frontend/src/Movie/Details/MovieStatusLabel.css @@ -1,29 +1,29 @@ .queue { padding-left: 2px; - border-left: 4px solid $queueColor; + border-left: 4px solid var(--queueColor); } .continuing { padding-left: 2px; - border-left: 4px solid $primaryColor; + border-left: 4px solid var(--primaryColor); } .availNotMonitored { padding-left: 2px; - border-left: 4px solid $darkGray; + border-left: 4px solid var(--darkGray); } .ended { padding-left: 2px; - border-left: 4px solid $successColor; + border-left: 4px solid var(--successColor); } .missingMonitored { padding-left: 2px; - border-left: 4px solid $dangerColor; + border-left: 4px solid var(--dangerColor); } .missingUnmonitored { padding-left: 2px; - border-left: 4px solid $warningColor; + border-left: 4px solid var(--warningColor); } diff --git a/frontend/src/Movie/Editor/Delete/DeleteMovieModalContent.css b/frontend/src/Movie/Editor/Delete/DeleteMovieModalContent.css index 950fdc27d..02a0514be 100644 --- a/frontend/src/Movie/Editor/Delete/DeleteMovieModalContent.css +++ b/frontend/src/Movie/Editor/Delete/DeleteMovieModalContent.css @@ -9,5 +9,5 @@ .path { margin-left: 5px; - color: $dangerColor; + color: var(--dangerColor); } diff --git a/frontend/src/Movie/Index/MovieIndexFooter.css b/frontend/src/Movie/Index/MovieIndexFooter.css index cae01367f..c885d46f4 100644 --- a/frontend/src/Movie/Index/MovieIndexFooter.css +++ b/frontend/src/Movie/Index/MovieIndexFooter.css @@ -21,44 +21,44 @@ .queue { composes: legendItemColor; - background-color: $queueColor; + background-color: var(--queueColor); } .continuing { composes: legendItemColor; - background-color: $primaryColor; + background-color: var(--primaryColor); } .availNotMonitored { composes: legendItemColor; - background-color: $darkGray; + background-color: var(--darkGray); } .ended { composes: legendItemColor; - background-color: $successColor; + background-color: var(--successColor); } .missingMonitored { composes: legendItemColor; - background-color: $dangerColor; + background-color: var(--dangerColor); &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 5px, $dangerColor 5px, $dimColor 10px); + background: repeating-linear-gradient(90deg, var(--dangerColor), var(--dangerColor) 5px, var(--dangerColor) 5px, var(--dimColor) 10px); } } .missingUnmonitored { composes: legendItemColor; - background-color: $warningColor; + background-color: var(--warningColor); &:global(.colorImpaired) { - background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, $warningColor 5px, $dimColor 10px); + background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, var(--warningColor) 5px, var(--dimColor) 10px); } } diff --git a/frontend/src/Movie/Index/Overview/MovieIndexOverview.css b/frontend/src/Movie/Index/Overview/MovieIndexOverview.css index 4e59d1739..fdb5be0ba 100644 --- a/frontend/src/Movie/Index/Overview/MovieIndexOverview.css +++ b/frontend/src/Movie/Index/Overview/MovieIndexOverview.css @@ -24,10 +24,10 @@ $hoverScale: 1.05; composes: link from '~Components/Link/Link.css'; display: block; - color: $defaultColor; + color: var(--defaultColor); &:hover { - color: $defaultColor; + color: var(--defaultColor); text-decoration: none; } } @@ -41,8 +41,8 @@ $hoverScale: 1.05; height: 0; border-width: 0 25px 25px 0; border-style: solid; - border-color: transparent $dangerColor transparent transparent; - color: $white; + border-color: transparent var(--dangerColor) transparent transparent; + color: var(--white); } .info { @@ -100,5 +100,5 @@ $hoverScale: 1.05; .queue { padding-left: 2px; - border-left: 4px solid $queueColor; + border-left: 4px solid var(--queueColor); } diff --git a/frontend/src/Movie/Index/Overview/MovieIndexOverviews.css b/frontend/src/Movie/Index/Overview/MovieIndexOverviews.css index 5f8ca5baf..f393dcbb0 100644 --- a/frontend/src/Movie/Index/Overview/MovieIndexOverviews.css +++ b/frontend/src/Movie/Index/Overview/MovieIndexOverviews.css @@ -5,7 +5,7 @@ .container { &:hover { .content { - background-color: $tableRowHoverBackgroundColor; + background-color: var(--tableRowHoverBackgroundColor); } } } diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.css b/frontend/src/Movie/Index/Posters/MovieIndexPoster.css index 8bba6a1d2..27a40dd96 100644 --- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.css +++ b/frontend/src/Movie/Index/Posters/MovieIndexPoster.css @@ -5,7 +5,7 @@ $hoverScale: 1.05; &:hover { z-index: 2; - box-shadow: 0 0 12px $black; + box-shadow: 0 0 12px var(--black); transition: all 200ms ease-in; .controls { @@ -22,7 +22,7 @@ $hoverScale: 1.05; .poster { position: relative; display: block; - background-color: $defaultColor; + background-color: var(--defaultColor); } .overlayTitle { @@ -35,7 +35,7 @@ $hoverScale: 1.05; padding: 5px; width: 100%; height: 100%; - color: $offWhite; + color: var(--offWhite); text-align: center; font-size: 20px; } @@ -43,7 +43,7 @@ $hoverScale: 1.05; .title { @add-mixin truncate; - background-color: #fafbfc; + background-color: var(--movieBackgroundColor); text-align: center; font-size: $smallFontSize; } @@ -55,7 +55,7 @@ $hoverScale: 1.05; z-index: 3; border-radius: 4px; background-color: #707070; - color: $white; + color: var(--white); font-size: $smallFontSize; opacity: 0; transition: opacity 0; @@ -65,7 +65,7 @@ $hoverScale: 1.05; composes: button from '~Components/Link/IconButton.css'; &:hover { - color: $radarrYellow; + color: var(--radarrYellow); } } @@ -84,8 +84,8 @@ $hoverScale: 1.05; height: 0; border-width: 0 25px 25px 0; border-style: solid; - border-color: transparent $dangerColor transparent transparent; - color: $white; + border-color: transparent var(--dangerColor) transparent transparent; + color: var(--white); } .editorSelect { @@ -104,7 +104,7 @@ $hoverScale: 1.05; position: relative; display: block; - background-color: $defaultColor; + background-color: var(--defaultColor); } .nextAiring { diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css index aab27d827..ba79b97b8 100644 --- a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css +++ b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css @@ -1,5 +1,5 @@ .info { - background-color: #fafbfc; + background-color: var(--movieBackgroundColor); text-align: center; font-size: $smallFontSize; } diff --git a/frontend/src/Movie/Index/ProgressBar/MovieIndexProgressBar.css b/frontend/src/Movie/Index/ProgressBar/MovieIndexProgressBar.css index a2680291a..433eb966a 100644 --- a/frontend/src/Movie/Index/ProgressBar/MovieIndexProgressBar.css +++ b/frontend/src/Movie/Index/ProgressBar/MovieIndexProgressBar.css @@ -3,7 +3,7 @@ border-radius: 0; background-color: #5b5b5b; - color: $white; + color: var(--white); transition: width 200ms ease; } @@ -12,7 +12,7 @@ border-radius: 0 0 5px 5px; background-color: #5b5b5b; - color: $white; + color: var(--white); transition: width 200ms ease; } diff --git a/frontend/src/Movie/MovieCollectionLabel.css b/frontend/src/Movie/MovieCollectionLabel.css index 585998fef..7a75a4a1c 100644 --- a/frontend/src/Movie/MovieCollectionLabel.css +++ b/frontend/src/Movie/MovieCollectionLabel.css @@ -4,6 +4,6 @@ width: 15px; &:hover { - color: $iconButtonHoverLightColor; + color: var(--iconButtonHoverLightColor); } } diff --git a/frontend/src/Movie/MovieFileStatus.css b/frontend/src/Movie/MovieFileStatus.css index 817ee06d5..308c354f6 100644 --- a/frontend/src/Movie/MovieFileStatus.css +++ b/frontend/src/Movie/MovieFileStatus.css @@ -5,42 +5,42 @@ .missingUnmonitoredBackground { &:global(.colorImpaired) { - background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); + background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); } } .missingMonitoredBackground { &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); + background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); } } .queue { padding-right: 2px; - border-left: 5px solid $queueColor; + border-left: 5px solid var(--queueColor); } .continuing { padding-right: 2px; - border-left: 5px solid $primaryColor; + border-left: 5px solid var(--primaryColor); } .availNotMonitored { padding-right: 2px; - border-left: 5px solid $darkGray; + border-left: 5px solid var(--darkGray); } .ended { padding-right: 2px; - border-left: 5px solid $successColor; + border-left: 5px solid var(--successColor); } .missingMonitored { padding-right: 2px; - border-left: 5px solid $dangerColor; + border-left: 5px solid var(--dangerColor); } .missingUnmonitored { padding-right: 2px; - border-left: 5px solid $warningColor; + border-left: 5px solid var(--warningColor); } diff --git a/frontend/src/MovieFile/Editor/MovieFileEditorTable.css b/frontend/src/MovieFile/Editor/MovieFileEditorTable.css index 50d1a9e93..e01af32bf 100644 --- a/frontend/src/MovieFile/Editor/MovieFileEditorTable.css +++ b/frontend/src/MovieFile/Editor/MovieFileEditorTable.css @@ -1,8 +1,8 @@ .container { margin-top: 20px; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--inputBackgroundColor); &:last-of-type { margin-bottom: 0; diff --git a/frontend/src/MovieFile/Editor/MovieFileRowCellPlaceholder.css b/frontend/src/MovieFile/Editor/MovieFileRowCellPlaceholder.css index 941988144..bf4351181 100644 --- a/frontend/src/MovieFile/Editor/MovieFileRowCellPlaceholder.css +++ b/frontend/src/MovieFile/Editor/MovieFileRowCellPlaceholder.css @@ -3,5 +3,5 @@ margin: -8px 0; width: 100%; height: 25px; - border: 2px dashed $dangerColor; + border: 2px dashed var(--dangerColor); } diff --git a/frontend/src/MovieFile/Extras/ExtraFileTable.css b/frontend/src/MovieFile/Extras/ExtraFileTable.css index 50d1a9e93..e01af32bf 100644 --- a/frontend/src/MovieFile/Extras/ExtraFileTable.css +++ b/frontend/src/MovieFile/Extras/ExtraFileTable.css @@ -1,8 +1,8 @@ .container { margin-top: 20px; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--inputBackgroundColor); &:last-of-type { margin-bottom: 0; diff --git a/frontend/src/Organize/OrganizePreviewRow.css b/frontend/src/Organize/OrganizePreviewRow.css index 1b3c8ca47..18592cf2e 100644 --- a/frontend/src/Organize/OrganizePreviewRow.css +++ b/frontend/src/Organize/OrganizePreviewRow.css @@ -2,7 +2,7 @@ display: flex; margin-bottom: 5px; padding: 5px 0; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); &:last-of-type { margin-bottom: 0; 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/CustomFormats/CustomFormats/CustomFormats.css b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.css index d4b3d6375..3e5929be6 100644 --- a/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.css +++ b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.css @@ -6,8 +6,8 @@ .addCustomFormat { composes: customFormat from '~./CustomFormat.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/CustomFormats/CustomFormats/EditCustomFormatModalContent.css b/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.css index 8e9242797..b7d3da255 100644 --- a/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.css +++ b/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.css @@ -12,8 +12,8 @@ .addSpecification { composes: customFormat from '~./CustomFormat.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; font-size: 45px; } @@ -21,7 +21,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/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/DownloadClients/RemotePathMappings/RemotePathMapping.css b/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.css index a79efda26..a60711de5 100644 --- a/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.css +++ b/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.css @@ -3,7 +3,7 @@ align-items: stretch; margin-bottom: 10px; height: 30px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); line-height: 30px; } diff --git a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css index a2d508e00..1387701a7 100644 --- a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css +++ b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css @@ -3,7 +3,7 @@ align-items: stretch; margin-bottom: 10px; height: 30px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); line-height: 30px; } diff --git a/frontend/src/Settings/ImportLists/ImportLists/ImportLists.css b/frontend/src/Settings/ImportLists/ImportLists/ImportLists.css index 1b412d280..30237985e 100644 --- a/frontend/src/Settings/ImportLists/ImportLists/ImportLists.css +++ b/frontend/src/Settings/ImportLists/ImportLists/ImportLists.css @@ -6,15 +6,15 @@ .addImportList { composes: importList from '~./ImportList.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/Indexers/Indexers.css b/frontend/src/Settings/Indexers/Indexers/Indexers.css index bf2e72ba4..16597d0e0 100644 --- a/frontend/src/Settings/Indexers/Indexers/Indexers.css +++ b/frontend/src/Settings/Indexers/Indexers/Indexers.css @@ -6,15 +6,15 @@ .addIndexer { composes: indexer from '~./Indexer.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/Restrictions/Restrictions.css b/frontend/src/Settings/Indexers/Restrictions/Restrictions.css index 4aa0dc107..16d8957c0 100644 --- a/frontend/src/Settings/Indexers/Restrictions/Restrictions.css +++ b/frontend/src/Settings/Indexers/Restrictions/Restrictions.css @@ -6,15 +6,15 @@ .addRestriction { composes: restriction from '~./Restriction.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/MediaManagement/Naming/NamingModal.css b/frontend/src/Settings/MediaManagement/Naming/NamingModal.css index 66e9bd73a..f65bed4df 100644 --- a/frontend/src/Settings/MediaManagement/Naming/NamingModal.css +++ b/frontend/src/Settings/MediaManagement/Naming/NamingModal.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/Settings/MediaManagement/Naming/NamingOption.css b/frontend/src/Settings/MediaManagement/Naming/NamingOption.css index 645a0509a..db25006bb 100644 --- a/frontend/src/Settings/MediaManagement/Naming/NamingOption.css +++ b/frontend/src/Settings/MediaManagement/Naming/NamingOption.css @@ -3,7 +3,7 @@ align-items: stretch; flex-wrap: wrap; margin: 3px; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); &:hover { .token { 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/Delay/DelayProfile.css b/frontend/src/Settings/Profiles/Delay/DelayProfile.css index 238742efd..e2d6cd199 100644 --- a/frontend/src/Settings/Profiles/Delay/DelayProfile.css +++ b/frontend/src/Settings/Profiles/Delay/DelayProfile.css @@ -3,7 +3,7 @@ align-items: stretch; margin-bottom: 10px; height: 30px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); line-height: 30px; } diff --git a/frontend/src/Settings/Profiles/Profiles.css b/frontend/src/Settings/Profiles/Profiles.css index 9198cf815..a62558009 100644 --- a/frontend/src/Settings/Profiles/Profiles.css +++ b/frontend/src/Settings/Profiles/Profiles.css @@ -1,5 +1,5 @@ .addCustomFormatMessage { - color: $helpTextColor; + color: var(--helpTextColor); text-align: center; font-weight: 300; font-size: 20px; diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.css b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.css index e3035773e..a57bbaeba 100644 --- a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.css +++ b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.css @@ -10,7 +10,7 @@ width: 100%; border: 1px solid #aaa; border-radius: 4px; - background: #fafafa; + background: var(--modalBackgroundColor); } .formatNameContainer { diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.css b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.css index 6963c8401..def839960 100644 --- a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.css +++ b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.css @@ -24,7 +24,7 @@ .addCustomFormatMessage { max-width: $formGroupExtraSmallWidth; - color: $helpTextColor; + color: var(--helpTextColor); text-align: center; font-weight: 300; font-size: 20px; diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css index bf54fedc2..c10bcd200 100644 --- a/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css +++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css @@ -4,7 +4,7 @@ width: 100%; border: 1px solid #aaa; border-radius: 4px; - background: #fafafa; + background: var(--inputBackgroundColor); &.isInGroup { border-style: dashed; diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css b/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css index dad463b28..772bd9a80 100644 --- a/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css +++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css @@ -2,10 +2,10 @@ width: 100%; border: 1px solid #aaa; border-radius: 4px; - background: #fafafa; + background: var(--inputBackgroundColor); &.editGroups { - background: #fcfcfc; + background: var(--inputBackgroundColor); } } diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfiles.css b/frontend/src/Settings/Profiles/Quality/QualityProfiles.css index 437d152d2..32dad3fac 100644 --- a/frontend/src/Settings/Profiles/Quality/QualityProfiles.css +++ b/frontend/src/Settings/Profiles/Quality/QualityProfiles.css @@ -6,8 +6,8 @@ .addQualityProfile { composes: qualityProfile from '~./QualityProfile.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/Quality/Definition/QualityDefinition.css b/frontend/src/Settings/Quality/Definition/QualityDefinition.css index e81febc1e..e807cacc9 100644 --- a/frontend/src/Settings/Quality/Definition/QualityDefinition.css +++ b/frontend/src/Settings/Quality/Definition/QualityDefinition.css @@ -4,7 +4,7 @@ margin: 5px 0; padding-top: 5px; height: 45px; - border-top: 1px solid $borderColor; + border-top: 1px solid var(--borderColor); } .quality, @@ -28,7 +28,7 @@ top: 9px; margin: 0 5px; height: 3px; - background-color: $sliderAccentColor; + background-color: var(--sliderAccentColor); box-shadow: 0 0 0 #000; &:nth-child(3n+1) { @@ -41,9 +41,9 @@ z-index: 0 !important; width: 18px; height: 18px; - border: 3px solid $sliderAccentColor; + border: 3px solid var(--sliderAccentColor); border-radius: 50%; - background-color: $white; + background-color: var(--white); text-align: center; cursor: pointer; } diff --git a/frontend/src/Settings/Quality/Definition/QualityDefinitions.css b/frontend/src/Settings/Quality/Definition/QualityDefinitions.css index 689017684..da5347737 100644 --- a/frontend/src/Settings/Quality/Definition/QualityDefinitions.css +++ b/frontend/src/Settings/Quality/Definition/QualityDefinitions.css @@ -25,7 +25,7 @@ .sizeLimitHelpText { max-width: 500px; - color: $helpTextColor; + color: var(--helpTextColor); } @media only screen and (max-width: $breakpointSmall) { 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/Settings/UI/UISettings.js b/frontend/src/Settings/UI/UISettings.js index 65462863c..5f8c33fce 100644 --- a/frontend/src/Settings/UI/UISettings.js +++ b/frontend/src/Settings/UI/UISettings.js @@ -10,6 +10,8 @@ import PageContent from 'Components/Page/PageContent'; import PageContentBody from 'Components/Page/PageContentBody'; import { inputTypes } from 'Helpers/Props'; import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector'; +import themes from 'Styles/Themes'; +import titleCase from 'Utilities/String/titleCase'; import translate from 'Utilities/String/translate'; export const firstDayOfWeekOptions = [ @@ -65,6 +67,9 @@ class UISettings extends Component { ...otherProps } = this.props; + const themeOptions = Object.keys(themes) + .map((theme) => ({ key: theme, value: titleCase(theme) })); + const uiLanguages = languages.filter((item) => item.value !== 'Original'); return ( @@ -184,6 +189,18 @@ class UISettings extends Component {
+ + {translate('SettingsTheme')} + + + {translate('SettingsEnableColorImpairedMode')} GetValue("LogLevel", "info").ToLowerInvariant(); public string ConsoleLogLevel => GetValue("ConsoleLogLevel", string.Empty, persist: false); + public string Theme => GetValue("Theme", "light", persist: false); public string PostgresHost => _postgresOptions?.Host ?? GetValue("PostgresHost", string.Empty, persist: false); public string PostgresUser => _postgresOptions?.User ?? GetValue("PostgresUser", string.Empty, persist: false); public string PostgresPassword => _postgresOptions?.Password ?? GetValue("PostgresPassword", string.Empty, persist: false); diff --git a/src/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json index eaed82769..97297a3fd 100644 --- a/src/NzbDrone.Core/Localization/Core/en.json +++ b/src/NzbDrone.Core/Localization/Core/en.json @@ -922,6 +922,8 @@ "SettingsShortDateFormat": "Short Date Format", "SettingsShowRelativeDates": "Show Relative Dates", "SettingsShowRelativeDatesHelpText": "Show relative (Today/Yesterday/etc) or absolute dates", + "SettingsTheme": "Theme", + "SettingsThemeHelpText": "Change Application UI Theme, Inspired by Theme.Park", "SettingsTimeFormat": "Time Format", "SettingsWeekColumnHeader": "Week Column Header", "SettingsWeekColumnHeaderHelpText": "Shown above each column when week is the active view", diff --git a/src/Radarr.Http/Frontend/InitializeJsController.cs b/src/Radarr.Http/Frontend/InitializeJsController.cs index daacaab6d..1931f8b4c 100644 --- a/src/Radarr.Http/Frontend/InitializeJsController.cs +++ b/src/Radarr.Http/Frontend/InitializeJsController.cs @@ -49,6 +49,7 @@ namespace Radarr.Http.Frontend builder.AppendLine($" release: '{BuildInfo.Release}',"); builder.AppendLine($" version: '{BuildInfo.Version.ToString()}',"); builder.AppendLine($" instanceName: '{_configFileProvider.InstanceName.ToString()}',"); + builder.AppendLine($" theme: '{_configFileProvider.Theme.ToString()}',"); builder.AppendLine($" branch: '{_configFileProvider.Branch.ToLower()}',"); builder.AppendLine($" analytics: {_analyticsService.IsEnabled.ToString().ToLowerInvariant()},"); builder.AppendLine($" userHash: '{HashUtil.AnonymousToken()}',");