Source code
Revision control
Copy as Markdown
Other Tools
/* 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/. */
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--AT-viewport-padding: 24px;
--AT-page-padding-block-start: 80px;
--AT-page-padding-block-end: 32px;
/* Provide defaults for when this page is viewed in "toolkit". */
background-color: var(--background-color-canvas, #fff);
color: var(--text-color, #15141a);
/* Variables used in the page layout */
--AT-input-padding: 16px;
/* This is somewhat arbitrary, but works well for the current design. If the computed
header height changes, this will need to be adjusted. */
--AT-header-height: 156px;
--AT-section-height: calc(clamp(300px, 100vh - var(--AT-header-height), 300px) - var(--AT-viewport-padding) * 2);
--AT-content-width: calc(var(--AT-section-height) * 4.5);
--AT-content-max: calc(100vw - var(--AT-viewport-padding) * 2);
--AT-square-button-large: calc(var(--size-item-large) + var(--space-small));
--AT-square-button-small: var(--size-item-large);
--AT-source-textarea-button-inline-padding: calc(var(--AT-square-button-small) + var(--space-small));
--AT-target-textarea-button-block-padding: calc(var(--AT-square-button-large) + var(--space-small));
}
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
visibility: hidden;
margin: 0;
row-gap: var(--space-xxlarge);
padding: var(--AT-page-padding-block-start) var(--AT-viewport-padding) var(--AT-page-padding-block-end);
}
#about-translations-header {
display: flex;
flex-direction: column;
width: min(var(--AT-content-width), var(--AT-content-max));
margin: 0 auto;
row-gap: var(--space-medium);
align-items: flex-start;
justify-content: flex-start;
}
#about-translations-logo-and-h1 {
display: flex;
align-items: center;
justify-content: start;
column-gap: var(--space-small);
}
#about-translations-logo {
width: var(--icon-size-large);
height: var(--icon-size-large);
}
#about-translations-h1 {
margin: 0;
}
#about-translations-main-user-interface {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: var(--space-medium);
width: min(var(--AT-content-width), var(--AT-content-max));
margin: 0 auto;
}
#about-translations-main-user-interface[hidden] {
display: none;
}
.about-translations-select {
--select-min-height: var(--AT-square-button-large);
}
#about-translations-swap-languages-button {
align-self: center;
&[type~="icon"]::part(button) {
width: var(--AT-square-button-large);
height: var(--AT-square-button-large);
background-image: url("chrome://global/skin/icons/swap-horizontal-20.svg");
background-size: 20px;
}
}
#about-translations-clear-button[type~="icon"]::part(button) {
width: var(--AT-square-button-small);
height: var(--AT-square-button-small);
background-image: url("chrome://global/skin/icons/close.svg");
background-size: var(--size-item-small);
}
#about-translations-source-section,
#about-translations-target-section {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-height: var(--AT-section-height);
}
#about-translations-source-section {
background-color: var(--background-color-box);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-medium);
overflow: hidden;
&:focus-within {
outline: var(--focus-outline);
outline-offset: -1px;
}
&:has(moz-button:focus, a:focus) {
outline: none;
}
}
#about-translations-target-section {
background-color: var(--background-color-box);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-medium);
overflow: hidden;
&:focus-within {
outline: var(--focus-outline);
outline-offset: -1px;
}
&:has(moz-button:focus) {
outline: none;
}
&.has-translation-error > #about-translations-target-textarea {
visibility: hidden;
}
}
#about-translations-translation-error-message {
--message-bar-border-radius: 0;
--message-bar-border-width: 0;
padding-inline: var(--space-xsmall);
border-block-end: var(--border-width) solid var(--border-color);
}
.about-translations-section-message {
--message-bar-border-radius: 0;
--message-bar-border-width: 0;
padding-inline: var(--space-xsmall);
border-block-end: var(--border-width) solid var(--border-color);
}
.about-translations-section-message-content {
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: var(--space-large);
}
.about-translations-section-message-subtext {
display: block;
}
.about-translations-section-message-action {
align-self: flex-start;
}
#about-translations-translation-error-subtext {
display: block;
}
#about-translations-translation-error-button {
margin-block-start: var(--space-large);
}
.about-translations-textarea {
flex: 1;
width: 100%;
margin: 0;
padding: var(--AT-input-padding);
overflow: hidden;
resize: none;
}
#about-translations-source-textarea {
anchor-name: --AT-source-textarea-anchor;
border: none;
border-radius: 0;
background-color: transparent;
padding-inline-start: var(--AT-input-padding);
padding-inline-end: var(--AT-source-textarea-button-inline-padding);
&:focus-visible {
outline: none;
}
:dir(ltr) > &:dir(rtl),
:dir(rtl) > &:dir(ltr) {
/*
Reverse the side that reserves space for the anchored clear button
when locale direction differs from textarea direction.
*/
padding-inline-start: var(--AT-source-textarea-button-inline-padding);
padding-inline-end: var(--AT-input-padding);
}
}
#about-translations-clear-button {
position: absolute;
z-index: 1;
position-anchor: --AT-source-textarea-anchor;
inset-block-start: calc(anchor(top) + var(--space-xsmall));
inset-inline-end: calc(anchor(end) + var(--space-xsmall));
&:focus-visible {
outline: none;
}
}
#about-translations-target-textarea {
anchor-name: --AT-target-textarea-anchor;
border: none;
border-radius: 0;
background-color: transparent;
padding-block-end: var(--AT-target-textarea-button-block-padding);
&:focus-visible {
outline: none;
}
}
#about-translations-copy-button {
position: absolute;
z-index: 1;
position-anchor: --AT-target-textarea-anchor;
inset-block-end: calc(anchor(end) + var(--space-small));
inset-inline-start: calc(anchor(start) + var(--space-small));
&:focus-visible {
outline: none;
}
}
#about-translations-copy-button::part(button) {
padding-inline: var(--space-small);
}
#about-translations-empty-section {
width: auto;
height: auto;
}
@media (max-width: 1200px) {
:root {
--AT-page-padding-block-start: 32px;
}
#about-translations-main-user-interface {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto auto auto;
margin: 0;
width: 100%;
gap: var(--space-medium);
max-width: calc(100vw - var(--AT-viewport-padding) * 2);
}
#about-translations-header {
margin: 0;
width: 100%;
max-width: calc(100vw - var(--AT-viewport-padding) * 2);
}
#about-translations-source-select {
grid-column: 1;
grid-row: 1;
}
#about-translations-swap-languages-button {
grid-column: 2;
grid-row: 1;
}
#about-translations-target-select {
grid-column: 3;
grid-row: 1;
}
#about-translations-empty-section {
display: none;
}
#about-translations-source-section {
grid-column: 1 / -1;
grid-row: 2;
}
#about-translations-target-section {
grid-column: 1 / -1;
grid-row: 3;
}
}