diff --git a/src/components/player/player.css b/src/components/player/player.css index b0c784d..4c356bd 100644 --- a/src/components/player/player.css +++ b/src/components/player/player.css @@ -1,7 +1,3 @@ -.app.play { - height: 100%; -} - .ifplayer { height: 100%; display: flex; diff --git a/src/style/base.css b/src/style/base.css index d21f9fb..6c85438 100644 --- a/src/style/base.css +++ b/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%; -} diff --git a/src/style/views/HomeView.css b/src/style/views/HomeView.css new file mode 100644 index 0000000..1dc622f --- /dev/null +++ b/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%; +} diff --git a/src/style/views/PlayerView.css b/src/style/views/PlayerView.css new file mode 100644 index 0000000..3936a80 --- /dev/null +++ b/src/style/views/PlayerView.css @@ -0,0 +1,3 @@ +.app.play { + height: 100%; +} diff --git a/src/views/HomeView.jsx b/src/views/HomeView.jsx index 42d8bae..8c646c8 100644 --- a/src/views/HomeView.jsx +++ b/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) => ( Play "{name}" @@ -44,11 +46,9 @@ export default function ({ themeEngine }) { Interface theme -

- -

+

@@ -97,7 +97,7 @@ export default function ({ themeEngine }) {

-

+

-

+