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 {