Fix wrappers

This commit is contained in:
2025-12-10 09:56:55 +01:00
parent ab84747bbf
commit bdbb0d6b36
3 changed files with 95 additions and 14 deletions

View File

@@ -534,7 +534,8 @@ body {
.asset-inspector {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(148, 163, 184, 0.15);
border: none !important;
padding: 0 !important;
}
.asset-controls-placeholder {
@@ -873,6 +874,64 @@ body {
align-items: center;
gap: 8px;
padding-top: 6px;
position: relative;
}
.checkbox-inline.toggle {
gap: 12px;
cursor: pointer;
user-select: none;
}
.checkbox-inline input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.toggle-track {
position: relative;
width: 52px;
height: 30px;
display: inline-flex;
align-items: center;
padding: 4px;
border-radius: 999px;
background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
border: 1px solid #cbd5e1;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.toggle-thumb {
width: 22px;
height: 22px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
transform: translateX(0);
transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.checkbox-inline input[type="checkbox"]:checked + .toggle-track {
background: linear-gradient(180deg, #34c759, #28b74b);
border-color: #28b74b;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(52, 199, 89, 0.35);
}
.checkbox-inline input[type="checkbox"]:checked + .toggle-track .toggle-thumb {
transform: translateX(22px);
box-shadow: 0 2px 6px rgba(40, 183, 75, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.checkbox-inline input[type="checkbox"]:focus-visible + .toggle-track {
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.toggle-label {
color: #e2e8f0;
font-weight: 600;
}
.muted {

View File

@@ -1294,26 +1294,40 @@ function deleteAsset(asset) {
function handleFileSelection(input) {
if (!input) return;
const name = input.files && input.files.length ? input.files[0].name : '';
const hasFile = input.files && input.files.length;
const name = hasFile ? input.files[0].name : '';
if (fileNameLabel) {
fileNameLabel.textContent = name || 'No file chosen';
}
if (hasFile) {
uploadAsset(input.files[0]);
}
}
function uploadAsset() {
function uploadAsset(file = null) {
const fileInput = document.getElementById('asset-file');
if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
const selectedFile = file || (fileInput?.files && fileInput.files.length ? fileInput.files[0] : null);
if (!selectedFile) {
alert('Please choose an image, GIF, video, or audio file to upload.');
return;
}
const data = new FormData();
data.append('file', fileInput.files[0]);
data.append('file', selectedFile);
if (fileNameLabel) {
fileNameLabel.textContent = 'Uploading...';
}
fetch(`/api/channels/${broadcaster}/assets`, {
method: 'POST',
body: data
}).then(() => {
fileInput.value = '';
handleFileSelection(fileInput);
if (fileInput) {
fileInput.value = '';
handleFileSelection(fileInput);
}
}).catch(() => {
if (fileNameLabel) {
fileNameLabel.textContent = 'Upload failed';
}
});
}