diff --git a/themes/antergos/css/style.css b/themes/antergos/css/style.css index d1316c3..d7eaaf5 100644 --- a/themes/antergos/css/style.css +++ b/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 { diff --git a/themes/antergos/img/Makefile.am b/themes/antergos/img/Makefile.am index 131ff6e..83d125d 100644 --- a/themes/antergos/img/Makefile.am +++ b/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) diff --git a/themes/antergos/img/fallback_bg.jpg b/themes/antergos/img/fallback_bg.jpg new file mode 100644 index 0000000..5c2f30b Binary files /dev/null and b/themes/antergos/img/fallback_bg.jpg differ diff --git a/themes/antergos/js/greeter.js b/themes/antergos/js/greeter.js index ae2a980..250782b 100644 --- a/themes/antergos/js/greeter.js +++ b/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 = $( '' ), $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();