Module:CineMol/styles.css

.cinemol-container {
	width: fit-content
}


.cinemol-license-img {
	margin: 0 5px;
	float: right;
}

.cinemol-lightbox-caption {
	display: none;
}

.cinemol-lightbox-controls {
	display: none;
}

/* lightbox mode */
.cinemol-inner-container.calculator-value-true {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 6; /* This is ineffective */
	width: 100%;
	height: calc( 100lvh + 60px); /* on phone need to cover url bar that shows up and goes away as well */
	color: var(--color-base,#202122);
	background-color: var(--background-color-base,#fff);
	padding-top: calc( 3.5em + 60px ); /* We can't overlap the top bar. Timeless on low width is bad for this. Maybe need skin specific styles */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* monobook and old vector sidebar can't be overlaid */
body.skin-monobook .cinemol-inner-container.calculator-value-true, 
body.skin-vector:not(.skin-vector-2022) .cinemol-inner-container.calculator-value-true {
	width: calc( 100% - 12.25em );
	left: 12.25em;
}

.cinemol-inner-container.calculator-value-true .cinemol-inner {
	flex: 1;
	min-height: 0%;
	max-height: 100%;
	display: flex; /* verically center image */
	flex-direction: column;
}

.cinemol-inner-container.calculator-value-true .cinemol-lightbox-caption {
	display: block;
	padding: 1em;
	text-align: center; /* going back and forth if left or center looks better */
}

.cinemol-inner-container.calculator-value-true  img.cinemol-img {
	width: 100%;
	max-height: 100%;
	margin: auto 3px; /* vertically center */
}

.cinemol-inner-container.calculator-field-live img.cinemol-img {
	/* maybe should be a hand instead? */
	cursor: zoom-in;
}
.cinemol-inner-container.calculator-field-live.calculator-value-true img.cinemol-img {
	cursor: auto;
}


.cinemol-inner-container.calculator-value-true .cinemol-lightbox-controls {
	display: block;
	position: absolute;
	right: 5px;
	font-weight: bold;
	top: calc( 3.5em + 60px );

}

.cinemol-inner-container.calculator-value-true .cinemol-lightbox-controls button {
	/* appearance: none */
	border: none;
	color: var(--color-base,#202122);
	/*Maybe there should be a background, but everything looks ugly */
	background: transparent;
	font-size: 250%;
	cursor: pointer; /* not sure why this isn't default */
	margin: 1em;
	padding: 0;
}