A music player that connects to your cloud/distributed storage.
chore: rearrange styles
+57
-69
-6
src/_includes/layouts/diffuse.vto
-6
src/_includes/layouts/diffuse.vto
···
26
26
<meta name="theme-color" content="#8a90a9" />
27
27
28
28
<!-- Styles -->
29
-
<style>
30
-
@import "{{base}}styles/reset.css";
31
-
@import "{{base}}styles/fonts.css";
32
-
@import "{{base}}styles/variables.css";
33
-
</style>
34
-
35
29
{{ for url of styles }}
36
30
<link rel="stylesheet" href="{{ url }}" />
37
31
{{ /for }}
+1
-2
src/index.css
+1
-2
src/index.css
+7
src/styles/base.css
+7
src/styles/base.css
+1
-9
src/themes/blur/artwork-controller/element.css
+1
-9
src/themes/blur/artwork-controller/element.css
···
1
-
@import "../../../styles/reset.css";
2
-
@import "../../../styles/variables.css";
3
-
@import "../../../styles/animations.css";
4
-
/*@import "../../../styles/icons/phosphor.css";*/
5
-
6
-
@import "../../../styles/diffuse/colors.css";
7
-
@import "../../../styles/diffuse/fonts.css";
8
-
9
-
:root {
1
+
:host {
10
2
--transition-durition: 500ms;
11
3
}
12
4
+5
-5
src/themes/blur/artwork-controller/element.js
+5
-5
src/themes/blur/artwork-controller/element.js
···
16
16
*/
17
17
18
18
class ArtworkController extends DiffuseElement {
19
-
constructor() {
20
-
super();
21
-
this.attachShadow({ mode: "open" });
22
-
}
19
+
// constructor() {
20
+
// super();
21
+
// this.attachShadow({ mode: "open" });
22
+
// }
23
23
24
24
// SIGNALS
25
25
···
225
225
render({ html }) {
226
226
return html`
227
227
<style>
228
-
@import "../../../styles/fonts.css";
228
+
/*@import "../../../styles/icons/phosphor.css";*/
229
229
@import "./element.css";
230
230
</style>
231
231
+3
-1
src/themes/blur/artwork-controller/index.vto
+3
-1
src/themes/blur/artwork-controller/index.vto
-7
src/themes/blur/index.css
-7
src/themes/blur/index.css
···
1
-
@import "./variables.css";
2
-
@import "../../styles/diffuse/colors.css";
3
-
@import "../../styles/diffuse/fonts.css";
4
-
5
-
/***********************************
6
-
* Base
7
-
***********************************/
8
1
body {
9
2
background-color: oklch(from var(--bg-color) calc(l - 0.025) c h);
10
3
color: var(--text-color);
+40
-39
src/themes/blur/index.vto
+40
-39
src/themes/blur/index.vto
···
1
-
<!doctype html>
2
-
<html>
3
-
<head>
4
-
<link rel="stylesheet" href="index.css" />
5
-
</head>
6
-
<body>
7
-
<!-- UI -->
8
-
<main>
9
-
</main>
1
+
---
2
+
layout: layouts/diffuse.vto
3
+
base: ../../
10
4
11
-
<!-- Engines -->
12
-
<de-audio group="shared"></de-audio>
13
-
<de-queue group="shared"></de-queue>
5
+
styles:
6
+
- ../../styles/base.css
7
+
- index.css
14
8
15
-
<!-- Inputs, Outputs & Processors -->
16
-
<dop-indexed-db></dop-indexed-db>
17
-
<dp-metadata></dp-metadata>
9
+
scripts:
10
+
- index.js
11
+
---
18
12
19
-
<di-opensubsonic id="input"></di-opensubsonic>
13
+
<!-- UI -->
14
+
<main>
15
+
</main>
20
16
21
-
<!-- Transformers -->
22
-
<dtor-default id="output" output-selector="dtos-json"></dtor-default>
23
-
<dtos-json output-selector="dop-indexed-db">now</dtos-json>
17
+
<!-- Engines -->
18
+
<de-audio group="shared"></de-audio>
19
+
<de-queue group="shared"></de-queue>
20
+
21
+
<!-- Inputs, Outputs & Processors -->
22
+
<dop-indexed-db></dop-indexed-db>
23
+
<dp-metadata></dp-metadata>
24
+
25
+
<di-opensubsonic id="input"></di-opensubsonic>
24
26
25
-
<!-- Orchestrators -->
26
-
<do-process-tracks
27
-
input-selector="#input"
28
-
metadata-processor-selector="dp-metadata"
29
-
output-selector="#output"
30
-
></do-process-tracks>
27
+
<!-- Transformers -->
28
+
<dtor-default id="output" output-selector="dtos-json"></dtor-default>
29
+
<dtos-json output-selector="dop-indexed-db">now</dtos-json>
31
30
32
-
<do-queue-audio
33
-
input-selector="#input"
34
-
audio-engine-selector="de-audio"
35
-
queue-engine-selector="de-queue"
36
-
></do-queue-audio>
31
+
<!-- Orchestrators -->
32
+
<do-process-tracks
33
+
input-selector="#input"
34
+
metadata-processor-selector="dp-metadata"
35
+
output-selector="#output"
36
+
></do-process-tracks>
37
37
38
-
<do-queue-tracks
39
-
input-selector="#input"
40
-
output-selector="#output"
41
-
queue-engine-selector="de-queue"
42
-
></do-queue-tracks>
38
+
<do-queue-audio
39
+
input-selector="#input"
40
+
audio-engine-selector="de-audio"
41
+
queue-engine-selector="de-queue"
42
+
></do-queue-audio>
43
43
44
-
<!-- Scripts -->
45
-
<script src="index.js" type="module"></script>
46
-
</body>
47
-
</html>
44
+
<do-queue-tracks
45
+
input-selector="#input"
46
+
output-selector="#output"
47
+
queue-engine-selector="de-queue"
48
+
></do-queue-tracks>