Mercurial > hg > mgallery
diff basic.css @ 82:e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
author | Matti Hamalainen <ccr@tnsp.org> |
---|---|
date | Wed, 14 Sep 2016 23:00:04 +0300 |
parents | f2ba5a9f0aa8 |
children | 6558eb187e4b |
line wrap: on
line diff
--- a/basic.css Wed Sep 14 22:50:29 2016 +0300 +++ b/basic.css Wed Sep 14 23:00:04 2016 +0300 @@ -22,7 +22,7 @@ padding: 0.5em; } -#contents h1 { +h1 { font-size: 2em; font-family: helvetica; margin-top: 0; @@ -110,11 +110,6 @@ div.imageBox img, div.imageCtrl img { border: 0.2em solid black; border-radius: 0.3em; - box-shadow: 4px 4px 4px black; -} - -div.imageCtrl { - width: 15%; } div.imageBox a:hover img, div.imageBox a:active img, div.imageBox a:focus img, @@ -122,6 +117,10 @@ border: 0.2em solid white; } +div.galleryEntry div.imageBox img { + box-shadow: 4px 4px 4px black; +} + img.albumIcon { border: 0.2em solid black; border-radius: 0.6em; @@ -132,19 +131,75 @@ border: 0.2em solid white; } -div.imageCBox { - text-align: center; +#imageCBox { + position: relative; +} + +div.imageCtrl { + min-width: 150px; + width: 20%; + position: absolute; + top: 0; + bottom: 2em; + background: rgba(0,0,0,0.35); +} + +div.imageCtrl.next, div.imageCtrl.nextBtm { + right: 0; +} + + +div.imageCtrl.prev, div.imageCtrl.prevBtm { + left: 0; +} + + +div.imageCtrl a { + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; } -div.imageCtrl, div.imageCBox div.imageBox { - display: inline-block; - vertical-align: middle; +div.imageCtrl a img { + position: relative; + display: block; + margin: auto; +} + + +div.imageCtrl.nextBtm, div.imageCtrl.prevBtm { + z-index: 1; +} + +div.imageCtrl.prev, div.imageCtrl.next { + background: rgba(0,0,0,0.35); + opacity: 0; + transition: opacity 0.15s linear; + z-index: 10; } -div.imageCtrl.next { - left: 0; +div.imageCtrl.prev:hover, div.imageCtrl.next:hover { + opacity: 1; } + +#imageImage { + position: relative; + z-index: 5; + max-width: 100%; + max-height: 100%; +} + +div.imageCtrl * img { + position: absolute; + top: 40%; +} + + + div.imageCaption { text-align: center; font-size: 1.5em; @@ -161,13 +216,30 @@ div.infoBox { + position: absolute; + bottom: 3em; + left: 1em; + right: 1em; + height: auto; + min-height: 5em; + background: rgba(0,0,0, 0.5); + text-align: center; margin: 0.5em; padding: 0.5em; border: 0.2em solid white; border-radius: 0.5em; + + opacity: 0; + transition: opacity 0.15s linear; + z-index: 12; } +div.infoBox:hover { + opacity: 1; +} + + span.infoDateTime { display: block; color: white; @@ -180,6 +252,7 @@ * Navigation controls */ div.naviControls { + display: none; font-size: 1.5em; text-align: center; margin: 0.5em;