Mercurial > hg > mgallery
view basic.css @ 109:c8cfc6cc161a
Adjust image scaling to be delayed and not being done on each resize event
(for example Firefox fullscreen switching animates by default and triggers
LOTS of resize events, which makes things slow.)
author | Matti Hamalainen <ccr@tnsp.org> |
---|---|
date | Sun, 30 Oct 2016 15:22:03 +0200 |
parents | 7728b586a421 |
children | a987c8081891 |
line wrap: on
line source
body { color: #ded; background: #121; font-family: Verdana, Arial, helvetica, sans-serif; font-size: 65%; } a { color: white; } a:hover { text-decoration: none; color: yellow; text-shadow: 1px 1px 2px #000; } #contents { background: #565; border-radius: 0.5em; padding: 0.5em; } h1 { font-size: 2em; font-family: helvetica; margin-top: 0; margin-bottom: 0.1em; background: #343; padding: 5pt; color: white; text-shadow: 2px 2px 2px #000; border-radius: 8px; } h2,h3 { padding: 5pt; border-radius: 8px; background: #343; color: white; text-shadow: 2px 2px 2px #000; } #pageInfoFooter { margin-top: 0.5em; padding: 0.25em; text-align: right; font-size: 0.75em; text-shadow: 1px 1px 1px black; color: white; } /* * Albums */ div.albumHeaderText { padding: 0.5em; font-size: 1.25em; } .galleryTable { display: flex; flex-wrap: wrap; align-items: center; width: 100%; } .galleryEntry { min-width: 145px; width: 15%; padding: 0.5em; text-align: center; } .albumTable { background: #454; border-radius: 0.5em; border-top: 1px solid #343; border-left: 1px solid #343; border-bottom: 1px solid #787; border-right: 1px solid #787; } .galleryTable a, .galleryTable a:visited { text-decoration: none; color: white; outline: 0; } .galleryTable a:hover, .galleryTable a:active, .galleryTable a:focus { text-shadow: 1px 1px 2px #000; text-decoration: underline; color: #f00; } .galleryTable .galleryEntry { display: inline-block; vertical-align: middle; } /* * */ div.imageBox, div.imageFilename { text-align: center; } div.imageBox img, div.imageCtrl img { border: 0.2em solid black; border-radius: 0.3em; } div.imageBox a:hover img, div.imageBox a:active img, div.imageBox a:focus img, div.imageCtrl a:hover img, div.imageCtrl a:active img, div.imageCtrl a:focus img { border: 0.2em solid white; } .galleryEntry div.imageBox img { box-shadow: 4px 4px 4px black; } img.albumIcon { border: 0.2em solid black; border-radius: 0.6em; box-shadow: 0px 0px 4px black; } a:hover img.albumIcon, a:active img.albumIcon, a:focus img.albumIcon { border: 0.2em solid white; } #imageCBox { position: relative; } div.imageCtrl { min-width: 150px; width: 14%; 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 a img { position: relative; display: block; margin: auto; } div.imageCtrl.nextBtm, div.imageCtrl.prevBtm { z-index: 1; } div.imageCtrl.prev, div.imageCtrl.next { opacity: 0; transition: opacity 0.15s linear; z-index: 10; } 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; text-shadow: 1px 1px 2px black; padding: 0.5em; } .galleryEntry div.imageCaption { text-align: center; font-size: 1em; text-shadow: 1px 1px 2px black; padding: 0.5em; } div.infoBox { position: absolute; bottom: 2em; 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; } #imageLink { position: absolute; left: 0; right: 0; bottom: 0; background: white; color: black; text-shadow: none; text-decoration: none; font-size: 1.25em; } span.infoDateTime { display: block; color: white; font-weight: bold; text-shadow: 1px 1px 2px black; } /* * Navigation controls */ .naviBreadCrumbItem { } .naviBreadCrumbCurr { color: red; } .naviBreadCrumbSep:before { content: " → "; color: #0f0; font-weight: bold; font-size: 1.5em; } div.naviBreadCrumbs { text-shadow: 1px 1px 1px black; padding: 0.5em; padding-top: 0; border-radius: 0.3em; font-size: 1.2em; background: #454; border-top: 1px solid #343; border-left: 1px solid #343; border-bottom: 1px solid #787; border-right: 1px solid #787; } #languages { position: absolute; right: 1.5em; top: 2em; background: black; border: 2px solid rgba(255,255,255,0.2); border-radius: 0.35em; padding: 0.35em; z-index: 50; }