@import "common.css";
@import "popup.css";

body, html
{
	/* Disable scroll bouncing - to make sure that thumbnail and toolbar stay absolutele fixed */

	height: 100%;
	margin: 0;
	overflow: hidden;
    overscroll-behavior: none;
    
    /* Make scrollbar stand out against black background */
    
	color-scheme: dark;
	
    /* Only allow vertical scrolling touch gesture - this disables many others, thus improving event responsiveness, since we do not have to wait for double taps. */
    
	touch-action: pan-y;
}

/* The #content div fill the whole window. Its children are #current-slide and #teleprompter which are arranged according to device orientation. See media queries below. */

.thumbnail
{
	width: 100%;					/* 100% of #current-slide container */
	aspect-ratio: 1/1; 				/* Default aspect ratio will be overridden in generated HTML */
	overflow: hidden; 				/* Crops the image if different aspect ratio */
}

.thumbnail img
{
	width: 100%;
	object-fit: contain; 			/* This ensures the image covers the container without distorting the aspect ratio */

	box-sizing: border-box;			/* Make sure that border is inside the thumbnail and doesn't get cropped by parent div - needs height to work correctly */
	border: 1px solid gray;
}

#teleprompter
{
	/* Enable vertical scrolling */
	
	overflow-y: auto;
	color-scheme: dark;

	/* Add some padding for better scrolling experience */
	
	padding-top: 20px;
	padding-bottom: 100px;

	flex: 1;						/* Makes sure that notes fill the remaining space */
}

#teleprompter .slide:not(.no-notes)
{
	margin-bottom: 20px;
}


/* Vertical mobile phones */

@media (max-width: 767px) and (orientation: portrait)
{
	#content
	{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;		/* Teleprompter follows below #current-slide thumbnail */
	}

	#current-slide
	{
		width: 100%;				/* Full width thumbnail */
	}
}

/* Horizontal mobile phones */

@media (max-width: 767px) and (orientation: landscape)
{
	#content
	{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;		/* Teleprompter to the right of #current-slide thumbnail */
	}

	#current-slide					
	{
		width: 33%;
		padding-right: 20px;		/* gap between columns */
		padding-top: 15px;			/* Make sure the thumbnail has a gap to Safari address bar */
	}
}

