Skip to content
This repository was archived by the owner on Sep 10, 2024. It is now read-only.

Commit b0fb328

Browse files
sandhosesandhose
committed
Compoundify the consent screens
1 parent f6303be commit b0fb328

File tree

9 files changed

+331
-90
lines changed

9 files changed

+331
-90
lines changed

‎crates/templates/src/functions.rs‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@
1414

1515
//! Additional functions, tests and filters used in templates
1616
17-
use std::{collections::HashMap, str::FromStr};
17+
use std::{
18+
collections::{BTreeSet, HashMap},
19+
str::FromStr,
20+
};
1821

1922
use camino::Utf8Path;
2023
use mas_router::UrlBuilder;
@@ -196,6 +199,12 @@ impl tera::Function for IncludeAsset {
196199
let path = args.get("path").ok_or(tera::Error::msg(
197200
"Function `include_asset` was missing parameter `path`",
198201
))?;
202+
203+
let preload = args
204+
.get("preload")
205+
.and_then(Value::as_bool)
206+
.unwrap_or(false);
207+
199208
let path: &Utf8Path = path
200209
.as_str()
201210
.ok_or_else(|| {
@@ -212,12 +221,16 @@ impl tera::Function for IncludeAsset {
212221
)
213222
})?;
214223

215-
let preloads = self.vite_manifest.preload_for(path).map_err(|e| {
216-
tera::Error::chain(
217-
"Invalid assets manifest while calling function `include_asset`",
218-
e.to_string(),
219-
)
220-
})?;
224+
let preloads = if preload {
225+
self.vite_manifest.preload_for(path).map_err(|e| {
226+
tera::Error::chain(
227+
"Invalid assets manifest while calling function `include_asset`",
228+
e.to_string(),
229+
)
230+
})?
231+
} else {
232+
BTreeSet::new()
233+
};
221234

222235
let tags: Vec<String> = preloads
223236
.iter()

‎frontend/src/templates.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,94 @@ body {
3838
color: var(--cpd-color-text-primary);
3939
letter-spacing: var(--cpd-font-letter-spacing-body-md);
4040
}
41+
42+
.cpd-text-body-lg-regular {
43+
font: var(--cpd-font-body-lg-regular);
44+
letter-spacing: var(--cpd-font-letter-spacing-body-lg);
45+
}
46+
47+
.cpd-text-heading-xl-semibold {
48+
font: var(--cpd-font-heading-xl-semibold);
49+
letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
50+
}
51+
52+
.cpd-text-body-md-regular {
53+
font: var(--cpd-font-body-md-regular);
54+
letter-spacing: var(--cpd-font-letter-spacing-body-md);
55+
}
56+
57+
.cpd-text-primary {
58+
color: var(--cpd-color-text-primary);
59+
}
60+
61+
.cpd-text-secondary {
62+
color: var(--cpd-color-text-secondary);
63+
}
64+
65+
.consent-client-icon {
66+
display: block;
67+
height: var(--cpd-space-16x);
68+
width: var(--cpd-space-16x);
69+
margin: 0 auto;
70+
71+
&.generic {
72+
background-color: var(--cpd-color-bg-subtle-secondary);
73+
border-radius: var(--cpd-radius-pill-effect);
74+
color: var(--cpd-color-icon-primary);
75+
76+
& svg {
77+
margin: var(--cpd-space-4x);
78+
height: var(--cpd-space-8x);
79+
width: var(--cpd-space-8x);
80+
}
81+
}
82+
83+
&.image {
84+
height: var(--cpd-space-16x);
85+
width: var(--cpd-space-16x);
86+
border-radius: var(--cpd-space-2x);
87+
overflow: hidden;
88+
}
89+
}
90+
91+
.consent-scope-list {
92+
--border-radius: var(--cpd-space-4x);
93+
& ul {
94+
display: flex;
95+
flex-direction: column;
96+
gap: var(--cpd-space-1x);
97+
98+
& > li {
99+
font: var(--cpd-font-body-md-regular);
100+
letter-spacing: var(--cpd-font-letter-spacing-body-md);
101+
color: var(--cpd-color-text-primary);
102+
103+
background-color: var(--cpd-color-bg-subtle-secondary);
104+
padding: var(--cpd-space-3x) var(--cpd-space-5x);
105+
display: flex;
106+
gap: var(--cpd-space-4x);
107+
line-height: var(--cpd-space-6x);
108+
109+
&:first-of-type {
110+
border-top-left-radius: var(--border-radius);
111+
border-top-right-radius: var(--border-radius);
112+
}
113+
114+
&:last-of-type {
115+
border-bottom-left-radius: var(--border-radius);
116+
border-bottom-right-radius: var(--border-radius);
117+
}
118+
119+
& > p {
120+
flex: 1;
121+
}
122+
123+
& > svg {
124+
display: block;
125+
height: var(--cpd-space-6x);
126+
width: var(--cpd-space-6x);
127+
color: var(--cpd-color-icon-quaternary);
128+
}
129+
}
130+
}
131+
}

‎templates/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
handleChange(query);
3939
})();
4040
</script>
41-
{{ include_asset(path='src/main.tsx') | indent(prefix=" ") | safe }}
41+
{{ include_asset(path='src/main.tsx', preload=true) | indent(prefix=" ") | safe }}
4242
</head>
4343

