shpaq/Prowlarr-Prowlarr
1
0
Fork 0
mirror of https://github.com/Prowlarr/Prowlarr.git synced 2025-09-17 17:14:18 +02:00
Code Issues Packages 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
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/postcss.config.js
View File

@@ -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',

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

@@ -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);
}

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

@@ -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 {

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 React, { Component } from 'react';
import { kinds } from 'Helpers/Props';
import colors from 'Styles/Variables/colors';
function getColors(kind) {
const style = getComputedStyle(document.body);
if (kind === kinds.WARNING) {
return colors.failedColors.reverse();
return style.getPropertyValue('--failedColors').split(',');
}
return colors.chartColors;
return style.getPropertyValue('--chartColors').split(',');
}
class BarChart extends Component {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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);
}

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

@@ -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 {

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

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

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

@@ -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;

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

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

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

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

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

@@ -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;

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

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

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

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

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

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

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

@@ -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 {

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

@@ -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);
}
}

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

@@ -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;

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

@@ -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);
}

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

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

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

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

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

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

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

@@ -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);
}

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

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

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

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

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

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

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

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

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

@@ -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;

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

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

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

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

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

@@ -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;
}

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

@@ -2,5 +2,5 @@
overflow: hidden;
min-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;
width: 100%;
height: 100%;
background-color: $modalBackdropBackgroundColor;
background-color: var(--modalBackdropBackgroundColor);
opacity: 1;
}

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

@@ -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);
}
}

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

@@ -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 {

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

@@ -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;
}

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

@@ -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 {

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

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

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

@@ -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;
}

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

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

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

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

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

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

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

@@ -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) {

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

@@ -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;

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

@@ -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);
}

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

@@ -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) {

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

@@ -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 {

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

@@ -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;
}

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

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

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

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

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

@@ -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);
}
}

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

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

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

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

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

@@ -2,6 +2,6 @@
transition: background-color 500ms;
&: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;
&:hover {
background-color: #fafbfc;
background-color: var(--tableRowHoverBackgroundColor);
}
}

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

@@ -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;
}

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

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

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

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

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

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

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

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

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

@@ -21,28 +21,28 @@
.disabled {
composes: legendItemColor;
background-color: $darkGray;
background-color: var(--darkGray);
}
.enabled {
composes: legendItemColor;
background-color: $successColor;
background-color: var(--successColor);
}
.redirected {
composes: legendItemColor;
background-color: $infoColor;
background-color: var(--infoColor);
}
.error {
composes: legendItemColor;
background-color: $dangerColor;
background-color: var(--dangerColor);
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
}
}

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

@@ -65,5 +65,5 @@
.externalLink {
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 {
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);
}

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

@@ -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;
}
}

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

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

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

@@ -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);
}

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

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

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

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

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

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

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

@@ -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);
}

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

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

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

@@ -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);
}

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

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

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

@@ -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);
}

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

@@ -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;

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

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

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

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

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

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

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,
body {
color: #515253;
color: var(--textColor);
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-radius: 4px;
background-color: #f5f5f5;
color: #3a3f51;
color: var(--themeDarkColor);
white-space: pre;
word-wrap: break-word;
word-break: break-all;

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

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

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

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

2
frontend/src/index.css
View File

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