commit 9d17df7b55992683065201f908cc191d0e8fb346
parent 3f2bfbfd6272d86d3737f3d6f886d76426573833
Author: breadcat <breadcat@users.noreply.github.com>
Date: Tue, 30 Sep 2025 16:54:09 +0100
Latest CSS and file browser HTML
Diffstat:
2 files changed, 23 insertions(+), 12 deletions(-)
diff --git a/static/style.css b/static/style.css
@@ -1,23 +1,26 @@
/* main body styling */
body,div#search-container form input{background:#1a1a1a;color:#cfcfcf;font-family:sans-serif;margin:0}
a{color:#add8e6;text-decoration:none}
-a:hover{text-decoration:underline}
/* nav menu */
-nav{display:flex;border-bottom:1px solid gray;height:50px}
+nav ul{flex:1 1 auto;list-style:none}
+nav {display:flex; border-bottom:1px solid gray;height:50px;margin:0;padding:0; position: sticky; top: 0; z-index: 100; background-color:#1a1a1a}
+nav ul {margin: 0; padding: 0}
+nav ul li{border-right:1px solid gray}
nav ul li a,nav ul li strong{padding:15px;display:block}
nav ul li a:hover{background-color:#2a2a2a}
-nav ul li ul li a,nav>ul>li>a{display:block;padding:.5em 1em;text-decoration:none}
-nav ul li ul li a{color:#add8e6;background:#1a1a1a}
+nav ul li ul li a,nav>ul>li>a{display:block}
nav ul li ul li ul li a{white-space:nowrap}
nav ul li ul li ul{top:0;left:100%;display:none}
nav ul li ul li,nav>ul>li{position:relative}
nav ul li ul li:hover>ul,nav ul li:hover>ul{display:block}
nav ul li ul{display:none;position:absolute;top:100%;left:0;z-index:1000;padding:0}
-nav ul li{border-right:1px solid gray}
-nav ul,nav ul li{margin:0;padding:0}
-nav ul{flex:1 1 auto;list-style:none}
+nav ul.sub-menu, nav ul.sub-menu li ul {border: 1px solid gray}
+nav ul.sub-menu li {border-right: none}
nav ul.sub-menu li a:first-letter{text-transform:capitalize}
+nav ul.sub-menu li a{color:#add8e6;background:#1a1a1a; min-width: 110px}
+nav ul.sub-menu li ul li a{min-width: 170px}
+nav ul.sub-menu li a:hover{background:#2a2a2a}
/* search bar */
div#search-container form {border-left:1px solid gray}
@@ -39,3 +42,11 @@ button#edit-description-btn {background: #007cba; color: white; padding: 6px 12p
textarea#description-textarea {width: 100%; max-width: 600px; padding: 8px; border: 1px solid #ccc; border-radius: 3px; font-family: inherit; resize: vertical;}
input.description-save {background: #28a745; color: white; padding: 8px 16px; border: none; border-radius: 3px; cursor: pointer;}
button.description-cancel {background: #6c757d; color: white; padding: 8px 16px; border: none; border-radius: 3px; cursor: pointer;}
+button.text-button {border:none; background:none; color:#add8e6; cursor:pointer; padding:0; margin-left:2px;}
+div.file-container {display: flex}
+div.file-sidebar {flex: 0 0 auto; min-width: 15em}
+span.file-tag-category,div.file-sidebar details ul li a {text-transform:capitalize}
+
+details > summary {list-style: none; cursor: pointer; }
+details > summary::before {content: "[+]"; display: inline-block; width: 2ch; margin-right: 0.5ch;}
+details[open] > summary::before {content: "[-]";}
diff --git a/templates/file.html b/templates/file.html
@@ -10,9 +10,9 @@
<ul>
{{range $k, $vs := .Data.File.Tags}}
<li>
- {{$k}}:
+ <span class="file-tag-category">{{$k}}:</span><br>
{{range $i, $v := $vs}}
- {{if $i}}, {{end}}
+ {{if $i}}<br> {{end}}
<form method="post" action="/file/{{$.Data.File.ID}}/tag/{{$k}}/{{$v}}/delete" style="display:inline;"><button class="text-button" type="submit">[x]</button></form>
<a href="/tag/{{$k}}/{{$v}}">{{$v}}</a>
{{end}}
@@ -33,14 +33,14 @@
{{end}}
</datalist>
Value: <input type="text" name="value"><br>
- <button type="submit">Add Tag</button>
+ <button class="text-button" type="submit">[ Add Tag ]</button>
</form>
</details>
<details>
<summary>Raw URL</summary>
<input id="raw-url" value="http://{{.IP}}:{{.Port}}/uploads/{{.Data.EscapedFilename}}"><br>
- <button id="copy-btn" style="margin-top: 5px;">Copy to Clipboard</button>
+ <button class="text-button" id="copy-btn" style="margin-top: 5px;">[ Copy ]</button>
<span id="copy-status" style="margin-left: 10px;"></span>
<script src="/static/copy-link.js" defer></script>
</details>
@@ -68,7 +68,7 @@
{{if hasAnySuffix .Data.File.Filename ".jpg" ".jpeg" ".png" ".gif" ".webp"}}
<a href="/uploads/{{.Data.EscapedFilename}}" target="_blank"><img src="/uploads/{{.Data.EscapedFilename}}" style="max-width:400px"></a><br>
- {{else if hasAnySuffix .Data.File.Filename ".mp4" ".webm" ".mov" ".m4v"}}
+ {{else if hasAnySuffix .Data.File.Filename ".mp4" ".webm" ".mov" ".m4v" ".avi"}}
<video id="videoPlayer" controls loop muted width="600">
<source src="/uploads/{{.Data.EscapedFilename}}">
</video><br>
