wikijs/client/scss/layout/_content.scss

#root {
	padding-top: 52px;
}

#page-type-view > section {
	transition: background-color .5s ease;

	&.blurred {
		background-color: $grey-lighter;
	}

}

.sd-menus {

	width: 300px;

}

.menu {
	.menu-list a, .menu-nav a {
		display: flex;
		align-items: center;
	}

	.menu-list .icon {
		margin-right: 8px
	}
}

.section.is-small {
	padding: 20px 20px;
}

.mkcontent {

	h1 {
		border-bottom: 1px dotted $blue;
		padding-bottom: 4px;
		font-weight: 400;
		color: desaturate($blue, 20%);
	}

	h2 {
		border-bottom: 1px dotted $grey-light;
		padding-bottom: 4px;
		font-weight: 400;
		color: desaturate($purple, 20%);
	}

	a.toc-anchor {
		font-size: 80%;
		color: $blue;
		border-bottom: none;

		&:visited {
			color: $purple !important;
		}

	}

	a.external-link {
		position: relative;
		padding-left: 20px;

		&:before {
			content: "\f08e";
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-decoration: inherit;
			color: $grey;
			font-size: 14px;
			position: absolute;
			top: 0;
			left: 0;
		}

	}

	pre {
		padding: 0;
		font-family: $family-monospace;

		> code {
			box-shadow: inset 0 0 5px 0 $grey-light;
			border-radius: 5px;
		}

	}

	pre + p {
		padding-top: 1em;
	}

	img.right {
		float:right;
	}

	img.pagelogo {
		float: right;
		margin-top: -50px;
		max-width: 200px;
		background-color: #FFF;
	}

	strong {
		color: $grey-dark;
	}

	.twa {
		font-size: 120%;
	}

	table thead th {
		background-color: $blue;
		color: #FFF;
		border-color: #FFF;
		border-bottom-color: $blue;
		border-top-color: $blue;

		&:first-child {
			border-left-color: $blue;
		}

		&:last-child {
			border-right-color: $blue;
		}

	}

}

.content a:not(.button):visited {
  color: $turquoise;
  font-weight: 500;
}

code {
	font-weight: 500;
	color: $purple;
}

p code {
	padding: 2px 5px;
	border-radius: 4px;
}

.modal {
	align-items: flex-start;
}
.modal-background {
	animation: 0.4s ease fadeIn;
}
.modal-content {
	animation: 0.4s ease slideInDown;	
}

.card-header {
	background-color: $turquoise;

	&.is-warning {
		background-color: $orange;
	}

	&.is-danger {
		background-color: $red;
	}

	&.is-info {
		background-color: $purple;
	}

}

.card-header-title {
	color: #FFF;
	font-weight: 400;
	font-size: 16px;
	padding: 10px 20px;
}

.modal-content .card-footer-item {
	font-weight: 500;
}

.modal-content .card-footer-item.featured {
	animation: flash 4s ease 0 infinite;
}