extra.less

*
{
	box-sizing: border-box;
}

body
{
	font: @fontSizeNormal / @lineHeightDefault sans-serif;
	font-family: @fontFamilyUi;
}

p
{
	font: @fontSizeNormal / @lineHeightDefault sans-serif;
	margin: 0;
	margin-bottom: 24px;
}

pre code
{
	margin: 0;
	padding: 5px;

	font-family: @fontFamilyCode;
	font-size: @fontSizeSmall;
	line-height: @lineHeightDefault;
	text-align: left;

	direction: ltr;
	white-space: pre;
	position: relative;

	tab-size: 4;
}

code
{
	font-family: @fontFamilyCode;
	font-size: @fontSizeSmaller;
	color: inherit;
	line-height: @lineHeightDefault;

	margin: 0;
	padding: 1px 3px;
	border: @borderSize solid darken(@codeBlock-backgroundColor, 10%);
	border-radius: @borderRadiusMedium;
	background-color: @codeBlock-backgroundColor;

	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

h1, h2, h3, h4, h5, h6, legend
{
	font-family: @fontFamilyUi;
	line-height: @lineHeightDefault;
}

a
{
	color: @linkColor;
	text-decoration: none;
	cursor: pointer;

	&:visited
	{
		color: @linkColor;
	}

	&:hover
	{
		color: @linkHoverColor;
		text-decoration: underline;
	}
}

input[type]
{
	.m-input();
}

.wy-body-for-nav
{
	.wy-nav-content-wrap
	{
		background: #eeeeee;
	}

	.wy-nav-content
	{
		background: none;

		max-width: none;
		margin: 0 10px;
		padding: 6px 10px;

		div[role=navigation]
		{
			font-size: @fontSizeSmall;
			margin: @paddingMedium 0;

			hr
			{
				display: none;
			}
		}

		div[role=main]
		{
			background: @contentBg;
			color: @textColor;
			border: @borderSize solid;
			border-color: @blockBorderColor;
			border-radius: @borderRadiusMedium;

			.section
			{
				padding: @paddingMedium @paddingLarge;
			}
		}

		.admonition
		{
			.admonition-title
			{
				margin-bottom: 0;
				background-color: transparent;
			}

			&.note
			{
				background: @paletteColor1;
				color: @paletteColor5;

				.admonition-title
				{
					color: @paletteColor5;
				}
			}

			&.warning
			{
				background: #fbf7e2;
				color: #84653d;

				.admonition-title
				{
					color: #84653d;
				}
			}

			&.terminal
			{
				position: relative;
				line-height: 24px;
				margin: 0;
				margin-bottom: 24px;

				.admonition-title
				{
					display: none;
				}

				p
				{
					background: darken(@publicFooterBg, 12%);

					padding: 5px;
					margin: 0;
					border: 0;

					font-family: @fontFamilyCode;
					font-size: @fontSizeSmall;
					line-height: @lineHeightDefault;
					color: white;
				}

				em
				{
					color: #AAA;
					font-style: normal;
				}

				strong
				{
					font-weight: normal;
					background-color: mix(@paletteNeutral5, @paletteNeutral6);
					padding: 2px;
				}
			}

			a
			{
				color: inherit;
				text-decoration: underline;
			}
		}
	}
}

.terminal
{

	.code
	{


		pre
		{
			margin: 0;


			.token
			{
				color: #AAAAAA;
			}
		}
	}
}

.wy-nav-top
{
	background: @offCanvasMenuBg;
	line-height: @lineHeightDefault;
	font-size: @fontSizeLarger;

	a
	{
		color: #ffffff;
	}
}

.wy-nav-side
{
	background: @offCanvasMenuBg;
}

.wy-side-nav-search
{
	background: @offCanvasMenuBg;
	color: @offCanvasMenuColor;
	border-bottom: darken(@offCanvasMenuBg, 4%) 1px solid;

	margin-bottom: 0;

	> a
	{
		color: inherit;
		font-size: 18px;
	}

	input[type=text]
	{
		.m-input();

		color: inherit;
		background-color: rgba(0, 0, 0, 0.12);
		border-color: transparent;

		&:not(:focus)
		{
			.m-placeholder({
				color: inherit;
				opacity: .7;
			});
		}
	}
}

.wy-menu-vertical
{
	.subnav
	{
		a
		{
			padding: @paddingLarge;
		}

		li
		{
			&.current
			{
				> ul
				{
					li
					{
						a
						{
							padding: @paddingLarge;
						}
					}
				}
			}
		}
	}

	ul
	{
		margin-bottom: 20px;
	}

	li
	{
		ul
		{
			li
			{
				a
				{
					color: @offCanvasMenuColor;
					font-size: @fontSizeLarge;
				}
			}
		}

		&.toctree-l1
		{
			border-bottom: @borderSize solid darken(@offCanvasMenuBg, 4%);
		}

		> a,
		> span
		{
			display: block;
			padding: @paddingLarge;
			line-height: @lineHeightDefault;

			color: @offCanvasMenuColor;
			font-size: @fontSizeLarge;
			font-weight: normal;

			&:hover
			{
				background: rgba(0, 0, 0, 0.05);
			}

			&.toctree-l3
			{
				padding-left: 2.0em !important;
			}

			&.toctree-l4
			{
				padding-left: 3.0em !important;
			}
		}

		&.current
		{
			background: none;

			> ul
			{
				background: darken(@offCanvasMenuBg, 4%);
				padding-bottom: 15px;
			}

			a
			{
				color: @offCanvasMenuColor;
				font-size: 13px;

				display: block;
				border: none;

				padding-left: @paddingLarge;
				padding-top: @paddingMedium;
				padding-bottom: @paddingMedium;

				&.current
				{
					background: @offCanvasMenuSelectedBg;
					color: @offCanvasMenuSelectedColor;
					font-weight: normal;

					padding: @paddingLarge;
					font-size: @fontSizeLarge;

					&:hover
					{
						background: @offCanvasMenuSelectedBg;
					}
				}
				
				&:hover
				{
					background: rgba(0, 0, 0, 0.05);
				}

				&.toctree-l4
				{
					padding-left: 1.5em;
				}
			}
		}
	}
}

.rst-versions
{
	font-family: @fontFamilyUi;
	border-top: 0;

	.rst-current-version
	{
		background: darken(@paletteColor5, 12%);

		a
		{
			line-height: @lineHeightDefault;
		}
	}
}

.rst-footer-buttons
{
	.btn
	{
		.m-buttonBase();
		.m-buttonColorVariation(@buttonBg, @buttonColor, @buttonBorder);

		a
		{
			color: inherit;
			text-decoration: none;
		}

		&.btn-neutral
		{
			// block colors
			background-color: @buttonLinkBg !important;
			color: @linkColor !important;
			.m-buttonBorderColorVariation(@colorBorderStructure);

			&:hover,
			&:active,
			&:focus
			{
				text-decoration: none !important;
				background-color: @buttonLinkActiveBg !important;
			}
		}
	}
}

footer
{
	p
	{
		margin-bottom: 0;
	}

	div
	{
		&[role=contentinfo]
		{
			p
			{
				font-size: @fontSizeSmallest;
				text-align: center;
			}

			a
			{
			}
		}
	}
}

@media (max-width: 650px)
{
	.wy-body-for-nav
	{
		.wy-nav-content
		{
			margin: 0;
			padding: 0;

			div[role=navigation]
			{
				padding: 0 @paddingMedium;
			}
		}
	}
}

// ########################## HLJS OVERRIDES #######################

.hljs
{
	.hljs-string,
	.hljs-tag .hljs-value,
	.hljs-phpdoc,
	.hljs-dartdoc,
	.tex .hljs-formula
	{
		color: #a11;
	}

	.hljs-comment,
	.diff .hljs-header,
	.hljs-javadoc,
	.hljs-preprocessor,
	.hljs-pragma,
	.hljs-pi,
	.hljs-doctype,
	.hljs-shebang,
	.hljs-cdata
	{
		color: #a50;
	}

	.hljs-keyword,
	.css .rule .hljs-keyword,
	.hljs-winutils,
	.nginx .hljs-title,
	.hljs-subst,
	.hljs-request,
	.hljs-status
	{
		color: #708;
	}

	.hljs-number,
	.hljs-hexcolor,
	.ruby .hljs-constant
	{
		color: #164;
	}

	.hljs-attribute,
	.hljs-variable,
	.lisp .hljs-body,
	.hljs-name,
	.hljs-built_in
	{
		color: #05a;
	}

	.hljs-regexp
	{
		color: #00c;
	}

	.hljs-symbol,
	.ruby .hljs-symbol .hljs-string,
	.lisp .hljs-keyword,
	.clojure .hljs-keyword,
	.scheme .hljs-keyword,
	.tex .hljs-special,
	.hljs-prompt
	{
		color: #708;
	}

	.hljs-deletion
	{
		color: #d44;
	}

	.hljs-addition
	{
		color: #292;
	}
}

// ########################## COLORS #######################

@paletteAccent1: rgb(255, 244, 229);
@paletteAccent2: rgb(242, 147, 13);
@paletteAccent3: rgb(170, 103, 9);
@paletteColor1: rgb(237, 246, 253);
@paletteColor2: rgb(188, 222, 245);
@paletteColor3: rgb(71, 167, 235);
@paletteColor4: rgb(37, 119, 177);
@paletteColor5: rgb(24, 88, 134);
@paletteNeutral1: rgb(254, 254, 254);
@paletteNeutral2: rgb(246, 246, 246);
@paletteNeutral3: rgb(238, 238, 238);
@paletteNeutral4: rgb(220, 220, 220);
@paletteNeutral5: rgb(140, 140, 140);
@paletteNeutral6: rgb(95, 95, 95);
@paletteNeutral7: rgb(20, 20, 20);
@paletteNeutral8: rgb(0, 0, 0);

// ########################## VARIABLES #######################

@fontFamilyUi: 'Segoe UI', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
@fontFamilyCode: Monaco, Menlo, Consolas, 'Roboto Mono', 'Andale Mono', 'Ubuntu Mono', monospace;

@linkColor: @paletteColor4;
@linkHoverColor: @paletteColor5;

@contentBg: @paletteNeutral1;
@textColor: @paletteNeutral7;

@buttonBg: @paletteColor4;
@buttonColor: @paletteColor1;
@buttonBorder: @paletteColor4;
@buttonLinkBg: @paletteNeutral1;
@buttonLinkActiveBg: @paletteColor1;

@codeBlock-backgroundColor: @paletteNeutral2;

@blockBorderColor: @colorBorderStructureLight @colorBorderStructure @colorBorderStructureHeavy;

@colorBorderStructure: @paletteNeutral4;
@colorBorderStructureFaint: lighten(@colorBorderStructure, 7%);
@colorBorderStructureHeavy: darken(@colorBorderStructure, 4%);
@colorBorderStructureLight: lighten(@colorBorderStructure, 3%);

@inputBg: mix(@paletteNeutral1, @paletteColor1, 60%);
@inputColor: @paletteNeutral8;
@inputFocusBg: @paletteColor1;

@offCanvasMenuBg: @paletteColor5;
@offCanvasMenuColor: @paletteColor2;

@offCanvasMenuSelectedBg: @paletteNeutral2;
@offCanvasMenuSelectedColor: @paletteColor4;

@fontSizeSmallest: 11px;
@fontSizeSmaller: 12px;
@fontSizeSmall: 13px;
@fontSizeNormal: 15px;
@fontSizeLarge: 17px;
@fontSizeLarger: 20px;
@fontSizeLargest: 24px;
@lineHeightDefault: 1.4;

@paddingMedium: 6px;
@paddingLarge: 10px;

@borderSize: 1px;
@borderRadiusSmall: 2px;
@borderRadiusMedium: 4px;

@colorBorderStructure: @paletteNeutral4;
@colorBorderStructureFaint: lighten(@colorBorderStructure, 7%);
@colorBorderStructureHeavy: darken(@colorBorderStructure, 4%);
@colorBorderStructureLight: lighten(@colorBorderStructure, 3%);

@publicFooterBg: @paletteColor5;
@publicFooterColor: @paletteColor2;

// ########################## MIXINS #######################

.m-transition(@duration: 0.2s; @prop: all; @ease: ease)
{
	-webkit-transition: @prop @duration @ease;
	transition: @prop @duration @ease;
}

.m-input()
{
	background-color: @inputBg;
	box-shadow: none;
	.m-transition(0.25s);

	color: @inputColor;
	display: block;
	width: 100%;
	font-size: @fontSizeNormal;
	line-height: @lineHeightDefault;
	padding: @paddingMedium;
	word-wrap: break-word;

	border: @borderSize solid;
	border-color: @colorBorderStructureHeavy @colorBorderStructureLight @colorBorderStructureLight @colorBorderStructureHeavy;
	border-radius: @borderRadiusMedium;

	&:focus
	{
		background-color: @inputFocusBg;
		color: @inputColor;
		outline: 0;
	}
}

.m-placeholder(@rules)
{
	&::-webkit-input-placeholder { @rules(); }
	&::-moz-placeholder { @rules(); }
	&:-moz-placeholder { @rules(); }
	&:-ms-input-placeholder { @rules(); }
}

.m-buttonBase()
{
	display: inline-block;
	text-align: center;
	font-size: @fontSizeSmall;
	text-decoration: none;
	outline: 0;
	cursor: pointer;
	padding: 5px 10px;
	border: @borderSize solid transparent;
	border-radius: @borderRadiusMedium;
	line-height: @lineHeightDefault;
	font-family: @fontFamilyUi;
	box-shadow: none;
	.m-transition(.2s, background-color);
}

.m-buttonColorVariation(@bgColor; @textColor; @borderColor)
{
	background-color: @bgColor;
	color: @textColor;
	.m-buttonBorderColorVariation(@borderColor);

	&:hover,
	&:active,
	&:focus
	{
		background-color: saturate(darken(@bgColor, 4%), 12%);
	}
}

.m-buttonBorderColorVariation(@borderColor)
{
	border-color: lighten(@borderColor, 5%) darken(@borderColor, 5%) darken(@borderColor, 5%) lighten(@borderColor, 5%);
}