mirror
/
Lidarr
mirror of https://github.com/lidarr/Lidarr
1
0
Fork 0
Code Issues Releases Wiki Activity

New: Darkmode (#3039) 

* New: Native Theme Engine

Co-Authored-By: Zak Saunders <thezak48@users.noreply.github.com>
(cherry picked from commit 2291f3e00eb2ff9268a0b2f49da8dde82ee13c04)

* Update CSS for themes

Co-authored-by: Qstick <qstick@gmail.com>
This commit is contained in:
Zak Saunders 2022-10-18 00:51:55 +01:00 committed by GitHub
parent aabd25510e
commit c4d8f66322
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
137 changed files with 894 additions and 448 deletions
Show Stats 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',

8
frontend/src/Activity/Queue/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/Album/AlbumTitleLink.css
View File

@ -2,7 +2,7 @@
composes: link from '~Components/Link/Link.css';
&:hover {
color: $linkHoverColor;
color: var(--linkHoverColor);
text-decoration: underline;
}
}

2
frontend/src/Album/Delete/DeleteAlbumModalContent.css
View File

@ -8,5 +8,5 @@
.deleteFilesMessage {
margin-top: 20px;
color: $dangerColor;
color: var(--dangerColor);
}

8
frontend/src/Album/Details/AlbumDetails.css
View File

@ -20,7 +20,7 @@
position: absolute;
width: 100%;
height: 100%;
background: $black;
background: var(--black);
opacity: 0.7;
}
@ -29,7 +29,7 @@
padding: 30px;
width: 100%;
height: 100%;
color: $white;
color: var(--white);
}
.cover {
@ -75,7 +75,7 @@
width: 40px;
&:hover {
color: $iconButtonHoverLightColor;
color: var(--iconButtonHoverLightColor);
}
}
@ -99,7 +99,7 @@
white-space: nowrap;
&:hover {
color: $iconButtonHoverLightColor;
color: var(--iconButtonHoverLightColor);
}
}

8
frontend/src/Album/Details/AlbumDetailsMedium.css
View File

