Status: extract styles

src/components/Player/Status/Status.jsx

@@ -1,7 +1,9 @@
 import { Link } from 'wouter-preact'
 
+import * as s from './Status.module.scss'
+
 const fail = (details) => (
-  <div className='status fail'>
+  <div className={[s.status, s.fail].join(' ')}>
     <h1>
       Error
     </h1>
@@ -22,7 +24,7 @@ const fail = (details) => (
 )
 
 const loading = (details) => (
-  <div className='status loading'>
+  <div className={[s.status, s.loading].join(' ')}>
     {details.map((x) => (<div key={x}>{x}</div>))}
   </div>
 )

src/components/Player/Status/Status.module.scss

@@ -0,0 +1,17 @@
+@keyframes dots0123 {
+  0%   { content: ''; }
+  33%  { content: '.'; }
+  66%  { content: '..'; }
+  100% { content: '...'; }
+}
+
+.status {
+  padding: var(--inner-padding);
+  word-break: break-word;
+
+  &.loading > div:after {
+    animation: dots0123 1s infinite;
+    content: '';
+  }
+}
+

src/components/Player/player.css

@@ -111,19 +111,3 @@
 .ifplayer .output .textBuffer .message.subheader {
   color: var(--accent-color);
 }
-
-.status {
-  padding: var(--inner-padding);
-}
-
-.status.loading > div:after {
-  animation: dots0123 1s infinite;
-  content: '';
-}
-
-@keyframes dots0123 {
-  0%   { content: ''; }
-  33%  { content: '.'; }
-  66%  { content: '..'; }
-  100% { content: '...'; }
-}

src/style/base.scss

@@ -45,8 +45,3 @@ html, body {
     max-width: 800px;
   }
 }
-
-.status {
-  padding: var(--inner-padding);
-  word-break: break-word;
-}