mobile-nixos/doc/_support/styles/theme.less

@import "colors";

@aal-font-size: 18px;

// This gives us more leeway for narrower displays.
// We are not restricting zooms, so no issues, and 14px
// equivalent is the default font size anyway.
#screen-xs-max({
	@aal-font-size: 16px;
	html, html>body {font-size: @aal-font-size;}
});

body {
	font-family: "Noto Serif", "DejaVu Serif", serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Open Sans", "DejaVu Sans", sans-serif;
	font-weight: 300;
}

a {
	color: @color-link;
	text-decoration: underline;
	&:hover, &:active {
		outline: 0;
	}
	&:focus, &:hover {
		color: @color-link-active;
		text-decoration: underline;
	}
}

pre {
	background-color: #eee;
	padding: @gutter / 2;
	overflow: auto;
}

table.with-links {
	tbody {
		tr:hover {
			background-color: #eeeeee;
		}

		td {
			position: relative;
		}

		td a:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}

		td:not(:last-child) a:before {
			right: -1px;
		}
	}
}

.device-sidebar {
	background-color: #fff;
	#screen-sm-min({
		float: right;
		width: 33%;
		margin-left: @gutter;
	});
	#screen-sm-only({
		font-size: 80%;;
	});

	border: 1px solid #000;

	& > .content {
		padding: @gutter / 2;

		& > *:last-child {
			&, &.dlist > dl {
				margin-bottom: 0;
			}
		}
	}

	& > .content > .title {
		margin: -@gutter / 2;
		margin-bottom: @gutter / 2;

		background: #000;
		color: #fff;
		padding-left: @gutter/2;
		padding-right: @gutter/2;
		text-align: center;
	}

	margin-bottom: @gutter;

	dl dd > .paragraph:last-child p,
	dl dd > p:last-child {
		margin-bottom: 0;
	}
}

.options-list {
	dt > tt {
		padding: 0;
	}
	& > div > dd {
		border-left: @gutter/2 solid lighten(@color-blue-light, 20%);
		padding-left: @gutter/2;
	}
}