@ -1,8 +1,8 @@
.medium {
margin-bottom: 20px;
border: 1px solid $borderColor;
border: 1px solid var(--borderColor);
border-radius: 4px;
background-color: $white;
background-color: var(--white);
&:last-of-type {
margin-bottom: 0;
@ -72,13 +72,13 @@
.tracks {
padding-top: 15px;
border-top: 1px solid $borderColor;
border-top: 1px solid var(--borderColor);
}
.collapseButtonContainer {
padding: 10px 15px;
width: 100%;
border-top: 1px solid $borderColor;
border-top: 1px solid var(--borderColor);
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #fafafa;

5
frontend/src/Album/SceneInfo.css
View File

@ -15,3 +15,8 @@
margin-left: 100px;
}
.comment {
color: var(--darkGray);
font-size: $smallFontSize;
}

14
frontend/src/AlbumStudio/AlbumStudioAlbum.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(--seasonBackgroundColor);
cursor: default;
}
@ -17,15 +17,15 @@
padding: 0 4px;
border-width: 0 1px;
border-style: solid;
border-color: $borderColor;
background-color: $white;
color: $defaultColor;
border-color: var(--borderColor);
background-color: var(--white);
color: var(--defaultColor);
}
.tracks {
padding: 0 4px;
background-color: $white;
color: $defaultColor;
background-color: var(--episodesBackgroundColor);
color: var(--defaultColor);
}
.allTracks {

9
frontend/src/App/App.js
View File

@ -4,6 +4,7 @@ import React from 'react';
import DocumentTitle from 'react-document-title';
import { Provider } from 'react-redux';
import PageConnector from 'Components/Page/PageConnector';
import ApplyTheme from './ApplyTheme';
import AppRoutes from './AppRoutes';
function App({ store, history }) {
@ -11,9 +12,11 @@ function App({ store, history }) {
<DocumentTitle title={window.Lidarr.instanceName}>
<Provider store={store}>
<ConnectedRouter history={history}>
<PageConnector>
<AppRoutes app={App} />
</PageConnector>
<ApplyTheme>
<PageConnector>
<AppRoutes app={App} />
</PageConnector>
</ApplyTheme>
</ConnectedRouter>
</Provider>
</DocumentTitle>

49
frontend/src/App/ApplyTheme.js Normal file
View File

@ -0,0 +1,49 @@
import PropTypes from 'prop-types';
import React, { Fragment, useEffect } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import themes from 'Styles/Themes';
function createMapStateToProps() {
return createSelector(
(state) => state.settings.ui.item.theme || window.Lidarr.theme,
(
theme
) => {
return {
theme
};
}
);
}
function ApplyTheme({ theme, children }) {
// Update the CSS Variables
function updateCSSVariables() {
const arrayOfVariableKeys = Object.keys(themes[theme]);
const arrayOfVariableValues = Object.values(themes[theme]);
// Loop through each array key and set the CSS Variables
arrayOfVariableKeys.forEach((cssVariableKey, index) => {
// Based on our snippet from MDN
document.documentElement.style.setProperty(
`--${cssVariableKey}`,
arrayOfVariableValues[index]
);
});
}
// On Component Mount and Component Update
useEffect(() => {
updateCSSVariables(theme);
}, [theme]);
return <Fragment>{children}</Fragment>;
}
ApplyTheme.propTypes = {
theme: PropTypes.string.isRequired,
children: PropTypes.object.isRequired
};
export default connect(createMapStateToProps)(ApplyTheme);

2
frontend/src/Artist/Delete/DeleteArtistModalContent.css
View File

@ -8,5 +8,5 @@
.deleteFilesMessage {
margin-top: 20px;
color: $dangerColor;
color: var(--dangerColor);
}

10
frontend/src/Artist/Details/ArtistDetails.css
View File

@ -26,7 +26,7 @@
position: absolute;
width: 100%;
height: 100%;
background: $black;
background: var(--black);
opacity: 0.7;
}
@ -35,7 +35,7 @@
padding: 30px;
width: 100%;
height: 100%;
color: $white;
color: var(--white);
}
.poster {
@ -53,7 +53,7 @@
}
.metadataMessage {
color: $helpTextColor;
color: var(--helpTextColor);
text-align: center;
font-weight: 300;
font-size: 20px;
@ -88,7 +88,7 @@
width: 40px;
&:hover {
color: $iconButtonHoverLightColor;
color: var(--iconButtonHoverLightColor);
}
}
@ -112,7 +112,7 @@
white-space: nowrap;
&:hover {
color: $iconButtonHoverLightColor;
color: var(--iconButtonHoverLightColor);
}
}

10
frontend/src/Artist/Details/ArtistDetailsSeason.css
View File

