Extract styles for views

src/components/player/player.css

@@ -1,7 +1,3 @@
-.app.play {
-  height: 100%;
-}
-
 .ifplayer {
   height: 100%;
   display: flex;

src/style/base.css

@@ -44,62 +44,26 @@ html, body {
 
 /* Common */
 
-a {
+a,
+summary {
+  display: inline;
+  cursor: pointer;
+
   border-bottom: 2px solid currentColor;
   color: inherit;
   text-decoration: none;
 }
 
-a:focus {
+a:focus,
+summary:focus {
   background-color: hsl(0, 0%, 0%, 0.1);
 }
 
-a:hover {
+a:hover,
-  border-width: 3px;
+summary:hover {
+  opacity: 0.8;
 }
 
 ul {
   list-style: square;
 }
-
-/* Status */
-.status {
-  padding: 8px;
-}
-
-/* Dirty views */
-
-/* Home */
-
-.app > .view.home {
-  padding: var(--inner-padding);
-  max-height: unset;
-  height: 200%;
-}
-
-.view.home input,
-.view.view.home select {
-  padding: 4px 8px;
-  color: var(--main-color);
-  background-color: var(--bg-color);
-  border: 2px solid var(--main-color);
-  outline-offset: 0;
-  font: inherit;
-}
-
-.view.home summary {
-  display: inline-block;
-  padding-right: 4px;
-  cursor: pointer;
-}
-
-.view.home .play label {
-  display: inline-block;
-  width: 100%;
-  max-width: 400px;
-}
-
-.view.home .play input {
-  box-sizing: border-box;
-  width: 100%;
-}

src/style/views/HomeView.css

@@ -0,0 +1,31 @@
+.app > .view.home {
+  padding: var(--inner-padding);
+}
+
+.view.home summary {
+  display: inline;
+  cursor: pointer;
+}
+
+.view.home input,
+.view.home select {
+  box-sizing: border-box;
+
+  padding: 4px 8px;
+  color: var(--main-color);
+  background-color: var(--bg-color);
+  border: 2px solid var(--main-color);
+  outline-offset: 0;
+  font: inherit;
+}
+
+.view.home label {
+  display: inline-block;
+  width: 100%;
+  max-width: 400px;
+}
+
+.view.home label input,
+.view.home label select {
+  width: 100%;
+}

src/style/views/PlayerView.css

@@ -0,0 +1,3 @@
+.app.play {
+  height: 100%;
+}

src/views/HomeView.jsx

@@ -9,6 +9,8 @@ import ThemeSelector from '~/src/components/ThemeSelector'
 
 import { buildPlayLinkHref } from '~/src/utils/utils.routing'
 
+import '~/src/style/views/HomeView.css'
+
 const playButton = (name, url, theme) => (
   <Link href={buildPlayLinkHref(url, theme)}>
     Play "{name}"
@@ -44,11 +46,9 @@ export default function ({ themeEngine }) {
           Interface theme
         </h3>
 
-        <p>
+        <ThemeSelector {...{
-          <ThemeSelector {...{
+          themeEngine
-            themeEngine
+        }} />
-          }} />
-        </p>
 
         <p>
           <small>
@@ -97,7 +97,7 @@ export default function ({ themeEngine }) {
           </details>
         </p>
 
-        <p className='play'>
+        <p>
           <label>
             Local file: <br />
             <FileSelector {...{
@@ -107,7 +107,7 @@ export default function ({ themeEngine }) {
           </label>
         </p>
 
-        <p className='play'>
+        <p>
           <label>
             Direct link: <br />
             <URLSelector {...{

src/views/PlayerView.jsx

@@ -3,6 +3,8 @@ import { useState, useEffect } from 'preact/hooks'
 
 import UrlPlayer from '~/src/components/player/UrlPlayer'
 
+import '~/src/style/views/PlayerView.css'
+
 const decode = encodedUrl => decodeURIComponent(encodedUrl)
 
 export default function ({ setTheme, theme, encodedUrl }) {