tor-browser

profile-avatar-selector.css (4900B)

---

/* 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/. */

:host {
 /* These z-indexes are used to correctly layer elements in the profiles
  * avatar selection ui */
 --profiles-low-layer: 1;
 --profiles-high-layer: 2;

 --mover-size: 24px;
 --mover-offset: -8px;

 --avatar-selection-width: 100%;
}

.button-group {
 display: flex;
 justify-content: center;

 moz-button::part(button) {
   border-radius: 0;
 }

 moz-button:first-child::part(button) {
   border-end-end-radius: 0;
   border-start-end-radius: 0;
   border-start-start-radius: var(--button-border-radius);
   border-end-start-radius: var(--button-border-radius);
 }

 moz-button:last-child::part(button) {
   border-end-start-radius: 0;
   border-start-start-radius: 0;
   border-end-end-radius: var(--button-border-radius);
   border-start-end-radius: var(--button-border-radius);
 }
}

#avatars::part(inputs) {
 flex-direction: row;
 flex-wrap: wrap;
 gap: var(--space-xxsmall);
 width: 100%;
 justify-content: center;
}

.avatar-button::part(button) {
 --button-icon-fill: transparent;
 --button-icon-stroke: currentColor;

 /* Scale up 16x16 icon (12x12 + 4x4 padding) to 24px for normal display size */
 --icon-size: 24px;
}

#avatar-selector {
 width: 317px;
}

#upload-text {
 color: var(--link-color);
 text-decoration: underline;
}

#content {
 display: flex;
 flex-direction: column;
 gap: var(--space-large);
}

.custom-avatar-add-image-header,
.custom-avatar-crop-header {
 display: flex;
 justify-content: center;
 align-items: center;
 padding-bottom: var(--space-large);
 border-bottom: var(--card-border);
 font-weight: var(--heading-font-weight);

 #back-button {
   margin-inline-end: auto;
 }

 #spacer {
   margin-inline-start: auto;
   width: var(--button-size-icon);
 }
}

.custom-avatar-upload-area,
.custom-avatar-crop-area {
 position: relative;
 width: var(--avatar-selection-width);
 aspect-ratio: 1 / 1;
}

.custom-avatar-upload-area {
 display: flex;
 flex-direction: column;
 justify-content: space-between;

 &:focus-within {
   outline: 1px auto;
 }
}

.custom-avatar-crop-area {
 overflow: scroll;
}

#custom-image-input {
 width: 100%;
 height: 100%;
 position: absolute;
 z-index: var(--profiles-low-layer);
 opacity: 0;
 cursor: pointer;
}

#file-messages {
 width: 100%;
 height: 100%;
 position: absolute;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: var(--space-small);

 > img {
   -moz-context-properties: fill;
   fill: currentColor;
 }
}

#upload-text {
 color: var(--link-color);
 text-decoration: underline;
}

#drag-text {
 font-size: var(--font-size-small);
}

#avatar-selection-container {
 position: sticky;
 inset: 0;
 width: 100%;
 height: 100%;
 z-index: var(--profiles-low-layer);
 overflow: clip;
}

#highlight {
 box-sizing: border-box;
 cursor: move;
 position: relative;
 pointer-events: auto;
 z-index: var(--profiles-high-layer);
 inset: 0;

 border-radius: var(--border-radius-circle);
 outline-offset: var(--focus-outline-offset);
}

#highlight-background {
 width: 100%;
 height: 100%;
 outline: 355px solid rgba(0, 0, 0, 0.7);
 border-radius: var(--border-radius-circle);

 border: 2px dashed rgba(255, 255, 255, 0.8);
 box-sizing: border-box;

 position: relative;
 z-index: -1;

 pointer-events: none;
}

.mover-target {
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 width: var(--mover-size);
 height: var(--mover-size);
 z-index: var(--profiles-high-layer);

 &.direction-topLeft {
   cursor: nwse-resize;
   top: var(--mover-offset);
   left: var(--mover-offset);
 }

 &.direction-topRight {
   cursor: nesw-resize;
   top: var(--mover-offset);
   right: var(--mover-offset);
 }

 &.direction-bottomLeft {
   cursor: nesw-resize;
   bottom: var(--mover-offset);
   left: var(--mover-offset);
 }

 &.direction-bottomRight {
   cursor: nwse-resize;
   bottom: var(--mover-offset);
   right: var(--mover-offset);
 }

 &:hover .mover {
   transform: scale(1.05);
 }

 .mover {
   background-color: white;
   border-radius: var(--border-radius-circle);
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
   transition: transform 125ms cubic-bezier(0.07, 0.95, 0, 1);
   position: relative;
   height: 8px;
   width: 8px;
   pointer-events: none;

   @media (forced-colors) {
     background-color: ButtonText;
   }
 }
}

#custom-avatar-image {
 position: absolute;
 inset: 0;

 &.width-full {
   width: 100%;
 }

 &.height-full {
   height: 100%;
 }
}

.custom-avatar-actions {
 justify-content: center;
}

moz-visual-picker-item {
 --visual-picker-item-border-color: transparent;
}