woodpecker/static/styles/pages/build.sass

// this is the build output section of the page that displays
// the ansi terminal output.

#output
	background: #0d1926;
	color: #d9e6f2;
	margin-right: 15px;
	font-size: 13px;
	color: #eff1f5;
	border-radius: 2px;
	background: #2b303b;
	white-space: pre-wrap;
	word-wrap: break-word;
	box-sizing: border-box;
	padding: 35px 40px;
	font-family: "Roboto Mono";
	min-height: calc(100vh - 205px);

#follow
	position: absolute;

.build-summary
	padding-left: 20px;
	p
		color: #ADB3BA;
		margin-top: 4px;
		font-size: 0.9rem;
	em
		color: #747C84;
		text-decoration: none;
		font-style: normal;

//	.success,
//	.failure,
//	.killed,
//	.error,
//	.running,
//	.pending
//		font-size: 15px;
//		padding: 2px 28px;
//		width: auto;
.job-summary
	padding-left: 20px;
	font-size: 0.9rem;
	dt
		color: #ADB3BA;
		font-weight: normal;
	dd
		color: #747C84;
		text-decoration: none;
		font-style: normal;	

.build-summary > div
	h3
		display: inline;
		line-height: 28px;
		font-size: 18px;
		a.material-icons
			vertical-align: middle;
			text-decoration: none;
			color: #ADB3BA;
			font-size: 20px;
			padding-left: 5px;

.job-list
	padding-left: 20px;
	margin-bottom: 20px;

.job-list a
	h3
		margin-bottom: 10px;
		color: #2b303b;
		font-size: 14px;
		margin-top: 14px;
		.env
			font-family: "Roboto Mono"
	text-decoration: none;
	color: #747C84;
	font-size: 15px;
	display: block;
	border-top: 1px solid #eee;
	padding-top: 20px;
	padding-bottom: 20px;
	position: relative;
	&:not(.active) > div:nth-child(2) > div
		display: none

//	&:not(.active) > div:nth-child(2) > h3
//		color:#ADB3BA;
//	&:not(.active) > div:nth-child(1):after
//		content: "\2026";
//		display:block;
//		padding:0px 10px;
//		vertical-align:middle;
//		border:1px solid #eee;
//		background:#fff;
//		position:absolute;
//		right:0px;
//		top:0px;
//		height: 20px;
//		line-height: 10px;

.job-list a:last-child
	border-bottom: 1px solid #eee;

.job-list a > div:first-child
	margin-bottom: 10px;
	position: relative;

//.job-list a.active:after
//	content: "";
//	border-left: 2px solid #eee;
//	position: absolute;
//	top: 0px;
//	left: -35px;
//	bottom: 0px;
//	width: 10px;

.build-btn-group
	margin-left: 20px;
	.btn
		background: #FFF;
		outline: none;
		cursor: pointer;
		width: auto;
		text-transform: uppercase;
		padding: 0px 10px;
		border-radius: 2px;
		font-size: 11px;
		line-height: 30px;
		height: auto;
		margin-right: 10px;

		.btn-danger
			border: 1px solid #bf616a;
			color: #bf616a;

		&.btn-info
			border-color: #95AEC7;
			color: #95AEC7;

.tail
	position: fixed;
	bottom: 50px;
	right: 80px;
	width: 38px;
	height: 38px;
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
	cursor: pointer;
	bottom: 15px;
	right: 60px;
	border: none;
	outline: none;
	display: none;
 
.tail i
	color: rgba(255,255,255,0.5);
	line-height: 38px;
	display: inline-block;

@supports (position:sticky)
	.sticky
		position: sticky;
		top: 20px;

@supports not (position:sticky)
	.sticky
		top: 0px;