From 1c1e8fbdc555ab4c24344056cb3d9a1a0dfbe03a Mon Sep 17 00:00:00 2001
From: Andrei Andreev <Razenpok@outlook.com>
Date: Fri, 3 Dec 2021 18:58:40 +0300
Subject: [PATCH] Inline SFC CSS classes into a separate CSS file to prevent
 conflicts with styles.css

---
 public/index.html                      |   1 +
 public/stylesheets/vue-sfc-classes.css | 108 +++++++++++++++++++++++++
 src/components/FooterLinks.vue         |   9 ---
 src/components/HintText.vue            |  23 ------
 src/components/NewsTicker.vue          |  75 -----------------
 5 files changed, 109 insertions(+), 107 deletions(-)
 create mode 100644 public/stylesheets/vue-sfc-classes.css

diff --git a/public/index.html b/public/index.html
index 5398d3563..b47aae2a9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" type="text/css" href="stylesheets/codemirror/lint.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/codemirror/panda-syntax.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/codemirror/liquibyte.css">
+  <link rel="stylesheet" type="text/css" href="stylesheets/vue-sfc-classes.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/components.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/ad-slider-component.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/glyphs.css">
diff --git a/public/stylesheets/vue-sfc-classes.css b/public/stylesheets/vue-sfc-classes.css
new file mode 100644
index 000000000..e8ec3659d
--- /dev/null
+++ b/public/stylesheets/vue-sfc-classes.css
@@ -0,0 +1,108 @@
+/* Temporary inlined css classes from SFCs to prevent conflicts with old classes from styles.css */
+
+/* FooterLinks.vue */
+
+.o-footer {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  font-size: 1.5rem;
+}
+
+/* HintText.vue */
+
+.o-hint-text {
+  font-size: 1.55rem;
+  color: white;
+  text-shadow:
+    -0.1rem -0.1rem 0 black,
+    -0.1rem -0.1rem 0 black,
+    0.1rem -0.1rem 0 black,
+    0.1rem -0.1rem 0 black,
+    -0.1rem 0.1rem 0 black,
+    -0.1rem 0.1rem 0 black,
+    0.1rem 0.1rem 0 black,
+    0.1rem 0.1rem 0 black;
+  pointer-events: none;
+}
+
+.l-hint-text {
+  position: absolute;
+  top: -1.6rem;
+  left: 0;
+}
+
+/* NewsTicker.vue */
+
+.c-news-ticker {
+  overflow: hidden;
+}
+
+.c-news-ticker__line {
+  padding-left: 100%;
+  transition: transform linear;
+}
+
+.c-disable-ticker-animation > * {
+  animation-play-state: paused !important;
+}
+
+.c-news-line {
+  display: inline-block;
+  font-family: Typewriter, serif;
+  font-size: 1.5rem;
+  white-space: nowrap;
+  font-weight: bold;
+  text-align: left;
+  user-select: none;
+}
+
+.c-news-line a {
+  text-decoration: underline;
+}
+
+.new-ui .c-news-ticker {
+  width: 100%;
+  border-bottom: 0.1rem solid var(--color-accent);
+  padding: 0.8rem 0;
+  height: 3.9rem;
+}
+
+.new-ui .c-news-line {
+  color: var(--color-text);
+}
+
+.old-ui .c-news-ticker {
+  border: 0.2rem solid black;
+  border-radius: 0.4rem;
+  padding: 0.2rem 0;
+  height: 3rem;
+}
+
+.old-ui .s-base--metro .c-news-ticker,
+.old-ui .t-s6 .c-news-ticker,
+.old-ui .t-s10 .c-news-ticker {
+  border-width: 0.1rem;
+}
+
+.old-ui .t-dark .c-news-ticker {
+  border-color: #546e7a;
+  background-color: #455a64;
+}
+
+.old-ui .t-dark-metro .c-news-ticker {
+  background-color: #455a64;
+}
+
+.old-ui .t-s1 .c-news-ticker {
+  background-color: #dbd242
+}
+
+.old-ui .t-s6 .c-news-ticker,
+.old-ui .t-s10 .c-news-ticker {
+  background-color: black;
+}
+
+.old-ui .c-news-line {
+  color: var(--color-text);
+}
diff --git a/src/components/FooterLinks.vue b/src/components/FooterLinks.vue
index 25051f2dc..53738606d 100644
--- a/src/components/FooterLinks.vue
+++ b/src/components/FooterLinks.vue
@@ -42,12 +42,3 @@ export default {
     </FooterLink>
   </div>
 </template>
-
-<style scoped>
-.o-footer {
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-  font-size: 1.5rem;
-}
-</style>
diff --git a/src/components/HintText.vue b/src/components/HintText.vue
index 59cc0d1df..b1f11aaef 100644
--- a/src/components/HintText.vue
+++ b/src/components/HintText.vue
@@ -24,26 +24,3 @@ export default {
     <slot />
   </div>
 </template>
-
-<style scoped>
-.o-hint-text {
-  font-size: 1.55rem;
-  color: white;
-  text-shadow:
-    -0.1rem -0.1rem 0 black,
-    -0.1rem -0.1rem 0 black,
-    0.1rem -0.1rem 0 black,
-    0.1rem -0.1rem 0 black,
-    -0.1rem 0.1rem 0 black,
-    -0.1rem 0.1rem 0 black,
-    0.1rem 0.1rem 0 black,
-    0.1rem 0.1rem 0 black;
-  pointer-events: none;
-}
-
-.l-hint-text {
-  position: absolute;
-  top: -1.6rem;
-  left: 0;
-}
-</style>
diff --git a/src/components/NewsTicker.vue b/src/components/NewsTicker.vue
index 12919dd60..b8c570f5c 100644
--- a/src/components/NewsTicker.vue
+++ b/src/components/NewsTicker.vue
@@ -129,78 +129,3 @@ export default {
     />
   </div>
 </template>
-
-<style scoped>
-.c-news-ticker {
-  overflow: hidden;
-}
-
-.c-news-ticker__line {
-  padding-left: 100%;
-  transition: transform linear;
-}
-
-.c-disable-ticker-animation > * {
-  animation-play-state: paused !important;
-}
-
-.c-news-line {
-  display: inline-block;
-  font-family: Typewriter, serif;
-  font-size: 1.5rem;
-  white-space: nowrap;
-  font-weight: bold;
-  text-align: left;
-  user-select: none;
-}
-
-.c-news-line a {
-  text-decoration: underline;
-}
-
-.new-ui .c-news-ticker {
-  width: 100%;
-  border-bottom: 0.1rem solid var(--color-accent);
-  padding: 0.8rem 0;
-  height: 3.9rem;
-}
-
-.new-ui .c-news-line {
-  color: var(--color-text);
-}
-
-.old-ui .c-news-ticker {
-  border: 0.2rem solid black;
-  border-radius: 0.4rem;
-  padding: 0.2rem 0;
-  height: 3rem;
-}
-
-.old-ui .s-base--metro .c-news-ticker,
-.old-ui .t-s6 .c-news-ticker,
-.old-ui .t-s10 .c-news-ticker {
-  border-width: 0.1rem;
-}
-
-.old-ui .t-dark .c-news-ticker {
-  border-color: #546e7a;
-  background-color: #455a64;
-}
-
-.old-ui .t-dark-metro .c-news-ticker {
-  background-color: #455a64;
-}
-
-.old-ui .t-s1 .c-news-ticker {
-  background-color: #dbd242
-}
-
-.old-ui .t-s6 .c-news-ticker,
-.old-ui .t-s10 .c-news-ticker {
-  background-color: black;
-}
-
-.old-ui .c-news-line {
-  color: var(--color-text);
-}
-</style>