Mercurial > hg > mgallery
view basic.css @ 311:8fd5c850f921
Minor cleanup to XMP/EXIF fetching.
author | Matti Hamalainen <ccr@tnsp.org> |
---|---|
date | Mon, 06 Apr 2020 17:23:02 +0300 |
parents | 2c5ff6aa9845 |
children | 782c1520984e |
line wrap: on
line source
/* * Yet Another Image Gallery * -- Base CSS stylesheet * Programmed and designed by Matti 'ccr' Hamalainen <ccr@tnsp.org> * (C) Copyright 2015-2020 Tecnic Software productions (TNSP) */ html, body { /* Prevent automatic text size adjustment, which happens on some mobile browsers. */ -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { font-size: 0.9em; font-family: Verdana, Arial, helvetica, sans-serif; color: white; background: #454; margin: 0; padding: 0; } a { color: white; } a:hover { text-decoration: none; color: yellow; text-shadow: 1px 1px 2px #000; } .note { color: #fd0; text-shadow: 1px 1px 2px #000; } #galleryPage, #imagePage { padding: 0; margin: 0; } #imagePage { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } 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; } #pageInfoFooter { position: fixed; bottom: 0; left: 0; right: 0; height: 1.5em; background: #565; margin: 0; padding: 0.25em; text-align: right; font-size: 0.75em; text-shadow: 1px 1px 1px black; border-top: 1px solid black; z-index: 12; } div.imagePageHeader { position: fixed; z-index: 12; top: 0; left: 0; right: 0; } #pageInfoButton, #pageUpNaviButton { display: block; text-decoration: none; position: fixed; left: 0.15em; z-index: 30; text-align: center; width: 1em; height: 1em; font-size: 1.1em; background: black; color: white; border: 0.2em solid white; border-radius: 0.3em; padding: 1em; } #pageInfoButton:hover, #pageUpNaviButton:hover { background: white; color: black; } #pageInfoButton { top: 4em; } #pageUpNaviButton { top: 0.25em; } /* * Albums */ div.albumHeaderText { padding: 0.25em; } .galleryTable { align-items: center; justify-content: center; width: 100%; background: #454; margin-bottom: 1em; display: flex; flex-wrap: wrap; } .galleryEntry { width: 12em; padding: 1em; text-align: center; } .galleryEntry img { width: 100%; } .galleryTable + .imageTable { border-top: 2px solid #232; } .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; } /* * */ #pageImageBox { position: absolute; top: 0; bottom: 4.5em; left: 0; right: 0; } .imageBox { text-align: center; } .imageBox img, div.imageCtrl img { border: 0.2em solid black; border-radius: 0.3em; } .imageBox a:hover img, .imageBox a:active img, .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 .imageBox img { box-shadow: 2px 2px 4px -2px black; } img.albumIcon { border: 0.2em solid black; border-radius: 0.4em; box-shadow: 0px 0px 2px black; } a:hover img.albumIcon, a:active img.albumIcon, a:focus img.albumIcon { border: 0.2em solid white; } div.imageCtrl { position: absolute; min-width: 8em; width: 10%; 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; width: 85%; } 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; } #imageImageBox { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } #imageImage { position: relative; z-index: 5; } 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 { } #pageImageCaption { position: absolute; bottom: 1.5em; left: 0; right: 0; height: 2em; background: #350; border-top: 1px solid black; border-bottom: 1px solid black; z-index: 12; } #infoBox { position: fixed; bottom: 0; left: 0.1em; right: 0.1em; height: auto; min-height: 5em; background: rgba(0,0,0, 0.5); text-align: center; margin: 0; padding-top: 0.5em; padding-bottom: 2em; border: 0.2em solid white; border-radius: 0.5em; opacity: 0; z-index: 15; } #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; padding: 0.5em; } span.infoDateTime { display: block; color: white; font-weight: bold; text-shadow: 1px 1px 2px black; } /* * Navigation controls */ .naviBreadCrumbItem { } .naviBreadCrumbCurr { color: #fd0; } .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; } #languages a { display: inline-block; padding: 0.5em; margin: 0.1em; background: white; color: black; border-radius: 0.35em; text-align: center; } /* * Mobile device rules via media queries */ @media screen and (min-resolution: 2dppx) and (min-resolution: 150dpi) { /* * Orientation related */ @media (orientation: landscape) { body { font-size: 1em; } } @media (orientation: portrait) { body { font-size: 1.4em; } .galleryEntry { width: 40%; } #pageInfoHeader, h1 { font-size: 1.25em; } } /* * Common rules */ #pageInfoButton, #pageUpNaviButton { font-size: 1.5em; bottom: 3em; } div.imageCtrl a img { top: 3%; } div.albumTitle, div.imageCaption { font-size: 1.2em; } #languages { position: relative; top: 0; right: 0; left: 0; margin: 0; padding: 0.2em; text-align: right; } #languages a { width: 5em; padding: 1em; } #naviBreadCrumbs { font-size: 1.5em; } div.albumHeaderText { } #pageImageCaption { bottom: 0; height: 2.5em; overflow: hidden; } #imageImage { border: none; border-radius: 0; box-shadow: none; } #imagePage #pageInfoFooter { display: none; } #pageInfoButton, #pageUpNaviButton { top: auto; left: auto; } #pageInfoButton { right: 0.25em; } #pageUpNaviButton { right: 4em; } #infoBox { background: black; display: none; opacity: 1; } } @media screen and (max-width: 400px), screen and (max-height: 400px) { body { font-size: 10px; } #pageInfoHeader { } }