homebrewery/client/homebrew/brewRenderer/brewRenderer.less

@import (multiple, less) 'shared/naturalcrit/styles/reset.less';

.brewRenderer {
	will-change   : transform;
	overflow-y    : scroll;
	padding-block : 30px;

	:where(.pages) {
		margin : 30px 30px;

		&.facing {
			display: grid; 
			grid-template-columns: repeat(2, auto); 
			grid-template-rows: repeat(3, auto); 
			gap: 10px 10px; 
			justify-content: center;
			& .page:first-child {
				// sets first page on 'right' ('recto') of the preview, as if for a Cover page.  
				// todo: add a checkbox to toggle this setting
				grid-column-start: 2; 
			}
		}

		&.flow {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			justify-content: start;
			& .page {
				margin-left: unset;
				margin-right: unset;
			}

		}

		& > :where(.page) {
			width         : 215.9mm;
			height        : 279.4mm;
			margin-right  : auto;
			margin-bottom : 30px;
			margin-left   : auto;
			box-shadow    : 1px 4px 14px #000000;
		}
	}

	&::-webkit-scrollbar {
		width: 20px;

		&:horizontal{
			height: 20px;
			width:auto;
		}

		&-thumb {
			background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
			&:horizontal{
				background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
			}
		}

		&-corner {
			visibility: hidden;
		}
	}
}

.pane { position : relative; }

.pageInfo {
	position         : absolute;
	right            : 17px;
	bottom           : 0;
	z-index          : 1000;
	font-size        : 10px;
	font-weight      : 800;
	color            : white;
	background-color : #333333;
	div {
		display          : inline-block;
		padding          : 8px 10px;
		&:not(:last-child) { border-right : 1px solid #666666; }
	}
}

.ppr_msg {
	position         : absolute;
	bottom           : 0;
	left             : 0px;
	z-index          : 1000;
	padding          : 8px 10px;
	font-size        : 10px;
	font-weight      : 800;
	color            : white;
	background-color : #333333;
}

@media print {
	.toolBar {
		display: none;
	}
	.brewRenderer {
		height: 100%;
		overflow-y: unset;
		.pages {
			margin: 0px;
			&>.page {
				box-shadow: unset;
			}
		}
	}
}