add fallback bg image. limit the number of bg images to 20 until we can workout some form of pagination for the thumbnails.

themes/antergos/css/style.css

@@ -123,10 +123,17 @@ a {
 .bg-switch .bgs .bg {
 	text-align: center;
 	text-decoration: none;
+	display: block;
+	max-height: 95px;
+	transition: background 0.4s ease-in;
+	margin-bottom: 18px;
+}
+.bg-switch .bgs .bg:hover {
+	background: rgba(255,255,255,0.3);
 }
 
-.bg-switch .bgs .bg.active img {
-	border-color: #3D73C5;
+.bg-switch .bgs .bg.active div, .bg-switch .bgs .bg.active img {
+	border-color: #d6004b;
 }
 
 .bg-switch .bgs .bg img {
@@ -135,6 +142,11 @@ a {
 	border: 2px solid #FFFFFF;
 	margin-bottom: 10px;
 	cursor: pointer;
+	transition: all 0.3s linear;
+}
+
+.bg-switch .bgs .bg img:hover {
+	border-color: #ececec;
 }
 
 .hovered {
@@ -319,11 +331,13 @@ a {
 .panel-heading {
 	padding: 10px 20px !important;
 	background: #F1F1F1;
+	border-bottom-color: rgba(221,221,221, 0.35) !important;
 }
 
 .panel-footer {
 	height: 50px;
 	background: #F1F1F1;
+	border-top-color: rgba(221,221,221, 0.35);
 }
 
 #accordion {
@@ -366,6 +380,9 @@ div.password, div.status, div.timer {
 .input-group-btn {
 	width: auto;
 }
+.form-control {
+	border-color: transparent !important;
+}
 
 input.password.form-control {
 	box-shadow: 0 1px #dddddd;
@@ -433,7 +450,7 @@ input.password.form-control:focus {
 	border: 2px solid #FFFFFF;
 	margin-bottom: 10px;
 	cursor: pointer;
-	padding-top: 35px;
+	padding-top: 28.5px;
 }
 
 .random span {

themes/antergos/img/Makefile.am

@@ -1,5 +1,5 @@
 imgdir = $(THEME_DIR)/antergos/img
-img_DATA = antergos.png antergos-logo-user.png
+img_DATA = antergos.png antergos-logo-user.png fallback_bg.jpg
 
 EXTRA_DIST = $(img_DATA)
 

themes/antergos/js/greeter.js

@@ -188,7 +188,7 @@ class AntergosBackgroundManager {
 			this.log( 'AntergosBackgroundManager: [ERROR] No background images detected.' );
 
 			$( '.header' ).fadeTo( 300, 0.5, function() {
-				$( '.header' ).css( "background", '#000000' );
+				$( '.header' ).css( "background-image", 'url(img/fallback_bg.jpg)' );
 			} ).fadeTo( 300, 1 );
 
 		}
@@ -265,18 +265,40 @@ class AntergosBackgroundManager {
 	 */
 	setup_background_thumbnails() {
 		if ( _util.background_images.length ) {
+			var old_bg_tpl = `url(${this.current_background})`;
+
+			/* TODO: Implement some form of pagination
+			 */
+			if ( _util.background_images.length > 20 ) {
+				_util.background_images = _util.background_images.splice(0, 20);
+			}
+
 			$('[data-img="random"]').click(this.background_selected_handler);
 
 			for ( var image_file of _util.background_images ) {
 				var $link = $( '<a href="#"><img>' ),
 					$img_el = $link.children( 'img' ),
-					tpl = `file://${image_file}`;
+					img_url_tpl = `file://${image_file}`;
+
+				$link.addClass( 'bg clearfix' ).attr( 'data-img', img_url_tpl );
+
+				if ( image_file === this.current_background || image_file === old_bg_tpl ) {
+					var is_random = _util.cache_get( 'background_manager', 'random_background' );
+					if ('true' !== is_random ) {
+						$link.addClass( 'active' );
+					} else if ( 'true' === is_random ) {
+						$('[data-img="random"]').addClass('active');
+					}
+				}
 
-				$link.addClass( 'bg clearfix' ).attr( 'data-img', tpl );
-				$img_el.attr( 'src', tpl );
+				$img_el.attr( 'src', img_url_tpl );
 
 				$link.appendTo( $( '.bgs' ) ).click( this.background_selected_handler );
 			}
+
+			if ( ! $('.bg.active').length ) {
+				$('[data-img="random"]').addClass('active');
+			}
 		}
 	}
 
@@ -289,6 +311,9 @@ class AntergosBackgroundManager {
 	background_selected_handler( event ) {
 		var img = $( this ).attr( 'data-img' );
 
+		$('.bg.active').removeClass('active');
+		$(this).addClass('active');
+
 		if ( 'random' === img ) {
 			_util.cache_set( 'true', 'background_manager', 'random_background' );
 			img = _bg_self.get_random_image();