Player: replace player.css with scss modules

src/components/Player/OutputBox/GridBuffer/GridBuffer.jsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'preact/hooks'
 
-import TextMessage from './TextMessage'
+import TextMessage from '../TextMessage/TextMessage'
+
+import * as s from '../../Player.module.scss'
 
 export default function GridBuffer ({ inbox, currentWindow }) {
   const [prevMessages, setPrevMessages] = useState([])
@@ -70,8 +72,7 @@ export default function GridBuffer ({ inbox, currentWindow }) {
   }, [inbox, currentWindow, prevMessages])
 
   return (
-    <section
-      className='buffer gridBuffer'>
+    <section className={[s.buffer, s.gridBuffer].join(' ')}>
       {messages.map(TextMessage)}
     </section>
   )

src/components/Player/OutputBox/TextBuffer/TextBuffer.jsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'preact/hooks'
 
-import TextMessage from './TextMessage'
+import TextMessage from '../TextMessage/TextMessage'
+
+import * as s from '../../Player.module.scss'
 
 const isFakeStatus = (w) =>
   w.height < 5
@@ -75,17 +77,19 @@ export default function TextBuffer ({ inbox, currentWindow }) {
     }, 0)
   }, [currentWindow, inbox])
 
-  const classes = [
+  const classes = () => [
+    s.buffer,
     isFakeStatus(currentWindow)
-      ? 'gridBuffer'
-      : 'textBuffer',
-    'buffer'].join(' ')
+      ? s.gridBuffer
+      : s.textBuffer,
+  ].join(' ')
 
   return (
     <section
       tabindex='0'
       ref={textBufferEl}
-      className={classes}>
+      className={classes()}
+    >
       {messages.map(TextMessage)}
     </section>
   )

src/components/Player/OutputBox/TextMessage.jsx

@@ -1,14 +0,0 @@
-export default function TextMessage ({ style, text }) {
-  const defaultContent = (
-    <span className={['message', style].join(' ')}>
-      {text}
-    </span>)
-
-  return ({
-    grid: (text?.length > 0 ? <div>{text}</div> : <br />),
-    input: (<span className='message input'>&gt; {text}</span>),
-    subheader: (<strong className='message subheader'>{text}</strong>),
-    emphasized: (<em className='message emphasized'>{text}</em>),
-    endOfLine: (<br />),
-  })[style] || defaultContent
-}

src/components/Player/OutputBox/TextMessage/TextMessage.jsx

@@ -0,0 +1,21 @@
+import * as s from './TextMessage.module.scss'
+
+export default function TextMessage ({ style, text }) {
+  const defaultContent = (
+    <span className={[s.message, s[style]].join(' ')}>
+      {text}
+    </span>)
+
+  return ({
+    grid:
+      (text?.length > 0 ? <div>{text}</div> : <br />),
+    input:
+      (<span className={[s.message, s.input].join(' ')}>&gt; {text}</span>),
+    subheader:
+      (<strong className={[s.message, s.subheader].join(' ')}>{text}</strong>),
+    emphasized:
+      (<em className={[s.message, s.emphasized].join(' ')}>{text}</em>),
+    endOfLine:
+      (<br />),
+  })[style] || defaultContent
+}

src/components/Player/OutputBox/TextMessage/TextMessage.module.scss

@@ -0,0 +1,11 @@
+.message {
+  &.input {
+    scroll-margin-top: var(--inner-padding);
+    color: var(--input-color);
+  }
+
+  &.emphasized,
+  &.subheader {
+    color: var(--accent-color);
+  }
+}