Merge pull request #2354 from thornbill/sass-everywhere

Move to sass everywhere

src/components/accessSchedule/accessSchedule.js

@@ -11,7 +11,7 @@ import datetime from '../../scripts/datetime';
 import globalize from '../../scripts/globalize';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-button/paper-icon-button-light';
-import '../formdialog.css';
+import '../formdialog.scss';
 import template from './accessSchedule.template.html';
 
     function getDisplayTime(hours) {

src/components/actionSheet/actionSheet.js

@@ -3,10 +3,10 @@ import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
 import dom from '../../scripts/dom';
 import '../../elements/emby-button/emby-button';
-import './actionSheet.css';
+import './actionSheet.scss';
 import 'material-design-icons-iconfont';
-import '../../assets/css/scrollstyles.css';
-import '../../components/listview/listview.css';
+import '../../assets/css/scrollstyles.scss';
+import '../../components/listview/listview.scss';
 
 function getOffsets(elems) {
     const results = [];

src/components/activitylog.js

@@ -5,7 +5,7 @@ import * as datefns from 'date-fns';
 import dfnshelper from '../scripts/dfnshelper';
 import serverNotifications from '../scripts/serverNotifications';
 import '../elements/emby-button/emby-button';
-import './listview/listview.css';
+import './listview/listview.scss';
 import ServerConnections from './ServerConnections';
 import alert from './alert';
 

src/components/alphaPicker/alphaPicker.js

@@ -8,7 +8,7 @@
 import focusManager from '../focusManager';
 import layoutManager from '../layoutManager';
 import dom from '../../scripts/dom';
-import './style.css';
+import './style.scss';
 import '../../elements/emby-button/paper-icon-button-light';
 import 'material-design-icons-iconfont';
 

src/components/appFooter/appFooter.js

@@ -1,4 +1,4 @@
-import './appFooter.css';
+import './appFooter.scss';
 
 function render(options) {
     const elem = document.createElement('div');

src/components/backdrop/backdrop.js

@@ -2,7 +2,7 @@ import browser from '../../scripts/browser';
 import { playbackManager } from '../playback/playbackmanager';
 import dom from '../../scripts/dom';
 import * as userSettings from '../../scripts/settings/userSettings';
-import './backdrop.css';
+import './backdrop.scss';
 import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */

src/components/cardbuilder/cardBuilder.js

@@ -17,9 +17,9 @@ import browser from '../../scripts/browser';
 import { playbackManager } from '../playback/playbackmanager';
 import itemShortcuts from '../shortcuts';
 import imageHelper from '../../scripts/imagehelper';
-import './card.css';
+import './card.scss';
 import '../../elements/emby-button/paper-icon-button-light';
-import '../guide/programs.css';
+import '../guide/programs.scss';
 import ServerConnections from '../ServerConnections';
 
         const enableFocusTransform = !browser.slow && !browser.edge;

src/components/channelMapper/channelMapper.js

@@ -6,9 +6,9 @@ import actionsheet from '../actionSheet/actionSheet';
 import '../../elements/emby-input/emby-input';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-button/emby-button';
-import '../listview/listview.css';
+import '../listview/listview.scss';
 import 'material-design-icons-iconfont';
-import '../formdialog.css';
+import '../formdialog.scss';
 import ServerConnections from '../ServerConnections';
 
 export default class channelMapper {

src/components/collectionEditor/collectionEditor.js

@@ -10,7 +10,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-input/emby-input';
 import '../../elements/emby-select/emby-select';
 import 'material-design-icons-iconfont';
-import '../formdialog.css';
+import '../formdialog.scss';
 import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';

src/components/dialog/dialog.js

@@ -7,7 +7,7 @@ import 'material-design-icons-iconfont';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-input/emby-input';
-import '../formdialog.css';
+import '../formdialog.scss';
 import '../../assets/css/flexstyles.scss';
 import template from './dialog.template.html';
 

src/components/dialogHelper/dialogHelper.js

@@ -4,8 +4,8 @@ import browser from '../../scripts/browser';
 import layoutManager from '../layoutManager';
 import inputManager from '../../scripts/inputManager';
 import dom from '../../scripts/dom';
-import './dialoghelper.css';
-import '../../assets/css/scrollstyles.css';
+import './dialoghelper.scss';
+import '../../assets/css/scrollstyles.scss';
 
 /* eslint-disable indent */
 

src/components/directorybrowser/directorybrowser.js

@@ -2,11 +2,11 @@ import loading from '../loading/loading';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import dom from '../../scripts/dom';
 import globalize from '../../scripts/globalize';
-import '../listview/listview.css';
+import '../listview/listview.scss';
 import '../../elements/emby-input/emby-input';
 import '../../elements/emby-button/paper-icon-button-light';
-import './directorybrowser.css';
-import '../formdialog.css';
+import './directorybrowser.scss';
+import '../formdialog.scss';
 import '../../elements/emby-button/emby-button';
 import alert from '../alert';
 

src/components/favoriteitems.js

@@ -5,7 +5,7 @@ import { appHost } from './apphost';
 import imageLoader from './images/imageLoader';
 import globalize from '../scripts/globalize';
 import layoutManager from './layoutManager';
-import '../assets/css/scrollstyles.css';
+import '../assets/css/scrollstyles.scss';
 import '../elements/emby-itemscontainer/emby-itemscontainer';
 
 /* eslint-disable indent */

src/components/filterdialog/filterdialog.js

@@ -4,7 +4,7 @@ import globalize from '../../scripts/globalize';
 import { Events } from 'jellyfin-apiclient';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-collapse/emby-collapse';
-import './style.css';
+import './style.scss';
 import ServerConnections from '../ServerConnections';
 import template from './filterdialog.template.html';
 

src/components/filtermenu/filtermenu.js

@@ -11,7 +11,7 @@ import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-select/emby-select';
 import 'material-design-icons-iconfont';
-import '../formdialog.css';
+import '../formdialog.scss';
 import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';
 import template from './filtermenu.template.html';

src/components/guide/guide-settings.js

@@ -5,7 +5,7 @@ import layoutManager from '../layoutManager';
 import scrollHelper from '../../scripts/scrollHelper';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-radio/emby-radio';
-import '../formdialog.css';
+import '../formdialog.scss';
 import 'material-design-icons-iconfont';
 import template from './guide-settings.template.html';
 

src/components/guide/guide.js

@@ -13,10 +13,10 @@ import imageLoader from '../images/imageLoader';
 import layoutManager from '../layoutManager';
 import itemShortcuts from '../shortcuts';
 import dom from '../../scripts/dom';
-import './guide.css';
-import './programs.css';
+import './guide.scss';
+import './programs.scss';
 import 'material-design-icons-iconfont';
-import '../../assets/css/scrollstyles.css';
+import '../../assets/css/scrollstyles.scss';
 import '../../elements/emby-programcell/emby-programcell';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';

src/components/homeScreenSettings/homeScreenSettings.js

@@ -6,7 +6,7 @@ import loading from '../loading/loading';
 import { Events } from 'jellyfin-apiclient';
 import homeSections from '../homesections/homesections';
 import dom from '../../scripts/dom';
-import '../listview/listview.css';
+import '../listview/listview.scss';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-checkbox/emby-checkbox';
 import ServerConnections from '../ServerConnections';

src/components/homesections/homesections.js

@@ -9,7 +9,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 import '../../elements/emby-scroller/emby-scroller';
 import '../../elements/emby-button/emby-button';
-import './homesections.css';
+import './homesections.scss';
 import Dashboard from '../../scripts/clientUtils';
 import ServerConnections from '../ServerConnections';
 

src/components/imageDownloader/imageDownloader.js

@@ -10,8 +10,8 @@ import globalize from '../../scripts/globalize';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-button/emby-button';
-import '../formdialog.css';
-import '../cardbuilder/card.css';
+import '../formdialog.scss';
+import '../cardbuilder/card.scss';
 import ServerConnections from '../ServerConnections';
 import template from './imageDownloader.template.html';
 

src/components/imageUploader/imageUploader.js

@@ -13,8 +13,8 @@ import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-select/emby-select';
-import '../formdialog.css';
-import './style.css';
+import '../formdialog.scss';
+import './style.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
 import template from './imageUploader.template.html';

src/components/imageeditor/imageeditor.js

@@ -8,11 +8,11 @@ import scrollHelper from '../../scripts/scrollHelper';
 import imageLoader from '../images/imageLoader';
 import browser from '../../scripts/browser';
 import { appHost } from '../apphost';
-import '../cardbuilder/card.css';
-import '../formdialog.css';
+import '../cardbuilder/card.scss';
+import '../formdialog.scss';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
-import './imageeditor.css';
+import './imageeditor.scss';
 import ServerConnections from '../ServerConnections';
 import alert from '../alert';
 import confirm from '../confirm/confirm';

src/components/images/imageLoader.js

@@ -1,7 +1,7 @@
 import * as lazyLoader from '../lazyLoader/lazyLoaderIntersectionObserver';
 import * as userSettings from '../../scripts/settings/userSettings';
 import { decode, isBlurhashValid } from 'blurhash';
-import './style.css';
+import './style.scss';
 /* eslint-disable indent */
 
     export function lazyImage(elem, source = elem.getAttribute('data-src')) {

src/components/indicators/indicators.js

@@ -1,7 +1,7 @@
 import datetime from '../../scripts/datetime';
 import itemHelper from '../itemHelper';
 import '../../elements/emby-progressbar/emby-progressbar';
-import './indicators.css';
+import './indicators.scss';
 import 'material-design-icons-iconfont';
 
 export function enableProgressIndicator(item) {

src/components/itemMediaInfo/itemMediaInfo.js

@@ -10,10 +10,10 @@ import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
 import loading from '../loading/loading';
 import '../../elements/emby-select/emby-select';
-import '../listview/listview.css';
+import '../listview/listview.scss';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
-import '../formdialog.css';
+import '../formdialog.scss';
 import 'material-design-icons-iconfont';
 import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';

src/components/itemidentifier/itemidentifier.js

@@ -15,9 +15,9 @@ import browser from '../../scripts/browser';
 import '../../elements/emby-input/emby-input';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-button/paper-icon-button-light';
-import '../formdialog.css';
+import '../formdialog.scss';
 import 'material-design-icons-iconfont';
-import '../cardbuilder/card.css';
+import '../cardbuilder/card.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
 import template from './itemidentifier.template.html';

src/components/listview/listview.js

@@ -12,7 +12,7 @@ import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
 import datetime from '../../scripts/datetime';
 import cardBuilder from '../cardbuilder/cardBuilder';
-import './listview.css';
+import './listview.scss';
 import '../../elements/emby-ratingbutton/emby-ratingbutton';
 import '../../elements/emby-playstatebutton/emby-playstatebutton';
 import ServerConnections from '../ServerConnections';

src/components/loading/loading.js

@@ -1,4 +1,4 @@
-import './loading.css';
+import './loading.scss';
 
 let loadingElem;
 let layer1;

src/components/mediaLibraryCreator/mediaLibraryCreator.js

@@ -16,8 +16,8 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-input/emby-input';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-toggle/emby-toggle';
-import '../listview/listview.css';
-import '../formdialog.css';
+import '../listview/listview.scss';
+import '../formdialog.scss';
 import '../../assets/css/flexstyles.scss';
 import toast from '../toast/toast';
 import alert from '../alert';

src/components/mediaLibraryEditor/mediaLibraryEditor.js

@@ -12,9 +12,9 @@ import dom from '../../scripts/dom';
 import libraryoptionseditor from '../libraryoptionseditor/libraryoptionseditor';
 import globalize from '../../scripts/globalize';
 import '../../elements/emby-button/emby-button';
-import '../listview/listview.css';
+import '../listview/listview.scss';
 import '../../elements/emby-button/paper-icon-button-light';
-import '../formdialog.css';
+import '../formdialog.scss';
 import '../../elements/emby-toggle/emby-toggle';
 import '../../assets/css/flexstyles.scss';
 import toast from '../toast/toast';

src/components/mediainfo/mediainfo.js

@@ -4,8 +4,8 @@ import { appRouter } from '../appRouter';
 import itemHelper from '../itemHelper';
 import indicators from '../indicators/indicators';
 import 'material-design-icons-iconfont';
-import './mediainfo.css';
-import '../guide/programs.css';
+import './mediainfo.scss';
+import '../guide/programs.scss';
 import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */

src/components/metadataEditor/metadataEditor.js

@@ -9,11 +9,11 @@ import shell from '../../scripts/shell';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-input/emby-input';
 import '../../elements/emby-select/emby-select';
-import '../listview/listview.css';
+import '../listview/listview.scss';
 import '../../elements/emby-textarea/emby-textarea';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
-import '../formdialog.css';
+import '../formdialog.scss';
 import '../../assets/css/clearbutton.scss';
 import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';

src/components/metadataEditor/personEditor.js

@@ -5,7 +5,7 @@ import globalize from '../../scripts/globalize';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-input/emby-input';
 import '../../elements/emby-select/emby-select';
-import '../formdialog.css';
+import '../formdialog.scss';
 import template from './personEditor.template.html';
 
 /* eslint-disable indent */

src/components/multiSelect/multiSelect.js

@@ -3,7 +3,7 @@ import { appHost } from '../apphost';
 import loading from '../loading/loading';
 import globalize from '../../scripts/globalize';
 import dom from '../../scripts/dom';
-import './multiSelect.css';
+import './multiSelect.scss';
 import ServerConnections from '../ServerConnections';
 import alert from '../alert';
 import playlistEditor from '../playlisteditor/playlisteditor';

src/components/nowPlayingBar/nowPlayingBar.js

@@ -13,7 +13,7 @@ import '../../elements/emby-ratingbutton/emby-ratingbutton';
 import ServerConnections from '../ServerConnections';
 import appFooter from '../appFooter/appFooter';
 import itemShortcuts from '../shortcuts';
-import './nowPlayingBar.css';
+import './nowPlayingBar.scss';
 import '../../elements/emby-slider/emby-slider';
 import { appRouter } from '../appRouter';
 

src/components/playback/brightnessosd.js

@@ -2,7 +2,7 @@ import { Events } from 'jellyfin-apiclient';
 import { playbackManager } from './playbackmanager';
 import dom from '../../scripts/dom';
 import browser from '../../scripts/browser';
-import './iconosd.css';
+import './iconosd.scss';
 import 'material-design-icons-iconfont';
 
 let currentPlayer;

src/components/playback/volumeosd.js

@@ -3,7 +3,7 @@ import { Events } from 'jellyfin-apiclient';
 import { playbackManager } from './playbackmanager';
 import dom from '../../scripts/dom';
 import browser from '../../scripts/browser';
-import './iconosd.css';
+import './iconosd.scss';
 import 'material-design-icons-iconfont';
 
 let currentPlayer;

src/components/playerstats/playerstats.js

@@ -5,7 +5,7 @@ import layoutManager from '../layoutManager';
 import { playbackManager } from '../playback/playbackmanager';
 import playMethodHelper from '../playback/playmethodhelper';
 import SyncPlay from '../../components/syncPlay/core';
-import './playerstats.css';
+import './playerstats.scss';
 import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */

src/components/playlisteditor/playlisteditor.js

@@ -12,7 +12,7 @@ import '../../elements/emby-input/emby-input';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-select/emby-select';
 import 'material-design-icons-iconfont';
-import '../formdialog.css';
+import '../formdialog.scss';
 import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */

src/components/prompt/prompt.js

@@ -8,7 +8,7 @@ import 'material-design-icons-iconfont';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-input/emby-input';
-import '../formdialog.css';
+import '../formdialog.scss';
 import template from './prompt.template.html';
 
 export default (() => {

src/components/recordingcreator/recordingbutton.js

@@ -2,7 +2,7 @@ import dom from '../../scripts/dom';
 import recordingHelper from './recordinghelper';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-button/emby-button';
-import './recordingfields.css';
+import './recordingfields.scss';
 import ServerConnections from '../ServerConnections';
 
 function onRecordingButtonClick(e) {

src/components/recordingcreator/recordingcreator.js

@@ -13,8 +13,8 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-collapse/emby-collapse';
 import '../../elements/emby-input/emby-input';
-import '../formdialog.css';
-import './recordingcreator.css';
+import '../formdialog.scss';
+import './recordingcreator.scss';
 import 'material-design-icons-iconfont';
 import ServerConnections from '../ServerConnections';
 import { playbackManager } from '../playback/playbackmanager';

src/components/recordingcreator/recordingeditor.js

@@ -4,13 +4,13 @@ import globalize from '../../scripts/globalize';
 import layoutManager from '../layoutManager';
 import loading from '../loading/loading';
 import scrollHelper from '../../scripts/scrollHelper';
-import '../../assets/css/scrollstyles.css';
+import '../../assets/css/scrollstyles.scss';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-collapse/emby-collapse';
 import '../../elements/emby-input/emby-input';
 import '../../elements/emby-button/paper-icon-button-light';
-import '../formdialog.css';
-import './recordingcreator.css';
+import '../formdialog.scss';
+import './recordingcreator.scss';
 import 'material-design-icons-iconfont';
 import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';

src/components/recordingcreator/recordingfields.js

@@ -6,7 +6,7 @@ import dom from '../../scripts/dom';
 import recordingHelper from './recordinghelper';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
-import './recordingfields.css';
+import './recordingfields.scss';
 import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';

src/components/recordingcreator/seriesrecordingeditor.js

@@ -4,14 +4,14 @@ import layoutManager from '../layoutManager';
 import loading from '../loading/loading';
 import scrollHelper from '../../scripts/scrollHelper';
 import datetime from '../../scripts/datetime';
-import '../../assets/css/scrollstyles.css';
+import '../../assets/css/scrollstyles.scss';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-input/emby-input';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-button/paper-icon-button-light';
-import '../formdialog.css';
-import './recordingcreator.css';
+import '../formdialog.scss';
+import './recordingcreator.scss';
 import 'material-design-icons-iconfont';
 import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';

src/components/refreshdialog/refreshdialog.js

@@ -9,7 +9,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-select/emby-select';
 import 'material-design-icons-iconfont';
-import '../formdialog.css';
+import '../formdialog.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
 

src/components/remotecontrol/remotecontrol.js

@@ -11,9 +11,9 @@ import layoutManager from '../layoutManager';
 import * as userSettings from '../../scripts/settings/userSettings';
 import cardBuilder from '../cardbuilder/cardBuilder';
 import itemContextMenu from '../itemContextMenu';
-import '../cardbuilder/card.css';
+import '../cardbuilder/card.scss';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
-import './remotecontrol.css';
+import './remotecontrol.scss';
 import '../../elements/emby-ratingbutton/emby-ratingbutton';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';

src/components/search/searchfields.js

@@ -6,7 +6,7 @@ import AlphaPicker from '../alphaPicker/alphaPicker';
 import '../../elements/emby-input/emby-input';
 import '../../assets/css/flexstyles.scss';
 import 'material-design-icons-iconfont';
-import './searchfields.css';
+import './searchfields.scss';
 import template from './searchfields.template.html';
 
 /* eslint-disable indent */

src/components/slideshow/slideshow.js

@@ -9,7 +9,7 @@ import focusManager from '../focusManager';
 import browser from '../../scripts/browser';
 import { appHost } from '../apphost';
 import dom from '../../scripts/dom';
-import './style.css';
+import './style.scss';
 import 'material-design-icons-iconfont';
 import '../../elements/emby-button/paper-icon-button-light';
 import ServerConnections from '../ServerConnections';

src/components/sortmenu/sortmenu.js

@@ -5,7 +5,7 @@ import * as userSettings from '../../scripts/settings/userSettings';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-button/paper-icon-button-light';
 import 'material-design-icons-iconfont';
-import '../formdialog.css';
+import '../formdialog.scss';
 import '../../elements/emby-button/emby-button';
 import '../../assets/css/flexstyles.scss';
 import template from './sortmenu.template.html';

src/components/subtitleeditor/subtitleeditor.js

@@ -7,11 +7,11 @@ import loading from '../loading/loading';
 import focusManager from '../focusManager';
 import dom from '../../scripts/dom';
 import '../../elements/emby-select/emby-select';
-import '../listview/listview.css';
+import '../listview/listview.scss';
 import '../../elements/emby-button/paper-icon-button-light';
-import '../formdialog.css';
+import '../formdialog.scss';
 import 'material-design-icons-iconfont';
-import './subtitleeditor.css';
+import './subtitleeditor.scss';
 import '../../elements/emby-button/emby-button';
 import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';

src/components/subtitlesettings/subtitlesettings.js

@@ -8,13 +8,13 @@ import subtitleAppearanceHelper from './subtitleappearancehelper';
 import settingsHelper from '../settingshelper';
 import dom from '../../scripts/dom';
 import { Events } from 'jellyfin-apiclient';
-import '../listview/listview.css';
+import '../listview/listview.scss';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-slider/emby-slider';
 import '../../elements/emby-input/emby-input';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../assets/css/flexstyles.scss';
-import './subtitlesettings.css';
+import './subtitlesettings.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
 import template from './subtitlesettings.template.html';

src/components/subtitlesync/subtitlesync.js

@@ -2,7 +2,7 @@
 import { playbackManager } from '../playback/playbackmanager';
 import layoutManager from '../layoutManager';
 import template from './subtitlesync.template.html';
-import './subtitlesync.css';
+import './subtitlesync.scss';
 
 let player;
 let subtitleSyncSlider;

src/components/subtitleuploader/subtitleuploader.js

@@ -9,8 +9,8 @@ import template from './subtitleuploader.template.html';
 import toast from '../toast/toast';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-select/emby-select';
-import '../formdialog.css';
-import './style.css';
+import '../formdialog.scss';
+import './style.scss';
 
 let currentItemId;
 let currentServerId;

src/components/toast/toast.js

@@ -1,4 +1,4 @@
-import './toast.css';
+import './toast.scss';
 
 function remove(elem) {
     setTimeout(function () {

src/components/tunerPicker.js

@@ -7,10 +7,10 @@ import browser from '../scripts/browser';
 import focusManager from './focusManager';
 import scrollHelper from '../scripts/scrollHelper';
 import 'material-design-icons-iconfont';
-import './formdialog.css';
+import './formdialog.scss';
 import '../elements/emby-button/emby-button';
 import '../elements/emby-itemscontainer/emby-itemscontainer';
-import './cardbuilder/card.css';
+import './cardbuilder/card.scss';
 import ServerConnections from './ServerConnections';
 
 const enableFocusTransform = !browser.slow && !browser.edge;

src/components/tvproviders/schedulesdirect.js

@@ -3,7 +3,7 @@ import loading from '../loading/loading';
 import globalize from '../../scripts/globalize';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-input/emby-input';
-import '../listview/listview.css';
+import '../listview/listview.scss';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-button/emby-button';

src/components/tvproviders/xmltv.js

@@ -3,7 +3,7 @@ import loading from '../loading/loading';
 import globalize from '../../scripts/globalize';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-input/emby-input';
-import '../listview/listview.css';
+import '../listview/listview.scss';
 import '../../elements/emby-button/paper-icon-button-light';
 import Dashboard from '../../scripts/clientUtils';
 import { Events } from 'jellyfin-apiclient';

src/components/upnextdialog/upnextdialog.js

@@ -6,7 +6,7 @@ import layoutManager from '../layoutManager';
 import focusManager from '../focusManager';
 import globalize from '../../scripts/globalize';
 import itemHelper from '../itemHelper';
-import './upnextdialog.css';
+import './upnextdialog.scss';
 import '../../elements/emby-button/emby-button';
 import '../../assets/css/flexstyles.scss';
 

src/components/userdatabuttons/userdatabuttons.js

@@ -4,7 +4,7 @@ import itemHelper from '../itemHelper';
 import '../../elements/emby-button/paper-icon-button-light';
 import 'material-design-icons-iconfont';
 import '../../elements/emby-button/emby-button';
-import './userdatabuttons.css';
+import './userdatabuttons.scss';
 import ServerConnections from '../ServerConnections';
 
 const userDataMethods = {