jketreno/ketr.photos
1
0
Fork 0
Code Issues 1 Activity

Fade actions in/out on thumbnail and lightbox

Browse Source 
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
James Ketr 2018-10-14 16:46:03 -07:00
parent b348d1578f
commit fb206ee1e4
2 changed files with 5 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/elements/photo-lightbox.html
View File

@ -73,6 +73,7 @@
right: 0px; right: 0px;
font-size: 0.6em; font-size: 0.6em;
pointer-events: none; pointer-events: none;
transition: opacity 0.5s ease-in-out;
} }
#actions { #actions {
@ -83,6 +84,7 @@
font-size: 0.6em; font-size: 0.6em;
color: #ddd; color: #ddd;
pointer-events: none; pointer-events: none;
transition: opacity 0.5s ease-in-out;
} }
:host([active]) #info, :host([active]) #info,

3
frontend/elements/photo-thumbnail.html
View File

@ -46,6 +46,7 @@
right: 0px; right: 0px;
font-size: 0.6em; font-size: 0.6em;
pointer-events: none; pointer-events: none;
transition: opacity 0.25s ease-in-out;
} }
#actions { #actions {
@ -56,10 +57,12 @@
font-size: 0.6em; font-size: 0.6em;
color: #ddd; color: #ddd;
pointer-events: none; pointer-events: none;
transition: opacity 0.25s ease-in-out;
} }
:host(:hover) #info, :host(:hover) #info,
:host(:hover) #actions { :host(:hover) #actions {
transition: opacity 0.25s ease-in-out;
opacity: 1; opacity: 1;
pointer-events: all; pointer-events: all;
} }