Convert unnecessary SCSS files to CSS (#5173)

* Convert unnecessary SCSS files to CSS

* Fix typo

src/renderer/components/ft-age-restricted/ft-age-restricted.css

@@ -0,0 +1,17 @@
+.message {
+  padding-block: 10px;
+}
+
+.frown {
+  font-size: 10em;
+  block-size: 100%;
+  padding-block: 20px;
+}
+
+.message, .frown {
+  color: var(--primary-text-color);
+  background-color: var(--card-bg-color);
+  padding-inline: 0;
+  text-align: center;
+  inline-size: 100%;
+}

src/renderer/components/ft-age-restricted/ft-age-restricted.scss

@@ -1,21 +0,0 @@
-.ft-age-restricted {
-  color: var(--primary-text-color);
-
-  h2 {
-    background-color: var(--card-bg-color);
-    padding-block: 10px;
-    padding-inline: 0;
-    text-align: center;
-    inline-size: 100%;
-  }
-
-  .frown {
-    background-color: var(--card-bg-color);
-    font-size: 10em;
-    block-size: 100%;
-    padding-block: 20px;
-    padding-inline: 0;
-    text-align: center;
-    inline-size: 100%;
-  }
-}

src/renderer/components/ft-age-restricted/ft-age-restricted.vue

@@ -1,8 +1,6 @@
 <template>
-  <div
-    class="ft-age-restricted"
-  >
-    <h2>
+  <div>
+    <h2 class="message">
       {{ restrictedMessage }}
     </h2>
     <div class="frown">
@@ -12,4 +10,4 @@
 </template>
 
 <script src="./ft-age-restricted.js" />
-<style scoped lang="scss" src="./ft-age-restricted.scss" />
+<style scoped src="./ft-age-restricted.css" />

src/renderer/components/ft-auto-grid/ft-auto-grid.css

@@ -0,0 +1,11 @@
+.grid {
+  display: grid;
+  grid-gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
+  justify-content: space-evenly;
+}
+
+.list {
+  display: grid;
+  grid-gap: 4px;
+}

src/renderer/components/ft-auto-grid/ft-auto-grid.scss

@@ -1,13 +0,0 @@
-.ft-auto-grid {
-  &.grid {
-    display: grid;
-    grid-gap: 8px;
-    grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
-    justify-content: space-evenly;
-  }
-
-  &.list {
-    display: grid;
-    grid-gap: 4px;
-  }
-}

src/renderer/components/ft-auto-grid/ft-auto-grid.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    class="ft-auto-grid"
     :class="{
       grid: grid,
       list: !grid
@@ -11,4 +10,4 @@
 </template>
 
 <script src="./ft-auto-grid.js" />
-<style scoped lang="scss" src="./ft-auto-grid.scss" />
+<style scoped src="./ft-auto-grid.css" />

src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.css

@@ -2,12 +2,14 @@
   margin-block-start: 30px;
   padding-block: 0;
   padding-inline: 10px;
+}
 
-  @media only screen and (width <= 680px) {
+.sponsorTitle {
+  font-size: x-large;
+}
+
+@media only screen and (width <= 680px) {
+  .sponsorBlockCategory {
     inline-size: 100%;
   }
-
-  .sponsorTitle {
-    font-size: x-large;
-  }
 }

src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.vue

@@ -31,4 +31,4 @@
   </div>
 </template>
 <script src="./ft-sponsor-block-category.js" />
-<style scoped lang="scss" src="./ft-sponsor-block-category.scss" />
+<style scoped src="./ft-sponsor-block-category.css" />

src/renderer/components/player-settings/player-settings.css

@@ -0,0 +1,24 @@
+.av1Switch {
+  align-self: center;
+}
+
+.screenshotFolderContainer {
+  align-items: center;
+  column-gap: 1rem;
+  margin-block: 0;
+  margin-inline: auto;
+  inline-size: 95%;
+}
+
+.screenshotFolderLabel,
+.screenshotFolderButton,
+.screenshotFilenamePatternTitle {
+  flex-grow: 0;
+}
+
+.screenshotFolderPath,
+.screenshotFilenamePatternInput,
+.screenshotFilenamePatternExample {
+  flex-grow: 1;
+  margin-block-start: 10px;
+}

src/renderer/components/player-settings/player-settings.scss

@@ -1,24 +0,0 @@
-.av1Switch {
-  align-self: center;
-}
-
-.screenshotFolderContainer {
-  align-items: center;
-  column-gap: 1rem;
-  margin-block: 0;
-  margin-inline: auto;
-  inline-size: 95%;
-
-  .screenshotFolderLabel,
-  .screenshotFolderButton,
-  .screenshotFilenamePatternTitle {
-    flex-grow: 0;
-  }
-
-  .screenshotFolderPath,
-  .screenshotFilenamePatternInput,
-  .screenshotFilenamePatternExample {
-    flex-grow: 1;
-    margin-block-start: 10px;
-  }
-}

src/renderer/components/player-settings/player-settings.vue

@@ -263,4 +263,4 @@
 </template>
 
 <script src="./player-settings.js" />
-<style scoped lang="scss" src="./player-settings.scss" />
+<style scoped src="./player-settings.css" />

src/renderer/views/About/About.css

@@ -2,10 +2,6 @@
   margin-block: 0 60px;
   margin-inline: auto;
   inline-size: 85%;
-
-  @media only screen and (width <= 680px) {
-    inline-size: 90%;
-  }
 }
 
 .brand {
@@ -29,10 +25,6 @@
   margin-block: 80;
   margin-inline: auto;
   max-inline-size: 860px;
-
-  @media only screen and (width <= 650px) {
-    grid-template-columns: 1fr;
-  }
 }
 
 .chunk {
@@ -47,18 +39,30 @@
   margin: 0;
   padding: 18px;
   word-break: break-word;
+}
 
-  @each $area in icon title content {
-    .#{$area} {
-      grid-area: $area;
-    }
-  }
+.icon {
+  font-size: 24px;
+  grid-area: icon;
+}
 
-  .icon {
-    font-size: 24px;
-  }
+.title {
+  grid-area: title;
+  margin: 0;
+}
 
-  .title {
-    margin: 0;
+.content {
+  grid-area: content;
+}
+
+@media only screen and (width <=650px) {
+  .about-chunks {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media only screen and (width <=680px) {
+  .card {
+    inline-size: 90%;
   }
 }

src/renderer/views/About/About.vue

@@ -38,4 +38,4 @@
 </template>
 
 <script src="./About.js" />
-<style scoped src="./About.scss" lang="scss" />
+<style scoped src="./About.css" />