diff --git a/docs/browser-icons.css b/docs/browser-icons.css index 33a44889..68e0604d 100644 --- a/docs/browser-icons.css +++ b/docs/browser-icons.css @@ -1,4 +1,7 @@ -/* video */ +/* video, alternative 1: + top-left icon, just like the other formats +======================================================================= + #ggrid>a:is( [href$=".mkv"i], [href$=".mp4"i], @@ -6,6 +9,40 @@ ):before { content: '📺'; } +*/ + + + +/* video, alternative 2: + play-icon in the middle of the thumbnail +======================================================================= +*/ +#ggrid>a:is( +[href$=".mkv"i], +[href$=".mp4"i], +[href$=".webm"i], +) { + position: relative; + overflow: hidden; +} +#ggrid>a:is( +[href$=".mkv"i], +[href$=".mp4"i], +[href$=".webm"i], +):before { + content: '▶'; + opacity: .8; + margin: 0; + padding: 1em .5em 1em .7em; + border-radius: 9em; + line-height: 0; + color: #fff; + text-shadow: none; + background: rgba(0, 0, 0, 0.7); + left: calc(50% - 1em); + top: calc(50% - 1.4em); +} + /* audio */ @@ -21,6 +58,7 @@ } + /* image */ #ggrid>a:is( [href$=".jpg"i], diff --git a/docs/notes.sh b/docs/notes.sh index 29dda774..889ee1ec 100644 --- a/docs/notes.sh +++ b/docs/notes.sh @@ -130,6 +130,9 @@ sqlite3 .hist/up2k.db 'select * from mt where k="fgsfds" or k="t:mtp"' | tee /de for ((f=420;f<1200;f++)); do sz=$(ffmpeg -y -f lavfi -i sine=frequency=$f:duration=2 -vf volume=0.1 -ac 1 -ar 44100 -f s16le /dev/shm/a.wav 2>/dev/null; base64 -w0