luci/applications/luci-app-dockerman/luasrc/view/dockerman/overview.htm

<style>
	/*!
	Pure v1.0.1
	Copyright 2013 Yahoo!
	Licensed under the BSD License.
	https://github.com/pure-css/pure/blob/master/LICENSE.md
	*/
	.pure-g {
		letter-spacing: -.31em;
		text-rendering: optimizespeed;
		font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-flow: row wrap;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-align-content: flex-start;
		-ms-flex-line-pack: start;
		align-content: flex-start
	}

	.pure-u {
		display: inline-block;
		zoom: 1;
		letter-spacing: normal;
		word-spacing: normal;
		vertical-align: top;
		text-rendering: auto
	}

	.pure-g [class*=pure-u] {
		font-family: sans-serif
	}

	.pure-u-1-4,
	.pure-u-2-5,
	.pure-u-3-5 {
		display: inline-block;
		zoom: 1;
		letter-spacing: normal;
		word-spacing: normal;
		vertical-align: top;
		text-rendering: auto
	}

	.pure-u-1-4 {
		width: 25%
	}

	.pure-u-2-5 {
		width: 40%
	}

	.pure-u-3-5 {
		width: 60%
	}

	.status {
		margin: 1rem -0.5rem 1rem -0.5rem;
	}

	.block {
		margin: 0.5rem 0.5rem;
		padding: 0;
		font-weight: normal;
		font-style: normal;
		line-height: 1;
		font-family: inherit;
		min-width: inherit;
		overflow-x: auto;
		overflow-y: hidden;
		border: 1px solid rgba(0, 0, 0, .05);
		border-radius: .375rem;
		box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15);
	}

	.img-con {
		margin: 1rem;
		min-width: 4rem;
		max-width: 4rem;
		min-height: 4rem;
		max-height: 4rem;
	}

	.block h4 {
		font-size: .8125rem;
		font-weight: 600;
		margin: 1rem;
		color: #8898aa !important;
		line-height: 1.8em;
	}

	.cbi-section-table-cell {
		position: relative;
	}

	@media screen and (max-width: 700px) {
		.pure-u-1-4 {
			width: 50%;
		}

		.cbi-button-add {
			position: fixed;
			padding: 0.3rem 0.5rem;
			z-index: 1000;
			width: 50px !important;
			height: 50px;
			bottom: 90px;
			right: 5px;
			font-size: 16px;
			border-radius: 50%;
			display: block;
			background-color: #fb6340 !important;
			border-color: #fb6340 !important;
			box-shadow: 0 0 1rem 0 rgba(136, 152, 170, .75);
		}
	}
</style>

<div class="pure-g status">
	<div class="pure-u-1-4">
		<div class="block pure-g">
			<div class="pure-u-2-5">
				<div class="img-con">
					<img src="<%=resource%>/dockerman/containers.svg" />
				</div>
			</div>
			<div class="pure-u-3-5">
				<h4 style="text-align: right; font-size: 1rem"><%:Containers%></h4>
				<h4 style="text-align: right;">
					<%- if self.containers_total ~= "-" then -%><a href='<%=luci.dispatcher.build_url("admin/docker/containers")%>'><%- end -%>
					<span style="font-size: 2rem; color: #2dce89;"><%=self.containers_running%></span>
					<span style="font-size: 1rem; color: #8898aa !important;">/<%=self.containers_total%></span>
				<%- if self.containers_total ~= "-" then -%></a><%- end -%>
				</h4>
			</div>
		</div>
	</div>
	<div class="pure-u-1-4">
		<div class="block pure-g">
			<div class="pure-u-2-5">
				<div class="img-con">
					<img src="<%=resource%>/dockerman/images.svg" />
				</div>
			</div>
			<div class="pure-u-3-5">
				<h4 style="text-align: right; font-size: 1rem"><%:Images%></h4>
				<h4 style="text-align: right;">
					<%- if self.images_total ~= "-" then -%><a href='<%=luci.dispatcher.build_url("admin/docker/images")%>'><%- end -%>
					<span style="font-size: 2rem; color: #2dce89;"><%=self.images_used%></span>
					<span style="font-size: 1rem; color: #8898aa !important;">/<%=self.images_total%></span>
					<%- if self.images_total ~= "-" then -%></a><%- end -%>
				</h4>
			</div>
		</div>
	</div>
	<div class="pure-u-1-4">
		<div class="block pure-g">
			<div class="pure-u-2-5">
				<div class="img-con">
					<img src="<%=resource%>/dockerman/networks.svg" />
				</div>
			</div>
			<div class="pure-u-3-5">
				<h4 style="text-align: right; font-size: 1rem"><%:Networks%></h4>
				<h4 style="text-align: right;">
					<%- if self.networks_total ~= "-" then -%><a href='<%=luci.dispatcher.build_url("admin/docker/networks")%>'><%- end -%>
					<span style="font-size: 2rem; color: #2dce89;"><%=self.networks_total%></span>
					<!-- <span style="font-size: 1rem; color: #8898aa !important;">/20</span> -->
					<%- if self.networks_total ~= "-" then -%></a><%- end -%>
				</h4>
			</div>
		</div>
	</div>
	<div class="pure-u-1-4">
		<div class="block pure-g">
			<div class="pure-u-2-5">
				<div class="img-con">
					<img src="<%=resource%>/dockerman/volumes.svg" />
				</div>
			</div>
			<div class="pure-u-3-5">
				<h4 style="text-align: right; font-size: 1rem"><%:Volumes%></h4>
				<h4 style="text-align: right;">
					<%- if self.volumes_total ~= "-" then -%><a href='<%=luci.dispatcher.build_url("admin/docker/volumes")%>'><%- end -%>
					<span style="font-size: 2rem; color: #2dce89;"><%=self.volumes_total%></span>
					<!-- <span style="font-size: 1rem; color: #8898aa !important;">/20</span> -->
					<%- if self.volumes_total ~= "-" then -%></a><%- end -%>
				</h4>
			</div>
		</div>
	</div>
</div>