style.css 2.35 KB
.upload {
	float: left;
	width: 400px;
	padding: 1em;
	border-radius: .5em;
	border: 1px solid #ddd;
	background: #f7f7f7;
}

.upload ul {
	padding-left: 5px;
}

.upload > div > button {
	float: right;
}

.upload > ul {
	max-height: 15em;
	width: calc(100% - 10px);
	overflow-y: auto;
	overflow-x: hidden;
	background: #ffffff;
	border-radius: .35em;
	border: 2px solid #bbb;
	cursor: default;
}

.upload > ul > li {
	display: flex;
	border: 1px solid black;
	width: fit-content;
	margin-bottom: .15em;
}

.upload > ul > li:last-child {
	margin-bottom: 0;
}

.upload > ul > li > ul {
	display: table;
}

.upload > ul > li > ul > li {
	display: table-row;
}

.upload > ul > li > ul > li > span {
	display: table-cell;
}

.upload > ul > li > ul > li > span:first-child:after {
	content: ":";
	margin-right: .15em;
}

.markdown {
	float: left;
	padding: 1em;
	border-radius: .5em;
	border: 1px solid #ddd;
	background: #f7f7f7;
}

.markdown p {
	text-align: justify;
	text-indent: .5em;
	margin-block: .5em;
}

.markdown > div:first-child {
	position: fixed;
	width: inherit;
	z-index: 10;
}

.markdown > div:first-child > div {
	position: relative;
	left: .5em;
	width: inherit;
}

.markdown > div:first-child > pre {
	white-space: pre-wrap;
	height: 15em;
	width: calc(100% - 10px);
	overflow-y: auto;
	overflow-x: hidden;
	background: #ffffff;
	border-radius: .35em;
	border: 2px solid #bbb;
	margin: 2px 0px;
	opacity: .95;
}

.markdown > div:first-child > div > div {
	display: inline;
}

.markdown > div:first-child > div ul {
	height: 15em;
	list-style-type: none;
	margin: 2px 0px;
	overflow-y: auto;
	padding-left: 0px;
	position: absolute;
	scroll-behavior: auto;
	top: 1.8em;
}

.markdown blockquote {
	border-left: 5px solid #ccc;
	margin: .5em 10px;
	padding: .5em 10px;
}

.markdown blockquote p {
	text-align: left;
	text-indent: 0;
	margin-block: 0;
}

.markdown .footnote-definition > * {
	display: inline;
}

@keyframes spinner {
	0% {
		transform: translate3d(-50%, -50%, 0) rotate(0deg);
	}
	100% {
		transform: translate3d(-50%, -50%, 0) rotate(360deg);
	}
}

.spin::before {
	animation: 1.5s linear infinite spinner;
	animation-play-state: inherit;
	border: solid 5px #cfd0d1;
	border-bottom-color: #1c87c9;
	border-radius: 50%;
	content: "";
	height: 1.5em;
	width: 1.5em;
	position: absolute;
	top: 10%;
	left: 1.5em;
	transform: translate3d(-50%, -50%, 0);
	will-change: transform;
}