templates
/
KiBot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[KiRi] Compacted the CSS 

Avoiding to repeat the SVG to icon trick
This commit is contained in:
Salvador E. Tropea 2023-12-28 10:58:34 -03:00
parent 6f57d5d0d4
commit 28417a8501
1 changed files with 14 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
kibot/resources/kiri/kiri.css
View File

@ -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;
}