demostf/frontend
1
0
Fork 0
mirror of https://codeberg.org/demostf/frontend.git synced 2026-06-03 18:24:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

svg class icons

Browse source
This commit is contained in:
Robin Appelman 2023-04-14 21:51:46 +02:00
commit f7f163bc49
22 changed files with 79 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

2
build/bundlers/src/lib.rs
View file

@ -13,7 +13,7 @@ pub fn bundle_raw(input: &str) -> Vec<u8> {
fn guess_embed(path: &str) -> (&'static str, bool) { fn guess_embed(path: &str) -> (&'static str, bool) {
match path.split('.').last().unwrap() { match path.split('.').last().unwrap() {
"svg" => ("image/svg+xml", false), "svg" => ("image/svg+xml", true),
"png" => ("image/png", true), "png" => ("image/png", true),
ext => panic!("no mimetype known for {ext}"), ext => panic!("no mimetype known for {ext}"),
} }

1
flake.nix
View file

@ -32,6 +32,7 @@
pkg-config pkg-config
openssl openssl
nodejs nodejs
nodePackages.svgo
]; ];
}; };
}); });

1
images/LICENSE Normal file
View file

@ -0,0 +1 @@
Class icons based on https://github.com/Qixalite/tf2-classfont/

2
images/charge.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 16.933333 16.933333"><g stroke="#fcfcfc" fill="none"><path d="M1.213 2.67C1.2 7.415 1.78 9.78 3.03 13.16l5.522 3.545 5.208-3.546c1.48-3.094 2.058-6.02 1.948-10.49L8.608.207z" stroke-width=".2908971"/><path d="M2.278 3.366c-.01 4.17.484 6.248 1.552 9.217l4.712 3.115 4.446-3.115c1.263-2.718 1.756-5.288 1.662-9.217L8.59 1.203z" stroke-width=".25185420000000003"/></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 16.933 16.933"><g fill="none" stroke="#fcfcfc"><path stroke-width=".291" d="M1.213 2.67C1.2 7.415 1.78 9.78 3.03 13.16l5.522 3.545 5.208-3.546c1.48-3.094 2.058-6.02 1.948-10.49L8.608.207z"/><path stroke-width=".252" d="M2.278 3.366c-.01 4.17.484 6.248 1.552 9.217l4.712 3.115 4.446-3.115c1.263-2.718 1.756-5.288 1.662-9.217L8.59 1.203z"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 448 B

After

Width:  |  Height:  |  Size: 424 B

Before After
Before After

2
images/charge_blue.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 16.933333 16.933333"><g stroke="#fcfcfc" fill="#5b818f"><path d="M1.213 2.67C1.2 7.415 1.78 9.78 3.03 13.16l5.522 3.545 5.208-3.546c1.48-3.095 2.058-6.02 1.948-10.49L8.608.206z" stroke-width=".291"/><path d="M2.278 3.366c-.01 4.17.484 6.248 1.552 9.217l4.712 3.115 4.446-3.115c1.263-2.718 1.756-5.288 1.662-9.217L8.59 1.203z" stroke-width=".252"/></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 16.933 16.933"><g fill="#5b818f" stroke="#fcfcfc"><path stroke-width=".291" d="M1.213 2.67C1.2 7.415 1.78 9.78 3.03 13.16l5.522 3.545 5.208-3.546c1.48-3.095 2.058-6.02 1.948-10.49L8.608.206z"/><path stroke-width=".252" d="M2.278 3.366c-.01 4.17.484 6.248 1.552 9.217l4.712 3.115 4.446-3.115c1.263-2.718 1.756-5.288 1.662-9.217L8.59 1.203z"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 433 B

After

Width:  |  Height:  |  Size: 427 B

Before After
Before After

2
images/charge_red.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 16.933333 16.933333"><g stroke="#fcfcfc" fill="#a75d50"><path d="M1.213 2.67C1.2 7.415 1.78 9.78 3.03 13.16l5.522 3.545 5.208-3.546c1.48-3.095 2.058-6.02 1.948-10.49L8.608.206z" stroke-width=".291"/><path d="M2.278 3.366c-.01 4.17.484 6.248 1.552 9.217l4.712 3.115 4.446-3.115c1.263-2.718 1.756-5.288 1.662-9.217L8.59 1.203z" stroke-width=".252"/></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 16.933 16.933"><g fill="#a75d50" stroke="#fcfcfc"><path stroke-width=".291" d="M1.213 2.67C1.2 7.415 1.78 9.78 3.03 13.16l5.522 3.545 5.208-3.546c1.48-3.095 2.058-6.02 1.948-10.49L8.608.206z"/><path stroke-width=".252" d="M2.278 3.366c-.01 4.17.484 6.248 1.552 9.217l4.712 3.115 4.446-3.115c1.263-2.718 1.756-5.288 1.662-9.217L8.59 1.203z"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 433 B

