mirror of
https://github.com/gmemstr/sliproad.git
synced 2024-09-20 00:21:15 +01:00
d86ed1233f
Implemented file uploading for both the disk and Backblaze providers. Also implements a UI element and frontend logic for doing so from the frontend. Disk will write directly to disk, while the Backblaze provider will attempt to stream the file from memory directly to the POST body. This could introduce some problems down the line, so caching to disk then uploading in the background may need to be implemented. It also performs the final upload using a goroutine so the end client can continue on it's merry way. Backblaze proved a bit tricky to do, and considering switching to using a library for managing Backblaze going forward.
99 lines
2 KiB
CSS
99 lines
2 KiB
CSS
body {
|
|
font-family: sans-serif;
|
|
color: black;
|
|
}
|
|
|
|
.grid-lg, .grid-sm {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
grid-template-rows: repeat(5, 2fr);
|
|
grid-column-gap: 5px;
|
|
grid-row-gap: 5px;
|
|
}
|
|
|
|
.grid-lg a {
|
|
display: flex;
|
|
padding: 10vh;
|
|
justify-content: center;
|
|
background-color: black;
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
transition: background-color 0.5s;
|
|
}
|
|
|
|
.grid-sm a {
|
|
display: flex;
|
|
padding: 2vh;
|
|
justify-content: center;
|
|
background-color: black;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
transition: background-color 0.5s;
|
|
}
|
|
|
|
.grid-lg a:visited, .grid-lg a,
|
|
.grid-sm a:visited, .grid-sm a {
|
|
color: white;
|
|
}
|
|
.grid-lg a:hover,
|
|
.grid-sm a:hover {
|
|
color: white;
|
|
background-color: darkgray;
|
|
transition: background-color 0.5s;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body { background-color: black; color: white; }
|
|
.grid-lg a, .grid-sm a {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
.grid-lg a:visited, .grid-lg a,
|
|
.grid-sm a:visited, .grid-sm a {
|
|
color: black
|
|
}
|
|
.grid-lg a:hover,
|
|
.grid-sm a:hover {
|
|
color: lightgray;
|
|
background-color: darkgray;
|
|
transition: background-color 0.5s;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 700px) {
|
|
.grid-lg, .grid-sm {
|
|
display: block;
|
|
}
|
|
.grid-lg a, .grid-sm a {
|
|
margin: 10px;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1921px) {
|
|
.grid-lg, .grid-sm {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
}
|
|
|
|
input[type="file"] {
|
|
width: 0.1px;
|
|
height: 0.1px;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
input[type="file"] + label {
|
|
font-size: 1.25em;
|
|
font-weight: 700;
|
|
color: white;
|
|
background-color: black;
|
|
display: inline-block;
|
|
}
|
|
|
|
input[type="file"]:focus + label,
|
|
input[type="file"] + label:hover {
|
|
background-color: red;
|
|
} |