typeof lang_strings != 'undefined' && key in lang_strings ? lang_strings[key] : key;
const rename_button = ``;
const delete_button = ``;
const edit_button = ``;
const mkdir_dialog = ``;
const mkfile_dialog = ``;
const rename_dialog = ``;
const paste_upload_dialog = `Upload this file?
`;
const edit_dialog = ``;
const markdown_dialog = ``;
const delete_dialog = `${_('Confirm delete?')}
`;
const wopi_dialog = ``;
const dialog_tpl = ``;
const html_tpl = `
Files
`;
const body_tpl = `%title%
`;
const create_buttons = `
`;
const dir_row_tpl = `| %icon% | %name% | %modified% | |
|---|
`;
const file_row_tpl = `| %icon% | %name% | %size_bytes% | %modified% | |
|---|
`;
const propfind_tpl = '<'+ `?xml version="1.0" encoding="UTF-8"?>
`;
const wopi_propfind_tpl = '<' + `?xml version="1.0" encoding="UTF-8"?>
`;
const html = (unsafe) => {
return unsafe.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'");
};
const reqXML = (method, url, body, headers) => {
return req(method, url, body, headers).then((r) => {
if (!r.ok) {
throw new Error(r.status + ' ' + r.statusText);
}
return r.text();
}).then(str => new window.DOMParser().parseFromString(str, "text/xml"));
};
const reqAndReload = (method, url, body, headers) => {
animateLoading();
req(method, url, body, headers).then(r => {
stopLoading();
if (!r.ok) {
return r.text().then(t => {
var message;
if (a = t.match(/<((?:\w+:)?message)>(.*)<\/\1>/)) {
message = "\n" + a[2];
}
throw new Error(r.status + ' ' + r.statusText + message); });
}
reloadListing();
}).catch(e => {
console.error(e);
alert(e);
});
return false;
};
const req = (method, url, body, headers) => {
if (!headers) {
headers = {};
}
if (auth_header) {
headers.Authorization = auth_header;
}
return fetch(url, {method, body, headers});
};
const xhr = (method, url, progress_callback) => {
var xhr = new XMLHttpRequest();
current_xhr = xhr;
xhr.responseType = 'blob';
var p = new Promise((resolve, reject) => {
xhr.open(method, url);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
xhr.onprogress = progress_callback;
xhr.send();
});
return p;
};
const get_url = async (url) => {
var progress = (e) => {
var p = $('progress');
if (!p || e.loaded <= 0) return;
p.value = e.loaded;
$('.progress_bytes').innerHTML = formatBytes(e.loaded);
};
if (temp_object_url) {
window.URL.revokeObjectURL(temp_object_url);
}
return await xhr('GET', url, progress).then(blob => {
temp_object_url = window.URL.createObjectURL(blob);
return temp_object_url;
});
};
const wopi_init = async () => {
try {
var d = await reqXML('GET', wopi_discovery_url);
}
catch (e) {
reloadListing();
return;
}
d.querySelectorAll('app').forEach(app => {
var mime = (a = app.getAttribute('name').match(/^.*\/.*$/)) ? a[0] : null;
wopi_mimes[mime] = {};
app.querySelectorAll('action').forEach(action => {
var ext = action.getAttribute('ext').toUpperCase();
var url = action.getAttribute('urlsrc').replace(/<[^>]*&>/g, '');
var name = action.getAttribute('name');
if (mime) {
wopi_mimes[mime][name] = url;
}
else {
if (!wopi_extensions.hasOwnProperty(ext)) {
wopi_extensions[ext] = {};
}
wopi_extensions[ext][name] = url;
}
});
});
reloadListing();
};
const wopi_getEditURL = (name, mime) => {
var file_ext = name.replace(/^.*\.(\w+)$/, '$1').toUpperCase();
if (wopi_mimes.hasOwnProperty(mime) && wopi_mimes[mime].hasOwnProperty('edit')) {
return wopi_mimes[mime].edit;
}
else if (wopi_extensions.hasOwnProperty(file_ext) && wopi_extensions[file_ext].hasOwnProperty('edit')) {
return wopi_extensions[file_ext].edit;
}
return null;
};
const wopi_getViewURL = (name, mime) => {
var file_ext = name.replace(/^.*\.(\w+)$/, '$1').toUpperCase();
if (wopi_mimes.hasOwnProperty(mime) && wopi_mimes[mime].hasOwnProperty('view')) {
return wopi_mimes[mime].view;
}
else if (wopi_extensions.hasOwnProperty(file_ext) && wopi_extensions[file_ext].hasOwnProperty('view')) {
return wopi_extensions[file_ext].view;
}
return wopi_getEditURL(name, mime);
};
const wopi_open = async (document_url, wopi_url) => {
var properties = await reqXML('PROPFIND', document_url, wopi_propfind_tpl, {'Depth': '0'});
var src = (a = properties.querySelector('file-url')) ? a.textContent : null;
var token = (a = properties.querySelector('token')) ? a.textContent : null;
var token_ttl = (a = properties.querySelector('token-ttl')) ? a.textContent : +(new Date(Date.now() + 3600 * 1000));
if (!src || !token) {
alert('Cannot open document: WebDAV server did not return WOPI properties');
}
wopi_url += '&WOPISrc=' + encodeURIComponent(src);
openDialog(wopi_dialog, false);
$('dialog').className = 'preview';
var f = $('dialog form');
f.target = 'wopi_frame';
f.action = wopi_url;
f.method = 'post';
f.insertAdjacentHTML('beforeend', ``);
f.submit();
};
const template = (tpl, params) => {
return tpl.replace(/%(\w+)%/g, (a, b) => {
return params[b];
});
};
const openDialog = (html, ok_btn = true) => {
var tpl = dialog_tpl.replace(/%b/, ok_btn ? `` : '');
$('body').classList.add('dialog');
$('body').insertAdjacentHTML('beforeend', tpl.replace(/%s/, html));
$('.close input').onclick = closeDialog;
evt = window.addEventListener('keyup', (e) => {
if (e.key != 'Escape') return;
closeDialog();
return false;
});
if (a = $('dialog form input, dialog form textarea')) a.focus();
};
const closeDialog = (e) => {
if (!$('body').classList.contains('dialog')) {
return;
}
if (current_xhr) {
current_xhr.abort();
current_xhr = null;
}
window.onbeforeunload = null;
$('body').classList.remove('dialog');
if (!$('dialog')) return;
$('dialog').remove();
window.removeEventListener('keyup', evt);
evt = null;
};
const download = async (name, size, url) => {
window.onbeforeunload = () => {
if (current_xhr) {
current_xhr.abort();
}
return true;
};
openDialog(`
${html(name)}
/ ${formatBytes(size)}
`, false);
await get_url(url);
const a = document.createElement('a');
a.style.display = 'none';
a.href = temp_object_url;
a.download = name;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(temp_object_url);
a.remove();
closeDialog();
window.onbeforeunload = null;
};
const download_all = async () => {
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.is_dir) {
continue;
}
await download(item.name, item.size, item.uri)
}
};
const preview = (type, url) => {
if (type.match(/^image\//)) {
openDialog(`
`, false);
}
else if (type.match(/^audio\//)) {
openDialog(``, false);
}
else if (type.match(/^video\//)) {
openDialog(``, false);
}
else {
openDialog(``, false);
}
$('dialog').className = 'preview';
};
const $ = (a) => document.querySelector(a);
const formatBytes = (bytes) => {
const unit = _('B');
if (bytes >= 1024*1024*1024) {
return Math.round(bytes / (1024*1024*1024)) + ' G' + unit;
}
else if (bytes >= 1024*1024) {
return Math.round(bytes / (1024*1024)) + ' M' + unit;
}
else if (bytes >= 1024) {
return Math.round(bytes / 1024) + ' K' + unit;
}
else {
return bytes + ' ' + unit;
}
};
const formatDate = (date) => {
if (isNaN(date)) {
return '';
}
var now = new Date;
var nb_hours = (+(now) - +(date)) / 3600 / 1000;
if (date.getFullYear() == now.getFullYear() && date.getMonth() == now.getMonth() && date.getDate() == now.getDate()) {
if (nb_hours <= 1) {
return _('%d minutes ago').replace(/%d/, Math.round(nb_hours * 60));
}
else {
return _('%d hours ago').replace(/%d/, Math.round(nb_hours));
}
}
else if (nb_hours <= 24) {
return _('Yesterday, %s').replace(/%s/, date.toLocaleTimeString());
}
return date.toLocaleString();
};
const openListing = (uri, push) => {
closeDialog();
reqXML('PROPFIND', uri, propfind_tpl, {'Depth': 1}).then((xml) => {
buildListing(uri, xml)
current_url = uri;
changeURL(uri, push);
}).catch((e) => {
console.error(e);
alert(e);
});
};
const reloadListing = () => {
stopLoading();
openListing(current_url, false);
};
const normalizeURL = (url) => {
if (!url.match(/^https?:\/\//)) {
url = base_url.replace(/^(https?:\/\/[^\/]+\/).*$/, '$1') + url.replace(/^\/+/, '');
}
return url;
};
const changeURL = (uri, push) => {
try {
if (push) {
history.pushState(1, null, uri);
}
else {
history.replaceState(1, null, uri);
}
if (popstate_evt) return;
popstate_evt = window.addEventListener('popstate', (e) => {
var url = location.pathname;
openListing(url, false);
});
}
catch (e) {
// If using a HTML page on another origin
location.hash = uri;
}
};
const animateLoading = () => {
document.body.classList.add('loading');
};
const stopLoading = () => {
document.body.classList.remove('loading');
};
const buildListing = (uri, xml) => {
uri = normalizeURL(uri);
items = [[], []];
var title = null;
var root_permissions = null;
xml.querySelectorAll('response').forEach((node) => {
var item_uri = normalizeURL(node.querySelector('href').textContent);
var props = null;
node.querySelectorAll('propstat').forEach((propstat) => {
if (propstat.querySelector('status').textContent.match(/200/)) {
props = propstat;
}
});
// This item didn't return any properties, everything is 404?
if (!props) {
console.error('Cannot find properties for: ' + item_uri);
return;
}
var name = item_uri.replace(/\/$/, '').split('/').pop();
name = decodeURIComponent(name);
var permissions = (prop = node.querySelector('permissions')) ? prop.textContent : null;
if (item_uri == uri) {
title = name;
root_permissions = permissions;
return;
}
var is_dir = node.querySelector('resourcetype collection') ? true : false;
var index = sort_order == 'name' && is_dir ? 0 : 1;
items[index].push({
'uri': item_uri,
'name': name,
'size': !is_dir && (prop = node.querySelector('getcontentlength')) ? parseInt(prop.textContent, 10) : null,
'mime': !is_dir && (prop = node.querySelector('getcontenttype')) ? prop.textContent : null,
'modified': (prop = node.querySelector('getlastmodified')) ? new Date(prop.textContent) : null,
'is_dir': is_dir,
'permissions': permissions,
});
});
if (sort_order == 'name') {
items[0].sort((a, b) => a.name.localeCompare(b.name));
}
items[1].sort((a, b) => {
if (sort_order == 'date') {
return b.modified - a.modified;
}
else if (sort_order == 'size') {
return b.size - a.size;
}
else {
return a.name.localeCompare(b.name);
}
});
if (sort_order == 'name') {
// Sort with directories first
items = items[0].concat(items[1]);
}
else {
items = items[1];
}
var table = '';
var parent = uri.replace(/\/+$/, '').split('/').slice(0, -1).join('/') + '/';
if (parent.length >= base_url.length) {
table += template(dir_row_tpl, {'name': _('Back'), 'uri': parent, 'icon': '↲'});
}
else {
title = 'My files';
}
items.forEach(item => {
// Don't include files we cannot read
if (item.permissions !== null && item.permissions.indexOf('G') == -1) {
console.error('OC permissions deny read access to this file: ' + item.name, 'Permissions: ', item.permissions);
return;
}
var row = item.is_dir ? dir_row_tpl : file_row_tpl;
item.size_bytes = item.size !== null ? formatBytes(item.size).replace(/ /g, ' ') : null;
item.icon = item.is_dir ? '📁' : (item.uri.indexOf('.') > 0 ? item.uri.replace(/^.*\.(\w+)$/, '$1').toUpperCase() : '');
item.modified = item.modified !== null ? formatDate(item.modified) : null;
item.name = html(item.name);
table += template(row, item);
});
document.title = title;
document.querySelector('main').innerHTML = template(body_tpl, {'title': html(document.title), 'base_url': base_url, 'table': table});
var select = $('.sortorder');
select.value = sort_order;
select.onchange = () => {
sort_order = select.value;
window.localStorage.setItem('sort_order', sort_order);
reloadListing();
};
if (!items.length) {
$('.download_all').disabled = true;
}
else {
$('.download_all').onclick = download_all;
}
if (!root_permissions || root_permissions.indexOf('C') != -1 || root_permissions.indexOf('K') != -1) {
$('.upload').insertAdjacentHTML('afterbegin', create_buttons);
$('.mkdir').onclick = () => {
openDialog(mkdir_dialog);
document.forms[0].onsubmit = () => {
var name = $('input[name=mkdir]').value;
if (!name) return false;
name = encodeURIComponent(name);
req('MKCOL', current_url + name).then(() => openListing(current_url + name + '/'));
return false;
};
};
$('.mkfile').onclick = () => {
openDialog(mkfile_dialog);
var t = $('input[name=mkfile]');
t.value = '.md';
t.focus();
t.selectionStart = t.selectionEnd = 0;
document.forms[0].onsubmit = () => {
var name = t.value;
if (!name) return false;
name = encodeURIComponent(name);
return reqAndReload('PUT', current_url + name, '');
};
};
var fi = $('input[type=file]');
$('.uploadfile').onclick = () => fi.click();
fi.onchange = () => {
if (!fi.files.length) return;
var body = new Blob(fi.files);
var name = fi.files[0].name;
name = encodeURIComponent(name);
return reqAndReload('PUT', current_url + name, body);
};
}
Array.from($('table').rows).forEach((tr) => {
var $$ = (a) => tr.querySelector(a);
var file_url = $$('a').href;
var file_name = $$('a').innerText;
var dir = $$('[colspan]');
var mime = !dir ? tr.getAttribute('data-mime') : 'dir';
var buttons = $$('td.buttons div');
var permissions = tr.getAttribute('data-permissions');
var size = tr.getAttribute('data-size');
if (permissions == 'null') {
permissions = null;
}
if (dir) {
$$('a').onclick = () => {
openListing(file_url, true);
return false;
};
}
// For back link
if (dir && $$('a').getAttribute('href').length < uri.length) {
dir.setAttribute('colspan', 4);
tr.querySelector('td:last-child').remove();
tr.querySelector('td:last-child').remove();
return;
}
// This is to get around CORS when not on the same domain
if (user && password && (a = tr.querySelector('a[download]'))) {
a.onclick = () => {
download(file_name, size, url);
return false;
};
}
// Add rename/delete buttons
if (!permissions || permissions.indexOf('NV') != -1) {
buttons.insertAdjacentHTML('afterbegin', rename_button);
$$('.rename').onclick = () => {
openDialog(rename_dialog);
let t = $('input[name=rename]');
t.value = file_name;
t.focus();
t.selectionStart = 0;
t.selectionEnd = file_name.lastIndexOf('.');
document.forms[0].onsubmit = () => {
var name = t.value;
if (!name) return false;
name = encodeURIComponent(name);
name = name.replace(/%2F/, '/');
var dest = current_url + name;
dest = normalizeURL(dest);
return reqAndReload('MOVE', file_url, '', {'Destination': dest});
};
};
}
if (!permissions || permissions.indexOf('D') != -1) {
buttons.insertAdjacentHTML('afterbegin', delete_button);
$$('.delete').onclick = (e) => {
openDialog(delete_dialog);
document.forms[0].onsubmit = () => {
return reqAndReload('DELETE', file_url);
};
};
}
var view_url, edit_url;
// Don't preview PDF in mobile
if (mime.match(PREVIEW_TYPES)
&& !(mime == 'application/pdf' && window.navigator.userAgent.match(/Mobi|Tablet|Android|iPad|iPhone/))) {
$$('a').onclick = () => {
if (file_url.match(/\.md$/)) {
openDialog('', false);
$('dialog').className = 'preview';
req('GET', file_url).then(r => r.text()).then(t => {
$('.md_preview').innerHTML = microdown.parse(html(t));
});
return false;
}
if (user && password) {
(async () => { preview(mime, await get_url(file_url)); })();
}
else {
preview(mime, file_url);
}
return false;
};
}
else if (view_url = wopi_getViewURL(file_url, mime)) {
$$('.icon').classList.add('document');
$$('a').onclick = () => { wopi_open(file_url, view_url); return false; };
}
else if (user && password && !dir) {
$$('a').onclick = () => { download(file_name, size, file_url); return false; };
}
else {
$$('a').download = file_name;
}
if (!permissions || permissions.indexOf('W') != -1) {
if (mime.match(/^text\/|application\/x-empty/)) {
buttons.insertAdjacentHTML('beforeend', edit_button);
$$('.edit').onclick = (e) => {
req('GET', file_url).then((r) => r.text().then((t) => {
let md = file_url.match(/\.md$/);
openDialog(md ? markdown_dialog : edit_dialog);
var txt = $('textarea[name=edit]');
txt.value = t;
// Markdown editor
if (md) {
let pre = $('#md');
txt.oninput = () => {
pre.innerHTML = microdown.parse(html(txt.value));
};
txt.oninput();
// Sync scroll, not perfect but better than nothing
txt.onscroll = (e) => {
var p = e.target.scrollTop / (e.target.scrollHeight - e.target.offsetHeight);
var target = e.target == pre ? txt : pre;
target.scrollTop = p * (target.scrollHeight - target.offsetHeight);
e.preventDefault();
return false;
};
}
document.forms[0].onsubmit = () => {
var content = txt.value;
return reqAndReload('PUT', file_url, content);
};
}));
};
}
else if (edit_url = wopi_getEditURL(file_url, mime)) {
buttons.insertAdjacentHTML('beforeend', edit_button);
$$('.icon').classList.add('document');
$$('.edit').onclick = () => { wopi_open(file_url, edit_url); return false; };
}
}
});
};
var items = [[], []];
var current_xhr = null;
var current_url = url;
var base_url = url;
const user = options.user || null;
const password = options.password || null;
var auth_header = (user && password) ? 'Basic ' + btoa(user + ':' + password) : null;
if (location.pathname.indexOf(base_url) === 0) {
current_url = location.pathname;
}
if (!base_url.match(/^https?:/)) {
base_url = location.href.replace(/^(https?:\/\/[^\/]+\/).*$/, '$1') + base_url.replace(/^\/+/, '');
}
var evt, paste_upload, popstate_evt, temp_object_url;
var sort_order = window.localStorage.getItem('sort_order') || 'name';
var wopi_mimes = {}, wopi_extensions = {};
const wopi_discovery_url = options.wopi_discovery_url || null;
document.querySelector('html').innerHTML = html_tpl;
// Wait for WOPI discovery before creating the list
if (wopi_discovery_url) {
wopi_init();
} else {
reloadListing();
}
window.addEventListener('paste', (e) => {
let items = e.clipboardData.items;
const IMAGE_MIME_REGEX = /^image\/(p?jpeg|gif|png)$/i;
for (var i = 0; i < items.length; i++) {
if (items[i].kind === 'file' || IMAGE_MIME_REGEX.test(items[i].type)) {
e.preventDefault();
let f = items[i].getAsFile();
let name = f.name == 'image.png' ? f.name.replace(/\./, '-' + (+(new Date)) + '.') : f.name;
paste_upload = f;
openDialog(paste_upload_dialog);
let t = $('input[name=paste_name]');
t.value = name;
t.focus();
t.selectionStart = 0;
t.selectionEnd = name.lastIndexOf('.');
document.forms[0].onsubmit = () => {
name = encodeURIComponent(t.value);
return reqAndReload('PUT', current_url + name, paste_upload);
};
return;
}
}
});
var dragcounter = 0;
window.addEventListener('dragover', (e) => {
e.preventDefault();
e.stopPropagation();
});
window.addEventListener('dragenter', (e) => {
e.preventDefault();
e.stopPropagation();
if (!dragcounter) {
document.body.classList.add('dragging');
}
dragcounter++;
});
window.addEventListener('dragleave', (e) => {
e.preventDefault();
e.stopPropagation();
dragcounter--;
if (!dragcounter) {
document.body.classList.remove('dragging');
}
});
window.addEventListener('drop', (e) => {
e.preventDefault();
e.stopPropagation();
document.body.classList.remove('dragging');
dragcounter = 0;
const files = [...e.dataTransfer.items].map(item => item.getAsFile());
if (!files.length) return;
animateLoading();
(async () => {
for (var i = 0; i < files.length; i++) {
var f = files[i]
await req('PUT', current_url + encodeURIComponent(f.name), f);
}
window.setTimeout(() => {
stopLoading();
reloadListing();
}, 500);
})();
});
};
if (url = document.querySelector('html').getAttribute('data-webdav-url')) {
WebDAVNavigator(url, {
'wopi_discovery_url': document.querySelector('html').getAttribute('data-wopi-discovery-url'),
});
}
:root {
--bg-color: #fff;
--fg-color: #000;
--g1-color: #eee;
--g2-color: #ccc;
--g3-color: #999;
--link-color: blue;
--visited-color: purple;
--active-color: darkred;
}
body {
text-align: center;
font-size: 1.1em;
font-family: Arial, Helvetica, sans-serif;
background: var(--bg-color);
color: var(--fg-color);
}
a:link {
color: var(--link-color);
}
a:visited {
color: var(--visited-color);
}
a:hover {
color: var(--active-color);
}
table {
margin: 2em auto;
border-collapse: collapse;
width: 90%;
}
th, td {
padding: .5em;
text-align: left;
border: 2px solid var(--g2-color);
}
th {
word-break: break-all;
}
td.thumb {
width: 5%;
}
td.buttons {
text-align: right;
width: 20em;
}
td.buttons div {
display: flex;
flex-direction: row-reverse;
}
table tr:nth-child(even) {
background: var(--g1-color);
}
.icon {
width: 2.6em;
height: 2.6em;
display: block;
border-radius: .2em;
background:var(--g3-color);
overflow: hidden;
color: var(--bg-color);
text-align: center;
}
.icon b {
font-weight: normal;
display: inline-block;
transform: rotate(-30deg);
line-height: 2.6rem;
}
.icon.JPEG, .icon.PNG, .icon.JPG, .icon.GIF, .icon.SVG, .icon.WEBP {
background: #966;
}
.icon.TXT, .icon.MD {
background: var(--fg-color);
}
.icon.MP4, .icon.MKV, .icon.MP3, .icon.M4A, .icon.WAV, .icon.FLAC, .icon.OGG, .icon.OGV, .icon.AAC, .icon.WEBM {
background: #669;
}
.icon.document {
background: #696;
}
.icon.PDF {
background: #969;
}
.icon.dir {
background: var(--g2-color);
color: var(--fg-color);
}
.icon.dir b {
font-size: 2em;
transform: none;
}
.size {
text-align: right;
}
input[type=button], input[type=submit], .btn {
font-size: 1.2em;
padding: .3em .5em;
margin: .2em .3em;
border: none;
background: var(--g2-color);
border-radius: .2em;
cursor: pointer;
text-decoration: none;
color: var(--fg-color) !important;
font-family: inherit;
}
td input[type=button], td input[type=submit], td .btn {
font-size: 1em;
}
input[type=text], textarea {
font-size: 1.2em;
padding: .3em .5em;
border: none;
background: var(--bg-color);
border-radius: .2em;
width: calc(100% - 1em);
color: var(--fg-color);
}
input:focus, textarea:focus {
box-shadow: 0px 0px 5px var(--active-color);
outline: 1px solid var(--active-color);
}
input[type=button]:hover, input[type=submit]:hover, .btn:hover {
color: var(--active-color);
text-decoration: underline;
background: var(--bg-color);
box-shadow: 0px 0px 5px var(--fg-color);
}
.close {
text-align: right;
margin: 0;
}
.close input {
font-size: .8em;
}
input[type=submit] {
float: right;
}
dialog {
position: fixed;
top: 1em;
right: 1em;
bottom: 1em;
left: 1em;
box-shadow: 0px 0px 5px var(--fg-color);
background: var(--g1-color);
color: var(--fg-color);
border: none;
border-radius: .5em;
}
dialog form div {
clear: both;
margin: 2em 0;
text-align: center;
}
.upload {
margin: 1em 0;
}
#mdp div, #mdp textarea {
width: calc(100% - 1em);
padding: .5em;
font-size: 1em;
height: calc(100% - 1em);
text-align: left;
margin: 0;
}
#md {
overflow: hidden;
overflow-x: auto;
}
#mdp {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: .2em;
background: var(--g1-color);
height: 82vh;
}
dialog.preview {
height: calc(100%);
width: calc(100%);
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0;
border-radius: 0;
background: var(--g1-color);
overflow: hidden;
}
iframe, .md_preview {
overflow: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
border: none;
}
iframe, iframe body, .md_preview {
background-color: #fff;
color: #000;
}
.preview form {
height: calc(100% - 2em);
display: flex;
align-items: center;
justify-content: center;
}
.preview form > div {
width: calc(100vw);
height: 100%;
position: relative;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.preview div video {
max-width: 100%;
max-height: 100%;
}
.md_preview {
width: calc(100vw - 2em);
height: calc(100vh - 2em);
padding: 1em;
text-align: left;
}
.preview .close {
height: 2em;
text-align: center;
font-size: 1em;
display: block;
width: 100%;
margin: 0;
padding: 0;
border-radius: 0;
background: var(--g2-color);
color: var(--fg-color);
box-shadow: 0px 0px 5px var(--g2-color);
}
.preview img {
max-width: 95%;
max-height: 95%;
}
input[name=rename], input[name=paste_name] {
width: 30em;
}
.bg {
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
width: 0;
height: 0;
border: none;
align-items: center;
justify-content: center;
opacity: 0;
display: flex;
}
.loading .bg::after, .spinner span::after {
display: block;
content: " ";
width: 70px;
height: 70px;
border: 5px solid var(--g2-color);
border-radius: 50%;
border-top-color: var(--fg-color);
animation: spin 1s ease-in-out infinite;
filter: none;
}
.loading .bg::before {
display: block;
content: " ";
width: 70px;
height: 70px;
border: 20px solid var(--bg-color);
border-radius: 50%;
background: var(--bg-color);
position: absolute;
}
.spinner {
align-items: center;
justify-content: center;
display: flex;
}
.spinner span::after {
width: 30px;
height: 30px;
}
.loading .bg, .dragging .bg, .dialog .bg {
backdrop-filter: blur(5px);
background: rgba(0, 0, 0, 0.5);
opacity: 1;
width: 100%;
height: 100%;
}
dialog {
transition: all .3s;
}
progress {
height: 2em;
width: 90%;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media screen and (max-width: 800px) {
.upload {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
body {
margin: 0;
font-size: 1em;
}
table {
margin: 2em 0;
width: 100%;
display: flex;
flex-direction: column;
}
table tr {
display: block;
border-top: 5px solid var(--bg-color);
padding: 0;
padding-left: 2em;
position: relative;
text-align: left;
min-height: 2.5em;
}
table td, table th {
border: none;
display: inline-block;
padding: .2em .5em;
}
table td.buttons {
display: block;
width: auto;
text-align: left;
}
td.buttons div {
display: inline-block;
}
table td.thumb {
padding: 0;
width: 2em;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
table th {
display: block;
}
.icon {
font-size: 12px;
height: 100%;
border-radius: 0;
}
.icon:not(.dir) b {
line-height: 3em;
display: block;
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
font-size: 2em;
height: 3em;
position: absolute;
top: 50%;
left: 50%;
}
table th a {
font-size: 1.2em;
}
input[name=rename], input[name=paste_name] {
width: auto;
}
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000;
--fg-color: #fff;
--g1-color: #222;
--g2-color: #555;
--g3-color: #777;
--link-color: #99f;
--visited-color: #ccf;
--active-color: orange;
}
}