diff options
| author | Přemysl Eric Janouch <p@janouch.name> | 2023-12-16 19:15:32 +0100 |
|---|---|---|
| committer | Přemysl Eric Janouch <p@janouch.name> | 2023-12-16 19:15:32 +0100 |
| commit | 4e694d07851c6d6f9d0650b610a085939ed0938d (patch) | |
| tree | 6ecb6a693e9d3fdf3b4bf4654e90387213c497c1 /public/style.css | |
| parent | 11f637e43c120e528a94cb3073883187a8d696b2 (diff) | |
| download | gallery-4e694d07851c6d6f9d0650b610a085939ed0938d.tar.gz gallery-4e694d07851c6d6f9d0650b610a085939ed0938d.tar.xz gallery-4e694d07851c6d6f9d0650b610a085939ed0938d.zip | |
Style the web at all
Diffstat (limited to 'public/style.css')
| -rw-r--r-- | public/style.css | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/public/style.css b/public/style.css index e69de29..7daa69b 100644 --- a/public/style.css +++ b/public/style.css @@ -0,0 +1,40 @@ +body { margin: 0; padding: 0; font-family: sans-serif; } + +.container { display: flex; flex-direction: column; + height: 100vh; width: 100vw; overflow: hidden; } +.body { display: flex; flex-grow: 1; overflow: hidden; } + +.header { padding: .25rem .5rem; background: #aaa; color: white; + border-bottom: 1px solid #444; } + +ul.sidebar { margin: 0; padding: 0; background: #eee; + border-right: 1px solid #ccc; min-width: 10rem; overflow: auto; } +ul.sidebar li { margin: 0; padding: 0; } +ul.sidebar li a { padding: .25rem .5rem; padding-left: 30px; + color: #000; display: block; text-decoration: none; white-space: nowrap; } +ul.sidebar li a:hover { background: #ddd; } + +ul.sidebar li.parent a { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 14 10 8 16 14' stroke='%23888' stroke-width='4' fill='none' /%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; background-position: 5px center; } + +ul.sidebar li.selected a { font-weight: bold; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='6' fill='%23888' /%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; background-position: 5px center; } + +ul.sidebar li.child a { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 6 10 12 16 6' stroke='%23888' stroke-width='4' fill='none' /%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; background-position: 5px center; } + +.browser { overflow: auto; display: flex; flex-wrap: wrap; + align-content: flex-start; justify-content: center; align-items: center; + gap: 10px; padding: 9px; } +.browser:focus-visible { outline: 0; box-shadow: 0; } +.browser img { display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); } + +.view { overflow: hidden; display: flex; + justify-content: center; align-items: center; } +.view img { max-width: 100%; max-height: 100%; } + +.viewbar { padding: .25rem .5rem; background: #eee; + border-left: 1px solid #ccc; min-width: 20rem; overflow: auto; } |