@charset "UTF-8";

#updated-at::before {
	content: "更新:";
	margin-right: 0.5ex;
	color: var(--color-theme);
}

dl#history {
	margin : 0;
	padding: 0;

	dt {
		padding-left: 1.5em;

		&:first-of-type {
			background-image : url("branches-closed.svg");
			background-repeat: no-repeat;
			background-position: left center;
			background-size  : auto 1.5ex;
			cursor: pointer;
		}
		&:not(:first-of-type),
		&:nth-of-type(2) ~ dd {
			display: none;
		}
		&.recent,
		&:nth-of-type(2) ~ dd.recent {
			display: block;
		}
	}

	dd {
		padding-left: 1em;
	}
}

dl#history.all {
	dt:first-of-type {
		background-image : url("branches-open.svg");
	}

	dt,
	dt:nth-of-type(2) ~ dd {
		display: block;
	}
}

/** 画像の拡大表示 **/

figure.popping figcaption::after {
	content: "［クリックで拡大］";
	display: inline-block;
	color: silver;
	font-weight: normal;
}

#popping-image-frame {
	padding: 0;
	background-color: transparent;
	border: none;
	outline: none;
	overflow: visible;
	animation: image-popping;
	animation-duration: 400ms;
	&::backdrop {
		background-color: rgba(0, 0, 0, 0.5);
	}

	img {
		max-width : 100%;
		max-height: calc(100vh - 2rem);
		filter: drop-shadow(1ex 1ex 0.5ex rgba(0, 0, 0, 0.5));
	}

	svg:first-of-type {
		position: fixed;
		top   : 1.5rem;
		right : 1.5rem;
		width : 1.5rem;
		height: 1.5rem;
		color: whitesmoke;
		filter: drop-shadow(0 0 0.4ex rgba(0, 0, 0, 0.8));
		pointer-events: none;
	}
}

@keyframes image-popping {
	0% {opacity: 0;}
	100% {opacity: 1;}
}