After

Width:  |  Height:  |  Size: 427 B

Before After
Before After

1
images/demo.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="673.6" height="666"><path fill="currentColor" d="m505 146 12-121-97 71c-23-7-63.563-15-87-12L263 0l-18 102c-14 6-26 13-35 19 143 29 292 106 380 224 2-16 1-32.258.5-45l79-65-106-19c-12-27-39-54-58-71ZM0 153l114 158c80 4 103-91 65-141zm187 1c56 72 16 159-63 169 129 41 245 108 342 198-20-70 60-156 106-135 1-3 3-6 3-8-100-118-242-201-388-224Zm293 367 194 21-105-148c-58-4-107 91-89 127zm-315-16-17 161 130-93c19-46-64-108-113-68zm187 76 69 85 18-100c4-3 7-5 10-8-95.834-106-238-187-356-204v10l-80 67 106 17c8 18 21 41 37 53 87-66 157 57 134 78 22 4 37 4 61 3z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 634 B

1
images/engineer.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="631" height="612"><path fill="currentColor" d="m262 284-13-11 25-27 11 6c18-2 29-19 33-35l-15-17 47-52 25 22 51-51-43-42 77-77 124 120 47 155-23 24-124-123-51 52 102 103c-29 33-79-18-105-5-14 9-28 19-43 29l5 4-27 27-7-7-45 45 3 3-16 17-4-4-22 21-29-27c-60 61-114 125-170 174-21 18-95-39-69-72 82-95 124-101 256-251Zm12 138-4-8 13-13 6 3 45-45-7-7-65 59z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 430 B

1
images/heavy.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="563" height="576"><path fill="currentColor" d="m212 444-82-82 155-155 82 82zm252-59L309 540l-82-82 155-155zM32 265l156-156 82 84-156 154zM212 85c138-156 236-76 80 81zm-21 408 16-16 86 84-19 15zm1-30-16 16-81-83 14-16zm-97-97-16 16-79-86 12-13Zm212-187c138-156 236-76 80 81zm95 101c138-156 236-76 80 81z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 379 B

16
images/link.svg
View file

@ -1,15 +1 @@
<?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="512" height="512"><path fill="#010101" d="m459.654 233.373-90.531 90.5c-49.969 50-131.031 50-181 0-7.875-7.844-14.031-16.688-19.438-25.813l42.063-42.063c2-2.016 4.469-3.172 6.828-4.531 2.906 9.938 7.984 19.344 15.797 27.156 24.953 24.969 65.563 24.938 90.5 0l90.5-90.5c24.969-24.969 24.969-65.563 0-90.516-24.938-24.953-65.531-24.953-90.5 0l-32.188 32.219c-26.109-10.172-54.25-12.906-81.641-8.891l68.578-68.578c50-49.984 131.031-49.984 181.031 0 49.97 49.986 49.97 131.033.001 181.017zM220.326 382.186l-32.203 32.219c-24.953 24.938-65.563 24.938-90.516 0-24.953-24.969-24.953-65.563 0-90.531l90.516-90.5c24.969-24.969 65.547-24.969 90.5 0 7.797 7.797 12.875 17.203 15.813 27.125 2.375-1.375 4.813-2.5 6.813-4.5l42.063-42.047c-5.375-9.156-11.563-17.969-19.438-25.828-49.969-49.984-131.031-49.984-181.016 0l-90.5 90.5c-49.984 50-49.984 131.031 0 181.031 49.984 49.969 131.031 49.969 181.016 0l68.594-68.594c-27.407 4.031-55.548 1.281-81.642-8.875z"/></svg>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path fill="#010101" d="M459.654,233.373l-90.531,90.5c-49.969,50-131.031,50-181,0c-7.875-7.844-14.031-16.688-19.438-25.813
l42.063-42.063c2-2.016,4.469-3.172,6.828-4.531c2.906,9.938,7.984,19.344,15.797,27.156c24.953,24.969,65.563,24.938,90.5,0
l90.5-90.5c24.969-24.969,24.969-65.563,0-90.516c-24.938-24.953-65.531-24.953-90.5,0l-32.188,32.219
c-26.109-10.172-54.25-12.906-81.641-8.891l68.578-68.578c50-49.984,131.031-49.984,181.031,0
C509.623,102.342,509.623,183.389,459.654,233.373z M220.326,382.186l-32.203,32.219c-24.953,24.938-65.563,24.938-90.516,0
c-24.953-24.969-24.953-65.563,0-90.531l90.516-90.5c24.969-24.969,65.547-24.969,90.5,0c7.797,7.797,12.875,17.203,15.813,27.125
c2.375-1.375,4.813-2.5,6.813-4.5l42.063-42.047c-5.375-9.156-11.563-17.969-19.438-25.828c-49.969-49.984-131.031-49.984-181.016,0
l-90.5,90.5c-49.984,50-49.984,131.031,0,181.031c49.984,49.969,131.031,49.969,181.016,0l68.594-68.594
C274.561,395.092,246.42,392.342,220.326,382.186z"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1,022 B

