@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 contains thumbnails and teleprompter notes. It can be scrolled */

#content
{
	height: 100%;
}

#teleprompter
{
	/* Enable vertical scrolling */
	
	height: 100%;
	overflow-y: auto;
	
	/* Layout */
	
/*	padding: 20px;*/
}

/* LIST LAYOUT */

#teleprompter.list .slide
{
	display: flex;
	flex-direction: row;
	gap: 20px;
	vertical-align: text-top;
	padding-bottom: 30px;			/* Row spacing */
}

#teleprompter.list .slide .notes
{
	flex: 1; 						/* This allows the second column to take the remaining space */
}

#teleprompter.list .thumbnail
{
	margin-top: 4px;
}

/* GRID LAYOUT */

#teleprompter.grid
{
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
	justify-content: center;
}

#teleprompter.grid .slide
{
	width: var(--thumbnail-size);
}

/* THUMBNAIL */

#teleprompter .slide .thumbnail
{
	aspect-ratio: 16/9; 			/* Default aspect ratio will be overridden in generated HTML */
	box-sizing: border-box;
}

.thumbnail							/* For some reason I don't understand the following don't work if I include them in the previous group */
{
	width: var(--thumbnail-size);	/* Width of thumbnail column */
}

#teleprompter .slide .thumbnail img
{
	width: 100%;
	object-fit: contain;

	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 white;
}

#teleprompter .spacer				/* Space at end of teleprompter creates a nicer scrolling UX */
{
	width: 100%;
	height: 100px;
}
