stop using relative imports for most of css

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "6.2.1",
+  "version": "6.2.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "6.2.1",
+  "version": "6.2.2",
   "description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
   "author": "Tamius Han <tamius.han@gmail.com>",
   "scripts": {

src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue

@@ -345,8 +345,8 @@ export default {
 </script>
 
 <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
 
 <style lang="scss" scoped module>
 @import '../res-common/variables';

src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue

@@ -120,5 +120,5 @@ export default {
 </script>
 
 <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>

src/csui/src/PlayerUiPanels/ChangelogPanel.vue

@@ -18,8 +18,21 @@
           Since automatic aspect ratio detection had to be rewritten completely and since the new version needs to be out 5 days ago, there are some regressions in the automatic aspect ratio detection.
         </p>
 
-        <h2>6.0.1</h2>
+        Minor revisions:
-        <p>Fixed external links.</p>
+
+        <h3>6.2.1</h3>
+        <ul>
+          <li>Fixed offset issue on Netflix</li>
+          <li>Fixed issue with overlay iframe not being transparent on twitter</li>
+        </ul>
+
+        <h3>6.2.2</h3>
+        <ul>
+          <li>Fixed the issue where stretching was not applied if no cropping was used</li>
+          <li>Half-fixed in-player UI on sites where player is not detected correctly</li>
+        </ul>
+
+        <hr/>
 
         <h2>6.0.0</h2>
         <p>
@@ -70,6 +83,9 @@
             Hope the UI is worth the regressions, because getting UI to work has been a MAJOR pain in the ass.
           </li>
         </ul>
+        <p>Minor revisions:</p>
+        <h2>6.0.1</h2>
+        <p>Fixed external links.</p>
       </div>
       <div class="w-[1/2]" style="width: 50%; padding-left: 1rem; padding-top: 5rem;">
         <h2>Thank you monies</h2>

src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/OtherSiteSettings.vue

@@ -118,5 +118,5 @@ export default {
 </script>
 
 <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="../../../res-common/common.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>

src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue

@@ -453,8 +453,8 @@ export default {
 </script>
 
 <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="../../../res-common/common.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
 <style scoped>
 .button-hover:hover {
   color: #fa6;

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue

@@ -240,5 +240,5 @@ export default {
 </script>
 
 <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="../../../res-common/common.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue

@@ -245,5 +245,5 @@ export default {
 </script>
 
 <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="../../../res-common/common.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue

@@ -152,5 +152,5 @@ export default {
 </script>
 
 <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="../../../res-common/common.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>

src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue

@@ -550,8 +550,8 @@ export default({
 </script>
 
 <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
 <style lang="scss" scoped>
 p {
   font-size: 1rem;

src/csui/src/PlayerUiPanels/PlayerUiSettings.vue

@@ -224,8 +224,9 @@ export default {
 </script>
 
 <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
+
 <style lang="scss" scoped>
 .justify-center {
   justify-content: center;

src/csui/src/PlayerUiPanels/ResetBackupPanel.vue

@@ -26,5 +26,5 @@ export default {
 }
 </script>
 <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>

src/csui/src/PlayerUiPanels/VideoSettings.vue

@@ -143,8 +143,9 @@ export default {
 </script>
 
 <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
+
 <style lang="scss" scoped>
 .justify-center {
   justify-content: center;

src/csui/src/components/EditShortcutButton.vue

@@ -172,7 +172,7 @@ export default {
 
 </script>
 
-<style lang="scss" src="../res-common/common.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
 <style lang="scss" scoped>
 @import "../res-common/variables";
 

src/csui/src/components/TriggerZoneEditor.vue

@@ -342,8 +342,8 @@ export default {
 
 </script>
 
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
 <style lang="scss" scoped>
 .active-trigger-area {
   background-image: url('/res/img/grid_512.webp');

src/ext/lib/video-data/PlayerData.ts

@@ -130,6 +130,7 @@ class PlayerData {
     'change-player-element': [{
       function: () => {
         this.nextPlayerElement();
+      }
     }]
   }
   //#endregion

src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Ultrawidify",
   "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
-  "version": "6.2.1",
+  "version": "6.2.2",
   "icons": {
     "32":"res/icons/uw-32.png",
     "64":"res/icons/uw-64.png"

webpack.config.js

@@ -29,6 +29,10 @@ const config = {
   devtool: "source-map",
 
   resolve: {
+    alias: {
+      '@src': path.resolve(__dirname, 'src'),
+      '@csui': path.resolve(__dirname, 'src/csui'),
+    },
     // maybe we'll move vue stuff to TS some day, but today is not the day
     extensions: [
       '.ts', '.tsx',