Backup_Repos/Prowlarr
1
0
Fork 0
mirror of https://github.com/Prowlarr/Prowlarr synced 2025-12-06 08:34:28 +01:00
Code Issues Projects Releases Wiki Activity

New: Move to CSS Variables for Colorings

Browse source
This commit is contained in:
Qstick 2021-11-21 17:00:02 -06:00
parent 8d39d5c6bb
commit 2b58f3131e
90 changed files with 354 additions and 547 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/postcss.config.js
View file

@ -1,7 +1,6 @@
const reload = require('require-nocache')(module); const reload = require('require-nocache')(module);
const cssVarsFiles = [ const cssVarsFiles = [
'./src/Styles/Variables/colors',
'./src/Styles/Variables/dimensions', './src/Styles/Variables/dimensions',
'./src/Styles/Variables/fonts', './src/Styles/Variables/fonts',
'./src/Styles/Variables/animations', './src/Styles/Variables/animations',
@ -29,4 +28,4 @@ module.exports = {
'postcss-color-function', 'postcss-color-function',
'postcss-nested' 'postcss-nested'
] ]
}; };

24
frontend/src/Components/Alert.css
View file

@ -7,25 +7,25 @@
} }
.danger { .danger {
border-color: $alertDangerBorderColor; border-color: var(--alertDangerBorderColor);
background-color: $alertDangerBackgroundColor; background-color: var(--alertDangerBackgroundColor);
color: $alertDangerColor; color: var(--alertDangerColor);
} }
.info { .info {
border-color: $alertInfoBorderColor; border-color: var(--alertInfoBorderColor);
background-color: $alertInfoBackgroundColor; background-color: var(--alertInfoBackgroundColor);
color: $alertInfoColor; color: var(--alertInfoColor);
} }
.success { .success {
border-color: $alertSuccessBorderColor; border-color: var(--alertSuccessBorderColor);
background-color: $alertSuccessBackgroundColor; background-color: var(--alertSuccessBackgroundColor);
color: $alertSuccessColor; color: var(--alertSuccessColor);
} }
.warning { .warning {
border-color: $alertWarningBorderColor; border-color: var(--alertWarningBorderColor);
background-color: $alertWarningBackgroundColor; background-color: var(--alertWarningBackgroundColor);
color: $alertWarningColor; color: var(--alertWarningColor);
} }

6
frontend/src/Components/Card.css
View file

@ -3,9 +3,9 @@
margin: 10px; margin: 10px;
padding: 10px; padding: 10px;
border-radius: 3px; border-radius: 3px;
background-color: $white; background-color: var(--cardBackgroundColor);
box-shadow: 0 0 10px 1px $cardShadowColor; box-shadow: 0 0 10px 1px var(--cardShadowColor);
color: $defaultColor; color: var(--defaultColor);
} }
.underlay { .underlay {

7
frontend/src/Components/Chart/BarChart.js
View file

@ -2,15 +2,16 @@ import Chart from 'chart.js/auto';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { kinds } from 'Helpers/Props'; import { kinds } from 'Helpers/Props';
import colors from 'Styles/Variables/colors';
function getColors(kind) { function getColors(kind) {
const style = getComputedStyle(document.body);
if (kind === kinds.WARNING) { if (kind === kinds.WARNING) {
return colors.failedColors.reverse(); return style.getPropertyValue('--failedColors').split(',');
} }
return colors.chartColors; return style.getPropertyValue('--chartColors').split(',');
} }
class BarChart extends Component { class BarChart extends Component {

9
frontend/src/Components/Chart/DoughnutChart.js
View file

@ -1,7 +1,12 @@
import Chart from 'chart.js/auto'; import Chart from 'chart.js/auto';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, { Component } from 'react'; import React, { Component } from 'react';
import colors from 'Styles/Variables/colors';
function getColors(kind) {
const style = getComputedStyle(document.body);
return style.getPropertyValue('--chartColorsDiversified').split(',');
}
class DoughnutChart extends Component { class DoughnutChart extends Component {
constructor(props) { constructor(props) {
@ -29,7 +34,7 @@ class DoughnutChart extends Component {
datasets: [{ datasets: [{
label: this.props.title, label: this.props.title,
data: this.props.data.map((d) => d.value), data: this.props.data.map((d) => d.value),
backgroundColor: colors.chartColorsDiversified backgroundColor: getColors()
}] }]
} }
}); });

11
frontend/src/Components/Chart/StackedBarChart.js
View file

@ -1,7 +1,12 @@
import Chart from 'chart.js/auto'; import Chart from 'chart.js/auto';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, { Component } from 'react'; import React, { Component } from 'react';
import colors from 'Styles/Variables/colors';
function getColors(index) {
const style = getComputedStyle(document.body);
return style.getPropertyValue('--chartColorsDiversified').split(',')[index];
}
class StackedBarChart extends Component { class StackedBarChart extends Component {
constructor(props) { constructor(props) {
@ -41,7 +46,7 @@ class StackedBarChart extends Component {
return { return {
label: d.label, label: d.label,
data: d.data, data: d.data,
backgroundColor: colors.chartColorsDiversified[index] backgroundColor: getColors(index)
}; };
}) })
} }
@ -54,7 +59,7 @@ class StackedBarChart extends Component {
return { return {
label: d.label, label: d.label,
data: d.data, data: d.data,
backgroundColor: colors.chartColorsDiversified[index] backgroundColor: getColors(index)
}; };
}); });
this.myChart.update(); this.myChart.update();

2
frontend/src/Components/FieldSet.css
View file

@ -13,7 +13,7 @@
width: 100%; width: 100%;
border: 0; border: 0;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
color: #3a3f51; color: var(--textColor);
font-size: 21px; font-size: 21px;
line-height: inherit; line-height: inherit;
} }

2
frontend/src/Components/FileBrowser/FileBrowserModalContent.css
View file

@ -13,7 +13,7 @@
} }
.faqLink { .faqLink {
color: $alertWarningColor; color: var(--alertWarningColor);
font-weight: bold; font-weight: bold;
} }

2
frontend/src/Components/Filter/Builder/FilterBuilderRow.css
View file

@ -3,7 +3,7 @@
margin-bottom: 5px; margin-bottom: 5px;
&:hover { &:hover {
background-color: $tableRowHoverBackgroundColor; background-color: var(--tableRowHoverBackgroundColor);
} }
} }

2
frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css
View file

@ -17,5 +17,5 @@
.or { .or {
margin: 0 3px; margin: 0 3px;
color: $themeDarkColor; color: var(--themeDarkColor);
} }

2
frontend/src/Components/Filter/CustomFilters/CustomFilter.css
View file

@ -4,7 +4,7 @@
padding: 5px; padding: 5px;
&:hover { &:hover {
background-color: $tableRowHoverBackgroundColor; background-color: var(--tableRowHoverBackgroundColor);
} }
} }

8
frontend/src/Components/Form/AutoSuggestInput.css
View file

@ -27,10 +27,10 @@
overflow-y: auto; overflow-y: auto;
max-height: 200px; max-height: 200px;
width: 100%; width: 100%;
border: 1px solid $inputBorderColor; border: 1px solid var(--inputBorderColor);
border-radius: 4px; border-radius: 4px;
background-color: $white; background-color: var(--inputBackgroundColor);
box-shadow: inset 0 1px 1px $inputBoxShadowColor; box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
} }
} }
@ -46,5 +46,5 @@
} }
.suggestionHighlighted { .suggestionHighlighted {
background-color: $menuItemHoverBackgroundColor; background-color: var(--menuItemHoverBackgroundColor);
} }

32
frontend/src/Components/Form/CheckInput.css
View file

