omakase/views/static/styles.css

:root {
	--main-white: #f7f7f7;
	--almost-white: #cfcfcf;
	--main-shadow: #0000006b;
	--sly-gray: #292929;
	--haughty-gray: #464646;
	--corny-red: #a70000;
	--picky-magenta: #690060;
	--deep-blue: #000077;
	--darker-gray: #262626;
	--silver-lining-white: #5f5f5f;
	--main-margin: 62px;
}

* {
	margin: 0;
	font-size-adjust: ex-height 0.53;
	box-sizing: border-box;
}

.page {
	box-sizing: border-box;
	position: absolute;
	height: 100%;
	margin: 0 auto 0 auto;
}

.hidden {
	display: none !important;
}

#pages-container {
	flex-grow: 1;
	display: flex;
	justify-content: center;
}

html,
body {
	margin: 0;
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	color: white;
	background-color: var(--sly-gray);
}

#reader nav {
	margin: 10px;
	position: absolute;
	z-index: 1;
	display: flex;
	gap: 10px;
	padding: 0 8px 0 8px;
	background-color: var(--main-white);
	box-shadow: 1px 1px 17px 0px var(--main-shadow);
	border-radius: 3px;
	color: black;
	font-family: monospace;
}

#controls {
	margin: auto 0 auto 0;
	display: flex;
	gap: 5px;

	&>button {
		border-radius: 2px;
		border: 0;
		background-color: var(--main-white);
		box-shadow: 0px 0px 1px 1px rgb(from var(--sly-gray) r g b / 0.34);
	}
}

.navigate {
	position: absolute;
	height: 100%;
	width: 120px;

	&#left {
		left: 0;
	}

	&#right {
		right: 0;
	}
}










#index nav {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--silver-lining-white);
	padding: 5px;
}

#index #content {
	width: 70vw;
	margin: auto;
	padding: auto;
}

.container {
	background-color: var(--darker-gray);
	border: 1px solid var(--silver-lining-white);
	box-shadow: black 1px 1px 1px 1px;
	border-radius: 2px;
	padding: 20px;
}

.top {
	display: flex;
	margin-bottom: 50px;
}

div#search-bar {
	display: block;
	width: auto;
	flex: 1;
	margin: var(--main-margin);
	margin-left: 0;
	margin-top: 31px;

	& input {
		width: 100%;
		border-radius: 7px;
		padding: 8px 10px;
		outline: none;
		display: flex;
		align-items: center;
		justify-content: center;
		vertical-align: unset;
		position: relative;
		margin: 0;
		cursor: pointer;
		border: 0.1rem solid var(--haughty-gray);
		background: var(--darker-gray);
		color: white;
		-webkit-transition: all 0.1s ease;
		transition: all 0.1s ease;

		&:hover {
			border-color: #275efe;
		}

		&:focus {
			box-shadow: 0 0 0 2px rgba(39, 94, 254, 0.3);
			border-color: #275efe;
		}

		&:disabled {
			background: #f6f8ff;
			cursor: not-allowed;
			opacity: 0.9;
			border-color: #bbc1e1;
		}
	}
}

#index > header {
	width: min-content;
	padding: 20px;
	font-family: sans-serif;
	/* margin: auto; */
	/* margin-left: auto; */
	/* margin-top: 50px; */
	/* margin-right: 100px; */

	& #omakase {
		writing-mode: vertical-rl;
		text-orientation: mixed;
		text-align: right;
		margin-left: auto;

		& h2 {
			margin: 0;
		}

		& a {
			color: white;
			font-size: x-large;
			font-weight: 600;
		}
	}

	& #stats {
		text-align: right;
		text-wrap: nowrap;

		&>p {
			margin: 0;
		}
	}
}

footer {
	width: 100%;
	/* position: absolute; */
	/* bottom: 0; */
	text-align: center;
	font-size: small;
	opacity: 0.4;
}

/* footer { */
/*     font-size: ; */
/* } */


.name {
	display: flex;
	align-items: center;
	padding-left: 7px;
	padding-right: 7px;
	line-height: 1.42857143;
	font-size: 15px;
}

.tag,
.caption {
	font-family: sans-serif;
	font-weight: 900;
	color: white;
	text-decoration-line: none;
	margin: 2px;
	border-radius: 3px 3px;
}

.tag {
	display: inline-flex;
	color: var(--almost-white);
	text-decoration-line: none;
	padding: 0.13em;
	background-color: var(--main-shadow);

	&>span:first-child {
		font-family: monospace;
		font-weight: 900;
		border-radius: 3px 0 0 3px;
	}


	&>span:last-child {
		border-radius: 0 3px 3px 0;
	}
}

.tag:hover {
	filter: brightness(1.3);
}

.tag:active {
	filter: brightness(0.6);
}

.any {
	background-color: var(--corny-red);
}

.male {
	background-color: var(--deep-blue);
}

.female {
	background-color: var(--picky-magenta);
}

.cover {
	display: inline-block;
	vertical-align: top;
	width: 11%;
}

.caption {
	overflow: hidden;
	background-color: var(--haughty-gray);
	padding: 3px;
}

img {
	filter: blur(30px);
}

#index img {
	width: 100%;
}

.thumbnail,
.cover {
	/* width: 148px; */
	height: auto;
	opacity: 0.93;
}

#index #center {
	& #controls {
		width: calc(min-content / 2);
		height: min-content;
		margin-bottom: calc(var(--main-margin) / 2);
		position: sticky;
		top: 0;
		z-index: 10;

		& .page-control {
			cursor: pointer;
			background-color: unset;
			margin: unset;
			border-radius: 3px;
			color: white;
			border: 1px solid var(--silver-lining-white);
			margin: 5px;
			padding: 3px 10px 3px 10px;
			font-weight: 700;
		}
	}

	& #results {
		/* display: grid; */
		grid-template-columns: repeat(5, 1fr);
		width: 65%;

		@media (min-width: 1200px) {
			grid-template-columns: repeat(6, 1fr);
		}
	}

	& #inspector {
		position: sticky;
		top: 0;

		& .float {
			float: right;
			height: 100vh;
			overflow-y: scroll;
			scrollbar-width: none;
			max-width: 35%;
			font:
				bold 18px/21px Helvetica,
				Arial,
				sans-serif;


			& #image-wrapper {
				position: relative;
				width: 100%;
				padding-top: 95vh;
				overflow: hidden;
			}
			& #image-wrapper img {
				position: absolute;
				top: 0;
				left: 0;
				max-height: 95vh;
				max-width: 100%;
				object-fit: cover;
				/* width: auto; */
				/* height: auto; */
			}

			& #inspector-image-placeholder {
				width: 100%;
				height: 95vh;
				background-color: black;
			}

			& h1 {
				font-size: xx-large;
				font-weight: 700;
				margin-top: 10px;
				font-size: x-large;
			}

			& h2 {
				opacity: 0.37;
				font-size: large;
			}

			& div:last-child {
				margin-bottom: 100%;
			}
		}
	}
}