feat(i18n): expand catalog runtime and developer tooling
- add Intl-backed locale definitions, formatters, catalog loaders, and runtime hooks\n- compile hashed production catalogs from package-scoped catalog sources\n- drive Lingui extraction and compilation directly from project JSON config\n- redesign the devtool with localized controls, draggable persistence, settings, navigation, copy actions, ANSI output, and fullscreen support\n- extend repository APIs, CLI coverage, documentation, and runtime tests
This commit is contained in:
Maofeng
@@ -3,6 +3,9 @@
|
||||
--i18n-muted: color-mix(in srgb, currentColor 62%, transparent);
|
||||
--i18n-surface: color-mix(in srgb, Canvas 96%, currentColor 4%);
|
||||
color: CanvasText;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
font-family:
|
||||
Inter,
|
||||
ui-sans-serif,
|
||||
@@ -33,8 +36,21 @@
|
||||
}
|
||||
|
||||
.i18n-message-panel__search {
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-width: 12rem;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.i18n-message-panel__search > svg {
|
||||
position: absolute;
|
||||
left: 0.75rem;
|
||||
z-index: 1;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: var(--i18n-muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.i18n-message-panel input,
|
||||
@@ -55,16 +71,24 @@
|
||||
|
||||
.i18n-message-panel input[type="search"] {
|
||||
height: 2.5rem;
|
||||
padding: 0 0.75rem;
|
||||
padding: 0 3.25rem 0 2.25rem;
|
||||
}
|
||||
|
||||
.i18n-message-panel textarea {
|
||||
min-height: 5.5rem;
|
||||
min-height: 3.25rem;
|
||||
max-height: 14rem;
|
||||
field-sizing: content;
|
||||
resize: vertical;
|
||||
padding: 0.75rem;
|
||||
padding: 0.65rem 0.75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.i18n-message-panel textarea:read-only {
|
||||
background: color-mix(in srgb, Canvas 92%, currentColor 8%);
|
||||
color: var(--i18n-muted);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.i18n-message-panel input[type="search"]:focus,
|
||||
.i18n-message-panel textarea:focus {
|
||||
border-color: AccentColor;
|
||||
@@ -72,32 +96,464 @@
|
||||
}
|
||||
|
||||
.i18n-message-panel__toggle {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.25rem 0.4rem;
|
||||
border-radius: 0.45rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
font-size: 0.875rem;
|
||||
transition: background-color 120ms ease;
|
||||
}
|
||||
|
||||
.i18n-message-panel__toggle:hover {
|
||||
background: color-mix(in srgb, Canvas 90%, currentColor 10%);
|
||||
}
|
||||
|
||||
.i18n-message-panel__toggle:active {
|
||||
background: color-mix(in srgb, Canvas 84%, currentColor 16%);
|
||||
}
|
||||
|
||||
.i18n-message-panel__toggle input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.i18n-message-panel__checkbox {
|
||||
display: inline-grid;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
flex: 0 0 1.125rem;
|
||||
place-items: center;
|
||||
border: 1px solid var(--i18n-border);
|
||||
border-radius: 0.25rem;
|
||||
background: Canvas;
|
||||
color: white;
|
||||
transition:
|
||||
background-color 120ms ease,
|
||||
border-color 120ms ease,
|
||||
box-shadow 120ms ease,
|
||||
transform 80ms ease;
|
||||
}
|
||||
|
||||
.i18n-message-panel__checkbox svg {
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
opacity: 0;
|
||||
stroke-width: 3;
|
||||
transform: scale(0.6);
|
||||
transition:
|
||||
opacity 100ms ease,
|
||||
transform 120ms ease;
|
||||
}
|
||||
|
||||
.i18n-message-panel__toggle input:checked + .i18n-message-panel__checkbox {
|
||||
border-color: AccentColor;
|
||||
background: AccentColor;
|
||||
}
|
||||
|
||||
.i18n-message-panel__toggle input:checked + .i18n-message-panel__checkbox svg {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.i18n-message-panel__toggle
|
||||
input:focus-visible
|
||||
+ .i18n-message-panel__checkbox {
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, AccentColor 22%, transparent);
|
||||
}
|
||||
|
||||
.i18n-message-panel__toggle:active .i18n-message-panel__checkbox {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.i18n-message-panel__count {
|
||||
display: inline-grid;
|
||||
min-width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
place-items: center;
|
||||
padding: 0 0.35rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, Canvas 86%, currentColor 14%);
|
||||
color: var(--i18n-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.8125rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.i18n-message-panel__list {
|
||||
.i18n-message-panel__result-count {
|
||||
position: absolute;
|
||||
right: 0.55rem;
|
||||
display: inline-grid;
|
||||
min-width: 1.75rem;
|
||||
height: 1.5rem;
|
||||
place-items: center;
|
||||
padding: 0 0.4rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, Canvas 84%, currentColor 16%);
|
||||
color: var(--i18n-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.75rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.i18n-message-workspace {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
min-height: 30rem;
|
||||
flex: 1;
|
||||
grid-template-columns: minmax(18rem, min(28rem, 44%)) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.i18n-message-navigation,
|
||||
.i18n-message-workspace__editor {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.i18n-message-navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.65rem;
|
||||
padding: 0.75rem;
|
||||
border-right: 1px solid var(--i18n-border);
|
||||
background: color-mix(in srgb, Canvas 94%, currentColor 6%);
|
||||
}
|
||||
|
||||
.i18n-message-workspace__editor {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.i18n-message-workspace__editor-list {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.i18n-message-workspace__empty {
|
||||
display: grid;
|
||||
min-height: 100%;
|
||||
place-items: center;
|
||||
padding: 2rem;
|
||||
color: var(--i18n-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.i18n-message-package {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
flex: none;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--i18n-border);
|
||||
border-radius: 0.75rem;
|
||||
background: color-mix(in srgb, Canvas 91%, currentColor 9%);
|
||||
box-shadow: 0 0.15rem 0.5rem rgb(0 0 0 / 4%);
|
||||
}
|
||||
|
||||
.i18n-message-package__messages[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.i18n-message-package__messages {
|
||||
position: relative;
|
||||
display: grid;
|
||||
padding: 0.45rem 0.45rem 0.55rem 0.7rem;
|
||||
border-top: 1px solid var(--i18n-border);
|
||||
background: color-mix(in srgb, Canvas 96%, currentColor 4%);
|
||||
}
|
||||
|
||||
.i18n-message-package__empty {
|
||||
display: grid;
|
||||
min-height: 5rem;
|
||||
place-items: center;
|
||||
padding: 1rem;
|
||||
border: 1px dashed color-mix(in srgb, currentColor 18%, transparent);
|
||||
border-radius: 0.55rem;
|
||||
background: color-mix(in srgb, Canvas 80%, transparent);
|
||||
color: var(--i18n-muted);
|
||||
font-size: 0.8125rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.i18n-message-package__header {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 3rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem;
|
||||
background: color-mix(in srgb, Canvas 86%, currentColor 14%);
|
||||
}
|
||||
|
||||
.i18n-message-panel button.i18n-message-package__identity {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 2.35rem;
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
gap: 0.6rem;
|
||||
padding: 0.25rem 0.35rem;
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.i18n-message-panel button.i18n-message-package__identity:hover:not(:disabled),
|
||||
.i18n-message-panel
|
||||
.i18n-message-package[data-selected]
|
||||
button.i18n-message-package__identity {
|
||||
background: color-mix(in srgb, Canvas 80%, currentColor 20%);
|
||||
}
|
||||
|
||||
.i18n-message-panel button.i18n-message-package__identity:focus-visible,
|
||||
.i18n-message-panel button.i18n-message-package__disclosure:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px AccentColor;
|
||||
}
|
||||
|
||||
.i18n-message-package__identity code {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.i18n-message-package__icon {
|
||||
display: inline-grid;
|
||||
width: 1.9rem;
|
||||
height: 1.9rem;
|
||||
flex: 0 0 1.9rem;
|
||||
place-items: center;
|
||||
border-radius: 0.5rem;
|
||||
background: color-mix(in srgb, AccentColor 14%, Canvas);
|
||||
color: AccentColor;
|
||||
}
|
||||
|
||||
.i18n-message-package__icon svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.i18n-message-package__counts,
|
||||
.i18n-message-package__controls {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.i18n-message-package__counts {
|
||||
flex: none;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.i18n-message-package__controls {
|
||||
flex: none;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.i18n-message-panel button.i18n-message-package__disclosure {
|
||||
width: 2rem;
|
||||
min-height: 0;
|
||||
height: 2rem;
|
||||
flex: 0 0 2rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0.45rem;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.i18n-message-package__chevron {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex: 0 0 1rem;
|
||||
color: var(--i18n-muted);
|
||||
transition: rotate 140ms ease;
|
||||
}
|
||||
|
||||
.i18n-message-package__disclosure[aria-expanded="false"]
|
||||
.i18n-message-package__chevron {
|
||||
rotate: -90deg;
|
||||
}
|
||||
|
||||
.i18n-message-package__disclosure[aria-expanded="false"]:dir(rtl)
|
||||
.i18n-message-package__chevron {
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
.i18n-message-package__counts span {
|
||||
padding: 0.2rem 0.45rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, Canvas 84%, currentColor 16%);
|
||||
color: var(--i18n-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.6875rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.i18n-message-package__counts span[data-missing] {
|
||||
background: color-mix(in srgb, #e8a317 14%, Canvas);
|
||||
color: color-mix(in srgb, #b36b00 86%, CanvasText);
|
||||
}
|
||||
|
||||
.i18n-message-tree__branch {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.i18n-message-tree__branch .i18n-message-tree__branch {
|
||||
margin-block: 0.15rem 0.25rem;
|
||||
margin-inline-start: 0.85rem;
|
||||
padding-inline-start: 0.75rem;
|
||||
border-inline-start: 1px solid
|
||||
color-mix(in srgb, currentColor 18%, transparent);
|
||||
}
|
||||
|
||||
.i18n-message-tree__branch li {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.i18n-message-tree__namespace-row {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: 1.65rem minmax(0, 1fr);
|
||||
align-items: center;
|
||||
border-radius: 0.5rem;
|
||||
transition:
|
||||
color 120ms ease,
|
||||
background-color 120ms ease;
|
||||
}
|
||||
|
||||
.i18n-message-tree__namespace-row:hover {
|
||||
background: color-mix(in srgb, Canvas 82%, currentColor 18%);
|
||||
}
|
||||
|
||||
.i18n-message-tree__namespace-row[data-selected] {
|
||||
background: color-mix(in srgb, AccentColor 14%, Canvas);
|
||||
color: color-mix(in srgb, AccentColor 82%, CanvasText);
|
||||
}
|
||||
|
||||
.i18n-message-panel button.i18n-message-tree__disclosure {
|
||||
width: 1.65rem;
|
||||
min-height: 1.9rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0.4rem;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.i18n-message-panel button.i18n-message-tree__disclosure:focus-visible,
|
||||
.i18n-message-panel button.i18n-message-tree__namespace:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px AccentColor;
|
||||
}
|
||||
|
||||
.i18n-message-panel button.i18n-message-tree__namespace {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 2.15rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.45rem;
|
||||
padding: 0.35rem 0.5rem 0.35rem 0.2rem;
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.i18n-message-panel button.i18n-message-tree__namespace[data-selectable] {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.i18n-message-tree__namespace > span {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.i18n-message-tree__namespace small {
|
||||
margin-inline-start: auto;
|
||||
color: var(--i18n-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
.i18n-message-tree__namespace > svg {
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
flex: 0 0 0.9rem;
|
||||
color: var(--i18n-muted);
|
||||
}
|
||||
|
||||
.i18n-message-tree__chevron {
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
color: var(--i18n-muted);
|
||||
transition: rotate 120ms ease;
|
||||
}
|
||||
|
||||
.i18n-message-tree__disclosure[aria-expanded="false"]
|
||||
.i18n-message-tree__chevron {
|
||||
rotate: -90deg;
|
||||
}
|
||||
|
||||
.i18n-message-tree__disclosure[aria-expanded="false"]:dir(rtl)
|
||||
.i18n-message-tree__chevron {
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
.i18n-message {
|
||||
display: grid;
|
||||
gap: 0.875rem;
|
||||
padding: 1rem;
|
||||
gap: 0.65rem;
|
||||
overflow: visible;
|
||||
padding: 0.875rem;
|
||||
border: 1px solid var(--i18n-border);
|
||||
border-radius: 0.875rem;
|
||||
border-radius: 0.75rem;
|
||||
background: var(--i18n-surface);
|
||||
transition:
|
||||
border-color 120ms ease,
|
||||
box-shadow 120ms ease,
|
||||
background-color 120ms ease;
|
||||
}
|
||||
|
||||
.i18n-message:not(:has(.i18n-message-copy__trigger[aria-expanded="true"])) {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-block-size: 13rem;
|
||||
}
|
||||
|
||||
.i18n-message:hover {
|
||||
border-color: color-mix(in srgb, currentColor 22%, transparent);
|
||||
}
|
||||
|
||||
.i18n-message:focus-within {
|
||||
border-color: color-mix(in srgb, AccentColor 55%, var(--i18n-border));
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, AccentColor 10%, transparent);
|
||||
}
|
||||
|
||||
.i18n-message[data-dirty] {
|
||||
border-color: color-mix(in srgb, AccentColor 42%, var(--i18n-border));
|
||||
}
|
||||
|
||||
.i18n-message[data-missing] {
|
||||
@@ -108,6 +564,210 @@
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.i18n-message__source-toolbar {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
margin: -0.875rem -0.875rem 0;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-bottom: 1px solid var(--i18n-border);
|
||||
border-radius: 0.75rem 0.75rem 0 0;
|
||||
background: color-mix(in srgb, Canvas 88%, currentColor 12%);
|
||||
}
|
||||
|
||||
.i18n-message__source-location {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: var(--i18n-muted);
|
||||
}
|
||||
|
||||
.i18n-message__source-location > svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex: 0 0 1rem;
|
||||
}
|
||||
|
||||
.i18n-message__source-location > code {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 0.75rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.i18n-message__source-count {
|
||||
display: inline-grid;
|
||||
min-width: 1.35rem;
|
||||
height: 1.25rem;
|
||||
flex: none;
|
||||
place-items: center;
|
||||
padding: 0 0.3rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, Canvas 78%, currentColor 22%);
|
||||
color: var(--i18n-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
.i18n-message-copy {
|
||||
position: relative;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.i18n-message-panel button.i18n-message-copy__trigger {
|
||||
width: auto;
|
||||
min-height: 1.625rem;
|
||||
gap: 0.15rem;
|
||||
padding: 0 0.25rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.i18n-message-panel button.i18n-message-copy__trigger:hover:not(:disabled),
|
||||
.i18n-message-panel button.i18n-message-copy__trigger[aria-expanded="true"] {
|
||||
background: transparent;
|
||||
color: color-mix(in srgb, currentColor 78%, AccentColor 22%);
|
||||
}
|
||||
|
||||
.i18n-message-copy__trigger[data-state="copied"] {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.i18n-message-copy__trigger[data-state="error"] {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.i18n-message-copy__chevron {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
transition: rotate 120ms ease;
|
||||
}
|
||||
|
||||
.i18n-message-copy__trigger[aria-expanded="true"] .i18n-message-copy__chevron {
|
||||
rotate: 180deg;
|
||||
}
|
||||
|
||||
.i18n-message-copy__menu {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: calc(100% + 0.35rem);
|
||||
right: 0;
|
||||
display: grid;
|
||||
width: min(18rem, calc(100vw - 4rem));
|
||||
padding: 0.3rem;
|
||||
border: 1px solid var(--i18n-border);
|
||||
border-radius: 0.65rem;
|
||||
background: Canvas;
|
||||
box-shadow:
|
||||
0 0.75rem 2.5rem rgb(0 0 0 / 14%),
|
||||
0 0.125rem 0.5rem rgb(0 0 0 / 8%);
|
||||
}
|
||||
|
||||
.i18n-message-panel .i18n-message-copy__menu > button {
|
||||
width: 100%;
|
||||
min-height: 2.25rem;
|
||||
justify-content: flex-start;
|
||||
padding: 0.45rem 0.55rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.i18n-message-panel .i18n-message-copy__menu > button:hover:not(:disabled),
|
||||
.i18n-message-panel .i18n-message-copy__menu > button:focus-visible {
|
||||
outline: 2px solid AccentColor;
|
||||
outline-offset: -2px;
|
||||
background: color-mix(in srgb, Canvas 88%, currentColor 12%);
|
||||
}
|
||||
|
||||
.i18n-message-panel .i18n-message-copy__menu > button:hover:not(:disabled) {
|
||||
outline-color: transparent;
|
||||
}
|
||||
|
||||
.i18n-message-copy__menu > button:has(code) {
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.i18n-message-copy__menu button code {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
color: var(--i18n-muted);
|
||||
font-size: 0.6875rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.i18n-message-copy__separator {
|
||||
height: 1px;
|
||||
margin: 0.3rem -0.3rem;
|
||||
background: var(--i18n-border);
|
||||
}
|
||||
|
||||
.i18n-message-copy__label {
|
||||
padding: 0.35rem 0.55rem 0.2rem;
|
||||
color: var(--i18n-muted);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.i18n-message-copy__feedback {
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
top: calc(100% + 0.35rem);
|
||||
right: 0;
|
||||
display: inline-flex;
|
||||
min-height: 1.875rem;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.35rem 0.55rem;
|
||||
border: 1px solid var(--i18n-border);
|
||||
border-radius: 0.5rem;
|
||||
background: Canvas;
|
||||
box-shadow:
|
||||
0 0.5rem 1.5rem rgb(0 0 0 / 12%),
|
||||
0 0.125rem 0.375rem rgb(0 0 0 / 7%);
|
||||
color: var(--i18n-muted);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
animation: i18n-message-copy-feedback-in 140ms ease-out;
|
||||
}
|
||||
|
||||
.i18n-message-copy__feedback[data-state="copied"] {
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.i18n-message-copy__feedback[data-state="error"] {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.i18n-message-copy__feedback > svg {
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
}
|
||||
|
||||
@keyframes i18n-message-copy-feedback-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-0.2rem) scale(0.96);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.i18n-message__header,
|
||||
.i18n-message__actions,
|
||||
.i18n-message__meta {
|
||||
@@ -118,20 +778,31 @@
|
||||
|
||||
.i18n-message__header {
|
||||
justify-content: space-between;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.i18n-message__id {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: color-mix(in srgb, CanvasText 88%, transparent);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.i18n-message__catalog {
|
||||
color: var(--i18n-muted);
|
||||
font-size: 0.75rem;
|
||||
.i18n-message__content {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(10rem, 0.7fr) minmax(14rem, 1.3fr);
|
||||
gap: 0.75rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.i18n-message__source {
|
||||
min-width: 0;
|
||||
padding: 0.45rem 0.25rem;
|
||||
}
|
||||
|
||||
.i18n-message__source p {
|
||||
margin: 0.25rem 0 0;
|
||||
margin: 0.3rem 0 0;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -141,6 +812,9 @@
|
||||
}
|
||||
|
||||
.i18n-message__label {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.4rem;
|
||||
color: var(--i18n-muted);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
@@ -148,24 +822,65 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.i18n-message__label code {
|
||||
padding: 0.05rem 0.3rem;
|
||||
border-radius: 0.25rem;
|
||||
background: color-mix(in srgb, Canvas 80%, currentColor 20%);
|
||||
color: color-mix(in srgb, CanvasText 76%, transparent);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.i18n-message__meta {
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
color: var(--i18n-muted);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.i18n-message__meta span {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.i18n-message__actions {
|
||||
justify-content: flex-end;
|
||||
min-height: 2.25rem;
|
||||
}
|
||||
|
||||
.i18n-message__status {
|
||||
margin-inline-end: auto;
|
||||
color: var(--i18n-muted);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.i18n-message__status[data-state="saved"] {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.i18n-message__status[data-state="error"] {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.i18n-message__status svg {
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
}
|
||||
|
||||
.i18n-message-panel button {
|
||||
display: inline-flex;
|
||||
min-height: 2.25rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0 0.8rem;
|
||||
border: 1px solid var(--i18n-border);
|
||||
border-radius: 0.55rem;
|
||||
@@ -173,10 +888,29 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.i18n-message-panel button svg {
|
||||
width: 0.95rem;
|
||||
height: 0.95rem;
|
||||
}
|
||||
|
||||
.i18n-message-panel button:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, Canvas 90%, currentColor 10%);
|
||||
}
|
||||
|
||||
.i18n-message-panel button.i18n-message__save {
|
||||
border-color: var(--i18n-devtool-primary, #2563eb);
|
||||
background: var(--i18n-devtool-primary, #2563eb);
|
||||
color: var(--i18n-devtool-panel, #fff);
|
||||
}
|
||||
|
||||
.i18n-message-panel button.i18n-message__save:hover:not(:disabled) {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--i18n-devtool-primary, #2563eb) 86%,
|
||||
black
|
||||
);
|
||||
}
|
||||
|
||||
.i18n-message-panel button:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.45;
|
||||
@@ -215,4 +949,33 @@
|
||||
.i18n-message-panel__search {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.i18n-message-package__counts span {
|
||||
padding-inline: 0.35rem;
|
||||
}
|
||||
|
||||
.i18n-message__content {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.i18n-message__source {
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 52rem) {
|
||||
.i18n-message-workspace {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.i18n-message-navigation {
|
||||
max-height: 18rem;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--i18n-border);
|
||||
}
|
||||
|
||||
.i18n-message-workspace__editor {
|
||||
min-height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user