@ -32,21 +32,21 @@
height: 20px; height: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 2px; border-radius: 2px;
background-color: $white; background-color: var(--white);
color: $white; color: var(--white);
text-align: center; text-align: center;
line-height: 20px; line-height: 20px;
} }
.checkbox:focus + .input { .checkbox:focus + .input {
outline: 0; outline: 0;
border-color: $inputFocusBorderColor; border-color: var(--inputFocusBorderColor);
box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor; box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
} }
.dangerIsChecked { .dangerIsChecked {
border-color: $dangerColor; border-color: var(--dangerColor);
background-color: $dangerColor; background-color: var(--dangerColor);
&.isDisabled { &.isDisabled {
opacity: 0.7; opacity: 0.7;
@ -54,8 +54,8 @@
} }
.primaryIsChecked { .primaryIsChecked {
border-color: $primaryColor; border-color: var(--primaryColor);
background-color: $primaryColor; background-color: var(--primaryColor);
&.isDisabled { &.isDisabled {
opacity: 0.7; opacity: 0.7;
@ -63,8 +63,8 @@
} }
.successIsChecked { .successIsChecked {
border-color: $successColor; border-color: var(--successColor);
background-color: $successColor; background-color: var(--successColor);
&.isDisabled { &.isDisabled {
opacity: 0.7; opacity: 0.7;
@ -72,8 +72,8 @@
} }
.warningIsChecked { .warningIsChecked {
border-color: $warningColor; border-color: var(--warningColor);
background-color: $warningColor; background-color: var(--warningColor);
&.isDisabled { &.isDisabled {
opacity: 0.7; opacity: 0.7;
@ -82,15 +82,15 @@
.isNotChecked { .isNotChecked {
&.isDisabled { &.isDisabled {
border-color: $disabledCheckInputColor; border-color: var(--disabledCheckInputColor);
background-color: $disabledCheckInputColor; background-color: var(--disabledCheckInputColor);
opacity: 0.7; opacity: 0.7;
} }
} }
.isIndeterminate { .isIndeterminate {
border-color: $gray; border-color: var(--gray);
background-color: $gray; background-color: var(--gray);
} }
.helpText { .helpText {

14
frontend/src/Components/Form/EnhancedSelectInput.css
View file

@ -39,7 +39,7 @@
.dropdownArrowContainerDisabled { .dropdownArrowContainerDisabled {
composes: dropdownArrowContainer; composes: dropdownArrowContainer;
color: $disabledInputColor; color: var(--disabledInputColor);
} }
.optionsContainer { .optionsContainer {
@ -50,9 +50,9 @@
.options { .options {
composes: scroller from '~Components/Scroller/Scroller.css'; composes: scroller from '~Components/Scroller/Scroller.css';
border: 1px solid $inputBorderColor; border: 1px solid var(--inputBorderColor);
border-radius: 4px; border-radius: 4px;
background-color: $white; background-color: var(--inputBackgroundColor);
} }
.optionsModal { .optionsModal {
@ -76,9 +76,9 @@
.optionsModalScroller { .optionsModalScroller {
composes: scroller from '~Components/Scroller/Scroller.css'; composes: scroller from '~Components/Scroller/Scroller.css';
border: 1px solid $inputBorderColor; border: 1px solid var(--inputBorderColor);
border-radius: 4px; border-radius: 4px;
background-color: $white; background-color: var(--white);
} }
.loading { .loading {
@ -90,7 +90,7 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
height: 40px; height: 40px;
border-bottom: 1px solid $borderColor; border-bottom: 1px solid var(--borderColor);
} }
.mobileCloseButton { .mobileCloseButton {
@ -100,6 +100,6 @@
line-height: 40px; line-height: 40px;
&:hover { &:hover {
color: $modalCloseButtonHoverColor; color: var(--modalCloseButtonHoverColor);
} }
} }

10
frontend/src/Components/Form/EnhancedSelectInputOption.css
View file

@ -7,7 +7,7 @@
cursor: default; cursor: default;
&:hover { &:hover {
background-color: #f8f8f8; background-color: var(--inputHoverBackgroundColor);
} }
} }
@ -24,17 +24,17 @@
} }
.isSelected { .isSelected {
background-color: #e2e2e2; background-color: var(--inputSelectedBackgroundColor);
&:hover { &:hover {
background-color: #e2e2e2; background-color: var(--inputSelectedBackgroundColor);
} }
&.isMobile { &.isMobile {
background-color: inherit; background-color: inherit;
.iconContainer { .iconContainer {
color: $primaryColor; color: var(--primaryColor);
} }
} }
} }
@ -49,7 +49,7 @@
.isMobile { .isMobile {
height: 50px; height: 50px;
border-bottom: 1px solid $borderColor; border-bottom: 1px solid var(--borderColor);
&:last-child { &:last-child {
border: none; border: none;

2
frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css
View file

@ -3,5 +3,5 @@
} }
.isDisabled { .isDisabled {
color: $disabledInputColor; color: var(--disabledInputColor);
} }

2
frontend/src/Components/Form/FormInputGroup.css
View file

@ -40,7 +40,7 @@
} }
.pendingChangesIcon { .pendingChangesIcon {
color: $warningColor; color: var(--warningColor);
font-size: 20px; font-size: 20px;
line-height: 35px; line-height: 35px;
} }

10
frontend/src/Components/Form/FormInputHelpText.css
View file

@ -1,14 +1,14 @@
.helpText { .helpText {
margin-top: 5px; margin-top: 5px;
color: $helpTextColor; color: var(--helpTextColor);
line-height: 20px; line-height: 20px;
} }
.isError { .isError {
color: $dangerColor; color: var(--dangerColor);
.link { .link {
color: $dangerColor; color: var(--dangerColor);
&:hover { &:hover {
color: #e01313; color: #e01313;
@ -17,10 +17,10 @@
} }
.isWarning { .isWarning {
color: $warningColor; color: var(--warningColor);
.link { .link {
color: $warningColor; color: var(--warningColor);
&:hover { &:hover {
color: #e36c00; color: #e36c00;

4
frontend/src/Components/Form/FormLabel.css
View file

@ -7,11 +7,11 @@
} }
.hasError { .hasError {
color: $dangerColor; color: var(--dangerColor);
} }
.isAdvanced { .isAdvanced {
color: $advancedFormLabelColor; color: var(--advancedFormLabelColor);
} }
@media only screen and (max-width: $breakpointLarge) { @media only screen and (max-width: $breakpointLarge) {

2
frontend/src/Components/Form/HintedSelectInputOption.css
View file

@ -18,6 +18,6 @@
@add-mixin truncate; @add-mixin truncate;
margin-left: 15px; margin-left: 15px;
color: $darkGray; color: var(--darkGray);
font-size: $smallFontSize; font-size: $smallFontSize;
} }

2
frontend/src/Components/Form/HintedSelectInputSelectedValue.css
View file

@ -18,7 +18,7 @@
flex: 1 10 0; flex: 1 10 0;
margin-left: 15px; margin-left: 15px;
color: $gray; color: var(--gray);
text-align: right; text-align: right;
font-size: $smallFontSize; font-size: $smallFontSize;
} }

19
frontend/src/Components/Form/Input.css
View file

@ -2,26 +2,27 @@
padding: 6px 16px; padding: 6px 16px;
width: 100%; width: 100%;
height: 35px; height: 35px;
border: 1px solid $inputBorderColor; border: 1px solid var(--inputBorderColor);
border-radius: 4px; border-radius: 4px;
background-color: $white; background-color: var(--inputBackgroundColor);
box-shadow: inset 0 1px 1px $inputBoxShadowColor; box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
color: var(--textColor);
&:focus { &:focus {
outline: 0; outline: 0;
border-color: $inputFocusBorderColor; border-color: var(--inputFocusBorderColor);
box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor; box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
} }
} }
.hasError { .hasError {
border-color: $inputErrorBorderColor; border-color: var(--inputErrorBorderColor);
box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputErrorBoxShadowColor; box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputErrorBoxShadowColor);
} }
.hasWarning { .hasWarning {
border-color: $inputWarningBorderColor; border-color: var(--inputWarningBorderColor);
box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputWarningBoxShadowColor; box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputWarningBoxShadowColor);
} }
.hasButton { .hasButton {

4
frontend/src/Components/Form/KeyValueListInput.css
View file

@ -7,8 +7,8 @@
&.isFocused { &.isFocused {
outline: 0; outline: 0;
border-color: $inputFocusBorderColor; border-color: var(--inputFocusBorderColor);
box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor; box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
} }
} }

2
frontend/src/Components/Form/KeyValueListInputItem.css
View file

@ -1,7 +1,7 @@
.itemContainer { .itemContainer {
display: flex; display: flex;
margin-bottom: 3px; margin-bottom: 3px;
border-bottom: 1px solid $inputBorderColor; border-bottom: 1px solid var(--inputBorderColor);
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;

6
frontend/src/Components/Form/TagInput.css
View file

@ -7,8 +7,8 @@
&.isFocused { &.isFocused {
outline: 0; outline: 0;
border-color: $inputFocusBorderColor; border-color: var(--inputFocusBorderColor);
box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor; box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
} }
} }
@ -20,4 +20,6 @@
width: 0%; width: 0%;
height: 31px; height: 31px;
border: none; border: none;
background-color: var(--inputBackground);
color: var(--textColor);
} }

2
frontend/src/Components/Form/TextArea.css
View file

@ -7,7 +7,7 @@
} }
.readOnly { .readOnly {
background-color: #eee; background-color: var(--inputReadOnlyBackgroundColor);
} }
.hasError { .hasError {

2
frontend/src/Components/Form/TextInput.css
View file

@ -3,7 +3,7 @@
} }
.readOnly { .readOnly {
background-color: #eee; background-color: var(--inputReadOnlyBackgroundColor);
} }
.hasError { .hasError {

16
frontend/src/Components/Icon.css
View file

@ -1,5 +1,5 @@
.danger { .danger {
color: $dangerColor; color: var(--dangerColor);
} }
.default { .default {
@ -7,25 +7,21 @@
} }
.disabled { .disabled {
color: $disabledColor; color: var(--disabledColor);
} }
.info { .info {
color: $infoColor; color: var(--infoColor);
}
.pink {
color: $pink;
} }
.success { .success {
color: $successColor; color: var(--successColor);
} }
.warning { .warning {
color: $warningColor; color: var(--warningColor);
} }
.purple { .purple {
color: $purple; color: var(--purple);
} }

6
frontend/src/Components/InfoLabel.css
View file

@ -1,7 +1,7 @@
.label { .label {
display: inline-block; display: inline-block;
margin: 2px; margin: 2px;
color: $white; color: var(--white);
/** text-align: center; **/ /** text-align: center; **/
white-space: nowrap; white-space: nowrap;
line-height: 1; line-height: 1;
@ -10,7 +10,7 @@
.title { .title {
margin-bottom: 2px; margin-bottom: 2px;
color: $helpTextColor; color: var(--helpTextColor);
font-size: 10px; font-size: 10px;
} }
@ -36,5 +36,5 @@
/** Outline **/ /** Outline **/
.outline { .outline {
background-color: $white; background-color: var(--white);
} }

65
frontend/src/Components/Label.css
View file

@ -3,7 +3,7 @@
margin: 2px; margin: 2px;
border: 1px solid; border: 1px solid;
border-radius: 2px; border-radius: 2px;
color: $white; color: var(--white);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
line-height: 1; line-height: 1;
@ -13,86 +13,77 @@
/** Kinds **/ /** Kinds **/
.danger { .danger {
border-color: $dangerColor; border-color: var(--dangerColor);
background-color: $dangerColor; background-color: var(--dangerColor);
&.outline { &.outline {
color: $dangerColor; color: var(--dangerColor);
} }
} }
.default { .default {
border-color: $themeLightColor; border-color: var(--themeLightColor);
background-color: $themeLightColor; background-color: var(--themeLightColor);
&.outline { &.outline {
color: $themeLightColor; color: var(--themeLightColor);
} }
} }
.disabled { .disabled {
border-color: $disabledColor; border-color: var(--disabledColor);
background-color: $disabledColor; background-color: var(--disabledColor);
&.outline { &.outline {
color: $disabledColor; color: var(--disabledColor);
} }
} }
.info { .info {
border-color: $infoColor; border-color: var(--infoColor);
background-color: $infoColor; background-color: var(--infoColor);
&.outline { &.outline {
color: $infoColor; color: var(--infoColor);
} }
} }
.inverse { .inverse {
border-color: $lightGray; border-color: var(--inverseLabelColor);
background-color: $lightGray; background-color: var(--inverseLabelColor);
color: $defaultColor; color: var(--inverseLabelTextColor);
&.outline { &.outline {
background-color: $defaultColor !important; background-color: var(--inverseLabelTextColor) !important;
color: $lightGray; color: var(--inverseLabelColor);
} }
} }
.primary { .primary {
border-color: $primaryColor; border-color: var(--primaryColor);
background-color: $primaryColor; background-color: var(--primaryColor);
&.outline { &.outline {
color: $primaryColor; color: var(--primaryColor);
} }
} }
.success { .success {
border-color: $successColor; border-color: var(--successColor);
background-color: $successColor; background-color: var(--successColor);
color: #eee; color: #eee;
&.outline { &.outline {
color: $successColor; color: var(--successColor);
} }
} }
.warning { .warning {
border-color: $warningColor; border-color: var(--warningColor);
background-color: $warningColor; background-color: var(--warningColor);
&.outline { &.outline {
color: $warningColor; color: var(--warningColor);
}
}
.queue {
border-color: $queueColor;
background-color: $queueColor;
&.outline {
color: $queueColor;
} }
} }
@ -117,5 +108,5 @@
/** Outline **/ /** Outline **/
.outline { .outline {
background-color: $white; background-color: var(--white);
} }

60
frontend/src/Components/Link/Button.css
View file

@ -19,62 +19,62 @@
} }
.danger { .danger {
border-color: $dangerBorderColor; border-color: var(--dangerBorderColor);
background-color: $dangerBackgroundColor; background-color: var(--dangerBackgroundColor);
color: $white; color: var(--white);
&:hover { &:hover {
border-color: $dangerHoverBorderColor; border-color: var(--dangerHoverBorderColor);
background-color: $dangerHoverBackgroundColor; background-color: var(--dangerHoverBackgroundColor);
color: $white; color: var(--white);
} }
} }
.default { .default {
border-color: $defaultBorderColor; border-color: var(--defaultBorderColor);
background-color: $defaultBackgroundColor; background-color: var(--defaultButtonBackgroundColor);
color: $defaultColor; color: var(--defaultButtonTextColor);
&:hover { &:hover {
border-color: $defaultHoverBorderColor; border-color: var(--defaultHoverBorderColor);
background-color: $defaultHoverBackgroundColor; background-color: var(--defaultHoverBackgroundColor);
color: $defaultColor; color: var(--defaultButtonTextColor);
} }
} }
.primary { .primary {
border-color: $primaryBorderColor; border-color: var(--primaryBorderColor);
background-color: $primaryBackgroundColor; background-color: var(--primaryBackgroundColor);
color: $white; color: var(--white);
&:hover { &:hover {
border-color: $primaryHoverBorderColor; border-color: var(--primaryHoverBorderColor);
background-color: $primaryHoverBackgroundColor; background-color: var(--primaryHoverBackgroundColor);
color: $white; color: var(--white);
} }
} }
.success { .success {
border-color: $successBorderColor; border-color: var(--successBorderColor);
background-color: $successBackgroundColor; background-color: var(--successBackgroundColor);
color: $white; color: var(--white);
&:hover { &:hover {
border-color: $successHoverBorderColor; border-color: var(--successHoverBorderColor);
background-color: $successHoverBackgroundColor; background-color: var(--successHoverBackgroundColor);
color: $white; color: var(--white);
} }
} }
.warning { .warning {
border-color: $warningBorderColor; border-color: var(--warningBorderColor);
background-color: $warningBackgroundColor; background-color: var(--warningBackgroundColor);
color: $white; color: var(--white);
&:hover { &:hover {
border-color: $warningHoverBorderColor; border-color: var(--warningHoverBorderColor);
background-color: $warningHoverBackgroundColor; background-color: var(--warningHoverBackgroundColor);
color: $white; color: var(--white);
} }
} }

4
frontend/src/Components/Link/IconButton.css
View file

@ -12,10 +12,10 @@
&:hover { &:hover {
border: none; border: none;
background-color: inherit; background-color: inherit;
color: $iconButtonHoverColor; color: var(--iconButtonHoverColor);
} }
&.isDisabled { &.isDisabled {
color: $iconButtonDisabledColor; color: var(--iconButtonDisabledColor);
} }
} }

4
frontend/src/Components/Link/Link.css
View file

@ -15,10 +15,10 @@
} }
.to { .to {
color: $linkColor; color: var(--linkColor);
&:hover { &:hover {
color: $linkHoverColor; color: var(--linkHoverColor);
text-decoration: underline; text-decoration: underline;
} }
} }

2
frontend/src/Components/Loading/LoadingIndicator.css
View file

@ -26,7 +26,7 @@
.ripple { .ripple {
position: absolute; position: absolute;
border: 2px solid #3a3f51; border: 2px solid var(--themeDarkColor);
border-radius: 100%; border-radius: 100%;
animation: rippleContainer 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); animation: rippleContainer 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
animation-fill-mode: both; animation-fill-mode: both;

4
frontend/src/Components/Menu/MenuButton.css
View file

@ -10,12 +10,12 @@
} }
&:hover { &:hover {
color: $toobarButtonHoverColor; color: var(--toobarButtonHoverColor);
} }
} }
.isDisabled { .isDisabled {
color: $disabledColor; color: var(--disabledColor);
pointer-events: none; pointer-events: none;
} }

2
frontend/src/Components/Menu/MenuContent.css
View file

@ -2,7 +2,7 @@
z-index: $popperZIndex; z-index: $popperZIndex;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: $toolbarMenuItemBackgroundColor; background-color: var(--toolbarMenuItemBackgroundColor);
line-height: 20px; line-height: 20px;
} }

10
frontend/src/Components/Menu/MenuItem.css
View file

@ -5,19 +5,19 @@
padding: 10px 20px; padding: 10px 20px;
min-width: 150px; min-width: 150px;
max-width: 250px; max-width: 250px;
background-color: $toolbarMenuItemBackgroundColor; background-color: var(--toolbarMenuItemBackgroundColor);
color: $menuItemColor; color: var(--menuItemColor);
line-height: 20px; line-height: 20px;
&:hover, &:hover,
&:focus { &:focus {
background-color: $toolbarMenuItemHoverBackgroundColor; background-color: var(--toolbarMenuItemHoverBackgroundColor);
color: $menuItemHoverColor; color: var(--menuItemHoverColor);
text-decoration: none; text-decoration: none;
} }
} }
.isDisabled { .isDisabled {
color: $disabledColor; color: var(--disabledColor);
pointer-events: none; pointer-events: none;
} }

2
frontend/src/Components/Menu/MenuItemSeparator.css
View file

@ -2,5 +2,5 @@
overflow: hidden; overflow: hidden;
min-height: 1px; min-height: 1px;
height: 1px; height: 1px;
background-color: $themeDarkColor; background-color: var(--themeDarkColor);
} }