Before After
Before After

50
images/link_white.svg
View file

@ -1,49 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="512" height="512"><path fill="#010101" d="m459.654 233.373-90.531 90.5c-49.969 50-131.031 50-181 0-7.875-7.844-14.031-16.688-19.438-25.813l42.063-42.063c2-2.016 4.469-3.172 6.828-4.531 2.906 9.938 7.984 19.344 15.797 27.156 24.953 24.969 65.563 24.938 90.5 0l90.5-90.5c24.969-24.969 24.969-65.563 0-90.516-24.938-24.953-65.531-24.953-90.5 0l-32.188 32.219c-26.109-10.172-54.25-12.906-81.641-8.891l68.578-68.578c50-49.984 131.031-49.984 181.031 0 49.97 49.986 49.97 131.033.001 181.017zM220.326 382.186l-32.203 32.219c-24.953 24.938-65.563 24.938-90.516 0-24.953-24.969-24.953-65.563 0-90.531l90.516-90.5c24.969-24.969 65.547-24.969 90.5 0 7.797 7.797 12.875 17.203 15.813 27.125 2.375-1.375 4.813-2.5 6.813-4.5l42.063-42.047c-5.375-9.156-11.563-17.969-19.438-25.828-49.969-49.984-131.031-49.984-181.016 0l-90.5 90.5c-49.984 50-49.984 131.031 0 181.031 49.984 49.969 131.031 49.969 181.016 0l68.594-68.594c-27.407 4.031-55.548 1.281-81.642-8.875z" style="fill:#fff;fill-opacity:1"/></svg>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
width="512px"
height="512px"
viewBox="0 0 512 512"
enable-background="new 0 0 512 512"
xml:space="preserve"
sodipodi:docname="link_white.svg"
inkscape:version="0.92.0 r"><metadata
id="metadata9"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs7" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="2560"
inkscape:window-height="1387"
id="namedview5"
showgrid="false"
inkscape:zoom="0.4609375"
inkscape:cx="2.1694915"
inkscape:cy="256"
inkscape:window-x="1920"
inkscape:window-y="30"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><path
fill="#010101"
d="M459.654,233.373l-90.531,90.5c-49.969,50-131.031,50-181,0c-7.875-7.844-14.031-16.688-19.438-25.813 l42.063-42.063c2-2.016,4.469-3.172,6.828-4.531c2.906,9.938,7.984,19.344,15.797,27.156c24.953,24.969,65.563,24.938,90.5,0 l90.5-90.5c24.969-24.969,24.969-65.563,0-90.516c-24.938-24.953-65.531-24.953-90.5,0l-32.188,32.219 c-26.109-10.172-54.25-12.906-81.641-8.891l68.578-68.578c50-49.984,131.031-49.984,181.031,0 C509.623,102.342,509.623,183.389,459.654,233.373z M220.326,382.186l-32.203,32.219c-24.953,24.938-65.563,24.938-90.516,0 c-24.953-24.969-24.953-65.563,0-90.531l90.516-90.5c24.969-24.969,65.547-24.969,90.5,0c7.797,7.797,12.875,17.203,15.813,27.125 c2.375-1.375,4.813-2.5,6.813-4.5l42.063-42.047c-5.375-9.156-11.563-17.969-19.438-25.828c-49.969-49.984-131.031-49.984-181.016,0 l-90.5,90.5c-49.984,50-49.984,131.031,0,181.031c49.984,49.969,131.031,49.969,181.016,0l68.594-68.594 C274.561,395.092,246.42,392.342,220.326,382.186z"
id="path2"
style="fill:#ffffff;fill-opacity:1" /></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 1 KiB

