forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: change webamp output element language
+25
-17
+13
-17
src/themes/webamp/configurators/output/element.js
+13
-17
src/themes/webamp/configurators/output/element.js
···
18
18
render({ html }) {
19
19
return html`
20
20
<link rel="stylesheet" href="styles/vendor/98.css" />
21
+
<link rel="stylesheet" href="themes/webamp/facet.css" />
21
22
22
23
<style>
23
24
@import "./themes/webamp/98-vars.css";
···
64
65
}
65
66
66
67
#tabbed:has(#overview-tab:checked) #overview-contents { display: block }
67
-
#tabbed:has(#automerge-tab:checked) #automerge-contents { display: block }
68
+
#tabbed:has(#s3-tab:checked) #s3-contents { display: block }
68
69
</style>
69
70
70
71
<div id="tabbed">
···
76
77
</label>
77
78
</li>
78
79
<li role="tab">
79
-
<label for="automerge-tab">
80
-
<span>Automerge Repo</span>
81
-
<input name="output-tab" id="automerge-tab" type="radio" />
80
+
<label for="s3-tab">
81
+
<span>S3</span>
82
+
<input name="output-tab" id="s3-tab" type="radio" />
82
83
</label>
83
84
</li>
84
85
</menu>
···
86
87
<div class="window" role="tabpanel">
87
88
<!-- Overview -->
88
89
<div class="window-body" id="overview-contents">
89
-
<form>
90
-
<p>Do you want to sync your data somewhere?</p>
91
-
<div class="field-row">
92
-
<input id="idb-json" type="radio" checked />
93
-
<label for="idb-json">No syncing, just keep data locally.</label>
94
-
</div>
95
-
<div class="field-row">
96
-
<input id="idb-json" type="radio" disabled />
97
-
<label for="idb-json">Automerge Repo</label>
98
-
</div>
99
-
</form>
90
+
<fieldset>
91
+
<span class="with-icon with-icon--large">
92
+
<img src="images/icons/windows_98/computer_user_pencil-0.png" width="24" />
93
+
<span>Here you can configure where to keep your user data.<br />Each storage method comes with its pros and cons.<br />By default your data is only kept locally here in the browser.</span>
94
+
</span>
95
+
</fieldset>
100
96
</div>
101
97
102
-
<!-- Automerge -->
103
-
<div class="window-body" id="automerge-contents">
98
+
<!-- S3 -->
99
+
<div class="window-body" id="s3-contents">
104
100
<p>TODO</p>
105
101
</div>
106
102
</div>
+12
src/themes/webamp/facet.css
+12
src/themes/webamp/facet.css
···
1
+
@import "../../styles/variables.css";
2
+
1
3
body {
2
4
margin: 0;
3
5
}
···
17
19
flex: 1;
18
20
overflow: hidden;
19
21
}
22
+
23
+
.with-icon {
24
+
align-items: center;
25
+
display: inline-flex;
26
+
gap: var(--space-3xs);
27
+
28
+
&.with-icon--large {
29
+
gap: var(--space-xs);
30
+
}
31
+
}