Mercurial > hg > mgallery
view basic.css @ 142:9589faf2e8a1
Change use_tables default to FALSE.
author | Matti Hamalainen <ccr@tnsp.org> |
---|---|
date | Mon, 04 Sep 2017 14:58:02 +0300 |
parents | c7e8f8b9dd8d |
children | be2e9d5e127d |
line wrap: on
line source
body { color: white; background: #121; font-family: Verdana, Arial, helvetica, sans-serif; font-size: 12px; margin: 0; padding: 0; } a { color: white; } a:hover { text-decoration: none; color: yellow; text-shadow: 1px 1px 2px #000; } #pageContents { padding: 0em; margin: 0em; } h1 { font-size: 1.5em; font-family: helvetica; margin: 0; padding: 0.25em; color: white; text-shadow: 2px 2px 2px #000; background: #787; border-top-left-radius: 0.25em; border-top-right-radius: 0.25em; } #pageInfoHeader { background: #565; margin: 0; padding: 0.25em; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; box-shadow: 0px -4px 4px black; } #pageInfoFooter { background: #565; margin: 0; padding: 0.25em; text-align: right; font-size: 0.75em; text-shadow: 1px 1px 1px black; border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; box-shadow: 0px 5px 4px black; } /* * Albums */ div.albumHeaderText { padding: 0.5em; font-size: 1.25em; } .galleryTable { display: flex; flex-wrap: wrap; align-items: center; width: 100%; background: #454; } div.galleryEntry { min-width: 145px; width: 15em; padding: 1em; text-align: center; } div.galleryEntry img { min-width: 145px; width: 100%; } .albumTable { border-bottom: 1px solid black; } .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 { 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: 2px 2px 4px -2px 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 { position: absolute; min-width: 150px; width: 14%; top: 0; bottom: 0; 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.albumTitle, div.imageCaption { text-align: center; text-shadow: 1px 1px 2px black; padding: 0.5em; } .galleryEntry div.imageCaption { font-size: 1.25em; } div.infoBox { position: absolute; bottom: 0; left: 1em; right: 1em; height: auto; min-height: 5em; background: rgba(0,0,0, 0.5); text-align: center; margin: 0; padding: 0.5em; border: 0.2em solid white; border-radius: 0.5em; opacity: 0; 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; } #naviBreadCrumbs { text-shadow: 1px 1px 1px black; padding: 0.5em; padding-top: 0; font-size: 1.25em; background: #676; box-shadow: 0px 2px 4px -4px black; } #languages { position: absolute; right: 0.5em; top: 0.5em; background: black; border-radius: 0.35em; padding: 0.5em; z-index: 50; } #languages a { display: inline-block; padding: 0.5em; margin: 0.1em; background: white; color: black; border-radius: 0.35em; } @media screen and (min-resolution: 150dpi) { div.albumTitle, div.imageCaption { font-size: 1.5em; } #pageContents { padding: 0; margin: 0; } #languages { position: relative; } #languages a { width: 5em; padding: 1em; text-align: center; } #naviBreadCrumbs { font-size: 1.6em; } h1 { font-size: 1.25em; } } @media screen and (min-resolution: 150dpi) and (orientation: landscape) { body { font-size: 18px; } #pageInfoFooter { display: none; } } @media screen and (min-resolution: 150dpi) and (orientation: portrait) { body { font-size: 25px; } div.galleryEntry { width: 40%; } }