view-image-info-content.css

/* 
  View Image Info Reborn - Content CSS
  Copyright 2021. Jefferson "jscher2000" Scher. License: MPL-2.0.
  Styles for in-page overlay
  version 1.0 - MVP
  version 1.4 - tweaks
  version 1.9.1 - tweaks
  version 2.1 - bug fix for centering of overlay
*/

/* Color scheme */
@media (prefers-color-scheme: light) {
	.viewimageinforeborn {
		--info-text-color: #000;
		--info-back-color: #f4f4f4;
		--link-color: #00f;
	}
	.viewimageinforeborn a {
		font-color: #00f;
	}
}
@media (prefers-color-scheme: dark) {
	.viewimageinforeborn {
		--info-text-color: #f4f4f4;
		--info-back-color: #333;
		--link-color: #0ff;
	}
}
/* Overrides from settings */
.viewimageinforeborn[colorscheme="light"]{
	--info-text-color: #000;
	--info-back-color: #f4f4f4;
	--link-color: #00f;
	--info-font-size: 16px;
}
.viewimageinforeborn[colorscheme="dark"]{
	--info-text-color: #f4f4f4;
	--info-back-color: #333;
	--link-color: #0ff;
}
.viewimageinforeborn {
	min-width: 25em;
	border: 1px solid #888 !important;
	margin: 1px !important;
	padding: 0 !important;
	position: absolute !important; 
	z-index: 10000 !important;
	color: var(--info-text-color) !important;
	background-color: var(--info-back-color) !important;
	font-family: sans-serif !important;
	font-size: var(--info-font-size) !important;
	line-height: 1.2em;
	user-select: text !important;
}
.viewimageinforeborn th, .viewimageinforeborn td {
	padding: 2px 4px !important;
	text-align: left;
	vertical-align: top;
	font-weight: normal !important;
	color: var(--info-text-color) !important;
	background-color: var(--info-back-color) !important;
	font-size: var(--info-font-size) !important;
}
.viewimageinforeborn th {
	white-space: nowrap;
}
.viewimageinforeborn a {
	color: var(--link-color);
}
.viewimageinforeborn .closebtn {
	cursor: pointer;
	margin-right: -2px;
	padding: 0 6px;
}
@media screen and (min-width: 900px){
	.viewimageinforeborn[standalone]{
		width: 800px;
		left: 50%;
		margin-left: -400px !important;
	}
}
@media screen and (max-width: 899px){
	.viewimageinforeborn[standalone]{
		width: 90vw;
		left: 50%;
		margin-left: calc((90vw * 0.5 * -1) + 20px) !important;
	}
}