etcd-io__etcd/mod/dashboard/app/styles/etcd-widgets.css

body {
	margin: 0px;
}
.etcd-container {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	overflow: hidden;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: relative;
}

	a {
		color: #2176AC;
		text-decoration: none;
	}

	a:hover, a:active {
		text-decoration: underline;
	}

	input[type=text] {
		box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
		border: none;
		border-radius: 3px;
		font-size: 13px;
		padding-left: 5px;
		padding-right: 5px;
		height: 25px;
	}

	input[type=text]:focus {
		
	}

	h2 {
		font-size: 22px;
		font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 500;
		margin: 0 0 20px 0;
		padding: 0;
	}

	.etcd-button {
		display:inline-block;
		padding:6px 12px;
		margin-bottom:0;
		font-size:14px;
		font-weight:normal;
		line-height:1.428571429;
		text-align:center;
		white-space:nowrap;
		vertical-align:middle;
		cursor:pointer;
		border:1px solid transparent;
		border-radius:4px;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-o-user-select:none;
		user-select:none;
		margin: 0px;
		border: none;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.25);
	}

	.etcd-button.etcd-button-small {
		height: 25px;
		padding: 0 10px;
		font-size: 13px;
	}

	.etcd-button-primary {
		background-color: #428BCA;
		color: #fff;
		text-shadow: 0 0 3px rgba(0,0,0,0.25);
	}

	.etcd-button-primary:active {
		background-color: #2276ad;
	}

	.etcd-popover {
		background: #333;
		border-radius: 3px;
		padding: 15px;
		position: absolute;
		top: 39px;
		z-index: 9999;
		color: #fff;
		font-size: 13px;
		box-shadow: 0px 2px 10px rgba(0,0,0,.5);
		display: none;
	}

		.etcd-popover-error .etcd-popover-content {
			color: #FF3C43;
			font-weight: bold;
		}

		.etcd-popover-notch {
			width: 14px;
			height: 14px;
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			position: absolute;
			margin-top: -5px;
			margin-left: 3px;
			background: #333;
			top: 0px;
			right: 15px;
		}

	.etcd-popover.etcd-popover-right {
		left: 77px;
	}

		.etcd-popover-right .etcd-popover-notch {
			left: 15px;
		}

	.etcd-popover.etcd-popover-left {
		right: 10px;
	}

		.etcd-popover-left .etcd-popover-notch {
			right: 15px;
		}

		.etcd-popover-confirm {
			margin-top: 10px;
		}

		.etcd-popover-confirm button {

		}

	.etcd-header {
		width: 100%;
		position: relative;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	.etcd-header.solid {
		background: #eeeeee;
		background: -moz-linear-gradient(top,  #eeeeee 0%, #dddddd 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#dddddd));
		background: -webkit-linear-gradient(top,  #eeeeee 0%,#dddddd 100%);
		background: -o-linear-gradient(top,  #eeeeee 0%,#dddddd 100%);
		background: -ms-linear-gradient(top,  #eeeeee 0%,#dddddd 100%);
		background: linear-gradient(to bottom,  #eeeeee 0%,#dddddd 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 );
	}

	.etcd-body {
		top: 0px;
		left: 0px;
		position: relative;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		width: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

		.etcd-body table {
			width: 100%;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
		}

			.etcd-body table thead td {
				text-transform: uppercase;
				font-size: 11px;
				line-height: 20px;
				border-bottom: 1px solid #ddd;
				padding-top: 0px;
				padding-right: 10px;
				padding-bottom: 0px;
				padding-left: 0px;
				color: #666;
			}

			.etcd-body table tbody td {
				line-height: 18px;
				border-bottom: 1px solid #ddd;
				padding-top: 6px;
				padding-right: 10px;
				padding-bottom: 6px;
				padding-left: 0px;
				vertical-align: text-top;
			}

			.etcd-body table .etcd-ttl-header {
				width: 33%;
			}

			.etcd-body table tbody .etcd-ttl {
				font-size: 13px;
			}

			.etcd-body table tbody .etcd-ttl .etcd-ttl-none {
				color: #999;
				font-weight: 100;
			}

			.etcd-body table .etcd-actions-header {
				width: 30px;
			}

		.etcd-body table thead td:first-child, .etcd-body table tbody td:first-child {
			padding-left: 10px;
		}

		.etcd-body table thead td:last-child, .etcd-body table tbody td:last-child {
			padding-right: 10px;
		}

		.etcd-container .etcd-preview .etcd-dialog {
			background: #333;
			position: absolute;
			right: 0px;
			left: 0px;
			padding: 20px;
			color: #fff;
			font-size: 14px;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			bottom: 0px;
			opacity: 0;
			min-height: 110px; /* REMOVE ME! */
			transition-property: all;
			transition-duration: 150ms;
			transition-timing-function: ease-in-out;
		}

			.etcd-container .etcd-preview .etcd-dialog .etcd-dialog-message {
				margin-bottom: 20px;
			}

			.etcd-container .etcd-preview .etcd-dialog .etcd-dialog-buttons a {
				line-height: 34px;
				color: #fff;
				vertical-align: middle;
				margin-left: 10px;
			}

		/*.etcd-container .etcd-preview .etcd-dialog.etcd-reveal {
			opacity: 1;
		}

		.etcd-container .etcd-preview .etcd-dialog.etcd-hide {
			opacity: 0;
		}*/

		.etcd-body .etcd-list {
			padding: 20px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			overflow: auto;
			height: 100%;
			position: absolute;
		}

			.etcd-body .etcd-list .etcd-selected {
				background-color: #EAF3FF;
			}

			.etcd-body .etcd-list a.directory {
				font-weight: bold;
			}

			.etcd-body .etcd-list tr:hover .etcd-delete svg {
				1visibility: visible;
				fill: #ff0000;
			}

			.etcd-body .etcd-list .etcd-delete {
				height: 20px;
				width: 25px;
				vertical-align: middle;
				margin: 0px;
				display: inline-block;
			}

				.etcd-body .etcd-list .etcd-delete svg {
					height: 20px;
					fill: #eee;
				}

				.etcd-body .etcd-list .etcd-selected .etcd-delete svg {
					height: 20px;
					fill: #ddd;
				}

				.etcd-body .etcd-list .etcd-delete:hover svg {
					cursor: pointer;
					fill: #ff0000;
				}


.etcd-container.etcd-browser {

}

	.etcd-container.etcd-browser .etcd-header {
		height: 37px;
	}

		.etcd-back {
			height: 37px;
			width: 37px;
			vertical-align: middle;
			margin: 0px;
			position: absolute;
			top: 0px;
			left: 3px;
			display: none;
		}

		.etcd-container.etcd-browser.etcd-preview-reveal .etcd-back {
			display: block;
		}

		.etcd-container.etcd-browser.etcd-preview-hide .etcd-back {
			display: block;
		}

			.etcd-back svg {
				height: 20px;
				padding: 8px 6px;
			}

			.etcd-back:hover svg {
				cursor: pointer;
				fill: #428bca;
			}

			.etcd-back.etcd-disabled svg {
				fill: #bbb;
			}

		.etcd-add {
			height: 37px;
			width: 37px;
			vertical-align: middle;
			margin: 0px;
			position: absolute;
			top: 0px;
			left: 36px;
		}

		.etcd-container.etcd-browser.etcd-preview-reveal .etcd-add {

		}

		.etcd-container.etcd-browser.etcd-preview-hide .etcd-add {

		}

			.etcd-add svg {
				height: 22px;
				padding: 7px 6px;
			}

			.etcd-add:hover svg {
				cursor: pointer;
				fill: #428bca;
			}

			.etcd-add.etcd-disabled svg {
				fill: #bbb;
			}

		.etcd-container.etcd-browser .etcd-header .etcd-browser-path {
			position: absolute;
			left: 72px;
			right: 0px;
			top: 0;
			margin: 6px 5px 6px 5px;
		}

		.etcd-container.etcd-browser .etcd-header .etcd-browser-path input {
			width: 100%;
			box-sizing: border-box;
   			-moz-box-sizing: border-box;
   			-webkit-box-sizing: border-box;
		}

		.etcd-container.etcd-browser .etcd-header .etcd-save {
			position: absolute;
			width: 54px;
			right: -55px;
			margin: 6px 0;
		}

		.etcd-container.etcd-browser.etcd-save-reveal .etcd-header .etcd-save {
			right: 7px;
		}

		.etcd-container.etcd-browser.etcd-save-reveal .etcd-header .etcd-browser-path {
			right: 62px;
		}

		.etcd-container.etcd-browser.etcd-save-hide .etcd-header .etcd-save {
			right: -55px;
		}

		.etcd-container.etcd-browser.etcd-save-hide .etcd-header .etcd-browser-path {
			right: 0px;
		}

	.etcd-container.etcd-browser .etcd-preview {
		position: absolute;
		left: 100%;
		min-height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		top: 0px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		background-color: #fff;
		width: 100%;
		border-left: 1px solid #ddd;
	}

	.etcd-container.etcd-browser .etcd-preview pre, .etcd-container.etcd-browser .etcd-preview textarea {
		padding: 20px 20px 20px 20px;
		margin: 0px;
		font-family: Consolas, "Liberation Mono", Courier, monospace;
		height: 100%;
		width: 100%;
		white-space: pre-wrap;
		position: absolute;
		font-size: 13px;
		border: 1px;
		outline: none;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

		.etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview pre, .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview textarea {
			display: block;
		}

	.etcd-container.etcd-browser .etcd-preview .etcd-empty {
		top: 0px;
		bottom: 0px;
		width: 100%;
		text-align: center;
		position: absolute;
	}

		.etcd-container.etcd-browser.etcd-preview-reveal .etcd-empty {
			display: none;
		}

	.etcd-container.etcd-browser .etcd-preview .etcd-empty-message {
		margin-top: 25%;
		color: #999;
	}

	/* Single Column Positioning */
	@media (max-width: 700px) {
		.etcd-container.etcd-browser .etcd-list {
			width: 100%;
		}

			.etcd-container.etcd-browser.etcd-preview-reveal .etcd-list {
				left: -100%;
				transition-property: all;
  				transition-duration: 250ms;
  				transition-timing-function: ease-in-out;
			}

			.etcd-container.etcd-browser.etcd-preview-hide .etcd-list {
				left: 0%;
				transition-property: all;
  				transition-duration: 250ms;
  				transition-timing-function: ease-in-out;
			}

		.etcd-container.etcd-browser .etcd-preview {
			left: 100%;
		}

			.etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview {
				left: -1px;
				transition-property: all;
  				transition-duration: 250ms;
  				transition-timing-function: ease-in-out;
			}

			.etcd-container.etcd-browser.etcd-preview-hide .etcd-preview {
				left: 100%;
				transition-property: all;
  				transition-duration: 250ms;
  				transition-timing-function: ease-in-out;
			}
	}
	

	/* Double Column Positioning */
	@media (min-width: 700px) {
	.etcd-container.etcd-browser .etcd-list {
			width: 50%;
		}

		.etcd-container.etcd-browser .etcd-preview {
			left: 50%;
			width: 50%;
		}

			.etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview {
				left: 50%; /* does nothing */
			}

			.etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview .etcd-empty {
				display: none;
			}

			.etcd-container.etcd-browser.etcd-preview-hide .etcd-preview {
				left: 50%; /* does nothing */
			}

			.etcd-container.etcd-browser.etcd-preview-hide .etcd-preview .etcd-empty {
				display: block;
			}

			.etcd-container.etcd-browser.etcd-preview-hide .etcd-preview pre, .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview textarea {
				display: none;
			}
	}

.etcd-container.etcd-stats {

}

	.etcd-container.etcd-stats h2 {
		margin-top: -7px;
	}

	.etcd-format-selector {
		position: absolute;
		top: 12px;
		right: 16px;
		z-index: 999;
	}

	.etcd-format-selector .etcd-selector-item {
		display: inline-block;
		height: 12px;
		width: 12px;
		padding: 8px 4px;
	}

	.etcd-format-selector .etcd-selector-item:hover {
		cursor: pointer;
	}

		.etcd-format-selector .etcd-selector-item svg {
			fill: #333;
		}

	.etcd-container.etcd-stats .etcd-graph {
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		padding: 20px;
	}

		.etcd-container.etcd-stats .etcd-graph .etcd-graph-container {
			position: absolute;
			top: 60px;
			bottom: 20px;
			left: 20px;
			right: 20px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
		}

	.etcd-container.etcd-stats table .etcd-latency {
		width: 50%;
	}

	.etcd-container.etcd-stats .etcd-list {
		position: absolute;
		left: 100%;
		min-height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		top: 0px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		background-color: #fff;
		width: 100%;
		border-left: 1px solid #ddd;
	}

	.etcd-container.etcd-stats .etcd-list .etcd-square {
		height: 10px;
		width: 10px;
		display: inline-block;
		margin-right: 5px;
	}

		.etcd-container.etcd-stats .etcd-list .etcd-square-red {
			background-color: #c40022;
		}

		.etcd-container.etcd-stats .etcd-list .etcd-square-orange {
			background-color: #FFC000;
		}

		.etcd-container.etcd-stats .etcd-list .etcd-square-green {
			background-color: #00DB24;
		}

	.etcd-container.etcd-stats .etcd-list .etcd-latency-value {
		display: inline-block;
	}

	/* Single Column Positioning */
	@media (max-width: 700px) {
		.etcd-container.etcd-stats .etcd-list {
			width: 100%;
			left: 100%;
		}

		.etcd-container.etcd-stats .etcd-graph {
			left: 0%;
		}

		.etcd-container.etcd-stats.etcd-table-reveal .etcd-graph {
			left: -100%;
			transition-property: all;
  			transition-duration: 250ms;
  			transition-timing-function: ease-in-out;
		}
		.etcd-container.etcd-stats.etcd-table-hide .etcd-graph {
			left: 0%;
			transition-property: all;
  			transition-duration: 250ms;
  			transition-timing-function: ease-in-out;

		}
		.etcd-container.etcd-stats.etcd-table-hide .etcd-format-selector .etcd-selector-graph svg * {
			fill: #428bca;
		}

		.etcd-container.etcd-stats.etcd-table-hide .etcd-list {
			left: 100%;
			transition-property: all;
  			transition-duration: 250ms;
  			transition-timing-function: ease-in-out;
		}
		.etcd-container.etcd-stats.etcd-table-reveal .etcd-list {
			left: 0%;
			transition-property: all;
  			transition-duration: 250ms;
  			transition-timing-function: ease-in-out;
		}
		.etcd-container.etcd-stats.etcd-table-reveal .etcd-format-selector .etcd-selector-table svg * {
			fill: #428bca;
		}

	}
	

	/* Double Column Positioning */
	@media (min-width: 700px) {
		.etcd-container.etcd-stats .etcd-list {
			width: 50%;
			left: 50%;
		}

		.etcd-container.etcd-stats .etcd-graph {
			left: 0%;
			width: 50%;
		}

		.etcd-container.etcd-stats .etcd-format-selector {
			display: none;
		}

	}