diff --git a/css/grid-n-view.css b/css/grid-n-view.css index 65dfdad..05e0596 100644 --- a/css/grid-n-view.css +++ b/css/grid-n-view.css @@ -201,13 +201,17 @@ body { text-align: center; - color: var(--lightbox-text-color); - background: var(--lightbox-background-color); + color: var(--gallery-text-color); + background: var(--gallery-background-color); } /*------------------------------------------------------ Lightbox ---*/ +.gallery .lightbox { + color: var(--lightbox-text-color); + background: var(--lightbox-background-color); +} .gallery .lightbox.show-caption:before { content: attr(caption); position: absolute; @@ -259,12 +263,20 @@ body { font-size: var(--lightbox-button-size); line-height: var(--lightbox-button-size); filter: saturate(0); + opacity: 0.1; } .gallery .button:hover { opacity: 1; filter: saturate(1); - color: black; + color: var(--gallery-text-color); + + /* XXX HACK: might be better to use SVG for this... */ + text-shadow: + 0.02em 0.02em 0em var(--gallery-background-color), + -0.02em -0.02em 0em var(--gallery-background-color), + -0.02em 0.02em 0em var(--gallery-background-color), + 0.02em -0.02em 0em var(--gallery-background-color); } /* controls: close... */ .gallery .button.close:after { diff --git a/grid-n-view.html b/grid-n-view.html index 6721841..f930e29 100644 --- a/grid-n-view.html +++ b/grid-n-view.html @@ -51,23 +51,26 @@ var restoreScroll = function(){
-- Views: - -Gallery- -Details- -Lightbox-- toolbar -- floating over image (gallery/lightbox/details/...) - - select / deselect - - delete / clear deleted +-Views: Gallery />Details / Lightbox+- Details: populate fields +- toolbar -- floating over gallery + - lightbox (current) + - info (current) + - select / deselect (current / all) + - delete / clear deleted (current / all) - crop - load -- Lightbox: indicators: +- toolbar -- floating over image (gallery/lightbox/details/...) + - lightbox + - info + - select / deselect + - delete +- Lightbox: hover indicators: - start/end (a-la ImageGrid.Viewer??) - next/prev -count-selection-Gallery: Adaptable image justification in grid- -Make more accurate -- align right side to pixel...- - Can we make this passive??? (i.e. CSS only... likely not as flexible...) -Gallery: Spacial navigation (up/down/left/right)- auto focus image iff the gallery is visible - handle focus / tabindex (???) @@ -122,6 +125,8 @@ var restoreScroll = function(){![]()