@ -1,8 +1,8 @@
.albumType {
margin-bottom: 20px;
border: 1px solid $borderColor;
border: 1px solid var(--borderColor);
border-radius: 4px;
background-color: $white;
background-color: var(--cardBackgroundColor);
&:last-of-type {
margin-bottom: 0;
@ -77,7 +77,7 @@
.albums {
padding-top: 15px;
border-top: 1px solid $borderColor;
border-top: 1px solid var(--borderColor);
}
.collapseButtonContainer {
@ -86,10 +86,10 @@
justify-content: center;
padding: 10px 15px;
width: 100%;
border-top: 1px solid $borderColor;
border-top: 1px solid var(--borderColor);
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #fafafa;
background-color: var(--collapseButtonBackgroundColor);
}
.collapseButtonIcon {

2
frontend/src/Artist/Editor/Delete/DeleteArtistModalContent.css
View File

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

12
frontend/src/Artist/Index/ArtistIndexFooter.css
View File

@ -21,32 +21,32 @@
.continuing {
composes: legendItemColor;
background-color: $primaryColor;
background-color: var(--primaryColor);
}
.ended {
composes: legendItemColor;
background-color: $successColor;
background-color: var(--successColor);
}
.missingMonitored {
composes: legendItemColor;
background-color: $dangerColor;
background-color: var(--dangerColor);
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
}
}
.missingUnmonitored {
composes: legendItemColor;
background-color: $warningColor;
background-color: var(--warningColor);
&:global(.colorImpaired) {
background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
}
}

14
frontend/src/Artist/Index/Banners/ArtistIndexBanner.css
View File

@ -9,7 +9,7 @@ $hoverScale: 1.05;
&:hover {
z-index: 2;
box-shadow: 0 0 12px $black;
box-shadow: 0 0 12px var(--black);
transition: all 200ms ease-in;
.controls {
@ -27,7 +27,7 @@ $hoverScale: 1.05;
composes: link from '~Components/Link/Link.css';
display: block;
background-color: $defaultColor;
background-color: var(--defaultColor);
}
.nextAiring {
@ -39,8 +39,8 @@ $hoverScale: 1.05;
.title {
@add-mixin truncate;
background-color: $defaultColor;
color: $white;
background-color: var(--defaultColor);
color: var(--white);
text-align: center;
font-size: $smallFontSize;
}
@ -53,8 +53,8 @@ $hoverScale: 1.05;
height: 0;
border-width: 0 25px 25px 0;
border-style: solid;
border-color: transparent $dangerColor transparent transparent;
color: $white;
border-color: transparent var(--dangerColor) transparent transparent;
color: var(--white);
}
.controls {
@ -64,7 +64,7 @@ $hoverScale: 1.05;
z-index: 3;
border-radius: 4px;
background-color: #216044;
color: $white;
color: var(--white);
font-size: $smallFontSize;
opacity: 0;
transition: opacity 0;

2
frontend/src/Artist/Index/Banners/ArtistIndexBannerInfo.css
View File

@ -1,5 +1,5 @@
.info {
background-color: #fafbfc;
background-color: var(--seriesBackgroundColor);
text-align: center;
font-size: $smallFontSize;
}

10
frontend/src/Artist/Index/Overview/ArtistIndexOverview.css
View File

@ -3,7 +3,7 @@ $hoverScale: 1.05;
.container {
&:hover {
.content {
background-color: $tableRowHoverBackgroundColor;
background-color: var(--tableRowHoverBackgroundColor);
}
}
}
@ -25,10 +25,10 @@ $hoverScale: 1.05;
composes: link from '~Components/Link/Link.css';
display: block;
color: $defaultColor;
color: var(--defaultColor);
&:hover {
color: $defaultColor;
color: var(--defaultColor);
text-decoration: none;
}
}
@ -42,8 +42,8 @@ $hoverScale: 1.05;
height: 0;
border-width: 0 25px 25px 0;
border-style: solid;
border-color: transparent $dangerColor transparent transparent;
color: $white;
border-color: transparent var(--dangerColor) transparent transparent;
color: var(--white);
}
.info {

17
frontend/src/Artist/Index/Posters/ArtistIndexPoster.css
View File

@ -5,7 +5,7 @@ $hoverScale: 1.05;
&:hover {
z-index: 2;
box-shadow: 0 0 12px $black;
box-shadow: 0 0 12px var(--black);
transition: all 200ms ease-in;
.controls {
@ -25,7 +25,7 @@ $hoverScale: 1.05;
position: relative;
display: block;
height: 70px;
background-color: $defaultColor;
background-color: var(--defaultColor);
}
.overlayTitle {
@ -38,13 +38,13 @@ $hoverScale: 1.05;
padding: 5px;
width: 100%;
height: 100%;
color: $offWhite;
color: var(--offWhite);
text-align: center;
font-size: 20px;
}
.nextAiring {
background-color: #fafbfc;
background-color: var(--seriesBackgroundColor);
text-align: center;
font-size: $smallFontSize;
}
@ -52,8 +52,7 @@ $hoverScale: 1.05;
.title {
@add-mixin truncate;
background-color: $defaultColor;
color: $white;
background-color: var(--seriesBackgroundColor);
text-align: center;
font-size: $smallFontSize;
}
@ -67,8 +66,8 @@ $hoverScale: 1.05;
height: 0;
border-width: 0 25px 25px 0;
border-style: solid;
border-color: transparent $dangerColor transparent transparent;
color: $white;
border-color: transparent var(--dangerColor) transparent transparent;
color: var(--white);
}
.controls {
@ -78,7 +77,7 @@ $hoverScale: 1.05;
z-index: 3;
border-radius: 4px;
background-color: #216044;
color: $white;
color: var(--white);
font-size: $smallFontSize;
opacity: 0;
transition: opacity 0;

2
frontend/src/Artist/Index/ProgressBar/ArtistIndexProgressBar.css
View File

@ -3,7 +3,7 @@
border-radius: 0;
background-color: #5b5b5b;
color: $white;
color: var(--white);
transition: width 200ms ease;
}

6
frontend/src/Artist/Index/Table/ArtistIndexRow.css
View File

@ -37,7 +37,7 @@
position: relative;
display: block;
height: 70px;
background-color: $defaultColor;
background-color: var(--defaultColor);
}
.bannerImage {
@ -55,7 +55,7 @@
padding: 5px;
width: 100%;
height: 100%;
color: $offWhite;
color: var(--offWhite);
text-align: center;
font-size: 20px;
}
@ -110,7 +110,7 @@
}
.ratings {
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
flex: 0 0 80px;
}

4
frontend/src/Calendar/Agenda/AgendaEvent.css
View File

@ -2,11 +2,11 @@
display: flex;
overflow-x: hidden;
padding: 5px;
border-bottom: 1px solid $borderColor;
border-bottom: 1px solid var(--borderColor);
font-size: $defaultFontSize;
&:hover {
background-color: $tableRowHoverBackgroundColor;
background-color: var(--tableRowHoverBackgroundColor);
}
}