2
frontend/src/Components/Modal/Modal.css
View file

@ -12,7 +12,7 @@
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $modalBackdropBackgroundColor; background-color: var(--modalBackdropBackgroundColor);
opacity: 1; opacity: 1;
} }

4
frontend/src/Components/Modal/ModalContent.css
View file

@ -4,7 +4,7 @@
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
width: 100%; width: 100%;
background-color: $modalBackgroundColor; background-color: var(--modalBackgroundColor);
} }
.closeButton { .closeButton {
@ -18,6 +18,6 @@
line-height: 60px; line-height: 60px;
&:hover { &:hover {
color: $modalCloseButtonHoverColor; color: var(--modalCloseButtonHoverColor);
} }
} }

2
frontend/src/Components/Modal/ModalFooter.css
View file

@ -4,7 +4,7 @@
justify-content: flex-end; justify-content: flex-end;
flex-shrink: 0; flex-shrink: 0;
padding: 15px 30px; padding: 15px 30px;
border-top: 1px solid $borderColor; border-top: 1px solid var(--borderColor);
a, a,
button { button {

2
frontend/src/Components/Modal/ModalHeader.css
View file

@ -3,6 +3,6 @@
flex-shrink: 0; flex-shrink: 0;
padding: 15px 50px 15px 30px; padding: 15px 50px 15px 30px;
border-bottom: 1px solid $borderColor; border-bottom: 1px solid var(--borderColor);
font-size: 18px; font-size: 18px;
} }

