status-page.scss

/*
	ATTENTION: This file is not compiled when building gluon.
	The compiled version is at ../files/lib/gluon/status-page/www/static/status-page.css

	Use sass like this to update it:

	sass --sourcemap=none -C -t compressed sass/status-page.scss files/lib/gluon/status-page/www/static/status-page.css

	When committing changes to this file make sure to commit the respective
	changes to the compiled version within the same commit!
*/

html, body, div, span,
h1, h2, h3,
dl, dt, dd,
canvas, header,
table, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	background: rgba(0, 0, 0, 0.12);
	font-family: Roboto, Lucida Grande, sans, Arial;
	color: rgba(0, 0, 0, 0.87);
	font-size: 14px;
	line-height: 1;
}


a {
	color: rgba(220, 0, 103, 0.87);
	text-decoration: none;

	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;

	&:hover {
		text-decoration: underline;
	}
}

h1 {
	font-weight: bold;
}

h2 {
	font-size: 16px;
	margin-bottom: 16px;
	color: rgba(0, 0, 0, 0.54);
}

h3 {
	font-size: 15px;
	margin-top: 16px;
	margin-bottom: 8px;
	color: rgba(0, 0, 0, 0.54);
}

header {
	display: flex;
	padding: 0 14px;
	background: #dc0067;
	color: rgba(255, 255, 255, 0.98);
	position: absolute;
	top: 0;
	width: 100%;
	box-sizing: border-box;
	height: 20vh;
	z-index: -1;
	box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.16), 0px 1.5px 3px rgba(0, 0, 0, 0.23);
	white-space: nowrap;

	h1 {
		font-size: 24px;
		margin: 10px 0;
		padding: 6px 0;

		text-overflow: ellipsis;
		overflow: hidden;
		flex: 1;
	}
}

.container {
	display: flex;

	max-width: 90vw;
	margin: 64px auto 24px auto;
	background: rgb(253, 253, 253);
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);

	& > .frame {
		flex: 1;
		border-style: solid;
		border-color: rgba(0, 0, 0, 0.12);

		box-sizing: border-box;
		padding: 16px;

		& + .frame {
			border-width: 0 0 0 1px;
		}

		&-wide {
			flex: 2;
		}
	}
}

dt, th, td::before {
	font-weight: bold;
	color: rgba(0, 0, 0, 0.87);
}

dt {
	margin-bottom: 4px;
}

th, td {
	text-align: left;
	padding: 4px 16px 4px 0;

	&:last-child {
		padding-right: 0;
	}
}

dd, td {
	font-weight: normal;
	font-size: 0.9em;
	color: rgba(0, 0, 0, 0.54);
}

dd {
	margin-bottom: 16px;
}

table {
	border-collapse: collapse;
	border-spacing: 0;

	&.datatable {
		width: 100%;
		table-layout: fixed;

		th, td {
			font-size: 1em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		th {
			&.row-tq {
				width: 45px;
			}

			&.row-signal {
				width: 36px;
			}

			&.row-distance {
				width: 90px;
			}

			&.row-inactive {
				width: 130px;
			}
		}

		tr.inactive {
			opacity: 0.33;
		}

		tr.highlight {
			background: rgba(255, 180, 0, 0.25);
		}
	}
}

canvas.signalgraph {
	margin-top: 8px;
	width: 100%;
}

@media only screen and (max-width: 1250px) {
	.container {
		max-width: none;
		margin: 56px 0 0;
	}

	header {
		height: 56px;
		z-index: 1;
		position: fixed;
	}

	.datatable {
		tr {
			display: block;
			margin-bottom: 15px;

			&:first-child {
				margin-bottom: 0;
			}
		}

		th {
			display: none;
		}

		td {
			display: block;
			position: relative;
			padding-left: 150px;
			max-width: calc(100% - 150px);

			&::before {
				position: absolute;
				left: 5px;
				content: attr(data-label)
			}
		}
	}
}

@media only screen and (max-width: 700px) {
	.container {
		display: block;

		& > .frame + .frame {
			border-width: 1px 0 0 0;
		}
	}
}