$green: #76ab13;
$red: #ae442e;
$orange: orange;

.good {
	color: rgba(0, 255, 0, 0.4);
}

.bad {
	color: rgba(255, 0, 0, 0.4);
}

h1 {
	font-size: 22px;
}

h1.header {
	color: rgba(255,255,255,0.5);
	font-weight: bold;
	font-size: 30px;
}

h2 .value-add {
	font-size: 0.4em;
	vertical-align: middle;
}

.trend-up {
	color: $green;
}

.trend-down {
	color: $red;
}

.more-info {
	font-size: 12px;
	opacity: 0.5;
}

.highcontrast {

	background-color: #222;

	.widget {
		color: white;
		background-color: #333 !important;
		padding: 0;

		.updated-at {
			color: rgba(255,255,255,0.5);
		}

		.x_tick .title {
			color: rgba(255,255,255,0.5);
			// Avoid overlap with cols, a bit hacky
			padding-bottom: 15px;
			padding-left: 10px;
		}

		&.widget-graph .y_ticks {
			fill: rgba(255,255,255,0.5);	
		}

	}
}

.widget {
	vertical-align: top;

	&.widget-graph, &.widget-series {
		.more-info {
			position: inherit;
			top: auto;
			bottom: auto;
		}	
	}

	&.widget-table {
		td {
			&.trend-up {
				color: $green;
			}
			&.trend-down {
				color: $red;
			}
		}
		
	}

	&.leaderboard {
		vertical-align: top;

		table td {
			border-bottom: 1px solid #666;
			padding: 4px;
			font-size: 14px;
		}

		.col-icon {
			text-align: right;
		}

		.col-name {
			text-align: left;
			max-width: 150px;
		}

		.col-name, .col-score {
			color: white;
		}

		.col-score, .col-trend {
			text-align: left;
		}
		.previous-score {
			font-size: 0.7em;
			opacity: 0.5;
		}
		.col-trend {
			opacity: 0.5;
			font-size: 0.7em;
		}
		.col-name {
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
	}

	&.meta_stats {
		background-color: transparent;
		color: #777;
	}

	&.travis {
		background-color: #aaa;
		font-size: 14px;

		ul {
			margin: 0;
		}

		li {
			float: left;
			margin: 0 5px 5px 0;
			padding: 3px;
			border-radius: 3px;

			* {
				vertical-align: middle;
			}

			&.good {
				background-color: darken($green, 10%);
			}

			&.bad {
				background-color: $red;

				// Show broken builds larger,
				// with labels on a separate line.
				.label {
					font-size: 24px;
					display: block;
				}

				ul {
					display: block;

					.label {
						font-size: 14px;
					}
				}
			}

			&.none {
				background-color: #555;
			}

			&.rating {
				border-radius: 5px;
				background: darken($orange, 10%);
				padding: 0px 4px;
				color: black;
				font-size: 10px;

				&.rating-0 {
					background-color: $red;
				}

				&.rating-1 {
					background-color: $red;
				}

				&.rating-2 {
					background-color: $red;
				}

				&.rating-3 {
					background-color: darken($orange, 10%);
				}

				&.rating-4 {
					background-color: darken($orange, 10%);
				}

				&.rating-5 {
					background-color: darken($orange, 10%);
				}

				&.rating-6 {
					background-color: darken($orange, 10%);
				}

				&.rating-7 {
					background-color: darken($green, 10%);
				}

				&.rating-8 {
					background-color: darken($green, 10%);
				}

				&.rating-9 {
					background-color: darken($green, 10%);
				}

				&.rating-10 {
					background-color: darken($green, 10%);
				}
			}

			a {
				padding: 2px 4px;
			}

			a, ul, li {
				display: inline-block;
			}

			li {
				font-size: 11px;
				border-radius: 3px;
				margin: 0 5px 0 0;	
				padding: 0;	
			}
		}
	}

	&.issues_stacked, &.issues_opened, &.forum_unanswered {
		// Reverse trends, up is bad
		.trend-up {
			color: $red;
		}
		.trend-down {
			color: $green;
		}
	}
}

h1, footer {
	margin: 5px; // simulate widget spacing
	padding: 5px;
	text-align: center;
}

footer {
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	padding: 15px;

	a {
		color: rgba(255, 255, 255, 0.7);
	}
}