4444
<body>

‎templates/base.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
{% import "components/logout.html" as logout %}
2121
{% import "components/navbar.html" as navbar %}
2222
{% import "components/errors.html" as errors %}
23+
{% import "components/icon.html" as icon %}
2324
{% import "components/scope.html" as scope %}
2425

2526
<!DOCTYPE html>
@@ -28,7 +29,7 @@
2829
<meta charset="utf-8">
2930
<title>{% block title %}matrix-authentication-service{% endblock title %}</title>
3031
<meta name="viewport" content="width=device-width, initial-scale=1">
31-
{{ include_asset(path='src/templates.css') | indent(prefix=" ") | safe }}
32+
{{ include_asset(path='src/templates.css', preload=true) | indent(prefix=" ") | safe }}
3233
</head>
3334
<body class="flex flex-col min-h-screen">
3435
{% block content %}{% endblock content %}

‎templates/components/back_to_client.html‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,24 @@
1414
limitations under the License.
1515
#}
1616

17-
{% macro link(text, uri, mode, params, kind="primary") %}
17+
{% macro link(text, uri, mode, params, type="button", kind="primary") %}
18+
{% if type == "button" %}
19+
{% set class = "cpd-button" %}
20+
{% elif type == "link" %}
21+
{% set class = "cpd-link" %}
22+
{% else %}
23+
{{ throw(message="Invalid type") }}
24+
{% endif %}
25+
1826
{% if mode == "form_post" %}
1927
<form method="post" action="{{ uri }}">
2028
{% for key, value in params %}
2129
<input type="hidden" name="{{ key }}" value="{{ value }}" />
2230
{% endfor %}
23-
<button class="cpd-button" data-kind="{{ kind }}" data-size="lg" type="submit">{{ text }}</button>
31+
<button class="{{ class }}" data-kind="{{ kind }}" data-size="lg" type="submit">{{ text }}</button>
2432
</form>
2533
{% elif mode == "fragment" or mode == "query" %}
26-
<a class="cpd-button" data-kind="{{ kind }}" data-size="lg" href="{{ add_params_to_url(uri=uri, mode=mode, params=params) }}">{{ text }}</a>
34+
<a class="{{ class }}" data-kind="{{ kind }}" data-size="lg" href="{{ add_params_to_url(uri=uri, mode=mode, params=params) }}">{{ text }}</a>
2735
{% else %}
2836
{{ throw(message="Invalid mode") }}
2937
{% endif %}