20
frontend/src/Components/Page/Header/IndexerSearchInput.css
View file

@ -12,22 +12,22 @@
.ripple { .ripple {
composes: ripple from '~Components/Loading/LoadingIndicator.css'; composes: ripple from '~Components/Loading/LoadingIndicator.css';
border: 1px solid $toolbarColor; border: 1px solid var(--toolbarColor);
} }
.input { .input {
margin-left: 8px; margin-left: 8px;
width: 200px; width: 200px;
border: none; border: none;
border-bottom: solid 1px $white; border-bottom: solid 1px var(--white);
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
color: $white; color: var(--white);
transition: border 0.3s ease-out; transition: border 0.3s ease-out;
&::placeholder { &::placeholder {
color: $white; color: var(--white);
transition: color 0.3s ease-out; transition: color 0.3s ease-out;
} }
@ -60,13 +60,13 @@
overflow-y: auto; overflow-y: auto;
min-width: 100%; min-width: 100%;
max-height: 230px; max-height: 230px;
border: 1px solid $themeDarkColor; border: 1px solid var(--themeDarkColor);
border-radius: 4px; border-radius: 4px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
background-color: $themeDarkColor; background-color: var(--themeDarkColor);
box-shadow: inset 0 1px 1px $inputBoxShadowColor; box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
color: $menuItemColor; color: var(--menuItemColor);
} }
} }
@ -82,12 +82,12 @@
} }
.highlighted { .highlighted {
background-color: $themeLightColor; background-color: var(--themeLightColor);
} }
.sectionTitle { .sectionTitle {
padding: 5px 8px; padding: 5px 8px;
color: $disabledColor; color: var(--disabledColor);
} }
.addNewMovieSuggestion { .addNewMovieSuggestion {

2
frontend/src/Components/Page/Header/IndexerSearchResult.css
View file

@ -21,7 +21,7 @@
.alternateTitle { .alternateTitle {
composes: title; composes: title;
color: $disabledColor; color: var(--disabledColor);
font-size: $smallFontSize; font-size: $smallFontSize;
} }

4
frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css
View file

@ -8,8 +8,8 @@
.key { .key {
padding: 2px 4px; padding: 2px 4px;
border-radius: 3px; border-radius: 3px;
background-color: $defaultColor; background-color: var(--defaultColor);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
color: $white; color: var(--white);
font-size: 16px; font-size: 16px;
} }

6
frontend/src/Components/Page/Header/PageHeader.css
View file

@ -4,9 +4,9 @@
align-items: center; align-items: center;
flex: 0 0 auto; flex: 0 0 auto;
height: $headerHeight; height: $headerHeight;
background-color: $prowlarrOrange; background-color: var(--pageHeaderBackgroundColor);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
color: $white; color: var(--white);
} }
.logoContainer { .logoContainer {
@ -80,7 +80,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 30px; width: 30px;
color: $themeRed; color: var(--themeRed);
text-align: center; text-align: center;
line-height: 60px; line-height: 60px;

2
frontend/src/Components/Page/Header/PageHeaderActionsMenu.css
View file

@ -5,7 +5,7 @@
text-align: center; text-align: center;
&:hover { &:hover {
color: $toobarButtonHoverColor; color: var(--toobarButtonHoverColor);
} }
} }

2
frontend/src/Components/Page/LoadingPage.css
View file

@ -1,5 +1,7 @@
.page { .page {
composes: page from '~./Page.css'; composes: page from '~./Page.css';
background-color: var(--pageBackground);
} }
.logoFull { .logoFull {

2
frontend/src/Components/Page/PageContentFooter.css
View file

@ -2,7 +2,7 @@
display: flex; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
padding: 20px; padding: 20px;
background-color: #f1f1f1; background-color: var(--pageFooterBackground);
} }
@media only screen and (max-width: $breakpointSmall) { @media only screen and (max-width: $breakpointSmall) {

2
frontend/src/Components/Page/PageJumpBarItem.css
View file

@ -1,6 +1,6 @@
.jumpBarItem { .jumpBarItem {
flex: 1 1 $jumpBarItemHeight; flex: 1 1 $jumpBarItemHeight;
border-bottom: 1px solid $borderColor; border-bottom: 1px solid var(--borderColor);
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;

12
frontend/src/Components/Page/Sidebar/Messages/Message.css
View file

@ -1,6 +1,6 @@
.message { .message {
display: flex; display: flex;
border-left: 3px solid $infoColor; border-left: 3px solid var(--infoColor);
} }
.iconContainer, .iconContainer,
@ -9,7 +9,7 @@
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
padding: 2px 0; padding: 2px 0;
color: $sidebarColor; color: var(--sidebarColor);
} }
.iconContainer { .iconContainer {
@ -26,17 +26,17 @@
/* Types */ /* Types */
.error { .error {
border-left-color: $dangerColor; border-left-color: var(--dangerColor);
} }
.info { .info {
border-left-color: $infoColor; border-left-color: var(--infoColor);
} }
.success { .success {
border-left-color: $successColor; border-left-color: var(--successColor);
} }
.warning { .warning {
border-left-color: $warningColor; border-left-color: var(--warningColor);
} }

6
frontend/src/Components/Page/Sidebar/PageSidebar.css
View file

@ -2,7 +2,7 @@
flex: 0 0 $sidebarWidth; flex: 0 0 $sidebarWidth;
overflow: hidden; overflow: hidden;
width: $sidebarWidth; width: $sidebarWidth;
background-color: $sidebarBackgroundColor; background-color: var(--sidebarBackgroundColor);
transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out;
transform: translateX(0); transform: translateX(0);
} }
@ -11,8 +11,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
background-color: $sidebarBackgroundColor; background-color: var(--sidebarBackgroundColor);
color: $white; color: var(--white);
} }
@media only screen and (max-width: $breakpointSmall) { @media only screen and (max-width: $breakpointSmall) {

12
frontend/src/Components/Page/Sidebar/PageSidebarItem.css
View file

@ -1,21 +1,21 @@
.item { .item {
border-left: 3px solid transparent; border-left: 3px solid transparent;
color: $sidebarColor; color: var(--sidebarColor);
transition: border-left 0.3s ease-in-out; transition: border-left 0.3s ease-in-out;
} }
.isActiveItem { .isActiveItem {
border-left: 3px solid $themeBlue; border-left: 3px solid var(--themeBlue);
} }
.link { .link {
display: block; display: block;
padding: 12px 24px; padding: 12px 24px;
color: $sidebarColor; color: var(--sidebarColor);
&:hover, &:hover,
&:focus { &:focus {
color: $themeBlue; color: var(--themeBlue);
text-decoration: none; text-decoration: none;
} }
} }
@ -27,11 +27,11 @@
} }
.isActiveLink { .isActiveLink {
color: $themeBlue; color: var(--themeBlue);
} }
.isActiveParentLink { .isActiveParentLink {
background-color: $sidebarActiveBackgroundColor; background-color: var(--sidebarActiveBackgroundColor);
} }
.iconContainer { .iconContainer {

4
frontend/src/Components/Page/Toolbar/PageToolbar.css
View file

@ -4,8 +4,8 @@
flex: 0 0 auto; flex: 0 0 auto;
padding: 0 20px; padding: 0 20px;
height: $toolbarHeight; height: $toolbarHeight;
background-color: $toolbarBackgroundColor; background-color: var(--toolbarBackgroundColor);
color: $toolbarColor; color: var(--toolbarColor);
line-height: 60px; line-height: 60px;
} }

