diff --git a/src/parse.js b/src/parse.js
index 41f9eb4..38f4464 100644
--- a/src/parse.js
+++ b/src/parse.js
@@ -279,10 +279,12 @@ function display() {
tracker.setAttribute('aria-label', 'Tracker URL #' + i);
tracker.addEventListener('input', propertyChange);
row.appendChild(tracker);
- let remove = document.createElement('a');
+ let remove = document.createElement('button');
+ remove.type = 'button';
remove.className = 'remove';
remove.dataset.index = i;
remove.innerHTML = '';
+ remove.setAttribute('aria-label', 'Remove tracker #' + i);
remove.addEventListener('click', removeRow);
row.appendChild(remove);
announce.appendChild(row);
@@ -305,10 +307,12 @@ function display() {
webseed.setAttribute('aria-label', 'Webseed URL #' + i);
webseed.addEventListener('input', propertyChange);
row.appendChild(webseed);
- let remove = document.createElement('a');
+ let remove = document.createElement('button');
+ remove.type = 'button';
remove.className = 'remove';
remove.dataset.index = i;
remove.innerHTML = '';
+ remove.setAttribute('aria-label', 'Remove webseed #' + i);
remove.addEventListener('click', removeRow);
row.appendChild(remove);
urlList.appendChild(row);
@@ -340,10 +344,10 @@ function display() {
} else {
if (client.torrents.length > 0) {
getFiles.style.display = 'none';
- files.innerHTML = '';
+ files.innerHTML = '';
} else {
getFiles.style.display = 'block';
- files.innerHTML = '';
+ files.innerHTML = '';
}
downloadTorrentTooltip.setContent('Files metadata is required to generate a Torrent file. Try fetching files list from WebTorrent.');
downloadTorrent.removeEventListener('click', saveTorrent);
diff --git a/src/style.css b/src/style.css
index 6076775..84e1c62 100644
--- a/src/style.css
+++ b/src/style.css
@@ -306,10 +306,35 @@ input {
#announce > *, #urlList > * {
margin: 0 0 16px 0;
+ display: flex;
+ align-items: center;
+ gap: 6px;
}
.remove {
- margin-left: 6px;
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ width: auto;
+ height: auto;
+ padding: 0;
+ cursor: pointer;
+ display: inline;
+ color: var(--grey);
+ flex-shrink: 0;
+}
+
+output {
+ color: rgb(120, 126, 133) !important;
+ -webkit-text-fill-color: rgb(120, 126, 133) !important;
+ background: transparent;
+ border: 0;
+ padding: 8px 0;
+ font-style: normal;
+ display: block;
+ width: 440px;
+ height: 40px;
+ box-sizing: border-box;
}
@media (max-width: 1080px) {
@@ -378,8 +403,28 @@ input {
align-items: center;
}
+ output {
+ text-align: center;
+ }
+
#announce, #urlList {
text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ #announce > *, #urlList > * {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 80vw;
+ gap: 6px;
+ }
+
+ #announce > * > input, #urlList > * > input {
+ width: calc(80vw - 40px);
+ flex: none;
}
#announce > * > *, #urlList > * > *, #addTracker, #addWebseed, #examples > button {