Before After
Before After

2
images/logo.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><path d="m379.63 205.57-120.25-17.1a59.61 59.61 0 0 0-31.18-41.52l17.1-120.31c76 19.19 138 91.9 134.32 179zm-231.62-32.95a59.6 59.6 0 0 1 41.5-31.18L206.63 21.2C121.4 17.3 47.44 78.23 27.7 155.5zm25.67 80.19a59.6 59.6 0 0 1-31.17-41.5L21.94 194.58c-1.27 85.54 57.35 158.8 134.63 178.54zm80.2-25.67a60.45 60.45 0 0 1-42 31.3l-16.72 120.15c89.36 1.27 159.2-57 178.93-134.32z" fill="#a12d15"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><path fill="#a12d15" d="m379.63 205.57-120.25-17.1a59.61 59.61 0 0 0-31.18-41.52l17.1-120.31c76 19.19 138 91.9 134.32 179zm-231.62-32.95a59.6 59.6 0 0 1 41.5-31.18L206.63 21.2C121.4 17.3 47.44 78.23 27.7 155.5zm25.67 80.19a59.6 59.6 0 0 1-31.17-41.5L21.94 194.58c-1.27 85.54 57.35 158.8 134.63 178.54zm80.2-25.67a60.45 60.45 0 0 1-42 31.3l-16.72 120.15c89.36 1.27 159.2-57 178.93-134.32z"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 461 B

After

Width:  |  Height:  |  Size: 461 B

Before After
Before After

1
images/medic.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="646" height="647"><path fill="currentColor" d="m196 450-177 .1c-31-17-19-254-.9-254l178.2.1-.1-176c17-30 254-21 254-.9l-.1 177 176-.1c30 17 21 254 1 254l-177-.1.1 177c-18 29-254 21-254 .4z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 265 B

1
images/pyro.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="451" height="636"><path fill="currentColor" d="M110 238C208 362 244 43 207 0c95 62 116 223 96 313-8 50 56 48 55 2 7-47 23-97 55-127-1 6-2 11-1.9 16-8 66 28 112 36 169 18 132-95 247-203 260C124 648 .17 559 0 436c-.152-110 104-160 4.7-298 40 4 87 75 105 99Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 332 B

1
images/scout.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 800 800" viewBox="0 0 800 800"><path fill="currentColor" d="M454 603c-59-31-120-31-147-33 7-67 21-121 42-179 26-13 158-60 210-63 29 48 2 99-40 126-34 41-51 103-64 149zM347 374c-4-70.9-22-139-45-198-8-18 10-35 18-43 99-22 187-24 261-77-2 12 7 50-2 53-71 20-127 38-198 55-11 11-9 147 2 146 .1-1 .3-3 .3-4 .2-17 4-42 4-59 10-8 103-1 168-4-15 26-40 36-67 45 19 8 39 14 56 27-68 11-134 31-198 59zM215 715c-19-1-41-54-16-61 62 18 87-26 105-69 20-3 150 20 142 33-20 51-64 84-106 96z"/><path fill="currentColor" d="M385 233c-2-12 2-28 11-30 66-8 134-27 189-33-2 16-12 62-27 62-61 2-120-5-174 1zm0-38c-3-12 1-20 14-24 64-18 129-38 187-54 3 13 5 41-3 43-70 7-133 29-197 34z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 766 B

1
images/sniper.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="615" height="615"><circle cx="307" cy="307" r="287" style="fill:none;stroke:currentColor;stroke-width:40"/><circle cx="308" cy="307" r="113" style="fill:none;stroke:currentColor;stroke-width:20"/><path d="M292 12h29v589h-29z" style="fill:currentColor;stroke:none"/><path d="M0 292h589v29H0z" style="fill:currentColor;stroke:none"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 384 B

1
images/soldier.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="649" height="664"><path fill="currentColor" d="M533 240c-18-12-113-97-122-126C465 67 536 34 594 .1c16-1 61 41 53 57-43 72-70 138-115 183Zm-226 50c13 19 30 38 48 50-66 66-139 132-153 217-1 8-8 12-13 17-34-39-83-82-114-112-4-5 19-15 24-16 81-24 162-87 207-154zm92-165c31 52 72 93 124 124-23 31-73 42-97 48-5 3-9 1-14-1-24-16-44-36-60-61-2-3.7-3-7-1-11 3-38 13-58 48-98zM56 638c21-15 37-37 54-59-46 17-83 48-109 85 16-50 40-97 66-143-28 13-46 32-67 51 3-7 5-13 8-19 15-28 43-57 69-76 36 24 65 65 93 93-12 9-81 66-116 68Zm350-330c-11 6-36 29-44 24-18-11-36-29-47-47.9 0-12 20-32 26-42 14 29 36 50 65 65z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 676 B