8
frontend/src/Components/Page/Toolbar/PageToolbarButton.css
View file

@ -6,16 +6,16 @@
text-align: center; text-align: center;
&:hover { &:hover {
color: $toobarButtonHoverColor; color: var(--toobarButtonHoverColor);
} }
&.isDisabled { &.isDisabled {
color: $disabledColor; color: var(--disabledColor);
} }
} }
.isDisabled { .isDisabled {
color: $disabledColor; color: var(--disabledColor);
} }
.labelContainer { .labelContainer {
@ -27,7 +27,7 @@
.label { .label {
padding: 0 3px; padding: 0 3px;
color: $toolbarLabelColor; color: var(--toolbarLabelColor);
font-size: $extraSmallFontSize; font-size: $extraSmallFontSize;
line-height: calc($extraSmallFontSize + 1px); line-height: calc($extraSmallFontSize + 1px);
} }

24
frontend/src/Components/ProgressBar.css
View file

@ -14,13 +14,13 @@
width: 0; width: 0;
height: 100%; height: 100%;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
color: $white; color: var(--white);
transition: width 0.6s ease; transition: width 0.6s ease;
} }
.frontTextContainer { .frontTextContainer {
z-index: 1; z-index: 1;
color: $white; color: var(--white);
} }
.backTextContainer, .backTextContainer,
@ -42,39 +42,35 @@
} }
.primary { .primary {
background-color: $primaryColor; background-color: var(--primaryColor);
} }
.danger { .danger {
background-color: $dangerColor; background-color: var(--dangerColor);
&:global(.colorImpaired) { &:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px); background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
} }
} }
.success { .success {
background-color: $successColor; background-color: var(--successColor);
} }
.purple { .purple {
background-color: $purple; background-color: var(--purple);
} }
.warning { .warning {
background-color: $warningColor; background-color: var(--warningColor);
&:global(.colorImpaired) { &:global(.colorImpaired) {
background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px); background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
} }
} }
.info { .info {
background-color: $infoColor; background-color: var(--infoColor);
}
.queue {
background-color: $queueColor;
} }
.small { .small {

4
frontend/src/Components/Scroller/OverlayScroller.css
View file

@ -10,10 +10,10 @@
min-height: 100px; min-height: 100px;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 5px; border-radius: 5px;
background-color: $scrollbarBackgroundColor; background-color: var(--scrollbarBackgroundColor);
background-clip: padding-box; background-clip: padding-box;
&:hover { &:hover {
background-color: $scrollbarHoverBackgroundColor; background-color: var(--scrollbarHoverBackgroundColor);
} }
} }

2
frontend/src/Components/Table/TableOptions/TableOptionsColumn.css
View file

@ -4,7 +4,7 @@
width: 100%; width: 100%;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 4px; border-radius: 4px;
background: #fafafa; background: var(--inputBackgroundColor);
} }
.checkContainer { .checkContainer {

4
frontend/src/Components/Table/TablePager.css
View file

@ -46,11 +46,11 @@
} }
.records { .records {
color: $disabledColor; color: var(--disabledColor);
} }
.disabledPageButton { .disabledPageButton {
color: $disabledColor; color: var(--disabledColor);
} }
.pageSelect { .pageSelect {

2
frontend/src/Components/Table/TableRow.css
View file

@ -2,6 +2,6 @@
transition: background-color 500ms; transition: background-color 500ms;
&:hover { &:hover {
background-color: $tableRowHoverBackgroundColor; background-color: var(--tableRowHoverBackgroundColor);
} }
} }

2
frontend/src/Components/Table/VirtualTableRow.css
View file

@ -3,7 +3,7 @@
transition: background-color 500ms; transition: background-color 500ms;
&:hover { &:hover {
background-color: #fafbfc; background-color: var(--tableRowHoverBackgroundColor);
} }
} }

4
frontend/src/Components/Tooltip/Popover.css
View file

@ -1,7 +1,7 @@
.title { .title {
padding: 10px 20px; padding: 10px 20px;
border-bottom: 1px solid $popoverTitleBorderColor; border-bottom: 1px solid var(--popoverTitleBorderColor);
background-color: $popoverTitleBackgroundColor; background-color: var(--popoverTitleBackgroundColor);
font-size: 16px; font-size: 16px;
} }

40
frontend/src/Components/Tooltip/Tooltip.css
View file

@ -7,13 +7,13 @@
position: relative; position: relative;
&.default { &.default {
background-color: $white; background-color: var(--white);
box-shadow: 0 5px 10px $popoverShadowColor; box-shadow: 0 5px 10px var(--popoverShadowColor);
} }
&.inverse { &.inverse {
background-color: $themeDarkColor; background-color: var(--themeDarkColor);
box-shadow: 0 5px 10px $popoverShadowInverseColor; box-shadow: 0 5px 10px var(--popoverShadowInverseColor);
} }
} }
@ -49,20 +49,20 @@
content: ' '; content: ' ';
&.default { &.default {
border-top-color: $popoverArrowBorderColor; border-top-color: var(--popoverArrowBorderColor);
} }
&.inverse { &.inverse {
border-top-color: $popoverArrowBorderInverseColor; border-top-color: var(--popoverArrowBorderInverseColor);
} }
} }
&.default { &.default {
border-top-color: $popoverArrowBorderColor; border-top-color: var(--popoverArrowBorderColor);
} }
&.inverse { &.inverse {
border-top-color: $popoverArrowBorderInverseColor; border-top-color: var(--popoverArrowBorderInverseColor);
} }
} }
@ -78,20 +78,20 @@
content: ' '; content: ' ';
&.default { &.default {
border-right-color: $popoverArrowBorderColor; border-right-color: var(--popoverArrowBorderColor);
} }
&.inverse { &.inverse {
border-right-color: $popoverArrowBorderInverseColor; border-right-color: var(--popoverArrowBorderInverseColor);
} }
} }
&.default { &.default {
border-right-color: $popoverArrowBorderColor; border-right-color: var(--popoverArrowBorderColor);
} }
&.inverse { &.inverse {
border-right-color: $popoverArrowBorderInverseColor; border-right-color: var(--popoverArrowBorderInverseColor);
} }
} }
@ -107,20 +107,20 @@
content: ' '; content: ' ';
&.default { &.default {
border-bottom-color: $popoverArrowBorderColor; border-bottom-color: var(--popoverArrowBorderColor);
} }
&.inverse { &.inverse {
border-bottom-color: $popoverArrowBorderInverseColor; border-bottom-color: var(--popoverArrowBorderInverseColor);
} }
} }
&.default { &.default {
border-bottom-color: $popoverArrowBorderColor; border-bottom-color: var(--popoverArrowBorderColor);
} }
&.inverse { &.inverse {
border-bottom-color: $popoverArrowBorderInverseColor; border-bottom-color: var(--popoverArrowBorderInverseColor);
} }
} }
@ -136,20 +136,20 @@
content: ' '; content: ' ';
&.default { &.default {
border-left-color: $popoverArrowBorderColor; border-left-color: var(--popoverArrowBorderColor);
} }
&.inverse { &.inverse {
border-left-color: $popoverArrowBorderInverseColor; border-left-color: var(--popoverArrowBorderInverseColor);
} }
} }
&.default { &.default {
border-left-color: $popoverArrowBorderColor; border-left-color: var(--popoverArrowBorderColor);
} }
&.inverse { &.inverse {
border-left-color: $popoverArrowBorderInverseColor; border-left-color: var(--popoverArrowBorderInverseColor);
} }
} }

2
frontend/src/Helpers/Props/kinds.js
View file

