From a537064da79b151376c2f3df7826ab7bdaf7ae59 Mon Sep 17 00:00:00 2001
From: ed <s@ocv.me>
Date: Sun, 13 Jun 2021 00:49:28 +0200
Subject: [PATCH] custom-css example to add filetype icons

---
 docs/README.md         | 19 +++++++++---
 docs/browser-icons.css | 68 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 docs/browser-icons.css

diff --git a/docs/README.md b/docs/README.md
index 6a5f8232..8edfe2ec 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,8 +1,19 @@
-## [`minimal-up2k.html`](minimal-up2k.html)
-* save as `.epilogue.html` inside a folder to [simplify the ui](https://user-images.githubusercontent.com/241032/118311195-dd6ca380-b4ef-11eb-86f3-75a3ff2e1332.png)
+# example `.epilogue.html`
+save one of these as `.epilogue.html` inside a folder to customize it:
 
-## [`browser.css`](browser.css)
-* example for `--css-browser`
+* [`minimal-up2k.html`](minimal-up2k.html) will [simplify the upload ui](https://user-images.githubusercontent.com/241032/118311195-dd6ca380-b4ef-11eb-86f3-75a3ff2e1332.png)
+
+
+
+# example browser-css
+point `--css-browser` to one of these by URL:
+
+* [`browser.css`](browser.css) changes the background
+* [`browser-icons.css`](browser-icons.css) adds filetype icons
+
+
+
+# other stuff
 
 ## [`rclone.md`](rclone.md)
 * notes on using rclone as a fuse client/server
diff --git a/docs/browser-icons.css b/docs/browser-icons.css
new file mode 100644
index 00000000..52b1bd2a
--- /dev/null
+++ b/docs/browser-icons.css
@@ -0,0 +1,68 @@
+/* put filetype icons inline with text
+#ggrid>a>span:before,
+#ggrid>a>span.dir:before {
+	display: inline;
+	line-height: 0;
+	font-size: 1.7em;
+	margin: -.7em .1em -.5em -.6em;
+}
+*/
+
+
+/* move folder icons top-left */
+#ggrid>a>span.dir:before {
+	content: initial;
+}
+#ggrid>a[href$="/"]:before {
+	content: '📂';
+    display: block;
+    position: absolute;
+    margin: -.1em -.4em;
+    text-shadow: 0 0 .1em #000;
+    font-size: 2em;
+}
+
+
+/* put filetype icons top-left */
+#ggrid>a:before {
+    display: block;
+    position: absolute;
+    margin: -.1em -.4em;
+    text-shadow: 0 0 .1em #000;
+    font-size: 2em;
+}
+
+
+/* video */
+#ggrid>a:is(
+[href$=".mkv"i],
+[href$=".mp4"i],
+[href$=".webm"i],
+):before {
+    content: '📺';
+}
+
+
+/* audio */
+#ggrid>a:is(
+[href$=".mp3"i],
+[href$=".ogg"i],
+[href$=".opus"i],
+[href$=".flac"i],
+[href$=".m4a"i],
+[href$=".aac"i],
+):before {
+    content: '🎵';
+}
+
+
+/* image */
+#ggrid>a:is(
+[href$=".jpg"i],
+[href$=".jpeg"i],
+[href$=".png"i],
+[href$=".gif"i],
+[href$=".webp"i],
+):before {
+    content: '🎨';
+}