1
images/spy.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="42" height="56"><path d="m15.5 55.6-7.1-9.7c-.21-6.4-4.6-9.7-8.5-13v-8.6l2.8-2.5c-.88-5.9.94-12 4.5-16 6.4-6.9 19-7.1 25-2.2 5.7 5 7.9 12 6.9 18l3 2.7v8.6c-3.9 3.4-8.4 8-8.6 13l-7.3 10-10 .022-.3-.4zm11-18c-6.1 4.8-9.1 2.7-12-.05-2.7 2.8-2.6 6.6.8 10h11c3.3-3.9 3.9-7.6.9-10zm-14-7.5c3.7-6 11-6.2 16 .031 5-4.4 5.3-7 2.2-9.8l-.18-.21h-20l-.12.14c-2.8 3.2-1.9 6.9 2.8 9.8z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 448 B

2
images/steam_login.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233 233"><path d="M120.06 83L81.5 132.6a39 39 0 0 0-24 6.6l-79.2-32.6.6 49.3 61.4 26a40.4 40.4 0 0 0 80-10l52.2-36.4A55.6 55.6 0 0 0 224.77 80c0-29.4-22.8-52-52.76-52.04-30-.06-52 24.39-52 55zM108.6 185a31.2 31.2 0 0 1-56.9 1.6l18 7.4c34.8 11.8 44.6-31 17.7-42.4l-18.6-7.8a31 31 0 0 1 39.8 17.3 31.1 31.1 0 0 1 0 24m64-68.1a37 37 0 1 1 .1-74 37 37 0 1 1-.2 74" fill="#fff"/><circle cy="80" cx="173" r="28" fill="#fff"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233 233"><path fill="#fff" d="M120.06 83 81.5 132.6a39 39 0 0 0-24 6.6l-79.2-32.6.6 49.3 61.4 26a40.4 40.4 0 0 0 80-10l52.2-36.4A55.6 55.6 0 0 0 224.77 80c0-29.4-22.8-52-52.76-52.04-30-.06-52 24.39-52 55zM108.6 185a31.2 31.2 0 0 1-56.9 1.6l18 7.4c34.8 11.8 44.6-31 17.7-42.4l-18.6-7.8a31 31 0 0 1 39.8 17.3 31.1 31.1 0 0 1 0 24m64-68.1a37 37 0 1 1 .1-74 37 37 0 1 1-.2 74"/><circle cx="173" cy="80" r="28" fill="#fff"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 478 B

After

Width:  |  Height:  |  Size: 478 B

Before After
Before After

12
src/pages/demo.rs
View file