@ -3,7 +3,6 @@ export const DEFAULT = 'default';
export const DISABLED = 'disabled'; export const DISABLED = 'disabled';
export const INFO = 'info'; export const INFO = 'info';
export const INVERSE = 'inverse'; export const INVERSE = 'inverse';
export const PINK = 'pink';
export const PRIMARY = 'primary'; export const PRIMARY = 'primary';
export const PURPLE = 'purple'; export const PURPLE = 'purple';
export const SUCCESS = 'success'; export const SUCCESS = 'success';
@ -16,7 +15,6 @@ export const all = [
DISABLED, DISABLED,
INFO, INFO,
INVERSE, INVERSE,
PINK,
PRIMARY, PRIMARY,
PURPLE, PURPLE,
SUCCESS, SUCCESS,

8
frontend/src/History/HistoryRowParameter.css
View file

@ -3,9 +3,9 @@
align-items: stretch; align-items: stretch;
overflow: hidden; overflow: hidden;
margin: 2px 4px; margin: 2px 4px;
border: 1px solid $borderColor; border: 1px solid var(--borderColor);
border-radius: 4px; border-radius: 4px;
background-color: #eee; background-color: var(--defaultHoverBackgroundColor);
cursor: default; cursor: default;
} }
@ -16,7 +16,7 @@
.value { .value {
padding: 0 4px; padding: 0 4px;
background-color: $white; background-color: var(--defaultButtonBackgroundColor);
color: $defaultColor; color: var(--defaultColor);
white-space: nowrap; white-space: nowrap;
} }

2
frontend/src/Indexer/Editor/Delete/DeleteIndexerModalContent.css
View file

@ -9,5 +9,5 @@
.path { .path {
margin-left: 5px; margin-left: 5px;
color: $dangerColor; color: var(--dangerColor);
} }

10
frontend/src/Indexer/Index/IndexerIndexFooter.css
View file

@ -21,28 +21,28 @@
.disabled { .disabled {
composes: legendItemColor; composes: legendItemColor;
background-color: $darkGray; background-color: var(--darkGray);
} }
.enabled { .enabled {
composes: legendItemColor; composes: legendItemColor;
background-color: $successColor; background-color: var(--successColor);
} }
.redirected { .redirected {
composes: legendItemColor; composes: legendItemColor;
background-color: $infoColor; background-color: var(--infoColor);
} }
.error { .error {
composes: legendItemColor; composes: legendItemColor;
background-color: $dangerColor; background-color: var(--dangerColor);
&:global(.colorImpaired) { &: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);
} }
} }

2
frontend/src/Indexer/Index/Table/IndexerIndexRow.css
View file

@ -65,5 +65,5 @@
.externalLink { .externalLink {
composes: link from '~Components/Link/Link.css'; composes: link from '~Components/Link/Link.css';
color: $textColor; color: var(--textColor);
} }

8
frontend/src/Indexer/Index/Table/ProtocolLabel.css
View file

@ -1,13 +1,13 @@
.torrent { .torrent {
composes: label from '~Components/Label.css'; composes: label from '~Components/Label.css';
border-color: $torrentColor; border-color: var(--torrentColor);
background-color: $torrentColor; background-color: var(--torrentColor);
} }
.usenet { .usenet {
composes: label from '~Components/Label.css'; composes: label from '~Components/Label.css';
border-color: $usenetColor; border-color: var(--usenetColor);
background-color: $usenetColor; background-color: var(--usenetColor);
} }

4
frontend/src/Search/QueryParameterModal.css
View file

@ -19,7 +19,7 @@
.footNote { .footNote {
display: flex; display: flex;
color: $helpTextColor; color: var(--helpTextColor);
.icon { .icon {
margin-top: 3px; margin-top: 3px;
@ -29,7 +29,7 @@
code { code {
padding: 0 1px; padding: 0 1px;
border: 1px solid $borderColor; border: 1px solid var(--borderColor);
background-color: #f7f7f7; background-color: #f7f7f7;
} }
} }

10
frontend/src/Search/QueryParameterOption.css
View file

@ -3,15 +3,15 @@
align-items: stretch; align-items: stretch;
flex-wrap: wrap; flex-wrap: wrap;
margin: 3px; margin: 3px;
border: 1px solid $borderColor; border: 1px solid var(--borderColor);
&:hover { &:hover {
.token { .token {
background-color: #ddd; background-color: rgba(0, 0, 0, 0.01);
} }
.example { .example {
background-color: #ccc; background-color: rgba(0, 0, 0, 0.01);
} }
} }
} }
@ -27,7 +27,7 @@
.token { .token {
flex: 0 0 50%; flex: 0 0 50%;
padding: 6px 16px; padding: 6px 16px;
background-color: #eee; background-color: var(--defaultButtonBackgroundColor);
font-family: $monoSpaceFontFamily; font-family: $monoSpaceFontFamily;
} }
@ -37,7 +37,7 @@
justify-content: space-between; justify-content: space-between;
flex: 0 0 50%; flex: 0 0 50%;
padding: 6px 16px; padding: 6px 16px;
background-color: #ddd; background-color: var(--defaultHoverBackgroundColor);
.footNote { .footNote {
padding: 2px; padding: 2px;

8
frontend/src/Search/Table/ProtocolLabel.css
View file

@ -1,13 +1,13 @@
.torrent { .torrent {
composes: label from '~Components/Label.css'; composes: label from '~Components/Label.css';
border-color: $torrentColor; border-color: var(--torrentColor);
background-color: $torrentColor; background-color: var(--torrentColor);
} }
.usenet { .usenet {
composes: label from '~Components/Label.css'; composes: label from '~Components/Label.css';
border-color: $usenetColor; border-color: var(--usenetColor);
background-color: $usenetColor; background-color: var(--usenetColor);
} }

2
frontend/src/Search/Table/SearchIndexRow.css
View file

@ -58,7 +58,7 @@
margin: 0 2px; margin: 0 2px;
width: 22px; width: 22px;
color: $textColor; color: var(--textColor);
} }
.externalLinks { .externalLinks {

6
frontend/src/Settings/AdvancedSettingsButton.css
View file

@ -19,13 +19,13 @@
} }
.indicatorBackground { .indicatorBackground {
color: $themeDarkColor; color: var(--themeDarkColor);
} }
.enabled { .enabled {
color: $successColor; color: var(--successColor);
} }
.disabled { .disabled {
color: $dangerColor; color: var(--dangerColor);
} }

8
frontend/src/Settings/Applications/Applications/Applications.css
View file

@ -6,15 +6,15 @@
.addApplication { .addApplication {
composes: application from '~./Application.css'; composes: application from '~./Application.css';
background-color: $cardAlternateBackgroundColor; background-color: var(--cardAlternateBackgroundColor);
color: $gray; color: var(--gray);
text-align: center; text-align: center;
} }
.center { .center {
display: inline-block; display: inline-block;
padding: 5px 20px 0; padding: 5px 20px 0;
border: 1px solid $borderColor; border: 1px solid var(--borderColor);
border-radius: 4px; border-radius: 4px;
background-color: $white; background-color: var(--cardCenterBackgroundColor);
} }

8
frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css
View file

@ -6,15 +6,15 @@
.addDownloadClient { .addDownloadClient {
composes: downloadClient from '~./DownloadClient.css'; composes: downloadClient from '~./DownloadClient.css';
background-color: $cardAlternateBackgroundColor; background-color: var(--cardAlternateBackgroundColor);
color: $gray; color: var(--gray);
text-align: center; text-align: center;
} }
.center { .center {
display: inline-block; display: inline-block;
padding: 5px 20px 0; padding: 5px 20px 0;
border: 1px solid $borderColor; border: 1px solid var(--borderColor);
border-radius: 4px; border-radius: 4px;
background-color: $white; background-color: var(--cardCenterBackgroundColor);
} }

8
frontend/src/Settings/Indexers/IndexerProxies/IndexerProxies.css
View file

@ -6,15 +6,15 @@
.addIndexerProxy { .addIndexerProxy {
composes: indexerProxy from '~./IndexerProxy.css'; composes: indexerProxy from '~./IndexerProxy.css';
background-color: $cardAlternateBackgroundColor; background-color: var(--cardAlternateBackgroundColor);
color: $gray; color: var(--gray);
text-align: center; text-align: center;
} }
.center { .center {
display: inline-block; display: inline-block;
padding: 5px 20px 0; padding: 5px 20px 0;
border: 1px solid $borderColor; border: 1px solid var(--borderColor);
border-radius: 4px; border-radius: 4px;
background-color: $white; background-color: var(--cardCenterBackgroundColor);
} }

8
frontend/src/Settings/Notifications/Notifications/Notifications.css
View file

