Inline CSS background images directly into the CSS

This commit is contained in:
Guillaume Gomez 2023-01-31 21:23:23 +01:00
parent 7c4a9a971c
commit 63f82db958
5 changed files with 13 additions and 10 deletions

View File

@ -806,8 +806,11 @@ so that we can apply CSS-filters to change the arrow color in themes */
background-repeat: no-repeat;
background-size: 20px;
background-position: calc(100% - 2px) 56%;
/* image is black color */
background-image: url("down-arrow-927217e04c7463ac.svg");
/* down arrow (image is black color) */
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
width="128" height="128" viewBox="-30 -20 176 176"><path d="M111,40.5L64,87.499L17,40.5" \
fill="none" stroke="black" strike-linecap="square" stroke-miterlimit="10" stroke-width="12"/> \
</svg>');
/* changes the arrow image color */
filter: var(--crate-search-div-filter);
}
@ -1440,7 +1443,10 @@ details.toggle > summary.hideme > span {
}
details.toggle > summary::before {
background: url("toggle-plus-1092eb4930d581b0.svg") no-repeat top left;
/* toggle plus */
background: url('data:image/svg+xml,<svg width="17" height="17" \
shape-rendering="crispEdges" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg"><path \
d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7M8.5 12V8.625v0V5"/></svg>') no-repeat top left;
content: "";
cursor: pointer;
width: 16px;
@ -1518,7 +1524,10 @@ details.toggle[open] > summary.hideme > span {
}
details.toggle[open] > summary::before {
background: url("toggle-minus-31bbd6e4c77f5c96.svg") no-repeat top left;
/* toggle minus */
background: url('data:image/svg+xml,<svg width="17" height="17" \
shape-rendering="crispEdges" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg"><path \
d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7"/></svg>') no-repeat top left;
}
details.toggle[open] > summary::after {

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" width="128" height="128" enable-background="new 0 0 128 128" version="1.1" viewBox="-30 -20 176 176" xml:space="preserve"><g><line x1="111" x2="64" y1="40.5" y2="87.499" fill="none" stroke="#000000" stroke-linecap="square" stroke-miterlimit="10" stroke-width="12"/><line x1="64" x2="17" y1="87.499" y2="40.5" fill="none" stroke="#000000" stroke-linecap="square" stroke-miterlimit="10" stroke-width="12"/></g></svg>

Before

Width:  |  Height:  |  Size: 510 B

View File

@ -1 +0,0 @@
<svg width="17" height="17" shape-rendering="crispEdges" stroke="#000" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7"/></svg>

Before

Width:  |  Height:  |  Size: 174 B

View File

@ -1 +0,0 @@
<svg width="17" height="17" shape-rendering="crispEdges" stroke="#000" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7M8.5 12V8.625v0V5"/></svg>

Before

Width:  |  Height:  |  Size: 191 B

View File

@ -102,9 +102,6 @@ static_files! {
scrape_examples_js => "static/js/scrape-examples.js",
wheel_svg => "static/images/wheel.svg",
clipboard_svg => "static/images/clipboard.svg",
down_arrow_svg => "static/images/down-arrow.svg",
toggle_minus_png => "static/images/toggle-minus.svg",
toggle_plus_png => "static/images/toggle-plus.svg",
copyright => "static/COPYRIGHT.txt",
license_apache => "static/LICENSE-APACHE.txt",
license_mit => "static/LICENSE-MIT.txt",