opensim-helpers/css/guide.css

/**
 * css/guide.css
 *
 * @package    magicoli/opensim-helpers
 * @subpackage    magicoli/opensim-helpers/guide
 *
 * @author     Gudule Lapointe <gudule@speculoos.world>
 * @link       https://github.com/magicoli/opensim-helpers
 * @license    AGPLv3
 */

:root {
	--guide-color-green: #61c909;
	--guide-color-orange: #ff7f00;
	--guide-color-text: white;
}
body {
}

body.destination-guide {
	padding: 0;
	margin: 0;
	/* background: var(--guide-color-orange); */
	height: 100vh; /* Set the height of the body to the full viewport height */
	display: flex;
	justify-content: center; /* Center the #guide div horizontally */
	align-items: center; /* Center #guide both horizontally and vertically */
	overflow: hidden; /* Hide any content that overflows outside #guide */
}

#guide {
	font-family: "Liberation Sans", Arial, Roboto, "Helvetica", sans-serif;
	background: var(--guide-color-orange);
	color: var(--guide-color-text);
	padding: 10px;
	width: 100%; /* Allow #guide to fill the entire width of the viewport */
	height: 100vh; /* Set the height of #guide to the full viewport height */
	overflow: hidden; /* Hide any content that overflows outside #guide */
	display: flex; /* Add this line to use flexbox layout */
	flex-direction: column; /* Add this line to set the flex direction to column */
}

#guide .header {
	padding-top: 10px;
}
#guide a {
	color: var(--guide-color-text);
	text-decoration: none;
}
#guide .list > a {
	height: 160px;
}

#guide .item:hover,
#guide a:hover {
	color: black;
}

#guide .item:hover {
	background: var(--guide-color-green);
	/* transform: scale(0.95); /* Slight scale-up effect on hover */ */
}

#guide h1, #guide h2 {
	margin: 0;
	font-size: 1.25rem;
	padding: 0 10px 5px;
	display: inline-block;
}

#guide .disclaimer {
	float: right;
	font-size: 0.85rem;
	opacity: 0.7;
}

#guide a.back {
	font-size: 0.9rem;
}

#guide .list {
	display: flex;
	overflow-x: auto; /* Enable horizontal scrolling */
	overflow-y: hidden; /* Hide vertical scrolling */
	flex-grow: 1; /* Allow .list to grow and fill the remaining height */
	padding-bottom: 10px;
}

#guide .item,
#guide .error {
	padding: 10px;
	box-sizing: border-box;
}

#guide .item {
	width: 160px;
	transition: background-color 0.3s ease; /* Add a smooth transition effect for background color */
}

#guide img.thumbnail {
	width: 140px;
	height: 105px;
	object-fit: cover; /* Crop the image to fit without stretching */
}

#guide .name {
	font-size: 0.85rem;
	font-weight: bold;
	white-space: nowrap; /* Prevent the name from wrapping */
	overflow: hidden; /* Hide overflowing content */
	text-overflow: ellipsis; /* Add an ellipsis (...) to indicate content is hidden */
}

#guide .data {
	font-size: 0.8rem;
}