webdav.css

:root {
	--bg-color: #fff;
	--fg-color: #000;
	--g1-color: #f5f7f7;
	--g2-color: #ccd8d6;
	--g3-color: #7c9696;
	--link-color: #2e3c3a;
	--visited-color: #2e3c3a;
	--active-color: #c47508;
}

* {
	margin: 0;
	padding: 0;
}

body {
	text-align: center;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: var(--bg-color);
	color: var(--fg-color);
}

a:link {
	color: var(--link-color);
	text-decoration: none;
}

a:visited {
	color: var(--visited-color);
}

a:hover {
	color: var(--active-color);
	text-decoration: underline;
}

table {
	margin: 0 auto;
	border-collapse: collapse;
	width: 100%;
}

thead td {
	height: 2em;
	vertical-align: bottom;
}

thead button {
	width: 100%;
	border: none;
	text-align: inherit;
	font: inherit;
	background: none;
	cursor: pointer;
	font-size: .9em;
	color: #999;
	padding: .4em;
}

thead .selected button::after {
	content: "🠇";
	margin-left: .5em;
}

thead .selected.desc button::after {
	content: "🠅";
}

td.name, tbody th, td.date {
	text-align: left;
}

tbody tr:has(.check input:checked) {
	background: #fdefdc;
}

tbody th, tbody td {
	padding: 0 .5em;
	text-align: left;
	border-top: 1px solid var(--g2-color);
	border-bottom: 1px solid var(--g2-color);
	vertical-align: middle;
}

tbody th {
	word-break: break-all;
	font-weight: normal;
}

tbody th a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1em;
}

tbody th img {
	width: 2em;
	height: 2em;
	border-radius: .2em;
}

tbody th .icon {
	width: 2em;
	height: 2em;
	border-radius: .2em;
	overflow: hidden;
	background: no-repeat center center;
	background-size: 100%;
	position: relative;
}

th .icon b {
	font-size: 7pt;
	font-weight: normal;
	text-decoration: none;
	display: inline-block;
	background: #eee;
	border-radius: .3em;
	padding: 0 .2em;
	color: #2e3c3a;
	position: absolute;
	bottom: 0;
	right: 0;
	border: 1px solid #2e3c3a;
}

th .icon b:empty {
	display: none;
}

td.check {
	width: 1.5em;
	text-align: center;
}

td.check input {
	cursor: pointer;
	width: 1.5em;
	height: 1.5em;
	border: 2px solid #999;
	border-radius: .2em;
	background: none;
	appearance: none;
	outline: 0;
}

td.check input:checked {
	box-shadow: 0px 0px 5px darkorange;
	background: no-repeat center center;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 12l5 5L20 7"/></svg>');
	background-size: contain;
}

td.buttons {
	text-align: right;
	width: 5em;
}

td.buttons div {
	display: flex;
	flex-direction: row-reverse;
}

tbody tr:nth-child(even) {
	background: var(--g1-color);
}

tbody th .icon {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="%232e3c3a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2"/></g></svg>');
}

th .icon.JPEG, th .icon.PNG, th .icon.JPG, th .icon.GIF, th .icon.SVG, th .icon.WEBP {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="%232e3c3a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M15 8h.01M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z"/><path d="m3 16l5-5c.928-.893 2.072-.893 3 0l5 5"/><path d="m14 14l1-1c.928-.893 2.072-.893 3 0l3 3"/></g></svg>');
}

th .icon.TXT, th .icon.MD, .icon.mktext {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="%232e3c3a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2M9 9h1m-1 4h6m-6 4h6"/></g></svg>');
}

th .icon.MP4, th .icon.MKV, th .icon.MP3, th .icon.M4A, th .icon.WAV, th .icon.FLAC, th .icon.OGG, th .icon.OGV, th .icon.AAC, th .icon.WEBM {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="%232e3c3a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 10l4.553-2.276A1 1 0 0 1 21 8.618v6.764a1 1 0 0 1-1.447.894L15 14zM3 8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>');
}

.icon.document {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="%23829a9a"><path d="m12 2l.117.007a1 1 0 0 1 .876.876L13 3v4l.005.15a2 2 0 0 0 1.838 1.844L15 9h4l.117.007a1 1 0 0 1 .876.876L20 10v9a3 3 0 0 1-2.824 2.995L17 22H7a3 3 0 0 1-2.995-2.824L4 19V5a3 3 0 0 1 2.824-2.995L7 2z"/><path d="M19 7h-4l-.001-4.001z"/></g></svg>');
}