10
frontend/src/Calendar/Day/CalendarDay.css
View File

@ -2,8 +2,8 @@
flex: 1 0 14.28%;
overflow: hidden;
min-height: 70px;
border-bottom: 1px solid $calendarBorderColor;
border-left: 1px solid $calendarBorderColor;
border-bottom: 1px solid var(--calendarBorderColor);
border-left: 1px solid var(--calendarBorderColor);
}
.isSingleDay {
@ -12,14 +12,14 @@
.dayOfMonth {
padding-right: 5px;
border-bottom: 1px solid $calendarBorderColor;
border-bottom: 1px solid var(--calendarBorderColor);
text-align: right;
}
.isToday {
background-color: $calendarTodayBackgroundColor;
background-color: var(--calendarTodayBackgroundColor);
}
.isDifferentMonth {
color: $disabledColor;
color: var(--disabledColor);
}

2
frontend/src/Calendar/Day/CalendarDays.css
View File

@ -1,6 +1,6 @@
.days {
display: flex;
border-right: 1px solid $calendarBorderColor;
border-right: 1px solid var(--calendarBorderColor);
}
.day,

4
frontend/src/Calendar/Day/DayOfWeek.css
View File

@ -1,6 +1,6 @@
.dayOfWeek {
flex: 1 0 14.28%;
background-color: #e4eaec;
background-color: var(--calendarBackgroudColor);
text-align: center;
}
@ -9,5 +9,5 @@
}
.isToday {
background-color: $calendarTodayBackgroundColor;
background-color: var(--calendarTodayBackgroundColor);
}

40
frontend/src/Calendar/Events/CalendarEvent.css
View File

