extract css to less file, use color variables

Author: CFenner

netatmo-module/elements.html

@@ -1,12 +1,15 @@
 <div class="netatmo">
-	<span class="small loading">
-		<svg width="2em" height="2em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt">
-			<rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
-			<circle cx="50" cy="50" r="40" stroke="#aaa" fill="none" stroke-width="10" stroke-linecap="round"></circle>
-			<circle cx="50" cy="50" r="40" stroke="#fff" fill="none" stroke-width="6" stroke-linecap="round">
+	<span class="loading">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+			<circle class="outer"></circle>
+			<circle class="inner">
 				<animate attributeName="stroke-dashoffset" dur="5s" repeatCount="indefinite" from="0" to="502"></animate>
 				<animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate>
 			</circle>
 		</svg>
 	</span>
 </div>
+<svg class="loadTimer" viewbox="0 0 250 250">
+	<path class="border" transform="translate(125, 125)"/>
+	<path class="loader" transform="translate(125, 125) scale(.84)"/>
+</svg>

netatmo-module/less/style.less

@@ -1,30 +1,64 @@
+@light: #fff;
+@dark: #000;
+@dimmed: darken(@light, 33.5%);
+@borderColor: @light;
+
 #netatmo-module{
+	position: absolute;
+	bottom: 0;
+		
 	.netatmo{
-		position:absolute;
-		bottom: 0;
+		display: inline-block;
 
 		.module{
 			display: inline-block;
-			border: 1px solid white;
+			border: 1px solid @borderColor;
 			border-radius: .25em;
-			margin: .25em;
+			margin: .125em .25em;
 			overflow: hidden;
 
 			.name{
 				text-align: center;
-				background: white;
-				color: black;
-				padding: .125em .25em
+				color: @dark;
+				background: @borderColor;
+				padding: .125em .25em;
 			}
 
 			.data{
-				padding: .25em .125em;
+				padding: .125em .25em;
 			}
 		}
-		
-		.loading{
-			margin: 1.5em 2em;
-			display: inline-block;
+	}
+
+	.loading{
+		display: inline-block;
+		svg{
+			width: .6em;
+			height: .6em;
+			
+			circle{
+				fill: none;
+				stroke-linecap: round;
+				cx: 50;
+				cy: 50;
+				r: 40;
+			}
+			circle.inner{
+				stroke: @light;
+				stroke-width: 6;
+			}
+			circle.outer{
+				stroke: @dimmed;
+				stroke-width: 10;
+			}
 		}
 	}
-}
+	svg.loadTimer {
+		width: .5em;
+		height: .5em;
+		display: inline-block;
+
+		.loader{ fill: @dark;}
+		.border{ fill: @dimmed}
+	}
+}