.icon.document b {
	position: relative;
	background: none;
	border: none;
	color: #fff;
	width: 100%;
	height: 100%;
	padding: 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.icon.ODS {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="%23309048" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2"/><path d="M8 11h8v7H8zm0 4h8m-5-4v7"/></g></svg>');
}

.icon.ODT {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="%230063b1" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2M9 9h1m-1 4h6m-6 4h6"/></g></svg>');
}

.icon.ODP {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="%23ed5a33" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12V8m6 4v-2m-3 2v-1M3 4h18M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4m-8 12v4m-3 0h6"/></svg>');
}

.icon.ODG {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="%23ed8733" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2m-7-7h.01M14 14h.01"/><path d="M10 17a3.5 3.5 0 0 0 4 0"/></g></svg>');
}

.icon.ODP b, .icon.ODS b, .icon.ODG b, .icon.ODT b {
	display: none;
}


.dir th .icon, .icon.mkdir {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="%232e3c3a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2"/></svg>');
}

.parent th .icon {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="%232e3c3a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 11l-4 4l4 4m-4-4h11a4 4 0 0 0 0-8h-1"/></svg>');
}

.dir th .icon b, .parent th .icon b {
	display: none;
}

td.size {
	text-align: right;
	font-size: .9em;
	color: #666;
}

td.date {
	font-size: .9em;
	color: #666;
	min-width: 9em;
}

input[type=button], input[type=submit], .btn, a.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);
	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-color: var(--bg-color);
	box-shadow: 0px 0px 5px var(--fg-color);
}

.close {
	text-align: right;
	margin: 0;
}

input.close {
	font-size: .8em;
}

.toolbar {
	margin: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.toolbar label {
	padding: .5em;
	background: var(--bg-color);
	cursor: pointer;
	border-radius: .5em;
}

.toolbar .save {
	background: DarkSlateBlue;
	color: #fff;
}

.toolbar .status {
	width: 10em;
	display: block;
}

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;
}

.toolbar {
	display: flex;
	justify-content: flex-end;
	margin: .5em;
	margin-bottom: 0;
	position: relative;
}

.toolbar .selected, .toolbar .paste {
	margin-right: auto;
	display: none;
}

.toolbar .paste div {
	box-shadow: 0px 0px 10px darkorange;
	border-radius: .5em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.toolbar .paste div strong {
	display: block;
	padding: .5em;
	color: #666;
}

body:has(tbody .check input:checked) .toolbar .selected {
	display: block;
}

.toolbar input {
	overflow: visible;
	text-indent: 0;
	width: auto;
	height: auto;
	background-position: .2em center;
	padding: .3em .5em;
	padding-left: 2em;
	background-size: 1.3em;
}

.menu {
	position: absolute;
	right: 0;
	top: 2.5em;
	background: var(--bg-color);
	padding: .5em;
	border-radius: .5em;
	display: flex;
	flex-direction: column;
	box-shadow: 0px 0px 10px var(--g3-color);
}

.menu h5 {
	font-weight: normal;
	margin: .5em 0;
	color: #666;
}

.menu input {
	text-align: left;
	font-size: 1em;
}

#mdp div, #mdp textarea {
	width: calc(100% - 1em);
	padding: .5em;
	font-size: 1em;
	height: calc(100% - 1em);
	text-align: left;
	margin: 0;
}

#mdp .md_preview {
	overflow: hidden;
	overflow-x: auto;
}

#mdp {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: .2em;
	background: var(--g1-color);
	height: 90vh;
}

.md_preview img, .md_preview video, .md_preview iframe, .md_preview embed, .md_preview object {
	max-width: 100%;
}

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, dialog.preview .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%;
}

dialog.preview .md_preview {
	width: calc(100vw - 2em);
	height: calc(100vh - 4em);
	padding: 1em;
	text-align: left;
	padding-bottom: 2em;
}

.md_preview ul, .md_preview ol, .md_preview p, .md_preview blockquote, .md_preview pre,
.md_preview h1, .md_preview h2, .md_preview h3, .md_preview h4, .md_preview h5, .md_preview h6  {
	margin: 1rem 0;
}

.md_preview ul, .md_preview ol, .md_preview blockquote {
	margin-left: 2em;
}

.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;
	margin: auto;
	padding: 1em;
}

dialog:has(#mdp) {
	margin: 0;
	padding: .5em;
	border-radius: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
}

progress {
	height: 2em;
	width: 90%;
}

input.icon, .buttons a[download] {
	background: #e0e6e6 no-repeat center center;
	background-size: contain;
	width: 1.8em;
	height: 1.8em;
	padding: 0;
	overflow: hidden;
	text-indent: 100em;
	display: inline-block;
}

.icon.delete {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="%232e3c3a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/></svg>');
}