@ -6,15 +6,15 @@
.addNotification { .addNotification {
composes: notification from '~./Notification.css'; composes: notification from '~./Notification.css';
background-color: $cardAlternateBackgroundColor; background-color: var(--cardAlternateBackgroundColor);
color: $gray; color: var(--gray);
text-align: center; text-align: center;
} }
.center { .center {
display: inline-block; display: inline-block;
padding: 5px 20px 0; padding: 5px 20px 0;
border: 1px solid $borderColor; border: 1px solid var(--borderColor);
border-radius: 4px; border-radius: 4px;
background-color: $white; background-color: var(--cardCenterBackgroundColor);
} }

8
frontend/src/Settings/Profiles/App/AppProfiles.css
View file

@ -6,8 +6,8 @@
.addAppProfile { .addAppProfile {
composes: appProfile from '~./AppProfile.css'; composes: appProfile from '~./AppProfile.css';
background-color: $cardAlternateBackgroundColor; background-color: var(--cardAlternateBackgroundColor);
color: $gray; color: var(--gray);
text-align: center; text-align: center;
font-size: 45px; font-size: 45px;
} }
@ -15,7 +15,7 @@
.center { .center {
display: inline-block; display: inline-block;
padding: 5px 20px 0; padding: 5px 20px 0;
border: 1px solid $borderColor; border: 1px solid var(--borderColor);
border-radius: 4px; border-radius: 4px;
background-color: $white; background-color: var(--cardCenterBackgroundColor);
} }

4
frontend/src/Settings/Settings.css
View file