@ -1,9 +1,11 @@
$fullColorGradient: rgba(244, 245, 246, 0.2);
.event {
overflow-x: hidden;
margin: 4px 2px;
padding: 5px;
border-bottom: 1px solid $borderColor;
border-left: 4px solid $borderColor;
border-bottom: 1px solid var(--calendarBorderColor);
border-left: 4px solid var(--calendarBorderColor);
font-size: 12px;
&:global(.colorImpaired) {
@ -25,7 +27,7 @@
}
.artistName {
color: #3a3f51;
color: var(--calendarTextDimAlternate);
font-size: $defaultFontSize;
}
@ -42,38 +44,50 @@
*/
.downloaded {
border-left-color: $successColor !important;
border-left-color: var(--successColor) !important;
&:global(.colorImpaired) {
border-left-color: color($successColor, saturation(+15%)) !important;
border-left-color: color(#27c24c saturation(+15%)) !important;
}
}
.downloading {
border-left-color: $purple !important;
border-left-color: var(--purple) !important;
&:global(.fullColor) {
background-color: rgba(122, 67, 182, 0.4) !important;
}
}
.unmonitored {
border-left-color: $gray !important;
border-left-color: var(--gray) !important;
&:global(.fullColor) {
background-color: rgba(173, 173, 173, 0.5) !important;
}
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
}
&:global(.fullColor.colorImpaired) {
background: repeating-linear-gradient(45deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px);
}
}
.missing {
border-left-color: $dangerColor !important;
border-left-color: var(--dangerColor) !important;
&:global(.colorImpaired) {
border-left-color: color($dangerColor saturation(+15%)) !important;
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
border-left-color: color(#f05050 saturation(+15%)) !important;
background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
}
}
.unreleased {
border-left-color: $primaryColor !important;
border-left-color: var(--primaryColor) !important;
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
}
}

3
frontend/src/Calendar/Events/CalendarEventQueueDetails.js
View File

@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
import React from 'react';
import QueueDetails from 'Activity/Queue/QueueDetails';
import CircularProgressBar from 'Components/CircularProgressBar';
import colors from 'Styles/Variables/colors';
import translate from 'Utilities/String/translate';
function CalendarEventQueueDetails(props) {
@ -35,7 +34,7 @@ function CalendarEventQueueDetails(props) {
progress={progress}
size={20}
strokeWidth={2}
strokeColor={colors.purple}
strokeColor={'#7a43b6'}
/>
</div>
}

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 {

3
frontend/src/Components/CircularProgressBar.js
View File

@ -1,6 +1,5 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import colors from 'Styles/Variables/colors';
import styles from './CircularProgressBar.css';
class CircularProgressBar extends Component {
@ -132,7 +131,7 @@ CircularProgressBar.defaultProps = {
containerClassName: styles.circularProgressBarContainer,
size: 60,
strokeWidth: 5,
strokeColor: colors.lidarrGreen,
strokeColor: '#00A65B',
showProgressText: false
};

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

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

@ -15,5 +15,6 @@
.or {
margin: 0 3px;
color: $themeDarkColor;
color: var(--themeDarkColor);
line-height: 31px;
}

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(--inputBackgroundColor);
}
.loading {
@ -90,7 +90,7 @@
display: flex;
justify-content: flex-end;
height: 40px;
border-bottom: 1px solid $borderColor;
border-bottom: 1px solid var(--borderColor);
}
.mobileCloseButton {
@ -100,6 +100,6 @@
line-height: 40px;
&:hover {
color: $modalCloseButtonHoverColor;
color: var(--modalCloseButtonHoverColor);
}
}

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;

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

@ -15,6 +15,6 @@
.freeSpace {
margin-left: 15px;
color: $darkGray;
color: var(--darkGray);
font-size: $smallFontSize;
}

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

@ -16,7 +16,7 @@
.freeSpace {
flex: 0 0 auto;
margin-left: 15px;
color: $gray;
color: var(--gray);
text-align: right;
font-size: $smallFontSize;
}

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);
}
}
@ -28,4 +28,6 @@
width: 0%;
height: 31px;
border: none;
background-color: var(--inputBackground);
color: var(--textColor);
}

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

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

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

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

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

@ -1,4 +1,4 @@
.heart {
margin-right: 5px;
color: $themeRed;
color: var(--themeRed);
}

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

@ -1,5 +1,5 @@
.danger {
color: $dangerColor;
color: var(--dangerColor);
}
.default {
@ -7,25 +7,33 @@
}
.disabled {
color: $disabledColor;
color: var(--disabledColor);
}
.info {
color: $infoColor;
color: var(--infoColor);
&:global(.darken) {
color: color(var(--infoColor) shade(30%));
}
}
.pink {
color: $pink;
color: var(--pink);
&:global(.darken) {
color: color(var(--pink) shade(30%));
}
}
.success {
color: $successColor;
color: var(--successColor);
}
.warning {
color: $warningColor;
color: var(--warningColor);
}
.purple {
color: $purple;
color: var(--purple);
}

