diff options
Diffstat (limited to 'public/style.css')
| -rw-r--r-- | public/style.css | 30 |
1 files changed, 21 insertions, 9 deletions
diff --git a/public/style.css b/public/style.css index 0276e43..0df44d9 100644 --- a/public/style.css +++ b/public/style.css @@ -1,22 +1,33 @@ body { margin: 0; padding: 0; font-family: sans-serif; } - a { color: inherit; } .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; - display: flex; justify-content: space-between; align-items: baseline; - column-gap: .5rem; } +.body { display: flex; flex-grow: 1; overflow: hidden; position: relative; } +.body::after { content: ''; position: absolute; pointer-events: none; + top: 0; left: 0; right: 0; height: .75rem; + background: linear-gradient(#fff, rgb(255 255 255 / 0%)); } + +.header { color: #000; background: #aaa linear-gradient(#888, #999); + display: flex; justify-content: space-between; column-gap: .5rem; } +.header nav { display: flex; margin: 0 .5rem; align-items: end; } +.header nav a { display: block; text-decoration: none; + background: #bbb linear-gradient(#bbb, #ccc); + margin: .25rem 0 0 -1px; padding: .25rem .75rem; + border: 1px solid #888; border-radius: .5rem .5rem 0 0; } +.header nav a.active { font-weight: bold; border-bottom: 1px solid #fff; + background: #fff linear-gradient(#ddd, #fff); } +.header nav a.active, .header nav a:hover { padding-bottom: .4rem; } +.header .activity { padding: .25rem .5rem; align-self: center; color: #fff; } + +ul.sidebar { margin: 0; padding: .5rem 0; background: #eee; + min-width: 10rem; overflow: auto; border-right: 1px solid #ccc; } -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; display: block; text-decoration: none; white-space: nowrap; } -ul.sidebar li a:hover { background: #ddd; } +ul.sidebar li a:hover { background-color: rgb(0 0 0 / 10%); } 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"); @@ -43,6 +54,7 @@ img.thumbnail { display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); .view { display: flex; flex-grow: 1; overflow: hidden; justify-content: center; align-items: center; } .view img { max-width: 100%; max-height: 100%; object-fit: contain; } +.view img { z-index: 1; } .viewbar { padding: .25rem .5rem; background: #eee; border-left: 1px solid #ccc; min-width: 20rem; overflow: auto; } |