Mercurial > hg > mgallery
view basic.css @ 118:6739c52e110c
Change naviBreadCrumbs to CSS id instead of class.
author | Matti Hamalainen <ccr@tnsp.org> |
---|---|
date | Wed, 10 May 2017 11:36:52 +0300 |
parents | 7964b6a27f8a |
children | d1ed6213f6d2 |
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: 10%; 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; } #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.5em; z-index: 50; } #languages a { padding: 0.5em; }