1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@import url("chrome://browser/content/profiles/profiles-pages.css");
#profile-content {
display: flex;
flex-direction: column;
gap: var(--space-xlarge);
}
#profile-content h1[data-l10n-id="edit-profile-page-header"] {
margin-block: 0;
}
#header-avatar {
-moz-context-properties: fill, stroke;
width: var(--header-avatar-size);
height: var(--header-avatar-size);
border-radius: var(--border-radius-circle);
border: var(--card-border);
}
.avatar-header-content {
display: flex;
flex-direction: column;
gap: var(--space-small);
align-items: center;
.avatar-selector-parent {
position: relative;
}
profile-avatar-selector {
position: absolute;
inset-inline-start: -140px;
}
}
#profile-name-area {
display: flex;
flex-direction: column;
gap: var(--space-xsmall);
}
#profile-name-area label {
margin-bottom: var(--space-xsmall);
}
#profile-name {
width: min(400px, 100%);
margin: 0;
&:invalid {
border-color: var(--outline-color-error);
outline-color: var(--outline-color-error);
}
}
.message {
display: inline-flex;
gap: var(--space-xsmall);
padding: var(--space-xsmall);
&[hidden] {
display: none;
}
> .message-icon {
-moz-context-properties: fill, stroke;
fill: currentColor;
stroke: currentColor;
align-self: center;
}
}
#error-icon,
#error-message {
color: var(--icon-color-critical);
}
#saved-icon {
color: var(--icon-color-success);
}
#themes::part(inputs) {
margin-top: var(--space-medium);
}
#avatars::part(inputs) {
margin-top: var(--space-medium);
}
#avatars::part(inputs),
#themes::part(inputs) {
flex-direction: row;
flex-wrap: wrap;
row-gap: var(--space-small);
column-gap: var(--space-medium);
}
|
