diff --git a/src/UI/Content/icons.less b/src/UI/Content/icons.less index a694200e5..6b47430da 100644 --- a/src/UI/Content/icons.less +++ b/src/UI/Content/icons.less @@ -72,7 +72,31 @@ .icon-sonarr-spinner { .fa-icon-content(@fa-var-spinner); - margin: 0px -0.14em; +} + +.fa-spin-overlay { + .fa-icon(); + position : relative; + text-align : center; + vertical-align : baseline; + + i { + opacity : 0.2; + + &.icon-sonarr-spinner { + opacity : 1.0; + } + } + + span { + position : absolute; + top : 0; + left : 0; + right : 0; + bottom : 0; + + margin : 0 -0.5em; + } } .icon-sonarr-rename { diff --git a/src/UI/Settings/Quality/quality.less b/src/UI/Settings/Quality/quality.less index bd0fb4d16..23732cdfd 100644 --- a/src/UI/Settings/Quality/quality.less +++ b/src/UI/Settings/Quality/quality.less @@ -1,5 +1,5 @@ @import "../../Content/Bootstrap/mixins"; -@import "../../Content/icons"; +@import (reference) "../../Content/icons"; @import "../../Shared/Styles/clickable.less"; ul.qualities { diff --git a/src/UI/jQuery/jquery.spin.js b/src/UI/jQuery/jquery.spin.js index 3875ccbe0..5df52a958 100644 --- a/src/UI/jQuery/jquery.spin.js +++ b/src/UI/jQuery/jquery.spin.js @@ -25,7 +25,7 @@ module.exports = function() { var iconClasses = icon.attr('class').match(/(?:^|\s)icon\-.+?(?:$|\s)/); - if (iconClasses.length === 0) { + if (!iconClasses || iconClasses.length === 0) { return this; } @@ -38,7 +38,8 @@ module.exports = function() { } else { icon.attr('data-idle-icon', iconClass); icon.removeClass(iconClass); - icon.addClass('fa-spin icon-sonarr-spinner'); + icon.addClass('fa-spin-overlay'); + icon.html(''); } return this; @@ -47,8 +48,9 @@ module.exports = function() { $.fn.stopSpin = function() { var icon = this.find('i').andSelf('i'); + icon.empty(); this.removeClass('disabled'); - icon.removeClass('fa-spin icon-sonarr-spinner'); + icon.removeClass('fa-spin fa-spin-overlay'); var idleIcon = icon.attr('data-idle-icon'); if (idleIcon) {