.icon.rename {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path fill="%232e3c3a" fill-rule="evenodd" d="M405.334 64v21.333h-42.667v341.333h42.667V448l-42.667-.001V448h-21.333l-.001-.001l-42.666.001v-21.333l42.666-.001V85.333h-42.666V64zm64 64v256H384v-42.667h42.667V170.667H384V128zM320 128v256H42.667V128zm-98.133 25.6H192v145.067c0 13.333-.833 21.666-1.458 29.687l-.082 1.068l-.079 1.067c-.296 4.09-.514 8.207-.514 12.978h29.867v-19.2a42.67 42.67 0 0 0 38.4 21.333a45.65 45.65 0 0 0 36.266-17.067a99.63 99.63 0 0 0 19.2-53.333c0-40.533-21.333-68.267-53.333-68.267a48.43 48.43 0 0 0-38.4 19.2zm-59.733 72.533a54.61 54.61 0 0 0-44.8-17.066a102.2 102.2 0 0 0-49.067 10.666l8.533 21.334a96.2 96.2 0 0 1 36.267-10.667a27.093 27.093 0 0 1 29.867 29.867v2.133H121.6a89.2 89.2 0 0 0-38.4 6.4a35.63 35.63 0 0 0-21.333 36.267a38.187 38.187 0 0 0 42.667 38.4a50.35 50.35 0 0 0 40.533-17.067v14.933H172.8a172.4 172.4 0 0 1-2.133-34.133v-38.4a66.77 66.77 0 0 0-8.533-42.667m-21.334 51.2v25.6a37.12 37.12 0 0 1-29.866 19.2a17.92 17.92 0 0 1-19.2-19.2c0-14.933 10.666-23.466 36.266-25.6zM251.734 230.4c17.066 0 29.866 17.067 29.866 44.8S270.934 320 253.867 320a35.84 35.84 0 0 1-32-21.333v-46.934a40.32 40.32 0 0 1 29.867-21.333"/></svg>');
}

.icon.cut {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17a3 3 0 1 0 6 0a3 3 0 1 0-6 0m10 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0m-4.85-2.15L18 4M6 4l8.85 10.85"/></svg>');
}

.icon.copy {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M19 19H8q-.825 0-1.412-.587T6 17V3q0-.825.588-1.412T8 1h7l6 6v10q0 .825-.587 1.413T19 19M14 8V3H8v14h11V8zM4 23q-.825 0-1.412-.587T2 21V7h2v14h11v2zM8 3v5zv14z"/></svg>');
}

.icon.paste {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M5 5h2v3h10V5h2v6h2V5c0-1.1-.9-2-2-2h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h5v-2H5zm7-2c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1"/><path fill="currentColor" d="m18.01 13l-1.42 1.41l1.58 1.58H12v2h6.17l-1.58 1.59l1.42 1.41l3.99-4z"/></svg>');
}

.icon.cancel {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6.793 6.793a1 1 0 0 1 1.414 0L12 10.586l3.793-3.793a1 1 0 1 1 1.414 1.414L13.414 12l3.793 3.793a1 1 0 0 1-1.414 1.414L12 13.414l-3.793 3.793a1 1 0 0 1-1.414-1.414L10.586 12L6.793 8.207a1 1 0 0 1 0-1.414" clip-rule="evenodd"/></svg>');
}

.buttons a[download], input.download {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="%232e3c3a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5l5-5m-5-7v12"/></svg>');
}

.icon.edit {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="%232e3c3a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 20h4L18.5 9.5a2.828 2.828 0 1 0-4-4L4 16zm9.5-13.5l4 4"/></svg>');
}

.icon.mk {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="%232e3c3a" d="M12 21q-.425 0-.712-.288T11 20v-7H4q-.425 0-.712-.288T3 12t.288-.712T4 11h7V4q0-.425.288-.712T12 3t.713.288T13 4v7h7q.425 0 .713.288T21 12t-.288.713T20 13h-7v7q0 .425-.288.713T12 21"/></svg>');
}

.icon.upload {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="%232e3c3a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 9l5-5l5 5m-5-5v12"/></svg>');
}

@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;
	}

	.toolbar {
		flex-wrap: wrap;
		justify-content: center;
		flex-direction: row;
		font-size: .9em;
	}

	.toolbar .selected {
		margin: 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 1em;
		background: var(--bg-color);
		box-shadow: 0px 0px 2px 5px var(--g3-color);
	}

	table {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	table tbody tr {
		display: grid;
		grid-template-columns: 3rem 1fr .3fr;
		grid-template-areas:
			"name name check"
			"size date buttons";
		padding: 0;
	}

	table tbody td, table tbody th {
		border: none;
		display: block;
		padding: .2em .5em;
		width: unset;
	}

	table tbody th {
		grid-area: name;
	}

	table tbody td.check {
		grid-area: check;
		text-align: right;
		width: unset;
	}

	table tbody td.buttons {
		grid-area: buttons;
		width: unset;
	}

	table tbody  td.date {
		grid-area: date;
		display: inline-block;
		min-width: unset;
	}

	table tbody td.size {
		grid-area: size;
		font-size: .8em;
		width: 3rem;
		overflow: hidden;
		text-align: center;
	}

	table th a {
		font-size: 1.2em;
		gap: .5em;
	}

	table thead tr {
		display: block;
		text-align: left;
	}

	table thead tr td {
		display: inline-block;
		vertical-align: top;
	}

	table thead td.check {
		float: right;
		margin-right: .4em;
	}

	table thead button {
		font-size: 1rem;
	}

	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;
	}
}