‎templates/components/icon.html‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
{#
2+
Copyright 2023 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
#}
16+
17+
{# Regenrate with the following shell script:
18+
19+
for i in frontend/node_modules/@vector-im/compound-design-tokens/assets/web/icons/*.svg; do
20+
NAME=$(basename "$i" | sed 's/\.svg//' | tr '-' '_')
21+
CONTENT=$(cat "$i")
22+
cat <<EOF
23+
{% macro ${NAME}() %}
24+
${CONTENT}
25+
{% endmacro %}
26+
27+
EOF
28+
done
29+
30+
#}
31+
32+
{% macro chat() %}
33+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
34+
<path fill="currentColor" d="m2.975 16.3-1.45 4.95a.936.936 0 0 0 .25 1 .936.936 0 0 0 1 .25l4.95-1.45a10.23 10.23 0 0 0 2.1.712c.717.159 1.45.238 2.2.238a9.738 9.738 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.612-1.958 2.137-3.175a9.738 9.738 0 0 0 .788-3.9 9.738 9.738 0 0 0-.787-3.9A10.099 10.099 0 0 0 19.1 4.925c-.9-.9-1.958-1.612-3.175-2.137a9.738 9.738 0 0 0-3.9-.788 9.738 9.738 0 0 0-3.9.788A10.099 10.099 0 0 0 4.95 4.925c-.9.9-1.613 1.958-2.138 3.175a9.738 9.738 0 0 0-.787 3.9 10.179 10.179 0 0 0 .95 4.3Z"/>
35+
</svg>
36+
{% endmacro %}
37+
38+
{% macro check_circle() %}
39+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
40+
<path fill="currentColor" d="m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"/>
41+
</svg>
42+
{% endmacro %}
43+
44+
{% macro check() %}
45+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
46+
<path fill="currentColor" d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"/>
47+
</svg>
48+
{% endmacro %}
49+
50+
{% macro chevron() %}
51+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
52+
<path fill="currentColor" d="M12 14.95c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212L6.675 10.05a.892.892 0 0 1-.263-.688.977.977 0 0 1 .288-.687.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.925-3.925a.892.892 0 0 1 .688-.263.977.977 0 0 1 .687.288.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"/>
53+
</svg>
54+
{% endmacro %}
55+
56+
{% macro close() %}
57+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
58+
<path fill="currentColor" d="m12 13.4-4.9 4.9a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l4.9-4.9-4.9-4.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.9 4.9 4.9-4.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L13.4 12l4.9 4.9a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275L12 13.4Z"/>
59+
</svg>
60+
{% endmacro %}
61+
62+
{% macro computer() %}
63+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
64+
<path fill="currentColor" d="M4 18c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 16V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h16c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v11c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 18H4Zm0-2h16V5H4v11Zm-2 5a.967.967 0 0 1-.712-.288A.968.968 0 0 1 1 20c0-.283.096-.52.288-.712A.967.967 0 0 1 2 19h20c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 22 21H2Z"/>
65+
</svg>
66+
{% endmacro %}
67+
68+
{% macro delete() %}
69+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
70+
<path fill="currentColor" d="M7 21c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 19V6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 4 5c0-.283.096-.52.287-.713A.968.968 0 0 1 5 4h4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 10 3h4a.97.97 0 0 1 .713.288A.968.968 0 0 1 15 4h4a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 6v13c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 21H7Zm2-5c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 11 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 10 8a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 9v7Zm4 0c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 15 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 14 8a.968.968 0 0 0-.713.287A.967.967 0 0 0 13 9v7Z"/>
71+
</svg>
72+
{% endmacro %}
73+
74+
{% macro error() %}
75+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
76+
<path fill="currentColor" d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"/>
77+
</svg>
78+
{% endmacro %}
79+
80+
{% macro info() %}
81+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
82+
<path fill="currentColor" d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"/>
83+
</svg>
84+
{% endmacro %}
85+
86+
{% macro lock() %}
87+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
88+
<path fill="currentColor" d="M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 8h1V6c0-1.383.487-2.563 1.463-3.538C9.438 1.487 10.617 1 12 1s2.563.488 3.537 1.462C16.512 3.438 17 4.617 17 6v2h1c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v10c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6ZM9 8h6V6c0-.833-.292-1.542-.875-2.125A2.893 2.893 0 0 0 12 3c-.833 0-1.542.292-2.125.875A2.893 2.893 0 0 0 9 6v2Z"/>
89+
</svg>
90+
{% endmacro %}
91+
92+
{% macro mobile() %}
93+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
94+
<path fill="currentColor" d="M7 23c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 21V3c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 7 1h10c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v18c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 23H7Zm0-5h10V6H7v12Z"/>
95+
</svg>
96+
{% endmacro %}
97+
98+
{% macro thread() %}
99+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="currentColor" d="M5 5.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5H5ZM5 8.25a.75.75 0 0 0 0 1.5h4a.75.75 0 1 0 0-1.5H5Z"/><path fill="currentColor" fill-rule="evenodd" d="M3 .25A2.75 2.75 0 0 0 .25 3v14a.75.75 0 0 0 1.2.6L4.916 15c.217-.162.48-.25.75-.25H15A2.75 2.75 0 0 0 17.75 12V3A2.75 2.75 0 0 0 15 .25H3ZM1.75 3c0-.69.56-1.25 1.25-1.25h12c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25H5.666a2.75 2.75 0 0 0-1.65.55L1.75 15.5V3Z" clip-rule="evenodd"/></svg>
100+
{% endmacro %}
101+
102+
{% macro user() %}
103+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
104+
<path fill="currentColor" stroke="currentColor" stroke-width=".025" d="m5.84 17.108.008.01.01-.008a10.422 10.422 0 0 1 2.846-1.536A9.725 9.725 0 0 1 12 15.012c1.149 0 2.247.188 3.296.562a10.42 10.42 0 0 1 2.846 1.536l.01.007.008-.009a7.742 7.742 0 0 0 1.364-2.329A7.85 7.85 0 0 0 20.012 12c0-2.22-.78-4.11-2.34-5.671C16.11 4.768 14.22 3.988 12 3.988c-2.22 0-4.11.78-5.671 2.34C4.768 7.89 3.988 9.78 3.988 12c0 .985.162 1.911.488 2.78.325.867.78 1.644 1.364 2.328Zm6.16-4.12c-.98 0-1.806-.337-2.479-1.01-.672-.672-1.009-1.498-1.009-2.478 0-.98.337-1.806 1.01-2.479.672-.672 1.498-1.008 2.478-1.008.98 0 1.806.336 2.479 1.008.672.673 1.009 1.499 1.009 2.479s-.337 1.806-1.01 2.479c-.672.672-1.498 1.009-2.478 1.009Zm0 9a9.725 9.725 0 0 1-3.895-.787 10.087 10.087 0 0 1-3.171-2.135 10.087 10.087 0 0 1-2.135-3.171A9.725 9.725 0 0 1 2.013 12c0-1.382.262-2.68.786-3.895a10.086 10.086 0 0 1 2.135-3.171 10.086 10.086 0 0 1 3.171-2.135A9.725 9.725 0 0 1 12 2.013c1.382 0 2.68.262 3.895.786a10.087 10.087 0 0 1 3.171 2.135c.899.899 1.61 1.956 2.135 3.171A9.725 9.725 0 0 1 21.988 12a9.73 9.73 0 0 1-.787 3.895 10.087 10.087 0 0 1-2.135 3.171 10.087 10.087 0 0 1-3.171 2.135 9.725 9.725 0 0 1-3.895.787Z"/>
105+
</svg>
106+
{% endmacro %}
107+
108+
{% macro visibility_invisible() %}
109+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
110+
<path fill="currentColor" d="m19.3 16.5-3.2-3.2c.133-.283.233-.57.3-.863.067-.291.1-.604.1-.937 0-1.25-.438-2.312-1.313-3.187C14.313 7.438 13.25 7 12 7a4.2 4.2 0 0 0-.938.1 4.24 4.24 0 0 0-.862.3L7.65 4.85A11.08 11.08 0 0 1 12 4c2.383 0 4.525.63 6.425 1.888 1.9 1.258 3.325 2.895 4.275 4.912.05.083.083.188.1.313s.025.254.025.387a1.972 1.972 0 0 1-.125.7 11.49 11.49 0 0 1-1.438 2.375A10.467 10.467 0 0 1 19.3 16.5Zm-.2 5.4-3.5-3.45c-.583.183-1.17.32-1.762.413-.592.091-1.205.137-1.838.137-2.383 0-4.525-.63-6.425-1.887-1.9-1.259-3.325-2.896-4.275-4.913a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.762.796.796 0 0 1 .1-.3c.35-.75.767-1.442 1.25-2.075A13.291 13.291 0 0 1 4.15 7L2.075 4.9a.933.933 0 0 1-.275-.687c0-.275.1-.513.3-.713a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l17 17c.183.183.28.413.288.688a.93.93 0 0 1-.288.712.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275ZM12 16a4.9 4.9 0 0 0 .512-.025c.159-.017.33-.05.513-.1l-5.4-5.4c-.05.183-.083.354-.1.513a4.81 4.81 0 0 0-.025.512c0 1.25.438 2.313 1.313 3.188C9.687 15.562 10.75 16 12 16Zm2.65-4.15-3-3c.95-.15 1.725.117 2.325.8.6.683.825 1.417.675 2.2Z"/>
111+
</svg>
112+
{% endmacro %}
113+
114+
{% macro visibility_visible() %}
115+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
116+
<path fill="currentColor" d="M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.313.438-3.188 1.313C7.939 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.687 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.262-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962.05.083.083.188.1.313a2.925 2.925 0 0 1 0 .774.812.812 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Z"/>
117+
</svg>
118+
{% endmacro %}
119+
120+
{% macro web_browser() %}
121+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
122+
<path fill="currentColor" d="M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"/>
123+
</svg>
124+
{% endmacro %}

0 commit comments

Comments
 (0)