/*
	CCGallery.css - stylesheet for the ccgallery project
	Copyright 2026, Jason Baker (jason@onejasonforsale.com)
	Github for this project: https://github.com/codercowboy/ccgallery
*/

* { margin:0; padding:0; color:#545454; font-family:'Courier New', monospace; }

BODY { position:fixed; width:calc(100vw); height:calc(100vh); background-color:gray; overflow:hidden; }

A { color:white; text-decoration:none; }
A:hover { color:grey; text-decoration:none; }

/* git hub link on the ccGallery menu popup */
A.ccGalleryGithubLink IMG { width:30px; height:30px; }
A.ccGalleryGithubLink:hover IMG { width:30px; height:30px; opacity:0.5; }

/* the container for the gallery, this is in the index.html file */
#ccGallery { position:relative; width:calc(100vw); height:calc(100vh); }

/* this container is dynamically generated, it wraps the gallery images */
#ccGalleryContainer { position:fixed; width:100%; height:100%; background-color:white; z-index:1; overflow:hidden; }
#ccGalleryContainer IMG { margin:2px; position:absolute; }

/* dynamically generated child of 'gallery' div, 
   loading spinner that's shown when big images are being loaded */
#ccGalleryPreloader { z-index:100; width:32px; height:32px; position:absolute; opacity:0.0; }

/* dynamically generated child of 'gallery' div, 
   a small overlay on the big image if specified in config */
#ccGalleryPhotoOverlay { z-index:110; opacity:0.0; position:absolute; margin:2px; }
#ccGalleryPhotoOverlay .footer { background:linear-gradient(to right,rgba(0,0,0,0), rgba(0,0,0,0.5));
	width:calc(100% - 10px); text-align:right; padding:5px; }

/* dynamically generated child of 'gallery' div, 
   the menu button div in the bottom right corner of the screen */
#ccGalleryMenuButton { z-index:1000; background-color:black; color:white; padding:0px 15px; padding-bottom:5px; border-radius:5px; 
	font-size:2rem; position:fixed; bottom:5%; right:5%; }

/* dynamically generated child of 'gallery' div, 
   the menu window that lists albums */
#menuListWindowBackground { position:absolute; top:0; left:0; width:100%; height:100%; background-color:black; }	
#ccGalleryMenuWindow { background-color:black; color:white; position:absolute; min-width:150px; 
	border-radius:3px; padding:2rem 3rem; }
#ccGalleryMenuWindow H1 { color:grey; padding:10px; font-size:2rem; text-align:center; }
#ccGalleryMenuWindow A { display:block; text-align:center; width:calc(100% - 20px); font-size:small; margin:0.75rem; 
	font-size:1.5rem; }

@media (max-width:641px) {
	#ccGalleryContainer { margin:0; }
}