Correcting the svg issue also for alternate theme

Glitches on Safari iOS #138

Author: dascritch

build/cpu-audio.direct-download.js

@@ -86,8 +86,7 @@ b, strong, h5 a {
 	align-self: center;
 }
 
-#control,
-#actions {
+.siders {
 	flex : 0 0 var(--cpu-height);
 	width : var(--cpu-height);
 	max-height : var(--cpu-height);
@@ -151,7 +150,7 @@ b, strong, h5 a {
 	opacity: 1;
 }
 
-#control svg, #actions svg {
+.siders svg {
 	vertical-align : middle;
 	max-width : 100%;
 	max-height : 100%;
@@ -545,8 +544,8 @@ a:hover, button:hover, a:focus, button:focus,
 		padding-bottom: 2px;
 	}
 
-	#control svg, #actions svg {
-		/* Safari iOS is unable to recalc correctly. Keep this.. See https://github.com/dascritch/cpu-audio/issues/138  */
+	.siders svg {
+		/* Safari iOS is unable to recalc correctly. See https://github.com/dascritch/cpu-audio/issues/138  */
 		height : calc(var(--cpu-height) - 16px);
 	}
 }

build/cpu-audio.direct-download.js.map

@@ -5,7 +5,7 @@
 			<!-- Here are inserted messages from cpu-audio.CPU.updateError(). Perhaps we should hide them at some sizes. And also put an ellipsis in css -->
 		</section>
 		<section id="pagemain">
-			<button type="button" id="control" tabindex="0">
+			<button type="button" id="control" tabindex="0" class="siders">
 				<!-- play / pause / loading -->
 				<svg id="loading" viewBox="0 0 32 32">
 					<title>${__.loading}</title>
@@ -73,7 +73,7 @@ <h5 id="title"><a href="#" id="canonical" aria-label="${__.canonical}"><!-- titl
 					<!-- here are inserted tracks for _chapters, cursors,… -->
 				</div>
 			</div>
-			<button id="actions" aria-label="${__.more}" title="${__.more}">
+			<button id="actions" aria-label="${__.more}" title="${__.more}" class="siders">
 				<svg viewBox="0 0 32 32" aria-hidden="true">
 					<circle cx="7" cy="16" r="3" />
 					<circle cx="16" cy="16" r="3" />

build/cpu-audio.js

@@ -10,7 +10,7 @@
 		<section id="pageerror" role="alert">
 		</section>
 		<section id="pagemain">
-			<button type="button" id="control" tabindex="0">
+			<button type="button" id="control" tabindex="0" class="siders">
 				<!-- play / pause / loading -->
 				<svg id="loading" viewBox="0 0 32 32" aria-hidden="true">
 					<title>${__.loading}</title>
@@ -75,7 +75,7 @@ <h5 id="title"><a href="#" id="canonical" aria-label="${__.canonical}"></a></h5>
 					</div>
 				</div>
 			</div>
-			<a href="#" target="social" id="link" aria-label="${__.download}" title="${__.download}" download>
+			<a href="#" target="social" id="link" aria-label="${__.download}" title="${__.download}" download class="siders">
 				<!-- 
 					download link, instead of the actions button.
 					Even if the webcomponent will try to guess which is the prefered source for the clien platform, you can precise which link is to be downloaded :
@@ -97,17 +97,7 @@ <h5 id="title"><a href="#" id="canonical" aria-label="${__.canonical}"></a></h5>
 <style>
 	/* Not the recommended way, but I didn't want to copy the whole scoped.css for invalidate only one^w a couple of rules */
 	#link {
-		background : none !important;,
-		flex : 0 0 var(--cpu-height);
-		width : var(--cpu-height);
-		max-height : var(--cpu-height);
-		height : 100%;
-		text-align : center;
-		vertical-align : middle;
-	}
-	#link svg {
-		max-width: 100%;
-		max-height: 100%;
+		background : none !important;
 	}
 	#link:hover, #link:focus {
 		background: var(--cpu-focus-background, var(--cpu-color)) !important;