homebrewery/client/homebrew/pages/basePages/listPage/listPage.less

@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
@import '@sharedStyles/colors.less';

.noColumns() {
	-webkit-column-width: auto;
	-moz-column-width: auto;
	column-width: auto;
	-webkit-column-count: auto;
	-moz-column-count: auto;
	column-count: auto;
	column-fill: auto;
	-webkit-column-gap: normal;
	-moz-column-gap: normal;
	column-gap: normal;
	height: auto;
	min-height: 279.4mm;
	margin: 20px auto;
	contain: unset;
}
.listPage {
	.content {
		z-index: 1;
		padding: clamp(20px, 5vh, 200px) 10vw;
		.noBrews {
			margin: 10px 0px;
			font-size: 1.3em;
			font-style: italic;
		}
		.brewCollection {
			width: fit-content;

			h1 {
				margin-bottom: 20px;
				font-size: 25px;
				color: #dddddd;

				&.active::before,
				&.inactive::before {
					padding-right: 0.5em;
					font-family: 'Font Awesome 6 Free';
					font-size: 0.6cm;
					font-weight: 900;
				}
				&.active {
					color: white;
				}
				&.active::before {
					content: '\f107';
				}
				&.inactive::before {
					content: '\f105';
				}
			}
			h1:hover {
				cursor: pointer;
			}

			.brewGroup {
				&.grid {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					gap: 20px;
					min-width: 200px;
				}

				&.list {
					display: flex;
					flex-direction: column;
					gap: 2px;
				}
				&.card {
					display: flex;
					flex-wrap: wrap;
					column-gap: 40px;
					justify-content: center;

					h1 {
						position: absolute;
					}
				}
			}
		}
	}

	.listPageNav {
		position: relative;
		width: 100%;
		height: fit-content;
		display: flex;
		flex-wrap: wrap;
		align-items:center;
		justify-content: center;
		background: #555;
		column-gap: 20px;
		row-gap: 10px;
		border-top: 1px solid #666;
		border-bottom: 1px solid #666;
		font-family: 'Open Sans', sans-serif;
		color: white;
		row-rule: 1px solid #666;

		> div {
			width: fit-content;
			padding-inline: 10px;
			height:30px;
		}

		.sort-container {
			z-index: 1;
			display: flex;
			flex-wrap: wrap;
			row-gap: 5px;
			column-gap: 15px;
			align-items: baseline;
			justify-content: center;

			text-align: center;

			h6 {
				font-size: 11px;
				font-weight: bold;
				text-transform: uppercase;
			}
			.sort-option {
				display: flex;
				align-items: center;
				height: 100%;
				padding: 0 8px;
				color: #cccccc;

				&:hover {
					background-color: #444444;
				}

				&.active {
					font-weight: bold;
					color: #dddddd;
					background-color: #333333;

					button {
						height: 100%;
						font-weight: 800;
						color: white;
						& + .sortDir {
							padding-left: 5px;
						}
					}
				}
			}

			button {
				padding: 0;
				font-size: 11px;
				font-weight: normal;
				color: #cccccc;
				text-transform: uppercase;
				background-color: transparent;
			}
		}

		.filter-option {
			display: grid;
			place-items: center;
			font-size: 11px;
			background-color: transparent !important;
			i {
				padding-right: 5px;
			}
		}
		.tags-container {
			display: flex;
			flex-wrap: wrap;
			row-gap: 5px;
			column-gap: 15px;
			align-items: center;
			justify-content: center;
			height: 30px;
			span {
				padding: 3px;
				font-family: 'Open Sans', sans-serif;
				font-size: 11px;
				font-weight: bold;
				color: #dfdfdf;
				cursor: pointer;
				border: 1px solid;
				border-radius: 3px;
				&::before {
					margin-right: 3px;
					font-family: 'Font Awesome 6 Free';
					font-size: 12px;
				}
				&::after {
					margin-left: 3px;
					font-family: 'Font Awesome 6 Free';
					font-size: 12px;
					content: '\f00d';
				}
				&.type {
					background-color: #008000;
					border-color: #00a000;
					&::before {
						content: '\f0ad';
					}
				}
				&.group {
					background-color: #505050;
					border-color: #000000;
					&::before {
						content: '\f500';
					}
				}
				&.meta {
					background-color: #000080;
					border-color: #0000a0;
					&::before {
						content: '\f05a';
					}
				}
				&.system {
					background-color: #800000;
					border-color: #a00000;
					&::before {
						content: '\f518';
					}
				}
			}
		}
		.layout-container {
			z-index: 1;
			display: flex;
			flex-wrap: wrap;
			row-gap: 5px;
			column-gap: 15px;
			align-items: center;
			justify-content: center;
			text-align: center;

			input[type='radio'] {
				display: none;
			}

			i {
				transition: color 0.2s;
			}

			input:checked + i {
				color: @blue;
			}
		}
	}
}