58
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,76 +13,78 @@
/** 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(--white);
}
}
.info {
border-color: $infoColor;
background-color: $infoColor;
border-color: var(--infoColor);
background-color: var(--infoColor);
color: var(--infoTextColor);
&.outline {
color: $infoColor;
color: var(--infoColor);
}
}
.inverse {
border-color: $lightGray;
background-color: $lightGray;
color: $defaultColor;
border-color: var(--inverseLabelColor);
background-color: var(--inverseLabelColor);
color: var(--inverseLabelTextColor);
&.outline {
background-color: $defaultColor !important;
color: $lightGray;
background-color: var(--inverseLabelTextColor) !important;
color: var(--inverseLabelColor);
}
}
.primary {
border-color: $primaryColor;
background-color: $primaryColor;
border-color: var(--primaryColor);
background-color: var(--primaryColor);
&.outline {
color: $primaryColor;
color: var(--primaryColor);
}
}
.success {
border-color: $successColor;
background-color: $successColor;
border-color: var(--successColor);
background-color: var(--successColor);
color: #eee;
&.outline {
color: $successColor;
color: var(--successColor);
}
}
.warning {
border-color: $warningColor;
background-color: $warningColor;
border-color: var(--warningColor);
background-color: var(--warningColor);
&.outline {
color: $warningColor;
color: var(--warningColor);
}
}
@ -107,5 +109,5 @@
/** Outline **/
.outline {
background-color: $white;
background-color: var(--disabledLabelColor);
}

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(--defaultBackgroundColor);
color: var(--defaultColor);
&:hover {
border-color: $defaultHoverBorderColor;
background-color: $defaultHoverBackgroundColor;
color: $defaultColor;
border-color: var(--defaultHoverBorderColor);
background-color: var(--defaultHoverBackgroundColor);
color: var(--defaultColor);
}
}
.primary {
border-color: $primaryBorderColor;
background-color: $primaryBackgroundColor;
color: $white;
border-color: var(--primaryBorderColor);
background-color: var(--primaryBackgroundColor);
color: var(--white);
&:hover {
border-color: $primaryHoverBorderColor;
background-color: $primaryHoverBackgroundColor;
color: $white;
border-color: var(--primaryHoverBorderColor);
background-color: var(--primaryHoverBackgroundColor);
color: var(--white);
}
}
.success {
border-color: $successBorderColor;
background-color: $successBackgroundColor;
color: $white;
border-color: var(--successBorderColor);
background-color: var(--successBackgroundColor);
color: var(--white);
&:hover {
border-color: $successHoverBorderColor;
background-color: $successHoverBackgroundColor;
color: $white;
border-color: var(--successHoverBorderColor);
background-color: var(--successHoverBackgroundColor);
color: var(--white);
}
}
.warning {
border-color: $warningBorderColor;
background-color: $warningBackgroundColor;
color: $white;
border-color: var(--warningBorderColor);
background-color: var(--warningBackgroundColor);
color: var(--white);
&:hover {
border-color: $warningHoverBorderColor;
background-color: $warningHoverBackgroundColor;
color: $white;
border-color: var(--warningHoverBorderColor);
background-color: var(--warningHoverBackgroundColor);
color: var(--white);
}
}

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

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

@ -6,6 +6,6 @@
}
.isDisabled {
color: $disabledColor;
color: var(--disabledColor);
cursor: not-allowed;
}

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

@ -12,22 +12,22 @@
.ripple {
composes: ripple from '~Components/Loading/LoadingIndicator.css';
border: 2px solid $toolbarColor;
border: 2px 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: $primaryHoverBackgroundColor;
background-color: var(--themeLightColor);
}
.sectionTitle {
padding: 5px 8px;
color: $disabledColor;
color: var(--disabledColor);
}
.addNewArtistSuggestion {

2
frontend/src/Components/Page/Header/ArtistSearchResult.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,8 +4,8 @@
align-items: center;
flex: 0 0 auto;
height: $headerHeight;
background-color: $themeAlternateBlue;
color: $white;
background-color: var(--pageHeaderBackgroundColor);
color: var(--white);
}
.logoContainer {
@ -41,7 +41,7 @@
composes: link from '~Components/Link/Link.css';
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: $themeDarkColor;
color: var(--themeDarkColor);
}
}

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(--themeAlternateBlue);
}
.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(--themeAlternateBlue);
}
.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);
}

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

@ -3,7 +3,7 @@
overflow: hidden;
width: 100%;
border-radius: 4px;
background-color: #f5f5f5;
background-color: var(--progressBarBackgroundColor);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
@ -14,13 +14,13 @@
width: 0;
height: 100%;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
color: $white;
color: var(--white);
transition: width 0.6s ease;
}
.frontTextContainer {
z-index: 1;
color: $white;
color: var(--white);
}
.backTextContainer,
@ -42,35 +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(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 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, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
}
}
.info {
background-color: $infoColor;
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/Cells/TableRowCell.css
View File

@ -1,6 +1,6 @@
.cell {
padding: 8px;
border-top: 1px solid #eee;
border-top: 1px solid var(--borderColor);
line-height: 1.52857143;
}

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

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

@ -1,13 +1,14 @@
.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;
}
.body {
overflow: auto;
padding: 10px;
background-color: var(--popoverBodyBackgroundColor);
}
.tooltipBody {

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

@ -7,13 +7,14 @@
position: relative;
&.default {
background-color: $white;
box-shadow: 0 5px 10px $popoverShadowColor;
background-color: var(--popoverBodyBackgroundColor);
box-shadow: 0 5px 10px var(--popoverShadowColor);
}
&.inverse {
background-color: $themeDarkColor;
box-shadow: 0 5px 10px $popoverShadowInverseColor;
background-color: var(--themeDarkColor);
box-shadow: 0 5px 10px var(--popoverShadowInverseColor);
color: var(--white);
}
}
@ -49,20 +50,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 +79,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 +108,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 +137,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/InteractiveImport/Artist/SelectArtistRow.css
View File

