traffic_monitor/static/style.css

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

body {
	font-family: "Lato", sans-serif;
	font-size: 14px;
	margin: 0;
}

/*****************/
/* Table Styling */
/*****************/
table {
	border-collapse: separate;
	border-spacing: 0 0;
	width: 100%;
}

th, td {
	padding: 5px 20px 5px 5px;
}

td {
	white-space: normal;
}

tbody#cache-states tr.server-status:nth-child(4n+3) {
	background: #adb;
}

tbody#cache-states tr.server-status:nth-child(odd) td {
	border-top: 1px ridge black;
}

tbody.interface-content tr {
	background: white;
}

tbody.interface-content tr:nth-child(even) {
	background: #acd;
}

table.sub-table {
	border: 1px solid black;
	border-radius: 3px;

	width: 80%;
	min-width: 300px;
	margin: auto;
	text-align: center
}

div.sub-table-indicator {
	border: solid black;
	border-width: 0 4px 4px 0;
	display: inline-block;
	padding: 5px;
	cursor: pointer;

	transition-duration: 0.4s;
	transform: rotate(-45deg);
}

div.sub-table-indicator.hidden {
	display: none;
}

div.sub-table-indicator.down {
	transform: rotate(45deg);
}

.error {
	background-color: #f00!important;
}

.warning {
	background-color: #f80!important;
}

#cache-states-content .text-entry {
	text-align: left;
}
#cache-states-content .number-entry {
	text-align: right;
}

tr.encompassing-row {
	visibility: collapse;
    opacity: 0;

	transition: opacity 0.30s ease-in;
}

tr.encompassing-row.visible {
    visibility: visible;
	opacity: 1;
}

#event-log td:last-child,
#deliveryservice-stats td:nth-child(n+3),
#deliveryservice-stats-content th:nth-child(n+3) {
	text-align: right;
}
#cache-states td:first-child,
#event-log td:first-child,
#event-log td:last-child,
#deliveryservice-stats td:first-child,
th {
	white-space: nowrap;
}
#event-log-content th:last-child {
	text-align: center;
}

/*****************/
/*   Top Bar     */
/*****************/
#top-bar {
	display: inline-flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	margin: 15px 0;
}

#icon-disc-holder {
	width: 125px;
	position: relative;
	margin-top: 5px;
}

#icon-disc,
#icon-disc::after,
#icon-disc::before {
	display: block;
	box-sizing: border-box;
	border: 2px solid;
	border-radius: 50%
}
#icon-disc {
	margin: auto;
	border-top-color: transparent;
	border-bottom-color: transparent;
	transform: rotate(45deg);
	position: relative;
	width: 14px;
	height: 14px;
}
#icon-disc-holder .icon-disc-tooltip {
	visibility: hidden;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;

	position: absolute;
	z-index: 1;
	width: 125px;
	top: 20px
}

#icon-disc-holder:hover .icon-disc-tooltip {
	visibility: visible;
}

#icon-disc::after,
#icon-disc::before {
	content: "";
	position: absolute;
	width: 6px;
	height: 6px;
	top: 2px;
	left: 2px
}
#icon-disc::after {
	width: 22px;
	height: 22px;
	border-radius: 100%;
	top: -6px;
	left: -6px
}

/*****************/
/*     Links     */
/*****************/
#links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 100ch;
}
#links div {
	margin-left: 4px;
}
#links a {
	display: block;
}

/*****************/
/*     Tabs      */
/*****************/
input[type=radio] {
	visibility: hidden;
	display: none;
}
label {
	display: block;
	padding: 14px 21px;
	border-radius: 2px 2px 0 0;
	cursor: pointer;
	position: relative;
	top: 4px;
	transition: background-color ease-in-out 0.3s;
	text-align: center;
	border: 1px solid green;
}
label:hover {
	background-color: #cfd;
}
.tabs {
	list-style: none;
	max-width: 100%;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
	position: relative;
}

@media(max-width: 1499) {
	table {
		table-layout: auto;
	}
}

@media(min-width: 1500) {
	table {
		table-layout: fixed;
	}
}

.tabcontent {
	z-index: 2;
	display: none;
	visibility: hidden;
	width: 100%;
	position: absolute;
	top: 53px;
	left: 0;
	padding: 6px 0;
	border-top: none;
}
input.tab:checked ~ div.tabcontent {
	display: block;
	visibility: visible;
}
input.tab:checked ~ label{
	background-color: #adb;
	border-bottom-width: 0;
}
.tabs li {
	float: left;
	display: block;
}