@ -38,16 +38,16 @@ impl Page for DemoPage {
table.players { table.players {
thead { thead {
th.team.red {} th.team.red {}
th.class {}
th.name.red { "Name" } th.name.red { "Name" }
th.stat.red { "K" } th.stat.red { "K" }
th.stat.red { "A" } th.stat.red { "A" }
th.stat.red { "D" } th.stat.red { "D" }
th.class {}
th.class {}
th.stat.blue { "D" } th.stat.blue { "D" }
th.stat.blue { "A" } th.stat.blue { "A" }
th.stat.blue { "K" } th.stat.blue { "K" }
th.name.blue { "Name" } th.name.blue { "Name" }
th.class {}
th.team.blue {} th.team.blue {}
} }
tbody { tbody {
@ -55,34 +55,34 @@ impl Page for DemoPage {
tr { tr {
td.team.red {} td.team.red {}
@if let Some(player) = player_pair.as_ref().left() { @if let Some(player) = player_pair.as_ref().left() {
td.class.red.(player.class) {}
td.name.red { td.name.red {
a href = (player.steam_id.profile_link()) { (player.name) } a href = (player.steam_id.profile_link()) { (player.name) }
} }
td.stat.red { (player.kills.unwrap_or_default()) } td.stat.red { (player.kills.unwrap_or_default()) }
td.stat.red { (player.assists.unwrap_or_default()) } td.stat.red { (player.assists.unwrap_or_default()) }
td.stat.red { (player.deaths.unwrap_or_default()) } td.stat.red { (player.deaths.unwrap_or_default()) }
td.class.red.(player.class) {}
} @else { } @else {
td.class {}
td.name.red {} td.name.red {}
td.stat.red {} td.stat.red {}
td.stat.red {} td.stat.red {}
td.stat.red {} td.stat.red {}
td.class {}
} }
@if let Some(player) = player_pair.as_ref().right() { @if let Some(player) = player_pair.as_ref().right() {
td.class.blue.(player.class) {}
td.stat.blue { (player.deaths.unwrap_or_default()) } td.stat.blue { (player.deaths.unwrap_or_default()) }
td.stat.blue { (player.assists.unwrap_or_default()) } td.stat.blue { (player.assists.unwrap_or_default()) }
td.stat.blue { (player.kills.unwrap_or_default()) } td.stat.blue { (player.kills.unwrap_or_default()) }
td.name.blue { td.name.blue {
a href = (player.steam_id.profile_link()) { (player.name) } a href = (player.steam_id.profile_link()) { (player.name) }
} }
td.class.blue.(player.class) {}
} @else { } @else {
td.class {}
td.stat.blue {} td.stat.blue {}
td.stat.blue {} td.stat.blue {}
td.stat.blue {} td.stat.blue {}
td.name.blue {} td.name.blue {}
td.class {}
} }
td.team.blue {} td.team.blue {}
} }

137
style/pages/class-icons.css
View file

@ -1,85 +1,54 @@
table.players { :root {
& .red.class, & .blue.class { --icon-scout: url('inline://images/scout.svg');
background-origin: content-box; --icon-soldier: url('inline://images/soldier.svg');
background-clip: content-box; --icon-pyro: url('inline://images/pyro.svg');
background-repeat: no-repeat; --icon-demo: url('inline://images/demo.svg');
background-image: url('inline://images/classes.png'); --icon-heavy: url('inline://images/heavy.svg');
} --icon-engineer: url('inline://images/engineer.svg');
--icon-medic: url('inline://images/medic.svg');
& .red.class { --icon-sniper: url('inline://images/sniper.svg');
&.spy { --icon-spy: url('inline://images/spy.svg');
background-position: -0px -0px;
}
&.demoman {
background-position: -20px -0px;
}
&.soldier {
background-position: -40px -0px;
}
&.medic {
background-position: -0px -20px;
}
&.pyro {
background-position: -20px -20px;
}
&.sniper {
background-position: -40px -20px;
}
&.engineer {
background-position: -0px -40px;
}
&.heavyweapons {
background-position: -20px -40px;
}
&.scout {
background-position: -40px -40px;
}
}
& .blue.class {
&.spy {
background-position: -10px -0px;
}
&.demoman {
background-position: -30px -0px;
}
&.soldier {
background-position: -50px -0px;
}
&.medic {
background-position: -10px -20px;
}
&.pyro {
background-position: -30px -20px;
}
&.sniper {
background-position: -50px -20px;
}
&.engineer {
background-position: -10px -40px;
}
&.heavyweapons {
background-position: -30px -40px;
}
&.scout {
background-position: -50px -40px;
}
}
} }
.class.scout {
mask-image: var(--icon-scout);
}
.class.soldier {
mask-image: var(--icon-soldier);
}
.class.pyro {
mask-image: var(--icon-pyro);
}
.class.demoman {
mask-image: var(--icon-demo);
}
.class.heavyweapons {
mask-image: var(--icon-heavy);
}
.class.engineer {
mask-image: var(--icon-engineer);
}
.class.medic {
mask-image: var(--icon-medic);
}
.class.sniper {
mask-image: var(--icon-sniper);
}
.class.spy {
mask-image: var(--icon-spy);
}
.red.class {
background: #a75d50;
}
.blue.class {
background: #5b818f;
}
.class {
mask-origin: content-box;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
filter: brightness(60%);
}

14
style/pages/demo.css
View file

@ -146,25 +146,17 @@ table.players {
vertical-align: top; vertical-align: top;
} }
& .class { & .class {
width: 10px; width: 40px;
padding: 7px 0;
vertical-align: top;
}
& .red.class {
padding-right: 0;
}
& .blue.class {
padding-left: 0;
} }
& .blue.name { & .blue.name {
text-align: right; text-align: right;
padding-right: 15px; padding-right: 0;
} }
& .red.name { & .red.name {
text-align: left; text-align: left;
padding-left: 15px; padding-left: 0;
} }
& th { & th {