@ -1,4 +1,4 @@
.artist {
padding: 8px;
border-bottom: 1px solid $borderColor;
border-bottom: 1px solid var(--borderColor);
}

2
frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css
View File

@ -35,7 +35,7 @@
}
.errorMessage {
color: $dangerColor;
color: var(--dangerColor);
}
@media only screen and (max-width: $breakpointSmall) {

2
frontend/src/InteractiveImport/Interactive/InteractiveImportRow.css
View File

@ -25,5 +25,5 @@
.additionalFile {
composes: row from '~Components/Table/TableRow.css';
color: $disabledColor;
color: var(--disabledColor);
}

2
frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css
View File

@ -3,5 +3,5 @@
margin: -8px 0;
width: 100%;
height: 25px;
border: 2px dashed $dangerColor;
border: 2px dashed var(--dangerColor);
}

2
frontend/src/Organize/OrganizePreviewRow.css
View File

@ -2,7 +2,7 @@
display: flex;
margin-bottom: 5px;
padding: 5px 0;
border-bottom: 1px solid $borderColor;
border-bottom: 1px solid var(--borderColor);
&:last-of-type {
margin-bottom: 0;

2
frontend/src/Retag/RetagPreviewRow.css
View File

@ -2,7 +2,7 @@
display: flex;
margin-bottom: 5px;
padding: 5px 0;
border-bottom: 1px solid $borderColor;
border-bottom: 1px solid var(--borderColor);
&:last-of-type {
margin-bottom: 0;

6
frontend/src/Search/AddNewItem.css
View File

@ -6,12 +6,12 @@
.searchIconContainer {
width: 58px;
height: 46px;
border: 1px solid $inputBorderColor;
border: 1px solid var(--inputBorderColor);
border-right: none;
border-radius: 4px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background-color: #edf1f2;
background-color: var(--searchIconContainerBackgroundColor);
text-align: center;
line-height: 46px;
}
@ -25,7 +25,7 @@
}
.clearLookupButton {
border: 1px solid $inputBorderColor;
border: 1px solid var(--inputBorderColor);
border-left: none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;

6
frontend/src/Search/Album/AddNewAlbumModalContent.css
View File

@ -25,7 +25,7 @@
.disambiguation {
margin-bottom: 20px;
color: $disabledColor;
color: var(--disabledColor);
font-weight: 300;
font-size: 20px;
}
@ -55,9 +55,9 @@
.albumType {
margin-bottom: 20px;
border: 1px solid $borderColor;
border: 1px solid var(--borderColor);
border-radius: 4px;
background-color: $white;
background-color: var(--white);
&:last-of-type {
margin-bottom: 0;

10
frontend/src/Search/Album/AddNewAlbumSearchResult.css
View File

@ -9,13 +9,15 @@
.underlay {
@add-mixin cover;
background-color: $white;
background-color: var(--addSeriesBackgroundColor);
transition: background 500ms;
&:hover {
background-color: #eaf2ff;
background-color: var(--pageBackground);
box-shadow: 0 0 12px var(--black);
color: inherit;
text-decoration: none;
transition: all 200ms ease-in;
}
}
@ -54,7 +56,7 @@
.year {
margin-left: 10px;
color: $disabledColor;
color: var(--disabledColor);
}
.icons {
@ -70,7 +72,7 @@
margin-top: -4px;
margin-left: auto;
color: $textColor;
color: var(--textColor);
}
.mbLinkIcon {

Some files were not shown because too many files have changed in this diff Show More