From 28417a85011b954e657fd8558a1aaced3d9b6c4d Mon Sep 17 00:00:00 2001
From: "Salvador E. Tropea" <salvador@inti.gob.ar>
Date: Thu, 28 Dec 2023 10:58:34 -0300
Subject: [PATCH] [KiRi] Compacted the CSS

Avoiding to repeat the SVG to icon trick
---
 kibot/resources/kiri/kiri.css | 80 ++++++-----------------------------
 1 file changed, 14 insertions(+), 66 deletions(-)

diff --git a/kibot/resources/kiri/kiri.css b/kibot/resources/kiri/kiri.css
index 26a69c75..a0c968d0 100644
--- a/kibot/resources/kiri/kiri.css
+++ b/kibot/resources/kiri/kiri.css
@@ -255,14 +255,14 @@ hr {
 	border: 0;
 }
 
-.icon-sheet-page {
-	margin-left: 0.5em;
-	margin-right: 0.1em;
+/*
+  This trick is used to make icons from SVG files, they use the currentColor
+*/
+.icon-sheet-page, .icon-commits, .icon-control-sch, .icon-control-pcb, .icon-control-zin, .icon-control-zout, .icon-control-center,
+.icon-control-info, .icon-commit1, .icon-commit1-fs, .icon-commit2, .icon-commit2-fs, .icon-commit3, .icon-commit3-fs,
+.icon-sch-modif, .icon-pcb-modif, .icon-sheets, .icon-layers, .layer_color_margin, .icon-commit {
 	display: inline-block;
-	width: 1em;
-	height: 1em;
 	background-color: currentColor;
-	--svg: url('./images/pages.svg');
 	-webkit-mask-image: var(--svg);
 	mask-image: var(--svg);
 	-webkit-mask-repeat: no-repeat;
@@ -271,23 +271,21 @@ hr {
 	mask-size: 100% 100%;
 }
 
+.icon-sheet-page {
+	margin-left: 0.5em;
+	margin-right: 0.1em;
+	width: 1em;
+	height: 1em;
+	--svg: url('./images/pages.svg');
+}
+
 .icon-commits {
 	margin-left: 5px;
 	margin-right:0.5em;
-	/* Add dimensions to span */
-	display: inline-block;
 	width: 1em;
 	height: 1em;
-	/* Add background color */
-	background-color: currentColor;
 	/* Add mask image, use variable to reduce duplication */
 	--svg: url('./images/code-branch-solid.svg');
-	-webkit-mask-image: var(--svg);
-	mask-image: var(--svg);
-	-webkit-mask-repeat: no-repeat;
-	mask-repeat: no-repeat;
-	-webkit-mask-size: 100% 100%;
-	mask-size: 100% 100%;
 }
 
 .icon-control {
@@ -295,19 +293,11 @@ hr {
 	height: 20px;
 }
 
-
 .icon-control-sch, .icon-control-pcb, .icon-control-zin, .icon-control-zout, .icon-control-center, .icon-control-info {
 	display: block;
 	width: 20px;
 	height: 20px;
 	margin: 0.2em;
-	background-color: currentColor;
-	-webkit-mask-image: var(--svg);
-	mask-image: var(--svg);
-	-webkit-mask-repeat: no-repeat;
-	mask-repeat: no-repeat;
-	-webkit-mask-size: 100% 100%;
-	mask-size: 100% 100%;
 }
 
 .icon-control-sch {
@@ -334,19 +324,10 @@ hr {
 	--svg: url('./images/info.svg');
 }
 
-
 .icon-commit1, .icon-commit1-fs, .icon-commit2, .icon-commit2-fs, .icon-commit3, .icon-commit3-fs {
-	display: inline-block;
 	width: 10px;
 	height: 10px;
-	background-color: currentColor;
 	--svg: url('./images/square-solid.svg');
-	-webkit-mask-image: var(--svg);
-	mask-image: var(--svg);
-	-webkit-mask-repeat: no-repeat;
-	mask-repeat: no-repeat;
-	-webkit-mask-size: 100% 100%;
-	mask-size: 100% 100%;
 }
 
 .icon-commit1, .icon-commit1-fs {
@@ -387,18 +368,10 @@ hr {
 
 
 .icon-sch-modif, .icon-pcb-modif {
-	display: inline-block;
 	padding-left: 0px;
 	padding-right: 0px;
 	width: 14px;
 	height: 14px;
-	background-color: currentColor;
-	-webkit-mask-image: var(--svg);
-	mask-image: var(--svg);
-	-webkit-mask-repeat: no-repeat;
-	mask-repeat: no-repeat;
-	-webkit-mask-size: 100% 100%;
-	mask-size: 100% 100%;
 }
 
 .icon-sch-modif {
@@ -415,14 +388,6 @@ hr {
 	margin-right:0.5em;
 	width: 20px;
 	height: 20px;
-	display: inline-block;
-	background-color: currentColor;
-	-webkit-mask-image: var(--svg);
-	mask-image: var(--svg);
-	-webkit-mask-repeat: no-repeat;
-	mask-repeat: no-repeat;
-	-webkit-mask-size: 100% 100%;
-	mask-size: 100% 100%;
 }
 
 .icon-sheets {
@@ -438,29 +403,13 @@ hr {
 	margin-right:0.1em;
 	width: 0.7em;
 	height: 0.7em;
-	display: inline-block;
-	background-color: currentColor;
 	--svg: url('./images/square-solid.svg');
-	-webkit-mask-image: var(--svg);
-	mask-image: var(--svg);
-	-webkit-mask-repeat: no-repeat;
-	mask-repeat: no-repeat;
-	-webkit-mask-size: 100% 100%;
-	mask-size: 100% 100%;
 }
 
 .icon-commit {
 	width: 1em;
 	height: 1em;
-	display: inline-block;
-	background-color: currentColor;
 	--svg: url("data:image/svg+xml;utf8,<svg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg' width='15' height='15'><path d='M7.5 10.5a3 3 0 010-6m0 6a3 3 0 000-6m0 6V15m0-10.5V0' stroke='currentColor'></path></svg>");
-	-webkit-mask-image: var(--svg);
-	mask-image: var(--svg);
-	-webkit-mask-repeat: no-repeat;
-	mask-repeat: no-repeat;
-	-webkit-mask-size: 100% 100%;
-	mask-size: 100% 100%;
 }
 
 .commit-label {
@@ -682,4 +631,3 @@ hr {
 .commit1, .commit2, .commit3 {
 	display: inline;
 }
-