95 lines
1.8 KiB
CSS
95 lines
1.8 KiB
CSS
/* 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 h2[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);
|
|
margin-inline-end: var(--space-xxlarge);
|
|
}
|
|
|
|
#profile-name-area {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xsmall);
|
|
margin-block: 0 var(--space-large);
|
|
}
|
|
|
|
#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-parent {
|
|
position: relative;
|
|
margin-block-end: var(--space-medium);
|
|
}
|
|
|
|
.message {
|
|
display: inline-flex;
|
|
gap: var(--space-xsmall);
|
|
padding: var(--space-xsmall);
|
|
|
|
position: absolute;
|
|
inset-inline-start: 0;
|
|
|
|
&[hidden] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
> .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);
|
|
}
|