Fix spinners for themes

Spinners come in many forms and CSS spinners can't be applied as a background property like GIFs, which means that they need their own DIV

3 files changed, 30 insertions, 4 deletions

diff --git a/css/gallerybutton.css b/css/gallerybutton.css
index a120e01a..7328a008 100644
--- a/css/gallerybutton.css
+++ b/css/gallerybutton.css
@@ -164,6 +164,15 @@ http://davidwalsh.name/css-flip*/
 	transform: rotateX(180deg);
 }
 
+#button-loading {
+	position: absolute;
+	width: 24px;
+	height: 24px;
+	background-size: 24px 24px;
+	margin-left: -4px;
+	margin-top: -3px;
+}
+
 #controls .button.sorting.active-button.hover .front {
 	-webkit-transform: rotateX(180deg);
 	-moz-transform: rotateX(180deg);
diff --git a/css/slideshow.css b/css/slideshow.css
index 0ea49e2b..ba953438 100644
--- a/css/slideshow.css
+++ b/css/slideshow.css
@@ -162,14 +162,14 @@
 }
 
 #slideshow > .name .title {
-	padding: 0px 50px;
+	padding: 0 50px;
 	text-align: center;
 	color: #FFF;
 	font-size: 18px;
 	line-height: normal;
 	text-overflow: ellipsis;
-	overflow:hidden;
-	white-space:nowrap;
+	overflow: hidden;
+	white-space: nowrap;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	filter: alpha(opacity=50);
 	opacity: .5;
@@ -196,3 +196,10 @@
 	width: 100%;
 	height: 100%;
 }
+
+.icon-loading-dark {
+	position: absolute;
+	top: 50%;
+	width: 100%;
+	height: 32px;
+}
diff --git a/css/styles.css b/css/styles.css
index 58771aba..1aafe395 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -39,7 +39,7 @@ div.crumb.last a {
 	vertical-align: -3px;
 }
 
-.album-info-content {
+.album-info-container {
 	background-color: #eee;
 	border-bottom-left-radius: 5px;
 	box-shadow: 0 1px 1px #777;
@@ -53,6 +53,16 @@ div.crumb.last a {
 	overflow-y: auto;
 }
 
+.album-info-loader {
+	top: 50%;
+	left: 50%;
+	z-index: -100;
+	position: absolute !important;
+	width: 32px;
+	height: 32px;
+	background-size: 32px 32px;
+}
+
 .album-info-content ul {
 	list-style: initial;
 }