Extract styles for views

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 {
-  border-width: 3px;
+a:hover,
+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%;
+}