@ -2,7 +2,7 @@
composes: link from '~Components/Link/Link.css'; composes: link from '~Components/Link/Link.css';
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
color: #3a3f51; color: var(--textColor);
font-size: 21px; font-size: 21px;
&:hover { &:hover {
@ -14,5 +14,5 @@
.summary { .summary {
margin-top: 10px; margin-top: 10px;
margin-bottom: 30px; margin-bottom: 30px;
color: $dimColor; color: var(--helpTextColor);
} }

2
frontend/src/Settings/Tags/Details/TagDetailsModalContent.css
View file

@ -10,7 +10,7 @@
.restriction { .restriction {
margin-bottom: 5px; margin-bottom: 5px;
padding-bottom: 5px; padding-bottom: 5px;
border-bottom: 1px solid $borderColor; border-bottom: 1px solid var(--borderColor);
&:last-child { &:last-child {
margin: 0; margin: 0;

4
frontend/src/Styles/Mixins/scroller.css
View file

@ -16,11 +16,11 @@
min-height: 100px; min-height: 100px;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 5px; border-radius: 5px;
background-color: $scrollbarBackgroundColor; background-color: var(--scrollbarBackgroundColor);
background-clip: padding-box; background-clip: padding-box;
&:hover { &:hover {
background-color: $scrollbarHoverBackgroundColor; background-color: var(--scrollbarHoverBackgroundColor);
} }
} }
} }

4
frontend/src/Styles/Themes/index.js
View file

@ -1,5 +1,7 @@
import * as dark from './dark';
import * as light from './light'; import * as light from './light';
export default { export default {
light light,
dark
}; };

37
frontend/src/Styles/Themes/light.js
View file

@ -7,22 +7,17 @@ module.exports = {
dimColor: '#555', dimColor: '#555',
black: '#000', black: '#000',
white: '#fff', white: '#fff',
offWhite: '#f5f7fa',
primaryColor: '#5d9cec', primaryColor: '#5d9cec',
selectedColor: '#f9be03', selectedColor: '#f9be03',
successColor: '#27c24c', successColor: '#27c24c',
dangerColor: '#f05050', dangerColor: '#f05050',
warningColor: '#ffa500', warningColor: '#ffa500',
infoColor: '#5d9cec', infoColor: '#5d9cec',
queueColor: '#7a43b6',
purple: '#7a43b6', purple: '#7a43b6',
pink: '#ff69b4',
prowlarrOrange, prowlarrOrange,
helpTextColor: '#909293', helpTextColor: '#909293',
darkGray: '#888', darkGray: '#888',
gray: '#adadad', gray: '#adadad',
lightGray: '#ddd',
disabledInputColor: '#808080',
// Theme Colors // Theme Colors
@ -30,15 +25,24 @@ module.exports = {
themeRed: '#c4273c', themeRed: '#c4273c',
themeDarkColor: '#595959', themeDarkColor: '#595959',
themeLightColor: '#707070', themeLightColor: '#707070',
pageBackground: '#f5f7fa',
pageFooterBackgroud: '#f1f1f1',
torrentColor: '#00853d', torrentColor: '#00853d',
usenetColor: '#17b1d9', usenetColor: '#17b1d9',
// Labels
inverseLabelColor: '#ddd',
inverseLabelTextColor: '#333',
// Links // Links
defaultLinkHoverColor: '#fff', defaultLinkHoverColor: '#fff',
linkColor: '#5d9cec', linkColor: '#5d9cec',
linkHoverColor: '#1b72e2', linkHoverColor: '#1b72e2',
// Header
pageHeaderBackgroundColor: prowlarrOrange,
// Sidebar // Sidebar
sidebarColor: '#e1e2e3', sidebarColor: '#e1e2e3',
@ -68,7 +72,8 @@ module.exports = {
// //
// Buttons // Buttons
defaultBackgroundColor: '#fff', defaultButtonTextColor: '#333',
defaultButtonBackgroundColor: '#fff',
defaultBorderColor: '#eaeaea', defaultBorderColor: '#eaeaea',
defaultHoverBackgroundColor: '#f5f5f5', defaultHoverBackgroundColor: '#f5f5f5',
defaultHoverBorderColor: '#d6d6d6;', defaultHoverBorderColor: '#d6d6d6;',
@ -125,8 +130,10 @@ module.exports = {
// //
// Card // Card
cardBackgroundColor: '#fff',
cardShadowColor: '#e1e1e1', cardShadowColor: '#e1e1e1',
cardAlternateBackgroundColor: '#f5f5f5', cardAlternateBackgroundColor: '#f5f5f5',
cardCenterBackgroundColor: '#fff',
// //
// Alert // Alert
@ -147,16 +154,16 @@ module.exports = {
alertWarningBackgroundColor: '#fcf8e3', alertWarningBackgroundColor: '#fcf8e3',
alertWarningColor: '#8a6d3b', alertWarningColor: '#8a6d3b',
//
// Slider
sliderAccentColor: '#5d9cec',
// //
// Form // Form
inputBackgroundColor: '#fff',
inputReadOnlyBackgroundColor: '#eee',
inputHoverBackgroundColor: '#f8f8f8',
inputSelectedBackgroundColor: '#e2e2e2',
advancedFormLabelColor: '#ff902b', advancedFormLabelColor: '#ff902b',
disabledCheckInputColor: '#ddd', disabledCheckInputColor: '#ddd',
disabledInputColor: '#808080',
// //
// Popover // Popover
@ -171,13 +178,6 @@ module.exports = {
popoverShadowInverseColor: 'rgba(0, 0, 0, 0.2)', popoverShadowInverseColor: 'rgba(0, 0, 0, 0.2)',
popoverArrowBorderInverseColor: 'rgba(58, 63, 81, 0.75)', popoverArrowBorderInverseColor: 'rgba(58, 63, 81, 0.75)',
//
// Calendar
calendarTodayBackgroundColor: '#ddd',
calendarBorderColor: '#cecece',
calendarTextDim: '#666',
// //
// Table // Table
@ -187,5 +187,6 @@ module.exports = {
// Charts // Charts
failedColors: ['#ffbeb2', '#feb4a6', '#fdab9b', '#fca290', '#fb9984', '#fa8f79', '#f9856e', '#f77b66', '#f5715d', '#f36754', '#f05c4d', '#ec5049', '#e74545', '#e13b42', '#da323f', '#d3293d', '#ca223c', '#c11a3b', '#b8163a', '#ae123a'], failedColors: ['#ffbeb2', '#feb4a6', '#fdab9b', '#fca290', '#fb9984', '#fa8f79', '#f9856e', '#f77b66', '#f5715d', '#f36754', '#f05c4d', '#ec5049', '#e74545', '#e13b42', '#da323f', '#d3293d', '#ca223c', '#c11a3b', '#b8163a', '#ae123a'],
chartColorsDiversified: ['#90caf9', '#f4d166', '#ff8a65', '#ce93d8', '#80cba9', '#ffab91', '#8097ea', '#bcaaa4', '#a57583', '#e4e498', '#9e96af', '#c6ab81', '#6972c6', '#619fc6', '#81ad81', '#f48fb1', '#82afca', '#b5b071', '#8b959b', '#7ec0b4'],
chartColors: ['#f4d166', '#f6c760', '#f8bc58', '#f8b252', '#f7a84a', '#f69e41', '#f49538', '#f38b2f', '#f28026', '#f0751e', '#eb6c1c', '#e4641e', '#de5d1f', '#d75521', '#cf4f22', '#c64a22', '#bc4623', '#b24223', '#a83e24', '#9e3a26'] chartColors: ['#f4d166', '#f6c760', '#f8bc58', '#f8b252', '#f7a84a', '#f69e41', '#f49538', '#f38b2f', '#f28026', '#f0751e', '#eb6c1c', '#e4641e', '#de5d1f', '#d75521', '#cf4f22', '#c64a22', '#bc4623', '#b24223', '#a83e24', '#9e3a26']
}; };

192
frontend/src/Styles/Variables/colors.js
View file

@ -1,192 +0,0 @@
const prowlarrOrange = '#e66000';
module.exports = {
textColor: '#515253',
defaultColor: '#333',
disabledColor: '#999',
dimColor: '#555',
black: '#000',
white: '#fff',
offWhite: '#f5f7fa',
primaryColor: '#5d9cec',
selectedColor: '#f9be03',
successColor: '#27c24c',
dangerColor: '#f05050',
warningColor: '#ffa500',
infoColor: '#5d9cec',
queueColor: '#7a43b6',
purple: '#7a43b6',
pink: '#ff69b4',
prowlarrOrange,
helpTextColor: '#909293',
darkGray: '#888',
gray: '#adadad',
lightGray: '#ddd',
disabledInputColor: '#808080',
// Theme Colors
themeBlue: prowlarrOrange,
themeRed: '#c4273c',
themeDarkColor: '#595959',
themeLightColor: '#707070',
torrentColor: '#00853d',
usenetColor: '#17b1d9',
// Links
defaultLinkHoverColor: '#fff',
linkColor: '#5d9cec',
linkHoverColor: '#1b72e2',
// Sidebar
sidebarColor: '#e1e2e3',
sidebarBackgroundColor: '#595959',
sidebarActiveBackgroundColor: '#333333',
// Toolbar
toolbarColor: '#e1e2e3',
toolbarBackgroundColor: '#707070',
toolbarMenuItemBackgroundColor: '#606060',
toolbarMenuItemHoverBackgroundColor: '#515151',
toolbarLabelColor: '#e1e2e3',
// Accents
borderColor: '#e5e5e5',
inputBorderColor: '#dde6e9',
inputBoxShadowColor: 'rgba(0, 0, 0, 0.075)',
inputFocusBorderColor: '#66afe9',
inputFocusBoxShadowColor: 'rgba(102, 175, 233, 0.6)',
inputErrorBorderColor: '#f05050',
inputErrorBoxShadowColor: 'rgba(240, 80, 80, 0.6)',
inputWarningBorderColor: '#ffa500',
inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
colorImpairedGradient: '#ffffff',
colorImpairedGradientDark: '#f4f5f6',
//
// Buttons
defaultBackgroundColor: '#fff',
defaultBorderColor: '#eaeaea',
defaultHoverBackgroundColor: '#f5f5f5',
defaultHoverBorderColor: '#d6d6d6;',
primaryBackgroundColor: '#5d9cec',
primaryBorderColor: '#5899eb',
primaryHoverBackgroundColor: '#4b91ea',
primaryHoverBorderColor: '#3483e7;',
successBackgroundColor: '#27c24c',
successBorderColor: '#26be4a',
successHoverBackgroundColor: '#24b145',
successHoverBorderColor: '#1f9c3d;',
warningBackgroundColor: '#ff902b',
warningBorderColor: '#ff8d26',
warningHoverBackgroundColor: '#ff8517',
warningHoverBorderColor: '#fc7800;',
dangerBackgroundColor: '#f05050',
dangerBorderColor: '#f04b4b',
dangerHoverBackgroundColor: '#ee3d3d',
dangerHoverBorderColor: '#ec2626;',
iconButtonDisabledColor: '#7a7a7a',
iconButtonHoverColor: '#666',
iconButtonHoverLightColor: '#ccc',
//
// Modal
modalBackdropBackgroundColor: 'rgba(0, 0, 0, 0.6)',
modalBackgroundColor: '#fff',
modalCloseButtonHoverColor: '#888',
//
// Menu
menuItemColor: '#e1e2e3',
menuItemHoverColor: '#fbfcfc',
menuItemHoverBackgroundColor: '#f5f7fa',
//
// Toolbar
toobarButtonHoverColor: '#e66000',
toobarButtonSelectedColor: '#e66000',
//
// Scroller
scrollbarBackgroundColor: '#9ea4b9',
scrollbarHoverBackgroundColor: '#656d8c',
//
// Card
cardShadowColor: '#e1e1e1',
cardAlternateBackgroundColor: '#f5f5f5',
//
// Alert
alertDangerBorderColor: '#ebccd1',
alertDangerBackgroundColor: '#f2dede',
alertDangerColor: '#a94442',
alertInfoBorderColor: '#bce8f1',
alertInfoBackgroundColor: '#d9edf7',
alertInfoColor: '#31708f',
alertSuccessBorderColor: '#d6e9c6',
alertSuccessBackgroundColor: '#dff0d8',
alertSuccessColor: '#3c763d',
alertWarningBorderColor: '#faebcc',
alertWarningBackgroundColor: '#fcf8e3',
alertWarningColor: '#8a6d3b',
//
// Slider
sliderAccentColor: '#5d9cec',
//
// Form
advancedFormLabelColor: '#ff902b',
disabledCheckInputColor: '#ddd',
//
// Popover
popoverTitleBackgroundColor: '#f7f7f7',
popoverTitleBorderColor: '#ebebeb',
popoverShadowColor: 'rgba(0, 0, 0, 0.2)',
popoverArrowBorderColor: '#fff',
popoverTitleBackgroundInverseColor: '#595959',
popoverTitleBorderInverseColor: '#707070',
popoverShadowInverseColor: 'rgba(0, 0, 0, 0.2)',
popoverArrowBorderInverseColor: 'rgba(58, 63, 81, 0.75)',
//
// Calendar
calendarTodayBackgroundColor: '#ddd',
calendarBorderColor: '#cecece',
calendarTextDim: '#666',
//
// Table
tableRowHoverBackgroundColor: '#fafbfc',
//
// Charts
failedColors: ['#ffbeb2', '#feb4a6', '#fdab9b', '#fca290', '#fb9984', '#fa8f79', '#f9856e', '#f77b66', '#f5715d', '#f36754', '#f05c4d', '#ec5049', '#e74545', '#e13b42', '#da323f', '#d3293d', '#ca223c', '#c11a3b', '#b8163a', '#ae123a'],
chartColorsDiversified: ['#90caf9', '#f4d166', '#ff8a65', '#ce93d8', '#80cba9', '#ffab91', '#8097ea', '#bcaaa4', '#a57583', '#e4e498', '#9e96af', '#c6ab81', '#6972c6', '#619fc6', '#81ad81', '#f48fb1', '#82afca', '#b5b071', '#8b959b', '#7ec0b4'],
chartColors: ['#f4d166', '#f6c760', '#f8bc58', '#f8b252', '#f7a84a', '#f69e41', '#f49538', '#f38b2f', '#f28026', '#f0751e', '#eb6c1c', '#e4641e', '#de5d1f', '#d75521', '#cf4f22', '#c64a22', '#bc4623', '#b24223', '#a83e24', '#9e3a26']
};

2
frontend/src/Styles/scaffolding.css
View file

@ -15,7 +15,7 @@
html, html,
body { body {
color: #515253; color: var(--textColor);
font-family: 'Roboto', 'open sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-family: 'Roboto', 'open sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
} }

2
frontend/src/System/Events/LogsTableDetailsModal.css
View file

@ -7,7 +7,7 @@
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
background-color: #f5f5f5; background-color: #f5f5f5;
color: #3a3f51; color: var(--themeDarkColor);
white-space: pre; white-space: pre;
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;

6
frontend/src/System/Events/LogsTableRow.css
View file

@ -17,15 +17,15 @@
} }
.warn { .warn {
color: $warningColor; color: var(--warningColor);
} }
.error { .error {
color: $dangerColor; color: var(--dangerColor);
} }
.fatal { .fatal {
color: $purple; color: var(--purple);
} }
.actions { .actions {

4
frontend/src/System/Status/styles.css
View file

@ -9,9 +9,9 @@
width: 50px; width: 50px;
height: 50px; height: 50px;
outline: none; outline: none;
border: solid 1px #e6e6e6; border: solid 1px #e5e5e5;
border-radius: 0.5em; border-radius: 0.5em;
background: #f8f8ff; background: var(--pageBackgroundColor);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
cursor: pointer; cursor: pointer;
} }

2
frontend/src/index.css
View file

@ -5,7 +5,7 @@ body {
body { body {
overflow: hidden; overflow: hidden;
background-color: #f5f7fa; background-color: var(--pageBackground);
} }
@media only screen and (max-width: $breakpointSmall) { @media only screen and (max-width: $breakpointSmall) {